/* App-Komponenten — Single-Page-Workspace (Sidebar + Tabs + Modal) */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* hidden-Attribut gewinnt IMMER — auch gegen Klassen mit eigener display-
   Regel (.btn { display:inline-flex } etc.). Ohne diese Regel überschreibt
   jedes Autoren-display das UA-Stylesheet-[hidden] und „versteckte" Elemente
   bleiben sichtbar (Review-Fund 4: Büro-Buttons beim Operateur, 2026-06-12). */
[hidden] { display: none !important; }

html, body {
    height: 100%;
    background: var(--flaeche);
    color: var(--text);
    font-family: var(--schriftart-ui);
    font-weight: var(--gewicht-normal);
    font-size: var(--schrift-sm);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}


/* Formular-Grundton (Schrift/Farbe erben) und der ausgeblendete Passwort-
   Schlüssel kommen seit 15.08.2026 aus dem Suite-Kit (forms.css, Abschnitt
   „Formular-Grundton + Passwort-Schlüssel — SUITE-Beschluss"). Hier standen
   Kopien davon, byte-identisch in drei Modulen — der Kit-Audit hat sie
   eingesammelt. Feld-Optik, Spinner, Kontakte-Symbol: HAUS-Baustein „feld". */

/* Der gezeichnete Menü-Pfeil für <select> ist am 05.08.2026 mit V-4c/2
   ersatzlos entfallen. Zwei Gründe: Er traf hier ohnehin KEIN sichtbares Feld
   (`.select` schlug ihn als Klasse und setzte das Bild zurück, die Felder ohne
   Klasse versteckt das eigene Aufklapp-Menü), und sein Ton steckte IN der
   Bild-Adresse — er war damit selbst keine Rolle. Die Auswahl trägt jetzt den
   Chevron aus dem Haus-Baustein. */

a { color: inherit; text-decoration: none; }

/* Buttons: zentral im Suite UI-Kit (css/ui-kit.css, per Sync verteilt). */

/* Bericht-Modal */

.bericht-intro {
    color: var(--text-gedaempft);
    font-size: var(--schrift-sm);
    line-height: 1.5;
    margin-bottom: var(--abstand-12);
}

.bericht-section-group {
    margin-bottom: var(--abstand-12);
    /* Layout (Stapel + Zeilen-Padding + Hover) kommt aus dem Kit (.checkbox-list). */
}

.bericht-group-label {
    font-size: var(--schrift-2xs);
    font-weight: var(--gewicht-mittel);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
    color: var(--text-leise);
    margin-bottom: 8px;
}

/* Checkboxen kommen jetzt aus dem Kit (.checkbox + .checkbox-box). */

/* Buttons (destructive/icon): siehe Suite UI-Kit (css/ui-kit.css). */

/* === APP-LAYOUT === */

body.app-page {
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: 340px 1fr;
    transition: grid-template-columns 0.2s ease;
}

body.app-page.sidebar-collapsed {
    grid-template-columns: 48px 1fr;
}

/* === SIDEBAR === */

.sidebar {
    grid-column: 1;
    background: var(--flaeche-erhaben);
    border-right: 1px solid var(--linie-tief);
    position: relative;
    overflow: hidden;
    display: flex;
}

.sidebar-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    transition: opacity 0.2s ease;
}

body.sidebar-collapsed .sidebar-inner {
    opacity: 0;
    pointer-events: none;
}

/* Sektion-Überschrift als Auf-/Zuklapp-Toggle (Button, sieht aus wie das
   Label) — spart Listen-Platz auf dem Fahrzeug-Tablet. Gilt für TOOLS
   und FILTER. */
button.section-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--abstand-8);          /* +/- links, dann Text */
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 18px var(--abstand-16) var(--abstand-14);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}
button.section-toggle:hover { color: var(--text-gedaempft); }
button.section-toggle:hover .section-chevron { color: var(--text); }
/* +/- statt Pfeil (wie die Baum-Toggles), links vor dem Text */
.section-chevron {
    display: inline-block;
    width: 1em;
    text-align: center;
    font-family: var(--schriftart-mono);
    font-size: var(--schrift-sm);
    color: var(--text-gedaempft);   /* sichtbar — nicht --text-leise */
}
.section-chevron::before { content: '\2212'; }            /* − = aufgeklappt */
.section-toggle.collapsed .section-chevron::before { content: '+'; }

/* Tools-Block (D-050): eigener einklappbarer Block GANZ OBEN — die drei
   Aktions-Knöpfe. (Der frühere Schwester-Block FILTER ist seit 16.08.2026
   aufgelöst; die Suche gehört jetzt zur Liste.) */
.sidebar-tools {
    display: flex;
    flex-direction: column;
}
#sidebar-tools-wrap {
    padding: 0 var(--abstand-16) 16px;
}
#sidebar-tools-wrap[hidden] { display: none; }
.sidebar-actions-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
/* System-Status (D-050): rechtsbündig im AUFNAHMEN-Listenkopf (Text links, Punkt
   rechts). Topbar-margin-right entfällt; margin-left:auto schiebt nach rechts. */
.sidebar-list-header .feed-status {
    margin-left: auto;
    margin-right: 0;
}
/* Die drei Werkzeug-Knöpfe (+ Neue Aufnahme · Bericht · Export) sind seit dem
   15.08.2026 der Kit-Knopf in der INSTRUMENTEN-Variante .btn.btn-instrument in
   Standardhöhe (34 px, bündig mit den Feldern darunter). ENTSCHIEDEN am Bild,
   nach drei Runden am selben Tag: Standard-Knopf („wir haben doch schon
   schöne Buttons") → Instrument (Cockpit-Typografie wie TOOLS/FILTER) → noch
   einmal Standard wegen der gefüllten Felder darunter → und da war es klar:
   „das geht gar nicht", zurück auf Instrument — endgültig. Der frühere
   Sonderling .sidebar-action-btn ist ersatzlos raus; die Variante wohnt im Kit
   (buttons.css) und ist optisch sein Nachfolger. Kit-Audit-Fund B4. */
/* `el.hidden = true` (Hybrid: Status wandert in die Karte) greift sonst NICHT —
   .feed-status setzt display:flex und überschreibt die UA-Regel [hidden]{display:none}.
   Höhere Spezifität stellt das Verbergen des Sidebar-Slots sicher. */
#feed-status[hidden] { display: none; }

/* FILTER — einklappbarer Block über der Liste, symmetrisch zum Tools-Block.
   Er kam am 16.08.2026 weg (D-081) und ist am 19.08. zurückgekehrt, aber mit
   anderem Inhalt: Suche + Sicht + Jahr statt Kunde/Bauvorhaben/Jahr. Die
   Optik der Felder kommt aus dem Kit (`.suche`, `.auswahl`) — hier steht nur,
   wo sie sitzen. Padding wie beim Tools-Block, damit beide Blöcke dieselbe
   Kante haben. */
.sidebar-filter {
    display: flex;
    flex-direction: column;
}
#sidebar-filter-wrap {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 0 var(--abstand-16) var(--abstand-12);
}
#sidebar-filter-wrap[hidden] { display: none; }
#sidebar-filter-wrap .suche { width: 100%; }

/* Liste-Header */

.sidebar-list-header {
    padding: 22px var(--abstand-16) var(--abstand-14);
    display: flex;
    align-items: baseline;
    gap: var(--abstand-6);
}

.sidebar-section-label {
    font-size: var(--schrift-2xs);
    font-weight: var(--gewicht-mittel);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
    color: var(--text-leise);
}

.sidebar-count {
    font-family: var(--schriftart-mono);
    font-size: var(--schrift-2xs);
    color: var(--text-leise);
}

/* Aufnahmen-Liste — luftige Karten (größer, runder) */

.sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--abstand-16) var(--abstand-16);
    display: flex;
    flex-direction: column;
    gap: var(--abstand-12);
}

.aufnahme-card {
    background: var(--karte);
    border: 1px solid var(--linie);
    border-left: 2px solid transparent;
    border-radius: 0;
    padding: var(--abstand-14) 16px;
    cursor: pointer;
    transition: all 0.18s ease;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.aufnahme-card:hover {
    background: var(--karte-aktiv);
    border-color: var(--linie-stark);
}

.aufnahme-card.selected {
    background: var(--flaeche);
    border-color: var(--linie);
    border-left-color: var(--akzent);
}

.aufnahme-card .ac-row1 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--abstand-8);
    margin-bottom: 0;
}

/* Linke Spalte: Titel + Unterzeile gestapelt. Schrumpft als Block,
   Datestack bleibt fest rechts → beide Textzeilen kürzen mit … INNERHALB
   dieser Spalte und laufen nie unter Datum/Uhrzeit. */
.aufnahme-card .ac-main {
    flex: 1;
    min-width: 0;
}

/* Linke Spalte Oben: Kunde — Hauptidentifier der Karte, medium weight
   + primary Farbe. Live-Punkt sitzt direkt davor. Truncation für lange
   Kundennamen. */
.aufnahme-card .ac-subtitle {
    font-size: var(--schrift-sm);
    font-weight: var(--gewicht-mittel);
    color: var(--text);
    letter-spacing: -0.005em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Linke Spalte Unten: Bauvorhaben — sekundärer Identifier, regulär,
   gleiche Truncation-Logik wie der Kunde drüber. */
.aufnahme-card .ac-bauv {
    font-size: var(--schrift-sm);
    color: var(--text);
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rechte Spalte Unten: #Nr — rechtsbündig in derselben Spalte wie Datum,
   gleiche Größe wie Datum (text-sm). Stop-Button sitzt inline, nie geclippt
   (D-031). */
.aufnahme-card .ac-nr {
    font-size: var(--schrift-sm);
    color: var(--text);
    line-height: 1.3;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.aufnahme-card .ac-num {
    flex-shrink: 0;
}

.aufnahme-card .ac-datestack {
    text-align: right;
    flex-shrink: 0;
    line-height: 1.3;
}

.aufnahme-card .ac-date {
    font-size: var(--schrift-sm);
    color: var(--text);
    white-space: nowrap;
}

.aufnahme-card .ac-phase {
    width: 100%;
    height: 5px;
    margin-top: 16px;
    display: block;
    border-radius: 1px;
}

/* Leerer Balken (noch keine Messwerte) = die Kalt-Farbe der Sparkline (Chris
   17.08.2026): dieselbe Aussage „hier ist keine Wärme", dieselbe Farbe. Vorher
   ein eigenes Zinc-Grau, das auf der Blaugrau-Karte kaum zu sehen war. */
.aufnahme-card .ac-phase-empty {
    background: var(--c-sparkline-cold);
}

.aufnahme-card .ac-stop-btn {
    background: transparent;
    border: 1px solid var(--fehler-flaeche);
    color: var(--fehler-flaeche);
    border-radius: var(--rundung-mittel);
    font-size: var(--schrift-2xs);
    text-transform: uppercase;
    letter-spacing: var(--laufweite);
    padding: 2px 8px;
    margin-left: var(--abstand-10);
    flex-shrink: 0;     /* nie vom langen Titel zerquetscht/geclippt */
    cursor: pointer;
    vertical-align: middle;
    line-height: 1.4;
    transition: background 0.12s, color 0.12s;
}

.aufnahme-card .ac-stop-btn:hover:not(:disabled) {
    background: var(--fehler-flaeche);
    color: var(--text-auf-akzent);
}

.aufnahme-card .ac-stop-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Live-Karte (D-050): gleicher Kopf wie historische Karten (Kunde+Ort / Datum+#Nr),
   ohne roten Puls-Punkt. Sparkline etwas prominenter, dazu eine eigene Fußzeile mit
   Feed-Status links und großzügigem STOP rechts (nicht mehr ganz außen gequetscht). */
/* Die laufende Karte trägt denselben Balken wie alle anderen — gleiche Höhe
   (Chris 17.08.2026: „warum 6px?"). Die 6 statt 5 waren ein Extra ohne Aussage;
   dass die Aufnahme läuft, sagt die Fußzeile. Nur die Luft darüber bleibt. */
.aufnahme-card.live .ac-phase {
    margin-top: var(--abstand-14);
}
.aufnahme-card .ac-live-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-8);
    margin-top: var(--abstand-14);
}
.aufnahme-card .ac-live-footer .feed-status {
    margin-right: 0;
    padding: 0;
    min-width: 0;   /* Label darf kürzen, statt den STOP-Button wegzudrücken */
}
.aufnahme-card .ac-live-footer .feed-status-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aufnahme-card .ac-live-footer .ac-stop-btn {
    margin-left: 0;
    padding: 4px 16px;
    flex-shrink: 0;
}

/* Sidebar-Toggle */

.sidebar-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-leise);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.12s;
    z-index: 5;
}

.sidebar-toggle:hover {
    color: var(--text);
}

.sidebar-toggle .toggle-icon {
    display: block;
    transition: transform 0.2s ease;
}

body.sidebar-collapsed .sidebar-toggle .toggle-icon {
    transform: rotate(180deg);
}

/* === WORKSPACE === */

.workspace {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    position: relative;
}

/* === TABS === */

/* .tabs / .tab / .tab-pill-* kommen jetzt aus dem UI-Kit (suite → css/ui-kit.css).
   Hier bleibt nur das tool-eigene Inhalts-Layout: .tab-content / .tab-pane. */

.tab-content {
    flex: 1;
    overflow: auto;
    padding: var(--abstand-12);
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.tab-pane {
    flex: 1;
    min-height: 0;
}

/* === EMPTY-STATE === */






/* === WIZARD "+ NEUE AUFNAHME" (eine Fläche, D-043) === */

.wizard-step-content {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-12);
}

.wizard-label-row {
    display: flex;
    justify-content: flex-end;   /* nur noch die Projekt-Anzahl, rechts */
    align-items: baseline;
}

.wizard-projekt-count {
    font-size: var(--schrift-2xs);
    color: var(--text-leise);
    letter-spacing: var(--laufweite);
}

/* Wizard-Config (Anlagentyp/Lampen/Kerne/Watt) entfernt — kommt von der SPS
   bzw. später aus den Stammdaten (2026-06-29). Labels/Inputs des verbleibenden
   Wizard-Formulars kommen aus dem Kit. */

/* === PROTOKOLL-TAB ===
   Die Karten-Optik (.protokoll-shell, .pk-*) wohnt seit 11.08.2026 im Kit
   (`ui-kit/bausteine/datenblatt.css`, kommt über `css/ui-kit.css`) — das
   Auftragstool zeigt dieselbe Sache und muss dieselbe Optik tragen. Ändern
   also DORT, dann Sync. */

/* === SCRUBBER (innerhalb Charts-Tab) === */

.charts-shell {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-12);
    min-height: 600px;
}

/* Spacer am Ende: Whitespace zwischen letztem Widget (Lampen) und Scrubber-Bar.
   Ein flex-shrink: 0-Pseudo-Element ist robuster als padding-bottom am
   Scroll-Container — manche Browser schlucken Padding im overflow-auto-Bereich. */
.charts-shell::after {
    content: '';
    display: block;
    height: 10px;
    flex-shrink: 0;
}

/* Workspace-Bottom-Slot — default versteckt, sichtbar nur in Tabs die einen Scrubber mounten */
.workspace-bottom {
    flex-shrink: 0;
    flex-direction: column;
    display: none;
}
/* Wertemenge von data-active-tab ist {live,charts,daten,protokoll} — die frühere
   "lampen"-Hälfte war eine Prä-Git-Leiche (Lampen sind eine Schublade, kein Tab; QA F-19). */
body[data-active-tab="charts"] .workspace-bottom { display: flex; }

/* === LIVE-VIEW + VERLAUF =================================================
   Beide Tabs nutzen denselben Aufbau (.charts-shell mit .detail-layout).
   Layout-Definition liegt in widgets.css, Live unterscheidet sich nur durch
   das Fehlen des Scrubbers. */

/* === RESPONSIVE — schmale Fenster (Tablets quer < 900px) === */

@media (max-width: 900px) {
    body.app-page {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    body.app-page.sidebar-collapsed {
        grid-template-columns: 1fr;
    }
    .sidebar {
        max-height: 30vh;
        border-right: none;
        border-bottom: 1px solid var(--linie);
    }
    body.sidebar-collapsed .sidebar {
        max-height: 40px;
    }
}

/* === LOGIN-GATE + BENUTZER-ZEILE (D-042) ================================
   Gate nur im Login-Modus sichtbar (users.db vorhanden). Backdrop voll
   deckend — es liegt nichts Sichtbares dahinter. Kein ✕: ohne Login gibt
   es kein „dahinter". =================================================== */


/* Login-Formular kommt jetzt aus dem UI-Kit: .gate-card + .gate-form + .feld/.eingabe
   (css/ui-kit.css). Die früheren .gate-row/.gate-submit-Regeln sind damit entfallen. */


/* Wizard: Operateur-Schritt „Projekt wählen" (D-042) — durchsuchbare Liste
   der zugewiesenen, startbaren Haltungen (zweizeilige Zeilen, Auswahl-Akzent
   links wie die Sidebar-Karten). */

/* Liste = Kit-Tabelle in .table-wrap (»wählbare Zeilen«, 03.07.) — hier nur
   noch das Lokale: Höhe der Scroll-Karte + die Mono-Nummern-Spalte. */
.wizard-projekt-liste {
    margin-top: var(--abstand-8);
    max-height: 44vh;
}
/* Spaltenbreiten der Einzeilig-Tabelle (Kit .tabelle-einzeilig, 14.08.2026):
   Kennungen fest, Kunde/Bauvorhaben teilen den Rest und kürzen mit „…". */
.wizard-projekt-liste .wz-col-nr      { width: 110px; }
/* Schächte von 180 auf 140 (20.08.2026, Chris am Bild): „S12 → S13" braucht
   die Breite nicht, und die gewonnenen 40 px gehen an die Vorgabe-Spalte —
   deren Überschrift stand sonst als „VORG…" da. Bei `table-layout: fixed`
   (Kit `.tabelle-einzeilig`) ist die Breite hart: Was nicht passt, wird
   abgeschnitten, statt die Spalte wachsen zu lassen. */
.wizard-projekt-liste .wz-col-schacht { width: 140px; }
.wizard-projekt-liste .wz-col-liner   { width: 130px; }
/* Vorgabe-Spalte (K3, 20.08.2026): 88 px — genug für das ausgeschriebene
   „VORGABE" im Kopf (10 px, halbfett, gesperrt, plus das 12-px-Polster des
   Kit-Kopfs). Die Schwester in der Auftragsliste (`.ue-sv-col`) steht auf
   68 px und bleibt dort: Jene Tabelle läuft ohne `table-layout: fixed`, ihre
   Spalte wächst von allein mit dem Text. Zeichen und Farbe sind in beiden
   gleich — nur die Breite gehört dem Ort. */
.wizard-projekt-liste .wz-col-sv      { width: 88px; text-align: center; }
.wizard-projekt-liste .wz-sv-col      { text-align: center; }
/* GRÜN (`--ok`) — am Bild entschieden (Chris, 20.08.2026). Der Weg dahin:
   erst `--akzent` (zu blass), dann `--akzent-aktiv` („ist nicht besser"),
   dann grün. Mein Einwand war, Grün sei im Haus der Erfolgs-Ton und der
   Strich daneben läse sich dann als Mangel — am gerenderten Bild trägt das
   nicht: In einer Spalte, die „Vorgabe" heißt, liest man den Haken als
   „hinterlegt", nicht als Note. Blau bleibt auf dem dunklen Grund zu nah an
   der Schriftfarbe; die Spalte muss man im Vorbeischauen erfassen.
   Der Strich bleibt bewusst stumm-grau — kein Rot, keine Warnung: Ohne
   Sollkurve zu fahren ist erlaubt und normal (K3: nie blockierend).

   70 % DECKKRAFT, nicht voll: Heute trägt 1 von 247 Aufträgen eine Sollkurve
   — da ist der eine Haken ein Signal. Sie ist aber auf dem Weg zum NORMALFALL,
   und dann stehen 247 Haken untereinander. Ein Zeichen, das bald überall
   steht, darf nicht schreien: laut ist die Ausnahme, leise der Normalfall.
   Zurückgenommen bleibt es eindeutig grün und im Vorbeischauen erfassbar,
   verliert aber das Neon — und trägt beide Welten. */
.wizard-projekt-liste .wz-sv-ja       { color: var(--ok); opacity: .7; display: inline-flex; vertical-align: middle; }
.wizard-projekt-liste .wz-sv-nein     { font-family: var(--schriftart-mono); }
.wizard-projekt-liste .wz-nr {
    font-family: var(--schriftart-mono);
    font-size: var(--schrift-xs);
    color: var(--text-gedaempft);
}