/* 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, Yekan Bakh 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;
}
.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;
}
@media (max-width: 1279px) { .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;
}
@media (max-width: 720px) { .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; }
.dsp3-day-pick {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto;
  column-gap: 6px; 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 / span 2; 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-n {
  grid-column: 3; grid-row: 1 / span 2; align-self: start;
  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 { grid-column: 3; grid-row: 2; justify-self: end; 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; }
@media (max-width: 1279px) { .dsp3-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (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: 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(--border-subtle); background: var(--surface-inset); 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-default);
  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); }
.dsp3-row.is-overdue { border-inline-start: 3px solid var(--status-expired) !important; }
.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;
}
@media (max-width: 900px) { .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;
}
.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 */
  flex: 0 0 clamp(340px, 30vw, 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); }
@media (max-width: 900px) { .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 td:first-child { box-shadow: inset 3px 0 0 var(--status-expired); }
.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); }

/* ── 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(--border-subtle); background: var(--surface-inset); 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(--border-subtle); background: var(--surface-inset); 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, "Yekan Bakh"), 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; }

/* ── print: the visible rows only ──────────────────────────────── */
@media print {
  body.dsp3-printing #sidebar, body.dsp3-printing #app-navbar,
  body.dsp3-printing .dsp3-top, body.dsp3-printing .dsp3-actions,
  body.dsp3-printing .dsp3-bar, body.dsp3-printing .dsp3-selbar,
  body.dsp3-printing .dsp3-undo, body.dsp3-printing .dsp3-tk-acts,
  body.dsp3-printing .dsp3-sel, body.dsp3-printing .dsp3-day-drivers,
  body.dsp3-printing .dsp3-newrow, body.dsp3-printing .mt-tip { display: none !important; }
  body.dsp3-printing .dsp3-page { padding: 0; overflow: visible; }
  body.dsp3-printing .dsp3-tablewrap { max-height: none; overflow: visible; border: 0; }
  body.dsp3-printing .dsp3-strip { flex-wrap: wrap; overflow: visible; }
  body.dsp3-printing .dsp3-row { break-inside: avoid; }
}

/* ── 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: var(--surface-inset) !important;
  border: 1px solid var(--border-subtle) !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, "Yekan Bakh"), 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; }
.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-result { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.tm-result .tm-lbl { flex: 0 0 auto; }
.tm-result-in { text-align: center; height: 38px; font-size: .8rem; }
.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; }
/* 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(--border-subtle); background: var(--surface-inset);
  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(--surface-inset); 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(--border-subtle); background: var(--surface-inset); 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(--border-subtle); background: var(--surface-inset); 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(--surface-inset); 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; }
@media print { body.dsp3-printing .sh-bar, body.dsp3-printing .sh-foot { display: none !important; } body.dsp3-printing .sh-wrap { max-height: none; overflow: visible; } }
/* 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(--surface-card); 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(--border-subtle); background: var(--surface-inset); 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-overdue { border-inline-start: 3px solid var(--status-expired); }
.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(--border-subtle); background: var(--surface-inset); 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; }
@media print { body.dsp3-printing .sg-head, body.dsp3-printing .sg-selbar { display: none !important; } body.dsp3-printing .sg-wrap { overflow: visible; } }