/* ═══════════════════════════════════════════════════════════════════════════════
 * DURCHFÜHRUNGEN (Phase 8a) — Namespace `.mx-`.
 * Ausschließlich Tokens aus design-system.css. Keine Hex-Farben, keine rohen px
 * für Abstände/Schriftgrößen. Filter, Tabelle und Prozesskette bringen ihre eigene
 * Optik mit (VIFilters/VITable/VIUI) — hier steht nur, was diese Seite ausmacht.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Liste ─────────────────────────────────────────────────────────────────── */
/* „Nächste Aktion" ist die operativ wichtigste Spalte — sie trägt Gewicht. */
.mx-next { font-weight: 600; color: var(--color-text); }

/* ── Detail ────────────────────────────────────────────────────────────────── */
.mx-detail { display: flex; flex-direction: column; gap: var(--space-5); }

.mx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.mx-eyebrow { font-size: var(--text-xs); text-transform: none; color: var(--color-text-muted); }
.mx-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; margin: 0; }
.mx-cycle { color: var(--color-text-muted); font-size: var(--text-sm); }
.mx-primary { flex-shrink: 0; }

/* ── DOPPELSTATUS ──────────────────────────────────────────────────────────────
   Der fachliche Kern der Seite: zwei gleichrangige, sichtbar GETRENNTE Kästen.
   Die Trennung ist bewusst hart (eigener Rahmen je Kasten, Lücke dazwischen) —
   Durchführung und Begleitvorgang dürfen optisch nie wie ein Status wirken. */
.mx-dual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

.mx-chain { padding: var(--space-2) 0; }

/* ── Faktenblöcke ──────────────────────────────────────────────────────────── */
.mx-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3) var(--space-5); }
.mx-fact { display: flex; flex-direction: column; gap: var(--space-1); }
.mx-fact-l { font-size: var(--text-xs); color: var(--color-text-muted); }
.mx-fact-v { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

.mx-block {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-4); background: var(--color-surface);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.mx-h2 { font-size: var(--text-base); font-weight: 600; margin: 0; }
.mx-note { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0; }

.mx-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mx-actions .form-input { max-width: 180px; }

/* ── Tablet: Doppelstatus bleibt nebeneinander, Fakten verdichten ───────────── */
@media (max-width: 1100px) {
  .mx-facts { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* ── Mobil ─────────────────────────────────────────────────────────────────────
   Untereinander statt nebeneinander — die Trennung der beiden Statuswelten bleibt
   durch die eigenen Rahmen erhalten. Primäraktion volle Breite (Daumenbedienung). */
@media (max-width: 720px) {
  .mx-dual { grid-template-columns: 1fr; }
  .mx-head { flex-direction: column; align-items: stretch; }
  .mx-primary, .mx-primary .btn { width: 100%; }
  .mx-actions .form-input { max-width: none; flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * PHASE 8b — gemeinsame Bausteine der drei Betriebsseiten
 * (Wiederkehrende Leistungen · Durchführungen · Mängel). Namespace bleibt `.mx-`,
 * seitenspezifisches trägt `.ms-` bzw. `.md-`.
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Formulare in Dialogen ──────────────────────────────────────────────────── */
.mx-form { display: flex; flex-direction: column; gap: var(--space-4); }
.mx-formctx { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.mx-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3) var(--space-4); }
.mx-form-actions { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }
.mx-check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.mx-inline { display: inline-flex; flex-direction: column; gap: var(--space-1); }
.mx-h3 { font-size: var(--text-sm); font-weight: 600; margin: 0; }
.mx-blockhead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.mx-wait { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }

/* Mängel in der Erfassung — eine Zeile je Feststellung, nicht ein Freitextfeld. */
.mx-defsec { border-top: 1px solid var(--color-border); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.mx-drow { display: grid; grid-template-columns: 2fr 1fr 1fr auto auto; gap: var(--space-2); align-items: center; }

/* ── Mängelliste im Durchführungsdetail ────────────────────────────────────── */
.mx-deflist { display: flex; flex-direction: column; gap: var(--space-2); }
.mx-defrow {
  display: grid; grid-template-columns: 110px 130px 110px 120px 1fr auto;
  gap: var(--space-3); align-items: center; width: 100%; text-align: left;
  padding: var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer;
  font: inherit; color: inherit;
}
.mx-defrow:hover { border-color: var(--color-primary); }
.mx-defnr { font-weight: 600; font-variant-numeric: tabular-nums; }
.mx-deffrist { font-variant-numeric: tabular-nums; }
.mx-deftext { color: var(--color-text-muted); }

/* ── Leistungsdetail: Fristeinstellungen und Zyklen ─────────────────────────── */
.ms-interval, .ms-days { display: flex; align-items: center; gap: var(--space-2); }
.ms-days span { font-size: var(--text-sm); color: var(--color-text-muted); }
.ms-days .form-input, .ms-interval .form-input { max-width: 120px; }
.ms-wide { grid-column: 1 / -1; }

.ms-cyclist, .ms-conlist { display: flex; flex-direction: column; gap: var(--space-2); }
.ms-cyhead, .ms-cyrow {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.2fr .8fr 1.4fr 1.2fr;
  gap: var(--space-3); align-items: center; text-align: left;
}
.ms-cyhead { font-size: var(--text-xs); color: var(--color-text-muted); padding: 0 var(--space-3); }
.ms-cyrow {
  width: 100%; padding: var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface); cursor: pointer; font: inherit; color: inherit;
}
.ms-cyrow:hover { border-color: var(--color-primary); }
.ms-conrow {
  display: grid; grid-template-columns: 1fr 1fr 1.2fr .8fr; gap: var(--space-3);
  padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md);
}

/* ── Mangeldetail: Herkunftskette ───────────────────────────────────────────── */
.md-chainctx { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-sm); }
.md-sep { color: var(--color-text-muted); }
.md-here { font-weight: 600; }
.md-link { background: none; border: none; padding: 0; font: inherit; color: var(--color-primary); cursor: pointer; text-decoration: underline; }
.md-link:hover { text-decoration: none; }
.vi-tbl-row.is-hazard .vi-tbl-td:first-child { box-shadow: inset 3px 0 0 var(--color-danger, currentColor); }

/* ── Tablet ────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ms-cyhead { display: none; }
  .ms-cyrow { grid-template-columns: 1fr 1fr 1.2fr 1.2fr; }
  .ms-cyrow > span:nth-child(5), .ms-cyrow > span:nth-child(6) { display: none; }
  .mx-defrow { grid-template-columns: 110px 130px 1fr auto; }
  .mx-defrow > span:nth-child(3), .mx-defrow > span:nth-child(4) { display: none; }
}

/* ── Mobil: alles untereinander, Bedienelemente in voller Breite ────────────── */
@media (max-width: 720px) {
  .mx-form-grid { grid-template-columns: 1fr; }
  .mx-drow { grid-template-columns: 1fr; }
  .mx-form-actions { flex-direction: column-reverse; }
  .mx-form-actions .btn { width: 100%; }
  .mx-defrow, .ms-cyrow, .ms-conrow { grid-template-columns: 1fr; gap: var(--space-1); }
  .mx-defrow > span:nth-child(3), .mx-defrow > span:nth-child(4) { display: block; }
  .ms-cyrow > span:nth-child(5), .ms-cyrow > span:nth-child(6) { display: block; }
  .ms-days .form-input, .ms-interval .form-input { max-width: none; flex: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * PHASE 8c — Begleitvorgang-Kontext im Vorgang (`.mcx3-`).
 * Drei Zeilen untereinander, gleiche Beschriftungsspalte: der Leser sieht auf einen
 * Blick, dass Leistung, Durchführung und Vorgang DREI Dinge sind.
 * ═══════════════════════════════════════════════════════════════════════════════ */
.mcx3 {
  display: flex; flex-direction: column; gap: var(--space-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4); background: var(--color-surface);
}
.mcx3-row { display: grid; grid-template-columns: 190px 1fr auto; gap: var(--space-3); align-items: center; }
.mcx3-l { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.mcx3-v { font-size: var(--text-sm); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mcx3-a { display: flex; align-items: center; gap: var(--space-2); }
.mcx3-note { font-size: var(--text-xs); }
.mcx3-wait { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }

@media (max-width: 900px) {
  .mcx3-row { grid-template-columns: 1fr; gap: var(--space-1); }
  .mcx3-a { justify-content: flex-start; }
  .mcx3-note { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
 * PHASE 8d — Vertragsdetail (`.vk-`).
 * Sechs Reiter statt einer Langseite; SOLL/PLAN/IST als drei getrennte Kästen,
 * damit „Kosten" nicht drei Bedeutungen in einer Zahl vermischt.
 * ═══════════════════════════════════════════════════════════════════════════════ */
/* Tableiste: kanonisches Tab-System (.vi-tabs/.vi-tab, ui-standard.css §3) —
   keine eigene Tab-Optik, kein eigener Zähler-Stil. */
.vk-pane { display: flex; flex-direction: column; gap: var(--space-4); }

/* Einfache Beziehungstabellen im Detail (Leistungen · Objekte · Rechnungen · Dokumente) */
/* Aktionszeile über der Vertragsliste: EINE Primäraktion, kein Rahmen, kein Schatten —
   die Filterkarte bleibt frei von Aktionen (CLAUDE.md §Listenseiten). */
.vk-actbar {
  display: flex; justify-content: flex-end;
  /* Eigener Streifen mit echtem Abstand — ohne ihn las sich der Knopf wie ein
     weiteres Feld der Filterleiste darüber. */
  margin: var(--space-3) 0 var(--space-2);
}

.vk-tbl { display: flex; flex-direction: column; gap: var(--space-2); }
.vk-th, .vk-tr {
  display: grid; grid-template-columns: repeat(var(--vk-cols, 6), minmax(0, 1fr));
  gap: var(--space-3); align-items: center; text-align: left;
}
.vk-th { font-size: var(--text-xs); color: var(--color-text-muted); padding: 0 var(--space-3); }
.vk-tr {
  width: 100%; padding: var(--space-3); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface); font: inherit; color: inherit;
  font-size: var(--text-sm); cursor: pointer;
}
.vk-tr:hover { border-color: var(--color-primary); }
.vk-tr-static { cursor: default; }
.vk-tr-static:hover { border-color: var(--color-border); }

/* SOLL · PLAN · IST — drei gleichrangige, sichtbar getrennte Kästen. */
/* Karten-Umbau 05.09.2026: Kennzahlen des Vertrags stehen als kompakte Zeile
   (VIComponents.metrics), darunter die Karten. Die frühere Drei-Kachel-Wand
   .vk-spi bleibt nur noch der Rückfall ohne Bausteinschicht (externes Portal). */
.vk-kosten { margin-top: var(--space-4); }
.vk-spi { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.vk-spi-box {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-4); background: var(--color-surface);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.vk-spi-l { font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; color: var(--color-text-muted); }
.vk-spi-v { font-size: var(--text-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.vk-spi-h { font-size: var(--text-xs); color: var(--color-text-muted); }

@media (max-width: 1100px) {
  .vk-th { display: none; }
  .vk-tr { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .vk-spi { grid-template-columns: 1fr; }
  .vk-tr { grid-template-columns: 1fr; gap: var(--space-1); }
}

.ms-tr {
  display: grid;
  grid-template-columns: minmax(220px, 2.4fr) minmax(104px, 0.9fr) minmax(108px, 0.8fr) minmax(120px, 1fr) minmax(0, 0.8fr);
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--gray-200);
  padding: var(--space-2) var(--space-2);
  min-height: 44px;
  font: inherit;
  color: var(--gray-900);
  cursor: pointer;
}
.ms-tree-rows > .ms-tr:first-child { border-top: 0; }
.ms-tr:hover { background: var(--gray-100); }
.ms-tr:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Mobil: keine gequetschte Desktopzeile, sondern eine Karte (§45/§48). */
@media (max-width: 720px) {
  .ms-tr {
    grid-template-columns: 1fr auto;
    row-gap: var(--space-1);
    padding: var(--space-2);
    min-height: 56px;
  }
}

/* ── AP 2.3: Änderungsprotokoll einer anlagenlosen Leistung ────────────────────
   Die Anlagenakte hat ihres; eine Leistung ohne Anlage hatte keinen Ort, an dem
   ihre Fristenspur sichtbar wird. Ruhige Liste, keine Tabelle: gelesen wird sie
   selten und dann von oben nach unten. */
.mx-audit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mx-audit-i {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 0; border-top: 1px solid var(--gray-200);
}
.mx-audit-i:first-child { border-top: 0; }
.mx-audit-w { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--gray-900); flex: none; }
.mx-audit-d { flex: 1 1 20rem; min-width: 0; font-size: var(--text-sm); color: var(--gray-700); overflow-wrap: anywhere; }
.mx-audit-m { margin-left: auto; font-size: var(--text-xs); color: var(--gray-500); white-space: nowrap; flex: none; }


/* ── UX-Phase 6 §17/§21: Durchführung als A4-Seite ───────────────────────────
   Kopf (`VIComponents.workflowHead`), Prozess (`VIComponents.stepper`) und
   Faktenraster (`VIComponents.infoGrid`) kommen aus der Bausteinschicht. Hier
   bleibt nur, was diese Seite fachlich mitbringt. Die abgelösten Klassen
   (.mx-head/.mx-eyebrow/.mx-title/.mx-cycle/.mx-primary/.mx-dual*/.mx-fact*)
   sind aus dem JS verschwunden; ihr totes CSS räumt Phase 9. */
.mx-form-sp { flex: 1 1 auto; }
.mx-wait { color: var(--color-warning-ink); font-size: var(--text-xs); }
.mx-chain { margin: var(--space-3) 0 var(--space-4); }