/* ============================================================
   glass-app.css — 20FIT "Flat Minimalist" (v4) app-wide skin.

   Loaded LAST on every page (after the page's own <style> and
   20fit-design-system.css), so it re-skins the whole app purely
   via CSS — no markup, id, handler or logic is touched.

   This REPLACES the earlier glass look with the clean flat v4
   design: light-grey page, solid white cards, system fonts, red
   accent. It remaps BOTH the app's legacy tokens (--red/--card/…)
   AND the design-system's --fit-* tokens to flat values, so any
   element (including the shared nav.js) that reads either token
   set renders flat automatically.

   Dark mode keys off `html:not(.theme-light)` (the app toggle) and
   `[data-theme="dark"]` (design-system), covering both mechanisms.
   ============================================================ */

/* ---- 1. Tokens · LIGHT (v4 flat palette) ---------------------------------
   :root loads after the page's own :root, so these win in light mode. */
:root{
  /* legacy app tokens */
  --red:#D4283A;--red-ink:#B01C2E;--red-soft:#FCEBED;
  --amber:#E8912A;--amber-soft:#FDF1E2;--amber-ink:#8A5A00;
  --green:#2BB673;--green-soft:#E6F6EE;--green-ink:#12633A;
  --blue:#2F6BFF;--blue-soft:#EAF1FF;
  --bg:#F1F1F4;--card:#FFFFFF;--inp:#F2F2F5;--dark:#15171C;
  --ink:#15171C;--txt:#15171C;--muted:#8A8D94;--faint:#B7B9BF;
  --line:#EBEBEF;
  --pagetx:#15171C;--pagemut:#8A8D94;
  --radius-lg:22px;--radius:16px;--radius-sm:14px;
  --shadow:0 1px 2px rgba(16,18,22,.04),0 10px 30px rgba(16,18,22,.045);
  --font-sys:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter",system-ui,"Segoe UI",Roboto,Arial,sans-serif;

  /* remap design-system --fit-* tokens to flat equivalents
     (so nav.js and any leftover var(--fit-*) references go flat) */
  --fit-red:#D4283A;--fit-blue:#2F6BFF;--fit-amber:#E8912A;--fit-green:#2BB673;
  --fit-red-soft:#FCEBED;--fit-blue-soft:#EAF1FF;--fit-amber-soft:#FDF1E2;--fit-green-soft:#E6F6EE;
  --fit-ink:#15171C;--fit-ink-soft:#8A8D94;--fit-ink-faint:#B7B9BF;--fit-line:#EBEBEF;
  --fit-bg1:#F1F1F4;--fit-bg2:#F1F1F4;
  --fit-glass:#FFFFFF;--fit-glass-strong:#FFFFFF;--fit-glass-border:#EBEBEF;--fit-blur:0px;
  --fit-radius:22px;--fit-radius-sm:14px;--fit-shadow:0 1px 2px rgba(16,18,22,.04),0 10px 30px rgba(16,18,22,.045);
  --fit-font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;
  --fit-font-mono:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  --fit-font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
}

/* ---- 2. Tokens · DARK ----------------------------------------------------
   Two selectors so we override BOTH the app's dark rule (html:not(.theme-light),
   which outranks :root) and the design-system's [data-theme="dark"]. */
html:not(.theme-light),
html[data-theme="dark"]{
  --red:#FF5062;--red-ink:#FF7181;--red-soft:#33191D;
  --amber:#F0A945;--amber-soft:#2E2213;--amber-ink:#F0A945;
  --green:#3AD98C;--green-soft:#12271C;--green-ink:#3AD98C;
  --blue:#5C8CFF;--blue-soft:#182238;
  --bg:#0B0C0F;--card:#16181E;--inp:#23262E;--dark:#0B0C0F;
  --ink:#F4F5F7;--txt:#F4F5F7;--muted:#8E9198;--faint:#5C5F66;
  --line:#24262D;
  --pagetx:#F4F5F7;--pagemut:#8E9198;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 34px rgba(0,0,0,.35);

  --fit-red:#FF5062;--fit-blue:#5C8CFF;--fit-amber:#F0A945;--fit-green:#3AD98C;
  --fit-red-soft:#33191D;--fit-blue-soft:#182238;--fit-amber-soft:#2E2213;--fit-green-soft:#12271C;
  --fit-ink:#F4F5F7;--fit-ink-soft:#8E9198;--fit-ink-faint:#5C5F66;--fit-line:#24262D;
  --fit-bg1:#0B0C0F;--fit-bg2:#0B0C0F;
  --fit-glass:#16181E;--fit-glass-strong:#16181E;--fit-glass-border:#24262D;
  --fit-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 34px rgba(0,0,0,.35);
}

/* ---- 3. Page background: flat, no gradient, no orbs ---------------------- */
html,body{background:var(--bg)}
body{
  background:var(--bg) !important;background-attachment:scroll !important;
  color:var(--pagetx);
  font-family:var(--font-sys) !important;
}
/* remove the old glass orbs entirely */
body::before,body::after{content:none !important;display:none !important}

/* ---- 4. Solid flat cards (undo glass blur/tint) ------------------------- */
.card,.panel,.wcard{
  background:var(--card) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  box-shadow:var(--shadow) !important;
  color:var(--txt);
}
/* keep the medical upload card's dashed red border (v4) */
.card.up{background:color-mix(in srgb,var(--red-soft) 55%,var(--card)) !important}

/* ---- 5. Typography: system fonts everywhere (no Barlow / Mono / Manrope)
   Override the hard-coded display/data fonts a few widgets still request. */
.big,.hello,.headline,.sec,.hk,.m-title,.aqinum,.ift,.dtogo b,.m-time,.m-sub,
.wx-temp,.chipm .cv,.chipm .cl,.pacer,.pacer-lbl,.tempo-tag,.m-steps li::before,
.m-timerbtn,.aqi-line .alab,.aqi-line .anum,.aqi-line .alvl{
  font-family:var(--font-sys) !important;
}
.ift,.dtogo b,.m-time{font-variant-numeric:tabular-nums}

/* ---- 5b. v4 is all sentence-case: soften the leftover UPPERCASE labels ---- */
.hk{color:var(--muted) !important;text-transform:none !important;letter-spacing:0 !important;font-weight:600 !important;font-size:13px !important}
.sec:not(.gsec){text-transform:none !important;letter-spacing:0 !important;color:var(--muted) !important;font-weight:700 !important;font-size:12.5px !important}
.aqi-line .alab,.aqi-line .alvl{text-transform:none !important;letter-spacing:0 !important}
/* keep .vital .lbl (BMI/WEIGHT/HEIGHT) uppercase — matches v4 */

/* ---- 6. BUTTONS — flat v4 (system font, sentence case, no glow spread) --- */
.btn,.bookbtn,.cta,.book,.bookchip,.startbtn,.mini-btn,.btn2,.hbtn,.cbbtn,.sbtn,.fbtn,.mbtn,.gbtn,.scanbtn,
.m-timerbtn,.wbtn,button[type="submit"],input[type="submit"],input[type="button"]{
  font-family:var(--font-sys) !important;font-weight:750 !important;
  text-transform:none !important;letter-spacing:0 !important;
  border-radius:var(--radius) !important;transition:.16s;
}
.btn:active,.bookbtn:active,.cta:active,.book:active,.startbtn:active,.btn2:active,
.hbtn:active,.cbbtn:active,.mbtn:active,.gbtn:active,.scanbtn:active,.m-timerbtn:active,
button[type="submit"]:active,input[type="submit"]:active{transform:scale(.98)}

/* PRIMARY / CTA / submit -> solid red, soft v4 shadow */
.btn:not(.dark):not(.ghost),.bookbtn:not(.ghost):not(.alt),.cta,.book,.bookchip,.cbbtn,.fbtn,
.hbtn.solid,.startbtn:not(.running),.m-timerbtn:not(.run),button[type="submit"]:not(.dark):not(.ghost){
  background:var(--red) !important;color:#fff !important;border:0 !important;
  box-shadow:0 8px 20px color-mix(in srgb,var(--red) 26%,transparent) !important;
}
/* SECONDARY / ghost / running -> flat grey chip */
.btn.dark,.btn.ghost,.bookbtn.ghost,.bookbtn.alt,.hbtn.ghost,.mini-btn,.startbtn.running,.m-timerbtn.run,.gbtn{
  background:var(--inp) !important;border:0 !important;color:var(--txt) !important;
  box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;
}
/* Dark "ink" buttons (upload, email-code, scan) */
.btn2,.mbtn,.scanbtn{background:var(--dark) !important;color:var(--bg) !important;border:0 !important;box-shadow:none !important}
/* DARK MODE: --dark & --bg are both near-black, so the ink buttons above would be
   black-on-black (invisible). Give them a visible elevated surface + light text. */
html:not(.theme-light) .btn2,html:not(.theme-light) .mbtn,html:not(.theme-light) .scanbtn,
html[data-theme="dark"] .btn2,html[data-theme="dark"] .mbtn,html[data-theme="dark"] .scanbtn{
  background:var(--inp) !important;color:var(--txt) !important;border:1px solid var(--line) !important}

/* Focus ring (a11y) + disabled */
.btn:focus-visible,.bookbtn:focus-visible,.cta:focus-visible,.book:focus-visible,
.startbtn:focus-visible,.btn2:focus-visible,.hbtn:focus-visible,.cbbtn:focus-visible,.sbtn:focus-visible,
.mbtn:focus-visible,.gbtn:focus-visible,.m-timerbtn:focus-visible,.seg button:focus-visible,.chip:focus-visible,
button:focus-visible,input[type="submit"]:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.btn:disabled,.bookbtn:disabled,.cta:disabled,.startbtn:disabled,.btn2:disabled,.hbtn:disabled,
.sbtn:disabled,.gbtn:disabled,button:disabled,input:disabled{opacity:.55;cursor:not-allowed}

/* ---- 7. Inputs / segmented / chips as flat ------------------------------ */
input,select,textarea,.tpick input,.search{
  background:var(--inp) !important;border:1px solid var(--line) !important;
  color:var(--txt);
}
input::placeholder,textarea::placeholder{color:var(--faint)}
.seg,.filters .chip,.chip{
  background:var(--inp) !important;border:0 !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
}
.seg button.active,.chip.on,.chip2.on{background:var(--card) !important;color:var(--ink) !important;box-shadow:0 2px 6px rgba(0,0,0,.07)}
[data-theme="dark"] .seg button.active,[data-theme="dark"] .chip.on,[data-theme="dark"] .chip2.on{background:var(--inp) !important;color:var(--ink) !important}

/* ---- 7b. PILL MENU BUTTONS — bentuk oval memanjang yang KONSISTEN app-wide -----
   Semua chip/segment/menu-button (dashboard, diet, progress, calories, profile,
   shared design-system) pakai spesifikasi pil yang sama: ujung membulat penuh
   (999px), tinggi seragam 40px (lebih lebar dari tinggi = oval memanjang),
   padding horizontal sama, dan label 1 baris (nowrap) dengan ellipsis kalau
   kepanjangan — jadi label panjang TIDAK merusak bentuk pil / meluber. */
.chip,.chip2,.seg button,.fit-seg button,.trk-cust{
  border-radius:999px !important;
  min-height:40px !important;
  padding:0 16px !important;
  display:inline-flex !important;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  line-height:1.1;
}
/* Jarak antar-pill & dari tepi konsisten (baris chip yang wrap / scroll). */
.chips,.chips2,.filters{gap:8px !important}

/* ---- 8. Shared nav (nav.js) + floating toggles (i18n.js) -> flat --------- */
.navside{
  background:var(--card) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
  border-right:1px solid var(--line) !important;
}
.bnav{
  background:color-mix(in srgb,var(--bg) 82%,transparent) !important;
  -webkit-backdrop-filter:saturate(180%) blur(18px) !important;backdrop-filter:saturate(180%) blur(18px) !important;
  border:0 !important;border-top:1px solid var(--line) !important;box-shadow:none !important;
}
.bnav a{color:var(--faint) !important;font-family:var(--font-sys) !important;text-transform:none !important;letter-spacing:0 !important;font-weight:650 !important}
.bnav a.on{color:var(--red) !important}
.bnav a.on svg{stroke:var(--red) !important}
.scanfab{background:var(--red) !important;box-shadow:0 10px 22px color-mix(in srgb,var(--red) 40%,transparent) !important;font-family:var(--font-sys) !important}
.langfab,.themefab{
  background:var(--card) !important;border:1px solid var(--line) !important;
  -webkit-backdrop-filter:none !important;backdrop-filter:none !important;color:var(--muted) !important;
  box-shadow:var(--shadow) !important;
}
.langfab button{color:var(--muted) !important;font-family:var(--font-sys) !important}
.langfab button.on{background:var(--red) !important;color:#fff !important}

/* ---- 9. Toast ----------------------------------------------------------- */
.toast{background:var(--ink) !important;color:var(--bg) !important;border-radius:var(--radius) !important}

@media (prefers-reduced-motion:reduce){ body::before,body::after{animation:none !important} }