/*
 * Der Monitor – Stylesheet (Issue #108).
 *
 * Zwei Teile, und die Trennung zwischen ihnen ist der Auftrag:
 *
 *   1. **Die Kopfzeile** ist neu und folgt der Entwicklungszentrale: dunkles
 *      Band, Martins Portrait links, neutraler Titel, angemeldeter Zugang und
 *      Abmelden rechts. Die vier Farbwerte sind Zeichen für Zeichen die aus
 *      `static/style.css` der Redaktion (`--kopf-flaeche`, `--kopf-text`,
 *      `--kopf-text-hell`, `--kopf-akzent`) – „analog zur
 *      Entwicklungszentrale" heißt hier dieselben Werte und nicht ähnliche.
 *
 *   2. **Alles darunter** ist unverändert der Monitor von vorher. Dieselben
 *      Karten, dieselben Abstände, dieselben Zustandsfarben, dieselben
 *      Protokollfenster. Der Auftrag verlangt das wörtlich: keine neue
 *      Designrunde für Karten, Zustände oder Informationslogik. Die Regeln
 *      standen bis Issue #108 als Zeichenkette in `app.py`; sie sind hierher
 *      umgezogen und dabei nicht geändert worden.
 *
 * Eine Ausnahme gibt es bei den Bildschirmbreiten, und sie ist bewusst: Der
 * Monitor hatte zwei eigene Schwellen (600 und 380 px). Dieses Projekt hat
 * seit Issue #35 einen Telefon-Breakpoint – 640 px – und die Statistik ist ihm
 * in Issue #104 gefolgt. Der Monitor tut es hier ebenfalls; die **Werte**
 * hinter der Schwelle sind dieselben wie vorher, nur die Schwelle heißt jetzt
 * überall gleich. Die zweite Schwelle bei 380 px bleibt, weil sie ein sehr
 * schmales Gerät meint und keine Geräteklasse.
 */

* { box-sizing: border-box; }

:root {
    color-scheme: light dark;

    --bg: #f5f7fb;
    --text: #171a22;
    --muted: #657184;
    --card: #ffffff;
    --border: #d9dee8;
    --pre: #eef1f6;
    --link: #4f5c70;
    --button: #ffffff;
    --button-border: #c9d0dc;
    --shadow: 0 8px 24px #1b243014;

    /* Der Kopf – dieselben Werte wie die Kopfzeile der Entwicklungszentrale. */
    --kopf-flaeche: #1a1a2e;
    --kopf-text: #a8b2d8;
    --kopf-text-hell: #e8ecf8;
    --kopf-akzent: #e63946;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.45 system-ui, -apple-system, sans-serif;
}

/* ── Die Kopfzeile ──────────────────────────────────────────────────────── */

.mon-kopf {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    /* Die Fläche reicht bis an den Rand des Geräts, der Inhalt hält den
       sicheren Bereich ein – sonst läge das Portrait auf einem iPhone im
       Querformat unter der Kamerainsel. */
    padding: 0.6rem max(1rem, env(safe-area-inset-left))
             0.6rem max(1rem, env(safe-area-inset-left));
    background: var(--kopf-flaeche);
    color: var(--kopf-text);
}

.mon-marke {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: inherit;
}

/*
 * Das Signet ist Martins Portrait – dasselbe Bild wie in der
 * Entwicklungszentrale.
 *
 * Die feste Kantenlänge steht hier **und** als `width`/`height` am Element:
 * Sie hält den Platz frei, bevor das Bild da ist, damit die Kopfzeile beim
 * Nachladen nicht einmal zur Seite rutscht.
 *
 * 52 px auf dem Telefon, 68 px am Schreibtisch. Das ist der „etwas größer"
 * aus Issue #108 – in der Zentrale waren es vorher 44 und 56. Dieselben zwei
 * Maße und dieselbe Schwelle (900 px) gelten dort (`.zen-signet`), damit die
 * beiden Köpfe nebeneinander gleich aussehen.
 */
.mon-signet {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 13px;
    object-fit: cover;
    background: var(--pre);
}

.mon-marke-text { display: flex; flex-direction: column; line-height: 1.15; }
.mon-name { color: var(--kopf-text-hell); font-weight: 600; font-size: 1.05rem; }
.mon-untertitel { font-size: 0.72rem; color: var(--kopf-text); }

/*
 * `order` und nicht eine zweite Kopfzeile: Auf dem Telefon steht oben die Marke
 * mit dem angemeldeten Zugang und darunter die Navigation (2 vor 3), am
 * Schreibtisch stehen alle drei in einer Zeile (die Navigation geht dort auf
 * `order: 1`). Dasselbe Vorgehen und dieselbe Schwelle wie in der
 * Entwicklungszentrale.
 */
.mon-rechts {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    order: 2;
    font-size: 0.85rem;
}

.mon-benutzer {
    color: var(--kopf-text-hell);
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 44 px Höhe – die Tippfläche dieses Projekts. „Abmelden" war im alten
   Monitor eine blanke Textzeile; auf dem Telefon war das ein Ziel von
   19 px Höhe. */
.mon-abmelden {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.7rem;
    border-bottom: 2px solid transparent;
    color: var(--kopf-text);
    text-decoration: none;
}

.mon-nav-link:hover,
.mon-abmelden:hover { color: var(--kopf-text-hell); text-decoration: underline; }
.mon-abmelden:focus-visible,
.mon-nav-link:focus-visible,
.mon-marke:focus-visible,
.mon-auge:focus-visible,
.mon-projekt:focus-visible { outline: 2px solid var(--kopf-akzent); outline-offset: 2px; }

/* ── Die Top-Navigation ─────────────────────────────────────────────────── */
/*
 * Martins Vorgabe vom 08.09.2026: „eine Top-Navigation im gleichen Stil wie
 * https://entwicklung.martinheuser.de/zentrale. Also kompakte, horizontale
 * Kopf-/Navigationsleiste mit klarer aktiver Markierung, wenig vertikalem
 * Platzverbrauch und konsistenter Gestaltung."
 *
 * Diese vier Regeln sind deshalb Zeichen für Zeichen die von `.zen-nav` und
 * `.zen-nav-link` aus `static/style.css` – dieselbe Höhe, dieselbe Schriftgröße,
 * dieselbe `order`, derselbe rote Unterstrich am aktiven Eintrag. Zwei Leisten
 * nebeneinander sollen nicht fast gleich aussehen.
 *
 * Hervorgehoben wird über Schrift und Kante und nicht über eine Fläche, und der
 * Grund ist derselbe wie dort: Der Kopf ist in beiden Modi dunkel; eine
 * aufgehellte Fläche bräuchte einen fünften festen Farbwert.
 *
 * Sie kostet keine zusätzliche Zeile am Schreibtisch – die Einträge sind 44 px
 * hoch und stehen damit **innerhalb** der Höhe, die das Portrait ohnehin
 * vorgibt (52 bzw. 68 px).
 */
.mon-nav {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    order: 3;
}

.mon-nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.7rem;
    border-bottom: 2px solid transparent;
    color: var(--kopf-text);
    text-decoration: none;
    font-size: 0.9rem;
}

.mon-nav-link.aktiv {
    color: var(--kopf-text-hell);
    border-bottom-color: var(--kopf-akzent);
    font-weight: 600;
}

/* ── Die Projektwahl ────────────────────────────────────────────────────── */
/*
 * Sie steht **auf der Seite** und nicht in der Kopfzeile – dieselbe
 * Entscheidung wie in der Entwicklungszentrale: Welchen Bestand die Karten
 * darunter zeigen, ist Inhalt und keine Navigation. Und sie steht auch dann
 * da, wenn es genau ein Projekt gibt; der Auftrag verlangt, dass Radio GUDE
 * als erstes Projekt sichtbar ist.
 */
.mon-projekte { margin: 0 0 18px; }

.mon-projektreihe {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}

.mon-projekt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 44px;
    justify-content: center;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    color: var(--text);
    text-decoration: none;
}

.mon-projekt.aktiv { border-left-color: var(--kopf-akzent); font-weight: 600; }
.mon-projekt-name { font-size: 16px; }
.mon-projekt-repo { font-size: 12px; color: var(--muted); }
.mon-projekt-hinweis { color: var(--muted); font-size: 13px; margin: 0; }

/* ── Alles ab hier: der Monitor von vorher, unverändert ─────────────────── */

main { max-width: 1180px; margin: auto; padding: 22px; }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow);
}

.label {
    color: var(--muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.value { font-size: 22px; font-weight: 750; margin-top: 7px; }
#issue { font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
/* Die Aufgabennummer führt zu ihrem Issue – im Repository **ihres** Projekts
   (`projekte.issue_adresse`). Sie sieht dabei aus wie vorher: dieselbe Farbe,
   dieselbe Größe, keine Unterstreichung. */
#issue a { color: inherit; text-decoration: none; }
#issue a:hover { text-decoration: underline; }

.ok { color: #19a862; }
.warn { color: #b87900; }
.bad { color: #d92f3a; }

pre {
    margin: 10px 0 0;
    max-height: 430px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--pre);
    color: var(--text);
    border-radius: 12px;
    padding: 14px;
    font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.terminal-line { min-height: 1.45em; }
.terminal-time { display: inline-block; font-weight: 800; color: #da0000; margin-right: .35em; }
.terminal-result { white-space: pre-wrap; }
#terminal { max-height: 320px; }
.wide { grid-column: 1/-1; }

button {
    background: var(--button);
    color: var(--text);
    border: 1px solid var(--button-border);
    border-radius: 10px;
    padding: 9px 12px;
}

/* ── Die Zugangsseite ───────────────────────────────────────────────────── */
/*
 * `/zugang` – hier setzt und ändert Martin sein Monitor-Passwort. Sie benutzt
 * dieselben Karten- und Formularregeln wie der Rest des Dienstes; eigen ist an
 * ihr nur die schmale Spalte. Ein Formular über 1180 px wäre eine Zeile mit
 * einem Feld darin.
 */
.mon-schmal { max-width: 560px; }
.mon-titel { margin: 0 0 14px; font-size: 22px; }

.mon-melde {
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: 12px;
    background: var(--card);
}

.mon-melde.gut      { border-left-color: #19a862; }
.mon-melde.schlecht { border-left-color: #d92f3a; }
.mon-melde.hinweis  { border-left-color: #b87900; }
.mon-melde.leise    { color: var(--muted); }

.mon-formular {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow);
}

.mon-formular label { display: block; margin: 14px 0 6px; color: var(--link); }
.mon-formular label:first-child { margin-top: 0; }

/* 16 px, damit iOS beim Hineintippen nicht zoomt (Issue #35). */
.mon-formular input {
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--button-border);
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
}

.mon-hilfe { color: var(--muted); font-size: 13px; margin: 16px 0 0; }

.mon-formular button[type="submit"] {
    width: 100%;
    min-height: 44px;
    margin-top: 16px;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: #da0000;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
}

/* ── Das Augen-Icon ─────────────────────────────────────────────────────── */
/*
 * Martins Vorgabe: „Im Login und bei Passwortänderung immer Augen-Icon zum
 * Ein-/Ausblenden des Passworts."
 *
 * Der Knopf sitzt **im** Feld und nicht daneben – daneben verlöre das Feld auf
 * einem 320 px breiten Telefon ein Sechstel seiner Breite. Das Feld bekommt
 * dafür rechts so viel Innenabstand, dass der eingetippte Text nicht unter dem
 * Auge verschwindet.
 *
 * 44 × 44 px: dieselbe Tippfläche wie jedes andere Bedienelement dieses
 * Bestands (Issue #35).
 */
.mon-passwortfeld { position: relative; }
.mon-passwortfeld input { padding-right: 52px; }

.mon-auge {
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.mon-auge:hover { color: var(--text); }

.mon-auge svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Sichtbar ist immer genau eines der beiden Bilder: das offene Auge, solange
   das Passwort verborgen ist („anzeigen"), das durchgestrichene, solange es
   dasteht („verbergen"). Der Zustand steht in `aria-pressed` – derselbe Wert,
   den auch eine Vorlesehilfe ansagt, und nicht eine zweite Klasse daneben. */
.mon-auge[aria-pressed="false"] .mon-auge-zu,
.mon-auge[aria-pressed="true"] .mon-auge-offen { display: none; }

/* ── Die Anmeldemaske ───────────────────────────────────────────────────── */
/*
 * Sie trug bis Issue #108 das Radio-GUDE-Signet und die Überschrift „Radio
 * GUDE Monitor". Beides ist jetzt Martins Portrait und `Monitor` – dieselbe
 * Marke wie hinter der Anmeldung. Der Kasten selbst ist der von vorher.
 */
.anmeldung {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.box {
    width: min(92vw, 420px);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 30px;
    box-shadow: 0 24px 70px #1b243018;
}

.box .mon-signet { width: 78px; height: 78px; flex-basis: 78px; border-radius: 20px; margin-bottom: 18px; }
.box h1 { margin: 0 0 8px; font-size: 28px; }
.box .sub { color: var(--muted); margin-bottom: 24px; }
.box label { display: block; margin: 14px 0 6px; color: var(--link); }

/* 16 px, damit iOS beim Hineintippen nicht zoomt (Issue #35). */
.box input {
    width: 100%;
    min-height: 44px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--button-border);
    background: var(--card);
    color: var(--text);
    font-size: 16px;
}

/* `.box input` steht in dieser Datei nach `.mon-passwortfeld input` und hat
   dieselbe Spezifität – ohne diese Zeile gewönne sein `padding` und der
   getippte Text liefe unter das Auge. */
.box .mon-passwortfeld input { padding-right: 52px; }

/* Ausdrücklich nur der Anmeldeknopf: Im Kasten steht seit der Nacharbeit noch
   ein zweiter Knopf, das Auge, und der ist weder rot noch voll breit. */
.box button[type="submit"] {
    width: 100%;
    min-height: 44px;
    margin-top: 20px;
    padding: 14px;
    border: 0;
    border-radius: 12px;
    background: #da0000;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
}

/* ── Die Fehlerseiten (Issue #111) ──────────────────────────────────────────
 *
 * 404 und 500 tragen den Kasten der Anmeldung. Der Weg zurück ist ein Verweis
 * und kein Formularknopf – die Regel oben gilt ausdrücklich nur dem
 * Anmeldeknopf, also braucht er hier seine eigene Fläche. Dieselbe Höhe (44 px,
 * Issue #35) und derselbe Radius wie dort. */
.mon-zurueck {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--button-border);
    border-radius: 12px;
    background: var(--button);
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

.mon-zurueck:hover { border-color: var(--kopf-akzent); }

.err {
    background: #3a171b;
    color: #ffb3b9;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 14px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f1117;
        --text: #f5f7fb;
        --muted: #9aa4b2;
        --card: #191d27;
        --border: #2d3444;
        --pre: #090b10;
        --link: #b8c1ce;
        --button: #252b38;
        --button-border: #394154;
        --shadow: none;
        --kopf-flaeche: #101319;
    }

    .box { box-shadow: 0 24px 70px #0008; }
}

/* Ein Telefon – dieselbe Schwelle wie in der Redaktion und der Statistik. */
@media (max-width: 640px) {
    main { padding: 16px max(16px, env(safe-area-inset-left)); }
    .mon-kopf { gap: 8px; }
    .mon-marke { gap: 10px; }
    .box h1 { font-size: 22px; }
    .mon-untertitel { font-size: 13px; }
    .mon-abmelden { font-size: 14px; }
    /* Jedes Projekt eine ganze Zeile – nebeneinander wären sie auf 375 px
       zwei Streifen mit abgeschnittenem Repository. */
    .mon-projekt { width: 100%; }
}

@media (max-width: 380px) {
    .mon-name { font-size: 1rem; }
}

/* Am Schreibtisch ist Platz – dieselbe Schwelle und dasselbe Maß wie in der
   Entwicklungszentrale. */
@media (min-width: 900px) {
    .mon-signet { width: 68px; height: 68px; flex-basis: 68px; border-radius: 17px; }

    /* Eine Zeile: Marke, Bereiche, Zugang – wie dort (`.zen-nav`). */
    .mon-nav { order: 1; }

    /*
     * Und am Schreibtisch die Maße der Redaktion (Issue #111).
     *
     * 44 px ist die **Tippfläche des Telefons** (Issue #35) – am Schreibtisch
     * zeigt eine Maus auf einen Pixel genau, und dort sind es in der Redaktion
     * (`static/style.css`, `.menue-link`) und in der Statistik seit ihrer
     * dritten Nacharbeit 34 px und 14 px Schrift. Der Auftrag zu #111 verlangt
     * die Top-Navigationen „auf Desktop konsistent, kompakt und platzsparend"
     * und ausdrücklich das vorhandene Muster statt einer neuen Variante.
     *
     * Unter 900 px bleibt alles, wie es war: dort gilt weiter die 44er Regel.
     * Dieselben zwei Zeilen stehen in `static/style.css` bei `.zen-nav-link`.
     */
    .mon-nav-link,
    .mon-abmelden { min-height: 34px; font-size: 0.875rem; }
}