/* ============================================================================
   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); } }

/* ---- progress primitives (Loader.progress / Loader.progressFull) ----
   ONE shared track/fill + ONE indeterminate keyframe for every progress surface
   (sync, mart download, export). Determinate fill animates its width; the .indet
   variant runs the shared sliding strip. */
.ldr-prog { display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; width:100%; min-height:120px; flex:1; color:var(--dimmed); font-size:var(--fz-sm); }
.ldr-prog-label, .ldr-prog-sublabel { color:var(--dimmed); font-size:var(--fz-sm); font-weight:500; text-align:center; }
.ldr-prog-pct { color:var(--muted); font-size:var(--fz-xs); font-variant-numeric:tabular-nums; min-width:34px; text-align:right; }
.ldr-prog-track { position:relative; width:min(280px, 80%); height:7px; border-radius:999px;
  background:var(--gray-1); overflow:hidden; }
.ldr-prog-fill { height:100%; border-radius:999px; width:0%;
  background:linear-gradient(90deg, var(--green-5, #2f9e6e), var(--blue-5, #3f8ad4));
  transition:width .35s ease; }
/* indeterminate: the fill becomes a 35%-wide strip that slides (shared keyframe) */
.ldr-prog.indet .ldr-prog-fill, .ldr-prog-row.indet .ldr-prog-fill, .ldr-prog-track.indet .ldr-prog-fill {
  position:absolute; left:0; width:35% !important; animation:ldr-indet 1.1s ease-in-out infinite; }
@keyframes ldr-indet { 0% { left:-35%; } 100% { left:100%; } }
.sync-w { width:100% !important; }   /* full-width shared track inside the sync gate screen */

/* a progress row = [sublabel] [track grows] [readout]; the track flexes to fill it */
.ldr-prog-row { display:flex; align-items:center; gap:8px; }
.ldr-prog .ldr-prog-row { width:min(320px, 84%); }
.ldr-prog-row .ldr-prog-track { flex:1; width:auto; }
.ldr-prog-row .ldr-prog-sublabel { flex:0 0 auto; max-width:42%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; }

/* full-screen determinate variant (sync gate / manual sync / boot / mart download) */
.ldr-full-prog .ldr-full-bars { display:flex; flex-direction:column; gap:10px; width:min(360px, 78vw); }
.ldr-full-prog .ldr-prog-sublabel { color:rgba(255,255,255,.78); font-size:var(--fz-xs); }
.ldr-full-prog .ldr-prog-pct { color:rgba(255,255,255,.82); }
.ldr-full-prog .ldr-prog-track { background:rgba(255,255,255,.22); }

/* ============================ 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; }
/* FIXED height + flex column so switching tabs doesn't resize the modal; the body scrolls. */
.setd-panel { width:min(1100px,94vw); height:88vh; display:flex; flex-direction:column; }
.setd-head, .setd-tabs, .setd-foot { flex:0 0 auto; }
.setd-body { flex:1 1 auto; overflow-y:auto; min-height:0; }
#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); }
/* Public app description shown UNDER the login card (homepage, no login needed).
   #loginui is a flex ROW by default — switch to a COLUMN so the info stacks BELOW
   the card (not beside it), and let the screen scroll. */
#loginui.with-info { flex-direction:column; align-items:center; justify-content:flex-start; overflow-y:auto; }
#loginui.with-info .login-panel { flex:0 0 auto; }
.login-info { width:100%; max-width:840px; margin:0 auto; padding:30px 22px 64px; box-sizing:border-box;
  color:#eaf5f0; font-family:Urbanist,-apple-system,Segoe UI,Roboto,sans-serif; }
.login-info .li-brand { font-weight:800; font-size:20px; color:#fff; text-align:center; letter-spacing:.3px; }
.login-info .li-brand b { color:#7fe3c4; }
.login-info .li-h { text-align:center; font-size:26px; line-height:1.2; color:#fff; margin:16px 0 8px; font-weight:800; }
.login-info .li-p { text-align:center; font-size:16px; color:#d8ece4; max-width:680px; margin:0 auto 24px; line-height:1.6; }
.login-info .li-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.login-info .li-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:16px; }
.login-info .li-card h3 { margin:0 0 5px; font-size:15px; color:#fff; }
.login-info .li-card p { margin:0; font-size:13px; color:#bfe0d4; line-height:1.5; }
.login-info .li-note { text-align:center; font-size:13px; color:#9fcbbb; margin:18px 0 0; }
.login-info .li-foot { margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; gap:16px; flex-wrap:wrap; justify-content:center; font-size:13px; color:#9fcbbb; }
.login-info .li-foot a { color:#cfeee2; }
@media (max-width:720px){ .login-info .li-grid { grid-template-columns:1fr; } }
/* .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. */

/* ===== Unified modal shell (.dr-*): one centered, capped, internally-scrolling dialog =====
   Every hand-rolled modal (data request, scheduled export, run history, folder picker, token
   mint/reveal, role editor) shares this — so none can overflow the viewport or sit off-centre. */
#drmodal, #exmodal, #rhmodal, #fpmodal {
  position:fixed; inset:0; z-index:var(--z-overlay); display:flex; align-items:center; justify-content:center;
  padding:16px; box-sizing:border-box; }
.dr-scrim { position:absolute; inset:0; }                                   /* backdrop (colour set above) */
.dr-panel { position:relative; width:min(620px,94vw); max-height:90vh; display:flex; flex-direction:column;
  overflow-x:hidden; overflow-y:auto; padding:0 18px 6px; box-sizing:border-box;
  background:var(--color-body,#fff); border-radius:var(--r-md,14px); box-shadow:var(--sh-md,0 20px 60px rgba(10,20,40,.30)); }
.dr-panel * { box-sizing:border-box; }
.dr-panel input, .dr-panel select, .dr-panel textarea { max-width:100%; }
/* head/foot break out of the panel's side padding to span full width (their own padding re-aligns content) */
.dr-head { position:sticky; top:0; z-index:2; flex:0 0 auto; margin:0 -18px; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 18px; border-bottom:1px solid var(--border); background:var(--color-body,#fff); }
.dr-head h3 { margin:0; font-size:16px; color:var(--navy); }
.dr-x { border:0; background:none; font-size:22px; line-height:1; cursor:pointer; color:var(--muted); padding:0 6px; border-radius:6px; }
.dr-x:hover { background:var(--gray-1); color:var(--navy); }
.dr-body { padding:14px 0; }                                               /* sides come from the panel padding */
.dr-foot { position:sticky; bottom:0; flex:0 0 auto; margin:0 -18px -6px; display:flex; align-items:center; gap:10px;
  padding:12px 18px; border-top:1px solid var(--border); background:var(--color-body,#fff); }
.dr-spacer { flex:1; }
.dr-l { display:block; font-size:12px; font-weight:700; color:var(--navy); margin:12px 0 4px; }
/* Adequate room: the two dense modals 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; }
/* an admin-DISABLED account: greyed + not selectable, with a badge */
.acct-pick.acct-disabled { opacity:.5; cursor:not-allowed; filter:grayscale(1); }
.acct-pick.acct-disabled:hover { background:#fff; box-shadow:none; }
.acct-disabled-badge { margin-left:8px; font-size:11px; font-weight:700; color:var(--muted);
  border:1px solid var(--border); border-radius:10px; padding:1px 7px; text-transform:uppercase; letter-spacing:.04em; }

/* demo account: a distinct, permanent button (jungle.app staff) separate from the list */
.acct-demo-wrap { width:100%; padding:0 16px 14px; box-sizing:border-box; }
.acct-demo-sep { display:flex; align-items:center; gap:10px; text-align:center; font-size:11px; font-weight:700;
  letter-spacing:.6px; color:#8a96a3; text-transform:uppercase; margin:4px 2px 12px; }
.acct-demo-sep::before, .acct-demo-sep::after { content:""; flex:1; height:1px; background:#e2e8f0; }
.acct-pick.acct-demo { flex-direction:column; align-items:center; height:auto; padding:13px 14px; gap:4px;
  background:linear-gradient(135deg,#0b3d2e,#13855f); border:1px solid #0e6b4c; }
.acct-pick.acct-demo:hover:not(:disabled) { background:linear-gradient(135deg,#0e4a38,#16996c); }
.acct-pick.acct-demo .acct-name { color:#fff; }
.acct-demo-badge { font-size:10px; font-weight:800; letter-spacing:1px; color:#0b3d2e; background:#7fe3c4; padding:2px 9px; border-radius:10px; }
.acct-demo-sub { font-size:11px; color:#bfe9d8; }
.envchip.demo { background:#13855f; color:#fff; }

/* 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; }
/* the demand-planning Timeline likewise fills its fixed-height pane */
#dpCanvas { 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); }

/* generic drill-to-detail split pane (reverse-aggregation underlying rows) */
.rt-split { display:none; }
/* the drill panel is a resizable bottom pane: a drag handle (.rt-vsplit) over a highlighted
   header + the detail scroll. Its height (flex-basis) is set in JS (default ~50/50). */
.rt-split.open { display:flex; flex-direction:column; min-height:0; }
.rt-split .rt-scroll { flex:1; min-height:0; max-height:none; overflow:auto; }
.rt-vsplit { flex:0 0 auto; height:10px; margin:2px 0 5px; cursor:row-resize; border-radius:2px;
  background:linear-gradient(var(--border-strong),var(--border-strong)) center/40px 3px no-repeat; }
.rt-vsplit:hover { background:linear-gradient(var(--primary),var(--primary)) center/64px 3px no-repeat; }
.rs-pg { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--dimmed); }
.rs-pg button { background:none; border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer; padding:1px 7px; color:var(--gray-9); }
.rs-pg button:disabled { opacity:.4; cursor:default; }
/* drill panel: sortable headers + a per-column filter row (client-side over the drilled rows) */
.rt-split th.rs-sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.rt-split th.rs-sortable:hover { background:#e7f0fb; }
.rs-sg { color:var(--primary); font-weight:700; }
.rs-filtrow th { padding:2px 4px !important; background:var(--gray-1, #f7f9fc); }
.rs-filt { width:100%; box-sizing:border-box; font-size:11px; padding:2px 5px; border:1px solid var(--border);
  border-radius:var(--r-sm); background:#fff; color:var(--gray-9); }
.rs-filt:focus { outline:none; border-color:var(--primary); }
/* dedicated drill-down column — a persistent per-line icon as the first column */
.rt-drillcol { width:34px; min-width:34px; max-width:34px; text-align:center; padding:0 2px !important; }
.rt-drillcol-btn { background:none; border:0; cursor:pointer; color:var(--gray-5); font-size:15px; line-height:1;
  padding:3px 5px; border-radius:var(--r-sm); }
.rt-drillcol-btn:hover { color:#fff; background:var(--primary); }
/* a measure / pivot cell on a summarised row also drills that specific cell */
td.rt-drillcell { cursor:pointer; }
td.rt-drillcell:hover { box-shadow:inset 0 0 0 1px var(--primary); }
/* hover menu off the drill icon — "Drill down to" + the targets */
.rt-drillmenu { position:fixed; z-index:var(--z-pop); background:#fff; border:1px solid var(--border-strong);
  border-radius:var(--r-md); box-shadow:var(--sh-md); padding:4px; min-width:175px; }
.rt-drillmenu-h { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--dimmed); padding:5px 8px 6px; }
.rt-drillmenu button { display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:6px 9px; border-radius:var(--r-sm); font-size:13px; color:var(--gray-9); white-space:nowrap; }
.rt-drillmenu button:hover { background:var(--primary); color:#fff; }
/* the drilled line + the drill-panel header share one highlight colour */
.rt-tbl tr.rt-drilled td { background:#e7f0fb !important; box-shadow:inset 3px 0 0 var(--primary); }
.rt-split .rs-head { background:#e7f0fb; border:1px solid #cfe0f5; border-radius:var(--r-sm); padding:5px 8px; }
/* column resize grip — was hover-only (invisible); show a faint always-on grip line */
.rt-resz::after { content:""; position:absolute; top:28%; right:3px; width:2px; height:44%; background:var(--gray-3); border-radius:1px; pointer-events:none; }
.rt-resz:hover::after { background:var(--primary); }
.cc-rk-drill { cursor:pointer; }
.cc-rk-drill:hover .cc-rkl { color:var(--primary); text-decoration:underline; }

@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, .ldr-prog.indet .ldr-prog-fill, .ldr-prog-row.indet .ldr-prog-fill, .ldr-prog-track.indet .ldr-prog-fill { animation:none; }
  /* static indeterminate strip still reads as "busy": full-width muted bar */
  .ldr-prog.indet .ldr-prog-fill, .ldr-prog-row.indet .ldr-prog-fill, .ldr-prog-track.indet .ldr-prog-fill { position:static; width:100% !important; opacity:.5; }
}

/* ── account cost: a header pill + a details popup ── */
.costpill { display:inline-flex; align-items:center; gap:7px; padding:3px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); color:#fff; cursor:pointer;
  font-size:11px; white-space:nowrap; }
.costpill:hover { background:rgba(255,255,255,.15); }
.costpill-lbl { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--blue-0); }
.costpill-amt { font-weight:700; font-variant-numeric:tabular-nums; }
.costpill.over { border-color:var(--red-6); } .costpill.over .costpill-amt { color:#ffb4ab; }

.cost-head { padding:2px 0 14px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.cost-head-amt { font-size:32px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; line-height:1.1; }
.cost-head-sub { font-size:12px; color:var(--muted); margin-top:3px; }
.cost-budget { margin-bottom:16px; }
.cost-budget-top { display:flex; justify-content:space-between; font-size:var(--fz-sm); color:var(--gray-7); margin-bottom:6px; }
.cost-bar { height:8px; border-radius:6px; background:var(--gray-1); overflow:hidden; }
.cost-bar-fill { height:100%; background:var(--primary); border-radius:6px; transition:width .3s; }
.cost-bar-fill.over { background:var(--red-6); }
.cost-over { color:var(--red-6); font-weight:600; }
.tbl.cost-bd { width:100%; }
.tbl.cost-bd td { padding:7px 2px; border-bottom:1px solid var(--line); font-size:var(--fz-sm); }
.cost-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cost-total td { font-weight:700; color:var(--navy); border-top:2px solid var(--line); border-bottom:0; }
.cost-note { font-size:11px; margin-top:10px; }
.cost-gate { text-align:center; padding:32px 18px; } .cost-gate h3 { margin:0 0 6px; }
.cost-op-head { margin-top:18px; }
.cost-cfg { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px;
  padding:12px 14px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-md); }
.cost-cfg-row { display:flex; align-items:center; gap:7px; font-size:var(--fz-sm); color:var(--gray-7); }
.cost-cfg-row input.select-sm { width:84px; }

/* ── operator account-cost modal (opened from the switch page) ── */
.ov-full { width:90vw; max-width:90vw; height:90vh; max-height:90vh; }
.oc-kpis { display:flex; gap:26px; flex-wrap:wrap; margin-bottom:18px; }
.oc-kpi-v { font-size:24px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; margin-top:2px; }
.oc-tbl { width:100%; border-collapse:collapse; font-size:var(--fz-sm); }
.oc-tbl th, .oc-tbl td { padding:7px 10px; border-bottom:1px solid var(--line); }
.oc-tbl th { font-size:var(--fz-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }
.oc-tbl .num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.oc-cust { color:var(--green-9); font-weight:600; }
.oc-total td { font-weight:700; color:var(--navy); border-top:2px solid var(--line); border-bottom:0; }
.oc-over { display:inline-block; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--red-6); background:var(--red-3); border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:middle; }
.oc-mk, .oc-bg { font:inherit; font-size:var(--fz-xs); padding:3px 5px; border:1px solid var(--gray-1); border-radius:var(--r-sm); text-align:right; }
.oc-mk { width:54px; } .oc-bg { width:74px; }
.oc-auto-l { font-size:11px; color:var(--muted); margin-left:6px; white-space:nowrap; }
.oc-savecell { white-space:nowrap; }
.oc-save { font-size:var(--fz-xs); padding:4px 10px; }
.oc-msg { font-size:11px; margin-left:6px; }
.oc-tbl input[type=number] { -moz-appearance:textfield; }

/* ── operator button on the switch page — one clean pill (top-right) ── */
.oc-op-btn { position:absolute; top:18px; right:18px; z-index:2; display:flex; flex-direction:column; align-items:flex-start;
  text-align:left; background:#fff; color:var(--navy); border:0; border-radius:10px; padding:7px 16px;
  cursor:pointer; box-shadow:var(--sh-md); }
.oc-op-btn:hover { background:var(--gray-0); }
.oc-op-eyebrow { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--primary); }
.oc-op-main { font-size:14px; font-weight:600; color:var(--navy); }

/* Settings tabs + sync-schedule builder */
.setd-tabs { display:flex; gap:4px; padding:0 22px; border-bottom:1px solid var(--border); background:#fff; }
.setd-tab { appearance:none; border:0; background:none; cursor:pointer; padding:10px 14px; font:inherit;
  font-weight:600; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; }
.setd-tab:hover { color:var(--navy); }
.setd-tab.on { color:var(--primary); border-bottom-color:var(--primary); }
.setd-pane[hidden] { display:none; }
.sch-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 0; border-bottom:1px dashed var(--border); }
.sch-row .dr-in { padding:6px 8px; }
.sch-row .sch-cad { flex:0 0 auto; min-width:130px; font-weight:600; }
.sch-row .sch-at { color:var(--muted); font-size:13px; display:inline-flex; align-items:center; gap:6px; }
.sch-row .sch-fld { color:var(--muted); font-size:13px; display:inline-flex; align-items:center; gap:6px; }
.sch-row .sch-n { width:64px; }
.sch-row .sch-t { width:120px; }
.sch-row .sch-tz { flex:1 1 160px; min-width:140px; }
.sch-del { flex:0 0 auto; margin-left:auto; color:var(--muted); padding:6px 10px; }
.sch-del:hover { color:#c0392b; }
.sch-cost { margin-top:12px; font-size:14px; color:var(--navy); }
.sch-cost b { color:var(--primary); }
.sch-warn { margin-top:10px; padding:10px 12px; border-radius:8px; background:#fff4f0;
  border:1px solid #f3c8b8; color:#a33417; font-size:13px; font-weight:600; }

/* Publish (materialize) control in the Reports browser */
.rb-pub { appearance:none; cursor:pointer; font:inherit; font-weight:600; font-size:13px;
  border:1px solid var(--border); background:#fff; color:var(--navy); border-radius:8px; padding:6px 12px; }
.rb-pub:hover { background:var(--gray-0); }
.rb-pub.on { border-color:var(--primary); color:var(--primary); background:var(--tint); }
.rb-pub-chip { display:inline-block; margin-top:6px; font-size:12px; font-weight:600; color:var(--primary);
  background:var(--tint); border:1px solid var(--primary); border-radius:999px; padding:2px 10px; }

/* Dashboard clone/edit toolbar + editor */
.cc-tools { display:flex; align-items:center; gap:8px; margin:0 0 12px; flex-wrap:wrap; }
.cc-tool { appearance:none; cursor:pointer; font:inherit; font-weight:600; font-size:13px;
  border:1px solid var(--border); background:#fff; color:var(--navy); border-radius:8px; padding:6px 12px; }
.cc-tool:hover { background:var(--gray-0); }
.cc-tool-del:hover { color:#c0392b; border-color:#e7b7ad; }
.cc-custom-chip { font-size:12px; font-weight:600; color:var(--primary); background:var(--tint);
  border:1px solid var(--primary); border-radius:999px; padding:2px 10px; }
.de-sec { margin-top:14px; }
.de-sec-h { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:6px; }
.de-tile { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:8px; margin-bottom:6px; }
.de-tk { font-size:11px; font-weight:700; color:var(--primary); background:var(--tint); border-radius:6px; padding:2px 7px; text-transform:uppercase; }
.de-tn { flex:1; font-size:14px; color:var(--navy); }
.de-acts { display:flex; gap:4px; }
.de-acts button { appearance:none; cursor:pointer; border:1px solid var(--border); background:#fff; border-radius:6px; width:28px; height:28px; font-size:13px; }
.de-acts button:hover { background:var(--gray-0); }
.de-rm:hover { color:#c0392b; }

/* Immersive dashboard builder (2-pane: config + live preview) */
.db-panel { background:#fff; border-radius:14px; width:min(1180px,96vw); height:90vh; display:flex; flex-direction:column;
  box-shadow:var(--sh-lg); overflow:hidden; position:relative; z-index:1; }
.db-body { flex:1; display:flex; min-height:0; }
.db-cfg { flex:0 0 46%; max-width:46%; overflow:auto; padding:16px 18px; border-right:1px solid var(--border); }
.db-prev { flex:1; min-width:0; display:flex; flex-direction:column; background:var(--gray-0); }
.db-prev-h { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid var(--border); font-weight:700; font-size:13px; color:var(--navy); }
.db-prev-body { flex:1; overflow:auto; padding:14px; }
.db-sec { margin-top:16px; }
.db-sec-h { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--navy); margin-bottom:8px; }
.db-tile { border:1px solid var(--border); border-radius:10px; margin-bottom:8px; overflow:hidden; }
.db-tile.open { border-color:var(--primary); }
.db-tile-h { display:flex; align-items:center; gap:10px; padding:8px 10px; }
.db-tn { flex:1; font-size:14px; color:var(--navy); }
.db-form { padding:10px 12px; border-top:1px solid var(--border); background:var(--tint); }
.db-f2 { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.db-f2 label { font-size:12px; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:6px; }
.db-f2 select { padding:5px 8px; border:1px solid var(--border); border-radius:7px; }
.db-sql { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }
.db-tables { margin-top:8px; font-size:12px; }
.db-tables summary { cursor:pointer; color:var(--muted); }
.db-tablist { margin-top:6px; max-height:120px; overflow:auto; line-height:1.9; }
.db-tbl { background:#fff; border:1px solid var(--border); border-radius:6px; padding:1px 6px; font-size:11px; cursor:pointer; }
.db-tbl:hover { border-color:var(--primary); color:var(--primary); }
.db-add { display:flex; gap:8px; margin-top:8px; }
.db-add select { padding:5px 8px; border:1px solid var(--border); border-radius:7px; }
.db-metrics { display:flex; flex-direction:column; gap:6px; }
.db-metric { display:flex; gap:6px; align-items:center; }
.db-metric .db-mlabel { flex:0 0 110px; }
.db-metric select { padding:5px 6px; border:1px solid var(--border); border-radius:7px; }
.db-metric .db-msql { flex:1; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; }
.db-metric .de-rm { flex:0 0 auto; border:1px solid var(--border); background:#fff; border-radius:6px; width:28px; height:30px; cursor:pointer; }

/* RBAC: Roles & access tab + role editor */
.mem-row, .role-row { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px dashed var(--border); }
.mem-email, .role-name { flex:1; font-size:14px; color:var(--navy); }
.mem-role { flex:0 0 auto; max-width:200px; padding:5px 8px; }
.set-invite { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.set-invite .dr-in { flex:1 1 160px; }
.set-invite select { flex:0 0 auto; max-width:160px; }
.role-row .role-edit, .role-row .role-del, .role-row .role-clone { padding:4px 10px; }
.role-row { display:flex; align-items:center; gap:8px; }
.role-row .role-name { flex:1; }
/* role editor: a top-level modal that sits ABOVE the settings drawer */
.role-ed { position:fixed; inset:0; z-index:calc(var(--z-overlay) + 20); display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box; }
/* same footprint as the Settings modal (was too narrow) + fixed height so it doesn't jump */
.role-ed-panel { width:min(1100px,94vw); height:88vh; max-height:88vh; animation:ov-in .14s ease; }
.role-ed .dr-body { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; min-height:0; }
.role-ed .role-caps { grid-template-columns:repeat(3,1fr); }
.role-ed .role-grp-items { grid-template-columns:repeat(3,1fr); }
.role-caps { display:grid; grid-template-columns:repeat(2,1fr); gap:6px 16px; margin:4px 0 6px; }
.role-it { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--navy); }
.role-it-dis { color:var(--muted); }
.role-res { border:1px solid var(--border); border-radius:10px; padding:8px 10px; margin-bottom:10px; }
.role-res-h { display:flex; align-items:center; gap:8px; font-weight:700; font-size:13px; color:var(--navy); margin-bottom:6px; }
.role-checks { max-height:230px; overflow:auto; }
.role-grp { border-top:1px dashed var(--border); padding:6px 0; }
.role-grp:first-child { border-top:0; }
.role-grp-h { display:flex; align-items:center; gap:8px; font-weight:700; font-size:12.5px; color:var(--navy); }
.role-grp-items { display:grid; grid-template-columns:repeat(2,1fr); gap:3px 14px; margin:5px 0 2px 22px; }
@media (max-width:820px){ .db-body { flex-direction:column; } .db-cfg { flex:none; max-width:none; border-right:0; border-bottom:1px solid var(--border); } }

/* ===== Dashboard builder v2: full-window, left elements / top settings / bottom 16:9 preview ===== */
.dbx-panel { position:fixed; inset:16px; background:#fff; border-radius:14px; display:flex; flex-direction:column;
  box-shadow:0 24px 80px rgba(10,20,40,.35); overflow:hidden; z-index:1; }
.dbx-head { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border); }
.dbx-icon { width:46px; text-align:center; font-size:20px; padding:6px; border:1px solid var(--border); border-radius:8px; }
.dbx-name { flex:0 1 360px; font-size:16px; font-weight:700; color:var(--navy); padding:8px 10px; border:1px solid var(--border); border-radius:8px; }
.dbx-work { display:flex; min-height:0; flex:1; }
.dbx-left { flex:0 0 230px; overflow:auto; border-right:1px solid var(--border); padding:10px; background:var(--gray-0); }
/* right column: settings band on top, the big 16:9 preview fills the rest (full height) */
.dbx-right { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
.dbx-sec { margin-bottom:14px; }
.dbx-sec-h { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0 0 6px; }
.dbx-el { display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:#fff; border:1px solid var(--border);
  border-radius:8px; padding:7px 9px; margin-bottom:5px; cursor:pointer; }
.dbx-el.on { border-color:var(--blue); box-shadow:0 0 0 2px rgba(31,107,255,.15); }
.dbx-el-k { font-size:10px; font-weight:700; text-transform:uppercase; color:var(--blue); background:var(--tint); border-radius:5px; padding:1px 5px; flex:0 0 auto; }
.dbx-el-n { flex:1; font-size:13px; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dbx-el-acts { display:flex; gap:1px; flex:0 0 auto; opacity:.5; }
.dbx-el:hover .dbx-el-acts { opacity:1; }
.dbx-el-acts button { border:0; background:none; cursor:pointer; font-size:12px; padding:2px 4px; border-radius:5px; color:var(--muted); }
.dbx-el-acts button:hover { background:var(--gray-1); color:var(--navy); }
.dbx-empty { font-size:12px; padding:4px 2px 8px; }
.dbx-add { display:flex; gap:6px; margin-top:4px; }
.dbx-add select { flex:1; padding:5px; border:1px solid var(--border); border-radius:6px; }
/* settings band: sits ABOVE the preview in the right column; capped so the preview dominates */
.dbx-top { flex:0 0 auto; max-height:42%; min-width:0; overflow:auto; padding:14px 16px; border-bottom:1px solid var(--border); }
.dbx-top-h { font-weight:700; font-size:13px; color:var(--navy); margin-bottom:8px; text-transform:capitalize; }
.dbx-hint { color:var(--muted); font-size:13px; padding:24px; text-align:center; max-width:460px; margin:0 auto; }
.dbx-top .db-form { border-top:0; background:transparent; padding:0; }
.db-grow { flex:1; }
/* preview: fills the rest of the right column (full height under the settings) */
.dbx-preview { flex:1; min-height:0; background:var(--gray-1); display:flex; flex-direction:column; }
.dbx-pv-h { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:7px 16px; font-weight:700; font-size:12px; color:var(--navy); }
/* the 16:9 frame: as large as fits the preview area, centred */
.dbx-pv-frame { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:12px; overflow:hidden; }
.dbx-pv-body { width:100%; aspect-ratio:16/9; max-height:100%; margin:auto; overflow:auto;
  background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 2px 12px rgba(10,20,40,.10); padding:12px; }
/* focus mode: the element being edited is outlined; the rest is greyed out (preview only) */
.dbx-pv-body .cc-tile { transition:opacity .18s ease, box-shadow .18s ease; }
.dbx-pv-body .cc-tile.pv-dim { opacity:.25; }
.dbx-pv-body .cc-tile.pv-hi { opacity:1; outline:2.5px solid var(--blue); outline-offset:3px; border-radius:10px;
  box-shadow:0 0 0 6px rgba(31,107,255,.12); position:relative; z-index:1; }
@media (max-width:900px){ .dbx-work { flex-direction:column; } .dbx-left { flex:none; border-right:0; border-bottom:1px solid var(--border); } }

/* ===== Dashboards list/manage page (#dashboards) ===== */
.dbl-wrap { max-width:980px; margin:0 auto; padding:8px 4px 40px; }
.dbl-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.dbl-sec-t { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:18px 0 8px; }
.dbl-list { display:flex; flex-direction:column; gap:8px; }
.dbl-none { padding:10px; border:1px dashed var(--border); border-radius:10px; }
.dbl-row { display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid var(--border); border-radius:10px; background:#fff; }
.dbl-icon { font-size:20px; flex:0 0 auto; width:26px; text-align:center; }
.dbl-meta { flex:1; min-width:0; display:flex; flex-direction:column; }
.dbl-name { font-weight:700; color:var(--navy); }
.dbl-sub { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dbl-acts { display:flex; gap:6px; flex:0 0 auto; }
.dbl-acts button { padding:5px 10px; border:1px solid var(--border); background:#fff; border-radius:7px; cursor:pointer; font-size:13px; color:var(--navy); }
.dbl-acts button:hover { background:var(--gray-1); }
.dbl-acts .dbl-del:hover { background:#fde8e6; border-color:#f0a; color:#b42318; }
/* the active toggle switch */
.dbl-tog { flex:0 0 auto; width:38px; height:22px; border-radius:11px; border:0; background:var(--gray-2); position:relative; cursor:pointer; transition:background .15s; }
.dbl-tog.on { background:var(--green, #19a974); }
.dbl-tog[disabled] { opacity:.5; cursor:not-allowed; }
.dbl-knob { position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:left .15s; }
.dbl-tog.on .dbl-knob { left:18px; }
.cc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.cc-managedash { flex:0 0 auto; margin-top:4px; }