/**
 * diagramme.css — Modul-Styles Diagramme (Liste + Editor).
 *
 * Generische Listen-Patterns kommen aus _shared/functions/list-view/grid-css/, die Inline-
 * Edit-Affordance aus _shared/functions/inline-editing/. Dieses File enthält nur
 * Modul-Spezifisches: Spaltenbreiten der Liste, Inline-Edit-Zell-Layout
 * und das Editor-Layout (Stammdaten-Kopf + Split-View).
 *
 * Naming:
 *  .dl-* = Diagramm-Liste  (Übersicht in index.php)
 *  .de-* = Diagramm-Editor (diagramme.php)
 */

/* ================================================================ */
/* Liste — Page-Layout + Grid                                        */
/* ================================================================ */

.dl-grid {
  /* Titel · Datum · Typ · Verantwortlich · Akteure · Unternehmen · Löschen. */
  display: grid;
  /* Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults. */
  grid-template-columns: var(--dl-cols,
    minmax(200px, 1.5fr) 150px 172px 150px minmax(130px, 1fr) 150px 44px);
  align-items: stretch;
  gap: 0;
}

/* Schmale Löschen-Spalte zentrieren, kein Padding. */
.dl-thead .dl-cell-delete {
  justify-content: center;
  padding: 0;
}
.dl-rows .dl-row .dl-grid > div.dl-cell-delete {
  padding: 0 !important;
  justify-content: center;
}

/* Akteure-Spalte ist nicht editierbar — nur Ellipsis bei Überlauf. */
.dl-rows .dl-row .dl-cell-akteure {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--mid, #555);
}

.dl-untitled { font-style: italic; color: var(--mid, #555); }
.dl-empty    { color: var(--soft, #ae9586); }

/* Zeile: doppelklickbar -> Editor. */
.dl-rows .dl-row {
  cursor: pointer;
  border-bottom: 1px solid var(--line, #e5e5e5);
  transition: background 80ms ease;
}
/* Zeilen-Hover kommt aus dem Shared list-grid (.idf-list-row:hover,
   gleicher Wert) — keine Modul-Dublette mehr (UI-Audit 2026-06-10). */

/* ---- Inline-Edit-Zellen (Titel, Datum, Typ, Verantwortlich, Unternehmen).
   Pen-Affordance + is-editing-Skin liefert _shared/functions/inline-editing/. ---- */
.dl-rows .dl-row .dl-cell-titel .dl-titel-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  font-weight: 500;
}
.dl-rows .dl-row .dl-cell-titel .dl-titel-group.is-editing {
  flex: 1 1 auto;
  width: 100%;
}
.dl-rows .dl-row .dl-titel-text,
.dl-rows .dl-row .dl-cell-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-rows .dl-row .dl-cell-datum,
.dl-rows .dl-row .dl-cell-typ,
.dl-rows .dl-row .dl-cell-verant,
.dl-rows .dl-row .dl-cell-untern {
  color: var(--mid, #555);
}
.dl-rows .dl-row .dl-cell-datum .dl-cell-text { font-variant-numeric: tabular-nums; }
/* Editierbare Cell: klickbar, etwas Luft fürs Pen-Icon. */
.dl-rows .dl-row .dl-grid > div.dl-cell-datum:not(.is-editing),
.dl-rows .dl-row .dl-grid > div.dl-cell-typ:not(.is-editing),
.dl-rows .dl-row .dl-grid > div.dl-cell-verant:not(.is-editing),
.dl-rows .dl-row .dl-grid > div.dl-cell-untern:not(.is-editing) {
  cursor: pointer;
  gap: 6px;
}
.dl-rows .dl-row .dl-grid > div.dl-cell-datum.is-editing,
.dl-rows .dl-row .dl-grid > div.dl-cell-typ.is-editing,
.dl-rows .dl-row .dl-grid > div.dl-cell-verant.is-editing,
.dl-rows .dl-row .dl-grid > div.dl-cell-untern.is-editing {
  padding: 4px 6px;
}

/* Empty-State: kommt aus Shared blocks/empty-state (.idf-empty-state, H1/#198,
   $useEmptyState in index.php) - lokale .dl-empty-state-Kopie entfernt. */

@media (max-width: 1200px) {
  .dl-grid {
    grid-template-columns:
      minmax(170px, 1.5fr) 140px 162px 130px minmax(120px, 1fr) 130px 44px;
  }
  /* col-resize im Schmal-Layout inaktiv (Modul-Grid gewinnt hier): Griffe weg,
     Scroll-Modus neutralisieren, damit nichts verrutscht/ueberlaeuft. */
  .idf-colresize-layer { display: none; }
  .idf-colresize-scroll .idf-list-thead,
  .idf-colresize-scroll .idf-list-rows { width: auto; min-width: 0; }
}
@media (max-width: 960px) {
  /* Engere Sicht: Akteure-Spalte ausblenden. */
  .dl-grid {
    grid-template-columns:
      minmax(150px, 1.4fr) 130px 150px 130px 0 130px 40px;
  }
  .dl-cell-akteure { display: none !important; }
}

/* ================================================================ */
/* Editor — Breadcrumb-Titel im App-Header                           */
/* ================================================================ */

/* Breadcrumb kommt seit #194 aus dem Shared-Block blocks/app-breadcrumb
   ($useBreadcrumb, Klassen idf-breadcrumb-*). */

/* ================================================================ */
/* Editor — Page-Layout                                              */
/* ================================================================ */

main.de-main {
  display: flex;
  flex-direction: column;
  /* Bewusstes Canvas-Design: 80px = Header-Annahme. Mit Subnav + Footer
     kann die Summe 100vh uebersteigen (Footer rutscht unter den Fold) -
     in Kauf genommen; Alternative waere das Nexus-Flex-Muster
     (dashboard/views/nexus-graph.css). Audit L-E10/#201. */
  min-height: calc(100vh - 80px);
}

/* ---- Stammdaten-Kopf ---- */
.de-head {
  padding: 14px 32px 16px;
  background: var(--white, #fff);
  border-bottom: 1px solid var(--line, #e5e5e5);
}

/* Stammdaten-Felder fließen in so viele Spalten wie passen — Datum, Typ,
   Verantwortlich, Unternehmen, Akteure nebeneinander, Beschreibung voll.
   .idf-form skinnt die Inputs/Comboboxen, das Layout ist modul-eigen. */
.de-meta.idf-form {
  display: grid;
  grid-template-columns: 140px 190px minmax(160px, 1fr) minmax(160px, 1fr) minmax(200px, 1.6fr);
  gap: 10px 16px;
  align-items: end;
}
.de-meta.idf-form > .de-field-full { grid-column: 1 / -1; }

/* Label-Spans (auch in den <div class="de-field">-Wrappern) in
   Tabellenkopf-Optik — uppercase, 11 px, mid-grau. */
.de-meta.idf-form > label > span,
.de-meta.idf-form > .de-field > span {
  display: block;
  margin-bottom: 4px;
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--mid, #555);
}

.de-beschreibung {
  width: 100%;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--bg, #fafafa);
  font-family: inherit;
  font-size: var(--font-md);
  color: var(--ink, #111);
  resize: vertical;
}
.de-beschreibung:focus {
  outline: 2px solid var(--accent, #167ea0);
  outline-offset: -1px;
}

@media (max-width: 1100px) {
  .de-head { padding: 12px 14px 14px; }
}

/* ---- Split-View: Quelltext links, Vorschau rechts ---- */
/* Spaltenbreiten kommen aus --de-split-left/-right; der Zieh-Griff (JS)
   setzt --de-split-left als px-Wert. Die 1100px-Media-Query weiter unten
   setzt grid-template-columns direkt und sticht die Variablen aus. */
.de-split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--de-split-left, 1fr) 12px var(--de-split-right, 1fr);
  gap: 0;
  padding: 16px 32px 24px;
}

/* Zieh-Griff zwischen Quelltext und Vorschau — verschiebt die Pane-Breite. */
.de-split-handle {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  touch-action: none;
}
.de-split-handle::before {
  content: "";
  width: 2px;
  height: 40px;
  border-radius: 1px;
  background: var(--line, #e5e5e5);
  transition: background 120ms ease, height 120ms ease;
}
.de-split-handle:hover::before,
.de-split.is-resizing .de-split-handle::before {
  background: var(--primary, #c8134b);
  height: 64px;
}
/* Während des Ziehens keine Textauswahl, Resize-Cursor überall. */
.de-split.is-resizing { user-select: none; }
.de-split.is-resizing,
.de-split.is-resizing * { cursor: col-resize; }

.de-pane {
  display: flex;
  flex-direction: column;
  min-height: 360px;
  min-width: 0;
  border: 1px solid var(--line, #e5e5e5);
  border-radius: 8px;
  background: var(--white, #fff);
  overflow: hidden;
}

.de-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg, #fafafa);
  border-bottom: 1px solid var(--line, #e5e5e5);
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--mid, #555);
}
.de-pane-head i { margin-right: 4px; opacity: 0.7; }

/* Vorschau-Toolbar (Zoom + Export) rechts im Pane-Kopf. */
.de-preview-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}
.de-preview-tools i { margin-right: 0; }

/* Quelltext-Textarea — Monospace, füllt den Pane. */
.de-quelle {
  flex: 1;
  width: 100%;
  border: 0;
  outline: none;
  resize: none;
  padding: 12px 14px;
  background: var(--white, #fff);
  color: var(--ink, #111);
  /* Token-Mono-Stack (#199 H6): Windows rendert kuenftig Cascadia Code
     statt Consolas - akzeptierte Superset-Abweichung wie L4/toni-panel. */
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace);
  font-size: var(--font-sm);
  line-height: 1.55;
  tab-size: 2;
}
.de-quelle::placeholder { color: var(--soft, #ae9586); }

/* Vorschau-Fläche */
.de-canvas {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: auto;
  background: var(--bg, #fafafa);
}
.de-canvas-img {
  max-width: 100%;
  height: auto;
}

/* Graph-Modus: Pan/Zoom-Bühne. Das Vorschau-Bild liegt absolut und wird
   per CSS-Transform verschoben/gezoomt (ohne externe Library). */
.de-canvas.is-graph {
  padding: 0;
  overflow: hidden;
  cursor: grab;
}
.de-canvas.is-graph.is-panning { cursor: grabbing; }
.de-canvas.is-graph .de-canvas-img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  transform-origin: 0 0;
  user-select: none;
  -webkit-user-drag: none;
}
.de-canvas-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--soft, #ae9586);
  font-size: var(--font-md);
  text-align: center;
}
.de-canvas-hint i { font-size: 26px; opacity: 0.5; }

/* Fehler-Anzeige (Kroki-Syntaxmeldung) */
.de-canvas-error {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--primary, #c8134b);
  font-size: var(--font-sm);
}
.de-canvas-error i { font-size: 20px; }
.de-canvas-error strong { color: var(--ink, #111); font-weight: 700; }
.de-canvas-error pre {
  margin: 0;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--primary, #c8134b) 8%, var(--white, #fff));
  border-radius: 6px;
  color: var(--ink, #111);
  /* Token-Mono-Stack (#199 H6), gleiche akzeptierte Windows-Abweichung
     wie .de-quelle (Cascadia Code statt Consolas). */
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace);
  font-size: var(--font-xs2);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 1100px) {
  .de-split { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .de-split-handle { display: none; }
}