/* ============================================================================
   Topography design system — Jungle tokens (from web-app-ultra/src/theme.ts).
   Loaded AFTER index.html's inline <style>, so it wins on the cascade and
   re-skins the app onto the Jungle look (blue + Urbanist) without rewriting the
   inline CSS. Old token names are aliased to new ones (§Aliases) so every
   existing var(--sage|--navy|…) usage rebrands in one shot.
   Owns: tokens · the rebrand re-skin · the Loader + Overlay primitives · the
   shared component layer (.btn/.select/.tbl/.check/.section-head/.badge).
   ========================================================================== */

:root {
  /* ---- Brand / blue (primary interactive = blue-5) ---- */
  --blue-0:#93c4f5; --blue-2:#a5d8ff; --blue-5:#3f8ad4; --blue-8:#032340; --blue-9:#052f59;
  /* ---- Gray (the neutral backbone) ---- */
  --gray-0:#f8f9fa; --gray-1:#e6e7e8; --gray-2:#d1d3d4; --gray-3:#a7a9ab;
  --gray-4:#adb5bd; --gray-5:#868e96; --gray-6:#666666; --gray-7:#414042;
  --gray-8:#343a40; --gray-9:#221f20;
  /* ---- Semantic states ---- */
  --red-3:#ffe3e3;  --red-6:#d92616;  --red-9:#7a0e04;     /* error/destructive */
  --green-0:#e7f6ef; --green-5:#2f9e74; --green-9:#0e6b4f;  /* success/ready */
  --orange-2:#fff0db; --orange-9:#9a6a12;                   /* warning/pending */
  --yellow-9:#ffec99;                                       /* info/highlight */
  --custom-gray-0:#f3f3f4;                                  /* table row hover */
  /* ---- Core surfaces / text ---- */
  --color-body:#ffffff; --text:#343a40; --dimmed:#666666;
  --border:#e6e7e8; --border-strong:#a7a9ab;
  --primary:#3f8ad4; --primary-text:#221f20;
  /* ---- Type ---- */
  --font:"Urbanist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --fz-xs:12px; --fz-sm:14px; --fz-md:16px; --fz-lg:18px; --fz-xl:20px;
  /* ---- Radius (default sm=4) ---- */
  --r-xs:2px; --r-sm:4px; --r-md:8px; --r-lg:16px; --r-pill:999px;
  /* ---- Spacing ---- */
  --sp-xs:10px; --sp-sm:12px; --sp-md:16px; --sp-lg:20px; --sp-xl:32px;
  /* ---- Shadows (Mantine two-layer) ---- */
  --sh-xs:0 1px 3px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.1);
  --sh-sm:0 1px 3px rgba(0,0,0,.05),0 10px 15px -5px rgba(0,0,0,.05),0 7px 7px -5px rgba(0,0,0,.04);
  --sh-md:0 1px 3px rgba(0,0,0,.05),0 28px 23px -7px rgba(0,0,0,.05),0 12px 12px -7px rgba(0,0,0,.04);
  /* ---- Overlay scrim + a single z-index scale ---- */
  --scrim:rgba(5,47,89,.45);
  --z-app:100; --z-pop:300; --z-overlay:3000; --z-login:3001; --z-toast:9999;

  /* ====== Aliases: old sage tokens → Jungle tokens (the rebrand, in one shot) */
  --sage:var(--primary);      /* #53ae94 → #3f8ad4  accent green → Jungle blue   */
  --navy:#052f59;             /* #041a24 → Jungle navy                            */
  --ink:var(--gray-8);        /* #101828 → #343a40                                */
  --muted:var(--gray-6);      /* #667085 → #666666                                */
  --line:var(--border);       /* #e4e7ec → #e6e7e8                                */
  --tint:#eef4fb;             /* #edf7f4 → light-blue tint (accent hover/bg)      */
  --bg:var(--gray-0);         /* #f8fafb → #f8f9fa                                */
}

/* ---- Global type: Urbanist everywhere (was system/Inter, login-only Urbanist) */
body { font-family:var(--font); }
h1,h2,h3,h4,h5,h6 { font-family:var(--font); }

/* ============================ Rebrand re-skins ============================== */
/* Targeted overrides for the colours hardcoded as raw hex in the inline CSS
   (not behind a var), so they move green→blue / onto the navy header. */
a { color:var(--primary); }
.link { color:var(--primary); }
/* primary button → Jungle "light filled" (blue-9 on blue-0), matching the login card */
.btn-primary { background:var(--blue-0); color:var(--blue-9); border:0; font-weight:600; }
.btn-primary:hover:not(:disabled) { background:var(--blue-2); }
/* icon chips / selected cells that sat ON the sage accent → white on NAVY (white on
   blue-5 is only 3.6:1, fails AA; navy #052f59 gives ~10:1 for the tiny glyphs). */
.ichip, th .term .ichip, .cal-d.end, .rb-chip.on, .funnel.on { color:#fff; background:var(--navy); }
.rb-chip.on { border-color:var(--navy); }
/* success/status stays GREEN (semantic), not blue — readable green on light bg */
.rt-badge.ok, .pp-reason.ok, .pp-reason, .cc-delta.good, .iv-tag, .iv-fn,
.pp-loc, .pp-due.now, .cc-vs, .tm-active, .ex-ok { color:var(--green-9); }
.rt-badge.ok, .pp-reason.ok, .pp-reason, .cc-delta.good, .iv-tag, .iv-fn { background:var(--green-0); }
.tm-role-admin, .rh-badge.rh-ok { background:var(--green-0); color:var(--green-9); }
.cc-sec.period { background:var(--green-0); border-color:#cdeadd; }
.cc-sec.period .cc-sec-t { color:var(--green-9); } .cc-sec.period .cc-sec-t::before { background:var(--green-5); }
.pp-due.now { background:var(--green-0); }
.drq-shipped { border-left-color:var(--green-5); }   /* data-request "shipped" is a success state → green */

/* navy header chrome — the green-on-dark-green elements re-tint to blue-on-navy */
header { background:var(--navy); }
.synced, .period-lbl { color:var(--blue-0); }
#acct { color:var(--blue-0) !important; }
.hdr-btn, .syncpill, .hdr-switch {
  background:rgba(255,255,255,.10); color:#dceaf8; border:1px solid rgba(255,255,255,.22); }
.hdr-btn:hover, .syncpill:hover, .hdr-switch:hover { background:rgba(255,255,255,.18); }
.syncpill.ready { background:rgba(63,138,212,.22); color:#dceaf8; border-color:var(--blue-5); }
.syncpill.running { background:rgba(245,200,90,.18); color:#f5d98a; border-color:#6b5616; }
.syncpill.error { background:rgba(217,38,22,.18); color:#ffb4ab; border-color:#7a2a22; }
.envchip.zoo { background:rgba(255,255,255,.12); color:var(--blue-0); }
.hdr-logo { height:20px; width:auto; filter:brightness(0) invert(1); vertical-align:middle; margin-right:2px; }
header h1 { display:flex; align-items:center; gap:8px; font-weight:600; letter-spacing:.2px; }
/* the Immediate-Value hero gradient: navy → blue (was navy → green) */
.iv-banner { background:linear-gradient(110deg,var(--navy),#0b3a5e 55%,var(--blue-5)); }
.iv-card { border-left-color:var(--primary); }
/* active nav underline / KPI accent bar already use var(--sage) → now blue */

/* ============================ Gorilla loader =============================== */
.gorilla { display:block; height:auto; }
/* full-viewport overlay (boot / auth / sync / account-switch) — white gorilla on scrim */
.ldr-full { position:fixed; inset:0; z-index:var(--z-overlay); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; background:var(--scrim); }
.ldr-full .ldr-msg { color:#fff; font-size:var(--fz-sm); font-weight:500; }
/* in-panel: replaces a container body, centered (mirrors <Center w=100% h=calc(100vh-126px)>) */
.ldr-panel { display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; width:100%; min-height:180px; flex:1; color:var(--dimmed); font-size:var(--fz-sm); }
.ldr-inline { display:inline-block; vertical-align:middle; }
/* reduced-motion fallback: a CSS spinner instead of the GIF (a GIF ignores the media query) */
.ldr-spin { border-radius:50%; border:3px solid var(--gray-1); border-top-color:var(--primary);
  animation:ldr-spin .8s linear infinite; }
@keyframes ldr-spin { to { transform:rotate(360deg); } }

/* ============================ Overlay shell ================================ */
/* one centered-modal shell for every surface (drawers eliminated). Size tokens
   are viewport-relative so nothing is squeezed or bloated. */
.ov-scrim { position:fixed; inset:0; z-index:var(--z-overlay); background:var(--scrim);
  display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box;
  animation:ov-in .14s ease; }
@keyframes ov-in { from { opacity:0; } to { opacity:1; } }
.ov-modal { background:var(--color-body); border-radius:var(--r-md); box-shadow:var(--sh-md);
  display:flex; flex-direction:column; max-height:88vh; width:100%; overflow:hidden; }
.ov-sm    { max-width:min(480px,94vw); }
.ov-md    { max-width:min(620px,94vw); }
.ov-lg    { max-width:min(820px,94vw); }
.ov-xl    { max-width:min(1100px,92vw); }
.ov-split { max-width:min(1400px,95vw); height:88vh; }
.ov-head { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:var(--sp-md) var(--sp-lg); border-bottom:1px solid var(--border); }
.ov-head h3, .ov-head h2 { margin:0; font-size:var(--fz-lg); font-weight:600; color:var(--gray-9); }
.ov-x { background:none; border:0; font-size:22px; line-height:1; cursor:pointer; color:var(--dimmed);
  padding:0 2px; border-radius:var(--r-sm); }
.ov-x:hover { color:var(--gray-9); background:var(--gray-0); }
.ov-body { flex:1 1 auto; overflow:auto; padding:var(--sp-lg); }
.ov-body.flush { padding:0; }              /* for full-bleed split bodies */
.ov-foot { flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:var(--sp-sm);
  padding:var(--sp-md) var(--sp-lg); border-top:1px solid var(--border); }
.ov-foot .ov-foot-l { margin-right:auto; }  /* left-aligned status/secondary */

/* ====================== Shared component layer ============================= */
/* Defined now; screens migrate onto these in the component-consistency phase.
   Old per-screen classes keep working until each screen is converted. */
.btn { font:inherit; font-size:var(--fz-xs); font-weight:500; border:1px solid var(--gray-1);
  background:#fff; color:var(--gray-8); border-radius:var(--r-sm); padding:6px 11px; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px; line-height:1.4; }
.btn:hover:not(:disabled) { background:var(--gray-0); } .btn:disabled { opacity:.45; cursor:default; }
.btn.btn-primary { background:var(--blue-0); color:var(--blue-9); border:1px solid var(--blue-0); font-weight:600; }
.btn.btn-primary:hover:not(:disabled) { background:var(--blue-2); }
.btn.btn-solid { background:var(--navy); color:#fff; border-color:var(--navy); }
.btn.btn-subtle { background:none; border-color:transparent; }
.btn.btn-alert { background:none; border-color:var(--red-6); color:var(--red-6); }
.btn.btn-alert:hover:not(:disabled) { background:var(--red-3); }
.select { font:inherit; font-size:var(--fz-sm); border:1px solid var(--border); border-radius:var(--r-md);
  padding:9px 11px; background:#fff; color:var(--text); }
.select-sm { font-size:var(--fz-xs); border-radius:var(--r-sm); padding:4px 7px; }
.check-list { display:flex; flex-direction:column; }
.check-row { display:flex; align-items:center; gap:var(--sp-xs); font-size:var(--fz-sm); cursor:pointer;
  padding:4px 2px; }
.check-row input[type=checkbox], .check-list input[type=checkbox] { accent-color:var(--primary); flex:0 0 auto; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-bottom:6px; margin:18px 0 8px; }
.section-head h4 { margin:0; font-size:var(--fz-lg); font-weight:500; color:var(--gray-8); }
.label-micro { font-size:var(--fz-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--dimmed); font-weight:700; }
.tbl { width:100%; border-collapse:collapse; font-size:var(--fz-sm); }
.tbl th { text-align:left; padding:8px 11px; background:var(--gray-1); color:var(--gray-8);
  font-size:var(--fz-xs); text-transform:uppercase; letter-spacing:.04em; font-weight:700;
  border-bottom:1px solid var(--border-strong); white-space:nowrap; }
.tbl td { padding:8px 11px; border-bottom:1px dashed var(--border-strong); }
.tbl tbody tr:last-child td { border-bottom:0; }
.tbl tbody tr:hover td { background:var(--custom-gray-0); }
.tbl .num { text-align:right; font-variant-numeric:tabular-nums; }
.badge { display:inline-flex; align-items:center; border-radius:12px; padding:4px 12px;
  font-size:var(--fz-xs); font-weight:500; white-space:nowrap; }
.badge-ok { background:var(--green-0); color:var(--green-9); }
.badge-warn { background:var(--orange-2); color:var(--orange-9); }
.badge-err { background:var(--red-3); color:var(--red-6); }
.badge-info { background:var(--blue-0); color:var(--blue-9); }

/* ============ Normalize legacy overlays onto the modal paradigm ============ */
/* One paradigm: centered modals. The two right-side DRAWERS (Settings, Sync)
   become centered modals via layout overrides (no JS rewrite). */
#setdrawer, #syncdrawer { display:flex; align-items:center; justify-content:center;
  padding:16px; box-sizing:border-box; z-index:var(--z-overlay); }
.setd-panel, #syncdrawer .sd-panel {
  position:relative; right:auto; top:auto; height:auto; max-height:88vh;
  border-radius:var(--r-md); box-shadow:var(--sh-md); animation:ov-in .14s ease; }
.setd-panel { width:min(1100px,94vw); }
#syncdrawer .sd-panel { width:min(620px,94vw); }
/* the Sync panel was dark-themed (right drawer) → re-skin it as a light modal */
#syncdrawer .sd-panel { background:var(--color-body); color:var(--text); }
#syncdrawer .sd-x { color:var(--dimmed); }
.sd-st.ready { color:var(--green-9); } .sd-st.running { color:var(--orange-9); } .sd-st.error { color:var(--red-6); }
.sd-last, .sd-note, .sd-h4, .sd-run-meta { color:var(--dimmed); }
.sd-note b { color:var(--text); }
.sd-run { background:var(--gray-0); } .sd-run-when { color:var(--text); }
.sd-run-st.ready { color:var(--green-9); } .sd-run-st.failed { color:var(--red-6); }
.sd-btn-2 { border-color:var(--border); color:var(--text); } .sd-btn-2:hover { background:var(--gray-0); }
.sd-clear { border-color:var(--red-6); color:var(--red-6); background:transparent; } .sd-clear:hover { background:var(--red-3); }

/* One scrim colour + one z-index across every overlay surface. */
.modal-bg, .cmdk-bg, .pp-bg, .dr-scrim,
#setdrawer .sd-scrim, #syncdrawer .sd-scrim { background:var(--scrim); }
.modal-bg, .cmdk-bg, #drmodal, #rhmodal, #fpmodal { z-index:var(--z-overlay); }
#loginui { z-index:var(--z-login); }
/* .pp-bg keeps its per-overlay inline z (ppOverlay: 300/340/700) so nested pp
   overlays (create-PO over the plan) still stack — only its scrim colour is unified above. */

/* Adequate room: the two squeezed dense modals (were 620px) get width to breathe. */
#exmodal .dr-panel, #rhmodal .dr-panel { width:min(880px,94vw); }

/* =================== Component consistency (light pass) ===================
   The tokens (above) already unified colour/border/font app-wide; these snap the
   remaining shape inconsistencies the audit flagged, without a markup migration. */
/* consistent blue checkbox / radio ticks everywhere (were native default) */
input[type=checkbox], input[type=radio] { accent-color:var(--primary); }
/* one default button radius — pills (cc-tabs/rb-chip) keep their higher-specificity radius */
button { border-radius:var(--r-sm); }
/* one radius for the ~8 divergent <select> treatments (were 6/7/8px) */
.dr-in, .rt-grp select, .wb-bar select, .rb-meas select, .set-thresh select,
.tm-sel, .drq-status, .ffop, .wb-bar .ghost, .ff-r input, .ffc .ffop, .ffc .ffv, .ffc .ffv2 {
  border-radius:var(--r-md); }
/* the three near-identical admin tables (exports/team/api) share one header rule */
.ex-tbl th, .tm-tbl th, .api-tbl th { border-bottom:1px solid var(--border-strong); }
/* consistent row-hover across list-ish surfaces (token, was several greens) */
.rb-item:hover, .fp-row:hover, .set-tag:hover, .wb-t > summary:hover, .wb-col:hover { background:var(--tint); }

/* ===================== click-through feedback fixes ====================== */
.hdr-logo { height:28px; }                    /* bigger Jungle mark */
#wildbanner { display:none !important; }       /* drop the red banner — the WILD pill is enough */

/* account picker: cap the list box ~80vh (vertically centred via #loginui flex),
   scroll the accounts, centre the names */
.login-card { max-height:88vh; }
.acct-list { max-height:56vh; overflow-y:auto; }
.acct-pick { justify-content:center; }
.acct-name { flex:0 1 auto; text-align:center; }

/* header account menu (name → Switch account / Sign out) */
.acct-trigger { cursor:pointer; }
.acct-trigger::after { content:" \25BE"; opacity:.7; font-size:10px; }
.acct-menu { position:fixed; z-index:var(--z-overlay); background:var(--color-body);
  border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--sh-md);
  padding:4px; min-width:180px; }
.acct-menu button { display:block; width:100%; text-align:left; background:none; border:0;
  padding:8px 12px; border-radius:var(--r-sm); font:inherit; font-size:13px; cursor:pointer; color:var(--text); }
.acct-menu button:hover { background:var(--gray-0); }

/* the stock-&-sales chart must FILL its pane — the global `canvas{max-height:200px}`
   capped it, leaving whitespace below in the (taller) PO + in-page graph panes. */
.pp-line-chart canvas { max-height:none; }

/* account name in the title bar: the NAME is the menu trigger; read-only is a
   separate quiet tag (not the menu label). */
#acct.acct-trigger { color:#fff; font-weight:600; }
.ro-tag { font-size:10px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
  color:var(--blue-0); background:rgba(255,255,255,.12); border-radius:var(--r-sm); padding:2px 7px; }

/* inventory in-page split: the graph pane drops in at the bottom of the report
   (no modal); the report's own table is the "lines on top". */
#rowsplit { display:none; flex-direction:column; min-height:0; border-top:2px solid var(--border-strong);
  margin-top:8px; padding-top:8px; }
.rs-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 2px 6px; }
.rs-title { font-size:14px; font-weight:600; color:var(--navy); }
.rs-x { background:none; border:0; font-size:18px; line-height:1; cursor:pointer; color:var(--dimmed); border-radius:var(--r-sm); }
.rs-x:hover { color:var(--gray-9); background:var(--gray-0); }
.rt-tbl tr.rt-rowsel.on td { background:#e7f0fb; box-shadow:inset 2px 0 0 var(--primary); }

@media (prefers-reduced-motion: reduce) {
  /* kill entry animations AND every infinite spinner (the reduced-motion gorilla
     fallback uses .ldr-spin — make it static too; the GIF itself is swapped out in ui.js) */
  .ov-scrim, .ldr-full, .setd-panel, #syncdrawer .sd-panel,
  .ldr-spin, .login-spin, .acct-pick .acct-ld, .sync-subbar.indet span { animation:none; }
}