/* ============================================================================
   Cost Analysis — design tokens
   ============================================================================
   Two themes, one vocabulary. Components style themselves through the SEMANTIC
   tokens below and never touch a raw colour, so a theme is a palette swap and
   nothing else. Brand primitives stay fixed; only the semantic layer re-maps.

   THEME RESOLUTION (all three must agree, in this order):
     1. :root                        -> light, the default
     2. @media (prefers-color-scheme: dark)  -> follows the browser/OS
     3. :root[data-theme="light"|"dark"]     -> an explicit choice, wins over 2
   Rule: never style a component inside the media query. Redefine tokens only.

   ELEVATION — in BOTH themes, a surface that rises gets lighter:
     light:  bg #eef2f8  <  surface #fff       (cards lift off a tinted page)
     dark:   bg #0a0f17  <  surface #121a25  <  raised #1a2531
   `sunken` is the recessed step (table heads, wells) and goes the other way.

   CONTRAST — every text/ground pair below is verified >= WCAG AA 4.5:1 in both
   themes. Brand blue #005ff9 is a FILL colour: on light grounds it only reaches
   ~4.4-5.2:1, so text and links use --accent-text (#0b4fd4, >= 5.7:1) instead.
   Re-verify with scripts/ if you change any value.
   ========================================================================== */

:root {
  /* ---- Brand primitives — fixed, theme-independent --------------------- */
  --brand-blue: #005ff9;
  --brand-cyan: #01a9f4;
  /* Deepened cyan used ONLY where text sits on top of it (the app bar / drawer
     headers). White on the vivid #01a9f4 is 2.63:1 — a pre-existing AA failure;
     on this it is 4.90:1. The vivid cyan keeps its role as an accent and as a
     chart series, where nothing is overlaid. */
  --brand-cyan-deep: #0176b8;
  --brand-ink: #221f20;

  /* ---- Semantic: light ------------------------------------------------- */
  --bg: #eef2f8;
  --surface: #ffffff;
  --surface-raised: #f7f9fc;
  --surface-sunken: #e6ebf3;
  --border: #dbe2ec;
  --border-strong: #c3cdda;
  /* Ink shifted cooler than the old warm brand ink so it sits in the same
     family as the blue-tinted surfaces instead of reading brown against them. */
  --text: #161d28;
  --text-muted: #4f5b6d;
  --text-faint: #5a6678;

  --accent: var(--brand-blue);   /* fills, graphics, focus rings */
  --accent-text: #0b4fd4;        /* accent as TEXT/links — AA on light grounds */
  --accent-hover: #0047c2;
  --accent-soft: #e7efff;
  --accent-on: #ffffff;          /* text on an accent fill */

  /* Semantic status pairs (text on its own background) */
  --success: #0e6f63;
  --success-bg: #d8f1ec;
  --warn: #95500a;
  --warn-bg: #fbeeda;
  --danger: #b3261e;
  --danger-bg: #fbe6e4;
  --info: #0a6a95;
  --info-bg: #dcf0f9;
  /* Legacy aliases — older rules reference these names. Kept so nothing breaks
     while blocks migrate to the semantic names above. */
  --error: var(--danger);
  --error-bg: var(--danger-bg);
  --neutral: var(--text-muted);
  --neutral-bg: var(--surface-sunken);

  /* Data-visualisation colour — TWO families, with different jobs. Keeping them
     apart is what stops the same thing being two colours on two pages:
       --viz-*  ARBITRARY series (instances, vendors). Assigned by index; an
                entity keeps its colour via a name->colour map, not by position.
                These are the app's original bright series hues, kept in the same
                tonal register as --seg-* so a chart on Financial Overview or the
                Dashboard reads as the same family as one on Company Insight.
                NOTE: as fills on white, teal (2.5:1) and amber (2.0:1) sit under
                the 3:1 non-text guide — inherited from the original palette and
                kept deliberately for that consistency. Charts using them lean on
                stroke width, direct labels and legends rather than colour alone.
       --seg-*  FIXED, NAMED categories (agent type x channel). A channel means
                ONE colour app-wide — Voice is the coral family in the session
                breakdown AND in the weekly trend; Digital is always turquoise.
     If you are colouring something a user recognises by name, it belongs in
     --seg-*. If it is just "series N of many", use --viz-*. */
  /* Categorical chart palette. Matched lightness and moderate chroma so no
     series shouts; deliberately NO pure red or green — those are the page's
     status colours (cost up / cost down) and a series must never read as one. */
  --viz-1: #4f6fe0;
  --viz-2: #2a9d8f;
  --viz-3: #e3a03a;
  --viz-4: #c2607a;
  --viz-5: #5aa6d4;
  --viz-6: #8a78d6;
  --viz-7: #98ab58;
  --viz-8: #64748b;
  --viz-grid: rgba(22, 29, 40, 0.08);
  --viz-axis: #5a6678;

  /* ---- Brand chrome (app bar, drawer headers) --------------------------
     A separate family because these surfaces are BRAND-coloured, not neutral:
     whatever sits on them is light in light mode. In dark mode the bright
     blue->cyan gradient becomes a glare source at night, so the chrome drops to
     a deep surface and keeps its brand identity as a cyan hairline instead.
     Everything painted on the chrome uses --chrome-* so it follows either way. */
  --chrome-bg: linear-gradient(100deg, var(--brand-blue) 0%, var(--brand-cyan-deep) 55%, var(--brand-cyan-deep) 100%);
  --chrome-fg: #ffffff;
  --chrome-fg-muted: #f7fbff; /* solid + bright: alpha or a dimmer tint fails AA on the bar */
  --chrome-line: rgba(255, 255, 255, 0.35);
  --chrome-line-soft: rgba(255, 255, 255, 0.2);
  --chrome-fill: rgba(255, 255, 255, 0.14);
  --chrome-fill-hover: rgba(255, 255, 255, 0.28);
  --chrome-fill-strong: rgba(255, 255, 255, 0.6);

  /* Modal/panel scrim — dims the page behind an overlay. */
  --scrim: rgba(10, 15, 23, 0.55);
  /* Base colour every shadow/inset tint is mixed from, so dark mode deepens
     shadows in ONE place instead of 90 scattered rgba() values. */
  --shadow-tint: #101828;


  /* ---- Session-breakdown segments --------------------------------------
     The original hand-picked hues for the agent x channel breakdown, kept
     verbatim in light mode because people recognise these categories by their
     colour. Held apart from the --viz-* ramp: that ramp is for arbitrary
     series, this is a fixed, named set. */
  --seg-ai-voice: #FF6B6B;
  --seg-ai-digital: #4ECDC4;
  --seg-classic-voice: #FFE66D;
  --seg-classic-digital: #95E1D3;
  --seg-other: #6C5CE7;

  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14);

  /* ---- Design foundation -------------------------------------------------
     Scales added so new work stops inventing one-off values (the stylesheet
     had 14 distinct font-sizes including 11.5/12.5px). Existing rules keep
     working unchanged; use these for anything new or when touching a rule. */

  /* Type scale (1.125 ratio, 13px base — matches the app's dominant size) */
  --fs-2xs: 10px;   /* uppercase micro-labels */
  --fs-xs: 11px;    /* table sub-labels, hints */
  --fs-sm: 12px;    /* secondary text */
  --fs-md: 13px;    /* BASE: table cells, body copy */
  --fs-lg: 15px;    /* card titles */
  --fs-xl: 17px;    /* section headings */
  --fs-2xl: 20px;   /* page titles */
  --fs-3xl: 24px;   /* KPI values */
  --lh-tight: 1.25;
  --lh-normal: 1.45;
  --lh-loose: 1.6;

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

  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Motion — every duration flows through these so the reduced-motion guard
     at the bottom of this block can neutralise them in one place. */
  --dur-fast: 0.12s;
  --dur-med: 0.2s;
  --dur-slow: 0.32s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Focus ring — one definition, used by the unified :focus-visible rule */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);

  --skeleton-base: #e9edf3;
  --skeleton-shine: #f5f7fa;

  color-scheme: light;
}

/* ---- Dark theme ----------------------------------------------------------
   Follows the browser/OS preference. Deliberately NOT an inversion: the ground
   is a deep blue-black (never pure black, which makes shadows unreadable and
   over-contrasts white text), elevation rises toward lighter surfaces, brand
   blue is lifted to a legible tint, and every semantic hue is re-picked for a
   dark ground rather than reused from light. Verified AA in both themes.

   ONLY token redefinitions belong in here. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0f17;
    --surface: #121a25;
    --surface-raised: #1a2531;
    --surface-sunken: #070b11;
    --border: #26313f;
    --border-strong: #38465a;
    --text: #e7edf6;
    --text-muted: #a7b3c4;
    --text-faint: #8794a6;

    --accent: #5c9bff;
    --accent-text: #5c9bff;
    --accent-hover: #84b4ff;
    --accent-soft: #16233c;
    --accent-on: #08121f;

    --success: #4ecdb4;
    --success-bg: #0d2a26;
    --warn: #f0a728;
    --warn-bg: #2c2110;
    --danger: #ff8a80;
    --danger-bg: #301715;
    --info: #5cc4ef;
    --info-bg: #0c2431;

    --viz-1: #7d93f0;
    --viz-2: #48bfb0;
    --viz-3: #f0b659;
    --viz-4: #dc8397;
    --viz-5: #7fc1e8;
    --viz-6: #a898ec;
    --viz-7: #b5c678;
    --viz-8: #94a3b8;
    --viz-grid: rgba(231, 237, 246, 0.09);
    --viz-axis: #8794a6;

    /* Chrome drops to a deep surface at night — the bright brand gradient is a
       glare source in a dark room. Brand identity survives as the cyan hairline
       under the bar plus the logo, which is the right trade at 2am. */
    --chrome-bg: linear-gradient(180deg, #16202c 0%, #121a25 100%);
    --chrome-fg: #e7edf6;
    --chrome-fg-muted: #a7b3c4;
    --chrome-line: rgba(63, 195, 255, 0.32);
    --chrome-line-soft: rgba(231, 237, 246, 0.12);
    --chrome-fill: rgba(231, 237, 246, 0.08);
    --chrome-fill-hover: rgba(231, 237, 246, 0.16);
    --chrome-fill-strong: rgba(231, 237, 246, 0.4);

    --scrim: rgba(2, 5, 9, 0.72);
    --shadow-tint: #000000;

    /* Same five segment hues, deepened slightly for a dark ground: the pastels
       glare at full strength on near-black, and the yellow in particular reads
       as a warning colour if left bright. Hue is preserved so a segment stays
       recognisably itself across themes. */
    --seg-ai-voice: #f2726f;
    --seg-ai-digital: #46bdb4;
    --seg-classic-voice: #e0c65b;
    --seg-classic-digital: #7ec6b8;
    --seg-other: #8b7ceb;

    /* Shadows carry almost no weight on a dark ground — they read as haze.
       Deepened and paired with a hairline top highlight on raised surfaces. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

    --skeleton-base: #1a2531;
    --skeleton-shine: #243141;

    color-scheme: dark;
  }
}

/* ---- Explicit theme choice ----------------------------------------------
   A `data-theme` attribute on <html> must beat the media query in BOTH
   directions, so each palette is restated in full rather than patched. */
:root[data-theme="light"] {
  --bg: #eef2f8;
  --surface: #ffffff;
  --surface-raised: #f7f9fc;
  --surface-sunken: #e6ebf3;
  --border: #dbe2ec;
  --border-strong: #c3cdda;
  --text: #161d28;
  --text-muted: #4f5b6d;
  --text-faint: #5a6678;
  --accent: var(--brand-blue);
  --accent-text: #0b4fd4;
  --accent-hover: #0047c2;
  --accent-soft: #e7efff;
  --accent-on: #ffffff;
  --success: #0e6f63;
  --success-bg: #d8f1ec;
  --warn: #95500a;
  --warn-bg: #fbeeda;
  --danger: #b3261e;
  --danger-bg: #fbe6e4;
  --info: #0a6a95;
  --info-bg: #dcf0f9;
  --viz-1: #4f6fe0;
  --viz-2: #2a9d8f;
  --viz-3: #e3a03a;
  --viz-4: #c2607a;
  --viz-5: #5aa6d4;
  --viz-6: #8a78d6;
  --viz-7: #98ab58;
  --viz-8: #64748b;
  --viz-grid: rgba(22, 29, 40, 0.08);
  --viz-axis: #5a6678;
  --chrome-bg: linear-gradient(100deg, var(--brand-blue) 0%, var(--brand-cyan-deep) 55%, var(--brand-cyan-deep) 100%);
  --chrome-fg: #ffffff;
  --chrome-fg-muted: #f7fbff; /* solid + bright: alpha or a dimmer tint fails AA on the bar */
  --chrome-line: rgba(255, 255, 255, 0.35);
  --chrome-line-soft: rgba(255, 255, 255, 0.2);
  --chrome-fill: rgba(255, 255, 255, 0.14);
  --chrome-fill-hover: rgba(255, 255, 255, 0.28);
  --chrome-fill-strong: rgba(255, 255, 255, 0.6);
  --scrim: rgba(10, 15, 23, 0.55);
  --shadow-tint: #101828;
  /* ---- Session-breakdown segments --------------------------------------
     The original hand-picked hues for the agent x channel breakdown, kept
     verbatim in light mode because people recognise these categories by their
     colour. Held apart from the --viz-* ramp: that ramp is for arbitrary
     series, this is a fixed, named set. */
  --seg-ai-voice: #FF6B6B;
  --seg-ai-digital: #4ECDC4;
  --seg-classic-voice: #FFE66D;
  --seg-classic-digital: #95E1D3;
  --seg-other: #6C5CE7;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.14);
  --skeleton-base: #e9edf3;
  --skeleton-shine: #f5f7fa;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0a0f17;
  --surface: #121a25;
  --surface-raised: #1a2531;
  --surface-sunken: #070b11;
  --border: #26313f;
  --border-strong: #38465a;
  --text: #e7edf6;
  --text-muted: #a7b3c4;
  --text-faint: #8794a6;
  --accent: #5c9bff;
  --accent-text: #5c9bff;
  --accent-hover: #84b4ff;
  --accent-soft: #16233c;
  --accent-on: #08121f;
  --success: #4ecdb4;
  --success-bg: #0d2a26;
  --warn: #f0a728;
  --warn-bg: #2c2110;
  --danger: #ff8a80;
  --danger-bg: #301715;
  --info: #5cc4ef;
  --info-bg: #0c2431;
    --viz-1: #7d93f0;
  --viz-2: #48bfb0;
  --viz-3: #f0b659;
  --viz-4: #dc8397;
  --viz-5: #7fc1e8;
  --viz-6: #a898ec;
  --viz-7: #b5c678;
  --viz-8: #94a3b8;
  --viz-grid: rgba(231, 237, 246, 0.09);
  --viz-axis: #8794a6;
  --chrome-bg: linear-gradient(180deg, #16202c 0%, #121a25 100%);
  --chrome-fg: #e7edf6;
  --chrome-fg-muted: #a7b3c4;
  --chrome-line: rgba(63, 195, 255, 0.32);
  --chrome-line-soft: rgba(231, 237, 246, 0.12);
  --chrome-fill: rgba(231, 237, 246, 0.08);
  --chrome-fill-hover: rgba(231, 237, 246, 0.16);
  --chrome-fill-strong: rgba(231, 237, 246, 0.4);
  --scrim: rgba(2, 5, 9, 0.72);
  --shadow-tint: #000000;
  /* Same five segment hues, deepened slightly for a dark ground: the pastels
     glare at full strength on near-black, and the yellow in particular reads
     as a warning colour if left bright. Hue is preserved so a segment stays
     recognisably itself across themes. */
  --seg-ai-voice: #f2726f;
  --seg-ai-digital: #46bdb4;
  --seg-classic-voice: #e0c65b;
  --seg-classic-digital: #7ec6b8;
  --seg-other: #8b7ceb;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --skeleton-base: #1a2531;
  --skeleton-shine: #243141;
  color-scheme: dark;
}

/* ---- Accessibility: honour the OS "reduce motion" preference -------------
   The app has 80+ transitions/animations (spinners, slide-in panels, chart
   fades). Motion-sensitive users get a still interface instead. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Accessibility: one visible focus ring, keyboard-only ----------------
   Previously focus styling was scattered (24 :focus rules, 10 focus-visible),
   so some controls flashed a ring on mouse click and others showed none. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* Mouse/touch interaction should never paint a ring. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* ---- Skeleton loading ---------------------------------------------------
   Replaces bare spinners on the slow data surfaces (several endpoints take
   2-10s cold). Showing the shape of the incoming content reads as much faster
   than an indeterminate spinner and stops layout jumping when data lands. */
.sk {
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 37%, var(--skeleton-base) 63%);
  background-size: 400% 100%;
  animation: sk-shine 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  display: block;
}
@keyframes sk-shine { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.sk-text { height: 12px; margin: 6px 0; }
.sk-title { height: 18px; width: 40%; margin-bottom: var(--sp-3); }
.sk-num { height: 24px; width: 60%; }
.sk-w-90 { width: 90%; } .sk-w-70 { width: 70%; } .sk-w-50 { width: 50%; } .sk-w-30 { width: 30%; }
.sk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.sk-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: var(--sp-4); }
.sk-table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.sk-row { display: grid; grid-template-columns: 2fr repeat(5, 1fr); gap: var(--sp-4); padding: 11px var(--sp-4); border-bottom: 1px solid var(--border); }
.sk-row:last-child { border-bottom: none; }
.sk-row.sk-head { background: var(--neutral-bg); }
.sk-chart { height: 220px; border-radius: var(--radius-md); }
/* Screen readers get a live status instead of the visual shimmer. */
.sk-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* A skeleton dropped into a real table cell must not inherit cell padding. */
td.sk-cell { padding: 0 !important; border: none !important; background: transparent; }
td.sk-cell .sk-table { border: none; border-radius: 0; }

/* ---- Empty & error states ------------------------------------------------
   Previously "no data" surfaced as bare centre-aligned text with inline styles
   in several places, and failures as red text. These give both a consistent,
   calmer presentation that explains what to do next. */
.state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-2); padding: var(--sp-10) var(--sp-5);
  color: var(--text-muted);
}
.state-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--neutral-bg); color: var(--text-faint); font-size: var(--fs-xl);
  margin-bottom: var(--sp-1);
}
.state-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.state-msg { font-size: var(--fs-md); max-width: 46ch; line-height: var(--lh-loose); }
.state-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; justify-content: center; }
.state-error .state-icon { background: var(--error-bg); color: var(--error); }
.state-error .state-title { color: var(--error); }
.state-detail {
  margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  max-width: 60ch; word-break: break-word;
}

/* ---- Table refinement ----------------------------------------------------
   Numeric columns get tabular figures so digits line up column-to-column and
   money reads as a column rather than ragged text.
   (A CSS-gradient horizontal-scroll shadow was tried here and removed: these
   containers already paint an opaque --surface background, so the gradients
   showed as a hard band at the right edge even with nothing to scroll.) */
td.num, th.num, .fin-num, .stat-value, .dash-top-cost, td.number, .wow-table td:not(.text) {
  font-variant-numeric: tabular-nums;
}

/* ---- Responsive: primary nav --------------------------------------------
   With 6 entries the nav overflowed on narrow screens with no way to reach the
   hidden items. It now scrolls horizontally with the scrollbar hidden and a
   fade at the right edge hinting there is more, and the header subtitle (pure
   decoration) is dropped below tablet width to buy the nav its space. */
.main-nav-inner {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.main-nav-inner::-webkit-scrollbar { display: none; }
.main-nav-link { scroll-snap-align: start; flex: 0 0 auto; }
@media (max-width: 900px) {
  .main-nav { position: relative; }
  .main-nav::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--surface));
  }
  .main-nav-inner { padding: 0 var(--sp-4); }
  .app-bar-title .subtitle { display: none; }
}
@media (max-width: 600px) {
  /* Icon-only nav keeps all six destinations reachable on a phone. */
  .main-nav-link span:not(.navn) { display: none; }
  .main-nav-link { padding-left: var(--sp-3); padding-right: var(--sp-3); }
}

/* ---- Interaction polish -------------------------------------------------- */
.card { transition: box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); }
/* Only cards that actually do something on click get the affordance. */
.card.is-clickable:hover, .dash-card.is-clickable:hover {
  box-shadow: var(--shadow-md); border-color: var(--border-strong); cursor: pointer;
}
button, .btn, a.btn { transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.btn:active:not(:disabled) { transform: translateY(0.5px); }
/* Disabled controls should look inert everywhere, not just where remembered. */
button:disabled, .btn:disabled, input:disabled, select:disabled { opacity: 0.55; cursor: not-allowed; }

* {
  box-sizing: border-box;
}

/* App-wide keyboard focus baseline. Low specificity (:where) so component
   focus rings still win; guarantees every interactive control is visible. */
:where(a, button, [role="button"], summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.45;
}

.page {
  max-width: 1600px;
  margin: 0 auto;
  padding: 32px 32px 64px;
  background: var(--surface-raised);
}

.page-view {
  display: block;
}

.page-view.hidden {
  display: none;
}

/* ---- Branded app bar --------------------------------------------------- */
.app-bar {
  background: var(--chrome-bg);
  color: var(--chrome-fg);
  /* In dark mode the chrome is a deep surface, so the brand reasserts itself as
     a cyan hairline along the bottom edge instead of a full-bleed gradient. */
  border-bottom: 1px solid var(--chrome-line);
  box-shadow: var(--shadow-md);
}

.app-bar-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand-logo {
  height: 30px;
  display: block;
  flex-shrink: 0;
}

.app-bar-divider {
  width: 1px;
  height: 34px;
  background: var(--chrome-line);
  flex-shrink: 0;
}

.app-bar-title {
  min-width: 0;
}

h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--chrome-fg);
}

.subtitle {
  margin: 1px 0 0 0;
  color: var(--chrome-fg-muted);
  font-size: 13px;
}

.icon-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--chrome-line);
  background: var(--chrome-fill);
  color: var(--chrome-fg);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.2s ease;
}

.icon-btn:hover {
  background: var(--chrome-fill-hover);
  border-color: var(--chrome-fill-strong);
  transform: rotate(20deg);
}

.settings-card {
  padding: 18px;
}

/* Settings page: left nav + content pane */
.settings-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 800px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }
}

.settings-nav {
  padding: 10px;
}

.settings-nav-title {
  margin: 4px 8px 10px;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font-size: 13px;
  font-weight: 550;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

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

.settings-nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.settings-nav-item svg {
  flex-shrink: 0;
}

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

/* EPIC enable/disable toggle */
.epic-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  margin-bottom: 18px;
}

.epic-toggle-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.epic-toggle-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 2px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  inset: 0;
  background: var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.switch-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-tint) 20%, transparent);
  transition: transform 0.15s ease;
}

.switch input:checked + .switch-slider {
  background: var(--accent);
}

.switch input:checked + .switch-slider::before {
  transform: translateX(18px);
}

.switch input:focus-visible + .switch-slider {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* When EPIC is disabled, dim the configuration below the toggle. */
.epic-off .epic-applies,
.epic-off .table-wrap {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}

/* EPIC applicability picker */
.epic-applies {
  margin-bottom: 18px;
}

.epic-applies-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.epic-customer-list {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 2px 12px;
  margin-bottom: 10px;
}

.epic-customer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s ease;
}

.epic-customer-item:hover {
  background: var(--bg);
}

.epic-customer-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

.epic-applies-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.epic-scope-note {
  font-size: 13px;
  color: var(--text-muted);
}

/* ---- Caveat banner ----------------------------------------------------- */
/* ---- Shared card surface ------------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-tint) 6%, transparent);
}

/* ---- Filter Strip -------------------------------------------------------- */
.filter-strip {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-tint) 6%, transparent);
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.filter-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0;
}

.filter-input {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: all 0.2s ease;
  min-width: 140px;
  height: 36px;
  cursor: pointer;
}

.filter-input:hover {
  border-color: var(--accent);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--accent-hover) 10%, transparent);
}

.filter-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--surface);
}

.multiselect-wrapper {
  position: relative;
}

.filter-multiselect-btn {
  font-size: 13px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 140px;
  height: 36px;
  text-align: left;
  display: flex;
  align-items: center;
}

.filter-multiselect-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--accent-hover) 10%, transparent);
}

.filter-multiselect-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.filter-multiselect-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--shadow-tint) 12%, transparent);
  padding: 8px;
  width: 280px;
  max-height: 340px;
  overflow-y: auto;
}

.filter-multiselect-panel .col-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background 0.1s ease;
}

.filter-multiselect-panel .col-row:hover {
  background: var(--surface-raised);
}

.filter-multiselect-panel .col-row label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-weight: 400;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  margin: 0;
}

.filter-multiselect-panel input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.filter-multiselect-panel .multiselect-actions {
  display: flex;
  gap: 6px;
  padding: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.filter-multiselect-panel .multiselect-actions button {
  flex: 1;
  padding: 6px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-multiselect-panel .multiselect-actions button:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.filter-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
  margin-left: auto;
}

.filter-actions .btn {
  height: 36px;
  padding: 8px 16px;
}

.hidden {
  display: none !important;
}

/* ---- Buttons ------------------------------------------------------------ */
button {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
}

button:hover {
  background: var(--bg);
  border-color: var(--text-faint);
}

button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
  border-color: var(--accent);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

button:disabled:hover {
  background: var(--surface);
  border-color: var(--border-strong);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
  font-weight: 600;
  padding: 8px 18px;
  box-shadow: var(--shadow-sm);
}

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

.btn-ghost {
  background: var(--surface);
  color: var(--text-muted);
  font-weight: 500;
}

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

/* ---- Tabs ---------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 0;
  padding: 0;
  background: var(--surface);
}

.tab-btn {
  border: none;
  border-radius: 0;
  background: none;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.25s ease;
}

.tab-btn:hover {
  color: var(--text);
  background: var(--surface-raised);
}

.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
  background: var(--surface);
}

.tab-panel {
  display: none;
  padding: 18px;
  margin-top: 16px;
}

.tab-panel.active {
  display: block;
}

/* ---- Panel toolbar -------------------------------------------------------- */
.panel-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
}

.panel-toolbar .inline-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 13px;
}

.panel-toolbar select {
  font-size: 13px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
}

.status {
  color: var(--text-muted);
  margin-right: auto;
  font-size: 13px;
}

.page-label {
  color: var(--text-muted);
  font-size: 13px;
  padding: 0 2px;
}

/* ---- Dropdown panels (Columns + multi-select filters) --------------------- */
.columns-control,
.multiselect-control {
  position: relative;
}

.columns-panel,
.multiselect-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  width: 280px;
  max-height: 340px;
  overflow-y: auto;
}

.columns-panel .col-row,
.multiselect-panel .col-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background 0.1s ease;
}

.columns-panel .col-row:hover,
.multiselect-panel .col-row:hover {
  background: var(--bg);
}

.columns-panel .col-row label,
.multiselect-panel .col-row label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.columns-panel .col-row input[type="checkbox"],
.multiselect-panel .col-row input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.columns-panel .col-row button {
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1;
}

.multiselect-btn {
  text-align: left;
  font-size: 13px;
  padding: 6px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 400;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 120px;
  height: 32px;
  margin: 0;
}

.multiselect-actions {
  display: flex;
  gap: 6px;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.multiselect-actions button {
  flex: 1;
  padding: 5px 6px;
  font-size: 11px;
}

.sort-arrow {
  font-size: 9px;
  margin-left: 5px;
  /* No opacity: it fades an otherwise-AA colour to ~2.9:1. The arrow encodes
     sort direction, so it has to stay legible; --accent-text is the AA-safe
     accent for text-sized marks on a surface. */
  color: var(--accent-text);
}

/* ---- Tables ---------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

th,
td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: right;
}

th:first-child,
td:first-child,
th.text,
td.text {
  text-align: left;
}

thead th {
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  position: sticky;
  top: 0;
  cursor: pointer;
  user-select: none;
  box-shadow: inset 0 -1px 0 var(--border);
  transition: color 0.12s ease, background 0.12s ease;
}

thead th:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

tbody tr:nth-child(even) {
  background: var(--surface-raised);
}

tbody tr:hover {
  background: var(--accent-soft);
}

tbody td {
  color: var(--text);
}

a.conv-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

a.conv-link:hover {
  text-decoration: underline;
}

/* ---- Landing panel head + KPI strip ---------------------------------------- */
.panel-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.panel-head-text {
  margin-right: auto;
  min-width: 0;
}

.panel-title {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
}

.panel-sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* Cost by Company summary tiles — compact, uniform height and width */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.kpi-row .stat-tile {
  padding: 10px 12px;
  min-height: 64px;
  /* Top-align, don't centre: tiles in a row hold a different number of lines
     (some carry a sub-caption or a "Top spenders" link, some don't) and
     centring each one independently left the labels and the figures on
     mismatched baselines across the row. Any trailing sub-line is pushed to
     the bottom instead, so labels align at the top and subs align below. */
  justify-content: flex-start;
}

.kpi-row .stat-tile > .dash-kpi-sub:last-child,
.kpi-row .stat-tile > .cost-breakdown:last-child,
.kpi-row .stat-tile > .stat-link:last-child {
  margin-top: auto;
}

.kpi-row .stat-label {
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-row .stat-value {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* NB: `.cost-breakdown` is also the class of an unrelated grid component
   elsewhere in this file, which contributes `display:grid` and a large
   `margin-bottom`. Inside a KPI tile this is just a caption line, and that
   inherited bottom margin consumed the tile's free space — which made the
   `margin-top:auto` above resolve to 0 and left the caption floating mid-tile
   instead of pinned to the bottom. Neutralise both here. */
.kpi-row .cost-breakdown {
  display: block;
  margin: 0;
  font-size: 10px;
  color: var(--text-muted);
}

/* The ⓘ glyph is taller than the 11px label text, so a tile whose label carries
   one ended up ~5px taller than its neighbours — pushing its figure off the
   row's shared baseline. Pin the label row to the plain label's line box and
   let the icon centre inside it without contributing height. */
.kpi-row .stat-label,
.kpi-row .stat-label-with-info {
  min-height: 15px;
  line-height: 15px;
}

.kpi-row .stat-label-with-info {
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi-row .stat-label-with-info .info-icon {
  font-size: 11px;
  line-height: 15px;
}

.stat-link {
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.stat-link:hover {
  text-decoration: underline;
}

/* Top companies slide-over panel */
.slide-panel-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--shadow-tint) 35%, transparent);
  z-index: 10000;
}

.slide-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 92vw;
  background: var(--surface);
  box-shadow: -8px 0 24px color-mix(in srgb, var(--shadow-tint) 15%, transparent);
  z-index: 10001;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
}

.slide-panel.open {
  transform: translateX(0);
}

.slide-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--border);
}

.slide-panel-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.slide-panel-sub {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.slide-panel-close {
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.slide-panel-close:hover {
  background: var(--surface-sunken);
  color: var(--text);
}

.slide-panel-body {
  padding: 12px 20px 20px;
  overflow-y: auto;
}

.top10-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--surface-sunken);
}

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

.top10-rank {
  flex: 0 0 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.top10-info {
  flex: 1;
  min-width: 0;
}

.top10-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.top10-company {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top10-cost {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.top10-bar-track {
  height: 5px;
  background: var(--surface-sunken);
  border-radius: 3px;
  margin: 5px 0 3px;
  overflow: hidden;
}

.top10-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}

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

.top10-empty {
  padding: 24px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Company view stat tiles - 4 uniform columns, full width */
.cv-tiles {
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
}

.cv-tiles .stat-tile {
  padding: 18px 20px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cv-tiles .stat-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.cv-tiles .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.cv-tiles .stat-tile.stat-tile-accent .stat-value {
  color: var(--chrome-fg);
}

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

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

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

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

@media (max-width: 600px) {
  .cv-tiles {
    grid-template-columns: 1fr;
  }
}

/* ---- Landing table cells ---------------------------------------------------- */
.company-cell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.company-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.company-name {
  font-weight: 600;
  color: var(--text);
}

.month-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 12px;
  font-weight: 550;
  color: var(--text-muted);
}

/* Total Cost cell: value plus a thin single-hue bar scaled to the page max,
   so the column doubles as a compact magnitude chart. */
.cost-cell {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.cost-bar-track {
  width: 110px;
  height: 5px;
  border-radius: 3px;
  background: var(--accent-soft);
  overflow: hidden;
  flex-shrink: 0;
}

.cost-bar-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--brand-blue);
}

.cost-amount {
  min-width: 76px;
  font-weight: 600;
  color: var(--text);
}

#companies-table tbody td {
  padding-top: 9px;
  padding-bottom: 9px;
}

/* ---- Details button (Cost by Company rows) -------------------------------- */
.btn-details {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  border-color: var(--accent);
  background: var(--surface);
  white-space: nowrap;
}

.btn-details:hover {
  background: var(--accent-soft);
  border-color: var(--accent-hover);
  color: var(--accent-hover);
}

.btn-danger {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--danger);
  border: 1px solid var(--danger-bg);
  background: var(--surface);
  white-space: nowrap;
  margin-left: 6px;
}

.btn-danger:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Details drawer -------------------------------------------------------- */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--shadow-tint) 40%, transparent);
  z-index: 100;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.drawer-overlay.hidden {
  opacity: 0;
  pointer-events: none;
  display: block !important; /* keep the fade-out transition */
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(680px, 94vw);
  background: var(--surface);
  box-shadow: -12px 0 40px color-mix(in srgb, var(--shadow-tint) 18%, transparent);
  z-index: 110;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
}

.drawer.open {
  transform: translateX(0);
}

body.drawer-open {
  overflow: hidden;
}

.drawer-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--chrome-bg);
  color: var(--chrome-fg);
  flex-shrink: 0;
}

.drawer-title {
  min-width: 0;
}

.drawer-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-period {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--chrome-fg-muted);
}

.drawer-close {
  margin-left: auto;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 19px;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--chrome-line);
  background: var(--chrome-fill);
  color: var(--chrome-fg);
}

.drawer-close:hover {
  background: var(--chrome-fill-hover);
  border-color: var(--chrome-fill-strong);
}

.drawer-controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}

.drawer-controls label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.drawer-controls select,
.drawer-controls input[type="date"] {
  font-size: 13px;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  min-width: 130px;
}

.drawer-controls select:focus,
.drawer-controls input[type="date"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 28px;
}

.drawer-loading {
  padding: 32px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Stat tiles */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.stat-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
}

/* The one primary metric per row — a solid accent fill rather than a tint, so
   the headline figure reads first without needing a larger type size. */
.stat-tile-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
}
.stat-tile-accent .stat-label { color: var(--accent-on); }
.stat-tile-accent .stat-value { color: var(--accent-on); }
.stat-tile-accent .cost-breakdown,
.stat-tile-accent .dash-kpi-sub { color: var(--accent-on); font-weight: 550; }

.stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stat-value {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Drawer sections */
.drawer-section {
  margin-bottom: 22px;
}

.drawer-section h3 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.drawer-table-wrap {
  border-radius: var(--radius-sm);
}

.drawer-table {
  font-size: 12px;
}

.drawer-table th,
.drawer-table td {
  padding: 7px 10px;
}

.drawer-table thead th {
  cursor: default;
}

.drawer-table thead th:hover {
  color: var(--text-muted);
  background: var(--surface-raised);
}

/* Sortable headers on the company page tables */
.drawer-table thead th.cv-sortable {
  cursor: pointer;
}

.drawer-table thead th.cv-sortable:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

/* Key/value + cost summary lists */
.kv-list,
.cost-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kv-row,
.cost-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--surface-sunken);
  font-variant-numeric: tabular-nums;
  transition: background-color 0.15s ease;
}

.kv-row:last-child,
.cost-row:last-child {
  border-bottom: none;
}

.kv-row:nth-child(even),
.cost-row:nth-child(even) {
  background: var(--surface-raised);
}

.kv-row:hover,
.cost-row:hover {
  background-color: var(--surface-raised);
}

.kv-row > span:first-child,
.cost-row > span:first-child {
  color: var(--text-muted);
  font-weight: 500;
  flex: 1;
}

.kv-row > span:last-child,
.cost-row > span:last-child {
  font-weight: 600;
  text-align: right;
  color: var(--text);
  min-width: 100px;
}

.na {
  color: var(--text-faint);
  font-weight: 400;
}

/* A nested component of the row above it — indented and de-emphasised so it
   reads as a breakdown, never as another addend. Used for "of which cached
   input", which is already inside the input token cost. */
.kv-row.kv-row-sub > span:first-child {
  padding-left: 16px;
  border-left: 2px solid var(--border);
  margin-left: 2px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.kv-row.kv-row-sub > span:last-child {
  color: var(--text-muted);
  font-weight: 500;
}

.kv-sub-note {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
  background: var(--surface-sunken);
  border-radius: 4px;
  padding: 1px 6px;
  cursor: help;
  white-space: nowrap;
}

/* The one additive total in a usage card. */
.kv-row.kv-row-total,
.kv-row.kv-row-total:hover {
  background: var(--surface-sunken);
  border-top: 1px solid var(--border);
}

.kv-row.kv-row-total > span:first-child {
  color: var(--text-muted);
  font-weight: 600;
}

.kv-row.kv-row-total > span:last-child {
  font-weight: 700;
  font-size: 14px;
}

.cost-row-subtotal {
  background: var(--surface-sunken);
  margin-top: 4px;
  font-weight: 600;
}

.cost-row-subtotal > span:first-child {
  color: var(--text-muted);
  font-weight: 600;
}

.cost-row-subtotal > span:last-child {
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
}

.cost-row-total {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-soft) 100%);
  border-top: 2px solid var(--accent-hover);
  margin-top: 8px;
  padding: 14px 16px;
  font-weight: 700;
}

.cost-row-total > span:first-child {
  color: var(--accent-hover);
  font-weight: 700;
}

.cost-row-total > span:last-child {
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-hover);
}

.drawer-footnote {
  margin: 8px 2px 0;
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.5;
}

/* ---- Company detail page ----------------------------------------------------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 14px;
}

.breadcrumb a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 550;
  padding: 3px 6px;
  margin-left: -6px;
  border-radius: var(--radius-sm);
  transition: background 0.12s ease;
}

.breadcrumb a:hover {
  background: var(--accent-soft);
  text-decoration: none;
}

.crumb-sep {
  color: var(--text-faint);
}

.crumb-current {
  color: var(--text);
  font-weight: 600;
}

.company-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  margin-bottom: 18px;
  border-top: 3px solid var(--accent);
}

.cv-avatar {
  width: 48px;
  height: 48px;
  font-size: 16px;
}

.company-header-text {
  min-width: 0;
  margin-right: auto;
}

.company-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-period {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

.cv-controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.cv-controls label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.cv-controls select,
.cv-controls input[type="date"] {
  font-size: 13px;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  min-width: 130px;
}

.cv-controls select:focus,
.cv-controls input[type="date"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.cv-tiles {
  margin-bottom: 18px;
}

.cv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}

.cv-section {
  padding: 20px;
  margin-bottom: 16px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-tint) 4%, transparent);
}

.cv-grid .cv-section {
  margin-bottom: 0;
}

.cv-section h3 {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
  border-bottom: 2px solid var(--accent-hover);
  padding-bottom: 10px;
}

.cv-agent-table {
  max-height: 420px;
  overflow-y: auto;
}

/* Collapsible full-width sections on the company page — match card sizing. */
.cv-collapse {
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}

.cv-collapse summary {
  padding: 15px 18px;
}

.cv-collapse .drawer-collapse-body {
  padding: 16px 18px;
}

/* ---- Collapsible drawer sections ------------------------------------------- */
.drawer-collapse {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  background: var(--surface);
  overflow: hidden;
}

.drawer-collapse summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  user-select: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.drawer-collapse summary::-webkit-details-marker {
  display: none;
}

.drawer-collapse summary::after {
  content: '▸';
  font-size: 12px;
  color: var(--text-faint);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.drawer-collapse[open] summary::after {
  transform: rotate(90deg);
}

.drawer-collapse summary:hover {
  background: var(--bg);
  color: var(--text);
}

.drawer-collapse[open] summary {
  border-bottom: 1px solid var(--border);
}

.drawer-collapse-body {
  padding: 13px 14px;
}

/* Two-up usage cards (Voice / Digital) */
.usage-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.usage-type-card {
  min-width: 0;
}

.usage-type-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
}

.drawer-empty {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* ---- Settings tab ------------------------------------------------------------ */
.settings-input {
  width: 140px;
  font: inherit;
  font-size: 13px;
  padding: 6px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
}

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

.rate-default-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.settings-clear {
  margin-left: 6px;
  padding: 4px 12px;
  font-size: 12px;
}

.epic-import-status {
  display: inline-block;
  margin-left: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
}

.epic-import-status.processing {
  background: var(--info-bg);
  color: var(--info);
}

.epic-import-status.success {
  background: var(--success-bg);
  color: var(--success);
}

.epic-import-status.error {
  background: var(--danger-bg);
  color: var(--danger);
}

#settings-table tbody td {
  padding-top: 9px;
  padding-bottom: 9px;
}

#settings-table thead th {
  cursor: default;
}

#settings-table thead th:hover {
  color: var(--text-muted);
  background: var(--surface-raised);
}

/* Drawer export buttons — anchors dressed as buttons so the browser treats
   them as plain downloads. */
.export-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.export-row a.btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
}

.export-row a.export-all {
  color: var(--text-muted);
  border-color: var(--border-strong);
}

.export-row a.export-all:hover {
  color: var(--text);
  background: var(--bg);
}

/* ---- Scrollbars (WebKit) --------------------------------------------------- */
.table-wrap::-webkit-scrollbar,
.columns-panel::-webkit-scrollbar,
.multiselect-panel::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.table-wrap::-webkit-scrollbar-thumb,
.columns-panel::-webkit-scrollbar-thumb,
.multiselect-panel::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 8px;
}

.table-wrap::-webkit-scrollbar-track,
.columns-panel::-webkit-scrollbar-track,
.multiselect-panel::-webkit-scrollbar-track {
  background: transparent;
}

/* ---- Loading overlay --------------------------------------------------- */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 96%, transparent), color-mix(in srgb, var(--brand-cyan) 96%, transparent));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.loader.hidden {
  pointer-events: none;
  opacity: 0;
}

.loader-content {
  text-align: center;
  color: var(--chrome-fg);
}

.loader-spinner {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  position: relative;
}

.loader-spinner svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--shadow-tint) 15%, transparent));
}

.loader-circle-bg {
  fill: none;
  stroke: var(--chrome-line-soft);
  stroke-width: 4;
}

.loader-circle-fg {
  fill: none;
  stroke: var(--surface);
  stroke-width: 4;
  stroke-dasharray: 141;
  stroke-dashoffset: 35;
  stroke-linecap: round;
  animation: loader-spin 1.2s linear infinite;
}

@keyframes loader-spin {
  0% {
    stroke-dashoffset: 35;
    transform: rotate(0deg);
  }
  100% {
    stroke-dashoffset: -106;
    transform: rotate(360deg);
  }
}

.loader-text {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.loader-label {
  animation: loader-pulse 1.5s ease-in-out infinite;
}

.loader-dots {
  display: inline-flex;
  gap: 3px;
}

.dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: loader-bounce 1.4s ease-in-out infinite;
}

.dot:nth-child(1) {
  animation-delay: 0s;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes loader-bounce {
  0%, 60%, 100% {
    opacity: 0.4;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-8px);
  }
}

@keyframes loader-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* ---- Inline loader (for tables/sections) --------------------------------- */
.loader-inline {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid color-mix(in srgb, var(--accent) 15%, transparent);
  border-top: 3px solid var(--brand-blue);
  border-radius: 50%;
  animation: loader-spin-inline 0.8s linear infinite;
}

@keyframes loader-spin-inline {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- Loading bar (non-blocking) -----------------------------------------
   Two signals, because one was not enough: a 3px top bar alone was routinely
   missed — it sits at the very edge of the viewport while the eye is on the
   content area, and on a re-navigation to an already-loaded page (Instances →
   Cost by Company) the skeletons are suppressed, so the bar WAS the only
   feedback that anything was happening. Now: a thicker sweeping top bar plus a
   centred status pill that is impossible to miss. Both are non-blocking —
   pointer-events stay off so the page underneath is still usable. */
.loader.loader-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: auto;
  background: none;
  display: block;
  pointer-events: none;
  z-index: 9999;
}

/* Track + moving segment as two pseudo-elements. A translated segment reads as
   genuine progress; the old full-width background shimmer just looked like a
   decorative gradient. */
.loader.loader-bar::before,
.loader.loader-bar::after {
  content: '';
  position: fixed;
  top: 0;
  height: 4px;
}

/* Coloured against the CHROME, not the page. The bar is pinned to the top of
   the viewport, so it always overlays the app bar — and the app bar is a blue
   brand gradient in light mode, which made a brand-blue/cyan bar effectively
   invisible there. `--chrome-*` are the tokens defined to stay legible on that
   surface in both themes. */
.loader.loader-bar::before {
  left: 0;
  right: 0;
  background: var(--chrome-line-soft);
}

.loader.loader-bar::after {
  left: 0;
  width: 38%;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--brand-cyan) 60%, var(--chrome-fg)) 22%,
    var(--chrome-fg) 50%,
    color-mix(in srgb, var(--brand-cyan) 60%, var(--chrome-fg)) 78%,
    transparent);
  box-shadow: 0 0 12px 1px color-mix(in srgb, var(--chrome-fg) 55%, transparent);
  animation: loader-sweep 1.15s ease-in-out infinite;
}

@keyframes loader-sweep {
  0% { transform: translateX(-105%); }
  100% { transform: translateX(365%); }
}

/* The status pill. The markup for this already existed but bar mode hid it. */
.loader.loader-bar .loader-content {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 9px 18px 9px 13px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--shadow-tint) 22%, transparent);
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  animation: loader-pill-in 0.22s ease-out;
}

@keyframes loader-pill-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Pill-sized spinner. The base rules size this for the old full-screen overlay
   (80px, on a brand gradient), so both the box and the strokes need remapping
   onto a raised surface. */
.loader.loader-bar .loader-spinner {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 18px;
}

.loader.loader-bar .loader-spinner svg { filter: none; }

.loader.loader-bar .loader-circle-bg {
  stroke: color-mix(in srgb, var(--accent) 25%, transparent);
  stroke-width: 10;
}

.loader.loader-bar .loader-circle-fg {
  stroke: var(--accent);
  stroke-width: 10;
}

.loader.loader-bar .loader-text {
  font-size: 13px;
  font-weight: 600;
}

/* The base bounce lifts 8px, which throws the dots clear of a 13px pill. */
.loader.loader-bar .dot {
  animation-name: loader-bounce-sm;
}

@keyframes loader-bounce-sm {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.loader.loader-bar.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

/* `hidden` only fades the pill; without this the sweep and the bounce keep
   running behind an invisible element, burning frames on every idle page. */
.loader.loader-bar.hidden::after,
.loader.loader-bar.hidden .loader-circle-fg,
.loader.loader-bar.hidden .dot,
.loader.loader-bar.hidden .loader-label {
  animation: none;
}

/* Reduced motion: the global rule above collapses every animation, which would
   freeze the sweeping segment mid-track and read as a stalled bar. Show a
   static full-width bar instead — still an unmistakable busy signal. */
@media (prefers-reduced-motion: reduce) {
  .loader.loader-bar::after {
    width: auto;
    right: 0;
    transform: none;
    background: var(--chrome-fg);
  }
}

/* ---- Monthly Summary Cards ----------------------------------------- */
.monthly-cost-card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  transition: all 0.2s ease;
}

.monthly-cost-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 10%, transparent);
}

.monthly-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}

.monthly-card-month {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.monthly-card-total {
  font-size: 24px;
  font-weight: 700;
  color: var(--success);
}

.cost-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.cost-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}

.cost-item-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cost-item-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.cost-item.zero .cost-item-value {
  color: var(--border-strong);
}

.monthly-card-action {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.monthly-card-action .btn {
  flex: 1;
}

.monthly-summary-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 20px;
  color: var(--text-muted);
}


/* ---- Professional Dashboard Styling ------------------------------------------------- */

.dashboard-hero {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 50%, var(--accent-hover) 100%);
  color: var(--chrome-fg);
  padding: 60px 40px;
  border-radius: 16px;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--accent) 20%, transparent);
}

.dashboard-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-cyan) 20%, transparent) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-title-section {
  flex: 1;
}

.dashboard-hero-title {
  font-size: 42px;
  font-weight: 800;
  margin: 0 0 16px 0;
  letter-spacing: -1px;
  line-height: 1.2;
}

.dashboard-hero-subtitle {
  font-size: 16px;
  font-weight: 300;
  margin: 0;
  opacity: 0.95;
  max-width: 600px;
  line-height: 1.6;
}

.hero-badge {
  background: var(--chrome-line-soft);
  backdrop-filter: blur(10px);
  padding: 16px 28px;
  border-radius: 12px;
  border: 1px solid var(--chrome-line-soft);
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 15px;
}

.badge-icon {
  font-size: 24px;
}

.dashboard-control-section {
  background: var(--surface);
  padding: 32px;
  border-radius: 14px;
  margin-bottom: 40px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 16px color-mix(in srgb, var(--shadow-tint) 5%, transparent);
}

.control-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.month-selector-group {
  max-width: 280px;
}

.selector-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.selector-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.selector-input-wrapper {
  position: relative;
}

.dashboard-month-selector {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  color: var(--text);
  transition: all 0.3s ease;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005ff9' stroke-width='2.5'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}

.dashboard-month-selector:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent);
}

.dashboard-month-selector:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}

.dashboard-content-section {
  max-width: none;
  margin: 0;
}

.dashboard-card-container {
  display: grid;
  gap: 32px;
}

.dashboard-card-container > div {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 2px 16px color-mix(in srgb, var(--shadow-tint) 6%, transparent);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-card-container > div:hover {
  box-shadow: 0 12px 40px color-mix(in srgb, var(--accent) 15%, transparent);
  transform: translateY(-4px);
}

.dashboard-card-container .panel-head {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-soft) 100%);
  border-bottom: 1px solid var(--border);
  padding: 32px;
}

.dashboard-card-container .panel-head-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard-card-container .panel-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  margin: 0;
  letter-spacing: -0.5px;
}

.dashboard-card-container .panel-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  font-weight: 500;
}

.dashboard-card-container .table-wrap {
  padding: 0;
}

.dashboard-card-container table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
}

.dashboard-card-container table thead {
  background: var(--surface-raised);
}

.dashboard-card-container table th {
  padding: 16px 32px;
  text-align: left;
  font-weight: 700;
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  border-bottom: 2px solid var(--border);
}

.dashboard-card-container table tbody tr {
  border-bottom: 1px solid var(--surface-sunken);
  transition: background-color 0.2s ease;
}

.dashboard-card-container table tbody tr:hover {
  background-color: var(--surface-raised);
}

.dashboard-card-container table td {
  padding: 18px 32px;
  color: var(--text-muted);
}

.dashboard-card-container table td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--accent);
}

.dashboard-card-container table tbody tr:last-child {
  border-top: 2px solid var(--border);
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-soft) 100%);
  font-weight: 700;
  font-size: 15px;
}

.dashboard-card-container table tbody tr:last-child td {
  padding: 20px 32px;
  color: var(--accent);
}

.dashboard-card-container > div > div:last-child {
  padding: 32px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  gap: 12px;
}

.dashboard-card-container .btn-details {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: var(--chrome-fg);
  border: none;
  padding: 14px 32px;
  border-radius: var(--radius-md);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 20%, transparent);
}

.dashboard-card-container .btn-details:hover {
  background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent-hover) 100%);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent);
  transform: translateY(-2px);
}

.dashboard-card-container .btn-details:active {
  transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
  .dashboard-hero {
    padding: 40px 24px;
  }

  .hero-content {
    flex-direction: column;
    gap: 24px;
  }

  .dashboard-hero-title {
    font-size: 32px;
  }

  .dashboard-month-selector {
    width: 100%;
  }

  .month-selector-group {
    max-width: 100%;
  }

  .dashboard-card-container table th,
  .dashboard-card-container table td {
    padding: 12px 16px;
    font-size: 13px;
  }
}


/* ========================================
   Enhanced Dashboard Styling (Professional)
   ======================================== */

#dashboard-page {
  max-width: 1400px;
  margin: 0 auto;
}

/* Executive dashboard */
.dash { display: flex; flex-direction: column; gap: 16px; padding: 0; }
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dash-kpi-sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.dash-card { padding: 18px 20px; }
.dash-card-title { margin: 0 0 14px; font-size: 15px; font-weight: 700; }
.dash-card-sub { font-size: 12px; font-weight: 500; color: var(--text-faint); margin-left: 6px; }
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dash-card-head .dash-card-title { margin: 0; }
.dash-toggle { display: inline-flex; background: var(--neutral-bg); border-radius: var(--radius-sm); padding: 2px; }
.dash-toggle-btn { border: none; background: none; padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--text-muted); border-radius: 4px; cursor: pointer; transition: background 0.12s, color 0.12s; }
.dash-toggle-btn.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.dash-top { display: flex; flex-direction: column; gap: 4px; }
.dash-top-row { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: none; padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; transition: background 0.12s; }
.dash-top-row:hover { background: var(--accent-soft); }
.dash-top-name { flex: 0 0 28%; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-top-bar { flex: 1 1 auto; min-width: 56px; height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; }
.dash-top-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
/* FIXED width, not auto. With `flex: 0 0 auto` a longer money string ("$50,050.78"
   vs "$936.20") takes more room and shrinks the flex:1 bar beside it, so rows
   ended up with 45px vs 58px tracks and the bar lengths were no longer
   comparable — the one job a bar chart has. Tabular figures keep the digits
   aligned inside the fixed slot. */
.dash-top-cost {
  flex: 0 0 78px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dash-unknown { color: var(--text-faint); }
.dash-span { width: 100%; }
/* Two-up rows: share donuts, and the insight pair (waterfall + unit cost). */
.dash-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
/* KPI sparklines: inherit the tile's ink so they work on the accent tile too. */
.dash-spark { display: block; width: 110px; height: 30px; margin-top: 8px; color: inherit; }
/* Donut share cards */
.dash-donut-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dash-donut { width: 176px; height: 176px; flex: 0 0 auto; }
.dash-donut-gap { stroke: var(--surface); stroke-width: 2.5; }
.dash-donut-seg { transition: opacity 0.15s; }
.dash-donut-seg:hover { opacity: 0.82; }
.dash-donut-total { font-size: 19px; font-weight: 700; fill: var(--text); font-variant-numeric: tabular-nums; }
.dash-donut-sub { font-size: 11px; fill: var(--text-faint); }
.dash-donut-legend { display: flex; flex-direction: column; gap: 7px; flex: 1 1 180px; }
/* Waterfall connectors + hover guide + tooltip */
.dash-wf-conn { stroke: var(--viz-axis); stroke-dasharray: 3 3; stroke-width: 1; }
.dash-guide-band { fill: var(--viz-axis); fill-opacity: 0.14; opacity: 0; pointer-events: none; transition: x 0.08s; }
.dash-col-seg { transition: opacity 0.12s; }
.dash-col-seg:hover { opacity: 0.85; }
.dash-hover { cursor: crosshair; }
.dash-line-label { font-weight: 600; }
#dash-tip { position: fixed; display: none; z-index: 300; min-width: 170px; max-width: 260px; padding: 10px 12px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); font-size: 12.5px; pointer-events: none; }
#dash-tip .dash-tip-title { font-weight: 700; margin-bottom: 6px; }
#dash-tip .dash-tip-row { display: flex; align-items: center; gap: 7px; padding: 1.5px 0; font-variant-numeric: tabular-nums; }
#dash-tip .dash-tip-row strong { margin-left: auto; font-weight: 600; }
#dash-tip .dash-tip-total { border-top: 1px solid var(--border); margin-top: 5px; padding-top: 5px; font-weight: 600; }

/* Dashboard header + instance filter */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-head-title { display: flex; align-items: baseline; gap: 10px; }
.dash-head-title h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.dash-head-sub { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.dash-filter { display: flex; align-items: center; gap: 10px; }
.dash-filter-label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.dash-filter-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; background: var(--neutral-bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.dash-filter-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  padding: 6px 13px; border-radius: 999px;
  transition: background 0.14s, color 0.14s, box-shadow 0.14s;
}
.dash-filter-pill:hover { color: var(--text); }
.dash-filter-pill.active { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-tint) 14%, transparent); }
.dash-filter-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* Cost share by instance */
.dash-share-bar { display: flex; height: 22px; border-radius: 7px; overflow: hidden; background: var(--neutral-bg); }
.dash-share-seg { height: 100%; transition: width 0.3s ease; }
.dash-share-seg:not(:last-child) { border-right: 2px solid var(--surface); }
.dash-share-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.dash-share-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text); }
.dash-share-item strong { font-variant-numeric: tabular-nums; }

/* Top-companies rank badge */
.dash-top-rank { flex: 0 0 18px; font-size: 11px; font-weight: 700; color: var(--text-faint); text-align: center; font-variant-numeric: tabular-nums; }

@media (max-width: 1000px) {
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-head { align-items: flex-start; }
}

/* Anomalies Report (leadership-only, embedded generated report) */
.anomalies-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 12px; }
.anomalies-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.anomalies-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-muted); }
.anomalies-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.anomalies-frame {
  width: 100%; height: calc(100vh - 200px); min-height: 480px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}

/* Persistent primary navigation (global bar under the app header) */
.main-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.main-nav-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  gap: 2px;
}
.main-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.main-nav-link svg { display: block; opacity: 0.85; }
.main-nav-link:hover { color: var(--text); }
.main-nav-link:hover svg { opacity: 1; }
.main-nav-link.active { color: var(--accent); border-bottom-color: var(--accent); }
.main-nav-link.active svg { opacity: 1; }
/* Settings sits inline, right after Financial Overview */

.dashboard-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  padding: 0;
}

.dashboard-nav-link {
  padding: 16px 24px;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
  font-weight: 500;
}

.dashboard-nav-link:hover {
  color: var(--text);
  background-color: var(--surface-raised);
}

.dashboard-nav-link.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.dashboard-content-section {
  padding: 0;
}

.dashboard-control-section {
  background: var(--surface);
  padding: 24px 32px;
  border-radius: 12px;
  margin-bottom: 32px;
  border: 1px solid var(--accent-soft);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 8%, transparent);
  transition: box-shadow 0.3s ease;
}

.dashboard-control-section:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 12%, transparent);
}

.control-inner {
  max-width: 100%;
  margin: 0 auto;
}

.month-selector-group {
  max-width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.selector-inner {
  flex: 1;
  max-width: 320px;
}

.selector-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.selector-input-wrapper {
  position: relative;
}

.dashboard-month-selector {
  width: 100%;
  padding: 12px 16px;
  padding-right: 40px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background-color: var(--accent-on);
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231f2937' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.dashboard-month-selector:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

.dashboard-month-selector:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
}

.dashboard-content-section {
  animation: fadeIn 0.4s ease;
}

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

.dashboard-card-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.monthly-cost-card {
  background: var(--surface);
  border-radius: 14px;
  padding: 32px;
  border: 1px solid var(--accent-soft);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 8%, transparent);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: slideUp 0.4s ease;
}

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

.monthly-cost-card:hover {
  box-shadow: 0 8px 32px color-mix(in srgb, var(--accent) 15%, transparent);
  transform: translateY(-2px);
  border-color: var(--accent);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--accent-soft);
}

.card-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
}

.card-total-cost {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.total-cost-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.total-cost-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.cost-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}

.cost-item {
  background: linear-gradient(135deg, var(--surface-raised) 0%, var(--surface-sunken) 100%);
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cost-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cost-item:hover {
  border-color: var(--accent-soft);
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-soft) 100%);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 10%, transparent);
}

.cost-item:hover::before {
  opacity: 1;
}

.cost-item-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.cost-item-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.card-footer {
  display: flex;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--accent-soft);
}

.drill-down-btn {
  flex: 1;
  padding: 12px 20px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: var(--chrome-fg);
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 20%, transparent);
}

.drill-down-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 30%, transparent);
  background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent-hover) 100%);
}

.drill-down-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Responsive Design */
@media (max-width: 768px) {
  #dashboard-page {
    padding: 40px 16px;
  }

  .dashboard-control-section {
    padding: 16px 20px;
    margin-bottom: 24px;
  }

  .month-selector-group {
    flex-direction: column;
    gap: 12px;
  }

  .selector-inner {
    max-width: 100%;
  }

  .monthly-cost-card {
    padding: 20px;
  }

  .card-header {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
  }

  .card-total-cost {
    align-items: flex-start;
  }

  .total-cost-value {
    font-size: 24px;
  }

  .cost-breakdown {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
  }

  .cost-item-value {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  #dashboard-page {
    padding: 24px 12px;
  }

  .monthly-cost-card {
    padding: 16px;
  }

  .card-title {
    font-size: 20px;
  }

  .total-cost-value {
    font-size: 20px;
  }

  .cost-breakdown {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   Current Month Highlighting
   ======================================== */

.monthly-cost-card.current-month {
  border-color: var(--accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 2%, transparent) 0%, color-mix(in srgb, var(--accent-hover) 2%, transparent) 100%);
  position: relative;
}

.monthly-cost-card.current-month::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover));
  border-radius: 14px 14px 0 0;
}

.current-month-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--chrome-fg);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 8px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
  animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
  0%, 100% {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  50% {
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 40%, transparent);
  }
}

/* ========================================
   Professional Dashboard Table Styling
   ======================================== */

#dashboard-page {
  padding: 4px 0 24px;
  max-width: none;
  margin: 0;
  animation: fadeIn 0.5s ease;
}

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

.dashboard-table-wrapper {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 4px 24px color-mix(in srgb, var(--accent) 8%, transparent);
  overflow: hidden;
  border: 1px solid var(--accent-soft);
  animation: slideUp 0.4s ease;
}

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

.dashboard-cost-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

/* Table Header */
.dashboard-cost-table thead {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: var(--chrome-fg);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.dashboard-cost-table thead th {
  padding: 20px 16px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--accent-hover);
}

.dashboard-cost-table thead th.col-service {
  text-align: left;
  border-right: 2px solid var(--chrome-line-soft);
}

.dashboard-cost-table thead th.current-month-col {
  background: linear-gradient(135deg, var(--chrome-line-soft) 0%, var(--chrome-fill) 100%);
  font-weight: 800;
  color: var(--accent-on);
}

/* Table Body */
.dashboard-cost-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: all 0.3s ease;
}

.dashboard-cost-table tbody tr:hover {
  background-color: var(--surface-raised);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 5%, transparent);
}

.dashboard-cost-table tbody tr.even-row {
  background-color: var(--accent-on);
}

.dashboard-cost-table tbody tr.odd-row {
  background-color: var(--surface-raised);
}

/* Service Name Column */
.dashboard-cost-table td.col-service {
  padding: 18px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--text);
  border-right: 2px solid var(--border);
  background-color: inherit;
}

/* Cost Value Columns */
.dashboard-cost-table td.col-month {
  padding: 18px 16px;
  text-align: right;
  color: var(--text-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.dashboard-cost-table td.current-month-col {
  background-color: color-mix(in srgb, var(--accent) 3%, transparent);
  font-weight: 700;
  color: var(--accent);
}

.dashboard-cost-table tbody tr:hover td.current-month-col {
  background-color: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Total Row */
.dashboard-cost-table tr.total-row {
  background: linear-gradient(90deg, var(--accent-soft) 0%, var(--surface-raised) 100%);
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  font-weight: 700;
  font-size: 15px;
}

.dashboard-cost-table tr.total-row td {
  padding: 20px 16px;
  color: var(--text);
}

.dashboard-cost-table tr.total-row td.col-service {
  border-right: 2px solid var(--accent);
  color: var(--accent);
}

.dashboard-cost-table tr.total-row td.col-month {
  color: var(--text);
}

.dashboard-cost-table tr.total-row td.current-month-col {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, transparent) 0%, color-mix(in srgb, var(--accent) 8%, transparent) 100%);
  color: var(--accent);
}

/* Instances Table — compact, professional */
.instances-table-container {
  padding: 4px 0 24px;
  max-width: none;
  margin: 0;
}

.instances-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.instances-table thead {
  background: var(--bg);
}

.instances-table thead th {
  padding: 11px 16px;
  text-align: left;
  font-weight: 650;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.instances-table thead th.num {
  text-align: right;
}

.instances-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.15s ease;
}

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

.instances-table tbody tr:hover {
  background-color: var(--accent-soft);
}

/* Instances without cost data yet — quietly de-emphasized */
.instances-table tr.instance-no-data td { color: var(--text-faint); }
.instances-table tr.instance-no-data:hover { background-color: var(--bg); }
.instance-nodata-tag { font-size: 12px; color: var(--text-faint); }

.instances-table td {
  padding: 11px 16px;
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}

.instances-table td.num {
  text-align: right;
}

.instances-table .instance-name-cell {
  font-weight: 600;
}

/* Sessions served, under the month's cost. Secondary to the money figure, but
   tabular so the counts stay comparable down the column. */
.instances-table .instance-sessions {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-faint);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.instance-last-sync {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-faint);
  white-space: nowrap;
}
/* Feed freshness: fresh is quiet, a lagging feed is amber, badly stale is red. */
.instance-last-sync.sync-ok strong { color: var(--text-muted); }
.instance-last-sync.sync-stale { color: var(--warn); }
.instance-last-sync.sync-stale strong { color: var(--warn); font-weight: 700; }
.instance-last-sync.sync-bad { color: var(--danger); }
.instance-last-sync.sync-bad strong { color: var(--danger); font-weight: 700; }
.instance-last-sync .sync-warn { font-weight: 700; }

.instance-link {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.15s ease;
  cursor: pointer;
}

.instance-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.instance-link.disabled {
  color: var(--text-faint);
  cursor: default;
}

.instance-link.disabled:hover {
  text-decoration: none;
}

.instances-table .cost-value {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.instances-table .cost-unknown {
  color: var(--text-faint);
}

.instances-table .actions-col {
  text-align: right;
  width: 1%;
}

.instance-action-btn {
  padding: 5px 11px;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.instance-action-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* Instances Page Header — compact */
.instances-header {
  padding: 8px 0 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: none;
  margin: 0;
}

.instances-header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.instances-subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}

/* Instance Dashboard Header */
.instance-dashboard-header {
  padding: 20px 40px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.instance-dashboard-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.instance-dashboard-info h2 {
  margin: 0;
  font-size: 24px;
  color: var(--text);
}

.back-to-instances {
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.back-to-instances:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 1024px) {
  #dashboard-page {
    padding: 40px 16px;
    max-width: 100%;
  }

  .dashboard-cost-table thead th,
  .dashboard-cost-table td {
    padding: 14px 12px;
    font-size: 13px;
  }

  .dashboard-cost-table thead th.col-service {
    font-size: 12px;
  }

  .dashboard-cost-table tr.total-row td {
    padding: 16px 12px;
  }
}

@media (max-width: 768px) {
  #dashboard-page {
    padding: 24px 12px;
  }

  .dashboard-cost-table {
    font-size: 12px;
  }

  .dashboard-cost-table thead th,
  .dashboard-cost-table td {
    padding: 12px 8px;
  }

  .dashboard-cost-table thead th {
    font-size: 11px;
  }

  .dashboard-cost-table td.col-service {
    font-size: 13px;
    font-weight: 600;
  }

  .dashboard-cost-table tr.total-row td {
    padding: 14px 8px;
  }
}

/* Remove old styles that are no longer needed */
.dashboard-control-section,
.month-selector-group,
.selector-inner,
.selector-label,
.selector-input-wrapper,
.dashboard-month-selector,
.dashboard-card-container,
.monthly-cost-card,
.card-header,
.card-title,
.card-total-cost,
.total-cost-label,
.total-cost-value,
.cost-breakdown,
.cost-item,
.cost-item-label,
.cost-item-value,
.card-footer,
.drill-down-btn,
.current-month-badge,
.monthly-cost-card.current-month {
  /* Styling removed - using table layout now */
}


/* ========================================
   Dashboard Drill-Down Button
   ======================================== */

.dashboard-button-container {
  display: flex;
  justify-content: center;
  padding: 24px 16px;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--accent) 2%, transparent) 100%);
  border-top: 1px solid var(--border);
}

.dashboard-drill-down-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
  color: var(--chrome-fg);
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 25%, transparent);
  white-space: nowrap;
}

.dashboard-drill-down-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px color-mix(in srgb, var(--accent) 35%, transparent);
  background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent-hover) 100%);
}

.dashboard-drill-down-btn:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 25%, transparent);
}

.dashboard-drill-down-btn span:first-child {
  font-size: 18px;
  line-height: 1;
}

.dashboard-drill-down-btn span:last-child {
  font-weight: 700;
}

/* Responsive Design */
@media (max-width: 768px) {
  .dashboard-drill-down-btn {
    padding: 12px 24px;
    font-size: 13px;
    gap: 8px;
  }

  .dashboard-drill-down-btn span:first-child {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .dashboard-button-container {
    padding: 16px 12px;
  }

  .dashboard-drill-down-btn {
    padding: 12px 20px;
    font-size: 12px;
    flex-wrap: wrap;
    max-width: 100%;
  }

  .dashboard-drill-down-btn span:last-child {
    flex-basis: 100%;
  }
}


/* ===== Authentication overlay + login card ================================= */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent-hover) 55%, var(--accent) 100%);
  padding: 24px;
}
.auth-overlay.hidden { display: none; }

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 24px 60px var(--scrim);
  padding: 32px 32px 28px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--surface-sunken);
}
.auth-logo { height: 26px; width: auto; filter: brightness(0) saturate(100%) invert(23%) sepia(97%) saturate(2000%) hue-rotate(210deg); }
.auth-brand-title { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }

.auth-step { display: flex; flex-direction: column; }
.auth-step.hidden { display: none; }

.auth-title { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: var(--text); }
.auth-sub { margin: 0 0 20px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.auth-sub strong { color: var(--text); }

.auth-label {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px;
}
.auth-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  font-size: 15px;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.auth-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.auth-input-code {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 8px;
  font-variant-numeric: tabular-nums;
}

.auth-error {
  min-height: 18px;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--danger);
  line-height: 1.4;
}

.auth-btn {
  margin-top: 16px;
  width: 100%;
  padding: 12px 16px;
  background: var(--accent);
  color: var(--accent-on);
  border: none;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.auth-btn:hover:not(:disabled) { background: var(--accent-hover); }
.auth-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.auth-links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.auth-link {
  background: none; border: none; padding: 0;
  color: var(--accent); font-size: 13px; font-weight: 500; cursor: pointer;
}
.auth-link:hover { text-decoration: underline; }


.auth-spinner {
  width: 34px; height: 34px; margin: 8px auto 16px;
  border: 3px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: auth-spin 0.8s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
#auth-checking { align-items: center; text-align: center; }

/* ===== Account menu (header) ============================================== */
.user-menu { position: relative; display: inline-flex; align-items: center; }
.user-menu.hidden { display: none; }

.user-avatar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  border-radius: 50%;
}
.user-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--chrome-fill);
  color: var(--chrome-fg); font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  border: 1px solid var(--chrome-line);
  transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
.user-avatar-btn:hover .user-avatar { background: var(--chrome-line); }
.user-avatar-btn:focus-visible { outline: none; }
.user-avatar-btn:focus-visible .user-avatar,
.user-avatar-btn[aria-expanded="true"] .user-avatar {
  background: var(--chrome-line);
  border-color: var(--chrome-fg);
  box-shadow: 0 0 0 3px var(--chrome-fill-hover);
}

/* Push the settings + account cluster to the far right of the header
   (previously the instance chip carried margin-left:auto). */
/* Push the account menu to the far right of the header. */
.user-menu { margin-left: auto; }

/* Persistent Financial Overview link in the app bar (Leadership + Admin) */
.app-bar-link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--chrome-fg);
  text-decoration: none;
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  background: var(--chrome-fill);
  border: 1px solid var(--chrome-line-soft);
  white-space: nowrap;
  transition: background 0.15s;
}
.app-bar-link:hover { background: var(--chrome-fill-hover); }
.app-bar-link.hidden { display: none; }

.user-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 268px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 48px -12px color-mix(in srgb, var(--shadow-tint) 28%, transparent), 0 4px 12px color-mix(in srgb, var(--shadow-tint) 8%, transparent);
  padding: 7px;
  z-index: 200;
  transform-origin: top right;
  animation: userDropdownIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes userDropdownIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.user-dropdown.hidden { display: none; }

/* little caret pointing at the avatar */
.user-dropdown::before {
  content: '';
  position: absolute;
  top: -6px; right: 13px;
  width: 11px; height: 11px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-top-left-radius: 3px;
  transform: rotate(45deg);
}

.user-dropdown-head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 12px 14px;
  margin: -7px -7px 4px;                       /* bleed to the card edges */
  border-radius: 13px 13px 0 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--accent) 2%, transparent));
  border-bottom: 1px solid var(--bg);
}
.user-avatar-lg {
  width: 42px; height: 42px; font-size: 15px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  border-color: transparent;
  box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--accent) 50%, transparent);
}
.user-dropdown-id { display: flex; flex-direction: column; min-width: 0; }
.user-dropdown-name {
  font-size: 13.5px; font-weight: 700; color: var(--text); text-transform: capitalize;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-dropdown-email {
  font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-dropdown-setting { padding: 11px 11px 12px; }
.user-dropdown-setting + .user-dropdown-setting,
.user-dropdown-setting + .user-dropdown-item { border-top: 1px solid var(--surface-sunken); }
.user-dropdown-setting-label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px;
}
.calc-mode-toggle {
  display: flex; gap: 3px; background: var(--neutral-bg);
  border: 1px solid var(--border); border-radius: 9px; padding: 3px;
}
.calc-mode-opt {
  flex: 1; border: none; background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  padding: 6px 8px; border-radius: 6px; transition: background 0.14s, color 0.14s, box-shadow 0.14s;
}
.calc-mode-opt:hover:not(.active):not(:disabled) { color: var(--text); }
.calc-mode-opt.active { background: var(--surface); color: var(--accent); box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-tint) 14%, transparent); }
.calc-mode-opt:disabled { opacity: 0.6; cursor: default; }
.user-dropdown-setting-hint { display: block; margin-top: 7px; font-size: 11px; line-height: 1.45; color: var(--text-faint); }

/* Release-updates: label + pill on one line, hint full-width beneath */
.user-dropdown-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.user-dropdown-row .user-dropdown-setting-label { margin-bottom: 0; white-space: nowrap; }
#notes-sub-setting .user-dropdown-setting-hint { margin-top: 8px; }
.notes-sub-btn {
  flex: none; white-space: nowrap;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  font-size: 12px; font-weight: 600;
  background: var(--accent); color: var(--accent-on); border: 1px solid var(--accent);
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.notes-sub-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.notes-sub-btn:disabled { opacity: 0.6; cursor: default; }
.notes-sub-btn.is-subscribed {
  background: var(--success-bg); color: var(--success); border-color: var(--success-bg);
}
.notes-sub-btn.is-subscribed::before { content: '✓ '; }
.notes-sub-btn.is-subscribed:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bg); }

.user-dropdown-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 10px 11px; background: none; border: none; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left;
  transition: background 0.12s;
}
.user-dropdown-item:hover { background: var(--surface-sunken); }
.user-dropdown-item-danger { color: var(--danger); }
.user-dropdown-item-danger:hover { background: var(--danger-bg); }

/* ===== Week-over-week avg AI session cost (Company Insight) =============== */
.weekly-container { margin-top: 2px; }
.cv-weekly-empty { color: var(--text-muted); font-size: 13px; padding: 12px 0; }

.wow-chart-wrap { width: 100%; overflow-x: auto; }
/* Match .fin-chart: scale into the card instead of leaving ~45% of a wide
   panel empty beside a 760px chart. */
.wow-chart { width: 100%; height: auto; max-width: 1080px; display: block; }
.wow-grid { stroke: var(--surface-sunken); stroke-width: 1; }
.wow-ylabel { fill: var(--text-faint); font-size: 10px; text-anchor: end; font-variant-numeric: tabular-nums; }
.wow-xlabel { fill: var(--text-muted); font-size: 10px; text-anchor: middle; }
.wow-vlabel { fill: var(--text); font-size: 10px; text-anchor: middle; font-weight: 600; font-variant-numeric: tabular-nums; }
.wow-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wow-pt circle { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; transition: r 0.12s ease; cursor: pointer; }
.wow-pt:hover circle { r: 5.5px; } /* needs a unit: `r` takes a <length>, and unitless is invalid (only 0 is) */

.wow-table { margin-top: 14px; }
.wow-table th:first-child, .wow-table td:first-child { text-align: left; }
.wow-up { color: var(--danger); font-weight: 600; }    /* cost rose = worse */
.wow-down { color: var(--success); font-weight: 600; }   /* cost fell = better */
.wow-flat { color: var(--text-faint); }

/* Multi-series legend for the weekly AI cost chart */
.wow-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 2px 0 6px; }
.wow-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.wow-leg-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
/* Weekly meta bar: calculation-basis badge, data vintage, anomaly note */
.wow-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.wow-basis {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 3px 10px;
}
.wow-asof { font-size: 11.5px; color: var(--text-faint); }
.wow-warnnote { font-size: 11.5px; color: var(--warn); font-weight: 600; }
.wow-flag { color: var(--warn); cursor: help; font-size: 12px; }
.wow-dur-sec { color: var(--text-faint); font-size: 11px; }

.wow-more-wrap { display: flex; justify-content: center; margin-top: 8px; }
.wow-more-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--accent);
  font-size: 12.5px; font-weight: 600; padding: 6px 16px; border-radius: 999px; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.wow-more-btn:hover { background: var(--accent-soft); border-color: var(--accent); }

/* ---- Usage by Agent (on-demand + full screen) --------------------------- */
.muted { color: var(--text-muted); }

/* Loading spinner shown while agent usage is fetched. */
.agent-usage-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 4px;
  color: var(--text-muted);
  font-size: 13px;
}
.mini-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent, var(--viz-5));
  border-radius: 50%;
  animation: mini-spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes mini-spin { to { transform: rotate(360deg); } }

.agent-usage-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.agent-usage-table td:not(.text),
.agent-usage-table th:not(.text) { text-align: right; white-space: nowrap; }
.agent-usage-table th.agent-sortable { cursor: pointer; user-select: none; }
.agent-usage-table th.agent-sortable:hover { color: var(--text); }

/* Pagination */
.agent-usage-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.agent-usage-pager-info { font-size: 12px; color: var(--text-muted); }
.agent-usage-pager-btns { display: flex; gap: 8px; }
.agent-usage-pager-btns button[disabled] { opacity: 0.45; cursor: default; }

/* Full-screen modal (≈15% larger than the standard 960px popup → 1104px). */
.agent-usage-fs-overlay {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 24px;
}
.agent-usage-fs-panel {
  background: var(--surface, var(--surface));
  color: inherit;
  width: min(1104px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--shadow-tint) 35%, transparent);
  overflow: hidden;
}
.agent-usage-fs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, var(--border));
}
.agent-usage-fs-head h3 { margin: 0; }
.agent-usage-fs-head-actions { display: flex; gap: 8px; }
.agent-usage-fs-body { padding: 16px 20px; overflow: auto; }

/* Column chooser / reorder panel */
.agent-usage-fs-columns {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.agent-usage-cols-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.agent-usage-cols-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px 18px;
}
.agent-usage-col-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.agent-usage-col-item label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.agent-usage-col-move { display: inline-flex; gap: 4px; }
.agent-usage-col-move button {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-sm);
  width: 22px;
  height: 22px;
  line-height: 1;
  cursor: pointer;
}
.agent-usage-col-move button[disabled] { opacity: 0.35; cursor: default; }

/* ---- Session Cost Lookup (header button + right drawer) ------------------ */
/* Prominent button that sits inline in the company header (no extra row, so it
   doesn't add page height). Header wraps only if the row runs out of space. */
.company-header { flex-wrap: wrap; }
/* Simple, clean button — flat accent, no gradient/sheen. Sits at the far right
   of the breadcrumb row (top-right, under the profile picture). */
/* Right-hand vertical icon rail — a fixed strip that holds Company Insight
   tool buttons and grows downward as more are added. */
/* Reserve room on the right so page content never sits under the rail, only
   while the rail is visible (Company Insight / Cost by Company). */
body.cv-rail-visible .page { padding-right: 74px; }
.cv-icon-rail {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--shadow-tint) 12%, transparent);
}
/* On a phone a fixed vertical strip would claim ~13% of the viewport width for
   the reserved gutter alone, squeezing the tables it sits beside. Lay it along
   the bottom instead (the usual mobile position for tool actions) and move the
   reserved space from the right edge to the bottom so nothing hides under it. */
@media (max-width: 600px) {
  body.cv-rail-visible .page { padding-right: var(--sp-4); padding-bottom: 68px; }
  .cv-icon-rail {
    right: 50%;
    top: auto;
    bottom: 12px;
    transform: translateX(50%);
    flex-direction: row;
    gap: 2px;
    padding: 5px 6px;
    max-width: calc(100vw - 24px);
    overflow-x: auto;
  }
}

/* Material-style round icon button inside the rail (small). */
.cv-rail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cv-rail-btn:hover { background: var(--accent-soft); color: var(--accent); }
.cv-rail-btn:active { background: var(--accent-soft); }
.cv-rail-btn:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.cv-rail-btn svg { width: 16px; height: 16px; fill: currentColor; }
.cv-session-fab-icon { font-size: 13px; line-height: 1; opacity: 0.9; }

/* Wider drawer for the breakdown. */
.cv-session-drawer { width: 640px; max-width: 96vw; }
.cv-session-drawer-header { align-items: center; }
.cv-session-drawer-header h3 { display: inline-flex; align-items: center; gap: 8px; }

/* Input form */
.cv-session-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.cv-session-label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cv-session-input-row { display: flex; gap: 8px; }
.cv-session-input {
  flex: 1;
  min-width: 0;
  padding: 10px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.cv-session-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cv-session-input-row .btn { white-space: nowrap; }
.cv-session-result { margin-top: 4px; }
.cv-session-notfound { color: var(--text-muted); font-size: 13px; padding: 8px 0; }

/* Empty state */
.cv-session-empty { text-align: center; color: var(--text-muted); padding: 32px 16px; }
.cv-session-empty-icon { font-size: 34px; display: block; margin-bottom: 10px; opacity: 0.8; }
.cv-session-empty p { margin: 0; font-size: 13px; }

/* Hero total */
.cvs-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent-soft), var(--bg));
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
.cvs-hero-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.cvs-hero-value { font-size: 28px; font-weight: 750; letter-spacing: -0.02em; color: var(--text); margin-top: 2px; }
.cvs-badges { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.cvs-badge { font-size: 11px; font-weight: 650; padding: 3px 10px; border-radius: 999px; }
.cvs-badge-voice { background: var(--danger-bg); color: var(--danger); }
.cvs-badge-digital { background: var(--success-bg); color: var(--success); }
.cvs-badge-muted { background: var(--border); color: var(--text); }

/* Meta chips */
.cvs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cvs-chip { display: flex; flex-direction: column; gap: 1px; padding: 7px 11px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; max-width: 100%; }
.cvs-chip-k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.cvs-chip-v { font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.cvs-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* Token counts */
.cvs-tokens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.cvs-tokens > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-align: center; }
.cvs-tok-k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.cvs-tok-v { font-size: 16px; font-weight: 650; color: var(--text); }

/* Breakdown section */
.cvs-section-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text); margin: 4px 0 10px; }
.cvs-section-title span { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1px 6px; }
.cvs-breakdown { display: flex; flex-direction: column; margin-bottom: 16px; }
.cvs-line { padding: 8px 0; border-bottom: 1px solid var(--border); }
.cvs-line:last-child { border-bottom: none; }
.cvs-line-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cvs-line-label { font-size: 13px; color: var(--text); }
.cvs-line-val { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

.cvs-subtotal { display: flex; justify-content: space-between; font-size: 13px; font-weight: 650; color: var(--text); padding: 6px 0 2px; border-top: 1px dashed var(--border); }

.cvs-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 750;
  color: var(--text);
  padding: 14px 16px;
  margin: 4px 0 12px;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
}

.cv-alloc-tag {
  margin-left: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  vertical-align: middle;
}

/* ---- Cost calculation info drawer --------------------------------------- */
.cvi-group { margin-bottom: 18px; }
.cvi-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.cvi-tag { font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--success); background: var(--success-bg); border-radius: var(--radius-sm); padding: 1px 6px; }
.cvi-tag-alt { color: var(--text-muted); background: var(--border); }
.cvi-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cvi-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.cvi-list li span { color: var(--text); }
.cvi-list li code, .cvi-total code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: var(--radius-sm); }
.cvi-note { margin: 7px 0 0; font-size: 12px; color: var(--text-muted); }
.cvi-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 14px; }
.cvi-total .cvi-title { margin: 0; }

/* ---- Export drawer ------------------------------------------------------- */
.cvx-form { display: flex; flex-direction: column; gap: 16px; }
.cvx-field { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; margin: 0; }
.cvx-field legend { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 0 6px; }
.cvx-optional { text-transform: none; letter-spacing: 0; font-weight: 400; }
.cvx-radio, .cvx-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); margin: 4px 14px 4px 0; cursor: pointer; }
.cvx-select { width: 100%; margin: 8px 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-size: 13px; }
.cvx-dates { display: flex; align-items: center; gap: 8px; }
.cvx-dates .cvx-select { margin: 6px 0 0; }
.cvx-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cvx-actions .btn { flex: 1; min-width: 160px; }

/* Quick-export presets moved into the Export drawer */
.cvx-quick { margin-bottom: 4px; }
.cvx-quick-title { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 10px; }
.cvx-quick-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.cvx-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--text-muted); font-size: 12px; }
.cvx-divider::before, .cvx-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ==== Rail drawers: more impactful, single brand accent ================= */
.cv-rail-panel { --cvd: var(--accent); --cvd-soft: var(--accent-soft); }

/* Gradient header with an icon badge */
.cvd-header {
  align-items: center;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--cvd-soft), var(--surface) 75%);
  border-bottom: 2px solid var(--cvd);
}
.cvd-header-main { display: flex; align-items: center; gap: 13px; }
.cvd-header h3 { color: var(--text); font-size: 16px; }
.cvd-header .slide-panel-sub { margin-top: 2px; }
.cvd-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--cvd);
  color: var(--accent-on);
  flex-shrink: 0;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--shadow-tint) 22%, transparent);
}
.cvd-badge svg { width: 22px; height: 22px; fill: currentColor; }
.cv-rail-panel .slide-panel-close { border-radius: 8px; transition: background 0.15s ease, color 0.15s ease; }
.cv-rail-panel .slide-panel-close:hover { background: var(--cvd-soft); color: var(--cvd); }

/* Content rises in when the drawer opens */
.cv-rail-panel.open .slide-panel-body { animation: cvd-rise 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes cvd-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Cost-info groups become accented cards */
#cv-costinfo-panel .cvi-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cvd);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-tint) 5%, transparent);
}
#cv-costinfo-panel .cvi-list li code,
#cv-costinfo-panel .cvi-total code { color: var(--cvd); background: var(--cvd-soft); }
#cv-costinfo-panel .cvi-total { border-left: 3px solid var(--cvd); background: var(--cvd-soft); }
/* Long definition formulas: let the code wrap under its label instead of squishing it. */
#cv-costinfo-panel .cvi-list li { flex-wrap: wrap; }
#cv-costinfo-panel .cvi-list li code { word-break: break-word; text-align: right; }
.cvi-subtitle {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin: 4px 0 6px;
}
.cvi-block {
  display: block;
  margin-top: 6px;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cvd);
  background: var(--cvd-soft);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Export fieldsets highlight on focus, buttons pick up the drawer accent */
#cv-export-panel .cvx-field { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
#cv-export-panel .cvx-field:focus-within { border-color: var(--cvd); box-shadow: 0 0 0 3px var(--cvd-soft); }
#cv-export-panel .cvx-quick-title,
#cv-export-panel .cvx-field legend { color: var(--cvd); }
#cv-export-panel .btn-primary { background: var(--cvd); border-color: var(--cvd); }
#cv-export-panel .btn-primary:hover { filter: brightness(1.05); }

/* Session hero picks up the drawer accent */
#cv-session-panel .cvs-hero { background: linear-gradient(135deg, var(--cvd-soft), var(--bg)); }
#cv-session-panel .cvs-hero-value { color: var(--cvd); }
#cv-session-panel .cvs-total { background: var(--cvd-soft); }

/* ---- Report an issue drawer --------------------------------------------- */
.cvr-form { display: flex; flex-direction: column; gap: 6px; }
.cvr-form .cvx-quick-title { margin: 10px 0 0; }
.cvr-form .cvx-quick-title:first-child { margin-top: 0; }
.cvr-textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  resize: vertical;
  margin-top: 4px;
}
.cvr-textarea:focus, .cvr-form .cvx-select:focus { outline: none; border-color: var(--cvd, var(--accent)); box-shadow: 0 0 0 3px var(--cvd-soft, var(--accent-soft)); }
.cvr-form .cvx-actions { margin-top: 14px; }
.cvr-status { margin-top: 12px; }
.cvr-ok { color: var(--success); background: var(--success-bg); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin: 0; }
.cvr-err { color: var(--danger); background: var(--danger-bg); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin: 0; }

.cvr-file { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.cvr-file::file-selector-button { margin-right: 10px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-size: 12px; cursor: pointer; }
.cvr-file::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Release notes drawer ----------------------------------------------- */
.cvn-entry { position: relative; padding: 0 0 18px 18px; border-left: 2px solid var(--border); }
.cvn-entry:last-child { border-left-color: transparent; padding-bottom: 0; }
.cvn-entry::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.cvn-date { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase; }
.cvn-title { font-size: 14px; font-weight: 700; color: var(--text); margin: 2px 0 8px; }
.cvn-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.cvn-list li { font-size: 13px; color: var(--text); line-height: 1.45; }

.cvx-scope { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.cvx-scope strong { color: var(--text); }

/* EPIC settings pane — de-inlined layout (was inline styles in markup) */
.brand-logo { cursor: pointer; }
.epic-actions { margin: 16px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.epic-filters { margin: 16px 0; padding: 16px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.epic-filters-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.epic-filters .filter-label { display: block; margin-bottom: 8px; font-size: 13px; }
.epic-filters .multiselect-wrapper { min-width: 180px; }
.epic-filters .filter-multiselect-btn { width: 100%; }
.epic-table-wrap { max-height: 600px; overflow-y: auto; }
.epic-footer { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; }
.epic-footer #epic-status { font-size: 13px; color: var(--text-muted); }
.epic-footer #epic-pagination { display: flex; align-items: center; gap: 8px; }

/* "How costs are calculated" — pending/not-yet-included note */
.cvi-pending {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-top: 4px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
}
.cvi-pending-icon { color: var(--accent); font-size: 15px; line-height: 1.3; flex-shrink: 0; }

/* User Guide drawer */
.cvh-section { padding: 12px 0; border-bottom: 1px solid var(--border); }
.cvh-section:last-of-type { border-bottom: none; }
.cvh-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cvd, var(--accent)); margin-bottom: 8px; }
.cvh-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.cvh-list li { font-size: 13px; color: var(--text); line-height: 1.5; }

/* Release-notes subscribe bar */
.cvn-subscribe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.cvn-sub-text { display: flex; flex-direction: column; gap: 2px; }
.cvn-sub-text strong { font-size: 13px; color: var(--text); }
.cvn-sub-text span { font-size: 12px; color: var(--text-muted); }
.cvn-subscribe .btn { white-space: nowrap; }
.cvn-sub-status { font-size: 12px; margin: -8px 0 12px; min-height: 1em; }
.cvn-sub-status:empty { margin: 0; }

/* Cost by Company — session breakdown by segment */
.companies-breakdown { margin: 4px 0 18px; }
.companies-breakdown:empty { margin: 0; }
.companies-breakdown-title { font-size: 13px; font-weight: 700; color: var(--text); margin: 0 0 10px; }

/* Cost by Company breakdown — full-width 100% stacked bar + legend */
.companies-breakdown-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.companies-breakdown-title .cb-total { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.cb-bar {
  display: flex;
  width: 100%;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border);
}
.cb-seg { height: 100%; min-width: 2px; transition: width 0.3s ease; }
.cb-seg + .cb-seg { box-shadow: -1px 0 0 var(--chrome-fill-strong); }
.cb-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 6px 20px;
  margin-top: 12px;
}
.cb-leg { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text); }
.cb-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.cb-leg-label { font-weight: 600; }
.cb-leg-val { color: var(--text-muted); }
.cb-leg-avg { margin-left: auto; color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* Company Insight — session-breakdown cards. 4 cards stretch to fill the row;
   a 2×2 stat grid fills each card so there's no empty white space inside. */
#cv-insights-content .insights-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
#cv-insights-content .insight-card { padding: 12px 14px; }
#cv-insights-content .insight-bar-container { margin-bottom: 10px; }
.ic-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ic-name { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; color: var(--text); }
.ic-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
/* Session share is the headline number — make it prominent. */
.ic-pct { display: inline-flex; align-items: baseline; gap: 5px; font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; color: var(--accent); }
.ic-pct small { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; }
.ic-cell { display: flex; flex-direction: column; gap: 1px; }
.ic-cell span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.ic-cell b { font-size: 13px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---- User Roles management ---------------------------------------------- */
.roles-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.roles-add input[type="email"], .roles-add select {
  padding: 8px 11px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); font-size: 13px;
}
.roles-add input[type="email"] { min-width: 240px; flex: 1; }
.roles-status { font-size: 12px; min-height: 1em; margin-bottom: 8px; }
.roles-status:empty { margin: 0; min-height: 0; }
.roles-table .role-select { padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 12px; }
.role-badge { display: inline-block; font-size: 11px; font-weight: 650; padding: 2px 9px; border-radius: 999px; text-transform: capitalize; }
.role-admin { background: var(--accent-soft); color: var(--accent-text); }
.role-leadership { background: var(--success-bg); color: var(--success); }
.role-developer { background: var(--surface-sunken); color: var(--text-muted); }
.role-tag { margin-left: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }

/* ---- Financial Overview (Leadership+) ---- */
.fin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px; margin-bottom: 16px; }
.fin-head h2 { margin: 0; font-size: 22px; font-weight: 750; }
.fin-sub { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; }
.fin-head-actions { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.fin-asof { font-size: 12px; color: var(--text-faint); }

.fin-content { display: block; }
.fin-loading, .fin-empty { padding: 48px 24px; text-align: center; color: var(--text-muted); }
.fin-loading p { margin-top: 12px; font-size: 13px; }

/* KPI tiles */
.fin-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.fin-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.fin-kpi-hero { background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent) 100%); border: none; color: var(--accent-on); }
.fin-kpi-label { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); text-transform: uppercase; }
.fin-kpi-hero .fin-kpi-label { color: var(--accent-on); font-weight: 600; }
.fin-kpi-value { font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.fin-kpi-foot { font-size: 12px; color: var(--text-faint); }
.fin-kpi-hero .fin-kpi-foot { color: var(--accent-on); font-weight: 550; }
.fin-progress { height: 7px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 4px; }
.fin-progress span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

/* Cards */
.fin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 18px 20px; margin-bottom: 16px; }
.fin-card-title { margin: 0 0 14px; font-size: 15px; font-weight: 700; }
.fin-card-sub { font-size: 12px; font-weight: 500; color: var(--text-faint); margin-left: 6px; }

/* Spend-share bar */
.fin-bar { display: flex; width: 100%; height: 26px; border-radius: 6px; overflow: hidden; background: var(--border); }
.fin-bar-seg { height: 100%; transition: opacity 0.15s; }
.fin-bar-seg:hover { opacity: 0.85; }
.fin-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.fin-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.fin-leg strong { color: var(--text); font-weight: 700; }
.fin-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* Vendor table */
.fin-table { width: 100%; border-collapse: collapse; }
.fin-table th, .fin-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; }
.fin-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 650; }
.fin-table td:first-child { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.fin-num { text-align: right; font-variant-numeric: tabular-nums; }
.fin-total-row td { font-weight: 750; border-top: 2px solid var(--border-strong); border-bottom: none; }
.fin-detail { font-size: 11px; color: var(--text-faint); margin-left: 4px; }
.fin-detail-err { color: var(--danger); }
.fin-badge { display: inline-block; font-size: 11px; font-weight: 650; padding: 2px 9px; border-radius: 999px; }
.fin-badge-ok { background: var(--success-bg); color: var(--success); }
.fin-badge-warn { background: var(--warn-bg); color: var(--warn); }
.fin-badge-err { background: var(--error-bg); color: var(--error); }
.fin-badge-off { background: var(--neutral-bg); color: var(--neutral); }
.fin-detail-warn { color: var(--warn); }
.fin-warn { color: var(--warn); font-size: 12px; cursor: help; margin-left: 2px; }
.fin-stale-num { color: var(--text-muted); font-style: italic; cursor: help; border-bottom: 1px dotted var(--border-strong); }
.fin-note { font-size: 12px; color: var(--text-muted); margin: 4px 2px 0; }
.fin-th-sub { font-size: 9px; color: var(--text-faint); font-weight: 600; }

/* Delta chip */
.fin-delta { font-size: 22px; font-weight: 800; }
.fin-delta.up { color: var(--error); }     /* spend up = red (cost is bad when rising) */
.fin-delta.down { color: var(--success); }   /* spend down = green */
/* Volume metrics (sessions/minutes): direction only, no value judgement —
   a drop in usage is not a win the way a drop in spend is. */
.fin-delta.neutral { color: var(--text-muted); }
/* inline (table cells): compact */
.fin-table .fin-delta { font-size: 11px; font-weight: 700; margin-left: 6px; }

/* Collapsible card (Total spend trend) */
.fin-collapse { padding-bottom: 18px; }
.fin-summary { cursor: pointer; list-style: none; display: flex; align-items: center; margin: 0; }
.fin-summary::-webkit-details-marker { display: none; }
.fin-summary::before { content: '▸'; color: var(--text-faint); font-size: 12px; margin-right: 8px; transition: transform 0.15s; }
.fin-collapse[open] .fin-summary::before { transform: rotate(90deg); }
.fin-collapse[open] .fin-summary { margin-bottom: 14px; }
.fin-collapse-body { animation: fin-fade 0.15s ease; }
@keyframes fin-fade { from { opacity: 0; } to { opacity: 1; } }

/* Monthly total trend — SVG stacked-area chart */
.fin-chart-wrap { width: 100%; overflow-x: auto; position: relative; }
/* Scale into the card rather than sitting as a 760px island in a ~1350px
   panel. The cap keeps the proportional height sane on ultra-wide screens
   (height grows with width, since the viewBox aspect is fixed). */
.fin-chart { width: 100%; max-width: 1080px; height: auto; display: block; margin: 0 auto; }
.fin-band { transition: opacity 0.12s; }
.fin-hovercol { cursor: crosshair; }
.fin-guide { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.fin-chart-tip {
  position: absolute; top: 6px; z-index: 5; pointer-events: none;
  min-width: 170px; max-width: 250px; padding: 9px 11px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-size: 12px;
}
.fin-tip-h { font-weight: 750; font-size: 12px; margin-bottom: 6px; }
.fin-tip-r { display: flex; align-items: center; gap: 7px; padding: 1px 0; }
.fin-tip-r .fin-dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.fin-tip-n { flex: 1; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-tip-v { font-variant-numeric: tabular-nums; font-weight: 650; }
.fin-tip-t { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--border); font-weight: 750; }
.fin-leg[data-si] { cursor: default; transition: opacity 0.12s; }
.fin-gl { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.fin-cline { stroke: var(--accent); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.fin-cline-proj { stroke-dasharray: 6 5; opacity: 0.75; }
.fin-cdot { fill: var(--accent); }
.fin-cdot-proj { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
.fin-cdot-mtd { fill: var(--accent); opacity: 0.55; }
.fin-clabel { fill: var(--text); font-size: 13px; font-weight: 750; }
.fin-cxlabel { fill: var(--text-muted); font-size: 11px; font-weight: 600; }
.fin-cdelta { font-size: 12px; font-weight: 800; }
.fin-cdelta.up { fill: var(--error); }
.fin-cdelta.down { fill: var(--success); }
/* Volume deltas (sessions/minutes) carry direction, not judgement — same rule as
   .fin-delta.neutral: a drop in usage is not a win the way a drop in spend is. */
.fin-cdelta.neutral { fill: var(--text-muted); }

/* Monthly total trend (legacy bars) */
.fin-trend { display: flex; align-items: flex-end; gap: 24px; height: 190px; padding: 8px 6px 0; }
.fin-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.fin-trend-val { font-size: 14px; font-weight: 750; margin-bottom: 6px; }
.fin-trend-bar { width: 62%; max-width: 90px; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.fin-trend-actual { display: block; width: 100%; background: var(--accent); border-radius: 5px 5px 0 0; min-height: 3px; }
.fin-trend-proj { display: block; width: 100%; background: repeating-linear-gradient(45deg, var(--accent-soft), var(--accent-soft) 5px, var(--accent-soft) 5px, var(--accent-soft) 10px); border-radius: 5px 5px 0 0; }
.fin-trend-proj + .fin-trend-actual { border-radius: 0; }
.fin-trend-label { font-size: 12px; color: var(--text-muted); margin-top: 8px; font-weight: 600; }
.fin-mtd, .fin-trend-label .fin-mtd { font-size: 9px; color: var(--accent); border: 1px solid var(--accent-soft); background: var(--accent-soft); border-radius: 4px; padding: 0 4px; margin-left: 2px; vertical-align: middle; }
.fin-dot-proj { background: repeating-linear-gradient(45deg, var(--accent-soft), var(--accent-soft) 2px, var(--accent-soft) 2px, var(--accent-soft) 4px); }

/* Clickable vendor rows + detail panel */
.fin-vrow { cursor: pointer; transition: background 0.12s; }
.fin-vrow:hover { background: var(--accent-soft); }
.fin-vrow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fin-vrow-active { background: var(--accent-soft); }
.fin-chev { color: var(--text-faint); font-weight: 700; margin-left: 4px; opacity: 0; transition: opacity 0.12s; }
.fin-toggle-cell { width: 52px; text-align: center; cursor: default; }
/* Enable/disable pill toggle (styled from a checkbox) */
.fin-vtoggle {
  appearance: none; -webkit-appearance: none;
  width: 38px; height: 22px; margin: 0; vertical-align: middle;
  border: none; border-radius: 999px; background: var(--border-strong);
  position: relative; cursor: pointer; flex: none;
  transition: background 0.18s ease;
}
.fin-vtoggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-tint) 35%, transparent);
  transition: transform 0.18s ease;
}
.fin-vtoggle:hover { filter: brightness(0.97); }
.fin-vtoggle:checked { background: var(--accent); }
.fin-vtoggle:checked::after { transform: translateX(16px); }
.fin-vtoggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.fin-vrow-excluded td:not(.fin-toggle-cell) { opacity: 0.42; text-decoration: line-through; }
.fin-vrow-excluded .fin-dot { text-decoration: none; }
.fin-vrow:hover .fin-chev, .fin-vrow-active .fin-chev { opacity: 1; }
.fin-detail { border: 1px solid var(--accent-soft); box-shadow: var(--shadow-md); }
.fin-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.fin-detail-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.fin-detail-actions .btn { padding: 5px 12px; font-size: 12px; white-space: nowrap; }
.fin-detail-close { padding: 4px 12px; font-size: 12px; }
/* Finance breadcrumb: keep on one aligned row */
#fin-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.fin-detail-totals { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.fin-dt-item { flex: 1; min-width: 120px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; }
.fin-dt-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); font-weight: 600; }
.fin-dt-val { font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
.fin-dt-grand { background: var(--accent-soft); border-color: var(--accent-soft); }
.fin-dt-grand .fin-dt-val { color: var(--accent); }

/* Sortable breakdown table + export */
.fin-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.fin-sort:hover { color: var(--accent); }
.fin-sort-ind { color: var(--accent); font-size: 10px; }
.fin-table-actions { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* Azure resource → company/instance mapping editor */
.fin-map-btn { padding: 4px 12px; font-size: 12px; }
.fin-map-actions { display: flex; gap: 8px; }
.fin-map-toolbar { margin-bottom: 12px; }
.fin-map-toolbar .filter-input { max-width: 320px; }
.fin-map-wrap { max-height: 460px; overflow-y: auto; }
.fin-map-table th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.fin-map-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-map-table input { width: 100%; min-width: 90px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; background: var(--surface); color: var(--text); }
.fin-map-table input:focus { outline: none; border-color: var(--accent); }
.fin-map-guess input { border-style: dashed; color: var(--danger); }
.fin-map-guess .fin-map-name { color: var(--text-muted); }
.fin-map-status { width: 24px; text-align: center; color: var(--success); font-weight: 700; }

/* AWS cost by tag */
.fin-aws-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.fin-aws-controls label { font-size: 12px; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; }
.fin-aws-controls select { font-size: 13px; padding: 5px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.fin-aws-accounts { font-size: 11px; color: var(--text-faint); }
/* Search sits at the far right of the controls row and takes the spare width. */
.fin-bd-search-label {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  margin-left: auto; flex: 0 1 420px; justify-content: flex-end;
}
.fin-bd-search {
  font-size: 13px; font-weight: 400; padding: 6px 12px;
  flex: 1 1 auto; min-width: 220px; max-width: 380px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
}
.fin-bd-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fin-no-match { text-align: center; color: var(--text-faint); padding: 18px 12px; font-style: italic; }
.fin-aws-bars { margin-bottom: 16px; }
.fin-aws-barrow { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.fin-aws-barlabel { flex: 0 0 96px; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.fin-aws-bar { flex: 1; height: 20px; }
.fin-aws-bartotal { flex: 0 0 88px; text-align: right; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .fin-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .fin-kpis { grid-template-columns: 1fr; }
  .fin-head { flex-direction: column; }
}

/* User Roles — summary line */
.roles-summary { font-size: 13px; color: var(--text-muted); margin: 6px 2px 10px; }
.roles-summary strong { color: var(--text); font-weight: 700; }

/* ---- EPIC cost breakdown (Company Insight → Cost summary → modal) --------- */
/* Clickable ⓘ link next to the EPIC cost label. */
.epic-info-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 7px;
  vertical-align: middle;
  font-size: 19px;
  line-height: 1;
  color: var(--accent);
  text-decoration: none;
  border-radius: 50%;
  transition: color 0.12s ease, background 0.12s ease;
}
.epic-info-link:hover,
.epic-info-link:focus-visible {
  color: var(--accent-hover);
  background: var(--accent-soft);
}
/* Full popup */
.epic-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: color-mix(in srgb, var(--shadow-tint) 55%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.epic-modal {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  width: 88vw;
  height: 86vh;
  max-width: 88vw;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.epic-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.epic-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.epic-modal-sub {
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-muted);
}
.epic-modal-close {
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px;
  border-radius: var(--radius-sm);
}
.epic-modal-close:hover { color: var(--text); }
.epic-modal-body {
  padding: 16px 20px 20px;
  overflow: auto;
  flex: 1 1 auto;
}
/* Amortization callout: complete bill vs this instance's share */
.epic-amort {
  flex: 0 0 auto;
  margin: 0 20px 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--neutral-bg);
  overflow: hidden;
}
.epic-amort-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 10px 14px; font-size: 13px; color: var(--text);
}
.epic-amort-row + .epic-amort-row { border-top: 1px solid var(--border); }
.epic-amort-row span em { color: var(--text-faint); font-style: normal; }
.epic-amort-row strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.epic-amort-share { background: var(--accent-soft); }
.epic-amort-share strong { color: var(--accent); }
.epic-amort-formula {
  padding: 8px 14px; border-top: 1px dashed var(--border);
  font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums;
}

.epic-modal-note {
  flex: 0 0 auto;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border);
  background: var(--neutral-bg);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}
.epic-modal-note strong {
  color: var(--text);
  font-weight: 600;
}
.epic-detail-head {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.epic-detail-scroll {
  overflow-x: auto;
}
.epic-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.epic-detail-table th,
.epic-detail-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}
.epic-detail-table th.text,
.epic-detail-table td.text {
  text-align: left;
}
.epic-detail-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  color: var(--text-muted);
  font-weight: 600;
  z-index: 1;
}
.epic-detail-table tbody tr:hover {
  background: var(--accent-soft);
}
.epic-detail-table tfoot td {
  font-weight: 700;
  border-top: 2px solid var(--border-strong);
  border-bottom: none;
  color: var(--text);
}
.epic-detail-dash {
  color: var(--text-faint);
}
.epic-detail-empty {
  min-width: 260px;
}
.epic-detail-empty-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 13px;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.epic-detail-hint {
  margin: 8px 0 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ============================================================================
   Folded in from style-professional.css (deleted)
   ============================================================================
   That file loaded AFTER this one and redefined 11 shared components
   (.stat-tile, .stat-label, .stat-value, .cv-section, .cost-row*, table thead,
   .kpi-row, .table-wrap, .cost-breakdown, .cost-list), so the same component
   was styled in two places with load order deciding the winner — the main
   reason pages did not look uniform, and unthemeable besides (raw gradients
   like var(--accent-soft) -> var(--bg), white, var(--text-muted), var(--text)).

   Each collision was resolved in favour of the definitions above, which are
   already tokenised and already the dense instrument style the app wants; the
   overrides had been reversing them (13px sentence-case labels over 11px
   uppercase micro-labels, 20px padding over 12px, hover lift on every tile).
   Only genuinely ADDITIVE rules survive here, tokenised.
   ========================================================================== */

/* ---- Insight cards — session breakdown by type --------------------------- */
.insights-container { width: 100%; }

.insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-3);
}

.insight-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}

.insight-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

/* Magnitude bar: the share this segment holds, readable without the number. */
.insight-bar-container {
  width: 100%;
  height: 4px;
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-2);
  overflow: hidden;
}

.insight-bar {
  height: 100%;
  border-radius: var(--radius-pill);
  /* JS sets the real segment colour inline (getBreakdownColor); this is only a
     fallback for a card rendered before that runs. */
  background: var(--seg-other);
  transition: width var(--dur-slow) var(--ease-out);
}

.insight-label {
  font-size: var(--fs-2xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-1);
}

.insight-value {
  font-size: var(--fs-3xl);
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.insight-count {
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.insight-cost {
  font-size: var(--fs-md);
  font-weight: 650;
  color: var(--accent-text);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}

/* ---- Stat-tile label with an info affordance ---------------------------- */
.stat-label-with-info {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
}

.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  color: var(--accent-text);
  font-weight: 700;
  cursor: help;
  transition: color var(--dur-med) var(--ease-out);
}

.info-icon:hover { color: var(--accent-hover); }

/* ---- Responsive: collapse the metric grids before they crush ------------ */
@media (max-width: 1024px) {
  .insights-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .insights-grid { grid-template-columns: 1fr; }
  .stat-tile { padding: var(--sp-3); }
  .stat-value { font-size: var(--fs-2xl); }
  .insight-value { font-size: var(--fs-2xl); }
}

/* ============================================================================
   On-accent context
   ============================================================================
   Any surface FILLED with the accent has to recolour everything inside it, not
   just its own `color`. In light mode --accent-on and the default text colour
   are both near-white/near-black in a way that happens to look fine, so this
   was invisible; in dark mode --accent is a LIGHT blue while --text-muted is a
   light grey, so labels and sub-lines washed out to unreadable on the fill.

   Descendant utility classes (.stat-label, .dash-kpi-sub, .cost-breakdown, …)
   set their own colours, so each accent-filled container must re-assert the
   on-colour for them. Listed explicitly rather than with a blanket `*` so
   deliberately-coloured children (status pills, semantic chips) still win.

   NOTE for future work: text on a gradient cannot be contrast-checked by
   sampling a computed background-color, so automated audits skip these. They
   need a rendered-pixel check or a human look. This block is the reason the
   Financial Overview hero tile was unreadable at night while every automated
   check reported clean. */
.stat-tile-accent,
.fin-kpi-hero,
.dashboard-hero,
.cvs-hero,
.top10-bar,
.user-dropdown-head,
.monthly-cost-card.current-month,
.dashboard-card-container .panel-head {
  color: var(--accent-on);
}

.stat-tile-accent .stat-label,
.stat-tile-accent .dash-kpi-sub,
.stat-tile-accent .cost-breakdown,
.stat-tile-accent .stat-sub,
.fin-kpi-hero .stat-label,
.fin-kpi-hero .stat-value,
.fin-kpi-hero .stat-sub,
.fin-kpi-hero .cost-breakdown,
.fin-kpi-hero .fin-kpi-sub,
.dashboard-hero h1,
.dashboard-hero h2,
.dashboard-hero p,
.dashboard-hero .subtitle,
.cvs-hero h2,
.cvs-hero p,
.user-dropdown-head .user-dropdown-name,
.user-dropdown-head .user-dropdown-email,
.monthly-cost-card.current-month .stat-label,
.dashboard-card-container .panel-head h3,
.dashboard-card-container .panel-head span {
  color: var(--accent-on);
}

/* Secondary text on a fill: stepped back with WEIGHT, never with opacity.
   Fading white to 0.82 over --accent composites it toward the fill and drops
   5.24:1 to 4.01:1 — under AA. Weight and letter-spacing cost no contrast. */
.stat-tile-accent .stat-label,
.stat-tile-accent .dash-kpi-sub,
.stat-tile-accent .cost-breakdown,
.fin-kpi-hero .stat-label,
.fin-kpi-hero .fin-kpi-sub,
.fin-kpi-hero .cost-breakdown,
.user-dropdown-head .user-dropdown-email {
  opacity: 1;
  font-weight: 550;
}

/* ---- Delta chips on an accent fill --------------------------------------
   The up/down chip carries meaning in its colour (red = spend rising), so it
   must NOT be flattened to the on-accent colour. But semantic red on the blue
   KPI fill measures 1.25:1 — invisible. Give the chip its own surface pill so
   the semantic hue keeps a ground it actually reads on (danger on --surface is
   6.5:1 light / 7.7:1 dark), and the arrow still encodes direction. */
.stat-tile-accent .fin-delta,
.fin-kpi-hero .fin-delta,
.dashboard-hero .fin-delta,
.monthly-cost-card.current-month .fin-delta {
  background: var(--surface);
  padding: 0 6px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-lg);
  line-height: 1.5;
  display: inline-block;
}
.stat-tile-accent .fin-delta.up,
.fin-kpi-hero .fin-delta.up,
.dashboard-hero .fin-delta.up,
.monthly-cost-card.current-month .fin-delta.up { color: var(--danger); }

.stat-tile-accent .fin-delta.down,
.fin-kpi-hero .fin-delta.down,
.dashboard-hero .fin-delta.down,
.monthly-cost-card.current-month .fin-delta.down { color: var(--success); }

.stat-tile-accent .fin-delta.neutral,
.fin-kpi-hero .fin-delta.neutral,
.dashboard-hero .fin-delta.neutral,
.monthly-cost-card.current-month .fin-delta.neutral { color: var(--text-muted); }

/* ---- Month pager (Financial Overview + vendor breakdowns) ----------------
   Older months are already fetched; these arrows only change which columns are
   rendered, so paging is instant and costs no vendor call. */
.fin-pager {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
}
.fin-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1;
  color: var(--accent-text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.fin-pager-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.fin-pager-btn:disabled {
  /* Disabled state is signalled by the recessed surface and a muted border, not
     by fading the glyph. The app-wide `button:disabled { opacity: .45 }` would
     otherwise take an AA-passing 4.9:1 arrow down to 1.8:1 — an affordance you
     cannot see is not an affordance, even where WCAG exempts inactive controls.
     Overridden here rather than globally: the blanket rule is relied on by other
     controls and changing it app-wide is a bigger behavioural change than this
     deploy should carry. */
  opacity: 1;
  color: var(--text-faint);
  background: var(--surface-sunken);
  border-color: var(--border);
  cursor: default;
}
.fin-pager-range {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fin-pager-hint { font-size: var(--fs-xs); color: var(--text-faint); }

/* ---- Frozen first column on the wide month tables -----------------------
   Two things make this fiddly and both are handled here:
   1) `border-collapse: collapse` does not carry cell borders along a sticky
      cell — the divider vanishes while scrolling. So this table switches to
      `separate` with zero spacing (visually identical) and the right-hand
      divider is drawn with a box-shadow, which does travel.
   2) A sticky cell must be OPAQUE, or the scrolling columns show through it.
      Every row state (default, hover, total) therefore re-declares the
      background on the frozen cell to match the row it belongs to. */
.fin-table-sticky { border-collapse: separate; border-spacing: 0; }

.fin-table-sticky th:first-child,
.fin-table-sticky td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--border-strong);
}

/* The header's frozen cell is sticky on both axes, so it outranks the rest. */
.fin-table-sticky thead th:first-child {
  z-index: 3;
  background: var(--surface-sunken);
}
.fin-table-sticky thead th { background: var(--surface-sunken); }

.fin-table-sticky tbody tr:hover td:first-child { background: var(--accent-soft); }
.fin-table-sticky .fin-total-row td:first-child { background: var(--surface-raised); }

/* Give the frozen name column a floor and ceiling so it cannot squeeze to
   nothing on a narrow viewport, nor eat the width the months need. A long name
   must TRUNCATE rather than overrun the cell — otherwise it spills past the
   frozen edge and collides with the month columns sliding underneath.
   `display` is reset from the flex the base .fin-table sets on its first cell:
   flex turns the text into an anonymous flex item, where text-overflow cannot
   apply. Only this table is affected; the overview's first cell keeps its flex
   (it carries a colour swatch next to the label). */
.fin-table-sticky th:first-child,
.fin-table-sticky td:first-child {
  display: table-cell;
  min-width: 180px;
  max-width: 320px;
}

/* The ellipsis lives on an inner BLOCK, not on the cell: text-overflow has no
   effect on a display:table-cell, which is why a long service name still
   overran the frozen column by ~22px and collided with the scrolling months. */
.fin-bd-name {
  display: block;
  max-width: 296px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fin-table-wrap { overflow-x: auto; }

/* ---- Two-level breakdown: group + its children ---------------------------
   The parent row carries the group subtotal (computed server-side, so a
   collapsed group still shows a correct figure) and its children break the
   group down by the second dimension. Groups start collapsed: the point of the
   two-level view is to scan parents first and open only the one that matters. */
.fin-bd-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.fin-bd-caret {
  flex: none;
  width: 0.9em;
  color: var(--text-faint);
  font-size: var(--fs-sm);
}
.fin-bd-toggle:hover .fin-bd-caret { color: var(--accent-text); }

/* How many rows are hidden inside a collapsed group. */
.fin-bd-kidcount {
  flex: none;
  font-size: var(--fs-2xs);
  font-weight: 650;
  color: var(--text-muted);
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  padding: 1px 6px;
  font-variant-numeric: tabular-nums;
}

.fin-table-sticky .fin-bd-parent td { font-weight: 650; }

/* Children are visually subordinate: indented, lighter, and on the recessed
   surface so an open group reads as one block rather than more top-level rows. */
.fin-table-sticky .fin-bd-child td { background: var(--surface-raised); }
.fin-table-sticky .fin-bd-child td:first-child { background: var(--surface-raised); }
.fin-bd-name-child {
  padding-left: calc(0.9em + var(--sp-2));
  color: var(--text-muted);
  font-weight: 500;
}
.fin-table-sticky .fin-bd-child .fin-num { color: var(--text-muted); }

.fin-sub-note { font-size: var(--fs-xs); color: var(--text-faint); }

/* ---- Top companies: which instance the cost sits on ----------------------
   A company folded across instances (UCHealth runs on h1 and c0) would
   otherwise give no hint where its cost actually is. The dot colour comes from
   the same instance→colour map the trend chart and share bar use, so an
   instance reads as one colour across the whole dashboard. */
/* FIXED width, deliberately. .dash-top-bar is flex:1, so a variable-width chip
   slot steals space from the bar and every row ends up a different length —
   which destroys the only thing the bar is for: comparing rows at a glance.
   UCHealth (on h1 AND c0) showed this immediately: two chips, visibly shorter
   bar. Reserving a constant slot keeps every bar on the same baseline whether a
   company sits on one instance or three. */
.dash-top-insts {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-1);
  flex: 0 0 64px;
  width: 64px;
  overflow: hidden;
}
/* Beyond two instances, let the row say so rather than widen and squeeze the
   bar. Rare, but the layout must not break when it happens. */
.dash-top-inst:nth-child(n + 3) { display: none; }
.dash-top-insts[data-extra]::after {
  content: '+' attr(data-extra);
  font-size: var(--fs-2xs);
  font-weight: 650;
  color: var(--text-faint);
}
.dash-top-inst {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-2xs);
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  padding: 1px 7px 1px 5px;
  white-space: nowrap;
}
.dash-top-inst-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}

/* ---- Instances page: fleet total per month ------------------------------- */
.instances-total-row td {
  border-top: 2px solid var(--border-strong);
  background: var(--surface-raised);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.instances-total-sub {
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
/* A partial month is flagged rather than silently presented as complete. */
.instances-total-partial { color: var(--warn); }
.instances-total-mark { font-weight: 700; margin-left: 2px; }
.instances-total-note-row td { border-top: none; background: var(--surface-raised); }
.instances-total-note {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-muted);
  padding-top: 0;
}

/* ---- Calculation basis by segment (Settings) -----------------------------
   Reuses the .calc-mode-toggle segmented control from the account menu so the
   two places that choose a basis look and behave the same. */
.calc-basis-rows {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.calc-basis-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.calc-basis-row:last-child { border-bottom: none; }
.calc-basis-row:nth-child(even) { background: var(--surface-raised); }

.calc-basis-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.calc-basis-seg { font-size: var(--fs-md); font-weight: 650; color: var(--text); }
.calc-basis-key {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.calc-basis-row .calc-mode-toggle { flex: none; }
.calc-basis-foot { margin-top: var(--sp-3); min-height: 1.2em; }

@media (max-width: 640px) {
  .calc-basis-row { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}

/* The unit a single row is counted in. Needed because a per-segment basis can
   put minutes and sessions in the SAME table — an unlabelled average would be
   ambiguous exactly where it matters most. */
.unit-tag {
  margin-left: 3px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-faint);
  cursor: help;
}

/* ---- Clickable KPI tile ----------------------------------------------------
   A <button> so it is keyboard-reachable and announced as actionable, but it
   must still look like the sibling .stat-tile divs — hence the resets. */
.stat-tile-clickable {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stat-tile-clickable:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 14%, transparent);
}

.stat-tile-hint {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  margin-left: 5px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-text);
}

.dash-kpi-quiet { color: var(--warn); font-weight: 600; }

/* ---- Company activity page -------------------------------------------------
   Its own page (#company-activity): who is active, who is barely active, and
   who has stopped, with each company's month-by-month session history. */
.activity-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 4px 0 18px;
}

.activity-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--text); }
.activity-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }

.activity-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.activity-threshold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.activity-low-input { width: 74px; text-align: right; }

/* ---- Tabs -----------------------------------------------------------------
   Built on the app's .tabs/.tab-btn pattern so the page matches Cost by
   Company. Each tab carries its own count, which is why the page has no
   separate KPI row: it would state the same three numbers twice. */
.act-card { padding: 0 0 4px; margin-bottom: 18px; overflow: hidden; }

.act-tabs { border-radius: 8px 8px 0 0; flex-wrap: wrap; }

.act-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* The two attention tabs keep their status colour on the active underline, so
   the page still says WHICH cohort is open without reading the label. */
.act-tab-flag.active { color: var(--danger); border-bottom-color: var(--danger); }
.act-tab-quiet.active { color: var(--warn); border-bottom-color: var(--warn); }

.act-panel { display: none; padding: 16px 20px 6px; }
.act-panel.active { display: block; }

.act-panel-sub {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* The two attention tiles carry a left edge in their status colour, so the
   distinction survives without relying on the number alone. */
.act-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
  align-self: center;
}
.act-dot-flag { background: var(--danger); }
.act-dot-quiet { background: var(--warn); }
.act-dot-active { background: var(--success); }

.act-count {
  font-size: 12px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-on);
}
.act-count-flag { background: var(--danger-bg); color: var(--danger); }
.act-count-quiet { background: var(--warn-bg); color: var(--warn); }

.act-table-wrap { overflow-x: auto; }
.act-table { width: 100%; }

/* Constrain the fixed columns so Company absorbs the slack instead of the
   figures drifting hundreds of pixels from their labels. text-align is restated
   because `.fin-table th, .fin-table td { text-align: left }` outranks the
   `.fin-num` helper on specificity, so the numbers stayed left-aligned. */
.act-table th.act-c-num, .act-table td.act-c-num {
  width: 110px;
  text-align: right;
}
.act-table th.act-c-last, .act-table td.act-c-last { width: 132px; }
.act-table th.act-c-trend, .act-table td.act-c-trend { width: 96px; text-align: right; }

/* A drop past halving is the one worth reacting to, so it gets the danger
   colour; ordinary declines stay in the muted warning tone. */
.act-trend-bad { color: var(--danger); font-weight: 700; }
.act-trend-down { color: var(--warn); font-weight: 600; }
.act-trend-up { color: var(--success); font-weight: 600; }
.act-trend-flat { color: var(--text-faint); }
.act-table th { background: var(--surface-raised); }

.act-pager { padding: 4px 0 8px; }

/* `.fin-table td:first-child { display: flex }` turns the first cell into a flex
   box, which drops table-cell layout — so its border-bottom rendered at a
   different y than its siblings' and the row separator came out staggered.
   Restore normal cell behaviour; the name/instance pair lays out inline anyway. */
.act-table td:first-child { display: table-cell; font-weight: 400; }

.act-row { cursor: pointer; }
.act-row:hover { background: var(--accent-soft); }
.act-name { font-weight: 600; }

.act-insts {
  margin-left: 7px;
  font-size: 11px;
  color: var(--text-muted);
}

.act-last { white-space: nowrap; }
.act-quiet-for {
  display: block;
  font-size: 11px;
  color: var(--warn);
  font-weight: 600;
}

/* ---- Session-history bar strip --------------------------------------------
   Scaled to each company's OWN peak, so the strip reads as direction rather
   than size — a global scale would flatten every small customer to nothing
   beside one doing 400k sessions.

   The bars FLEX to fill their column. The first cut used fixed 12px bars, which
   left the Company column absorbing ~1,088px of dead space on a 1,500px window
   while the actual information sat in an 84px strip. Widening the chart turns
   that space into something readable. */
.act-spark-cell { width: 200px; min-width: 120px; }

.act-spark,
.act-spark-heads {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
}

.act-spark { height: 30px; }

.act-spark-col {
  flex: 1 1 0;
  min-width: 6px;
  max-width: 26px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: color-mix(in srgb, var(--viz-axis) 12%, transparent);
  border-radius: 2px;
}

.act-spark-bar {
  width: 100%;
  background: var(--accent);
  border-radius: 2px;
  min-height: 2px;
}

/* A zero month is a floor-level marker in the warning colour, not an absent
   bar — "no sessions" and "no data" must not look the same. */
.act-spark-zero { background: var(--warn); opacity: 0.55; }

/* Header letters share the strip's flex geometry so each sits over its bar. */
.act-spark-head {
  flex: 1 1 0;
  min-width: 6px;
  max-width: 26px;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
}

.act-empty {
  margin: 0;
  padding: 16px;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--surface-raised);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

.act-note {
  margin: 0 0 8px;
  padding: 14px 16px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-muted);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.act-note strong { color: var(--text); }

/* ---- Company activity: sortable headers ------------------------------------
   Selectors are qualified with `.act-table th` because `.fin-table th { color:
   var(--text-muted) }` outranks a bare class on specificity — an unqualified
   `.act-sorted { color: var(--accent) }` silently lost, leaving the sorted
   column indistinguishable from the others. */
.act-table th.act-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.act-table th.act-sortable:hover { color: var(--text); background: var(--accent-soft); }
.act-table th.act-sorted { color: var(--accent); }
.act-table th.act-sorted .sort-arrow { color: var(--accent); }

/* ---- Instance picker -------------------------------------------------------
   Shown when a company's sessions span more than one instance, because there is
   no single correct destination in that case. */
.act-pick-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.act-pick {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
  padding: 20px;
}

.act-pick-title { font-size: 15px; font-weight: 700; color: var(--text); }

.act-pick-sub {
  margin: 4px 0 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.act-pick-list { display: flex; flex-direction: column; gap: 8px; }

.act-pick-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.act-pick-opt:hover { border-color: var(--accent); background: var(--accent-soft); }
.act-pick-inst { font-weight: 700; font-family: var(--font-mono, ui-monospace, monospace); }
.act-pick-go { font-size: 12px; color: var(--text-muted); }

.act-pick-cancel {
  margin-top: 12px;
  width: 100%;
  padding: 9px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.act-pick-cancel:hover { color: var(--text); border-color: var(--border-strong); }

/* ---- Stale vendor data notice ----------------------------------------------
   Shown when a breakdown is served from the last good snapshot because the live
   vendor call failed. Deliberately prominent: month-old numbers presented as
   live are worse than an honest error. */
.fin-stale {
  margin: 0 0 14px;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: var(--radius-sm);
}
.fin-stale strong { color: var(--warn); }

/* ---- Realtime LLM telemetry page (#realtime) ------------------------------- */
.rt-tabs { margin-bottom: 18px; }
.rt-panel { display: none; }
.rt-panel.active { display: block; }
.rt-kpis { margin-bottom: 18px; }
@media (min-width: 1100px) { .kpi-row.rt-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rt-unit { font-size: 0.5em; font-weight: 600; margin-left: 3px; opacity: 0.8; }
.rt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; margin-bottom: 16px; }
.rt-card { margin-bottom: 16px; }
.rt-grid .rt-card { margin-bottom: 0; }
.rt-h3 { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: 0.01em; }
.rt-why { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); max-width: 78ch; }
.rt-why code, .rt-table code, .act-note code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--surface-sunken); padding: 1px 5px; border-radius: 4px; }
.rt-section { margin: 26px 0 12px; font-size: 16px; font-weight: 700; color: var(--text); }
.rt-dim { color: var(--text-faint); font-weight: 400; font-size: 12px; }
.rt-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-variant-numeric: tabular-nums; }
.rt-more { margin: 8px 0 0; }

.rt-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.rt-status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rt-st-good { background: var(--success-bg); color: var(--success); }
.rt-st-warn { background: var(--warn-bg); color: var(--warn); }
.rt-st-bad { background: var(--danger-bg); color: var(--danger); }
.rt-st-neutral { background: var(--surface-sunken); color: var(--text-muted); }

.rt-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); margin: 0 0 10px; }
.rt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rt-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.rt-chart { width: 100%; overflow-x: auto; }
.rt-chart svg { width: 100%; height: auto; display: block; font-family: inherit; }
.rt-chart .rt-gl { stroke: var(--viz-grid); }
.rt-chart .rt-axis { stroke: var(--border-strong); }
.rt-chart text { fill: var(--text-muted); font-size: 12px; }
.rt-chart .rt-tick { fill: var(--text-faint); font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rt-chart .rt-tick-sm { font-size: 10px; }
.rt-chart .rt-lbl { fill: var(--text); font-weight: 600; }
.rt-chart .rt-dl { fill: var(--text); font-weight: 600; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rt-chart .rt-dl-on { fill: #fff; font-weight: 600; font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.rt-chart .rt-mono { fill: var(--text-muted); }
.rt-chart .rt-bar { rx: 3; ry: 3; }
.rt-chart a.rt-hit { cursor: pointer; }
.rt-chart a.rt-hit:hover .rt-bar { opacity: 0.8; }
.rt-chart a.rt-hit:hover rect[fill="transparent"] { fill: var(--accent-soft); opacity: 0.5; }

/* The numeric columns share .fin-num; the first column in .fin-table is a flex
   box by default, which breaks row borders — same fix as the activity table. */
.rt-table td:first-child { display: table-cell; font-weight: 400; }
.rt-table th { background: var(--surface-raised); }
.rt-table td b { font-weight: 700; color: var(--text); }

.rt-findings { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 8px; }
.rt-find { padding: 16px 18px; }
.rt-find p { margin: 0; font-size: 13.5px; color: var(--text-muted); }
.rt-find-k { font-size: 15px; font-weight: 700; margin: 6px 0; color: var(--text); text-wrap: balance; }
.rt-tag { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 600; color: var(--text-faint); border: 1px solid var(--border-strong); border-radius: 4px; padding: 3px 6px; }

/* Event browser */
.rt-ev-filters { padding: 14px 18px; }
.rt-ev-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.rt-ev-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); min-width: 150px; }
.rt-ev-field span { font-weight: 600; letter-spacing: 0.02em; }
.rt-ev-field .filter-input { width: 100%; }
.rt-ev-grow { flex: 1 1 220px; }
.rt-ev-actions { display: flex; gap: 8px; }
.rt-ev-active { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rt-chip { border: 1px solid var(--border-strong); background: var(--accent-soft); color: var(--text); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.rt-chip:hover { border-color: var(--accent); }
.rt-ev-card { padding-top: 10px; }
.rt-ev-table { font-size: 12.5px; }
.rt-ev-table td { vertical-align: top; }
.rt-ev-row-item { cursor: pointer; }
.rt-ev-row-item:hover, .rt-ev-row-item.rt-open { background: var(--accent-soft); }
.rt-ev-row-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rt-ev-time { white-space: nowrap; }
.rt-ev-session { white-space: nowrap; }
.rt-ev-detail { max-width: 520px; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--text); }
.rt-link { border: none; background: none; padding: 0; color: var(--accent-text); cursor: pointer; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.rt-link:hover { text-decoration: underline; }
.rt-type { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; padding: 2px 6px; border-radius: 4px; background: var(--surface-sunken); color: var(--text-muted); white-space: nowrap; }
.rt-type-error { background: var(--danger-bg); color: var(--danger); font-weight: 600; }
.rt-type-response { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.rt-type-tool { background: var(--warn-bg); color: var(--warn); }
.rt-type-session { background: var(--success-bg); color: var(--success); }
.rt-type-conv { background: var(--info-bg); color: var(--info); }
.rt-ev-expand td { background: var(--surface-raised); padding: 12px 16px 16px; }
.rt-ev-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 18px; margin-bottom: 10px; }
.rt-kv { display: flex; gap: 8px; font-size: 12px; min-width: 0; }
.rt-kv span { color: var(--text-faint); flex: 0 0 150px; }
.rt-kv b { font-weight: 500; color: var(--text); overflow-wrap: anywhere; min-width: 0; flex: 1 1 auto; }
.rt-json { margin: 0; max-height: 420px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; line-height: 1.45; color: var(--text); white-space: pre-wrap; word-break: break-word; }

/* Router plan */
.rt-fig { margin: 0; }
.rt-fig svg { width: 100%; height: auto; display: block; color: var(--text); }
.rt-fig figcaption { font-size: 13px; color: var(--text-muted); margin-top: 10px; max-width: 80ch; }
.rt-arch-accent { stroke: var(--accent); }
.rt-arch-accent-t { fill: var(--accent-text); }
.rt-arch-danger { fill: var(--danger); }
.rt-arch-ok { fill: var(--success); }
.rt-plan td:first-child { white-space: nowrap; color: var(--text-muted); }
.rt-plan td { font-size: 13px; }
.rt-pri { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border-strong); color: var(--text-muted); }
.rt-pri-p0 { border-color: var(--danger); color: var(--danger); }

/* Realtime → Token profile page + event inspector tree */
.rt-h3-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rt-deep { font-size: 12.5px; font-weight: 600; color: var(--accent-text); text-decoration: none; white-space: nowrap; }
.rt-deep:hover { text-decoration: underline; }
.rt-warn-num { color: var(--danger); font-weight: 700; }
.rtk-ring { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--danger); background: transparent; display: inline-block; }
.rt-chart .rtk-zc { fill: var(--danger); }
.rtk-turn-table th { white-space: nowrap; }
.rt-ev-views { min-width: 0; }
.rt-ev-viewbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.rt-tree { font-size: 12.5px; line-height: 1.5; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; max-height: 560px; overflow: auto; }
.rt-tree details { margin: 0; }
.rt-tree summary { cursor: pointer; color: var(--text-faint); font-size: 11.5px; user-select: none; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.rt-tree summary::before { content: '▸'; font-size: 11px; transition: transform 0.15s ease; }
.rt-tree details[open] > summary::before { transform: rotate(90deg); }
.rt-tree summary:hover { color: var(--text); }
.rt-tree-body { border-left: 1px solid var(--border); margin-left: 4px; padding-left: 12px; }
.rt-kv2 { display: flex; gap: 10px; align-items: baseline; min-width: 0; padding: 1px 0; }
.rt-kv2-block { flex-direction: column; gap: 2px; align-items: stretch; }
.rt-key { color: var(--accent-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; flex: 0 0 auto; }
.rt-key::after { content: ':'; color: var(--text-faint); }
.rt-str { color: var(--text); overflow-wrap: anywhere; }
.rt-str-long { color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-raised); border-radius: 4px; padding: 6px 8px; margin: 2px 0 4px; }
.rt-prim { color: var(--success); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.rt-null { color: var(--text-faint); font-style: italic; }
.rt-badge { display: inline-block; align-self: flex-start; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warn); background: var(--warn-bg); border-radius: 3px; padding: 0 5px; margin-right: 6px; vertical-align: middle; }

/* Full-screen event inspector */
.rt-ev-viewbtns { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rt-fs-overlay { position: fixed; inset: 0; background: var(--scrim); z-index: 1000; display: flex; align-items: stretch; justify-content: center; padding: 18px; }
.rt-fs { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); width: 100%; max-width: 1600px; display: flex; flex-direction: column; min-height: 0; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
.rt-fs-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.rt-fs-title { font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
.rt-fs-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 14px 18px 18px; }
.rt-tree-fs { max-height: none; font-size: 13.5px; border: none; padding: 0; }
.rt-json-fs { max-height: none; font-size: 12.5px; }

/* Realtime → Token economics (embedded generated report) */
.rt-frame-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 12px; font-size: 13px; }
.rt-frame { width: 100%; min-height: calc(100vh - 300px); height: 1400px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }

/* Realtime → Agents */
.rt-agents-table th, .rt-agents-table td { white-space: nowrap; }
.rt-agents-table td:first-child { white-space: normal; min-width: 180px; }
.rt-agent-link { color: var(--accent-text); text-decoration: none; }
.rt-agent-link:hover { text-decoration: underline; }
.rt-agent-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.rt-agent-name { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rt-agent-kpis { margin-bottom: 14px; }
.rt-agent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; }
.rt-h4 { margin: 12px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); }
.rt-agent-spark { height: 60px; max-width: 100%; }
.rt-agent-spark .act-spark-col { max-width: 18px; }
.rt-agent-spark-cap { margin-top: 4px; }
.act-spark-bar.rt-spark-err { background: var(--danger); }
.rt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-chips .rt-chip b { font-weight: 700; margin-left: 4px; }

/* Realtime → Agents: cost distribution strip */
.rt-strip { display: flex; width: 100%; height: 18px; border-radius: 4px; overflow: hidden; background: var(--surface-sunken); margin-bottom: 8px; }
.rt-strip-seg { display: block; height: 100%; }
.rt-strip-seg + .rt-strip-seg { border-left: 2px solid var(--surface); }
.rt-strip-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--text-muted); margin-bottom: 14px; }
.rt-strip-item { display: inline-flex; align-items: center; gap: 6px; }
.rt-strip-item i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.rt-strip-item b { color: var(--text); font-weight: 700; }
.rt-table tr.rt-total-row td { border-top: 2px solid var(--border-strong); background: var(--surface-raised); }

/* AWS unit-rate provenance (Cost by Company, Company Insight, Settings) */
.aws-rate-note { margin: 8px 0 18px; font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
.aws-rate-note .aws-rate-lead { font-weight: 600; color: var(--text); }
.aws-rate-note .aws-rate-item { display: inline-block; margin-right: 18px; }
.aws-rate-note b { color: var(--text); font-variant-numeric: tabular-nums; }
.aws-rate-note .muted { color: var(--text-faint); }
.aws-rate-stale { color: var(--warn); font-weight: 600; }
.rate-derived-tag { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--success-bg); color: var(--success); vertical-align: middle; }
.cost-src { font-size: 11px; font-weight: 500; color: var(--text-faint); margin-left: 6px; font-variant-numeric: tabular-nums; }

.instance-messages { color: var(--text-faint); }

/* Instance dashboard — usage block */
.usage-card { margin-bottom: 16px; }
.usage-kpis { margin: 4px 0 16px; }
@media (min-width: 1100px) { .kpi-row.usage-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.usage-kpis .stat-value .fin-delta { font-size: 12px; font-weight: 700; margin-left: 6px; vertical-align: middle; }
.usage-table td.usage-cell { position: relative; }
.usage-bar { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: var(--surface-sunken); vertical-align: middle; margin-right: 10px; overflow: hidden; }
.usage-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.usage-bar-sess > span { background: var(--viz-2); }
.usage-table .muted { color: var(--text-faint); font-size: 12px; }
.usage-kpis .stat-value .usage-mtd { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }

.fin-scope-note { margin: 0 0 10px; font-size: 12.5px; color: var(--text-muted); }
.fin-scope-note b { color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* Instances page — shared-service rows (ASR, Agent Assist) */
.instance-service-row { background: var(--surface-raised); }
.instance-service-row td { border-top: 2px solid var(--border-strong); }
.instance-service-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--info-bg); color: var(--info); vertical-align: middle; }
.instance-service-note { max-width: 340px; }
.instance-service-src { color: var(--text-muted); font-weight: 600; }
.instances-svc-section { margin-top: 28px; }
.instances-svc-title { margin: 0 0 4px; font-size: 16px; }
.instances-svc-sub { margin: 0 0 12px; color: var(--text-muted); font-size: 13px; max-width: 720px; }
.svc-page-note { margin: 0 0 10px; }
.instances-svc-table .instance-service-note { max-width: 340px; }

.rt-arch-intro { margin: 0 0 14px; max-width: 100%; font-size: 13.5px; }


/* ---- Dashboard page organisation ------------------------------------------
   Toolbar (scope + month) → KPIs → titled sections, each pairing a trend with
   the share that explains it. Sections carry the hierarchy, so cards inside
   them keep short titles. */
.dash { gap: 22px; }
.dash-toolbar { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.dash-toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-toolbar .dash-head-title h2 { font-size: 22px; }
.dash-toolbar .dash-filter { flex-wrap: wrap; }
.dash-mtd-chip { font-size: 11px; font-weight: 700; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 999px; background: var(--info-bg); color: var(--info); }
.dash-month-picker { display: inline-flex; align-items: center; gap: 10px; }
.dash-month-picker select { min-width: 190px; }

.dash-section { display: flex; flex-direction: column; gap: 12px; }
.dash-section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dash-section-head h3 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); }
.dash-section-head p { margin: 0; font-size: 12.5px; color: var(--text-muted); }

/* Trend (wide) + share (narrow) side by side. minmax(0, …) lets the SVG shrink. */
.dash-pair { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(290px, 1fr); gap: 16px; align-items: stretch; }
.dash-pair > .card { margin: 0; }
.dash-share-card { display: flex; flex-direction: column; }
.dash-donut-wrap { display: flex; justify-content: center; padding: 2px 0 12px; }
.dash-share-list { display: flex; flex-direction: column; gap: 2px; }
.dash-share-li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 42px; align-items: center; gap: 9px; padding: 5px 6px; border-radius: var(--radius-sm); font-size: 12.5px; }
.dash-share-li:hover { background: var(--neutral-bg); }
.dash-share-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-share-val { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.dash-share-pct { color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }

.dash-grid-2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }

@media (max-width: 1100px) {
  .dash-pair { grid-template-columns: 1fr; }
  .dash-share-card { display: grid; grid-template-columns: auto 1fr; column-gap: 24px; align-items: center; }
  .dash-share-card .dash-card-title { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .dash-share-card { display: flex; }
  .dash-grid-2 { grid-template-columns: 1fr; }
  .dash-month-picker select { min-width: 0; }
}

/* ==== Dashboard v3: hero + tiles, insights, scorecard, tabbed companies ==== */
.dash-fresh { font-size: 12px; color: var(--text-faint); margin-left: 4px; }

/* Hero (left) + six metric tiles (right) */
.dash-top-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); gap: 16px; }
.dash-hero { margin: 0; padding: 22px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  background: linear-gradient(160deg, var(--accent-soft), var(--surface) 70%); border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); }
.dash-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.dash-hero-value { font-size: 38px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; color: var(--text); }
.dash-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; font-size: 13.5px; color: var(--text); }
.dash-hero-meta strong { font-variant-numeric: tabular-nums; }
.dash-progress { margin-top: 14px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--border)); overflow: hidden; }
.dash-progress span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.dash-progress-label { margin-top: 6px; font-size: 11.5px; color: var(--text-faint); }
.dash-hero-svg { width: 100%; height: auto; display: block; }
.dash-hero-bar { fill: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.dash-hero-bar.sel { fill: var(--accent); }
.dash-hero-ghost { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 3; }
.dash-hero-bl { font-size: 11px; font-weight: 600; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.dash-hero-bl.sel { fill: var(--text); font-weight: 700; }
.dash-hero-ml { font-size: 11px; fill: var(--text-faint); }
.dash-hero-ml.sel { fill: var(--text); font-weight: 700; }

.dash-kt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dash-kt { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius, 10px); text-align: left; font: inherit; color: inherit; min-width: 0; }
.dash-kt.clickable { cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
.dash-kt.clickable:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.dash-kt.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-kt-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dash-kt-label { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-kt-value { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--text); }
.dash-kt-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; min-height: 30px; }
.dash-kt-sub { font-size: 11.5px; color: var(--text-faint); line-height: 1.35; }
.dash-kt .dash-spark { flex: 0 0 auto; width: 84px; height: 26px; margin: 0; color: var(--accent); }

/* Delta pill: small, never the size of the value it qualifies */
.dash-dd { display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-dd.bad { color: var(--danger); background: var(--danger-bg); }
.dash-dd.good { color: var(--success); background: var(--success-bg); }
.dash-dd.neutral, .dash-dd.flat { color: var(--text-muted); background: var(--neutral-bg); }

/* Insights */
.dash-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.dash-insight { padding: 12px 14px; border-radius: var(--radius, 10px); background: var(--surface); border: 1px solid var(--border); }
.dash-insight-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); }
.dash-insight-kind i { width: 7px; height: 7px; border-radius: 50%; background: var(--info); }
.dash-insight.bad .dash-insight-kind i { background: var(--danger); }
.dash-insight.good .dash-insight-kind i { background: var(--success); }
.dash-insight p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.dash-insight b { font-variant-numeric: tabular-nums; }

/* Trends */
.dash-shared-legend { margin: 0 0 0 auto; }
.dash-trends .dash-card-title { margin-bottom: 6px; }

/* Scorecard */
.dash-score { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-score th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dash-score td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.dash-score .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-score tbody tr[tabindex] { cursor: pointer; transition: background 0.1s; }
.dash-score tbody tr[tabindex]:hover, .dash-score tbody tr[tabindex]:focus-visible { background: var(--accent-soft); outline: none; }
.dash-score tbody tr.sel { background: var(--accent-soft); }
.dash-score tfoot td { font-weight: 700; border-bottom: none; border-top: 2px solid var(--border-strong); }
.dash-sc-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.dash-sc-spark { width: 96px; }
.dash-sc-spark .dash-spark { width: 90px; height: 24px; margin: 0; color: var(--accent); }
.dash-twin { display: flex; flex-direction: column; gap: 4px; min-width: 170px; }
.dash-twin-row { display: grid; grid-template-columns: 1fr 34px; align-items: center; gap: 8px; }
.dash-twin-bar { height: 7px; border-radius: 999px; background: var(--neutral-bg); overflow: hidden; }
.dash-twin-bar i { display: block; height: 100%; border-radius: 999px; }
.dash-twin-row.sess .dash-twin-bar i { background: var(--text-faint); opacity: 0.55; }
.dash-twin-v { font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: right; color: var(--text-muted); }
.dash-twin-key { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.dash-twin-key i { width: 14px; height: 7px; border-radius: 999px; display: inline-block; }
.dash-twin-key i.c { background: var(--accent); }
.dash-twin-key i.s { background: var(--text-faint); opacity: 0.55; margin-left: 8px; }

/* Companies: one card, two columns of four, read top-down */
.dash-co-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 2px 28px; }
.dash-co-row { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; background: none; border: none; padding: 8px; border-radius: var(--radius-sm); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.dash-co-row:hover { background: var(--accent-soft); }
.dash-co-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-co-row .dash-top-bar { flex: 0 0 22%; }
.dash-co-val { flex: 0 0 96px; text-align: right; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-co-pct { flex: 0 0 36px; text-align: right; font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

@media (max-width: 1200px) {
  .dash-top-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .dash-kt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-co-grid { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .dash-shared-legend { margin-left: 0; }
}
@media (max-width: 560px) {
  .dash-kt-grid { grid-template-columns: 1fr; }
  .dash-hero-value { font-size: 30px; }
}
/* Tile foot: the note on its own line, the sparkline as a full-width strip */
.dash-kt-foot { flex-direction: column; align-items: stretch; gap: 6px; }
.dash-kt .dash-spark { width: 100%; height: 28px; }
/* Instance chips in the company rows never clip */
.dash-co-row .dash-top-insts { flex: 0 0 auto; max-width: none; overflow: visible; }
.dash-co-row .dash-top-insts::after { content: none; }

/* ==== Dashboard alignment pass ==========================================
   The dashboard renders inside #dashboard-cost-card-container, which is a
   white, shadowed card with zero padding (it is also the frame for the
   per-instance Cost by Service table). Holding the dashboard's own cards it
   produced cards flush against a card. For the dashboard it becomes a plain
   layout box, so every card sits on the page background on one grid. */
.dashboard-table-wrapper:has(> .dash),
.dashboard-table-wrapper:has(> .sk-status) {
  background: transparent; box-shadow: none; border: 0; border-radius: 0; padding: 0; overflow: visible;
}
/* One card language: same padding, radius and border everywhere on the page */
.dash .dash-card, .dash .dash-hero { padding: 20px; margin: 0; border-radius: var(--radius, 12px); box-shadow: var(--shadow-sm); }
.dash .dash-kt { padding: 16px; border-radius: var(--radius, 12px); box-shadow: var(--shadow-sm); }
.dash .dash-insight { padding: 14px 16px; border-radius: var(--radius, 12px); box-shadow: var(--shadow-sm); }
.dash .dash-card-title { margin: 0 0 12px; line-height: 1.3; }
.dash .dash-card-head { margin-bottom: 12px; min-height: 30px; }
.dash .fin-chart-wrap { margin: 0; }
/* Tables inside a dashboard card: no second frame */
.dash .dash-card .table-wrap { border: 0; border-radius: 0; }
.dash-score-fixed { table-layout: fixed; }
.dash-score th:first-child, .dash-score td:first-child { padding-left: 4px; }
.dash-score th:last-child, .dash-score td:last-child { padding-right: 4px; }
.dash-score td { overflow: hidden; text-overflow: ellipsis; }
.dash-score .dash-twin { min-width: 0; }
.dash-sc-spark { width: auto; }
.dash-sc-spark .dash-spark { width: 100%; max-width: 110px; margin-left: auto; }
/* Toolbar sits on the page background: title, month and filter on one left edge */
.dash-toolbar { padding: 0 0 16px; }
.dash-toolbar .dash-filter { margin-left: 0; }
/* Section heads line up with card edges; the shared legend never overflows */
.dash-section-head { min-height: 20px; }
.dash-shared-legend { flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; }
/* Equal-height rows */
.dash-kt-grid { grid-auto-rows: 1fr; }
.dash-insights { align-items: stretch; }
.dash-grid-2 { align-items: stretch; }

/* AWS line split by service (Cost by Service page) */
.aws-split-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.aws-split-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.aws-split-caret { display: inline-block; font-size: 10px; color: var(--text-muted); transition: transform 0.15s; }
.aws-split-toggle[aria-expanded="true"] .aws-split-caret { transform: rotate(90deg); }
.aws-split-hint { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 1px 7px; border-radius: 999px; margin-left: 4px; }
.aws-split-row td { font-size: 12.5px; color: var(--text-muted); padding-top: 5px; padding-bottom: 5px; background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.aws-split-row td:first-child { padding-left: 28px; }
.aws-split-name::before { content: ''; display: inline-block; width: 8px; height: 1px; background: var(--border-strong); margin-right: 8px; vertical-align: middle; }
.aws-split-mark { color: var(--text-faint); margin-left: 2px; }
.aws-split-na { color: var(--text-faint); }
.aws-split-note td { font-size: 11.5px; color: var(--text-faint); white-space: normal; }
/* EC2 – Compute by purchase option: one level deeper than the service rows */
.aws-split-sub td { font-size: 12px; }
.aws-split-sub td:first-child { padding-left: 52px; }
.aws-split-sub .aws-split-name::before { width: 6px; background: var(--border); }
/* Azure (LLM) by Azure service: the bill total row closes the group */
.azure-bill-row td { font-weight: 600; color: var(--text); border-top: 1px dashed var(--border-strong); }
/* EC2 – Compute's own toggle sits at the service-row indent */
.aws-split-subtoggle { font-size: 12.5px; color: var(--text-muted); }
.aws-split-subtoggle .aws-split-hint { font-size: 10.5px; }