/* Wolf Review - Oberflaeche der Verwaltung
 *
 * Baut ausschliesslich auf den Rollen-Tokens aus wm-tokens.css auf. Feste
 * Farbwerte stehen hier bewusst nirgends: Aendert sich die Marke, wird die
 * Tokendatei ersetzt und diese Datei bleibt, wie sie ist.
 *
 * Die Review-Oberflaeche selbst hat ein eigenes Stylesheet - sie ist kein
 * Formular, sondern ein Werkzeug mit Rahmen und Seitenleiste.
 */

*, *::before, *::after { box-sizing: border-box; }

/* Das hidden-Attribut muss staerker sein als jede Layoutregel dieser Datei.
   Ohne diese Zeile gewinnt schon ein schlichtes "label { display: flex }"
   gegen die Browservorgabe, und ein verstecktes Element steht trotzdem da.
   Genau das ist im alten Werkzeug viermal passiert, jedes Mal einzeln
   geflickt. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    color: var(--text-body);
    background: var(--surface-subtle);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--text-heading);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    font-weight: var(--fw-bold);
    margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h3); margin: 0 0 var(--space-2); }

p { margin: 0; }
p + p { margin-top: var(--space-3); }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }

*:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Kleines gruenes Label ueber Abschnitten - das Erkennungszeichen der Marke. */
.auge {
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--text-accent);
    margin: 0 0 var(--space-2);
}

/* ------------------------------------------------------------- Seitenkopf */

.kopf {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) var(--space-5);
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-subtle);
}
.kopf .marke { display: inline-flex; align-items: center; flex: none; }
.kopf .marke img { display: block; height: 26px; width: auto; }
.kopf-titel {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    padding-left: var(--space-4);
    border-left: 1px solid var(--border-subtle);
}
.kopf-navigation {
    margin-left: auto;
    display: flex;
    gap: var(--space-4);
    align-items: center;
    font-size: var(--fs-xs);
}
.kopf-navigation a { color: var(--text-body); font-weight: var(--fw-semibold); }
.kopf-navigation a:hover { color: var(--text-accent); }
.kopf-navigation .wer { color: var(--text-muted); font-weight: var(--fw-regular); }

/* ------------------------------------------------------------ Grundlayout */

.rahmen {
    max-width: var(--container-max);
    margin: var(--space-7) auto;
    padding: 0 var(--gutter);
}

.karte {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--card-pad);
}
.karte.schmal { max-width: var(--container-narrow); margin: 0 auto; }
.karte.gedaempft { background: var(--surface-subtle); box-shadow: none; }

.fuehrung {
    color: var(--text-muted);
    margin: 0 0 var(--space-5);
    line-height: var(--lh-body);
}
.abstand-oben { margin-top: var(--space-5); }

/* ----------------------------------------------------------- Formularteile */

.stapel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

/* Beschriftungen sind bewusst KEIN Spalten-Flex: Sonst bekaeme jedes Kind
   eine eigene Zeile, und ein kleines "optional" hinter dem Feldnamen wuerde
   das Eingabefeld nach unten schieben. */
label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-body);
}
label > input:not([type=checkbox]),
label > textarea,
label > select { display: block; margin-top: 6px; }

input, textarea, select {
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--text-heading);
    background: var(--wm-white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    transition: border-color var(--dur-base) var(--ease-standard);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--brand-primary);
    outline: none;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
input[type=checkbox] { width: auto; accent-color: var(--brand-primary); }

/* ------------------------------------------------------------------ Knopf */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    padding: 12px 26px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-button);
    background: var(--wm-white);
    color: var(--text-body);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-base) var(--ease-standard),
                box-shadow var(--dur-base) var(--ease-standard),
                transform var(--dur-base) var(--ease-standard);
}
.knopf:hover { background: var(--wm-ink-050); color: var(--text-heading); }

.knopf.haupt {
    background: var(--brand-primary);
    border-color: transparent;
    color: var(--brand-on-primary);
}
.knopf.haupt:hover {
    background: var(--brand-primary-hover);
    color: var(--brand-on-primary);
    box-shadow: var(--shadow-accent);
    transform: translateY(-1px);
}
.knopf.haupt:active {
    background: var(--brand-primary-active);
    box-shadow: none;
    transform: none;
}

.knopf.leise {
    background: transparent;
    border-color: transparent;
    color: var(--text-muted);
    font-weight: var(--fw-regular);
}
.knopf.leise:hover { background: var(--wm-ink-100); color: var(--text-heading); }

.knopf.klein { padding: 8px 18px; font-size: 13px; }

.knopf.gefahr {
    color: var(--wm-danger);
    border-color: var(--border-subtle);
    background: var(--wm-white);
}

/* -------------------------------------------------------------- Meldungen */

.hinweis {
    margin: 0 0 var(--space-4);
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--border-strong);
    background: var(--surface-subtle);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}
.hinweis-fehler { background: #fbeded; border-color: var(--wm-danger); }
.hinweis-warnung { background: #fdf4e3; border-color: var(--wm-warning); }
.hinweis-erfolg { background: var(--wm-green-050); border-color: var(--wm-success); }

/* ------------------------------------------------------- Zweiter Faktor */

.qr {
    display: inline-block;
    padding: var(--space-4);
    background: var(--wm-white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.qr svg { display: block; width: 200px; height: 200px; }

/* In Vierergruppen, gross genug zum Abtippen ohne die Stelle zu verlieren. */
.schluessel {
    font-family: var(--font-mono);
    font-size: 17px;
    letter-spacing: .06em;
    word-spacing: .25em;
    margin: 0;
}

details > summary {
    cursor: pointer;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}
details > summary:hover { color: var(--text-body); }

/* ------------------------------------------------------ Symfony-Formulare
 *
 * Symfony rendert je Feld <div><label>…</label><input></div> - Beschriftung
 * und Feld sind also Geschwister, nicht verschachtelt. Die Regeln oben
 * greifen dort nicht, deshalb hier eigene.
 */

.stapel > div { display: flex; flex-direction: column; gap: 6px; }
.stapel > div > label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-body);
}

/* Fehler eines einzelnen Feldes stehen direkt darunter, nicht gesammelt
   oben: Bei zwei Passwortfeldern weiss man sonst nicht, welches gemeint ist. */
.stapel ul,
form ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--fs-xs);
    color: var(--wm-danger);
}
.stapel ul li + li { margin-top: 2px; }

.stapel > div:has(ul) > input { border-color: var(--wm-danger); }

/* ------------------------------------------------------------ Team-Bereich */

.kopfzeile {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.kopfzeile .knopf { margin-left: auto; }

/* Der frische Einladungslink - einmal sichtbar, deshalb hervorgehoben. */
.karte.betont {
    border-left: 3px solid var(--brand-primary);
    background: var(--surface-accent-soft);
    margin-bottom: var(--space-5);
}

.zeile { display: flex; gap: var(--space-2); align-items: center; }
.zeile input { font-family: var(--font-mono); font-size: var(--fs-xs); }
.zeile .knopf { flex: none; }

.liste { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.liste th {
    text-align: left;
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: var(--fw-semibold);
    padding: 0 var(--space-3) var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
}
.liste td {
    padding: var(--space-3) var(--space-3) var(--space-3) 0;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
}
.liste tr:last-child td { border-bottom: 0; }
.liste tr.gedaempft { opacity: .55; }

/* Die Taten stehen nebeneinander und umbrechen bei Bedarf - jede steckt in
   einem eigenen Formular, weil jede ihr eigenes CSRF-Zeichen braucht. */
.taten { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.taten form { margin: 0; }

.klein { font-size: var(--fs-xs); }
.gedaempft { color: var(--text-muted); }
.warnend { color: var(--wm-warning); font-weight: var(--fw-semibold); }

/* -------------------------------------------------------- Projektuebersicht */

.rahmen.weit { max-width: var(--container-max); }

.projekte { display: grid; gap: var(--space-3); }

.projekt {
    display: flex;
    gap: var(--space-5);
    align-items: center;
    padding: var(--space-4) var(--space-5);
}
.projekt-haupt { flex: 1; min-width: 0; }
.projekt-haupt h2 { margin: 0 0 2px; font-size: var(--fs-h4); }
.projekt .adresse {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.projekt-taten { display: flex; gap: var(--space-2); flex: none; }

/* Die drei Zaehler. Erledigtes soll zuruecktreten, deshalb grau und nicht
   gruen - gruen ist im Werkzeug die Farbe fuer "offen". */
.zaehler { display: flex; gap: 6px; flex: none; }
.marke {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    background: var(--wm-ink-100);
    color: var(--text-body);
}
.marke.offen { background: var(--brand-primary); color: var(--brand-on-primary); }
.marke.arbeit { background: #fdf4e3; color: var(--wm-warning); }
.marke.erledigt { background: var(--wm-ink-100); color: var(--text-muted); }

.karte.leer { text-align: center; color: var(--text-muted); border-style: dashed; }

/* Das Projektformular ist eine Folge von Karten in einem Formular - deshalb
   duerfen die Karten selbst keine Formularzeilen-Regeln erben. */
.stapel > .karte { gap: var(--space-4); display: flex; flex-direction: column; }
.stapel > .karte > h2 { margin: 0; }

/* Protokoll */
.protokoll-filter { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; }
.protokoll-filter label { display: grid; gap: 4px; font-size: var(--fs-xs); color: var(--text-muted); }
.protokoll-filter label.breit { flex: 1 1 260px; }
.protokoll-filter select, .protokoll-filter input { width: auto; min-width: 140px; }
.protokoll-filter label.breit input { width: 100%; }
.nowrap { white-space: nowrap; }
.pfad { overflow-wrap: anywhere; font-family: var(--font-mono); }
.stufe {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--wm-ink-100);
    color: var(--text-body);
}
.stufe.warnung { background: #fdf4e3; color: var(--wm-warning); }
.stufe.fehler { background: #fbeaea; color: var(--wm-danger); }
.protokoll pre {
    margin: var(--space-2) 0 0;
    padding: var(--space-3);
    background: var(--surface-subtle);
    border-radius: var(--radius-sm, 6px);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}