/* ============================================================
   openvervo — base.css
   Shared tokens, resets, typography, and component styles.
   Every page links this first, then its own page CSS.

   THEME SYSTEM:
   Light is the default (:root). Dark overrides live under
   [data-theme="dark"] on <html>. Nothing sets that attribute
   yet — it will be wired up from Settings later. Until then,
   every page below renders light.
   ============================================================ */

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── DESIGN TOKENS — LIGHT (default) ── */
:root{
  /* page canvas — sits behind every card; gives cards something
     to visually separate from without needing a border */
  --page-bg:#f6f6f6;

  /* backgrounds — off-white, matching the login/register auth pages
     (#f8f8f6) instead of pure white, so the whole product feels
     consistent rather than auth pages reading as a slightly
     different shade from the rest of the app */
  --bg:#f8f8f6;
  --surface:#f7f7f7;
  --surface2:#f0f0f0;

  /* borders */
  --border:#e2e2e2;
  --border-hi:#d2d2d2;

  /* card elevation — replaces borders on floating card containers.
     Soft, diffuse, low-opacity: separation comes from shadow + the
     page/card contrast, not a hard edge. */
  --card-shadow:0 1px 2px rgba(16,24,32,0.04), 0 8px 24px rgba(16,24,32,0.06);
  --card-shadow-hover:0 2px 4px rgba(16,24,32,0.05), 0 12px 32px rgba(16,24,32,0.08);

  /* text */
  --text:#0a0a0a;
  --text2:#5a5a5a;
  --text3:#8a8a8a;

  /* brand accent */
  --accent:#0055ba;
  --accent-hover:#0048a0;

  /* semantic colours */
  --green:#1f9d6e;
  --green-dim:rgba(31,157,110,0.12);
  --red:#c0392b;
  --red-dim:rgba(192,57,43,0.10);
  --amber:#b5790f;
  --amber-dim:rgba(181,121,15,0.12);

  /* chart-specific tokens — read by JS via getComputedStyle so
     chart colours follow the theme instead of being hardcoded hex
     inside Chart.js config objects */
  --chart-line:#1f9d6e;
  --chart-grid:rgba(10,10,10,0.08);
  --chart-label:rgba(10,10,10,0.45);
  --chart-tooltip-bg:#0a0a0a;
  --chart-tooltip-border:rgba(255,255,255,0.15);
  --chart-tooltip-text:#f0f0f0;

  /* typography — DM Sans only */
  --font:'DM Sans',sans-serif;
}

/* ── DESIGN TOKENS — DARK (inactive until <html data-theme="dark">) ── */
[data-theme="dark"]{
  /* Every neutral here is genuinely neutral (R=G=B) — the previous set
     (#0a0b0c, #0e0f11, #1c1d20...) all had the blue channel a couple
     points higher than red/green, which reads as a subtle blue-black
     tint rather than true black/gray. page-bg is true pure black; the
     rest step up in even, hue-free increments. */
  --page-bg:#000000;
  --bg:#1c1c1c;
  --surface:#141414;
  --surface2:#242424;

  --border:#2a2a2a;
  --border-hi:#3d3d3d;

  --card-shadow:0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  --card-shadow-hover:0 2px 4px rgba(0,0,0,0.35), 0 12px 32px rgba(0,0,0,0.4);

  --text:#f0f0f0;
  --text2:#9a9a9a;
  --text3:#6e6e6e;

  --accent:#3d8bff;
  --accent-hover:#5c9fff;

  --green:#2dd4a0;
  --green-dim:rgba(45,212,160,0.12);
  --red:#f26b6b;
  --red-dim:rgba(242,107,107,0.12);
  --amber:#f0a953;
  --amber-dim:rgba(240,169,83,0.12);

  --chart-line:#2dd4a0;
  --chart-grid:rgba(255,255,255,0.06);
  --chart-label:rgba(255,255,255,0.4);
  --chart-tooltip-bg:#1c1c1c;
  --chart-tooltip-border:rgba(255,255,255,0.15);
  --chart-tooltip-text:#f0f0f0;
}

/* ── BASE HTML/BODY ── */
html,body{
  min-height:100%;
  /* overscroll-behavior-x is safe on both — it doesn't affect layout.
     overflow-x:hidden is NOT duplicated onto body (see html{} rule
     below): setting a non-visible overflow-x on both html AND body
     forces each one's overflow-y to compute as auto too (a CSS overflow
     rule — "if one axis isn't visible, the other becomes auto"). That
     gives body its own real internal scroll box, separate from the
     viewport, which broke position:sticky for the sidebar (nav.js) —
     it started sticking to body's box instead of the viewport, so it
     scrolled out of view along with the page. html's overflow already
     propagates to control the viewport on its own, so setting it there
     only is enough to lock horizontal scroll without that side effect.
     (overscroll-behavior-y was tried at this root level plus on the
     nested .main/.page-content/.sidebar-nav scroll containers, but that
     combination broke vertical scrolling entirely — reverted; see
     conversation before reattempting.) */
  overscroll-behavior-x:none;
  font-family:var(--font);
  background:var(--page-bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
html{
  overflow-x:hidden;
}

/* ── BRAND WORDMARK ── */
.brand{
  font-family:var(--font);
  font-weight:700;
  font-size:1.05rem;
  color:var(--text);
  letter-spacing:-0.01em;
}

/* ── TOPBAR (shared shell — pages extend with padding/sticky as needed) ── */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}

/* ── BACK CHEVRON ROW ──
   Shared across every page that navigates back to wherever the user
   came from (records-detail, records-index, settings-config,
   settings-pos, daily-entry/selection, completion). Each of those used
   to define this locally, centered against that page's own `.main`
   max-width (720/960/420/560px, all different) — which put the chevron
   at a different on-screen x-position from page to page, since a
   narrower centered column sits further right than a wider one at the
   same viewport width. Flush-left at one fixed inset instead, so it's
   always in the same spot regardless of which page you're on. Pages
   that need to hide this row entirely (e.g. an owner on records-index,
   who reaches that page via the sidebar and has nothing to go "back"
   to) do so with an inline/JS display:none, not a CSS override here. */
.page-back-row{
  width:100%;
  padding:20px 24px 0;
  box-sizing:border-box;
}
@media(max-width:768px){
  .page-back-row{padding:20px 16px 0;}
}
.back-chevron{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--text);
  transition:opacity 0.15s;
  -webkit-tap-highlight-color:transparent;
}
.back-chevron:hover{opacity:0.6;}
.back-chevron svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}

/* ── PRIMARY BUTTON ── */
.btn{
  width:100%;
  height:52px;
  background:var(--accent);
  color:#ffffff;
  border:1.5px solid var(--accent);
  border-radius:12px;
  font-family:var(--font);
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  letter-spacing:-0.01em;
  transition:background 0.15s, border-color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.btn:active{transform:scale(0.99);}

/* ── FORM FIELDS — used on login, register, station_setup ── */
.fld{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-bottom:12px;
}
.fld:last-child{margin-bottom:0;}

.fld label{
  font-size:0.8125rem;
  font-weight:600;
  color:var(--text);
  letter-spacing:-0.01em;
}

.fld input{
  width:100%;
  background:var(--surface);
  border:1.5px solid var(--border);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  border-radius:10px;
  padding:13px 15px;
  font-size:1rem;
  font-family:var(--font);
  color:var(--text);
  outline:none;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.fld input::placeholder{color:var(--text3);}
.fld input:focus{
  border-color:var(--accent);
  background:var(--bg);
  box-shadow:0 0 0 3px rgba(0,85,186,.12);
}

/* password wrapper */
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:48px;}
.eye-btn{
  position:absolute;
  right:14px;top:50%;
  transform:translateY(-50%);
  background:none;border:none;cursor:pointer;
  color:var(--text3);padding:0;
  display:flex;align-items:center;
  transition:color 0.15s;
  -webkit-tap-highlight-color:transparent;
}
.eye-btn:hover{color:var(--text2);}
.eye-btn svg{
  width:16px;height:16px;
  fill:none;stroke:currentColor;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}

/* field helpers */
.field-hint{
  font-size:0.75rem;
  color:var(--text3);
  margin-top:2px;
}
.fields-block{
  display:flex;
  flex-direction:column;
  margin-bottom:24px;
}

/* ── COMPACT FIELD (used inside wizard cards) ── */
.cf{display:flex;flex-direction:column;gap:5px;}
.cf label{
  font-size:0.7rem;font-weight:600;
  letter-spacing:0.05em;text-transform:uppercase;
  color:var(--text3);
}
.cf input,.cf select{
  width:100%;
  background:var(--bg);
  border:1.5px solid var(--border);
  border-radius:8px;
  padding:11px 10px;
  font-size:0.9rem;font-family:var(--font);
  color:var(--text);outline:none;
  -webkit-appearance:none;appearance:none;
  transition:border-color 0.18s;
}
.cf input::placeholder{color:var(--text3);}
.cf input:focus,.cf select:focus{border-color:var(--accent);}
.cf input:disabled{
  color:var(--text3);
  cursor:not-allowed;
  opacity:0.6;
}
.cf input:read-only{
  color:var(--text3);
  cursor:default;
}
.cf select{
  /* light-mode chevron (#8a8a8a == light --text3) baked into this
     data URI since SVG fill/stroke can't reference CSS vars directly.
     Dark mode gets its own version below — keep both in sync if
     --text3 ever changes. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  padding-right:36px;
}
[data-theme="dark"] .cf select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6c75' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.map-select-wrap select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
[data-theme="dark"] .map-select-wrap select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236b6c75' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ── GRID HELPERS ── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* ── WIZARD PROGRESS BAR ── */
.prog{
  display:flex;gap:3px;
  padding:12px 20px 0;
  flex-shrink:0;
}
.prog-s{
  flex:1;height:3px;background:var(--border);border-radius:2px;
  transition:background 0.3s;
}
.prog-s.done{background:var(--border-hi);}
.prog-s.active{background:var(--accent);}

/* ── WIZARD SCROLL AREA ── */
.scroll{
  flex:1;overflow-y:auto;
  padding:0 20px 140px;
  -webkit-overflow-scrolling:touch;
}

/* ── WIZARD STEP HEADER ── */
.sh{padding-top:28px;padding-bottom:24px;}
.sh-eye{
  font-size:0.7rem;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text3);margin-bottom:8px;
}
.sh-q{
  font-family:var(--font);
  font-weight:800;
  font-size:1.75rem;line-height:1.2;
  color:var(--text);margin-bottom:8px;
  letter-spacing:-0.03em;
}
.sh-sub{font-size:0.875rem;line-height:1.6;color:var(--text2);}

/* ── WIZARD PANELS ── */
.panel{display:none;}
.panel.active{display:block;}

/* ── WIZARD CARDS (data entry groups) ── */
.card-list{display:flex;flex-direction:column;gap:10px;margin-bottom:4px;}
.card{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:12px;overflow:hidden;
}
.card-head{
  display:flex;align-items:center;
  padding:11px 14px;
  border-bottom:1px solid var(--border);
  background:var(--surface2);
  gap:8px;
}
.card-num{
  width:24px;height:24px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:6px;
  font-size:0.72rem;font-weight:600;
  color:var(--text2);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.card-title{
  font-size:0.75rem;font-weight:600;
  letter-spacing:0.07em;text-transform:uppercase;
  color:var(--text3);flex:1;
}
.card-body{padding:14px;display:flex;flex-direction:column;gap:14px;}

/* ── WIZARD BOTTOM NAV ── */
.bnav{
  position:fixed;bottom:0;left:0;right:0;
  padding:14px 20px;
  padding-bottom:max(14px,env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--bg) 65%,transparent);
  display:flex;gap:10px;z-index:100;
}
.btn-back{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:12px;
  padding:0 22px;height:52px;
  font-family:var(--font);font-size:0.9rem;font-weight:500;
  color:var(--text2);cursor:pointer;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
  transition:border-color 0.15s,color 0.15s;
}
.btn-back:active{border-color:var(--border-hi);color:var(--text);}
.btn-next{
  flex:1;height:52px;
  background:var(--accent);color:#ffffff;
  border:1.5px solid var(--accent);border-radius:12px;
  font-family:var(--font);font-size:0.95rem;font-weight:600;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background 0.15s,border-color 0.15s,transform 0.1s;
}
.btn-next:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.btn-next:active{transform:scale(0.99);}

/* ── ADD / DELETE BUTTONS (dynamic list rows) ── */
.add-btn{
  display:flex;align-items:center;gap:8px;
  background:none;
  border:1.5px dashed var(--border);
  border-radius:10px;
  padding:13px 14px;
  font-family:var(--font);font-size:0.875rem;font-weight:500;
  color:var(--text3);cursor:pointer;width:100%;
  transition:border-color 0.18s,color 0.18s;
  -webkit-tap-highlight-color:transparent;
}
.add-btn:active{border-color:var(--border-hi);color:var(--text);}
.add-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;flex-shrink:0;}

.del-btn{
  background:none;border:none;cursor:pointer;
  color:var(--text3);
  width:40px;height:40px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.15s,color 0.15s;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.del-btn:active{background:rgba(0,0,0,0.06);color:var(--text);}
[data-theme="dark"] .del-btn:active{background:rgba(255,255,255,0.06);}
.del-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ── REVIEW SECTIONS (used in both wizard review steps) ── */
.rsec{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:12px;overflow:hidden;
  margin-bottom:16px;
}
.rsec-title{
  font-size:0.7rem;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text3);
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:var(--surface2);
}
.rrow{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:11px 14px;border-bottom:1px solid var(--border);gap:12px;
}
.rrow:last-child{border-bottom:none;}
.rk{font-size:0.85rem;color:var(--text2);flex-shrink:0;}
.rv{font-size:0.85rem;color:var(--text);text-align:right;word-break:break-word;}

/* ── AUTH FOOTER LINK ── */
.foot{
  text-align:center;
  font-size:0.8125rem;
  color:var(--text2);
}
.foot a{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
  transition:color 0.15s;
}
.foot a:hover{text-decoration:underline;}

/* ── HINT TEXT ── */
.hint{font-size:0.7rem;color:var(--text3);margin-top:3px;}

/* ── SKELETON / SHIMMER ── */
@keyframes shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
.skeleton{
  background:linear-gradient(
    90deg,
    var(--surface) 25%,
    var(--surface2) 50%,
    var(--surface) 75%
  );
  background-size:200% 100%;
  animation:shimmer 1.6s ease-in-out infinite;
  border-radius:6px;
}
/* common skeleton shape helpers */
.sk-line{height:12px;width:100%;}
.sk-line.short{width:40%;}
.sk-line.med{width:65%;}
.sk-block{width:100%;}

/* ── EMPTY STATE (shared across pages) ── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;
  padding:48px 24px;
  text-align:center;gap:10px;
}
.empty-state svg{
  width:32px;height:32px;
  fill:none;stroke:var(--text3);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  margin-bottom:4px;
}
.empty-title{font-size:0.9rem;font-weight:600;color:var(--text2);}
.empty-sub{font-size:0.8rem;color:var(--text3);line-height:1.5;}