/* MitaBase Pro — a product of ETMITA · https://etmita.com
   Copyright © ETMITA. All rights reserved. */
/*
 * public/dispatch.css — Disposition v3 (dispatch redesign 2026-08-22).
 * Markup + behavior: /js/pages/dispatch.js (GENERATED from
 * src/features/dispatch/dispatch.page.ts); data: /js/core/
 * dispatch-model.js. Every colour here is a MITA Base semantic token
 * from overview-tokens.css (`.mt-scope`): light by default, the
 * command-center dark under body.dark — never a raw hex in a rule that
 * paints a surface. Namespace: dsp3-*. Logical properties throughout so
 * Persian (RTL, Dana via --font-ui) mirrors for free; numbers,
 * plates and times are dir="ltr"-isolated in the markup.
 *
 * Also home to the three body-level pieces the page spawns — the
 * tooltip (.mt-tip), the drag ghost (.mt-dnd-ghost) and the menus /
 * dialog (.dsp3-menu, .dsp3-dialog) — each carrying .mt-scope itself,
 * because custom properties do not cross out of #tab-dispatch.
 */

/* ── page frame ────────────────────────────────────────────────── */
#tab-dispatch { background: var(--surface-canvas); }
/* This sheet loads AFTER the Tailwind build, so a component rule with
   `display:flex` would outrank the utility `.hidden` — the explicit
   override keeps the selection bar, the undo bar and the view host
   hideable (same family as scripts/test-hidden-override.js). */
.dsp3-selbar.hidden, .dsp3-undo.hidden, .dsp3-host.hidden, .dsp3-day-drivers.hidden { display: none; }
.dsp3-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 18px 22px 28px;
  color: var(--text-body);
  font-family: var(--font-ui), "IBM Plex Sans", system-ui, sans-serif;
  /* The page reads its OWN width, not the window's (2026-09-11).
     Every breakpoint here used to be a media query, and the thing that
     actually gets tight is the content column: the sidebar is 272px
     and collapses, so a 1350px window with the sidebar open has less
     room than a 1200px one with it shut, and the media queries could
     not tell the two apart. A 1350px screen therefore kept the layout
     built for 1600+: seven day-cells sharing 620px with their chips
     spilling out of them, four KPI tiles in a 300px rail wrapping to
     three lines each, and one and a bit ride cards in the strip.
     The dialogs in this same sheet have measured themselves this way
     since they were written. */
  container-type: inline-size;
  container-name: dsp3;
}
.dsp3-page .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── top: calendar + KPIs ───────────────────────────────────────── */
.dsp3-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 14px;
  align-items: stretch;
}
/* The rail asks for 300–360px and the left side needs the driver
   column (250) plus one whole ride card (340) plus its padding before
   it is worth splitting at all. Below that the two stack, which gives
   the day strip the full width instead of a squeezed two-thirds. */
@container dsp3 (max-width: 1060px) { .dsp3-top { grid-template-columns: 1fr; } }

.dsp3-cal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 12px;
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}
.dsp3-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dsp3-cal-title {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0;
  font-family: var(--font-display), "Space Grotesk", sans-serif;
  font-weight: 600; font-size: 1rem; letter-spacing: -.01em;
  color: var(--text-primary);
}
.dsp3-cal-range { font-family: var(--font-mono); font-size: .8rem; font-weight: 500; color: var(--text-muted); }
.dsp3-cal-nav { display: inline-flex; align-items: center; gap: 4px; }
.dsp3-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 36px; height: 36px; padding: 0 10px;
  border-radius: 10px; border: 1px solid var(--border-subtle);
  background: var(--surface-inset); color: var(--text-secondary);
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: background .15s var(--mt-ease-out), color .15s, transform .12s;
}
.dsp3-iconbtn:hover { background: var(--surface-overlay); color: var(--text-primary); }
.dsp3-iconbtn:active { transform: scale(.96); }
.dsp3-iconbtn.is-on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.dsp3-iconbtn.is-xs { min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px; }
.dsp3-cal-today { font-weight: 700; }

.dsp3-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}
/* Seven cells need ~92px each before the date, the count and the
   "2 nicht gesendet" chip stop fitting on their own lines. */
@container dsp3 (max-width: 660px) { .dsp3-days { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* On a phone four cells are 71 px: a Persian weekday met the kebab's corner
   and "ارسال‌نشده" had no room. Three cells of ~97 px hold both (H3). */
@container dsp3 (max-width: 420px) { .dsp3-days { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dsp3-day {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 112px;
  padding: 8px 8px 8px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-inset);
  transition: border-color .15s, box-shadow .15s, transform .15s var(--mt-ease-out);
  overflow: hidden;
}
.dsp3-day.is-weekend { background: color-mix(in srgb, var(--surface-inset) 70%, var(--surface-canvas)); }
.dsp3-day.is-past { opacity: .78; }
.dsp3-day.is-today { border-color: var(--accent-fill-solid); }
.dsp3-day.is-selected { border-color: var(--accent-fill-solid); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface-card); opacity: 1; }
.dsp3-day.is-suggest { animation: dsp3Suggest 2.4s ease-in-out infinite; }
.dsp3-day.is-closed { border-style: dashed; }
.dsp3-day.is-over { border-color: var(--accent-fill-solid); background: var(--accent-soft); transform: translateY(-2px); }
.dsp3-day.is-over.is-reject { border-color: var(--status-expired); background: var(--status-expired-soft); cursor: not-allowed; }
/* Row 1 is the date's label (weekday · month) and NOTHING at its right
   end: that corner belongs to the day's kebab, which used to fade in
   straight on top of the open-count (operator, 2026-09-14). The counts
   moved down beside the big number, where they read as what they are —
   this day has n open rides — and row-gap parts the number from the
   label above it. */
.dsp3-day-pick {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px;
  width: 100%; min-width: 0; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: start; cursor: pointer;
}
/* 2026-10-29 (UX review H3): the grid put the count bubble over the day
   number in a 92 px tile and let a Persian weekday push into the counts.
   Two flex lines that WRAP: nothing can sit on anything else. The head
   leaves the kebab's corner free. */
.dsp3-day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; padding-inline-end: 22px; }
.dsp3-day-body { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.dsp3-day-dow { min-width: 0; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.dsp3-day.is-today .dsp3-day-dow { color: var(--accent); }
.dsp3-day-num { font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--text-primary); }
.dsp3-day-mon { font-size: .72rem; color: var(--text-muted); }
.dsp3-day-tally { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; }
.dsp3-day-n {
  min-width: 26px; height: 26px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--accent-fill); color: var(--accent-contrast);
  font-family: var(--font-mono); font-size: .8rem; font-weight: 600;
}
.dsp3-day-n.is-zero { background: transparent; border: 1px dashed var(--border-default); color: var(--text-muted); }
.dsp3-day-d { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-mono); font-size: .7rem; color: var(--status-valid-text); }
.dsp3-day-chips { display: flex; flex-wrap: wrap; gap: 4px; min-height: 18px; min-width: 0; }
/* a chip never runs past the tile: its words wrap inside it, and a long
   Persian word ("ارسال‌نشده") gets the whole width (H3) */
.dsp3-day-chip {
  display: inline-flex; align-items: center; gap: 3px; max-width: 100%; min-width: 0;
  padding: 2px 5px; border-radius: 999px; overflow-wrap: anywhere;
  font-size: .66rem; font-weight: 600; letter-spacing: .02em;
  background: var(--surface-overlay); color: var(--text-secondary);
}
.dsp3-day-chip.is-sent { background: var(--status-info-soft); color: var(--status-info-text); }
.dsp3-day-chip.is-done { background: var(--status-valid-soft); color: var(--status-valid-text); }
.dsp3-day-chip.is-unsent { background: var(--status-expiring-soft); color: var(--status-expiring-text); }
/* The driver avatars (drop targets) OVERLAY the bottom of the day card —
   never in flow. Showing them in flow made every card taller the moment
   a drag began, the whole page jumped and the drop target moved away
   from under the pointer ("you have to try several times", 2026-08-23). */
.dsp3-day-drivers {
  display: none; flex-wrap: wrap; gap: 4px;
  position: absolute; inset-inline: 6px; inset-block-end: 6px; z-index: 2;
  padding: 4px 0 0; border-top: 1px dashed var(--border-subtle); background: var(--surface-inset);
}
.dsp3-day:hover .dsp3-day-drivers,
.dsp3-day:focus-within .dsp3-day-drivers,
body.mt-dnd-active .dsp3-day-drivers { display: flex; }
.dsp3-day-drv {
  position: relative; display: inline-flex; padding: 0; border: 2px solid transparent; border-radius: 10px;
  background: none; cursor: copy; transition: transform .12s, border-color .12s;
}
.dsp3-day-drv.has-rides { border-color: var(--border-default); }
.dsp3-day-drv.is-over { border-color: var(--accent-fill-solid); transform: scale(1.15); }
.dsp3-day-drv.is-over.is-reject { border-color: var(--status-expired); }
.dsp3-day-drv-n {
  position: absolute; inset-block-end: -5px; inset-inline-end: -5px;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
  background: var(--surface-card); border: 1px solid var(--border-default);
  font-family: var(--font-mono); font-size: .6rem; line-height: 13px; text-align: center; color: var(--text-secondary);
}
.dsp3-day-menu {
  position: absolute; inset-block-start: 6px; inset-inline-end: 6px;
  width: 24px; height: 24px; border-radius: 8px; border: 0; background: transparent;
  color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity .12s;
}
.dsp3-day:hover .dsp3-day-menu, .dsp3-day:focus-within .dsp3-day-menu, .dsp3-day.is-selected .dsp3-day-menu { opacity: 1; }
.dsp3-day-menu:hover { background: var(--surface-overlay); color: var(--text-primary); }
/* the rubber stamp on a closed day */
.dsp3-stamp {
  position: absolute; inset-inline-end: -6px; inset-block-end: 10px;
  transform: rotate(-12deg);
  padding: 3px 10px 4px;
  border: 2px solid var(--accent-fill-solid); border-radius: 6px;
  color: var(--accent); font-family: var(--font-display), sans-serif;
  font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.1;
  background: color-mix(in srgb, var(--surface-card) 85%, transparent);
  box-shadow: 0 0 0 2px var(--surface-card) inset;
  pointer-events: none;
  animation: dsp3Stamp .45s cubic-bezier(.2, 1.4, .4, 1) backwards;
}
.dsp3-stamp small { display: block; font-size: .55rem; letter-spacing: .04em; text-transform: none; color: var(--text-muted); }
.dsp3-cal-hint { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .72rem; color: var(--text-muted); }
@keyframes dsp3Suggest {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 3px var(--accent-soft); }
}
@keyframes dsp3Stamp {
  from { opacity: 0; transform: rotate(-12deg) scale(1.6); }
  to { opacity: 1; transform: rotate(-12deg) scale(1); }
}

/* KPIs */
.dsp3-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* Two-up while they sit in the rail; four across once the rail has
   become a full-width row under the calendar. */
@container dsp3 (max-width: 1060px) { .dsp3-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* a fifth tile while a return ride waits (2026-11-01): a row of its own in
   the rail, a fifth column across */
.dsp3-kpis > #dsp3-kpi-returns { grid-column: 1 / -1; }
@container dsp3 (max-width: 1060px) {
  .dsp3-kpis:has(> #dsp3-kpi-returns) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dsp3-kpis > #dsp3-kpi-returns { grid-column: auto; }
}
@container dsp3 (max-width: 720px) { .dsp3-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container dsp3 (max-width: 720px) {
  .dsp3-kpis:has(> #dsp3-kpi-returns) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dsp3-kpis > #dsp3-kpi-returns { grid-column: 1 / -1; }
}
/* A phone (operator, 2026-10-18: a dispatcher on the road is a real
   case). At 400 px the calendar head, the KPI pair and the view tabs were
   ~500 px wide and the whole board scrolled sideways. Below 520 the head
   wraps, the KPIs take one column, the tabs scroll inside themselves and
   the date field shrinks; the lanes keep their own horizontal scroll. */
@container dsp3 (max-width: 520px) {
  .dsp3-cal-head { flex-wrap: wrap; row-gap: 8px; }
  .dsp3-cal-nav { flex-wrap: wrap; }
  .dsp3-kpis { grid-template-columns: minmax(0, 1fr); }
  .dsp3-kpis:has(> #dsp3-kpi-returns) { grid-template-columns: minmax(0, 1fr); }
  .dsp3-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .dsp3-cal-hint { flex-wrap: wrap; }
}
/* the tiles themselves are the shared KPI tile (MT.ui.kpiCard, /ui-kit.css, 2026-10-28) */

/* ── action row ────────────────────────────────────────────────── */
.dsp3-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* .dsp3-act is the panel's base button (every page draws its buttons with
   it). The leading icon sits as far from the start edge as from the top
   and the bottom (operator, 2026-10-28): height 40, icon box 28 → 6 px on
   three sides, measured from the outer edge (the 1 px border included).
   One rule, from two numbers, for every size. */
.dsp3-act {
  --act-h: 40px; --act-ic: 28px;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--act-h); padding-block: 0; padding-inline: 14px;
  border-radius: 12px; border: 1px solid var(--border-subtle);
  background: var(--surface-card); color: var(--text-primary);
  font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .12s var(--mt-ease-out), background .15s, border-color .15s, box-shadow .15s;
}
.dsp3-act:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.dsp3-act:active { transform: scale(.97); }
.dsp3-act:focus-visible, .dsp3-iconbtn:focus-visible, .dsp3-kpi:focus-visible, .dsp3-tab:focus-visible, .dsp3-chip:focus-visible, .dsp3-day-pick:focus-visible, .dsp3-row:focus-visible, .dsp3-pill:focus-visible, .dsp3-day-drv:focus-visible {
  outline: 2px solid var(--accent-fill-solid); outline-offset: 2px;
}
.dsp3-act-ic { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 9px; background: var(--surface-inset); color: var(--accent); }
.dsp3-act.is-primary { background: var(--accent-fill); color: var(--accent-contrast); border-color: transparent; }
.dsp3-act.is-primary .dsp3-act-ic { background: rgba(16, 14, 23, .14); color: var(--accent-contrast); }
.dsp3-act.is-primary:hover { box-shadow: 0 0 0 5px rgba(124, 224, 0, .18); }
.dsp3-act.is-locked { opacity: .55; }
.dsp3-act.is-small { --act-h: 32px; --act-ic: 14px; min-height: var(--act-h); padding-block: 0; padding-inline: 10px; font-size: .78rem; gap: 6px; box-shadow: none; }
.dsp3-act:has(> .dsp3-act-ic:first-child),
.dsp3-act:has(> svg:first-child) { padding-inline-start: calc((var(--act-h) - var(--act-ic)) / 2 - 1px); }
.dsp3-act:not(.is-small):has(> svg:first-child) { --act-ic: 16px; }
.dsp3-act.is-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-secondary); }
.dsp3-act.is-danger { color: var(--status-expired-text); }
.dsp3-act.is-danger:hover { background: var(--status-expired-soft); }
.dsp3-act[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* ── bar: tabs · search · chips ────────────────────────────────── */
.dsp3-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 16px;
  border: 1px solid var(--border-subtle); background: var(--surface-card);
}
.dsp3-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-inset); }
.dsp3-tab {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 12px; border-radius: 9px; border: 0;
  background: transparent; color: var(--text-secondary);
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.dsp3-tab:hover { color: var(--text-primary); }
.dsp3-tab.is-on { background: var(--surface-card); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-strong), var(--shadow-sm); }
.dsp3-tab.is-on svg { color: var(--accent); }
.dsp3-tab-n { min-width: 20px; padding: 0 5px; border-radius: 999px; background: var(--surface-overlay); font-family: var(--font-mono); font-size: .68rem; line-height: 18px; text-align: center; color: var(--text-body); }
.dsp3-tab.is-on .dsp3-tab-n { background: var(--accent-soft); color: var(--accent); }
.dsp3-search {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 1 1 220px; min-width: 180px; height: 36px; padding: 0 10px;
  border-radius: 10px; border: 1px solid var(--field-line); background: var(--field-ground); color: var(--text-muted);
}
.dsp3-search:focus-within { border-color: var(--accent-fill-solid); }
.dsp3-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: .84rem; outline: none; }
.dsp3-search input::placeholder { color: var(--text-muted); }
.dsp3-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.dsp3-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary);
  font: inherit; font-size: .74rem; font-weight: 600; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.dsp3-chip:hover { background: var(--surface-inset); color: var(--text-primary); }
.dsp3-chip.is-on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
/* "Zurücksetzen" only appears while a search or filter is active — and
   it must not look like one more filter (operator 2026-08-23) */
.dsp3-chip.is-clear { border-style: dashed; border-color: var(--status-expiring); color: var(--status-expiring-text); background: var(--status-expiring-soft); }
.dsp3-chip.is-clear:hover { background: var(--status-expiring); color: var(--text-on-status); border-color: var(--status-expiring); }

.dsp3-selbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid var(--accent-fill-solid);
}
.dsp3-selbar-n { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .82rem; color: var(--accent); margin-inline-end: auto; }

/* ── shared row pieces ─────────────────────────────────────────── */
.dsp3-host { flex: 1; min-height: 0; }
.dsp3-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 40px 16px; border-radius: 18px; border: 1px dashed var(--border-strong);
  color: var(--text-muted); text-align: center;
}
.dsp3-empty p { margin: 0; font-size: .9rem; }
.dsp3-av { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--accent-fill); color: var(--accent-contrast); font-weight: 700; font-size: .78rem; }
.dsp3-av.is-inbox { width: 40px; height: 40px; background: var(--surface-overlay); color: var(--text-secondary); }
.mt-av { object-fit: cover; flex: none; }
.dsp3-plate, .dsp3-station, .dsp3-id {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 6px;
  border: 1px solid var(--border-default); background: var(--surface-inset);
  font-family: var(--font-mono); font-size: .7rem; font-weight: 600; color: var(--text-primary);
  white-space: nowrap;
}
.dsp3-station { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.dsp3-id { border-color: transparent; color: var(--text-muted); font-weight: 500; }
/* a MitaBase GO ride's date of birth, beside the name (contract v1.8) */
.dsp3-dob { color: var(--text-muted); font-size: .78rem; white-space: nowrap; }
.dsp3-doc {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 700; white-space: nowrap;
}
.dsp3-doc.is-ok { background: var(--status-valid-soft); color: var(--status-valid-text); }
.dsp3-doc.is-expiring { background: var(--status-expiring-soft); color: var(--status-expiring-text); }
.dsp3-doc.is-expired { background: var(--status-expired-soft); color: var(--status-expired-text); }
.dsp3-doc.is-unknown { background: var(--surface-overlay); color: var(--text-muted); }
.dsp3-chipx {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 6px;
  background: var(--surface-inset); color: var(--text-secondary);
  font-size: .7rem; font-weight: 600; white-space: nowrap; line-height: 1.3;
}
.dsp3-chipx.is-dir { background: var(--status-info-soft); color: var(--status-info-text); }
/* A ride from a MitaBase GO order says who asked (M8) — accent-tinted, never a stripe. */
.dsp3-chipx.is-go { background: var(--accent-soft); color: var(--accent); }
/* the house's logo on the chip (GO contract v1.7): on a light plate, like the Aufträge page; hidden until it has loaded */
.dsp3-go-logo { flex: none; width: auto; max-width: 18px; height: 12px; object-fit: contain; border-radius: 3px; background: var(--mb-alt); }
.dsp3-go-logo:not([src]) { display: none; }
.dsp3-go-logo[src] + .dsp3-go-ic { display: none; }
.dsp3-chipx.is-go .dsp3-go-p {
  margin-inline-start: 4px; padding-inline: 5px; border-radius: 999px;
  background: var(--status-valid-soft); color: var(--status-valid-text); font-weight: 600;
}
.dsp3-chipx.is-co { background: var(--surface-overlay); }
.dsp3-chipx.is-ins.is-pkv { background: var(--accent-soft); color: var(--accent); }
.dsp3-chipx.is-warn { background: var(--status-expiring-soft); color: var(--status-expiring-text); }
.dsp3-chipx.is-late { background: var(--status-expired-soft); color: var(--status-expired-text); }
/* the Schein's state (2026-11-01): info = the AI found nothing and waits for
   the office's signature; ok = signed — the only green; danger = returned */
.dsp3-chipx.is-info { background: var(--status-info-soft); color: var(--status-info-text); }
.dsp3-chipx.is-ok { background: var(--status-valid-soft); color: var(--status-valid-text); }
.dsp3-chipx.is-danger { background: var(--status-expired-soft); color: var(--status-expired-text); }
.dsp3-chipx.is-pay { background: var(--status-valid-soft); color: var(--status-valid-text); }
/* ── the round trip (2026-11-01, «Rückfahrten») ─────────────────
   The return ride's time ("geplant 17:30" / "auf Abruf"), the wait for
   the patient's call (a dot and a word — never a stripe, law 11) and the
   link to the other ride, a button that looks like the chips around it. */
.dsp3-chipx.is-oncall { background: var(--status-info-soft); color: var(--status-info-text); }
.dsp3-chipx.is-wait { background: var(--accent-soft); color: var(--accent); }
.dsp3-chipx.is-wait .dsp3-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.dsp3-chipx.is-link {
  border: 0; cursor: pointer; font: inherit; font-size: .7rem; font-weight: 600;
  background: var(--surface-inset); color: var(--accent);
}
.dsp3-chipx.is-link:hover { background: var(--accent-soft); }
.dsp3-chipx.is-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dsp3-row.is-flash { outline: 2px solid var(--accent); outline-offset: 2px; transition: outline-color 1.4s ease; }
@media (prefers-reduced-motion: reduce) { .dsp3-row.is-flash { transition: none; } }
.dsp3-chiprow { display: flex; flex-wrap: wrap; gap: 4px; }
.dsp3-chiprow.is-end { justify-content: flex-end; }
.dsp3-pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  background: var(--surface-inset); color: var(--text-secondary);
}
.dsp3-pill.has-menu { cursor: pointer; }
.dsp3-pill.has-menu:hover { border-color: currentColor; }
.dsp3-pill.is-offen { background: var(--status-info-soft); color: var(--status-info-text); }
.dsp3-pill.is-erhalten { background: var(--accent-soft); color: var(--accent); }
.dsp3-pill.is-unterwegs { background: var(--accent-fill); color: var(--accent-contrast); }
.dsp3-pill.is-erledigt { background: var(--status-valid-soft); color: var(--status-valid-text); }
.dsp3-pill.is-storniert { background: var(--status-expired-soft); color: var(--status-expired-text); }
.dsp3-pill.is-entwurf { background: var(--status-expiring-soft); color: var(--status-expiring-text); }
.dsp3-sel { display: inline-flex; align-items: center; cursor: pointer; }
.dsp3-sel input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dsp3-sel span { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--border-strong); background: var(--surface-card); display: inline-block; transition: background .12s, border-color .12s; }
.dsp3-sel input:checked + span { background: var(--accent-fill-solid); border-color: var(--accent-fill-solid); box-shadow: inset 0 0 0 3px var(--surface-card); }
.dsp3-sel input:focus-visible + span { outline: 2px solid var(--accent-fill-solid); outline-offset: 2px; }
.dsp3-patient { font-weight: 700; color: var(--text-primary); font-size: .95rem; }
.dsp3-route { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .82rem; color: var(--text-body); min-width: 0; }
.dsp3-from, .dsp3-to { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; }
/* 36ch is a READING width, not a licence to grow: whichever is smaller
   wins, so a long clinic address ellipses inside the card instead of
   running out of it. The min-width:0 is what lets it shrink at all — a
   flex item defaults to min-width:auto and refuses to go below its
   text. */
.dsp3-from > span, .dsp3-to > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: min(36ch, 100%); }
/* the station chip keeps its size; the address gives way instead */
.dsp3-from > .dsp3-chipx, .dsp3-to > .dsp3-chipx { flex: 0 0 auto; }
.dsp3-from svg { color: var(--node-origin); } .dsp3-to svg { color: var(--node-destination); }
body:not(.dark) .dsp3-from svg { color: var(--mt-volt-deep); }
.dsp3-arrow { color: var(--text-muted); }
html[dir="rtl"] .dsp3-arrow { display: inline-block; transform: scaleX(-1); }
.dsp3-note { display: flex; align-items: flex-start; gap: 5px; font-size: .76rem; color: var(--status-expiring-text); min-width: 0; }
.dsp3-note span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-width: 0; overflow-wrap: anywhere; }
.dsp3-date { font-family: var(--font-mono); font-size: .68rem; color: var(--status-expiring-text); margin-inline-start: 4px; }
.dsp3-banner {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 8px;
  padding: 7px 10px; border-radius: 10px; font-size: .76rem; line-height: 1.4;
}
.dsp3-banner > svg, .dsp3-banner summary > svg { flex: none; margin-top: 2px; }
.dsp3-banner strong { font-weight: 700; flex: none; }
.dsp3-banner-text { min-width: 0; overflow-wrap: anywhere; }
/* a long reason: a drawer — the first line shows, the rest opens */
details.dsp3-banner { display: block; min-width: 0; interpolate-size: allow-keywords; }
details.dsp3-banner > summary { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; list-style: none; min-width: 0; }
details.dsp3-banner > summary::-webkit-details-marker { display: none; }
.dsp3-banner-peek { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .9; }
details.dsp3-banner[open] .dsp3-banner-peek { visibility: hidden; }
.dsp3-banner-chev { flex: none; display: inline-flex; transition: transform .2s var(--mt-ease-out, ease-out); }
details.dsp3-banner[open] .dsp3-banner-chev { transform: rotate(180deg); }
details.dsp3-banner > .dsp3-banner-text { margin: 4px 0 2px; padding-inline-start: 21px; }
details.dsp3-banner::details-content { block-size: 0; overflow: hidden; transition: block-size .22s var(--mt-ease-out, ease-out), content-visibility .22s allow-discrete; }
details.dsp3-banner[open]::details-content { block-size: auto; }
details.dsp3-banner > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  details.dsp3-banner::details-content, .dsp3-banner-chev { transition: none; }
}
.dsp3-banner.is-return { background: var(--status-expiring-soft); color: var(--status-expiring-text); }
.dsp3-banner.is-cancel { background: var(--status-expired-soft); color: var(--status-expired-text); }
/* the progress track: one line, four milestones, a travelling marker */
.dsp3-track { position: relative; height: 24px; margin-top: 8px; margin-inline: 4px; }
.dsp3-track-line { position: absolute; inset-inline: 0; top: 11px; height: 3px; border-radius: 999px; background: var(--surface-overlay); }
.dsp3-track.is-draft .dsp3-track-line { background: repeating-linear-gradient(90deg, var(--surface-overlay) 0 4px, transparent 4px 8px); }
.dsp3-track-fill { position: absolute; inset-inline-start: 0; top: 0; height: 100%; width: var(--dsp3-p, 0%); border-radius: 999px; background: var(--accent-fill); transition: width .4s var(--mt-ease-out); }
.dsp3-track-dot { position: absolute; top: 9px; width: 7px; height: 7px; margin-inline-start: -3.5px; border-radius: 999px; background: var(--surface-overlay); border: 1px solid var(--surface-card); }
.dsp3-track-dot.is-on { background: var(--accent-fill-solid); }
.dsp3-track-mark {
  position: absolute; top: 1px; inset-inline-start: var(--dsp3-p, 0%); margin-inline-start: -11px;
  width: 22px; height: 22px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-card); border: 2px solid var(--border-strong); color: var(--text-muted);
  box-shadow: var(--shadow-sm); transition: inset-inline-start .4s var(--mt-ease-out), background .2s, color .2s;
}
.dsp3-track.is-1 .dsp3-track-mark { border-color: var(--accent-fill-solid); color: var(--accent); }
.dsp3-track.is-2 .dsp3-track-mark { border-color: transparent; background: var(--accent-fill); color: var(--accent-contrast); }
.dsp3-track.is-3 .dsp3-track-mark { border-color: transparent; background: var(--status-valid); color: var(--text-on-status); }
.dsp3-track.is-3 .dsp3-track-fill { background: var(--status-valid); }
.dsp3-track.is-3 .dsp3-track-dot.is-on { background: var(--status-valid); }
.dsp3-track.is-mini { height: 14px; margin-top: 5px; margin-inline: 6px; }
.dsp3-track.is-mini .dsp3-track-line { top: 6px; height: 2px; }
.dsp3-track.is-mini .dsp3-track-dot { top: 5px; width: 5px; height: 5px; margin-inline-start: -2.5px; }
.dsp3-track.is-mini .dsp3-track-mark { top: 0; width: 14px; height: 14px; margin-inline-start: -7px; border-width: 1.5px; }
/* ── the live track (2026-11-02, the operator: «make the green line
   alive») ──────────────────────────────────────────────────────────
   A ride under way moves: light runs along the filled part toward the
   marker (slow once received, quicker on the road) and the marker sends
   out a ring. A sent ride's marker breathes while it waits; a draft's
   dashes walk; a finished ride is still. transform and opacity only,
   so a board full of cards stays on the compositor; Reduce Motion
   stops all of it. */
.dsp3-track-fill { overflow: hidden; }
.dsp3-track.is-1 .dsp3-track-fill::after, .dsp3-track.is-2 .dsp3-track-fill::after {
  content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 45%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface-card) 80%, transparent), transparent);
  animation: dsp3-flow 2.4s linear infinite;
}
.dsp3-track.is-2 .dsp3-track-fill::after { animation-duration: 1.5s; }
html[dir="rtl"] .dsp3-track-fill::after { animation-direction: reverse; }
@keyframes dsp3-flow { from { transform: translateX(-110%); } to { transform: translateX(240%); } }
.dsp3-track.is-1 .dsp3-track-mark::after, .dsp3-track.is-2 .dsp3-track-mark::after {
  content: ""; position: absolute; inset: -4px; border-radius: 999px; border: 2px solid var(--accent-fill-solid);
  pointer-events: none; animation: dsp3-ping 2.4s var(--mt-ease-out, ease-out) infinite;
}
.dsp3-track.is-2 .dsp3-track-mark::after { animation-duration: 1.5s; }
@keyframes dsp3-ping { 0% { transform: scale(.8); opacity: .75; } 75%, 100% { transform: scale(1.75); opacity: 0; } }
.dsp3-track.is-0:not(.is-draft) .dsp3-track-mark { animation: dsp3-breathe 2.8s ease-in-out infinite; }
@keyframes dsp3-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.dsp3-track.is-draft .dsp3-track-line { background-size: 8px 100%; animation: dsp3-march 1.6s linear infinite; }
@keyframes dsp3-march { to { background-position: 8px 0; } }
@media (prefers-reduced-motion: reduce) {
  .dsp3-track-fill::after, .dsp3-track-mark::after { animation: none; display: none; }
  .dsp3-track-mark, .dsp3-track-line, .dsp3-track-fill { animation: none; transition: none; }
}
.dsp3-phone { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--text-secondary); text-decoration: none; }
.dsp3-phone:hover { color: var(--accent); }
.dsp3-phone.is-empty { color: var(--text-muted); }

/* row states */
.dsp3-row { position: relative; transition: box-shadow .15s, border-color .15s, opacity .15s; }
.dsp3-row.is-selected { border-color: var(--accent-fill-solid) !important; box-shadow: 0 0 0 2px var(--accent-soft); }
.dsp3-row.is-cancelled .dsp3-patient, .dsp3-row.is-cancelled .dsp3-route, .dsp3-row.is-cancelled .dsp3-tk-hm, .dsp3-row.is-cancelled .dsp3-g-hm { text-decoration: line-through; color: var(--text-muted); }
.dsp3-row.is-cancelled { opacity: .72; }
.dsp3-row.is-done .dsp3-patient { color: var(--text-secondary); }
/* Overdue is said at the time, not on the edge (2026-09-13): the hour
   turns red and a word sits with it. The KPI chip filters the same. */
.dsp3-row.is-overdue .dsp3-tk-hm, .dsp3-row.is-overdue .dsp3-g-hm, .dsp3-table tbody tr.is-overdue .dsp3-t-hm { color: var(--status-expired-text); }
.dsp3-late { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; background: var(--status-expired-soft); color: var(--status-expired-text); font-size: .62rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.dsp3-row.is-lifted { opacity: .45; }
.dsp3-row[draggable], .dsp3-row { cursor: grab; touch-action: pan-y; }
body.mt-dnd-active .dsp3-row { cursor: grabbing; }

/* ── Liste (driver lanes + tickets) ────────────────────────────── */
.dsp3-lanes { display: flex; flex-direction: column; gap: 10px; }
.dsp3-lane {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0;
  /* the strip is the scroller; the lane itself must never be one */
  max-width: 100%;
  border-radius: 16px; border: 1px solid var(--border-subtle); background: var(--surface-card);
  overflow: hidden;
}
@container dsp3 (max-width: 700px) { .dsp3-lane { grid-template-columns: 1fr; } }
.dsp3-lane.is-idle { opacity: .85; }
.dsp3-lane.is-suspended .dsp3-gname strong { text-decoration: line-through; }
.dsp3-ghead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; background: var(--surface-raised);
  transition: background .15s;
}
.dsp3-lane .dsp3-ghead { border-inline-end: 1px solid var(--border-subtle); flex-direction: column; align-items: flex-start; gap: 8px; }
.dsp3-ghead.is-over { background: var(--accent-soft); }
.dsp3-ghead.is-over.is-reject { background: var(--status-expired-soft); }
.dsp3-gid { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dsp3-gname { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dsp3-gname strong { font-size: .95rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsp3-gsub { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dsp3-gcount { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.dsp3-strip {
  display: flex; gap: 10px; padding: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; scroll-snap-type: x proximity; min-height: 150px;
  transition: background .15s;
  /* the cqi the ticket above measures itself in */
  container-type: inline-size;
}
.dsp3-strip.is-over { background: var(--accent-soft); }
.dsp3-strip.is-over.is-reject { background: var(--status-expired-soft); }
.dsp3-lane-empty { display: inline-flex; align-items: center; gap: 6px; align-self: center; font-size: .8rem; color: var(--text-muted); }
.dsp3-ticket {
  /* wider than it was (340px) — an address is the thing a dispatcher
     reads first, and the strip scrolls anyway, so the cost is a card
     fewer on screen and the gain is a whole line of address.
     Sized against the STRIP, not the window: 30vw was 405px on a
     1350px screen whatever the strip had left after the sidebar and
     the 250px driver column, which is how the second card ended up
     sliced in half by the lane's edge. 47cqi lands two cards and a
     hint of the third — the hint is the affordance that says the
     strip scrolls. */
  flex: 0 0 clamp(320px, 47cqi, 440px); scroll-snap-align: start;
  /* min-width 0: a flex item's floor is its min-content, and a reason's
     one-line preview (nowrap) would stretch the card to its full length */
  display: flex; flex-direction: column; gap: 9px; min-width: 0;
  padding: 12px 14px 10px; border-radius: 16px;
  border: 1px solid var(--border-subtle); background: var(--surface-inset);
  transition: transform .18s var(--mt-ease-out, ease-out), box-shadow .18s, border-color .18s, background-color .18s;
}
.dsp3-ticket:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dsp3-ticket:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 2px; }
/* ── the ride card, top to bottom (2026-11-02) ───────────────────
   when + state · who · the two stops · what kind · what is wrong ·
   how far. Nothing is cut: names and addresses wrap and step down a
   size when long; a long reason folds into a drawer. */
.dsp3-tk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.dsp3-tk-when { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.dsp3-tk-hm { font-size: 1.3rem; font-weight: 650; color: var(--text-primary); line-height: 1; letter-spacing: -.01em; }
.dsp3-tk-state { display: flex; align-items: center; gap: 6px; flex: none; }
.dsp3-tk-head { display: flex; min-width: 0; }
.dsp3-tk-head .dsp3-patient { min-width: 0; font-size: 1.02rem; line-height: 1.25; overflow-wrap: anywhere; }
.dsp3-patient.is-long { font-size: .92rem; }
.dsp3-patient.is-xlong { font-size: .84rem; }
/* the two stops on a rail: a pin, a hairline, a flag */
.dsp3-ticket .dsp3-route { flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 0; list-style: none; }
.dsp3-tk-stop { position: relative; display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding-block: 3px; }
.dsp3-tk-stop.dsp3-from::after {
  content: ""; position: absolute; inset-inline-start: 9px; top: 22px; bottom: -4px; width: 0;
  border-inline-start: 1.5px dashed var(--border-strong);
}
.dsp3-tk-node { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-card); box-shadow: 0 0 0 1px var(--border-subtle); }
.dsp3-tk-addr { flex: 0 1 auto; min-width: 0; font-size: .84rem; line-height: 1.35; color: var(--text-body); overflow-wrap: anywhere; padding-top: 1px; }
/* the card is not the Gruppen row: its addresses are never cut —
   this beats the shared `.dsp3-from > span` ellipsis rule above */
.dsp3-ticket .dsp3-tk-stop > .dsp3-tk-addr { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }
.dsp3-tk-addr.is-long { font-size: .78rem; }
.dsp3-tk-addr.is-xlong { font-size: .74rem; }
.dsp3-tk-stop > .dsp3-station { flex: none; align-self: flex-start; }
.dsp3-ticket .dsp3-note span { -webkit-line-clamp: unset; display: block; }
.dsp3-tk-tags, .dsp3-tk-flags { gap: 5px; }
.dsp3-tk-flags { padding-top: 7px; border-top: 1px solid var(--border-subtle); }
.dsp3-ticket .dsp3-chipx { white-space: normal; text-align: start; }
.dsp3-ticket .dsp3-track { margin-top: auto; padding-top: 4px; }
.dsp3-tk-acts { display: flex; justify-content: flex-end; gap: 4px; opacity: 0; transform: translateY(2px); transition: opacity .15s, transform .15s; margin-top: -4px; }
.dsp3-ticket:hover .dsp3-tk-acts, .dsp3-ticket:focus-within .dsp3-tk-acts { opacity: 1; transform: none; }
@media (hover: none) { .dsp3-tk-acts { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .dsp3-ticket, .dsp3-tk-acts { transition: none; }
  .dsp3-ticket:hover { transform: none; }
}

/* ── Gruppen ───────────────────────────────────────────────────── */
.dsp3-groups { display: flex; flex-direction: column; gap: 14px; }
.dsp3-group { border-radius: 18px; border: 1px solid var(--border-subtle); background: var(--surface-card); overflow: hidden; }
/* ── Pools: the lanes without a driver ─────────────────────────────
   «Ohne Fahrer» waits for a dispatcher, «Rückfahrten» for a patient's
   call; neither is a person's day, so neither may look like one. No new
   colour (amber and blue with a hatched head were turned down on
   2026-11-02, and so was an ink head over a sunk tray): the whole lane
   is the brand's ink, run as a gradient from the ink into the card with
   a faint volt glow in its corner, and the tickets stand on it as lit
   cards. In dark the page is ink already, so the lane runs from the
   overlay surface down and the glow carries it. Tokens only, no stripe. */
.dsp3-lane.is-pool, .dsp3-group.is-pool {
  border: 1px solid var(--accent);
  background:
    radial-gradient(120% 90% at 0% 0%, var(--accent-soft), transparent 60%),
    linear-gradient(115deg, var(--accent) 0%, var(--accent) 34%, color-mix(in srgb, var(--accent) 72%, var(--text-secondary)) 100%);
}
body.dark .dsp3-lane.is-pool, body.dark .dsp3-group.is-pool {
  border-color: var(--border-strong);
  background:
    radial-gradient(120% 90% at 0% 0%, var(--accent-soft), transparent 60%),
    linear-gradient(115deg, var(--surface-overlay) 0%, var(--surface-raised) 100%);
}
.dsp3-lane.is-pool .dsp3-ghead, .dsp3-group.is-pool .dsp3-ghead { background: transparent; border-color: color-mix(in srgb, var(--text-on-accent) 14%, transparent); }
body.dark .dsp3-lane.is-pool .dsp3-ghead, body.dark .dsp3-group.is-pool .dsp3-ghead { border-color: var(--border-strong); }
.dsp3-lane.is-pool .dsp3-gname strong, .dsp3-group.is-pool .dsp3-gname strong { color: var(--text-on-accent); }
body.dark .dsp3-lane.is-pool .dsp3-gname strong, body.dark .dsp3-group.is-pool .dsp3-gname strong { color: var(--text-primary); }
.dsp3-lane.is-pool .dsp3-gcount, .dsp3-group.is-pool .dsp3-gcount,
.dsp3-lane.is-pool .dsp3-lane-empty, .dsp3-group.is-pool .dsp3-lane-empty { color: var(--text-on-accent); opacity: .72; }
body.dark .dsp3-lane.is-pool .dsp3-gcount, body.dark .dsp3-group.is-pool .dsp3-gcount,
body.dark .dsp3-lane.is-pool .dsp3-lane-empty, body.dark .dsp3-group.is-pool .dsp3-lane-empty { color: var(--text-secondary); opacity: 1; }
.dsp3-lane.is-pool .dsp3-av.is-inbox, .dsp3-group.is-pool .dsp3-av.is-inbox { background: var(--accent-fill); color: var(--accent-contrast); }
.dsp3-lane.is-pool .dsp3-ticket { background-color: var(--surface-card); border-color: transparent; box-shadow: var(--shadow-md); }
.dsp3-group.is-pool .dsp3-grow { background-color: var(--surface-card); }
.dsp3-lane.is-pool .dsp3-ghead.is-over, .dsp3-group.is-pool .dsp3-ghead.is-over,
.dsp3-lane.is-pool .dsp3-strip.is-over, .dsp3-group.is-pool .dsp3-grows.is-over { background: var(--accent-soft); }
.dsp3-lane.is-pool .dsp3-ghead.is-over.is-reject, .dsp3-group.is-pool .dsp3-ghead.is-over.is-reject { background: var(--status-expired-soft); }

/* ── A driver's head in Liste (2026-11-02): photo, name, the plate as
   the object it is, and the day in the room below ───────────────── */
.dsp3-lane .dsp3-ghead { align-items: center; text-align: center; padding: 16px 14px 12px; }
.dsp3-lane .dsp3-gid { flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.dsp3-lane .dsp3-gname { align-items: center; width: 100%; }
.dsp3-lane .dsp3-gname strong { font-size: 1.1rem; max-width: 100%; }
.dsp3-lane .dsp3-gsub { justify-content: center; }
.dsp3-lane .dsp3-gcount { margin-top: auto; }
.dsp3-lane .dsp3-av.is-inbox { width: 64px; height: 64px; border-radius: 20px; }
/* a pool's head has no portrait and no day: its icon and name sit in
   the middle of the lane's height, the count stays at the foot */
.dsp3-lane.is-pool .dsp3-gid { margin-block: auto; }
.dsp3-lane.is-pool .dsp3-gcount { margin-top: 0; }
.dsp3-lane .dsp3-av.is-inbox svg { width: 26px; height: 26px; }
/* the portrait: the driver's photo on its own lit tile — a squircle
   with a soft volt light from above and a hairline edge, so a face
   reads as the lane's owner before any word does */
.dsp3-portrait {
  display: grid; place-items: center; width: 108px; height: 108px; border-radius: 28px;
  background: radial-gradient(90% 70% at 50% 0%, var(--accent-soft), transparent 70%), var(--surface-inset);
  border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md);
}
.dsp3-today-line { justify-content: center; }
.dsp3-today-band { justify-content: center; }
/* the EU plate: the Fuhrpark's facsimile (fuhrpark.css .fp3-plate) — a
   physical object, the same in light and dark; the one documented
   exception to tokens-only, as there */
.dsp3-euplate {
  display: inline-flex; align-items: stretch; overflow: hidden; line-height: 1;
  border-radius: 5px; border: 1.5px solid #1a1a1a; background: #fbfbfb; color: #111;
  font-family: var(--font-mono), monospace; font-size: .74rem; font-weight: 700; letter-spacing: .06em; box-shadow: var(--shadow-sm);
}
.dsp3-euplate > i { display: inline-flex; align-items: center; padding: 3px 4px; background: #0b3aa5; color: #fff; font-style: normal; font-size: .52rem; font-weight: 800; letter-spacing: 0; }
.dsp3-euplate > span { display: inline-flex; align-items: center; padding: 3px 8px; white-space: nowrap; }
.dsp3-today { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; }
.dsp3-today-band { display: flex; gap: 3px; width: 100%; }
.dsp3-today-seg { flex: 1 1 0; max-width: 26px; height: 6px; border-radius: 3px; border: 1px solid var(--border-strong); }
.dsp3-today-seg.is-done { background: var(--status-valid); border-color: transparent; }
.dsp3-today-seg.is-now { background: var(--accent-fill-solid); border-color: transparent; }
.dsp3-today-seg.is-late { border-color: var(--status-expired); }
.dsp3-today-line { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: .78rem; font-weight: 600; color: var(--text-secondary); }
.dsp3-today-line { white-space: nowrap; }
.dsp3-today-at { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--text-muted); }
.dsp3-today-line.is-now { color: var(--text-primary); }
.dsp3-today-line.is-late { color: var(--status-expired-text); }
.dsp3-today-line.is-done { color: var(--status-valid-text); }
.dsp3-group .dsp3-ghead { border-bottom: 1px solid var(--border-subtle); }
.dsp3-grows { display: flex; flex-direction: column; transition: background .15s; min-height: 52px; }
.dsp3-grows.is-over { background: var(--accent-soft); }
.dsp3-grows.is-over.is-reject { background: var(--status-expired-soft); }
.dsp3-grows .dsp3-lane-empty { padding: 14px 16px; }
.dsp3-grow {
  display: grid; grid-template-columns: 28px 96px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: 12px 14px; border-top: 1px solid var(--border-subtle);
  /* the row's background fills with the ride's progress (0 · 33 · 67 · 100 %) */
  background-color: var(--surface-card);
  background-image: linear-gradient(to right, var(--accent-soft) var(--dsp3-p, 0%), transparent var(--dsp3-p, 0%));
}
html[dir="rtl"] .dsp3-grow { background-image: linear-gradient(to left, var(--accent-soft) var(--dsp3-p, 0%), transparent var(--dsp3-p, 0%)); }
.dsp3-grow.is-done { background-image: linear-gradient(to right, var(--status-valid-soft) 100%, transparent 100%); }
.dsp3-grow:first-child { border-top: 0; }
.dsp3-grow:hover { background-color: var(--surface-raised); }
@container dsp3 (max-width: 700px) { .dsp3-grow { grid-template-columns: 28px 80px minmax(0, 1fr); } .dsp3-g-side { grid-column: 2 / -1; } }
.dsp3-g-sel { padding-top: 6px; }
.dsp3-g-time { display: flex; flex-direction: column; gap: 2px; }
.dsp3-g-hm { font-size: 1.45rem; font-weight: 600; line-height: 1; color: var(--text-primary); }
.dsp3-g-date { font-size: .7rem; color: var(--text-muted); }
.dsp3-g-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dsp3-g-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dsp3-g-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.dsp3-g-ctl { display: inline-flex; align-items: center; gap: 6px; }

/* ── Tabelle ───────────────────────────────────────────────────── */
.dsp3-sheets { display: flex; gap: 2px; overflow-x: auto; padding: 0 2px; scrollbar-width: none; }
.dsp3-sheet-tab {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 14px; border: 1px solid var(--border-subtle); border-bottom: 0;
  border-radius: 12px 12px 0 0; background: var(--surface-inset); color: var(--text-secondary);
  font: inherit; font-size: .8rem; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.dsp3-sheet-tab.is-on { background: var(--surface-card); color: var(--text-primary); border-color: var(--border-default); position: relative; top: 1px; }
.dsp3-sheet-tab.is-closed { opacity: .7; }
.dsp3-sheet-d { font-size: .72rem; color: var(--text-muted); }
.dsp3-tablewrap {
  overflow: auto; max-height: calc(100vh - 420px); min-height: 240px;
  border: 1px solid var(--border-default); border-radius: 0 14px 14px 14px; background: var(--surface-card);
}
.dsp3-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .82rem; }
.dsp3-table thead th {
  position: sticky; top: 0; z-index: 2;
  padding: 0; background: var(--surface-raised); border-bottom: 1px solid var(--border-default);
  text-align: start; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap;
}
.dsp3-table thead th > button {
  display: inline-flex; align-items: center; gap: 5px; width: 100%;
  padding: 10px 10px; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.dsp3-table thead th:not(:has(button)) { padding: 10px 10px; }
.dsp3-table thead th > button:hover, .dsp3-table thead th.is-sorted { color: var(--text-primary); }
.dsp3-table thead th.is-sorted > button { color: var(--accent); }
.dsp3-sort-ic { opacity: .5; font-size: .8rem; }
.dsp3-table tbody td { padding: 9px 10px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; color: var(--text-body); }
.dsp3-table tbody tr:hover td { background: var(--surface-raised); }
.dsp3-table tbody tr.is-selected td { background: var(--accent-soft); }
.dsp3-table tbody tr.is-overdue .dsp3-late { margin-inline-start: 6px; vertical-align: middle; }
.dsp3-table tbody tr.is-cancelled td { color: var(--text-muted); }
.dsp3-table tbody tr.is-cancelled td.is-strong, .dsp3-table tbody tr.is-cancelled td.is-addr { text-decoration: line-through; }
.dsp3-table td.is-n { white-space: nowrap; color: var(--text-muted); }
.dsp3-table td.is-n .dsp3-sel { margin-inline-end: 6px; vertical-align: middle; }
.dsp3-table td.is-mono { font-family: var(--font-mono); white-space: nowrap; }
.dsp3-table td.is-strong { font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.dsp3-table td.is-addr { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* an address carries dir="auto" (it is typed, often Latin): it truncates at
   its own end, and in a right-to-left table it still sits under its head */
html[dir="rtl"] .dsp3-table td.is-addr { text-align: right; }
.dsp3-table td.is-status { white-space: nowrap; min-width: 150px; }
.dsp3-t-status { display: flex; align-items: center; gap: 4px; }
.dsp3-tghead td {
  position: sticky; top: 37px; z-index: 1;
  padding: 7px 10px; background: var(--surface-raised);
  border-top: 2px solid var(--border-default); border-bottom: 1px solid var(--border-subtle);
}
.dsp3-tgroup:first-of-type .dsp3-tghead td { border-top: 0; }
.dsp3-tgroup.is-queue .dsp3-tghead td { border-top-color: var(--status-expiring); }
.dsp3-tghead-in { display: flex; align-items: center; gap: 8px; color: var(--text-primary); font-size: .82rem; }
.dsp3-tghead-in strong { font-weight: 700; }
.dsp3-tghead-in .dsp3-gcount { margin-inline-start: auto; }
.dsp3-tghead-in.is-over { outline: 2px solid var(--accent-fill-solid); outline-offset: -2px; border-radius: 8px; }
.dsp3-av.is-sm { width: 26px; height: 26px; border-radius: 8px; }
.dsp3-table tbody tr.dsp3-row td { background-image: linear-gradient(to right, var(--accent-soft) var(--dsp3-p, 0%), transparent var(--dsp3-p, 0%)); background-size: 0; }
.dsp3-table td.is-status .dsp3-chipx { margin-inline-start: 6px; }
.dsp3-t-hm { font-weight: 600; color: var(--text-primary); }
.dsp3-t-drv { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dsp3-t-none { color: var(--status-expiring-text); font-weight: 600; }
.dsp3-table tr.dsp3-t-empty td { padding: 0; }
.dsp3-tablewrap.is-dense .dsp3-table tbody td { padding: 4px 8px; font-size: .76rem; }
.dsp3-tablewrap.is-dense .dsp3-pill { height: 22px; font-size: .66rem; }
.dsp3-table-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 8px 4px 0;
}
.dsp3-newrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px; border: 1px dashed var(--border-default);
  background: transparent; color: var(--text-secondary); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.dsp3-newrow:hover { border-color: var(--accent-fill-solid); color: var(--accent); background: var(--accent-soft); }
.dsp3-newrow em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.dsp3-table-sum { font-family: var(--font-mono); font-size: .76rem; color: var(--text-muted); }

/* ── undo bar ──────────────────────────────────────────────────── */
.dsp3-undo {
  position: sticky; bottom: 8px; align-self: center; z-index: 5;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 14px; border-radius: 999px;
  background: var(--text-primary); color: var(--surface-canvas);
  box-shadow: var(--shadow-lg); font-size: .82rem; font-weight: 600;
  animation: dsp3Up .25s var(--mt-ease-out) backwards;
}
.dsp3-undo span { display: inline-flex; align-items: center; gap: 6px; }
.dsp3-undo .dsp3-act { background: var(--surface-card); color: var(--text-primary); }
@keyframes dsp3Up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── menus (body-level, carry .mt-scope) ───────────────────────── */
.dsp3-menu {
  position: fixed; z-index: 100055; min-width: 230px; max-width: 320px;
  padding: 6px; border-radius: 14px;
  border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-body);
  box-shadow: var(--shadow-lg); font-family: var(--font-ui), system-ui, sans-serif;
  animation: dsp3Up .16s var(--mt-ease-out) backwards;
}
.dsp3-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 8px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 4px; font-size: .82rem; }
.dsp3-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 9px; background: none;
  color: var(--text-primary); font: inherit; font-size: .84rem; text-align: start; cursor: pointer;
}
.dsp3-menu-item svg { color: var(--text-muted); flex: none; }
.dsp3-menu-item:hover, .dsp3-menu-item:focus-visible { background: var(--surface-inset); outline: none; }
.dsp3-menu-item.is-danger { color: var(--status-expired-text); }
.dsp3-menu-item.is-danger svg { color: var(--status-expired-text); }
.dsp3-menu-item.is-suggest { background: var(--accent-soft); color: var(--accent); }
.dsp3-menu-item[disabled] { opacity: .45; cursor: not-allowed; }
.dsp3-menu-item small { display: block; font-size: .7rem; color: var(--text-muted); }
/* a hairline between the menu's groups (Import / Export: in, then out) */
.dsp3-menu-sep { display: block; height: 1px; margin: 4px 6px; background: var(--border-subtle); }

/* ── move dialog ───────────────────────────────────────────────── */
#dsp3-move { background: rgba(16, 14, 23, .55); }
#dsp3-move.hidden { display: none; }
.dsp3-dialog {
  width: 100%; max-width: 560px; max-height: 90vh; overflow: auto;
  border-radius: 20px; border: 1px solid var(--border-default);
  background: var(--surface-card); color: var(--text-body); box-shadow: var(--shadow-lg);
  font-family: var(--font-ui), system-ui, sans-serif;
  animation: dsp3Up .22s var(--mt-ease-out) backwards;
}
.dsp3-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 10px; }
.dsp3-dialog-head h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-display), sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--text-primary); }
.dsp3-dialog-body { display: flex; flex-direction: column; gap: 14px; padding: 6px 18px 14px; }
.dsp3-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--border-subtle); }
.dsp3-fs { border: 0; padding: 0; margin: 0; }
.dsp3-fs legend { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.dsp3-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.dsp3-opts.is-col { max-height: 220px; overflow: auto; }
.dsp3-opt { display: inline-flex; }
.dsp3-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dsp3-opt span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 10px; border: 1px solid var(--border-subtle);
  background: var(--surface-inset); color: var(--text-primary); font-size: .82rem; font-weight: 600; cursor: pointer;
}
.dsp3-opt input:checked + span { background: var(--accent-soft); border-color: var(--accent-fill-solid); color: var(--accent); }
.dsp3-opt input:focus-visible + span { outline: 2px solid var(--accent-fill-solid); outline-offset: 2px; }
.dsp3-opt.is-disabled span { opacity: .5; cursor: not-allowed; }
.dsp3-field { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; color: var(--text-secondary); }
.dsp3-field input { height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--field-line); background: var(--field-ground); color: var(--text-primary); font: inherit; }

/* ── the confirm / prompt dialog (#confirm-modal, MT.notify) ──────
   Fixed footprint: width min(480px, 94vw); the icon, title, message
   and the optional facts list sit centred, the two actions at the
   foot. `kind` on the shell picks the icon and its colour. */
.cm-dialog {
  width: min(480px, 94vw); min-height: 240px; padding: 28px 26px 22px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  font-family: var(--font-ui), system-ui, sans-serif;
  animation: dsp3Up .22s var(--mt-ease-out) backwards;
}
.cm-icon {
  width: 58px; height: 58px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px; background: var(--surface-inset); color: var(--text-secondary);
}
.cm-icon .cm-ic { display: none; }
#confirm-modal[data-kind="send"] .cm-ic-send, #confirm-modal[data-kind="archive"] .cm-ic-archive,
#confirm-modal[data-kind="danger"] .cm-ic-danger, #confirm-modal[data-kind="info"] .cm-ic-info,
#confirm-modal[data-kind="question"] .cm-ic-question { display: block; }
#confirm-modal[data-kind="send"] .cm-icon { background: var(--accent-soft); color: var(--accent); }
#confirm-modal[data-kind="archive"] .cm-icon, #confirm-modal[data-kind="info"] .cm-icon { background: var(--status-info-soft); color: var(--status-info-text); }
#confirm-modal[data-kind="danger"] .cm-icon { background: var(--status-expired-soft); color: var(--status-expired-text); }
.cm-title { margin: 0 0 6px; font-family: var(--font-display), sans-serif; font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; color: var(--text-primary); }
.cm-desc { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--text-secondary); max-width: 38ch; }
.cm-details {
  list-style: none; margin: 14px 0 0; padding: 10px 14px; width: 100%; text-align: start;
  border-radius: 12px; background: var(--surface-inset); border: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 6px; font-size: .84rem; color: var(--text-primary);
}
.cm-details[hidden] { display: none; }
.cm-details li { display: flex; align-items: center; gap: 8px; }
.cm-details li::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent-fill-solid); flex: 0 0 auto; }
#confirm-modal[data-kind="danger"] .cm-details li::before { background: var(--status-expired); }
#confirm-modal[data-kind="archive"] .cm-details li::before, #confirm-modal[data-kind="info"] .cm-details li::before { background: var(--status-info); }
.cm-input {
  display: block; width: 100%; height: 42px; margin-top: 14px; padding: 0 12px;
  border-radius: 12px; border: 1px solid var(--field-line); background: var(--field-ground); color: var(--text-primary); font: inherit;
}
.cm-input.hidden { display: none !important; }
.cm-input:focus { outline: none; border-color: var(--accent-fill-solid); box-shadow: 0 0 0 3px var(--accent-soft); }
.cm-foot { display: flex; gap: 10px; width: 100%; margin-top: 22px; }
.cm-foot .cm-btn { flex: 1 1 0; justify-content: center; min-height: 44px; }
.cm-dialog .dsp3-act.is-primary.is-danger { background: var(--status-expired); color: #fff; border-color: transparent; }
.cm-dialog .dsp3-act.is-primary.is-danger:hover { box-shadow: 0 0 0 5px var(--status-expired-soft); }
html[lang="fa"] .cm-dialog { font-family: var(--font-fa), sans-serif; }
@media (prefers-reduced-motion: reduce) { .cm-dialog { animation: none; } }

/* ── tooltip (MT.tip) ──────────────────────────────────────────── */
.mt-tip {
  position: fixed; z-index: 100090; max-width: 300px;
  padding: 9px 12px; border-radius: 12px;
  background: var(--mb-ink, #171717); color: #fff;
  border: 1px solid rgba(164, 240, 58, .35);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .35);
  font-family: var(--mb-font-ui, "IBM Plex Sans", system-ui, sans-serif); font-size: .78rem; line-height: 1.45;
  opacity: 0; transform: translateY(-2px); pointer-events: none;
  transition: opacity .14s ease-out, transform .14s ease-out;
}
html[lang="fa"] .mt-tip { font-family: var(--mb-font-fa, "Dana"), sans-serif; }
.mt-tip.is-on { opacity: 1; transform: none; }
.mt-tip::before {
  content: ""; position: absolute; top: -5px; left: var(--mt-tip-ax, 50%); margin-left: -5px;
  width: 10px; height: 10px; transform: rotate(45deg);
  background: var(--mb-ink, #171717); border-left: 1px solid rgba(164, 240, 58, .35); border-top: 1px solid rgba(164, 240, 58, .35);
}
.mt-tip.is-above::before { top: auto; bottom: -5px; border: 0; border-right: 1px solid rgba(164, 240, 58, .35); border-bottom: 1px solid rgba(164, 240, 58, .35); }
.mt-tip-title { font-weight: 800; color: var(--mb-lime, #a4f03a); margin-bottom: 2px; }
.mt-tip-text { color: #d4d4d4; }
.mt-tip-kbd { margin-top: 6px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .68rem; color: #a3a3a3; }
.mt-tip-kbd::before { content: "⌨ "; }
.mt-tip [hidden] { display: none; }

/* ── drag ghost (MT.dnd) ───────────────────────────────────────── */
.mt-dnd-ghost {
  position: fixed; top: 0; left: 0; z-index: 100080;
  padding: 6px 12px; border-radius: 999px;
  background: var(--mb-ink, #171717); color: var(--mb-lime, #a4f03a);
  border: 1px solid rgba(164, 240, 58, .45); box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .78rem; font-weight: 600; white-space: nowrap;
  opacity: 0; pointer-events: none; will-change: transform;
}
.mt-dnd-ghost.is-on { opacity: 1; }
body.mt-dnd-active { user-select: none; -webkit-user-select: none; }
body.mt-dnd-active [data-drop] { outline: 1px dashed var(--border-strong); outline-offset: -1px; }

/* Paper is public/print.css's job (the letterhead frame, the chrome it
   hides — .dsp3-actions among it). The toolbar's own Drucken button and
   its body.dsp3-printing rules went on 2026-09-14: the four views did
   not print well and the operator did not want a button that promised
   they would. Ctrl+P still works, through print.css. */

/* ── reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dsp3-day.is-suggest, .dsp3-stamp, .dsp3-undo, .dsp3-menu, .dsp3-dialog { animation: none; }
  .dsp3-act, .dsp3-kpi, .dsp3-day, .dsp3-iconbtn, .mt-tip { transition: none; }
}

/* ── the dialogs the page opens, in the same skin ─────────────────
   task-modal · bulk-modal · tp-paste-modal · tp-veh-modal carry
   .mt-scope statically; confirm-modal and img-lightbox get it only
   while the dispatch page is open (dispatch.page.ts skinSharedShells).
   The shells are legacy Tailwind markup, and style.css's
   `body.dark .bg-white {… !important}` family already sits on them —
   so these overrides must carry !important too, or the old dark
   palette wins. Tokens only; no new hex. */
.mt-scope.modal-shell { background: rgba(16, 14, 23, .62) !important; }
.mt-scope.modal-shell > div {
  background: var(--surface-card) !important;
  color: var(--text-body) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: 22px !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font-ui), "IBM Plex Sans", system-ui, sans-serif;
}
.mt-scope.modal-shell h2, .mt-scope.modal-shell h3, .mt-scope.modal-shell h4 {
  color: var(--text-primary) !important;
  font-family: var(--font-display), "Space Grotesk", sans-serif;
  letter-spacing: -.01em;
}
.mt-scope.modal-shell label,
.mt-scope.modal-shell .text-slate-500, .mt-scope.modal-shell .text-slate-400,
.mt-scope.modal-shell .text-slate-600, .mt-scope.modal-shell .text-slate-700 { color: var(--text-muted) !important; }
.mt-scope.modal-shell .text-slate-800, .mt-scope.modal-shell .text-slate-900,
.mt-scope.modal-shell .dark\:text-white, .mt-scope.modal-shell p { color: var(--text-body) !important; }
.mt-scope.modal-shell input, .mt-scope.modal-shell select, .mt-scope.modal-shell textarea {
  background-color: var(--field-ground) !important;
  border: 1px solid var(--field-line) !important;
  color: var(--text-primary) !important;
  border-radius: 12px !important;
  font-family: inherit;
}
.mt-scope.modal-shell input:focus, .mt-scope.modal-shell select:focus, .mt-scope.modal-shell textarea:focus {
  border-color: var(--accent-fill-solid) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none;
}
.mt-scope.modal-shell input::placeholder, .mt-scope.modal-shell textarea::placeholder { color: var(--text-muted); }
.mt-scope.modal-shell .bg-slate-50, .mt-scope.modal-shell .bg-slate-100, .mt-scope.modal-shell .bg-slate-200,
.mt-scope.modal-shell .dark\:bg-slate-700, .mt-scope.modal-shell .dark\:bg-slate-900,
.mt-scope.modal-shell .bg-white { background: var(--surface-inset) !important; }
.mt-scope.modal-shell .border-slate-100, .mt-scope.modal-shell .border-slate-200,
.mt-scope.modal-shell .border-slate-300, .mt-scope.modal-shell .dark\:border-slate-600,
.mt-scope.modal-shell .dark\:border-slate-700 { border-color: var(--border-subtle) !important; }
.mt-scope.modal-shell .bg-brand, .mt-scope.modal-shell .bg-rose-600, .mt-scope.modal-shell .bg-indigo-600,
.mt-scope.modal-shell .bg-emerald-600, .mt-scope.modal-shell .bg-blue-600, .mt-scope.modal-shell .bg-slate-800,
.mt-scope.modal-shell .bg-amber-500 {
  background: var(--accent-fill) !important;
  color: var(--accent-contrast) !important;
  border-color: transparent !important;
  border-radius: 12px !important;
}
.mt-scope.modal-shell .bg-red-600, .mt-scope.modal-shell .bg-rose-500 {
  background: var(--status-expired) !important; color: var(--text-on-status) !important; border-radius: 12px !important;
}
.mt-scope.modal-shell .text-brand, .mt-scope.modal-shell .text-rose-600 { color: var(--accent) !important; }
.mt-scope.modal-shell .art-btn {
  background: var(--surface-inset) !important; color: var(--text-secondary) !important;
  border: 1px solid var(--border-subtle) !important; border-radius: 10px !important;
}
.mt-scope.modal-shell .art-btn.selected {
  background: var(--accent-soft) !important; color: var(--accent) !important; border-color: var(--accent-fill-solid) !important;
}
.mt-scope.modal-shell button:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 2px; }
.mt-scope.modal-shell .dispo-advisor { background: var(--surface-raised) !important; color: var(--text-body) !important; border-color: var(--border-subtle) !important; }
html[lang="fa"] .mt-scope.modal-shell > div { font-family: var(--mb-font-fa, "Dana"), sans-serif; }

/* ── the ride form: #task-modal → .tm-dialog (redesign 2026-08-23) ──
   A large, FIXED footprint (≤ 980 px wide, min(760px, 94vh) tall):
   head · scrolling two-column body (Wann & Wer · Wo & Wie) · foot.
   The legacy re-skin above still paints inputs/buttons; these rules
   only lay the form out. Beside the Dispo-Assistent (.has-dispo) the
   dialog may shrink (flex-basis, not a rigid width) and the columns
   collapse by CONTAINER width, so the advisor always fits. */
.tm-dialog {
  flex: 0 1 980px; width: 100%; max-width: 96vw; min-width: 0;
  height: min(760px, 94vh); max-height: 94vh;
  display: flex; flex-direction: column; overflow: hidden; position: relative;
  container-type: inline-size;
  animation: dsp3Up .22s var(--mt-ease-out) backwards;
}
.tm-head { display: flex; align-items: center; gap: 14px; padding: 18px 22px 14px; border-bottom: 1px solid var(--border-subtle); flex: 0 0 auto; }
.tm-head-ic { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); flex: 0 0 auto; }
#task-modal.is-edit .tm-head-ic { background: var(--status-info-soft); color: var(--status-info-text); }
.tm-head-txt { min-width: 0; flex: 1 1 auto; }
.tm-title { margin: 0; font-size: 1.15rem; font-weight: 600; display: flex; align-items: baseline; gap: 10px; }
.tm-title small { font-family: var(--font-mono), monospace; font-size: .78rem; font-weight: 600; color: var(--text-muted); }
.tm-title small[hidden] { display: none; }
.tm-sub { margin: 2px 0 0; font-size: .8rem; color: var(--text-muted); min-height: 1.2em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-close { flex: 0 0 auto; }
.tm-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.tm-body {
  flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 22px 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; align-content: start;
}
@container (max-width: 720px) { .tm-body { grid-template-columns: 1fr; } }
.tm-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tm-sec { margin: 0 0 2px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted) !important; font-family: var(--font-ui), sans-serif !important; }
.tm-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tm-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tm-lbl { font-size: .76rem; font-weight: 600; color: var(--text-secondary) !important; }
/* A red star on the label of every field the form insists on. The class
   is set by dispatch.task.ts from the control's own `required`, so the
   mark cannot drift from what the form checks; the star itself is drawn
   here, because the language pass rewrites these labels' text and would
   wipe an appended element (operator, 2026-09-14). */
.tm-lbl.is-req { cursor: help; }
.tm-lbl.is-req::after { content: "*"; margin-inline-start: 3px; color: var(--status-expired-text); font-weight: 800; }
.tm-input { height: 42px; padding: 0 12px; font-size: .88rem; width: 100%; }
.tm-mono { font-family: var(--font-mono), monospace !important; letter-spacing: .02em; }
/* the patient field: our own combobox (MT.patientPick, QA 05.11.2026 #5 #6) — clear and toggle inside the field */
.tm-pp { position: relative; display: flex; align-items: center; }
.tm-pp .tm-input { flex: 1; min-width: 0; padding-inline-end: 68px; }
.tm-pp-btn { position: absolute; inset-inline-end: 5px; inline-size: 30px; block-size: 30px; display: inline-grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); cursor: pointer; transition: background .14s ease, color .14s ease; }
.tm-pp-btn[data-pp-clear] { inset-inline-end: 35px; }
.tm-pp-btn[hidden] { display: none; }
.tm-pp-btn:hover { background: var(--surface-inset); color: var(--text-primary); }
.tm-pp-btn:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }
.tm-pp .tm-input[aria-expanded="true"] ~ [data-pp-toggle] svg { transform: rotate(180deg); }
.tm-pp-btn svg { transition: transform .16s ease; }
@media (prefers-reduced-motion: reduce) { .tm-pp-btn svg { transition: none; } }
.tm-textarea { height: auto; min-height: 92px; padding: 10px 12px; resize: vertical; line-height: 1.45; }
.tm-grow { flex: 1 1 auto; }
.tm-grow .tm-textarea { flex: 1 1 auto; }
.tm-date, .tm-time { position: relative; }
.tm-date-text { padding-inline-end: 40px; }
.tm-time .tm-input { padding-inline-start: 38px; }
.tm-date-ic { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 12px; color: var(--text-muted); pointer-events: none; display: inline-flex; }
.tm-time .tm-date-ic { inset-inline-end: auto; inset-inline-start: 12px; }
.tm-date-pick { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.tm-date { cursor: pointer; }
.tm-date:hover .tm-date-text { border-color: var(--accent-fill-solid) !important; }
.tm-date:focus-within .tm-date-text { border-color: var(--accent-fill-solid) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
.tm-chips { display: flex; gap: 6px; }
.tm-qchip {
  height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border-subtle);
  background: transparent; color: var(--text-secondary); font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.tm-qchip:hover { border-color: var(--accent-fill-solid); color: var(--accent); background: var(--accent-soft); }
.tm-chipgrid { display: grid; gap: 6px; }
.tm-chipgrid-5 { grid-template-columns: repeat(5, 1fr); }
.tm-chipgrid-3 { grid-template-columns: repeat(3, 1fr); }
@container (max-width: 860px) { .tm-chipgrid-5 { grid-template-columns: repeat(3, 1fr); } }
.tm-chip {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 58px; padding: 6px 4px; font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; line-height: 1.15; text-align: center;
  transition: background .12s, color .12s, border-color .12s;
}
.tm-chip .tm-ic { width: 18px; height: 18px; }
.tm-chipgrid-3 .tm-chip { flex-direction: row; min-height: 44px; }
.tm-art { gap: 8px; }
/* a round trip's return time (dispatcher fixes 30.10.2026): it appears under
   the direction only when "Hin & Rück" is chosen, and is required then */
.tm-return { display: grid; grid-template-columns: auto minmax(0, 9rem); align-items: center; gap: 6px 10px; }
.tm-return[hidden] { display: none; }
.tm-return .tm-hint { grid-column: 1 / -1; font-size: .74rem; color: var(--text-muted); }
.tm-oncall { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--text-secondary); cursor: pointer; min-height: 32px; }
.tm-oncall input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.tm-return input[type="time"]:disabled { opacity: .5; }
.tm-pay { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-inset); border: 1px dashed var(--border-subtle); font-size: .82rem; }
.tm-pay[hidden] { display: none; }
.tm-pay-ic { color: var(--text-muted); display: inline-flex; }
.tm-pay strong { color: var(--text-primary); }
.tm-pay.is-warn { border-color: var(--status-expiring); background: var(--status-expiring-soft); }
.tm-pay.is-warn strong { color: var(--status-expiring-text); }
.tm-hint-line { font-size: .74rem; font-weight: 600; min-height: 1em; }
.tm-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px 16px; border-top: 1px solid var(--border-subtle); }
.tm-req { margin: 0; font-size: .78rem; color: var(--status-expired-text) !important; display: flex; align-items: center; gap: 6px; }
.tm-req[hidden] { display: none; }
.tm-foot-btns { display: flex; gap: 8px; margin-inline-start: auto; }
.tm-save { min-width: 200px; justify-content: center; min-height: 44px; }
.mt-scope.modal-shell .tm-input.is-invalid { border-color: var(--status-expired) !important; box-shadow: 0 0 0 3px var(--status-expired-soft) !important; }
/* a group of chips answers for a field the browser cannot validate:
   the same red edge, drawn around the whole row it belongs to */
.tm-chipgrid.is-invalid { outline: 1px solid var(--status-expired); outline-offset: 4px; border-radius: 12px; }
/* the Dispo-Assistent beside the form: same height on a desk, a bottom
   sheet under it on a tablet (style.css owns the sheet; we only yield) */
@media (min-width: 1024px) { .mt-scope.modal-shell.has-dispo .dispo-advisor { height: min(760px, 94vh); max-height: none; } }
@media (max-width: 1023px) {
  .mt-scope.modal-shell.has-dispo > .tm-dialog { height: auto; max-height: 62vh; }
  .mt-scope.modal-shell.has-dispo .tm-body { overflow: visible; }
}
@media (max-width: 640px) {
  .tm-dialog { height: min(760px, 92vh); }
  .tm-row2 { grid-template-columns: 1fr; }
  .tm-foot { flex-wrap: wrap; }
  .tm-foot-btns { width: 100%; }
  .tm-save { min-width: 0; flex: 1 1 auto; }
}
html[lang="fa"] .tm-dialog { font-family: var(--font-fa), sans-serif; }
@media (prefers-reduced-motion: reduce) { .tm-dialog { animation: none; } }


/* ── the Sheet tab (MT.dispatchSheet): the day as a spreadsheet ──── */
.sh { display: flex; flex-direction: column; gap: 8px; min-height: 0; outline: none; }
.sh-foot-keys { color: var(--text-muted); font-size: .7rem; margin-inline-start: auto; }
.sh:focus-visible .sh-cell.is-active { box-shadow: inset 0 0 0 2px var(--accent-fill-solid), 0 0 0 3px var(--accent-soft); }
.sh-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 8px; border-radius: 12px; border: 1px solid var(--border-subtle); background: var(--surface-card);
}
.sh-ref {
  min-width: 54px; height: 32px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--surface-inset); border: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: .8rem; font-weight: 600; color: var(--text-primary);
}
.sh-fx {
  flex: 1 1 260px; min-width: 180px; height: 32px; padding: 0 10px;
  border-radius: 8px; border: 1px solid var(--field-line); background: var(--field-ground);
  color: var(--text-primary); font: inherit; font-size: .84rem;
}
.sh-fx:focus { outline: none; border-color: var(--accent-fill-solid); box-shadow: 0 0 0 3px var(--accent-soft); }
.sh-tools { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-inline-start: auto; }
.sh-wrap {
  overflow: auto; max-height: calc(100vh - 410px); min-height: 320px;
  border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-card);
}
.sh-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: .82rem; min-width: 100%; }
.sh-table th, .sh-table td { border-inline-end: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.sh-table thead th {
  position: sticky; top: 0; z-index: 3;
  padding: 0 8px; height: 36px; background: var(--surface-raised); color: var(--text-muted);
  text-align: start; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.sh-colh em { display: block; font-style: normal; font-family: var(--font-mono); font-size: .62rem; color: var(--text-muted); opacity: .7; line-height: 1; margin-top: 4px; }
.sh-colh span { display: block; line-height: 1.2; }
.sh-colh.is-ro { opacity: .75; }
.sh-corner { position: sticky; inset-inline-start: 0; z-index: 4 !important; width: 44px; min-width: 44px; }
.sh-rowh {
  position: sticky; inset-inline-start: 0; z-index: 2;
  width: 44px; min-width: 44px; padding: 0; text-align: center;
  background: var(--surface-raised); color: var(--text-muted);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500; cursor: pointer; user-select: none;
}
.sh-rowh:hover { color: var(--text-primary); background: var(--surface-overlay); }
.sh-row.is-selected .sh-rowh { background: var(--accent-soft); color: var(--accent); }
.sh-cell {
  height: 34px; padding: 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--text-body); background: var(--surface-card); cursor: cell; vertical-align: middle;
}
.sh-cell.is-mono { font-family: var(--font-mono); }
.sh-cell.is-ro { color: var(--text-muted); cursor: default; }
.sh-cell.is-active { box-shadow: inset 0 0 0 2px var(--accent-fill-solid); background: var(--surface-raised); overflow: visible; }
.sh-cell.is-range { background: var(--accent-soft); }
.sh-cell.is-editing { white-space: normal; overflow: visible; background: var(--surface-raised); color: var(--text-primary); outline: none; box-shadow: inset 0 0 0 2px var(--accent-fill-solid), var(--shadow-md); z-index: 1; position: relative; }
.sh-cell.is-erledigt { color: var(--status-valid-text); } .sh-cell.is-unterwegs { color: var(--accent); } .sh-cell.is-storniert { color: var(--status-expired-text); }
.sh-cell.is-offen { color: var(--status-info-text); } .sh-cell.is-entwurf { color: var(--status-expiring-text); }
.sh-row.is-cancelled .sh-cell:not(.is-ro) { text-decoration: line-through; color: var(--text-muted); }
.sh-row.is-done .sh-cell { color: var(--text-secondary); }
.sh-row.is-blank .sh-cell { background: color-mix(in srgb, var(--surface-card) 70%, var(--surface-inset)); }
.sh-row.is-selected .sh-cell { background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface-card)); }
.sh-select { width: 100%; height: 28px; border-radius: 6px; border: 1px solid var(--accent-fill-solid); background: var(--field-ground); color: var(--text-primary); font: inherit; font-size: .82rem; }
.sh-grp td { padding: 0; background: var(--surface-raised); }
.sh-grp th { background: var(--surface-raised); }
.sh-grp-in { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: .78rem; color: var(--text-primary); }
.sh-grp-in .dsp3-gcount { margin-inline-start: 6px; }
.sh-grp-in.is-over { outline: 2px solid var(--accent-fill-solid); outline-offset: -2px; }
.sh-grp.is-pool td { border-top: 0; background: var(--accent); color: var(--text-on-accent); }
.sh-grp.is-pool .sh-grp-in, .sh-grp.is-pool .sh-grp-in strong, .sh-grp.is-pool .sh-grp-in svg { color: var(--text-on-accent); }
.sh-grp.is-pool .dsp3-gcount { color: var(--text-on-accent); opacity: .72; }
body.dark .sh-grp.is-pool td { background: var(--surface-overlay); color: var(--text-primary); }
body.dark .sh-grp.is-pool .dsp3-gcount { color: var(--text-secondary); opacity: 1; }
body.dark .sh-grp.is-pool .sh-grp-in, body.dark .sh-grp.is-pool .sh-grp-in strong, body.dark .sh-grp.is-pool .sh-grp-in svg { color: var(--text-primary); }
.sh-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .76rem; color: var(--text-muted); }
.sh-drop { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 1px dashed var(--border-default); cursor: pointer; }
.sh-drop:hover { border-color: var(--accent-fill-solid); color: var(--accent); }

/* import dialog */
/* the wide dialog (import) has a FIXED footprint — head, a scrolling
   body, foot; content never changes its size (operator 2026-08-23) */
.dsp3-dialog.is-wide {
  width: min(1100px, 96vw); max-width: 96vw; height: min(760px, 94vh); max-height: 94vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.dsp3-dialog.is-wide > .dsp3-dialog-head, .dsp3-dialog.is-wide > .dsp3-dialog-foot { flex: 0 0 auto; }
.dsp3-dialog.is-wide > .dsp3-dialog-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.dsp3-dialog.is-wide .sh-imp-wrap { max-height: none; flex: 1 1 auto; min-height: 0; }
/* both ways side by side: a file, or text copied from WhatsApp / e-mail / a sheet */
.sh-imp-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; height: 100%; min-height: 360px; }
.sh-imp-way { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sh-imp-way h3 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.sh-imp-way .sh-imp-drop { flex: 1 1 auto; }
.sh-imp-text {
  flex: 1 1 auto; min-height: 220px; padding: 12px 14px; resize: none;
  border-radius: 14px; border: 1px solid var(--field-line); background: var(--field-ground); color: var(--text-primary);
  font-family: var(--font-mono), ui-monospace, monospace; font-size: .8rem; line-height: 1.5;
}
.sh-imp-text:focus { outline: none; border-color: var(--accent-fill-solid); box-shadow: 0 0 0 3px var(--accent-soft); }
.sh-imp-texthint { margin: 0; font-size: .76rem; color: var(--text-muted); line-height: 1.45; }
.sh-imp-way .dsp3-act { align-self: flex-start; }
.sh-imp-way .dsp3-act kbd { margin-inline-start: 6px; padding: 1px 6px; border-radius: 6px; background: var(--surface-inset); border: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); }
@container (max-width: 760px) { .sh-imp-ways { grid-template-columns: 1fr; } }
.dsp3-dialog.is-wide > .dsp3-dialog-body { container-type: inline-size; }
.sh-imp-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  padding: 36px 18px; border-radius: 16px; border: 2px dashed var(--border-default); color: var(--text-muted); cursor: pointer;
}
.sh-imp-drop strong { color: var(--text-primary); font-size: .95rem; }
.sh-imp-drop span { font-size: .78rem; max-width: 60ch; }
#dsp3-import.is-dragover .sh-imp-drop { border-color: var(--accent-fill-solid); background: var(--accent-soft); }
.sh-imp-opts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.dsp3-field.is-inline { flex-direction: row; align-items: center; gap: 8px; }
.dsp3-field.is-inline select { height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--field-line); background: var(--field-ground); color: var(--text-primary); font: inherit; font-size: .8rem; }
.sh-imp-sum { margin-inline-start: auto; font-family: var(--font-mono); font-size: .76rem; color: var(--text-muted); }
.sh-imp-wrap { overflow: auto; max-height: 48vh; border: 1px solid var(--border-default); border-radius: 12px; }
.sh-imp-table { border-collapse: separate; border-spacing: 0; font-size: .78rem; min-width: 100%; }
.sh-imp-table th, .sh-imp-table td { padding: 5px 8px; border-bottom: 1px solid var(--border-subtle); border-inline-end: 1px solid var(--border-subtle); white-space: nowrap; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.sh-imp-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-raised); }
.sh-imp-map select { width: 100%; min-width: 120px; height: 30px; border-radius: 8px; border: 1px solid var(--accent-fill-solid); background: var(--field-ground); color: var(--accent); font: inherit; font-size: .76rem; font-weight: 600; }
.sh-imp-head th { color: var(--text-muted); font-weight: 600; }
.sh-imp-table tbody th { color: var(--text-muted); font-family: var(--font-mono); font-weight: 500; }
.sh-imp-table tr.is-warn td { background: var(--status-expiring-soft); }
.sh-imp-table tr.is-dup td { opacity: .6; }
.sh-imp-warn { color: var(--status-expiring-text) !important; font-weight: 600; }
.sh-imp-more { margin: 6px 0 0; font-size: .76rem; color: var(--text-muted); }
.sh-imp-skipdup { margin-inline-end: auto; }
/* the sheet host takes keyboard focus; the active cell is the visible focus */
.dsp3-host:focus { outline: none; }

/* ── the Planung environment (MT.dispatchGrid): driver columns ──── */
.dsp3-page.is-env { padding: 0; gap: 0; overflow: hidden; }
.dsp3-page.is-env > .negin-strip, .dsp3-page.is-env > .dsp3-top, .dsp3-page.is-env > .dsp3-actions, .dsp3-page.is-env > .dsp3-bar, .dsp3-page.is-env > .dsp3-selbar { display: none; }
.dsp3-page.is-env > .dsp3-host { display: flex; flex-direction: column; min-height: 0; }
.dsp3-act-sep { width: 1px; align-self: stretch; background: var(--border-default); margin: 4px 4px; }
.dsp3-act.is-env-btn { border: 1.5px solid var(--accent-fill-solid); background: var(--accent-soft); color: var(--accent); }
.dsp3-act.is-env-btn .dsp3-act-ic { background: var(--accent-fill); color: var(--accent-contrast); }
.sg { display: flex; flex-direction: column; flex: 1; min-height: 0; outline: none; }
/* head = three blocks on one line: back · day navigation · tools;
   the tools wrap under the nav when the sheet is narrow */
.sg-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); background: var(--surface-card);
}
.sg-head > .dsp3-act { flex: 0 0 auto; }
.sg-nav {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0;
  padding: 4px; border-radius: 12px; border: 1px solid var(--border-subtle); background: var(--surface-inset);
}
.sg-nav .sg-nav-btn { width: 34px; height: 34px; border: 0; background: var(--surface-card); border-radius: 9px; }
.sg-nav .sg-today { width: auto; padding: 0 12px; font-weight: 600; font-size: .74rem; }
.sg-nav .sg-today.is-on { background: var(--accent-soft); color: var(--accent); }
.sg-nav .mt-date { margin-inline-start: 2px; }
.sg-days { display: inline-flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.sg-day {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 58px; padding: 4px 8px;
  border-radius: 10px; border: 1px solid var(--border-subtle); background: var(--surface-inset); color: var(--text-secondary);
  font: inherit; font-size: .68rem; font-weight: 600; cursor: pointer; position: relative;
}
.sg-day strong { font-family: var(--font-mono); font-size: .8rem; color: var(--text-primary); }
.sg-day em { position: absolute; top: -6px; inset-inline-end: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent-fill); color: var(--accent-contrast); font-style: normal; font-family: var(--font-mono); font-size: .62rem; line-height: 16px; }
.sg-day.is-on { border-color: var(--accent-fill-solid); background: var(--accent-soft); }
.sg-day.is-on strong { color: var(--accent); }
.sg-day.is-closed { border-style: dashed; }
.sg-tools { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-inline-start: auto; align-items: center; }
.sg-gran { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--surface-inset); }
.sg-gran .dsp3-iconbtn { min-width: 34px; height: 30px; border: 0; background: transparent; font-family: var(--font-mono); }
/* the date field beside the 7-day strip (calendar card + Planung head)
   is the shared MT.ui.dateField — its looks live in ui-kit.css */
.sg-wrap { flex: 1; min-height: 0; overflow: auto; background: var(--surface-canvas); }
.sg-in { position: relative; min-width: max-content; }
.sg-notes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sg-note { position: absolute; border-radius: 8px; padding: 4px 8px; overflow: hidden; pointer-events: auto; cursor: pointer; border: 1px solid transparent; display: flex; flex-direction: column; gap: 2px; }
.sg-note-txt { font-size: .76rem; font-weight: 700; white-space: pre-wrap; }
.sg-note small { font-family: var(--font-mono); font-size: .64rem; opacity: .75; }
.sg-note.is-lime { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-fill-solid); }
.sg-note.is-amber { background: var(--status-expiring-soft); color: var(--status-expiring-text); border-color: var(--status-expiring); }
.sg-note.is-red { background: var(--status-expired-soft); color: var(--status-expired-text); border-color: var(--status-expired); }
.sg-note.is-blue { background: var(--status-info-soft); color: var(--status-info-text); border-color: var(--status-info); }
.sg-note.is-violet { background: color-mix(in srgb, #8b5cf6 16%, transparent); color: #a78bfa; border-color: #8b5cf6; }
.sg-note.is-teal { background: color-mix(in srgb, #14b8a6 16%, transparent); color: #2dd4bf; border-color: #14b8a6; }
.sg-note.is-grey { background: var(--surface-overlay); color: var(--text-secondary); border-color: var(--border-strong); }
.sg-note.is-pink { background: color-mix(in srgb, #ec4899 16%, transparent); color: #f472b6; border-color: #ec4899; }
body:not(.dark) .sg-note.is-violet { color: #6d28d9; } body:not(.dark) .sg-note.is-teal { color: #0f766e; } body:not(.dark) .sg-note.is-pink { color: #be185d; }
.sg-table { position: relative; z-index: 1; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.sg-table th, .sg-table td { border-inline-end: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.sg-table thead th { position: sticky; top: 0; z-index: 4; background: var(--surface-raised); }
.sg-corner { position: sticky; inset-inline-start: 0; z-index: 5 !important; width: 64px; min-width: 64px; color: var(--text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.sg-col { width: 300px; min-width: 300px; padding: 0; text-align: start; vertical-align: top; }
.sg-col.is-pool { background: linear-gradient(160deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 80%, var(--text-secondary)) 100%); }
.sg-col.is-pool strong { color: var(--text-on-accent); }
.sg-col.is-pool .dsp3-gcount { color: var(--text-on-accent); opacity: .72; }
.sg-col.is-pool .dsp3-av.is-inbox { background: var(--accent-fill); color: var(--accent-contrast); }
body.dark .sg-col.is-pool { background: linear-gradient(160deg, var(--surface-overlay), var(--surface-raised)); }
body.dark .sg-col.is-pool strong { color: var(--text-primary); }
body.dark .sg-col.is-pool .dsp3-gcount { color: var(--text-secondary); opacity: 1; }
.sg-col-in { display: flex; align-items: center; gap: 8px; padding: 8px 10px; }
.sg-col-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.sg-col-id strong { font-size: .9rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-col-sub { display: flex; flex-wrap: wrap; gap: 4px; }
.sg-col-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.sg-col.is-absent .sg-col-in, .sg-col.is-suspended .sg-col-in { opacity: .75; }
.sg-time { position: sticky; inset-inline-start: 0; z-index: 2; width: 64px; min-width: 64px; padding: 6px 6px; text-align: center; vertical-align: top; background: var(--surface-raised); font-family: var(--font-mono); font-size: .74rem; color: var(--text-muted); }
.sg-row.is-hour .sg-time { color: var(--text-primary); font-weight: 600; }
.sg-row.is-hour td, .sg-row.is-hour th { border-top: 1px solid var(--border-default); }
.sg-cell { min-height: 30px; height: 34px; padding: 4px; vertical-align: top; background: transparent; cursor: cell; }
.sg-cell:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent-fill-solid); }
.sg-cell.is-sel { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-fill-solid); }
.sg-cell.is-off { background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--surface-overlay) 6px 7px); }
.sg-cell.is-over { box-shadow: inset 0 0 0 2px var(--accent-fill-solid); background: var(--accent-soft); }
.sg-cell.is-over.is-reject { box-shadow: inset 0 0 0 2px var(--status-expired); background: var(--status-expired-soft); }
.sg-row.is-untimed .sg-time { font-size: .62rem; }
.sg-block {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 4px; padding: 6px 8px 8px; border-radius: 10px;
  border: 1px solid var(--border-default); background: var(--surface-card);
  background-image: linear-gradient(to right, var(--accent-soft) var(--dsp3-p, 0%), transparent var(--dsp3-p, 0%));
  box-shadow: var(--shadow-sm); cursor: grab; outline: none;
}
html[dir="rtl"] .sg-block { background-image: linear-gradient(to left, var(--accent-soft) var(--dsp3-p, 0%), transparent var(--dsp3-p, 0%)); }
.sg-block:focus { box-shadow: 0 0 0 2px var(--accent-fill-solid); }
.sg-block.is-erledigt { background-image: linear-gradient(to right, var(--status-valid-soft) 100%, transparent 100%); }
.sg-block.is-cancelled { opacity: .6; } .sg-block.is-cancelled .sg-text { text-decoration: line-through; }
.sg-block.is-editing { cursor: default; }
.sg-block-top { display: flex; align-items: center; gap: 6px; }
.sg-block-top .dsp3-pill { height: 20px; font-size: .62rem; padding: 0 7px; }
.sg-sent { display: inline-flex; color: var(--status-info-text); }
.sg-unsent { font-size: .62rem; color: var(--status-expiring-text); font-weight: 600; }
.sg-menu { margin-inline-start: auto; opacity: 0; }
.sg-block:hover .sg-menu, .sg-block:focus-within .sg-menu { opacity: 1; }
.sg-text { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--font-ui); font-size: .78rem; line-height: 1.4; color: var(--text-body); }
.sg-text::first-line { color: var(--text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.sg-left { border-top: 1px dashed var(--status-expiring); padding-top: 4px; font-size: .74rem; color: var(--status-expiring-text); }
.sg-left strong { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; }
.sg-left pre { margin: 0; white-space: pre-wrap; font-family: inherit; }
.sg-edit { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; min-width: 280px; }
.sg-ta { width: 100%; min-height: 96px; padding: 8px; border-radius: 8px; border: 1px solid var(--accent-fill-solid); background: var(--surface-inset); color: var(--text-primary); font: inherit; font-size: .8rem; line-height: 1.4; resize: vertical; box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.sg-preview { display: flex; flex-wrap: wrap; gap: 4px; }
.sg-pv { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 6px; border-radius: 6px; font-size: .68rem; max-width: 100%; }
.sg-pv em { font-style: normal; font-weight: 700; opacity: .7; }
.sg-pv.is-ok { background: var(--status-valid-soft); color: var(--status-valid-text); }
.sg-pv.is-warn { background: var(--status-expiring-soft); color: var(--status-expiring-text); }
.sg-pv.is-left { background: var(--status-expired-soft); color: var(--status-expired-text); }
.sg-pv-note { font-size: .66rem; color: var(--text-muted); }
.sg-edit-hint { font-size: .64rem; color: var(--text-muted); }
.sg-selbar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--accent-soft); border-top: 1px solid var(--accent-fill-solid); font-size: .8rem; font-weight: 600; color: var(--accent); }
.sg-selbar.hidden { display: none; }
.sg-selbar span { margin-inline-end: auto; }
.sg-notepop { width: 320px; padding: 8px; }
.sg-note-ta { width: 100%; padding: 8px; border-radius: 8px; border: 1px solid var(--field-line); background: var(--field-ground); color: var(--text-primary); font: inherit; font-size: .82rem; resize: vertical; }
.sg-swatches { display: flex; gap: 6px; padding: 8px 2px; }
.sg-swatch { width: 24px; height: 24px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; }
.sg-swatch.is-on { border-color: var(--text-primary); transform: scale(1.12); }
.sg-swatch.is-lime { background: var(--accent-fill-solid); } .sg-swatch.is-amber { background: var(--status-expiring); } .sg-swatch.is-red { background: var(--status-expired); }
.sg-swatch.is-blue { background: var(--status-info); } .sg-swatch.is-violet { background: #8b5cf6; } .sg-swatch.is-teal { background: #14b8a6; }
.sg-swatch.is-grey { background: var(--text-muted); } .sg-swatch.is-pink { background: #ec4899; }
.sg-notepop-foot { display: flex; justify-content: flex-end; gap: 6px; }
.sg-notepop-foot .is-danger { margin-inline-end: auto; }

/* ── the passenger app's series (V2 «series», 2026-11-04) ─────────── */
/* a series waiting for the office: the button carries a tinted ground, never a stripe */
.dsp3-act.is-attn { background: var(--status-info-soft); color: var(--status-info-text); border-color: transparent; }
.dsp3-dialog.is-wide { max-width: 720px; }
.dsp3-series-lede { margin: 0; font-size: .82rem; color: var(--text-secondary); }
.dsp3-series-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dsp3-series-card {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
  border-radius: 14px; border: 1px solid var(--border-subtle); background: var(--surface-inset);
  font-size: .84rem; color: var(--text-body);
}
.dsp3-series-card p { margin: 0; }
.dsp3-series-card[data-status="angefragt"] { background: var(--status-info-soft); }
.dsp3-series-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-primary); }
.dsp3-series-hol { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--status-expiring-text); }
.dsp3-series-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }