/* ============================================================
   Imagination Dashboard — shared UI layer
   ------------------------------------------------------------
   This is the FluxRate design language rendered in Imagination's
   own palette. Everything structural is borrowed from FluxRate:

     · an aurora ground (soft vertical gradient + two large
       blurred orbs) sitting behind translucent glass surfaces
     · Inter throughout, on FluxRate's scale — 30px/-.04em page
       titles, 9-10px 800-weight uppercase micro-labels, 13-14px
       body, 10.5px tabular-numeral tables
     · 15-17px card radii, 999px pill controls, the two-part
       --shadow, and the short .14-.15s transitions
     · sticky translucent chrome with a tinted "active" pill

   Only the hues change: FluxRate's blue #2454F4 becomes
   Imagination coral #F67160, and aqua #40E1D1 carries the
   secondary accents. Brand tokens below are byte-identical to
   the ones the pages already shipped with.

   Linked LAST in every page's <head>, after the page's own
   <style>, so the shared layer wins on the primitives without
   any page needing its markup touched.
   ============================================================ */

/* ---------- 1. Tokens ---------- */

:root {
  /* Imagination brand — unchanged. */
  --brand:      #F67160;
  --brand-dark: #D9543F;
  --accent:     #40E1D1;
  --accent-dark:#1FA89C;
  --navy:       #0B2A28;
  --ink:        #15191C;

  /* FluxRate's structural tokens, retinted coral/warm. */
  --brand-soft: #FFF1EE;   /* FluxRate --accent-soft #eef4ff */
  --brand-tint: rgba(246,113,96,.11);
  --accent-soft:#EDFCFA;
  --muted:      #64748B;   /* secondary text */
  --faint:      #94A3B8;   /* micro-labels, axes */
  --line:       #EBE6E3;   /* warm hairline (FluxRate --line #e5eaf2) */
  --line-soft:  #F3EFEC;
  --surface:    rgba(255,255,255,.88);
  --surface-solid: #FFFFFF;
  --bg:         #FBF7F5;
  --card:       rgba(255,255,255,.88);
  --border:     #EBE6E3;
  --shadow:     0 16px 42px rgba(15,23,42,.08), 0 2px 7px rgba(15,23,42,.04);
  --shadow-sm:  0 6px 22px rgba(15,23,42,.055);
  --shadow-lift:0 12px 30px rgba(246,113,96,.16);
  /* Semantics. FluxRate's --good is a neutral green; Imagination already
     owns a positive colour — the aqua at full strength — so that carries
     it here. --bad and --warn keep FluxRate's values, which happen to be
     the exact rose/amber index.html was already using via Tailwind. */
  --good:       #1FA89C;
  --bad:        #E11D48;
  --warn:       #D97706;

  --radius-card: 17px;
  --radius-tile: 15px;
  --radius-ctl:  10px;
}

/* ---------- 2. Base ---------- */

html, body { min-height: 100%; }

body {
  background: transparent !important;
  color: var(--ink);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* The aurora ground. FluxRate paints this with a dedicated
   .page-bg element; none of these pages have one, so it goes on
   body's own pseudo-elements instead — fixed, behind everything,
   and identical on all four pages. */
body::before,
body::after { content: ""; position: fixed; z-index: -2; pointer-events: none; }

body::before {
  inset: 0;
  background: linear-gradient(180deg, #FFFFFF 0%, #FDF8F6 58%, #FBF4F1 100%);
}

/* Two blurred orbs — coral top-left, aqua bottom-right — where
   FluxRate uses cyan and violet. */
body::after {
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(620px 620px at 22% -14%, rgba(246,113,96,.16), transparent 58%),
    radial-gradient(700px 700px at 98% 112%, rgba(64,225,209,.15), transparent 58%);
  filter: blur(24px);
}

/* Numbers line up in columns across every table and KPI. */
table, .kpi-value, .stat-card, .exec-card-value, .exec-metric-value,
.tbl-row, .data-table { font-variant-numeric: tabular-nums; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(15,23,42,.14); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.24); }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- 3. Typography ---------- */

/* Lilita One was the display face; FluxRate sets titles in Inter
   at heavy weight and tight negative tracking, so .font-display
   and the page's other display hooks are remapped rather than
   removed — no markup changes needed. */
.font-display,
.sec-title,
.greeting-title,
.page-title,
.pin-title,
.stat-value,
.exec-card-value,
.mini-popup .mp-value,
h1, h2, h3 {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif !important;
  font-weight: 800;
  letter-spacing: -.035em;
}

h1 { letter-spacing: -.04em; line-height: 1.1; }

/* FluxRate's eyebrow: 10px, 800, .12em, uppercase, accent-coloured. */
.eyebrow,
.nav-label,
.field-label,
.kpi-label,
.tbl-th,
.exec-card-title,
.exec-metric-label,
.notice-tag,
.greeting-date {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.eyebrow,
.greeting-date { color: var(--brand); font-size: 10px; letter-spacing: .12em; }

/* FluxRate's page head: coral eyebrow, 30px title at -.04em, muted
   one-line sub. .greeting-title and .sec-title are the equivalent
   hooks on these pages. */
.greeting-title,
.page-title { font-size: 30px !important; letter-spacing: -.04em; line-height: 1.1; }
.sec-title { font-size: 15px !important; letter-spacing: -.02em; }
.page-eyebrow { font-size: 10px !important; letter-spacing: .12em !important; color: var(--brand) !important; }
.stat-value { font-size: 23px !important; letter-spacing: -.035em; }

/* Search narrows to FluxRate's .search rather than filling the bar. */
.search-wrap, .topbar-search-wrap { flex: 0 1 340px !important; }
.search, .topbar-search { height: 36px; border-radius: 9px; font-size: 12px; }

/* Segmented tab strips (admin's section switcher, the marketing
   channel toggle) take the nav pill's tinted-active treatment rather
   than a solid navy chip. */
.admin-tab-bar {
  background: rgba(15,23,42,.045) !important;
  border: 1px solid rgba(15,23,42,.07) !important;
  border-radius: 11px !important;
}
.admin-tab, .mkt-switch-btn {
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  color: var(--muted) !important;
  transition: background .14s, color .14s;
}
.admin-tab:hover, .mkt-switch-btn:hover { background: rgba(15,23,42,.05) !important; box-shadow: none !important; color: var(--ink) !important; }
.admin-tab.active, .mkt-switch-btn.active {
  background: var(--brand-tint) !important;
  color: var(--brand-dark) !important;
  font-weight: 700 !important;
  box-shadow: inset 0 0 0 1px rgba(246,113,96,.14) !important;
}
.admin-tab:active, .mkt-switch-btn:active { transform: none !important; }
html.dark .admin-tab-bar { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; }
html.dark .admin-tab.active, html.dark .mkt-switch-btn.active { color: #FFA391 !important; }

/* ---------- 4. Surfaces ---------- */

/* Every panel becomes glass: translucent white over the aurora,
   a near-white hairline rather than a grey one, and FluxRate's
   two-part shadow. */
.card,
.stat-card,
.action-card,
.exec-card,
.notice-card,
.sub-card,
.sub-tbl,
.setting-card,
.stat-pill,
.env-card,
.toolbar {
  background: var(--surface) !important;
  border: 1px solid rgba(255,255,255,.96) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.stat-card, .exec-card, .notice-card, .stat-pill {
  border-radius: var(--radius-tile) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* Hover lift is FluxRate's restrained -2px, not a -3px pop. */
.action-card:hover,
.exec-card:hover {
  transform: translateY(-2px);
  border-color: rgba(246,113,96,.42) !important;
  box-shadow: var(--shadow-lift) !important;
}

.action-card.primary {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
}
.action-card.primary:hover { box-shadow: 0 12px 30px rgba(11,42,40,.28) !important; }

.notice-card:hover { border-color: rgba(246,113,96,.3) !important; }

/* ---------- 5. Chrome: sidebar, topbar, header ---------- */

/* The sidebar keeps its position but takes the nav bar's glass
   treatment — translucent, blurred, hairline edge. */
.sidebar {
  background: rgba(255,255,255,.84) !important;
  border-right: 1px solid rgba(15,23,42,.06) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 1px 0 24px rgba(15,23,42,.05);
}
.main { background: transparent !important; }

/* Nav items match .nav-link / .suite-subnav-link: small, medium
   weight, faint by default, tinted pill when active. */
.nav-item {
  font-size: 12.5px;
  font-weight: 550;
  color: var(--faint);
  border-radius: 8px;
  padding: 8px 11px;
  transition: background .14s, color .14s;
}
.nav-item:hover { background: rgba(15,23,42,.05) !important; color: var(--ink) !important; }
.nav-item.active,
.nav-item.explore {
  background: var(--brand-tint) !important;
  color: var(--brand-dark) !important;
  font-weight: 700;
}
.nav-item.explore:hover { background: rgba(246,113,96,.16) !important; }
.nav-item.admin-link.active { background: var(--navy) !important; color: #fff !important; }
.nav-divider { background: rgba(15,23,42,.09) !important; }

/* index.html's sticky top header. */
header#mainHeader {
  background: rgba(255,255,255,.84) !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
}

/* Its tabs become FluxRate nav pills: the underline gives way to
   a tinted rounded chip, which is what the nav bar uses. */
.tab-btn {
  padding: 7px 11px !important;
  border-radius: 8px;
  font-size: 12.5px !important;
  font-weight: 550 !important;
  color: var(--faint) !important;
  transition: background .14s, color .14s;
}
.tab-btn::after { display: none !important; }
.tab-btn:hover { background: rgba(15,23,42,.05); color: var(--ink) !important; }
.tab-btn.active {
  background: var(--brand-tint);
  color: var(--brand-dark) !important;
  font-weight: 700 !important;
}
.tab-btn:active { transform: none !important; }

/* ---------- 6. Controls ---------- */

.search, .topbar-search, .filter-input, .filter-select,
.control, select, input[type="text"], input[type="search"],
input[type="date"], input[type="number"], input[type="email"], textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.search:focus, .topbar-search:focus, .filter-input:focus, .filter-select:focus,
.control:focus, select:focus, input:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(246,113,96,.13);
}

/* Round chips for the identity/status affordances, as in
   .freshness and .nav-user. */
.user-pill, .user-chip, .icon-btn, .row-act, .dark-toggle-btn {
  background: rgba(15,23,42,.045) !important;
  border: 1px solid rgba(15,23,42,.07) !important;
  box-shadow: none !important;
  transition: background .14s, border-color .14s;
}
.user-pill:hover, .user-chip:hover, .icon-btn:hover, .dark-toggle-btn:hover {
  background: var(--brand-tint) !important;
  border-color: rgba(246,113,96,.28) !important;
  color: var(--brand-dark) !important;
}
.row-act:hover { background: var(--brand) !important; border-color: var(--brand) !important; }
.user-chip:active, .icon-btn:active, .dark-toggle-btn:active { transform: scale(.96); }

/* Inline avatar images otherwise sit on the text baseline, leaving a small
   descender gap that makes the Google photo look too high inside its pill. */
#userAvatarWrap {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  line-height: 0;
}
#userAvatarWrap > img,
.user-chip > img {
  display: block;
  object-fit: cover;
  align-self: center;
}
#userAvatarWrap > img { width: 32px !important; height: 32px !important; }
.user-chip > img { flex: 0 0 26px; }

.table-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.68);
}
.table-tools-search {
  flex: 1 1 220px;
  min-width: 150px;
  height: 36px;
  padding: 0 12px;
}
.table-tools-select,
.table-tools-sort {
  flex: 0 0 auto;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  background: #fff;
  color: var(--ink);
  padding: 0 11px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
}
.table-tools-sort { cursor: pointer; }
.table-tools-sort:hover { border-color: var(--brand); color: var(--brand-dark); }
.table-tools-select:disabled { opacity: .55; cursor: not-allowed; }
html.dark .table-tools { background: rgba(19,26,37,.72); border-bottom-color: var(--line); }
html.dark .table-tools-select,
html.dark .table-tools-sort { background: #131A25; border-color: var(--line); color: var(--ink); }
@media(max-width:767px){
  .table-tools{position:sticky;left:0;flex-wrap:wrap;padding:10px;}
  .table-tools-search{flex-basis:100%;width:100%;}
  .table-tools-select{flex:1 1 130px;min-width:0;}
}

/* Primary action = FluxRate's .export-button: coral pill, 750
   weight, coloured shadow, 1px rise on hover. */
.btn-primary, .btn.primary, .export-button, .btn-save {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 35px; padding: 0 15px;
  border: 1px solid rgba(246,113,96,.55); border-radius: 999px;
  background: var(--brand); color: #fff;
  font: inherit; font-size: 11.5px; font-weight: 750; white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(246,113,96,.22);
  transition: transform .15s, background .15s;
}
.btn-primary:hover, .btn.primary:hover, .export-button:hover, .btn-save:hover {
  background: var(--brand-dark); transform: translateY(-1px);
}

/* ---------- 7. Badges & pills ---------- */

.badge, .notice-tag, .tag, .badge-sub, .active-chip {
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 9px;
}
.badge.pending, .notice-tag.pinned { background: var(--brand-soft) !important; color: var(--brand-dark) !important; }
.badge.submitted, .notice-tag.info, .badge-sub { background: var(--accent-soft) !important; color: var(--accent-dark) !important; }
.notice-tag.warn { background: #FFFBEB !important; color: var(--warn) !important; }

.notice-card.pinned { border-left: 3px solid var(--brand) !important; }
.notice-card.info   { border-left: 3px solid var(--accent) !important; }
.notice-card.warn   { border-left: 3px solid var(--warn) !important; }

/* ---------- 8. Tables ---------- */

/* FluxRate tables are small, tabular, sticky-headed, and hover on
   a barely-there tint. */
table.data-table, .hist-table, .sub-tbl {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

/* FluxRate makes these sticky, but it can do that because every one of
   its tables sits in an overflow:auto wrapper. These don't, so a sticky
   header would either be inert (inside a card that clips) or float over
   the page — the header treatment is kept, the stickiness is not. */
table.data-table th, .hist-table th, .data-table th {
  padding: 10px 14px !important;
  background: rgba(250,247,246,.96) !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--faint) !important;
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}
table.data-table td, .hist-table td {
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--line-soft) !important;
  color: #334155;
  font-size: 12px !important;
}
table.data-table tr:last-child td { border-bottom: 0 !important; }
table.data-table tbody tr:hover, .hist-table tr:hover td,
.tbl-row:hover, .sheet-row-adm:hover, .sheet-row-admin:hover {
  background: #FFF8F6 !important;
}

/* home.html's grid-based table. */
.tbl-head { background: rgba(250,247,246,.96) !important; border-bottom: 1px solid var(--line) !important; }
.tbl-th { color: var(--faint) !important; font-size: 8.5px !important; letter-spacing: .08em !important; }
.tbl-row { border-bottom: 1px solid var(--line-soft) !important; transition: background .14s; }

/* ---------- 9. KPI tiles ---------- */

.stat-card > span:first-child,
.exec-card-title,
.kpi-label {
  color: var(--faint) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}
.stat-card .font-display,
.exec-card-value,
.kpi-value {
  font-size: 23px !important;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.15;
}
.exec-card-sub, .kpi-note { color: var(--muted) !important; font-size: 10.5px !important; }
.exec-card-sub.up { color: var(--good) !important; }
.exec-card-sub.down { color: var(--bad) !important; }
.exec-card-metrics { border-top-color: var(--line) !important; }

/* Card titles. index.html sets these as 12px uppercase spans, which in
   the FluxRate language is micro-label territory — titles there are
   sentence-case 14px at -.015em. Two things tell a title from a KPI
   label: a nested span is always a title, and a direct span in a card
   that holds a chart is a title too (no KPI card contains one). */
.stat-card > div span.uppercase,
.stat-card:has(canvas) > span.uppercase,
.stat-card:has(.dot-heatmap) > span.uppercase {
  text-transform: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -.015em !important;
  color: var(--ink) !important;
}
html.dark .stat-card > div span.uppercase { color: var(--ink) !important; }

/* The technical-drawing ornaments (guide rules, corner crosshairs) came
   from the previous language; FluxRate carries no such marks. */
.corner-cross, .guide-frame { display: none !important; }

/* Page titles. Tailwind's CDN build injects its utilities into <head>
   after this file, so tracking-tight / text-[2.3rem] would otherwise win
   over the FluxRate 30px/-.04em page-head scale. */
.tab-panel h1 {
  font-size: 30px !important;
  letter-spacing: -.04em !important;
  line-height: 1.1 !important;
}
.tab-panel > div:first-child span.uppercase:first-child {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
}

/* index.html signals deltas with Tailwind utilities; point them at the
   same tokens so a positive number is the same colour on every page. */
.text-emerald-600 { color: var(--good) !important; }
.bg-emerald-50 { background-color: var(--accent-soft) !important; }
.text-rose-600, .text-rose-400 { color: var(--bad) !important; }
.text-amber-600 { color: var(--warn) !important; }

/* Warm the cool-grey Tailwind hairlines to match --line. */
.border-slate-200, .border-slate-200\/80 { border-color: var(--line) !important; }
.bg-slate-100 { background-color: #F5F0ED !important; }

/* ---------- 10. Popups & overlays ---------- */

.mini-popup, .metric-menu, .pin-modal {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: 0 22px 55px rgba(15,23,42,.18) !important;
}
.mini-popup .mp-label { color: var(--faint) !important; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mini-popup .mp-value { font-size: 20px !important; color: var(--ink) !important; }
.mini-popup .mp-sub { color: var(--muted) !important; }

/* ---------- 11. Motion ---------- */

/* FluxRate cross-fades between pages via the view-transition API
   and keeps in-page motion to short, critically damped moves. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .15s; animation-timing-function: ease-out; animation-fill-mode: both;
}
::view-transition-old(root) { animation-name: img-page-out; }
::view-transition-new(root) { animation-name: img-page-in; }
@keyframes img-page-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes img-page-in  { from { opacity: 0; } to { opacity: 1; } }

.site-nav, header#mainHeader { view-transition-name: img-chrome; }
::view-transition-group(img-chrome),
::view-transition-old(img-chrome),
::view-transition-new(img-chrome) { animation: none; }

.kpi-spinner, .exec-spinner { border-top-color: var(--brand) !important; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .action-card:hover, .exec-card:hover { transform: none; }
}

/* ---------- 12. Dark mode ---------- */

/* The aurora inverts to a deep warm-navy ground with the same two
   orbs at much lower opacity, and glass surfaces become smoked
   rather than white. Coral and aqua stay exactly as they are. */
html.dark {
  --ink:        #E7ECF3;
  --muted:      #E2E8F0;
  --faint:      #E2E8F0;
  --line:       #2B3444;
  --line-soft:  #232C3A;
  --surface:    rgba(26,33,46,.86);
  --surface-solid:#1A212E;
  --card:       rgba(26,33,46,.86);
  --border:     #2B3444;
  --bg:         #0D141C;
  --brand-soft: rgba(246,113,96,.14);
  --brand-tint: rgba(246,113,96,.16);
  --accent-soft:rgba(64,225,209,.14);
  --shadow:     0 16px 42px rgba(0,0,0,.34), 0 2px 7px rgba(0,0,0,.22);
  --shadow-sm:  0 6px 22px rgba(0,0,0,.28);
  --good:       #40E1D1;
  --bad:        #FB7185;
  --warn:       #FBBF24;
}

html.dark body::before { background: linear-gradient(180deg, #101822 0%, #0D141C 58%, #0B1119 100%); }
html.dark body::after {
  background:
    radial-gradient(660px 660px at 24% -12%, rgba(246,113,96,.20), transparent 64%),
    radial-gradient(720px 720px at 96% 108%, rgba(64,225,209,.15), transparent 64%);
}

html.dark .card, html.dark .stat-card, html.dark .action-card,
html.dark .exec-card, html.dark .notice-card, html.dark .sub-card,
html.dark .sub-tbl, html.dark .setting-card, html.dark .stat-pill,
html.dark .env-card, html.dark .toolbar {
  background: var(--surface) !important;
  border-color: rgba(255,255,255,.06) !important;
}

html.dark .sidebar { background: rgba(19,26,37,.88) !important; border-right-color: rgba(255,255,255,.06) !important; }
html.dark header#mainHeader { background: rgba(16,24,34,.86) !important; border-bottom-color: rgba(255,255,255,.06) !important; }

html.dark .nav-item:hover, html.dark .tab-btn:hover { background: rgba(255,255,255,.06) !important; color: var(--ink) !important; }
html.dark .nav-item.active, html.dark .nav-item.explore, html.dark .tab-btn.active { color: #FFA391 !important; }

html.dark table.data-table th, html.dark .hist-table th, html.dark .tbl-head { background: rgba(19,26,37,.94) !important; }
html.dark table.data-table td, html.dark .hist-table td { color: var(--ink) !important; }
html.dark table.data-table tbody tr:hover, html.dark .hist-table tr:hover td,
html.dark .tbl-row:hover, html.dark .sheet-row-adm:hover, html.dark .sheet-row-admin:hover {
  background: rgba(246,113,96,.09) !important;
}

html.dark .search, html.dark .topbar-search, html.dark .filter-input,
html.dark .filter-select, html.dark .control, html.dark select,
html.dark input, html.dark textarea {
  background: #131A25 !important; border-color: var(--line) !important; color: var(--ink) !important;
}

html.dark .user-pill, html.dark .user-chip, html.dark .icon-btn,
html.dark .row-act, html.dark .dark-toggle-btn {
  background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.08) !important;
}

html.dark .mini-popup, html.dark .metric-menu, html.dark .pin-modal {
  background: var(--surface-solid) !important; border-color: var(--line) !important;
  box-shadow: 0 22px 55px rgba(0,0,0,.5) !important;
}

html.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }

/* Tailwind utility overrides for index.html, which styles almost
   everything with static utility classes rather than tokens. */
html.dark .bg-white { background-color: var(--surface-solid) !important; }
html.dark .border-slate-200, html.dark .border-slate-200\/80 { border-color: var(--line) !important; }
html.dark .bg-slate-100 { background-color: #1C2534 !important; }

/* ---------- 13. Phones and small tablets ---------- */

/* Home, Admin and Settings share a two-column shell: a fixed 210px sidebar
   beside the page. At phone width that left ~165px for content, so cards
   were cut off. Below 860px the sidebar becomes a slide-out drawer opened
   from a menu button (added by imagination-mobile.js), and the page scrolls
   normally instead of inside a 100vh box. */
.menu-btn { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 860px) {
  .app { display: block !important; height: auto !important; min-height: 100vh; overflow: visible !important; }
  .main { overflow: visible !important; padding: 12px 14px 44px !important; }

  .sidebar {
    position: fixed !important; top: 0; bottom: 0; left: 0; z-index: 400;
    width: min(280px, 84vw); padding-top: 18px !important;
    transform: translateX(-104%);
    transition: transform .24s cubic-bezier(.2,.8,.2,1);
    background: rgba(255,255,255,.97) !important;
    box-shadow: 12px 0 40px rgba(15,23,42,.18) !important;
  }
  html.nav-open .sidebar { transform: none; }
  html.dark .sidebar { background: rgba(19,26,37,.98) !important; }

  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 390;
    background: rgba(15,23,42,.38); opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  html.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  html.nav-open, html.nav-open body { overflow: hidden; }

  /* Bigger tap targets inside the drawer. */
  .sidebar .nav-item { padding: 11px 12px !important; font-size: 14px !important; }

  /* Top bar: menu button, search taking the slack, then the round chips.
     The name beside the avatar goes; the avatar alone is the sign-out chip. */
  .topbar {
    position: sticky; top: 0; z-index: 300;
    gap: 8px !important; margin: -12px -14px 14px !important; padding: 10px 14px;
    background: rgba(255,255,255,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(15,23,42,.06);
  }
  html.dark .topbar { background: rgba(16,24,34,.88); border-bottom-color: rgba(255,255,255,.06); }
  .menu-btn {
    display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px;
    border-radius: 12px; border: 1px solid rgba(15,23,42,.08); background: rgba(15,23,42,.045);
    color: var(--ink); cursor: pointer;
  }
  .menu-btn svg { width: 19px; height: 19px; }
  html.dark .menu-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
  .search-wrap, .topbar-search-wrap { flex: 1 1 auto !important; min-width: 0; }
  .search, .topbar-search { width: 100%; }
  .user-pill { padding: 3px !important; }
  .user-name { display: none !important; }
  .icon-btn { width: 38px !important; height: 38px !important; flex: 0 0 38px; }

  /* Side-by-side layouts stack. */
  /* minmax(0, 1fr) plus min-width: 0 on the children: a plain 1fr track
     grows to its widest child's minimum, so one scrollable table (560px)
     stretched the whole column and made the page scroll sideways. */
  .two-col, .settings-layout, .stat-row { grid-template-columns: minmax(0, 1fr) !important; }
  .two-col > *, .settings-layout > *, .stat-row > *, .exec-grid > *, .actions-grid > * { min-width: 0; }
  .actions-grid { max-width: none !important; }
  .add-form, .notice-add-form, .pin-setting { grid-template-columns: 1fr !important; grid-template-areas: none !important; }
  .notice-add-form > * { grid-area: auto !important; }
  .greeting-title, .page-title { font-size: 26px !important; }

  /* Section switchers scroll sideways rather than squeezing their labels. */
  .admin-tab-bar { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none; }
  .admin-tab-bar::-webkit-scrollbar { display: none; }
  .admin-tab { flex: 0 0 auto; white-space: nowrap; }

  /* Tables scroll inside their card instead of being clipped by it. */
  .card:has(table), .setting-card:has(table), .sub-tbl { overflow-x: auto !important; }
  .card table, .setting-card table { min-width: 520px; }
  .tbl-head, .tbl-row { min-width: 560px; }
}

/* index.html (the tabbed dashboard). Its header and cards already stack,
   but cards clip their tables and a two-word tab wraps onto two lines. */
.tab-btn { white-space: nowrap; }

/* A canvas that Chart.js never initialises -- a panel with no data yet, or
   a sheet that returned nothing -- keeps the browser's default 300px width
   and pushed the CS tab 21px past a 320px screen. Drawn charts size to
   their container anyway, so this only ever constrains the empty case. */
canvas { max-width: 100%; }

@media (max-width: 767px) {
  #mainHeader > div > div:first-child { height: 64px !important; }
  #mainHeader img { height: 40px !important; }
  #mainHeader nav { gap: 4px !important; scrollbar-width: none; }
  #mainHeader nav::-webkit-scrollbar { display: none; }

  .stat-card:has(table) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  /* Same blowout guard for the Tailwind grids: an unsized grid track takes
     its content's minimum width, so a card holding a table would widen it. */
  #mainContent .grid > * { min-width: 0; }
  table.data-table { min-width: 560px; }
  table.data-table th { white-space: nowrap; }

  /* Card headings with a month/range picker beside them wrap underneath
     rather than squashing the title to one word per line. */
  .stat-card > .flex.items-center.justify-between { flex-wrap: wrap; row-gap: 8px; }
  .tab-panel h1 { font-size: 26px !important; }
  #mainContent { padding-top: 24px !important; padding-bottom: 32px !important; }
}