/* Das Erscheinungsbild der App an einer Stelle.
 *
 * Gestaltungslinie (Mockup vom 28.08.2026): Ozeanblau als Primaerfarbe,
 * Inter als Bildschirmschrift, flache Karten mit feiner Kontur statt
 * Schatten, gerundete Knoepfe und Felder. Die Farbwerte sind aus
 * thema.dart der Flutter-App uebernommen; der Druckweg ist davon
 * unberuehrt (Roboto, in PayRoller.Anwendung.Druck eingebettet).
 *
 * Tabellenziffern gelten der GANZEN App (font-variant-numeric am body):
 * alle Ziffern gleich breit, damit Betragskolonnen (Beleg, Lohnkonto,
 * Jahresreiter) exakt untereinander stehen. Fliesstext beruehrt das
 * nicht. Deshalb steht das Merkmal am body, nicht an einzelnen
 * Betragsfeldern: eine vergessene Stelle fiele sonst nur als leise
 * flatternde Kolonne auf.
 */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; src: url("../schriften/Inter-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 400; font-style: italic; src: url("../schriften/Inter-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; src: url("../schriften/Inter-Medium.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; src: url("../schriften/Inter-SemiBold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; src: url("../schriften/Inter-Bold.ttf") format("truetype"); font-display: swap; }

:root {
    color-scheme: light dark;

    /* Helles Schema — thema.dart, Brightness.light */
    --primaer: #11618A;
    --auf-primaer: #FFFFFF;
    --primaer-flaeche: #D5E8F2;
    --auf-primaer-flaeche: #0A455F;
    --flaeche: #F4F6F8;          /* der Seitengrund (scaffoldBackgroundColor) */
    --karte: #FFFFFF;            /* surface */
    --auf-flaeche: #171C20;      /* onSurface */
    --auf-flaeche-variante: #5B6873;
    --kontur: #8C9AA6;
    --kontur-variante: #DBE2E8;
    --leiste: #EDF1F5;
    --feld: #F4F6F8;             /* fillColor der Eingabefelder */
    --fehler: #B3261E;
    --fehler-flaeche: #F9DEDC;

    --radius-karte: 14px;
    --radius-knopf: 10px;
    --radius-kachel: 12px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --primaer: #5FB6E0;
        --auf-primaer: #06283A;
        --primaer-flaeche: #123B52;
        --auf-primaer-flaeche: #A9D7EF;
        --flaeche: #0F1417;
        --karte: #171C21;
        --auf-flaeche: #E2E7EB;
        --auf-flaeche-variante: #8D9AA5;
        --kontur: #556470;
        --kontur-variante: #27313A;
        --leiste: #12181D;
        --feld: #1B242B;
        --fehler: #F2B8B5;
        --fehler-flaeche: #4A1B1A;
    }
}

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

body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    background: var(--flaeche);
    color: var(--auf-flaeche);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; margin: 0 0 12px; line-height: 1.25; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; color: var(--auf-flaeche-variante); }
/* EIN Abstand ueber Ueberschriften fuer alle Masken: die Rubrik (h2) setzt
   sich deutlich vom vorigen Block ab, die Unterrubrik (h3) weniger. Wer als
   Erstes in seinem Container steht (Karte, Spalte), braucht keinen.
   Einzige Ausnahme ist die Erfassung — bewusst kompakt, siehe dort. */
h2 { margin: 28px 0 10px; }
h3 { margin: 20px 0 8px; }
:is(h2, h3):first-child { margin-top: 0; }
p { margin: 0 0 10px; }
a { color: var(--primaer); }
h1:focus { outline: none; }

/* --- Karten und Kacheln ------------------------------------------------ */

.karte {
    background: var(--karte);
    border: 1px solid var(--kontur-variante);
    border-radius: var(--radius-karte);
    padding: 16px;
}

/* EIN Blockabstand fuer alle Masken: Feldgruppen, Karten, Knopfgruppen und
   Abschnitte stehen 12 px unter dem Inhalt darueber — so viel wie die Felder
   untereinander. Wer als Erstes in seinem Container steht, braucht keinen.
   In Rastern (Monatsansicht) trennt der gap, nicht der Rand; die Erfassung
   hat ihren eigenen, engeren Abstand (siehe dort). Knoepfe stehen deshalb
   immer in einer .knoepfe-Gruppe, nie nackt unter Feldern. */
:is(.felder, .karte, .knoepfe, .abschnitt):not(:first-child) { margin-top: 12px; }

.kachel {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border-radius: var(--radius-kachel);
    border: 1px solid var(--kontur-variante);
    background: var(--karte);
    min-width: 140px;
}

.kachel .beschriftung { font-size: 12px; color: var(--auf-flaeche-variante); }
.kachel .wert { font-size: 20px; font-weight: 600; }

.kachel.betont { background: var(--primaer-flaeche); border-color: transparent; color: var(--auf-primaer-flaeche); }
.kachel.betont .beschriftung { color: var(--auf-primaer-flaeche); }

.kacheln { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }

/* --- Knoepfe ------------------------------------------------------------ */

button, .knopf {
    font: inherit;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: var(--radius-knopf);
    border: 1px solid var(--kontur-variante);
    background: var(--karte);
    color: var(--auf-primaer-flaeche);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

button:hover, .knopf:hover { border-color: var(--kontur); }
button:disabled { opacity: 0.5; cursor: default; }

button.gefuellt, .knopf.gefuellt {
    background: var(--primaer);
    color: var(--auf-primaer);
    border-color: var(--primaer);
    font-weight: 600;
}

button.flach, .knopf.flach { background: transparent; border-color: transparent; color: var(--primaer); }
button.flach:hover { background: var(--primaer-flaeche); }
button.klein { padding: 4px 10px; font-size: 13px; }

/* --- Felder ------------------------------------------------------------- */

.feld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.feld > .beschriftung { font-size: 12px; color: var(--auf-flaeche-variante); display: flex; align-items: center; gap: 4px; }

input[type="text"], input[type="password"], input[type="date"], input[type="number"], input[type="tel"], input[type="email"], select, textarea {
    font: inherit;
    font-variant-numeric: tabular-nums;
    padding: 7px 10px;
    border-radius: var(--radius-knopf);
    border: 1px solid var(--kontur-variante);
    background: var(--feld);
    color: var(--auf-flaeche);
    width: 100%;
    min-width: 0;
}

input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primaer); box-shadow: 0 0 0 1px var(--primaer); }
input.rechts { text-align: right; }
input::placeholder { color: var(--auf-flaeche-variante); opacity: 0.8; }
.feld.fehlerhaft input { border-color: var(--fehler); }
.feld .fehlertext, .fehler { color: var(--fehler); font-size: 12px; }

.felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.zeile { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.schalter { display: inline-flex; align-items: center; gap: 8px; }
.schalter input { width: auto; }

/* --- Hilfezeichen: antippen ODER ueberfahren zeigt den Text ------------ */

.hilfe { position: relative; display: inline-flex; color: var(--kontur); cursor: help; outline: none; }
.hilfe .blase {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 20;
    width: min(360px, calc(100vw - 32px));
    padding: 10px 12px;
    background: var(--auf-flaeche);
    color: var(--flaeche);
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
    white-space: pre-line;
    text-align: left;
}
.hilfe:hover .blase, .hilfe:focus .blase, .hilfe:focus-within .blase { display: block; }

/* --- Tabellen ----------------------------------------------------------- */

.tabellenkarte {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;          /* breite Tabellen scrollen in ihrem Kasten, die Seite nie */
    background: var(--karte);
    border: 1px solid var(--kontur-variante);
    border-radius: var(--radius-karte);
    vertical-align: top;
}

table { border-collapse: collapse; }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--kontur-variante); white-space: nowrap; }
th { font-size: 12.5px; font-weight: 600; color: var(--auf-flaeche-variante); }
tr:last-child td { border-bottom: none; }
td.zahl, th.zahl { text-align: right; }
tr.summe td { font-weight: 600; }
tr.gewaehlt td { background: var(--primaer-flaeche); color: var(--auf-primaer-flaeche); }

/* --- Auswahllisten (Firmen, Dienstnehmer) ------------------------------- */

.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.liste li:hover { background: var(--leiste); }
.liste li.gewaehlt { background: var(--primaer-flaeche); color: var(--auf-primaer-flaeche); }

/* --- Segmentleiste (Monate) --------------------------------------------- */

.segmente { display: flex; flex-wrap: wrap; gap: 6px; }
.segment {
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--kontur-variante);
    background: var(--karte);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.segment.gewaehlt { background: var(--primaer-flaeche); color: var(--auf-primaer-flaeche); border-color: transparent; }
.segment:disabled { opacity: 0.4; cursor: default; }

.hinweis { color: var(--auf-flaeche-variante); font-size: 12.5px; }
.warnung { color: var(--fehler); }
.meldung { padding: 10px 14px; border-radius: 10px; background: var(--primaer-flaeche); color: var(--auf-primaer-flaeche); }
.meldung.fehler { background: var(--fehler-flaeche); color: var(--fehler); font-size: inherit; }

/* --- Blazor: unbehandelter Fehler --------------------------------------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1000;
    padding: 0.6rem 1.25rem 0.7rem;
    background: var(--fehler-flaeche);
    color: var(--fehler);
    border-top: 1px solid var(--kontur-variante);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* --- Seiten ohne Rahmen: Anmeldung, Startmasken, Fehler ---------------- */

.anmelde-rahmen { max-width: 420px; margin: 10vh auto 0; padding: 24px; }
.anmelde-rahmen.breit { max-width: 560px; }

/* --- Zweispaltige Stammdaten: Liste links, Felder rechts --------------- */

.zweispaltig { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.zweispaltig > .liste-spalte { position: sticky; top: 8px; }
.liste-spalte .liste li { display: flex; align-items: center; gap: 8px; }
.liste-spalte .liste li .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.liste-spalte .liste li .kennung { font-size: 12px; color: var(--auf-flaeche-variante); }
.liste-spalte .liste li.gewaehlt .kennung { color: inherit; opacity: 0.8; }
.liste-spalte .anlegen { margin-top: 12px; }
.stammdaten { max-width: 900px; }
.stammdaten h2 { font-size: 14px; display: flex; align-items: center; gap: 6px; }
.stammdaten > .knoepfe:first-child { margin-bottom: 20px; }
.stammdaten h3 { font-size: 13px; display: flex; align-items: center; gap: 6px; }
/* Zuschlagsstufen: eine Zeile je Stufe, mit Abstand dazwischen. */
.stufenzeile + .stufenzeile { margin-top: 12px; }
/* Stammdatenzeilen mit festem Raster: der Name breit, Telefon und E-Mail kompakt daneben;
   die Strasse breit, die PLZ schmal, der Ort mittel. Unter 900 px gilt wieder das Umbruchraster. */
.felder.stamm-name { grid-template-columns: 2fr 1fr 1fr; }
.felder.stamm-anschrift { grid-template-columns: 2fr minmax(90px, 0.5fr) 1.5fr; }
@media (max-width: 899px) {
    .felder.stamm-name, .felder.stamm-anschrift { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
.schalterzeile { display: inline-flex; align-items: center; gap: 6px; }
/* Nur NEBEN beschrifteten Feldern braucht der Schalter das Polster: dort saesse er
   sonst auf Hoehe der Beschriftungen statt der Eingabefelder. Allein in seiner
   Feldgruppe, in einer .zeile (align-items: end) oder in Listen steht er ohne. */
.felder:has(> .feld) > .schalterzeile { padding-top: 22px; }
.datumzeile { display: flex; align-items: center; gap: 4px; }
.datumzeile input { flex: 1; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Ein Hinweis, der in einer Feldzeile neben einem Feld steht, sitzt auf
   Hoehe des Eingabefelds, nicht auf Hoehe der Beschriftung. */
.felder > .feldnotiz { align-self: end; margin: 0; padding-bottom: 9px; }
.knoepfe.rechts { justify-content: flex-end; }
details.aufklapper > summary { cursor: pointer; font-weight: 600; font-size: 14px; margin: 16px 0 8px; list-style: none; }
details.aufklapper > summary::before { content: "▸ "; color: var(--auf-flaeche-variante); }
details.aufklapper[open] > summary::before { content: "▾ "; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.eintrag { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--kontur-variante); }
.eintrag .name { flex: 1; cursor: pointer; }
.eintrag .zeitraum { font-size: 12px; color: var(--auf-flaeche-variante); }
.bewertung { border: 1px solid var(--kontur); border-radius: 8px; padding: 12px; margin-top: 16px; }
.bewertung .wert { font-size: 22px; font-weight: 600; }
.klein-text { font-size: 12.5px; color: var(--auf-flaeche-variante); }

@media (max-width: 699px) {
    .zweispaltig { grid-template-columns: 1fr; }
    .zweispaltig > .liste-spalte { position: static; }
}

.schalterliste { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }

/* --- Rueckfrage und Dialoge --------------------------------------------- */

.schleier { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dialog { width: min(480px, 100%); max-height: 90vh; overflow-y: auto; }
.dialog .dialogtext { white-space: pre-line; }

/* --- Monatsleiste ------------------------------------------------------- */

.monatsleiste { display: flex; align-items: center; gap: 12px; padding: 8px 0 12px; }
.monatsleiste .monate { flex: 1; min-width: 0; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
.monatsleiste .segment .marke { margin-right: 4px; font-size: 12px; }
.monatsleiste .rechtslage { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.monatsleiste .rechtslage select { width: auto; padding: 4px 8px; }

/* --- Jahrestabelle ------------------------------------------------------ */

.jahrestabelle tr.waehlbar { cursor: pointer; }
.jahrestabelle tr.gesperrt td { color: var(--auf-flaeche-variante); opacity: 0.6; }

/* --- Beleg -------------------------------------------------------------- */

.beleg { padding: 4px 0; }
.beleg.leer { text-align: center; padding: 24px; }
.beleg .belegtitel { font-weight: 600; font-size: 15px; }
.beleg .belegkopf { margin-bottom: 8px; }
.kopfbetrag-zeile { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-radius: 10px; background: var(--primaer-flaeche); color: var(--auf-primaer-flaeche); font-weight: 600; margin-bottom: 8px; }
.kopfbetrag-zeile .kopfbetrag { font-size: 20px; font-weight: 700; }
.belegzeile { display: flex; gap: 10px; padding: 2px 0; }
.belegzeile .text { flex: 1; min-width: 0; }
.belegzeile .zahl { white-space: nowrap; }
.belegzeile.leise { font-size: 12.5px; color: var(--auf-flaeche-variante); }
.belegzeile.summe { border-top: 1px solid var(--kontur-variante); margin-top: 4px; padding-top: 4px; font-weight: 600; }
.belegzeile.summe.hervorgehoben { font-size: 15px; }
.belegzeile.kennzahl .kz { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--leiste); }
.belegabschnitt { margin: 12px 0 4px; padding-top: 8px; border-top: 1px solid var(--kontur-variante); font-size: 13px; font-weight: 600; color: var(--auf-flaeche); }
.belegwarnung { margin: 6px 0 0; }

/* --- Monatsansicht: Erfassung links, Beleg rechts ab 900 px ------------- */

.monatsansicht { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
.monatsansicht > .karte { min-width: 0; margin-top: 0; }
.abschlussleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.druckleiste { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; align-items: center; }
.druckleiste .paar { display: inline-flex; align-items: center; gap: 4px; }
/* Die einzige Ausnahme vom einheitlichen Ueberschriftenabstand: Die Erfassung ist
   bewusst kompakt (Kompaktheitstest), ihre Abschnitte folgen dicht aufeinander. */
.erfassung h2 { margin: 12px 0 4px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.erfassung h2 .titeltext { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.erfassung h2:first-of-type { margin-top: 0; }
/* Auch der Blockabstand ist in der Erfassung enger: 8 px zwischen Feldgruppen
   und Zeilen, keiner unter einer Abschnittsueberschrift. */
.erfassung :is(.felder, .karte, .knoepfe, .abschnitt):not(:first-child) { margin-top: 0; }
.erfassung :is(.felder, .zeile) + :is(.felder, .zeile) { margin-top: 8px; }
.erfassung .gruppentitel { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; font-size: 13px; }
.erfassung .gruppentitel .titeltext { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.erfassung .bezugszeile { display: grid; grid-template-columns: 3fr 1fr auto; gap: 10px; align-items: end; margin-bottom: 8px; }
.erfassung .bezugszeile .zusatz { grid-column: 1 / -1; }
/* Kopfzeile einmal ueber der Liste; die Beschriftungen der einzelnen Zeilen bleiben nur fuer Vorleseprogramme. */
.erfassung .bezugszeile.kopf { margin-bottom: 0; }
.erfassung .bezugszeile.kopf .beschriftung { font-size: 12px; color: var(--auf-flaeche-variante); display: flex; align-items: center; gap: 4px; }
.erfassung .bezugszeile.kopf .beschriftung:nth-child(2) { justify-content: flex-end; }
.erfassung .bezugszeile.kopf .platzhalter { visibility: hidden; }
.erfassung .bezugszeile > .feld > .beschriftung { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Vierer-Reihen: kurze Beschriftungen, die nicht vor dem Hilfezeichen umbrechen; die Felder einer Reihe stehen unten buendig. */
.erfassung .felder.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.erfassung .felder.vier .feld > .beschriftung { white-space: nowrap; }

@media (max-width: 899px) {
    .monatsansicht { grid-template-columns: 1fr; }
    .erfassung .felder.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Urlaub, Lohnkonto, L 16 ------------------------------------------- */

.titelzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.titelzeile h1 { margin: 0; }
.zeitraum .tage { min-width: 3em; text-align: center; padding-bottom: 10px; font-variant-numeric: tabular-nums; }
.zeitraeume { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.kopftabelle { width: 100%; }
.kopftabelle td { white-space: normal; padding: 4px 8px; border-bottom: none; }
.kopftabelle td.wert { width: 60%; }
.gruppensummen { gap: 16px; }

/* --- Nutzerverwaltung ---------------------------------------------------- */

.konten { max-width: 720px; margin-bottom: 16px; }
.konten .eintrag .name { font-weight: 500; }
/* Feste Spalten: Name, Rolle, Schalter, Kennwort, Entfernen — die Knoepfe stehen
   in jeder Zeile untereinander, auch wenn das eigene Konto keinen Loeschknopf hat. */
.konten .eintrag { display: grid; grid-template-columns: auto 1fr auto 36px 36px; }
.kennwortzeile { padding: 8px 0 12px; }
.wege { margin-bottom: 20px; }