/* =============================================================================
   MOBILE LAYOUT LAYER — demo/base
   Linked LAST on every page so it outranks each page's own <style> block.

   Why this file exists
   --------------------
   `.content` is `overflow-x: hidden` (shell.css). That means a grid track wider
   than the viewport does not produce a scrollbar — it is silently CLIPPED, and
   the data inside it becomes unreachable on a phone. Several pages shipped that
   way. Rules here fix the width at the source instead of hiding the symptom.

   The recurring trap: `grid-template-columns: 1fr` does NOT make a grid fit.
   A grid item keeps `min-width: auto` by default, so the track inflates to the
   item's min-content width and overflows anyway. Collapsing a grid on mobile
   therefore always needs `min-width: 0` on its children as well.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1 · Let grid / flex children shrink below their content width.
       Without this, every "collapse to 1fr" rule below is a no-op.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .grid-2 > *, .grid-3 > *, .detail-grid > *, .ol-track > *,
  .quote-header-grid > *, .dash-row-a > *, .dash-row-c > *, .dash-row-sa > *,
  .col > *, .row > * { min-width: 0; }
  .card, .ep-card, .col, .main, .content { min-width: 0; }

  /* ---------------------------------------------------------------------------
     2 · Collapse the multi-column layout grids.
         .dash-row-a / -c carry an INLINE grid-template-columns on the element,
         so plain rules lose to them — hence !important. dashboard.html only ever
         covered -a and -sa; -c was missed and spilled ~750px off-canvas.
     --------------------------------------------------------------------------- */
  .grid-2, .grid-3, .detail-grid, .ol-track,
  .dash-row-a, .dash-row-c, .dash-row-sa,
  .quote-header-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------------------------------------------------------------------------
   3 · Reset `grid-column: span 2` once the grid is a single column.
       A spanning item auto-creates an IMPLICIT second track sized to
       min-content, so the grid quietly goes back to two columns and overflows.
       This is what kept quote-new's header fields 381px wide inside a 312px box.
   --------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .header-fields .field-2,          /* quote-new.html */
  .mst-card-wide,                   /* masters.html   */
  .ln-tile[style*="span 2"]         /* leads.html — inline, needs !important */
    { grid-column: auto !important; }
}

/* ---------------------------------------------------------------------------
   4 · Genuinely wide content (dense tables, a 7-day calendar) cannot collapse
       without destroying meaning — give it its own horizontal scroller so it
       stays reachable instead of being clipped by .content.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .jc-sheet, .cal-card .card-body, .qtable-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .jc-lines { min-width: 430px; }
  .cal-month { min-width: 580px; }
  /* scrollbars on these panners should not eat layout height on desktop-class UAs */
  .jc-sheet::-webkit-scrollbar, .cal-card .card-body::-webkit-scrollbar { height: 6px; }
  .jc-sheet::-webkit-scrollbar-thumb, .cal-card .card-body::-webkit-scrollbar-thumb {
    background: rgba(15,23,42,.22); border-radius: 3px; }
}

/* ---------------------------------------------------------------------------
   5 · Per-page overflow fixes that are not grid-shaped.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* lead-detail: .hero is overflow:hidden, so the contact row was cut at 26px.
     26px of side padding on a 390px screen is also most of the shortfall. */
  .hero { overflow: visible; padding: 18px 16px 16px; }
  .hero-l { min-width: 0; flex-wrap: wrap; }
  .hero-l > * { min-width: 0; }
  .hero-name, .hero-contacts { min-width: 0; flex-wrap: wrap; }
  .hero-contacts { row-gap: 4px; }

  /* visits list rows: a nowrap flex row whose status pill ran past the card */
  .vitem-main { flex-wrap: wrap; row-gap: 8px; }
  .vitem-main > * { min-width: 0; }
  /* clashes: the header action row pushed its button past the viewport */
  .qhead { flex-wrap: wrap; }
  .qhead > :last-child { margin-left: 0; }
  /* lead-detail tab strip already scrolls; make sure it never wraps mid-strip */
  .tabs { flex-wrap: nowrap; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs > .tab { flex: 0 0 auto; }

  /* dashboard: the revenue card's inner stat grid is a hard 3-up (charts.css) */
  .mini-grid.mini-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }

  /* quote-new demo-helper chips are inline <a>s with a pill background. Once they
     wrap, the background splits and the first fragment looks cut off at the line
     edge. box-decoration-break makes each fragment paint its own complete pill. */
  #load-sam-link, #demo-fill-link {
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    margin-left: 0 !important; }

  /* quote-detail: the print sheet's totals block is a fixed 340px, wider than
     the sheet itself once the sheet is phone-width */
  .ps-tot { width: 100% !important; max-width: 340px; }

  /* visits: the three per-visit action buttons were a nowrap flex row */
  .vactions { flex-wrap: wrap; flex-shrink: 1; row-gap: 8px; }
  .vactions .vbtn { flex: 0 1 auto; }
}

/* quote-new aggregate rows: seven FIXED px tracks (80+84+10+78+42+8+1fr) plus
   gaps exceed the card at phone width. Shrink the tracks rather than reflowing,
   so the figures stay column-aligned down the block. */
@media (max-width: 560px) {
  .agg-row { grid-template-columns: 62px 66px 8px 60px 34px 6px minmax(0,1fr);
    gap: 3px; font-size: 11px; }
}

/* ---------------------------------------------------------------------------
   6 · Density. These are not overflow bugs, just poor use of a small screen.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* no physical keyboard on a phone — the ⌘K affordance is dead weight */
  .topbar-kbd-hint { display: none !important; }
}
@media (max-width: 600px) {
  /* dashboard forced KPIs to a single column: 6 cards x 157px = 942px of scroll
     before any real content. Two-up halves that and matches the leads page. */
  #kpis, .kpi-grid, .ministrip { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  #kpis .kpi { padding: 14px 14px !important; }
  #kpis .kpi-top { margin-bottom: 10px !important; }
  #kpis .kpi-value { font-size: 24px !important; }
  #kpis .kpi-label { font-size: 9.5px !important; letter-spacing: .06em !important; }
  .mstat { padding: 12px 13px !important; gap: 10px !important; }
}
@media (max-width: 768px) {
  /* table -> stacked card (components.css) puts every cell on its own line.
     Tighten the rhythm so a 9-column row is not a 334px-tall card. */
  .card tr { padding: 10px 12px !important; margin-bottom: 8px !important; }
  .card td { padding: 3px 0 !important; line-height: 1.35 !important; }
  .card td:first-child { padding-bottom: 7px !important; margin-bottom: 4px; }
  .card td[data-label]::before { font-size: 9px; margin-bottom: 0; }
  .card td:empty { display: none !important; }
}

/* ---------------------------------------------------------------------------
   7 · Small-phone trims.
   --------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .content { padding-left: 12px !important; padding-right: 12px !important; }
  .section-title, .page-title { font-size: 21px !important; line-height: 1.15 !important; }
  .topbar-title { font-size: 16px !important; }
  /* 22px of card padding either side costs 12% of the viewport at this width */
  .card-body, .ep-card-body { padding-left: 14px !important; padding-right: 14px !important; }
}