/* ═══════════════════════════════════════════════════════════════════════════
   ViCORE — Geführte Workflows (.aaw-*) — public/anlagen-workflow.js
   ───────────────────────────────────────────────────────────────────────────
   Cutover Gebäudebetrieb (04.09.2026): Diese Regeln standen bis dahin in
   public/anlagenakte.css (Alt-Akte, entfernt). Sie gehören zu VIAnlagenWorkflow
   (Durchführung erfassen, Vorbereiten, Mangel, Protokoll-Schnellweg) und wurden
   unverändert hierher verschoben. .aaw-req und .aaw-fielderr kommen zentral aus
   css/design-system.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   GEFÜHRTE WORKFLOWS (.aaw-*) — eigene Ebene an <body>, kein Modal über Modal.
   28.08.2026: ZENTRIERTES POP-UP statt rechter Seitenleiste (Nutzerentscheidung):
   abgedunkelter Hintergrund, Maximalbreite, eigener Scrollbereich im Körper,
   Kopf mit Titel + X, Fuß mit Abbrechen/Speichern — gleiche Optik-Token wie
   VIDialog (radius-xl, shadow-xl, max-height). Der Scrim ist eine reine Fläche
   OHNE Klick-Handler (globale Modal-Regel: Backdrop schließt nie).
   ═══════════════════════════════════════════════════════════════════════════ */
#aaw-layer { position: fixed; inset: 0; z-index: 7000; display: none; }
#aaw-layer.is-open { display: flex; align-items: center; justify-content: center; padding: var(--space-5) var(--space-4); }
body.aaw-open { overflow: hidden; }
.aaw-scrim { position: absolute; inset: 0; background: rgba(34, 32, 28, 0.45); }
.aaw {
  position: relative;
  width: 100%; max-width: 54rem;
  max-height: min(88vh, 920px);
  background: var(--color-surface);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.aaw-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-5); border-bottom: 1px solid var(--gray-300);
}
.aaw-head-tx { min-width: 0; }
.aaw-title { margin: 0; font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--color-forest); overflow-wrap: anywhere; }
.aaw-sub { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--gray-700); }
.aaw-x { background: none; border: 0; cursor: pointer; font-size: var(--text-lg); color: var(--gray-700); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.aaw-x:hover { background: var(--gray-100); }
.aaw-x:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.aaw-steps { display: flex; gap: var(--space-1); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--gray-300); overflow-x: auto; }
.aaw-step.is-active { color: var(--color-forest); font-weight: var(--fw-semibold); }
.aaw-step.is-active .aaw-step-n { background: var(--color-forest); color: var(--brand-text-on-primary); }
.aaw-step.is-done .aaw-step-n { background: var(--color-success-soft); color: var(--color-success-ink); }

.aaw-body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-5); }
.aaw-h { margin: 0 0 var(--space-3); font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--gray-900); }
.aaw-h2 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--gray-900); }
.aaw-ctx { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--gray-700); }
/* .aaw-req kommt jetzt zentral aus css/design-system.css (Markenfarbe statt Rot —
   ein Pflicht-Stern ist kein Fehler). Hier bewusst KEINE zweite Definition. */
.aaw-req-tag { font-size: var(--text-xs); color: var(--color-danger-ink); background: var(--color-danger-soft); padding: 0 var(--space-1); border-radius: var(--radius-sm); }

.aaw-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.aaw-wide { grid-column: 1 / -1; }
.aaw-pick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
/* `align-items: stretch`: ohne die Angabe zentriert der Browser die Kinder eines
   <button> (UA-Vorgabe) — die Zeile stünde mittig statt links, obwohl hier
   ausdrücklich `text-align: left` steht. Siehe `.vpp-item` (vi-party-pick.css),
   10.09.2026. */
.aaw-pick-i {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; text-align: left; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--gray-300); border-radius: var(--radius-md);
  padding: var(--space-3); font: inherit;
}
.aaw-pick-i:hover { border-color: var(--color-sage); background: var(--color-sage-soft); }
.aaw-pick-i:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.aaw-pick-i.is-sel { border-color: var(--color-forest); background: var(--color-sage-soft); }
.aaw-pick-t { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--gray-900); overflow-wrap: anywhere; }
.aaw-pick-m { font-size: var(--text-xs); color: var(--gray-700); overflow-wrap: anywhere; }

.aaw-checks, .aaw-chks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.aaw-check { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; font-size: var(--text-sm); color: var(--gray-900); }
.aaw-check input { margin-top: 3px; flex: 0 0 auto; }
.aaw-check-t { display: block; font-weight: var(--fw-medium); }
.aaw-check-m { display: block; font-size: var(--text-xs); color: var(--gray-700); }
.aaw-chk { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-sm); background: var(--gray-100); font-size: var(--text-sm); }
.aaw-chk.is-open { background: var(--color-warning-soft); }
.aaw-chk-i { flex: 0 0 1.25rem; text-align: center; font-weight: var(--fw-bold); color: var(--color-success-ink); }
.aaw-chk.is-open .aaw-chk-i { color: var(--color-warning-ink); }
.aaw-chk-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.aaw-chk-v { font-size: var(--text-xs); color: var(--gray-700); }
.aaw-slot-h { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--gray-900); margin-bottom: var(--space-2); display: flex; gap: var(--space-2); align-items: center; }

/* 28.08.2026: Turnus + Nächste Fälligkeit stehen im KERNBEREICH des Formulars (neben
   Datum/Firma) — die berechnete Folgefrist ist beim Erfassen unmittelbar im Blick,
   der Override bleibt eine klar gekennzeichnete Ausnahme („abweichend festlegen"). */
.aaw-fact { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--gray-900); padding: var(--space-2) 0; }
.aaw-nextdue { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); background: var(--color-info-soft); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.aaw-nextdue-l { font-size: var(--text-xs); color: var(--gray-700); }
.aaw-nextdue-v { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--gray-900); flex: 1 1 10rem; }
.aaw-nextdue-ov { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--gray-700); }
.aaw-nextdue-ov .form-input { width: auto; }

.aaw-sum { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.aaw-sum li { position: relative; padding-left: var(--space-5); font-size: var(--text-sm); color: var(--gray-900); overflow-wrap: anywhere; }
.aaw-sum li::before { content: '›'; position: absolute; left: var(--space-2); color: var(--color-sage); font-weight: var(--fw-bold); }
.aaw-sum li.is-ok::before { content: '✓'; color: var(--color-success-ink); }

/* Feld-Validierung (28.08.2026): Pflichtfeldfehler stehen AM Feld, nicht nur als Toast. */
/* .aaw-fielderr ebenfalls zentral (css/design-system.css) — eine Feldfehler-Optik. */
.perf-ctl.is-invalid { outline: 2px solid var(--color-danger-ink); outline-offset: 2px; border-radius: var(--radius-sm); }

/* AP 1.4 — Einforderungskette. Zeilen mit Datumsspalte, keine Karten: man liest
   sie wie ein Protokoll von oben nach unten. Die Stufe färbt nur den schmalen
   Balken links, nicht die Fläche — eine Eskalation ist ein Zustand, kein Alarm. */
.md-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.md-item { display: grid; gap: 0 var(--space-3); padding: var(--space-1) 0 var(--space-1) var(--space-3);
  border-left: 3px solid var(--gray-300); font-size: var(--text-sm); }
.md-item.is-warn { border-left-color: var(--color-warning-ink); }
.md-item.is-crit { border-left-color: var(--color-danger-ink); }
.md-when { font-weight: var(--fw-medium); color: var(--gray-900); font-variant-numeric: tabular-nums; }
.md-who { color: var(--gray-700); font-size: var(--text-xs); }
.md-what { color: var(--gray-900); overflow-wrap: anywhere; }
.md-by { color: var(--gray-500); font-size: var(--text-xs); }
.md-empty { font-size: var(--text-sm); color: var(--gray-500); margin: 0; }
.md-vor { margin-bottom: var(--space-4); }
.md-vor-h { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--gray-700); margin-bottom: var(--space-2); }
.md-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.md-form .md-wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .md-form { grid-template-columns: 1fr; } }

/* AP 1.2 — Protokoll-Schnellweg: bereits abgelegter Nachweis im Erfassen-Formular. */
.aaw-predoc { font-size: var(--text-sm); color: var(--gray-700); margin: 0 0 var(--space-2); }

/* AP 1.2 — Vorschlagsliste „Wozu gehört dieser Nachweis?".
   Zeilen, keine Karten (Leitsatz „Fläche und Hierarchie vor Rahmen"): der Rahmen
   liegt um die Liste, getrennt wird über Linien. Die Begründung steht MIT im
   Eintrag — ein Vorschlag ohne Begründung ist nicht bestätigungsfähig. */
.pv-facts { font-size: var(--text-sm); color: var(--gray-700); margin: 0 0 var(--space-3); overflow-wrap: anywhere; }
.pv-none, .pv-note { font-size: var(--text-sm); color: var(--gray-900); background: var(--color-info-soft); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); }
.pv-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--gray-300); border-radius: var(--radius-lg); overflow: hidden; }
.pv-list > li + li { border-top: 1px solid var(--gray-200); }
.pv-item { display: block; width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: var(--space-3) var(--space-4); font: inherit; color: inherit; border-left: 3px solid transparent; }
.pv-item:hover { background: var(--gray-50); }
.pv-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.pv-item.is-sel { background: var(--color-sage-soft); border-left-color: var(--brand-primary); }
.pv-anl { display: block; font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--gray-900); }
.pv-obj { display: block; font-size: var(--text-sm); color: var(--gray-700); }
.pv-duty { display: block; font-size: var(--text-sm); color: var(--gray-900); margin-top: var(--space-1); }
.pv-meta { display: block; font-size: var(--text-xs); color: var(--gray-500); }
.pv-meta.is-over { color: var(--color-danger-ink); }
.pv-why { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.pv-why li { font-size: var(--text-xs); color: var(--gray-700); background: var(--gray-100); border-radius: var(--radius-sm); padding: 0 var(--space-2); }
.pv-why li.is-warn { color: var(--color-warning-ink); background: var(--color-warning-soft); }

.aaw-loading, .aaw-progress { padding: var(--space-6); text-align: center; color: var(--gray-700); font-size: var(--text-sm); }
.aaw-err { background: var(--color-danger-soft); border-radius: var(--radius-md); padding: var(--space-4); color: var(--color-danger-ink); font-size: var(--text-sm); }
.aaw-err-d { font-size: var(--text-xs); }
.aaw-warn { background: var(--color-warning-soft); border-radius: var(--radius-md); padding: var(--space-3); color: var(--color-warning-ink); font-size: var(--text-sm); margin-top: var(--space-4); }
.aaw-warn ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); }
.aaw-done { display: flex; flex-direction: column; gap: var(--space-3); }

.aaw-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-top: 1px solid var(--gray-300); background: var(--color-surface);
  flex-wrap: wrap;
}
.aaw-foot-r { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-left: auto; }
.aaw-foot button { white-space: normal; overflow-wrap: anywhere; }


/* ═══════════════════════════════════════════════════════════════════════════
   TABLET  (768–1199) — zentriertes Modal mit Randabstand, kein Drawer
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .aaw { max-width: min(54rem, calc(100vw - 2 * var(--space-4))); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBIL  (≤767) — Workflow als Vollbild
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Telefon: das Modal wird zum Bottom-Sheet in voller Breite (wie VIDialog ≤640px) —
     KEIN Rückfall in eine Desktop-Seitenleiste. Kopf und Fuß bleiben erreichbar,
     der Körper scrollt eigenständig. */
  #aaw-layer.is-open { padding: 0; align-items: flex-end; }
  .aaw { max-width: none; max-height: 94vh; max-height: 94dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
  .aaw-form { grid-template-columns: minmax(0, 1fr); }
  .aaw-head, .aaw-body, .aaw-foot, .aaw-steps { padding-left: var(--space-4); padding-right: var(--space-4); }
  .aaw-foot { flex-direction: column-reverse; align-items: stretch; }
  .aaw-foot-r { margin-left: 0; }
  .aaw-foot button { width: 100%; }
}

@media print {
  #aaw-layer { display: none !important; }
}