/*
 * K6 OS — mobile responsive layer (2026-04-23).
 *
 * Every rule in this file is scoped under `@media (max-width: 768px)`
 * and is additive — zero effect on desktop (≥ 769px). Source of
 * truth for the design is
 * `docs/design/design_handoff_k6_os_mobile/README.md` + its `src/
 * mobile/*.jsx` references.
 *
 * What lives here:
 *   1. Global shell — push main-column bottom padding to clear the
 *      tab bar; kill horizontal overflow; tighten topbar.
 *   2. Bottom tab bar — fixed 5-item nav, blur backdrop, accent
 *      active tint. Hooked from `_nav_bar()` + `render_sidebar_
 *      fragment()` in shared/dashboard.py.
 *   3. Per-screen responsive tweaks for /dashboard, /payables,
 *      /cashflow, /walker-health — everything else (agency,
 *      supplier-split, users, audit) still reads reasonably via
 *      the existing mobile-drawer shell + overflow-x:auto tables.
 *
 * Nothing in here is SmartScout-specific — the SmartScout Blueprint
 * ships its own mobile treatment in
 * `k6-smartscout/smartscout/chat_dashboard/app.py`.
 *
 * Cache: served via `/static/mobile.css` under the same `public,
 * max-age=31536000, immutable` header as tokens.css. Busting is
 * by filename (commit a new file) — no query string needed.
 */

/* ───────────────────────────────────────────────────────────
 * 1. Bottom tab bar — always emitted in HTML, visible only ≤768px.
 * ─────────────────────────────────────────────────────────── */

.k6-bottom-tabs {
  display: none;
}

@media (max-width: 768px) {
  /* ─── Shell / global ──────────────────────────────────── */

  /* Horizontal overflow guard. Tables + wide cards opt into their
     own scroll containers; body-level overflow keeps rogue content
     from forcing the whole viewport into a horizontal scroll at
     375px (primary test width). */
  html, body { overflow-x: hidden; }

  /* Every page's main content area gets clearance for the 58px +
     safe-area tab bar at the bottom. `.k6-main` wraps every native
     K6-OS page; `body[data-k6-sidebar-injected]` is the stamp the
     injected sidebar leaves on SmartScout pages. */
  .k6-main,
  body[data-k6-sidebar-injected] {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  }

  /* The crumb ellipsis (Finance · Te betalen, etc.) reads fine but
     it steals focus from the page title on phones — hide it and
     rely on the h1 inside the route's content area to name the
     screen. Matches the mobile handoff's "title + subtitle, no
     breadcrumb" header pattern. */
  .k6-topbar .k6-crumb { display: none; }

  /* ─── Bottom tab bar (new) ────────────────────────────── */

  .k6-bottom-tabs {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 2147483001;       /* above injected sidebar drawer */
    padding: 6px 0 calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--panel);
    background: color-mix(in oklch, var(--panel) 85%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-top: 0.5px solid var(--border);
  }
  .k6-bottom-tab {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 3px;
    padding: 4px 0;
    background: transparent;
    border: 0;
    color: var(--fg-3);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: color .12s;
  }
  .k6-bottom-tab:hover { color: var(--fg-2); }
  .k6-bottom-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -4px;
    border-radius: 8px;
  }
  .k6-bottom-tab-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    color: currentColor;
  }
  .k6-bottom-tab-icon svg { width: 22px; height: 22px; }
  .k6-bottom-tab-icon svg path,
  .k6-bottom-tab-icon svg rect,
  .k6-bottom-tab-icon svg circle { stroke-width: 1.7; }
  .k6-bottom-tab.active {
    color: var(--accent);
    font-weight: 600;
  }
  .k6-bottom-tab.active .k6-bottom-tab-icon svg path,
  .k6-bottom-tab.active .k6-bottom-tab-icon svg rect,
  .k6-bottom-tab.active .k6-bottom-tab-icon svg circle { stroke-width: 2; }
  .k6-bottom-tab-badge {
    position: absolute;
    top: -2px;                 /* closer to the icon on a short bar */
    right: 50%;
    margin-right: -18px;       /* right of the icon */
    min-width: 16px; height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-fg);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .k6-bottom-tab-badge.neg { background: var(--neg); }

  /* ─── Dashboard (/dashboard, va-* classes) ────────────── */

  /* Tiles stack vertically on mobile — the desktop variant uses a
     `grid-template-columns: repeat(3, 1fr)` layout that squeezes
     three 22px hero numbers into a 375px viewport. */
  .va-tiles {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .va-tile {
    padding: 16px 16px 14px;
    border-radius: 12px;
  }
  .va-tile-head { gap: 8px; }
  .va-tile-label { font-size: 11px; letter-spacing: 0.08em; }
  .va-tile-basis { font-size: 10px; }

  /* Sparklines scale to container. Desktop reserves a fixed width
     per row; mobile lets them use the full card width. */
  .va-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, auto);
    column-gap: 8px;
    font-size: 12px;
  }
  .va-row-spark,
  .va-row-spark svg {
    max-width: 100%;
    width: 100%;
    height: auto;
  }
  .va-row-value { font-size: 12px; }
  .va-row-delta { font-size: 10px; }

  /* Composition bar — let it span the full card width at 100%. */
  .va-composition-bar { width: 100%; }
  .va-composition-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
  }
  .va-legend-row { font-size: 11px; }

  /* Products table → card-stack layout. The desktop version is a
     `<table class="va-products-table">` with SKU + title + metrics
     per row; on mobile each <tr> becomes a self-contained card so
     thumbs + titles don't get squeezed against micro-numbers. Sort
     state (a URL query param) is preserved automatically — the
     server still renders rows in the sorted order, we just re-
     paint each row as a flex block. */
  .va-products-scroll { overflow-x: visible; padding: 0; }
  .va-products-table { display: block; width: 100%; }
  .va-products-table thead {
    /* Desktop th labels aren't useful when each row is its own
       card — hide the header row entirely at mobile width. The
       sort affordance is the sortable-header <a>, still reachable
       from the desktop breakpoint. */
    display: none;
  }
  .va-products-table tbody,
  .va-products-table tr {
    display: block;
    width: 100%;
  }
  .va-products-table tr {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 4px;
  }
  .va-products-table td {
    display: block;
    padding: 0;
    font-size: 13px;
    line-height: 1.35;
    min-width: 0;
  }
  .va-products-table td.thumb-cell {
    grid-row: 1 / span 3;
    grid-column: 1;
    width: 40px; height: 40px;
    align-self: start;
  }
  .va-products-table td.thumb-cell .k6-product-thumb {
    width: 40px; height: 40px;
  }
  .va-products-table td.text:first-of-type {
    /* First non-thumb text cell is the title — take full remaining
       column. */
    grid-column: 2;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .va-products-table td.num {
    grid-column: 2;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--fg-2);
    text-align: left;
  }
  .va-products-table td.num.sub { font-size: 11px; color: var(--fg-3); }
  .va-products-table td.muted {
    grid-column: 2;
    font-size: 10px;
    color: var(--fg-4);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  /* MP pill row inside the products head — hide the title/meta
     double-line and let the pills scroll horizontally (already
     handled via .va-pills in _BASE_CSS mobile block). */
  .va-products-head { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Variant pills row — ditto, scroll horizontally. */
  .va-variants {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -12px;
    padding: 0 12px 2px;
  }
  .va-variants::-webkit-scrollbar { display: none; }
  .va-variant-pill { flex-shrink: 0; white-space: nowrap; }

  /* ─── Payables (/payables) ────────────────────────────── */

  /* Cash tiles: 2-up grid per handoff. The native /payables page
     puts summary KPIs in a `.cf-teaser-grid` 4-col on desktop —
     2-col fits a 375px phone. */
  .cf-teaser-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .cf-teaser-tile { padding: 14px 12px; }
  .cf-teaser-label { font-size: 10px; }
  .cf-teaser-value { font-size: 18px; }
  .cf-teaser-hint { font-size: 11px; }

  /* Severity-striped invoice rows. The native /payables detail
     table has a `.wh-row` + severity class pattern (wh-red /
     wh-amber / wh-green). On mobile each row becomes a card with
     a coloured left strip that encodes the severity at a glance
     (red ≤-20d, amber ≤-7d, yellow <0d, green ≥0d) — matching
     the Betalen handoff spec. */
  .wrap[class*="payables"] table tbody tr,
  table.cf-table tbody tr {
    position: relative;
  }
  /* Don't try to card-stack the long payables detail table on
     mobile — the horizontal scroll via .card { overflow-x: auto }
     keeps all columns reachable. The severity strip is the
     primary mobile affordance. */
  table.cf-table {
    font-size: 12px;
  }

  /* ─── Cashflow (/cashflow) ────────────────────────────── */

  .cf-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -12px;
    padding: 0 12px 4px;
  }
  .cf-filter::-webkit-scrollbar { display: none; }
  .cf-filter > * { flex-shrink: 0; white-space: nowrap; }

  /* Weekly bars — let the chart stretch. Most chart containers in
     the repo use inline `max-width`; overriding here lets them
     fill the card instead of truncating. */
  svg.cf-week-chart,
  .cf-week-chart svg,
  .cf-chart svg {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* ─── Walker-health (/walker-health) ──────────────────── */

  /* Per the handoff: grid of 16px status cells. The existing page
     has a `.wh-table` — at mobile we add a dense dot-grid affordance
     above it via the existing `.wh-dot-grid` (if rendered) and
     keep the full table in a horizontal scroll. */
  .wh-dot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16px, 1fr));
    gap: 3px;
    margin-bottom: 14px;
  }
  .wh-dot-grid .wh-dot {
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    background: var(--pos);
    opacity: 0.85;
  }
  .wh-dot-grid .wh-dot.amber { background: var(--warn); }
  .wh-dot-grid .wh-dot.red   { background: var(--neg); }
  .wh-dot-grid .wh-dot.idle  { background: var(--fg-4); }

  .wh-table { font-size: 12px; }
  .wh-table th, .wh-table td { padding: 8px 10px; }

  /* ─── Page head / k6-page-head ─── */
  .k6-page-head {
    padding: 16px 0 12px;
    gap: 12px;
  }
  .k6-page-title { font-size: 20px; }
  .k6-page-meta { font-size: 11px; gap: 8px; }

  /* Stat tiles scale */
  .k6-stat-tiles {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .k6-stat-tile { padding: 14px 16px; }
  .k6-stat-tile-value { font-size: 20px; }

  /* Generic card — slim radius + padding at phone width. */
  .card, .k6-card { border-radius: 12px; }
  .card { padding: 18px 16px; }
  .k6-card-body { padding: 12px 14px 14px; }

  /* Wide data tables keep their horizontal scroll container from
     .card { overflow-x: auto }; tighten font so more columns fit
     before the scrollbar appears. */
  .k6-data-table,
  table.va-products-table,
  table.cf-table,
  table.wh-table {
    font-size: 12px;
  }

  /* Drop bottom margin bloat between cards on phone. */
  .card, .k6-card, .va-tile { margin-bottom: 12px; }
}

/* ─── Small-phone refinements (≤ 420px) ─────────────────── */
@media (max-width: 420px) {
  .k6-bottom-tab { font-size: 9px; }
  .k6-bottom-tab-icon { width: 20px; height: 20px; }
  .k6-bottom-tab-icon svg { width: 20px; height: 20px; }
  .k6-page-title { font-size: 18px; }
  .va-tile-value, .k6-stat-tile-value { font-size: 18px; }
}