/* ── Struktur ─────────────────────────────────────────────────────────────────
   Nur Geometrie und Verhalten. Alles Gestalterische kommt aus der Theme-Ebene.
   Die Gewerk-Farben (--gw-*) sind Identität und in allen Themes identisch.     */

*, *::before, *::after { box-sizing: border-box; }

/* Das Attribut hidden setzt display:none nur über das Browser-Stylesheet —
   jede eigene display-Regel (.dlg{display:grid}, .bz{display:flex}) schlägt es.
   Der Dialog blieb dadurch unsichtbar, lag aber weiter über allem und
   schluckte jeden Klick. */
[hidden] { display: none !important; }

/* Acht validierte Farbtöne auf nummerierten Plätzen. Reihenfolge und Zuordnung
   stammen aus tools/farbsuche.mjs (720 Anordnungen durchgerechnet) und maximieren
   die Unterscheidbarkeit BENACHBARTER Zeilen bei Farbenblindheit. Nicht per Hand
   ändern — siehe docs/entscheidungen.md. Ab Platz 11 wiederholen sich die Töne
   und werden per Schraffur unterschieden (js/palette.js).
   --gw-8 (Ocker) und --gw-9 (Türkis) sind spätere Handergänzungen für einen Plan
   mit >8 Gewerken (Klassentreffen): bewusst außerhalb der Farbsuche, auf Ansage.
   Sauber wäre, die Farbsuche für zehn Töne neu zu rechnen, falls der Bedarf bleibt. */
:root {
  --gw-0: #eb6834;  /* orange  */
  --gw-1: #1baf7a;  /* aqua    */
  --gw-2: #eda100;  /* gelb    */
  --gw-3: #e87ba4;  /* magenta */
  --gw-4: #2a78d6;  /* blau    */
  --gw-5: #e34948;  /* rot     */
  --gw-6: #4a3aa7;  /* violett */
  --gw-7: #008300;  /* grün    */
  --gw-8: #8a5a2b;  /* ocker   */
  --gw-9: #0e9aa7;  /* türkis  */
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --gw-0: #d95926; --gw-1: #199e70; --gw-2: #c98500; --gw-3: #d55181;
    --gw-4: #3987e5; --gw-5: #e66767; --gw-6: #9085e9; --gw-7: #008300;
    --gw-8: #a06a33; --gw-9: #1fb0bd;
  }
}
:root[data-theme="dark"] {
  --gw-0: #d95926; --gw-1: #199e70; --gw-2: #c98500; --gw-3: #d55181;
  --gw-4: #3987e5; --gw-5: #e66767; --gw-6: #9085e9; --gw-7: #008300;
  --gw-8: #a06a33; --gw-9: #1fb0bd;
}

/* Zweiter Identitätskanal für Gewerk 11–20: 45°-Schraffur über dem Farbton.
   Liegt auf ::after, damit die Füllung des Balkens (Fortschritt, Status)
   unberührt bleibt. */
.bz-bar[data-tex], .bz-sum[data-tex], .bz-mini-b[data-tex], .bz-dot[data-tex] { position: relative; }
.bz-bar[data-tex]::after, .bz-sum[data-tex]::after, .bz-mini-b[data-tex]::after, .bz-dot[data-tex]::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(45deg,
    rgba(255,255,255,.55) 0 2px, transparent 2px 5px);
  border-radius: inherit;
}
.bz-dot[data-tex]::after { background: repeating-linear-gradient(45deg, rgba(255,255,255,.7) 0 1px, transparent 1px 3px); }

body { margin: 0; }

.app { display: flex; flex-direction: column; height: 100vh; min-height: 0; }

/* ── Gantt-Rahmen ─────────────────────────────────────────────────────────── */
.bz { position: relative; flex: 1; min-height: 0; display: flex; }
.bz-scroll { flex: 1; overflow: auto; overscroll-behavior-x: contain; min-height: 0; }
.bz-grid {
  display: grid;
  grid-template-columns: var(--side-w) max-content;
  grid-template-rows: auto 1fr;
  align-items: start;
  width: max-content;
  min-width: 100%;
}

.bz-corner { position: sticky; top: 0; left: 0; z-index: 5; grid-area: 1/1; height: 100%; }
.bz-axis   { position: sticky; top: 0; z-index: 3; grid-area: 1/2; }
/* über dem Canvas: Pfeile zu Vorgängen links außerhalb des Sichtfelds haben
   negative x-Werte und würden sonst quer über die Gewerk-Namen laufen */
.bz-side   { position: sticky; left: 0; z-index: 4; grid-area: 2/1; }
.bz-canvas { position: relative; grid-area: 2/2; }

/* ── Achse ────────────────────────────────────────────────────────────────── */
.bz-axis-major, .bz-axis-minor { position: relative; height: 22px; }
/* KEIN overflow:hidden hier — das macht die Ebene selbst zum Scroll-Container
   und das sticky unten klebte dann am Canvas-Rand statt am Bildschirmrand. */
.bz-axis-phase { position: relative; height: 17px; }
.bz-ph { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; }
/* sticky hält den Phasennamen im Blick, solange ein Rest der Phase sichtbar ist;
   der umschließende Block begrenzt ihn automatisch auf die eigene Phase.
   left misst ab dem Rand des SCROLLBEREICHS — dort klebt aber die Gewerk-Spalte
   und würde das Label verdecken, also erst hinter ihr andocken. */
.bz-ph-t { position: sticky; left: var(--side-w); white-space: nowrap; }

.bz-corner-cap { display: flex; align-items: center; height: 100%; }
.bz-t { position: absolute; top: 0; height: 100%; display: flex; align-items: center; white-space: nowrap; pointer-events: none; }
/* Die grobe Zeile spannt ihr Intervall und zentriert das Label darüber
   (Tagesdatum mittig über den Stunden). Randlinie bleibt am Intervallanfang. */
.bz-t-major { justify-content: center; overflow: hidden; }
.bz-t-major > span { padding: 0 8px; }
.bz-t-minor { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
.bz-t-minor > span { padding-left: 4px; line-height: 1; }

/* ── Seitenspalte ─────────────────────────────────────────────────────────── */
.bz-lab { display: flex; align-items: center; gap: 7px; padding: 0 10px 0 8px; overflow: hidden; }
.bz-lab-task { padding-left: 30px; }
.bz-lab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.bz-lab-meta { flex: none; font-variant-numeric: tabular-nums; }
.bz-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--gw); }

.bz-tw {
  flex: none; width: 16px; height: 16px; padding: 0; border: 0; background: none;
  cursor: pointer; display: grid; place-items: center; color: inherit;
}
.bz-tw-i {
  width: 0; height: 0; border-left: 4.5px solid currentColor;
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
  transform: rotate(90deg); transition: transform .15s ease;
}
.bz-lab-group.is-collapsed .bz-tw-i { transform: rotate(0deg); }

/* ── Spuren & Balken ──────────────────────────────────────────────────────── */
.bz-rows { position: relative; z-index: 1; }
.bz-track { position: relative; }

.bz-bar {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: var(--bar-h); background: var(--gw);
  display: flex; align-items: center; overflow: hidden;
  cursor: pointer; outline: none;
}
.bz-bar-t {
  position: relative; z-index: 1; padding: 0 7px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* Zu schmal für Text im Balken → Beschriftung rechts daneben */
.bz-bar.is-narrow { overflow: visible; }
.bz-bar.is-narrow .bz-bar-t { position: absolute; left: 100%; padding-left: 6px; }
/* Balken links aus dem Bild gescrollt → Beschriftung weg (siehe updateLabels) */
.bz-bar.lab-hide .bz-bar-t { display: none; }
.bz-prog { position: absolute; inset: 0 auto 0 0; z-index: 0; }

/* Konflikt: Balken verletzt eine Abhängigkeit. Nie über Farbe allein — das
   Ausrufezeichen in der Seitenspalte trägt dieselbe Aussage. */
.bz-bar.is-conflict { animation: bz-pulse 1.6s ease-in-out infinite; }
@keyframes bz-pulse { 50% { opacity: .72; } }
.bz-conf-tag {
  flex: none; display: grid; place-items: center;
  width: 14px; height: 14px; border-radius: 50%; font-weight: 700; cursor: help;
}

/* Puffer als Geisterspur hinter dem Balken */
.bz-slack { position: absolute; top: 50%; transform: translateY(-50%); height: var(--bar-h); pointer-events: none; }

/* Sammelbalken der Gruppe */
.bz-sum { position: absolute; top: 50%; transform: translateY(-50%); height: 7px; background: var(--gw); }
.bz-sum-cap { position: absolute; top: 0; width: 0; height: 0; }
.bz-sum-cap-l { left: 0; }
.bz-sum-cap-r { right: 0; }
.bz-mini { position: absolute; top: 50%; transform: translateY(-50%); height: 13px; pointer-events: none; }

/* Meilenstein */
.bz-ms { position: absolute; top: 50%; height: 0; display: flex; align-items: center; cursor: pointer; }
.bz-ms-d {
  flex: none; width: 11px; height: 11px; margin-left: -5.5px;
  background: var(--gw, currentColor); transform: rotate(45deg);
}
.bz-ms-t { white-space: nowrap; padding-left: 9px; pointer-events: none; }

/* ── Jetzt-Linie ──────────────────────────────────────────────────────────── */
.bz-now { position: absolute; top: 0; bottom: 0; width: 2px; z-index: 4; pointer-events: none; }
/* sticky statt absolute: beim Scrollen durch die Gewerke bliebe die Fahne sonst
   oben liegen und man verlöre die Marke, auf die es gerade ankommt.
   width:max-content ist dabei Pflicht — sticky steht im normalen Fluss und
   würde sonst auf die 2px Breite der Linie zusammenschnurren. */
.bz-now-flag {
  position: sticky; top: 0; left: 0; width: max-content;
  transform: translateX(-50%); white-space: nowrap;
}

/* ── Bänder ───────────────────────────────────────────────────────────────── */
.bz-bands { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bz-phase, .bz-we { position: absolute; top: 0; bottom: 0; }
.bz-phase-t { position: sticky; left: 8px; display: inline-block; padding: 3px 0 0 2px; }

/* ── Abhängigkeitspfeile ──────────────────────────────────────────────────── */
/* overflow:hidden schneidet Pfade zu Vorgängen außerhalb des Zeitraums ab */
.bz-deps { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.bz-dep { fill: none; }

/* ── Tooltip ──────────────────────────────────────────────────────────────── */
.bz-tip {
  position: absolute; top: 0; left: 0; z-index: 30; pointer-events: none;
  opacity: 0; transition: opacity .12s ease; max-width: 290px;
}
.bz-tip.is-on { opacity: 1; }
.bz-tip-h { display: flex; align-items: center; gap: 6px; }
.bz-tip-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.bz-tip-dl dt { margin: 0; }
.bz-tip-dl dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ── Minimap ──────────────────────────────────────────────────────────────── */
.bz-mini-map { flex: none; }
.bz-mini-strip { position: relative; cursor: grab; touch-action: none; }
.bz-mini-strip:active { cursor: grabbing; }
.bz-mini-lane { position: relative; height: 4px; margin-bottom: 1px; }
.bz-mini-b { position: absolute; top: 0; height: 100%; background: var(--gw); border-radius: 1px; }
.bz-mini-now { position: absolute; top: 0; bottom: 0; width: 1px; }
.bz-mini-win { position: absolute; top: 0; bottom: 0; pointer-events: none; }

/* ── Kopf & Bedienung ─────────────────────────────────────────────────────── */
.hd { flex: none; }
.hd-row { display: flex; align-items: center; gap: 14px; }
.kpis { display: flex; }
.kpi-v { font-variant-numeric: tabular-nums; }
.seg { display: flex; }
.seg button, .btn { cursor: pointer; font: inherit; }
.legend { display: flex; flex-wrap: wrap; }
.legend-i { display: flex; align-items: center; gap: 5px; }
.legend-i .bz-dot { width: 8px; height: 8px; }

/* Brand-Lockup im Kopf: Logo-Mark (48 px) + Wortmarke, davor dem Projektblock.
   NUR Geometrie — Farbe und Schrift bringt das Theme. */
.hd-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.hd-brand { display: flex; align-items: center; gap: 11px; flex: none; }
.hd-mark { flex: none; width: 48px; height: 48px; display: block; }
.hd-brandtext { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.hd-div { align-self: stretch; width: 1px; flex: none; margin: 3px 0; }
.hd-proj { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ── Bearbeiten: Struktur ─────────────────────────────────────────────────────
   Nur Geometrie. Farben und Schrift kommen aus der Theme-Ebene.               */

.hd-zoom { display: flex; align-items: center; gap: 8px; }
.hd-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.save-state { white-space: nowrap; }

/* ── Tabellen-Editor ────────────────────────────────────────────────────────── */
.tb { flex: 1; min-height: 0; overflow: auto; }
.tb-t { width: 100%; border-collapse: collapse; }
.tb-t th { position: sticky; top: 0; z-index: 2; text-align: left; white-space: nowrap; }
.tb-t th, .tb-t td { padding: 0; }
.tb-r input, .tb-r select {
  width: 100%; border: 0; background: none; font: inherit; color: inherit;
  padding: 4px 6px; min-width: 0;
}
.tb-r input:focus, .tb-r select:focus { outline: 2px solid var(--gw, currentColor); outline-offset: -2px; }
.tb-r input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.tb-r input[type="datetime-local"] { font-variant-numeric: tabular-nums; }
.c-gw { width: 130px; }
.c-title { width: auto; min-width: 220px; }
.c-start, .c-end { width: 175px; }
.c-dur { width: 82px; }
.c-crew { width: 62px; }
.c-st { width: 96px; }
.c-act { width: 56px; white-space: nowrap; }
.tb-group td { padding: 8px 8px 5px; }
.tb-group .bz-dot { display: inline-block; vertical-align: middle; margin-right: 6px; }
.tb-gname { vertical-align: middle; }
.tb-gcount { margin-left: 8px; }
.tb-add { margin-left: 10px; border: 0; background: none; font: inherit; cursor: pointer; padding: 0; }
.tb-empty td { padding: 5px 8px 5px 30px; }
.tb-fixed { padding: 4px 6px; display: inline-block; }
.tb-ico { border: 0; background: none; font: inherit; cursor: pointer; padding: 2px 5px; line-height: 1; }
.tb-conf { display: block; padding: 0 6px 4px; }
.tb-dur.is-bad { outline: 2px solid var(--crit, red); outline-offset: -2px; }

/* ── Dialog ─────────────────────────────────────────────────────────────────── */
.dlg { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; overflow: auto; }
.dlg-box { width: min(620px, 100%); max-height: 90vh; overflow: auto; }
.dlg-h { margin: 0; }
.dlg-h3 { margin: 18px 0 8px; }
.dlg-sub { margin: 6px 0 0; }
.dlg-list { display: flex; flex-direction: column; gap: 4px; }
.dlg-row { display: flex; gap: 4px; }
.dlg-open { flex: 1; text-align: left; border: 0; font: inherit; cursor: pointer; padding: 8px 10px; display: block; }
.dlg-open-n { display: block; }
.dlg-open-m { display: block; }
.dlg-del { border: 0; font: inherit; cursor: pointer; padding: 0 12px; }
.dlg-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dlg-f { display: flex; flex-direction: column; gap: 3px; }
.dlg-f:first-child { grid-column: 1 / -1; }
.dlg-f input { font: inherit; padding: 6px 8px; }
.dlg-tpl { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px; margin-top: 12px; }
.dlg-t { text-align: left; font: inherit; cursor: pointer; padding: 9px 11px; }
.dlg-t-n { display: block; }
.dlg-t-d { display: block; }
.dlg-act { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

/* ── Hinweis ────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 60; padding: 9px 15px; max-width: min(560px, 90vw);
}

/* ── Arbeitsfläche: Gantt/Tabelle + Panel ─────────────────────────────────── */
.work { flex: 1; min-height: 0; display: flex; }
.work > .bz, .work > .tb { flex: 1; min-width: 0; }
.ins { flex: none; width: 320px; overflow-y: auto; display: flex; flex-direction: column; }

.ins-head { display: flex; align-items: center; justify-content: space-between; }
.ins-x { border: 0; background: none; font: inherit; cursor: pointer; line-height: 1; }
.ins-title { display: flex; align-items: center; gap: 7px; }
.ins-dot { width: 11px; height: 11px; }
.ins-f { display: flex; flex-direction: column; gap: 3px; }
.ins-f input, .ins-f select, .ins-f textarea { font: inherit; width: 100%; }
.ins-f textarea { resize: vertical; }
.ins-row { display: flex; gap: 5px; }
.ins-row .btn { flex: 1; }
.ins-check { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.ins-hint { display: block; }
.ins-dep { display: grid; grid-template-columns: auto 1fr auto auto auto; align-items: center; gap: 4px; }
.ins-dep-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-dep-l { width: 56px; }
.ins-dep-x { border: 0; background: none; font: inherit; cursor: pointer; }
.ins-dep-add { width: 100%; font: inherit; }
.ins .is-bad { outline: 2px solid var(--crit, red); outline-offset: -2px; }

/* ── Kontextmenü ──────────────────────────────────────────────────────────── */
.mn { position: fixed; z-index: 70; min-width: 190px; }
.mn-i {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer;
}
.mn-i:disabled { cursor: default; }
.mn-sep { height: 1px; }

/* ── Live ─────────────────────────────────────────────────────────────────── */
.live-bar { display: flex; align-items: center; gap: 7px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; animation: bz-blink 2s ease-in-out infinite; }
@keyframes bz-blink { 50% { opacity: .25; } }
/* Laufende und überfällige Marken gibt es NUR im Live-Modus — beim Bearbeiten
   ist das Geblinke im Weg. */
.bz.is-live .bz-bar.is-running { box-shadow: 0 0 0 2px var(--panel2, #fff), 0 0 0 4px var(--live-run, #0a0); }
.bz.is-live .bz-bar.is-late, .bz.is-live .bz-ms.is-late .bz-ms-d { animation: bz-blink 1.4s ease-in-out infinite; }
.bz.is-live .bz-lab.is-late .bz-lab-name::after { content: ' ⚠'; }
.bz-lab-edit { width: 100%; font: inherit; border: 0; padding: 0; background: none; color: inherit; }
.bz-lab.is-sel, .bz-bar.is-sel, .bz-ms.is-sel .bz-ms-d { outline: 2px solid var(--sel, currentColor); outline-offset: 1px; }

/* Dauer geschätzt: die rechte Kante ist offen, weil das Ende nicht feststeht.
   Nur die Kante — der Balken selbst muss seine Gewerk-Farbe behalten. */
.bz-bar.is-estimated::before {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 3px; z-index: 3;
  background: repeating-linear-gradient(to bottom,
    currentColor 0 2px, transparent 2px 4px);
}

/* Version in der Fußzeile — leise, aber auffindbar. */
.ft-ver { font-variant-numeric: tabular-nums; cursor: help; }