/* =====================================================================
   EventCortex — Admin Shell Theme
   /static/css/components/theme.css

   Admin-portal-specific layout and component styles:
     · .atmosphere (animated background)
     · .app / .sidebar / .topbar / .content (shell layout)
     · Navigation: .nav-*, .nav-item, .nav-badge, .nav-scope
     · Sidebar footer: .sidebar-footer, .user-block, .avatar
     · Topbar: breadcrumbs, topbar-search, topbar-actions, icon-btn
     · Role-switcher dropdown
     · Page headings: .page-header, .page-title, .page-eyebrow
     · Cards / metrics / sparklines
     · Status pills (.pill.*) and tier chips
     · Buttons (.btn, .btn.primary, .btn.ghost, .btn.danger)
     · Activity feed, health rail
     · Theme toggle (.theme-toggle, .theme-icon)
     · Toggle switch (.toggle)
     · Impersonation banner
     · Utility helpers (.muted, .mono, .text-violet, etc.)

   Depends on CSS custom-properties in theme.css (:root block).
   Loaded via base.html (admin portal only, 8001).
   ===================================================================== */

/* Atmospheric background */
.atmosphere {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  /* Phase 31 — deep void ground (#0B0F19) with indigo/cyan glow. */
  background:
    radial-gradient(700px 500px at 10% -8%, rgba(129,140,248,0.08), transparent 58%),
    radial-gradient(500px 400px at 106% 8%, rgba(6,182,212,0.05), transparent 52%),
    radial-gradient(900px 600px at 50% 120%, rgba(79,70,229,0.04), transparent 55%),
    #0B0F19;
  transition: background .3s;
}
[data-theme="light"] .atmosphere {
  /* Phase 31 — cool gray field with faint indigo/cyan atmosphere. */
  background:
    radial-gradient(ellipse 110% 55% at 62% -8%, rgba(79,70,229,0.04), transparent 52%),
    radial-gradient(ellipse 70% 40% at 0% 100%, rgba(6,182,212,0.02), transparent 50%),
    linear-gradient(168deg, #F5F7FC 0%, #EEF2F7 100%);
}
.atmosphere::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 50% at 50% 20%, black, transparent 75%);
  opacity: 1;
}
[data-theme="light"] .atmosphere::before {
  background-image: none;
  opacity: 0;
}
.atmosphere::after {
  /* SVG grain */
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .55; mix-blend-mode: overlay;
}
[data-theme="light"] .atmosphere::after { opacity: 0; }
[data-theme="light"] .sidebar { background: #FFFFFF !important; border-right: 1px solid var(--hairline); }
[data-theme="light"] .topbar  { background: rgba(255,255,255,0.92) !important; border-bottom: 1px solid var(--hairline); }

/* Super-admin privilege differentiation: sidebar stays dark even in light mode.
   Visual signal that the operator is in an elevated permission context. */
[data-theme="light"] .sidebar.scope-super {
  background: #1B2336 !important;
  border-right-color: rgba(255,255,255,.06) !important;
}
[data-theme="light"] .sidebar.scope-super .nav-item { color: #94A3B8; }
[data-theme="light"] .sidebar.scope-super .nav-item:hover { background: rgba(255,255,255,.07); color: #E2E8F0; }
[data-theme="light"] .sidebar.scope-super .nav-item.active {
  background: rgba(129,140,248,.12);
  color: #818CF8;
}
[data-theme="light"] .sidebar.scope-super .nav-item.active .nav-icon { color: #818CF8; }
[data-theme="light"] .sidebar.scope-super .nav-section-label,
[data-theme="light"] .sidebar.scope-super .nav-scope,
[data-theme="light"] .sidebar.scope-super .user-block .who .role { color: rgba(255,255,255,.30); }
[data-theme="light"] .sidebar.scope-super .brand-name { color: #E2E8F0; }
[data-theme="light"] .sidebar.scope-super .user-block { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }
[data-theme="light"] .sidebar.scope-super .user-block .who .name { color: #E2E8F0; }
[data-theme="light"] .sidebar.scope-super .sidebar-footer { border-top-color: rgba(255,255,255,.08); }

/* ---------- App layout ---------- */
.app {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  height: 100vh;
  transition: grid-template-columns .35s cubic-bezier(.2,.8,.2,1);
}
.app[data-sidebar="collapsed"] { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

.sidebar {
  grid-row: 1 / 3;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--hairline);
  backdrop-filter: blur(20px);
  display: flex; flex-direction: column;
  min-width: 0;
  position: relative;
  z-index: 5;
}
.topbar {
  grid-column: 2;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--hairline);
  backdrop-filter: blur(20px) saturate(140%);
  display: flex; align-items: center;
  padding: 0 24px;
  gap: 18px;
  z-index: 4;
}
.content {
  grid-column: 2;
  overflow: auto;
  padding: 28px 32px 80px;
  scrollbar-color: var(--ink-500) transparent;
}
.content::-webkit-scrollbar { width: 10px; height: 10px; }
.content::-webkit-scrollbar-thumb { background: var(--ink-500); border-radius: 8px; }

/* ---------- Brand mark ---------- */
.brand {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 18px 18px 22px;
  border-bottom: 1px solid var(--hairline);
  height: var(--topbar-h);
  flex-shrink: 0;
}
.brand-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 30%, var(--violet-2), var(--violet) 50%, #4C1D95 100%);
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 24px -8px var(--violet);
}
.brand-mark::after {
  content: ""; position: absolute; inset: 5px;
  border-radius: 4px;
  background:
    conic-gradient(from 120deg at 50% 50%, transparent 0deg, rgba(255,255,255,0.4) 60deg, transparent 120deg, rgba(255,255,255,0.25) 200deg, transparent 280deg);
}
.brand-name {
  font-family: var(--f-sans);
  font-weight: 600; font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--text-display);
  white-space: nowrap;
}
.brand-name i {
  font-style: italic; font-family: var(--f-display);
  font-weight: 400; font-size: 18px;
  color: var(--violet-2);
}
.app[data-sidebar="collapsed"] .brand-name,
.app[data-sidebar="collapsed"] .nav-label,
.app[data-sidebar="collapsed"] .nav-section-label,
.app[data-sidebar="collapsed"] .nav-badge,
.app[data-sidebar="collapsed"] .sidebar-footer .user-block .who { display: none; }

/* ---------- Sidebar nav ---------- */
.nav-scope {
  padding: 14px 12px 8px;
  display: flex; align-items: center; gap: 8px;
  font: 500 10.5px/1 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-subtle);
}
.nav-scope .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(190,242,100,0.18);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.nav { flex: 1; overflow-y: auto; padding: 4px 10px 14px; }
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 6px; }

.nav-section { margin-top: 14px; }
.nav-section-label {
  padding: 0 12px 8px;
  font: 500 10px/1 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-subtle);
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text-main);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 450;
  position: relative;
  user-select: none;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--btn-bg); color: var(--text-display); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(79,70,229,0.16), rgba(79,70,229,0.04));
  color: var(--text-display);
}
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--indigo), var(--cyan-2));
  border-radius: 2px;
}
.nav-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.nav-item.active .nav-icon { color: var(--indigo); }
.nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-badge {
  font: 500 10px/1 var(--f-mono);
  padding: 3px 6px;
  background: var(--btn-bg-hover);
  color: var(--text-main);
  border-radius: 4px;
}
.nav-badge.hot { background: rgba(244,63,94,0.16); color: #FCA5A8; }

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--hairline);
}
.user-block {
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  border-radius: 10px;
  background: var(--btn-bg);
  border: 1px solid var(--hairline);
}
.avatar {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, #C4B5FD, #7C3AED);
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 12px/1 var(--f-sans);
  color: white;
}
.user-block .who { line-height: 1.2; min-width: 0; }
.user-block .who .name { font-size: 13px; color: var(--text-display); font-weight: 500; }
.user-block .who .role { font: 500 10px/1 var(--f-mono); color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 2px; }

/* ---------- Topbar ---------- */
.topbar .toggle-sidebar {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--btn-bg);
  border: 1px solid var(--hairline);
  color: var(--text-main);
  cursor: pointer;
  transition: background .15s;
}
.topbar .toggle-sidebar:hover { background: var(--btn-bg-hover); }

/* Phase 28 — minimal plain-text breadcrumb (no pill / chevron / icons). */
.breadcrumbs {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.breadcrumbs .bc-root {
  font: 500 10px/1 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
}
.breadcrumbs .bc-sep {
  font-size: 14px; line-height: 1;
  color: var(--text-subtle); opacity: 0.35;
}
.breadcrumbs .bc-page {
  font: 500 13px/1 var(--f-sans);
  letter-spacing: -0.01em;
  color: var(--text-display);
}

.topbar-search {
  flex: 1; max-width: 480px;
  position: relative;
}
.topbar-search input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 38px;
  background: var(--input-bg);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  color: var(--text-display);
  font-size: 13px;
  outline: none;
  font-family: var(--f-sans);
  transition: border-color .15s, background .15s;
}
.topbar-search input::placeholder { color: var(--text-subtle); }
.topbar-search input:focus { border-color: var(--hairline-hot); background: var(--input-bg-focus); }
.topbar-search .icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-subtle);
}
.topbar-search .kbd {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font: 500 10.5px/1 var(--f-mono);
  padding: 4px 6px;
  border-radius: 5px;
  background: var(--btn-bg-hover);
  border: 1px solid var(--hairline);
  color: var(--text-muted);
}

.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.icon-btn {
  position: relative;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--btn-bg);
  border: 1px solid var(--hairline);
  color: var(--text-main);
  cursor: pointer;
  transition: background .15s;
}
.icon-btn:hover { background: var(--btn-bg-hover); }
.icon-btn .badge-dot {
  position: absolute; top: 8px; right: 9px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rose);
  box-shadow: 0 0 0 2px var(--ink-850);
}

/* Role switcher */
.role-switcher {
  position: relative;
}
.role-switcher .trigger {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 10px 5px 6px;
  background: var(--btn-bg);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-display);
  transition: background .15s, border-color .15s;
}
.role-switcher .trigger:hover { background: var(--btn-bg-hover); border-color: var(--hairline-2); }
.role-switcher .trigger .av {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, var(--violet-2), var(--cyan-2));
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 11px/1 var(--f-sans); color: white;
}
.role-switcher .trigger .role-label {
  display: flex; flex-direction: column; line-height: 1.15;
  align-items: flex-start;
}
.role-switcher .trigger .role-label .l1 { font: 500 9.5px/1 var(--f-mono); text-transform: uppercase; color: var(--text-subtle); letter-spacing: 0.12em; }
.role-switcher .trigger .role-label .l2 { font-size: 12.5px; font-weight: 500; margin-top: 2px; }

.role-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 210px;
  background: var(--glass-strong);
  border: 1px solid var(--hairline-2);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6);
  padding: 8px;
  z-index: 50;
  opacity: 0; transform: translateY(-4px) scale(.98); pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.role-switcher[data-open="true"] .role-dropdown {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.role-dropdown .rd-head {
  padding: 10px 12px 6px;
  font: 500 10px/1 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-subtle);
}
.role-option {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s;
  border: 1px solid transparent;
}
.role-option:hover { background: rgba(255,255,255,0.04); }
.role-option.active { background: linear-gradient(90deg, rgba(139,92,246,0.16), rgba(6,182,212,0.06)); border-color: rgba(139,92,246,0.20); }
.role-option .av {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 12px/1 var(--f-sans); color: white;
}
.role-option .meta { min-width: 0; flex: 1; }
.role-option .meta .n { font-size: 13px; color: var(--text-display); font-weight: 500; }
.role-option .meta .d { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.role-option .meta .scope { font: 500 10px/1 var(--f-mono); color: var(--text-subtle); margin-top: 4px; }
.role-option .check { color: var(--violet-2); opacity: 0; }
.role-option.active .check { opacity: 1; }

/* ── Compact account dropdown: name + 2 actions ──────────────────────── */
.role-switcher .trigger .role-name {
  font: 500 13px/1 var(--f-sans);
  color: var(--text-display);
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rd-identity {
  padding: 10px 12px 8px;
  font: 500 12px/1 var(--f-sans);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rd-sep {
  margin: 0 8px 4px;
  border: 0;
  border-top: 1px solid var(--hairline);
}
.rd-action {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px;
  border-radius: 8px;
  font: 500 13px/1 var(--f-sans);
  color: var(--text-main);
  text-decoration: none;
  transition: background .12s, color .12s;
  cursor: pointer;
}
.rd-action:hover { background: var(--btn-bg-hover); color: var(--text-display); }
.rd-action--danger:hover { color: var(--rose); background: transparent; }

/* ---------- Headings & sections (Phase 28 compact 2-line header) ---------- */
.page-header { margin-bottom: 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head-main { min-width: 0; }
.page-head-actions { flex-shrink: 0; }

/* .page-eyebrow is a SHARED section/card label used widely in hand-rolled
   markup (card headers, KPI tiles). The page_header macro no longer emits it,
   but it must stay styled for those callers. */
.page-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 10.5px/1 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-subtle);
  margin-bottom: 14px;
}
.page-eyebrow .bar { width: 18px; height: 1px; background: var(--ink-300); }
.page-eyebrow-back {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.page-eyebrow-back svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    stroke: var(--text-muted) !important;
    stroke-width: 3px !important;
}

.page-title {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 26px);
  letter-spacing: -0.025em;
  color: var(--text-display);
  margin: 0 0 6px;
  line-height: 1.1;
}
.page-title em {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: italic;
  color: var(--violet-2);
  padding-right: 2px;
}

/* Line 2 — meta row: section label(s) · description, all inline. */
.page-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.page-meta-label {
  font: 500 10px/1 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-subtle);
  text-decoration: none;
  transition: color .13s;
}
a.page-meta-label:hover { color: var(--violet-2); }
.page-meta-dot { color: var(--text-subtle); opacity: 0.3; }
.page-meta-desc { font-size: 12.5px; color: var(--text-muted); }

/* Back-compat: legacy .page-sub paragraphs still used by a few hand-rolled
   headers render as the muted description. */
.page-sub { color: var(--text-muted); font-size: 12.5px; margin-top: 6px; max-width: 70ch; }

.section-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: var(--f-mono);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 10px;
}
.section-title .count {
  font: 500 11px/1 var(--f-mono);
  padding: 3px 7px;
  background: var(--btn-bg);
  border-radius: 999px;
  color: var(--text-muted);
}

/* ---------- Cards (glass) ---------- */
.card-glass {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 60px -32px rgba(0,0,0,0.6);
}
.card-glass.hot {
  border-color: rgba(139,92,246,0.22);
  background: linear-gradient(180deg, rgba(139,92,246,0.10), var(--surface-1));
}
.card-pad { padding: 22px; }
.card-pad-sm { padding: 16px; }

/* Semantic card tinting — 3px top bar encodes meaning at a glance.
   color-mix() means tints auto-follow token changes. */
.card-tinted-emerald {
  background: color-mix(in srgb, var(--emerald) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--emerald) 24%, transparent) !important;
  border-top: 3px solid var(--emerald) !important;
}
.card-tinted-violet {
  background: color-mix(in srgb, var(--violet) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--violet) 24%, transparent) !important;
  border-top: 3px solid var(--violet) !important;
}
.card-tinted-amber {
  background: color-mix(in srgb, var(--amber) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--amber) 22%, transparent) !important;
  border-top: 3px solid var(--amber) !important;
}
.card-tinted-cyan {
  background: color-mix(in srgb, var(--cyan) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--cyan) 22%, transparent) !important;
  border-top: 3px solid var(--cyan-2) !important;
}
.card-tinted-rose {
  background: color-mix(in srgb, var(--rose) 8%, transparent) !important;
  border-color: color-mix(in srgb, var(--rose) 22%, transparent) !important;
  border-top: 3px solid var(--rose) !important;
}

/* Metric cards */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}
@media (max-width: 1200px) { .metric-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .metric-grid { grid-template-columns: 1fr; } }
.metric {
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.metric::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--violet) 10%, transparent), transparent 50%);
}
.metric-label {
  display: flex; align-items: center; justify-content: space-between;
  font: 500 10.5px/1 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-subtle);
  margin-bottom: 16px;
}
.metric-label .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.metric-value {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: -0.04em;
  color: var(--text-display);
  display: flex; align-items: baseline; gap: 8px;
  line-height: 1;
}
.metric-value.hero { font-size: 48px; font-weight: 700; letter-spacing: -0.05em; }
.metric-value .suffix { font-size: 14px; color: var(--text-subtle); font-weight: 400; }
.metric-value em {
  font-family: var(--f-display);
  font-weight: 400; font-size: 36px;
  font-style: italic;
  color: var(--violet-2);
  margin-right: 2px;
}
.metric-foot {
  margin-top: 14px;
  display: flex; align-items: center; gap: 8px;
  font: 500 11px/1 var(--f-mono);
  color: var(--text-muted);
}
.delta { display: inline-flex; align-items: center; gap: 4px; font: 500 11.5px/1 var(--f-mono); padding: 3px 6px; border-radius: 5px; }
.delta.up { color: var(--lime); background: rgba(190,242,100,0.10); }
.delta.down { color: #FCA5A8; background: rgba(244,63,94,0.10); }

/* Sparkline */
.spark { display: block; width: 100%; height: 40px; margin-top: 12px; }
.spark path.line { fill: none; stroke: var(--violet-2); stroke-width: 1.5; }
.spark path.fill { fill: url(#spark-grad); opacity: .8; }

/* ---------- Layout sections ---------- */
.row-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.row-2-3 { display: grid; grid-template-columns: 5fr 3fr; gap: 18px; }
@media (max-width: 1100px) {
  .row-2, .row-3, .row-2-3 { grid-template-columns: 1fr; }
}
.mt-section { margin-top: 28px; }
.gap-md { gap: 16px; }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.between { justify-content: space-between; }

/* ---------- Tenant grid ---------- */
.tenants-table, .data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.data-table thead th {
  text-align: left;
  font: 500 10.5px/1 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--table-head);
}
.data-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
  color: var(--text-main);
}
.data-table tbody tr { transition: background .12s; cursor: pointer; }
.data-table tbody tr:hover { background: var(--row-hover); }
.data-table tbody tr:last-child td { border-bottom: none; }

.cell-id { font: 500 11.5px/1 var(--f-mono); color: var(--text-muted); }
.cell-strong { color: var(--text-display); font-weight: 500; }

/* Tenant tile (Companies Grid) */
.tenant-tile {
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  cursor: pointer;
  transition: transform .2s, border-color .2s;
  position: relative;
  overflow: hidden;
}
.tenant-tile:hover { transform: translateY(-2px); border-color: var(--hairline-2); }
.tenant-tile .top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.tenant-logo {
  width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 14px/1 var(--f-sans);
  color: var(--text-display);
  flex-shrink: 0;
}
.tenant-name { font-size: 15px; font-weight: 500; color: var(--text-display); letter-spacing: -0.01em; }
.tenant-domain { font: 500 11.5px/1 var(--f-mono); color: var(--text-subtle); margin-top: 4px; }
.tenant-tile .stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding-top: 14px; border-top: 1px solid var(--hairline);
  margin-top: 14px;
}
.tile-stat .k { font: 500 10px/1 var(--f-mono); text-transform: uppercase; color: var(--text-subtle); letter-spacing: 0.12em; margin-bottom: 6px; }
.tile-stat .v { font-weight: 500; color: var(--text-display); font-size: 15px; }
.tile-stat .v.mono { font-family: var(--f-mono); font-size: 13px; }

/* ---------- Status pills & tiers ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font: 500 11px/1 var(--f-mono);
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}
.pill .dot { width: 5px; height: 5px; border-radius: 50%; }
.pill.active { color: var(--lime); background: rgba(190,242,100,0.10); border-color: rgba(190,242,100,0.20); }
.pill.active .dot { background: var(--lime); box-shadow: 0 0 6px var(--lime); }
.pill.pending { color: var(--amber); background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.20); }
.pill.pending .dot { background: var(--amber); }
.pill.suspended { color: #FCA5A8; background: rgba(244,63,94,0.10); border-color: rgba(244,63,94,0.20); }
.pill.suspended .dot { background: var(--rose); }
.pill.draft { color: var(--text-muted); background: var(--btn-bg); border-color: var(--hairline); }
.pill.draft .dot { background: var(--ink-300); }
.pill.tier-enterprise { color: var(--violet-2); background: rgba(139,92,246,0.10); border-color: rgba(139,92,246,0.25); }
.pill.tier-growth { color: var(--cyan-2); background: rgba(6,182,212,0.10); border-color: rgba(6,182,212,0.25); }
.pill.tier-starter { color: var(--text-main); background: var(--btn-bg); border-color: var(--hairline); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font: 500 13px/1 var(--f-sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  border: 1px solid var(--hairline);
  background: var(--btn-bg);
  color: var(--text-display);
  transition: background .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.btn:hover { background: var(--btn-bg-hover); }
.btn:active { transform: scale(.98); }
.btn:disabled,
.btn[disabled] { opacity: .36; cursor: not-allowed; pointer-events: none; }
.btn.loading { cursor: not-allowed; pointer-events: none; opacity: .8; }
.btn.primary {
  background: linear-gradient(180deg, #818CF8, #4F46E5);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 8px 20px -8px rgba(79,70,229,.45), 0 1px 0 rgba(255,255,255,0.2) inset;
  color: white;
}
.btn.primary:hover {
  background: linear-gradient(180deg, #929AF9, #5B54ED);
  box-shadow: 0 12px 28px -8px rgba(79,70,229,.6), 0 1px 0 rgba(255,255,255,0.2) inset;
  transform: translateY(-1px);
  color: white;
}
.btn.primary:active {
  transform: scale(.98);
  box-shadow: 0 4px 12px -6px rgba(79,70,229,.4);
}
.btn.danger {
  background: rgba(244,63,94,0.12);
  border-color: rgba(244,63,94,0.30);
  color: #FCA5A8;
}
.btn.danger:hover { background: rgba(244,63,94,0.18); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.btn.lg { padding: 13px 24px; font-size: 14px; border-radius: 11px; }
/* Focus-visible rings — keyboard/switch-access users must always see focus */
.btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }
.btn.primary:focus-visible { outline-color: var(--indigo-2); }
.btn.danger:focus-visible { outline-color: var(--rose); }
/* Coarse pointer (touch): ensure .btn.sm meets 44px minimum touch target */
@media (pointer: coarse) {
  .btn.sm { min-height: 44px; padding: 11px 12px; }
}

.row-actions { display: flex; gap: 6px; }
.row-actions .icon-btn { width: 30px; height: 30px; border-radius: 8px; }
.row-actions .icon-btn:hover { color: var(--violet-2); }

/* ---------- Activity ticker ---------- */
.activity-feed {
  display: flex; flex-direction: column; gap: 0;
}
.activity-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--hairline);
  align-items: start;
  animation: fadeUp .4s ease forwards;
}
.activity-item:last-child { border-bottom: none; }
.activity-item .ic {
  width: 22px; height: 22px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(139,92,246,0.14); color: var(--violet-2);
  flex-shrink: 0;
}
.activity-item.danger .ic { background: rgba(244,63,94,0.14); color: #FCA5A8; }
.activity-item.warn .ic { background: rgba(245,158,11,0.14); color: var(--amber); }
.activity-item.good .ic { background: rgba(16,185,129,0.14); color: var(--emerald); }
.activity-item .text { font-size: 13px; color: var(--text-main); line-height: 1.4; }
.activity-item .text .tenant { color: var(--text-display); font-weight: 500; }
.activity-item .text .meta { display: block; font: 500 11px/1.3 var(--f-mono); color: var(--text-subtle); margin-top: 4px; letter-spacing: 0.02em; }
.activity-item .time { font: 500 11px/1 var(--f-mono); color: var(--text-subtle); white-space: nowrap; padding-top: 3px; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Health rail ---------- */
.health-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px dashed var(--hairline);
}
.health-row:last-child { border-bottom: none; }
.health-row .lbl { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.health-row .lbl .d { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 8px var(--emerald); }
.health-row .lbl .d.warn { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.health-row .lbl .d.crit { background: var(--rose); box-shadow: 0 0 8px var(--rose); }
.health-row .val { font: 500 11.5px/1 var(--f-mono); color: var(--text-main); }

/* ---------- Page transition ---------- */
.view {
  animation: viewIn .35s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes viewIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.view-hidden { display: none; }

/* ---------- Toolbar (above tables) ---------- */
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.toolbar .filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font: 500 12px/1 var(--f-sans);
  background: var(--btn-bg);
  border: 1px solid var(--hairline);
  color: var(--text-main);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.toolbar .filter-chip:hover { background: var(--btn-bg-hover); }
.toolbar .filter-chip.active {
  background: rgba(139,92,246,0.16);
  border-color: rgba(139,92,246,0.28);
  color: var(--violet-2);
}
.toolbar .input-wrap {
  position: relative; flex: 1; max-width: 280px;
}
.toolbar .input-wrap input {
  width: 100%; height: 36px;
  padding: 0 12px 0 34px;
  background: var(--input-bg);
  border: 1px solid var(--hairline);
  border-radius: 9px;
  color: var(--text-display);
  font-size: 13px;
  outline: none;
  font-family: var(--f-sans);
}
.toolbar .input-wrap input:focus { border-color: var(--hairline-hot); }
.toolbar .input-wrap .icn { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); }
.toolbar .spacer { flex: 1; }

/* ---------- Event card ---------- */
.event-card {
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform .2s, border-color .2s;
}
.event-card:hover { transform: translateY(-2px); border-color: var(--hairline-2); }
.event-banner {
  aspect-ratio: 16/8;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 12px, rgba(255,255,255,0.0) 12px 24px),
    linear-gradient(135deg, rgba(139,92,246,0.4), rgba(6,182,212,0.4));
  position: relative;
  display: flex; align-items: flex-end; padding: 14px;
}
.event-banner.green { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 12px, rgba(255,255,255,0.0) 12px 24px), linear-gradient(135deg, rgba(16,185,129,0.45), rgba(190,242,100,0.4)); }
.event-banner.amber { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 12px, rgba(255,255,255,0.0) 12px 24px), linear-gradient(135deg, rgba(245,158,11,0.45), rgba(244,63,94,0.4)); }
.event-banner.violet { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 12px, rgba(255,255,255,0.0) 12px 24px), linear-gradient(135deg, rgba(139,92,246,0.5), rgba(168,85,247,0.45)); }
.event-banner.cyan { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 12px, rgba(255,255,255,0.0) 12px 24px), linear-gradient(135deg, rgba(6,182,212,0.5), rgba(99,102,241,0.45)); }
.event-banner .placeholder-label {
  position: absolute; top: 10px; right: 10px;
  font: 500 9.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.7);
  padding: 3px 7px; border-radius: 4px;
  background: var(--input-bg); border: 1px solid rgba(255,255,255,0.10);
}
.event-meta { padding: 16px; }
.event-title { font-size: 16px; font-weight: 500; color: var(--text-display); letter-spacing: -0.01em; line-height: 1.25; }
.event-when { font: 500 11.5px/1 var(--f-mono); color: var(--text-muted); margin-top: 8px; letter-spacing: 0.04em; }
.event-where { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.event-progress {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--hairline);
}
.progress-track {
  height: 4px; border-radius: 2px;
  background: var(--btn-bg-hover);
  overflow: hidden;
  margin-top: 8px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--violet-2), var(--cyan-2));
  border-radius: 2px;
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}
.progress-meta {
  display: flex; align-items: center; justify-content: space-between;
  font: 500 11px/1 var(--f-mono); color: var(--text-muted);
}

/* ---------- Inputs & forms ---------- */
.form-grid { display: grid; gap: 14px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-subtle); }
.input, .select {
  background: var(--input-bg);
  border: 1px solid var(--hairline);
  border-radius: 9px;
  padding: 10px 12px;
  color: var(--text-display);
  font: 400 13px/1.3 var(--f-sans);
  outline: none;
  transition: border-color .15s;
}
.input:focus, .select:focus { border-color: var(--hairline-hot); }

/* ---------- Bootstrap overrides ---------- */
.modal-content {
  background: var(--glass-strong) !important;
  border: 1px solid var(--hairline-2) !important;
  border-radius: 16px !important;
  color: var(--text-main);
  backdrop-filter: blur(20px);
}
.modal-backdrop.show { opacity: .7; }
.modal-header, .modal-footer { border-color: var(--hairline) !important; }

/* ---------- Scanner ---------- */
.scanner-stage {
  aspect-ratio: 3/2;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.4) 0 2px, rgba(0,0,0,0.2) 2px 4px),
    radial-gradient(circle at center, rgba(6,182,212,0.15), rgba(0,0,0,0.6));
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
}
[data-theme="light"] .scanner-stage {
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.06) 0 2px, rgba(0,0,0,0.02) 2px 4px),
    radial-gradient(circle at center, rgba(6,182,212,0.18), rgba(20,18,12,0.12));
}
.scanner-frame {
  position: absolute; inset: 16%;
  border: 2px solid rgba(255,255,255,0.7);
  border-radius: 14px;
}
.scanner-frame::before, .scanner-frame::after {
  content: ""; position: absolute;
  background: var(--cyan-2);
}
.scanner-corner {
  position: absolute; width: 24px; height: 24px;
  border-color: var(--cyan-2);
  border-style: solid;
  border-width: 0;
}
.scanner-corner.tl { top: -2px; left: -2px; border-top-width: 3px; border-left-width: 3px; }
.scanner-corner.tr { top: -2px; right: -2px; border-top-width: 3px; border-right-width: 3px; }
.scanner-corner.bl { bottom: -2px; left: -2px; border-bottom-width: 3px; border-left-width: 3px; }
.scanner-corner.br { bottom: -2px; right: -2px; border-bottom-width: 3px; border-right-width: 3px; }
.scan-line {
  position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan-2), transparent);
  animation: scanLine 2.4s linear infinite;
  box-shadow: 0 0 12px var(--cyan-2);
}
@keyframes scanLine {
  0% { top: 0%; }
  50% { top: 100%; }
  100% { top: 0%; }
}

/* ---------- Ticket (end user wallet) ---------- */
.ticket {
  position: relative;
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
  border: 1px solid var(--hairline-2);
  border-radius: 18px;
  padding: 22px;
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 22px;
  overflow: hidden;
  isolation: isolate;
}
.ticket::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 100% 0%, rgba(139,92,246,0.30), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(6,182,212,0.20), transparent 50%);
}
.ticket::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(100% - 134px);
  width: 1px;
  background-image: linear-gradient(180deg, var(--hairline-2) 50%, transparent 50%);
  background-size: 1px 8px;
}
.ticket .t-eyebrow { font: 500 10.5px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-subtle); }
.ticket .t-title { font-size: 22px; font-weight: 500; color: var(--text-display); letter-spacing: -0.02em; margin-top: 8px; line-height: 1.2; }
.ticket .t-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
.t-meta .k { font: 500 10px/1 var(--f-mono); text-transform: uppercase; color: var(--text-subtle); letter-spacing: 0.12em; margin-bottom: 6px; }
.t-meta .v { font-size: 13.5px; color: var(--text-display); font-weight: 500; }
.t-meta .v.mono { font-family: var(--f-mono); font-size: 12.5px; }
.ticket .qr {
  background: white;
  border-radius: 12px;
  width: 110px; height: 110px;
  display: flex; align-items: center; justify-content: center;
  align-self: center;
}
.ticket .qr svg { width: 100%; height: 100%; }

/* Sidebar tenant scope colors */
.scope-super .scope-chip { background: rgba(139,92,246,0.10); border-color: rgba(139,92,246,0.25); color: var(--violet-2); }
.scope-super .scope-chip .dot { background: var(--violet-2); }
.scope-company .scope-chip { background: rgba(6,182,212,0.10); border-color: rgba(6,182,212,0.25); color: var(--cyan-2); }
.scope-company .scope-chip .dot { background: var(--cyan-2); }
.scope-user .scope-chip { background: rgba(190,242,100,0.10); border-color: rgba(190,242,100,0.25); color: var(--lime); }
.scope-user .scope-chip .dot { background: var(--lime); }

/* Sessions live indicator */
.live-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rose);
  margin-right: 8px;
  box-shadow: 0 0 0 4px rgba(244,63,94,0.18);
  animation: pulse 2s ease-in-out infinite;
}

/* Compact list rows */
.list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--hairline);
}
.list-row:last-child { border-bottom: none; }
.list-row .av { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; color: white; }
.list-row .who { flex: 1; min-width: 0; }
.list-row .who .n { font-size: 13px; color: var(--text-display); font-weight: 500; }
.list-row .who .m { font: 500 11px/1 var(--f-mono); color: var(--text-subtle); margin-top: 4px; }

/* Tiny chart bars */
.bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 80px; margin-top: 14px; }
.bar { flex: 1; background: linear-gradient(180deg, var(--violet-2), rgba(139,92,246,0.2)); border-radius: 3px 3px 0 0; min-height: 4px; }
.bar.cyan { background: linear-gradient(180deg, var(--cyan-2), rgba(6,182,212,0.2)); }

/* Tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--hairline); margin-bottom: 20px; }
.tab {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-weight: 500;
  transition: color .12s, border-color .12s;
}
.tab:hover { color: var(--text-display); }
.tab.active {
  color: var(--text-display);
  border-bottom-color: var(--indigo);
}

/* Toast (impersonation banner) */
.impersonation-banner {
  position: fixed;
  top: 18px; left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: rgba(245,158,11,0.92);
  color: #1A1206;
  padding: 10px 16px 10px 14px;
  border-radius: 999px;
  display: flex; align-items: center; gap: 14px;
  font-size: 13px;
  font-weight: 500;
  z-index: 100;
  box-shadow: 0 10px 30px -8px rgba(245,158,11,0.45);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.impersonation-banner.show { transform: translateX(-50%) translateY(0); }
.impersonation-banner .pulse { width: 8px; height: 8px; border-radius: 50%; background: #7C2D12; }
.impersonation-banner .end-imp {
  background: rgba(0,0,0,0.18);
  color: inherit;
  border: 0;
  padding: 5px 10px;
  border-radius: 999px;
  font: 500 11.5px/1 var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.impersonation-banner .end-imp:hover { background: rgba(0,0,0,0.28); }

/* Utility */
.muted { color: var(--text-subtle); }
.mono { font-family: var(--f-mono); }
.hr { height: 1px; background: var(--hairline); margin: 20px 0; border: 0; }
.text-paper { color: var(--text-display); }
.text-violet { color: var(--violet-2); }
.text-cyan { color: var(--cyan-2); }
.text-lime { color: var(--lime); }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fw-500 { font-weight: 500; }

/* Theme toggle button (sun/moon) */
.theme-toggle {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--btn-bg);
  border: 1px solid var(--hairline);
  color: var(--text-main);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .2s;
}
.theme-toggle:hover { background: var(--btn-bg-hover); }
.theme-toggle .theme-icon {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .25s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.theme-toggle .theme-icon.sun { opacity: 0; transform: rotate(-90deg) scale(.4); color: var(--amber); }
.theme-toggle .theme-icon.moon { opacity: 1; transform: rotate(0) scale(1); color: var(--violet-2); }
[data-theme="light"] .theme-toggle .theme-icon.sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="light"] .theme-toggle .theme-icon.moon { opacity: 0; transform: rotate(90deg) scale(.4); }

/* Light-mode tweaks for specific spots */
[data-theme="light"] .topbar-search input { color: var(--text-display); }
[data-theme="light"] .topbar-search input::placeholder { color: var(--text-subtle); }
[data-theme="light"] .input, [data-theme="light"] .select, [data-theme="light"] textarea.input { color: var(--text-display); }
[data-theme="light"] .modal-content { color: var(--text-main); }
[data-theme="light"] .progress-track { background: rgba(20,18,12,0.08); }
[data-theme="light"] .nav-badge { background: rgba(20,18,12,0.06); color: var(--text-main); }
[data-theme="light"] .nav-badge.hot { background: rgba(244,63,94,0.14); color: #B91C1C; }
[data-theme="light"] .breadcrumbs .bc-root { color: var(--text-subtle); }
[data-theme="light"] .breadcrumbs .bc-page { color: var(--text-display); }
[data-theme="light"] .nav-item.active { background: linear-gradient(90deg, rgba(79,70,229,0.12), rgba(79,70,229,0.02)); color: var(--indigo); }
[data-theme="light"] .nav-item.active .nav-icon { color: var(--indigo); }
[data-theme="light"] .nav-item.active::before { background: linear-gradient(180deg, var(--indigo), var(--cyan-2)); }
[data-theme="light"] .live-dot { box-shadow: 0 0 0 4px rgba(244,63,94,0.14); }
[data-theme="light"] .filter-chip { background: var(--btn-bg); color: var(--text-main); }
[data-theme="light"] .filter-chip.active { background: rgba(79,70,229,0.12); color: #3730A3; border-color: rgba(79,70,229,0.28); }
[data-theme="light"] .pill.draft { background: rgba(20,18,12,0.05); color: var(--text-muted); border-color: var(--hairline); }
[data-theme="light"] .pill.tier-starter { background: rgba(20,18,12,0.05); color: var(--text-main); border-color: var(--hairline); }
[data-theme="light"] .tab { color: var(--text-muted); }
[data-theme="light"] .tab:hover { color: var(--text-display); }
[data-theme="light"] .tab.active { color: var(--text-display); }
[data-theme="light"] .icon-btn { color: var(--text-main); }
[data-theme="light"] .toggle-sidebar { color: var(--text-main); }
[data-theme="light"] .btn { color: var(--text-display); }
[data-theme="light"] .btn.primary { color: white; }
[data-theme="light"] pre { color: #E5E7EB !important; }

/* Toggle switches (Preferences) */
.toggle {
  width: 40px; height: 22px; border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--hairline);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
}
.toggle .thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink-100);
  transition: transform .2s, background .2s;
}
.toggle.on {
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  border-color: rgba(139,92,246,0.30);
}
.toggle.on .thumb {
  transform: translateX(18px);
  background: white;
}

/* Numbers display */
.big-stat {
  font-family: var(--f-sans);
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text-display);
  line-height: 1;
}
.big-stat em {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  color: var(--violet-2);
}

/* End user public surface */
.public-hero {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  padding: 40px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 14px, transparent 14px 28px),
    linear-gradient(135deg, rgba(139,92,246,0.5), rgba(6,182,212,0.45));
  margin-bottom: 24px;
}
.public-hero .placeholder-label {
  position: absolute; top: 12px; right: 12px;
}
.public-hero h1 {
  font-family: var(--f-sans);
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text-display);
  margin: 0;
  max-width: 18ch;
  line-height: 1.05;
}
.public-hero h1 em {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
}
.public-hero p {
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  margin: 14px 0 0;
  max-width: 50ch;
}

/* SVG icons */
.i-16 { width: 16px; height: 16px; }
.i-18 { width: 18px; height: 18px; }
.i-20 { width: 20px; height: 20px; }
.i-22 { width: 22px; height: 22px; }

/* ============================================================
   Error states  (admin/errorpage/*  via  _error.html macro)
   In-app card: renders inside <main class="content">, so the
   sidebar + topbar chrome stay. Accent is scoped per status
   through .err-403 / .err-404 / .err-500 (sets --err-accent).
   Admin design tokens only (--violet-2, --amber, --rose, etc.)
   — no public portal CSS, no standalone stylesheet.
   ============================================================ */

/* Stage: centering shell + ambient colour orbs for glass effect */
.err-stage {
  min-height: calc(100vh - var(--topbar-h, 64px) - 108px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  padding: 32px 0 48px;
}
/* Top-right ambient orb — gives backdrop-filter something to blur */
.err-stage::before {
  content: "";
  position: absolute; top: -80px; right: -60px; z-index: -2;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in oklch, var(--err-accent, var(--violet-2)) 16%, transparent) 0%,
    transparent 68%);
  filter: blur(48px);
  pointer-events: none;
}
/* Bottom-left accent orb — secondary depth layer */
.err-stage::after {
  content: "";
  position: absolute; bottom: -60px; left: -40px; z-index: -2;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in oklch, var(--err-accent, var(--violet-2)) 9%, transparent) 0%,
    transparent 70%);
  filter: blur(64px);
  pointer-events: none;
}

/* Oversized ghost status number behind the card */
.err-echo {
  position: absolute; inset: 0; z-index: -1;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; overflow: hidden;
}
.err-echo span {
  font-family: var(--f-display);
  font-style: italic; font-weight: 400;
  font-size: clamp(280px, 44vw, 660px);
  line-height: 0.8; letter-spacing: -0.04em;
  color: var(--err-accent, var(--violet-2));
  opacity: 0.055; user-select: none; white-space: nowrap;
}
[data-theme="light"] .err-echo span { opacity: 0.07; }

/* Glass card */
.err-card {
  position: relative;
  width: min(740px, 100%);
  border-radius: 22px;
  border: 1px solid color-mix(in oklch, var(--err-accent, var(--violet-2)) 24%, var(--hairline));
  background: var(--surface-2);
  box-shadow:
    var(--shadow-card),
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 0 52px -14px color-mix(in oklch, var(--err-accent, var(--violet-2)) 24%, transparent);
  backdrop-filter: blur(28px) saturate(1.5);
  overflow: hidden;
  isolation: isolate;
}
/* Primary corner glow: top-right + secondary bottom-left */
.err-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(130% 100% at 100% 0%,
      color-mix(in oklch, var(--err-accent, var(--violet-2)) 20%, transparent) 0%,
      transparent 52%),
    radial-gradient(70% 55% at 0% 100%,
      color-mix(in oklch, var(--err-accent, var(--violet-2)) 10%, transparent) 0%,
      transparent 62%);
}
/* Top-edge highlight shimmer */
.err-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg,
    transparent 5%,
    color-mix(in oklch, var(--err-accent, var(--violet-2)) 55%, transparent) 50%,
    transparent 95%);
}
.err-card-inner { padding: 44px 48px 40px; }

/* Top status strip */
.err-strip {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 48px;
  border-bottom: 1px solid color-mix(in oklch, var(--err-accent, var(--violet-2)) 16%, var(--hairline));
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--err-accent, var(--violet-2)) 7%, var(--table-head)) 0%,
    var(--table-head) 55%);
  font: 500 10.5px/1 var(--f-mono);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--text-subtle);
}
/* Pulsing status dot */
.err-strip .sd {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--err-accent, var(--violet-2));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--err-accent, var(--violet-2)) 22%, transparent);
  animation: err-dot-pulse 2.6s ease-in-out infinite;
}
@keyframes err-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklch, var(--err-accent, var(--violet-2)) 22%, transparent); }
  50%       { box-shadow: 0 0 0 6px color-mix(in oklch, var(--err-accent, var(--violet-2)) 8%, transparent); }
}
.err-strip .spacer { flex: 1; }
.err-strip .trace { color: var(--text-muted); letter-spacing: 0.06em; text-transform: none; }

/* Glyph badge */
.err-glyph {
  width: 72px; height: 72px;
  border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklch, var(--err-accent, var(--violet-2)) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--err-accent, var(--violet-2)) 30%, transparent);
  color: var(--err-accent, var(--violet-2));
  box-shadow: 0 0 28px -6px color-mix(in oklch, var(--err-accent, var(--violet-2)) 32%, transparent);
  margin-bottom: 26px;
}
.err-glyph svg { width: 32px; height: 32px; }

/* Status code + semantic tag */
.err-code { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.err-code .num {
  font-family: var(--f-display);
  font-style: italic; font-weight: 400;
  font-size: 72px; line-height: 0.9; letter-spacing: -0.03em;
  color: var(--err-accent, var(--violet-2));
  text-shadow: 0 0 64px color-mix(in oklch, var(--err-accent, var(--violet-2)) 38%, transparent);
}
.err-code .tag {
  font: 500 11px/1 var(--f-mono);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--text-subtle);
  padding: 5px 10px; border-radius: 6px;
  background: color-mix(in oklch, var(--err-accent, var(--violet-2)) 8%, var(--btn-bg));
  border: 1px solid color-mix(in oklch, var(--err-accent, var(--violet-2)) 20%, var(--hairline));
}

/* Heading */
.err-title {
  font-family: var(--f-sans); font-weight: 500;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.025em;
  color: var(--text-display); line-height: 1.12;
  margin: 0 0 12px;
}
.err-title em {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  color: var(--err-accent, var(--violet-2));
  padding-right: 3px;
}

/* Body copy */
.err-sub {
  font-size: 14.5px; color: var(--text-muted);
  line-height: 1.55; max-width: 52ch; margin: 0; text-wrap: pretty;
}

/* Technical detail box (request / trace context) */
.err-detail {
  margin-top: 24px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklch, var(--err-accent, var(--violet-2)) 12%, var(--hairline));
  background: var(--input-bg);
  overflow: hidden;
}
.err-detail-row {
  display: grid; grid-template-columns: 150px 1fr; gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--hairline);
  font: 500 12px/1.4 var(--f-mono);
}
.err-detail-row:last-child { border-bottom: none; }
.err-detail-row .k { color: var(--text-subtle); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10.5px; align-self: center; }
.err-detail-row .v { color: var(--text-main); word-break: break-all; }
.err-detail-row .v b { color: var(--text-display); font-weight: 600; }
.err-detail-row .v .ok { color: var(--emerald); }
.err-detail-row .v .no { color: #FCA5A8; }
.err-detail-row .v .warnv { color: var(--amber); }

/* Action row */
.err-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 28px;
}
.err-actions .grow { flex: 1; }
.err-help {
  font: 500 11.5px/1.5 var(--f-mono);
  color: var(--text-subtle); letter-spacing: 0.02em;
}
.err-help a { color: var(--err-accent, var(--violet-2)); text-decoration: none; }
.err-help a:hover { text-decoration: underline; }

/* Accent themes per error type */
.err-403 { --err-accent: var(--amber);    --err-glow: rgba(245,158,11,0.22); }
.err-404 { --err-accent: var(--violet-2); --err-glow: rgba(139,92,246,0.22); }
.err-500 { --err-accent: var(--rose);     --err-glow: rgba(244,63,94,0.22); }

/* ============================================================
   Feedback states  (loader overlay + session-timeout modal)
   Migrated from the "Admin Design" prototype (feedback.css).
   Theme-aware via the bare :root tokens (defined in
   static/admin/css/theme.css) — replaces the old inline <style>
   blocks in _loader.html / _session_timeout.html that leaned on
   non-existent tokens (--primary-color, --bg-primary-rgb) and so
   never themed in dark mode. Toast styling stays in server.css.
   Loaders are pure CSS (no JS deps); the Alpine x-show toggles
   inherit the shared ecApp() scope on <body>.
   ([x-cloak] is already defined globally in server.css.)
   ============================================================ */

/* Conic ring spinner — GPU-only (transform: rotate), no layout/paint */
@keyframes ecSpin { to { transform: rotate(360deg); } }
.ldr-ring {
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 8%, var(--violet-2) 65%, var(--cyan-2) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--rw,4px)), #000 calc(100% - var(--rw,4px) + 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--rw,4px)), #000 calc(100% - var(--rw,4px) + 1px));
  animation: ecSpin .85s linear infinite;
}
.ldr-ring.sm { width: 22px; height: 22px; --rw: 3px; }
.ldr-ring.md { width: 40px; height: 40px; --rw: 4px; }
.ldr-ring.lg { width: 60px; height: 60px; --rw: 5px; }

/* Full-screen HTMX loader overlay */
.ec-loader-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  padding: 24px;
  background: color-mix(in oklch, var(--ink-900) 60%, transparent);
  backdrop-filter: blur(12px) saturate(120%);
}
.ec-loader-overlay .ec-loader-panel {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 30px 36px;
  border-radius: 20px;
  border: 1px solid var(--hairline-2);
  background: var(--glass-strong);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.55);
  backdrop-filter: blur(24px);
}
.ec-loader-overlay .ec-loader-text {
  font: 500 11.5px/1 var(--f-mono);
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-subtle);
}

/* Session-timeout re-auth modal (themed; replaces hardcoded #fff/#ef4444) */
.ec-modal-backdrop {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: color-mix(in oklch, var(--ink-900) 62%, transparent);
  backdrop-filter: blur(10px) saturate(120%);
}
.ec-modal-card {
  width: min(420px, 100%);
  border-radius: 20px;
  border: 1px solid var(--hairline-2);
  background: var(--glass-strong);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.6);
  backdrop-filter: blur(24px);
  padding: 32px; text-align: center;
}
.ec-modal-icon {
  width: 56px; height: 56px; margin: 0 auto 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in oklch, var(--rose) 14%, transparent);
  border: 1px solid color-mix(in oklch, var(--rose) 30%, transparent);
  color: var(--rose);
}
.ec-modal-icon svg { width: 26px; height: 26px; }
.ec-modal-title {
  font-family: var(--f-sans); font-weight: 500; font-size: 20px;
  letter-spacing: -0.02em; color: var(--text-display); margin: 0 0 8px;
}
.ec-modal-text {
  font-size: 13.5px; color: var(--text-muted); line-height: 1.55;
  margin: 0 0 22px;
}
.ec-modal-actions { display: flex; justify-content: center; }

/* ── Native <dialog> modals (.ec-modal) ───────────────────────────── */
dialog.ec-modal {
  padding: 0;
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text-main);
  box-shadow: 0 32px 80px -20px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.05) inset;
  max-width: min(92vw, 640px);
  width: 100%;
  max-height: min(90vh, 900px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
dialog.ec-modal--xl { max-width: min(94vw, 1100px); }
dialog.ec-modal--lg { max-width: min(92vw, 800px); }
dialog.ec-modal::backdrop {
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);
}
@keyframes ec-modal-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
dialog.ec-modal[open] { animation: ec-modal-in .18s ease-out forwards; }
[data-theme="light"] dialog.ec-modal {
  background: #FFFFFF;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.06);
}
[data-theme="light"] dialog.ec-modal::backdrop {
  background: rgba(15,23,42,0.4);
  backdrop-filter: blur(3px);
}
.ec-modal__header {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.ec-modal__body {
  padding: 24px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.ec-modal__footer {
  display: flex; align-items: center;
  justify-content: flex-end; gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--hairline);
  flex-shrink: 0;
}
.ec-modal__close {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); border-radius: 6px; flex-shrink: 0;
  transition: background .12s, color .12s;
}
.ec-modal__close:hover { background: var(--btn-bg-hover); color: var(--text-display); }
.ec-modal__close:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

/* Respect reduced-motion: disable all non-essential animation */
@media (prefers-reduced-motion: reduce) {
  .ldr-ring { animation: none; }
  /* Page/content transition */
  .view { animation: none; }
  /* Activity feed entrance */
  .activity-item { animation: none; }
  /* Nav scope pulsing dot */
  .nav-scope .dot { animation: none; }
  /* Sidebar collapse transition */
  .app { transition: none; }
  /* Theme transition on body/atmosphere */
  body, .atmosphere { transition: none; }
  /* Button lift on hover */
  .btn.primary:hover { transform: none; }
  /* Dialog open animation */
  dialog.ec-modal[open] { animation: none; }
}


/* =====================================================================
   Door Scanner  (.ec-scan-*)  —  /{slug}/admin/events/scanner
   Verify a ticket QR (HMAC, server-side) + one-time check-in. Result
   card is colour-coded: green=valid, amber=already used, red=invalid.
   Self-contained (var fallbacks) so it renders in dark + light themes.
   ===================================================================== */
.ec-scan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 860px) { .ec-scan-grid { grid-template-columns: 1fr; } }

.ec-scan-panel {
  background: var(--card, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow-card, 0 8px 24px -12px rgba(0,0,0,0.5));
  padding: 18px;
}
.ec-scan-cam {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #0b0f1a;
  min-height: 240px;
}
.ec-scan-cam video, .ec-scan-cam img { width: 100% !important; height: auto !important; display: block; }
.ec-scan-hint {
  display: flex; align-items: center; gap: 7px;
  margin: 12px 2px 0; font-size: 12.5px; color: var(--text-muted, #9ca3af);
}
.ec-scan-hint svg { flex: none; }

.ec-scan-manual { margin-top: 16px; border-top: 1px solid var(--border, rgba(255,255,255,0.10)); padding-top: 14px; }
.ec-scan-manual label { display: block; font-size: 12px; color: var(--text-muted, #9ca3af); margin-bottom: 6px; }
.ec-scan-manual textarea {
  width: 100%; resize: vertical; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px; padding: 9px 11px; border-radius: 10px;
  border: 1px solid var(--border, rgba(255,255,255,0.14));
  background: var(--input-bg, rgba(0,0,0,0.25)); color: var(--text-main, #e5e7eb);
}
.ec-scan-manual .btn { margin-top: 10px; }

/* Result card */
.ec-scan-result {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 26px 20px; border-radius: 14px; min-height: 240px; justify-content: center;
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  transition: background .2s, border-color .2s;
}
.ec-scan-result__icon {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  margin-bottom: 14px; background: rgba(255,255,255,0.06);
}
.ec-scan-result__headline { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.ec-scan-result__msg { margin-top: 5px; font-size: 13.5px; color: var(--text-muted, #9ca3af); }
.ec-scan-result__meta {
  margin: 18px 0 0; width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 0;
  text-align: left; border-top: 1px solid var(--border, rgba(255,255,255,0.10));
}
.ec-scan-result__meta > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 2px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.07)); font-size: 13px;
}
.ec-scan-result__meta dt { color: var(--text-muted, #9ca3af); margin: 0; }
.ec-scan-result__meta dd { margin: 0; font-weight: 600; text-align: right; }

.ec-scan-result--idle    { background: var(--bg-secondary, rgba(255,255,255,0.02)); }
.ec-scan-result--ok       { background: rgba(34,197,94,0.12);  border-color: rgba(34,197,94,0.45);  color: #16a34a; }
.ec-scan-result--ok .ec-scan-result__icon       { background: rgba(34,197,94,0.18);  color: #16a34a; }
.ec-scan-result--already  { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.45); color: #d97706; }
.ec-scan-result--already .ec-scan-result__icon  { background: rgba(245,158,11,0.18); color: #d97706; }
.ec-scan-result--invalid  { background: rgba(239,68,68,0.12);  border-color: rgba(239,68,68,0.45);  color: #dc2626; }
.ec-scan-result--invalid .ec-scan-result__icon  { background: rgba(239,68,68,0.18); color: #dc2626; }
/* Keep meta text readable (not tinted) inside coloured cards */
.ec-scan-result__meta dd { color: var(--text-main, #e5e7eb); }

/* =====================================================================
   Phase 28 — responsive visibility utilities
   Mirrors the design-reference breakpoint contract so the topbar
   breadcrumb (.hide-mob) collapses on phones while the mobile page
   title carries identity. Reusable across admin views.
   ===================================================================== */
@media (max-width: 768px)  { .hide-mob    { display: none !important; } }
@media (min-width: 769px)  { .hide-desk   { display: none !important; } }
@media (max-width: 1100px) { .hide-tab    { display: none !important; } }
@media (min-width: 1101px) { .hide-desk-lg{ display: none !important; } }

/* =====================================================================
   Phase 28 — Super-admin dashboard (Command Center) refinement
   Compact KPI strip: one responsive grid, 6 tiles fit on a wide screen,
   each with a quiet trend line. Restraint over bulk.
   ===================================================================== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.kpi-tile {
  position: relative; overflow: hidden;
  padding: 14px 15px 13px;
  border-radius: 13px;
}
.kpi-tile::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--violet-2), var(--cyan-2));
  opacity: .85;
}
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.kpi-top .page-eyebrow { font-size: 9.5px; letter-spacing: .14em; }
.kpi-chip {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.kpi-chip--violet  { background: rgba(139,92,246,0.14); color: var(--violet-2); }
.kpi-chip--cyan    { background: rgba(6,182,212,0.14);  color: var(--cyan-2); }
.kpi-chip--emerald { background: rgba(16,185,129,0.14); color: var(--emerald); }
.kpi-chip--amber   { background: rgba(245,158,11,0.14); color: var(--amber); }
.kpi-num { font: 600 27px/1 var(--f-sans); letter-spacing: -0.03em; color: var(--text-display); }
.kpi-meta {
  font-size: 11.5px; margin-top: 5px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-spark { display: block; width: 100%; height: 24px; margin-top: 10px; }

.dist-badge {
  font: 500 10.5px/1 var(--f-mono);
  color: var(--cyan-2);
  background: rgba(6,182,212,0.10);
  border: 1px solid rgba(6,182,212,0.20);
  padding: 3px 8px; border-radius: 999px;
}
.dist-badge--violet { color: var(--violet-2); background: rgba(139,92,246,.10); border-color: rgba(139,92,246,.20); }
.dist-avatar {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font: 600 11px/1 var(--f-sans);
}
.port-badge {
  font: 600 10px/1 var(--f-mono);
  color: var(--cyan-2);
  background: rgba(6,182,212,0.10);
  border: 1px solid rgba(6,182,212,0.20);
  padding: 4px 7px; border-radius: 6px; letter-spacing: .04em;
}

/* Dashboard responsive — KPI strip reflows; health + 2-col stack. */
@media (max-width: 1280px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .dash-2col { grid-template-columns: 1fr !important; } }
@media (max-width: 460px)  { .kpi-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px)  { .health-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px)  { .health-grid { grid-template-columns: 1fr !important; } }

/* =====================================================================
   Phase 28 / v2 — Tenant (company) dashboard
   Revenue-led hero (emerald accent). Company identity removed — they
   know where they are. Event picker promoted to top of page.
   ===================================================================== */

/* Revenue hero */
.tnt-hero {
  padding: 20px 22px 0; margin-bottom: 16px;
  position: relative; overflow: hidden;
  background: rgba(52,211,153,.10);
  border-color: rgba(52,211,153,.30) !important;
}
.tnt-hero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--emerald), var(--cyan-2));
}
.tnt-hero__head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.tnt-hero__today {
  font: 600 10px/1 var(--f-mono); letter-spacing: .04em;
  color: var(--emerald);
  background: rgba(52,211,153,.15); border: 1px solid rgba(52,211,153,.35);
  padding: 4px 10px; border-radius: 999px;
}
.tnt-hero__num {
  font: 800 52px/1 var(--f-sans); letter-spacing: -0.05em;
  color: var(--text-paper); margin-bottom: 10px;
}
.tnt-hero__cur {
  font: 700 22px/1 var(--f-sans); letter-spacing: 0;
  color: var(--emerald); margin-right: 5px; vertical-align: text-bottom;
}
.tnt-hero__meta { font: 400 12px/1.4 var(--f-sans); color: var(--text-muted); margin-bottom: 14px; }
.tnt-hero .kpi-spark {
  display: block; height: 72px;
  margin: 0 -22px; width: calc(100% + 44px);
}

/* List rows (upcoming events, recent orders) */
.tnt-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: 9px;
  text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--hairline);
  transition: background .12s;
}
.tnt-row:last-child { border-bottom: 0; }
a.tnt-row:hover { background: var(--row-hover); }
.tnt-row__title {
  font: 500 13px/1.3 var(--f-sans); color: var(--text-display);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tnt-row__body  { flex: 1; min-width: 0; }
.tnt-row__head  { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.tnt-row__date  { font: 400 11.5px/1 var(--f-mono); color: var(--text-muted); flex-shrink: 0; }
.tnt-row__cap   { height: 3px; background: var(--border-strong); border-radius: 2px; overflow: hidden; margin-bottom: 4px; }
.tnt-row__cap-fill { height: 100%; background: var(--cyan-2); opacity: .8; border-radius: 2px; }
.tnt-row__meta  { font: 400 11.5px/1.3 var(--f-sans); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Order status dot + amount */
.tnt-order-dot           { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tnt-order-dot--paid     { background: var(--emerald); }
.tnt-order-dot--pending  { background: var(--amber); }
.tnt-order-dot--failed   { background: var(--rose); }
.tnt-order-amt { font: 600 12.5px/1 var(--f-sans); color: var(--text-display); flex-shrink: 0; }

/* Secondary signal mini-cards */
.tnt-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.tnt-mini { padding: 14px 15px; display: flex; flex-direction: column; gap: 3px; }
.tnt-mini__k { font: 500 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--text-subtle); }
.tnt-mini__v { font: 600 24px/1.1 var(--f-sans); letter-spacing: -0.02em; color: var(--text-display); margin: 2px 0; }
@media (max-width: 900px) { .tnt-mini-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .tnt-mini-grid { grid-template-columns: 1fr; } }

/* Dashboard layout */
.dash-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dash-evt-card  { margin-bottom: 16px; }

/* Conditional alert banners */
.dash-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px; margin-bottom: 12px;
  font: 400 13px/1.35 var(--f-sans);
}
.dash-alert--amber {
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.25);
  color: #FCD34D;
}
.dash-alert--rose {
  background: rgba(244,63,94,.10);
  border: 1px solid rgba(244,63,94,.25);
  color: #FCA5A8;
}
.dash-alert__text { flex: 1; color: var(--text-main); }
.dash-alert__text strong { color: var(--text-display); }
.dash-alert__link { font-weight: 600; color: var(--amber); text-decoration: underline; text-underline-offset: 2px; }
.dash-alert--rose .dash-alert__link { color: var(--rose); }

/* Event picker topbar */
.dash-topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dash-topbar__picker { min-width: 200px; max-width: 320px; }
.dash-topbar__picker .ec-pf__input { width: 100%; }

/* Capacity bar inside event detail */
.dash-cap-bar { margin: 4px 0 16px; }
.dash-cap-bar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dash-cap-bar__track { height: 8px; background: var(--border-strong); border-radius: 999px; overflow: hidden; }
.dash-cap-bar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--violet-2), var(--cyan-2)); }

/* Revenue + Interest same-row layout */
.dash-rev-row { display: flex; align-items: stretch; gap: 14px; margin-bottom: 16px; }
.dash-rev-row .tnt-hero { flex: 1; min-width: 0; margin-bottom: 0; }
.dash-rev-row .dash-interest { flex-shrink: 0; width: 240px; }
@media (max-width: 760px) { .dash-rev-row { flex-direction: column; } .dash-rev-row .dash-interest { width: auto; } }

/* Interest Collection card */
.dash-interest {
  padding: 22px 24px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 190px;
  background: rgba(139,92,246,.10);
  border-color: rgba(139,92,246,.28) !important;
}
.dash-interest::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--violet), var(--violet-2));
}
/* Decorative glow blob behind the number */
.dash-interest::after {
  content: ""; position: absolute; bottom: -30px; right: -20px;
  width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,.18), transparent 70%);
  pointer-events: none;
}
.dash-interest__avatars {
  display: flex; align-items: center;
  margin-bottom: auto; padding-bottom: 18px;
}
.dash-interest__av {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid rgba(30,32,48,.6);
  margin-right: -10px; flex-shrink: 0;
}
.dash-interest__av:nth-child(1) { background: linear-gradient(135deg, #7C3AED, #8B5CF6); }
.dash-interest__av:nth-child(2) { background: linear-gradient(135deg, #8B5CF6, #A78BFA); }
.dash-interest__av:nth-child(3) { background: linear-gradient(135deg, #6D28D9, #7C3AED); }
.dash-interest__av:nth-child(4) { background: linear-gradient(135deg, #A78BFA, #C4B5FD); }
.dash-interest__av:nth-child(5) { background: rgba(139,92,246,.4); }
.dash-interest__av--more {
  background: rgba(139,92,246,.2); color: var(--violet-2);
  font: 700 9px/1 var(--f-mono); display: flex; align-items: center; justify-content: center;
  border-color: rgba(139,92,246,.3);
}
.dash-interest__k {
  font: 600 9px/1 var(--f-mono); text-transform: uppercase;
  letter-spacing: .15em; color: var(--violet-2); margin-bottom: 6px; opacity: .8;
}
.dash-interest__v {
  font: 800 60px/1 var(--f-sans); letter-spacing: -0.05em;
  color: var(--text-paper); margin-bottom: 6px;
}
.dash-interest__sub {
  font: 400 12px/1.4 var(--f-sans); color: var(--text-muted);
}

/* Timestamp + empty state */
.dash-ts { font: 400 11px/1 var(--f-mono); color: var(--text-subtle); margin-top: 14px; }
.dash-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 40px 20px; text-align: center;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.015);
}
.dash-empty__icon { font-size: 32px; opacity: .4; margin-bottom: 4px; }
.dash-empty__title { font: 600 16px/1.2 var(--f-sans); color: var(--text-display); }
.dash-empty__sub { font: 400 12.5px/1.5 var(--f-sans); color: var(--text-muted); max-width: 36ch; }
.dash-empty .btn { margin-top: 6px; }

@media (max-width: 900px) { .dash-topbar__picker { max-width: 100%; } }

/* Tenant event breakdown (kept for backwards compat with _dashboard_event_detail.html) */
.tnt-eb__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tnt-eb__name  { font: 600 16px/1.2 var(--f-sans); letter-spacing: -0.02em; color: var(--text-display); }
.tnt-eb__grid  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tnt-eb__stat  {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 13px; border-radius: 10px;
  background: var(--btn-bg); border: 1px solid var(--hairline);
}
.tnt-eb__k { font: 500 10px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--text-subtle); }
.tnt-eb__v { font: 600 22px/1.1 var(--f-sans); letter-spacing: -0.02em; margin: 2px 0; }
@media (max-width: 980px) { .tnt-eb__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .tnt-eb__grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Phase 31 — Mobile responsive shell
   Addresses impeccable adapt P0/P1 findings:
   P0: sidebar drawer, body overflow unlock, topbar grid-column
   P1: 44px touch targets (coarse pointer), safe-area insets,
       data grid → card reflow, topbar padding reduction
   ===================================================================== */
@media (max-width: 768px) {
  /* Grid: single column — topbar + content stack vertically */
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
  }
  .topbar  { grid-column: 1; padding: 0 12px; gap: 10px; }
  .content { grid-column: 1; padding: 20px 16px 80px; }

  /* Sidebar becomes a fixed off-screen drawer */
  .sidebar {
    grid-row: unset;
    position: fixed;
    top: 0; left: calc(-1 * var(--sidebar-w)); bottom: 0;
    width: var(--sidebar-w); z-index: 200;
    transition: left .28s cubic-bezier(.2,.8,.2,1);
    box-shadow: 4px 0 32px rgba(0,0,0,.4);
  }
  /* Alpine data-sidebar="expanded" opens the drawer */
  .app[data-sidebar="expanded"] ~ .sidebar-placeholder,
  .app:not([data-sidebar="collapsed"]) + .mob-overlay { display: block; }
  .sidebar.mob-open { left: 0; }

  /* Safe-area insets (notch / home-bar) */
  .topbar  { padding-top: env(safe-area-inset-top, 0); }
  .sidebar { padding-bottom: env(safe-area-inset-bottom, 0); }
  .topbar  { padding-left: max(12px, env(safe-area-inset-left, 0)); }

  /* Hide desktop-only topbar-search on very small screens */
  @media (max-width: 480px) {
    .topbar-search { display: none; }
  }
}

/* Mobile overlay backdrop */
.mob-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 199; cursor: pointer;
}
@media (min-width: 769px) { .mob-overlay { display: none !important; } }

/* 44px touch targets on coarse-pointer (touch) devices */
@media (pointer: coarse) {
  .nav-item    { min-height: 44px; padding: 10px 12px; }
  .btn         { min-height: 44px; padding: 10px 18px; }
  .icon-btn    { width: 44px; height: 44px; }
  .toggle-sidebar { width: 44px; height: 44px; }
  .theme-toggle   { width: 44px; height: 44px; }
  .topbar-search input { height: 44px; }
}

/* Data grid → card layout on narrow screens */
@media (max-width: 640px) {
  /* Hide column headers — data-label attrs carry them per-cell */
  .dg-head { display: none !important; }
  /* Each row becomes a block card */
  .dg-row {
    display: block !important;
    padding: 12px 16px;
    border-bottom: 1px solid var(--hairline);
  }
  .dg-cell {
    display: block !important;
    width: 100% !important;
    padding: 4px 0 !important;
    border: none !important;
  }
  /* data-label becomes the column header inline */
  .dg-cell[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--f-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--text-subtle);
    margin-bottom: 2px;
  }
  .dg-cell--hide-mob { display: none !important; }
}