/* ═══════════════════════════════════════════════════════════════
   FINANCE DASHBOARD — DESIGN SYSTEM
   Extracted from redman_audit_full.html (dark-theme financial audit)
   Reproduces the audit's look pixel-for-pixel, then extends it with
   new components for a live multi-restaurant dashboard (period
   selector, comparison grid, delta badge, KPI tile).
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Page & surfaces ── */
  --bg: #0f1117;                 /* page background */
  --surface-1: #1a2232;          /* card / chart-wrap / table-wrap background */
  --surface-2: #1e2a3a;          /* row hover, secondary surface, table td border */
  --surface-3: #2d3748;          /* borders, dividers, header gradient stop */
  --header-grad-start: #1e2a3a;  /* header background gradient start */
  --header-grad-start-alt: #1a2744; /* alt header gradient (shell-header variant) */

  /* ── Text ── */
  --text-primary: #ffffff;       /* headings, strong values */
  --text-body: #e2e8f0;          /* base body text */
  --text-table: #e8edf5;         /* table cell text */
  --text-secondary: #a0aec0;     /* chart-wrap/table-wrap h3, legend labels */
  --text-muted: #718096;         /* sub-labels, axis ticks, .sub, .card-sub */
  --text-th: #b8c5d6;            /* table header text */

  /* ── Borders ── */
  --border: #2d3748;             /* standard card/table border */
  --border-row: #1e2a3a;         /* table row divider (lighter than card border) */

  /* ── Semantic / data colors ── */
  --color-red: #fc8181;          /* expenses, negative, critical/danger */
  --color-red-deep: #ff5555;     /* gross withdrawal emphasis (IP scheme) */
  --color-green: #68d391;        /* profit, positive, ok */
  --color-yellow: #f6e05e;       /* dividends, caution values */
  --color-blue: #63b3ed;         /* revenue/bank income, active nav/tab accent */
  --color-orange: #f6ad55;       /* warning accents, commission */
  --color-orange-deep: #ed8936;  /* stronger orange (commission bars/cards) */
  --color-purple: #9f7aea;       /* "other cash" category */
  --color-purple-badge: #d6bcfa; /* purple badge text */
  --color-teal: #4fd1c5;         /* doughnut palette extra */

  /* Warning / alert card backgrounds (dark, tinted) */
  --warning-bg: #2d1f1f;         /* red alert card bg */
  --warning-border: #c53030;     /* red alert card border */
  --caution-bg: #2d1a1a;         /* orange alert card bg (alt) */
  --caution-cell-bg: #2d2010;    /* orange-tinted table cell bg */
  --success-bg: #1a2d1f;         /* green alert card bg / positive table cell bg */
  --success-border: #38a169;     /* green alert card border */
  --danger-cell-bg: #2d1f1f;     /* negative table cell bg (same as warning-bg) */

  /* Badge backgrounds (solid-ish, for .badge.* pills) */
  --badge-green-bg: #1a3a2a;
  --badge-red-bg: #3a1a1a;
  --badge-yellow-bg: #3a3a1a;
  --badge-blue-bg: #1a2a3a;

  /* ── Radius scale ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-2xl: 12px;
  --radius-pill: 20px;

  /* ── Spacing scale ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  /* ── Typography ── */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fs-page-title: 22px;   /* .header h1 */
  --fs-shell-title: 19px;  /* .shell-header h1 */
  --fs-section-title: 16px;/* .section-title */
  --fs-card-h3: 14px;      /* .chart-wrap h3 / .table-wrap h3 */
  --fs-kpi-value: 26px;    /* .card-value */
  --fs-body: 13px;         /* table, general body copy */
  --fs-small: 12px;        /* .header p, .note */
  --fs-label: 11px;        /* .card-label, badges, th */
  --fs-tiny: 10px;         /* chart axis ticks, .p-kpi .lbl */
}

/* ═══ RESET ═══ */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-family);
  background: var(--bg);
  color: var(--text-body);
  min-height: 100vh;
}

/* ═══ PAGE HEADER ═══ */
.header {
  background: linear-gradient(135deg, var(--header-grad-start), var(--bg));
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--border);
}
.header h1 {
  font-size: var(--fs-page-title);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}
.header p {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

/* Alternate compact "shell" header (used when a badge sits top-right) */
.shell-header {
  background: linear-gradient(135deg, var(--header-grad-start-alt) 0%, var(--bg) 100%);
  padding: var(--space-4) var(--space-8);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.shell-header h1 {
  font-size: var(--fs-shell-title);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}
.shell-header .sub {
  font-size: var(--fs-label);
  color: var(--text-muted);
  margin-top: 3px;
}
.audit-badge {
  background: var(--warning-bg);
  color: var(--color-red);
  padding: 3px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: 600;
  border: 1px solid rgba(252, 129, 129, 0.3);
}

/* ═══ NAV / TABS ═══
   The source audit is a single scrolling document split into "pages"
   toggled by a JS-driven top tab bar (no sidebar). Two equivalent
   nav patterns exist in the source: .nav/.nav-tab (compact, sticky,
   horizontally scrollable) and .tabs/.tab (rounded-top tab look). */
.nav {
  display: flex;
  gap: 0;
  padding: 0 var(--space-5);
  background: #0b0e16;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav-tab {
  padding: 11px var(--space-4);
  font-size: var(--fs-label);
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all .15s;
  flex-shrink: 0;
}
.nav-tab.active { color: var(--color-blue); border-bottom-color: var(--color-blue); }
.nav-tab:hover:not(.active) { color: var(--text-secondary); background: var(--surface-1); }

.tabs {
  display: flex;
  gap: 4px;
  padding: var(--space-4) var(--space-8) 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}
.tab {
  padding: 10px var(--space-5);
  font-size: var(--fs-body);
  font-weight: 500;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-muted);
  transition: all .2s;
}
.tab.active { background: var(--surface-1); color: var(--color-blue); border-bottom: 2px solid var(--color-blue); }
.tab:hover:not(.active) { background: var(--surface-1); color: var(--text-secondary); }

/* ═══ PAGE / CONTENT SHELLS ═══ */
.page { display: none; }
.page.active { display: block; }
.dark-page { background: var(--bg); padding: var(--space-6) var(--space-8); }
.content { padding: var(--space-6) var(--space-8); display: none; }
.content.active { display: block; }
.tab-content { padding: 0; display: block; }

/* ═══ GRID UTILITIES ═══ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-5); }
@media (max-width: 900px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
}

/* ═══ KPI / METRIC TILE ("card") ═══ */
.card {
  background: var(--surface-1);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  border: 1px solid var(--border);
}
.card-label {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.card-value { font-size: var(--fs-kpi-value); font-weight: 700; color: var(--text-primary); }
.card-value.green  { color: var(--color-green); }
.card-value.red    { color: var(--color-red); }
.card-value.yellow { color: var(--color-yellow); }
.card-value.blue   { color: var(--color-blue); }
.card-sub { font-size: var(--fs-label); color: var(--text-muted); margin-top: var(--space-1); }

/* Compact KPI tile variant (payroll-style, 4-across dense row) */
.p-kpi {
  background: var(--surface-1);
  border-radius: var(--radius-xl);
  padding: var(--space-4) 18px;
  border: 1px solid var(--border);
}
.p-kpi .lbl { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); margin-bottom: 6px; }
.p-kpi .val { font-size: 22px; font-weight: 700; color: var(--text-primary); }
.p-kpi .val.r { color: var(--color-red); }
.p-kpi .val.g { color: var(--color-green); }
.p-kpi .val.y { color: var(--color-yellow); }
.p-kpi .val.b { color: var(--color-blue); }
.p-kpi .sub { font-size: var(--fs-label); color: var(--text-muted); margin-top: var(--space-1); }

/* ═══ SECTION CARD (chart container) ═══ */
.chart-wrap {
  background: var(--surface-1);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  border: 1px solid var(--border);
  margin-bottom: var(--space-5);
}
.chart-wrap h3 {
  font-size: var(--fs-card-h3);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.chart-wrap canvas { max-height: 320px; }

/* Generic reusable "section card" — use this class name for any new
   card-style container that isn't strictly a chart or a table
   (matches the audit's .chart-wrap/.table-wrap visual language). */
.section-card {
  background: var(--surface-1);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  border: 1px solid var(--border);
  margin-bottom: var(--space-5);
}
.section-card h3 {
  font-size: var(--fs-card-h3);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.section-card canvas { max-height: 320px; }

/* ═══ DATA TABLE ═══ */
.table-wrap {
  background: var(--surface-1);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.table-wrap h3 {
  font-size: var(--fs-card-h3);
  font-weight: 600;
  color: var(--text-secondary);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .5px;
}
table, .data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
th, .data-table th {
  background: var(--bg);
  padding: 10px var(--space-4);
  text-align: left;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-th);
  border-bottom: 1px solid var(--border);
}
td, .data-table td {
  padding: 10px var(--space-4);
  border-bottom: 1px solid var(--border-row);
  color: var(--text-table);
}
td b { color: var(--text-primary); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface-2); }

/* Numeric column alignment helpers */
th.r, td.r { text-align: right; }
td.num, .num { font-variant-numeric: tabular-nums; text-align: right; }

/* Semantic value coloring inside tables */
.positive { color: var(--color-green); }
.negative { color: var(--color-red); }

/* ═══ HEADINGS HIERARCHY ═══ */
.section-title {
  font-size: var(--fs-section-title);
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--space-6) 0 var(--space-3);
}
.light-page-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}
.light-page-header p { font-size: var(--fs-small); color: var(--text-muted); }

/* ═══ INSIGHT CARD (".note") ═══ */
.note, .insight-card {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-top: var(--space-2);
  line-height: 1.5;
  background: var(--bg);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--border);
}
.note b, .insight-card b { color: var(--text-body); }
.insight-card.blue  { border-left-color: var(--color-blue); }
.insight-card.green { border-left-color: var(--color-green); }

/* ═══ WARNING / ALERT CARDS ═══
   Inline-flex row of colored alert tiles used at the top of sections
   (critical / caution / success). Background+border+accent-text triads
   pulled verbatim from the source. */
.alert-card, .warning-card {
  flex: 1;
  min-width: 220px;
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
.alert-card .title { font-size: var(--fs-label); font-weight: 700; margin-bottom: var(--space-1); }
.alert-card .body { color: var(--text-primary); font-size: var(--fs-body); }
.alert-card .sub { color: var(--text-muted); font-size: var(--fs-label); margin-top: var(--space-1); }

.alert-card.critical, .warning-card {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--color-red);
  font-size: var(--fs-small);
  line-height: 1.6;
}
.alert-card.critical .title { color: var(--color-red); }
.warning-card strong { color: var(--text-primary); font-weight: 600; }

.alert-card.caution { background: var(--caution-bg); border: 1px solid var(--color-orange-deep); }
.alert-card.caution .title { color: var(--color-orange); }

.alert-card.success { background: var(--success-bg); border: 1px solid var(--success-border); }
.alert-card.success .title { color: var(--color-green); }

/* Table-cell tint variants matching alert-card semantics, for
   spotlighting individual values inline in a data table */
.cell-positive { background: var(--success-bg); }
.cell-negative { background: var(--danger-cell-bg); }
.cell-caution  { background: var(--caution-cell-bg); }

/* ═══ BADGES / PILLS ═══ */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: 600;
  margin-left: var(--space-2);
}
.badge.green  { background: var(--badge-green-bg);  color: var(--color-green); }
.badge.red    { background: var(--badge-red-bg);    color: var(--color-red); }
.badge.yellow { background: var(--badge-yellow-bg); color: var(--color-yellow); }
.badge.blue   { background: var(--badge-blue-bg);   color: var(--color-blue); }

/* ═══ ROW LIST (e.g. payment-method breakdown rows) ═══ */
.pm-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-row);
}
.pm-row:last-child { border-bottom: none; font-weight: 700; background: var(--bg); }
.pm-cat { font-size: var(--fs-label); padding: 2px var(--space-2); border-radius: var(--radius-sm); margin-right: var(--space-2); }

/* ═══════════════════════════════════════════════════════════════
   NEW (v2 extension): APP SHELL — sidebar + header, for a real
   multi-restaurant dynamic dashboard rather than a single static
   audit export. Reuses all tokens above; adds layout only.
   ═══════════════════════════════════════════════════════════════ */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #0b0e16;
  border-right: 1px solid var(--border);
  padding: var(--space-5) 0;
  min-height: 100vh;
}
.sidebar-brand {
  padding: 0 var(--space-5) var(--space-5);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
}
.sidebar-nav { list-style: none; }
.sidebar-nav li + li { margin-top: 2px; }
.sidebar-nav a {
  display: block;
  padding: 9px var(--space-5);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  border-left: 2px solid transparent;
  transition: all .15s;
  text-decoration: none;
}
.sidebar-nav a:hover { color: var(--text-secondary); background: var(--surface-1); }
.sidebar-nav a.active { color: var(--color-blue); background: var(--surface-1); border-left-color: var(--color-blue); }
.sidebar-group-label {
  padding: 14px var(--space-5) 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: .65;
}
.sidebar-nav li:first-child.sidebar-group-label { padding-top: 0; }

.main-content { flex: 1; min-width: 0; }

/* ═══════════════════════════════════════════════════════════════
   NEW (v2 extension): PERIOD SELECTOR BAR
   Pill/tab row for range presets + a "compare to" toggle.
   ═══════════════════════════════════════════════════════════════ */
.period-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  background: #0b0e16;
  border-bottom: 1px solid var(--border);
}
.period-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.period-pill {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-muted);
  transition: all .15s;
  white-space: nowrap;
}
.period-pill:hover:not(.active) {
  color: var(--text-secondary);
  background: var(--surface-2);
  border-color: var(--surface-3);
}
.period-pill.active {
  background: var(--color-blue);
  color: #0b0e16;
  border-color: var(--color-blue);
  font-weight: 700;
}
.period-pill.custom { border-style: dashed; }

.compare-toggle { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--text-muted); }
.compare-toggle .compare-label {
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 10px;
  color: var(--text-muted);
}
.compare-switch {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.compare-switch button {
  border: none;
  background: var(--surface-1);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  transition: all .15s;
}
.compare-switch button + button { border-left: 1px solid var(--border); }
.compare-switch button:hover:not(.active) { color: var(--text-secondary); background: var(--surface-2); }
.compare-switch button.active { background: var(--border); color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════
   NEW (v2 extension): KPI / METRIC TILE with delta badge
   Big number + label + delta-badge, in a card. Extends .card.
   ═══════════════════════════════════════════════════════════════ */
.kpi-tile { background: var(--surface-1); border-radius: var(--radius-2xl); padding: var(--space-5); border: 1px solid var(--border); }
.kpi-tile .kpi-label { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); margin-bottom: var(--space-2); }
.kpi-tile .kpi-value {
  font-size: var(--fs-kpi-value);
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.kpi-tile .kpi-value.green  { color: var(--color-green); }
.kpi-tile .kpi-value.red    { color: var(--color-red); }
.kpi-tile .kpi-value.yellow { color: var(--color-yellow); }
.kpi-tile .kpi-value.blue   { color: var(--color-blue); }
.kpi-tile .kpi-sub { font-size: var(--fs-label); color: var(--text-muted); margin-top: var(--space-1); }

/* ═══════════════════════════════════════════════════════════════
   NEW (v2 extension): DELTA BADGE
   Small pill: green up-triangle = positive/better,
   coral down-triangle = negative/worse, plus % text.
   ═══════════════════════════════════════════════════════════════ */
.delta-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  line-height: 1.6;
  white-space: nowrap;
}
.delta-badge::before { content: ""; width: 0; height: 0; display: inline-block; }
.delta-badge.up { color: var(--color-green); background: var(--badge-green-bg); }
.delta-badge.up::before {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid var(--color-green);
}
.delta-badge.down { color: var(--color-red); background: var(--badge-red-bg); }
.delta-badge.down::before {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--color-red);
}
.delta-badge.flat { color: var(--text-muted); background: var(--surface-2); }
.delta-badge.flat::before { width: 8px; height: 2px; background: var(--text-muted); border: none; }

/* ═══════════════════════════════════════════════════════════════
   NEW (v2 extension): COMPARISON GRID
   3-column responsive grid (Bloody / Brisket / Pastrama side by
   side), collapsing to 1 column on mobile. Each card has a header
   + a stack of .metric-row lines (label, value, delta-badge).
   ═══════════════════════════════════════════════════════════════ */
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
@media (max-width: 900px) {
  .comparison-grid { grid-template-columns: 1fr; }
}
.comparison-card {
  background: var(--surface-1);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  overflow: hidden;
}
.comparison-card-hdr {
  padding: 14px var(--space-5);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.comparison-card-hdr .name { font-size: 13px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.2px; }
.comparison-card-hdr .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.comparison-card-body { padding: var(--space-2) 0; }

.metric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px var(--space-5);
  border-bottom: 1px solid var(--border-row);
  gap: var(--space-2);
}
.metric-row:last-child { border-bottom: none; }
.metric-row .metric-label { font-size: 12px; color: var(--text-muted); }
.metric-row .metric-value-wrap { display: flex; align-items: center; gap: 8px; }
.metric-row .metric-value { font-size: 15px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════
   COMPARISON CARD — big headline KPI (revenue) with delta badge,
   used at the top of each restaurant card in the comparison grid.
   ═══════════════════════════════════════════════════════════════ */
.comparison-kpi { padding: var(--space-4) var(--space-5) var(--space-3); }
.comparison-kpi .kpi-label { font-size: var(--fs-tiny); text-transform: uppercase; letter-spacing: .8px; color: var(--text-muted); margin-bottom: 4px; }
.comparison-kpi .kpi-value-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.comparison-kpi .kpi-value { font-size: 24px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════
   PERIOD-SELECTOR — anchor variant (server-rendered links, not JS
   buttons). Reuses .period-pill / .compare-switch look for <a>.
   ═══════════════════════════════════════════════════════════════ */
a.period-pill { display: inline-block; text-decoration: none; }
.compare-switch a {
  display: inline-block; text-decoration: none; border: none;
  background: var(--surface-1); color: var(--text-muted);
  font-size: 11px; font-weight: 500; padding: 6px 12px; transition: all .15s;
}
.compare-switch a + a { border-left: 1px solid var(--border); }
.compare-switch a:hover:not(.active) { color: var(--text-secondary); background: var(--surface-2); }
.compare-switch a.active { background: var(--border); color: var(--text-primary); }
.range-note { font-size: 11px; color: var(--text-muted); }
.range-note b { color: var(--text-secondary); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   TOP-BAR ACTIONS + LOGOUT
   ═══════════════════════════════════════════════════════════════ */
.topbar-actions { display: flex; align-items: center; gap: var(--space-3); }
.logout-link { font-size: 11px; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 5px 10px; text-decoration: none; }
.logout-link:hover { color: var(--text-secondary); background: var(--surface-1); }

/* ═══════════════════════════════════════════════════════════════
   LOGIN — centered dark card
   ═══════════════════════════════════════════════════════════════ */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-6); }
.login-card { width: 100%; max-width: 360px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: var(--space-8); }
.login-card h1 { font-size: 18px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; letter-spacing: -0.3px; }
.login-card .sub { font-size: 12px; color: var(--text-muted); margin-bottom: var(--space-6); }
.login-field { margin-bottom: var(--space-4); }
.login-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 6px; }
.login-field input {
  width: 100%; padding: 10px 12px; font-size: 14px; font-family: var(--font-family);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text-body);
}
.login-field input:focus { outline: none; border-color: var(--color-blue); }
.login-btn {
  width: 100%; padding: 11px; font-size: 14px; font-weight: 700; cursor: pointer;
  background: var(--color-blue); color: #0b0e16; border: none; border-radius: var(--radius-lg); transition: filter .15s;
}
.login-btn:hover { filter: brightness(1.08); }
.login-err { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--color-red); font-size: 12px; padding: 10px 12px; border-radius: var(--radius-lg); margin-bottom: var(--space-4); }

/* ═══ UTILITY ═══ */
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

/* ═══ VIEW-AS ROLE SWITCHER (owner-only, шапка) ═══ */
.view-as-switcher { position: relative; }
.view-as-summary {
  list-style: none; cursor: pointer; user-select: none;
  font-size: var(--fs-label); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 5px 10px; background: var(--surface-1);
}
.view-as-summary::-webkit-details-marker { display: none; }
.view-as-summary strong { color: var(--text-primary); }
.view-as-switcher[open] .view-as-summary { border-color: var(--color-blue); }
.view-as-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  width: 260px; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.view-as-panel-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.view-as-opt {
  flex: 1; text-align: center; font-size: var(--fs-label); text-decoration: none;
  color: var(--text-secondary); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 6px 8px;
}
.view-as-opt:hover { color: var(--text-primary); border-color: var(--color-blue); }
.view-as-opt.active { color: var(--color-blue); border-color: var(--color-blue); background: var(--badge-blue-bg); font-weight: 600; }
.view-as-scope { border-top: 1px solid var(--border-row); padding-top: var(--space-2); }
.view-as-scope-title { font-size: var(--fs-tiny); color: var(--text-muted); margin-bottom: 4px; }
.view-as-scope-line { font-size: var(--fs-label); color: var(--text-body); margin-bottom: 2px; }
.view-as-scope-list {
  list-style: none; max-height: 220px; overflow-y: auto; margin-top: 4px;
}
.view-as-scope-list li {
  font-size: var(--fs-tiny); color: var(--text-secondary); padding: 2px 0 2px 8px;
  border-left: 2px solid var(--border-row);
}

/* ═══ VIEW-AS PREVIEW BANNER (пока owner смотрит под чужой ролью) ═══ */
.view-as-banner {
  background: var(--caution-bg); border-bottom: 1px solid var(--color-orange);
  color: var(--color-orange); font-size: var(--fs-label); font-weight: 500;
  padding: var(--space-2) var(--space-8);
}
.view-as-banner a { color: var(--color-orange); font-weight: 700; text-decoration: underline; }
.view-as-banner a:hover { color: var(--color-orange-deep); }