/* AV-Board — Stile des Moduls js/vorgang.js (Stufe 2, 24.08.2026).
   Gemeinsame Tokens/Basis bleiben in style.css; hier nur, was dieses Modul braucht.
   Farben ausschließlich über die Tokens (--primary, --st-*, --text-*), damit
   der Dark-Mode aus /shared/dark-mode.css bzw. style.css mitläuft. */

/* ── Kopf: Kennung, Betreff, Fakten in einer Zeile ───────────────────────── */

/* Eigener Name — .vorgang-kopf gehört in style.css der Vorgangskarte der Kundenseite. */
.anfrage-kopf { display: block; }
.anfrage-titel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.anfrage-titel h1 { margin: 0; }
.anfrage-kopf .unterzeile { margin-top: 3px; max-width: 90ch; }

.vorgang-fakten {
    display: flex; flex-wrap: wrap; gap: 6px 22px;
    margin-top: 9px; font-size: .84rem;
}
.fakt { display: inline-flex; gap: 7px; align-items: baseline; }
.fakt-label {
    font-family: var(--font-display); font-weight: 600; font-size: .68rem;
    text-transform: uppercase; letter-spacing: .05em; color: var(--primary);
}
.fakt-wert { font-variant-numeric: tabular-nums; color: var(--text); }
.fakt-wert a { color: var(--primary); text-decoration: none; font-weight: 600; }
.fakt-wert a:hover { text-decoration: underline; }
.fakt.subtil { font-size: .76rem; }

/* Kennzahlen zählen nur aktive Blätter — der Fuß sagt, was fehlt. */
.kpi-fuss { font-size: .76rem; color: var(--text-subtle); margin: 2px 0 14px; }

/* ── Zentrierte Spalten (Vertrag §G) ─────────────────────────────────────── */

th.mitte { text-align: center; }
td.mitte { font-variant-numeric: tabular-nums; }

/* ── Zeichnungsliste ─────────────────────────────────────────────────────── */

.vorgang-seite table.zeichnungen td { vertical-align: middle; }
.vorgang-seite table.zeichnungen tbody tr { cursor: pointer; }

/* Verifiziert von wem und wann — unter dem Badge, nicht daneben. */
.stand-wer {
    display: block; margin-top: 3px;
    font-family: var(--font-mono); font-size: .68rem; color: var(--text-subtle);
    white-space: nowrap;
}

/* Deaktiviertes Blatt: grau, aber lesbar — es bleibt Teil der Anfrage. */
.vorgang-seite tr.deaktiviert td { color: var(--text-subtle); background: var(--st-neutral-soft); }
.vorgang-seite tr.deaktiviert td.mono,
.vorgang-seite tr.deaktiviert .punkt { opacity: .55; }
.vorgang-seite tr.deaktiviert .badge.gelb { opacity: .6; }
/* Das Badge muss sich von der grauen Zeile abheben. */
.vorgang-seite tr.deaktiviert .badge:not(.gelb) { background: var(--surface); border: 1px solid var(--border); }
.vorgang-seite tbody tr.deaktiviert:hover td { background: var(--st-neutral-soft); }

/* ── Knöpfe in Tabellenzeilen ────────────────────────────────────────────── */

.vorgang-seite .btn.klein { padding: 3px 10px; font-size: .74rem; border-radius: 6px; white-space: nowrap; }
.vorgang-seite .btn.leise { color: var(--text-muted); }
.vorgang-seite .btn.leise:hover { color: var(--text); }
.vorgang-seite .btn[disabled],
.vorgang-seite .x-knopf[disabled] { opacity: .45; cursor: not-allowed; }
.vorgang-seite .btn[disabled]:hover { background: var(--surface); }

/* Abgleich: Knöpfe rechts, bei Widerspruch zwei Anker nebeneinander. */
.abgleich-aktion {
    display: flex; gap: 6px; align-items: center; justify-content: flex-end;
    flex-wrap: nowrap; white-space: normal;
}
.abgleich-knoepfe { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.x-knopf {
    background: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
    width: 26px; height: 26px; line-height: 1; font-size: 1rem; padding: 0;
    color: var(--text-muted); cursor: pointer; flex-shrink: 0;
    transition: color var(--motion), border-color var(--motion);
}
.x-knopf:not([disabled]):hover { color: var(--st-crit); border-color: var(--st-crit); }
.block-intro .badge { vertical-align: middle; margin-left: 4px; }

/* Deaktivieren: eine Zeile unter dem Blatt statt Dialog. */
.vorgang-seite tr.deakt-zeile td {
    padding: 8px 12px 10px; background: var(--st-work-soft);
    box-shadow: inset 3px 0 0 var(--st-work); cursor: default;
}
.vorgang-seite tbody tr.deakt-zeile:hover td { background: var(--st-work-soft); }
.deakt-formular { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.deakt-label {
    font-family: var(--font-display); font-weight: 600; font-size: .8rem;
    color: var(--st-work); margin-right: 4px; white-space: nowrap;
}
.deakt-hinweis { font-size: .74rem; color: var(--text-muted); }
.deakt-formular select,
.deakt-formular input {
    font-family: var(--font-body); font-size: .78rem; padding: 4px 7px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--text);
}
.deakt-formular input { width: 30ch; }
.deakt-formular select:focus,
.deakt-formular input:focus { outline: none; border-color: var(--primary); }

/* ── Schmale Bildschirme ─────────────────────────────────────────────────── */

@media (max-width: 1180px) {
    .vorgang-fakten { gap: 4px 14px; }
    .deakt-formular input { width: 22ch; }
}

/* Akten-Links im Abgleich (Prüferbefund: im Dark-Mode unlesbar) — Linkfarbe erzwingen. */
.klein.subtil a, .abgleich a { color: var(--primary, #0080C9); } /* abgleich-dunkel-link */

/* Bearbeitungsstand eines Blattes in der Übersicht (AL 27.08.2026): Die Zahl
   im Badge, der Balken daneben — auf einen Blick, ohne das Blatt zu öffnen. */
.blatt-balken {
    display: inline-block; width: 46px; height: 5px; margin-left: 6px;
    border-radius: 3px; background: var(--border); vertical-align: middle; overflow: hidden;
}
.blatt-balken > span { display: block; height: 100%; background: var(--primary, #0080C9); }