/* =====================================================================
   Blue Ridge — Light "Liquid Glass" skin
   A drop-in theme loaded into each operator app. It re-maps the shared design
   tokens to a light palette and gives the top-level surfaces a frosted-glass
   treatment. To revert an app to the dark theme, just remove its
   <link rel="stylesheet" href="/theme-glass.css"> line — nothing else.

   Selectors are deliberately over-specific (html … , :root:root) so the skin
   wins no matter where the <link> sits relative to each app's inline <style>.

   Not loaded on: the take-off tool (a dark plan-viewing canvas) or the
   client-facing proposal (its own brand look).
   ===================================================================== */

/* ---------- 1. tokens (double :root outranks each app's inline :root) ---------- */
:root:root{
  --bg:#e8ecf3;
  --card:rgba(255,255,255,.62);
  --card2:rgba(255,255,255,.80);
  --ink:#182031;
  --muted:#5c6879;
  --line:rgba(24,32,49,.12);
  --good:#178a5b;  --good-bg:rgba(23,145,107,.15);
  --bad:#db4a43;   --bad-bg:rgba(219,74,67,.13);
  --warn:#b9821c;  --warn-bg:rgba(201,138,43,.16);
  --accent:#2f6fc7;
  --brand:#2f6fc7; --brand-dark:#1e3a5f;
  --panel:rgba(255,255,255,.62);
  --shadow:0 14px 34px rgba(26,45,86,.12), 0 3px 10px rgba(26,45,86,.07);
  --shadow-lg:0 22px 50px rgba(26,45,86,.18), 0 6px 16px rgba(26,45,86,.10);
  --rim:rgba(255,255,255,.85);
}

/* ---------- 2. the ground the glass refracts ---------- */
html{ background:#e8ecf3; }
html body{
  color:var(--ink);
  background:
    radial-gradient(60vw 60vw at 6% -12%,  rgba(143,182,240,.50), transparent 60%),
    radial-gradient(55vw 55vw at 104% 4%,  rgba(160,228,208,.45), transparent 60%),
    radial-gradient(52vw 52vw at 42% 118%, rgba(246,217,166,.42), transparent 62%),
    #e8ecf3;
  background-attachment:fixed;
}

/* ---------- 3. frosted surfaces ---------- */
html .tile, html .panel, html .card, html .loginbox, html .modal,
html .brsw-menu, html .brnf-menu, html .brsw-modal,
html .pr-block:not(.po-doc):not(.sop-doc):not(.po-std){
  background:var(--card);
  -webkit-backdrop-filter:blur(24px) saturate(185%); backdrop-filter:blur(24px) saturate(185%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:var(--shadow), inset 0 1px 0 var(--rim);
}
html .card2, html .subs, html .axcard, html .in-kpi{ background:var(--card2); }

/* headers / bars */
html header, html .app, html .apphead, html .pr-topbar, html nav.tabs, html .tabs, html .emp-head{
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  border-color:var(--line);
}
html .pr-topbar{ box-shadow:none; }

/* the app header bar was a DARK navy gradient with white controls in every app —
   turn the bar to light and give its controls contrasting dark ink.
   NOTE: no backdrop-filter here on purpose — a filter makes the bar a stacking
   context, which traps its own dropdowns (search results, bell, switcher) BELOW
   the sticky tab ribbon. An opaque bar keeps those dropdowns on top. */
html header.app{
  background:rgba(255,255,255,.92) !important;
  color:var(--ink) !important;
  border-bottom:1px solid var(--line) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:0 1px 0 var(--rim), 0 6px 18px rgba(26,45,86,.06);
}
/* header search bar: white-on-dark input → dark ink; its results dropdown +
   the bell/switcher panels → light glass, and kept above everything. */
html .hsearch > input, html .hsearch input{
  background:rgba(255,255,255,.82) !important; color:var(--ink) !important; border:1px solid var(--line) !important;
}
html .hsearch > input::placeholder{ color:#93a0b0 !important; }
html .hsearch > input:focus{ border-color:var(--brand) !important; }
html .searchresults, html .notifpanel, html .swmenu{
  background:var(--card2) !important; color:var(--ink) !important;
  border:1px solid rgba(255,255,255,.6) !important; box-shadow:var(--shadow-lg) !important; z-index:200 !important;
  -webkit-backdrop-filter:blur(24px) saturate(185%); backdrop-filter:blur(24px) saturate(185%);
}
html header.app .hbtn, html .hbtn{
  background:rgba(255,255,255,.62) !important; color:var(--ink) !important;
  border:1px solid var(--rim) !important;
}
html header.app .hbtn:hover, html .hbtn:hover{ background:rgba(255,255,255,.88) !important; }
html .who, html .who-badge{ color:var(--muted) !important; }
/* the hub's own platform switcher toggle (not the shared switcher.js one) */
html .switcher > button.swtoggle, html .swtoggle{
  background:rgba(255,255,255,.62) !important; color:var(--ink) !important;
  border:1px solid var(--rim) !important;
}
html .switcher > button.swtoggle:hover, html .swtoggle:hover{ background:rgba(255,255,255,.88) !important; }
html .switcher .caret, html .switcher .cur{ color:var(--muted) !important; opacity:1; }
/* tab bars: the active underline was white → make it the brand blue */
html .tabs button.active, html nav.tabs button.active{ color:var(--ink) !important; border-bottom-color:var(--brand) !important; }
html .tabs button, html nav.tabs button{ color:var(--muted); }

/* tile hover lift */
html .tile{ transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, background .2s ease; }
html .tile:hover, html .tile.open-ok:hover, html .tile.ready:hover{
  transform:translateY(-3px);
  background:var(--card2);
  box-shadow:var(--shadow-lg), inset 0 1px 0 var(--rim);
}

/* ---------- 4. buttons ---------- */
html .btn{
  background:linear-gradient(#4a86e0,#2f6fc7) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.35) !important;
  box-shadow:0 5px 14px rgba(47,111,199,.26), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
html .btn:hover{ filter:brightness(1.05); }
html .btn.ghost, html .btn.sm.ghost, html .hbtn.ghost{
  background:rgba(255,255,255,.6) !important;
  color:var(--ink) !important;
  border:1px solid var(--rim) !important;
  box-shadow:var(--shadow) !important;
}
html .btn.ghost:hover{ background:rgba(255,255,255,.85) !important; }
html .btn.danger{
  background:rgba(219,74,67,.10) !important;
  color:var(--bad) !important;
  border:1px solid rgba(219,74,67,.40) !important;
  box-shadow:none !important;
}
html .btn.good{ background:linear-gradient(#2bb27a,#178a5b) !important; color:#fff !important; }

/* ---------- 5. form fields ---------- */
html input, html select, html textarea, html .cl-in, html .pr-paste,
html .po-name-in, html .sop-in, html .scope-in, html .po-acc{
  background:rgba(255,255,255,.82) !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
}
html input::placeholder, html textarea::placeholder{ color:#93a0b0 !important; }
html input:focus, html select:focus, html textarea:focus, html .cl-in:focus{ border-color:var(--brand) !important; outline:none; }

/* ---------- 5b. recessed / inset surfaces coded with fixed dark hex ----------
   (inputs are covered above; these are the neutral container surfaces —
   segmented controls, search bars, inset rows, sub-panels, chips.) Lighten to a
   faint recess so they don't read as dark boxes inside the light cards. */
html .seg, html .segs, html .est-seg, html .est-secseg, html .ctr-seg, html .po-seg,
html .est-sys, html .est-secmap, html .est-nextrow, html .est-mapchip, html .est-secdel,
html .in-catbtn, html .po-colbtn, html .pr-toggle, html .co-ptype, html .co-srow,
html .tfpick, html .monthpick, html .cl-search, html .axsearch, html .axexpand,
html .axgbtn, html .axcard.open, html .axcard.open.isadmin, html .scan-head, html .pr-lock,
html .pr-money, html .pr-plabel, html .pr-area, html .pr-drop, html .ov-item, html .ldb-set,
html .mdb-tbl-wrap, html .mdb-del, html .mdb-driver, html .att, html .pr-row .num,
html .scan-out code, html .pr-row.pr-hdr, html .in-kpi{
  background:rgba(24,32,49,.05) !important;
  border-color:var(--line) !important;
}
html .po-wf, html .po-wf.wait{ background:rgba(24,32,49,.05) !important; }
html .po-wf.review{ background:rgba(47,111,199,.08) !important; border-color:rgba(47,111,199,.4) !important; }
/* semantic state boxes that used a dark tint → token good/bad tints */
html .gcsel.gc-good, html .est-nextrow-btn:hover, html .po-wf.ok, html .cl-tag.good{
  background:var(--good-bg) !important; border-color:rgba(23,145,107,.35) !important; color:var(--good) !important;
}
html .gcsel.gc-bad, html .est-sys.notready{
  background:var(--bad-bg) !important; border-color:rgba(219,74,67,.35) !important;
}
html .pr-drop:hover, html .pr-drop.drag{ background:var(--warn-bg) !important; }

/* ---------- 5c. toggle switches (dark track + dark knob → light track, white knob) ---------- */
html .sw{ background:rgba(24,32,49,.2) !important; }
html .sw::after, html .knob{ background:#fff !important; box-shadow:0 1px 3px rgba(0,0,0,.28) !important; }
html .axtile.on .sw, html .axperm.on .sw, html .po-pulltog.on .sw, html .tk-priv.on .sw, html .in-noexp.on .sw,
html .sw.on, html .on > .sw{ background:var(--good) !important; }
html .tswitch i{ background:rgba(24,32,49,.2) !important; }
html .tswitch.on i{ background:var(--good) !important; }

/* ---------- 5d. progress bars / meters (dark track → light) ---------- */
html .prog, html .progress, html .progbar, html .bar-track, html .meter{ background:rgba(24,32,49,.08) !important; border-color:var(--line) !important; }
/* the fill stays semantic (var(--good)/--accent), which the tokens already lighten */

/* ---------- 5e. Access Administration matrix (hub) — dark tiles/chips/cards/buttons ---------- */
html .axtile, html .axperm{ background:var(--card2) !important; color:var(--ink) !important; border:1px solid var(--line) !important; }
html .axtile:hover, html .axperm:hover{ border-color:var(--muted) !important; }
html .axtile.on, html .axperm.on{ background:var(--good-bg) !important; color:var(--good) !important; border-color:rgba(23,145,107,.4) !important; }
html .axchip.none{ background:var(--card2) !important; color:var(--muted) !important; border-color:var(--line) !important; }
html .axchip.member{ border-color:rgba(23,145,107,.4) !important; }
html .axchip.admin{ border-color:rgba(201,138,43,.4) !important; }
html .axcard.isadmin, html .axcard.open.isadmin{ background:var(--warn-bg) !important; border-color:rgba(201,138,43,.4) !important; }
html .axhub.on, html .axexpand.on{ border-color:rgba(201,138,43,.4) !important; }
html .axgbtn, html .axexpand{ color:var(--ink) !important; }

/* ---------- 5f. common hardcoded dark borders → soft token-tinted equivalents ---------- */
html .gcsel.gc-good, html .est-sys.ready, html .in-cat.on{ border-color:rgba(23,145,107,.4) !important; }
html .pill.bell, html .cl-tag.good, html .po-wq-tag.pull{ background:rgba(47,111,199,.1) !important; color:var(--brand) !important; border-color:rgba(47,111,199,.3) !important; }

/* ---------- 5g. hardcoded WHITE text / underlines / hover-borders (invisible on light) ---------- */
html .tile h3{ color:var(--ink) !important; }                 /* GTD board tile titles were #fff */
html .subnav button.active, html .emp-tabs button.active{ border-bottom-color:var(--brand) !important; }
html .tchip.on{ background:var(--good-bg) !important; color:var(--good) !important; border-color:rgba(23,145,107,.4) !important; }
html .cl-card:hover, html .pr-way:hover, html .in-row:hover{ border-color:var(--muted) !important; }
html .in-kpi.on{ border-color:var(--brand) !important; }
/* the full-screen signing overlay keeps its dark header (white text stays legible there) */

/* ---------- 6. tables ---------- */
html table{ color:var(--ink); }
html th{ background:rgba(255,255,255,.5) !important; color:var(--muted) !important; border-bottom:1px solid var(--line) !important; }
html td{ color:var(--ink); border-bottom:1px solid var(--line) !important; }
html tbody tr:hover td{ background:rgba(255,255,255,.4); }

/* ---------- 7. overlays / scrims ---------- */
html .modal-back{
  background:rgba(28,40,66,.35) !important;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}

/* ---------- 8. keep printed / white documents white ---------- */
html .po-doc, html .po-std, html .sop-doc, html .ctr-doc, html .proposal-doc{
  background:#fff !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  color:#17181b;
  border:1px solid rgba(24,32,49,.10);
}
@media print{
  html body{ background:#fff !important; }
  html .tile, html .panel, html .card, html .pr-block{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
}

/* ---------- 9. shared switcher + notification bell ----------
   switcher.js injects its own dark palette at runtime (hard-coded hex, not
   tokens) — re-skin it to light glass. html-prefixed + !important so it wins
   over that late-injected <style>. */
html .brsw-toggle, html .brnf-btn{
  background:rgba(255,255,255,.6) !important; color:var(--ink) !important;
  border:1px solid var(--rim) !important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
html .brsw-menu, html .brnf-menu, html .brsw-modal{
  background:var(--card) !important; color:var(--ink) !important;
  border:1px solid rgba(255,255,255,.55) !important; box-shadow:var(--shadow) !important;
  -webkit-backdrop-filter:blur(24px) saturate(185%); backdrop-filter:blur(24px) saturate(185%);
}
html .brsw-item, html .brsw-cur, html .brnf-t, html .brnf-head b, html .brsw-mh h3{ color:var(--ink) !important; }
html .brsw-lbl, html .brsw-sub, html .brnf-when, html .brnf-empty, html .brsw-hint,
html .brnf-clear, html .brsw-caret, html .brsw-item.locked{ color:var(--muted) !important; }
html .brsw-item:hover, html .brnf-item.unread{ background:rgba(47,111,199,.08) !important; }
html .brsw-item.here{ background:rgba(47,111,199,.12) !important; }
html .brsw-div{ background:var(--line) !important; }
html .brnf-item, html .brnf-head, html .brsw-mh, html .brsw-mf{ border-color:var(--line) !important; }
html .brnf-note{ background:var(--good-bg) !important; color:var(--good) !important; border-color:rgba(23,145,107,.3) !important; }
html .brsw-btn{ background:linear-gradient(#4a86e0,#2f6fc7) !important; color:#fff !important; }

/* EOS "private" to-do toggle (dark track/knob by default) → light track, white knob */
html .tk-priv{ background:var(--card2) !important; color:var(--ink) !important; border:1px solid var(--line) !important; }
html .tk-priv .sw{ background:rgba(24,32,49,.2) !important; }
html .tk-priv .knob{ background:#fff !important; box-shadow:0 1px 3px rgba(0,0,0,.28); }
html .tk-priv.on .sw{ background:var(--good) !important; }

/* ---------- 10. the wordmark: the logo.svg is white line-art meant for a dark
   header, so darken it to read on the light frosted bar + login cards. ---------- */
html img[src$="logo.svg"], html .brandlogo{ filter:brightness(.16) saturate(0); }

/* ---------- 10. motion courtesy ---------- */
@media (prefers-reduced-motion:reduce){ html .tile{ transition:none; } }

/* =====================================================================
   11. MOBILE BASELINE (hub-wide) — the desktop layout is untouched; these
   rules only take effect on narrow / touch screens. Each app can still add
   its own finer breakpoints on top. Kept defensive: rules referencing a
   class an app doesn't have are simply inert.
   ===================================================================== */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

@media (max-width:640px){
  /* clip (not hidden) so full-bleed/sticky keep working; matches what CRM already does */
  html body{ overflow-x:clip; }
  /* never let media force the page wider than the phone screen */
  html img, html video, html iframe{ max-width:100%; }
  /* the #1 mobile bug: fixed-width dropdowns/menus/modals running off-screen */
  html .brsw-menu, html .brnf-menu, html .searchresults, html .notifpanel, html .swmenu{
    max-width:calc(100vw - 16px) !important; }
  html .brsw-modal, html .modal, html .loginbox, html .modal-back > *{ max-width:calc(100vw - 20px) !important; }
  html .brnf-menu, html .brsw-menu{ right:8px !important; left:auto !important; }

  /* the dark app header bar: let it wrap and hand its search the full row */
  html header, html header.app, html .app, html .apphead, html .emp-head{ flex-wrap:wrap; row-gap:8px; }
  html .hsearch{ flex:1 1 100% !important; order:9; min-width:0 !important; }
  html .hsearch > input, html .hsearch input{ width:100% !important; }

  /* comfortable tap targets */
  html .btn, html .hbtn, html .brsw-toggle, html .brnf-btn, html .swtoggle, html .tabs button, html nav.tabs button{
    min-height:40px; }

  /* horizontal tab bars scroll instead of overflowing */
  html nav.tabs, html .tabs, html .subnav, html .emp-tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; }

  /* the two shared grid containers collapse to one column */
  html .tiles, html .cards{ grid-template-columns:1fr !important; }
}

@media (max-width:520px){
  html body{ font-size:14px; }
  html .tile, html .panel, html .card, html .loginbox{ padding-left:15px; padding-right:15px; }
  html main, html .wrap, html .container{ padding-left:12px; padding-right:12px; }
  /* wide data tables scroll sideways rather than crushing every column */
  html .tbl-wrap, html .table-wrap, html .mdb-tbl-wrap, html .repwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}