/*
 * sr-pulse mobile scoreboard overrides.
 *
 * Loaded via brand.shell_css (sr_pulse/branding.py) so it applies to every
 * page that extends scott_common/shell/_shell.html. The file is purely
 * additive — no rule outside of `@media (max-width: 767px)` so desktop +
 * tablet layouts (>=768px) stay untouched.
 *
 * Scope per Pulse polish task B (2026-05-28):
 *   - KPI tiles + scoreboard rows stack to a single column
 *   - 7-day rolling charts hide on phones (chart-bar visual is too narrow)
 *   - Sticky scoreboard headers keep the company / scoreboard name visible
 *     while scrolling long tables
 *   - Ack buttons get touch-friendly tap targets (min 44px per
 *     iOS HIG / Material guideline)
 *   - Scrollable scott-table containers prevent narrow phones from
 *     horizontally panning the entire page
 */

@media (max-width: 767px) {

  /* ───────────── KPI tiles → single column ──────────── */

  /* scott_common shell-grade KPI tile grid. Pulse + SR-2 use sr2-kpi-grid /
     scott-kpi-grid; CSR / driver / refurb manager pages use scott-card
     blocks that already wrap, but multi-column dashboard tile grids need
     to collapse explicitly. */
  .sr2-kpi-grid,
  .scott-kpi-grid,
  .pulse-kpi-grid,
  .pulse-tile-grid,
  .scott-tile-grid,
  .scott-stats-grid {
    display: block !important;
    grid-template-columns: none !important;
  }
  .sr2-kpi-grid > *,
  .scott-kpi-grid > *,
  .pulse-kpi-grid > *,
  .pulse-tile-grid > *,
  .scott-tile-grid > *,
  .scott-stats-grid > * {
    width: 100%;
    margin-bottom: 0.75rem;
  }

  /* Drill-down KPI cards already stack; just give them breathing room. */
  .sb-kpi-card {
    margin-bottom: 0.75rem;
  }

  /* ───────────── Charts hide on phones ──────────── */
  /*
   * 7-day bar charts in the drill-down (.sb-chart) become illegible at
   * narrow widths — 7 bars across a 320px viewport is ~30px per bar with
   * gaps that read as visual noise. Hide the rolling chart + its labels
   * row by default on mobile. The today's-value tile still carries the
   * current number front-and-center.
   *
   * Templates that want a simplified-bar fallback can target
   * `.sb-chart--mobile-bar` (single-bar % indicator) instead.
   */
  .sb-chart--rolling,
  .sb-chart-label.sb-chart--rolling {
    display: none !important;
  }

  /* Simplified single bar (optional fallback). Templates may render
     `<div class="sb-chart-mobile-bar" style="--pct: 80;">` and this
     style gives them a horizontal progress bar. */
  .sb-chart-mobile-bar {
    display: block;
    height: 8px;
    background: var(--card-border, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
    margin: 0.5rem 0 0.25rem;
  }
  .sb-chart-mobile-bar::before {
    content: "";
    display: block;
    height: 100%;
    width: calc(var(--pct, 0) * 1%);
    background: var(--scott-pulse, #7c3aed);
  }

  /* ───────────── Sticky scoreboard headers ──────────── */
  /*
   * Pulse + scott_common scoreboards extend the shell which already has a
   * sidebar / top bar. We want the page-level <h1> (the scoreboard name)
   * to stay anchored to the top of the content area as the user scrolls a
   * long list of techs.
   */
  .scott-shell-content > h1,
  .scott-shell-content > header,
  main > h1,
  .sb-drill-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg, #ffffff);
    margin: 0 -1rem 0.5rem -1rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--card-border, #e5e7eb);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }

  /* ───────────── Touch-friendly ack buttons ──────────── */

  .sb-ack-btn,
  .scott-btn,
  .scott-btn--primary,
  button[type="submit"],
  .btn,
  .btn-primary {
    min-height: 44px;
    padding: 0.6rem 1rem;
    font-size: 1rem;
  }

  /* Stack the nudge row so the ack button takes full width on mobile,
     making it easy to tap with a thumb. */
  .sb-nudge-row {
    flex-direction: column;
    align-items: stretch;
  }
  .sb-nudge-row .sb-ack-btn {
    width: 100%;
    margin-top: 0.5rem;
  }

  /* ───────────── Scrollable tables ──────────── */
  /*
   * Wide tables (drivers, refurb breakdowns) overflow phones. Make every
   * `.scott-table` horizontally scrollable so the page itself doesn't pan.
   */
  .scott-table-wrap,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Where the wrapper is missing (older templates), make the table itself
     scroll so the layout doesn't break. */
  .scott-card .scott-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* ───────────── Sort-line PWA "big count" stays loud ──────────── */
  /* The /sort-line/<id>/ PWA is the most-viewed mobile page; just keep
     the count from squishing on tiny phones. */
  .wrap .count {
    font-size: 6rem !important;
  }

}

/* Extra small phones (~iPhone SE) — drop count font a bit more. */
@media (max-width: 374px) {
  .wrap .count {
    font-size: 4.5rem !important;
  }
  .sb-kpi-card__value {
    font-size: 1.6rem !important;
  }
}