/* ═══════════════════════════════════════════════════════════════════════════
   DATUM — mobile premium pass  (public/css/premium.css)

   Loads LAST (after components.css) so these targeted, mobile-only fixes win by
   source order — no !important, no [style*=], and DESKTOP (≥769px) is never
   touched (the parity gate enforces that). Each rule cites the audit defect it
   fixes. Grouped by the audit's root causes.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width:768px){

  /* ROOT-9 — Jobs list (Active Projects): the job name shared line 1 with the
     #number and the value in a squeezed 1fr grid cell (nowrap+ellipsis), so
     "Daily Press Group — C…" was cut mid-word. Let the name take up to 2 lines,
     and top-align the row so #number and value sit with its first line. */
  body .jm-card{ align-items:start; }
  body .jm-card .jm-name{
    white-space:normal;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* ROOT-8 — Finance stat cards: a fixed 156px×156px 2-col grid with 5 cards left the
     5th card ("Active Quotes") stranded alone with an empty cell beside it. Let the
     columns fill the width, and make a lone final (odd) card span the full row. */
  body .fov-kpis{ grid-template-columns:1fr 1fr; }
  body .fov-kpis .dkpi-card:last-child:nth-child(odd){ grid-column:1 / -1; }

  /* ROOT-17 — Submittals row: the job name and a near-duplicate submittal title were
     crammed onto one line (title cut off), with a redundant "#066" badge. Restructure to
     clean lines: badge + meta on line 1, full name (up to 2 lines) on line 2, submittal
     title on line 3. (Targets the extracted classes — the render is in another session's
     file, so this is done in CSS only.) */
  body .d19b91b2{ flex-wrap:wrap; align-items:center; column-gap:8px; row-gap:3px; }
  body .d19b91b2 > .d1gimxig{ display:none; }               /* redundant "#066" — already in the SUB badge */
  body .d19b91b2 > .dqytlez{ margin-left:auto; order:2; }   /* meta chips + status → end of line 1 */
  body .d19b91b2 > .d1irdi0m{ order:3; flex:1 1 100%; white-space:normal;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  body .d19b91b2 > .d1yp8g5n{ order:4; flex:1 1 100%; white-space:normal; overflow:hidden;
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; color:var(--text3); }

  /* ROOT-7 — the page-header primary action ("+ New Submittal/Customer/Supplier/PO") was
     floated to the top-right with a big empty gap. On the phone, drop it to its own
     full-width line under the title — cleaner and a bigger tap target. */
  body .ph{ flex-wrap:wrap; row-gap:10px; }
  body .ph > .btn-primary{ flex:1 1 100%; justify-content:center; }

  /* ROOT-6/14 — the job action row + chip rows (.jp-chiprow) scrolled horizontally and
     clipped "Catch me up" with no cue. Let them wrap so every action/chip is visible. */
  body .jp-chiprow{ flex-wrap:wrap; }

  /* ROOT-1 — the wide quoting/finance tables ran off the right edge, hiding the money
     column behind a horizontal scroll. Stack each row into a card so every value — the
     dollar figure included — is visible without scrolling. The first cell (job/name) is
     the card title; a cell shows its column name only where the render supplies a
     data-label (added incrementally), otherwise just the value. */
  body .d1biduvw{ overflow-x:visible; }
  body .d15tq8mu, body .d15tq8mu tbody{ display:block; }
  body .d15tq8mu thead{ display:none; }
  body .d15tq8mu tr{ display:block; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--r); margin-bottom:8px; padding:8px 12px; }
  body .d15tq8mu td{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
    padding:3px 0; border:0; text-align:right; white-space:normal; }
  body .d15tq8mu td::before{ content:attr(data-label); font-size:10px; font-weight:700;
    letter-spacing:.4px; text-transform:uppercase; color:var(--text3); text-align:left; }
  body .d15tq8mu td:first-child{ justify-content:flex-start; text-align:left; font-weight:800;
    font-size:14px; padding-bottom:5px; }
  body .d15tq8mu td:first-child::before{ display:none; }

  /* ROOT-12 — off-brand accents: checkboxes/radios rendered in the browser's default blue
     (e.g. the manual-expense "GST applicable" box). Tint them with the brand ink. */
  body input[type="checkbox"], body input[type="radio"]{ accent-color:var(--brand-ink); }

}