/* ═══════════════════════════════════════════════════════
   RESET & ROOT
═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  --purple:       #7c3aed;
  --purple-2:     #6d28d9;
  --purple-brand: #8b5cf6;
  --link:         #38bdf8;
  --ink:          #f8fafc;
  --ink-60:       #94a3b8;
  --ink-40:       #64748b;
  --bg-page:      #090d16;
  --card-border:  rgba(255, 255, 255, 0.08);
  --field-bg:     rgba(15, 23, 42, 0.8);
  --white:        rgba(20, 29, 47, 0.65);
  --male:         #00f0ff;
  --male-bg:      rgba(0, 240, 255, 0.15);
  --female:       #f43f5e;
  --female-bg:    rgba(244, 63, 94, 0.15);
  --in-green:     #38bdf8;
  --in-bg:        rgba(56, 189, 248, 0.15);
  --out-red:      #fb923c;
  --out-bg:       rgba(251, 146, 60, 0.15);
  --down-red:     #ef4444;
  --font-d:       'Plus Jakarta Sans', 'Montserrat', sans-serif;
  --font-b:       'Inter', sans-serif;
  --font-brand:   'Plus Jakarta Sans', 'Montserrat', sans-serif;
  --logo-icon-uri: url("data:image/png;base64,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");
}

html, body {
  height: 100%;
  font-family: var(--font-b);
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
}

/* Desktop: dark stage, phone centered at iPhone 16 size.
   Mobile: phone fills the real viewport. */
body {
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background: #0A0C14;
}

/* ═══════════════════════════════════════════════════════
   PHONE — iPhone 16 logical viewport: 393 × 852
═══════════════════════════════════════════════════════ */
.phone {
  position: relative;
  width: 393px;
  height: min(852px, 100dvh);
  overflow: hidden;
  background: var(--bg-page);
  isolation: isolate;
  border-radius: 40px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
/* On an actual phone: edge to edge, no fake bezel radius */
@media (max-width: 480px) {
  .phone {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Screens stack inside the phone; JS swaps them */
.app-screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transform: translateX(24px);
  transition: opacity 280ms ease, transform 280ms ease, visibility 0s 280ms;
}
.app-screen.active {
  opacity: 1; visibility: visible;
  transform: translateX(0);
  transition: opacity 280ms ease, transform 280ms ease;
}

/* ═══════════════════════════════════════════════════════
   SCREEN 1 — LOGIN
═══════════════════════════════════════════════════════ */
#screen-login { background: #060A16; }

.login-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(rgba(56, 189, 248, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.035) 1px, transparent 1px),
    radial-gradient(120% 60% at 20% 12%, #1B2540 0%, transparent 55%),
    radial-gradient(120% 70% at 85% 8%, #12233B 0%, transparent 60%),
    linear-gradient(180deg, #060A16 0%, #08101F 40%, #061019 100%);
  background-size: 20px 20px, 20px 20px, auto, auto, auto;
}
.login-bg::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(80% 45% at 30% 78%, rgba(38,214,167,0.28) 0%, transparent 60%),
    radial-gradient(70% 40% at 70% 88%, rgba(46,168,224,0.30) 0%, transparent 62%),
    radial-gradient(60% 50% at 50% 100%, rgba(24,120,200,0.30) 0%, transparent 65%),
    radial-gradient(50% 30% at 85% 60%, rgba(64,224,180,0.16) 0%, transparent 60%);
  filter: blur(6px);
  animation: aurora 14s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translateY(0) scale(1);       opacity: 0.9; }
  100% { transform: translateY(-14px) scale(1.06); opacity: 1; }
}
.stars {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 14%, rgba(255,255,255,0.9) 50%, transparent),
    radial-gradient(1.2px 1.2px at 28% 8%,  rgba(255,255,255,0.7) 50%, transparent),
    radial-gradient(1px 1px   at 44% 18%,   rgba(255,255,255,0.8) 50%, transparent),
    radial-gradient(1.3px 1.3px at 66% 10%, rgba(255,255,255,0.75) 50%, transparent),
    radial-gradient(1px 1px   at 82% 20%,   rgba(255,255,255,0.7) 50%, transparent),
    radial-gradient(1.5px 1.5px at 92% 6%,  rgba(255,255,255,0.85) 50%, transparent),
    radial-gradient(1px 1px   at 8% 30%,    rgba(255,255,255,0.6) 50%, transparent),
    radial-gradient(1.2px 1.2px at 55% 26%, rgba(255,255,255,0.7) 50%, transparent),
    radial-gradient(1px 1px   at 74% 32%,   rgba(255,255,255,0.6) 50%, transparent),
    radial-gradient(1.4px 1.4px at 36% 40%, rgba(255,255,255,0.5) 50%, transparent);
  opacity: 0.9;
}

.card-wrap {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
}
.card {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 26px;
  padding: 30px 24px 30px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 26px;
}
.title { font-family: var(--font-d); font-size: 30px; font-weight: 800; letter-spacing: -1px; color: var(--ink); }
.brand { display: flex; align-items: center; gap: 9px; }
.brand-logo-img {
  display: inline-block;
  width: 36px; height: 36px;
  background-image: var(--logo-icon-uri);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.brand-text { font-family: var(--font-brand); font-size: 21px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); }

.field { margin-bottom: 18px; }
.label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 9px; }
.input-wrap { position: relative; }
.input {
  width: 100%; height: 54px;
  background: var(--field-bg);
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  padding: 0 16px;
  font-family: var(--font-b); font-size: 15px; color: var(--ink);
  outline: none;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.input::placeholder { color: var(--ink-40); }
.input:focus { border-color: var(--purple-brand); background: rgba(15, 23, 42, 0.95); box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.20); }
.input.pw { padding-right: 50px; letter-spacing: 2px; }
.input.pw::placeholder { letter-spacing: normal; }

.eye {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  width: 34px; height: 34px; border: none; background: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-40); border-radius: 8px;
}
.eye:active { background: rgba(255,255,255,0.08); }

.row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 0 24px;
}
.remember { display: flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.check {
  width: 22px; height: 22px; border-radius: 6px;
  border: 1.5px solid var(--card-border); background: var(--field-bg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background 150ms ease, border-color 150ms ease;
}
.check.on { background: var(--purple); border-color: var(--purple); }
.check svg { opacity: 0; transition: opacity 120ms ease; }
.check.on svg { opacity: 1; }
.remember-text { font-size: 14px; color: var(--ink-60); }
.forgot { font-size: 14px; font-weight: 600; color: var(--link); text-decoration: none; }
.forgot:active { opacity: 0.7; }

.signin {
  width: 100%; height: 56px; border: none; border-radius: 14px;
  background: var(--purple);
  color: #fff; font-family: var(--font-b); font-size: 17px; font-weight: 700;
  letter-spacing: -0.2px; cursor: pointer;
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.35);
  transition: transform 120ms ease, box-shadow 160ms ease, background 160ms ease;
}
.signin:hover { background: var(--purple-2); box-shadow: 0 10px 26px rgba(124, 58, 237, 0.42); }
.signin:active { transform: translateY(1px) scale(0.995); box-shadow: 0 4px 14px rgba(124, 58, 237, 0.32); }

.foot { text-align: center; margin-top: 20px; font-size: 14px; color: var(--ink-60); }
.foot a { color: var(--link); font-weight: 600; text-decoration: none; }
.foot a:active { opacity: 0.7; }

/* ═══════════════════════════════════════════════════════
   SCREEN 2 — DASHBOARD
═══════════════════════════════════════════════════════ */
#screen-dash { background: var(--bg-page); }

/* ── Compact sticky app header ──
   Mobile pattern: one slim bar carries brand, alert, refresh.
   The page title lives in the scroll body and scrolls away. */
.appbar {
  display: flex; flex-direction: column; gap: 9px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
  background: rgba(11, 15, 25, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
  z-index: 10;
}
/* Each row of the two-row header: row 1 = venue brand (left) + OlyRetail brand
   (right); row 2 = screen-nav pill (left) + icon action e.g. export/refresh (right). */
.appbar-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.appbar .brand { gap: 8px; }
.appbar .brand-logo-img { width: 26px; height: 26px; }
.appbar .brand-text { font-size: 16.5px; font-weight: 800; letter-spacing: -0.4px; }

/* Venue/client brand block — top-left, replaces the old "Venue ABC" label */
.venue-brand {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.32);
}
.venue-brand .venue-name { font-family: var(--font-b); font-size: 12px; font-weight: 800; letter-spacing: -0.1px; color: #fff; line-height: 1.2; }
.venue-brand .venue-sub { font-size: 9.5px; font-weight: 600; color: var(--ink-60); line-height: 1.2; }

.icon-btn {
  width: 34px; height: 34px;
  border: 1px solid var(--card-border); background: var(--white);
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-60);
  position: relative;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.icon-btn:active { background: rgba(255, 255, 255, 0.08); }
.icon-btn svg { transition: transform 500ms ease; }
.icon-btn.spinning svg { transform: rotate(360deg); }

.insights-btn {
  display: flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px 0 4px; border-radius: 999px;
  border: 1px solid var(--card-border); background: var(--white);
  color: var(--ink); font-family: var(--font-b); font-size: 11.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.insights-btn:active { background: rgba(255, 255, 255, 0.1); }
.insights-btn .ib-icon {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--purple-brand);
  display: flex; align-items: center; justify-content: center;
}

/* ── BOTTOM NAV: floating liquid-glass pill with the 4 dashboard tabs.
   Icon-only items; the active one expands with its label (Book Cafe .bnav
   pattern). Optics come from liquidGlass(); this CSS is the material
   dressing that makes it read as glass. ── */
.bnav {
  position: absolute;
  left: 16px; right: 16px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  border-radius: 999px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px;
  z-index: 60;
  background: linear-gradient(180deg,
    rgba(20, 28, 47, 0.85), rgba(15, 23, 42, 0.75));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 18px 44px rgba(0,0,0,0.5),
    0 2px 8px rgba(0,0,0,0.2),
    inset 0 1px 1px rgba(255,255,255,0.1),
    inset 0 -8px 20px rgba(0,0,0,0.1),
    inset 0 0 0 1px rgba(255,255,255,0.05);
}
/* Safari/Firefox frosted fallback needs a touch more body */
.bnav.lg-fallback {
  background: linear-gradient(180deg,
    rgba(20, 28, 47, 0.95), rgba(15, 23, 42, 0.85));
}
.bnav-item {
  height: 48px; min-width: 48px;
  padding: 0 12px;
  border: none; background: none; cursor: pointer;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  color: var(--ink-60);
  font-family: var(--font-b); font-size: 12.5px; font-weight: 700;
  white-space: nowrap;
  transition: background 180ms ease, color 180ms ease, padding 180ms ease;
}
.bnav-item svg { flex-shrink: 0; }
.bnav-item .bnav-lbl {
  display: none;
}
.bnav-item.on {
  background: var(--purple);
  color: #fff;
  padding: 0 16px;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.38);
}
.bnav-item.on .bnav-lbl { display: inline; }
.bnav-item:not(.on):active { background: rgba(255,255,255,0.08); }

/* ── Scroll body ── */
.dash-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.035) 1px, transparent 1px);
  background-size: 20px 20px;
}
.dash-body::-webkit-scrollbar { display: none; }

.dash-title-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 2px 2px;
}
.dash-title-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-title-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dash-title { font-family: var(--font-d); font-size: 24px; font-weight: 800; letter-spacing: -0.8px; }
.refreshed-note { font-size: 11px; color: var(--ink-40); white-space: nowrap; }
.op-pill {
  display: inline-block;
  font-size: 11px; font-weight: 600; color: var(--link);
  border: 1px solid rgba(123, 63, 237, 0.3); border-radius: 999px;
  padding: 4px 10px; background: rgba(123, 63, 237, 0.12);
  margin: 8px 0 14px;
}

.panel { display: block; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.panel.active { display: block; }

/* ── Section cards ── */
.section {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 16px 14px 14px;
  margin-bottom: 14px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
}
.section-title {
  font-family: var(--font-d);
  font-size: 16.5px; font-weight: 700; letter-spacing: -0.3px;
  margin-bottom: 13px;
  padding: 0 2px;
}

/* ── Gender split bar (shared) ── */
.split {
  display: flex; border-radius: 999px; overflow: hidden;
  font-size: 12.5px; font-weight: 700;
}
.split .m, .split .f {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 4px; min-width: 46px;
}
.split .m { background: var(--male-bg); color: var(--male); }
.split .f { background: var(--female-bg); color: var(--female); }

/* ── Hero stat ── */
.hero-stat {
  border: 1px solid var(--card-border); border-radius: 14px;
  padding: 15px 14px 13px;
  margin-bottom: 12px;
  text-align: center;
}
.hero-stat .hs-label {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-60);
  margin-bottom: 5px;
}
.hero-stat .hs-value {
  font-family: var(--font-d); font-size: 38px; font-weight: 800; letter-spacing: -1.5px;
  margin-bottom: 11px; line-height: 1;
}
.hero-stat .split .m, .hero-stat .split .f { flex: 1; }

/* ── Horizontal swipe strip (age cards) ── */
.strip {
  display: flex; gap: 10px;
  overflow-x: auto;
  margin: 0 -14px; padding: 2px 14px 4px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.strip::-webkit-scrollbar { display: none; }
.age-card {
  flex: 0 0 136px;
  scroll-snap-align: start;
  border: 1px solid var(--card-border); border-radius: 14px;
  padding: 12px 10px 10px;
  text-align: center;
}
.age-card .ac-label {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--ink-60);
  margin-bottom: 5px; white-space: nowrap;
}
.age-card .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.age-card .ac-value {
  font-family: var(--font-d); font-size: 25px; font-weight: 800; letter-spacing: -0.8px;
  margin-bottom: 9px; line-height: 1;
}
.age-card .split { font-size: 11px; }
.age-card .split .m, .age-card .split .f { padding: 5px 2px; flex: 1; }

/* ── Gate rows: mobile list, not a grid ──
   Each gate is one scannable row: name | in/out | peak. */
.gate-list { display: flex; flex-direction: column; }
.gate-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--card-border);
}
.gate-row:last-child { border-bottom: none; padding-bottom: 4px; }
.gate-row .g-name {
  font-family: var(--font-d); font-size: 14px; font-weight: 700; letter-spacing: -0.2px;
  flex: 1; min-width: 0;
}
.gate-row .g-peak { font-size: 10.5px; color: var(--ink-40); margin-top: 2px; font-family: var(--font-b); font-weight: 500; letter-spacing: 0; }
.gate-row .g-peak b { color: var(--ink-60); font-weight: 600; }
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px; padding: 6px 10px;
  font-size: 12px; font-weight: 700;
  white-space: nowrap;
}
.pill.in  { background: var(--in-bg);  color: var(--in-green); }
.pill.out { background: var(--out-bg); color: var(--out-red); }

/* ── Gate cards (grid layout, from old Live Counts design) ── */
.gate-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.gate-card {
  border: 1px solid var(--card-border); border-radius: 14px;
  padding: 12px 11px 11px;
}
.gate-card .g-name {
  font-family: var(--font-d);
  font-size: 14.5px; font-weight: 700; letter-spacing: -0.2px;
  text-align: center; margin-bottom: 10px;
}
.flow {
  display: flex; border-radius: 999px; overflow: hidden;
  font-size: 12px; font-weight: 700;
  margin-bottom: 10px;
}
.flow .in, .flow .out {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 6px 2px;
}
.flow .in  { background: var(--in-bg);  color: var(--in-green); }
.flow .out { background: var(--out-bg); color: var(--out-red); }
.flow.only-in .in { flex: 1; }
.gate-card .g-peak {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11px; color: var(--ink-40);
  border-top: 1px solid var(--card-border);
  padding-top: 9px;
}
.gate-card .g-peak b { color: var(--ink); font-weight: 700; font-size: 11.5px; }

/* ── Level rows ── */
.level-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.level-card {
  border: 1px solid var(--card-border); border-radius: 14px;
  padding: 12px 10px 10px;
  text-align: center;
}
.level-card .l-label {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--ink-60);
  margin-bottom: 4px;
}
.level-card .l-value {
  font-family: var(--font-d); font-size: 25px; font-weight: 800; letter-spacing: -0.8px;
  margin-bottom: 9px; line-height: 1;
}
.level-card .split { font-size: 11px; }
.level-card .split .m, .level-card .split .f { padding: 5px 2px; flex: 1; }

/* ── Comparison ── */
.compare-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 13px; padding: 0 2px;
}
.compare-head .section-title { margin-bottom: 0; }
.mode-toggle {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg-page); border-radius: 999px;
  padding: 5px 11px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-60);
  cursor: pointer; user-select: none; flex-shrink: 0;
}
.mode-toggle .knob-track {
  width: 32px; height: 18px; border-radius: 999px;
  background: var(--purple-brand);
  position: relative; flex-shrink: 0;
}
.mode-toggle .knob {
  position: absolute; top: 2.5px; left: 3px;
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  transition: left 180ms ease;
}
.mode-toggle.age .knob { left: 16px; }
.mode-toggle.floor .knob { left: 16px; }
.mode-toggle .mt-label.on { color: var(--ink); font-weight: 700; }

.gft-subhead {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-d); font-size: 13px; font-weight: 700;
  margin: 2px 2px 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--card-border);
}
.gft-subhead .sort-ico { font-size: 11px; color: var(--ink-40); font-weight: 600; }

.cmp-card {
  border: 1px solid var(--card-border); border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
}
.cmp-card:last-child { margin-bottom: 0; }
.date-select {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--card-border); border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 13px;
  cursor: pointer;
}
.date-select:active { background: var(--bg-page); }
.date-select .ds-text { font-size: 12px; color: var(--ink-40); }
.date-select .ds-text b { color: var(--ink); font-weight: 700; }

.cmp-body { display: flex; align-items: center; gap: 13px; }
.pie {
  flex-shrink: 0;
  width: 124px; height: 124px; border-radius: 50%;
  position: relative;
}
.pie::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.legend { flex: 1; min-width: 0; }
.legend .lg-title { font-size: 11.5px; font-style: italic; font-weight: 600; color: var(--ink-60); margin-bottom: 1px; }
.legend .lg-total { font-family: var(--font-d); font-size: 19px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 9px; }
.legend .lg-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px; }
.legend .lg-row:last-child { margin-bottom: 0; }
.legend .sw { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.legend .lg-name { color: var(--ink-60); font-weight: 600; }
.legend .lg-val { margin-left: auto; font-weight: 700; white-space: nowrap; }

/* ── Placeholder panels ── */
.placeholder { text-align: center; padding: 56px 24px; color: var(--ink-40); }
.placeholder .ph-title { font-family: var(--font-d); font-size: 17px; font-weight: 700; color: var(--ink-60); margin-bottom: 5px; }
.placeholder .ph-sub { font-size: 13px; }

/* ═══════════════════════════════════════════════════════
   TRENDS PANEL
═══════════════════════════════════════════════════════ */

/* Section head: title + a trailing control (export / segmented toggle) */
.trend-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 13px; padding: 0 2px;
}
.trend-head .section-title { margin-bottom: 0; }
.trend-head .subhead { margin: 0; }

.lc-legend.sm { gap: 12px; margin-bottom: 0; padding: 0; }
.lc-legend.sm .lc-item { gap: 5px; }
.lc-legend.sm .dot { width: 7px; height: 7px; }
.lc-legend.sm .lc-name { font-size: 10px; }
.lc-legend.sm .lc-val { font-size: 12px; margin-left: 1px; }

.icon-btn.sm { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; }

/* Filter row: wraps toggles / tabs / chip-selects above a chart */
.filter-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.filter-row.tight { margin-bottom: 10px; }

/* Two-way segmented control (Entry/Exit, Gate/Floor, Line/Bar) */
.seg2 {
  display: flex; background: var(--bg-page); border-radius: 999px;
  padding: 3px; flex-shrink: 0;
  border: 1px solid var(--card-border);
}
.seg2 button {
  border: none; background: none; cursor: pointer;
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--font-b); font-size: 11.5px; font-weight: 700; color: var(--ink-60);
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
  white-space: nowrap;
}
.seg2 button.on { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.25); }

/* H / D / W / M / Y period tabs */
.period-tabs { display: flex; gap: 5px; flex-shrink: 0; }
.period-tabs button {
  width: 27px; height: 27px; border-radius: 8px;
  border: 1px solid var(--card-border); background: var(--field-bg); cursor: pointer;
  font-family: var(--font-b); font-size: 11px; font-weight: 700; color: var(--ink-60);
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.period-tabs button.on { background: var(--purple); border-color: var(--purple); color: #fff; }

/* Decorative chip-select (Gender / Age-Group filters) */
.chip-select {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--card-border); border-radius: 999px;
  padding: 6px 10px 6px 11px; background: var(--field-bg); cursor: pointer;
  font-size: 11.5px; color: var(--ink-60); font-weight: 600; flex-shrink: 0;
}
.chip-select b { color: var(--ink); font-weight: 700; }
.chip-select svg { flex-shrink: 0; }

/* ── Donut ── */
.donut-wrap { display: flex; flex-direction: column; align-items: center; padding: 6px 0 2px; }
.donut { width: 172px; height: 172px; border-radius: 50%; position: relative; flex-shrink: 0; }
.donut::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }
.donut-hole {
  position: absolute; inset: 26px; background: #0c1322; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.donut-hole .dh-label { font-size: 11px; color: var(--ink-60); font-weight: 600; margin-bottom: 3px; }
.donut-hole .dh-value { font-family: var(--font-d); font-size: 25px; font-weight: 800; letter-spacing: -0.7px; }

/* Compact side-by-side variant, used when Gender is merged into a shared Demographics card */
.donut-wrap.compact { flex-direction: row; align-items: center; gap: 16px; padding: 2px 0; }
.donut-wrap.compact .donut { width: 82px; height: 82px; }
.donut-wrap.compact .donut-hole { inset: 13px; }
.donut-wrap.compact .donut-hole .dh-label { font-size: 8px; margin-bottom: 1px; }
.donut-wrap.compact .donut-hole .dh-value { font-size: 14px; letter-spacing: -0.4px; }
.donut-wrap.compact .legend-list { width: auto; flex: 1; margin-top: 0; }

.legend-list { width: 100%; margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.legend-list .ll-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.legend-list .sw { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.legend-list .ll-name { color: var(--ink-60); font-weight: 600; flex: 1; min-width: 0; }
.legend-list .ll-val { font-weight: 700; white-space: nowrap; }
.legend-list .ll-pct { color: var(--ink-40); font-weight: 500; margin-left: 5px; }

.rank-list.compact { gap: 10px; }
.rank-list.compact .rr-top { margin-bottom: 5px; }
.rank-list.compact .rr-bar-track { height: 6px; }

.subhead {
  font-family: var(--font-d); font-size: 11.5px; font-weight: 700; color: var(--ink-60);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin: 4px 2px 10px;
}

/* ── Horizontally scrolling stacked-bar chart (hourly) ── */
.chart-scroll {
  display: flex; align-items: flex-end; gap: 15px;
  overflow-x: auto; scrollbar-width: none;
  margin: 0 -14px; padding: 4px 14px 6px;
}
.chart-scroll::-webkit-scrollbar { display: none; }
.hbar { flex: 0 0 18px; display: flex; flex-direction: column; align-items: center; }
.hbar .hbar-value { font-size: 9.5px; font-weight: 700; color: var(--ink-60); margin-bottom: 4px; white-space: nowrap; }
.hbar .hbar-stack {
  width: 16px; height: 148px; border-radius: 5px 5px 3px 3px; overflow: hidden;
  display: flex; flex-direction: column-reverse; background: var(--bg-page);
}
.hbar .hbar-seg { width: 100%; flex-shrink: 0; }
.hbar .hbar-label { font-size: 9.5px; color: var(--ink-40); margin-top: 7px; white-space: nowrap; }

/* ── Line chart ── */
.lc-legend { display: flex; gap: 18px; margin-bottom: 12px; padding: 0 2px; }
.lc-legend .lc-item { display: flex; align-items: center; gap: 7px; }
.lc-legend .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.lc-legend .lc-name { font-size: 11.5px; color: var(--ink-60); font-weight: 600; }
.lc-legend .lc-val { font-family: var(--font-d); font-size: 15px; font-weight: 800; margin-left: 2px; }
.linechart-wrap svg { display: block; width: 100%; height: auto; }
.lc-axis { display: flex; justify-content: space-between; margin-top: 6px; padding: 0 2px; }
.lc-axis span { font-size: 9.5px; color: var(--ink-40); }

.eo-chart-row { display: flex; align-items: flex-start; gap: 6px; }
.eo-yaxis {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 150px; flex-shrink: 0; padding-bottom: 1px;
}
.eo-yaxis span { font-size: 9px; font-weight: 600; color: var(--ink-40); line-height: 1; }
.eo-chart-col { flex: 1; min-width: 0; }

/* Bar-mode alternative for hourly entry/exit */
.eo-bars { display: flex; align-items: flex-end; gap: 8px; padding: 0 2px; }
.eo-bars .eo-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.eo-bars .eo-pair { display: flex; align-items: flex-end; gap: 3px; height: 150px; flex-shrink: 0; }
.eo-bars .eo-seg { width: 6px; border-radius: 3px 3px 1px 1px; }
.eo-bars .eo-lbl { font-size: 8.5px; line-height: 11px; height: 11px; color: var(--ink-40); margin-top: 6px; }

/* ── Gate / Floor legend chips (wraps under stacked chart) ── */
.gate-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 4px 2px 0; margin-top: 4px; border-top: 1px solid var(--card-border); padding-top: 12px; }
.gate-legend .gl-item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-60); font-weight: 600; }
.gate-legend .sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* ── Ranked bar list (Gate / Floor Trends) ── */
.rank-list { display: flex; flex-direction: column; gap: 15px; }
.rank-row .rr-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.rank-row .rr-name { font-family: var(--font-d); font-size: 13.5px; font-weight: 700; letter-spacing: -0.2px; }
.rank-row .rr-val { font-size: 12px; color: var(--ink-60); font-weight: 600; white-space: nowrap; }
.rank-row .rr-val b { color: var(--ink); font-weight: 700; }
.rank-row .rr-bar-track { height: 9px; border-radius: 999px; background: var(--bg-page); overflow: hidden; }
.rank-row .rr-bar-fill { height: 100%; border-radius: 999px; display: flex; overflow: hidden; }

.rank-row .rr-bar-fill .m { background: var(--male); }
.rank-row .rr-bar-fill .f { background: var(--female); }
.dot-mini { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* ── Floor Trends: single-line grid card — icon+label, big total,
   Male/Female split pill, one column per floor, side by side. ── */
.floor-trend-panel {
  border: 1px solid var(--card-border); background: var(--white); border-radius: 16px;
  padding: 12px 6px 10px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.floor-trend-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.ftc { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 4px; position: relative; min-width: 0; }
.ftc:not(:first-child)::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: var(--card-border);
}
.ftc-head { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ftc-ico { width: 15px; height: 15px; border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ftc-name { font-size: 10px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.ftc-total { font-family: var(--font-d); font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -0.3px; }
.ftc-pill {
  display: flex; align-items: center; border-radius: 999px; overflow: hidden;
  font-size: 9px; font-weight: 700; width: 100%; margin-top: 1px;
}
.ftc-pill .ftc-m, .ftc-pill .ftc-f {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 2px; padding: 4px 0; min-width: 0;
}
.ftc-pill .ftc-m { background: rgba(30,150,232,0.16); color: #38BDF8; }
.ftc-pill .ftc-f { background: rgba(232,24,109,0.16); color: #F43F7A; }
.ftc-pill .ftc-m svg, .ftc-pill .ftc-f svg { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════
   ZONE ANALYSIS CUSTOM STYLES
   ═══════════════════════════════════════════════════════ */

/* KPI Panel */
.zn-kpi-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.zn-kpi-card {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.zn-kpi-header {
  padding: 8px 12px;
  color: #fff;
  font-family: var(--font-b);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.zn-kpi-body {
  padding: 12px;
}
.zn-kpi-val {
  font-family: var(--font-d);
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zn-kpi-val small {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-60);
}

/* Heatmap Wrapper & Canvas */
.heat-wrap {
  position: relative;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  margin-bottom: 14px;
}
.heat-canvas {
  height: 280px;
  overflow: hidden;
  touch-action: none;
  position: relative;
  background: rgba(11, 19, 36, 0.65);
}
.zn-canvas-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-origin: center center;
}
.zn-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.zn-pins-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.zn-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: auto;
  border: none;
  background: none;
  cursor: pointer;
}
.zn-pin-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--purple-brand);
  border: 1.5px solid #fff;
  box-shadow: 0 0 8px var(--purple-brand);
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}
.zn-pin.on .zn-pin-dot {
  border-color: #fff;
  background: var(--purple);
  transform: scale(1.2);
  box-shadow: 0 0 12px var(--purple);
}
.zn-pin-label {
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: rgba(15, 23, 42, 0.85);
  padding: 2px 6px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  border: 0.5px solid var(--card-border);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.heat-zoom-ctrl {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}
.heat-zoom-ctrl button {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--card-border);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-60);
  cursor: pointer;
}
.heat-zoom-ctrl button:active {
  background: var(--field-bg);
}
.heat-tooltip {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
  white-space: nowrap;
  z-index: 6;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.heat-tooltip.show {
  opacity: 1;
}
.heat-tooltip span {
  display: block;
  font-size: 9.5px;
  color: var(--ink-40);
  margin-top: 1px;
}

/* Density Legend */
.zn-leg-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 2px 14px;
}
.zn-density-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.zn-density-lbl {
  font-size: 11px;
  color: var(--ink-60);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.zn-density-gradient {
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 28px;
  border-radius: 14px;
  background: linear-gradient(90deg, #159A52, #F5B70A, #E5745B, #D93131);
  padding: 0 6px;
}
.zn-d-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  color: #fff;
}
.zn-d-mark b {
  font-size: 9px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.zn-d-mark small {
  font-size: 7.5px;
  font-weight: 600;
  opacity: 0.9;
}

/* Date Picker / Timeframe Controls (Historical Mode) */
.heat-hist-controls {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
}
.hist-field {
  margin-bottom: 10px;
}
.hist-field:last-child {
  margin-bottom: 0;
}
.hist-lbl {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-60);
  margin-bottom: 6px;
}
.custom-date-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--field-bg);
  font-family: var(--font-b);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}
.custom-date-btn:active {
  background: rgba(255, 255, 255, 0.08);
}
.custom-date-btn svg {
  color: var(--purple-brand);
}

/* Range Slider Styling */
.range-slider-container {
  padding: 10px 6px 14px;
  position: relative;
}
.range-slider-track {
  height: 4px;
  background: var(--card-border);
  border-radius: 2px;
  position: relative;
}
.range-slider-fill {
  height: 100%;
  background: var(--purple-brand);
  position: absolute;
  border-radius: 2px;
}
.range-slider-handle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--purple-brand);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  touch-action: none;
}
.range-slider-val {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--ink-60);
  font-weight: 600;
  margin-top: 8px;
}

/* Treemap Styling */
.zone-treemap {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1fr;
  grid-template-rows: 120px 100px 110px;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 14px;
}
.tm-block {
  border-radius: 12px;
  padding: 10px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: transform 120ms ease, opacity 120ms ease;
  position: relative;
  overflow: hidden;
}
.tm-block:active {
  transform: scale(0.97);
  opacity: 0.9;
}
.tm-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tm-title {
  font-family: var(--font-d);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.tm-pct {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.85;
}
.tm-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tm-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.22);
  padding: 3px 6px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 700;
}
.tm-designer { grid-column: 1; grid-row: 1 / 3; background: rgba(62, 94, 200, 0.32); border: 1.5px solid #38bdf8; }
.tm-fashion  { grid-column: 2; grid-row: 1 / 3; background: rgba(228, 91, 37, 0.32); border: 1.5px solid #fb923c; }
.tm-watches  { grid-column: 1 / 3; grid-row: 3; background: rgba(69, 84, 97, 0.32); border: 1.5px solid #94a3b8; }
.tm-beauty   { grid-column: 3; grid-row: 1; background: rgba(0, 121, 107, 0.32); border: 1.5px solid #34d399; }
.tm-designer-in { grid-column: 3; grid-row: 2; background: rgba(244, 162, 19, 0.32); border: 1.5px solid #facc15; }
.tm-food     { grid-column: 3; grid-row: 3; background: rgba(123, 63, 228, 0.32); border: 1.5px solid #a78bfa; }

/* Filter select wrapping */
.filter-dropdown-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.filter-dropdown-row .field-select {
  flex: 1;
}
.field-select select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--card-border);
  background: var(--white);
  border-radius: 10px;
  padding: 0 12px;
  font-family: var(--font-b);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-60);
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%2355555F' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 28px;
}
.field-select select:focus {
  border-color: var(--purple-brand);
}

/* Zone Detail Panel Styling */
.zone-detail-panel {
  display: none; /* JS toggles active block to display: flex */
  flex-direction: column;
}
.zone-detail-panel.active {
  display: flex;
}
.zd-header {
  background: #8d4315; /* Wood/leather brown */
  color: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.zd-back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.18);
  border: none;
  color: #fff;
  font-family: var(--font-b);
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.zd-back-btn:active {
  background: rgba(255,255,255,0.28);
}
.zd-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  margin: 0 10px;
}
.zd-title {
  font-family: var(--font-d);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.zd-subtitle {
  font-size: 10px;
  opacity: 0.8;
}
.zd-percentage {
  font-family: var(--font-d);
  font-size: 15px;
  font-weight: 800;
}
.zd-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.zd-stat-card {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 12px 10px;
  position: relative;
  overflow: hidden;
}
.zd-stat-card .icon-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-60);
  margin-bottom: 6px;
}
.zd-stat-card .icon-label-row svg {
  color: var(--purple-brand);
}
.zd-stat-card .stat-val {
  font-family: var(--font-d);
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 4px;
}
.zd-stat-card .stat-trend {
  font-size: 9.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--down-red);
}
.zd-stat-card .stat-trend.up {
  color: var(--in-green);
}
.zd-age-card {
  border: 1px solid var(--card-border);
  background: var(--white);
  border-radius: 14px;
  padding: 12px 10px;
  min-width: 142px;
  flex: 0 0 142px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.zd-age-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 5px;
}
.zd-age-title-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.zd-age-data-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-60);
  line-height: 1.3;
}
.zd-age-data-row span:last-child {
  font-weight: 700;
  color: var(--ink);
}
.zd-age-progress-bar {
  height: 4px;
  background: var(--field-bg);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
}
.zd-age-progress-fill {
  height: 100%;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════
   HEALTH MONITORING STYLES
   ═══════════════════════════════════════════════════════ */

.health-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg-page);
  z-index: 80;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 280ms ease, transform 280ms ease, visibility 0s 280ms;
}
.health-overlay.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 280ms ease, transform 280ms ease;
}
.health-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 16px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.health-body::-webkit-scrollbar { display: none; }
.health-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  background: var(--white);
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}
.health-header .back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--ink);
  cursor: pointer;
  padding: 4px;
}
.health-header .title-wrap {
  flex: 1;
}
.health-header .title {
  font-family: var(--font-d);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
.health-header .export-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--card-border);
  background: var(--white);
  padding: 6px 12px;
  border-radius: 8px;
  font-family: var(--font-b);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-60);
  cursor: pointer;
}
.health-header .export-btn:active {
  background: var(--bg-page);
}

/* Toggle Inactive Cameras switch bar */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.switch-lbl {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-60);
}
.switch-btn {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: var(--card-border);
  position: relative;
  cursor: pointer;
  transition: background 180ms ease;
}
.switch-btn.on {
  background: var(--purple);
}
.switch-knob {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: left 180ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.switch-btn.on .switch-knob {
  left: 23px;
}

/* Search bar */
.search-row {
  display: flex;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.search-icon {
  color: var(--ink-40);
  margin-right: 8px;
  flex-shrink: 0;
}
.search-input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-family: var(--font-b);
  font-size: 13.5px;
  color: var(--ink);
}
.search-input::placeholder {
  color: #A6A6B0;
}

/* Alert horizontal scroll strip */
.alert-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -16px 14px;
  padding: 2px 16px 4px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.alert-strip::-webkit-scrollbar {
  display: none;
}
.alert-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  border: 1px solid var(--card-border);
  background: var(--white);
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
  transition: border-color 150ms ease, background 150ms ease;
}
.alert-chip.on {
  border-color: var(--purple-brand);
  background: rgba(90, 84, 200, 0.05);
}
.alert-chip .chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.alert-chip .chip-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-60);
}
.alert-chip.on .chip-name {
  color: var(--purple-brand);
}
.alert-chip .chip-count {
  font-family: var(--font-d);
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
}
.alert-chip.on .chip-count {
  color: var(--purple-brand);
}

/* Camera Card list */
.cam-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cam-card {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.cam-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cam-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cam-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.cam-status-dot.active {
  background: var(--in-green);
  box-shadow: 0 0 0 3px rgba(21, 154, 82, 0.2);
}
.cam-status-dot.inactive {
  background: var(--out-red);
  box-shadow: 0 0 0 3px rgba(217, 49, 49, 0.2);
}
.cam-card-name {
  font-family: var(--font-d);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.2px;
}
.cam-card-deploy {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-40);
  background: var(--bg-page);
  padding: 2px 6px;
  border-radius: 4px;
}
.cam-card-sync {
  font-size: 10.5px;
  color: var(--ink-40);
  font-weight: 500;
}
.cam-card-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.cam-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
  margin-right: 12px;
}
.cam-pill {
  font-size: 9.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.cam-pill.healthy {
  background: var(--in-bg);
  color: var(--in-green);
}
.cam-pill.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}
.cam-pill.danger {
  background: var(--out-bg);
  color: var(--out-red);
}
.cam-pill.offline {
  background: var(--field-bg);
  color: var(--ink-60);
}
.cam-log-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-page);
  color: var(--purple-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.cam-log-btn:active {
  background: var(--card-border);
}

/* Activity Logs Modal overlay */
.logs-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 0s 220ms;
}
.logs-backdrop.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease;
}
.logs-modal {
  width: 100%;
  max-width: 350px;
  background: var(--white);
  border-radius: 22px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  max-height: 80%;
  transform: scale(0.9);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
.logs-backdrop.active .logs-modal {
  transform: scale(1);
}
.logs-modal-header {
  padding: 16px;
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.logs-modal-title-wrap {
  flex: 1;
  margin-right: 12px;
}
.logs-modal-title {
  font-family: var(--font-d);
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
}
.logs-modal-subtitle {
  font-size: 11px;
  color: var(--ink-40);
  margin-top: 2px;
}
.logs-modal-close {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--field-bg);
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-family: var(--font-b);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-60);
  cursor: pointer;
}
.logs-modal-close:active {
  background: var(--card-border);
}
.logs-modal-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fbfbfb;
  border-bottom: 1px solid var(--card-border);
  font-size: 11.5px;
}
.logs-outage-pill {
  background: var(--out-bg);
  color: var(--out-red);
  padding: 3px 8px;
  border-radius: 20px;
  font-weight: 700;
}
.logs-date-btn {
  border: 1px solid var(--card-border);
  background: var(--field-bg);
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--ink-60);
  font-weight: 600;
  cursor: pointer;
}
.logs-modal-body {
  padding: 20px 16px;
  overflow-y: auto;
  scrollbar-width: none;
  flex: 1;
}
.logs-modal-body::-webkit-scrollbar { display: none; }

/* Timeline logs styles */
.timeline-wrapper {
  position: relative;
  padding-left: 32px;
}
.timeline-line {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  width: 2px;
  background: var(--card-border);
}
.timeline-item {
  position: relative;
  margin-bottom: 24px;
}
.timeline-item:last-child {
  margin-bottom: 0;
}
.timeline-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  position: absolute;
  left: -32px;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--field-bg);
  border: 1.5px solid var(--card-border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.timeline-dot.online {
  border-color: var(--in-green);
  color: var(--in-green);
  background: var(--in-bg);
}
.timeline-dot.offline {
  border-color: var(--out-red);
  color: var(--out-red);
  background: var(--out-bg);
}
.timeline-dot.angle {
  border-color: #f59e0b;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
}
.timeline-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.timeline-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.timeline-status {
  font-size: 12px;
  font-weight: 700;
}
.timeline-status.online { color: var(--in-green); }
.timeline-status.offline { color: var(--out-red); }
.timeline-status.angle { color: #f59e0b; }
.timeline-time {
  font-size: 10.5px;
  color: var(--ink-40);
  font-weight: 500;
}
.timeline-desc {
  font-size: 12px;
  color: var(--ink-60);
  line-height: 1.35;
}
.timeline-duration {
  font-size: 11px;
  color: var(--ink-40);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}

/* ── Light Mode Override Styling ── */
:root.light-mode {
  --purple:       #4A1E9E;
  --purple-2:     #5A2FB8;
  --purple-brand: #5A54C8;
  --link:         #7B3FE4;
  --ink:          #17171F;
  --ink-60:       #55555F;
  --ink-40:       #8A8A96;
  --bg-page:      #F4F4F7;
  --card-border:  #E8E8EE;
  --field-bg:     #EFEFF1;
  --white:        #FFFFFF;
  --male:         #1E96E8;
  --male-bg:      #D9EBFB;
  --female:       #E8186D;
  --female-bg:    #FBDCE9;
  --in-green:     #159A52;
  --in-bg:        #D8F0E1;
  --out-red:      #D93131;
  --out-bg:       #F8DCDC;
  --down-red:     #9E1B1B;
  --font-d:       'Bricolage Grotesque', sans-serif;
}

.light-mode .dash-body {
  background-image: none;
}
.light-mode .section {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.light-mode .bnav {
  background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.20));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 18px 44px rgba(10,12,20,0.28),
    0 2px 8px rgba(10,12,20,0.10),
    inset 0 1px 1px rgba(255,255,255,0.65),
    inset 0 -8px 20px rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.28);
}
.light-mode .bnav.lg-fallback {
  background: linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.48));
}
.light-mode .bnav-item.on {
  box-shadow: 0 6px 16px rgba(74,30,158,0.38);
}
.light-mode .bnav-item:not(.on):active {
  background: rgba(255,255,255,0.35);
}
.light-mode .appbar {
  background: var(--white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.light-mode .icon-btn {
  background: var(--white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.light-mode .icon-btn:active {
  background: var(--bg-page);
}
.light-mode .period-tabs button {
  background: #fff;
}
.light-mode .period-tabs button.on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.light-mode .chip-select {
  background: #fff;
}
.light-mode .donut-hole {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}
.light-mode .custom-date-btn {
  background: #fff;
}
.light-mode .custom-date-btn:active {
  background: var(--bg-page);
}
.light-mode .logs-date-btn {
  background: #fff;
}
.light-mode .seg2 button.on {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.light-mode .tm-designer { background: #3E5EC8; border: none; }
.light-mode .tm-fashion  { background: #E45B25; border: none; }
.light-mode .tm-watches  { background: #455461; border: none; }
.light-mode .tm-beauty   { background: #00796B; border: none; }
.light-mode .tm-designer-in { background: #F4A213; border: none; }
.light-mode .tm-food     { background: #7B3FE4; border: none; }
.light-mode .zn-pin-dot {
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.light-mode .zn-pin.on .zn-pin-dot {
  border-color: var(--purple);
  background: var(--purple);
  box-shadow: none;
}
.light-mode .zn-pin-label {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border: 0.5px solid var(--card-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.light-mode .cam-pill.warning {
  background: #fbf0e1;
  color: #b5762a;
}
.light-mode .timeline-dot.angle {
  border-color: #b5762a;
  color: #b5762a;
  background: #fbf0e1;
}
.light-mode .timeline-status.angle {
  color: #b5762a;
}
.light-mode .timeline-dot {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.light-mode .heat-canvas {
  background: #fcfcfc;
}
.light-mode .op-pill {
  border: 1px solid #D9CBF5;
  background: #F8F5FE;
}

.theme-toggle-btn {
  width: 34px; height: 34px;
  border: 1px solid var(--card-border);
  background: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-60);
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
  flex-shrink: 0;
  padding: 0;
}
.theme-toggle-btn:active {
  background: rgba(255, 255, 255, 0.08);
}
.light-mode .theme-toggle-btn {
  background: #fff;
  border-color: var(--card-border);
}
.light-mode .theme-toggle-btn:active {
  background: var(--bg-page);
}

/* ── Mall-Wide Summary KPIs Grid — themed gradient hero cards ── */
.mall-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 16px;
}
.mall-kpi-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.20);
}
.mall-kpi-card::before {
  content: ""; position: absolute; right: -30px; bottom: -42px;
  width: 112px; height: 112px; border-radius: 50%;
  background: rgba(255,255,255,0.14); z-index: 0;
}
.mall-kpi-card::after {
  content: ""; position: absolute; right: 6px; top: -36px;
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255,255,255,0.08); z-index: 0;
}
.mall-kpi-card > * { position: relative; z-index: 1; }
.mall-kpi-card.mk-blue   { background: linear-gradient(135deg, #0B7FC4 0%, #33BEEB 100%); }
.mall-kpi-card.mk-purple { background: linear-gradient(135deg, #6D28D9 0%, #9C6BF0 100%); }
.mall-kpi-card.mk-green  { background: linear-gradient(135deg, #0D9488 0%, #34D3A6 100%); }
.mall-kpi-card.mk-orange { background: linear-gradient(135deg, #D9530B 0%, #FB923C 100%); }
.mk-label {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}
.mk-ico {
  width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: 7px;
  background: rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
}
.mk-ico svg { display: block; }
.mk-value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 4px;
}
.mk-value {
  font-family: var(--font-d);
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.4px;
}
.mk-value small {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.mk-trend {
  font-size: 8.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 6px;
  border-radius: 12px;
  background: rgba(255,255,255,0.22);
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}
.mk-trend.down {
  background: rgba(0,0,0,0.20);
}

/* ═══════════════════════════════════════════════════════
   SCREEN 3 — SNAPSHOT REPORT (static, non-interactive)
═══════════════════════════════════════════════════════ */
#screen-report { background: var(--bg-page); }

/* Header reuses .appbar (brand left, Dashboard pill + Export icon right) —
   this is the spot that used to hold the "ANALYTICS REPORT" chip. */

.report-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
  --gap: clamp(6px, 1.3dvh, 13px);
  padding: 6px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
}
.report-body::-webkit-scrollbar { display: none; }
.report-meta { margin: 0 0 var(--gap); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.report-meta-text { min-width: 0; }
.report-meta-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.report-title { font-family: var(--font-d); font-size: 16px; font-weight: 800; letter-spacing: 0.2px; margin-bottom: 2px; }
.report-sub { font-size: 10.5px; color: var(--ink-60); font-weight: 600; }
.report-divider { height: 1px; background: var(--card-border); margin: var(--gap) 0; flex-shrink: 0; }
.report-body .subhead { margin: 0 2px var(--gap); font-size: 11.5px; }
.report-body .trend-head { margin-bottom: var(--gap); }

/* ── KPI Donut cards (Live Occupancy / Total Footfall) ──
   Replaces the old flat value+trend KPI cards with a gender-split
   donut (same visual language as the Demographics donut) plus a
   yesterday comparison line. */
.kpi-donut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 6px; }
.kpi-donut-card {
  border: 1px solid var(--card-border); background: var(--white); border-radius: 16px;
  padding: 8px 10px 7px; display: flex; flex-direction: column; gap: 5px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.kd-label {
  font-size: 9px; font-weight: 700; color: var(--ink-60);
  text-transform: uppercase; letter-spacing: 0.3px;
  display: flex; align-items: center; gap: 5px;
}
.kd-ico { width: 15px; height: 15px; border-radius: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
/* ── KPI Donut cards (Today Footfall / Yesterday Footfall) ──
   Donut takes the center of the card; Male/Female counts sit in a
   row underneath it. The day-over-day comparison now comes from
   having two cards side by side (today vs yesterday), so there's
   no separate "yesterday" trend line anymore. */
/* Compact Male/Female legend under the centered donut — two lines,
   dot + name on the left, value + percentage on the right. Reuses
   the .legend-list/.ll-row pattern used elsewhere in the app. */
.legend-list.kd-legend { width: 100%; margin-top: 6px; gap: 4px; }
.legend-list.kd-legend .ll-row { font-size: 10px; }
.legend-list.kd-legend .sw { width: 7px; height: 7px; }
.legend-list.kd-legend .ll-val { font-family: var(--font-d); font-size: 11px; font-weight: 800; }
.legend-list.kd-legend .ll-pct { font-size: 9px; }

/* Small horizontal donut variant sized for a half-width KPI card:
   donut on the left, Male/Female legend stacked on the right. */
.donut-wrap.small { flex-direction: row; align-items: center; gap: 8px; padding: 0; }
.donut-wrap.small .donut { width: 62px; height: 62px; flex-shrink: 0; }
.donut-wrap.small .donut-hole { inset: 8px; }
.donut-wrap.small .donut-hole .dh-label { font-size: 7px; margin-bottom: 0; }
.donut-wrap.small .donut-hole .dh-value { font-size: 11px; letter-spacing: -0.2px; }
.donut-wrap.small .legend-list { width: auto; flex: 1; min-width: 0; margin-top: 0; gap: 6px; }
.donut-wrap.small .legend-list .ll-row { align-items: center; gap: 5px; }
.donut-wrap.small .legend-list .sw { width: 7px; height: 7px; flex-shrink: 0; }
.donut-wrap.small .legend-list .ll-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.donut-wrap.small .legend-list .ll-name { font-size: 8px; line-height: 1.3; }
.donut-wrap.small .legend-list .ll-val { font-size: 10px; font-weight: 800; margin-left: 0; white-space: normal; word-break: keep-all; }
.donut-wrap.small .legend-list .ll-pct { font-size: 8px; margin-left: 2px; white-space: nowrap; }

/* Bigger, centered donut with no side legend — used for the Today/Yesterday
   footfall cards, where Male/Female now sit as a compact 2-line legend below (.kd-legend). */
.donut-wrap.kd-center { flex-direction: column; align-items: center; padding: 0; }
.donut-wrap.kd-center .donut { width: 82px; height: 82px; flex-shrink: 0; margin: 0 auto; }
.donut-wrap.kd-center .donut-hole { inset: 10px; }
.donut-wrap.kd-center .donut-hole .dh-label { font-size: 7.5px; margin-bottom: 0; }
.donut-wrap.kd-center .donut-hole .dh-value { font-size: 13.5px; letter-spacing: -0.2px; }

.report-spark { display: block; width: 100%; height: 58px; }
.report-chart-row { display: flex; align-items: flex-start; gap: 6px; }
.report-yaxis {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 58px; flex-shrink: 0;
}
.report-yaxis span { font-size: 8px; font-weight: 600; color: var(--ink-40); line-height: 1; }
.report-chart-col { flex: 1; min-width: 0; }
.report-xaxis { display: flex; justify-content: space-between; margin-top: 4px; padding: 0 1px; }
.report-xaxis span { font-size: 8px; color: var(--ink-40); font-weight: 600; }

.util-row { display: flex; gap: 10px; }
.util-card { flex: 1; min-width: 0; border: 1px solid var(--card-border); border-radius: 14px; padding: 8px 10px 7px; }
.util-head { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.util-icon { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.util-label { font-size: 9px; font-weight: 700; color: var(--ink-60); line-height: 1.2; white-space: nowrap; }
.util-value-row { display: flex; align-items: baseline; gap: 4px; }
.util-value { font-family: var(--font-d); font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1; }
.util-unit { font-size: 9px; font-weight: 600; color: var(--ink-40); }
.util-trend { font-size: 9px; font-weight: 700; margin-top: 3px; }
.util-trend.up { color: var(--in-green); }
.util-trend.down { color: var(--out-red); }

.incident-list { display: flex; flex-direction: column; gap: 5px; }
.incident-row { display: flex; align-items: center; gap: 6px; }
.incident-ico { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.incident-name { font-size: 10px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.incident-count { font-family: var(--font-d); font-size: 11px; font-weight: 800; flex-shrink: 0; }

.report-footer { text-align: center; font-size: 10px; color: var(--ink-40); font-weight: 600; margin-top: calc(var(--gap) + 4px); padding-top: var(--gap); border-top: 1px solid var(--card-border); }