/* =========================================================================
   ServiceHub — REDESIGN (rein optisch) · Bereich: DISPOSITION / DISPATCH
   ──────────────────────────────────────────────────────────────────────────
   Additive CSS-Schicht. NULL Funktionsänderung, kein Markup, keine Logik.
   Deckt die Planungs-Oberflächen ab:
     • Disposition  (.disposition-toolbar / .disposition-kpis / .disposition-table)
     • Dispatch-Board / Kalender  (.sh-cal + .sh-cal__*)
     • Wochenplanung  (.dispatch-planning-* / .dispatch-waiting-room)
   Warme Karten, weiche Schatten, Status in Token-Farben.

   Scoping: Dispatch-Klassen sind eindeutig genug → direkt angesprochen.
   Tokens werden lokal auf den Bereichs-Wurzeln gesetzt (kein Verlass auf
   Ladereihenfolge). Globale Basis (.btn/.badge/.data-table/:root) wird NICHT
   neu definiert. Light + Dark via [data-theme="dark"].
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Figtree:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ---------- Tokens (Light) — lokal auf die Dispatch-Wurzeln gescoped ---------- */
.disposition-toolbar,
.disposition-kpis,
.disposition-table,
.dispatch-planning-grid-wrapper,
.dispatch-waiting-room,
.sh-cal{
  --shd-accent:#E73D25; --shd-accent-700:#C5331E; --shd-accent-600:#D6371F;
  --shd-accent-soft:#FCEDE7; --shd-accent-line:rgba(231,61,37,.22);
  --shd-honey:#D99A2B; --shd-honey-soft:#FBF0DA;
  --shd-ok:#16A34A; --shd-ok-soft:#E9F8EF;
  --shd-warn:#C7791A; --shd-warn-soft:#FBF1E0;
  --shd-info:#2F6BD6; --shd-info-soft:#EAF1FC;
  --shd-violet:#7C5BD6; --shd-violet-soft:#F0ECFB;
  --shd-bg:#FAF6F2; --shd-surface:#FFFFFF; --shd-surf-2:#F6F1EB; --shd-surf-3:#EFE8E0;
  --shd-ink:#231C17; --shd-text:#463D35; --shd-text-2:#6B6157; --shd-muted:#9A8F84;
  --shd-border:#EEE5DC; --shd-border-2:#E3D9CE; --shd-field:#F6F1EB;
  --shd-font-head:'Space Grotesk','Figtree',system-ui,sans-serif;
  --shd-font-body:'Figtree',system-ui,sans-serif;
  --shd-font-mono:'Space Mono',ui-monospace,monospace;
  --shd-r-xs:7px; --shd-r-sm:9px; --shd-r-md:12px; --shd-r-lg:16px; --shd-r-pill:999px;
  --shd-sh-sm:0 1px 2px rgba(120,80,50,.06);
  --shd-sh-md:0 6px 20px rgba(120,80,50,.07),0 1px 2px rgba(120,80,50,.05);
  --shd-sh-lg:0 18px 44px rgba(120,80,50,.14);
  --shd-ring:0 0 0 3px var(--shd-accent-soft);
  --shd-tr:.16s cubic-bezier(.2,.7,.3,1);
}
[data-theme="dark"] .disposition-toolbar,
[data-theme="dark"] .disposition-kpis,
[data-theme="dark"] .disposition-table,
[data-theme="dark"] .dispatch-planning-grid-wrapper,
[data-theme="dark"] .dispatch-waiting-room,
[data-theme="dark"] .sh-cal{
  --shd-accent:#F2543B; --shd-accent-700:#E0432B; --shd-accent-600:#EC4A30;
  --shd-accent-soft:rgba(242,84,59,.16); --shd-accent-line:rgba(242,84,59,.30);
  --shd-honey:#E6AE4A; --shd-honey-soft:rgba(230,174,74,.16);
  --shd-ok:#3BC07A; --shd-ok-soft:rgba(59,192,122,.15);
  --shd-warn:#E5A33C; --shd-warn-soft:rgba(229,163,60,.15);
  --shd-info:#5C8FE8; --shd-info-soft:rgba(92,143,232,.16);
  --shd-violet:#9D82E6; --shd-violet-soft:rgba(157,130,230,.16);
  --shd-bg:#15120F; --shd-surface:#1E1A16; --shd-surf-2:#241F1A; --shd-surf-3:#2C2620;
  --shd-ink:#F6F1EC; --shd-text:#E2D8CE; --shd-text-2:#B3A99E; --shd-muted:#8C8175;
  --shd-border:#2E2822; --shd-border-2:#3A332B; --shd-field:#241F1A;
  --shd-sh-sm:0 1px 2px rgba(0,0,0,.4);
  --shd-sh-md:0 6px 20px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.4);
  --shd-sh-lg:0 18px 44px rgba(0,0,0,.5);
}

/* =========================================================================
   1) DISPOSITION — Filterleiste
   ========================================================================= */
.disposition-toolbar{
  background:var(--shd-surface);
  border:1px solid var(--shd-border);
  border-radius:var(--shd-r-lg);
  box-shadow:var(--shd-sh-md);
  padding:14px 16px;
  gap:10px 14px;
  align-items:center;
}
.disposition-toolbar .filter-label{
  font-family:var(--shd-font-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--shd-muted);
}
.disposition-toolbar .filter-input,
.disposition-toolbar .filter-select{
  font-family:var(--shd-font-body);
  font-size:13px;
  color:var(--shd-text);
  background:var(--shd-field);
  border:1px solid var(--shd-border-2);
  border-radius:var(--shd-r-sm);
  padding:8px 11px;
  transition:border-color var(--shd-tr),box-shadow var(--shd-tr),background var(--shd-tr);
}
.disposition-toolbar .filter-input:hover,
.disposition-toolbar .filter-select:hover{ border-color:var(--shd-accent-line); }
.disposition-toolbar .filter-input:focus,
.disposition-toolbar .filter-select:focus{
  outline:none;
  border-color:var(--shd-accent);
  background:var(--shd-surface);
  box-shadow:var(--shd-ring);
}
.disposition-toolbar label.filter-label{ gap:7px; color:var(--shd-text-2); }
.disposition-toolbar input[type="checkbox"]{ accent-color:var(--shd-accent); width:15px; height:15px; }

/* =========================================================================
   2) DISPOSITION — KPI-Kacheln
   ========================================================================= */
.disposition-kpis{ gap:12px; }
.disposition-kpis .kpi-card{
  background:var(--shd-surface);
  border:1px solid var(--shd-border);
  border-radius:var(--shd-r-lg);
  box-shadow:var(--shd-sh-md);
  padding:16px 18px;
  position:relative;
  overflow:hidden;
  transition:transform var(--shd-tr),box-shadow var(--shd-tr),border-color var(--shd-tr);
}
.disposition-kpis .kpi-card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:3px;
  background:linear-gradient(var(--shd-accent),var(--shd-accent-600));
  opacity:.85;
}
.disposition-kpis .kpi-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shd-sh-lg);
  border-color:var(--shd-accent-line);
}
.disposition-kpis .kpi-card .kpi-value,
.disposition-kpis .kpi-card .kpi-number,
.disposition-kpis .kpi-card strong{
  font-family:var(--shd-font-head);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  color:var(--shd-ink);
}
.disposition-kpis .kpi-card .kpi-label,
.disposition-kpis .kpi-card small,
.disposition-kpis .kpi-card .muted{
  font-family:var(--shd-font-body);
  color:var(--shd-muted);
}

/* =========================================================================
   3) DISPOSITION — Tabelle (weiche Karte statt harter Rahmen)
   ========================================================================= */
.disposition-table{
  font-family:var(--shd-font-body);
  border-radius:var(--shd-r-lg);
  overflow:hidden;
}
.disposition-table thead th{
  background:var(--shd-surf-2);
  color:var(--shd-text-2);
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  border-bottom:1px solid var(--shd-border-2);
  padding:11px 12px;
}
.disposition-table tbody td{
  color:var(--shd-text);
  border-bottom:1px solid var(--shd-border);
  padding:11px 12px;
  vertical-align:middle;
}
.disposition-table tbody tr{ transition:background var(--shd-tr); }
.disposition-table tbody tr:hover{ background:var(--shd-surf-2); }
.disposition-table .disposition-actions{ white-space:nowrap; }
/* Ungeplante Aufträge deutlich, aber warm hervorheben (Honig-Ton) */
.disposition-table .row-ungeplant,
.disposition-table tr.row-ungeplant{
  background:var(--shd-honey-soft);
  box-shadow:inset 3px 0 0 var(--shd-honey);
}
.disposition-table .row-ungeplant:hover{ background:var(--shd-honey-soft); }

/* =========================================================================
   4) DISPATCH-BOARD / KALENDER (.sh-cal)
   Weiches Kalender-Raster, heutiger Tag im Akzent, Einsätze als Token-Chips.
   ========================================================================= */
.sh-cal{
  font-family:var(--shd-font-body);
  background:var(--shd-surface);
  border:1px solid var(--shd-border);
  border-radius:var(--shd-r-lg);
  box-shadow:var(--shd-sh-md);
  overflow:hidden;
}
.sh-cal__dows{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  background:var(--shd-surf-2);
  border-bottom:1px solid var(--shd-border-2);
}
.sh-cal__dow{
  padding:9px 10px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--shd-muted);
  text-align:center;
}
.sh-cal__cells{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:1px;
  background:var(--shd-border);
}
.sh-cal__cell{
  background:var(--shd-surface);
  min-height:104px;
  padding:7px 8px;
  transition:background var(--shd-tr);
}
.sh-cal__cell:hover{ background:var(--shd-surf-2); }
.sh-cal__cell.is-out{ background:var(--shd-surf-3); color:var(--shd-muted); }
.sh-cal__cell.is-today{
  background:var(--shd-accent-soft);
  box-shadow:inset 0 0 0 2px var(--shd-accent-line);
}
.sh-cal__num{
  font-family:var(--shd-font-head);
  font-variant-numeric:tabular-nums;
  font-size:13px;
  font-weight:600;
  color:var(--shd-text);
  margin-bottom:6px;
}
.sh-cal__cell.is-today .sh-cal__num{ color:var(--shd-accent-700); }
.sh-cal__cell.is-out .sh-cal__num{ color:var(--shd-muted); font-weight:500; }
.sh-cal__evs{ display:flex; flex-direction:column; gap:4px; }
.sh-cal__ev{
  display:block;
  text-decoration:none;
  background:var(--shd-info-soft);
  color:var(--shd-info);
  border-left:3px solid var(--shd-info);
  border-radius:var(--shd-r-xs);
  padding:4px 8px;
  font-size:11.5px;
  font-weight:600;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:transform var(--shd-tr),box-shadow var(--shd-tr),filter var(--shd-tr);
}
.sh-cal__ev:hover{
  transform:translateY(-1px);
  box-shadow:var(--shd-sh-sm);
  filter:saturate(1.08);
}
.sh-cal__ev-t{
  font-family:var(--shd-font-mono);
  font-size:10.5px;
  font-weight:700;
  opacity:.85;
}
.sh-cal__more{
  font-size:10.5px;
  font-weight:600;
  color:var(--shd-muted);
  padding:2px 4px;
}

/* =========================================================================
   5) WOCHENPLANUNG — Planungs-Board (.dispatch-planning-*)
   Techniker-Spalten / Tages-Slots als weiches Raster.
   ========================================================================= */
.dispatch-planning-grid-wrapper{
  background:var(--shd-surface);
  border:1px solid var(--shd-border);
  border-radius:var(--shd-r-lg);
  box-shadow:var(--shd-sh-md);
  padding:6px;
}
.dispatch-planning-table{
  font-family:var(--shd-font-body);
  border-collapse:separate;
  border-spacing:0;
}
.dispatch-planning-table thead th{
  background:var(--shd-ink);
  color:#FCEDE7;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.02em;
  padding:9px 6px;
  text-align:center;
  border:1px solid var(--shd-border-2);
}
.dispatch-planning-table th.dispatch-planning-day--today{
  background:var(--shd-accent);
  color:#fff;
}
.dispatch-planning-tech{
  background:var(--shd-surf-2);
  border:1px solid var(--shd-border);
  color:var(--shd-text);
  font-size:13px;
  vertical-align:top;
  padding:10px 12px;
}
.dispatch-planning-tech strong{
  font-family:var(--shd-font-head);
  font-weight:600;
  color:var(--shd-ink);
  letter-spacing:-.01em;
}
.dispatch-planning-cell{
  background:var(--shd-surface);
  border:1px solid var(--shd-border);
  vertical-align:top;
  padding:5px;
  transition:background var(--shd-tr),border-color var(--shd-tr);
}
.dispatch-planning-cell--today{ background:var(--shd-accent-soft); }
.dispatch-planning-cell.dispatch-drop-over{
  background:var(--shd-accent-soft);
  border-color:var(--shd-accent);
  box-shadow:inset 0 0 0 2px var(--shd-accent-line);
}

/* Einsatz-Karten im Board — weiche Karte, Status als linker Token-Balken */
.dispatch-planning-card{
  background:var(--shd-surface);
  border:1px solid var(--shd-border);
  border-left:3px solid var(--shd-info);
  border-radius:var(--shd-r-sm);
  box-shadow:var(--shd-sh-sm);
  padding:7px 9px;
  margin-bottom:5px;
  font-size:12px;
  line-height:1.35;
  color:var(--shd-text);
  cursor:grab;
  transition:transform var(--shd-tr),box-shadow var(--shd-tr),border-color var(--shd-tr);
}
.dispatch-planning-card:hover{
  transform:translateY(-1px);
  box-shadow:var(--shd-sh-md);
  border-color:var(--shd-accent-line);
}
.dispatch-planning-card:active{ cursor:grabbing; }
.dispatch-planning-card.dispatch-dragging{ opacity:.55; transform:scale(.97); }
.dispatch-planning-card--success{ border-left-color:var(--shd-ok); }
.dispatch-planning-card--warning{ border-left-color:var(--shd-warn); }
.dispatch-planning-card--danger { border-left-color:var(--shd-accent-700); }
.dispatch-planning-card--accent { border-left-color:var(--shd-accent); }
.dispatch-planning-card--neutral{ border-left-color:var(--shd-border-2); }

.dispatch-card-type{
  font-family:var(--shd-font-mono);
  font-size:9.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--shd-muted);
  margin-right:5px;
}
.dispatch-card-customer{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:var(--shd-text-2);
}

/* =========================================================================
   6) WARTEZIMMER — ungeplante Einsätze (.dispatch-waiting-room)
   ========================================================================= */
.dispatch-waiting-room{
  margin-top:16px;
  padding:16px 18px;
  background:var(--shd-surf-2);
  border:1.5px dashed var(--shd-border-2);
  border-radius:var(--shd-r-lg);
}
.dispatch-waiting-room__title{
  font-family:var(--shd-font-head);
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--shd-ink);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
}
.dispatch-waiting-room__count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:var(--shd-r-pill);
  background:var(--shd-honey);
  color:#fff;
  font-family:var(--shd-font-body);
  font-size:11px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.dispatch-waiting-room__grid{ display:flex; flex-wrap:wrap; gap:9px; }
.dispatch-waiting-room__card{
  padding:9px 12px;
  background:var(--shd-surface);
  border:1px solid var(--shd-border);
  border-left:3px solid var(--shd-honey);
  border-radius:var(--shd-r-sm);
  box-shadow:var(--shd-sh-sm);
  font-size:12.5px;
  color:var(--shd-text);
  cursor:grab;
  min-width:200px;
  max-width:300px;
  transition:transform var(--shd-tr),box-shadow var(--shd-tr),border-color var(--shd-tr);
}
.dispatch-waiting-room__card:hover{
  transform:translateY(-1px);
  box-shadow:var(--shd-sh-md);
  border-color:var(--shd-accent-line);
}
.dispatch-waiting-room__card:active{ cursor:grabbing; }
.dispatch-waiting-room__card.dispatch-dragging{ opacity:.55; }