/**
 * gantt.css — Gantt-Modul v2 (Modul-spezifisches CSS)
 *
 * Geltungsbereich:
 *   - .gl-*  Klassen für die Diagramm-Liste (index.php)
 *   - .gc-*  Klassen für das eigentliche Chart (gantt.php)
 *   - Frappe-Gantt-Overrides (Bar-Color, Meilenstein, Today-Line,
 *     Weekend-Bands, Dep-Lines, Bar-Meta) — alles über CSS-Variablen.
 *
 * Tokens kommen aus _shared/tokens/design-tokens/idf-tokens.css. Hex-Werte hier
 * ausschließlich als `var(--x, #fallback)` zur Defensive.
 */

/* ============================================================
   Full-Height-Layout für die Chart-Seite
   ============================================================
   gantt.php füllt mit der weißen Gantt-Fläche bis zum Footer aus.
   index.php (Liste) braucht das nicht — dort greift idf-list-page. */
body.gc-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}
body.gc-body #app { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* ============================================================
   Diagramm-Liste (index.php) — modul-spezifische Spalten
   ============================================================
   Bedient sich an idf-list-grid + idf-list-bar Shared-CSS.
   Grid-Template: Drag | Icon+Titel | Filter-Chips | Verantwortlich | Aktionen */

.gl-main { /* idf-list-page kommt aus Shared */ }

.gl-grid {
  display: grid;
  grid-template-columns: 44px minmax(220px, 2fr) minmax(260px, 2.4fr) minmax(160px, 1fr) 120px;
  align-items: center;
  column-gap: var(--space-3);
}

.gl-cell-icon-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.gl-icon-wrap {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  flex: 0 0 28px;
}
.gl-icon-wrap.is-system { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.gl-icon-wrap i { font-size: 14px; }

.gl-titel {
  font-weight: var(--weight-semi);
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.gl-titel .gl-star {
  color: var(--primary);
  margin-left: var(--space-1);
  font-size: 12px;
}
.gl-titel .gl-system {
  display: inline-block;
  font-size: var(--font-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  margin-left: var(--space-1);
  background: var(--bg);
  color: var(--mid);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.gl-cell-filter {
  color: var(--ink);
  font-size: var(--font-base);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
/* Deko-Icons in den Filter-Chips sind raus (#148) — Klartext mit ·-Trenner
   wie die Text-Zellen der anderen v2-Listen. */
.gl-cell-filter .gl-sep {
  margin: 0 var(--space-1);
  color: var(--line);
}

.gl-cell-verantw {
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gl-cell-verantw.is-empty {
  color: var(--mid);
  font-style: italic;
}

/* Action-Pillen kommen seit #148 aus dem Shared (.idf-list-action-link /
   .idf-list-delete-btn — Hover + Tooltip aus list-grid); hier nur noch
   Ausrichtung + Disabled-State (System-Diagramme nicht löschbar). */
.gl-cell-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
}
.gl-cell-actions .is-disabled { opacity: 0.35; pointer-events: none; }

/* ============================================================
   Chart-Seite (gantt.php) — Breadcrumb im App-Header + Toolbar
   ============================================================
   Standard-Pattern wie der Protokoll-Editor (#148): der Diagramm-
   Titel hängt als "Gantt / <Titel>" im extraLeft-Slot des Shared
   App-Headers (Optik 1:1 wie .pp-breadcrumb-*); darunter eine
   Toolbar mit Zurück + Beschreibung links und allen Aktions-
   Buttons rechts (margin-left:auto). */

/* Breadcrumb (Sep + Titel-Input) kommt seit #194 aus dem Shared-Block
   blocks/app-breadcrumb ($useBreadcrumb, Klassen idf-breadcrumb-*).
   Modul-eigen bleiben nur die Titel-Extras (Stern + System-Badge). */
.idf-app-header .gc-titel-extras { display: inline-flex; align-items: center; gap: var(--space-1); }
.idf-app-header .gc-titel-extras .gc-star {
  color: var(--primary);
  font-size: 16px;
}
.idf-app-header .gc-titel-extras .gc-sys {
  display: inline-block;
  font-size: var(--font-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--mid);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
}
/* EINE Bar unter dem App-Header: KPI-Stats links, Aktionen rechts
   (Joerg-Review 2026-06-10 — Zurück-Pfeil-Zeile + Chips-Zeile entfielen). */
.gc-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 32px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  flex-wrap: wrap;
}

/* Die frühere Filter-Chips-Zeile ist entfernt (Joerg-Review 2026-06-10 —
   Inhalte stehen in Legende + Einstellungs-Modal). */

/* Aktions-Buttons sitzen rechts (Standard) — margin-left:auto schiebt
   sie unabhängig vom restlichen Toolbar-Inhalt an den rechten Rand. */
.gc-actions {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-left: auto;
}

/* ============================================================
   Zoom-Slider + Auto-Fit (im Header-Strip)
   ============================================================ */

.gc-zoom {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}
.gc-zoom button {
  background: transparent;
  border: 0;
  padding: 4px var(--space-2);
  font-size: var(--font-sm);
  color: var(--mid);
  cursor: pointer;
  border-radius: var(--radius-sm);
  min-width: 56px;
}
.gc-zoom button:hover { color: var(--ink); }
.gc-zoom button.is-active {
  background: var(--white);
  color: var(--ink);
  font-weight: var(--weight-semi);
  box-shadow: var(--shadow-sm);
}
.gc-zoom .gc-fit {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  margin-left: var(--space-1);
}
.gc-zoom .gc-fit i { margin-right: 4px; }

/* ============================================================
   KPI-Stats (links in der gc-bar) — Dashboard-KPI-Optik statt der
   12px-Listen-Stats (Joerg-Review 2026-06-10: zu klein für die
   zentrale Kennzahlen-Übersicht der Chart-Seite). Zahl groß und
   extrabold, Label in Toolbar-Schrift; Überfällig rot.
   ============================================================ */

.gc-stats {
  display: flex; gap: var(--space-4); flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}
.gc-stat {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  font-size: var(--font-md);
  color: var(--mid);
  white-space: nowrap;
}
.gc-stat .gc-num {
  font-size: var(--font-lg);
  font-weight: var(--weight-extrabold);
  color: var(--ink);
}
.gc-stat.is-warn { color: var(--primary); }
.gc-stat.is-warn .gc-num { color: var(--primary); }

/* ============================================================
   Gantt-Wrap (Chart-Bereich)
   ============================================================ */

.gc-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  /* z-index: 0 erzeugt einen klar isolierten Stacking-Context für den
     gesamten Frappe-Gantt-Bereich. Frappe setzt intern z-index: 1000 /
     1001 auf sticky-Headers, current-highlight und Popup — ohne diesen
     Container-Context würden die über das idf-core-Modal-Overlay
     (z-index 500) hinausragen (Smoke v0.1.3: Zeitleiste über dem Modal). */
  z-index: 0;
  background: var(--white);
  overflow: auto;
  padding: var(--space-2) 0 var(--space-6);
}

/* Frappe-Gantt-z-Indizes nochmal auf 1 drücken — Defensive für den
   Fall, dass das Stacking-Context-Isolat oben nicht überall greift. */
.gc-wrap .gantt-container,
.gc-wrap .gantt-container .upper-header,
.gc-wrap .gantt-container .lower-header,
.gc-wrap .gantt-container .current-highlight,
.gc-wrap .gantt-container .current-ball-highlight,
.gc-wrap .gantt-container .popup-wrapper {
  z-index: 1;
}
/* Empty-/Fehler-Zustand: die Optik (Icon/Farben/Padding) kommt seit L4
   aus dem Shared-Block blocks/empty-state ($useEmptyState, H1/#198) -
   das JS injiziert ein inneres <div class="idf-empty-state">. Hier bleibt
   nur der lokale Layout-Rest: die Chart-Flaeche zentriert die Empty-Box.
   padding:0 neutralisiert das asymmetrische Basis-Padding von .gc-wrap,
   damit die Box wie vorher exakt mittig sitzt (das Innen-Padding
   space-12/space-6 bringt der Shared-Block selbst mit). */
.gc-wrap.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* ============================================================
   Legende (oberhalb der Timeline)
   ============================================================ */

.gc-legend {
  display: flex; flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-6);
}
/* Chip-Optik kommt seit #148 aus dem Shared `.idf-pill-tag`; das Modul
   liefert nur den erlaubten Color-Modifier (Pillen-Standard: Geometrie
   shared, Farbe modul-eigen): getönter Hintergrund in der Unternehmens-
   farbe — gibt der Pille auf weißem Grund die Kontur zurück. */
.gc-legend-chip {
  background: color-mix(in srgb, var(--chip-color, var(--soft)) 14%, transparent);
  color: var(--ink);
}
.gc-legend-chip .gc-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: var(--radius-pill);
  background: var(--chip-color, var(--soft));
}

/* ============================================================
   Frappe-Gantt-Overrides
   ============================================================
   Frappe Gantt 1.0.3 setzt feste Hex-Farben auf .bar, .bar-progress,
   .grid-row, .grid-header etc. Wir übersteuern hier alles, was den
   IDF-Look stört. Bar-Color kommt per Inline-Style --bar-color
   pro .bar-wrapper (gantt-chart-bars.js setzt das).
   ============================================================ */

.gc-wrap svg.gantt { font-family: var(--font-family); }

.gc-wrap .gantt .grid-header { fill: var(--bg); stroke: var(--line); }
.gc-wrap .gantt .grid-row { fill: var(--white); }
.gc-wrap .gantt .grid-row:nth-child(even) { fill: var(--bg); }
.gc-wrap .gantt .row-line { stroke: var(--line); }
.gc-wrap .gantt .tick { stroke: var(--line); }
.gc-wrap .gantt .lower-text,
.gc-wrap .gantt .upper-text {
  fill: var(--ink);
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
}

/* Heute-Highlight (Frappe-eigen, falls vorhanden) ausblenden — wir
   zeichnen unsere eigene Today-Line in gantt-chart-today.js. */
.gc-wrap .gantt .today-highlight { display: none; }

/* Balken: Farbe pro Unternehmen, Fallback grau. */
.gc-wrap .gantt .bar-wrapper .bar {
  fill: var(--bar-color, var(--soft));
  rx: 3; ry: 3;
}
.gc-wrap .gantt .bar-wrapper:hover .bar {
  filter: brightness(1.05);
}
.gc-wrap .gantt .bar-wrapper .bar-progress {
  fill: color-mix(in srgb, var(--bar-color, var(--soft)) 70%, var(--ink));
  rx: 3; ry: 3;
}
.gc-wrap .gantt .bar-wrapper .bar-label {
  fill: var(--white);
  font-size: var(--font-xs);
  font-weight: var(--weight-semi);
}

/* Status-Modifier (Frappe rendert keinen Status — wir vergeben Klassen
   am .bar-wrapper via toGanttTask / applyBarColors). */
.gc-wrap .gantt .bar-wrapper.gc-status-offen .bar { opacity: 1; }
.gc-wrap .gantt .bar-wrapper.gc-status-in_bearbeitung .bar { opacity: 0.9; }
.gc-wrap .gantt .bar-wrapper.gc-status-erledigt .bar { opacity: 0.4; }
.gc-wrap .gantt .bar-wrapper.gc-status-zurueckgestellt .bar { opacity: 0.5; }

/* Überfällig: dünnerer roter Rand. */
.gc-wrap .gantt .bar-wrapper.gc-overdue .bar {
  stroke: var(--primary);
  stroke-width: 1.5;
}

/* Meilenstein: Raute statt Balken (Frappe selbst hat keinen Meilenstein-
   Modus — wir transformieren den Balken zur Raute via Inline-Transform
   in upgradeBarLabels). Rotation 45 Grad um Mittelpunkt, Farbe primary. */
.gc-wrap .gantt .bar-wrapper.is-meilenstein .bar {
  fill: var(--primary);
  rx: 2; ry: 2;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(45deg) scale(0.7);
}
.gc-wrap .gantt .bar-wrapper.is-meilenstein .bar-progress,
.gc-wrap .gantt .bar-wrapper.is-meilenstein .bar-label { display: none; }

/* Fortschritts-Handle ausblenden (war in v1.2.8 schon rausgenommen —
   Fortschritt wird ausschließlich im Aufgaben-Detail-Modal gepflegt). */
.gc-wrap .gantt .handle.progress,
.gc-wrap .gantt .handle-group circle { display: none; }

/* ============================================================
   Today-Line + Weekend-Bands (Overlay aus gantt-chart-today.js)
   ============================================================ */

.gc-wrap .gantt .gc-today-line {
  stroke: var(--primary);
  stroke-width: 2;
  stroke-dasharray: 4 3;
  pointer-events: none;
}
.gc-wrap .gantt .gc-today-label {
  fill: var(--primary);
  font-size: var(--font-xs);
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
}
.gc-wrap .gantt .gc-weekend-band {
  fill: color-mix(in srgb, var(--soft) 20%, transparent);
  pointer-events: none;
}

/* ============================================================
   Abhängigkeits-Pfeile (Overlay aus gantt-chart-deps.js)
   ============================================================ */

.gc-wrap .gantt .gc-dep-link {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  pointer-events: none;
}
.gc-wrap .gantt .gc-dep-arrow {
  fill: var(--accent);
}

/* ============================================================
   Bar-Meta (Avatar, Aufgaben-Nr, Fortschritts-Pille)
   Wird von gantt-chart-bars.js als HTML-Overlay über die SVG gelegt.
   ============================================================ */

.gc-bar-meta {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  pointer-events: none;
  /* 10px bewusst ausserhalb der Token-Skala (Overlay geometriegebunden an
     die Balkenhoehe, 11px riskiert Overflow) - Audit L-E3/#201,
     dokumentierte Ausnahme. */
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}
.gc-bar-meta .gc-bar-nr {
  background: color-mix(in srgb, var(--white) 80%, transparent);
  color: var(--ink);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semi);
}
.gc-bar-meta .gc-bar-avatar {
  width: 18px; height: 18px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--white);
  /* 9px bewusst ausserhalb der Token-Skala (Initialen im 18x18-Avatar-Kreis,
     11px passt dort nicht hinein) - Audit L-E3/#201, dokumentierte Ausnahme. */
  font-size: 9px;
  font-weight: var(--weight-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}
.gc-bar-meta .gc-bar-progress {
  background: var(--white);
  color: var(--ink);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semi);
  border: 1px solid var(--line);
}

/* ============================================================
   Hover-Tooltip (gantt-chart-bars.js)
   ============================================================ */

.gc-tooltip {
  position: fixed;
  /* Über alle Frappe-z-Indizes (1000) und über die Today-Line — sonst
     versteckt der sticky-Header oder current-highlight den Tooltip. */
  z-index: var(--z-toast);
  background: var(--ink);
  color: var(--white);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--font-sm);
  line-height: var(--leading-base);
  max-width: 340px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-fast) var(--ease-out);
}
.gc-tooltip.is-visible { opacity: 1; }
.gc-tooltip .gc-tip-title {
  font-weight: var(--weight-extrabold);
  margin-bottom: var(--space-1);
  font-size: var(--font-md);
}
.gc-tooltip .gc-tip-meta { color: color-mix(in srgb, var(--white) 75%, transparent); }
.gc-tooltip .gc-tip-row { display: flex; gap: var(--space-2); margin-top: 2px; }
.gc-tooltip .gc-tip-row .gc-tip-label {
  color: color-mix(in srgb, var(--white) 60%, transparent);
  min-width: 76px;
  text-transform: uppercase;
  /* 10px bewusst ausserhalb der Token-Skala (Uppercase-Minilabel im
     Hover-Tooltip) - Audit L-E3/#201, dokumentierte Ausnahme. */
  font-size: 10px;
  letter-spacing: 0.02em;
}

/* Add-Button am Ende des Charts: kommt seit #148 aus dem Shared
   inline-add (.idf-inline-add + .idf-inline-add-btn, gestrichelte
   Vollbreite wie unter den Listen) — kein eigener .gc-add-wrap-Style. */

/* ============================================================
   Responsive (kleine Bildschirme: Header-Strip wrappt)
   ============================================================ */

@media (max-width: 900px) {
  .gc-bar { padding: var(--space-2) var(--space-3); }
  .gc-zoom button { min-width: 44px; padding: 4px var(--space-1); font-size: var(--font-xs); }
}