/* ===== PocketSTB Admin — theme tokens ===== */
/* Dark (default): neutral, de-blued, high-contrast secondary text for readability */
:root {
  --bg: #0e1013;
  --surface: #15181d;
  --surface-2: #1c2027;
  --surface-3: #252a32;
  --border: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --text: #edf0f4;
  --muted: #aab2bd;            /* raised from #8b95a7 → ~8:1, neutral */
  --accent: #818cf8;
  --accent-2: #2dd4bf;
  --chart-grid: rgba(255,255,255,.07);
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
}

/* Light: off-white (not stark), neutral grays, deeper accents for contrast on white */
:root[data-bs-theme="light"] {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --surface-3: #e6e9ee;
  --border: rgba(0,0,0,.09);
  --border-strong: rgba(0,0,0,.16);
  --text: #1a1d23;            /* ~13:1 on white */
  --muted: #586273;          /* ~6.5:1 on white */
  --accent: #5b63e6;
  --accent-2: #0e9488;
  --chart-grid: rgba(0,0,0,.08);
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 6px 20px rgba(0,0,0,.08);
}
/* Light overrides for components with baked-in dark colours */
:root[data-bs-theme="light"] .app-topbar-nav { background: #ffffff; }
:root[data-bs-theme="light"] .login-wrap { background: radial-gradient(1200px 600px at 50% -10%, #eef1f6, var(--bg)); }
:root[data-bs-theme="light"] .progress { background: rgba(0,0,0,.08); }
:root[data-bs-theme="light"] .live-bar { background: rgba(0,0,0,.08); }
:root[data-bs-theme="light"] .live-pill-ver,
:root[data-bs-theme="light"] .live-sum-chip { background: rgba(0,0,0,.05); }

/* Theme toggle button */
.theme-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; transition: color .15s, background .15s; }
.theme-toggle:hover { color: var(--text); background: var(--surface-3); }

/* Light-theme legibility for accent-on-tint elements (deeper shades on white) */
:root[data-bs-theme="light"] .topnav a.active { color: #4338ca; }
:root[data-bs-theme="light"] .topnav a.active i { color: #4338ca; }
:root[data-bs-theme="light"] .exp-tab.active { color: #4338ca; }
:root[data-bs-theme="light"] .exp-tab.active i { color: #4338ca; }
:root[data-bs-theme="light"] .live-pill.ok  { color: #15803d; }
:root[data-bs-theme="light"] .live-pill.warn { color: #b45309; }
:root[data-bs-theme="light"] .live-pill.err { color: #b91c1c; }
:root[data-bs-theme="light"] .toast-item.ok i  { color: #15803d; }
:root[data-bs-theme="light"] .toast-item.warn i { color: #b45309; }
:root[data-bs-theme="light"] .toast-item.err i { color: #b91c1c; }

html, body { background: var(--bg); color: var(--text); }
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; margin: 0;
}

/* ---- Top nav ---- */
.app-topbar-nav {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 0 18px; min-height: 58px;
  background: linear-gradient(180deg, #121826, #0e131d);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.app-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--text);
}
.app-brand .dot { width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center; color: #0c0f16; font-size: 1rem; }
/* The app icon is a detailed, white-lettered, transparent PNG — keep it whole
   (contain, never crop) on a fixed dark tile so it reads in light AND dark themes. */
.app-brand .brand-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; padding: 3px; background: #0f1320; }
.login-logo img { width: 100%; height: 100%; object-fit: contain; padding: 9px; border-radius: inherit; }
.app-brand span.accent { color: var(--accent); }

.topnav { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: 6px; flex-wrap: wrap; }
.topnav-links { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.topnav a {
  display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 9px;
  color: var(--muted); text-decoration: none; font-weight: 500; font-size: .875rem; white-space: nowrap;
  transition: background .15s, color .15s;
}
.topnav a i { font-size: .96rem; }
.topnav a:hover { background: var(--surface-2); color: var(--text); }
.topnav a.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: #c7ccff; }
.topnav a.active i { color: var(--accent); }

/* Mobile nav: the burger is hidden on desktop. Below the breakpoint the top-nav
   links collapse into a dropdown panel that drops down from under the header. */
.nav-burger { display: none; }
@media (max-width: 992px) {
  .app-topbar-nav { padding: 0 14px; gap: 8px; flex-wrap: nowrap; }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto; line-height: 1;
    border: 0; border-radius: 10px; background: transparent;
    color: var(--text); font-size: 1.45rem; cursor: pointer;
    transition: background .15s, color .15s;
  }
  .nav-burger:hover { background: var(--surface-2); }
  .nav-burger[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: #c7ccff; }
  .topnav {
    display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    flex-direction: column; gap: 2px; z-index: 40;
    background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow); padding: 10px 12px;
  }
  .topnav.open { display: flex; }
  .topnav a { padding: 12px 14px; font-size: .95rem; border-radius: 8px; }

  .topnav-links { flex-direction: column; gap: 2px; width: 100%; }
}

.topnav-right { margin-left: auto; display: flex; align-items: center; gap: 9px; padding-left: 6px; }
.live-pill { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.live-pill.ok   { color: #86efac; background: rgba(34,197,94,.12);  border-color: rgba(34,197,94,.25); }
.live-pill.warn { color: #fcd34d; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.25); }
.live-pill.err  { color: #fca5a5; background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.25); }
.topnav-date { color: var(--muted); font-size: .82rem; }
.refresh-ctl { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.refresh-ctl i { font-size: .9rem; }
.refresh-ctl .form-select { width: 72px; padding-top: .2rem; padding-bottom: .2rem; }
.user-chip { display: flex; align-items: center; gap: 9px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px 5px 6px; color: var(--text); }
.user-chip .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3);
  display: grid; place-items: center; color: var(--accent); font-weight: 700; font-size: .82rem; }
.user-chip .uname { font-size: .85rem; font-weight: 600; }
.dropdown-menu { background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 12px; }
.dropdown-item { color: var(--text); border-radius: 8px; }
.dropdown-item:hover { background: var(--surface-3); color: var(--text); }

/* ---- Content (full width) ---- */
.app-main-full { padding: 24px 28px 48px; }

/* ---- Cards ---- */
.card {
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important; box-shadow: var(--shadow);
}
.card-header { background: transparent !important; border-bottom: 1px solid var(--border) !important;
  font-weight: 600; padding: 14px 18px; }
.card-body { padding: 18px; }

/* ---- KPI tiles ---- */
.kpi-card {
  background: var(--surface) !important; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px; height: 100%; display: flex; align-items: center; gap: 14px;
  transition: transform .15s, border-color .15s;
}
.kpi-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.kpi-link { display: block; text-decoration: none; color: inherit; }
.kpi-link:hover .kpi-card { border-color: var(--accent); cursor: pointer; }
.kpi-icon { width: 46px; height: 46px; border-radius: 12px; flex: 0 0 46px;
  display: grid; place-items: center; font-size: 1.3rem; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent); }
.kpi-icon.accent2 { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent); }
.kpi-icon.warn { color: #f5b14c; background: rgba(245,177,76,.13); }
.kpi-value { font-size: 1.7rem; font-weight: 750; line-height: 1.05; }
.kpi-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 2px; }
.label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }

/* Compact KPI grid (Analytics page) */
.compact-kpis .kpi-card { padding: 12px 14px; gap: 11px; }
.compact-kpis .kpi-icon { width: 38px; height: 38px; flex: 0 0 38px; font-size: 1.05rem; border-radius: 10px; }
.compact-kpis .kpi-value { font-size: 1.35rem; }
.compact-kpis .kpi-label { font-size: .68rem; }
.compact-kpis > .row { margin-bottom: .85rem !important; }
.compact-kpis > .label { margin-top: .4rem; margin-bottom: .4rem; }
/* Percentage chips shown beneath the KPI-group bar charts */
.kpi-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.kpi-chip { font-size: .74rem; color: var(--muted); background: rgba(255,255,255,.05); border-radius: 999px; padding: 4px 10px; }
.kpi-chip b { color: var(--text); font-weight: 700; }
.kpi-chip.accent2 b { color: var(--accent-2); }
.kpi-chip.warn b { color: #f5b14c; }

/* Portal-proxy traffic stat block */
.proxy-stats { display: flex; gap: 10px; margin: 6px 0 2px; }
.proxy-stat { flex: 1; background: var(--surface-2); border-radius: 10px; padding: 14px 12px; text-align: center; }
.proxy-num { font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--text); }
.proxy-cap { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 6px; }

/* Portal Proxy — Cloudflare-style KPI tiles */
.cf-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 1200px) { .cf-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .cf-kpis { grid-template-columns: repeat(2, 1fr); } }
.cf-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); }
.cf-kpi-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cf-kpi-num { font-size: 1.85rem; font-weight: 700; line-height: 1.1; color: var(--text); margin-top: 4px; }
.cf-kpi-num.cf-bad { color: #ef4444; }
.cf-unit { font-size: .9rem; font-weight: 500; color: var(--muted); margin-left: 3px; }
.cf-kpi-sub { font-size: .74rem; color: var(--muted); margin-top: 3px; }
.cf-amber { color: #f5b14c; }
.cf-host-table code { color: var(--text); }
.cf-host-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }

/* Sortable grid headers — click to sort the whole dataset asc/desc */
.sort-th { white-space: nowrap; }
.sort-th > a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.sort-th > a:hover { color: var(--text); }
.sort-th.active > a { color: var(--text); }
.sort-ind { font-size: .64rem; line-height: 1; }
.sort-th.active .sort-ind { color: var(--accent); }
.sort-th:not(.active) .sort-ind::before { content: "\2195"; opacity: .3; }   /* ↕ affordance */
.sort-th:not(.active):hover .sort-ind::before { opacity: .6; }

/* ---- Tables / data grids ---- */
.table { color: var(--text); margin-bottom: 0; --bs-table-bg: transparent; }
.table > :not(caption) > * > * {
  border-color: var(--border); padding: 12px 16px; vertical-align: middle;
}
/* Override Bootstrap's cramped table-sm so grids actually breathe */
.table-sm > :not(caption) > * > * { padding: 11px 16px; }
.table thead th {
  color: var(--muted); font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
  background: var(--surface-2); border-bottom: 1px solid var(--border-strong);
  padding-top: 13px; padding-bottom: 13px;
}
.table tbody td { font-size: .86rem; }
.table tbody tr { transition: background .12s ease; }
.table-hover > tbody > tr:hover > * { background: var(--surface-2); }
/* a touch more breathing room at the row edges */
.table > :not(caption) > * > *:first-child { padding-left: 18px; }
.table > :not(caption) > * > *:last-child  { padding-right: 18px; }
/* let the header corners round with the card wrapper.
   2026-07-03 mobile-scroll fix: this used to be the `overflow` shorthand, which sets BOTH axes
   to hidden - that silently killed Bootstrap's .table-responsive { overflow-x: auto }, so every
   grid nested in a .card couldn't scroll horizontally on narrow/mobile viewports (it only clipped
   instead of scrolling). overflow-y: hidden is a longhand property and only touches the vertical
   axis, so it still clips to the rounded corners without touching overflow-x at all. */
.card > .table-responsive { border-radius: var(--radius); overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card > .table-responsive > .table { border-collapse: separate; }
code { color: var(--accent-2); background: transparent; }

/* Filter bar above a grid */
.card-body.py-2 { padding-top: 11px !important; padding-bottom: 11px !important; }
.card-body.py-2 .form-select-sm, .card-body.py-2 .form-control-sm { padding-top: .34rem; padding-bottom: .34rem; }

/* ---- Forms ---- */
.form-control, .form-select {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px;
}
.form-control:focus, .form-select:focus {
  background: var(--surface-2); color: var(--text);
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.form-control::placeholder { color: #5c6678; }

/* ---- Buttons ---- */
.btn { border-radius: 10px; font-weight: 550; }
.btn-info, .btn-primary { background: var(--accent); border-color: var(--accent); color: #0c0f16; }
.btn-info:hover, .btn-primary:hover { background: #6f7bf0; border-color: #6f7bf0; color: #0c0f16; }

.progress { background: rgba(255,255,255,.08); border-radius: 6px; }
.table-live td { vertical-align: middle; }

/* ---- Live "now playing" grid ---- */
.live-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.live-toolbar .live-search { flex: 1 1 240px; min-width: 180px; }
.live-count { color: var(--muted); font-size: .82rem; }

/* Live summary strip */
.live-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.live-sum-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; }
.live-sum-card.kpi  { flex: 0 0 auto; min-width: 116px; }
.live-sum-card.grow { flex: 1 1 220px; }
.live-sum-label { font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.live-sum-value { font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; gap: 8px; line-height: 1; }
.live-sum-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.live-sum-chip { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,.06); color: var(--muted); }
.live-sum-chip b { font-weight: 700; }
.live-sum-chip i { opacity: .85; }
.live-sum-chip.accent { background: color-mix(in srgb, var(--accent) 16%, transparent); color: #c7ccff; }
.live-sum-chip.live   { background: rgba(239,68,68,.15); color: #fca5a5; }
.live-sum-chip.vod    { background: color-mix(in srgb, var(--accent) 16%, transparent); color: #c7ccff; }

/* Live grid — Option B: richer & denser */
.live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; }
.live-tile {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 13px 11px 15px; display: flex; flex-direction: column; gap: 9px;
  box-shadow: var(--shadow); transition: transform .15s, border-color .15s;
}
.live-tile:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.live-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.live-tile.src-live::before { background: #ef4444; }

.live-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.live-title { font-weight: 600; font-size: .9rem; line-height: 1.28;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.live-chip { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 7px; border-radius: 6px; white-space: nowrap; flex: 0 0 auto;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: #c7ccff; }
.live-chip.src-live { background: rgba(239,68,68,.15); color: #fca5a5; }

.live-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.live-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; line-height: 1;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.live-pill i { font-size: .8rem; }
.live-pill-plat { background: color-mix(in srgb, var(--accent) 14%, transparent); color: #c7ccff; }
.live-pill-ver  { background: rgba(255,255,255,.05); color: var(--muted); }
.live-pill-on   { background: rgba(239,68,68,.13); color: #fca5a5; font-weight: 600; }
.live-pill-vod  { background: color-mix(in srgb, var(--accent) 16%, transparent); color: #c7ccff; font-weight: 600; }
.live-pill-done { background: color-mix(in srgb, var(--accent-2) 16%, transparent); color: #99f6e4; }

.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239,68,68,.6); animation: livepulse 1.6s infinite; }
@keyframes livepulse { 0%{box-shadow:0 0 0 0 rgba(239,68,68,.5)} 70%{box-shadow:0 0 0 6px rgba(239,68,68,0)} 100%{box-shadow:0 0 0 0 rgba(239,68,68,0)} }

.live-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: .7rem; color: var(--muted); margin-top: 1px; padding-top: 9px; border-top: 1px solid var(--border); }
.live-ids { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.live-ids code { color: var(--muted); font-size: .7rem; }
.live-ids .live-sep { opacity: .45; }
.live-time { flex: 0 0 auto; white-space: nowrap; }
.live-empty { text-align: center; color: var(--muted); padding: 56px 0; }
.live-empty i { font-size: 2rem; opacity: .5; display: block; margin-bottom: 10px; }
.badge { font-weight: 600; }
.vsplit { border-right: 1px solid var(--border); }
.hsplit { border-bottom: 1px solid var(--border); }

/* ---- Login ---- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(1200px 600px at 50% -10%, #1a2236, var(--bg)); }
.login-card { width: 100%; max-width: 400px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 30px; }
.login-logo { width: 72px; height: 72px; border-radius: 18px; margin: 0 auto 14px;
  background: #0f1320; display: grid; place-items: center; }

/* ---- System Health tile (combined anchor + card) ---- */
a.kpi-card.kpi-link:hover { border-color: var(--accent) !important; cursor: pointer; }

/* ---- Corner toast notifications ---- */
.toast-stack {
  position: fixed; right: 20px; bottom: 20px; z-index: 1080;
  display: flex; flex-direction: column; gap: 10px; max-width: min(380px, 90vw);
}
.toast-item {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent); border-radius: 12px;
  padding: 12px 14px; box-shadow: var(--shadow); color: var(--text);
  font-size: .88rem; cursor: pointer;
  opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s;
}
.toast-item.show { opacity: 1; transform: translateY(0); }
.toast-item i { font-size: 1.05rem; margin-top: 1px; }
.toast-item.ok   { border-left-color: #22c55e; } .toast-item.ok i   { color: #86efac; }
.toast-item.warn { border-left-color: #f59e0b; } .toast-item.warn i { color: #fcd34d; }
.toast-item.err  { border-left-color: #ef4444; } .toast-item.err i  { color: #fca5a5; }

/* ---- Role editor: grouped permissions ---- */
.perm-group { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; background: var(--surface-2); }
.perm-group-head { display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.perm-selectall { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-weight: 500; text-transform: none; letter-spacing: 0; }
.perm-group .form-check { margin-bottom: 5px; }
.perm-group .form-check:last-child { margin-bottom: 0; }
.perm-group .form-check-label code { font-size: .72rem; }

/* ---- Explorer source tabs ---- */
.explorer-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.exp-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 10px;
  color: var(--muted); text-decoration: none; font-weight: 500; font-size: .9rem;
  border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.exp-tab i { font-size: 1rem; }
.exp-tab:hover { background: var(--surface-2); color: var(--text); }
.exp-tab.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: #c7ccff; border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.exp-tab.active i { color: var(--accent); }

/* ---- Unified pill tabs: Bootstrap .nav-pills adopt the same hover + selection highlight
   as the Explorer tabs and the sidebar nav, so tabs look consistent across every screen. ---- */
.nav-pills { gap: 6px; }
.nav-pills .nav-link {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 10px;
  color: var(--muted); background: transparent; font-weight: 500; font-size: .9rem;
  border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.nav-pills .nav-link i { font-size: 1rem; }
.nav-pills .nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: #c7ccff; border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.nav-pills .nav-link.active i { color: var(--accent); }
:root[data-bs-theme="light"] .nav-pills .nav-link.active { color: #4338ca; }
:root[data-bs-theme="light"] .nav-pills .nav-link.active i { color: #4338ca; }

/* ---- Chart-forward dashboard ---- */
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi-stat {
  position: relative; overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 16px; box-shadow: var(--shadow);
  transition: transform .15s, border-color .15s;
}
.kpi-stat:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.kpi-stat .kpi-num { font-size: 1.75rem; font-weight: 750; line-height: 1.05; position: relative; z-index: 1; }
.kpi-stat .kpi-num small { font-size: .8rem; font-weight: 600; color: var(--muted); }
.kpi-stat .kpi-cap { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-top: 4px; position: relative; z-index: 1; }
.kpi-stat .kpi-spark { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; opacity: .5; pointer-events: none; }
.kpi-live { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--accent-2); margin-top: 6px; position: relative; z-index: 1; }
.kpi-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); animation: kpipulse 1.8s infinite; }
@keyframes kpipulse { 0% { box-shadow: 0 0 0 0 rgba(45,212,191,.5); } 70% { box-shadow: 0 0 0 7px rgba(45,212,191,0); } 100% { box-shadow: 0 0 0 0 rgba(45,212,191,0); } }

.chart-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.chart-grid > [class*="span-"] { min-width: 0; display: flex; }
.span-12 { grid-column: span 12; } .span-8 { grid-column: span 8; } .span-7 { grid-column: span 7; }
.span-6 { grid-column: span 6; } .span-5 { grid-column: span 5; } .span-4 { grid-column: span 4; } .span-3 { grid-column: span 3; }
@media (max-width: 992px) { .chart-grid > [class*="span-"] { grid-column: span 12; } }
/* A linked card (anchor wrapping a chart-card) must fill its grid cell like a bare card does */
.chart-grid > [class*="span-"] > a { display: flex; flex: 1 1 auto; min-width: 0; text-decoration: none; color: inherit; }
.chart-grid > [class*="span-"] > a:hover .chart-card { border-color: var(--accent); }
.chart-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px; display: flex; flex-direction: column;
  flex: 1 1 auto; width: 100%;
}
.chart-card .chart-title { font-size: .82rem; font-weight: 650; color: var(--text); display: flex; align-items: center; justify-content: space-between; }
.chart-card .chart-sub { font-size: .72rem; color: var(--muted); margin: 2px 0 12px; }
.chart-card .chart-wrap { position: relative; flex: 1; min-height: 190px; }
.chart-card.tall .chart-wrap { min-height: 240px; }

/* Breakdown lists that fill the lower half of short donut/gauge cards */
.plat-list, .conv-breakdown { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; flex: 1 1 auto; justify-content: center; }
/* Platforms card legend: 2 balanced columns instead of one long stack (id specificity
   overrides .plat-list's flex display — CSS multi-column needs a block-level container). */
#platList { display: block; columns: 2; column-gap: 22px; }
#platList .plat-row { break-inside: avoid; margin-bottom: 9px; }
/* Below 640px, 2 CSS columns wrap unpredictably (a row can split awkwardly
   between columns depending on preceding row heights) - single column reads
   cleanly on a phone-width screen instead. */
@media (max-width: 640px) { #platList { columns: 1; } }
.plat-row, .conv-row { display: flex; align-items: center; gap: 10px; font-size: .78rem; }
.plat-sw, .conv-sw { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.conv-sw.accent2 { background: var(--accent-2); }
.conv-sw.muted { background: rgba(128,128,128,.4); }
.plat-name, .conv-name { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plat-count, .conv-val { color: var(--muted); font-variant-numeric: tabular-nums; }
.plat-pct { color: var(--muted); width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.conv-row.total { border-top: 1px solid var(--border); padding-top: 9px; margin-top: 2px; }
.conv-row.total .conv-name, .conv-row.total .conv-val { color: var(--text); font-weight: 600; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .72rem; color: var(--muted); margin-top: 10px; }
.chart-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .lg .sw { width: 10px; height: 10px; border-radius: 3px; }
/* Ring gauge centre value */
.gauge-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 750; color: var(--text); pointer-events: none; }

/* ---- Skip-to-main-content link (WCAG 2.2 SC 2.4.1 Bypass Blocks) ----
   Hidden off-screen until it receives keyboard focus, then it snaps into view
   as the first focusable element so keyboard/screen-reader users can bypass
   the sidebar nav without tabbing through it on every page. */
.skip-link {
  position: absolute; top: -48px; left: 12px; z-index: 2000;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 9px;
  padding: 10px 16px; font-weight: 600; font-size: .88rem;
  text-decoration: none; box-shadow: var(--shadow);
  transition: top .15s ease;
}
.skip-link:focus {
  top: 12px; color: var(--text); outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ===== Left collapsible sidebar nav ===== */
.app-shell { display: flex; min-height: 100vh; align-items: stretch; }

.app-sidebar {
  flex: 0 0 232px; width: 232px;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  transition: width .18s ease, flex-basis .18s ease, transform .2s ease;
  z-index: 1040;
}
.sidebar-head { height: 56px; display: flex; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--border); }
.app-brand { display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--text); font-weight: 700; font-size: 1.02rem; white-space: nowrap; overflow: hidden; }
.app-brand .brand-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: contain;
  padding: 3px; background: #0f1320; flex: 0 0 auto; }
.app-brand span.accent { color: var(--accent); }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px; flex: 1 1 auto; }
.sidebar-nav .nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px;
  color: var(--text); text-decoration: none; font-size: .92rem; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.sidebar-nav .nav-item i { font-size: 1.05rem; width: 20px; text-align: center; flex: 0 0 auto; color: var(--muted); }
.sidebar-nav .nav-item:hover { background: var(--surface-2); color: var(--text); }
.sidebar-nav .nav-item:hover i { color: var(--text); }
.sidebar-nav .nav-item.active { background: color-mix(in srgb, var(--accent) 16%, transparent); color: #c7ccff; border-color: color-mix(in srgb, var(--accent) 30%, transparent); font-weight: 600; }
.sidebar-nav .nav-item.active i { color: var(--accent); }
:root[data-bs-theme="light"] .sidebar-nav .nav-item.active { color: #4338ca; }
:root[data-bs-theme="light"] .sidebar-nav .nav-item.active i { color: #4338ca; }

.sidebar-foot { padding: 10px; border-top: 1px solid var(--border); }
.sidebar-collapse-btn {
  width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border: 0; border-radius: 9px; background: transparent; color: var(--muted);
  font-size: .88rem; cursor: pointer; white-space: nowrap;
}
.sidebar-collapse-btn i { width: 20px; text-align: center; transition: transform .18s ease; }
.sidebar-collapse-btn:hover { background: var(--surface-2); color: var(--text); }

/* Collapsed icon rail (desktop) */
:root.sidebar-collapsed .app-sidebar { flex-basis: 64px; width: 64px; }
:root.sidebar-collapsed .app-sidebar .brand-text,
:root.sidebar-collapsed .app-sidebar .nav-label { display: none; }
:root.sidebar-collapsed .app-sidebar .app-brand,
:root.sidebar-collapsed .app-sidebar .nav-item,
:root.sidebar-collapsed .app-sidebar .sidebar-collapse-btn { justify-content: center; gap: 0; }
:root.sidebar-collapsed .app-sidebar .sidebar-collapse-btn i { transform: rotate(180deg); }

/* Content column + top bar */
.app-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
  display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1030;
}
.sidebar-toggle {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 9px; background: transparent; color: var(--text);
  font-size: 1.15rem; cursor: pointer;
}
.sidebar-toggle:hover { background: var(--surface-2); }
.topbar-spacer { flex: 1 1 auto; }

.sidebar-backdrop { display: none; }

/* Mobile: off-canvas drawer */
@media (max-width: 992px) {
  .app-sidebar { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); }
  body.sidebar-open .app-sidebar { transform: translateX(0); box-shadow: var(--shadow); }
  body.sidebar-open .sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1035;
  }
  /* desktop-collapse has no effect on mobile (drawer shows full width) */
  :root.sidebar-collapsed .app-sidebar { flex-basis: 232px; width: 232px; }
  :root.sidebar-collapsed .app-sidebar .brand-text,
  :root.sidebar-collapsed .app-sidebar .nav-label { display: inline; }
  .app-main-full { padding: 18px 16px 40px; }

  /* Keep the top-bar controls inline + compact on phones (user chip · live pill · theme). */
  .app-topbar { padding: 0 12px; gap: 8px; }
  .topnav-right { gap: 6px; padding-left: 0; flex-wrap: nowrap; }
  .topnav-right .refresh-ctl { display: none; }      /* refresh interval lives in the menu drawer area; hide on phones */
  .topnav-right .user-chip { padding: 4px 8px; }
}