/* =====================================================================
   SecurScribe - Oberflaeche
   Handgeschriebenes CSS, kein Build-Schritt. Aenderungen wirken sofort,
   die Content-Security-Policy erlaubt keine Inline-Styles.
   ===================================================================== */

:root {
    color-scheme: light dark;

    --ground: #f4f6f6;
    --surface: #ffffff;
    --surface-2: #eaeeee;
    --ink: #16211f;
    --ink-soft: #43524f;
    --ink-muted: #6d7c79;
    --line: #d6dedc;
    --line-strong: #b9c5c2;

    --accent: #0d6a66;
    --accent-hover: #0a5451;
    --accent-soft: #dcebe9;
    --on-accent: #ffffff;

    --ok: #17795f;
    --warn: #8f5a12;
    --bad: #9e2f3e;
    --ok-soft: #dcefe7;
    --warn-soft: #f6ead6;
    --bad-soft: #f7e1e3;

    --radius: 6px;
    --radius-sm: 4px;
    --shadow: 0 1px 2px rgba(22, 33, 31, .06), 0 8px 24px -18px rgba(22, 33, 31, .3);
    --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ground: #0e1514;
        --surface: #16201f;
        --surface-2: #1d2827;
        --ink: #e7edeb;
        --ink-soft: #b6c3c0;
        --ink-muted: #869896;
        --line: #27332f;
        --line-strong: #3b4a47;

        --accent: #4fb3ac;
        --accent-hover: #6ac6c0;
        --accent-soft: #16302e;
        --on-accent: #08201f;

        --ok: #5bc39c;
        --warn: #d6a45f;
        --bad: #e2899a;
        --ok-soft: #14301f;
        --warn-soft: #2d2517;
        --bad-soft: #31191e;

        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -18px rgba(0, 0, 0, .8);
    }
}

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

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--surface);
    color: var(--ink);
    padding: 10px 16px;
    z-index: 10;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---- Anmeldung ---------------------------------------------------- */

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px 20px;
}
.auth-column { width: 100%; max-width: 400px; }

.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.auth-brand-mark, .app-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
}
.auth-brand-name, .app-brand-name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.auth-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
}

.auth-title { margin: 0 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.auth-subtitle { margin: 0 0 22px; color: var(--ink-muted); font-size: 14px; }
.auth-alt { margin: 18px 0 0; font-size: 14px; text-align: center; }
.auth-footer { margin: 22px 0 0; text-align: center; font-size: 12.5px; color: var(--ink-muted); }

/* ---- Formular ----------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }

.label { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.label-required::after { content: " *"; color: var(--bad); font-weight: 400; }

.input {
    width: 100%;
    padding: 9px 12px;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    transition: border-color .12s, box-shadow .12s;
}
.input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}
.input.is-invalid { border-color: var(--bad); }
.input-code {
    font-family: var(--font-mono);
    font-size: 20px;
    letter-spacing: .3em;
    text-align: center;
}

.field-error { margin: 0; font-size: 13px; color: var(--bad); }
.field-hint { margin: 0; font-size: 13px; color: var(--ink-muted); }

/* ---- Schaltflaechen ----------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .12s, border-color .12s, color .12s;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--ink-soft); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn-sm { padding: 5px 11px; font-size: 13.5px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.inline-form { display: inline; margin: 0; }

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

.alert {
    margin: 0 0 16px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid;
    font-size: 14px;
}
.alert-success { background: var(--ok-soft); border-color: var(--ok); color: var(--ink); }
.alert-warning { background: var(--warn-soft); border-color: var(--warn); color: var(--ink); }
.alert-error { background: var(--bad-soft); border-color: var(--bad); color: var(--ink); }

/* ---- Angemeldeter Bereich ------------------------------------------ */

.app-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.app-header-inner {
    /* Bezugspunkt fuer die Webplayer-Tafel: sie soll am rechten Rand der
       Leiste haengen und nicht am Knopf, der irgendwo in der Mitte sitzt. */
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
}
.app-user { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.app-user-name { font-weight: 600; }

.app-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 24px 64px;
}

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}
.page-title { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.015em; }
.page-subtitle { margin: 4px 0 0; color: var(--ink-muted); font-size: 14px; }

/* ---- Karten -------------------------------------------------------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
}
.card-wide { grid-column: 1 / -1; }
.card-title { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
.card-empty { margin: 0; color: var(--ink-muted); font-size: 14px; }
.card-note { margin: 14px 0 0; font-size: 13px; color: var(--warn); }

.stat { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 16px; font-weight: 600; }

.detail-list { margin: 0; display: grid; gap: 8px; }
.detail-list > div { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.detail-list dt { color: var(--ink-muted); margin: 0; }
.detail-list dd { margin: 0; font-variant-numeric: tabular-nums; }

.plain-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.plain-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }

/* ---- Zustandspunkt -------------------------------------------------- */

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-muted);
    flex: none;
}
.status-dot.is-ok { background: var(--ok); }
.status-dot.is-bad { background: var(--bad); }
.status-dot.is-idle { background: var(--line-strong); }
.status-dot.is-warn { background: var(--warn); }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--line-strong);
    color: var(--ink-muted);
}
.badge-quiet { background: var(--surface-2); }

/* ---- Tabelle -------------------------------------------------------- */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: 8px 12px;
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
}
.table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table td.num { font-variant-numeric: tabular-nums; text-align: right; }

/* ---- Fehlerseiten ---------------------------------------------------- */

.error-shell { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; }
.error-card {
    max-width: 460px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 36px 28px;
}
.error-code { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--accent); letter-spacing: .12em; }
.error-title { margin: 8px 0 10px; font-size: 21px; font-weight: 600; }
.error-text { margin: 0 0 8px; color: var(--ink-soft); }
.error-detail { margin: 0; font-size: 14px; color: var(--ink-muted); }
.error-actions { margin: 24px 0 0; }
.error-debug { margin: 24px 0 0; text-align: left; font-size: 12.5px; }
.error-debug pre { overflow-x: auto; background: var(--surface-2); padding: 12px; border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---- Konto / zweiter Faktor ----------------------------------------- */

.card-narrow { max-width: 620px; }
.card-title-spaced { margin-top: 28px; }
.card-text { margin: 0 0 16px; color: var(--ink-soft); font-size: 14px; }
.card-text:last-child { margin-bottom: 0; }
.form-spaced { margin-top: 24px; }
.mt { margin-top: 22px; }

/* Einrichtung des zweiten Faktors: QR-Code links, Schluessel daneben.
   Umbruch statt fester Spalten - unter etwa 600px steht der Schluessel
   unter dem Bild, statt dass die Karte seitlich hinauslaeuft. */
/* Den Arbeitsplatz melden. Steht unter der Steuerleiste, weil es dort um
   dasselbe geht wie bei der Auswahl daneben: wohin der Ton kommt. */
.wp-handoff {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}
.wp-handoff-status {
    font-size: 12px;
    color: var(--ink-muted);
    min-width: 0;
    overflow-wrap: anywhere;
}
.qr-setup {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 12px;
}
/* Weiss ist hier keine Farbwahl, sondern Teil des Codes: ein Leser braucht
   den hellen Rand, um die Kante zu finden. Darum auch im dunklen Erscheinungs-
   bild weiss - ein eingefaerbter QR-Code waere schlicht nicht lesbar. */
.qr-code {
    flex: 0 0 auto;
    line-height: 0;
    padding: 8px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.qr-code svg {
    display: block;
    width: 180px;
    height: auto;
}
.qr-aside {
    flex: 1 1 260px;
    min-width: 0;
}
.qr-aside .secret-box {
    margin-bottom: 8px;
}
/* In der schmalen Spalte brach der Schluessel mitten in einer Vierergruppe um
   ("P52" / "4") - beim Abtippen liest sich das als falsche Gruppierung.
   Umgebrochen wird darum nur an den Leerzeichen zwischen den Gruppen. */
.qr-aside .secret-value {
    word-break: normal;
    overflow-wrap: break-word;
}
.secret-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}
.secret-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.secret-value {
    font-family: var(--font-mono);
    font-size: 17px;
    letter-spacing: .08em;
    word-break: break-all;
}

.code-list {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.code-list code {
    display: block;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: .08em;
    text-align: center;
}

/* ---- Navigation ----------------------------------------------------- */

.app-nav { display: flex; gap: 18px; margin-right: auto; margin-left: 28px; }
.app-nav a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}
.app-nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Diktatliste ----------------------------------------------------- */

/* Knopf und Arbeitsplatzzustand rechts im Seitenkopf. Untereinander, weil
   der Zustand ein Satz ist und neben einem Knopf die Zeile sprengt. */
.page-head-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.workstation-state {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--ink-muted);
    white-space: nowrap;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.filter-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.filter-tab:hover { background: var(--surface-2); color: var(--ink); }
.filter-tab.is-active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.filter-count {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    opacity: .75;
}
.filter-search { display: flex; align-items: center; gap: 8px; }
.filter-search .input { width: 240px; }

.card-flush { padding: 0; overflow: hidden; }

.table-dictations td { vertical-align: top; }
.table-dictations .col-priority { width: 26px; padding-right: 0; }
.table-dictations .col-actions { text-align: right; white-space: nowrap; }

.row-urgent { background: color-mix(in srgb, var(--bad-soft) 45%, transparent); }

.urgent-mark {
    display: inline-block;
    width: 4px;
    height: 30px;
    border-radius: 2px;
    background: var(--bad);
}

.dictation-title { display: block; font-weight: 600; }
.dictation-meta {
    display: block;
    font-size: 12.5px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}
.dictation-note {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--ink-soft);
    font-style: italic;
}
.dictation-note.is-query { color: var(--warn); font-style: normal; }
.muted { color: var(--ink-muted); }

.badge-new { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.badge-in_progress { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.badge-review { background: var(--surface-2); }
.badge-done { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.badge-query { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.badge-parked, .badge-archived { background: var(--surface-2); }

.row-actions { display: inline-flex; align-items: flex-start; gap: 6px; }

.row-more { position: relative; }
.row-more summary { list-style: none; cursor: pointer; }
.row-more summary::-webkit-details-marker { display: none; }
.row-more-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 5;
    width: 300px;
    padding: 14px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.form-inline-stack { display: flex; flex-direction: column; gap: 7px; }
.row-more-buttons { display: flex; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.pager-state { font-size: 13.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* ---- Formular: Einreichen -------------------------------------------- */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

.input-file { padding: 7px 10px; }
.input-file::file-selector-button {
    margin-right: 12px;
    padding: 5px 12px;
    font: inherit;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.checkbox-row { display: flex; align-items: center; gap: 9px; font-size: 14.5px; cursor: pointer; }
.checkbox-row input { width: 16px; height: 16px; accent-color: var(--accent); }

.form-actions { display: flex; gap: 10px; margin-top: 8px; }

/* --- Gastband ------------------------------------------------------
 *
 * Steht ueber jeder Seite, solange ein Betreiber in einer fremden Kanzlei
 * zu Gast ist. Kraeftig genug, dass niemand es uebersieht - wer vergisst,
 * wo er gerade ist, wundert sich sonst, warum nichts geht.
 */

.guest-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 20px;
    background: var(--warn-bg, #4a3a12);
    border-bottom: 2px solid var(--warn, #e0a33a);
    color: var(--warn-text, #f3e2bd);
    font-size: 14px;
    font-weight: 600;
}

.guest-banner .btn {
    border-color: var(--warn, #e0a33a);
    color: var(--warn-text, #f3e2bd);
}

/*
 * Schreibmodus.
 *
 * Rot statt gelb. Der Unterschied zwischen "ich schaue zu" und "was ich tue,
 * wirkt wirklich" muss ohne Lesen erkennbar sein - wer eine Stunde in fremden
 * Akten sitzt, liest das Band irgendwann nicht mehr.
 */
.guest-banner-write {
    background: var(--error-bg, #4a1d16);
    border-bottom-color: var(--error, #e06a5a);
    color: var(--error-text, #f6d5cf);
}

.guest-banner-write .btn {
    border-color: var(--error, #e06a5a);
    color: var(--error-text, #f6d5cf);
}

.guest-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
   Benutzerverwaltung, Zuweisungen, Verzeichnis
   --------------------------------------------------------------------- */

/* Fehlte bisher, obwohl .alert-info schon verwendet wurde - der
   Einladungskasten bei den Kanzleien stand deshalb ohne Farbe da. */
.alert-info { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }

.badge-ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.badge-warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }

.head-actions { display: flex; gap: 8px; align-items: center; }

/* Ein stillgelegtes Konto bleibt lesbar, tritt aber zurueck. Ausblenden
   waere falsch: es hat Diktate, und die will man zuordnen koennen. */
.row-muted { opacity: .55; }

/* Auswahl mit Erklaerung darunter - fuer Faelle, in denen die Bezeichnung
   allein die Entscheidung nicht traegt. */
.choice-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}
.choice-row:hover { border-color: var(--accent); }
.choice-row > span { display: flex; flex-direction: column; gap: 2px; }
.choice-row .field-note { margin: 0; }

/* Ausgegraut, nicht versteckt: der Grund steht daneben. */
.choice-row.is-disabled { opacity: .5; cursor: not-allowed; }
.choice-row.is-disabled:hover { border-color: var(--line); }

.dir-fields {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 0 0 16px;
}
.dir-fields legend { padding: 0 6px; font-weight: 600; font-size: 14px; }

/* Nur die Felder der gewaehlten Verzeichnisart. Wo :has() fehlt, bleiben
   alle sichtbar - unschoen, aber nichts geht verloren. */
.dir-form:has(#type-none:checked) .dir-fields { display: none; }
.dir-form:has(#type-ad:checked) .dir-fields-entra { display: none; }
.dir-form:has(#type-entra:checked) .dir-fields-ad { display: none; }

/* Kreuztabelle der Zuweisungen */
.table-matrix th[scope="row"] { text-align: left; font-weight: 500; }
.col-matrix { text-align: center; width: 1%; white-space: nowrap; }
.matrix-head { display: inline-block; font-size: 13px; font-weight: 500; }
.matrix-head.is-muted { opacity: .55; }

.matrix-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.matrix-cell:hover { border-color: var(--accent); }
.matrix-cell.is-set { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }

/* Aus dem Verzeichnis: sichtbar gesetzt, aber nicht anklickbar. */
.matrix-cell.is-locked {
    background: var(--surface-2);
    color: var(--ink-muted);
    cursor: default;
}
.matrix-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }



/* ---------------------------------------------------------------------
   Einstellungsbereich

   Zeilen statt Kacheln: Knopf links, Erklaerung daneben, Stand rechts.
   Die Knoepfe stehen dadurch buendig untereinander, und das Auge laeuft
   eine Spalte hinunter statt ueber ein Raster zu springen.
   --------------------------------------------------------------------- */

/* Eine Liste, keine Tabelle: ueber etwa tausend Pixel verliert das Auge den
   Weg vom Knopf zum Stand am rechten Rand. */
.settings-group { max-width: 1000px; }

.setting-rows {
    /* Der Vorspann der Gruppe bringt seinen eigenen Abstand mit. */
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}

.setting-row {
    display: grid;
    /* Feste Knopfspalte, damit sie buendig stehen; die Erklaerung nimmt den
       Rest, der Stand nur, was er braucht. 240 statt der noetigen 219 des
       laengsten Namens - englisch faellt kuerzer aus, aber ein Name, der
       umbricht, reisst die Zeilenhoehe auseinander. */
    grid-template-columns: 240px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
}
.setting-row:first-child { border-top: 0; }

/* Der Knopf fuellt seine Spalte und traegt den Text linksbuendig - zentriert
   saehe bei elf verschieden langen Namen unruhig aus. */
.setting-btn {
    width: 100%;
    justify-content: flex-start;
}

.setting-desc {
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 1.4;
}

/* Der Stand als Marke, nicht als blosse Farbe: "aus" und "fehlt noch" sind
   zweierlei. */
.setting-state {
    justify-self: end;
    padding: 2px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.6;
    white-space: nowrap;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.setting-state-value { border-color: var(--accent); color: var(--accent); }
.setting-state-muted { color: var(--ink-muted); }
/* Was noch fehlt und auffallen soll - etwa eine Kanzlei ohne Zuweisungen. */
.setting-state-todo {
    background: var(--warn-soft);
    border-color: var(--warn);
    color: var(--warn);
}

/* Schmaler Bildschirm: untereinander statt nebeneinander. */
@media (max-width: 720px) {
    .setting-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .setting-btn { width: auto; justify-content: center; }
    .setting-state { justify-self: start; }
}

/* --- Speicher ------------------------------------------------------- */

.storage-figure {
    margin: 4px 0 10px;
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.storage-of { font-size: 14px; font-weight: 400; color: var(--ink-muted); }

.storage-bar {
    height: 8px;
    background: var(--surface-2);
    border-radius: 999px;
    overflow: hidden;
}
.storage-bar > span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
}
/* Die Namen kommen aus QuotaService::status() - dort heisst es `warning`,
   nicht `warn`. */
.storage-bar-warning > span { background: var(--warn); }
.storage-bar-full > span { background: var(--bad); }


/* Eine Pedaltaste: Belegung und Sprung gehoeren zusammen und werden darum
   sichtbar gruppiert. Ohne Trennlinie liest sich das wie sechs unabhaengige
   Felder. */
.pedal-button {
    padding: 12px 0;
    border-top: 1px solid var(--line);
}
.pedal-button:first-of-type { border-top: 0; padding-top: 0; }
.pedal-button .form-row + .form-row { margin-top: 10px; }

/* ---------------------------------------------------------------------
   Absaetze zum Nachhoeren
   ---------------------------------------------------------------------
   Knopf links, Text daneben, Zeitspanne darunter - dieselbe Ordnung wie im
   Einstellungsbereich, damit man sie nicht zweimal lernen muss. */

.passages {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: passage;
}

.passage {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}
.passage:first-child { border-top: 0; }

/* Der laufende Absatz hebt sich ab - beim Nachhoeren verliert man sonst die
   Zeile, sobald der Blick einmal weg war. */
.passage.is-playing {
    background: var(--accent-soft);
    border-radius: 8px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: -10px;
    margin-right: -10px;
}

.passage-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
}
.passage-play svg { width: 16px; height: 16px; }
/* Das hidden-Attribut greift nicht bei Inline-SVG, siehe Webplayer. */
.passage-play svg[hidden] { display: none; }
.passage-play:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.passage-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.is-playing .passage-play { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.passage-text { margin: 0; line-height: 1.55; }

.passage-time {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .passage { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
}

/* ---------------------------------------------------------------------
   Webplayer
   ---------------------------------------------------------------------
   Die Fernbedienung in der Kopfleiste. Zugeklappt ein Knopf mit Punkt,
   aufgeklappt eine Tafel darunter. Sie haengt am rechten Rand, weil dort
   die Kopfleiste endet und die Tafel sonst ueber den Rand hinausliefe. */

.webplayer {
    /* Kein eigener Bezugspunkt - die Tafel richtet sich an der Kopfleiste
       aus, siehe .app-header-inner. */
    display: flex;
    align-items: center;
}

.webplayer-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 240px;
}

/* Der Name des laufenden Diktats kann beliebig lang sein - in der Leiste
   bekommt er eine Breite und sonst nichts. */
.webplayer-toggle-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.webplayer-panel {
    position: absolute;
    top: calc(100% - 2px);
    right: 24px;
    z-index: 40;
    width: 340px;
    padding: 14px 16px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.wp-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
}

.wp-title {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-urgent {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bad);
    flex: none;
}

/* Ziffern in gleicher Breite: sonst wackelt die Zeile bei jedem Sekundenschritt. */
.wp-time {
    margin-top: 6px;
    font-size: 12px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}
.wp-time-sep { margin: 0 4px; }

.wp-slider {
    width: 100%;
    margin: 8px 0 2px;
    accent-color: var(--accent);
    cursor: pointer;
}
.wp-slider:disabled { cursor: default; opacity: .5; }

.wp-transport {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 6px;
}

.wp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
}
.wp-btn svg { width: 18px; height: 18px; }
/* Das hidden-Attribut des Browsers greift nur bei HTML-Elementen, nicht bei
   Inline-SVG - sonst stuenden im Abspielknopf beide Symbole uebereinander. */
.wp-btn svg[hidden] { display: none; }
.wp-btn:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.wp-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wp-btn:disabled { opacity: .4; cursor: default; }

/* Abspielen/Anhalten traegt den Ton - derselbe Knopf ist im Windows-Fenster
   ebenfalls der groesste. */
.wp-btn-main {
    width: 40px;
    height: 40px;
    background: var(--accent);
    color: var(--on-accent);
}
.wp-btn-main svg { width: 22px; height: 22px; }
.wp-btn-main:hover:not(:disabled) { background: var(--accent-hover); color: var(--on-accent); }

.wp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--ink-muted);
}

.wp-speed {
    padding: 3px 6px;
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12px;
}
.wp-speed:disabled { opacity: .5; }

.wp-target {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-error {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--bad);
}

/* Auf schmalen Schirmen nimmt die Tafel die Breite, die da ist, und der Name
   des Diktats weicht aus der Leiste - der Punkt allein sagt genug. */
@media (max-width: 720px) {
    .webplayer-panel {
        width: min(320px, calc(100vw - 24px));
    }
    .webplayer-toggle-text { display: none; }
}