/* ============================================================
   SOCOM Overview Dashboard — Design System
   Dark mode default, light mode via [data-theme="light"]
   ============================================================ */

/* ============================================================
   CSS VARIABLES — DARK MODE (DEFAULT)
   ============================================================ */
:root {
  /* Base palette */
  --bg-base: #0C0E14;
  --bg-surface: #151820;
  --bg-elevated: #1C2030;
  --bg-hover: #242838;
  --bg-active: #2A3045;
  --bg-inset: #080A0F;

  /* Action colors (blue) — buttons, links, focus, active states */
  --color-action: #2563EB;
  --color-action-hover: #3B82F6;
  --color-action-active: #1D4ED8;
  --color-action-muted: rgba(37, 99, 235, 0.15);
  --color-action-ghost: rgba(37, 99, 235, 0.06);

  /* Brand colors (red) — logo, accent borders, sparse highlights */
  --color-brand: #CB222A;
  --color-brand-hover: #E02A33;
  --color-brand-active: #B91C1C;
  --color-brand-muted: rgba(203, 34, 42, 0.15);
  --color-brand-ghost: rgba(203, 34, 42, 0.06);

  /* Text */
  --text-primary: #F0F2F5;
  --text-secondary: #9CA3AF;
  --text-tertiary: #6B7280;
  --text-on-action: #FFFFFF;
  --text-on-brand: #FFFFFF;
  --text-link: #2563EB;

  /* Status */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  --color-info: #3B82F6;

  /* Data visualization categorical palette */
  --viz-1: #CB222A;
  --viz-2: #3B82F6;
  --viz-3: #22C55E;
  --viz-4: #F59E0B;
  --viz-5: #8B5CF6;
  --viz-6: #EC4899;
  --viz-7: #06B6D4;
  --viz-8: #84CC16;

  /* Platform colors — B&S ecom portals */
  --color-shopee: #EE4D2D;
  --color-tiktok: #000000;
  --color-lazada: #0F146D;

  /* Borders */
  --border-default: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.04);
  --border-strong: rgba(255, 255, 255, 0.15);
  --border-action: rgba(37, 99, 235, 0.5);
  --border-brand: rgba(203, 34, 42, 0.4);

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 20px rgba(203, 34, 42, 0.15);
  --shadow-glow-strong: 0 0 30px rgba(203, 34, 42, 0.25);
  --shadow-action-glow: 0 0 0 3px var(--color-action-muted);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Typography tokens */
  --font-display: 2.25rem;
  --font-h1: 1.75rem;
  --font-h2: 1.25rem;
  --font-h3: 1rem;
  --font-body: 0.875rem;
  --font-small: 0.75rem;
  --font-xs: 0.6875rem;
  --font-metric: 1.5rem;
  --font-metric-lg: 2rem;
  --font-data: 0.8125rem;

  /* Sidebar + top bar dimensions */
  --sidebar-width: 240px;
  --sidebar-collapsed: 64px;
  --top-bar-height: 56px;
}

/* ============================================================
   LIGHT MODE OVERRIDES
   ============================================================ */
[data-theme="light"] {
  --bg-base: #F4F5F7;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-hover: #EDEEF1;
  --bg-active: #E4E5E9;
  --bg-inset: #EAEBEE;

  --text-primary: #111318;
  --text-secondary: #5F6775;
  --text-tertiary: #8C95A4;
  --text-on-action: #FFFFFF;
  --text-on-brand: #FFFFFF;
  --text-link: #2563EB;

  --color-action-muted: rgba(37, 99, 235, 0.12);
  --color-action-ghost: rgba(37, 99, 235, 0.05);

  --border-default: rgba(0, 0, 0, 0.10);
  --border-subtle: rgba(0, 0, 0, 0.05);
  --border-strong: rgba(0, 0, 0, 0.18);
  --border-action: rgba(37, 99, 235, 0.4);
  --border-brand: rgba(203, 34, 42, 0.3);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 20px rgba(203, 34, 42, 0.10);
  --shadow-glow-strong: 0 0 30px rgba(203, 34, 42, 0.15);
}

[data-theme="light"] body::before {
  opacity: 0.02;
}

[data-theme="light"] {
  --color-success: #15803d;
}
[data-theme="light"] .trend--up { color: #15803d; }
[data-theme="light"] .num--pos { color: #15803d; }

/* ============================================================
   RESET AND BASE
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Lato', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--font-body);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-base);
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Noise texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

a {
  color: var(--text-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img, svg {
  display: block;
  max-width: 100%;
}

ul, ol {
  list-style: none;
}

input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* Focus visible ring */
:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.t-display {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
}

.t-h1 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--font-h1);
  font-weight: 700;
  line-height: 1.2;
}

.t-h2 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--font-h2);
  font-weight: 600;
  line-height: 1.3;
}

.t-h3 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--font-h3);
  font-weight: 600;
  line-height: 1.4;
}

.t-body {
  font-family: 'Lato', system-ui, sans-serif;
  font-size: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
}

.t-small {
  font-size: var(--font-small);
  font-weight: 400;
  line-height: 1.5;
}

.t-xs {
  font-size: var(--font-xs);
  font-weight: 500;
  line-height: 1.4;
}

.t-metric {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--font-metric);
  font-weight: 700;
  line-height: 1.1;
}

.t-metric-lg {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--font-metric-lg);
  font-weight: 800;
  line-height: 1.0;
}

.t-data {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--font-data);
  font-weight: 500;
  line-height: 1.4;
}

.t-label {
  font-size: var(--font-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}

.t-group-label {
  font-size: var(--font-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}

.t-secondary { color: var(--text-secondary); }
.t-tertiary { color: var(--text-tertiary); }
.t-brand { color: var(--color-brand); }
.t-action { color: var(--color-action); }
.t-success { color: var(--color-success); }
.t-warning { color: var(--color-warning); }
.t-danger { color: var(--color-danger); }

/* ============================================================
   NUMBER FORMATTING
   ============================================================ */
.num {
  font-family: 'Geist Mono', ui-monospace, monospace;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.num--pos {
  color: var(--color-success);
}

.num--neg {
  color: var(--color-danger);
}

.num--zero {
  color: var(--text-tertiary);
}

/* ============================================================
   LAYOUT — SIDEBAR + CONTENT
   ============================================================ */
.app-shell {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* Sidebar — full-height left rail with logo at the top. */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--bg-inset);
  border-right: 1px solid var(--border-default);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: width var(--transition-base);
  overflow: hidden;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed);
}

/* Hover-expand: collapsed sidebar temporarily widens on hover and
   reveals labels. Every collapsed-state hide rule is qualified with
   `:not(:hover)` so the hover state restores the expanded look
   without needing to toggle the class. */
.sidebar.collapsed:hover {
  width: var(--sidebar-width);
}

.sidebar__logo {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-4);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-subtle);
}

.sidebar__logo svg {
  height: 28px;
  width: auto;
  transition: opacity var(--transition-base);
}

.sidebar__logo .logo-light {
  display: block;
}

.sidebar__logo .logo-dark {
  display: none;
}

[data-theme="light"] .sidebar__logo .logo-light {
  display: none;
}

[data-theme="light"] .sidebar__logo .logo-dark {
  display: block;
}

.sidebar.collapsed:not(:hover) .sidebar__logo {
  padding: 0;
}

.sidebar.collapsed .sidebar__logo svg {
  height: 24px;
}

/* Show full logo by default; switch to the mark when the sidebar is
   pinned-collapsed and not being hovered. Two spans render in the
   DOM so this hover-expand swap doesn't require a Vue re-render. */
.sidebar__logo-full { display: inline-flex; align-items: center; }
.sidebar__logo-mark { display: none; align-items: center; justify-content: center; }
.sidebar.collapsed:not(:hover) .sidebar__logo-full { display: none; }
.sidebar.collapsed:not(:hover) .sidebar__logo-mark { display: inline-flex; }

/* Nav sections */
.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-3) 0;
}

.nav-group {
  margin-bottom: var(--space-3);
}

.nav-group__label {
  font-size: var(--font-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  padding: var(--space-2) var(--space-4) var(--space-1);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar.collapsed:not(:hover) .nav-group__label {
  font-size: 0;
  padding: var(--space-1) 0;
  text-align: center;
}

.sidebar.collapsed:not(:hover) .nav-group__label::before {
  content: '';
  display: block;
  width: 16px;
  height: 1px;
  background: var(--border-default);
  margin: 0 auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 40px;
  padding: 0 var(--space-4);
  margin: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-body);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  text-decoration: none;
}

.nav-item.active {
  background: var(--color-action-muted);
  color: var(--color-action);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--color-action);
  border-radius: 0 2px 2px 0;
}

.nav-item__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Featured nav item — the marquee page of the portal (Performance Review).
   Bold weight + gold star icon + soft gradient bg set it apart from peers.
   Active state still gets the blue rail via .nav-item.active. */
.nav-item--featured {
  font-weight: 700;
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--color-action-muted) 0%, transparent 80%);
}
.nav-item--featured .nav-item__icon { color: #F59E0B; }
.nav-item--featured:hover { background: linear-gradient(135deg, var(--color-action-muted) 0%, var(--bg-hover) 80%); }

.nav-item__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar.collapsed:not(:hover) .nav-item {
  justify-content: center;
  padding: 0;
  margin: 0 var(--space-2);
}

.sidebar.collapsed:not(:hover) .nav-item__label {
  display: none;
}

/* Nav item tooltip on collapsed sidebar */
.nav-item__tooltip {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  color: var(--text-primary);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: 200;
}

.sidebar.collapsed:not(:hover) .nav-item:hover .nav-item__tooltip {
  opacity: 1;
}

/* Sidebar footer */
.sidebar__footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sidebar.collapsed:not(:hover) .sidebar__footer {
  padding: var(--space-3) var(--space-2);
  align-items: center;
}

.sidebar__toggle,
.sidebar__theme-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 36px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
}

.sidebar__toggle:hover,
.sidebar__theme-toggle:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.sidebar.collapsed:not(:hover) .sidebar__toggle,
.sidebar.collapsed:not(:hover) .sidebar__theme-toggle {
  justify-content: center;
  padding: 0;
  width: 36px;
}

/* Collapsed state — hide ONLY the trailing label span; keep the
   leading icon span visible so the theme toggle and collapse button
   render as icon-only buttons (matching nav items). The icon span is
   the first child; the label is `span:last-child`. */
.sidebar.collapsed:not(:hover) .sidebar__toggle span:last-child,
.sidebar.collapsed:not(:hover) .sidebar__theme-toggle span:last-child {
  display: none;
}

/* Content area — sidebar overlays on the left. */
.content-area {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  transition: margin-left var(--transition-base);
  position: relative;
  z-index: 1;
}

.sidebar.collapsed ~ .content-area,
.content-area--collapsed {
  margin-left: var(--sidebar-collapsed);
}

/* Page wrapper */
.page {
  padding: var(--space-6);
  max-width: 1600px;
  margin: 0 auto;
}

/* Section wrapper — used by the single-page SOCOM Overview to group
   Overview / P&L / Performance blocks for anchor nav. Each section gets
   a scroll margin so the fixed sidebar offset lands the title cleanly. */
.page-section {
  scroll-margin-top: 80px;
  margin-bottom: var(--space-10, 48px);
}
.page-section:last-child {
  margin-bottom: 0;
}
.page-section__title {
  font-size: var(--font-h3);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-default);
}

/* Page header */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
}

.page-header__title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  color: var(--text-primary);
}

.page-header__subtitle {
  font-size: var(--font-body);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ============================================================
   DASHBOARD GRID
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Metric grid: fixed column count for KPI cards */
.metric-grid {
  display: grid;
  gap: var(--space-4);
}

.metric-grid.grid--3 { grid-template-columns: repeat(3, 1fr); }
.metric-grid.grid--4 { grid-template-columns: repeat(4, 1fr); }
.metric-grid.grid--2 { grid-template-columns: repeat(2, 1fr); }

.grid__full { grid-column: 1 / -1; }
.grid__span-2 { grid-column: span 2; }
.grid__span-3 { grid-column: span 3; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card--highlighted {
  border-left: 3px solid var(--color-brand);
}

.card--selected {
  border-color: var(--border-action);
  background: var(--color-action-ghost);
}

.card--flat {
  border: none;
  background: transparent;
  padding: 0;
}

.card--flat:hover {
  box-shadow: none;
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.card__title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--font-h2);
  font-weight: 600;
  color: var(--text-primary);
}

.card__subtitle {
  font-size: var(--font-small);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

.card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Faint full-width hairline under a card's title block; bleeds to the
   card edges (matches .card horizontal padding = --space-6). */
.card-title-sep {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-3) calc(-1 * var(--space-6));
}

.card__body {
  position: relative;
}

.card__footer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ============================================================
   METRIC CARDS (KPI)
   ============================================================ */
.metric-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: box-shadow var(--transition-fast);
}

.metric-card:hover {
  box-shadow: var(--shadow-md);
}

.metric-card--hero {
  border-color: var(--border-brand);
}

.metric-card__label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}

.metric-card__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 1;
}

.metric-card__value {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--font-metric);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.metric-card--hero .metric-card__value {
  font-size: var(--font-metric-lg);
  font-weight: 800;
  line-height: 1.0;
}

.metric-card__trend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  font-size: var(--font-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.metric-card__sub {
  text-align: right;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  margin-top: var(--space-1);
  line-height: 1.2;
}

.metric-card__sub--placeholder {
  visibility: hidden;
}

/* vs-Target row — shows the metric's delta against its P&L benchmark
   (e.g. "+2.3pp vs 15%"). Color-coded by `status` set in the computed:
     good    → green (cost under target or profit over target)
     bad     → red (cost over target or profit under target)
     neutral → muted grey (within ±1pp of target)
   Right-aligned, mono tabular-nums, between the first divider and the
   YoY/QoQ trend row. */
.metric-card__vs-target {
  text-align: right;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--font-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  margin-top: var(--space-1);
  line-height: 1.3;
}

.metric-card__vs-target--good {
  color: var(--color-success, #22C55E);
}

.metric-card__vs-target--bad {
  color: var(--color-danger, #EF4444);
}

.metric-card__vs-target--neutral {
  color: var(--text-tertiary);
}

.metric-card__vs-target--placeholder,
.metric-card__trend--placeholder {
  visibility: hidden;
}

/* Only the numeric magnitude (e.g. "0.2pp") is bold — the surrounding
   "under Target (35%)" text stays at the row's normal weight. */
.metric-card__trend--vs-target strong {
  font-weight: 700;
}

/* Check / warning icon in front of the vs-Target delta. Renders a
   touch larger than the body text so the status reads at a glance;
   color is inherited from `.trend--up|--down|--flat`. */
.metric-card__vs-icon {
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  text-align: center;
}

.metric-card__divider {
  height: 1px;
  background: var(--border-default);
  margin-left: calc(-1 * var(--space-5));
  margin-right: calc(-1 * var(--space-5));
  margin-top: var(--space-1);
}

.metric-card__sparkline {
  height: 40px;
  margin-top: var(--space-1);
}

/* ============================================================
   ICONS, PLATFORM BADGES, METRIC TOOLTIPS
   ============================================================ */
.icon { display: inline-flex; align-items: center; vertical-align: middle; flex-shrink: 0; line-height: 1; }
.icon svg { display: block; }

.metric-card__icon { margin-right: var(--space-2); display: inline-flex; }

.platform-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-body); }
.platform-badge img { border-radius: 4px; object-fit: contain; }

.metric-tooltip { position: relative; display: inline-flex; align-items: center; margin-left: 4px; }
.metric-tooltip__trigger { color: var(--text-tertiary); cursor: help; display: inline-flex; opacity: 0.5; transition: opacity var(--transition-fast); }
.metric-tooltip__trigger:hover { opacity: 1; }
.metric-tooltip__content {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3); font-size: 12px; color: var(--text-secondary);
  white-space: nowrap; max-width: 300px; white-space: normal;
  pointer-events: none; opacity: 0; transition: opacity var(--transition-fast);
  z-index: 100; box-shadow: var(--shadow-lg);
}
.metric-tooltip:hover .metric-tooltip__content { opacity: 1; }

/* Trend states */
.trend--up {
  color: var(--color-success);
}

.trend--down {
  color: var(--color-danger);
}

.trend--flat {
  color: var(--text-tertiary);
}

.trend-arrow--up::before {
  content: '\2191';
  margin-right: 2px;
}

.trend-arrow--down::before {
  content: '\2193';
  margin-right: 2px;
}

/* ============================================================
   SERVICE LINE BADGE
   ============================================================ */
.sl-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: 'Lato', system-ui, sans-serif;
  font-weight: 600;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
}

/* Sizes */
.btn--sm {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--font-small);
  border-radius: var(--radius-sm);
}

.btn--md {
  height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--font-body);
  border-radius: var(--radius-sm);
}

.btn--lg {
  height: 48px;
  padding: 0 var(--space-6);
  font-size: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-sm);
}

/* Variants */
.btn--primary {
  background: var(--color-action);
  color: var(--text-on-action);
}

.btn--primary:hover {
  background: var(--color-action-hover);
}

.btn--primary:active {
  background: var(--color-action-active);
}

.btn--secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}

.btn--secondary:hover {
  background: var(--bg-hover);
  border-color: var(--text-tertiary);
}

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn--ghost:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.btn--danger {
  background: var(--color-danger);
  color: var(--text-on-action);
}

.btn--danger:hover {
  background: #DC2626;
}

.btn--icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--radius-sm);
}

.btn--icon.btn--sm {
  width: 32px;
  height: 32px;
}

.btn--icon.btn--lg {
  width: 48px;
  height: 48px;
}

/* ============================================================
   TABLES (fin-table)
   ============================================================ */
.data-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
}

.fin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-data);
}

.fin-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.fin-table th,
.fin-table td {
  white-space: nowrap;
}

.fin-table th {
  background: var(--bg-inset);
  font-size: var(--font-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-default);
  user-select: none;
}

.fin-table th.sortable {
  cursor: pointer;
  position: relative;
  padding-right: var(--space-6);
}

.fin-table th.sortable:hover {
  color: var(--text-primary);
}

.fin-table th.sortable::after {
  content: '\2195';
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  opacity: 0.4;
}

.fin-table th.sort-asc::after {
  content: '\2191';
  opacity: 1;
  color: var(--text-primary);
}

.fin-table th.sort-desc::after {
  content: '\2193';
  opacity: 1;
  color: var(--text-primary);
}

.fin-table th.sort-asc,
.fin-table th.sort-desc {
  color: var(--text-primary);
}

.fin-table th.text-right,
.fin-table td.text-right {
  text-align: right;
}

.fin-table th.text-center,
.fin-table td.text-center {
  text-align: center;
}

.fin-table td {
  background: var(--bg-surface);
  color: var(--text-primary);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  font-family: 'Lato', system-ui, sans-serif;
  font-size: var(--font-data);
  font-weight: 500;
  vertical-align: middle;
}

.fin-table td.num-cell {
  font-family: 'Geist Mono', ui-monospace, monospace;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────────────
   Brand & Store flat <data-table> component → portfolio table standard.
   The shared DataTable renders <div class="data-table-wrap"><table class="fin-table">,
   so scoping to `.data-table-wrap .fin-table` hits ONLY the flat component
   (the ~9 B&S pages with no dedicated table CSS) — it cannot reach the
   matrix / frozen-column / direct-fin-table consumers (aging, fulfillment,
   customer-service, inventory-doi, sku, hmx), which style themselves. The
   body[data-portal="brand-store"] scope leaves SOCOM #pnl untouched.
   Brings header tokens (weight 700 / centered / --text-secondary / --font-xs)
   and the zebra striping the base flat fin-table lacks, in line with the
   #overall-performance reference. (Base .fin-table above is unchanged.)
   ────────────────────────────────────────────────────────────────── */
body[data-portal="brand-store"] .data-table-wrap .fin-table th {
  font-weight: 700;
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--font-xs);
}
body[data-portal="brand-store"] .data-table-wrap .fin-table th.text-right { text-align: right; }
body[data-portal="brand-store"] .data-table-wrap .fin-table tbody tr:nth-of-type(even):not(.fin-row-total):not(.fin-row-group-header) td {
  background: color-mix(in srgb, var(--text-primary) 3.5%, transparent);
}

.fin-table tbody tr:hover td {
  background: var(--bg-hover);
}

.fin-table tbody tr.selected td {
  background: var(--color-action-ghost);
  border-left: 3px solid var(--color-action);
}

/* Total / summary row — tinted background so the aggregate line
   visually separates from the service-level rows above it. */
.fin-table tbody tr.fin-row-total td {
  background: var(--color-action-ghost);
  font-weight: 700;
  color: var(--text-primary);
  border-top: 1px solid var(--border-strong);
}
.fin-table tbody tr.fin-row-total:hover td {
  background: var(--color-action-ghost);
}

.fin-table tbody tr:last-child td {
  border-bottom: none;
}

/* Detailed P&L card header — title on the left, compare toggle and
   Export button clustered on the right. The split variant allows the
   title block to shrink (so long subtitles wrap instead of clipping)
   and wraps the whole row on narrow viewports. */
.card__header--split {
  flex-wrap: wrap;
  gap: var(--space-3);
}
.card__header--split > div:first-child {
  flex: 1 1 320px;
  min-width: 0;
}
.card__header--split .card__subtitle {
  white-space: normal;
  overflow-wrap: anywhere;
}
.pnl-table-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Export dropdown — wraps the Export button and its menu. */
.pnl-export-menu {
  position: relative;
  display: inline-block;
}
.pnl-export-menu__caret {
  margin-left: 2px;
  font-size: 10px;
  opacity: 0.7;
}
.pnl-export-menu__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1500;
  min-width: 160px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pnl-export-menu__item {
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 10px;
  font-size: var(--font-small);
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.pnl-export-menu__item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Table pagination */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
}

.table-pagination__info {
  font-size: var(--font-small);
  color: var(--text-secondary);
}

.table-pagination__controls {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.table-pagination__btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
}

.table-pagination__btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.table-pagination__btn.active {
  background: var(--color-action-muted);
  color: var(--color-action);
}

.table-pagination__btn:disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
  opacity: 0.5;
}

.table-pagination__select {
  height: 32px;
  padding: 0 var(--space-2);
  background: var(--bg-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-small);
}

/* Export button in table header */
.table-export-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-default);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.table-export-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

/* ============================================================
   INPUTS
   ============================================================ */
.input {
  height: 40px;
  padding: 0 var(--space-3);
  background: var(--bg-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-body);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}

.input::placeholder {
  color: var(--text-tertiary);
}

.input:focus {
  outline: none;
  border-color: var(--color-action);
  box-shadow: 0 0 0 3px var(--color-action-muted);
}

.input--sm {
  height: 32px;
  font-size: var(--font-small);
}

.select {
  height: 40px;
  padding: 0 var(--space-8) 0 var(--space-3);
  background: var(--bg-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-body);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.select:focus {
  outline: none;
  border-color: var(--color-action);
  box-shadow: 0 0 0 3px var(--color-action-muted);
}

.select--sm {
  height: 32px;
  font-size: var(--font-small);
}

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  margin-bottom: var(--space-4);
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-base);
}

.filter-bar__group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.filter-bar__separator {
  width: 1px;
  height: 24px;
  background: var(--border-default);
}

.filter-bar__date-range {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.filter-bar__date-range .input,
.filter-bar__date-range .select {
  width: auto;
  min-width: 120px;
}

.filter-bar__arrow {
  color: var(--text-tertiary);
  font-size: var(--font-small);
}

.filter-bar__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 28px;
  padding: 0 var(--space-3);
  background: var(--color-action-muted);
  color: var(--color-action);
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 500;
}

.filter-bar__badge-close {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  transition: background var(--transition-fast);
}

.filter-bar__badge-close:hover {
  background: var(--color-action-ghost);
}

.filter-bar__clear {
  font-size: var(--font-small);
  color: var(--text-link);
  cursor: pointer;
}

.filter-bar__clear:hover {
  text-decoration: underline;
}

/* Platform toggle (reused for service line toggle) */
.platform-toggle {
  display: flex;
  background: var(--bg-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.platform-toggle__btn {
  height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--font-small);
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.platform-toggle__btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.platform-toggle__btn.active {
  background: var(--color-action);
  color: var(--text-on-action);
}

/* ============================================================
   BADGES / TAGS
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 500;
}

.badge--default {
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.badge--primary {
  background: var(--color-action-muted);
  color: var(--color-action);
}

.badge--success {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success);
}

.badge--warning {
  background: rgba(245, 158, 11, 0.15);
  color: var(--color-warning);
}

.badge--danger {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-danger);
}

.badge--brand {
  background: var(--color-brand-muted);
  color: var(--color-brand);
}

.badge--info {
  background: rgba(59, 130, 246, 0.15);
  color: var(--color-info);
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn var(--transition-slow) ease;
}

.modal {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 640px;
  width: 100%;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  animation: modalIn var(--transition-slow) ease;
}

.modal--sm { max-width: 480px; }
.modal--lg { max-width: 800px; }

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.modal__title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--font-h2);
  font-weight: 600;
  color: var(--text-primary);
}

.modal__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  background: none;
}

.modal__close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
  -webkit-overflow-scrolling: touch;
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

/* ============================================================
   BREADCRUMBS (Drill-down)
   ============================================================ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-small);
  margin-bottom: var(--space-4);
}

.breadcrumb__item {
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.breadcrumb__item:hover {
  color: var(--text-link);
}

.breadcrumb__item.current {
  color: var(--text-primary);
  cursor: default;
  font-weight: 600;
}

.breadcrumb__separator {
  color: var(--text-tertiary);
  font-size: 10px;
}

/* ============================================================
   CHART CONTAINERS
   ============================================================ */
.chart-wrap {
  position: relative;
  width: 100%;
}

.chart-tooltip {
  position: fixed;
  z-index: 600;
  pointer-events: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-small);
  box-shadow: var(--shadow-lg);
  max-width: 280px;
  transition: opacity var(--transition-fast);
}

.chart-tooltip__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 0;
}

.chart-tooltip__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.chart-tooltip__label {
  color: var(--text-secondary);
  flex: 1;
}

.chart-tooltip__value {
  font-family: 'Geist Mono', ui-monospace, monospace;
  color: var(--text-primary);
  font-weight: 600;
}

/* ============================================================
   CONTEXT MENU
   ============================================================ */
.context-menu {
  position: fixed;
  z-index: 600;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  padding: var(--space-1) 0;
  animation: fadeIn var(--transition-fast) ease;
}

.context-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 36px;
  padding: 0 var(--space-4);
  font-size: var(--font-body);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.context-menu__item:hover {
  background: var(--bg-hover);
}

.context-menu__item--danger {
  color: var(--color-danger);
}

.context-menu__item-icon {
  width: 16px;
  height: 16px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.context-menu__item--danger .context-menu__item-icon {
  color: var(--color-danger);
}

.context-menu__item-shortcut {
  margin-left: auto;
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.context-menu__separator {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-1) 0;
}

/* ============================================================
   TOOLTIPS (General)
   ============================================================ */
.tooltip {
  position: absolute;
  z-index: 700;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-small);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
  pointer-events: none;
}

/* ============================================================
   PROGRESS BARS
   ============================================================ */
.progress {
  height: 6px;
  background: var(--bg-inset);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress--md {
  height: 8px;
}

.progress__fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 400ms ease;
}

.progress__fill--danger { background: var(--color-danger); }
.progress__fill--warning { background: var(--color-warning); }
.progress__fill--action { background: var(--color-action); }
.progress__fill--success { background: var(--color-success); }

/* ============================================================
   SKELETON LOADING
   ============================================================ */
.skeleton {
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--bg-hover) 50%,
    transparent 100%
  );
  animation: shimmer 1.5s infinite;
}

.skeleton--text {
  height: 14px;
  width: 60%;
  border-radius: var(--radius-sm);
}

.skeleton--metric {
  height: 32px;
  width: 120px;
  border-radius: var(--radius-sm);
}

.skeleton--chart {
  height: 200px;
  border-radius: var(--radius-md);
}

.skeleton--row {
  height: 44px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Staggered shimmer for rows */
.skeleton--row:nth-child(2) { animation-delay: 100ms; }
.skeleton--row:nth-child(3) { animation-delay: 200ms; }
.skeleton--row:nth-child(4) { animation-delay: 300ms; }
.skeleton--row:nth-child(5) { animation-delay: 400ms; }

/* ============================================================
   FLASH ANIMATION
   ============================================================ */
.flash {
  animation: flashHighlight 1.5s ease;
}

@keyframes flashHighlight {
  0% { background: var(--color-action-muted); }
  100% { background: transparent; }
}

/* ============================================================
   EMPTY STATES
   ============================================================ */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 320px;
  margin: 0 auto;
  padding: var(--space-12);
}

.empty-state__icon {
  width: 48px;
  height: 48px;
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}

.empty-state__heading {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--font-h2);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.empty-state__desc {
  font-size: var(--font-body);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
  position: fixed;
  top: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 480px;
  width: 100%;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border-left: 3px solid transparent;
  font-size: var(--font-body);
  color: var(--text-primary);
  pointer-events: all;
  animation: toastIn 300ms ease;
}

.toast--success { border-left-color: var(--color-success); }
.toast--error { border-left-color: var(--color-danger); }
.toast--warning { border-left-color: var(--color-warning); }
.toast--info { border-left-color: var(--color-action); }

.toast--exit {
  animation: toastOut 150ms ease forwards;
}

/* ============================================================
   STATUS INDICATORS
   ============================================================ */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  display: inline-block;
}

.status-dot--live {
  background: var(--color-success);
  animation: pulseDot 2s ease infinite;
}

.status-dot--stale {
  background: var(--color-warning);
}

.status-dot--error {
  background: var(--color-danger);
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ============================================================
   TRANSITIONS AND ANIMATIONS
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toastOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page enter transition */
.page-enter {
  animation: fadeIn 200ms ease;
}

/* Vue page-fade transition */
.page-fade-enter-active {
  transition: opacity 200ms ease;
}

.page-fade-leave-active {
  transition: opacity 150ms ease;
}

.page-fade-enter-from,
.page-fade-leave-to {
  opacity: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }

.text-right { text-align: right; }
.text-center { text-align: center; }
.text-nowrap { white-space: nowrap; }

.w-full { width: 100%; }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ============================================================
   P&L / WATERFALL MODULE
   ============================================================ */

/* P&L step row */
.pnl-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.pnl-row:last-child {
  border-bottom: none;
}

.pnl-row--total {
  background: var(--bg-inset);
  border-radius: var(--radius-sm);
  border: none;
  margin-top: var(--space-2);
}

.pnl-row__label {
  font-size: var(--font-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  min-width: 80px;
}

.pnl-row__bar {
  flex: 1;
  height: 8px;
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.pnl-row__bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 400ms ease;
}

.pnl-row__value {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--font-data);
  font-weight: 600;
  text-align: right;
  min-width: 100px;
  color: var(--text-primary);
}

.pnl-row__pct {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  min-width: 52px;
  text-align: right;
}

/* Service line breakdown row */
.sl-row {
  display: grid;
  grid-template-columns: 8px minmax(80px, 1fr) 2fr 80px 60px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.sl-row:last-child {
  border-bottom: none;
}

.sl-row__color {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.sl-row__name {
  font-size: var(--font-small);
  font-weight: 500;
  color: var(--text-primary);
}

.sl-row__bar-track {
  flex: 1;
  height: 6px;
  background: var(--bg-elevated);
  border-radius: 3px;
  overflow: hidden;
}

.sl-row__bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 400ms ease;
}

.sl-row__value {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.sl-row__pct {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-secondary);
  text-align: right;
  white-space: nowrap;
}

/* Sub-tab navigation */
.sub-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border-default);
  padding-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.sub-tabs::-webkit-scrollbar {
  display: none;
}

.sub-tabs__btn {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-body);
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}

.sub-tabs__btn:hover {
  color: var(--text-primary);
}

.sub-tabs__btn.active {
  color: var(--color-action);
  border-bottom-color: var(--color-action);
}

/* ============================================================
   OPERATIONAL METRICS MODULE
   ============================================================ */

/* Studio utilization card */
.ops-util-bar {
  height: 10px;
  background: var(--bg-inset);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--space-2);
}

.ops-util-bar__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-action);
  transition: width 400ms ease;
}

.ops-util-bar__fill--good    { background: var(--color-success); }
.ops-util-bar__fill--warn    { background: var(--color-warning); }
.ops-util-bar__fill--danger  { background: var(--color-danger); }

/* Media spend breakdown bar */
.media-spend-bar {
  display: flex;
  height: 8px;
  border-radius: var(--radius-full);
  overflow: hidden;
  gap: 1px;
  margin-top: var(--space-2);
}

.media-spend-bar__segment {
  min-width: 2px;
  transition: width 0.3s ease;
}

/* Media format legend */
.media-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.media-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.media-legend__dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ============================================================
   TRAFFIC LIGHT / SLA INDICATORS
   ============================================================ */
.sla-light {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sla-light--green {
  background: var(--color-success);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

.sla-light--yellow {
  background: var(--color-warning);
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}

.sla-light--red {
  background: var(--color-danger);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}

/* Margin target indicator */
.margin-target {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
  font-family: 'Geist Mono', ui-monospace, monospace;
}

.margin-target--above {
  background: rgba(34, 197, 94, 0.12);
  color: var(--color-success);
}

.margin-target--below {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-danger);
}

.margin-target--at {
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-warning);
}

/* ============================================================
   SLIDE PANEL
   ============================================================ */
.slide-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
}

.slide-panel {
  width: 460px;
  max-width: 90vw;
  height: 100vh;
  overflow-y: auto;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
}

.slide-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  gap: var(--space-4);
}

.slide-panel__title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--font-h3);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.slide-panel__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.slide-panel__close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.slide-panel__body {
  padding: var(--space-6);
  flex: 1;
  overflow-y: auto;
}

/* Vue slide-panel transition */
.slide-panel-enter-active,
.slide-panel-leave-active {
  transition: opacity 0.2s ease;
}

.slide-panel-enter-active .slide-panel,
.slide-panel-leave-active .slide-panel {
  transition: transform 0.25s ease;
}

.slide-panel-enter-from,
.slide-panel-leave-to {
  opacity: 0;
}

.slide-panel-enter-from .slide-panel {
  transform: translateX(100%);
}

.slide-panel-leave-to .slide-panel {
  transform: translateX(100%);
}

/* ============================================================
   RESPONSIVE — Mobile adjustments in styles.css scope
   ============================================================ */
@media (max-width: 1024px) {
  .grid--1-mobile {
    grid-template-columns: 1fr !important;
  }

  .grid--1-mobile .grid__span-2 {
    grid-column: span 1;
  }

  .slide-panel {
    width: 100vw;
    max-width: 100vw;
  }
}

@media (max-width: 640px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .sl-row {
    grid-template-columns: 8px 1fr 1fr 60px;
  }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .sidebar,
  .filter-bar,
  .toast-container,
  .modal-overlay,
  .context-menu,
  .btn,
  .sidebar__toggle,
  .sidebar__theme-toggle {
    display: none !important;
  }

  .content-area {
    margin-left: 0 !important;
  }

  body {
    background: white !important;
    color: #111 !important;
  }

  .card {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }

  .page {
    max-width: 100% !important;
    padding: 0 !important;
  }
}

/* ============================================================
   PAGINATION ELLIPSIS
   ============================================================ */
.table-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: var(--font-small);
  color: var(--text-tertiary);
}

/* Number warning color */
.num--warn {
  color: var(--color-warning, #F59E0B);
}

/* ============================================================
   P&L OVERVIEW PAGE
   ============================================================ */

/* KPI card grid — 6 cards across on desktop (NMV, COGS, SER REV, GP, FO, OP),
   wrap to 3 on tablet, 2 on mobile */
.pnl-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (max-width: 1279px) {
  .pnl-kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .pnl-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

/* OP card success/warning states */
.metric-card--success {
  border-color: rgba(34, 197, 94, 0.3);
}

.metric-card--success .metric-card__value {
  color: var(--color-success);
}

.metric-card--warning {
  border-color: rgba(245, 158, 11, 0.3);
}

/* OP% target badges */
.pnl-op-target-met { color: var(--color-success); }
.pnl-op-target-miss { color: var(--color-warning); }

.pnl-target-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  font-weight: 600;
}

.pnl-target-badge--met {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success);
}

.pnl-target-badge--miss {
  background: rgba(245, 158, 11, 0.12);
  color: var(--color-warning);
}

/* Compare toggle (YoY / QoQ) */
.pnl-compare-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--bg-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.pnl-compare-btn {
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: calc(var(--radius-sm) - 1px);
  font-size: var(--font-small);
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  transition: all var(--transition-fast);
  cursor: pointer;
  border: none;
}

.pnl-compare-btn:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

.pnl-compare-btn--active {
  background: var(--color-action);
  color: var(--text-on-action);
}

.pnl-compare-btn--active:hover {
  background: var(--color-action-hover);
  color: var(--text-on-action);
}

.pnl-compare-label {
  font-size: var(--font-small);
  color: var(--text-tertiary);
  padding: 0 var(--space-2);
  white-space: nowrap;
}

/* Charts row: waterfall (2/3) + donut (1/3). When the donut is hidden
   (single-service selection), the `.pnl-charts-row--single` modifier
   collapses the grid to a single column so the waterfall expands
   full-width. */
.pnl-charts-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  align-items: start;
}

.pnl-charts-row--single {
  grid-template-columns: 1fr;
}

/* Full-width waterfall card (Sprint 1.9+ moved the donut to its own row). */
.pnl-waterfall-card--full {
  margin-bottom: var(--space-6);
}

/* P&L Performance Efficiency card — sits directly under the waterfall. Ratio
   column chart with per-metric target overlay. Keeps the same
   card chrome + spacing as the waterfall; the SVG inside is
   100% width and responsive. */
.pnl-overtime-card {
  margin-bottom: var(--space-6);
}
.pnl-overtime-card .pnl-overtime-chart {
  width: 100%;
}
.pnl-overtime-card .pnl-overtime__svg {
  max-width: 100%;
}

/* Donut row — one donut per P&L metric, 6 across on wide screens,
   wraps to 3×2 and then 2×3 on narrower viewports. */
.pnl-donut-row-card {
  margin-bottom: var(--space-6);
}

/* Service Contribution stacked-column card — explicit bottom gap so
   the Detailed P&L card doesn't butt up against it. */
.pnl-contribution-card--spaced {
  margin-bottom: var(--space-6);
}

.pnl-donut-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-2) 0 var(--space-4);
}

@media (max-width: 1399px) {
  .pnl-donut-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .pnl-donut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pnl-donut-mini {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  padding: var(--space-3) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.pnl-donut-mini__chart {
  width: 100%;
  min-height: 220px;
}

.pnl-donut-mini__title {
  font-size: var(--font-small);
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
  font-family: 'Geist Mono', monospace;
}

/* Waterfall bar click lands here — subtle ring + tint so users see which
   donut corresponds to the clicked column. */
.pnl-donut-mini--highlighted {
  border-color: var(--color-action);
  background: var(--color-action-muted);
}

/* Shared legend row under the 6 donuts — single line, centered.
   Overrides the base `.pnl-donut-legend` grid display (which was a
   2x2 layout for the old single-donut card). */
.pnl-donut-legend.pnl-donut-legend--shared {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  grid-template-columns: none;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-6) var(--space-1);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-2);
}

.pnl-donut-legend.pnl-donut-legend--shared .pnl-donut-legend__item {
  gap: var(--space-2);
  flex: 0 0 auto;
}

/* Service-tinted page header — active when a single service line is
   filtered. Adds a colored left accent bar and tints the service name
   in the title with that service's palette color. */
.page-header--service-tinted {
  position: relative;
  padding-left: var(--space-4);
  border-left: 4px solid var(--service-tint, var(--border-subtle));
}

.page-header__service-name {
  color: var(--service-tint, var(--text-primary));
  font-weight: 700;
}

/* Service-tinted cards — when exactly one service line is selected,
   every `.card` inside `.pnl-page` picks up a 3px top border in that
   service's palette color via the shared `--service-tint` custom
   property set on the page root. Applies uniformly to every card
   (KPI grid tiles, P&L Breakdown, Service Contribution, Service P&L
   Breakdown, Detailed P&L, Performance monthly-trend, Performance
   Detail) so the dashboard reads as a consistent service-scoped view. */
.pnl-page--service-tinted .card {
  border-top: 3px solid var(--service-tint, var(--border-default));
}
/* Metric cards in the KPI grid are `.metric-card`, not `.card`.
   Tint them the same way. */
.pnl-page--service-tinted .metric-card {
  border-top: 3px solid var(--service-tint, var(--border-default));
}

/* Sprint 1.15 — dim-filtered page state. When a group brand / category /
   platform filter is active the data is pro-rated (P&L) or directly
   filtered (NMV), so we tint the whole page surface grey to make the
   "scoped view" obvious. Parallels the service-tinted treatment but
   uses a neutral grey instead of a service color. */
.page-header--dim-filtered {
  position: relative;
  padding-left: var(--space-4);
  border-left: 4px solid var(--border-default);
}
.page-header__dim-scope {
  color: var(--text-secondary);
  font-weight: 600;
  font-style: italic;
}
.pnl-page--dim-filtered .card,
.pnl-page--dim-filtered .metric-card {
  border-top: 3px solid var(--border-default);
}
/* Card title scope tag — italic + secondary color so it reads as
   "metadata about the slice" rather than part of the title itself. */
.card__title-scope {
  color: var(--text-secondary);
  font-weight: 500;
  font-style: italic;
}

@media (max-width: 1023px) {
  .pnl-charts-row {
    grid-template-columns: 1fr;
  }
}

.pnl-waterfall-card,
.pnl-donut-card {
  height: 100%;
}

/* Donut metric tabs */
.pnl-donut-tabs {
  display: flex;
  gap: 2px;
  padding: 0 var(--space-6) var(--space-4);
  margin-top: calc(-1 * var(--space-2));
}

.pnl-donut-tab {
  height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.pnl-donut-tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-default);
}

.pnl-donut-tab--active {
  background: var(--color-action-muted);
  color: var(--color-action);
  border-color: var(--border-action);
}

/* Custom 2×2 donut legend — fixed grid keeps the row count stable
   across filter changes (donut renders six metrics regardless). */
.pnl-donut-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-6) var(--space-2);
  margin-top: var(--space-2);
}

/* Performance trend + detail chart legends — same horizontal
   chip pattern as the contribution legend, scoped per chart so
   the spacing is consistent without bleeding into other cards. */
.perf-trend__legend,
.perf-detail__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-3) var(--space-2) 0;
  margin-top: var(--space-2);
}
.perf-trend__legend-item,
.perf-detail__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-small);
  color: var(--text-primary);
  font-weight: 600;
}
.perf-trend__legend-dot {
  flex-shrink: 0;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.perf-detail__legend-line {
  flex-shrink: 0;
  display: inline-block;
  width: 22px;
  height: 3px;
  border-radius: 2px;
}
.perf-detail__legend-line--dashed {
  height: 0;
  background: transparent !important;
  border-top: 2px dashed currentColor;
}
.perf-detail__legend-icon {
  flex-shrink: 0;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  width: 14px;
  text-align: center;
  line-height: 1;
}

/* Service Contribution chart legend — single horizontal row of
   service chips, centered below the SVG chart in both stacked
   and donut modes. Same dot + name pattern as the donut legend. */
.contribution-chart__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-3) var(--space-2) 0;
  margin-top: var(--space-2);
}
.contribution-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-small);
  color: var(--text-primary);
  font-weight: 600;
}
.contribution-chart__legend-dot {
  flex-shrink: 0;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.contribution-chart__legend-name {
  white-space: nowrap;
}

.pnl-donut-legend__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-small);
  color: var(--text-secondary);
  min-width: 0;
}

.pnl-donut-legend__dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.pnl-donut-legend__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
  font-weight: 600;
}

.pnl-donut-legend__pct {
  flex-shrink: 0;
  font-family: 'Geist Mono', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   Framework tooltip utilities
   ══════════════════════════════════════════════════════════════
   Three hover-tooltip patterns sit on top of the design system.

   1. `[data-tooltip]` → dark pill (page-element affordance hints —
      filter chips, nav items, toggle boxes). Plain text only, via
      CSS `::after` reading `attr(...)`. Implemented per-component
      (see `.service-toggle` in index.html).

   2. `.chart-tooltip-host > .chart-tooltip` → rich white waterfall
      card, **nested DOM**. Use for data-readout hints on chart-like
      HTML elements (sparkbar segments, in-grid shapes). Structure:
      mark the hoverable container with `.chart-tooltip-host`, then
      drop a `.chart-tooltip` child containing `.chart-tooltip__header`,
      repeated `.chart-tooltip__row` blocks, dividers, dots, and
      labels. Shows on `:hover` of the host.

   3. `[data-chart-tooltip]` → rich white waterfall card, **attribute
      string**. Used by the raw SVG chart components (Sprint 1.11+)
      which can't nest HTML DOM children inside `<svg>`. The SVG
      component emits `data-chart-tooltip="<html>"` on each hover
      target; a global handler in `app.js` renders the HTML into a
      floating `.chart-tooltip-floating` div near the hovered element.
      HTML payload built via `SvgChartUtils.tooltipOpen + Header +
      Row + Divider + Close`. */

/* Floating chart tooltip — rendered by the global handler in
   app.js from the `data-chart-tooltip` attribute on SVG chart
   hover targets. Position is set imperatively in JS. */
.chart-tooltip-floating {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  z-index: 1000;
}
.chart-tooltip-floating--visible {
  opacity: 1;
}

.chart-tooltip-host { position: relative; }
.chart-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #FFFFFF;
  color: #334155;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  padding: 10px 12px;
  min-width: 220px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  font-family: 'Lato', system-ui, sans-serif;
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 1000;
  text-align: left;
  white-space: nowrap;
}
.chart-tooltip-host:hover > .chart-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.chart-tooltip__header {
  color: #0F172A;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #F1F5F9;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.chart-tooltip__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 3px 0;
}
.chart-tooltip__label {
  display: flex;
  align-items: center;
  color: #64748B;
  font-size: 12px;
  font-weight: 500;
}
.chart-tooltip__row--emph .chart-tooltip__label { color: #0F172A; font-weight: 700; }
.chart-tooltip__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 8px;
  flex-shrink: 0;
}
.chart-tooltip__value {
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  font-family: 'Geist Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.chart-tooltip__row--emph .chart-tooltip__value { color: #0F172A; font-weight: 700; }
.chart-tooltip__divider {
  height: 1px;
  background: #F1F5F9;
  margin: 6px 0;
}

/* ════════════════════════════════════════════════════════════
   Monthly Performance by Service — variance strip
   Row of goodness-colored delta pills below the combo chart,
   one per month, aligned to the column centers via a grid.
   Reuses the literal-vs-goodness split from the KPI cards: a
   cost metric under target renders green even though the
   numeric delta is negative.
   ════════════════════════════════════════════════════════════ */
.perf-variance-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-1) 48px 0 48px;  /* mirror chart grid padding */
  margin-top: calc(-1 * var(--space-2));
}
.perf-variance-pill {
  text-align: center;
  font-size: 10px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 2px 4px;
  border-radius: 3px;
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  line-height: 1.4;
}
.perf-variance-pill--good    { background: rgba(22, 163, 74, 0.14); color: #16A34A; }
.perf-variance-pill--bad     { background: rgba(220, 38, 38, 0.14); color: #DC2626; }
.perf-variance-pill--neutral { background: var(--bg-elevated);       color: var(--text-tertiary); }

.perf-variance-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  margin-top: var(--space-3);
  font-size: 11px;
  color: var(--text-tertiary);
  font-family: 'Lato', sans-serif;
}
.perf-variance-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.perf-variance-legend__swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 14px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Geist Mono', monospace;
}
.perf-variance-legend__dash {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 2px dashed var(--text-tertiary);
}

/* ════════════════════════════════════════════════════════════
   Service P&L Breakdown card — per-service sparkbar (COGS/FO/OP),
   proportional width in absolute mode, fixed 100% in pct mode.
   Total sits just after the bar, connected by a short dotted line.
   ════════════════════════════════════════════════════════════ */
.pnl-svc-breakdown-card {
  margin-bottom: var(--space-6);
}
.svc-breakdown {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.svc-breakdown__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  gap: var(--space-4);
}
@media (max-width: 767px) {
  .svc-breakdown__row {
    grid-template-columns: 120px 1fr;
    gap: var(--space-3);
  }
}
.svc-breakdown__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-small);
  font-weight: 600;
  color: var(--text-primary);
}
.svc-breakdown__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Track: [bar][connector][total] — bar width is variable, connector
   flexes to fill any gap, total is pinned to the far right of the bar
   + connector pair. */
.svc-breakdown__track {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.svc-breakdown__bar {
  display: flex;
  height: 36px;
  /* NO overflow:hidden here — would clip the segment hover tooltips
     that render as absolutely-positioned `::after` pseudos above the
     bar. Corners are rounded by the first/last segments instead. */
  transition: width 0.25s ease;
  flex-shrink: 0;
  /* Reserve space for the dashed connector + total label so a
     width: 100% bar (pct mode or the largest abs bar) still fits
     within the track and the total doesn't push past the card edge. */
  max-width: calc(100% - 110px);
}
.svc-breakdown__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  min-width: 0;
  padding: 0 var(--space-2);
  transition: flex 0.25s ease;
}
.svc-breakdown__seg:first-child {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}
.svc-breakdown__seg:last-child {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}
.svc-breakdown__seg--cogs { background: #EF4444; }
.svc-breakdown__seg--fo   { background: #F97316; }
.svc-breakdown__seg--op   { background: #22C55E; }
.svc-breakdown__seg { position: relative; }
.svc-breakdown__seg-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Short dashed connector between the end of the bar and the total
   label — matches the "lollipop" connector style used on the P&L
   waterfall and Performance charts. */
.svc-breakdown__connector {
  flex: 0 0 auto;
  width: 24px;
  height: 0;
  border-top: 1px dashed rgba(148, 163, 184, 0.7);
}
.svc-breakdown__total {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--font-small);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Table section */
.pnl-table-card {
  margin-bottom: var(--space-6);
}

/* Detailed P&L + Performance Detail headers — centered regardless of
   per-column text align. Cells still follow the column's align (numeric
   right, service/month left), but the header row reads as a single
   centered label strip. */
.pnl-table-card .fin-table thead th,
.pnl-perf-table-card .fin-table thead th {
  text-align: center;
}

/* Performance Detail — By Service mode:
   - Group-header row spans all columns with a tinted background and
     uppercase mono label (the month). Rendered whenever a row in the
     dataset carries `isGroupHeader: true`, via DataTable's group-header
     slot.
   - Service rows show a palette dot + service name in the first cell. */
.fin-table tbody tr.fin-row-group-header td {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-default);
  padding: 8px 12px;
}
.perf-group-header {
  font-size: var(--font-xs);
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.perf-label__service {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-small);
  color: var(--text-secondary);
  font-weight: 500;
  padding-left: var(--space-3);
}

/* Service dot in table */
.pnl-service-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--space-2);
  flex-shrink: 0;
  vertical-align: middle;
}

/* Total row styling */
.pnl-total-row-label {
  font-weight: 700;
  color: var(--text-primary);
}

/* ============================================================
   LOGIN PAGE — centered card on the base background. Shares
   tokens with the rest of the shell so dark/light themes work
   automatically. Nothing is hardcoded.
   ============================================================ */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: radial-gradient(ellipse at top, var(--bg-surface) 0%, var(--bg-base) 60%);
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8) var(--space-6) var(--space-6);
}

.login-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  text-align: center;
}

.login-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
}

.login-card__eyebrow {
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.login-card__title {
  font-size: var(--font-h1);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  text-align: center;
  margin-bottom: var(--space-5);
}

/* Separator between the header block and the sign-in action */
.login-sep {
  height: 1px;
  border: 0;
  background: var(--border-default);
  margin: 0 0 var(--space-5);
}

.login-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-action);
  border-radius: var(--radius-sm);
  background: var(--color-action);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.06s ease;
}
.login-sso:hover:not(:disabled) {
  background: var(--color-action-hover);
  border-color: var(--color-action-hover);
}
.login-sso:active:not(:disabled) { transform: translateY(1px); }
.login-sso:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.login-sso__icon { flex-shrink: 0; }

.login-auth-error {
  width: 100%;
  border: 1px solid var(--color-brand, #DC2626);
  background: var(--color-brand-ghost, #FEF2F2);
  color: var(--text-primary, #1F2937);
  border-radius: var(--radius-sm, 0.375rem);
  padding: 0.875rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.45;
}
.login-auth-error__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.login-auth-error__title {
  color: var(--color-brand, #DC2626);
  font-weight: 700;
}
.login-auth-error__dismiss {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-tertiary, #6B7280);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
}
.login-auth-error__dismiss:hover {
  color: var(--text-primary, #1F2937);
}
.login-auth-error__desc {
  margin: 0 0 0.5rem;
}
.login-auth-error__hint {
  margin: 0 0 0.5rem;
  color: var(--text-secondary, #4B5563);
}
.login-auth-error__toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-action, #2563EB);
  font-size: 0.85rem;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.login-auth-error__toggle:hover {
  text-decoration: none;
}
.login-auth-error__raw {
  margin: 0.5rem 0 0;
  padding: 0.5rem;
  background: var(--color-brand-ghost, #F3F4F6);
  border-radius: var(--radius-sm, 0.375rem);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 0.75rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Category accent — tone the left border to the kind of failure */
.login-auth-error { border-left-width: 4px; }
.login-auth-error--account   { border-left-color: var(--color-warning, #F59E0B); }
.login-auth-error--transient { border-left-color: var(--color-action, #2563EB); }
.login-auth-error--config,
.login-auth-error--unknown   { border-left-color: var(--color-danger, #DC2626); }

/* Reference / time / code meta — quotable when reporting */
.login-auth-error__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px var(--space-3);
  margin: 0 0 var(--space-3);
  font-size: var(--font-xs);
}
.login-auth-error__meta > div { display: contents; }
.login-auth-error__meta dt { color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.login-auth-error__meta dd { margin: 0; font-family: var(--font-mono, ui-monospace, monospace); color: var(--text-secondary); }

/* Report actions — copy details / email data-solutions */
.login-auth-error__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-2); }
.login-auth-error__report {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: var(--font-xs);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.login-auth-error__report:hover { background: var(--bg-hover); border-color: var(--border-strong); }

/* --- No-access banner (amber/warning — FE-007) --- */
.welcome-banner-no-access {
  max-width: 720px;
  margin: 1.5rem auto 0;
  padding: 1rem 1.25rem;
  background: var(--color-warning-ghost, #FEF3C7);
  border: 1px solid var(--color-warning, #F59E0B);
  border-left-width: 4px;
  border-radius: var(--radius-sm, 0.375rem);
  color: var(--text-primary, #1F2937);
  font-size: 0.95rem;
  line-height: 1.5;
}
.welcome-banner-no-access__title {
  display: block;
  color: var(--color-warning-strong, #B45309);
  font-weight: 700;
  margin-bottom: 0.375rem;
}
.welcome-banner-no-access__body {
  margin: 0;
}

.login-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--font-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  text-align: center;
  letter-spacing: 0.02em;
}

/* ============================================================
   SIDEBAR USER ROW — lives above the theme/collapse toggles.
   Shows email + role + signout in expanded state; compact
   avatar-only in collapsed state with hover-expand to full.
   ============================================================ */
.sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  margin: 1px var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-3);
  white-space: nowrap;
  min-width: 0;
}

.sidebar__user-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-action-muted);
  color: var(--color-action);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--border-action);
}

.sidebar__user-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.sidebar__user-email {
  font-size: var(--font-small);
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__user-role {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  /* Override the nowrap inherited from .sidebar__user so a long job title
     wraps instead of clipping mid-word ("…MANAGER" was cut to "…MANAGEI").
     Capped at 2 lines (ellipsis beyond) to keep the footer compact. */
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Quick-action strip — compact icon buttons in the sidebar footer
   (impersonate · confidentiality · theme · sign out). Keeps the footer
   small so the dashboard stays the focus. */
.sidebar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2) 0;
}

.sidebar__act-btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar__act-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar__act-btn--on { background: var(--color-action-muted); color: var(--color-action); }
.sidebar__act-btn--danger:hover { background: var(--color-brand-ghost); color: var(--color-brand); }

.sidebar__act-btn span { display: flex; align-items: center; justify-content: center; }
.sidebar__act-btn svg { width: 18px; height: 18px; }

/* Impersonate wrapper acts as one flex slot in the strip; its popover opens
   above and left-aligned to the sidebar (not constrained to the narrow icon). */
.sidebar__actions .sidebar__imp { flex: 1 1 0; margin: 0; }
.sidebar__actions .sidebar__imp .sidebar__act-btn { width: 100%; }
.sidebar__actions .sidebar__imp-popover { left: 0; right: auto; width: 224px; }

/* Collapsed state — hide labels and email/role; keep avatar centered. */
.sidebar.collapsed:not(:hover) .sidebar__user {
  justify-content: center;
  padding: var(--space-2) 0;
  gap: 0;
}

.sidebar.collapsed:not(:hover) .sidebar__user-text {
  display: none;
}

/* ============================================================
   Impersonation banner — shown at the very top of the content
   area while admin is viewing the portal as another user.
   Amber tone so it's unmistakable. Inline with the filter bar
   so pages reflow naturally.
   ============================================================ */
.imp-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  background: rgba(245, 158, 11, 0.12);
  border-bottom: 1px solid rgba(245, 158, 11, 0.40);
  color: #F59E0B;
  font-size: var(--font-small);
  font-weight: 500;
}
.imp-banner strong {
  font-weight: 700;
  color: #F59E0B;
}
.imp-banner__exit {
  margin-left: auto;
  padding: 6px 12px;
  background: rgba(245, 158, 11, 0.18);
  border: 1px solid rgba(245, 158, 11, 0.50);
  border-radius: var(--radius-sm);
  color: #F59E0B;
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.imp-banner__exit:hover {
  background: rgba(245, 158, 11, 0.28);
}

/* ============================================================
   Sidebar impersonation control — admin-only trigger + popover
   listing readable profiles. Sits in the sidebar footer above
   the sign-out row.
   ============================================================ */
.sidebar__imp {
  position: relative;
  margin: 1px var(--space-2);
}
.sidebar__imp-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: var(--font-small);
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.sidebar__imp-trigger:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.sidebar__imp-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.sidebar.collapsed:not(:hover) .sidebar__imp-trigger {
  justify-content: center;
  padding: 0;
}
.sidebar.collapsed:not(:hover) .sidebar__imp-trigger span:last-child {
  display: none;
}

.sidebar__imp-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: var(--space-2);
  right: var(--space-2);
  z-index: 500;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3);
  max-height: 320px;
  overflow-y: auto;
  min-width: 220px;
}
.sidebar__imp-title {
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-2);
}
.sidebar__imp-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar__imp-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--font-small);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.sidebar__imp-user:hover {
  background: var(--color-action-muted);
  color: var(--color-action);
  border-color: var(--border-action);
}
.sidebar__imp-user-email {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar__imp-user-role {
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.sidebar__imp-active {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.sidebar__imp-active-email {
  font-size: var(--font-body);
  font-weight: 700;
  color: var(--text-primary);
}
.sidebar__imp-active-role {
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #F59E0B;
}
.sidebar__imp-exit {
  margin-top: var(--space-2);
  padding: 8px 12px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.50);
  border-radius: var(--radius-sm);
  color: #F59E0B;
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
}
.sidebar__imp-exit:hover {
  background: rgba(245, 158, 11, 0.25);
}
.sidebar__imp-hint {
  font-size: var(--font-small);
  color: var(--text-tertiary);
  padding: var(--space-2);
}
.sidebar__imp-error {
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: var(--color-brand-muted);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-sm);
  color: var(--color-brand);
  font-size: var(--font-xs);
}

/* ============================================================
   Sticky filter stack — pins both filter bars + the imp banner
   to the top of the content area so they stay visible while
   scrolling long pages.
   ============================================================ */
.filter-stack {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--bg-surface);
}

/* Multi-row filter bar — two stacked rows inside ONE .filter-bar
   container. Top row is the core filters (date/service/currency),
   bottom row is the RLS-scoped dim filters. The single container
   preserves the unified background + sticky behavior. */
.filter-bar--multi {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
.filter-bar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
/* Second row: left-aligned dim filters with Reset pushed to the
   right edge via margin-left:auto. Subtle hairline divider above,
   no margin so it reads as a continuation of the bar. */
.filter-bar__row--dim {
  justify-content: flex-start;
  padding-top: var(--space-2);
  border-top: 1px dashed var(--border-subtle);
}
.filter-bar__row--dim .filter-bar__filters {
  width: 100%;
}
.filter-item--reset {
  margin-left: auto;
}
/* DIMENSIONS title — lower tier than the page title in the top
   row. Smaller, lighter, muted so the eye reads the top row as
   primary and this row as secondary. */
.filter-bar__title--dim {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  opacity: 0.75;
}

/* ============================================================
   SOCOM in-page header stack — overrides B&S centered layout so
   the two-row filter bar stays left-aligned (same as shell bar).
   Only target the .socom-hdr__stack modifier; never touch
   bs-shared-header.css or the generic .bs-hdr__stack rules.
   ============================================================ */
.socom-hdr__stack .filter-bar { justify-content: stretch; }
/* B&S's shared-header rule forces .filter-bar__filters to
   flex-direction:column (each filter on its own line) for its 3-row
   grid. SOCOM wants each filter GROUP on a single horizontal line, so
   restore row-flow + wrap. bs-shared-header.css loads AFTER styles.css,
   so this MUST out-specify its 3-class rule — hence the compound
   .bs-hdr__stack.socom-hdr__stack (4 classes total). Never edit the
   bs-* file (B&S PO owns it). */
.bs-hdr__stack.socom-hdr__stack .filter-bar .filter-bar__filters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3) var(--space-4);
  width: 100%;
}
/* Dim row (Category/Group brand/Platform/Store + Reset) → ONE line too.
   The global SearchableSelect trigger min-widths (180px, 280px --wide) sum
   past the row width and wrapped Store+Reset to a 2nd line. Let the four
   selects flex-share + shrink (min-width:0) so they collapse onto a single
   row; drop Reset's margin-left:auto so it rides at the row's end instead of
   being pushed onto its own line. Scoped to the SOCOM dim row only. */
.bs-hdr__stack.socom-hdr__stack .filter-bar__row--dim .searchable-select {
  flex: 1 1 180px;
  min-width: 0;
}
/* Make the dropdown box (wrap + trigger) GROW to fill its item instead of
   shrinking to the value's content width (was ~54px "All" + chevron). */
.bs-hdr__stack.socom-hdr__stack .filter-bar__row--dim .searchable-select__wrap {
  flex: 1 1 auto;
  min-width: 0;
}
.bs-hdr__stack.socom-hdr__stack .filter-bar__row--dim .searchable-select__trigger {
  min-width: 0;
  width: 100%;
}
.bs-hdr__stack.socom-hdr__stack .filter-bar__row--dim .filter-item--reset {
  margin-left: 0;
  flex: 0 0 auto;
}
/* Filter-card refinements (2026-06-05, user feedback):
   (1) BIGGER BOXES — B&S forces .filter-bar--multi to align-items:center, which
   shrink-wrapped the SOCOM rows to content (~646px) → tiny, left-clustered boxes.
   Stretch so both rows fill the card + their left edges align with the title; the
   dim selects then flex-share at a comfortable ~184px (flex-basis 180px above). */
.bs-hdr__stack.socom-hdr__stack .filter-bar--multi { align-items: stretch; }
/* (2) GAP — the sticky filter card butted right against the KPI grid (0px). */
.bs-hdr__stack.socom-hdr__stack { margin-bottom: var(--space-6); }
/* (3) STICKY — the router outlet .page-content is overflow-y:auto, which makes IT
   the (non-scrolling) sticky container so the card scrolled away. Route the SOCOM
   portal to overflow:visible (window scrolls) so position:sticky engages — mirrors
   the B&S body[data-portal=brand-store] enabler in bs-shared-header.css (don't edit
   that file). Covers #pnl/#performance/#raw-data/#socom-guidelines. */
body[data-portal="socom"] .page-content { overflow: visible; }
/* Any header-stack containing a custom popover (SearchableSelect) must
   not clip — bs-shared-header.css sets overflow:hidden on .bs-hdr__stack
   for tab-corner rounding, but that clips the dropdown's bottom half.
   Native <select> escapes naturally; the JS popover does not.
   This :has() override covers SOCOM (#pnl/#performance/#raw-data) AND
   any B&S page that uses SearchableSelect inside .bs-hdr__stack (e.g. BPR),
   without touching bs-shared-header.css (owned by the B&S PO). */
.bs-hdr__stack:has(.searchable-select),
.socom-hdr__stack { overflow: visible; }

/* ============================================================
   SearchableSelect — combobox with typeahead popover. Used by
   the dim filter row (Category / Group brand / Marketplace).
   ============================================================ */
.searchable-select__wrap {
  position: relative;
  display: inline-block;
}
.searchable-select__trigger {
  min-width: 180px;
  text-align: left;
}
/* Wide modifier — used by the Store dropdown since store names
   (e.g. "Nutifood Australia - TikTok") overflow a 180px trigger. */
.searchable-select--wide .searchable-select__trigger {
  min-width: 280px;
}
.searchable-select--wide .searchable-select__popover {
  min-width: 440px;
  max-width: 560px;
}
.searchable-select__trigger--active {
  border-color: var(--color-action);
  color: var(--color-action);
  background: rgba(37, 99, 235, 0.12);
  box-shadow: 0 0 0 1px var(--color-action-muted);
}
/* Cascade gate — Brand disabled until a Group Brand is picked (FE-025).
   Matches the native <select disabled> affordance. */
.searchable-select__trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.searchable-select__popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1500;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  padding: var(--space-2);
  min-width: 320px;
  max-width: 480px;
  white-space: nowrap;
}
.searchable-select__input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-small);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.searchable-select__input:focus {
  border-color: var(--color-action);
  box-shadow: 0 0 0 2px var(--color-action-muted);
}
.searchable-select__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-2);
  max-height: 280px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}
.searchable-select__list::-webkit-scrollbar { width: 6px; }
.searchable-select__list::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: 3px;
}
.searchable-select__opt {
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--font-small);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.searchable-select__opt:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.searchable-select__opt--active {
  background: var(--color-action-muted);
  border-color: var(--border-action);
  color: var(--color-action);
  font-weight: 600;
}
.searchable-select__empty {
  padding: var(--space-3);
  text-align: center;
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  font-style: italic;
}

/* ============================================================
   Raw Data page — dataset picker + local filter row. Reuses the
   pnl-compare-btn visual language for the dataset chips so it
   matches the rest of the app.
   ============================================================ */
.raw-dataset-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.raw-pill-btn {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-action);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: var(--font-small);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.raw-pill-btn:hover {
  border-color: var(--color-action);
  color: var(--color-action);
  box-shadow: 0 0 0 1px var(--color-action-muted);
}
.raw-pill-btn--active {
  background: var(--color-action-muted);
  border-color: var(--color-action);
  color: var(--color-action);
  box-shadow: 0 0 0 1px var(--color-action-muted);
}

/* ============================================================
   Site name + version badge — stack directly under the logo.
   Site name is the product title; version is managed by the
   sync-agent workflow (PATCH auto-increments on every deploy
   push, MAJOR.MINOR manual, baked into js/version.js).
   ============================================================ */
.sidebar__sitename {
  text-align: center;
  padding: var(--space-3) var(--space-4) var(--space-1);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  line-height: 1.2;
  flex-shrink: 0;
  user-select: none;
}
.sidebar.collapsed:not(:hover) .sidebar__sitename { display: none; }

.sidebar__version {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-1) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  user-select: none;
}
.sidebar__version-num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.sidebar__version-date {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
/* Collapsed+not-hovered state — hide the whole block so the narrow
   rail stays clean. Hover-expand restores it. */
.sidebar.collapsed:not(:hover) .sidebar__version {
  display: none;
}

/* ============================================================
   Feedback feature (Sprint 1.17)
   ============================================================ */

.feedback-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-action);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: 900;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.feedback-fab:hover {
  background: var(--color-action-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xl);
}
.feedback-fab__icon { display: inline-flex; }
.feedback-fab__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--color-brand);
  color: #ffffff;
  font-size: var(--font-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-base);
}

/* Modal overlay + container */
.feedback-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 15, 0.55);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.feedback-modal {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 640px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.feedback-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.feedback-modal__title {
  font-size: var(--font-h2);
  font-weight: 800;
  color: var(--text-primary);
}
.feedback-modal__close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.feedback-modal__close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.feedback-modal__tabs {
  display: flex;
  gap: var(--space-1);
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.feedback-modal__tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-small);
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.feedback-modal__tab:hover { color: var(--text-primary); }
.feedback-modal__tab--active {
  color: var(--color-action);
  border-bottom-color: var(--color-action);
}
.feedback-modal__body {
  padding: var(--space-5);
  overflow-y: auto;
}

/* Submit form */
.feedback-submit { display: flex; flex-direction: column; gap: var(--space-4); }
.feedback-field { display: flex; flex-direction: column; gap: var(--space-2); }
.feedback-field__label {
  font-size: var(--font-small);
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.feedback-field__hint {
  font-size: var(--font-xs);
  font-weight: 500;
  color: var(--text-tertiary);
}
.feedback-field input[type="text"],
.feedback-field textarea {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--font-body);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.feedback-field input[type="text"]:focus,
.feedback-field textarea:focus {
  outline: none;
  border-color: var(--color-action);
  box-shadow: 0 0 0 2px var(--color-action-muted);
}
.feedback-field textarea { resize: vertical; min-height: 100px; }
.feedback-field input[type="file"] { font-size: var(--font-small); color: var(--text-secondary); }
.feedback-preview {
  max-width: 220px;
  max-height: 140px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
}
.feedback-error {
  background: var(--color-brand-ghost);
  border: 1px solid var(--border-brand);
  color: var(--color-brand);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
}
.feedback-submit__actions {
  display: flex;
  justify-content: flex-end;
}

/* Lists */
.feedback-list { display: flex; flex-direction: column; gap: var(--space-3); }
.feedback-empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--font-small);
}
.feedback-row {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--bg-elevated);
}
.feedback-row__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.feedback-row__title {
  flex: 1;
  font-size: var(--font-body);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feedback-row__time {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.feedback-row__desc {
  font-size: var(--font-small);
  color: var(--text-secondary);
  white-space: pre-wrap;
}
.feedback-admin-note {
  background: var(--color-action-ghost);
  border-left: 3px solid var(--color-action);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  color: var(--text-primary);
}
.feedback-thumb {
  max-width: 180px;
  max-height: 120px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  cursor: zoom-in;
}

/* Status icons */
.feedback-status-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.feedback-status--submitted { color: var(--text-tertiary); }
.feedback-status--wip       { color: var(--color-action); }
.feedback-status--solved    { color: #10B981; }
.feedback-status--closed    { color: var(--text-secondary); }

/* Admin filter chips */
.feedback-filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.feedback-chip {
  padding: 4px 12px;
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.feedback-chip:hover { color: var(--text-primary); border-color: var(--border-strong); }
.feedback-chip--active {
  background: var(--color-action-muted);
  border-color: var(--color-action);
  color: var(--color-action);
}

/* Tab spacer + admin-link button (right-aligned in the tab bar) */
.feedback-modal__tabs-spacer { flex: 1; }
.feedback-modal__admin-link {
  align-self: center;
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-action);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
.feedback-modal__admin-link:hover { background: var(--color-action-muted); }

/* ============================================================
   Admin page (full route #admin — feedback triage + AI Analyst tabs)
   ============================================================ */
/* (The admin route's filter bar is gated off in the app template via
   showFilterBar in js/app.js — no CSS hide needed.) */

/* Tab nav + panel for the admin page shell (Sprint 1.22). */
.admin-page { max-width: 1100px; margin: 0 auto; }
.admin-page .page-header { margin-bottom: var(--space-4); }
.admin-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}
.admin-tabs__btn {
  background: transparent;
  border: none;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.admin-tabs__btn:hover { color: var(--color-text); }
/* no stray focus box on mouse-click; keep an accessible ring for keyboard nav only */
.admin-tabs__btn:focus { outline: none; }
.admin-tabs__btn:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}
.admin-tabs__btn--active {
  color: var(--color-action);
  border-bottom-color: var(--color-action);
}
.admin-tabs__panel { }
.admin-tab-intro { margin-bottom: var(--space-3); }

.feedback-admin-page {
  max-width: 1100px;
  margin: 0 auto;
}
.feedback-admin-page .page-header { margin-bottom: var(--space-4); }
.feedback-admin-deny {
  padding: var(--space-5);
  border-left: 4px solid var(--color-brand);
  color: var(--text-secondary);
}
.feedback-admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.feedback-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 8px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.feedback-chip--active .feedback-chip__count {
  background: var(--color-action);
  color: #ffffff;
}
.feedback-admin-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.feedback-admin-card {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.feedback-admin-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}
.feedback-admin-card__title {
  flex: 1;
  font-size: var(--font-h2);
  font-weight: 700;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feedback-admin-card__status {
  font-size: var(--font-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Top-right status pill in the card header — same color language as
   the timeline pills, just a static one-status variant. */
.feedback-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: var(--font-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}
.feedback-status-pill--submitted {
  background: rgba(92, 100, 120, 0.12);
  color: var(--text-secondary);
  border-color: rgba(92, 100, 120, 0.30);
}
.feedback-status-pill--wip {
  background: var(--color-action-muted);
  color: var(--color-action);
  border-color: var(--border-action);
}
.feedback-status-pill--solved {
  background: rgba(16, 185, 129, 0.14);
  color: #0E8A65;
  border-color: rgba(16, 185, 129, 0.35);
}
[data-theme="dark"] .feedback-status-pill--solved { color: #34D399; }
.feedback-status-pill--closed {
  background: rgba(95, 103, 117, 0.16);
  color: var(--text-secondary);
  border-color: rgba(95, 103, 117, 0.32);
}

/* High-priority badge — shown when submitter has the management role.
   Sits between the title and the status pill. Amber to grab attention
   without colliding with the red brand color. */
.feedback-priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--font-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(245, 158, 11, 0.14);
  color: #B45309;
  border: 1px solid rgba(245, 158, 11, 0.40);
  white-space: nowrap;
}
[data-theme="dark"] .feedback-priority-badge {
  color: #FBBF24;
  background: rgba(245, 158, 11, 0.18);
}
.feedback-admin-card--priority {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.45);
  border-left: 4px solid #F59E0B;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.12), var(--shadow-sm);
}
[data-theme="dark"] .feedback-admin-card--priority {
  background: rgba(245, 158, 11, 0.10);
}
.feedback-admin-card__time {
  font-size: var(--font-small);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.feedback-admin-card__body {
  display: grid;
  grid-template-columns: 220px 1fr 300px;
  gap: var(--space-4);
  align-items: start;
}
.feedback-admin-card__body--no-photo {
  grid-template-columns: 1fr 300px;
}
.feedback-admin-card__photo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.feedback-admin-card__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.feedback-admin-card__main .feedback-row__desc {
  margin: 0;
  font-size: var(--font-body);
  color: var(--text-primary);
  line-height: 1.55;
}
.feedback-admin-card__editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-4);
  border-left: 1px solid var(--border-subtle);
}
.feedback-admin-card__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-small);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.feedback-admin-card__field select,
.feedback-admin-card__field textarea {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
}
.feedback-admin-card__field textarea { resize: vertical; min-height: 50px; }
.feedback-admin-card__actions {
  display: flex;
  justify-content: flex-end;
}
.feedback-thumb--lg {
  max-width: 100%;
  max-height: 150px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  cursor: zoom-in;
  object-fit: contain;
}

/* Footer row under the body grid: 2 columns (meta | timeline)
   separated by a top border from the body. */
.feedback-admin-card__footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  align-items: start;
}

/* Submitter + dates metadata block */
.feedback-admin-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-small);
  color: var(--text-secondary);
}
.feedback-admin-meta__label {
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-right: 4px;
}

/* Status timeline (transitions with dwell deltas) */
.feedback-timeline {
  /* Lives in the right column of the card footer — no extra
     border/padding; the footer separator already provides one. */
}
.feedback-timeline__label {
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}
.feedback-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.feedback-timeline__step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--font-small);
  font-weight: 600;
  white-space: nowrap;
}
.feedback-timeline__step .feedback-status-icon {
  width: 14px;
  height: 14px;
}
.feedback-timeline__name { font-weight: 700; }
.feedback-timeline__when {
  font-size: var(--font-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.feedback-timeline__delta {
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: inherit;
}
[data-theme="dark"] .feedback-timeline__delta { background: rgba(255, 255, 255, 0.10); }

/* One pill style per status — color + tinted background */
.feedback-timeline__step:has(.feedback-status--submitted) {
  background: rgba(92, 100, 120, 0.12);
  color: var(--text-secondary);
  border: 1px solid rgba(92, 100, 120, 0.30);
}
.feedback-timeline__step:has(.feedback-status--wip) {
  background: var(--color-action-muted);
  color: var(--color-action);
  border: 1px solid var(--border-action);
}
.feedback-timeline__step:has(.feedback-status--solved) {
  background: rgba(16, 185, 129, 0.14);
  color: #0E8A65;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
[data-theme="dark"] .feedback-timeline__step:has(.feedback-status--solved) {
  color: #34D399;
}
.feedback-timeline__step:has(.feedback-status--closed) {
  background: rgba(95, 103, 117, 0.16);
  color: var(--text-secondary);
  border: 1px solid rgba(95, 103, 117, 0.32);
}

/* Arrow between pills */
.feedback-timeline__step + .feedback-timeline__step::before {
  content: "→";
  display: inline-block;
  margin: 0 var(--space-1) 0 calc(-1 * var(--space-1));
  color: var(--text-tertiary);
  font-weight: 700;
}

/* Mobile overrides — clear the bottom-nav and shrink the FAB */
@media (max-width: 768px) {
  .feedback-fab {
    right: 16px;
    bottom: 76px;
    width: 48px;
    height: 48px;
  }
  .feedback-modal { max-height: 92vh; }
  .feedback-admin-card__body,
  .feedback-admin-card__body--no-photo {
    grid-template-columns: 1fr;
  }
  .feedback-admin-card__editor {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-3);
  }
  .feedback-admin-card__footer {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Welcome page (#welcome) — split-card landing, no shell
   Sprint 1.19
   ============================================================ */
.welcome {
  min-height: 100vh;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
}
.welcome__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-10);
}
.welcome__brand svg { height: 40px; width: auto; }
.welcome__hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  max-width: 1040px;
  margin: 0 auto;
  width: 100%;
}
.welcome__title {
  font-size: var(--font-metric-lg);
  font-weight: 800;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: var(--space-3);
  letter-spacing: -0.02em;
}
.welcome__subtitle {
  font-size: var(--font-h2);
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: var(--space-10);
}
.welcome__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 480px;
}
.portal-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  text-align: left;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
}
.portal-card:hover {
  box-shadow: var(--shadow-md);
}
.portal-card--socom:hover {
  border-color: var(--color-brand);
}
.portal-card--bs:hover {
  border-color: var(--color-action);
}
.portal-card--ai:hover {
  border-color: var(--color-action);
}
.portal-card__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
}
.portal-card--socom .portal-card__icon {
  background: var(--color-brand-muted);
  color: var(--color-brand);
}
.portal-card--bs .portal-card__icon {
  background: var(--color-action-muted);
  color: var(--color-action);
}
.portal-card--ai .portal-card__icon {
  background: var(--color-action-muted);
  color: var(--color-action);
}
.portal-card__title {
  flex: 1;
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.portal-card__cta {
  font-size: var(--font-small);
  font-weight: 600;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.portal-card--socom:hover .portal-card__cta { color: var(--color-brand); }
.portal-card--bs:hover    .portal-card__cta { color: var(--color-action); }
.portal-card--ai:hover    .portal-card__cta { color: var(--color-action); }

@media (max-width: 768px) {
  .welcome__cards { max-width: 100%; }
  .welcome__title { font-size: var(--font-h1); }
  .welcome__subtitle { font-size: var(--font-h3); }
}

/* ============================================================
   Brand & Store placeholder page — empty state for all 8 bs-*
   routes. Single-column centered pattern reused across modules.
   ============================================================ */
.bs-placeholder .page-header__subtitle {
  margin-top: var(--space-2);
  font-size: var(--font-body);
  color: var(--text-secondary);
  font-weight: 500;
  max-width: 640px;
}
.bs-placeholder__empty {
  margin-top: var(--space-10);
  padding: var(--space-12) var(--space-6);
  background: var(--bg-surface);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.bs-placeholder__icon { color: var(--text-tertiary); margin-bottom: var(--space-4); }
.bs-placeholder__title {
  font-size: var(--font-h2);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.bs-placeholder__body {
  font-size: var(--font-body);
  color: var(--text-secondary);
  max-width: 520px;
  margin-bottom: var(--space-5);
}
.bs-placeholder__hint {
  font-size: var(--font-small);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
}
.bs-placeholder__hint code {
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  padding: 2px 6px;
  background: var(--bg-hover);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
}

/* ============================================================
   Switch Portal button — top of sidebar, above nav groups
   ============================================================ */
.sidebar__switch-portal {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: 40px;
  padding: 0 var(--space-4);
  margin: var(--space-3) var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  background: var(--bg-hover);
  cursor: pointer;
  font-size: var(--font-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.sidebar__switch-portal:hover {
  background: var(--color-action-muted);
  color: var(--color-action);
}
.sidebar__switch-portal__icon { display: flex; align-items: center; flex-shrink: 0; }
.sidebar.collapsed:not(:hover) .sidebar__switch-portal { justify-content: center; padding: 0; }
.sidebar.collapsed:not(:hover) .sidebar__switch-portal__label { display: none; }

/* ── Insight Band ─────────────────────────────────────── */
.insight-band {
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-inset) 100%);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--color-brand);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: center;
}
.insight-band__body { display: contents; }
.insight-band__lede {
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-primary);
  font-weight: 500;
}
.insight-band__lede .hl  { color: var(--color-success); font-weight: 700; }
.insight-band__lede .hlb { color: var(--color-danger);  font-weight: 700; }
.insight-band__chips {
  display: flex;
  gap: var(--space-5);
  padding-left: var(--space-5);
  border-left: 1px solid var(--border-default);
}
.insight-band__chip { min-width: 100px; }
.chip__lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.chip__val {
  font-family: var(--font-mono); font-size: 18px; font-weight: 700;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.chip__delta { font-family: var(--font-mono); font-size: 11px; font-weight: 600; margin-top: 2px; }
.chip--good .chip__delta { color: var(--color-success); }
.chip--bad  .chip__delta { color: var(--color-danger); }
.insight-band__toggle {
  background: transparent; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 2px 6px; color: var(--text-tertiary);
  font-family: var(--font-mono); font-size: 11px; cursor: pointer;
}
.insight-band__summary { font-size: 13px; color: var(--text-secondary); }
.insight-band--collapsed { padding: var(--space-2) var(--space-5); }

/* ── Bullet Chart ─────────────────────────────────────── */
.bullet {
  position: relative;
  height: 10px;
  background: var(--bg-hover);
  border-radius: 5px;
  overflow: visible;
  margin: var(--space-2) 0;
}
.bullet__fill {
  position: absolute; inset: 0 auto 0 0;
  border-radius: 5px;
  background: var(--color-success);
  transition: width 160ms ease;
}
.bullet__bad .bullet__fill { background: var(--color-danger); }
.bullet__tick {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 2px;
  background: var(--text-primary);
}
.bullet__tick::after {
  content: '';
  position: absolute;
  top: -3px; left: -3px;
  width: 8px; height: 3px;
  background: var(--text-primary);
  border-radius: 1px;
}

/* ── B&S Zones ───────────────────────────────────────── */
.bs-zone { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-5); }
.bs-zone__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-3); }
.bs-zone__body { display: grid; grid-template-columns: 2.6fr 1fr; gap: var(--space-4); }
.bs-zone__rail { display: flex; flex-direction: column; gap: var(--space-2); }
.bs-zone--two-card { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

.rail-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); }
.rail-row__top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; }
.rail-bar { height: 6px; background: var(--bg-hover); border-radius: 3px; margin-top: 3px; overflow: hidden; }
.rail-bar > i { display: block; height: 100%; }
.sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

.kpi-bullet-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
@media (max-width: 768px) { .kpi-bullet-strip { grid-template-columns: repeat(2, 1fr); } }

.row--own-brand { background: var(--color-action-ghost); }
.row--own-brand .brand-name::after { content: ' \25C6'; color: var(--color-action); font-weight: 700; }
.achieve--good { background: rgba(34, 197, 94, 0.10); }
.achieve--bad  { background: rgba(239, 68, 68, 0.10); }

.bs-collapsible__header { cursor: pointer; user-select: none; }
.bs-collapsible__header::before { content: '\25BE '; color: var(--text-tertiary); transition: transform 120ms; }
.bs-collapsible--closed .bs-collapsible__header::before { content: '\25B8 '; }

/* ── Reporting (Story Rail) ──────────────────────────── */
.brand-report {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-5);
  min-height: calc(100vh - 120px);
  padding: var(--space-5);
}
.brand-report__rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: sticky;
  top: var(--space-5);
  align-self: start;
  padding: var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.brand-report__rail-header {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}
.brand-report__rail-title {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 800;
  margin: 0;
}
.brand-report__rail-period {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.brand-report__chapter {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 120ms, border-color 120ms;
}
.brand-report__chapter:hover {
  background: var(--bg-hover);
}
.brand-report__chapter.active {
  background: var(--color-brand-muted);
  border-color: var(--color-brand);
}
.brand-report__chapter.active .chapter__num {
  color: var(--color-brand);
}
.chapter__num {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 800;
  color: var(--text-tertiary);
  text-align: center;
}
.chapter__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}
.chapter__subtitle {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 1px;
}
.brand-report__download {
  margin-top: var(--space-4);
  background: var(--color-action);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}
.brand-report__download:hover { background: var(--color-action-hover); }
.brand-report__canvas {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.brand-report__canvas-header {
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.brand-report__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.brand-report__section-title {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  padding-bottom: var(--space-2);
  border-bottom: 3px solid var(--color-brand);
  display: inline-block;
  align-self: flex-start;
}
.brand-report__h2-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.brand-report__target-table pre {
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-secondary);
  margin: 0;
  padding: var(--space-3);
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
}

/* Print — hide the rail; only the active chapter prints.
   Known limitation (v1): inactive chapters are hidden with v-show
   (display:none in DOM) so they do not print. The user should navigate
   to the desired chapter before clicking Download QBR. A future iteration
   can add a "print-all" mode that forces all chapters visible before
   calling window.print() and restores visibility after. */
@media print {
  .brand-report {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .brand-report__rail { display: none; }
  .brand-report__canvas-header { border-bottom: 2px solid #333; }
  .filter-stack, .sidebar, .bottom-nav { display: none !important; }
  .content-area { margin-left: 0 !important; }
}

/* Mobile */
@media (max-width: 1024px) {
  .brand-report { grid-template-columns: 1fr; }
  .brand-report__rail { position: static; }
}

/* ══════════════════════════════════════════════════════════════════════
   Brand & Store cross-cutting primitives — 2026-06-06 audit batch
   Scoped to body[data-portal="brand-store"] so SOCOM is untouched.
   Brand colors (Shopee orange / TikTok near-black) are brand constants.
   ══════════════════════════════════════════════════════════════════════ */
body[data-portal="brand-store"] .bs-plat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 999px;
  font-size: var(--font-small); font-weight: 600; line-height: 1.55;
  white-space: nowrap; color: #fff;
}
body[data-portal="brand-store"] .bs-plat-pill svg { width: 13px; height: 13px; flex: none; }
body[data-portal="brand-store"] .bs-plat-pill--shopee { background: #EE4D2D; }
body[data-portal="brand-store"] .bs-plat-pill--tiktok { background: #111318; }
body[data-portal="brand-store"] .bs-plat-pill--lazada { background: var(--color-lazada, #0F146D); }
/* Neutral fallback so an unknown platform never renders as bare text (the
   "Lazada had no pill" bug). Token-based → reads in both themes. */
body[data-portal="brand-store"] .bs-plat-pill--default {
  background: var(--bg-inset);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}
/* Dark theme: brand-black (#111318) blends into the dark surface (#151820) — lift
   the TikTok pill with a translucent fill + edge so it reads as a pill (matches the
   ATP per-page treatment). Light theme keeps the brand-black fill above. */
[data-theme="dark"] body[data-portal="brand-store"] .bs-plat-pill--tiktok {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

/* Consistent compact detail-table density (B&S only) */
body[data-portal="brand-store"] .fin-table th { padding: var(--space-2) var(--space-3); }
body[data-portal="brand-store"] .fin-table td { padding: 6px var(--space-3); line-height: 1.35; }

/* Legends that must show all items — allow wrap + break long labels */
body[data-portal="brand-store"] .bs-legend-wrap { flex-wrap: wrap; }
body[data-portal="brand-store"] .bs-legend-allow-break { white-space: normal; overflow-wrap: anywhere; }

/* Breathing room for dense/complex charts — opt-in via .bs-chart-dense (never blanket) */
body[data-portal="brand-store"] .bs-chart-dense { padding: var(--space-3) var(--space-4); }
body[data-portal="brand-store"] .bs-chart-dense svg { overflow: visible; }