/* 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)); } }
.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: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto;
  column-gap: 6px; row-gap: 7px; align-items: baseline;
  width: 100%; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; text-align: start; cursor: pointer;
}
.dsp3-day-dow { grid-column: 1; grid-row: 1; 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 { grid-column: 1; grid-row: 2; font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--text-primary); }
.dsp3-day-mon { grid-column: 2; grid-row: 1; font-size: .72rem; color: var(--text-muted); }
.dsp3-day-tally { grid-column: 2 / span 2; grid-row: 2; justify-self: end; align-self: center; 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); }
.dsp3-day-chips { display: flex; flex-wrap: wrap; gap: 4px; min-height: 18px; }
.dsp3-day-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 999px;
  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); }
.dsp3-day-chip.is-done { background: var(--status-valid-soft); color: var(--status-valid); }
.dsp3-day-chip.is-unsent { background: var(--status-expiring-soft); color: var(--status-expiring); }
/* 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)); } }
@container dsp3 (max-width: 720px) { .dsp3-kpis { grid-template-columns: 1fr 1fr; } }
.dsp3-kpi {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 10px;
  align-items: center; text-align: start;
  padding: 12px 14px; border-radius: 16px;
  border: 1px solid var(--border-subtle); background: var(--surface-card);
  color: var(--text-body); font: inherit; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, transform .15s var(--mt-ease-out), background .15s;
}
.dsp3-kpi:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.dsp3-kpi.is-on { border-color: var(--accent-fill-solid); background: var(--accent-soft); }
.dsp3-kpi.is-alert .dsp3-kpi-v, .dsp3-kpi.is-alert .dsp3-kpi-ic { color: var(--status-expired); }
.dsp3-kpi-ic { grid-row: 1 / span 3; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--surface-inset); color: var(--accent); }
.dsp3-kpi-v { font-size: 1.7rem; font-weight: 600; line-height: 1; color: var(--text-primary); }
.dsp3-kpi-l { font-size: .78rem; font-weight: 700; color: var(--text-secondary); margin-top: 3px; }
.dsp3-kpi-s { font-size: .68rem; color: var(--text-muted); margin-top: 1px; }

/* ── action row ────────────────────────────────────────────────── */
.dsp3-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dsp3-act {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 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 { min-height: 32px; padding: 0 10px; font-size: .78rem; gap: 6px; box-shadow: none; }
.dsp3-act.is-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-secondary); }
.dsp3-act.is-danger { color: var(--status-expired); }
.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-secondary); }
.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); 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; }
.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); }
.dsp3-doc.is-expiring { background: var(--status-expiring-soft); color: var(--status-expiring); }
.dsp3-doc.is-expired { background: var(--status-expired-soft); color: var(--status-expired); }
.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); }
.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); }
.dsp3-chipx.is-late { background: var(--status-expired-soft); color: var(--status-expired); }
.dsp3-chipx.is-pay { background: var(--status-valid-soft); color: var(--status-valid); }
.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); }
.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); }
.dsp3-pill.is-storniert { background: var(--status-expired-soft); color: var(--status-expired); }
.dsp3-pill.is-entwurf { background: var(--status-expiring-soft); color: var(--status-expiring); }
.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); 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); margin-inline-start: 4px; }
.dsp3-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 8px; font-size: .76rem;
}
.dsp3-banner strong { font-weight: 700; }
.dsp3-banner.is-return { background: var(--status-expiring-soft); color: var(--status-expiring); }
.dsp3-banner.is-cancel { background: var(--status-expired-soft); color: var(--status-expired); }
/* 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; }
.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); }
.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); 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;
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px;
  padding: 10px 10px 10px 8px; border-radius: 14px;
  border: 1px solid var(--border-subtle); background: var(--surface-inset);
}
.dsp3-ticket:hover { border-color: var(--border-strong); }
.dsp3-tk-time { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.dsp3-tk-hm { font-size: 1.15rem; font-weight: 600; color: var(--text-primary); line-height: 1; }
.dsp3-tk-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dsp3-tk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.dsp3-tk-head .dsp3-patient { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
/* stretch, not flex-start: in a column, flex-start sizes each row to its
   own text and lets it hang out of the card — which is exactly what a
   long address did */
.dsp3-ticket .dsp3-route { flex-direction: column; align-items: stretch; gap: 3px; }
.dsp3-tk-acts { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 4px; opacity: 0; transition: opacity .12s; }
.dsp3-ticket:hover .dsp3-tk-acts, .dsp3-ticket:focus-within .dsp3-tk-acts { opacity: 1; }
@media (hover: none) { .dsp3-tk-acts { opacity: 1; } }

/* ── 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; }
.dsp3-group.is-queue { border-color: var(--status-expiring); border-style: dashed; }
.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; }
.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); 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); }
.dsp3-menu-item.is-danger svg { color: var(--status-expired); }
.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); }
#confirm-modal[data-kind="danger"] .cm-icon { background: var(--status-expired-soft); color: var(--status-expired); }
.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); }
.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); 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; }
.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; }
.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); }
.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) !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); } .sh-cell.is-unterwegs { color: var(--accent); } .sh-cell.is-storniert { color: var(--status-expired); }
.sh-cell.is-offen { color: var(--status-info); } .sh-cell.is-entwurf { color: var(--status-expiring); }
.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-queue td { border-top: 2px solid var(--status-expiring); }
.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) !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 > .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 .dsp3-cal-pick { height: 34px; background: var(--field-ground); 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 picker beside the 7-day strip (calendar card + Planung head):
   any day, directly — the strip follows */
.dsp3-cal-pick {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px 0 10px;
  border-radius: 10px; border: 1px solid var(--field-line); background: var(--field-ground); color: var(--text-secondary);
  cursor: pointer; transition: border-color .12s, color .12s;
}
.dsp3-cal-pick:hover, .dsp3-cal-pick:focus-within { border-color: var(--accent-fill-solid); color: var(--text-primary); }
.dsp3-cal-date {
  border: 0; background: transparent; color: inherit; font: inherit; font-family: var(--font-mono); font-size: .78rem;
  height: 30px; padding: 0; min-width: 118px; color-scheme: dark; cursor: pointer; outline: none;
}
body:not(.dark) .dsp3-cal-date { color-scheme: light; }
.dsp3-cal-date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
.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); border-color: var(--status-expiring); }
.sg-note.is-red { background: var(--status-expired-soft); color: var(--status-expired); border-color: var(--status-expired); }
.sg-note.is-blue { background: var(--status-info-soft); color: var(--status-info); 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-queue { background: var(--status-expiring-soft); }
.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); }
.sg-unsent { font-size: .62rem; color: var(--status-expiring); 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); }
.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); }
.sg-pv.is-warn { background: var(--status-expiring-soft); color: var(--status-expiring); }
.sg-pv.is-left { background: var(--status-expired-soft); color: var(--status-expired); }
.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; }