/* =========================================================
   Pool Calculator Max
   Cleaned stylesheet
   - organised into logical sections
   - duplicate / conflicting print and mobile rules removed
   - comments added for maintenance
   - current visual style preserved where possible
   ========================================================= */

/* =========================================================
   1. Design tokens
   ========================================================= */
:root{
  --bg:#08121b;
  --bg-2:#0c1824;
  --panel:#112131;
  --panel-2:#16293d;
  --surface:#0f1c29;
  --border:#2a445d;
  --text:#eaf5ff;
  --muted:#9bb1c5;
  --accent:#44d1ff;
  --accent-2:#31849b;
  --accent-3:#57e1ff;
  --danger:#ff8d8d;
  --success:#7ae0a3;
  --shadow:0 14px 40px rgba(0,0,0,0.28);
  --radius:22px;
}

/* =========================================================
   2. Base / reset
   ========================================================= */
*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  min-height:100%;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, #07111a 0%, #0a1622 100%);
}

body{
  position:relative;
  overflow-x:hidden;
}

[hidden]{
  display:none !important;
}

/* Remove browser number spinners for a cleaner app-like input style */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

input[type="number"]{
  -moz-appearance:textfield;
  appearance:textfield;
}

/* =========================================================
   3. Background decoration
   ========================================================= */
.bg-orb{
  position:fixed;
  inset:auto;
  border-radius:50%;
  filter:blur(70px);
  opacity:.22;
  pointer-events:none;
}

.orb-1{
  width:320px;
  height:320px;
  background:var(--accent);
  top:-80px;
  left:-70px;
}

.orb-2{
  width:260px;
  height:260px;
  background:#2e6bff;
  right:-60px;
  top:220px;
}

/* =========================================================
   4. Core layout containers
   ========================================================= */
.app-shell{
  position:relative;
  z-index:1;
  max-width:1440px;
  margin:0 auto;
  padding:22px;
}

.app-grid{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:18px;
}

/* Prevent flex/grid children from forcing overflow at narrow widths */
.app-shell,
.hero-card,
.card,
.toolbar,
.toolbar-actions,
.tab-row,
.metric-grid,
.detail-grid,
.field,
.compact-field,
.history-actions,
.history-top,
.key-row,
.hero-title,
.hero-copy{
  min-width:0;
}

/* =========================================================
   5. Shared card styling
   ========================================================= */
.hero-card,
.card{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(17,33,49,.97), rgba(11,22,33,.97));
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.card{
  padding:20px;
}

.nav-card,
.history-card{
  grid-column:1 / -1;
}

/* =========================================================
   6. Hero / header
   ========================================================= */
.hero-card{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  padding:26px;
  margin-bottom:18px;
  background:linear-gradient(180deg, rgba(13, 25, 37, 0.97), rgba(1, 8, 15, 0.97));
}

.hero-title{
  display:flex;
  align-items:center;
  gap:16px;
}

.hero-title div{
  max-width:700px;
}

.hero-logo{
  height:100px;
  width:auto;
  flex-shrink:0;
  opacity:.95;
}

.eyebrow{
  margin:0 0 8px;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:12px;
  color:var(--accent);
}

.hero-card h1{
  margin:0;
  font-size:clamp(30px, 4vw, 30px);
  line-height:1.02;
}

.hero-copy{
  margin:10px 0 0;
  max-width:760px;
  color:#25eee1;
}

/* Only shown for print output */
.print-result-type{
  display:none;
  margin:10px 0 0;
  font-size:14px;
  color:var(--muted);
}

.hero-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
  font-size:14px;
}

.chip{
  padding:10px;
  border-radius:999px;
  background:rgba(3, 27, 34, 0.08);
  border:1px solid rgba(40, 204, 201, 0.418);
  color:var(--text);
  white-space:nowrap;
}

/* =========================================================
   7. Toolbar / tabs / actions
   ========================================================= */
.tab-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.tab-btn,
.btn{
  border:1px solid var(--border);
  background:#10202e;
  color:var(--text);
  padding:12px 16px;
  border-radius:14px;
  cursor:pointer;
  font-size:15px;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}

.tab-btn:hover,
.btn:hover{
  transform:translateY(-1px);
  border-color:var(--accent);
}

.tab-btn.active{
  background:linear-gradient(180deg, rgba(49,132,155,.92), rgba(34,92,108,.92));
  border-color:#51b5d0;
}

.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:14px;
  margin-top:16px;
}

.toolbar-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.toolbar-actions .btn,
.toolbar-actions .help-toggle{
  min-height:48px;
}

.help-toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#0f1b28;
  color:var(--text);
}

.help-toggle input{
  accent-color:var(--accent);
}

/* =========================================================
   8. Headings / form layout
   ========================================================= */
.card-head{
  margin-bottom:16px;
}

.card-head h2{
  margin:0 0 6px;
  font-size:22px;
  color:#25eee1;
}

.card-head p{
  margin:0;
  color:var(--muted);
}

.result-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.result-head-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
}

.grid{
  display:grid;
  gap:14px;
}

.grid-2{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.grid-3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field span{
  font-size:14px;
  color:var(--muted);
}

.field input,
.field select{
  width:100%;
  padding:13px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#0b1722;
  color:var(--text);
  font-size:14px;
  outline:none;
}

.field input:focus,
.field select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(68,209,255,.16);
}

.compact-field{
  min-width:min(360px,100%);
}

.calc-form{
  display:grid;
  gap:14px;
}

.depth-toggle-row{
  margin-bottom:4px;
}

.button-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:4px;
}

.btn-primary{
  background:linear-gradient(180deg, var(--accent-2), #245f71);
  border-color:#46aac5;
}

.btn-soft{
  background:#0f1b28;
}

.btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  transform:none;
}

.panel{
  display:none;
}

.panel.active{
  display:block;
}

.message{
  min-height:22px;
  margin-top:12px;
  color:var(--muted);
}

.message.bad{
  color:var(--danger);
}

.message.good{
  color:var(--success);
}

.empty-state{
  padding:24px;
  border-radius:16px;
  border:1px dashed var(--border);
  text-align:center;
  color:var(--muted);
}

/* =========================================================
   9. Result panels / metrics / detail cards
   ========================================================= */
.result-title-block{
  margin:0 0 14px;
  padding:16px 18px;
  border:1px solid rgba(68,209,255,.22);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(68,209,255,.10), rgba(68,209,255,.03));
}

.result-title-kicker{
  margin:0 0 6px;
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--accent);
}

.result-title-text{
  margin:0 0 6px;
  font-size:22px;
  line-height:1.1;
  color:#25eee1;
}

.result-title-subtext{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

.metric-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-bottom:14px;
}

.metric-card,
.sub-card,
.history-item{
  border:1px solid var(--border);
  background:rgba(255,255,255,.025);
  border-radius:18px;
}

.metric-card{
  padding:18px;
}

.metric-card-accent{
  background:linear-gradient(180deg, rgba(68,209,255,.12), rgba(68,209,255,.04));
  border-color:rgba(68,209,255,.28);
}

.metric-label{
  display:block;
  margin-bottom:10px;
  color:var(--muted);
  font-size:13px;
}

.metric-card strong{
  display:block;
  font-size:clamp(24px, 4vw, 24px);
  line-height:1.05;
  color:#bdd43b;
}

.metric-card small{
  display:block;
  margin-top:8px;
  color:var(--muted);
}

.status-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:12px;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--text);
}

.status-chip.good{
  border-color:rgba(122,224,163,.35);
  background:rgba(122,224,163,.14);
  color:var(--success);
}

.status-chip.warn{
  border-color:rgba(255,193,92,.35);
  background:rgba(255,193,92,.14);
  color:#ffc15c;
}

.status-chip.bad{
  border-color:rgba(255,141,141,.35);
  background:rgba(255,141,141,.14);
  color:var(--danger);
}

.result-pill-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-bottom:14px;
}

.result-pill{
  padding:14px 16px;
  border:1px solid rgba(68,209,255,.22);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(68,209,255,.10), rgba(68,209,255,.03));
}

.result-pill-label{
  display:block;
  margin-bottom:8px;
  font-size:13px;
  color:var(--muted);
}

.result-pill strong{
  display:block;
  font-size:20px;
  line-height:1.1;
  color:#bdd43b;
}

.detail-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
  margin-bottom:14px;
}

.sub-card{
  padding:18px;
}

.sub-card h3{
  margin:0 0 12px;
  font-size:18px;
  color:#25eee1;
}

.key-list{
  display:grid;
  gap:12px;
}

.key-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.key-row:last-child{
  padding-bottom:0;
  border-bottom:none;
}

.key-row span{
  color:var(--muted);
}

.method-card ol{
  margin:0;
  padding-left:20px;
}

.method-card li + li{
  margin-top:8px;
}

/* =========================================================
   10. Result interpretation banner
   ========================================================= */
.result-banner{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin:0 0 14px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:18px;
  background:rgba(255,255,255,.03);
}

.result-banner-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:70px;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:13px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05);
  color:var(--text);
  flex:0 0 auto;
}

.result-banner-copy strong{
  display:block;
  margin-bottom:6px;
  font-size:16px;
  color:#29e2c9;
}

.result-banner-copy p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
}

.result-banner.good{
  border-color:rgba(122,224,163,.35);
  background:linear-gradient(180deg, rgba(122,224,163,.12), rgba(122,224,163,.04));
}

.result-banner.good .result-banner-badge{
  border-color:rgba(122,224,163,.35);
  background:rgba(122,224,163,.14);
}

.result-banner.warn{
  border-color:rgba(255,193,92,.35);
  background:linear-gradient(180deg, rgba(255,193,92,.12), rgba(255,193,92,.04));
}

.result-banner.warn .result-banner-badge{
  border-color:rgba(255,193,92,.35);
  background:rgba(255,193,92,.14);
}

.result-banner.bad{
  border-color:rgba(255,141,141,.35);
  background:linear-gradient(180deg, rgba(255,141,141,.12), rgba(255,141,141,.04));
}

.result-banner.bad .result-banner-badge{
  border-color:rgba(255,141,141,.35);
  background:rgba(255,141,141,.14);
}

/* =========================================================
   11. Help tooltip
   ========================================================= */
.help-tip{
  position:absolute;
  z-index:60;
  width:min(320px, calc(100vw - 24px));
  padding:14px 14px 12px;
  border:1px solid rgba(68,209,255,.28);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(17,33,49,.98), rgba(9,19,29,.98));
  box-shadow:0 16px 44px rgba(0,0,0,.34);
}

.help-tip-label{
  margin:0 0 6px;
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--accent);
}

.help-tip h3{
  margin:0 0 8px;
  font-size:16px;
}

.help-tip p{
  margin:0;
  color:var(--muted);
  line-height:1.45;
}

.help-tip-arrow{
  position:absolute;
  bottom:-9px;
  width:16px;
  height:16px;
  background:#0f1d2b;
  border-right:1px solid rgba(68,209,255,.28);
  border-bottom:1px solid rgba(68,209,255,.28);
  transform:translateX(-50%) rotate(45deg);
}

.help-tip.below .help-tip-arrow{
  top:-9px;
  bottom:auto;
  transform:translateX(-50%) rotate(225deg);
}

/* =========================================================
   12. History section
   ========================================================= */
.history-list{
  display:grid;
  gap:12px;
}

.history-item{
  padding:16px;
}

.history-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:6px;
}

.history-title{
  margin:0;
  font-size:18px;
  color:#25e083d7;
}

.history-meta,
.history-note{
  margin:0;
  font-size:14px;
  color:var(--muted);
}

.history-compliance{
  margin-top:8px;
  font-weight:600;
}

.history-good{
  color:#2e9e5b;
}

.history-warn{
  color:#d29a2e;
}

.history-bad{
  color:#c84444;
}

.history-dose{
  margin:12px 0 6px;
  font-size:22px;
  color:#b9b72f;
}

.history-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.history-btn{
  min-width:120px;
}

/* =========================================================
   13. Footer
   ========================================================= */
.app-footer{
  margin-top:40px;
  padding:28px 20px;
  border-top:1px solid var(--border);
}

.footer-inner{
  max-width:1400px;
  margin:0 auto;
  text-align:center;
}

.footer-inner img{
  height:60px;
  width:auto;
  margin-bottom:5px;
}

.footer-inner p{
  margin:6px 0;
  font-size:14px;
  color:#167279;
}

.footer-inner small{
  color:var(--muted);
}

/* =========================================================
   14. Mobile-only summary and action bar
   ========================================================= */
.mobile-result-summary{
  display:none;
  margin:0 0 14px;
  padding:14px 16px;
  border:1px solid rgba(68,209,255,.28);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(68,209,255,.12), rgba(68,209,255,.04));
}

.mobile-result-summary .summary-mode,
.mobile-result-summary .summary-pool{
  display:block;
  color:var(--muted);
  font-size:13px;
}

.mobile-result-summary .summary-value{
  display:block;
  margin-top:8px;
  font-size:clamp(26px, 6vw, 34px);
  line-height:1.05;
}

.mobile-action-bar{
  display:none;
}

/* =========================================================
   15. Print layout
   - hide interactive UI
   - keep branded header + current result only
   ========================================================= */
@media print{
  body,
  html{
    background:#fff !important;
    color:#000 !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  .bg-orb,
  .nav-card,
  .history-card,
  .input-card,
  .toolbar,
  .tab-row,
  .button-row,
  .mobile-action-bar,
  .mobile-result-summary,
  .help-tip,
  .help-toggle,
  #saveBtn,
  #printBtn,
  #clearHistoryBtn,
  #clearResultBtn,
  #savePoolBtn,
  #deletePoolBtn{
    display:none !important;
  }

  .app-shell{
    max-width:820px;
    margin:0 auto;
    padding:0;
  }

  .app-grid{
    display:block;
    margin:0;
    padding:0;
  }

  .hero-card{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 0 6px 0;
    padding:0 0 6px 0;
    border:none;
    border-bottom:1px solid #d9d9d9;
    border-radius:0;
    background:#fff !important;
    box-shadow:none !important;
  }

  .hero-title{
    gap:14px;
  }

  .hero-card h1{
    font-size:26px;
    line-height:1.05;
    color:#000 !important;
  }

  .hero-logo{
    height:64px;
    width:auto;
    opacity:1;
  }

  .logo-shimmer,
  .shimmer-logo::before,
  .shimmer-logo::after{
    display:none !important;
  }

  .eyebrow,
  .hero-copy,
  .print-result-type,
  .card-head p,
  .metric-card small,
  .key-row span,
  .result-banner-copy p,
  .footer-inner p,
  .footer-inner small{
    color:#444 !important;
  }

  .print-result-type{
    display:block;
    margin:6px 0 0 0;
    font-size:13px;
  }

  .result-title-block{
    margin:0 0 8px 0;
    padding:8px 10px;
    border:1px solid #d7d7d7 !important;
    border-radius:8px;
    background:#f8f8f8 !important;
  }

  .result-title-kicker,
  .result-title-subtext{
    color:#444 !important;
  }

  .result-title-text{
    font-size:18px;
  }

  .card{
    margin:0;
    padding:0;
    border:none;
    border-radius:0;
    background:#fff !important;
    box-shadow:none !important;
  }

  .result-card{
    margin:0;
    padding:0;
  }

  .card-head{
    margin-bottom:4px;
  }

  .card-head h2,
  .sub-card h3,
  .result-banner-copy strong,
  .result-title-text{
    color:#000 !important;
  }

  .card-head h2{
    font-size:18px;
  }

  .sub-card h3{
    margin:0 0 6px;
    font-size:14px;
  }

  .metric-card strong{
    font-size:18px !important;
    color:#000 !important;
  }

  .key-row,
  .result-banner-copy p,
  .metric-card small,
  .print-result-type{
    font-size:11px;
  }

  .result-banner{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:0 0 8px 0;
    padding:8px 10px;
    border:1px solid #cfcfcf !important;
    border-radius:8px;
    background:#f5f5f5 !important;
    box-shadow:none !important;
  }

  .result-banner-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:70px;
    min-height:34px;
    padding:0 12px;
    border-radius:999px;
    font-size:13px;
    border:1px solid #cfcfcf !important;
    background:#ebebeb !important;
    color:#000 !important;
    flex:0 0 auto;
  }

  .metric-grid{
    grid-template-columns:repeat(3, 1fr);
    gap:6px;
    margin-bottom:6px;
  }

  .metric-card{
    padding:7px 8px;
    border:1px solid #d7d7d7 !important;
    border-radius:8px;
    background:#fff !important;
    box-shadow:none !important;
  }

  .metric-card-accent{
    border-color:#bfbfbf !important;
    background:#f8f8f8 !important;
  }

  .detail-grid{
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin-bottom:6px;
  }

  .sub-card{
    padding:8px;
    border:1px solid #d7d7d7 !important;
    border-radius:8px;
    background:#fff !important;
    box-shadow:none !important;
  }

  .key-row{
    border-bottom:1px solid #e4e4e4;
  }

  .key-row strong{
    color:#000 !important;
  }

  .method-card{
    margin-top:6px;
  }

  .method-card ol{
    margin:0;
    padding-left:18px;
  }

  .method-card li{
    margin:0 0 4px;
  }

  .app-footer{
    display:none !important;
  }
}

/* =========================================================
   16. Tablet / smaller desktop layout
   ========================================================= */
@media (max-width:1100px){
  .app-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   17. Mobile layout
   ========================================================= */
@media (max-width:820px){
  .app-shell{
    width:min(100%, 100vw);
    max-width:100%;
    margin:0 auto;
    padding:14px 14px 108px;
  }

  .hero-card,
  .toolbar,
  .result-head,
  .history-top,
  .key-row{
    flex-direction:column;
  }

  .hero-card,
  .card{
    padding:16px;
    border-radius:18px;
  }

  .hero-title{
    gap:12px;
  }

  .metric-grid,
  .detail-grid,
  .result-pill-row,
  .grid-2,
  .grid-3{
    grid-template-columns:1fr;
  }

  .hero-card,
  .card,
  .app-grid,
  .toolbar,
  .toolbar-actions,
  .tab-row,
  .field,
  .compact-field,
  .history-actions,
  .detail-grid,
  .metric-grid{
    max-width:100%;
  }

  .result-head-actions{
    width:100%;
  }

  .help-toggle{
    width:100%;
    justify-content:center;
  }

  .toolbar{
    align-items:stretch;
  }

  .toolbar > *{
    width:100%;
    min-width:0;
  }

  .toolbar-actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .toolbar-actions .help-toggle{
    grid-column:1 / -1;
  }

  /* Wrap tool tabs onto multiple rows on small screens */
  .tab-row{
    display:flex;
    flex-wrap:wrap;
    width:100%;
    max-width:100%;
    overflow:visible;
    gap:10px;
    padding-bottom:0;
  }

  .tab-btn{
    flex:1 1 calc(50% - 10px);
    width:auto;
    min-width:0;
    white-space:normal;
    text-align:center;
  }

  .btn{
    width:100%;
  }

  .button-row,
  .history-actions{
    width:100%;
  }

  .history-actions .btn{
    flex:1 1 calc(50% - 10px);
    width:auto;
  }

  .result-banner{
    flex-direction:column;
  }

  .mobile-result-summary{
    display:block;
  }

  /* Sticky bottom action bar for phone/tablet use */
  .mobile-action-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:70;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:10px;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background:linear-gradient(180deg, rgba(7,17,26,.9), rgba(7,17,26,.98));
    border-top:1px solid rgba(68,209,255,.18);
    backdrop-filter:blur(12px);
  }

  .mobile-action-bar .btn{
    width:100%;
    min-height:48px;
  }
}