/* SAFE — "Soft Slate" light theme override layer.
   Scoped under html.light so DARK stays the untouched default (zero regression).
   html.light .x  (0,2,1) beats  .x  (0,1,0) — no !important needed. */

/* ============================================================
   0. GLOBAL READABILITY SCALE (both themes)
   Bump the root font size so rem-based text, spacing and widths
   all scale up proportionally — the app was styled very small.
   ============================================================ */
html { font-size: 112.5%; }   /* 16px -> 18px base */

/* Crisper text + raise the floor on the smallest hardcoded sizes. The app
   uses a lot of text-[9px]/[10px]/[11px] fixed pixels that don't scale with
   the root and render soft; nudge them up to legible whole pixels. Higher
   specificity (html .x) so these beat the Tailwind CDN utilities. */
html body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html .text-\[9px\]  { font-size: 11px; }
html .text-\[10px\] { font-size: 12px; }
html .text-\[11px\] { font-size: 12px; }

/* ============================================================
   1. PAGE + SURFACE BACKGROUNDS (slate scale)
   dark: 900=page, 800=card, 700=input/secondary, 950=deep well
   light: page=#f8fafc, cards=#fff float on it, wells=#f1f5f9
   ============================================================ */
html.light body { background-color: #f8fafc; color: #0f172a; }

html.light .bg-slate-900 { background-color: #f8fafc; }   /* page */
html.light .bg-slate-800 { background-color: #ffffff; }   /* card */
html.light .bg-slate-700 { background-color: #f1f5f9; }   /* input / secondary surface */
html.light .bg-slate-600 { background-color: #e2e8f0; }
html.light .bg-slate-500 { background-color: #cbd5e1; }
html.light .bg-slate-950 { background-color: #f1f5f9; }   /* recessed well / input / camera backdrop */
/* bg-slate-200, bg-slate-50, bg-white already light — left as-is */

/* Slate background opacity variants (escaped slash).
   slate-900/* = translucent panels/headers/inner tiles -> light @ same intent */
html.light .bg-slate-900\/50 { background-color: rgba(248,250,252,0.70); }
html.light .bg-slate-900\/60 { background-color: rgba(248,250,252,0.75); }
html.light .bg-slate-900\/70 { background-color: rgba(248,250,252,0.80); }
html.light .bg-slate-900\/80 { background-color: rgba(248,250,252,0.85); }
html.light .bg-slate-900\/90 { background-color: rgba(248,250,252,0.92); }
html.light .bg-slate-900\/95 { background-color: rgba(248,250,252,0.95); }
html.light .bg-slate-950\/40 { background-color: rgba(241,245,249,0.60); }
html.light .bg-slate-800\/40 { background-color: #f1f5f9; }
html.light .bg-slate-800\/50 { background-color: #f1f5f9; }
html.light .bg-slate-800\/60 { background-color: rgba(241,245,249,0.80); }
html.light .bg-slate-800\/80 { background-color: rgba(241,245,249,0.90); }
html.light .bg-slate-700\/60 { background-color: rgba(226,232,240,0.80); }

/* Hover surface backgrounds (escaped colon) */
html.light .hover\:bg-slate-800:hover { background-color: #f1f5f9; }
html.light .hover\:bg-slate-700:hover { background-color: #e2e8f0; }

/* ============================================================
   2. BORDERS (slate) + DIVIDERS
   ============================================================ */
html.light .border-slate-800      { border-color: #e2e8f0; }
html.light .border-slate-700      { border-color: #cbd5e1; }
html.light .border-slate-700\/40  { border-color: rgba(203,213,225,0.60); }
html.light .border-slate-600      { border-color: #cbd5e1; }
html.light .border-slate-200      { border-color: #e2e8f0; }
/* border-gray-300, border-red-600 (login) already work on light — left as-is */

html.light .divide-slate-800 > * + * { border-color: #e2e8f0; }

/* ============================================================
   3. TEXT (slate scale) — primary/secondary/muted, all AA on white/#f8fafc
   ============================================================ */
html.light .text-slate-100     { color: #0f172a; }               /* primary  ~16:1 */
html.light .text-slate-200     { color: #1e293b; }               /* ~14:1 */
html.light .text-slate-200\/80 { color: rgba(15,23,42,0.85); }
html.light .text-slate-300     { color: #334155; }               /* secondary ~10:1 */
html.light .text-slate-400     { color: #475569; }               /* label/muted ~7.5:1 */
html.light .text-slate-500     { color: #64748b; }               /* muted ~4.8:1 */
html.light .text-slate-600     { color: #64748b; }               /* dim -> muted */
/* text-slate-800 already dark — left as-is (reads on light) */

html.light .hover\:text-slate-100:hover { color: #0f172a; }

/* ============================================================
   4. BRAND — safe.light heading swap (invisible pale teal -> dark teal)
   safe.primary teal buttons + white text stay as-is.
   ============================================================ */
html.light .text-safe-light { color: #0f766e; }                  /* was #ccfbf1; teal-700 ~4.5:1 on white */
html.light .text-teal-400   { color: #0f766e; }                  /* accent/link -> teal-700 */
html.light .hover\:text-teal-400:hover { color: #115e59; }       /* teal-800 */

/* ============================================================
   5. STATUS BADGES — dark translucent -> light tint + darker text
   preserve semantic hue; rule: /40,/30,/20,/60 tints = light bg;
   /80 opaque chips/buttons = solid saturated (keep white text)
   ============================================================ */

/* -- EMERALD (success) -- */
html.light .bg-emerald-900\/40 { background-color: #d1fae5; }    /* emerald-100 tint */
html.light .bg-emerald-900\/50 { background-color: #d1fae5; }    /* toast */
html.light .bg-emerald-800\/60 { background-color: #d1fae5; }
html.light .bg-emerald-700\/80 { background-color: #047857; }    /* solid button */
html.light .bg-emerald-600\/80 { background-color: #059669; }    /* solid */
html.light .text-emerald-300   { color: #047857; }               /* emerald-700 ~4.7:1 on #d1fae5 */
html.light .text-emerald-400   { color: #047857; }
html.light .text-emerald-500   { color: #047857; }
html.light .text-emerald-50    { color: #065f46; }               /* toast text: emerald-800 ~7:1 */
html.light .hover\:text-emerald-200:hover { color: #065f46; }
html.light .border-emerald-400\/80 { border-color: rgba(16,185,129,0.90); }
html.light .border-emerald-500\/70 { border-color: rgba(16,185,129,0.70); }
html.light .border-emerald-700\/40 { border-color: #6ee7b7; }    /* emerald-300 */
html.light .border-emerald-700\/60 { border-color: #6ee7b7; }

/* -- AMBER (warning) -- */
html.light .bg-amber-900\/40 { background-color: #fef3c7; }      /* amber-100 tint */
html.light .bg-amber-900\/30 { background-color: #fef3c7; }
html.light .bg-amber-900\/20 { background-color: #fefce8; }      /* amber-50 lighter */
html.light .bg-amber-800\/60 { background-color: #fef3c7; }
html.light .bg-amber-700\/80 { background-color: #b45309; }      /* solid button */
html.light .bg-amber-600\/80 { background-color: #d97706; }      /* solid */
html.light .text-amber-200 { color: #b45309; }                   /* amber-700 ~4.7:1 on tint */
html.light .text-amber-300 { color: #b45309; }
html.light .text-amber-400 { color: #b45309; }
html.light .border-amber-700\/40 { border-color: #fcd34d; }      /* amber-300 */
html.light .border-amber-700\/50 { border-color: #fcd34d; }
html.light .border-amber-700\/60 { border-color: #fcd34d; }

/* -- RED (danger) -- */
html.light .bg-red-900\/40 { background-color: #fee2e2; }        /* red-100 tint */
html.light .bg-red-900\/20 { background-color: #fef2f2; }        /* red-50 lighter */
html.light .bg-red-800\/60 { background-color: #fee2e2; }
html.light .hover\:bg-red-900\/35:hover { background-color: rgba(254,202,202,0.70); } /* red-200 */
html.light .text-red-200 { color: #b91c1c; }                     /* red-700 ~5.5:1 on tint */
html.light .text-red-300 { color: #b91c1c; }
html.light .text-red-400 { color: #b91c1c; }
html.light .text-red-500 { color: #b91c1c; }
html.light .text-red-600 { color: #b91c1c; }
html.light .hover\:text-red-200:hover { color: #991b1b; }        /* red-800 */
html.light .hover\:text-red-600:hover { color: #991b1b; }
html.light .border-red-700\/60 { border-color: #fca5a5; }        /* red-300 */
/* bg-red-600/700/800, bg-red-700/95, border-red-600, focus:border-red-600,
   focus:ring-red-500, shadow-red-900/40 — saturated red works on light, left as-is */

/* -- ROSE (danger alt) -- */
html.light .bg-rose-900\/30 { background-color: #ffe4e6; }       /* rose-100 tint */
html.light .bg-rose-900\/40 { background-color: #ffe4e6; }
html.light .text-rose-300 { color: #be123c; }                    /* rose-700 ~5.3:1 on tint */
html.light .text-rose-400 { color: #be123c; }
html.light .text-rose-600 { color: #be123c; }
html.light .hover\:text-rose-300:hover { color: #9f1239; }       /* rose-800 */
html.light .border-rose-700\/60 { border-color: #fda4af; }       /* rose-300 */

/* -- GREEN (success alt) -- */
html.light .text-green-600 { color: #15803d; }                   /* green-700 ~4.6:1 on white */
/* bg-green-600 button + white text — left as-is */

/* ============================================================
   6. PLACEHOLDERS
   ============================================================ */
html.light .placeholder-slate-500::placeholder { color: #94a3b8; } /* slate-400 muted */
/* placeholder-gray-300 (white login card) — left as-is */

/* ============================================================
   7. NEUTRAL WHITE-ON-SLATE PILL FIX
   rare: bg-slate-800 text-white (scan register-status default) would go
   white-on-white; force dark text when both classes co-occur.
   ============================================================ */
html.light .text-white.bg-slate-800 { color: #0f172a; }
html.light .bg-slate-800.text-white { color: #0f172a; }

/* ============================================================
   8. DELIBERATELY UNCHANGED (documented)
   - text-white / text-white/80 / text-black : on colored buttons
     (bg-red-600 / bg-safe-primary / bg-amber-300 / bg-emerald-400) or black
     overlays that stay dark in both themes -> kept.
   - bg-black + bg-black/40..70 : dim overlays / camera wells, valid both themes.
   - bg-emerald-400 / bg-red-400 / bg-amber-300 / bg-amber-400 : saturated JS
     status pills, identical intent both themes -> kept.
   - hover:bg-emerald-700 / hover:bg-amber-600 / hover:bg-red-700 /
     hover:bg-teal-700 / active:bg-red-800 : saturated button hovers -> kept.
   - group-hover:ring-teal-500 / focus:ring-red-500 : rings read on light -> kept.
   - login gray-* + border-gray-300 : live on an always-white card -> kept.
   ============================================================ */
/* ============================================================
   9. FLOATING THEME TOGGLE (injected by theme.js on every page)
   Base style works in dark; light variant scoped under html.light.
   ============================================================ */
.safe-theme-toggle{
  position:fixed; top:1rem; right:1rem; z-index:9998;
  display:inline-flex; align-items:center; gap:.4rem;
  height:2.25rem; padding:0 .9rem; border-radius:9999px;
  font-size:.8rem; font-weight:600; line-height:1; cursor:pointer;
  border:1px solid rgba(148,163,184,.55);
  background:rgba(30,41,59,.94); color:#e2e8f0;
  box-shadow:0 4px 14px rgba(0,0,0,.35); backdrop-filter:blur(6px);
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.safe-theme-toggle:hover{ transform:translateY(-1px); }
html.light .safe-theme-toggle{
  background:#ffffff; border-color:#cbd5e1; color:#0f172a;
  box-shadow:0 4px 14px rgba(15,23,42,.15);
}

/* In-header toggle (main app pages) uses Tailwind classes; ensure the icon+label sit inline */
#theme-toggle{ white-space:nowrap; }

/* ---- Theme switch: iOS/macOS style. Clean track, plain white knob with a
   soft layered shadow, inline SVG sun/moon that cross-fade, one spring-ish
   curve. No emoji. ---- */
#theme-toggle, .safe-theme-toggle{ border:0 !important; padding:0 !important; background:transparent !important; box-shadow:none !important; }
.safe-switch{
  position:relative; display:inline-block;
  width:51px; height:31px; border-radius:999px; cursor:pointer;
  background:rgba(120,120,128,.32);
  box-shadow:inset 0 0 0 0.5px rgba(255,255,255,.06);
  transition:background .3s ease;
  vertical-align:middle;
}
.safe-switch:hover{ background:rgba(120,120,128,.42); }
html.light .safe-switch{ background:rgba(120,120,128,.16); box-shadow:inset 0 0 0 0.5px rgba(15,23,42,.06); }
html.light .safe-switch:hover{ background:rgba(120,120,128,.26); }
.safe-switch-knob{
  position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%;
  background:#ffffff;
  box-shadow:0 3px 8px rgba(0,0,0,.25), 0 1px 1px rgba(0,0,0,.16), 0 0 0 0.5px rgba(0,0,0,.04);
  display:grid; place-items:center;
  transition:transform .3s cubic-bezier(.25,1.35,.45,1);
}
.safe-switch[data-theme="light"] .safe-switch-knob{ transform:translateX(20px); }
.safe-switch-knob svg{ width:15px; height:15px; display:block; }
.safe-switch-knob .sw-moon{ color:#475569; }
.safe-switch-knob .sw-sun{ color:#f59e0b; }

/* ---- Pills: THE badge component. Soft tint + hairline inset ring (no hard
   borders), one height, one type size, optional status dot. Dark values are
   the defaults; html.light overrides swap to solid pastel tints. ---- */
.pill{
  display:inline-flex; align-items:center; gap:5px;
  height:20px; padding:0 9px; border-radius:999px;
  font-size:11px; font-weight:600; line-height:1; white-space:nowrap;
  letter-spacing:.015em; vertical-align:middle;
}
.pill-dot::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:currentColor; flex:0 0 auto;
}
.pill-red    { background:rgba(239,68,68,.16);  color:#fca5a5; box-shadow:inset 0 0 0 1px rgba(239,68,68,.30); }
.pill-amber  { background:rgba(245,158,11,.14); color:#fcd34d; box-shadow:inset 0 0 0 1px rgba(245,158,11,.28); }
.pill-emerald{ background:rgba(16,185,129,.14); color:#6ee7b7; box-shadow:inset 0 0 0 1px rgba(16,185,129,.28); }
.pill-sky    { background:rgba(14,165,233,.14); color:#7dd3fc; box-shadow:inset 0 0 0 1px rgba(14,165,233,.28); }
.pill-violet { background:rgba(139,92,246,.15); color:#c4b5fd; box-shadow:inset 0 0 0 1px rgba(139,92,246,.30); }
.pill-teal   { background:rgba(20,184,166,.14); color:#5eead4; box-shadow:inset 0 0 0 1px rgba(20,184,166,.28); }
.pill-slate  { background:rgba(148,163,184,.10); color:#cbd5e1; box-shadow:inset 0 0 0 1px rgba(148,163,184,.22); }
html.light .pill-red    { background:#fee2e2; color:#b91c1c; box-shadow:inset 0 0 0 1px #fecaca; }
html.light .pill-amber  { background:#fef3c7; color:#b45309; box-shadow:inset 0 0 0 1px #fde68a; }
html.light .pill-emerald{ background:#d1fae5; color:#047857; box-shadow:inset 0 0 0 1px #a7f3d0; }
html.light .pill-sky    { background:#e0f2fe; color:#0369a1; box-shadow:inset 0 0 0 1px #bae6fd; }
html.light .pill-violet { background:#ede9fe; color:#6d28d9; box-shadow:inset 0 0 0 1px #ddd6fe; }
html.light .pill-teal   { background:#ccfbf1; color:#0f766e; box-shadow:inset 0 0 0 1px #99f6e4; }
html.light .pill-slate  { background:#f1f5f9; color:#475569; box-shadow:inset 0 0 0 1px #e2e8f0; }
/* Critical severity chip: the industry pattern (PagerDuty P1 / Datadog SEV-1
   / shadcn destructive) — flat saturated red, white text, warning icon, no
   gloss and no motion. The icon is what makes it read as product design;
   the SVG comes from severityBadge() in incidents.js. */
.pill-critical{
  background:#dc2626;
  color:#fff;
  font-weight:700;
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
}
.pill-critical svg{ flex:0 0 auto; }

/* ---- Sortable table headers ---- */
th[data-sort]{ cursor:pointer; user-select:none; white-space:nowrap; }
th[data-sort]:hover{ color:#5eead4; }
html.light th[data-sort]:hover{ color:#0f766e; }
th[data-sort] .sort-arrow{ font-size:9px; opacity:.9; }

/* ---- Subtle table row hover (easier to track a row across 100+ rows) ---- */
tbody tr{ transition:background-color .12s ease; }
tbody tr:hover{ background-color:rgba(148,163,184,.06); }
html.light tbody tr:hover{ background-color:rgba(15,23,42,.035); }

/* ---- Critical-severity incident rows ----
   The industry pattern for critical items in lists (GitHub danger surfaces,
   Grafana firing alerts, PagerDuty P1): a VERY subtle red tint on the row,
   a slim solid accent bar on the left edge, and the authority carried by
   the chip — no gloss, no gradients, no motion. Tint values are GitHub
   Primer's battle-tested danger tokens. Explicit :hover outranks the
   generic tbody tr:hover above. */
.row-critical{ background:rgba(248,81,73,.08); }
.row-critical:hover{ background:rgba(248,81,73,.13); }
.row-critical > td:first-child{ box-shadow:inset 3px 0 0 #f85149; }
html.light .row-critical{ background:#fff1f1; }
html.light .row-critical:hover{ background:#ffe7e7; }
html.light .row-critical > td:first-child{ box-shadow:inset 3px 0 0 #cf222e; }

/* Red Zone "View profile" buttons. Dedicated class with explicit colours for
   BOTH themes - Tailwind red utilities here collided with the light-mode
   remap layer (bg remapped to #fee2e2 while text-red-100 stayed #fee2e2 =
   invisible text). Never style these with remappable utilities. */
.rz-view-btn{
  background:rgba(127,29,29,.30);
  border:1px solid rgba(185,28,28,.60);
  color:#fecaca;
  border-radius:.5rem;
  padding:.375rem .75rem;
  font-size:12px; font-weight:600; line-height:1.2;
}
.rz-view-btn:hover{ background:rgba(153,27,27,.50); color:#fff; }
html.light .rz-view-btn{ background:#fee2e2; border-color:#fca5a5; color:#b91c1c; }
html.light .rz-view-btn:hover{ background:#fecaca; color:#7f1d1d; }

/* ---- Care plan cards inside the profile (both modal modes) ----
   Explicit colours for BOTH themes (never remappable utilities here).
   Sized for the compact modal; the .emergency block scales them up. */
.cp-tile{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; height:2.4rem; width:2.4rem;
  border-radius:.7rem; color:#fff;
}
.cp-tile svg{ height:55%; width:55%; }
.cp-tile-doc, .cp-tile-red{ background:#dc2626; }
.cp-tile-amber{ background:#ea580c; }
.cp-summary, .cp-scen{
  display:flex; gap:.9rem; align-items:flex-start;
  border-radius:.9rem; padding:.85rem 1rem; border:1px solid transparent;
}
.cp-summary{ background:rgba(127,29,29,.16); border-color:rgba(185,28,28,.45); }
.cp-summary-title{ font-weight:700; color:#fecaca; }
.cp-summary-dx{ margin-top:.15rem; color:#f1f5f9; }
.cp-scen-red  { background:rgba(127,29,29,.13); border-color:rgba(185,28,28,.50); }
.cp-scen-amber{ background:rgba(120,53,15,.13); border-color:rgba(217,119,6,.45); }
.cp-scen-title{ font-weight:700; margin-bottom:.2rem; }
.cp-scen-red  .cp-scen-title{ color:#fca5a5; }
.cp-scen-amber .cp-scen-title{ color:#fdba74; }
.cp-lead{ font-weight:700; }
.cp-call{ display:flex; gap:.45rem; align-items:flex-start; margin-top:.4rem; }
.cp-call svg{ height:.95rem; width:.95rem; flex:0 0 auto; margin-top:.2rem; }
.cp-scen-red  .cp-call{ color:#fca5a5; }
.cp-scen-amber .cp-call{ color:#fdba74; }
.cp-call-lead{ font-weight:700; }
.cp-team{
  display:flex; gap:.6rem; align-items:flex-start;
  border:1px solid rgba(148,163,184,.22); border-radius:.8rem;
  padding:.7rem .9rem; color:#cbd5e1;
}
.cp-team svg{ height:1rem; width:1rem; flex:0 0 auto; margin-top:.15rem; color:#94a3b8; }
.cp-team-label{ font-weight:700; text-transform:uppercase; font-size:.85em; letter-spacing:.05em; color:#94a3b8; }
html.light .cp-summary{ background:#fef2f2; border-color:#fecaca; }
html.light .cp-summary-title{ color:#b91c1c; }
html.light .cp-summary-dx{ color:#0f172a; }
html.light .cp-scen-red  { background:#fef2f2; border-color:#fca5a5; }
html.light .cp-scen-amber{ background:#fff7ed; border-color:#fdba74; }
html.light .cp-scen-red  .cp-scen-title{ color:#dc2626; }
html.light .cp-scen-amber .cp-scen-title{ color:#ea580c; }
html.light .cp-scen-red  .cp-call{ color:#dc2626; }
html.light .cp-scen-amber .cp-call{ color:#ea580c; }
html.light .cp-team{ border-color:#e2e8f0; color:#334155; }

/* ---- Red Zone emergency profile: full-screen takeover ----
   Matches Kyle's reference mock: red banner, grey canvas, floating white
   cards (identity card with a red wash + ringed red avatar; plan card left;
   guardians + welfare cards right), large green call buttons. Dark theme =
   same architecture on dark surfaces. Compact profile untouched. */
#profile-modal.emergency{ padding:0; align-items:stretch; overscroll-behavior:contain; }
/* the compact profile scrolls via the container / 70vh body — contain those too */
#profile-modal{ overscroll-behavior:contain; }
#profile-body{ overscroll-behavior:contain; }
#profile-modal.emergency > div{
  max-width:none; width:100%; min-height:100dvh;
  border-radius:0; border:0;
  display:flex; flex-direction:column;
  background:#0b1120;                              /* canvas */
}
html.light #profile-modal.emergency > div{ background:#eef1f6; }
#profile-modal.emergency #profile-rz-banner{ display:flex; }
/* identity card */
#profile-modal.emergency #profile-header{
  margin:1.25rem 1.5rem 0;
  padding:1.4rem 1.6rem;
  align-items:center;
  border:1px solid rgba(148,163,184,.15);
  border-radius:1.1rem;
  background:
    radial-gradient(120% 170% at 0% 50%, rgba(220,38,38,.16), rgba(220,38,38,0) 55%),
    #0f172a;
  box-shadow:0 10px 28px -18px rgba(2,6,23,.7);
}
html.light #profile-modal.emergency #profile-header{
  border-color:#e2e8f0;
  background:
    radial-gradient(120% 170% at 0% 50%, rgba(220,38,38,.10), rgba(220,38,38,0) 55%),
    #fff;
  box-shadow:0 10px 25px -18px rgba(15,23,42,.25);
}
#profile-modal.emergency #profile-avatar{
  height:5.5rem; width:5.5rem; font-size:1.9rem;
  background-color:#dc2626 !important;   /* beats the JS name-hash inline colour */
  box-shadow:0 0 0 4px #0f172a, 0 0 0 6px rgba(220,38,38,.55);
}
html.light #profile-modal.emergency #profile-avatar{
  box-shadow:0 0 0 4px #fff, 0 0 0 6px rgba(220,38,38,.45);
}
#profile-modal.emergency #profile-avatar img{ height:5.5rem; width:5.5rem; }
#profile-modal.emergency #profile-name{ font-size:2.1rem; font-weight:700; line-height:1.1; letter-spacing:-.01em; }
#profile-modal.emergency #profile-class{ font-size:1rem; margin-top:.3rem; }
#profile-modal.emergency #profile-header .pill{ height:24px; font-size:12px; border-radius:.55rem; padding:0 10px; }
#profile-modal.emergency #btn-close-profile{
  font-size:1.4rem; padding:.55rem .95rem;
  border-radius:.9rem; border:1px solid rgba(148,163,184,.3);
  background:rgba(15,23,42,.55);
}
html.light #profile-modal.emergency #btn-close-profile{
  background:#fff; border-color:#e2e8f0; box-shadow:0 2px 8px rgba(15,23,42,.08);
}
#profile-modal.emergency #profile-body{
  max-height:none; flex:1;
  width:100%;
  /* centre the content with padding (not max-width+margin) so the scrollbar
     sits at the true screen edge instead of floating mid-screen */
  padding:1.25rem max(1.5rem, calc((100% - 82rem) / 2)) 2rem;
  overscroll-behavior:contain;   /* stop scroll chaining to the page behind */
}
#profile-modal.emergency #profile-body::-webkit-scrollbar{ width:10px; }
#profile-modal.emergency #profile-body::-webkit-scrollbar-track{ background:transparent; }
#profile-modal.emergency #profile-body::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.35); border-radius:5px; }
html.light #profile-modal.emergency #profile-body::-webkit-scrollbar-thumb{ background:rgba(15,23,42,.25); }
/* floating cards */
#profile-modal.emergency #profile-careplan-section,
#profile-modal.emergency #profile-guardians-section,
#profile-modal.emergency #profile-welfare-section{
  background:#0f172a; border:1px solid rgba(148,163,184,.15);
  border-radius:1.1rem; padding:1.25rem 1.4rem;
  box-shadow:0 10px 28px -18px rgba(2,6,23,.7);
}
html.light #profile-modal.emergency #profile-careplan-section,
html.light #profile-modal.emergency #profile-guardians-section,
html.light #profile-modal.emergency #profile-welfare-section{
  background:#fff; border-color:#e2e8f0;
  box-shadow:0 10px 25px -18px rgba(15,23,42,.18);
}
/* card titles: big, bold, title case (the tiny uppercase eyebrows read as
   admin chrome, not an emergency sheet) */
#profile-modal.emergency #profile-body h3{
  font-size:1.05rem; font-weight:700; letter-spacing:0; text-transform:none;
  color:#f1f5f9; margin-bottom:1rem; gap:.6rem;
}
html.light #profile-modal.emergency #profile-body h3{ color:#0f172a; }
#profile-modal.emergency #profile-body h3 svg{ height:1.25rem; width:1.25rem; color:#dc2626; }
/* plan card header row gets a hairline divider; its h3 sits inside that row */
#profile-modal.emergency #profile-careplan-section > .flex{
  border-bottom:1px solid rgba(148,163,184,.15);
  padding-bottom:.9rem; margin-bottom:1.1rem;
}
html.light #profile-modal.emergency #profile-careplan-section > .flex{ border-bottom-color:#eef2f7; }
#profile-modal.emergency #profile-careplan-section h3{ margin-bottom:0; }
#profile-modal.emergency #btn-edit-careplan{
  border:1px solid rgba(148,163,184,.3); border-radius:.7rem;
  padding:.45rem .95rem; font-size:.85rem; font-weight:600; color:#e2e8f0;
}
html.light #profile-modal.emergency #btn-edit-careplan{
  background:#fff; color:#0f172a; border-color:#e2e8f0;
  box-shadow:0 1px 3px rgba(15,23,42,.08);
}
#profile-modal.emergency #profile-welfare,
#profile-modal.emergency #profile-careplan,
#profile-modal.emergency #profile-guardians{ font-size:.95rem; line-height:1.6; }
/* IHCP step number circles scale up with the text */
#profile-modal.emergency #profile-welfare .rounded-full{
  height:1.5rem; width:1.5rem; font-size:.8rem;
}
/* roomier welfare panels + red labels per the mock */
#profile-modal.emergency #profile-welfare .rounded-lg{ padding:1rem 1.25rem; border-radius:.9rem; }
#profile-modal.emergency #profile-welfare .text-amber-300{ color:#f87171; }
html.light #profile-modal.emergency #profile-welfare .text-amber-300{ color:#dc2626; }
/* scaled-up care plan cards */
#profile-modal.emergency .cp-tile{ height:3.5rem; width:3.5rem; border-radius:.9rem; }
#profile-modal.emergency .cp-summary,
#profile-modal.emergency .cp-scen{ padding:1.1rem 1.25rem; gap:1.1rem; }
#profile-modal.emergency .cp-scen-title{ font-size:1.05rem; }
/* Triage layout on wide screens: DO (plan) beside CALL (guardians + welfare).
   Markup wrappers keep this deterministic no matter which sections hide. */
@media (min-width: 1024px){
  #profile-modal.emergency #profile-body{ display:flex; align-items:flex-start; gap:1.5rem; }
  #profile-modal.emergency #profile-main-col{ flex:1.55; min-width:0; margin:0; }
  #profile-modal.emergency #profile-side-col{
    flex:1; min-width:0; position:sticky; top:0;
    margin:0 !important;   /* space-y-5 margin does not apply in row layout */
  }
}
/* Phone layout: the desktop header row does not survive 390px (close button
   lands on the name, chips stack in a squeezed column). Smaller avatar, the
   close button pinned to the card corner, tighter card + tile sizing. */
@media (max-width: 639px){
  #profile-modal.emergency #profile-header{
    margin:1rem 1rem 0; padding:1.1rem; gap:.9rem; position:relative;
  }
  #profile-modal.emergency #profile-avatar{ height:4rem; width:4rem; font-size:1.4rem; }
  #profile-modal.emergency #profile-avatar img{ height:4rem; width:4rem; }
  #profile-modal.emergency #profile-name{ font-size:1.45rem; padding-right:2.5rem; }
  #profile-modal.emergency #profile-class{ font-size:.9rem; }
  #profile-modal.emergency #btn-close-profile{
    position:absolute; top:.75rem; right:.75rem;
    font-size:1.1rem; padding:.4rem .7rem;
  }
  #profile-modal.emergency #profile-body{ padding-left:1rem; padding-right:1rem; }
  #profile-modal.emergency #profile-careplan-section,
  #profile-modal.emergency #profile-guardians-section,
  #profile-modal.emergency #profile-welfare-section{ padding:1rem 1.1rem; }
  #profile-modal.emergency .cp-tile{ height:2.6rem; width:2.6rem; border-radius:.7rem; }
  #profile-modal.emergency .cp-summary,
  #profile-modal.emergency .cp-scen{ padding:.9rem 1rem; gap:.8rem; }
}

/* Guardian cards: the CALL column - bigger names, full-width tap targets */
#profile-modal.emergency #profile-guardians > div{ padding:1rem 1.1rem; border-radius:1rem; }
html.light #profile-modal.emergency #profile-guardians > div{
  background:#fff; border-color:#e2e8f0; box-shadow:0 4px 12px -8px rgba(15,23,42,.15);
}
#profile-modal.emergency #profile-guardians .font-semibold{ font-size:1.05rem; }
#profile-modal.emergency #profile-guardians a[href^="tel:"]{
  background:#059669; border-color:#10b981; color:#fff;
  width:100%;
  padding:.75rem 1.1rem; font-size:1rem; font-weight:600; border-radius:.8rem;
}
#profile-modal.emergency #profile-guardians a[href^="tel:"]:hover{ background:#047857; }
#profile-modal.emergency #profile-guardians a[href^="tel:"] svg{ height:1.1rem; width:1.1rem; color:#fff; }
#profile-modal.emergency #profile-guardians a[href^="tel:"] .text-\[10px\]{ color:#a7f3d0; font-size:.75rem; }
#profile-modal.emergency #profile-guardians a[href^="mailto:"]{ width:100%; padding:.6rem 1rem; font-size:.9rem; }

/* ---- Wave 1 additions (Red Zone badges, message tag chips, trip role pills) ----
   Light-mode remaps for the sky / violet chip families + the deep-red Red Zone
   chrome, matching the contrast approach of the earlier badge remaps above. */
html.light .bg-sky-900\/40    { background-color: #e0f2fe; }   /* sky-100 tint */
html.light .text-sky-200      { color: #0369a1; }              /* sky-700 on tint */
html.light .border-sky-700\/60{ border-color: #7dd3fc; }       /* sky-300 */
html.light .bg-violet-900\/40 { background-color: #ede9fe; }   /* violet-100 tint */
html.light .text-violet-200   { color: #6d28d9; }              /* violet-700 on tint */
html.light .border-violet-700\/60 { border-color: #c4b5fd; }   /* violet-300 */
html.light .bg-red-900\/50    { background-color: #fee2e2; }   /* IHP + topic chips */
html.light .bg-red-950\/40    { background-color: #fecaca; }   /* Red Zone table head */
html.light .text-red-200\/90  { color: #7f1d1d; }              /* head text: red-900 */
html.light .border-red-900\/60{ border-color: #fca5a5; }       /* Red Zone card border */
html.light .hover\:bg-red-950\/20:hover { background-color: #fef2f2; }
html.light .bg-red-900\/30    { background-color: #fee2e2; }   /* Red Zone nav hover base */
html.light .hover\:bg-red-900\/30:hover { background-color: #fee2e2; }
html.light .bg-slate-700\/70  { background-color: #e2e8f0; }   /* child tag chip */

/* ---- Scanner action menu (scan.html) ----
   Explicit colours for BOTH themes (never remappable utilities on new UI).
   The menu buttons keep Tailwind's .hidden role-gating, so the flex layout
   lives on an INNER span, not the button itself. */
.scan-brand{ display:flex; align-items:center; gap:.45rem; font-size:1.05rem; font-weight:800; letter-spacing:.02em; }
.scan-brand svg{ height:1.5rem; width:1.5rem; color:#dc2626; }
.scan-brand .b1{ color:#f1f5f9; }
.scan-brand .b2{ color:#64748b; font-weight:600; letter-spacing:.16em; font-size:.85rem; }
html.light .scan-brand .b1{ color:#0f172a; }
.scan-school-line{ display:block; height:3px; width:2.5rem; border-radius:999px; background:#dc2626; margin:.3rem auto 0; }
.scan-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  height:2.3rem; width:2.3rem; border-radius:999px;
  background:#dc2626; color:#fff; font-weight:700; font-size:.85rem;
}
.sm-card{
  background:#0f172a; border:1px solid rgba(148,163,184,.15);
  border-radius:1.25rem; padding:1.5rem;
  box-shadow:0 10px 28px -18px rgba(2,6,23,.7);
}
html.light .sm-card{ background:#fff; border-color:#e2e8f0; box-shadow:0 10px 30px -18px rgba(15,23,42,.18); }
.sm-head{ font-size:1.35rem; font-weight:800; color:#f1f5f9; letter-spacing:-.01em; }
html.light .sm-head{ color:#0f172a; }
.sm-sub{ font-size:.9rem; color:#94a3b8; margin-top:.15rem; }
html.light .sm-sub{ color:#64748b; }
.sm-head-sm{ font-size:1.1rem; font-weight:700; color:#f1f5f9; letter-spacing:-.01em; }
html.light .sm-head-sm{ color:#0f172a; }
/* active Face Scan / Manual Search tab (JS toggles this + text-white) */
.scan-tab-active{ background:#b91c1c; }
/* login brand pane (scan.html) */
.sl-pane{
  background:
    radial-gradient(circle at 85% 12%, rgba(255,255,255,.09), transparent 40%),
    radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px),
    linear-gradient(160deg, #7f1d1d, #450a0a 70%, #5f1616);
  background-size:auto, 22px 22px, auto;
  color:#fff; min-height:576px;
}
.sl-brand{ display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.15rem; letter-spacing:.02em; }
.sl-brand svg{ height:1.75rem; width:1.75rem; color:#fca5a5; }
.sl-brand span{ color:#fecaca; font-weight:600; letter-spacing:.16em; font-size:.9rem; }
.sl-big{ font-size:1.9rem; font-weight:800; line-height:1.15; letter-spacing:-.01em; max-width:20ch; }
.sl-sub{ margin-top:.9rem; color:rgba(255,255,255,.90); font-size:.95rem; line-height:1.55; max-width:40ch; }
.sl-foot{ display:flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.72); font-size:.85rem; }
.sl-foot svg{ height:1.1rem; width:1.1rem; color:#fca5a5; }
.sl-mark{ height:4rem; width:4rem; border-radius:1rem; }
.sm-tile{
  display:flex; align-items:center; justify-content:center;
  height:3.25rem; width:3.25rem; border-radius:.9rem; flex:0 0 auto;
  background:rgba(239,68,68,.13); color:#f87171;
}
html.light .sm-tile{ background:#fee2e2; color:#b91c1c; }
.sm-tile svg{ height:55%; width:55%; }
.sm-row{
  width:100%; text-align:left; border-radius:1rem;
  border:1px solid rgba(148,163,184,.18); background:#111c30;
  padding:1.05rem 1.2rem;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.sm-row:hover{ transform:translateY(-1px); background:#16233b; }
html.light .sm-row{ background:#fff; border-color:#e2e8f0; box-shadow:0 2px 8px -4px rgba(15,23,42,.08); }
html.light .sm-row:hover{ background:#fff; box-shadow:0 10px 22px -12px rgba(15,23,42,.22); }
.sm-row-inner{ display:flex; align-items:center; gap:1rem; }
.sm-row-title{ display:block; font-weight:700; font-size:1rem; color:#f1f5f9; }
html.light .sm-row-title{ color:#0f172a; }
.sm-row-desc{ display:block; font-size:.85rem; color:#94a3b8; margin-top:.15rem; }
html.light .sm-row-desc{ color:#64748b; }
.sm-chev{ margin-left:auto; height:1.25rem; width:1.25rem; flex:0 0 auto; color:#64748b; }
/* primary action: solid teal, elevated (same in both themes) */
.sm-row-primary{
  background:linear-gradient(135deg,#dc2626,#991b1b);
  border-color:#ef4444;
  box-shadow:0 14px 30px -14px rgba(220,38,38,.55);
}
.sm-row-primary:hover{ background:linear-gradient(135deg,#991b1b,#7f1d1d); }
html.light .sm-row-primary{ background:linear-gradient(135deg,#7f1d1d,#450a0a); border-color:rgba(153,27,27,.5); box-shadow:0 14px 30px -14px rgba(127,29,29,.4); }
html.light .sm-row-primary:hover{ background:linear-gradient(135deg,#991b1b,#7f1d1d); }
/* html.light variants repeated: the theme's html.light text rules carry an
   extra specificity point and would otherwise paint dark text on the maroon */
.sm-row-primary .sm-row-title,
html.light .sm-row-primary .sm-row-title{ color:#fff; }
.sm-row-primary .sm-row-desc,
html.light .sm-row-primary .sm-row-desc{ color:rgba(255,255,255,.95); }
.sm-row-primary .sm-tile,
html.light .sm-row-primary .sm-tile{ background:rgba(255,255,255,.20); color:#fff; }
.sm-row-primary .sm-chev,
html.light .sm-row-primary .sm-chev{ color:rgba(255,255,255,.85); }
.sm-foot{
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:1.25rem 0 .5rem; font-size:.85rem; color:#64748b;
}
.sm-foot svg{ height:1.4rem; width:1.4rem; color:#dc2626; opacity:.85; }
/* red variant of the scan toast (showError) */
#toast.toast-error{ border-color:rgba(239,68,68,.7); background:rgba(127,29,29,.6); color:#fecaca; }
html.light #toast.toast-error{ border-color:#fca5a5; background:#fee2e2; color:#b91c1c; }
/* phones: tighter action rows so titles keep to two lines */
@media (max-width: 479px){
  .sm-tile{ height:2.75rem; width:2.75rem; border-radius:.75rem; }
  .sm-row{ padding:.9rem 1rem; }
  .sm-row-inner{ gap:.8rem; }
  .sm-row-title{ font-size:.95rem; }
  .sm-row-desc{ font-size:.8rem; }
  .sm-head{ font-size:1.2rem; }
}
/* subtle canvas: two teal glows + a dot grid behind the kiosk content */
#view-main{ position:relative; }
#view-main::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 6% 15%, rgba(239,68,68,.06), transparent 30%),
    radial-gradient(circle at 94% 85%, rgba(239,68,68,.05), transparent 32%),
    radial-gradient(rgba(148,163,184,.10) 1px, transparent 1.4px);
  background-size:auto, auto, 24px 24px;
}
html.light #view-main::before{
  background:
    radial-gradient(circle at 6% 15%, rgba(220,38,38,.06), transparent 30%),
    radial-gradient(circle at 94% 85%, rgba(220,38,38,.05), transparent 32%),
    radial-gradient(rgba(15,23,42,.05) 1px, transparent 1.4px);
  background-size:auto, auto, 24px 24px;
}
/* give the action menu a little more room than the camera flows */
#view-main main:has(#panel-menu:not(.hidden)){ max-width:44rem; }

/* ============================================================
   MESSAGES (school-side parent chat) - dedicated classes, explicit both
   themes (never remappable Tailwind colour utilities on new UI).
   ============================================================ */
/* avatars */
.msg-av{
  display:inline-flex; align-items:center; justify-content:center;
  height:2.5rem; width:2.5rem; border-radius:999px; flex:0 0 auto;
  color:#fff; font-weight:700; font-size:.85rem; line-height:1;
}
.msg-av-sm{ height:1.9rem; width:1.9rem; font-size:.7rem; }
.msg-av-hd{ height:2rem; width:2rem; font-size:.75rem; }

/* thread rows */
.msg-thread{
  width:100%; display:flex; align-items:center; gap:.75rem;
  padding:.7rem .85rem; text-align:left; border:0; background:transparent;
  border-bottom:1px solid rgba(148,163,184,.12); cursor:pointer;
  transition:background .12s ease;
}
.msg-thread:hover{ background:rgba(148,163,184,.08); }
html.light .msg-thread{ border-bottom-color:#eef2f7; }
html.light .msg-thread:hover{ background:#f1f5f9; }
.msg-thread-active{ background:rgba(220,38,38,.10); }
.msg-thread-active:hover{ background:rgba(220,38,38,.14); }
html.light .msg-thread-active{ background:#fff1f1; }
html.light .msg-thread-active:hover{ background:#ffe7e7; }
.msg-thread-main{ flex:1; min-width:0; }
.msg-thread-top{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.msg-thread-name{ font-size:.9rem; color:#e2e8f0; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html.light .msg-thread-name{ color:#0f172a; }
.msg-thread-name.msg-unread{ font-weight:700; color:#fff; }
html.light .msg-thread-name.msg-unread{ color:#0f172a; }
.msg-thread-time{ font-size:.7rem; color:#64748b; flex:0 0 auto; }
.msg-thread-bottom{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.15rem; }
.msg-thread-preview{ font-size:.78rem; color:#94a3b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
html.light .msg-thread-preview{ color:#64748b; }
.msg-badge{
  flex:0 0 auto; min-width:1.15rem; height:1.15rem; padding:0 .35rem;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:#dc2626; color:#fff; font-size:.68rem; font-weight:700;
}

/* conversation bubbles */
.msg-row{ display:flex; align-items:flex-end; gap:.5rem; margin:.5rem 0; }
.msg-row.msg-out{ justify-content:flex-end; }
.msg-bubble{ max-width:78%; border-radius:1.1rem; padding:.55rem .8rem; }
.msg-bubble-in{ background:#1e293b; color:#e2e8f0; border-bottom-left-radius:.35rem; }
html.light .msg-bubble-in{ background:#f1f5f9; color:#0f172a; }
.msg-bubble-out{ background:linear-gradient(135deg,#b91c1c,#7f1d1d); color:#fff; border-bottom-right-radius:.35rem; }
.msg-meta{ font-size:.68rem; opacity:.72; margin-bottom:.15rem; display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; }
.msg-bubble-out .msg-meta{ opacity:.85; }
.msg-text{ font-size:.9rem; line-height:1.4; white-space:pre-wrap; word-break:break-word; }
.msg-tg{
  display:inline-flex; align-items:center; gap:.15rem;
  background:rgba(14,165,233,.18); color:#7dd3fc; border-radius:.4rem;
  padding:0 .3rem; font-size:.62rem; font-weight:600;
}
.msg-bubble-out .msg-tg{ background:rgba(255,255,255,.20); color:#fff; }
html.light .msg-bubble-in .msg-tg{ background:#e0f2fe; color:#0369a1; }

/* date separators */
.msg-datesep{ display:flex; align-items:center; justify-content:center; margin:.9rem 0 .5rem; }
.msg-datesep span{
  font-size:.68rem; font-weight:600; color:#94a3b8;
  background:rgba(148,163,184,.14); border-radius:999px; padding:.15rem .7rem;
}
html.light .msg-datesep span{ color:#64748b; background:#eef2f7; }

/* empty states */
.msg-empty-list{ padding:1.5rem 1rem; text-align:center; font-size:.8rem; color:#94a3b8; }
.msg-empty-list span{ font-size:.72rem; color:#64748b; }
html.light .msg-empty-list{ color:#64748b; }
.msg-empty-conv{ padding:2rem 1rem; text-align:center; font-size:.8rem; color:#94a3b8; }
html.light .msg-empty-conv{ color:#64748b; }

/* compose send button */
.msg-send-btn{
  display:inline-flex; align-items:center; gap:.4rem; flex:0 0 auto;
  background:#dc2626; color:#fff; border-radius:.75rem; padding:0 1rem;
  font-size:.85rem; font-weight:600;
}
.msg-send-btn:hover{ background:#b91c1c; }
.msg-send-btn:disabled{ opacity:.4; }
.msg-send-btn svg{ height:1.05rem; width:1.05rem; }

/* bound the panels so the conversation + list scroll INSIDE them instead of
   growing the page (min-h-[50vh] alone let tall threads slide under the sticky
   header). The higher-specificity selector beats the Tailwind min-h utility. */
@media (min-width: 768px){
  [data-view="messages"] .msg-list-col,
  [data-view="messages"] .msg-conv-col{ height:72vh; min-height:0; }
}
@media (max-width: 767px){
  [data-view="messages"].msg-thread-open .msg-conv-col{ height:74vh; min-height:0; }
}

/* mobile back button - hidden on desktop, shown when a thread is open on phone */
.msg-back-btn{ display:none; align-items:center; justify-content:center; height:2rem; width:2rem; border-radius:.6rem; color:#94a3b8; }
.msg-back-btn:hover{ background:rgba(148,163,184,.12); }
.msg-back-btn svg{ height:1.25rem; width:1.25rem; }
@media (max-width: 767px){
  /* app-style: on phones show ONE panel at a time */
  [data-view="messages"] .msg-conv-col{ display:none; }
  [data-view="messages"].msg-thread-open .msg-list-col{ display:none; }
  [data-view="messages"].msg-thread-open .msg-conv-col{ display:flex; }
  [data-view="messages"].msg-thread-open .msg-back-btn{ display:inline-flex; }
  .msg-bubble{ max-width:85%; }
}

/* ============================================================
   SAFEGUARDING case detail - reads as an internal case record, NOT a chat
   (reporting is one-way/anonymous). Dedicated classes, explicit both themes.
   ============================================================ */
.wb-report-body{
  position:relative;
  border-radius:.9rem; padding:.9rem 1rem .9rem 2.4rem; margin-bottom:.9rem;
  background:#1e293b; color:#f1f5f9; font-size:.92rem; line-height:1.5;
  white-space:pre-wrap; word-break:break-word;
  border:1px solid rgba(148,163,184,.14);
  border-left:3px solid #dc2626;
}
html.light .wb-report-body{ background:#fff; color:#0f172a; border-color:#e2e8f0; border-left-color:#dc2626; }
.sg-quotemark{
  position:absolute; left:.8rem; top:.3rem;
  font-family:Georgia,'Times New Roman',serif; font-size:2rem; line-height:1;
  color:#ef4444; font-weight:700;
}
html.light .sg-quotemark{ color:#dc2626; }
.wb-oneway{
  display:flex; gap:.5rem; align-items:flex-start;
  border-radius:.75rem; padding:.6rem .8rem; margin-bottom:1rem;
  background:rgba(180,83,9,.14); border:1px solid rgba(217,119,6,.4);
  color:#fcd34d; font-size:.78rem; line-height:1.4;
}
.wb-oneway svg{ flex:0 0 auto; margin-top:.1rem; }
.wb-oneway b{ color:#fde68a; }
html.light .wb-oneway{ background:#fffbeb; border-color:#fde68a; color:#92400e; }
html.light .wb-oneway b{ color:#78350f; }
.wb-notes-title{
  font-size:.8rem; font-weight:700; color:#e2e8f0; margin-bottom:.6rem;
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
}
.wb-notes-title span{ font-size:.68rem; font-weight:500; color:#64748b; }
html.light .wb-notes-title{ color:#0f172a; }
.wb-notes-log{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:.75rem; max-height:15rem; overflow-y:auto; }
.wb-note{
  border-radius:.7rem; padding:.55rem .75rem;
  background:rgba(148,163,184,.10); border:1px solid rgba(148,163,184,.16);
}
html.light .wb-note{ background:#f1f5f9; border-color:#e2e8f0; }
.wb-note-meta{ display:flex; align-items:center; gap:.4rem; font-size:.66rem; color:#94a3b8; margin-bottom:.2rem; }
.wb-note-dot{ width:.45rem; height:.45rem; border-radius:50%; background:#dc2626; }
.wb-note-body{ font-size:.85rem; color:#e2e8f0; line-height:1.4; white-space:pre-wrap; word-break:break-word; }
html.light .wb-note-body{ color:#0f172a; }
.wb-empty{ font-size:.8rem; color:#94a3b8; padding:.5rem 0; }
html.light .wb-empty{ color:#64748b; }
.wb-note-add{ display:flex; gap:.5rem; margin-bottom:1rem; }
.wb-note-input{
  flex:1; min-width:0; border-radius:.7rem; padding:.55rem .8rem; font-size:.85rem;
  background:#0f172a; border:1px solid rgba(148,163,184,.25); color:#f1f5f9;
}
.wb-note-input::placeholder{ color:#64748b; }
html.light .wb-note-input{ background:#fff; border-color:#cbd5e1; color:#0f172a; }
.wb-note-input:disabled{ opacity:.5; }
.wb-note-btn{ flex:0 0 auto; border-radius:.7rem; padding:0 1rem; font-size:.82rem; font-weight:600; background:#dc2626; color:#fff; }
.wb-note-btn:hover{ background:#b91c1c; }
.wb-note-btn:disabled{ opacity:.4; }
.wb-status-row{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; border-top:1px solid rgba(148,163,184,.16); padding-top:.75rem; }
html.light .wb-status-row{ border-top-color:#e2e8f0; }
.wb-status-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  border-radius:.65rem; padding:.42rem .9rem; font-size:.74rem; font-weight:600;
  border:1px solid rgba(148,163,184,.3); color:#e2e8f0; background:transparent;
}
html.light .wb-status-btn{ color:#334155; border-color:#cbd5e1; }
.wb-status-btn.sgs-reviewing{ color:#fbbf24; }
.wb-status-btn.sgs-escalated{ color:#a78bfa; }
.wb-status-btn.sgs-closed{ color:#34d399; }
.wb-status-btn.sgs-reviewing:hover{ background:rgba(245,158,11,.10); }
.wb-status-btn.sgs-escalated:hover{ background:rgba(139,92,246,.10); }
.wb-status-btn.sgs-closed:hover{ background:rgba(16,185,129,.10); }
html.light .wb-status-btn.sgs-reviewing{ color:#b45309; }
html.light .wb-status-btn.sgs-escalated{ color:#6d28d9; }
html.light .wb-status-btn.sgs-closed{ color:#047857; }
html.light .wb-status-btn.sgs-reviewing:hover{ background:#fef3c7; }
html.light .wb-status-btn.sgs-escalated:hover{ background:#ede9fe; }
html.light .wb-status-btn.sgs-closed:hover{ background:#d1fae5; }
.wb-status-current{ pointer-events:none; }
.wb-status-current.sgs-reviewing{ border-color:#f59e0b; background:rgba(245,158,11,.14); }
.wb-status-current.sgs-escalated{ border-color:#8b5cf6; background:rgba(139,92,246,.14); }
.wb-status-current.sgs-closed{ border-color:#10b981; background:rgba(16,185,129,.14); }
html.light .wb-status-current.sgs-reviewing{ border-color:#f59e0b; background:#fef3c7; }
html.light .wb-status-current.sgs-escalated{ border-color:#8b5cf6; background:#ede9fe; }
html.light .wb-status-current.sgs-closed{ border-color:#10b981; background:#d1fae5; }

/* ---- Incident detail: captured GPS row with map link ---- */
.im-loc{
  display:flex; align-items:center; gap:.35rem; margin-top:.35rem;
  font-size:.72rem; color:#94a3b8;
}
.im-loc svg{ flex:0 0 auto; color:#f87171; }
.im-loc a{ color:#f87171; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.im-loc a:hover{ color:#fca5a5; }
html.light .im-loc{ color:#64748b; }
html.light .im-loc svg{ color:#dc2626; }
html.light .im-loc a{ color:#dc2626; }
html.light .im-loc a:hover{ color:#b91c1c; }

/* ---- Safeguarding redesign (Kyle's mock 2026-07-22): two-pane master/detail.
   Dedicated sg-* classes, explicit values both themes (never raw Tailwind
   colour utilities here - the light remap layer won't cover new combos). ---- */
.sg-title-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.6rem; height:2.6rem; border-radius:.8rem; flex:0 0 auto; margin-top:.15rem;
  background:rgba(16,185,129,.14); color:#34d399;
}
html.light .sg-title-ico{ background:#d1fae5; color:#047857; }

.sg-btn-outline{
  display:inline-flex; align-items:center; gap:.45rem;
  border-radius:.75rem; padding:.55rem 1rem; font-size:.78rem; font-weight:600;
  border:1px solid rgba(148,163,184,.3); color:#e2e8f0; background:transparent;
}
.sg-btn-outline:hover{ background:rgba(148,163,184,.12); }
html.light .sg-btn-outline{ border-color:#cbd5e1; color:#334155; background:#fff; }
html.light .sg-btn-outline:hover{ background:#f1f5f9; }
.sg-btn-solid{
  display:inline-flex; align-items:center; gap:.45rem;
  border-radius:.75rem; padding:.55rem 1rem; font-size:.78rem; font-weight:700;
  background:#dc2626; color:#fff;
}
.sg-btn-solid:hover{ background:#b91c1c; }

.sg-layout{ display:grid; grid-template-columns:1fr; gap:1rem; align-items:start; }
@media (min-width:900px){ .sg-layout{ grid-template-columns:minmax(0,2fr) minmax(0,3fr); } }

.sg-list-col{
  border-radius:1rem; overflow:hidden; display:flex; flex-direction:column;
  background:rgba(15,23,42,.8); border:1px solid #1e293b;
}
html.light .sg-list-col{ background:#fff; border-color:#e2e8f0; }
.sg-detail-col{
  border-radius:1rem; padding:1.1rem 1.15rem;
  background:rgba(15,23,42,.8); border:1px solid #1e293b;
}
html.light .sg-detail-col{ background:#fff; border-color:#e2e8f0; }

.sg-list-tools{ display:flex; gap:.5rem; padding:.7rem; border-bottom:1px solid #1e293b; }
html.light .sg-list-tools{ border-bottom-color:#e2e8f0; }
.sg-select{
  flex:0 0 auto; border-radius:.7rem; padding:.45rem .6rem; font-size:.74rem;
  background:#0f172a; border:1px solid rgba(148,163,184,.25); color:#e2e8f0;
}
html.light .sg-select{ background:#fff; border-color:#cbd5e1; color:#0f172a; }
.sg-search{ position:relative; flex:1; min-width:0; }
.sg-search svg{ position:absolute; left:.65rem; top:50%; transform:translateY(-50%); color:#64748b; pointer-events:none; }
.sg-search input{
  width:100%; border-radius:.7rem; padding:.45rem .7rem .45rem 2rem; font-size:.76rem;
  background:#0f172a; border:1px solid rgba(148,163,184,.25); color:#f1f5f9;
}
.sg-search input::placeholder{ color:#64748b; }
html.light .sg-search input{ background:#fff; border-color:#cbd5e1; color:#0f172a; }

.sg-list{ flex:1; overflow-y:auto; max-height:62vh; }
.sg-list-hint{ padding:1rem .9rem; font-size:.76rem; color:#94a3b8; }
html.light .sg-list-hint{ color:#64748b; }
.sg-list-err{ padding:1rem .9rem; font-size:.76rem; color:#f87171; }
html.light .sg-list-err{ color:#b91c1c; }

.sg-item{
  display:flex; gap:.7rem; align-items:center; width:100%; text-align:left;
  padding:.7rem .8rem; border-bottom:1px solid rgba(30,41,59,.8);
  border-left:3px solid transparent;
}
.sg-item:hover{ background:rgba(148,163,184,.07); }
html.light .sg-item{ border-bottom-color:#f1f5f9; }
html.light .sg-item:hover{ background:#f8fafc; }
.sg-item-active{ border-left-color:#dc2626; background:rgba(220,38,38,.08); }
.sg-item-active:hover{ background:rgba(220,38,38,.11); }
html.light .sg-item-active{ background:#fef2f2; }
html.light .sg-item-active:hover{ background:#fee2e2; }

.sg-ico{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:2.35rem; height:2.35rem; border-radius:999px;
}
.sg-ico svg{ width:1.1rem; height:1.1rem; }
.sg-ico-lg{ width:2.9rem; height:2.9rem; border-radius:.9rem; }
.sg-ico-lg svg{ width:1.35rem; height:1.35rem; }
.sg-ico-new{ background:rgba(239,68,68,.15); color:#f87171; }
.sg-ico-reviewing{ background:rgba(245,158,11,.15); color:#fbbf24; }
.sg-ico-escalated{ background:rgba(139,92,246,.16); color:#a78bfa; }
.sg-ico-closed{ background:rgba(16,185,129,.15); color:#34d399; }
html.light .sg-ico-new{ background:#fee2e2; color:#dc2626; }
html.light .sg-ico-reviewing{ background:#fef3c7; color:#d97706; }
html.light .sg-ico-escalated{ background:#ede9fe; color:#7c3aed; }
html.light .sg-ico-closed{ background:#d1fae5; color:#059669; }

.sg-item-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.22rem; }
.sg-item-top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.sg-item-cat{ font-size:.82rem; font-weight:700; color:#f1f5f9; }
html.light .sg-item-cat{ color:#0f172a; }
.sg-item-sub{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.sg-item-ref{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.68rem; color:#64748b; }
.sg-item-when{ font-size:.66rem; color:#64748b; white-space:nowrap; }
.sg-item-when i{ font-style:normal; color:#475569; }

.sg-pager{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.65rem; border-top:1px solid #1e293b;
}
html.light .sg-pager{ border-top-color:#e2e8f0; }
.sg-pgbtn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2rem; height:2rem; border-radius:.6rem; font-size:.74rem; font-weight:600;
  border:1px solid rgba(148,163,184,.25); color:#cbd5e1; background:transparent;
}
.sg-pgbtn:hover{ background:rgba(148,163,184,.12); }
.sg-pgbtn:disabled{ opacity:.35; pointer-events:none; }
html.light .sg-pgbtn{ border-color:#e2e8f0; color:#475569; background:#fff; }
html.light .sg-pgbtn:hover{ background:#f1f5f9; }
.sg-pgbtn-cur{ background:#dc2626; border-color:#dc2626; color:#fff; pointer-events:none; }
html.light .sg-pgbtn-cur{ background:#dc2626; border-color:#dc2626; color:#fff; }
.sg-pgdot{ color:#64748b; font-size:.8rem; }

.sg-back{
  display:none; align-items:center; gap:.35rem; margin-bottom:.8rem;
  font-size:.78rem; font-weight:600; color:#cbd5e1;
}
html.light .sg-back{ color:#334155; }

.sg-detail-empty{ font-size:.8rem; color:#64748b; padding:.5rem 0; }

.sg-detail-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; margin-bottom:.5rem; flex-wrap:wrap; }
.sg-head-left{ display:flex; align-items:center; gap:.75rem; min-width:0; }
.sg-head-text{ display:flex; flex-direction:column; gap:.3rem; align-items:flex-start; }
.sg-head-title{ font-size:1.3rem; font-weight:800; color:#f1f5f9; line-height:1.1; }
html.light .sg-head-title{ color:#0f172a; }
.sg-head-ref{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem; color:#64748b; margin-top:.3rem; }

.sg-received{ font-size:.74rem; color:#94a3b8; margin-bottom:.8rem; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
html.light .sg-received{ color:#64748b; }
.sg-dotsep{ color:#475569; }
.sg-anon{ display:inline-flex; align-items:center; gap:.3rem; color:#34d399; font-weight:600; }
html.light .sg-anon{ color:#047857; }
.sg-contact{ color:#fbbf24; }
html.light .sg-contact{ color:#b45309; }
.sg-contact-val{ color:#e2e8f0; }
html.light .sg-contact-val{ color:#0f172a; }

.sg-notes-lock{ display:inline-flex; align-items:center; gap:.3rem; }
.sg-notes-empty{
  display:flex; gap:.6rem; align-items:flex-start;
  border-radius:.8rem; padding:.8rem .9rem;
  background:rgba(148,163,184,.08); border:1px solid rgba(148,163,184,.14);
  font-size:.78rem; color:#94a3b8; line-height:1.45;
}
html.light .sg-notes-empty{ background:#f8fafc; border-color:#e2e8f0; color:#475569; }
.sg-notes-empty-ico{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:1.9rem; height:1.9rem; border-radius:.55rem;
  background:rgba(16,185,129,.14); color:#34d399;
}
html.light .sg-notes-empty-ico{ background:#d1fae5; color:#047857; }

.sg-status-label{ font-size:.72rem; color:#94a3b8; }
html.light .sg-status-label{ color:#64748b; }
.sgs-ico{ display:inline-flex; }
.sgs-ico svg{ width:13px; height:13px; display:block; }

.sg-footnote{
  margin-top:.8rem; border-radius:.7rem; padding:.55rem .8rem;
  font-size:.72rem; background:rgba(139,92,246,.12); color:#c4b5fd;
}
html.light .sg-footnote{ background:#f5f3ff; color:#6d28d9; }

@media (max-width:899px){
  .sg-detail-col{ display:none; }
  .sg-layout.sg-open .sg-detail-col{ display:block; }
  .sg-layout.sg-open .sg-list-col{ display:none; }
  .sg-layout.sg-open .sg-back{ display:inline-flex; }
}

/* ---- Bell-panel Telegram connect footer (clean button, not a raw link) ---- */
.attn-tg{ display:flex; flex-direction:column; gap:.5rem; }
.attn-tg-lead{ font-size:.72rem; color:#94a3b8; line-height:1.4; display:flex; gap:.35rem; align-items:flex-start; }
.attn-tg-lead svg{ flex:0 0 auto; margin-top:.15rem; color:#38bdf8; }
.attn-tg-lead b{ color:#e2e8f0; }
html.light .attn-tg-lead{ color:#64748b; }
html.light .attn-tg-lead b{ color:#0f172a; }
.attn-tg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem; align-self:flex-start;
  background:#0ea5e9; color:#fff; border-radius:.6rem; padding:.4rem .8rem; font-size:.78rem; font-weight:600;
}
.attn-tg-btn:hover{ background:#0284c7; }
.attn-tg.linked{ flex-direction:row; align-items:center; gap:.5rem; flex-wrap:wrap; font-size:.72rem; color:#94a3b8; }
.attn-tg-badge{ display:inline-flex; align-items:center; gap:.3rem; background:rgba(14,165,233,.16); color:#7dd3fc; border-radius:.5rem; padding:.15rem .5rem; font-size:.7rem; font-weight:600; }
html.light .attn-tg.linked{ color:#64748b; }
html.light .attn-tg-badge{ background:#e0f2fe; color:#0369a1; }

/* ---- Brand logo variants: dark-bg lockup by default, light-bg lockup when
   the light theme is active (the dark variant's sub-word is white). ---- */
.logo-light { display: none; }
html.light .logo-dark { display: none; }
html.light .logo-light { display: block; }

/* Message tag chips live INSIDE colored chat bubbles (teal school bubble /
   slate parent bubble), so they keep fixed self-contained colors in BOTH
   themes rather than following the surface remaps. */
.msg-chip       { background: rgba(148,163,184,.28); color: #f8fafc; }
.msg-chip-topic { background: #b91c1c; color: #ffffff; }
.msg-bubble-out .msg-chip { background: rgba(255,255,255,.22); color:#fff; }
.msg-bubble-out .msg-chip-topic { background:#fff; color:#b91c1c; }
/* chips ride inside chat bubbles: readable, with a subtle icon dot */
.pill.msg-chip, .pill.msg-chip-topic { height: 18px; padding: 0 8px; font-size: 11px; font-weight:600; gap:4px; }
.pill.msg-chip::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.7; }

/* compose + filter dropdowns light up when a tag / filter is actually set,
   so it's obvious the tag is armed and the filter is active */
.msg-tag-on{ border-color:#dc2626 !important; box-shadow:0 0 0 1px rgba(220,38,38,.55); color:#fecaca; }
html.light .msg-tag-on{ color:#b91c1c; background:#fff1f1; }

/* Thread-list + generic row hovers used dark slate; keep them subtle on light. */
html.light .hover\:bg-slate-800\/60:hover { background-color: rgba(15,23,42,0.06); }
html.light .hover\:bg-slate-800:hover     { background-color: rgba(15,23,42,0.08); }

/* ---- Reports chart bars (validated per-mode fills; identity always carried
   by the row label / tooltip, never color alone) ---- */
.rep-bar       { background: #0d9488; }   /* trend + categories: single teal hue, passes both modes */
.rep-bar-crit  { background: #b91c1c; }
.rep-bar-high  { background: #ef4444; }
.rep-bar-med   { background: #d97706; }
.rep-bar-low   { background: #059669; }
.rep-bar-muted { background: #64748b; }
html.light .rep-bar-high  { background: #dc2626; }
html.light .rep-bar-muted { background: #94a3b8; }

/* ============================================================
   WHISTLEBLOW PAGE (body.wb-page)
   This page stores NOTHING on the reporter's device, so it never reads the
   saved theme; it follows prefers-color-scheme only. It also sits one step
   darker than the rest of the app (page=slate-950, card=slate-900, where the
   app uses 900/800), so the generic surface mapping above would render it
   flat (grey page + near-identical cards + white-on-white buttons).
   Remap the surfaces for this page's own scale.
   ============================================================ */
html.light body.wb-page                  { background-color: #f8fafc; }  /* page */
html.light .wb-page .bg-slate-900        { background-color: #ffffff; }  /* card */
html.light .wb-page .bg-slate-950        { background-color: #f8fafc; }  /* input well */
/* Secondary buttons (Check / Send) are bg-slate-800, which maps to white
   above and would vanish on a white card. Give them a visible surface. */
html.light .wb-page .bg-slate-800        { background-color: #e2e8f0; }
html.light .wb-page .hover\:bg-slate-700:hover { background-color: #cbd5e1; }
/* Reporter's own message bubble needs to read as distinct from the card. */
html.light .wb-page .bg-slate-700        { background-color: #e2e8f0; }