/* ============================================================================
   Kawkab CRM Admin — design system
   ----------------------------------------------------------------------------
   Everything visual is driven by the custom properties in :root. Components
   below only ever reference tokens, never raw values, so retheming the whole
   product is a matter of editing this one block.

   Layout uses CSS logical properties (inline-start/end, margin-inline, …) so
   the same rules lay out correctly in both LTR and RTL without a mirrored
   stylesheet.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. Tokens */
:root {
  /* ---- Kawkab brand palette -------------------------------------------
     The authoritative brand values. Everything below is derived from these,
     so changing a brand colour here changes it everywhere in the product. */
  --color-primary:         #5B7FE8;
  --color-primary-dark:    #4567d0;
  --color-primary-light:   #7B9BF0;
  --color-primary-lighter: #C0CFFB;
  --color-primary-glow:    rgba(91, 127, 232, 0.25);

  --color-secondary:         #24c197;
  --color-secondary-dark:    #1aa07c;
  --color-secondary-light:   #4dd4b0;
  --color-secondary-lighter: #aaebd9;
  --color-secondary-glow:    rgba(36, 193, 151, 0.2);

  /* Brand ramp — the two extremes are extended from the palette above so
     tinted backgrounds and pressed states have somewhere to go. */
  --brand-50:  #eef2fe;
  --brand-100: #dde5fd;
  --brand-200: var(--color-primary-lighter);
  --brand-300: #9db4f4;
  --brand-400: var(--color-primary-light);
  --brand-500: var(--color-primary);
  --brand-600: var(--color-primary-dark);
  --brand-700: #3652b0;
  --brand-800: #2b4090;
  --brand-900: #233472;

  /* Accent ramp — the brand green, used for highlights and the artwork */
  --accent-50:  #e8faf4;
  --accent-100: var(--color-secondary-lighter);
  --accent-400: var(--color-secondary-light);
  --accent-500: var(--color-secondary);
  --accent-600: var(--color-secondary-dark);
  --accent-700: #148066;

  /* Neutral ramp */
  --gray-25:  #fcfcfd;
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --gray-950: #060b16;

  /* Status ramps. Success reuses the brand green so "granted" in the matrix
     and the brand accent read as the same colour rather than two near-misses. */
  --success-50:  var(--accent-50);   --success-100: var(--accent-100);
  --success-500: var(--accent-500);  --success-600: var(--accent-600);
  --success-700: var(--accent-700);
  --warning-50:  #fffbeb;  --warning-100: #fef3c7;
  --warning-500: #f59e0b;  --warning-600: #d97706;  --warning-700: #b45309;
  --danger-50:   #fef2f2;  --danger-100:  #fee2e2;
  --danger-500:  #ef4444;  --danger-600:  #dc2626;  --danger-700:  #b91c1c;
  --info-50:     #eff6ff;  --info-100:    #dbeafe;
  --info-500:    #3b82f6;  --info-600:    #2563eb;  --info-700:    #1d4ed8;
  --purple-50:   #faf5ff;  --purple-100:  #f3e8ff;
  --purple-500:  #a855f7;  --purple-600:  #9333ea;

  /* Semantic surfaces — remapped wholesale by the dark theme */
  --surface-page:    var(--gray-50);
  --surface-card:    #ffffff;
  --surface-raised:  #ffffff;
  --surface-sunken:  var(--gray-100);
  --surface-hover:   var(--gray-50);
  --surface-active:  var(--brand-50);
  --surface-inverse: var(--gray-900);
  --surface-overlay: rgb(15 23 42 / 0.45);

  /* "Ink" tokens: the foreground colour to use on top of the matching -50
     tint. Kept separate from the ramps because the ramps also paint solid
     backgrounds (buttons, gradients) that must stay dark in every theme,
     whereas ink has to invert when the tint behind it goes dark. */
  --brand-ink:   var(--brand-700);
  --success-ink: var(--success-700);
  --danger-ink:  var(--danger-700);
  --warning-ink: var(--warning-700);
  --info-ink:    var(--info-700);
  --purple-ink:  var(--purple-600);

  /* Semantic text */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted:     var(--gray-500);
  --text-subtle:    var(--gray-400);
  --text-inverse:   #ffffff;
  --text-brand:     var(--brand-600);

  /* Borders */
  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);
  --border-brand:  var(--brand-500);

  /* Typography */
  --font-sans: "Plus Jakarta Sans", "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, "Noto Sans Arabic",
               "Noto Kufi Arabic", "Tahoma", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "Consolas", ui-monospace, SFMono-Regular, monospace;

  --text-2xs: 0.6875rem;   /* 11px */
  --text-xs:  0.75rem;     /* 12px */
  --text-sm:  0.8125rem;   /* 13px */
  --text-base:0.875rem;    /* 14px — the product's default */
  --text-md:  0.9375rem;   /* 15px */
  --text-lg:  1.0625rem;   /* 17px */
  --text-xl:  1.25rem;     /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* The whole product renders at 90% (see the zoom on html). Kept as a token so
     anything that has to reason about real on-screen size can divide by it
     instead of hard-coding the same 0.9 in two places that can drift apart. */
  --zoom-scale: 0.9;

  /* Minimum size for anything clickable: WCAG 2.2 SC 2.5.8 asks for 24px, and
     under the zoom an authored 24px would land at 21.6px on screen. */
  --tap-min: calc(24px / var(--zoom-scale));

  /* Spacing scale (4px base) */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.05);
  --shadow-sm: 0 1px 3px rgb(15 23 42 / 0.08), 0 1px 2px rgb(15 23 42 / 0.04);
  --shadow-md: 0 4px 12px rgb(15 23 42 / 0.08), 0 2px 4px rgb(15 23 42 / 0.04);
  --shadow-lg: 0 12px 28px rgb(15 23 42 / 0.10), 0 4px 10px rgb(15 23 42 / 0.05);
  --shadow-xl: 0 24px 48px rgb(15 23 42 / 0.14), 0 8px 16px rgb(15 23 42 / 0.06);
  --shadow-brand: 0 8px 20px var(--color-primary-glow);
  --shadow-focus: 0 0 0 3px var(--color-primary-glow);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --transition-base: all var(--duration-base) var(--ease-out);

  /* Layout metrics */
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 72px;
  --header-height: 64px;

  /* Layering. The backdrop must sit above the header (it dims the whole
     page behind the open drawer) but below the sidebar itself — otherwise
     the backdrop intercepts every tap/click meant for the drawer's own nav
     links on the mobile/tablet overlay layout, where it isn't display:none. */
  --z-sticky: 100;
  --z-header: 200;
  --z-backdrop: 300;
  --z-sidebar: 400;
  --z-modal: 500;
  --z-toast: 600;

  /* ---- Chart palette ---------------------------------------------------
     Categorical slots are assigned in this fixed order and never cycled;
     colour follows the entity, so filtering a series out never repaints the
     survivors. Slot 1 is the brand blue and slot 3 the brand green, with the
     orange between them chosen to clear the separation gates.

     Validated against the real surfaces (#ffffff light, #0f1729 dark) on the
     all-pairs list, which is the strictest: lightness band, chroma floor,
     CVD separation (worst 10.0 light / 9.4 dark, target 8), normal-vision
     floor (21.7 / 23.1, floor 15) and contrast (every slot >= 3:1) all pass.
     Three slots is the cap this set validates for — a fourth hue is not
     something to invent here; fold the tail into "Other" instead. */
  --viz-1: #5B7FE8;
  --viz-2: #eb6834;
  --viz-3: #1aa07c;

  /* Context series (previous period, "Other") — deliberately not a hue, so
     it never competes with a real category. */
  --viz-muted: var(--gray-300);

  /* Chart chrome, one step off the surface so it stays recessive. */
  --viz-grid: var(--gray-200);
  --viz-axis: var(--gray-300);
  --viz-track: var(--gray-100);
}

/* Dark theme — only the semantic tokens are remapped. */
:root[data-theme="dark"] {
  /* Re-stepped for the dark surface, not flipped: the same three hues chosen
     against #0f1729 and validated as their own set. */
  --viz-1: #5B7FE8;
  --viz-2: #d95926;
  --viz-3: #199e70;
  --viz-muted: var(--gray-600);
  --viz-grid: #1e2b47;
  --viz-axis: #2a3a5c;
  --viz-track: #16203a;

  --surface-page:    var(--gray-950);
  --surface-card:    #0f1729;
  --surface-raised:  #16203a;
  --surface-sunken:  #0a1122;
  --surface-hover:   #1a2540;
  --surface-active:  #182747;
  --surface-inverse: var(--gray-100);
  --surface-overlay: rgb(2 6 16 / 0.65);

  --text-primary:   #e8eefc;
  --text-secondary: #a3b1cc;
  --text-muted:     #8494b3;
  --text-subtle:    #64748b;
  --text-inverse:   var(--gray-900);
  --text-brand:     var(--brand-300);

  --border-subtle:  #1e2b47;
  --border-default: #2a3a5c;
  --border-strong:  #3d5180;

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.30);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.40), 0 1px 2px rgb(0 0 0 / 0.24);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.45), 0 2px 4px rgb(0 0 0 / 0.30);
  --shadow-lg: 0 12px 28px rgb(0 0 0 / 0.55), 0 4px 10px rgb(0 0 0 / 0.35);
  --shadow-xl: 0 24px 48px rgb(0 0 0 / 0.65), 0 8px 16px rgb(0 0 0 / 0.40);
  --shadow-brand: 0 8px 20px rgb(91 127 232 / 0.45);

  /* Tinted backgrounds need to be dark, not pastel. */
  --warning-50: #2a1d05;  --warning-100: #3d2a06;
  --danger-50:  #2b0d0d;  --danger-100:  #3f1414;
  --info-50:    #0a1a33;  --info-100:    #0f2547;
  --purple-50:  #1e1033;  --purple-100:  #2b1747;
  --brand-50:   #131f42;  --brand-100:   #1b2c5c;

  /* Success is overridden directly rather than through --accent-*, because the
     accent tokens also paint the header and login gradients, which carry white
     text and must stay dark in both themes. */
  --success-50:  #062e24;  --success-100: #0a4536;

  /* Only the ink inverts. The ramps keep their light-theme values so every
     solid brand surface stays dark enough for white text. */
  --brand-ink:   var(--brand-300);
  --success-ink: #6fdcbe;
  --danger-ink:  #fca5a5;
  --warning-ink: #fcd34d;
  --info-ink:    #93c5fd;
  --purple-ink:  #d8b4fe;
}

/* ------------------------------------------------------------ 2. Base reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Renders the whole product at a fixed 90% scale, matching a 90% browser
     zoom, so more fits on screen without the user zooming out manually. */
  zoom: var(--zoom-scale);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

p { margin: 0; }

a {
  color: var(--text-brand);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { text-decoration: underline; }

/* A place name that opens a map. The pin marks it as a link without relying
   on colour alone, since the cell otherwise reads as ordinary address text. */
.link-map {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
}

.link-map::before {
  content: "📍";
  font-size: 0.85em;
  line-height: 1;
}

button { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--radius-full);
  border: 2px solid var(--surface-page);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* --------------------------------------------------------- 3. Animations */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

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

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

@keyframes float-slow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(20px, -24px) scale(1.06); }
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 var(--color-primary-glow); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.animate-fade-in  { animation: fade-in var(--duration-slow) var(--ease-out) both; }
.animate-slide-up { animation: slide-up var(--duration-slow) var(--ease-out) both; }
.animate-scale-in { animation: scale-in var(--duration-base) var(--ease-spring) both; }

/* Staggered entrance for lists of cards. */
.stagger > * { animation: slide-up var(--duration-slow) var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 40ms; }
.stagger > *:nth-child(2) { animation-delay: 80ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 160ms; }
.stagger > *:nth-child(5) { animation-delay: 200ms; }
.stagger > *:nth-child(6) { animation-delay: 240ms; }

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

/* ------------------------------------------------------------- 4. Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  height: 38px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: var(--transition-base);
}

/* Same unconstrained-<svg> gotcha as .filter-toggle-btn above, but a
   different symptom here: inside .btn's fixed-height centered flex row an
   unsized icon collapses to 0x0 instead of ballooning, so every icon-bearing
   .btn (Refresh, Print, Export, Apply, etc. across every report/list page)
   was silently rendering with no icon at all. */
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:not(:disabled):active { transform: translateY(1px); }

/* Filled with the darker half of the brand ramp on purpose: white on
   --color-primary is only 3.71:1, which fails AA for button text, while
   --brand-600 reaches 5.07:1. The brand hue itself is carried by the logo,
   icons and accents, where it is used at large sizes or as non-text. */
.btn-primary {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:not(:disabled):hover {
  background: linear-gradient(135deg, var(--brand-700), var(--brand-800));
  box-shadow: var(--shadow-brand);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--surface-card);
  border-color: var(--border-default);
  color: var(--text-secondary);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:not(:disabled):hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:not(:disabled):hover { background: var(--surface-hover); color: var(--text-primary); }

.btn-sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.btn-lg { height: 46px; padding: 0 var(--space-6); font-size: var(--text-md); }
.btn-block { width: 100%; }

/* --- Icon-only buttons ---------------------------------------------------
   Square, label-free controls for dense table rows. The accessible name comes
   from aria-label; the tooltip comes from the .tip wrapper further below. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-base);
}
.btn-icon svg { width: 17px; height: 17px; }
.btn-icon:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-icon:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-icon:not(:disabled):active { transform: translateY(0) scale(0.94); }

.btn-icon-sm { width: 28px; height: 28px; }
.btn-icon-sm svg { width: 15px; height: 15px; }
.btn-icon-lg { width: 40px; height: 40px; }
.btn-icon-lg svg { width: 19px; height: 19px; }

/* Colour-coded action variants — one hue per kind of action, used
   consistently everywhere so the colour itself carries meaning. */
.btn-icon-view   { color: var(--info-ink);    background: var(--info-50); }
.btn-icon-view:not(:disabled):hover   { background: var(--info-100); }

.btn-icon-add    { color: var(--success-ink); background: var(--success-50); }
.btn-icon-add:not(:disabled):hover    { background: var(--success-100); }

.btn-icon-edit   { color: var(--warning-ink); background: var(--warning-50); }
.btn-icon-edit:not(:disabled):hover   { background: var(--warning-100); }

.btn-icon-delete { color: var(--danger-ink);  background: var(--danger-50); }
.btn-icon-delete:not(:disabled):hover { background: var(--danger-100); }

.btn-icon-export { color: var(--purple-ink);  background: var(--purple-50); }
.btn-icon-export:not(:disabled):hover { background: var(--purple-100); }

.btn-icon-neutral { color: var(--text-muted); background: var(--surface-sunken); }
.btn-icon-neutral:not(:disabled):hover { background: var(--surface-hover); color: var(--text-primary); }

/* Off state: the permission exists but is not granted. */
.btn-icon-off {
  color: var(--text-subtle);
  background: transparent;
  border-color: var(--border-subtle);
  border-style: dashed;
}
.btn-icon-off:not(:disabled):hover {
  color: var(--text-secondary);
  border-style: solid;
  background: var(--surface-hover);
}

/* Tooltip wrapper for icon-only controls. */
.tip { position: relative; display: inline-flex; }
.tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  z-index: var(--z-sticky);
}
[dir="rtl"] .tip::after { transform: translateX(50%) translateY(4px); }
.tip:hover::after, .tip:focus-within::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
[dir="rtl"] .tip:hover::after, [dir="rtl"] .tip:focus-within::after {
  transform: translateX(50%) translateY(0);
}

/* --------------------------------------------------------------- 5. Cards */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.card-body { padding: var(--space-5); }

.card-title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

/* --- Stat cards ---------------------------------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition-base);
}

/* Accent rail on the leading edge, tinted per variant. */
.stat-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--stat-color, var(--brand-500));
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-default);
}

.stat-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-lg);
  background: var(--stat-bg, var(--brand-50));
  color: var(--stat-color, var(--brand-600));
}
.stat-icon svg { width: 22px; height: 22px; }

.stat-content { min-width: 0; }

.stat-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  margin-top: 2px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stat-brand   { --stat-color: var(--brand-ink);   --stat-bg: var(--brand-50); }
.stat-success { --stat-color: var(--success-ink); --stat-bg: var(--success-50); }
.stat-warning { --stat-color: var(--warning-ink); --stat-bg: var(--warning-50); }
.stat-danger  { --stat-color: var(--danger-ink);  --stat-bg: var(--danger-50); }
.stat-info    { --stat-color: var(--info-ink);    --stat-bg: var(--info-50); }
.stat-purple  { --stat-color: var(--purple-ink);  --stat-bg: var(--purple-50); }

/* ---------------------------------------------------- 6. Page header block */
.page-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-6) var(--space-6);
  margin-bottom: var(--space-5);
  border-radius: var(--radius-xl);
  color: #fff;
  /* Every stop is dark enough to carry white text: brand-700 8.0:1,
     brand-600 5.1:1, accent-700 4.9:1. */
  background:
    radial-gradient(1100px 300px at 12% -40%, rgb(255 255 255 / 0.22), transparent 60%),
    linear-gradient(120deg, var(--brand-700) 0%, var(--brand-600) 42%, var(--accent-700) 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Soft drifting orb for depth. */
.page-header::after {
  content: "";
  position: absolute;
  inset-block-start: -60%;
  inset-inline-end: -8%;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 0.16), transparent 68%);
  animation: float-slow 14s var(--ease-in-out) infinite;
  pointer-events: none;
}

.page-header-main { position: relative; z-index: 1; min-width: 0; }

.page-header-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-3);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 0.16);
  border: 1px solid rgb(255 255 255 / 0.22);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.page-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: #fff;
}
.page-title svg { width: 30px; height: 30px; opacity: 0.9; }

/* The mark rendered monochrome inside the eyebrow pill. */
.eyebrow-mark { width: 15px; height: 15px; }

.page-subtitle {
  margin-top: var(--space-2);
  max-width: 62ch;
  font-size: var(--text-md);
  color: rgb(255 255 255 / 0.82);
}

.page-header-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Buttons sitting on the gradient need their own translucent treatment. */
.btn-on-header {
  background: rgb(255 255 255 / 0.14);
  border-color: rgb(255 255 255 / 0.26);
  color: #fff;
  backdrop-filter: blur(8px);
}
.btn-on-header:not(:disabled):hover {
  background: rgb(255 255 255 / 0.24);
  border-color: rgb(255 255 255 / 0.42);
  color: #fff;
  transform: translateY(-1px);
}

/* --------------------------------------------------------- 7. Form fields */
.field { display: flex; flex-direction: column; gap: var(--space-2); }

/* A single boolean filter (chain-only, etc.) styled to sit level with the
   other filter fields rather than as a bare checkbox. */
.chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-end;
  height: 2.5rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.chip-toggle:has(input:checked) {
  border-color: var(--brand-500);
  background: var(--brand-50);
  color: var(--brand-700);
}

.chip-toggle input { accent-color: var(--brand-500); }

/* Leaflet needs an explicit height — it has no intrinsic size of its own. */
.pharmacy-map {
  height: min(70vh, 640px);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.field-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

.input, .select {
  width: 100%;
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-base);
  transition: var(--transition-base);
}

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

.input:hover, .select:hover { border-color: var(--border-strong); }

.input:focus, .select:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--shadow-focus);
}

.input-invalid, .input.invalid {
  border-color: var(--danger-500);
}
.input-invalid:focus {
  box-shadow: 0 0 0 3px rgb(239 68 68 / 0.18);
}

.select {
  appearance: none;
  padding-inline-end: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 16px;
}
[dir="rtl"] .select { background-position: left var(--space-3) center; }

/* Input with a leading icon. */
.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-inline-start: var(--space-10); }
.input-group-icon {
  position: absolute;
  inset-inline-start: var(--space-3);
  display: grid;
  place-items: center;
  color: var(--text-subtle);
  pointer-events: none;
}
.input-group-icon svg { width: 16px; height: 16px; }

/* Trailing button inside a field (password reveal). */
.input-group-action {
  position: absolute;
  inset-inline-end: var(--space-2);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition-base);
}
.input-group-action:hover { background: var(--surface-hover); color: var(--text-primary); }
.input-group-action svg { width: 16px; height: 16px; }

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-base);
  color: var(--text-secondary);
  user-select: none;
}
.checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand-500);
  cursor: pointer;
}

/* ---------------------------------------------------------- 8. Data table */
.table-toolbar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-card);
}

.table-toolbar .field { min-width: 160px; }
.table-toolbar .field-search { flex: 1 1 240px; }
.table-toolbar-spacer { flex: 1 1 auto; }

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-base);
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-default);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: start;
  white-space: nowrap;
}

.data-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}

.data-table tbody tr { transition: background-color var(--duration-fast) var(--ease-out); }
.data-table tbody tr:hover { background: var(--surface-hover); }
.data-table tbody tr:last-child td { border-bottom: 0; }

.data-table .col-center { text-align: center; }
.data-table .col-end { text-align: end; }
.data-table .col-numeric { font-variant-numeric: tabular-nums; }

/* Sortable header button. */
.th-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

/* The label itself is only 16px tall, short of the 24px minimum target size
   (WCAG 2.2 SC 2.5.8), and the surrounding th carries no handler — so the
   clickable region really was 16px. This extends the hit area to 24px through
   the th's own padding, which it has to spare. A pseudo-element rather than
   vertical padding because padding on the button would push every header row
   8px taller across every table in the app. */
.th-sort::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  height: var(--tap-min);
}
.th-sort:hover { color: var(--text-brand); }
.th-sort svg { width: 13px; height: 13px; opacity: 0.4; transition: var(--transition-base); }
.th-sort.is-sorted { color: var(--text-brand); }
.th-sort.is-sorted svg { opacity: 1; }

.row-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* Zebra striping is opt-in per table. */
.data-table.striped tbody tr:nth-child(even) { background: var(--surface-sunken); }
.data-table.striped tbody tr:nth-child(even):hover { background: var(--surface-hover); }

/* --------------------------------------------------- 9. Badges and chips */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: 1.6;
  white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }

.badge-brand   { background: var(--brand-50);   color: var(--brand-ink); }
.badge-success { background: var(--success-50); color: var(--success-ink); }
.badge-warning { background: var(--warning-50); color: var(--warning-ink); }
.badge-danger  { background: var(--danger-50);  color: var(--danger-ink); }
.badge-info    { background: var(--info-50);    color: var(--info-ink); }
.badge-purple  { background: var(--purple-50);  color: var(--purple-ink); }
.badge-neutral { background: var(--surface-sunken); color: var(--text-secondary); }

/* Role pill in the matrix' first column. */
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.role-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-ink);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.role-name { font-weight: var(--weight-semibold); }
.role-meta { font-size: var(--text-xs); color: var(--text-muted); }

/* Coverage meter. */
.meter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 118px;
}
.meter-track {
  flex: 1;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  transition: width var(--duration-slow) var(--ease-out);
}
.meter-fill.is-full { background: linear-gradient(90deg, var(--success-500), var(--success-600)); }
.meter-fill.is-empty { background: var(--border-default); }
.meter-text {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: end;
}

/* ------------------------------------------------- 9b. Filter bar + KPIs */
/* Shared by every report screen, so these live here rather than in one
   page's scoped stylesheet. Three stacked bands — dates, selects, active
   chips — instead of one long wrapping row. */
.filters-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
}

.filters-row + .filters-row { border-top: 1px solid var(--border-subtle); }

.filters-dates { align-items: center; }

.date-pair { display: flex; gap: var(--space-3); }
.date-pair .field { min-width: 150px; }

.presets {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.preset {
  /* 24px floor: WCAG 2.2 SC 2.5.8 minimum target size. These sat at 20px.
     The toolbar row they live in is 28px, so this costs no layout. */
  min-height: var(--tap-min);
  padding: var(--space-1) var(--space-3);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-base);
}

.preset:hover { color: var(--text-primary); background: var(--surface-hover); }

.preset.is-active {
  background: var(--surface-card);
  color: var(--text-brand);
  box-shadow: var(--shadow-xs);
}

.filters-selects .field-grow { flex: 1 1 200px; min-width: 180px; }
.filters-apply { flex-shrink: 0; }

/* --- chips --------------------------------------------------------------- */
.filters-chips { align-items: center; gap: var(--space-2); }

.chips-label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 220px;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--surface-card);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: var(--transition-base);
}

.chip:hover {
  border-color: var(--danger-500);
  color: var(--danger-ink);
  background: var(--danger-50);
}

.chip .chip-x { width: 13px; height: 13px; opacity: 0.6; }
.chip:hover .chip-x { opacity: 1; }

.chip-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--text-subtle);
}

.chip-dot.dot-warning { background: var(--warning-500); }
.chip-dot.dot-success { background: var(--success-500); }
.chip-dot.dot-danger  { background: var(--danger-500); }
.chip-dot.dot-info    { background: var(--info-500); }

/* --- KPI strip ----------------------------------------------------------- */
.kpis {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--space-3);
}

.kpi {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  min-width: 0;
  transition: var(--transition-base);
}

.kpi:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); }

.kpi-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.kpi-icon svg { width: 19px; height: 19px; }

.kpi-brand   { background: var(--brand-50);   color: var(--brand-ink); }
.kpi-info    { background: var(--info-50);    color: var(--info-ink); }
.kpi-success { background: var(--success-50); color: var(--success-ink); }
.kpi-purple  { background: var(--purple-50);  color: var(--purple-ink); }
.kpi-warning { background: var(--warning-50); color: var(--warning-ink); }
.kpi-danger  { background: var(--danger-50);  color: var(--danger-ink); }

/* ============================================================================
   Charts
   ----------------------------------------------------------------------------
   Marks are thin, chrome is recessive, and the data is the only loud thing.
   Every chart here is clickable: a mark is a real <button>, so it is reachable
   by keyboard and announces itself, and its hover/focus surface is the whole
   row or band rather than the painted pixels.

   Tooltips are pure CSS. On a Blazor Server circuit a pointermove handler
   would round-trip to the server for every pixel; revealing a pre-rendered
   tooltip on :hover/:focus-within keeps it instant. Nothing is gated behind
   one — every value is also direct-labelled or in the table view.
   ============================================================================ */

.chart-card { display: flex; flex-direction: column; min-width: 0; }

.chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-2);
}

.chart-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.chart-sub { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }

.chart-body { padding: 0 var(--space-4) var(--space-4); }

/* ---- horizontal bars ---------------------------------------------------- */
.bars { display: flex; flex-direction: column; gap: var(--space-1); }

.bar-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 9rem) 1fr auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 30px;                 /* hit target, not the mark's own height */
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.bar-row:hover, .bar-row:focus-visible { background: var(--surface-hover); }
.bar-row:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }

.bar-label {
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-track {
  position: relative;
  height: 14px;                     /* well under the 24px cap */
  border-radius: var(--radius-sm);
  background: var(--viz-track);
  overflow: visible;                /* never clip a mark or its label */
}

.bar-fill {
  height: 100%;
  min-width: 2px;
  background: var(--viz-1);
  /* Rounded at the data end, square at the baseline. Logical corners so RTL
     rounds the correct side without a mirrored rule. */
  border-start-start-radius: var(--radius-sm);
  border-end-start-radius: var(--radius-sm);
  border-start-end-radius: 4px;
  border-end-end-radius: 4px;
  transition: width var(--duration-slow) var(--ease-out);
}

.bar-value {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- trend -------------------------------------------------------------- */
/* The plot stays left-to-right in every language: an SVG path is not mirrored
   by `dir`, so flipping the axis labels around it would leave them reading
   backwards against a line that had not moved. */
.trend, .trend-xaxis { direction: ltr; }

.trend {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  align-items: stretch;
  height: 200px;
}

.trend-yaxis { position: relative; }

.trend-plot { position: relative; min-width: 0; }

.trend svg { display: block; width: 100%; height: 100%; }

.trend-tick {
  position: absolute;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* y labels sit on their gridline; x labels centre on their tick */
.trend-yaxis .trend-tick { right: var(--space-2); transform: translateY(-50%); }

.trend-xaxis {
  position: relative;
  height: 1.25rem;
  margin-inline-start: 3.5rem;
}

.trend-xaxis .trend-tick { top: 2px; transform: translateX(-50%); }

/* Sized to include the axis band, so the card never grows a nested scrollbar. */
.trend-end-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  left: 100%;
  border-radius: 50%;
  background: var(--viz-1);
  box-shadow: 0 0 0 2px var(--surface-card);   /* surface ring, not a border */
  pointer-events: none;
}

.trend-grid { stroke: var(--viz-grid); stroke-width: 1; }
.trend-axis { stroke: var(--viz-axis); stroke-width: 1; }

.trend-area { fill: var(--viz-1); opacity: 0.10; }

.trend-line {
  fill: none;
  stroke: var(--viz-1);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* The comparison series is context, not a category — grey, thinner presence. */
.trend-line-prev { fill: none; stroke: var(--viz-muted); stroke-width: 2; stroke-linejoin: round; }

/* Hit bands sit over the plot: the reader aims at a date, never at a 2px line. */
.trend-bands { position: absolute; inset: 0; display: flex; }

.trend-band {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.trend-band::before {         /* the crosshair */
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  width: 1px;
  background: var(--viz-axis);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.trend-band:hover::before,
.trend-band:focus-visible::before { opacity: 1; }
.trend-band:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }

/* ---- part-to-whole ------------------------------------------------------ */
.split-bar { display: flex; gap: 2px; height: 16px; }   /* 2px surface gap */

.split-part {
  position: relative;
  min-width: 3px;
  padding: 0;
  border: 0;
  background: var(--viz-muted);
  cursor: pointer;
  transition: filter var(--duration-fast) var(--ease-out);
}

.split-part:first-child {
  border-start-start-radius: var(--radius-sm);
  border-end-start-radius: var(--radius-sm);
}

.split-part:last-child {
  border-start-end-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
}

.split-part:hover, .split-part:focus-visible { filter: brightness(1.08); }
.split-part:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

.split-part.is-completed { background: var(--success-500); }
.split-part.is-pending   { background: var(--warning-500); }
.split-part.is-canceled  { background: var(--danger-500); }

/* Status never rides on colour alone — the key carries an icon and a label. */
.split-keys { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }

.split-key {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.split-key svg { width: 14px; height: 14px; }
.split-key-value { font-weight: var(--weight-semibold); color: var(--text-primary); font-variant-numeric: tabular-nums; }

.key-completed { color: var(--success-ink); }
.key-pending   { color: var(--warning-ink); }
.key-canceled  { color: var(--danger-ink); }

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

.viz-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);   /* text wears text tokens, never the series colour */
}

.viz-key-line { width: 14px; height: 2px; border-radius: 1px; background: var(--viz-1); }
.viz-key-line.is-prev { background: var(--viz-muted); }

/* ---- shared tooltip ----------------------------------------------------- */
/* Hidden with `display`, not just opacity: a tooltip parked off the edge of
   the viewport still contributes to the document's scroll width, which is how
   a page with no visibly wide content ends up scrolling horizontally by a
   couple of pixels. */
.viz-tip {
  display: none;
  position: absolute;
  z-index: var(--z-dropdown);
  bottom: calc(100% + 6px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  min-width: max-content;
  max-width: min(15rem, 60vw);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: var(--text-xs);
  line-height: 1.45;
  text-align: start;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
}

/* RTL: translateX flips sign, so re-centre from the other side. */
[dir="rtl"] .viz-tip { transform: translateX(50%); }

.bar-row:hover .viz-tip, .bar-row:focus-visible .viz-tip,
.trend-band:hover .viz-tip, .trend-band:focus-visible .viz-tip,
.split-part:hover .viz-tip, .split-part:focus-visible .viz-tip { display: block; }

/* The marks at either end have no room to centre a tooltip over, so those
   anchor to the edge instead of hanging off it. */
.trend-band:first-child .viz-tip,
.split-part:first-child .viz-tip {
  inset-inline-start: 0;
  transform: none;
}

.trend-band:last-child .viz-tip,
.split-part:last-child .viz-tip {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: none;
}

/* Value leads, label follows — here the reader has the series and wants the number. */
.viz-tip-value { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.viz-tip-label { display: block; opacity: 0.75; }

/* ---- table-view twin ---------------------------------------------------- */
.chart-tableview { margin-top: var(--space-3); border-top: 1px solid var(--border-subtle); }

.chart-tableview summary {
  padding: var(--space-2) 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
}

.chart-tableview table { width: 100%; font-size: var(--text-xs); border-collapse: collapse; }
.chart-tableview th, .chart-tableview td { padding: var(--space-1) var(--space-2); text-align: start; }
.chart-tableview th { color: var(--text-muted); font-weight: var(--weight-medium); }
.chart-tableview td.col-end { text-align: end; font-variant-numeric: tabular-nums; }

/* ---- hero figure -------------------------------------------------------- */
.hero-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5);
}

.hero-value {
  font-size: clamp(2.5rem, 6vw, 3.25rem);
  font-weight: var(--weight-bold);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  /* Proportional figures: tabular-nums makes a large number look loose. */
}

.hero-label { font-size: var(--text-sm); color: var(--text-secondary); }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); }

.hero-meta-item { display: flex; flex-direction: column; }
.hero-meta-value { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-primary); }
.hero-meta-label { font-size: var(--text-xs); color: var(--text-muted); }

/* Refetch holds the previous render rather than flashing a skeleton. */
.is-refetching { opacity: 0.45; transition: opacity var(--duration-fast) var(--ease-out); }

/* Dashboard grid layout lives with the rest of the chart-card rules further
   down this file (search "Chart Card Enhancements & Dashboard Grid") — this
   used to be a second, slightly different copy of the same two rules. */

/* ---- drill-down panel --------------------------------------------------- */
.drill-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: var(--surface-overlay);
  animation: fade-in var(--duration-fast) var(--ease-out);
}

@media (min-width: 768px) {
  .drill-backdrop { align-items: center; padding: var(--space-5); }
}

.drill-panel {
  display: flex;
  flex-direction: column;
  width: min(60rem, 100%);
  max-height: min(90vh, 100%);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--surface-card);
  box-shadow: var(--shadow-xl);
  animation: slide-up var(--duration-base) var(--ease-out);
}

@media (min-width: 768px) {
  .drill-panel { border-radius: var(--radius-xl); }
}

.drill-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.drill-eyebrow {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.drill-title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text-primary); }
.drill-body { overflow-y: auto; padding: var(--space-4) var(--space-5) var(--space-5); }

.drill-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

@keyframes slide-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .drill-backdrop, .drill-panel { animation: none; }
  .bar-fill { transition: none; }
}

/* Training tab: a single video, centred and capped so it does not dominate
   a wide screen while still filling a narrow one. */
.training {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}

.training-title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.training-video {
  width: 100%;
  max-width: 900px;
  margin-top: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  box-shadow: var(--shadow-md);
}

.kpi-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }

.kpi-value {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-hero .kpi-value { font-size: var(--text-2xl); }

.kpi-label {
  margin-top: 2px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.kpi-sub {
  margin-top: 2px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-brand);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .kpi-hero { grid-column: span 3; }
}

@media (max-width: 620px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi-hero { grid-column: span 2; }
  .filters-row { padding: var(--space-3); }
}

/* --- Proportional split bar + legend ------------------------------------- */
/* Global: the order report splits by status, the coverage pivot by source. */
.split {
  display: flex;
  height: 12px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--surface-sunken);
}

.split-seg { display: block; height: 100%; background: var(--text-subtle); }
.split-seg.dot-warning { background: var(--warning-500); }
.split-seg.dot-success { background: var(--success-500); }
.split-seg.dot-danger  { background: var(--danger-500); }
.split-seg.dot-info    { background: var(--info-500); }

.split-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-4);
}

.legend-item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.legend-name { color: var(--text-secondary); }
.legend-value { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.legend-pct { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.legend-money { color: var(--text-subtle); font-variant-numeric: tabular-nums; }

/* --- Tab strip ----------------------------------------------------------- */
/* Global, not scoped: three report screens use it. */
.tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);

  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;

  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

.tabs::-webkit-scrollbar { height: 6px; }
.tabs::-webkit-scrollbar-track { background: transparent; }
.tabs::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--radius-full);
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: var(--transition-base);
}

.tab:hover { color: var(--text-primary); background: var(--surface-hover); }
.tab.is-active { color: var(--text-brand); font-weight: var(--weight-semibold); }

.tab.is-active::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-3);
  inset-block-end: -1px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--brand-500);
}

/* The icon is a child component's root element, so it needs sizing from here
   rather than a ::deep rule inside one page's scoped stylesheet. */
.tab svg { width: 16px; height: 16px; flex-shrink: 0; }

/* --- Leaflet popup, themed to match the rest of the product -------------- */
/* Not scoped to the page: Leaflet builds popups outside the component tree. */
.pharmacy-popup .leaflet-popup-content-wrapper {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.pm-popup { min-width: 190px; font-size: var(--text-sm); }

.pm-popup h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.pm-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 2px 0;
}

.pm-row span { color: #64748b; }

.pm-popup a {
  display: inline-block;
  margin-top: var(--space-2);
  font-weight: var(--weight-semibold);
}

.pm-unavailable {
  display: grid;
  place-items: center;
  height: 100%;
  padding: var(--space-8);
  text-align: center;
  color: var(--text-muted);
}

/* -------------------------------------------------------- 10. Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-16) var(--space-6);
  text-align: center;
}
.empty-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-2xl);
  background: var(--surface-sunken);
  color: var(--text-subtle);
}
.empty-icon svg { width: 30px; height: 30px; }
.empty-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.empty-text { color: var(--text-muted); max-width: 44ch; }

/* Skeleton shimmer for loading rows. */
.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg,
    var(--surface-sunken) 25%,
    var(--surface-hover) 37%,
    var(--surface-sunken) 63%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton-text { height: 12px; }

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

/* ---------------------------------------------------------- 11. Pagination */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-card);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.pagination-controls { display: flex; align-items: center; gap: var(--space-1); }
.page-size { display: flex; align-items: center; gap: var(--space-2); }
.page-size .select { height: 32px; width: auto; font-size: var(--text-sm); }

/* Page buttons mirror correctly because the chevrons are logical. */
[dir="rtl"] .pagination-controls .btn-icon svg { transform: scaleX(-1); }

/* ------------------------------------------------------------- 12. Toasts */
.toast-stack {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-end: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-toast);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 260px;
  max-width: 380px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xl);
  font-size: var(--text-base);
  animation: slide-up var(--duration-base) var(--ease-spring) both;
  pointer-events: auto;
}
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
/* The toast sits on --surface-raised, not a tint, so ink is the right choice
   in dark mode where a -700 would sink into the panel. */
.toast-success { border-inline-start: 3px solid var(--success-500); color: var(--success-ink); }
.toast-danger  { border-inline-start: 3px solid var(--danger-500);  color: var(--danger-ink); }
.toast-info    { border-inline-start: 3px solid var(--info-500);    color: var(--info-ink); }

/* ------------------------------------------------------------- 13. Alerts */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-base);
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-danger  { background: var(--danger-50);  border-color: var(--danger-100);  color: var(--danger-ink); }
.alert-warning { background: var(--warning-50); border-color: var(--warning-100); color: var(--warning-ink); }
.alert-info    { background: var(--info-50);    border-color: var(--info-100);    color: var(--info-ink); }
.alert-success { background: var(--success-50); border-color: var(--success-100); color: var(--success-ink); }

/* ------------------------------------------------------------ 14. Utilities */
.u-flex { display: flex; }
.u-items-center { align-items: center; }
.u-justify-between { justify-content: space-between; }
.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-wrap { flex-wrap: wrap; }
.u-grow { flex: 1 1 auto; }
.u-muted { color: var(--text-muted); }
.u-subtle { color: var(--text-subtle); }
.u-small { font-size: var(--text-sm); }
.u-nowrap { white-space: nowrap; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-5 { margin-bottom: var(--space-5); }
.u-tabular { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.tab.is-active::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-3);
  inset-block-end: -1px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--brand-500);
}

/* The icon is a child component's root element, so it needs sizing from here
   rather than a ::deep rule inside one page's scoped stylesheet. */
.tab svg { width: 16px; height: 16px; flex-shrink: 0; }

/* --- Leaflet popup, themed to match the rest of the product -------------- */
/* Not scoped to the page: Leaflet builds popups outside the component tree. */
.pharmacy-popup .leaflet-popup-content-wrapper {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.pm-popup { min-width: 190px; font-size: var(--text-sm); }

.pm-popup h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.pm-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 2px 0;
}

.pm-row span { color: #64748b; }

.pm-popup a {
  display: inline-block;
  margin-top: var(--space-2);
  font-weight: var(--weight-semibold);
}

.pm-unavailable {
  display: grid;
  place-items: center;
  height: 100%;
  padding: var(--space-8);
  text-align: center;
  color: var(--text-muted);
}

/* -------------------------------------------------------- 10. Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-16) var(--space-6);
  text-align: center;
}
.empty-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-2xl);
  background: var(--surface-sunken);
  color: var(--text-subtle);
}
.empty-icon svg { width: 30px; height: 30px; }
.empty-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.empty-text { color: var(--text-muted); max-width: 44ch; }

/* Skeleton shimmer for loading rows. */
.skeleton {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg,
    var(--surface-sunken) 25%,
    var(--surface-hover) 37%,
    var(--surface-sunken) 63%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton-text { height: 12px; }

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

/* ---------------------------------------------------------- 11. Pagination */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-card);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.pagination-controls { display: flex; align-items: center; gap: var(--space-1); }
.page-size { display: flex; align-items: center; gap: var(--space-2); }
.page-size .select { height: 32px; width: auto; font-size: var(--text-sm); }

/* Page buttons mirror correctly because the chevrons are logical. */
[dir="rtl"] .pagination-controls .btn-icon svg { transform: scaleX(-1); }

/* ------------------------------------------------------------- 12. Toasts */
.toast-stack {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-end: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-toast);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 260px;
  max-width: 380px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xl);
  font-size: var(--text-base);
  animation: slide-up var(--duration-base) var(--ease-spring) both;
  pointer-events: auto;
}
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
/* The toast sits on --surface-raised, not a tint, so ink is the right choice
   in dark mode where a -700 would sink into the panel. */
.toast-success { border-inline-start: 3px solid var(--success-500); color: var(--success-ink); }
.toast-danger  { border-inline-start: 3px solid var(--danger-500);  color: var(--danger-ink); }
.toast-info    { border-inline-start: 3px solid var(--info-500);    color: var(--info-ink); }

/* ------------------------------------------------------------- 13. Alerts */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--text-base);
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-danger  { background: var(--danger-50);  border-color: var(--danger-100);  color: var(--danger-ink); }
.alert-warning { background: var(--warning-50); border-color: var(--warning-100); color: var(--warning-ink); }
.alert-info    { background: var(--info-50);    border-color: var(--info-100);    color: var(--info-ink); }
.alert-success { background: var(--success-50); border-color: var(--success-100); color: var(--success-ink); }

/* ------------------------------------------------------------ 14. Utilities */
.u-flex { display: flex; }
.u-items-center { align-items: center; }
.u-justify-between { justify-content: space-between; }
.u-gap-1 { gap: var(--space-1); }
.u-gap-2 { gap: var(--space-2); }
.u-gap-3 { gap: var(--space-3); }
.u-gap-4 { gap: var(--space-4); }
.u-wrap { flex-wrap: wrap; }
.u-grow { flex: 1 1 auto; }
.u-muted { color: var(--text-muted); }
.u-subtle { color: var(--text-subtle); }
.u-small { font-size: var(--text-sm); }
.u-nowrap { white-space: nowrap; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-5 { margin-bottom: var(--space-5); }
.u-tabular { font-variant-numeric: tabular-nums; }

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

/* ---------------------------------------------------------- 15. Responsive */
@media (max-width: 1024px) {
  .page-header { padding: var(--space-5); }
  .page-title { font-size: var(--text-2xl); }
  .page-title svg { width: 24px; height: 24px; }
}

@media (max-width: 768px) {
  :root { --text-base: 0.9375rem; }

  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    border-radius: var(--radius-lg);
  }
  .page-header-actions { justify-content: flex-start; }

  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
  .stat-card { padding: var(--space-4); gap: var(--space-3); }
  .stat-icon { width: 40px; height: 40px; }
  .stat-icon svg { width: 19px; height: 19px; }
  .stat-value { font-size: var(--text-xl); }

  .table-toolbar { padding: var(--space-3); }
  .table-toolbar .field { min-width: 0; flex: 1 1 100%; }

  .toast-stack {
    inset-inline: var(--space-3);
    inset-block-end: var(--space-3);
  }
  .toast { min-width: 0; max-width: none; }
}

@media (max-width: 560px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .pagination-bar { justify-content: center; }
}

/* ============================================================================
   Advanced Dashboard & Chart Suite
   ============================================================================ */

/* --- Live Badge & Status Indicator --------------------------------------- */
.dash-live-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dash-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-secondary);
  box-shadow: 0 0 8px var(--color-secondary);
  animation: pulse-live 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-live {
  0%   { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(36, 193, 151, 0.7); }
  70%  { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(36, 193, 151, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(36, 193, 151, 0); }
}

.spin {
  animation: spin-kf 0.8s linear infinite;
}

@keyframes spin-kf {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- Quick Presets Segmented Toolbar ------------------------------------- */
.presets {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.preset {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min); /* WCAG 2.2 SC 2.5.8 minimum target size */
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  white-space: nowrap;
}

.preset:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.preset.is-active {
  color: var(--brand-600);
  background: var(--surface-card);
  font-weight: var(--weight-semibold);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .preset.is-active {
  color: var(--brand-300);
  background: #182542;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* --- Metric / Currency Selector ------------------------------------------- */
.metric-selector {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px;
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
}

.metric-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min); /* WCAG 2.2 SC 2.5.8 minimum target size */
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}

.metric-btn:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.metric-btn.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600, #4a6bd4));
  font-weight: var(--weight-semibold);
  box-shadow: 0 2px 8px rgba(91, 127, 232, 0.35);
}

/* --- Chart Card Enhancements & Dashboard Grid ---------------------------- */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-5);
}

.dash-wide {
  grid-column: 1 / -1;
}

/* A row with exactly two cards inside an auto-fit dash-grid. Left plain, two
   items only fill two of an auto-fit row's tracks — fine at 1 or 2 columns,
   but once the row's own content is wide enough to fit 3 columns the third
   track still exists (kept alive by the dash-wide chart above spanning every
   column) and sits empty rather than collapsing, since only tracks with NO
   content anywhere in the grid collapse. A fixed 2-column sub-grid sidesteps
   the whole question: it always has exactly as many tracks as it has items,
   at any viewport width, so there is never a gap to explain. The narrower
   column is sized for the gauge's circular dial; the rest goes to whatever
   needs the room, which for a bar chart is more useful than an equal split. */
.dash-duo {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: var(--space-5);
}

@media (max-width: 720px) {
  .dash-duo { grid-template-columns: 1fr; }
}

/* --- Section Divider ------------------------------------------------------- */
.dash-section-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.dash-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-500);
  flex-shrink: 0;
}

[data-theme="dark"] .dash-section-icon {
  background: rgba(91, 127, 232, 0.15);
}

.dash-section-text {
  display: flex;
  flex-direction: column;
}

.dash-section-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.dash-section-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.dash-section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-subtle), transparent);
}

[dir="rtl"] .dash-section-line {
  background: linear-gradient(270deg, var(--border-subtle), transparent);
}

/* --- Chart Card ----------------------------------------------------------- */
.chart-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: all 0.25s var(--ease-out);
  overflow: hidden;
  position: relative;
}

/* Top accent gradient bar */
.chart-card::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-400), var(--color-secondary), var(--brand-500));
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}

.chart-card:hover::before {
  opacity: 1;
}

.chart-card:hover {
  border-color: var(--border-default);
  box-shadow:
    0 10px 30px -5px rgba(0, 0, 0, 0.08),
    0 8px 10px -6px rgba(0, 0, 0, 0.03),
    0 0 0 1px rgba(91, 127, 232, 0.04);
  transform: translateY(-3px);
}

[data-theme="dark"] .chart-card {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .chart-card:hover {
  box-shadow:
    0 12px 28px -5px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(91, 127, 232, 0.1);
  border-color: rgba(91, 127, 232, 0.35);
}

.chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-2);
}

.chart-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.chart-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* The drill-down affordance, previously styled as a second subtitle: as body
   text it wrapped to three lines in a narrow card and competed with the title.
   As a chip it stays on one line, and it drops out entirely on small screens
   where it is advice the reader cannot act on with a mouse anyway. */
.chart-hint {
  flex-shrink: 0;
  align-self: flex-start;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .chart-hint { display: none; }
}

.chart-body {
  padding: var(--space-2) var(--space-5) var(--space-5);
  flex: 1;
}

/* A card with nothing to plot used to fall back to one line of plain grey
   text, which left a mostly-blank card sitting next to full-height charts in
   the same row — the "did this break?" look. 200px matches .trend's own
   height, so an empty card carries the same visual weight as a populated
   sibling instead of looking collapsed or unfinished. */
.chart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 200px;
  padding: var(--space-4);
  text-align: center;
}

.chart-empty-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  color: var(--text-subtle);
}

.chart-empty-icon svg { width: 18px; height: 18px; }

.chart-empty-text {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  max-width: 24ch;
}

/* --- Sparklines ----------------------------------------------------------- */
.sparkline-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  height: 40px;
  width: 110px;
}

.sparkline-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sparkline-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sparkline-area { opacity: 0.15; }

.spark-primary.sparkline-line { stroke: var(--brand-500); }
.spark-primary.sparkline-area { fill: var(--brand-500); }
.spark-primary.sparkline-dot  { fill: var(--brand-500); }

.spark-success.sparkline-line { stroke: var(--success-500); }
.spark-success.sparkline-area { fill: var(--success-500); }
.spark-success.sparkline-dot  { fill: var(--success-500); }

.spark-info.sparkline-line { stroke: var(--info-500); }
.spark-info.sparkline-area { fill: var(--info-500); }
.spark-info.sparkline-dot  { fill: var(--info-500); }

.spark-purple.sparkline-line { stroke: var(--purple-500); }
.spark-purple.sparkline-area { fill: var(--purple-500); }
.spark-purple.sparkline-dot  { fill: var(--purple-500); }

.spark-warning.sparkline-line { stroke: var(--warning-500); }
.spark-warning.sparkline-area { fill: var(--warning-500); }
.spark-warning.sparkline-dot  { fill: var(--warning-500); }

/* --- Advanced KPI Card with Sparkline ------------------------------------- */
.kpis-rich {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-4);
}

.kpi-rich {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.25s var(--ease-out);
  position: relative;
  overflow: hidden;
}

/* Subtle left accent stripe */
.kpi-rich::after {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-400);
  opacity: 0;
  transition: opacity 0.25s var(--ease-out);
}

[dir="rtl"] .kpi-rich::after {
  border-radius: 3px 0 0 3px;
}

.kpi-rich:hover {
  transform: translateY(-3px);
  box-shadow:
    0 12px 24px -4px rgba(0, 0, 0, 0.07),
    0 0 0 1px rgba(91, 127, 232, 0.06);
  border-color: var(--border-default);
}

.kpi-rich:hover::after {
  opacity: 1;
}

.kpi-rich:nth-child(1)::after { background: var(--brand-500); }
.kpi-rich:nth-child(2)::after { background: var(--info-500); }
.kpi-rich:nth-child(3)::after { background: var(--success-500); }
.kpi-rich:nth-child(4)::after { background: var(--purple-500); }
.kpi-rich:nth-child(5)::after { background: var(--warning-500); }

[data-theme="dark"] .kpi-rich:hover {
  box-shadow:
    0 12px 28px -4px rgba(0, 0, 0, 0.5),
    0 0 16px rgba(91, 127, 232, 0.08);
}

.kpi-rich-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.kpi-rich-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  transition: transform 0.25s var(--ease-out);
}

.kpi-rich:hover .kpi-rich-icon {
  transform: scale(1.1);
}

.kpi-rich-icon.icon-brand   { background: var(--brand-50); color: var(--brand-500); }
.kpi-rich-icon.icon-info    { background: var(--info-50); color: var(--info-500); }
.kpi-rich-icon.icon-purple  { background: var(--purple-50); color: var(--purple-500); }
.kpi-rich-icon.icon-success { background: var(--success-50); color: var(--success-500); }
.kpi-rich-icon.icon-warning { background: var(--warning-50); color: var(--warning-500); }

[data-theme="dark"] .kpi-rich-icon.icon-brand   { background: rgba(91, 127, 232, 0.15); }
[data-theme="dark"] .kpi-rich-icon.icon-info    { background: rgba(59, 130, 246, 0.15); }
[data-theme="dark"] .kpi-rich-icon.icon-purple  { background: rgba(168, 85, 247, 0.15); }
[data-theme="dark"] .kpi-rich-icon.icon-success { background: rgba(36, 193, 151, 0.15); }
[data-theme="dark"] .kpi-rich-icon.icon-warning { background: rgba(245, 158, 11, 0.15); }

.kpi-rich-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.kpi-rich-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
}

.kpi-rich-val {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.kpi-rich-sub {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--text-xs);
}

.delta-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.delta-badge.is-up {
  color: var(--success-ink);
  background: var(--success-50);
}

.delta-badge.is-down {
  color: var(--danger-ink);
  background: var(--danger-50);
}

.delta-badge.is-neutral {
  color: var(--text-muted);
  background: var(--surface-sunken);
}

[data-theme="dark"] .delta-badge.is-up {
  background: rgba(36, 193, 151, 0.15);
  color: var(--success-500);
}

[data-theme="dark"] .delta-badge.is-down {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger-500);
}

/* --- Hero Banner ---------------------------------------------------------- */
.hero-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6);
  background:
    linear-gradient(135deg,
      var(--brand-50) 0%,
      var(--surface-card) 45%,
      var(--accent-50) 100%);
  border: 1px solid var(--brand-200);
  border-radius: var(--radius-2xl, var(--radius-xl));
  box-shadow:
    0 4px 6px -1px rgba(91, 127, 232, 0.06),
    0 2px 4px -2px rgba(91, 127, 232, 0.04);
  position: relative;
  overflow: hidden;
}

/* Animated shimmer overlay */
.hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 25%,
    rgba(255, 255, 255, 0.04) 37%,
    transparent 63%
  );
  background-size: 200% 100%;
  animation: hero-shimmer 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes hero-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Decorative orbs */
.hero-banner::after {
  content: '';
  position: absolute;
  top: -60px;
  inset-inline-end: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 127, 232, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

[data-theme="dark"] .hero-banner {
  background:
    linear-gradient(135deg,
      rgba(91, 127, 232, 0.14) 0%,
      var(--surface-card) 50%,
      rgba(36, 193, 151, 0.09) 100%);
  border-color: rgba(91, 127, 232, 0.3);
  box-shadow:
    0 4px 12px -2px rgba(0, 0, 0, 0.4),
    0 0 24px rgba(91, 127, 232, 0.06);
}

[data-theme="dark"] .hero-banner::before {
  background: linear-gradient(
    110deg,
    transparent 25%,
    rgba(255, 255, 255, 0.015) 37%,
    transparent 63%
  );
  background-size: 200% 100%;
}

.hero-banner-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  position: relative;
  z-index: 1;
}

.hero-banner-value {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: var(--weight-bold);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--brand-500) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="dark"] .hero-banner-value {
  background: linear-gradient(135deg, #ffffff 30%, var(--brand-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-banner-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.hero-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(91, 127, 232, 0.12);
  position: relative;
  z-index: 1;
}

.hero-stat-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-stat-box-val {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.hero-stat-box-lbl {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}

/* --- Donut Chart Component ------------------------------------------------ */
.donut-card .chart-body {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.donut-layout {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  align-items: center;
  gap: var(--space-5);
}

@media (max-width: 600px) {
  .donut-layout { grid-template-columns: 1fr; justify-items: center; }
}

.donut-vis-wrap {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.donut-svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* Start at 12 o'clock */
}

.donut-track {
  fill: none;
  stroke: var(--viz-track);
  stroke-width: 14;
}

.donut-segment {
  fill: none;
  stroke-width: 14;
  cursor: pointer;
  transition: stroke-width var(--duration-fast) var(--ease-out), filter var(--duration-fast) var(--ease-out);
}

.donut-segment:hover,
.donut-segment.is-hovered {
  stroke-width: 17;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
}

.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2);
  pointer-events: none;
}

.donut-center-label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  max-width: 90px;
}

.donut-center-val {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.donut-center-pct {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--brand-500);
}

.donut-center-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 220px;
  overflow-y: auto;
  /* Declaring only overflow-y makes the used value of overflow-x "auto" too,
     so a row too wide to fit raised a horizontal scrollbar across the bottom
     of the legend. The metrics wrap instead (below), so nothing overflows. */
  overflow-x: hidden;
  padding-inline-end: var(--space-1);
  scrollbar-width: thin;
}

.donut-legend-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-align: start;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.donut-legend-row:hover,
.donut-legend-row.is-active {
  background: var(--surface-hover);
  border-color: var(--border-subtle);
}

.donut-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-xs);
  flex-shrink: 0;
}

.donut-legend-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.donut-legend-name {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

/* Long currency figures used to push the share out of the card and get
   clipped mid-number. Wrapping keeps both parts readable at any card width. */
.donut-legend-metrics {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  min-width: 0;
}

.donut-legend-value {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  min-width: 0;
}

.donut-legend-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.donut-legend-share {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Donut Color Ramp */
.donut-color-1 { stroke: var(--brand-500); background-color: var(--brand-500); }
.donut-color-2 { stroke: var(--color-secondary); background-color: var(--color-secondary); }
.donut-color-3 { stroke: #f59e0b; background-color: #f59e0b; }
.donut-color-4 { stroke: #a855f7; background-color: #a855f7; }
.donut-color-5 { stroke: #06b6d4; background-color: #06b6d4; }
.donut-color-6 { stroke: #ec4899; background-color: #ec4899; }

.donut-color-completed { stroke: var(--success-500); background-color: var(--success-500); }
.donut-color-pending   { stroke: var(--warning-500); background-color: var(--warning-500); }
.donut-color-canceled  { stroke: var(--danger-500); background-color: var(--danger-500); }

/* --- Column Chart Component ----------------------------------------------- */
.column-chart-wrap {
  padding: var(--space-2) 0;
}

.column-grid {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: var(--space-2);
  height: 180px;
  padding-top: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.column-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.column-bar-track {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.column-bar-fill {
  position: relative;
  width: min(36px, 75%);
  background: linear-gradient(180deg, var(--brand-400) 0%, var(--brand-500) 100%);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: all 0.3s var(--ease-out);
  display: flex;
  justify-content: center;
}

.column-col:hover .column-bar-fill,
.column-col:focus-visible .column-bar-fill {
  background: linear-gradient(180deg, var(--brand-300) 0%, var(--brand-500) 100%);
  box-shadow: 0 -4px 14px rgba(91, 127, 232, 0.4);
  transform: scaleY(1.03);
  transform-origin: bottom;
}

.column-col.is-peak .column-bar-fill {
  background: linear-gradient(180deg, var(--color-secondary-light) 0%, var(--color-secondary) 100%);
  box-shadow: 0 -4px 12px rgba(36, 193, 151, 0.35);
}

.column-bar-val {
  position: absolute;
  top: -22px;
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
  transition: opacity 0.2s var(--ease-out);
}

.column-col:hover .column-bar-val {
  opacity: 1;
  color: var(--brand-500);
}

.column-label {
  margin-top: var(--space-2);
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  text-align: center;
  max-width: 100%;
}

/* --- Ranked Leaderboard Component ----------------------------------------- */
.ranked-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ranked-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-hover);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-align: start;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}

.ranked-item:hover {
  background: var(--surface-active);
  border-color: var(--brand-300);
  transform: translateX(2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[dir="rtl"] .ranked-item:hover {
  transform: translateX(-2px);
}

.ranked-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.ranked-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.ranked-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-muted);
}

.rank-medal { font-size: 15px; }

.ranked-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.avatar-1 { background: linear-gradient(135deg, #5B7FE8, #3b82f6); }
.avatar-2 { background: linear-gradient(135deg, #24c197, #10b981); }
.avatar-3 { background: linear-gradient(135deg, #f59e0b, #d97706); }
.avatar-4 { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.avatar-5 { background: linear-gradient(135deg, #ec4899, #db2777); }

.ranked-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ranked-name {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.ranked-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.ranked-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.ranked-val {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.ranked-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.ranked-orders {
  font-size: 10px;
  color: var(--text-muted);
}

.ranked-pct {
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--brand-500);
}

.ranked-bar-track {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--viz-track);
  overflow: hidden;
}

.ranked-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.6s var(--ease-out);
}

.fill-rank-1 { background: linear-gradient(90deg, var(--brand-400), var(--brand-500)); }
.fill-rank-2 { background: linear-gradient(90deg, var(--color-secondary-light), var(--color-secondary)); }
.fill-rank-3 { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.fill-rank-4 { background: linear-gradient(90deg, #a855f7, #7c3aed); }

.ranked-footer-hint {
  text-align: center;
  padding-top: var(--space-2);
}

/* --- Radial Target Gauge Component ---------------------------------------- */
.gauge-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

.gauge-vis-wrap {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 120 / 70;
  display: flex;
  justify-content: center;
}

.gauge-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.gauge-track {
  fill: none;
  stroke: var(--viz-track);
  stroke-width: 12;
  stroke-linecap: round;
}

.gauge-meter {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dasharray 0.8s var(--ease-out);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}

.gauge-meter.gauge-success { stroke: url(#gauge-grad-success, var(--success-500)); stroke: var(--success-500); }
.gauge-meter.gauge-primary { stroke: var(--brand-500); }
.gauge-meter.gauge-warning { stroke: var(--warning-500); }
.gauge-meter.gauge-danger  { stroke: var(--danger-500); }

.gauge-center {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gauge-pct {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.gauge-pct.gauge-success { color: var(--success-500); }
.gauge-pct.gauge-primary { color: var(--brand-500); }
.gauge-pct.gauge-warning { color: var(--warning-500); }
.gauge-pct.gauge-danger  { color: var(--danger-500); }

.gauge-sub {
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 2px;
}

.gauge-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  width: 100%;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

.gauge-stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Grid items default to min-width: auto, which refuses to shrink below the
     value's unbroken width — at tablet widths (where the 3-column layout is
     still active but the card itself has already narrowed) that pushed
     "Remained" past the card edge instead of wrapping. */
  min-width: 0;
}

.gauge-stat-label {
  font-size: 11px;
  font-weight: var(--weight-medium);
  color: var(--text-muted);
}

.gauge-stat-val {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  /* A large formatted number has no spaces to wrap at; without this it just
     overflows the column instead of breaking onto a second line. */
  overflow-wrap: anywhere;
}

/* --- Conversion Pipeline Funnel ------------------------------------------- */
.funnel-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--brand-50);
  font-size: var(--text-xs);
}

[data-theme="dark"] .funnel-stat-pill {
  background: rgba(91, 127, 232, 0.15);
}

.funnel-pill-label { color: var(--text-secondary); font-weight: var(--weight-medium); }
.funnel-pill-val { font-weight: var(--weight-bold); color: var(--brand-500); font-variant-numeric: tabular-nums; }

.funnel-stages {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.funnel-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-hover);
  border: 1px solid var(--border-subtle);
  transition: all 0.2s var(--ease-out);
}

.funnel-stage:hover {
  background: var(--surface-active);
  border-color: var(--border-default);
  transform: translateY(-1px);
}

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

.funnel-stage-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--brand-500);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Without this the icon fills the whole 26px box and reads far heavier than
   the equivalent icons in the sibling cards. */
.funnel-stage-icon svg {
  width: 15px;
  height: 15px;
}

.funnel-stage.stage-1 .funnel-stage-icon { color: var(--brand-500); }
.funnel-stage.stage-2 .funnel-stage-icon { color: var(--warning-500); }
.funnel-stage.stage-3 .funnel-stage-icon { color: var(--success-500); }

.funnel-stage-name {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  flex: 1;
}

.funnel-stage-count {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.funnel-track {
  height: 9px;
  border-radius: var(--radius-full);
  background: var(--viz-track);
  overflow: hidden;
}

.funnel-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.6s var(--ease-out);
}

.funnel-fill.fill-brand   { background: linear-gradient(90deg, var(--brand-400), var(--brand-500)); }
.funnel-fill.fill-warning { background: linear-gradient(90deg, #fbbf24, var(--warning-500)); }
.funnel-fill.fill-success { background: linear-gradient(90deg, var(--color-secondary-light), var(--success-500)); }

.funnel-stage-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 11px;
}

.funnel-stage-val {
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.funnel-stage-pct {
  font-weight: var(--weight-bold);
  color: var(--brand-500);
  font-variant-numeric: tabular-nums;
}

/* The Icon component emits a bare <svg viewBox="0 0 24 24"> with no width or
   height, so an unconstrained one stretches to the full width of its flex
   container — here that produced a chevron as tall as the card and pushed the
   funnel far past its neighbours. Every icon wrapper in this file states its
   own size for that reason; this is no exception. */
.funnel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  margin: -2px 0;
}

.funnel-arrow svg {
  width: 16px;
  height: 16px;
}

.funnel-dropout {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--danger-50);
  color: var(--danger-ink);
  font-size: var(--text-xs);
  border: 1px solid rgba(239, 68, 68, 0.15);
}

/* Pins the drop-out row to the bottom, so the funnel fills a grid row sized by
   its taller neighbours instead of leaving the slack below its last stage. */
.funnel-card .chart-body { display: flex; flex-direction: column; }
.funnel-stages { flex: 1; }
.funnel-dropout { margin-top: auto; }

.funnel-dropout-badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: rgba(239, 68, 68, 0.16);
}

.funnel-dropout-badge svg {
  width: 11px;
  height: 11px;
}

.funnel-dropout-text { line-height: 1.45; }

[data-theme="dark"] .funnel-dropout {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.25);
}

/* --- Collapsible Filter Toolbar & Drawer ---------------------------------- */
.dash-filter-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: all 0.25s var(--ease-out);
  position: relative;
  /* No overflow: hidden here. Every MultiSelectFilter dropdown inside this
     card (View as user, Company, Province, ...) is position: absolute and
     escapes the card's own box on open — that's normal, correct behaviour
     for a popover. overflow: hidden on an ancestor clips a popover's pixels
     outright rather than just painting under something, which is why only
     the first row or two of a long option list used to show before it was
     cut off mid-list, not because of z-index. The ::before accent bar below
     used to rely on this clip to keep its top corners visually rounded;
     it now carries that rounding itself instead, so nothing here needs to
     clip its children to look right. */
}

.dash-filter-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(90deg, var(--brand-400), var(--color-secondary), var(--brand-500));
  opacity: 0.5;
}

.dash-filter-card:hover {
  border-color: var(--border-default);
  box-shadow:
    0 4px 12px -2px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(91, 127, 232, 0.03);
}

[data-theme="dark"] .dash-filter-card {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.dash-filter-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  flex-wrap: wrap;
}

.dash-filter-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.dash-filter-right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: var(--surface-hover);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}

/* Same unconstrained-<svg> gotcha documented above on .funnel-arrow: without
   this the funnel icon balloons to fill the button's flex row. */
.filter-toggle-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.filter-toggle-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-default);
  background: var(--surface-active);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.filter-toggle-btn.is-active {
  color: var(--brand-500);
  background: var(--brand-50);
  border-color: var(--brand-300);
  font-weight: var(--weight-semibold);
  box-shadow: 0 2px 8px rgba(91, 127, 232, 0.12);
}

[data-theme="dark"] .filter-toggle-btn.is-active {
  background: rgba(91, 127, 232, 0.15);
  border-color: var(--brand-500);
  color: var(--brand-300);
  box-shadow: 0 2px 8px rgba(91, 127, 232, 0.15);
}

.filter-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600, #4a6bd4));
  border-radius: var(--radius-full);
  box-shadow: 0 1px 4px rgba(91, 127, 232, 0.3);
  animation: badge-pop 0.3s var(--ease-out);
}

@keyframes badge-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.filter-chevron {
  transition: transform var(--duration-base) var(--ease-out);
}

.filter-chevron.is-open {
  transform: rotate(180deg);
}

/* Collapsible Filter Body */
.filter-drawer-body {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background:
    linear-gradient(180deg,
      var(--surface-sunken) 0%,
      var(--surface-card) 100%);
  animation: drawer-reveal 0.3s var(--ease-out);
}

@keyframes drawer-reveal {
  from {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: none;
    max-height: 600px;
  }
}

.filter-drawer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-3);
}

.filter-drawer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

/* --- Order Size / Bracket Chart ------------------------------------------- */
.bracket-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bracket-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-hover);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-align: start;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.bracket-row::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--brand-400);
  opacity: 0;
  transition: opacity 0.2s var(--ease-out);
}

.bracket-row:hover::before {
  opacity: 1;
}

.bracket-row:nth-child(1)::before { background: #3b82f6; }
.bracket-row:nth-child(2)::before { background: #10b981; }
.bracket-row:nth-child(3)::before { background: #f59e0b; }
.bracket-row:nth-child(4)::before { background: #a855f7; }
.bracket-row:nth-child(5)::before { background: #ec4899; }

.bracket-row:hover {
  background: var(--surface-active);
  border-color: var(--brand-300);
  transform: translateX(3px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[dir="rtl"] .bracket-row:hover {
  transform: translateX(-3px);
}

.bracket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.bracket-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: var(--weight-bold);
}

.bracket-badge.b-micro   { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.bracket-badge.b-small   { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.bracket-badge.b-medium  { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.bracket-badge.b-large   { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.bracket-badge.b-vip     { background: rgba(236, 72, 153, 0.15); color: #ec4899; }

.bracket-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  flex: 1;
}

.bracket-val {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.bracket-track {
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--viz-track);
  overflow: hidden;
}

.bracket-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.6s var(--ease-out);
}

.bracket-fill.b-micro   { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.bracket-fill.b-small   { background: linear-gradient(90deg, #10b981, #34d399); }
.bracket-fill.b-medium  { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.bracket-fill.b-large   { background: linear-gradient(90deg, #a855f7, #c084fc); }
.bracket-fill.b-vip     { background: linear-gradient(90deg, #ec4899, #f43f5e); }

.bracket-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 11px;
}

.bracket-orders { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.bracket-pct { font-weight: var(--weight-semibold); color: var(--brand-500); font-variant-numeric: tabular-nums; }

/* --- Bonus / Free Goods Ratio Chart --------------------------------------- */
.ratio-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--brand-50);
  font-size: var(--text-xs);
}

[data-theme="dark"] .ratio-pill {
  background: rgba(91, 127, 232, 0.15);
}

.ratio-pill-label { color: var(--text-secondary); }
.ratio-pill-val { font-weight: var(--weight-bold); color: var(--brand-500); font-variant-numeric: tabular-nums; }

.bonus-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bonus-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-hover);
  border: 1px solid var(--border-subtle);
  transition: all 0.2s var(--ease-out);
}

.bonus-row:hover {
  background: var(--surface-active);
  border-color: var(--border-default);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.bonus-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.bonus-name {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.bonus-tag {
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: var(--color-secondary-dark);
  background: var(--accent-50);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

[data-theme="dark"] .bonus-tag {
  background: rgba(36, 193, 151, 0.15);
  color: var(--color-secondary-light);
}

.bonus-stacked-track {
  display: flex;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--viz-track);
  overflow: hidden;
}

.bonus-fill-paid {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-500));
  transition: width 0.5s var(--ease-out);
}

.bonus-fill-free {
  height: 100%;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-secondary-light, #5cecc8));
  transition: width 0.5s var(--ease-out);
}

.bonus-row-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 11px;
  color: var(--text-muted);
}

.bonus-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.dot-paid { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-500); }
.dot-free { width: 8px; height: 8px; border-radius: 50%; background: var(--color-secondary); }

/* -------------------------------------------------- 15b. Dashboard Responsive */
@media (max-width: 1024px) {
  .hero-stats-row {
    gap: var(--space-4);
  }

  .dash-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: var(--space-4);
  }
}

@media (max-width: 768px) {
  .hero-banner {
    padding: var(--space-4) var(--space-4);
  }

  .hero-banner-main {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .hero-banner-value {
    font-size: 2.1rem;
  }

  .hero-stats-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .kpis-rich {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .dash-filter-top {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .dash-filter-left,
  .dash-filter-right {
    width: 100%;
    justify-content: space-between;
  }

  .metric-selector {
    width: 100%;
    display: flex;
  }

  .metric-btn {
    flex: 1;
    justify-content: center;
  }

  .filter-toggle-btn {
    width: 100%;
    justify-content: center;
  }

  .donut-layout {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .gauge-stats {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* -------------------------------------------------------------- 16. Print */
@media print {
  /* Force the light palette so a dark-mode screen still prints on white. */
  :root, :root[data-theme="dark"] {
    --surface-page: #fff;
    --surface-card: #fff;
    --surface-sunken: #f4f6f9;
    --surface-hover: #fff;
    --text-primary: #000;
    --text-secondary: #333;
    --text-muted: #555;
    --border-subtle: #ccc;
    --border-default: #999;
  }

  @page { margin: 12mm; size: A4 landscape; }

  body { background: #fff; font-size: 10pt; }

  /* Chrome, side rails and anything interactive is not useful on paper. */
  .app-sidebar,
  .app-header,
  .sidebar-backdrop,
  .table-toolbar,
  .pagination-bar,
  .toast-stack,
  .page-header-actions,
  .no-print {
    display: none !important;
  }

  .app-main { margin: 0 !important; padding: 0 !important; }
  .app-content { padding: 0 !important; }

  /* The gradient header becomes a plain rule so it does not eat toner. */
  .page-header {
    background: none !important;
    box-shadow: none !important;
    color: #000 !important;
    padding: 0 0 8pt 0 !important;
    margin-bottom: 10pt !important;
    border-bottom: 2pt solid #000 !important;
    border-radius: 0 !important;
  }
  .page-header::after { display: none !important; }
  .page-title, .page-subtitle { color: #000 !important; }
  .page-header-eyebrow { background: none !important; border-color: #666 !important; color: #000 !important; }

  .card, .stat-card {
    box-shadow: none !important;
    border: 1pt solid #bbb !important;
    break-inside: avoid;
  }

  .stats-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 6pt !important; }

  .table-wrap { overflow: visible !important; }

  .data-table { font-size: 9pt; }
  .data-table thead { display: table-header-group; }   /* repeat header per page */
  .data-table tbody tr { break-inside: avoid; }
  .data-table thead th {
    position: static !important;
    background: #f0f0f0 !important;
    border-bottom: 1pt solid #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Icon buttons carry state by colour on screen; on paper print a glyph. */
  .btn-icon { border: 0 !important; background: none !important; box-shadow: none !important; }
  .print-mark { display: inline !important; }
  .print-hide-icon { display: none !important; }

  a { text-decoration: none !important; color: #000 !important; }

  .print-only { display: block !important; }
}

.print-only { display: none; }
.print-mark { display: none; }