/*
 * portal.css — Noble Schools Support Portal shared styles
 * Loaded by header_nav.php on every page.
 * Override per-page via a <style> block after this loads.
 *
 * Contents:
 *   1. Reset
 *   2. Base body + background overlay
 *   3. Layout wrappers
 *   4. Glass card
 *   5. Alerts
 *   6. Buttons
 *   7. Forms (shared inputs)
 *   8. Badges
 *   9. Footer
 */

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

/* ─── 2. Base body + background overlay ──────────────────────────────────── */
body{
  font-family:Nunito,sans-serif;
  font-size:14px;
  color:#fff;
  min-height:100vh;
  background:url('/assets/bg.jpg') center/cover no-repeat fixed;
  position:relative;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  background:rgba(4,10,35,.82);
  z-index:0;
  pointer-events:none;
}

/* ─── 3. Layout wrappers ──────────────────────────────────────────────────── */
.wrap,
.page-wrap{
  position:relative;
  z-index:1;
  max-width:1100px;
  margin:0 auto;
  padding:18px 16px 60px;
}

/* ─── 4. Glass card ───────────────────────────────────────────────────────── */
.card{
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  padding:20px 22px;
  box-shadow:0 8px 32px rgba(0,0,0,.3);
  margin-bottom:16px;
}
.card-title{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  color:rgba(192,132,252,.85);
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.card-divider{
  border:none;
  border-top:1px solid rgba(255,255,255,.07);
  margin:14px 0;
}

/* ─── 5. Alerts ───────────────────────────────────────────────────────────── */
.alert{
  border-radius:12px;
  padding:12px 16px;
  font-size:13px;
  margin-bottom:16px;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.alert-success,.al-s{
  background:rgba(74,222,128,.08);
  border:1px solid rgba(74,222,128,.3);
  color:#86efac;
}
.alert-error,.al-e{
  background:rgba(248,113,113,.09);
  border:1px solid rgba(248,113,113,.3);
  color:#fca5a5;
}
.alert-info,.al-i{
  background:rgba(99,179,237,.08);
  border:1px solid rgba(99,179,237,.3);
  color:#90cdf4;
}
.alert-warn,.al-w{
  background:rgba(251,191,36,.08);
  border:1px solid rgba(251,191,36,.3);
  color:#fde68a;
}

/* ─── 6. Buttons ──────────────────────────────────────────────────────────── */
.btn-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  padding:10px;
  border-radius:10px;
  border:none;
  background:linear-gradient(135deg,#6200ff,#b10ef1);
  color:#fff;
  font:700 14px Nunito,sans-serif;
  cursor:pointer;
  transition:opacity .15s;
}
.btn-submit:hover{opacity:.87}
.btn-submit:disabled{opacity:.45;cursor:not-allowed}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 16px;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.7);
  font:600 12px Nunito,sans-serif;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.btn-ghost:hover{background:rgba(255,255,255,.13);color:#fff;text-decoration:none}

.btn-danger{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 16px;
  border-radius:9px;
  border:1px solid rgba(248,113,113,.3);
  background:rgba(248,113,113,.1);
  color:#f87171;
  font:600 12px Nunito,sans-serif;
  cursor:pointer;
  transition:background .15s;
}
.btn-danger:hover{background:rgba(248,113,113,.2)}

/* ─── 7. Forms (shared inputs) ────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-group label,
.form-lbl{
  display:block;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:rgba(255,255,255,.38);
  margin-bottom:5px;
}
.form-input,
.form-control,
.form-select,
.form-textarea{
  width:100%;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  border-radius:9px;
  color:#fff;
  padding:9px 12px;
  font:13px Nunito,sans-serif;
  outline:none;
  transition:border-color .15s,background .15s;
}
.form-input:focus,
.form-control:focus,
.form-select:focus,
.form-textarea:focus{
  border-color:rgba(192,132,252,.55);
  background:rgba(192,132,252,.06);
}
.form-input::placeholder,
.form-control::placeholder,
.form-textarea::placeholder{color:rgba(255,255,255,.28)}
.form-select option,
.form-control option{background:#1a0a2e;color:#fff}
.form-textarea{resize:vertical;min-height:90px;line-height:1.6}

/* ─── 8. Badges ───────────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 9px;
  border-radius:20px;
  font-size:10px;
  font-weight:700;
}
.badge-green {background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.3); color:#4ade80}
.badge-red   {background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.3);color:#f87171}
.badge-amber {background:rgba(251,191,36,.10); border:1px solid rgba(251,191,36,.3); color:#fbbf24}
.badge-blue  {background:rgba(96,165,250,.12); border:1px solid rgba(96,165,250,.3); color:#60a5fa}
.badge-purple{background:rgba(192,132,252,.12);border:1px solid rgba(192,132,252,.3);color:#c084fc}
.badge-gray  {background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.45)}

/* ─── 9. Footer ───────────────────────────────────────────────────────────── */
footer{
  text-align:center;
  padding:24px 16px;
  font-size:11px;
  color:rgba(255,255,255,.22);
  position:relative;
  z-index:1;
}
footer a{color:rgba(192,132,252,.5);text-decoration:none}
footer a:hover{color:#c084fc}

/* ─── Utility ─────────────────────────────────────────────────────────────── */
.text-muted{color:rgba(255,255,255,.4)}
.text-accent{color:#c084fc}
.sect{border:none;border-top:1px solid rgba(255,255,255,.07);margin:16px 0}

/* ═══════════════════════════════════════════════════════════════════════════
   LIQUID GLASS THEME (Session 155, 2026-10-12) — portal-wide
   Switched on by header_nav.php, which adds class "lg" to <body> and emits the
   ambient orb layer, unless the page sets $noGlass = true before including it
   or the page body is light (print pages: computed background luminance check
   in the same script). Every rule is scoped under .lg so a page without the
   class renders exactly as before. Page-specific glass lives in that page's
   own CSS (index.css carries the homepage's tiles, chips, hero, etc.).
   Design: saturated frosted blur, specular top edge, gradient hairline border
   (mask trick), refractive sheen, and slow colour orbs behind the glass so the
   blur has something to refract. Only top-level panels get backdrop-filter.
   ═══════════════════════════════════════════════════════════════════════════ */
.lg{
  --lg-blur:26px;
  --lg-sat:180%;
  --lg-radius:22px;
  --lg-edge:rgba(255,255,255,.16);
  --lg-spec:rgba(255,255,255,.34);
  --lg-glow:rgba(192,132,252,.22);
  /* ── s166r SURFACE TOKENS ─────────────────────────────────────────────────
     Every panel (the PANEL list in the "Panels" rule below, plus the top bar)
     reads these. Each mode overrides them once; nothing else needs to change.
     Glass (default): the s155 frosted gradient.  To let a user pick a panel
     colour later, set --np-panel-bg (and optionally --np-panel-border /
     --np-panel-blur) as an inline style on <body> — inline beats all of these. */
  --np-panel-bg:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.06) 38%,rgba(255,255,255,.025) 62%,rgba(255,255,255,.09) 100%);
  --np-panel-border:var(--lg-edge);
  --np-panel-blur:var(--lg-blur);
  --np-panel-sat:var(--lg-sat);
  --np-panel-radius:var(--lg-radius);
  --np-panel-shadow:inset 0 1px 0 var(--lg-spec),inset 0 -1px 0 rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.03),0 22px 56px -16px rgba(0,0,0,.62),0 0 48px -14px var(--lg-glow);
  --np-panel-hover-border:rgba(255,255,255,.22);
  --np-panel-decor:'';            /* '' = hairline ::before + sheen ::after on; none = off */
  --np-bar-bg:linear-gradient(135deg,rgba(60,22,120,.72) 0%,rgba(8,14,44,.66) 45%,rgba(10,28,80,.72) 100%);
  --np-bar-blur:var(--lg-blur);
  --np-bar-sat:var(--lg-sat);
  --np-bar-border:rgba(255,255,255,.14);
  --np-sub-bg:rgba(255,255,255,.05);--np-sub-blur:0px;   /* page-local registry panels (s166s/t) */
}
body.lg::before{
  background:
    radial-gradient(120% 70% at 85% -10%,rgba(98,0,255,.28),transparent 55%),
    radial-gradient(90% 60% at -10% 100%,rgba(14,80,200,.26),transparent 55%),
    rgba(4,10,35,.76);
}
.lg-orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.lg-orbs i{
  position:absolute;display:block;border-radius:50%;
  filter:blur(70px);opacity:.55;mix-blend-mode:screen;
  will-change:transform;animation:lgDrift 48s ease-in-out infinite alternate;
}
.lg-orbs i:nth-child(1){width:44vw;height:44vw;left:-12vw;top:-14vw;
  background:radial-gradient(circle,rgba(177,14,241,.75),rgba(177,14,241,0) 68%)}
.lg-orbs i:nth-child(2){width:38vw;height:38vw;right:-10vw;top:22vh;
  background:radial-gradient(circle,rgba(56,120,255,.70),rgba(56,120,255,0) 68%);
  animation-duration:62s;animation-delay:-20s}
.lg-orbs i:nth-child(3){width:34vw;height:34vw;left:30vw;bottom:-16vw;
  background:radial-gradient(circle,rgba(236,90,160,.55),rgba(236,90,160,0) 68%);
  animation-duration:55s;animation-delay:-35s}
@keyframes lgDrift{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(6vw,-4vh,0) scale(1.08)}
  100%{transform:translate3d(-4vw,6vh,0) scale(.96)}
}

/* ── Panels: .card and <details class="info-card"> ─────────────────────────── */
/* s166r: ONE panel rule, token-driven. PANEL list = .card,details.info-card,.greeting-card,.ann-editor,.chart-container,.runtime-card,.deg-card,.login-card,.cb-card */
.lg :is(.card,details.info-card,.greeting-card,.ann-editor,.chart-container,.runtime-card,.deg-card,.login-card,.cb-card){
  position:relative;isolation:isolate;
  background:var(--np-panel-bg);
  backdrop-filter:blur(var(--np-panel-blur)) saturate(var(--np-panel-sat));
  -webkit-backdrop-filter:blur(var(--np-panel-blur)) saturate(var(--np-panel-sat));
  border:1px solid var(--np-panel-border);
  border-radius:var(--np-panel-radius);
  box-shadow:var(--np-panel-shadow);
  transition:box-shadow .3s ease,border-color .3s ease;
}
.lg :is(.card:not(.glass-img),details.info-card,.greeting-card,.login-card)::before,
.lg :is(.card:not(.glass-img),details.info-card,.greeting-card,.login-card)::after{content:var(--np-panel-decor)}
.lg :is(.card,details.info-card,.greeting-card,.ann-editor,.chart-container,.runtime-card,.deg-card,.login-card,.cb-card):hover{
  border-color:var(--np-panel-hover-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 26px 64px -16px rgba(0,0,0,.66),
    0 0 64px -12px rgba(192,132,252,.32);
}
.lg .card::before,
.lg details.info-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;
  background:linear-gradient(135deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.10) 28%,rgba(192,132,252,.14) 58%,rgba(255,255,255,.42) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.lg .card::after,
.lg details.info-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.16),transparent 55%),
    linear-gradient(115deg,transparent 40%,rgba(255,255,255,.05) 48%,rgba(255,255,255,0) 56%);
}
.lg details.info-card summary{border-radius:var(--lg-radius)}
.lg .card-title{color:rgba(216,180,254,.9);text-shadow:0 0 14px rgba(192,132,252,.35)}

/* ── Top nav bar: specular edge on the existing gradient ───────────────────── */
.lg .g-top-bar{
  border:1px solid rgba(255,255,255,.14);border-bottom-color:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 44px -16px rgba(0,0,0,.6),0 6px 32px color-mix(in srgb,var(--ab-color) 22%,transparent);
}

/* ── Alerts, buttons, inputs, badges, footer ───────────────────────────────── */
.lg .alert{box-shadow:inset 0 1px 0 rgba(255,255,255,.14);border-radius:14px}
.lg .btn-submit{
  position:relative;border-radius:12px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,.04) 50%,rgba(255,255,255,0) 60%,rgba(255,255,255,.10)),
    linear-gradient(135deg,#6200ff,#b10ef1);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.25),0 8px 22px -6px rgba(98,0,255,.55);
  transition:transform .18s,box-shadow .18s,filter .18s,opacity .15s;
}
.lg .btn-submit:hover:not(:disabled){opacity:1;filter:brightness(1.1);transform:translateY(-1px)}
.lg .btn-ghost,.lg .btn-danger{
  background-image:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,0));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.lg .form-input,.lg .form-control,.lg .form-select,.lg .form-textarea{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.08));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3),inset 0 -1px 0 rgba(255,255,255,.08);
  border-radius:10px;
}
.lg .form-input:focus,.lg .form-control:focus,.lg .form-select:focus,.lg .form-textarea:focus{
  background:linear-gradient(180deg,rgba(192,132,252,.06),rgba(192,132,252,.10));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 3px rgba(192,132,252,.18);
}
.lg .badge{box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.lg footer{color:rgba(255,255,255,.32)}

/* ── Fallbacks + perf ──────────────────────────────────────────────────────── */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lg .card,.lg details.info-card{background:rgba(22,18,56,.86)}
}
@media(max-width:820px){
  .lg{--lg-blur:16px;--lg-sat:160%;--lg-radius:18px}
  .lg-orbs i{filter:blur(50px);opacity:.45}
  .lg-orbs i:nth-child(1){width:80vw;height:80vw;left:-30vw;top:-30vw}
  .lg-orbs i:nth-child(2){width:70vw;height:70vw;right:-30vw}
  .lg-orbs i:nth-child(3){width:60vw;height:60vw;bottom:-30vw}
}
@media(prefers-reduced-motion:reduce){.lg-orbs i{animation:none}}
@media(prefers-reduced-transparency:reduce){
  .lg .card,.lg details.info-card{background:rgba(22,18,56,.9);backdrop-filter:none;-webkit-backdrop-filter:none}
  .lg-orbs{display:none}
}
@media print{.lg-orbs{display:none}}

/* ── Artwork-backed panels — portal-wide (moved from index.css, s156) ──────── */
/* ── Artwork-backed panels (s155 pt.7, generalised s156) ─────────────
   .card.glass-img + style="--card-img:url(/assets/qa_bgN.jpg)". Navy
   brand artworks supplied by Austin (2048x768 unless noted):
     qa_bg2  textured navy, diagonal gold stripes TL + BR   (Quick Actions)
     qa_bg3  thin gold/blue diagonal stripes, blue dots     (My Recent IT Requests)
     qa_bg4  layered stripes + gold dots                    (Open IT Tickets, Help Center)
     qa_bg5  curved gold/blue swoosh                         (Popular Help, ticket detail, discipline, APs)
  qa_bg6  deep navy, sweeping gold curves both sides     (IT/MA/Bus work-order lists, Help Center block)
     qa_bg   1536x1024 laptop+tools (unused), qa_bg1 white swoosh (unused)
   Light navy wash + the glass sheen on top; title goes white with a
   gold icon so it reads over the gold stripes. Must out-rank
   portal.css's .lg .card (loads later) -> .lg .card.glass-img. */
.lg .card.glass-img{
    background-image:
        linear-gradient(135deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.07) 100%),
        linear-gradient(180deg,rgba(6,12,46,.14),rgba(6,12,46,.34)),
        var(--card-img,url('/assets/qa_bg2.jpg'));
    background-blend-mode:normal,normal,normal;
    background-size:auto,auto,cover;
    background-position:center,center,var(--card-img-pos,center 50%);
    background-attachment:scroll,scroll,var(--card-img-attach,scroll);
    background-repeat:no-repeat;
    background-color:rgb(10,36,96);
    border-color:rgba(255,255,255,.22);
}
.lg .card.glass-img:hover{border-color:rgba(255,255,255,.26)}
.lg .card.glass-img .card-title{color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 12px rgba(0,0,0,.35)}
.lg .card.glass-img .card-title i{color:#fbbf24}
.lg .card.glass-img .qa-section-label,
.lg .card.glass-img .hc-col-label{color:rgba(255,255,255,.6);text-shadow:0 1px 2px rgba(0,0,0,.5)}
.lg .card.glass-img .hc-feat-title{color:rgba(255,255,255,.9)}
.lg .card.glass-img .hc-feat-views{color:rgba(255,255,255,.38)}
.lg .card.glass-img .hc-feat-row{border-color:rgba(255,255,255,.10)}
.lg .card.glass-img .hc-col-head{border-color:rgba(255,255,255,.12)}
.lg .card.glass-img .school-bar-name{color:rgba(255,255,255,.72)}
.lg .card.glass-img .school-bar-ct{color:rgba(255,255,255,.5)}
.lg .card.glass-img .stat-chip-lbl{color:rgba(255,255,255,.6)}
.lg .card.glass-img .rt-date{color:rgba(255,255,255,.42)}
@media(max-width:900px){.lg .card.glass-img{background-position:center,center,var(--card-img-pos-m,var(--card-img-pos,center 40%))}}
@media(prefers-reduced-transparency:reduce){.lg .card.glass-img{background-image:none}}
/* Tall cards (work-order lists etc.) add .glass-tall: uses the PORTRAIT artwork
   qa_bg_tall1.jpg (1024x1536, stripes TL+BR; qa_bg_tall2 = layered-stripe
   sibling, chosen per card via --tall-img) with cover:
   on a moderately tall card the corner stripes show; on a 6,000px list it
   scales to pure navy texture — no stripes crossing rows, no tile seam (a
   tiled repeat-y variant was tried and rejected for exactly that). The
   image wins over any --card-img the tag sets. (.glass-fixed = earlier viewport-
   pinned variant, kept for reference, unused.) */
.lg .card.glass-img.glass-tall{
    background-image:
        linear-gradient(135deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.07) 100%),
        linear-gradient(180deg,rgba(6,12,46,.42) 0,rgba(6,12,46,.42) 200px,rgba(6,12,46,0) 340px),  /* control-strip band: header/filters/search sit on near-solid navy */
        linear-gradient(180deg,rgba(6,12,46,.38),rgba(6,12,46,.58)),   /* deeper wash than landscape cards: stripes scale up behind rows */
        var(--tall-img,url('/assets/qa_bg_tall1.jpg'));   /* overrides any inline --card-img; set --tall-img inline to pick qa_bg_tall2 */
    background-size:auto,auto,auto,cover;
    background-position:center,center,center,center center;
    background-attachment:scroll,scroll,scroll,scroll;
    background-repeat:no-repeat;
}
/* Controls inside artwork-backed cards: give fields, pills and toggles their
   own opaque navy backing and lift muted labels, so legibility never depends
   on what part of the artwork happens to sit behind them. */
.lg .card.glass-img input[type=text],.lg .card.glass-img input[type=search],
.lg .card.glass-img select,.lg .card.glass-img textarea,
.lg .card.glass-img .wo-search,.lg .card.glass-img .filter-toggle,
.lg .card.glass-img .filter-pill:not(.active),.lg .card.glass-img .tab-btn:not(.active){
    background-color:rgba(8,14,52,.62);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 2px 8px -4px rgba(0,0,0,.5);
}
.lg .card.glass-img .wo-search{border-color:rgba(255,255,255,.22);color:#fff}
.lg .card.glass-img .wo-search::placeholder{color:rgba(255,255,255,.55)}
.lg .card.glass-img .filter-toggle{color:#e9d5ff;border-color:rgba(192,132,252,.45)}
.lg .card.glass-img .filter-pill:not(.active){color:rgba(255,255,255,.78);border-color:rgba(255,255,255,.18)}
.lg .card.glass-img .filter-group-lbl{color:rgba(255,255,255,.62);text-shadow:0 1px 2px rgba(0,0,0,.5)}
.lg .card.glass-img .card-title{color:#fff}
.lg .card.glass-img.glass-fixed{--card-img-attach:fixed;--card-img-pos:center center}
@media(max-width:900px){.lg .card.glass-img.glass-fixed{--card-img-attach:scroll;--card-img-pos:center top}}
/* Ticket rows / group headers inside artwork-backed cards (IT, Maintenance and
   Bus list.php share these classes): opaque navy backing so the description is
   never read against a stripe, plus lifted text tones. */
.lg .card.glass-img .wo-item,
.lg .card.glass-img .wo-group-hdr{
    background:linear-gradient(180deg,rgba(14,22,66,.80),rgba(10,16,54,.84));
    border-color:rgba(255,255,255,.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 4px 14px -8px rgba(0,0,0,.6);
}
.lg .card.glass-img .wo-item:hover{border-color:rgba(192,132,252,.45);background:linear-gradient(180deg,rgba(18,26,74,.84),rgba(12,18,60,.88))}
.lg .card.glass-img .wo-group-hdr:hover{background:rgba(20,28,78,.9)}
.lg .card.glass-img .wo-problem{color:rgba(255,255,255,.92)}
.lg .card.glass-img .wo-sub{color:rgba(255,255,255,.55)}
.lg .card.glass-img .wo-id{color:rgba(216,180,254,.85)}
.lg .card.glass-img .wo-status{background:rgba(255,255,255,.12)}
.lg .card.glass-img .wo-groupby-pill:not(.active){background-color:rgba(8,14,52,.62);color:rgba(255,255,255,.78);border-color:rgba(255,255,255,.18)}
/* ── Expanded work-order groups (IT / MA / Bus list.php, group-by view) ──────
   Markup: .wo-group-block > .wo-group-hdr + .wo-group-body > .wo-group-wrap >
   .wo-item*. jQuery slideToggle leaves the body with NO inline style when open
   (or display:block mid/after animation) and display:none when collapsed, so
   :has(.wo-group-body:not([style*="none"])) == "this group is open". Open
   groups: the header becomes a tinted tab, and the body a connected inset
   frame with an accent rail, so it is obvious which tickets belong to it.
   Browsers without :has() just keep rounded headers — nothing breaks. */
.lg .wo-group-block{margin-bottom:10px}
.lg .wo-group-block:has(.wo-group-body:not([style*="none"])) .wo-group-hdr{
    background:linear-gradient(180deg,rgba(167,139,250,.30),rgba(167,139,250,.18));
    border-color:rgba(192,132,252,.55);
    border-left:4px solid #c084fc;              /* rail starts here… */
    border-bottom-color:rgba(192,132,252,.30);
    border-radius:12px 12px 0 0;
    padding-left:12px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 6px 18px -10px rgba(192,132,252,.6);
}
.lg .wo-group-block:has(.wo-group-body:not([style*="none"])) .wo-group-label{color:#fff;font-size:13px}
.lg .wo-group-block:has(.wo-group-body:not([style*="none"])) .wo-group-chevron{color:#e9d5ff}
.lg .wo-group-block:has(.wo-group-body:not([style*="none"])) .wo-group-cnt{background:rgba(255,255,255,.22);color:#fff}
.lg .wo-group-body{
    padding:10px 10px 10px 10px;margin-top:0;
    border:1px solid rgba(192,132,252,.45);border-top:none;
    border-left:4px solid #c084fc;              /* …and continues unbroken down the body */
    border-radius:0 0 12px 12px;
    background:linear-gradient(180deg,rgba(120,90,220,.16),rgba(120,90,220,.08));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px -14px rgba(0,0,0,.6);
}
.lg .wo-group-body .wo-group-wrap{border:none;border-radius:0;overflow:visible}
.lg .wo-group-body .wo-item{margin-bottom:6px}
.lg .wo-group-body .wo-item:last-child{margin-bottom:0}

/* ── Stat tiles (.stat-card on 25 pages, .stat-box on Inventory) ────────────
   Were flat panels between glass cards. Same lit-edge treatment as the
   homepage chips. Pages that colour a tile (e.g. .stat-card.urgent) keep
   their own background-color via the shorthand below using background-image
   only. */
.lg .stat-card,.lg .stat-box{
    background-image:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 55%,rgba(255,255,255,.07));
    border-color:rgba(255,255,255,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.16),0 8px 20px -10px rgba(0,0,0,.5);
    transition:transform .18s,border-color .18s,box-shadow .18s;
}
.lg .stat-card:hover,.lg .stat-box:hover{
    border-color:rgba(192,132,252,.4);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.16),0 14px 28px -12px rgba(192,132,252,.4);
}
.lg a.stat-card:hover,.lg .stat-card[onclick]:hover,.lg .stat-card.clickable:hover{transform:translateY(-2px)}
.lg .stat-card .stat-lbl,.lg .stat-card .stat-label,.lg .stat-box .stat-lbl,.lg .stat-box .stat-label{color:rgba(255,255,255,.6)}
.lg .stat-card .stat-sub{color:rgba(255,255,255,.48)}

/* ── UPS module (ups/*.php use their own classes, not .card) ──────────────── */
.lg .runtime-card,.lg .deg-card{
    position:relative;isolation:isolate;
    background:
        linear-gradient(135deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.07) 100%),
        linear-gradient(180deg,rgba(6,12,46,.30),rgba(6,12,46,.50)),
        url('/assets/qa_bg5.jpg') center/cover no-repeat;
    background-color:rgb(10,36,96);
    border:1px solid rgba(255,255,255,.22);border-radius:22px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.22),0 22px 56px -16px rgba(0,0,0,.62);
}
.lg .runtime-card summary,.lg .deg-card summary{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.lg .runtime-row{background:rgba(10,16,54,.70);border-color:rgba(255,255,255,.12)}
.lg .runtime-row:hover{background:rgba(18,26,74,.84)}
.lg .ups-card{
    background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 55%,rgba(255,255,255,.07));
    border-color:rgba(255,255,255,.16);border-radius:16px;
    backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.16),0 10px 24px -12px rgba(0,0,0,.55);
}
.lg .ups-card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 16px 32px -12px rgba(192,132,252,.35);transform:translateY(-2px)}
.lg .stat-pill{
    background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 55%,rgba(255,255,255,.07));
    border-color:rgba(255,255,255,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.16),0 8px 20px -10px rgba(0,0,0,.5);
}
.lg .filter-chip:not(.active){background:rgba(8,14,52,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.lg .site-header{border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:6px}
.lg .ups-table-outer .ups-table-wrap{border-radius:16px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 32px -14px rgba(0,0,0,.6)}

/* ── Lite mode (body.lg-lite; see header_nav.php) ──────────────────────────
   Auto on low-end hardware / iOS app, or via the wand toggle in the top bar.
   Keeps the look, drops the expensive parts: no orb animation, lighter blur. */
.lg.lg-lite{--lg-blur:8px;--lg-sat:130%}
.lg-lite .lg-orbs i{animation:none;filter:blur(40px);opacity:.4}
.lg-lite .card.glass-img,.lg-lite details.info-card{backdrop-filter:none;-webkit-backdrop-filter:none}
.lg-lite .ups-card,.lg-lite .ann-banner,.lg-lite .modal-bg{backdrop-filter:none;-webkit-backdrop-filter:none}
.lg-lite .idx-card,.lg-lite .stat-card,.lg-lite .stat-chip,.lg-lite .rt-item{transition:none}
.g-fx-toggle{padding-left:9px;padding-right:9px}
.g-fx-toggle.active{background:rgba(192,132,252,.22);border-color:rgba(192,132,252,.5);color:#e9d5ff}

/* ── Native selects: one dark style everywhere (was OS default on several pages) */
.lg select{
    background-color:rgba(8,14,52,.72);color:#fff;
    border:1px solid rgba(255,255,255,.18);border-radius:9px;
    padding:6px 28px 6px 10px;font:600 12px Nunito,sans-serif;
    -webkit-appearance:none;appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23c084fc' stroke-width='1.6' stroke-linecap='round'/></svg>");
    background-repeat:no-repeat;background-position:right 10px center;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.lg select:focus{outline:none;border-color:rgba(192,132,252,.55);box-shadow:0 0 0 3px rgba(192,132,252,.18)}
.lg select option{background:#141a4a;color:#fff}

/* ── Muted labels lifted a notch (were 28–40% white on plain glass) ───────── */
.lg .form-group label,.lg .form-lbl{color:rgba(255,255,255,.55)}
.lg .text-muted{color:rgba(255,255,255,.55)}
.lg .hc-col-label,.lg .qa-section-label,.lg .filter-group-lbl,.lg .wo-sub{color:rgba(255,255,255,.52)}
.lg .rt-date,.lg .hc-feat-views,.lg .stat-chip-lbl{color:rgba(255,255,255,.5)}

/* ── Gold primary on artwork cards (trial, s157): ties the purple buttons to
   the navy/gold artwork. Applies to the hero CTA and 'View all articles'. */
.lg .card.glass-img .ih-cta,
.lg .card.glass-img .hc-view-all-btn{
    background:
        linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.06) 50%,rgba(255,255,255,0) 60%,rgba(255,255,255,.12)),
        linear-gradient(135deg,#d4a017,#f5c542 55%,#b8860b);
    color:#1b1403;border:1px solid rgba(255,235,170,.7);text-shadow:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -1px 0 rgba(0,0,0,.25),0 8px 22px -6px rgba(212,160,23,.6);
}
.lg .card.glass-img .ih-cta i,.lg .card.glass-img .hc-view-all-btn i{color:#1b1403}
.lg .card.glass-img .idx-hero:hover .ih-cta,.lg .card.glass-img .hc-view-all-btn:hover{filter:brightness(1.06);color:#1b1403}

/* ═══ Pass 2 (s157 pt.2) ═══════════════════════════════════════════════════ */
/* 1) Dashboard KPI tiles + 3) module item cards: same lit-edge glass as the
   stat tiles. background-image only, so per-item colour borders/tints stay. */
.lg .kpi-card,.lg .w-kpi,.lg .metric-card,
.lg .sw-card,.lg .sop-card,.lg .ap-card,.lg .section-card,.lg .preview-card,.lg .tl-card{
    background-image:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 55%,rgba(255,255,255,.07));
    border-color:rgba(255,255,255,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.16),0 8px 20px -10px rgba(0,0,0,.5);
}
.lg .sw-card:hover,.lg .sop-card:hover,.lg .ap-card:hover,.lg .kpi-card:hover{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.16),0 14px 28px -12px rgba(192,132,252,.4);
}
.lg .kpi-card .kpi-title,.lg .kpi-card .kpi-subtitle,.lg .w-kpi .wk-lbl{color:rgba(255,255,255,.6)}
/* 2) Chart containers (IT Analytics) = full glass panels */
.lg .chart-container{
    position:relative;isolation:isolate;
    background:linear-gradient(135deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.06) 38%,rgba(255,255,255,.025) 62%,rgba(255,255,255,.09) 100%);
    backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));-webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat));
    border:1px solid var(--lg-edge);border-radius:var(--lg-radius);
    box-shadow:inset 0 1px 0 var(--lg-spec),inset 0 -1px 0 rgba(0,0,0,.22),0 22px 56px -16px rgba(0,0,0,.62),0 0 48px -14px var(--lg-glow);
}
/* 8) Switches stat pills: the inline per-pill colour border is kept (it's only
   20% alpha); the glass gradient + inset edge from .stat-pill sit under it. */

/* 4) PHONES: the fixed side-rail tabs (Actions / Todo / Shortcuts / Help) sat on
   top of the content column. Give the page a left gutter under 640px and
   slim the tabs. 5) Hide the lite-mode wand on phones (auto-lite covers them)
   and let the top bar breathe. 6) Work-order lists: queue first, stats after. */
@media (max-width:640px){
    /* s166ad: the phone gutter for the left rail is gone with the rail (see RAIL OFF below) */
    #sc-tab,#hc-tab,#qa-tab,#todo-tab{padding:10px 6px!important;border-radius:0 8px 8px 0!important}
    #sc-tab .st-text,#hc-tab .ht-text,#qa-tab .qt-text,#todo-tab .tt-text{font-size:9px!important;letter-spacing:.06em!important}
    .g-fx-toggle{display:none!important}
    .g-top-bar .g-user-chip{max-width:40px;overflow:hidden;padding-right:0}
    #main-layout{flex-wrap:wrap}
    #panel-left{order:2;width:100%}
    #panel-right{order:1;width:100%}
}

/* ── .glass-plain: set by header_nav on any .glass-tall card taller than 2400px
   (portrait monitors / very long queues) — artwork off, navy wash kept, so the
   image never scales far enough to pixelate. */
.lg .card.glass-img.glass-tall.glass-plain{
    background-image:
        linear-gradient(135deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 40%,rgba(255,255,255,0) 60%,rgba(255,255,255,.07) 100%),
        linear-gradient(180deg,rgba(14,28,78,1),rgba(8,18,56,1));
    background-size:auto,auto;background-position:center,center;background-attachment:scroll,scroll;
}

/* ═══ APPEARANCE MODES (s158) ══════════════════════════════════════════════
   body.lg                 Glass (default): everything above.
   body.lg.theme-simple    Simple: same navy/purple palette, flat panels, no
                           photo/orbs/artwork/blur/animation.
   body.lg.theme-dark      Dark: plain near-black, flat, no imagery at all.
   Switched in the top-bar Appearance menu (header_nav.php), stored in
   localStorage nps_theme; the lite flag (nps_fx) is independent. */

/* ── menu ── */
.g-appearance{position:relative}
.g-appearance-btn{padding-left:9px;padding-right:9px}
.g-appearance-menu{
    position:absolute;right:0;top:calc(100% + 8px);z-index:200;min-width:240px;
    background:rgba(18,16,48,.96);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:8px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 24px 60px -16px rgba(0,0,0,.8);
    backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
}
.g-ap-title{font:800 9.5px Nunito,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45);padding:4px 8px 6px}
.g-ap-opt{
    display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;
    width:100%;text-align:left;padding:8px 10px;border-radius:10px;border:1px solid transparent;
    background:none;color:rgba(255,255,255,.85);font:700 12px Nunito,sans-serif;cursor:pointer;
}
.g-ap-opt i{grid-row:1 / span 2;font-size:14px;color:rgba(192,132,252,.8)}
.g-ap-opt small{grid-column:2;font:600 10px Nunito,sans-serif;color:rgba(255,255,255,.45)}
.g-ap-opt:hover{background:rgba(255,255,255,.07)}
.g-ap-opt.active{background:rgba(192,132,252,.18);border-color:rgba(192,132,252,.45);color:#fff}
.g-ap-check{display:flex;align-items:center;gap:8px;padding:10px 10px 6px;margin-top:4px;border-top:1px solid rgba(255,255,255,.08);font:700 11.5px Nunito,sans-serif;color:rgba(255,255,255,.8);cursor:pointer}
.g-ap-check input{accent-color:#c084fc;width:14px;height:14px;margin:0}
.g-ap-check small{font-weight:600;color:rgba(255,255,255,.45)}
@media (max-width:640px){.g-appearance-btn{padding:5px 8px}.g-appearance-menu{right:-8px}}

/* ── SIMPLE: flat + still ── */
.lg.theme-simple{--lg-blur:0px;--lg-sat:100%;--lg-radius:14px}
.lg.theme-simple{background:#0d1033!important}
.lg.theme-simple::before{background:none!important}
.lg.theme-simple .lg-orbs{display:none}
.lg.theme-simple{--np-panel-bg:rgba(255,255,255,.055);--np-panel-border:rgba(255,255,255,.12);--np-panel-blur:0px;--np-panel-sat:100%;--np-panel-shadow:none;--np-panel-hover-border:rgba(255,255,255,.16);--np-panel-decor:none;
    --np-bar-bg:#141746;--np-bar-blur:0px;--np-bar-sat:100%;--np-bar-border:rgba(255,255,255,.10);--np-sub-bg:rgba(255,255,255,.055);--np-sub-blur:0px}
.lg.theme-simple :is(.card,details.info-card,.greeting-card,.ann-editor,.chart-container,.runtime-card,.deg-card,.login-card,.cb-card){
    background:var(--np-panel-bg)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    border:1px solid var(--np-panel-border)!important;
    box-shadow:none!important;
}
.lg.theme-simple .card::before,.lg.theme-simple .card::after,
.lg.theme-simple details.info-card::before,.lg.theme-simple details.info-card::after,
.lg.theme-simple .greeting-card::before,.lg.theme-simple .greeting-card::after,
.lg.theme-simple .login-card::before,.lg.theme-simple .login-card::after{content:none!important}
.lg.theme-simple .card.glass-img,.lg.theme-simple .card.glass-img.glass-tall,.lg.theme-simple .card.glass-img.glass-tall.glass-plain{
    background-image:none!important;background-color:rgba(255,255,255,.055)!important;
}
.lg.theme-simple .stat-card,.lg.theme-simple .stat-box,.lg.theme-simple .stat-chip,.lg.theme-simple .rt-item,.lg.theme-simple .sc-card,
.lg.theme-simple .kpi-card,.lg.theme-simple .w-kpi,.lg.theme-simple .sw-card,.lg.theme-simple .sop-card,.lg.theme-simple .ap-card,
.lg.theme-simple .section-card,.lg.theme-simple .ups-card,.lg.theme-simple .stat-pill,.lg.theme-simple .phr-card{
    background-image:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.lg.theme-simple .g-top-bar{background:#141746!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.lg.theme-simple .g-top-bar::before{display:none}
.lg.theme-simple .idx-card::before,.lg.theme-simple .idx-card::after{display:none}
.lg.theme-simple .idx-card{box-shadow:none;text-shadow:none}
.lg.theme-simple .idx-hero::before{display:none}
.lg.theme-simple .btn-submit,.lg.theme-simple .sc-add-btn,.lg.theme-simple .hc-view-all-btn,.lg.theme-simple .btn-save,.lg.theme-simple .ih-cta{
    background:#7c3aed!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:none!important;text-shadow:none!important;
}
.lg.theme-simple .ih-cta i,.lg.theme-simple .hc-view-all-btn i{color:#fff!important}
.lg.theme-simple *,.lg.theme-simple *::before,.lg.theme-simple *::after{animation:none!important;transition:none!important}
.lg.theme-simple .card-title{text-shadow:none}

/* ── DARK: plain near-black (everything Simple does, re-coloured) ── */
.lg.theme-dark{--lg-blur:0px;--lg-sat:100%;--lg-radius:12px}
.lg.theme-dark{background:#0b0b10!important;color:#e6e6ea}
.lg.theme-dark::before{background:none!important}
.lg.theme-dark .lg-orbs{display:none}
.lg.theme-dark{--np-panel-bg:#15151c;--np-panel-border:rgba(255,255,255,.09);--np-panel-blur:0px;--np-panel-sat:100%;--np-panel-shadow:none;--np-panel-hover-border:rgba(255,255,255,.14);--np-panel-decor:none;
    --np-bar-bg:#111117;--np-bar-blur:0px;--np-bar-sat:100%;--np-bar-border:rgba(255,255,255,.08);--np-sub-bg:#15151c;--np-sub-blur:0px}
.lg.theme-dark :is(.card,details.info-card,.greeting-card,.ann-editor,.chart-container,.runtime-card,.deg-card,.login-card,.cb-card){
    background:var(--np-panel-bg)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    border:1px solid var(--np-panel-border)!important;
    box-shadow:none!important;
}
.lg.theme-dark .card::before,.lg.theme-dark .card::after,
.lg.theme-dark details.info-card::before,.lg.theme-dark details.info-card::after,
.lg.theme-dark .greeting-card::before,.lg.theme-dark .greeting-card::after,
.lg.theme-dark .login-card::before,.lg.theme-dark .login-card::after{content:none!important}
.lg.theme-dark .card.glass-img,.lg.theme-dark .card.glass-img.glass-tall,.lg.theme-dark .card.glass-img.glass-tall.glass-plain{
    background-image:none!important;background-color:#15151c!important;
}
.lg.theme-dark .stat-card,.lg.theme-dark .stat-box,.lg.theme-dark .stat-chip,.lg.theme-dark .rt-item,.lg.theme-dark .sc-card,
.lg.theme-dark .kpi-card,.lg.theme-dark .w-kpi,.lg.theme-dark .sw-card,.lg.theme-dark .sop-card,.lg.theme-dark .ap-card,
.lg.theme-dark .section-card,.lg.theme-dark .ups-card,.lg.theme-dark .stat-pill,.lg.theme-dark .phr-card,
.lg.theme-dark .wo-item,.lg.theme-dark .wo-group-hdr,.lg.theme-dark .wo-group-body{
    background:#1b1b24!important;background-image:none!important;box-shadow:none!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-color:rgba(255,255,255,.09)!important;
}
.lg.theme-dark .wo-group-body{background:#141419!important}
.lg.theme-dark .g-top-bar{background:#111117!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-color:rgba(255,255,255,.08)!important}
.lg.theme-dark .g-top-bar::before{display:none}
.lg.theme-dark .app-bar{background:rgba(255,255,255,.02)!important}
.lg.theme-dark .idx-card::before,.lg.theme-dark .idx-card::after,.lg.theme-dark .idx-hero::before{display:none}
.lg.theme-dark .idx-card{box-shadow:none;text-shadow:none;filter:saturate(.8)}
.lg.theme-dark .btn-submit,.lg.theme-dark .sc-add-btn,.lg.theme-dark .hc-view-all-btn,.lg.theme-dark .btn-save,.lg.theme-dark .ih-cta{
    background:#5b5bd6!important;color:#fff!important;border:1px solid rgba(255,255,255,.16)!important;box-shadow:none!important;text-shadow:none!important;
}
.lg.theme-dark .ih-cta i,.lg.theme-dark .hc-view-all-btn i{color:#fff!important}
.lg.theme-dark select,.lg.theme-dark .form-input,.lg.theme-dark .form-control,.lg.theme-dark .form-select,.lg.theme-dark .form-textarea,
.lg.theme-dark .wo-search,.lg.theme-dark .filter-toggle,.lg.theme-dark .filter-pill:not(.active),.lg.theme-dark .tab-btn:not(.active),.lg.theme-dark .add-card{
    background:#101015!important;background-image:none!important;border-color:rgba(255,255,255,.14)!important;box-shadow:none!important;
}
.lg.theme-dark .card-title{color:#b7b7c6;text-shadow:none}
.lg.theme-dark .g-appearance-menu{background:#15151c;backdrop-filter:none;-webkit-backdrop-filter:none}
.lg.theme-dark *,.lg.theme-dark *::before,.lg.theme-dark *::after{animation:none!important;transition:none!important}
.lg.theme-dark .school-bar-fill{box-shadow:none}

/* ═══ s158 pt.2: LIGHT mode, SYSTEM, TEXT SIZE, menu extras ═══════════════ */
.g-ap-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 4px;margin-top:4px;border-top:1px solid rgba(255,255,255,.08)}
.g-ap-rowlbl{font:700 11.5px Nunito,sans-serif;color:rgba(255,255,255,.8)}
.g-ap-seg{display:inline-flex;border:1px solid rgba(255,255,255,.16);border-radius:8px;overflow:hidden}
.g-ap-seg button{background:none;border:none;color:rgba(255,255,255,.6);font:800 11px Nunito,sans-serif;padding:4px 10px;cursor:pointer}
.g-ap-seg button.active{background:rgba(192,132,252,.25);color:#fff}
.g-ap-note{font:600 10px Nunito,sans-serif;color:rgba(255,255,255,.4);padding:6px 10px 2px;display:flex;align-items:center;gap:6px}

/* ── TEXT SIZE: one root bump; everything in rem/em follows, px sizes get a
   targeted lift on the places that matter most for reading. */
body.text-large{font-size:16px}
body.text-large .wo-problem{font-size:14px}
body.text-large .wo-loc{font-size:15px}
body.text-large .wo-sub,body.text-large .rt-item,body.text-large .hc-feat-title{font-size:13px}
body.text-large .card-title{font-size:11.5px}
body.text-large .form-input,body.text-large .form-control,body.text-large .form-textarea,body.text-large select,body.text-large .wo-search{font-size:15px}
body.text-large .idx-card{font-size:14px}
body.text-large .filter-pill,body.text-large .wo-groupby-pill,body.text-large .hc-mv-pill{font-size:12.5px}
body.text-large .greeting-name{font-size:21px}
body.text-large .ih-desc{font-size:14px}
body.text-large .stat-chip-lbl,body.text-large .stat-lbl,body.text-large .stat-label{font-size:11.5px}
body.text-large .g-btn{font-size:12px}
body.text-large .app-bar-link{font-size:12.5px}

/* ── LIGHT ──────────────────────────────────────────────────────────────────
   White/grey surfaces, dark text. Built like Dark (flat, no imagery) but with
   every text-colour token flipped. Component colours (status badges, tile
   gradients, chart lines) are kept — they were chosen to work on both. */
.lg.theme-light{
    --lg-blur:0px;--lg-sat:100%;--lg-radius:14px;
    --lt-bg:#eef0f6;--lt-panel:#ffffff;--lt-panel2:#f5f6fa;--lt-line:rgba(15,23,42,.10);--lt-line2:rgba(15,23,42,.16);
    --lt-text:#141a2e;--lt-text2:rgba(20,26,46,.70);--lt-text3:rgba(20,26,46,.50);--lt-accent:#6d28d9;
    background:var(--lt-bg)!important;color:var(--lt-text);
}
.lg.theme-light::before{background:none!important}
.lg.theme-light .lg-orbs{display:none}
.lg.theme-light{--np-panel-bg:var(--lt-panel);--np-panel-border:var(--lt-line);--np-panel-blur:0px;--np-panel-sat:100%;--np-panel-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 30px -18px rgba(15,23,42,.25);--np-panel-hover-border:var(--lt-line2);--np-panel-decor:none;
    --np-bar-bg:#ffffff;--np-bar-blur:0px;--np-bar-sat:100%;--np-bar-border:var(--lt-line);--np-sub-bg:var(--lt-panel);--np-sub-blur:0px}
.lg.theme-light :is(.card,details.info-card,.greeting-card,.ann-editor,.chart-container,.runtime-card,.deg-card,.login-card,.cb-card){
    background:var(--np-panel-bg)!important;color:var(--lt-text);
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    border:1px solid var(--np-panel-border)!important;
    box-shadow:var(--np-panel-shadow)!important;
}
.lg.theme-light .card::before,.lg.theme-light .card::after,
.lg.theme-light details.info-card::before,.lg.theme-light details.info-card::after,
.lg.theme-light .greeting-card::before,.lg.theme-light .greeting-card::after,
.lg.theme-light .login-card::before,.lg.theme-light .login-card::after{content:none!important}
.lg.theme-light .card.glass-img,.lg.theme-light .card.glass-img.glass-tall,.lg.theme-light .card.glass-img.glass-tall.glass-plain{
    background-image:none!important;background-color:var(--lt-panel)!important;
}
.lg.theme-light .stat-card,.lg.theme-light .stat-box,.lg.theme-light .stat-chip,.lg.theme-light .rt-item,.lg.theme-light .sc-card,
.lg.theme-light .kpi-card,.lg.theme-light .w-kpi,.lg.theme-light .sw-card,.lg.theme-light .sop-card,.lg.theme-light .ap-card,
.lg.theme-light .section-card,.lg.theme-light .ups-card,.lg.theme-light .stat-pill,.lg.theme-light .phr-card,
.lg.theme-light .wo-item,.lg.theme-light .wo-group-hdr,.lg.theme-light .hc-feat-row:hover,.lg.theme-light .runtime-row{
    background:var(--lt-panel2)!important;background-image:none!important;box-shadow:none!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-color:var(--lt-line)!important;color:var(--lt-text);
}
.lg.theme-light .wo-group-body{background:rgba(109,40,217,.04)!important;border-color:rgba(109,40,217,.25)!important}
.lg.theme-light .wo-group-block:has(.wo-group-body:not([style*="none"])) .wo-group-hdr{background:rgba(109,40,217,.10)!important;border-color:rgba(109,40,217,.35)!important}
.lg.theme-light .g-top-bar{background:#ffffff!important;box-shadow:0 1px 2px rgba(15,23,42,.06),0 10px 30px -18px rgba(15,23,42,.3)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-color:var(--lt-line)!important}
.lg.theme-light .g-top-bar::before{display:none}
.lg.theme-light .app-bar{background:#f5f6fa!important;border-bottom-color:var(--lt-line2)!important}
.lg.theme-light .idx-card::before,.lg.theme-light .idx-card::after,.lg.theme-light .idx-hero::before{display:none}
.lg.theme-light .idx-card{box-shadow:0 4px 14px -8px rgba(15,23,42,.35);text-shadow:none}
/* text tokens */
.lg.theme-light,.lg.theme-light .card,.lg.theme-light .wo-loc,.lg.theme-light .greeting-name,.lg.theme-light .stat-chip-val,.lg.theme-light .stat-val,.lg.theme-light .stat-value,.lg.theme-light .stat-num,.lg.theme-light .kpi-value,.lg.theme-light .wk-val,
.lg.theme-light h1,.lg.theme-light h2,.lg.theme-light h3,.lg.theme-light .hc-feat-title,.lg.theme-light .wo-group-label,.lg.theme-light .sc-label,.lg.theme-light .rt-item,.lg.theme-light .runtime-row,.lg.theme-light .g-user-chip,.lg.theme-light .g-btn,.lg.theme-light .g-top-bar a,.lg.theme-light .app-bar-link,.lg.theme-light .filter-pill,.lg.theme-light .wo-groupby-pill,.lg.theme-light .hc-mv-pill,.lg.theme-light .tab-btn,.lg.theme-light .filter-toggle,.lg.theme-light label,.lg.theme-light .form-group label,.lg.theme-light .form-lbl,.lg.theme-light .g-ap-opt,.lg.theme-light .g-ap-check,.lg.theme-light .g-ap-rowlbl,.lg.theme-light .g-ap-seg button{color:var(--lt-text)!important}
.lg.theme-light .wo-problem,.lg.theme-light p,.lg.theme-light td,.lg.theme-light .ih-desc,.lg.theme-light .greeting-sub,.lg.theme-light .kpi-subtitle{color:var(--lt-text2)!important}
.lg.theme-light .wo-sub,.lg.theme-light .rt-date,.lg.theme-light .hc-feat-views,.lg.theme-light .stat-chip-lbl,.lg.theme-light .stat-lbl,.lg.theme-light .stat-label,.lg.theme-light .stat-sub,.lg.theme-light .kpi-title,.lg.theme-light .wk-lbl,.lg.theme-light .qa-section-label,.lg.theme-light .hc-col-label,.lg.theme-light .filter-group-lbl,.lg.theme-light .text-muted,.lg.theme-light footer,.lg.theme-light .g-ap-title,.lg.theme-light .g-ap-opt small,.lg.theme-light .g-ap-check small,.lg.theme-light .g-ap-note,.lg.theme-light .app-bar-section{color:var(--lt-text3)!important}
.lg.theme-light .card-title{color:var(--lt-accent)!important;text-shadow:none}
.lg.theme-light .card.glass-img .card-title i{color:var(--lt-accent)}
.lg.theme-light a:not(.g-btn):not(.idx-card):not(.btn-submit):not(.ih-cta):not(.hc-view-all-btn):not(.sc-add-btn){color:#5b21b6}
.lg.theme-light .wo-id{color:#7c3aed!important}
/* chrome */
.lg.theme-light .g-btn,.lg.theme-light .filter-pill:not(.active),.lg.theme-light .wo-groupby-pill:not(.active),.lg.theme-light .hc-mv-pill:not(.active),.lg.theme-light .tab-btn:not(.active),.lg.theme-light .filter-toggle,.lg.theme-light .btn-ghost,.lg.theme-light .btn-cancel,.lg.theme-light .sc-edit-toggle{
    background:#ffffff!important;background-image:none!important;border-color:var(--lt-line2)!important;box-shadow:none!important;
}
.lg.theme-light .g-btn:hover,.lg.theme-light .filter-pill:hover{background:#f0f1f7!important}
.lg.theme-light .g-top-bar .g-btn.active,.lg.theme-light .g-top-bar a.active{background:rgba(109,40,217,.10)!important;border-color:rgba(109,40,217,.35)!important;color:var(--lt-accent)!important}
.lg.theme-light .app-bar-link.ab-active{background:rgba(109,40,217,.10)!important;color:var(--lt-accent)!important}
.lg.theme-light select,.lg.theme-light .form-input,.lg.theme-light .form-control,.lg.theme-light .form-select,.lg.theme-light .form-textarea,.lg.theme-light .wo-search,.lg.theme-light .add-card,.lg.theme-light input[type=text],.lg.theme-light input[type=search],.lg.theme-light textarea{
    background:#ffffff!important;background-image:none!important;color:var(--lt-text)!important;border-color:var(--lt-line2)!important;box-shadow:inset 0 1px 2px rgba(15,23,42,.06)!important;
}
.lg.theme-light select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236d28d9' stroke-width='1.6' stroke-linecap='round'/></svg>")!important;background-repeat:no-repeat!important;background-position:right 10px center!important}
.lg.theme-light select option{background:#fff;color:var(--lt-text)}
.lg.theme-light ::placeholder{color:rgba(20,26,46,.4)!important}
.lg.theme-light .btn-submit,.lg.theme-light .sc-add-btn,.lg.theme-light .hc-view-all-btn,.lg.theme-light .btn-save,.lg.theme-light .ih-cta{
    background:var(--lt-accent)!important;color:#fff!important;border:1px solid transparent!important;box-shadow:0 6px 16px -8px rgba(109,40,217,.6)!important;text-shadow:none!important;
}
.lg.theme-light .ih-cta i,.lg.theme-light .hc-view-all-btn i{color:#fff!important}
.lg.theme-light .g-appearance-menu{background:#ffffff;border-color:var(--lt-line2);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 24px 60px -20px rgba(15,23,42,.35)}
.lg.theme-light .g-ap-opt.active{background:rgba(109,40,217,.10);border-color:rgba(109,40,217,.35)}
.lg.theme-light .g-ap-seg{border-color:var(--lt-line2)}.lg.theme-light .g-ap-seg button.active{background:rgba(109,40,217,.15)}
.lg.theme-light .school-bar-track{background:rgba(15,23,42,.08);box-shadow:none}
.lg.theme-light .hc-feat-row,.lg.theme-light .hc-col-head{border-color:var(--lt-line)!important}
.lg.theme-light .modal{background:#fff;color:var(--lt-text);border-color:var(--lt-line2)}
.lg.theme-light .modal h3{color:var(--lt-text)}
.lg.theme-light .modal-bg{background:rgba(15,23,42,.45)}
.lg.theme-light #qa-tab,.lg.theme-light #todo-tab,.lg.theme-light #sc-tab,.lg.theme-light #hc-tab{box-shadow:3px 0 16px rgba(109,40,217,.3)}
.lg.theme-light *,.lg.theme-light *::before,.lg.theme-light *::after{animation:none!important;transition:none!important}
.lg.theme-light .card-title{text-shadow:none}
/* page-level dark text that was hard-coded white */
.lg.theme-light .filter-group-lbl,.lg.theme-light .ih-tag{text-shadow:none}
.lg.theme-light .ih-tag{background:rgba(255,255,255,.3);border-color:rgba(255,255,255,.6);color:#fff}

/* ── LIGHT: catch-all for the many page-level rules that hard-code white or
   rgba(255,255,255,x) text. Three tiers via the broadest selectors that
   still leave coloured text (links, badges, chart numbers) alone. */
.lg.theme-light .card *:not(a):not(i):not(.badge):not([class*="badge"]):not([class*="pill"]):not([class*="status"]):not([style*="color"]):not(.stat-val):not(.stat-value):not(.stat-num):not(.kpi-value):not(.wk-val):not(.card-title):not(.wo-id):not(.idx-card):not(.idx-card *):not(.phr-card *):not(.ih-tag):not(.ih-tag *):not(.ih-cta):not(.ih-cta *):not(.hc-view-all-btn):not(.hc-view-all-btn *):not(.btn-submit):not(.btn-save):not(.sc-add-btn):not(.g-ap-opt i):not(.hc-feat-icon):not(.hc-feat-icon *):not(.stat-chip-icon):not(.stat-chip-icon *){
    color:var(--lt-text);
}
.lg.theme-light .card .text-muted,.lg.theme-light .card small,.lg.theme-light .card .wo-sub,.lg.theme-light .card .rt-date,.lg.theme-light .card .hc-feat-views,
.lg.theme-light .card [class*="-lbl"],.lg.theme-light .card [class*="-label"],.lg.theme-light .card [class*="-sub"],.lg.theme-light .card [class*="hint"],.lg.theme-light .card [class*="meta"]{color:var(--lt-text3)}
.lg.theme-light .card .wo-problem,.lg.theme-light .card p,.lg.theme-light .card li,.lg.theme-light .card td{color:var(--lt-text2)}
.lg.theme-light .card [style*="color:rgba(255,255,255"],.lg.theme-light .card [style*="color: rgba(255,255,255"],.lg.theme-light .card [style*="color:#fff"],.lg.theme-light .card [style*="color: #fff"]{color:var(--lt-text2)!important}
.lg.theme-light .hn-ann-banner,.lg.theme-light .ann-banner{color:var(--lt-text)!important}
.lg.theme-light .greeting-sub,.lg.theme-light .greeting-sub *{color:var(--lt-text3)!important}
.lg.theme-light .school-bar-name,.lg.theme-light .school-bar-ct{color:var(--lt-text2)!important}
.lg.theme-light .stat-chip-val,.lg.theme-light .stat-chip-lbl b{color:var(--lt-text)!important}
.lg.theme-light .stat-chip-lbl{color:var(--lt-text3)!important}
.lg.theme-light .card-title,.lg.theme-light .card .card-title{color:var(--lt-accent)!important}
.lg.theme-light .wo-item .wo-loc{color:var(--lt-text)!important}
.lg.theme-light .wo-item .wo-problem{color:var(--lt-text2)!important}
.lg.theme-light .wo-item .wo-sub{color:var(--lt-text3)!important}
.lg.theme-light .wo-status{background:rgba(15,23,42,.06)!important;color:var(--lt-text2)!important}
.lg.theme-light .idx-card,.lg.theme-light .idx-card *{color:#fff}
.lg.theme-light .ih-tag{background:rgba(0,0,0,.25);border-color:rgba(255,255,255,.5)}
.lg.theme-light .sc-card .sc-label{color:var(--lt-text)!important}
.lg.theme-light .hn-ann-banner{background:#fff7e6!important;border-color:#f5c542!important}
.lg.theme-light .npsai-brief,.lg.theme-light #npsai-brief{background:#f7f3ff!important;border-color:rgba(109,40,217,.25)!important}

/* ═══ TOP BAR REFINEMENT (Session 159, 2026-10-14) ════════════════════════
   19 identical grey boxes in two rows -> a quieter tab strip. Pills lose their
   box; each app's icon takes that app's colour (--pill-color); hover = soft
   tint + coloured underline; active = solid tab in the app colour with dark
   text. Brand row gets a hairline under it; the right-hand chips go glass.
   Scoped to .lg; theme-light/dark re-tint below. */
.lg .g-top-bar{padding:0 16px}
.lg .g-top-row1{height:56px;border-bottom:1px solid rgba(255,255,255,.08)}
.lg .g-top-brand{font-size:15.5px;letter-spacing:.1px}
.lg .g-top-brand img{height:30px;width:30px;filter:drop-shadow(0 2px 8px rgba(192,132,252,.45))}
.lg .g-top-brand span{color:inherit} /* s166ae: was a purple gradient; Austin wants one colour */
.lg .g-top-apps-scroll{padding:6px 0 6px}
.lg .g-top-apps{gap:2px;row-gap:2px}
.lg .g-app-pill{
    position:relative;padding:7px 11px 8px;border-radius:9px;
    font:700 11.5px Nunito,sans-serif;
    border:1px solid transparent;background:transparent;color:rgba(255,255,255,.72);
    transition:background .16s,color .16s;
}
.lg .g-app-pill::after{
    content:'';position:absolute;left:11px;right:11px;bottom:3px;height:2px;border-radius:2px;
    background:var(--pill-color,#c084fc);opacity:0;transform:scaleX(.4);transition:opacity .16s,transform .16s;
}
.lg .g-app-pill .pill-icon{font-size:.78rem;opacity:1;color:var(--pill-color,#c084fc)}
.lg .g-app-pill:hover{
    background:color-mix(in srgb,var(--pill-color,#c084fc) 12%,transparent);
    color:#fff;box-shadow:none;transform:none;border-color:transparent;
}
.lg .g-app-pill:hover::after{opacity:.9;transform:scaleX(1)}
.lg .g-app-pill.pill-active{
    background:var(--pill-color,var(--ab-color));
    color:#0b0b14;border-color:transparent;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 18px -6px color-mix(in srgb,var(--pill-color,var(--ab-color)) 70%,transparent);
}
.lg .g-app-pill.pill-active .pill-icon{color:#0b0b14}
.lg .g-app-pill.pill-active::after{display:none}
.lg .g-user-chip,.lg .g-top-right .g-btn{
    background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
    border-color:rgba(255,255,255,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.lg .g-user-chip:hover,.lg .g-top-right .g-btn:hover{background:linear-gradient(135deg,rgba(192,132,252,.22),rgba(192,132,252,.08));border-color:rgba(192,132,252,.45)}
/* Sub-bar (IT SUPPORT / WORKFLOW…) — match the active style */
.lg .app-bar-link.ab-active{background:color-mix(in srgb,var(--ab-color) 18%,transparent);border-radius:8px}
/* Light: dark text on tabs, active tab stays coloured with white text */
.lg.theme-light .g-top-row1{border-bottom-color:rgba(15,23,42,.08)}
.lg.theme-light .g-app-pill{color:var(--lt-text2)!important;background:transparent!important}
.lg.theme-light .g-app-pill:hover{background:color-mix(in srgb,var(--pill-color,#6d28d9) 10%,transparent)!important;color:var(--lt-text)!important}
.lg.theme-light .g-app-pill.pill-active{background:var(--pill-color,#6d28d9)!important;color:#fff!important;box-shadow:0 6px 18px -6px color-mix(in srgb,var(--pill-color,#6d28d9) 60%,transparent)!important}
.lg.theme-light .g-app-pill.pill-active .pill-icon{color:#fff!important}
.lg.theme-light .g-top-brand img{filter:none}
/* Dark / Simple: flat, keep the colour on the active tab */
.lg.theme-dark .g-top-row1,.lg.theme-simple .g-top-row1{border-bottom-color:rgba(255,255,255,.07)}
.lg.theme-dark .g-user-chip,.lg.theme-dark .g-top-right .g-btn,.lg.theme-simple .g-user-chip,.lg.theme-simple .g-top-right .g-btn{background:rgba(255,255,255,.06)!important;box-shadow:none!important}
.lg.theme-dark .g-app-pill.pill-active,.lg.theme-simple .g-app-pill.pill-active{box-shadow:none}
.lg.theme-dark .g-top-brand img{filter:none}
@media (max-width:640px){.lg .g-top-row1{height:50px}.lg .g-app-pill{padding:6px 9px 7px}}

/* ── Top bar: glass + grain (s159 pt.2) ─────────────────────────────────────
   The bar was a flat painted gradient sitting on a glass page. Now it IS
   glass: desaturated hue over backdrop blur so the orbs/photo show faintly
   through the brand row, the same hairline-gradient border + specular edge
   as the cards, and a 128px tiled grain (assets/grain.png, alpha 7-24%)
   screened over it at low opacity so the sweep reads as material, not a
   vector fill. Still — no animation up here. */
.lg .g-top-bar{
    position:relative;isolation:isolate;overflow:visible;
    background:var(--np-bar-bg);
    backdrop-filter:blur(var(--np-bar-blur)) saturate(var(--np-bar-sat));-webkit-backdrop-filter:blur(var(--np-bar-blur)) saturate(var(--np-bar-sat));
    border:1px solid var(--np-bar-border);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -1px 0 rgba(0,0,0,.25),0 18px 44px -16px rgba(0,0,0,.65),0 0 48px -14px var(--lg-glow);
}
body.lg .g-top-bar::before{   /* beats header_nav's inline 2px accent line (loads later) */
    content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;padding:1px;z-index:-1;height:auto;opacity:1;
    background:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.08) 30%,color-mix(in srgb,var(--ab-color) 35%,transparent) 60%,rgba(255,255,255,.38) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
    pointer-events:none;
}
body.lg .g-top-bar::after{    /* grain + a soft specular bloom top-left */
    content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
    background:
        radial-gradient(90% 60% at 0% 0%,rgba(255,255,255,.12),transparent 55%),
        url('/assets/grain.png') repeat;
    background-size:auto,128px 128px;
    opacity:.55;mix-blend-mode:soft-light;
}
.lg .g-top-bar.has-subbar{border-bottom-color:rgba(255,255,255,.06)}
.lg .app-bar{background:rgba(255,255,255,.035)}
/* accent line under the brand row carries the section colour, quietly */
.lg .g-top-row1{border-bottom:1px solid color-mix(in srgb,var(--ab-color) 28%,rgba(255,255,255,.08))}
/* modes */
.lg-lite .g-top-bar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:linear-gradient(135deg,rgba(55,10,120,.97),rgba(4,10,35,.96) 45%,rgba(4,22,70,.97))!important}
.lg.theme-dark .g-top-bar,.lg.theme-simple .g-top-bar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.lg.theme-dark .g-top-bar::before,.lg.theme-simple .g-top-bar::before,.lg.theme-light .g-top-bar::before{content:none}
.lg.theme-dark .g-top-bar::after,.lg.theme-simple .g-top-bar::after{opacity:.35}
.lg.theme-light .g-top-bar::after{opacity:.18;mix-blend-mode:multiply}
.lg.theme-light .g-top-bar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#fff!important}

/* ═══ LIGHT MODE — page-wide text pass (s159 pt.3) ═════════════════════════
   The s158 catch-all only reached inside .card; UPS, the Behavior filter
   deck, Runtime Ranking etc. live outside .card and kept their white text.
   This block is page-wide. Order: (1) generic text -> dark, (2) muted ->
   text3, (3) anything with a *background* of its own (active pills, solid
   buttons, coloured badges) is restored to white text on that background. */
.lg.theme-light :is(.page-wrap,.wrap),
.lg.theme-light :is(.page-wrap,.wrap) *:not(a):not(i):not(svg):not(path):not([style*="color:"]):not(.idx-card *):not(.phr-card *):not(.ih-tag *):not(.g-top-bar *):not(.hn-drawer *):not(.hn-flyout *):not(#qa-drawer *):not(#todo-drawer *):not(#sc-drawer *):not(#hc-drawer *):not(.g-appearance-menu *):not(canvas){
    color:var(--lt-text);
}
.lg.theme-light :is(.page-wrap,.wrap) small,.lg.theme-light :is(.page-wrap,.wrap) .hint,.lg.theme-light :is(.page-wrap,.wrap) .lbl,.lg.theme-light :is(.page-wrap,.wrap) .count,
.lg.theme-light :is(.page-wrap,.wrap) [class*="-lbl"],.lg.theme-light :is(.page-wrap,.wrap) [class*="-label"]:not(.stat-label):not(.kpi-label),.lg.theme-light :is(.page-wrap,.wrap) [class*="-sub"],.lg.theme-light :is(.page-wrap,.wrap) [class*="meta"],.lg.theme-light :is(.page-wrap,.wrap) [class*="muted"],
.lg.theme-light :is(.page-wrap,.wrap) .wo-sub,.lg.theme-light :is(.page-wrap,.wrap) .rt-date,.lg.theme-light :is(.page-wrap,.wrap) .hc-feat-views,.lg.theme-light :is(.page-wrap,.wrap) .stat-lbl,.lg.theme-light :is(.page-wrap,.wrap) .stat-label,.lg.theme-light :is(.page-wrap,.wrap) .stat-sub,.lg.theme-light :is(.page-wrap,.wrap) .kpi-title,.lg.theme-light :is(.page-wrap,.wrap) .kpi-subtitle,.lg.theme-light :is(.page-wrap,.wrap) .wk-lbl,.lg.theme-light :is(.page-wrap,.wrap) .qa-section-label,.lg.theme-light :is(.page-wrap,.wrap) .hc-col-label,.lg.theme-light :is(.page-wrap,.wrap) .filter-group-lbl,.lg.theme-light :is(.page-wrap,.wrap) .text-muted,.lg.theme-light :is(.page-wrap,.wrap) .app-bar-section,.lg.theme-light :is(.page-wrap,.wrap) .site-header .count,.lg.theme-light :is(.page-wrap,.wrap) .ups-loc,.lg.theme-light :is(.page-wrap,.wrap) .ups-model,.lg.theme-light :is(.page-wrap,.wrap) .row-loc,.lg.theme-light :is(.page-wrap,.wrap) .row-ip{
    color:var(--lt-text3)!important;
}
.lg.theme-light :is(.page-wrap,.wrap) p,.lg.theme-light :is(.page-wrap,.wrap) li,.lg.theme-light :is(.page-wrap,.wrap) td,.lg.theme-light :is(.page-wrap,.wrap) .wo-problem,.lg.theme-light :is(.page-wrap,.wrap) .ih-desc,.lg.theme-light :is(.page-wrap,.wrap) .greeting-sub{color:var(--lt-text2)!important}
.lg.theme-light :is(.page-wrap,.wrap) .card-title,.lg.theme-light :is(.page-wrap,.wrap) .card-title *{color:var(--lt-accent)!important}
.lg.theme-light :is(.page-wrap,.wrap) h1,.lg.theme-light :is(.page-wrap,.wrap) h2,.lg.theme-light :is(.page-wrap,.wrap) h3,.lg.theme-light :is(.page-wrap,.wrap) .ups-name,.lg.theme-light :is(.page-wrap,.wrap) .runtime-card summary,.lg.theme-light :is(.page-wrap,.wrap) .site-header h3,.lg.theme-light :is(.page-wrap,.wrap) .wo-loc,.lg.theme-light :is(.page-wrap,.wrap) .stat-val,.lg.theme-light :is(.page-wrap,.wrap) .stat-value,.lg.theme-light :is(.page-wrap,.wrap) .stat-num,.lg.theme-light :is(.page-wrap,.wrap) .kpi-value,.lg.theme-light :is(.page-wrap,.wrap) .wk-val,.lg.theme-light :is(.page-wrap,.wrap) .stat-chip-val{color:var(--lt-text)!important}
/* (3) things that paint their own background keep white text on it */
.lg.theme-light :is(.page-wrap,.wrap) .btn-primary,.lg.theme-light :is(.page-wrap,.wrap) .btn-primary *,.lg.theme-light :is(.page-wrap,.wrap) .btn-submit,.lg.theme-light :is(.page-wrap,.wrap) .btn-submit *,.lg.theme-light :is(.page-wrap,.wrap) .btn-save,.lg.theme-light :is(.page-wrap,.wrap) .btn-save *,.lg.theme-light :is(.page-wrap,.wrap) .sc-add-btn,.lg.theme-light :is(.page-wrap,.wrap) .sc-add-btn *,.lg.theme-light :is(.page-wrap,.wrap) .hc-view-all-btn,.lg.theme-light :is(.page-wrap,.wrap) .hc-view-all-btn *,.lg.theme-light :is(.page-wrap,.wrap) .ih-cta,.lg.theme-light :is(.page-wrap,.wrap) .ih-cta *,
.lg.theme-light :is(.page-wrap,.wrap) .idx-card,.lg.theme-light :is(.page-wrap,.wrap) .idx-card *,.lg.theme-light :is(.page-wrap,.wrap) .phr-hero *,.lg.theme-light :is(.page-wrap,.wrap) .btn-close-out,.lg.theme-light :is(.page-wrap,.wrap) .btn-new,.lg.theme-light :is(.page-wrap,.wrap) [class*="btn-"][class*="primary"]{color:#fff!important}
.lg.theme-light :is(.page-wrap,.wrap) .btn-primary{background:var(--lt-accent)!important}
.lg.theme-light :is(.page-wrap,.wrap) .btn-ghost,.lg.theme-light :is(.page-wrap,.wrap) .btn-cancel,.lg.theme-light :is(.page-wrap,.wrap) .btn-ghost *{background:#fff!important;border:1px solid var(--lt-line2)!important;color:var(--lt-text)!important}
/* filter pills: inactive = white chip w/ dark text; active-* variants keep their colour but switch to a solid fill + white text */
.lg.theme-light :is(.page-wrap,.wrap) .filter-pill,.lg.theme-light :is(.page-wrap,.wrap) .filter-chip,.lg.theme-light :is(.page-wrap,.wrap) .wo-groupby-pill,.lg.theme-light :is(.page-wrap,.wrap) .hc-mv-pill,.lg.theme-light :is(.page-wrap,.wrap) .tab-btn{background:#fff!important;border-color:var(--lt-line2)!important;color:var(--lt-text)!important;box-shadow:none!important}
.lg.theme-light :is(.page-wrap,.wrap) .filter-pill.active-status{background:#16a34a!important;border-color:#16a34a!important;color:#fff!important}
.lg.theme-light :is(.page-wrap,.wrap) .filter-pill.active-school{background:#0284c7!important;border-color:#0284c7!important;color:#fff!important}
.lg.theme-light :is(.page-wrap,.wrap) .filter-pill.active-cat{background:#d97706!important;border-color:#d97706!important;color:#fff!important}
.lg.theme-light :is(.page-wrap,.wrap) .filter-pill.active-flag{background:#dc2626!important;border-color:#dc2626!important;color:#fff!important}
.lg.theme-light :is(.page-wrap,.wrap) .filter-pill.active-year,.lg.theme-light :is(.page-wrap,.wrap) .filter-pill.active-cons,.lg.theme-light :is(.page-wrap,.wrap) .filter-pill.active,.lg.theme-light :is(.page-wrap,.wrap) .filter-chip.active,.lg.theme-light :is(.page-wrap,.wrap) .wo-groupby-pill.active,.lg.theme-light :is(.page-wrap,.wrap) .hc-mv-pill.active,.lg.theme-light :is(.page-wrap,.wrap) .tab-btn.active{background:var(--lt-accent)!important;border-color:var(--lt-accent)!important;color:#fff!important}
.lg.theme-light :is(.page-wrap,.wrap) .filter-pill[class*="active-"]{color:#fff!important}
/* UPS specifics */
.lg.theme-light :is(.page-wrap,.wrap) .stat-pill{background:#fff!important;border-color:var(--lt-line2)!important}
.lg.theme-light :is(.page-wrap,.wrap) .runtime-row{background:#f5f6fa!important;border-color:var(--lt-line)!important}
.lg.theme-light :is(.page-wrap,.wrap) .runtime-card{background:#fff!important;background-image:none!important}
.lg.theme-light :is(.page-wrap,.wrap) .ups-card{background:#fff!important}
.lg.theme-light :is(.page-wrap,.wrap) .view-toggle button{color:var(--lt-text)!important}
/* badges / status chips that set a tinted background keep their own colour */
.lg.theme-light :is(.page-wrap,.wrap) .badge,.lg.theme-light :is(.page-wrap,.wrap) [class*="badge-"],.lg.theme-light :is(.page-wrap,.wrap) .rt-badge,.lg.theme-light :is(.page-wrap,.wrap) .wo-status,.lg.theme-light :is(.page-wrap,.wrap) .status-badge,.lg.theme-light :is(.page-wrap,.wrap) .ic-badge,.lg.theme-light :is(.page-wrap,.wrap) .phr-cat-chip,.lg.theme-light :is(.page-wrap,.wrap) .phr-featured-badge{color:inherit}
.lg.theme-light :is(.page-wrap,.wrap) .rt-badge.open{color:#0369a1!important}.lg.theme-light :is(.page-wrap,.wrap) .rt-badge.closed{color:#15803d!important}
.lg.theme-light :is(.page-wrap,.wrap) .badge-green{color:#15803d!important}.lg.theme-light :is(.page-wrap,.wrap) .badge-red{color:#b91c1c!important}.lg.theme-light :is(.page-wrap,.wrap) .badge-amber{color:#b45309!important}.lg.theme-light :is(.page-wrap,.wrap) .badge-blue{color:#1d4ed8!important}.lg.theme-light :is(.page-wrap,.wrap) .badge-purple{color:#6d28d9!important}
/* links */
.lg.theme-light :is(.page-wrap,.wrap) a:not([class*="btn"]):not(.idx-card):not(.filter-pill):not(.filter-chip):not(.g-app-pill):not(.app-bar-link):not(.phr-card):not(.rt-item):not(.hc-feat-row):not(.wo-link):not(.sop-card):not(.ap-card):not(.sw-card):not(.ups-card):not(.runtime-row){color:#5b21b6}

/* ═══════════════════════════════════════════════════════════════════════════
   DAILY BACKGROUND (s166) — includes/daily_bg.php sets body.lg.daily-bg's
   background-image per day; this block tunes the veil for a photo instead of
   the brand bg.jpg and styles the credit pill. Dark/Light/Simple keep their
   flat !important backgrounds, so the photo is Glass-only by construction.
   ═══════════════════════════════════════════════════════════════════════════ */
body.lg.daily-bg{background-color:#070b24;background-position:center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed}
/* s166e (Austin): NO veil over the photo — just a faint foot gradient so the footer
   text and the credit pill stay legible on bright skies. ?veil=1 previews the old veil. */
body.lg.daily-bg::before{
  /* !important + display: a few pages (renewals/*, bus/oil_timeline) ship their own
     body::before{…!important} or {display:none}; in photo mode the foot gradient wins everywhere (s166u). */
  display:block!important;content:''!important;
  background:linear-gradient(180deg,rgba(4,10,35,0) 70%,rgba(4,10,35,.28) 100%)!important;
}
body.lg.daily-bg:not(.theme-dark):not(.theme-light):not(.theme-simple) .lg-orbs{display:none}   /* s166f: the purple/blue colour orbs are off on photo pages (Austin: 'top left still has a color overlay') */
@media(prefers-reduced-transparency:reduce){body.lg.daily-bg::before{background:rgba(4,10,35,.84)}}
.lg.theme-dark .daily-bg-credit,.lg.theme-light .daily-bg-credit,.lg.theme-simple .daily-bg-credit{display:none}
.daily-bg-credit{
  max-width:min(62vw,520px);
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;border-radius:999px;
  font:600 11px/1.2 Nunito,sans-serif;color:rgba(255,255,255,.62);text-decoration:none;white-space:nowrap;overflow:hidden;
  background:rgba(8,12,40,.42);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 18px -8px rgba(0,0,0,.7);
  transition:color .2s,background .2s,border-color .2s;
}
.daily-bg-credit span{overflow:hidden;text-overflow:ellipsis}
.daily-bg-credit i{color:rgba(192,132,252,.85);font-size:11px}
.daily-bg-credit:hover{color:#fff;background:rgba(8,12,40,.7);border-color:rgba(255,255,255,.3)}
@media(max-width:640px){.daily-bg-bar{left:8px;bottom:8px}.daily-bg-credit{padding:6px 8px;gap:0}.daily-bg-credit span{display:none}}
@media print{.daily-bg-credit{display:none}}
/* s166b: slideshow layers + Next button. The stage sits under body::before (the
   veil, z-index 0) and above the root background; once JS has built it the body
   image is dropped so the two layers can crossfade. */
.daily-bg-bar{position:fixed;left:12px;bottom:10px;z-index:5;display:flex;align-items:center;gap:6px}
.lg.theme-dark .daily-bg-bar,.lg.theme-light .daily-bg-bar,.lg.theme-simple .daily-bg-bar{display:none}
@media print{.daily-bg-bar{display:none}}
.daily-bg-stage{position:fixed;inset:0;z-index:-1;pointer-events:none;background:#070b24}
.daily-bg-layer{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 1.6s ease}
.daily-bg-layer.on{opacity:1}
body.lg.daily-bg.daily-bg-js{background-image:none!important}
@media(prefers-reduced-motion:reduce){.daily-bg-layer{transition:none}}
.daily-bg-next{
  flex:none;width:28px;height:28px;border-radius:999px;border:1px solid rgba(255,255,255,.16);cursor:pointer;
  background:rgba(8,12,40,.42);color:rgba(255,255,255,.7);font-size:11px;display:inline-flex;align-items:center;justify-content:center;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 18px -8px rgba(0,0,0,.7);
  transition:color .2s,background .2s,border-color .2s;
}
.daily-bg-next:hover{color:#fff;background:rgba(98,0,255,.55);border-color:rgba(255,255,255,.3)}
.lg.theme-dark .daily-bg-next,.lg.theme-light .daily-bg-next,.lg.theme-simple .daily-bg-next{display:none}
@media print{.daily-bg-next{display:none}}
/* s166e/k: login card — now in the PANEL list (s166r), nothing extra needed. */
/* s166g: the left-rail drawers (#qa-drawer/#sc-drawer/#hc-drawer) park off-screen at
   left:-240px but their box-shadow bled a dark 60px strip onto the page edge — only
   obvious now that the photo has no veil. Shadow only while a drawer is open. */
#qa-drawer:not(.qa-open),#sc-drawer:not(.sc-open),#hc-drawer:not(.hc-open),#todo-drawer:not(.td-open){box-shadow:none!important}
/* s166h/i/r: top bar over the PHOTO = sample 3 "dark frosted"; reads the --np-bar-* tokens.
   Logo glow reduced. (?bar=1..4 in daily_bg.php still previews the alternatives.) */
body.lg.daily-bg:not(.theme-dark):not(.theme-light):not(.theme-simple) .g-top-bar::before,
body.lg.daily-bg:not(.theme-dark):not(.theme-light):not(.theme-simple) .g-top-bar::after{content:none}
body.lg.daily-bg:not(.theme-dark):not(.theme-light):not(.theme-simple) .g-top-bar{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 16px 40px -18px rgba(0,0,0,.6)}
body.lg.daily-bg:not(.theme-dark):not(.theme-light):not(.theme-simple) .g-top-brand img{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
body.lg.daily-bg.lg-lite:not(.theme-dark):not(.theme-light):not(.theme-simple) .g-top-bar{background:rgba(9,11,24,.92)!important}   /* lite: same charcoal, no blur */

/* ═══ s166k/r: PHOTO MODE — surface tokens (Austin: 'darken the boxes') ═══
   Dark-frosted material for every panel + the top bar on photo pages: charcoal
   tint, strong blur, plain border, no hairline/sheen. .glass-img artwork cards
   keep their navy art (their own rule out-specifies the panel rule). */
body.lg.daily-bg:not(.theme-dark):not(.theme-light):not(.theme-simple){
    --np-panel-bg:rgba(9,11,24,.72);
    --np-panel-border:rgba(255,255,255,.12);
    --np-panel-blur:30px;--np-panel-sat:140%;
    --np-panel-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 16px 40px -18px rgba(0,0,0,.6);
    --np-panel-hover-border:rgba(255,255,255,.2);
    --np-panel-decor:none;
    --np-bar-bg:rgba(9,11,24,.70);--np-bar-blur:30px;--np-bar-sat:140%;--np-bar-border:rgba(255,255,255,.12);
    --np-sub-bg:rgba(9,11,24,.58);--np-sub-blur:24px;   /* secondary / page-local panels (s166s registry) */
}
body.lg.daily-bg.lg-lite:not(.theme-dark):not(.theme-light):not(.theme-simple){
    --np-panel-bg:rgba(9,11,24,.92);--np-panel-blur:0px;--np-panel-sat:100%;
    --np-bar-bg:rgba(9,11,24,.92);--np-bar-blur:0px;--np-bar-sat:100%;
    --np-sub-bg:rgba(9,11,24,.84);--np-sub-blur:0px;
}
/* app sub-bar + the AddIT/AddMaint/AddBus step strip sat straight on the photo */
body.lg.daily-bg:not(.theme-dark):not(.theme-light):not(.theme-simple) .app-bar{background:var(--np-bar-bg);backdrop-filter:blur(var(--np-bar-blur)) saturate(var(--np-bar-sat));-webkit-backdrop-filter:blur(var(--np-bar-blur)) saturate(var(--np-bar-sat))}
body.lg.daily-bg:not(.theme-dark):not(.theme-light):not(.theme-simple) .steps .step:not(.active):not(.done){background:rgba(9,11,24,.62);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.5)}
body.lg.daily-bg:not(.theme-dark):not(.theme-light):not(.theme-simple) .steps .step.active{background:rgba(9,11,24,.75);box-shadow:inset 0 0 0 1px rgba(192,132,252,.45)}
body.lg.daily-bg:not(.theme-dark):not(.theme-light):not(.theme-simple) .steps .step.done{background:rgba(9,11,24,.7)}

/* s166l liquid-colour rules removed in s166u (feature retired pt.16; file kept in admin/instructions_backups/retired/). */

/* ═══ s166s: PAGE-LOCAL PANEL REGISTRY (photo mode) ════════════════════════════
   The 2026-10-22 crawl (135 pages, see claude/css-consistency-audit.md) found
   139 top-level containers on 59 pages that use a page-local class instead of
   .card and so sat transparent on the photo. Rather than edit 59 pages, photo
   mode gives them the panel surface here. Generic names are scoped with the
   body.mod-<dir> / body.pg-<file> classes header_nav now adds. Status-tinted
   variants keep their coloured borders; only the fill changes.
   New page? Use class="card" and this list never grows. */
body.lg :is(
  .mod-admin :is(.av-card,.av-stat,.intro,.notes-card,.cl-card,.ep-module,.ep-cat,.el-filters,.status-card,.test-card,.ss-card,.td-card,.td-table-wrap),
  .mod-aps :is(.ap-table-wrap,.filter-groups,.dr-card,.imp-card),
  .mod-behavior :is(.route-card,.help-note),
  .filter-groups,.ref-item,
  .stat-card,.stat-box,.kpi-card,.w-kpi,.sw-card,.ap-card,.sop-card,.section-card,.tl-card,   /* stat tiles (25 pages) — lit-edge only, no fill of their own */
  .mod-bus :is(.bus-card,.problem-box,.ticket,.filter-bar),
  .mod-eoy :is(.eoy-item,.eoy-toggle),
  .mod-inventory :is(.bulk-card,.upload-zone,.school-card,.family-card,.glass-card),
  .mod-it :is(.rule-card,.rule-section,.reports-section,.sla-inactive-notice,.tl-desc,.category-section,.template-card),
  .mod-principal :is(.cb-damage-section,.mod-card,.school-hero),
  .mod-renewals :is(.panel,.section,.glass),
  .mod-sign .ad-upload-section,
  .mod-sop :is(.cat-table,.hero,.sop-hero),
  .mod-todo :is(.chart-card,.glass,.todo-card),
  .mod-trips :is(.npsai-cr,.req-card,.driver-card),
  .mod-ups :is(.alert-group,.explainer,.edit-card,.missing-card,.model-card,.form-card,.empty-state,.chart-card,.uls-controls,.uls-table-wrap,.create-card,.maint-card,.heatmap-wrap,.unscheduled-card,.bulk-card,.set-card,.creds-card,.progress-card,.probe-action-bar,.tile)
){
  background-color:var(--np-sub-bg);
  backdrop-filter:blur(var(--np-sub-blur)) saturate(140%);-webkit-backdrop-filter:blur(var(--np-sub-blur)) saturate(140%);
}
/* s166t: the registry is now theme-independent — every mode defines --np-sub-bg:
   glass ≈ the pages' own 4-7% white, photo charcoal .58, dark #15151c, light white,
   simple .055. (Registry text colour in Light comes from the s159 page-wide pass.) */
/* s166s: switching Glass -> Dark/Light/Simple from the palette menu must hide the
   slideshow stage immediately (it is a z-index:-1 element, so the theme's body
   background alone cannot cover it). */
.lg.theme-dark .daily-bg-stage,.lg.theme-light .daily-bg-stage,.lg.theme-simple .daily-bg-stage{display:none}

/* ═══ s166t: BOX COLOUR picker in the Appearance menu ═══════════════════════════
   Writes --np-panel-bg / --np-sub-bg inline on <body> (see header_nav glass
   script + menu). Suspended in Light (dark text). */
.g-ap-box{padding:8px 10px 10px;border-top:1px solid rgba(255,255,255,.08);margin-top:2px}
.g-ap-box-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.g-ap-box-reset{font:700 10.5px Nunito,sans-serif;color:rgba(255,255,255,.55);background:none;border:1px solid rgba(255,255,255,.16);border-radius:7px;padding:2px 8px;cursor:pointer;visibility:hidden}
.g-ap-box.is-custom .g-ap-box-reset{visibility:visible}
.g-ap-box-reset:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.g-ap-box-row{display:flex;align-items:center;gap:10px}
.g-ap-swatch{position:relative;width:30px;height:30px;border-radius:9px;overflow:hidden;border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);cursor:pointer;flex:none;background:var(--np-panel-bg)}
.g-ap-swatch input{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);opacity:0;cursor:pointer}
.g-ap-swatch span{position:absolute;inset:0;background:var(--np-panel-bg);pointer-events:none}
.g-ap-box-row input[type=range]{flex:1;accent-color:#c084fc;height:4px;cursor:pointer}
.g-ap-box-pct{font:700 11px Nunito,sans-serif;color:rgba(255,255,255,.7);min-width:36px;text-align:right;font-variant-numeric:tabular-nums}
.lg.theme-light .g-ap-box{opacity:.45;pointer-events:none}
.lg.theme-light .g-ap-box::after{content:'Not used in Light';display:block;font:600 10px Nunito,sans-serif;color:var(--lt-text3,#666);margin-top:5px}
.lg.theme-light .g-ap-box-reset,.lg.theme-light .g-ap-rowlbl,.lg.theme-light .g-ap-box-pct{color:var(--lt-text2)}
/* s166v: "Apply to all boxes" — the custom colour also replaces artwork-backed panels
   (.card.glass-img incl. the tall variants) and the top bar / sub-bar. */
.lg.custom-box-all .card.glass-img,.lg.custom-box-all .card.glass-img.glass-tall,.lg.custom-box-all .card.glass-img.glass-tall.glass-plain{
  background-image:none!important;background-color:transparent!important;background:var(--np-panel-bg)!important;
}
.lg.custom-box-all .g-top-bar,.lg.custom-box-all .app-bar{background:var(--np-panel-bg)!important}
.g-ap-box-all{border-top:0;padding:8px 0 0;margin-top:2px}
.g-ap-box-all input{margin:0}
.lg.custom-box-all :is(.runtime-card,.deg-card,.qa-card){background-image:none!important}
/* s166w: AI brief panels (#npsai-brief on it/ma/bus lists + Trip Manager) and the
   Trip Manager top strip are inline-styled purple .05 tints — unreadable on the photo
   (Austin: 'top of the page is hard to read, needs a box'). They take the panel
   surface; the purple hairline stays as an accent. */
body.lg #npsai-brief{background:var(--np-panel-bg)!important;backdrop-filter:blur(var(--np-panel-blur)) saturate(var(--np-panel-sat));-webkit-backdrop-filter:blur(var(--np-panel-blur)) saturate(var(--np-panel-sat));border-color:rgba(192,132,252,.35)!important;box-shadow:var(--np-panel-shadow)}
body.lg.theme-light #npsai-brief{background:#f7f3ff!important;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}

/* ═══ s166x: INLINE-TINTED TEXT BLOCKS on the photo (Austin: 'check other pages for
   the same issue' after the Trip Brief). The readability scan found 20 blocks on 15
   pages whose only fill is an inline 3-8% tint: behavior/index header strip, todo
   greeting column, trips AI review box, UPS settings hints / setup bars / tips, push
   token status, filter bars. Two generic fixes, photo mode only, never inside a .card:
   (a) class registry additions, (b) any element whose inline style carries a low-alpha
   rgba() fill gets an inset backing (inset shadow leaves the tint + coloured border
   visible underneath). */
body.lg.daily-bg:not(.theme-dark):not(.theme-light):not(.theme-simple) :is(
  .filter-bar,.tr-filters,.status-item,.ac-item,.budget-note,.note-box,.tips,.ups-picker,.cred-item,
  .mod-ups :is(.hint,.set-row,.probe-action-bar),
  .mod-trips .npsai-cr,
  [style*="background:rgba(255,255,255,.0"],[style*="background: rgba(255,255,255,.0"],[style*="background:rgba(255, 255, 255, .0"],[style*="background:rgba(255,255,255,0.0"],
  [style*="background:rgba(192,132,252,.0"],[style*="background:rgba(251,191,36,.0"],[style*="background:rgba(96,165,250,.0"],[style*="background:rgba(74,222,128,.0"],[style*="background:rgba(248,113,113,.0"],[style*="background:rgba(56,189,248,.0"]
):not(.card *):not(.info-card *):not(.login-card *):not(.g-top-bar *):not(#npsai-brief *):not(.stat-card):not(.g-appearance-menu *){
  box-shadow:inset 0 0 0 100vmax var(--np-sub-bg);
  backdrop-filter:blur(var(--np-sub-blur)) saturate(140%);-webkit-backdrop-filter:blur(var(--np-sub-blur)) saturate(140%);
}

/* ═══ s166ad: LEFT RAIL OFF (Austin: 'disable the side action bar, it detracts from the
   looks now'). The four rail tabs (Quick Actions / Todo / Shortcuts / Help Center) and
   their slide-out drawers are hidden portal-wide; the markup and JS in header_nav.php
   are untouched, so deleting this block turns the rail back on. Everything the rail
   opened is still reachable: Quick Actions + Shortcuts on the home page, Todo and Help
   in the top menu. */
#qa-tab,#todo-tab,#sc-tab,#hc-tab,#qa-drawer,#todo-drawer,#sc-drawer,#hc-drawer,#qa-backdrop,#todo-backdrop,#sc-backdrop,#hc-backdrop{display:none!important}

/* s167: IT layout segmented control in the Appearance menu */
.g-ap-seg{display:flex;gap:6px;margin-top:6px}.g-ap-seg button{flex:1;padding:7px 8px;border-radius:9px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:rgba(255,255,255,.7);font:700 11.5px Nunito,sans-serif;cursor:pointer}.g-ap-seg button small{display:block;font-weight:600;font-size:9.5px;opacity:.6}.g-ap-seg button.on{background:linear-gradient(135deg,#6200ff,#b10ef1);color:#fff;border-color:transparent}.g-ap-seg button.on small{opacity:.85}
.lg.theme-light .g-ap-seg button{border-color:rgba(0,0,0,.14);background:rgba(0,0,0,.04);color:rgba(0,0,0,.7)}