/* MitaBase Pro — a product of ETMITA · https://etmita.com
   Copyright © ETMITA. All rights reserved. */
/* ════════════════════════════════════════════════════════════════
   VERLAUF — the archive the billing runs on.

   v3 (2026-08-30): the page is src/features/history/history.page.ts →
   public/js/pages/history.js; this sheet holds every .vl3-* rule.
   Token-native under .mt-scope (overview-tokens.css) — dark mode is a
   token swap, never a parallel rule set. Shares the KPI / action /
   dialog grammar with fuhrpark.css + dispatch.css (.fp3-*, .dsp3-*).

   Reading order: FAHRTEN (KPIs → toolbar → the day-grouped timeline →
   pager) → PRÜFUNG (review cards) → the in-module dialog. Times and
   counts are mono + tabular and bidi-isolated; payment/form state is
   never a colour alone — the chip carries its text.
   ════════════════════════════════════════════════════════════════ */

.vl3 { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 12px; padding: 14px 16px 16px; overflow-y: auto; }
/* the head is the shared card (MT.ui.pageHead, ui-kit.css, 2026-10-28) */
/* The view switch — a REAL segmented control, not two words of text.
   Styled here in full: the page must not lean on another sheet's
   .mt-seg scope (operator caught exactly that, 2026-08-30). */
.vl3-tabs {
  display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 4px; border-radius: 13px;
  border: 1px solid var(--border-subtle); background: var(--surface-inset);
}
.vl3-tabs .mt-seg {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 0 16px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text-secondary);
  font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.vl3-tabs .mt-seg:hover { color: var(--text-primary); }
.vl3-tabs .mt-seg.is-on {
  background: var(--surface-card); color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-sm);
}
.vl3-tabs .mt-seg:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }
.vl3-tab-n { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--status-expiring-soft); color: var(--status-expiring-text); font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center; display: inline-block; }
.vl3-tab-n.hidden { display: none !important; }
/* grow to fill a SHORT archive so the pager below sinks to the bottom
   of the page — but never shrink below the content. `flex: 1` means
   flex-basis 0, so with 25 rows on the page the body box stayed one
   viewport tall, the rows spilled out of it, and the pager landed in
   the middle of them (operator screenshot, 2026-09-13). */
.vl3-body { display: flex; flex-direction: column; gap: 12px; flex: 1 0 auto; }
.vl3-ic { flex: 0 0 auto; }
.vl3-mono { font-family: var(--font-mono), monospace; font-variant-numeric: tabular-nums; }
.vl3-avfall { display: inline-grid; place-items: center; border-radius: 999px; background: var(--surface-inset); color: var(--text-secondary); font-size: .7rem; font-weight: 800; flex: 0 0 auto; }
.vl3-av { flex: 0 0 auto; }
.vl3-note { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .76rem; color: var(--text-muted); }

/* ── KPI strip: the shared tile (MT.ui.kpiCard, ui-kit.css) ──────── */
.vl3-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: stretch; }

/* ── toolbar ────────────────────────────────────────────────────── */
.vl3-toolbar {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border-subtle);
  background: var(--surface-card); box-shadow: var(--shadow-sm);
}
.vl3-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 40px; border-radius: 10px; border: 1px solid var(--field-line); background: var(--field-ground); color: var(--text-muted); }
.vl3-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: .84rem; }
.vl3-search input:focus { outline: none; }
.vl3-search:focus-within { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }
.vl3-search-x { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; }
.vl3-search-x:hover { background: var(--surface-hover); color: var(--text-primary); }
.vl3-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vl3-filters .is-end, .vl3-count.is-end { margin-inline-start: auto; }
.vl3-select {
  height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--field-line);
  background: var(--field-ground); color: var(--text-primary); font: inherit; font-size: .8rem; min-width: 0; max-width: 100%;
}
.vl3-select:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }
.vl3-select.is-text { width: 150px; }
.vl3-select.is-date { width: 138px; }
.vl3-select.is-psize { width: auto; }
/* The panel's select button is full width by default (select.css); in
   the Verlauf's toolbar each filter sizes to its words — four selects
   made a 230 px toolbar at 1440 (2026-10-29, UX review M1). */
.mt-sel-btn.vl3-select { width: auto; max-width: 100%; }
.vl3-count { font-size: .74rem; color: var(--text-muted); white-space: nowrap; }

/* ── chips: payment + form-check (text, never colour alone) ─────── */
.vl3-pay, .vl3-fc {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 24px; padding-block: 0; padding-inline: 9px; border: 0;
  border-radius: 999px; font-size: .7rem; font-weight: 700; white-space: nowrap;
  background: var(--surface-inset); color: var(--text-secondary); flex: 0 0 auto;
}
button.vl3-fc { cursor: pointer; min-height: 24px; }
button.vl3-fc:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }
.vl3-pay.is-paid { background: var(--status-valid-soft); color: var(--status-valid-text); }
.vl3-pay.is-unpaid { background: var(--status-expired-soft); color: var(--status-expired-text); }
.vl3-pay.is-exempt { background: var(--accent-soft); color: var(--accent-text); }
.vl3-pay.is-private { background: var(--status-expiring-soft); color: var(--status-expiring-text); }
.vl3-pay.is-accident, .vl3-pay.is-other { background: var(--surface-inset); color: var(--text-secondary); }
.vl3-fc.is-ok { background: var(--status-valid-soft); color: var(--status-valid-text); }
.vl3-fc.is-warn { background: var(--status-expiring-soft); color: var(--status-expiring-text); }
.vl3-fc.is-danger { background: var(--status-expired-soft); color: var(--status-expired-text); }
.vl3-fc.is-info { background: var(--accent-soft); color: var(--accent-text); }
.vl3-fc.is-muted { background: transparent; color: var(--text-muted); }
.vl3-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font-size: .66rem; font-weight: 700; }

/* ── the day-grouped timeline ───────────────────────────────────── */
.vl3-list { display: flex; flex-direction: column; gap: 14px; min-height: 120px; }
.vl3-day { display: flex; flex-direction: column; gap: 8px; }
.vl3-day-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px; padding: 6px 4px;
  background: var(--surface-page); backdrop-filter: blur(6px);
}
.vl3-day-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent-fill-solid); flex: 0 0 auto; }
.vl3-day-head h3 { margin: 0; font-size: .8rem; font-weight: 700; color: var(--text-primary); }
.vl3-day-n { font-size: .7rem; color: var(--text-muted); }
.vl3-day-rows { display: flex; flex-direction: column; gap: 6px; border-inline-start: 2px solid var(--border-subtle); padding-inline-start: 12px; margin-inline-start: 3px; }
.vl3-row { border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--surface-card); overflow: hidden; }
.vl3-row.is-open { box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
.vl3-row-head {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
  padding: 8px 12px; border: 0; background: transparent; color: inherit; font: inherit;
  text-align: start; cursor: pointer;
}
.vl3-row-head:hover { background: var(--surface-hover); }
.vl3-row-head:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: -2px; }
.vl3-time { flex: 0 0 auto; font-size: .76rem; font-weight: 700; color: var(--text-secondary); min-width: 42px; }
.vl3-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.vl3-who b { font-size: .84rem; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vl3-route { font-size: .7rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a round trip's mark on both rides (2026-11-01) */
.vl3-pair { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
.vl3-drv { flex: 0 1 auto; font-size: .74rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14ch; }
/* the badges at the end, one group: driver · form check · payment
   (2026-10-28); the form-check slot keeps its width, so a row without a
   check lines up with the rows that have one */
.vl3-badges { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; flex: 0 0 auto; }
.vl3-fc-slot { display: inline-flex; justify-content: center; min-width: 4.5rem; }

/* detail */
.vl3-detail { display: flex; flex-direction: column; gap: 10px; padding: 4px 12px 12px; border-top: 1px dashed var(--border-subtle); }
.vl3-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; }
.vl3-field { display: flex; flex-direction: column; gap: 1px; font-size: .74rem; min-width: 0; }
.vl3-field span { color: var(--text-muted); font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.vl3-field b { color: var(--text-primary); font-weight: 600; overflow-wrap: anywhere; }
.vl3-photos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vl3-thumb { width: 64px; height: 64px; padding: 0; border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden; background: var(--surface-inset); cursor: zoom-in; }
.vl3-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vl3-thumb.is-broken { display: grid; place-items: center; color: var(--text-muted); cursor: not-allowed; }
.vl3-thumb:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 2px; }
.vl3-nophoto { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--text-muted); }
/* the Schein's earlier versions (2026-10-18): quieter than the current photo */
.vl3-earlier { display: flex; flex-direction: column; gap: 6px; }
.vl3-earlier-h { font-size: .72rem; font-weight: 600; color: var(--text-muted); }
.vl3-earlier-row { display: flex; gap: 10px; flex-wrap: wrap; }
.vl3-earlier-item { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.vl3-earlier-item figcaption { font-size: .68rem; color: var(--text-muted); }
.vl3-thumb.is-earlier { width: 48px; height: 48px; opacity: .8; }
.vl3-row-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── pager ──────────────────────────────────────────────────────── */
.vl3-pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 2px 0 8px; margin-top: auto; }
.vl3-pager:empty { display: none; }
.vl3-page {
  min-width: 34px; height: 34px; padding: 0 8px; border-radius: 9px;
  border: 1px solid var(--border-subtle); background: var(--surface-card);
  color: var(--text-secondary); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.vl3-page:hover:not(:disabled) { background: var(--surface-hover); }
.vl3-page.is-active { background: var(--accent-fill-solid); border-color: var(--accent-fill-solid); color: var(--accent-contrast); }
.vl3-page:disabled { opacity: .4; cursor: default; }
.vl3-page:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }
.vl3-gap { color: var(--text-muted); font-size: .78rem; }

/* ── empty states (a suggestion, never a dead end) ──────────────── */
.vl3-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 52px 16px; text-align: center; color: var(--text-muted);  border-radius: 18px; border: 1px dashed var(--border-strong); margin: 4px 0;}
.vl3-empty p { margin: 0; font-size: .84rem; max-width: 46ch; line-height: 1.5; }
.vl3-empty-sub { font-size: .74rem !important; }

/* ── Prüfung: review cards ──────────────────────────────────────── */
.vl3-rev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.vl3-rev { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--surface-card); box-shadow: var(--shadow-sm); min-width: 0; }
.vl3-rev-photo { flex: 0 0 96px; width: 96px; height: 128px; padding: 0; border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden; background: var(--surface-inset); cursor: zoom-in; }
.vl3-rev-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vl3-rev-photo.is-empty { display: grid; place-items: center; color: var(--text-muted); cursor: default; }
.vl3-rev-photo:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 2px; }
/* A photo that could not be fetched says so (UX review 2026-10-18) — the
   same quiet frame as "no photo", with the crossed-out picture and a
   tooltip; never an empty box beside "Bestätigen". */
.vl3-rev-photo.is-broken, .vl3-fc-photo.is-broken { display: grid; place-items: center; min-height: 96px; color: var(--text-muted); cursor: not-allowed; }
.vl3-rev-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.vl3-rev-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vl3-rev-top b { font-size: .88rem; color: var(--text-primary); }
.vl3-rev-meta { display: flex; align-items: center; gap: 7px; font-size: .72rem; color: var(--text-muted); }
.vl3-rev-sum { margin: 0; font-size: .76rem; line-height: 1.45; color: var(--text-secondary); }
.vl3-rev-issues { margin: 0; padding-inline-start: 16px; font-size: .74rem; color: var(--status-expiring-text); display: flex; flex-direction: column; gap: 2px; }
.vl3-rev-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.vl3-rev-acts .is-end { margin-inline-start: auto; }
/* the decision pair stays together and sits at the end (2026-10-18) */
.vl3-rev-decide { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin-inline-start: auto; }
.vl3-rev-photo:not(.is-empty):not(.is-broken) { cursor: pointer; }

/* ── the form-check dialog ──────────────────────────────────────── */
.vl3-dialog-wide { max-width: 720px; width: 100%; }
.vl3-fc-body { display: flex; flex-direction: column; gap: 10px; }
.vl3-fc-photo { width: 100%; max-height: 320px; padding: 0; border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; background: var(--surface-inset); cursor: zoom-in; }
.vl3-fc-photo img { width: 100%; height: 100%; max-height: 320px; object-fit: contain; display: block; }
.vl3-fc-clean { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .78rem; font-weight: 600; color: var(--status-valid-text); }
.vl3-e-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── phone ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .vl3 { padding: 10px; }
  .vl3-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vl3-drv { display: none; }
  /* the patient's name is what the row is for: on a phone the badges take
     a line of their own under it, so the name keeps the width (H5) */
  .vl3-row-head { flex-wrap: wrap; row-gap: 6px; }
  .vl3-badges { flex: 1 0 100%; padding-inline-start: 92px; }
  .vl3-fc-slot { min-width: 0; }
  .vl3-select, .vl3-select.is-text, .vl3-select.is-date, .mt-sel-btn.vl3-select { flex: 1 1 46%; width: auto; }
  .vl3-count.is-end { flex-basis: 100%; text-align: end; }
  .vl3-rev-grid { grid-template-columns: 1fr; }
  .vl3-e-grid { grid-template-columns: 1fr; }
  .vl3-page, .vl3-row-head, .vl3-select { min-height: 44px; }
  .vl3-search { height: 44px; }
}

/* ── calm by default ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vl3 * { transition: none !important; animation: none !important; }
}