/* ===========================================================================
   Servicing & Repairs -- frontend for /api/servicing/... (see server.py
   "Servicing & Repairs" section). Ported from the standalone SwissTimepieces
   pricing-calculator Claude artifact (servicing_calc_stripped.html) but
   restyled from its dark gold/canvas theme onto Watch Desk's light design
   system (see static/style.css :root tokens) -- same restyle relationship
   Stock Manager's stock-manager.css has to its own reference artifact.

   Class names use the `svc-` prefix (mirrors Stock Manager's `sm-` prefix)
   to keep every selector scoped to this module and avoid clashing with
   Stock Manager / Sales Manager / core app CSS.

   Generated/previewed client-facing documents (Priced Quote, Send for
   Estimate, Warranty Certificate) are real PDFs rendered server-side
   (_build_servicing_quote_pdf et al) and shown through the shared
   #pdfPreviewOverlay -- there is no separate in-app printable HTML sheet
   here to style.
   =========================================================================== */

.servicing { display: flex; flex-direction: column; gap: var(--space-6); }

/* ---- shared bits: tiles / cards / tables / fields ------------------------ */
.svc-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.svc-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-divider); }
.svc-card-head h3 { margin: 0; font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; color: var(--color-text); }
.svc-card-body { padding: var(--space-6); }

.svc-two-col { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (max-width: 980px) { .svc-two-col { grid-template-columns: minmax(0, 1fr); } }

.svc-filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-divider); }
.svc-search { flex: 1; min-width: 180px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.55rem 0.85rem; font-size: var(--text-sm); font-family: var(--font-body); background: var(--color-surface-2); color: var(--color-text); }
.svc-search:focus { outline: none; border-color: var(--color-primary); background: var(--color-surface); }
.svc-ctl { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; font-size: var(--text-sm); font-family: var(--font-body); background: var(--color-surface-2); color: var(--color-text); }
.svc-hint { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }

.svc-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }
.svc-chip { border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text-muted); border-radius: var(--radius-full); padding: 0.32rem 0.85rem; font-size: var(--text-xs); font-weight: 600; text-transform: capitalize; cursor: pointer; transition: all .15s ease; white-space: nowrap; display: inline-block; }
.svc-chip:hover { border-color: var(--color-primary); color: var(--color-text); }
.svc-chip.svc-active { background: var(--color-primary-highlight); border-color: var(--color-primary); color: var(--color-primary-active); }

.svc-table-wrap { overflow-x: auto; }
.svc-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.svc-table th { text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); font-weight: 600; padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.svc-table td { padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-divider); vertical-align: top; color: var(--color-text); }
.svc-table tbody tr:hover { background: var(--color-surface-2); }
.svc-table .svc-num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.svc-table .svc-mono { font-family: var(--font-mono); }
.svc-cell-sub { color: var(--color-text-muted); font-size: var(--text-xs); margin-top: 2px; }

.svc-empty { padding: var(--space-8) var(--space-6); text-align: center; color: var(--color-text-muted); }
.svc-empty-title { font-weight: 600; color: var(--color-text); margin-bottom: var(--space-2); font-family: var(--font-display); }

.svc-pill { display: inline-flex; align-items: center; padding: 0.2rem 0.65rem; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.svc-pill-draft { background: var(--color-surface-offset); color: var(--color-text-muted); }
.svc-pill-quoted { background: var(--color-primary-highlight); color: var(--color-primary-active); }
.svc-pill-approved { background: var(--color-success-highlight); color: var(--color-success); }
.svc-pill-declined { background: var(--color-error-highlight); color: var(--color-error); }
.svc-pill-completed { background: var(--color-success-highlight); color: var(--color-success); }

.svc-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 640px) { .svc-fgrid { grid-template-columns: minmax(0, 1fr); } }
.svc-field { display: flex; flex-direction: column; gap: 6px; }
.svc-field.svc-full { grid-column: 1 / -1; }
.svc-field label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.svc-field input, .svc-field select, .svc-field textarea { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.55rem 0.75rem; font-size: var(--text-sm); font-family: var(--font-body); background: var(--color-surface); color: var(--color-text); }
.svc-field input:focus, .svc-field select:focus, .svc-field textarea:focus { outline: none; border-color: var(--color-primary); }
.svc-field textarea { min-height: 90px; resize: vertical; font-family: var(--font-body); }
.svc-field-hint { font-size: var(--text-xs); color: var(--color-text-muted); }

.svc-banner { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); font-size: var(--text-sm); }
.svc-banner-info { background: var(--color-primary-highlight); color: var(--color-primary-active); }
.svc-banner-ok { background: var(--color-success-highlight); color: var(--color-success); }
.svc-banner-warn { background: var(--color-warning-highlight); color: var(--color-warning); }

/* ---- brand lead-time hint (spec sec 27-29) -------------------------------- */
.svc-leadtime-hint { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: 4px; padding: 0.5rem 0.75rem; background: var(--color-primary-highlight); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.svc-leadtime-row { display: flex; align-items: baseline; gap: 6px; font-size: var(--text-xs); }
.svc-leadtime-k { color: var(--color-text-muted); font-weight: 600; }
.svc-leadtime-v { color: var(--color-primary-active); font-weight: 700; }

/* ---- calculator ----------------------------------------------------------- */
.svc-search-wrap { position: relative; margin-bottom: var(--space-3); }
.svc-search-wrap .svc-search { width: 100%; padding-left: 2.3rem; }
.svc-search-ico { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--color-text-faint); pointer-events: none; }

.svc-results { max-height: 480px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.svc-res-group-h { position: sticky; top: 0; background: var(--color-surface-2); padding: 0.4rem 0.9rem; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); }
.svc-res { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--color-divider); background: var(--color-surface); padding: 0.65rem 0.9rem; cursor: pointer; font-family: var(--font-body); }
.svc-res:hover { background: var(--color-primary-highlight); }
.svc-res.svc-picked { background: var(--color-primary-highlight); box-shadow: inset 3px 0 0 var(--color-primary); }
.svc-res-band { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--color-surface-offset); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; color: var(--color-text); }
.svc-res-main { flex: 1; min-width: 0; }
.svc-res-name { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.svc-res-meta { font-size: var(--text-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-res-price { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--color-text); }
.svc-res-price.svc-estimate { color: var(--color-warning); font-size: var(--text-xs); font-weight: 700; }

.svc-dial-wrap { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-direction: column; padding: var(--space-4) 0; }
.svc-dial-read { text-align: center; margin-top: -0.75rem; }
.svc-dial-pct { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 700; color: var(--color-text); }
.svc-dial-label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; }

.svc-money-in { position: relative; }
.svc-money-in .svc-cur { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-weight: 600; }
.svc-money-in input { padding-left: 1.6rem; }

.svc-readout { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0; }
.svc-stat { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); }
.svc-stat-hero { background: var(--color-primary-highlight); }
.svc-stat-k { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.svc-stat-v { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 700; color: var(--color-text); margin-top: 2px; }
.svc-stat-exact { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

.svc-btn-row { display: flex; gap: var(--space-3); margin-top: var(--space-4); }

/* ---- price book ------------------------------------------------------------ */
.svc-callout { background: var(--color-primary-highlight); border: 1px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-size: var(--text-sm); color: var(--color-primary-ink); margin-bottom: var(--space-5); }
.svc-band-group { margin-bottom: var(--space-5); }
.svc-band-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-2); }
.svc-band-badge { flex: 0 0 auto; width: 2.2rem; height: 2.2rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-primary-ink); font-family: var(--font-mono); font-weight: 700; }
.svc-band-title { font-weight: 700; color: var(--color-text); }
.svc-band-desc { font-size: var(--text-xs); color: var(--color-text-muted); }
.svc-band-brands { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-muted); max-width: 40%; text-align: right; }

/* ---- drawer / modal fields inside shared #smModal -------------------------- */
.svc-drawer-readout { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-surface-2); margin: var(--space-4) 0; display: flex; flex-direction: column; gap: 6px; }
.svc-drawer-readout .svc-row { display: flex; justify-content: space-between; font-size: var(--text-sm); }
.svc-drawer-readout .svc-row.svc-total { border-top: 1px solid var(--color-border); margin-top: 4px; padding-top: 8px; font-weight: 700; color: var(--color-text); }

/* ---- signature preview ------------------------------------------------------ */
.svc-sign-prev { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px 10px; display: inline-flex; align-items: center; }
.svc-sign-prev img { max-height: 46px; display: block; }

/* ===========================================================================
   Margin dial gauge -- verbatim port of dialSVG() geometry from the
   reference artifact, restyled with locally scoped CSS vars instead of its
   original --surface-2/--jade/--amber/--red/--gold/--surface tokens.
   =========================================================================== */
.servicing {
  --svc-dial-track: var(--color-surface-2);
  --svc-dial-good: var(--color-success);
  --svc-dial-warn: var(--color-warning);
  --svc-dial-bad: var(--color-error);
  --svc-dial-target: var(--color-primary);
  --svc-dial-hub: var(--color-surface);
}

/* ---- dashboard (KPI tiles + watchmaker workload) -------------------------- */
.svc-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.svc-kpi-tile { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); border-left: 4px solid var(--color-border); }
.svc-kpi-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); line-height: 1.1; }
.svc-kpi-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); margin-top: var(--space-2); }
.svc-kpi-hint { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.svc-kpi-total { border-left-color: var(--color-primary); }
.svc-kpi-info { border-left-color: var(--color-primary); }
.svc-kpi-warn { border-left-color: var(--color-warning); }
.svc-kpi-good { border-left-color: var(--color-success); }
.svc-kpi-bad { border-left-color: var(--color-error); }
.svc-kpi-clickable { cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }
@media (hover: hover) and (pointer: fine) {
  .svc-kpi-clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08)); }
}
.svc-kpi-clickable:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Dashboard hero -- reuses the shared .dd-hero/.dd-hero-photo markup (same
   pattern as Quoting's own hero, static/quoting/quoting.css), with its own
   workshop photo so it doesn't just repeat the Quoting/main Dashboard shot. */
.servicing-hero .dd-hero-photo {
  background-image: url('../assets/hero-servicing.webp');
  background-position: center 46%;
}

/* Dashboard header refresh icon-button (spec sec 1: "superseded by the
   global halo refresh treatment" -- same #qDashRefresh spinner pattern,
   scoped to this module's own button id). */
#svcDashRefresh.is-spinning svg { animation: spin 0.8s linear infinite; }

.svc-workload-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; }
.svc-workload-name { flex: 0 0 auto; min-width: 96px; font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.svc-workload-bar { flex: 1; height: 8px; border-radius: var(--radius-full); background: var(--color-surface-offset); overflow: hidden; }
.svc-workload-fill { height: 100%; background: var(--color-primary); border-radius: var(--radius-full); }
.svc-workload-count { flex: 0 0 auto; width: 28px; text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; color: var(--color-text); }

/* Phase 4 (spec sec 25/26, 2026-09-27): Document Branding -- Trust Marks
   card in Settings. Mirrors the .svc-sign-prev / .svc-field patterns
   used elsewhere in this stylesheet rather than inventing new tokens. */
.svc-mark-row { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); margin-bottom: var(--space-3); }
.svc-mark-thumb { flex: 0 0 auto; width: 68px; height: 46px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); object-fit: contain; padding: 4px; }
.svc-mark-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.svc-mark-name { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; font-size: var(--text-sm); font-family: var(--font-body); background: var(--color-surface); color: var(--color-text); max-width: 320px; width: 100%; }
.svc-mark-name:focus { outline: none; border-color: var(--color-primary); }
.svc-mark-enable { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; color: var(--color-text); }
.svc-mark-doctypes { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.svc-mark-doctypes label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--color-text-muted); }
.svc-mark-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.svc-mark-actions .btn { padding: 0.3rem 0.6rem; line-height: 1; }

.svc-trust-preview { margin-top: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); background: var(--color-surface-2); }
.svc-trust-preview-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.svc-trust-preview-strip { background: #faf8f3; border: 1px solid #ece4d3; border-radius: var(--radius-sm); padding: 14px 18px; }
.svc-trust-preview-caption { text-align: center; font-size: 8.5pt; text-transform: uppercase; letter-spacing: .12em; color: #96721f; margin-bottom: 10px; }
.svc-trust-preview-marks { display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; }
.svc-trust-preview-marks img { max-height: 26px; max-width: 84px; object-fit: contain; }

/* Phase 5 (spec sec 27/33, 2026-09-27): Settings > Service & Repairs --
   Brand Lead Times table. Reuses .svc-card-head's existing flex/
   space-between layout for the "+ Add brand" button (no new header
   pattern needed) and .svc-fgrid for the edit-row field grid. */
.svc-lead-table { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.svc-lead-row { display: grid; grid-template-columns: 1.1fr 1.4fr 1.4fr 0.9fr 0.7fr; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); }
.svc-lead-row:last-child { border-bottom: none; }
.svc-lead-row.svc-lead-head { background: var(--color-surface-2); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--color-text-muted); }
.svc-lead-col { font-size: var(--text-sm); color: var(--color-text); min-width: 0; overflow-wrap: break-word; }
.svc-lead-brand-col { font-weight: 700; }
.svc-lead-updated { color: var(--color-text-muted); font-size: var(--text-xs); }
.svc-lead-edit-col { text-align: right; }
.svc-lead-row-editing { grid-template-columns: 1fr; background: var(--color-surface-2); padding: var(--space-5); }
.svc-lead-side { display: flex; flex-direction: column; gap: 6px; }
.svc-lead-side-h { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.svc-lead-mode-row { display: flex; gap: var(--space-4); font-size: var(--text-xs); color: var(--color-text); }
.svc-lead-mode-row label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.svc-lead-range-fields { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--color-text-muted); }
.svc-lead-range-fields input { width: 64px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.4rem 0.5rem; font-size: var(--text-sm); background: var(--color-surface); color: var(--color-text); }
.svc-lead-custom-field input { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; font-size: var(--text-sm); background: var(--color-surface); color: var(--color-text); }
.svc-lead-hist { margin-top: 10px; font-size: var(--text-xs); color: var(--color-text-muted); }
.svc-lead-hist summary { cursor: pointer; font-weight: 600; color: var(--color-text); }
.svc-lead-hist-row { display: flex; gap: var(--space-3); flex-wrap: wrap; padding: 4px 0; border-top: 1px solid var(--color-divider); }
.svc-lead-hist-field { font-weight: 600; color: var(--color-text); min-width: 140px; }
.svc-lead-hist-change { flex: 1; }
.svc-lead-hist-meta { color: var(--color-text-muted); }
@media (max-width: 720px) {
  .svc-lead-row:not(.svc-lead-head) { grid-template-columns: 1fr; }
  .svc-lead-row.svc-lead-head { display: none; }
  .svc-lead-col::before { content: attr(data-lbl); display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 2px; }
}

/* ----------------------------------------------------------------------
   Phase 5 (spec sec 27-46) -- Active Jobs monitoring: filter checkbox,
   Needs Attention panel, job-detail timeline strip, per-phase lead-time
   card, and chase history. Reuses existing .svc-card/.svc-pill/.svc-hint/
   .svc-lead-* primitives wherever possible.
   ---------------------------------------------------------------------- */
.svc-check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--color-text); white-space: nowrap; cursor: pointer; }
.svc-check-inline input { cursor: pointer; }

.svc-attn-list { display: flex; flex-direction: column; gap: var(--space-3); }
.svc-attn-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.svc-attn-main { display: flex; flex-direction: column; gap: 2px; min-width: 140px; }
.svc-attn-name { font-weight: 700; color: var(--color-text); font-size: var(--text-sm); }
.svc-attn-watch { font-size: var(--text-xs); color: var(--color-text-muted); }
.svc-attn-reason { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--color-text-muted); flex: 1; min-width: 180px; }
.svc-attn-actions { display: flex; gap: var(--space-2); }

/* 6-step job timeline strip */
.svc-job-timeline { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; margin-bottom: var(--space-5); padding: var(--space-4) 0; position: relative; }
.svc-job-timeline::before { content: ""; position: absolute; top: 15px; left: 5%; right: 5%; height: 2px; background: var(--color-divider); z-index: 0; }
.svc-job-tl-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; position: relative; z-index: 1; text-align: center; }
.svc-job-tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-border); flex-shrink: 0; }
.svc-job-tl-label { font-size: var(--text-xs); color: var(--color-text-muted); max-width: 100%; line-height: 1.25; overflow-wrap: break-word; word-break: break-word; }
@media (max-width: 480px) { .svc-job-tl-label { font-size: 9px; letter-spacing: -0.01em; } .svc-job-timeline { gap: 2px; } }
.svc-job-tl-done .svc-job-tl-dot { background: var(--color-success); border-color: var(--color-success); }
.svc-job-tl-done .svc-job-tl-label { color: var(--color-text); }
.svc-job-tl-current .svc-job-tl-dot { background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-highlight); }
.svc-job-tl-current .svc-job-tl-label { color: var(--color-primary-active); font-weight: 700; }

/* Per-phase lead-time card inside the job detail modal */
.svc-lead-job-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); background: var(--color-surface); }
.svc-lead-job-card:last-child { margin-bottom: 0; }
.svc-lead-job-active { border-color: var(--color-primary); background: var(--color-primary-highlight); }
.svc-lead-job-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: 6px; flex-wrap: wrap; }
.svc-lead-job-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); display: inline-flex; align-items: center; gap: 8px; }
.svc-lead-job-text { font-size: var(--text-sm); color: var(--color-text); margin-bottom: 6px; }
.svc-lead-job-newer { font-size: var(--text-xs); color: var(--color-warning, #96721f); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.svc-lead-job-actions { display: flex; gap: var(--space-2); }
.svc-lead-job-edit { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-divider); }

/* Chase history */
.svc-chase-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider); font-size: var(--text-xs); }
.svc-chase-row:last-child { border-bottom: none; }
.svc-chase-meta { color: var(--color-text-muted); white-space: nowrap; }
.svc-chase-note { color: var(--color-text); flex: 1; min-width: 180px; }
.svc-chase-followup { color: var(--color-primary-active); font-weight: 600; white-space: nowrap; }

/* Compact row actions (Jobs table Open/Pipedrive links) so the actions column doesn't force horizontal scroll */
.svc-row-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.svc-row-actions .btn.btn-sm { padding: 4px 10px; min-height: 28px; font-size: var(--text-xs); }
.svc-table td:last-child, .svc-table th:last-child { padding-left: var(--space-3); padding-right: var(--space-3); }
.svc-table td:nth-child(3), .svc-table th:nth-child(3) { padding-left: var(--space-3); padding-right: var(--space-3); }
.svc-table th:nth-child(3) { white-space: normal; max-width: 90px; }

/* ---- Estimates tab CRM card list (item 10/12, 2026-09-27) ---------------
   Replaces the old .svc-table-wrap table for this tab only -- that layout
   broke on mobile (columns forced off-screen with dead vertical whitespace
   under wrapped hidden-column content). Cards reflow to a single column at
   any width instead of relying on horizontal scroll. Other tabs (Active
   Jobs etc.) keep the existing table pattern. */
.svc-est-list { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-6); }
.svc-est-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2); padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.svc-est-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.svc-est-id { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.svc-est-job { font-weight: 700; font-size: var(--text-sm); }
.svc-est-deal-link { font-size: var(--text-xs); color: var(--color-primary-active); text-decoration: none; }
.svc-est-deal-link:hover { text-decoration: underline; }
.svc-est-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.svc-est-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); }
.svc-est-grid > div label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.svc-est-grid > div > div { font-size: var(--text-sm); color: var(--color-text); }
.svc-est-grid .svc-est-work { grid-column: 1 / -1; }
/* Sam, 2026-09-28: the Estimates list only ever shows the client-facing
   figures (cost ex VAT, total inc VAT) -- never trade cost or margin, so
   not every staff member with list access can see profit information.
   The total inc VAT is the headline number, set slightly larger/bolder
   than the rest of the card's fields. */
.svc-est-total b { font-size: var(--text-md); font-weight: 700; color: var(--color-text); }
@media (max-width: 900px) { .svc-est-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .svc-est-grid { grid-template-columns: minmax(0, 1fr); } }

.svc-est-lifecycle { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-2) var(--space-5); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-primary-highlight); }
.svc-est-lifecycle label { display: block; font-size: var(--text-xs); font-weight: 600; color: var(--color-primary-active); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.svc-est-lifecycle > div > div { font-size: var(--text-xs); color: var(--color-text); }

/* Arrival photo thumbnail (Sam's 9-part Servicing brief, 2026-10-01) --
   shown on the estimate card's lifecycle strip and inside the Watch
   Arrived modal's preview slot; the stored source is already a 200x200
   JPEG, this just gives it a tidy frame wherever it's displayed. */
.svc-arrival-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); display: block; }

.svc-est-docs { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); font-size: var(--text-xs); }
.svc-est-docs label { font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .03em; font-size: var(--text-xs); }

.svc-est-actions, .svc-est-crm-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.svc-est-crm-actions:empty { display: none; }

/* ---- Warranty claim photos, detail workspace and timeline (2026-10-05) ---- */
.svc-claim-photo-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.svc-claim-photo-btns .btn { min-height: 44px; }
.svc-claim-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--space-2); }
.svc-claim-photo-tile { position: relative; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface-2); aspect-ratio: 1 / 1; display: block; }
.svc-claim-photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
button.svc-claim-photo-open { cursor: zoom-in; }
.svc-claim-photo-x { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.65); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.svc-claim-photo-tag { position: absolute; left: 4px; bottom: 4px; background: rgba(0,0,0,0.65); color: #fff; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; }
.svc-claim-cell { display: flex; align-items: center; gap: var(--space-2); min-width: 150px; }
.svc-claim-cover { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); flex: none; }
.svc-claim-cover-empty { display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--color-text-muted); background: var(--color-surface-2); text-align: center; }
.svc-claim-overdue { color: var(--color-error); font-weight: 600; }
.svc-claim-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.svc-claim-tl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.svc-claim-tl { display: flex; gap: var(--space-3); align-items: flex-start; }
.svc-claim-tl-ico { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--color-surface-2); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.svc-claim-tl-text { white-space: pre-wrap; word-break: break-word; }
.svc-claim-tl-note .svc-claim-tl-text { font-weight: 500; }
.svc-claim-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; }
.svc-claim-lightbox img { max-width: 100%; max-height: 86vh; object-fit: contain; }
.svc-claim-lightbox-x { position: absolute; top: 12px; right: 16px; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }
.svc-claim-lightbox-cap { color: #fff; margin-top: 10px; font-size: 14px; }
@media (max-width: 820px) {
  .svc-claim-photo-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .svc-claim-detail .svc-fgrid { grid-template-columns: 1fr; }
}
.svc-chip.svc-chip-good { border-color: var(--color-success); color: var(--color-success); cursor: default; }
.svc-chip.svc-chip-info { border-color: var(--color-primary); color: var(--color-primary-active); background: var(--color-primary-highlight); cursor: default; }

/* ---- Warranty Claims redesign (2026-10-06) ---- */
.svc-kpi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 820px) { .svc-kpi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc-claims-card .svc-card-head { flex-wrap: wrap; }
.svc-card-head-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.svc-claims-intro { margin: 0; padding: var(--space-4) var(--space-6) 0; }
.svc-claim-list { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) var(--space-6) var(--space-6); }
.svc-claim-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease; min-width: 0; }
.svc-claim-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,.08)); }
.svc-claim-card-closed { opacity: .78; }
.svc-claim-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.svc-claim-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 1 1 auto; min-width: 0; }
.svc-claim-arrive { display: flex; flex-direction: column; align-items: flex-end; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.25; margin-left: auto; text-align: right; }
.svc-claim-arrive span { text-transform: uppercase; letter-spacing: .05em; font-size: 10px; font-weight: 600; }
.svc-claim-arrive b { color: var(--color-text); font-size: var(--text-sm); font-weight: 600; }
.svc-claim-arrive-wait b { color: var(--color-text-muted); font-weight: 500; }
.svc-claim-card-main { display: flex; gap: var(--space-4); align-items: flex-start; min-width: 0; }
.svc-claim-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.svc-claim-client b { font-weight: 600; }
.svc-claim-client span, .svc-claim-watch span { margin-left: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.svc-claim-watch { font-size: var(--text-sm); overflow-wrap: anywhere; }
.svc-claim-issue { font-size: var(--text-sm); color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.svc-claim-next { font-size: var(--text-xs); color: var(--color-text-muted); }
.svc-claim-deal { flex: none; font-size: var(--text-xs); }
.svc-claim-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.svc-claim-card .svc-claim-cover { width: 72px; height: 72px; }
@media (max-width: 720px) { .svc-claim-card-main { flex-wrap: wrap; } .svc-claim-deal { width: 100%; } .svc-claim-list { padding: var(--space-4); } .svc-claims-intro { padding: var(--space-4) var(--space-4) 0; } }

/* Job ref label: black with a gold face */
.svc-jobref { display: inline-block; background: linear-gradient(180deg, #1c1c1c, #000); color: #D9B65A; border: 1px solid #BA9545; border-radius: 6px; padding: 4px 11px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; font-weight: 700; letter-spacing: .06em; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.35); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.svc-jobref-big { font-size: 13px; padding: 5px 13px; }
.svc-claim-title-client { margin-left: var(--space-3); font-weight: 500; color: var(--color-text-muted); font-size: var(--text-sm); }

/* 3D timeline tracker */
.svc-trk { --c1: #f9efc8; --c2: #eed68c; --c3: #cfaf5a; display: flex; flex-direction: column; gap: 8px; }
.svc-trk-good { --c1: #f9efc8; --c2: #eed68c; --c3: #cfaf5a; }
.svc-trk-warn { --c1: #f9efc8; --c2: #eed68c; --c3: #cfaf5a; }
.svc-trk-bad { --c1: #f9efc8; --c2: #eed68c; --c3: #cfaf5a; }
.svc-trk-done { --c1: #f9efc8; --c2: #eed68c; --c3: #cfaf5a; }
.svc-trk-late { --c1: #f9efc8; --c2: #eed68c; --c3: #cfaf5a; }
.svc-trk-waiting { --c1: #c9c9c4; --c2: #b2b2ac; --c3: #8d8d87; opacity: .85; }
.svc-trk-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.svc-trk-meta b { color: var(--color-text); font-weight: 600; }
.svc-trk-rail { position: relative; height: 16px; border-radius: 999px; margin: 6px 12px 6px 0; background: linear-gradient(180deg, #c9c7c0 0%, #e8e6df 60%, #f3f2ed 100%); box-shadow: inset 0 3px 6px rgba(0,0,0,.35), inset 0 -1px 1px rgba(255,255,255,.8), 0 1px 0 rgba(255,255,255,.6), 0 3px 6px rgba(0,0,0,.12); }
.svc-trk-rail::before { content: ''; position: absolute; inset: 0; border-radius: 999px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--days) - 1px), rgba(0,0,0,.14) calc(100% / var(--days) - 1px), rgba(0,0,0,.14) calc(100% / var(--days))); pointer-events: none; }
.svc-trk-fill { --p: 100; position: relative; height: 100%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 48%, rgba(0,0,0,.16) 100%), linear-gradient(90deg, #f9efc8 0%, #e6c35f 50%, #a6781e 100%); background-size: 100% 100%, calc(10000% / var(--p)) 100%; background-repeat: no-repeat; box-shadow: 0 3px 5px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.55), inset 0 -2px 2px rgba(0,0,0,.2); transition: width .6s cubic-bezier(.2,.7,.2,1); }
.svc-trk-fill::after { content: ''; position: absolute; left: 8px; right: 8px; top: 2px; height: 38%; border-radius: 999px; background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,0)); }
.svc-trk-pearl { position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff 0, color-mix(in srgb, var(--end, #e6c35f) 55%, #fff) 34%, var(--end, #e6c35f) 66%, color-mix(in srgb, var(--end, #e6c35f) 65%, #000) 100%); border: 1px solid rgba(0,0,0,.28); box-shadow: 0 5px 8px rgba(0,0,0,.4), inset 0 -4px 5px rgba(0,0,0,.28), inset 0 2px 2px rgba(255,255,255,.6); transition: left .6s cubic-bezier(.2,.7,.2,1); }
.svc-trk-bad .svc-trk-pearl { animation: svcTrkPulse 1.8s ease-in-out infinite; }
@keyframes svcTrkPulse { 0%,100% { box-shadow: 0 5px 8px rgba(0,0,0,.4), inset 0 -4px 5px rgba(0,0,0,.28), inset 0 2px 2px rgba(255,255,255,.6), 0 0 0 0 rgba(214,58,46,.45); } 50% { box-shadow: 0 5px 8px rgba(0,0,0,.4), inset 0 -4px 5px rgba(0,0,0,.28), inset 0 2px 2px rgba(255,255,255,.6), 0 0 0 8px rgba(214,58,46,0); } }
@media (prefers-reduced-motion: reduce) { .svc-trk-bad .svc-trk-pearl, .svc-trk-fill, .svc-trk-pearl { animation: none; transition: none; } }
.svc-trk-big .svc-trk-rail { height: 20px; }
.svc-trk-big .svc-trk-pearl { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
.svc-trk-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; margin-right: 12px; }
.svc-trk-miles { display: flex; flex-wrap: wrap; gap: 6px var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); }
.svc-trk-miles i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); margin-right: 6px; }
.svc-trk-miles b { color: var(--color-text); font-weight: 600; }

/* Claim workspace modal */
.svc-claim-detail { display: flex; flex-direction: column; gap: var(--space-4); }
.svc-claim-overview .svc-claim-ov-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6) 0; }
.svc-claim-overview .svc-claim-ov-chips { padding: var(--space-3) var(--space-6) 0; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.svc-claim-overview .svc-trk { padding: var(--space-4) var(--space-6) var(--space-5); }
.svc-claim-ov-deal { margin-left: var(--space-2); font-size: var(--text-xs); }
.svc-claim-ov-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.svc-claim-detail .svc-card-body { overflow-wrap: anywhere; }
.svc-cmp-step { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--color-divider); }
.svc-cmp-step:first-of-type { border-top: 0; }
.svc-cmp-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.svc-cmp-done .svc-cmp-num { background: var(--color-success); }
.svc-cmp-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.svc-cmp-title { font-weight: 600; }
.svc-cmp-note { font-size: var(--text-sm); color: var(--color-text); white-space: pre-wrap; }
.svc-cmp-reopen { padding-top: var(--space-3); border-top: 1px solid var(--color-divider); }
.svc-claim-detail .svc-btn-row { margin-top: 0; flex-wrap: wrap; }
.svc-wty-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.svc-wty-item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.svc-wty-add { border-top: 1px solid var(--color-divider); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.svc-wty-add .svc-fgrid { width: 100%; }
.svc-pipe-list { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0; }
.svc-pipe-stage { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.svc-pipe-head { display: flex; align-items: center; gap: var(--space-3); }
.svc-pipe-mail { background: var(--color-surface-2); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.svc-pipe-mail-sub { font-size: var(--text-xs); font-weight: 600; margin-bottom: 4px; }
.svc-pipe-mail-body { font-size: var(--text-xs); color: var(--color-text-muted); white-space: pre-wrap; }
@media (max-width: 820px) { .svc-claim-detail .svc-fgrid { grid-template-columns: 1fr; } }
/* Padding safety for every Servicing modal body / card hint text */
#smModal .svc-card-body > .svc-field-hint:first-child { margin-top: 0; }
#smModal .svc-field-hint { overflow-wrap: anywhere; }
.svc-wty-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); margin-bottom: var(--space-2); }
.svc-wty-line:last-child { margin-bottom: 0; }
.svc-wty-line .svc-cell-sub { flex-basis: 100%; }
.svc-wty-kind { font-size: var(--text-xs); font-weight: 600; color: var(--color-primary-active); }
.svc-wty-kind-mfr { color: var(--color-text-muted); }
.svc-cmp-body > .btn, .svc-cmp-body > .svc-btn-row { align-self: flex-start; }
.svc-claim-detail .svc-cmp-body .svc-fgrid { grid-template-columns: minmax(0, 1fr); }
.svc-cmp-body input[type=datetime-local] { max-width: 320px; }

.svc-check-block { white-space: normal; align-items: flex-start; font-size: var(--text-sm); }
.svc-check-block input { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--color-primary); }

/* ==========================================================================
   Servicing dashboard (Sam, 2026-10-13). Same look as the Quoting and Stock
   dashboards: the shared qv-hero / qd-* styles live in quoting.css, which
   loads after this file, so the overrides below use higher-specificity
   selectors. Only the Servicing-specific pieces are styled here.
   ========================================================================== */
#viewServicing.sv-page > .dd-page-header { display: none; }
#viewServicing.sv-page #servicingPageActions { display: none; }
.sv-root .sv-hero::before {
  width: 72%; background: url('../assets/hero-servicing.webp?v=20261015') right 50% / cover no-repeat;
}
.sv-root .qv-hero { margin-bottom: var(--space-5, 20px); }

/* headline job figures */
.sv-figs { margin-bottom: 14px; }
.sv-figs .qd-card-h { margin-bottom: 12px; }
.sv-figs-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.sv-fig { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; border-radius: 12px; background: #faf8f2; border: 1px solid var(--color-border); border-left: 3px solid #d4af6a; }
.sv-fig b { font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sv-fig-l { font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.sv-fig-h { font-size: 11.5px; line-height: 1.3; color: var(--color-text-muted); }
.sv-fig-total { border-left-color: #14110d; }
.sv-fig-good { border-left-color: #3f8a5a; }
.sv-fig-bad { border-left-color: #b94a48; }
.sv-fig-info { border-left-color: #6d8fb3; }

/* pipeline: one row per stage group, tiles aligned on a shared six-column grid */
.sv-flow { display: grid; gap: 14px; }
.sv-root .sv-flow .qd-flow-group { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: start; }
.sv-root .sv-flow .qd-flow-gh { margin: 0; padding: 14px 0 0; border-bottom: 0; }
.sv-flow-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.sv-flow .qd-stage-l { min-height: 2.4em; }

/* bars: workshop load and warranty cover */
.sv-bars { display: grid; gap: 10px; }
.sv-bar { display: grid; grid-template-columns: minmax(72px, 112px) minmax(0, 1fr) auto; align-items: center; gap: 12px; min-width: 0; }
.sv-bar-l { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-bar-t { display: block; height: 10px; border-radius: 6px; background: #ece6d6; overflow: hidden; }
.sv-bar-t i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #b8923f, #e8c785); }
.sv-bar-t i.is-warn { background: linear-gradient(90deg, #c8962f, #efc66a); }
.sv-bar-t i.is-late { background: linear-gradient(90deg, #b94a48, #d98a87); }
.sv-bar-v { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; min-width: 76px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-bar-v b { font-family: var(--font-display); font-size: 1rem; }
.sv-bar-v em { font-style: normal; font-size: 12px; color: var(--color-text-muted); }
.sv-bar-v em.sv-late { color: #9b2c2c; font-weight: 700; }
.sv-bar.is-zero .sv-bar-l, .sv-bar.is-zero .sv-bar-v b { color: #b8b2a2; }
.sv-sub { margin: 18px 0 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8a6d2a; }

/* lead-time health strip */
.sv-tl-bar { display: flex; height: 12px; border-radius: 7px; overflow: hidden; gap: 2px; background: #ece6d6; }
.sv-tl-bar i { display: block; min-width: 6px; }
.sv-tl i, i.sv-tl-good, i.sv-tl-warn, i.sv-tl-due, i.sv-tl-bad, i.sv-tl-none { display: inline-block; }
.sv-tl-good { background: #3f8a5a; }
.sv-tl-warn { background: #d4af6a; }
.sv-tl-due { background: #d98a3d; }
.sv-tl-bad { background: #b94a48; }
.sv-tl-none { background: #c9c3b2; }
.sv-tl-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; color: var(--color-text-muted); }
.sv-tl-key span { display: inline-flex; align-items: center; gap: 6px; }
.sv-tl-key i { width: 9px; height: 9px; border-radius: 50%; }
.sv-tl-key b { color: var(--color-text); font-variant-numeric: tabular-nums; }

/* small details */
.sv-note { margin: 12px 0 0; font-size: 12.5px; color: #8a6d2a; font-weight: 600; line-height: 1.4; }
.sv-when-warn { color: #8a6d2a; }
.qd-mini b.sv-good { color: #2f6f47; }
.qd-mini b.sv-bad { color: #9b2c2c; }
.sv-root .qd-days.is-warn { color: #8a6d2a; }
.sv-root .qd-row:disabled { cursor: default; opacity: 0.7; }
.sv-cols-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-last { margin-bottom: 14px; }
.sv-last .qd-acts.sv-acts-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.sv-root .qd-row .svc-chip { white-space: nowrap; }

@media (max-width: 1280px) {
  .sv-figs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .sv-root .sv-flow .qd-flow-group { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sv-root .sv-flow .qd-flow-gh { padding-top: 0; border-bottom: 1px solid var(--color-border); padding-bottom: 6px; }
  .sv-flow-tiles { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .sv-cols-even { grid-template-columns: minmax(0, 1fr); }
  .sv-last .qd-acts.sv-acts-wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sv-figs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-flow-tiles { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .sv-bar { grid-template-columns: minmax(64px, 88px) minmax(0, 1fr) auto; gap: 8px; }
  .sv-root .qv-hero { flex-wrap: wrap; }
}
.sv-root .qd-cols > :only-child { grid-column: 1 / -1; }