
    /* Audit fix (2026-04-26) — Inter + JetBrains Mono are now loaded
       via a `<link rel="stylesheet">` in <head>, injected by
       `_inject_favicon_links`. The pre-fix `@import url(...)` inside
       this inline <style> block forced a serialized fetch (the parser
       won't continue parsing CSS until the @import resolves), which
       added 150–300ms to FCP on a cold connection. The link tag also
       carries a `<link rel="preconnect">` to warm the TLS handshake
       in parallel. Self-hosting under static/fonts/ remains the
       longer-term goal for the EU-tenant privacy posture; this is
       the perf-only intermediate step. */

    /*
     * Shared design system — base layer for every tenant dashboard.
     *
     * Every route that renders HTML (marketplace, agency, cashflow,
     * payables, partner-facing supplier-split) pulls in this constant
     * so typography, colour tokens, spacing, card surfaces, tables,
     * and bar charts are identical across the product. Page-specific
     * style blocks come AFTER this base and can override locally,
     * but the default should always be "just use the base class".
     *
     * Palette + tokens derive from the cashflow dashboard, which was
     * the internal high-water mark before this unification pass.
     * Names are intent-based (--positive, --negative, --text-1)
     * rather than hue-based, so colour decisions land in one file.
     */
    /* Design tokens (:root + [data-theme="dark"]) live in
       /static/tokens.css — extracted 2026-04-22 so the block ships
       once per browser session (long-cache) instead of duplicating
       inline in every HTML response. Every route's <head> picks it
       up via the after_request link-injection in
       scripts/serve_dashboard.py::_inject_style_links. */
    * { box-sizing: border-box; }
    html, body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont,
                   'Segoe UI', Roboto, sans-serif;
      background: var(--bg);
      color: var(--fg);
      font-size: 14px;
      line-height: 1.45;
      margin: 0;
      -webkit-font-smoothing: antialiased;
      font-feature-settings: "cv11", "ss01", "ss03";
    }
    /* JetBrains Mono for numbers, currency, SKUs, timestamps — applied
       explicitly via `.mono` or `<code>`. Always with tabular-nums. */
    .mono, code, pre, kbd, samp,
    .tabular, table td.mono, table td.numeric {
      font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular,
                   Menlo, Consolas, monospace;
      font-variant-numeric: tabular-nums;
    }

    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }

    /* K6 topbar shell. Tool switching lives on /home. */
    .k6-shell {
      min-height: 100vh;
      background: var(--bg);
      color: var(--fg);
    }
    .k6-home-link {
      width: 32px; height: 32px;
      border-radius: 8px;
      background: var(--accent);
      color: var(--accent-fg);
      display: inline-flex; align-items: center; justify-content: center;
      font-family: 'Inter', sans-serif;
      font-weight: 800; font-size: 12px;
      letter-spacing: 0;
      text-decoration: none;
      flex-shrink: 0;
      box-shadow: var(--shadow-sm);
    }
    .k6-home-link:hover { text-decoration: none; filter: brightness(0.96); }
    .k6-skip-link {
      position: absolute;
      top: -100px; left: 0;
      padding: 10px 16px;
      background: var(--accent);
      color: var(--accent-fg);
      font-weight: 600; font-size: 13px;
      text-decoration: none;
      border-bottom-right-radius: var(--radius-sm);
      z-index: 9999;
    }
    .k6-skip-link:focus,
    .k6-skip-link:focus-visible {
      top: 0;
      outline: 2px solid var(--fg);
      outline-offset: 2px;
    }
    .k6-main {
      min-width: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background: var(--bg);
    }
    .k6-topbar {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: env(safe-area-inset-top, 0px) 24px 0;
      height: calc(56px + env(safe-area-inset-top, 0px));
      border-bottom: 1px solid var(--border);
      background: var(--panel);
      position: sticky;
      top: 0;
      z-index: 5;
    }
    .k6-crumb {
      font-size: 13px;
      color: var(--fg-3);
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .k6-crumb-sep { color: var(--fg-4); display: inline-flex; }
    .k6-crumb-here { color: var(--fg); }
    .k6-topbar-spacer { flex: 1; }
    .k6-topbar-btn {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--fg-2);
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background 0.12s;
      flex-shrink: 0;
    }
    .k6-topbar-btn:hover { background: var(--panel-2); }
    a.k6-topbar-btn:hover { text-decoration: none; }
    .k6-logout-form { margin: 0; padding: 0; display: inline-flex; }

    @media (max-width: 768px) {
      .k6-topbar { padding: 0 12px; gap: 8px; }
      .k6-crumb { font-size: 12px; overflow: hidden; }
      .k6-crumb span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .va-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -12px;
        padding: 0 12px 2px;
      }
      .va-pills::-webkit-scrollbar { display: none; }
      .va-pill { flex-shrink: 0; white-space: nowrap; }
    }

    /* Universal content container. Sits inside <main> and centers
       relative to the full tool canvas. */
    .wrap {
      max-width: 1400px;
      margin: 0 auto;
      padding: 18px 24px 48px;
      width: 100%;
    }
    body[data-density="compact"] .wrap { padding: 12px 20px 40px; }
    @media (max-width: 720px) {
      .wrap { padding: 18px 16px 40px; }
    }

    /* ─── Page header / hero ───────────────────────────── */
    .page-header { margin-bottom: 28px; }
    .page-header .eyebrow {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-3);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      margin: 0 0 8px;
    }
    .page-header h1 {
      margin: 0 0 8px;
      font-size: 34px;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--text-1);
      line-height: 1.05;
    }
    .page-lede {
      margin: 0;
      font-size: 15px;
      color: var(--text-2);
      font-weight: 500;
      max-width: 62ch;
    }

    /* ─── Card surface ─────────────────────────────────── */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px 32px;
      box-shadow: var(--shadow-sm);
      margin-bottom: 20px;
      /* Phase K (2026-04-22) — wide tables (/users, /audit,
         stock-coverage, drift-overview, supplier-split detail,
         listing-quality, etc.) live inside .card. Without a scroll
         container they pushed the surrounding chrome off the right
         edge of the viewport on narrower screens. overflow-x: auto
         is the universal escape hatch; table widths stay honest and
         a horizontal scrollbar only appears when actually needed. */
      overflow-x: auto;
    }
    .card > h2 {
      margin: 0 0 4px;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.015em;
      color: var(--text-1);
    }
    .card > .card-sub {
      margin: 0 0 20px;
      font-size: 13px;
      color: var(--text-3);
      font-weight: 500;
      max-width: 62ch;
    }
    @media (max-width: 560px) {
      .card { padding: 22px 20px; border-radius: 14px; }
    }

    /* Phase K (2026-04-22) — overflow escape for every common
       section-shaped container, so wide tables (/users, /audit,
       drift-overview, listing-quality, supplier-split detail,
       stock-coverage) get a local horizontal scrollbar instead
       of pushing the page chrome off-screen. Covers:
         .card        shared card surface (most auth'd surfaces)
         .section     cashflow / supplier-split / brand-ops
         .cf-drill-body  per-classification drill-down bodies
         .agency-vat-body  agency per-client VAT tables
       Keep this as a broad rule rather than per-table wrappers
       — HTML emitted across 20+ routes, a single CSS entry is
       the cheapest way to cover them uniformly. */
    .section,
    section.section,
    .cf-drill-body,
    .agency-vat-body {
      overflow-x: auto;
    }
    /* Belt-and-suspenders: any table inside the page wrap caps
       its own width to the container so long strings don't push
       the cell further than the viewport allows. The parent's
       overflow-x still catches overly-wide numeric columns that
       can't shrink. */
    .wrap table { max-width: 100%; }

    /* ─── Stat grid (3-across, stacks on mobile) ───────── */
    .stat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-bottom: 32px;
    }
    @media (max-width: 640px) { .stat-grid { grid-template-columns: 1fr; } }
    .stat {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 22px 24px;
      box-shadow: var(--shadow-sm);
      transition: border-color .18s ease, box-shadow .18s ease;
    }
    .stat:hover {
      border-color: var(--border-strong);
      box-shadow: var(--shadow-md);
    }
    .stat-label {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-3);
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .stat-value {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-top: 8px;
      font-variant-numeric: tabular-nums;
      line-height: 1.1;
      color: var(--text-1);
    }
    .stat-value.positive { color: var(--positive); }
    .stat-value.negative { color: var(--negative); }
    .stat-sub {
      margin-top: 6px;
      font-size: 12px;
      color: var(--text-3);
      font-weight: 500;
    }

    /* ─── Base table (can be overridden per-page) ──────── */
    table.k6-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    table.k6-table th {
      text-align: left;
      background: var(--panel-2);
      color: var(--text-2);
      padding: 10px 12px;
      font-weight: 700;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      border-bottom: 1px solid var(--border);
    }
    table.k6-table th:first-child { border-top-left-radius: 8px; }
    table.k6-table th:last-child  { border-top-right-radius: 8px; }
    table.k6-table th.num { text-align: right; }
    table.k6-table td {
      padding: 12px;
      border-bottom: 1px solid var(--border-soft);
      color: var(--text-1);
    }
    table.k6-table td.num {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    table.k6-table td.commission { font-weight: 700; color: var(--text-1); }
    table.k6-table td.negative-num,
    table.k6-table .negative-num { color: var(--negative); }
    table.k6-table tr:last-child td { border-bottom: none; }
    table.k6-table tr:hover td { background: var(--panel-2); }

    /* ─── Bar chart primitive ──────────────────────────── */
    .bar-chart { display: flex; flex-direction: column; gap: 12px; }
    .bar-row {
      display: grid;
      grid-template-columns: 160px 1fr 140px;
      align-items: center;
      gap: 16px;
    }
    @media (max-width: 640px) {
      .bar-row { grid-template-columns: 110px 1fr 110px; gap: 10px; }
    }
    .bar-label { font-size: 13px; color: var(--text-1); font-weight: 600; }
    .bar-track {
      height: 28px;
      background: var(--panel-2);
      border-radius: 8px;
      position: relative;
      overflow: hidden;
    }
    .bar-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--fg), var(--fg-3));
      border-radius: 8px;
      transition: width .3s ease;
    }
    .bar-fill.negative {
      background: linear-gradient(90deg, var(--neg), var(--neg-soft));
    }
    .bar-value {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-1);
      font-variant-numeric: tabular-nums;
      text-align: right;
    }
    .bar-value.negative { color: var(--negative); }

    /* ─── Tags / pills ─────────────────────────────────── */
    .tag {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 9px;
      border-radius: 999px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      vertical-align: middle;
    }
    .tag-positive { background: var(--positive-bg); color: var(--positive); }
    .tag-warn     { background: var(--warning-bg);  color: var(--warning);  }
    .tag-neg      { background: var(--negative-bg); color: var(--negative); }
    .tag-muted    { background: var(--panel-2);     color: var(--text-2);   }

    /* ─── Formula / audit block ────────────────────────── */
    .formula {
      background: var(--panel-2);
      border-left: 3px solid var(--accent);
      padding: 16px 20px;
      border-radius: var(--radius-sm);
      margin-top: 20px;
      font-size: 14px;
      color: var(--text-2);
    }
    .formula strong { color: var(--text-1); }
    .formula code {
      background: var(--panel);
      border: 1px solid var(--border);
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
      color: var(--text-1);
      font-weight: 700;
      font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
    }

    /* ─── Page footer ──────────────────────────────────── */
    .page-footer {
      margin-top: 48px;
      padding-top: 24px;
      border-top: 1px solid var(--border);
      font-size: 12px;
      color: var(--text-3);
      text-align: center;
    }
    .page-footer p { margin: 4px 0; }
    .page-footer a {
      color: var(--text-2);
      text-decoration: none;
      font-weight: 600;
    }
