/* ============================================================
   ERZEUGTE KOPIE - HIER NICHT BEARBEITEN

   Urschrift:  server/src/main/resources/web/oberflaeche.css
   Erneuern:   ./bauen.sh :server:webspaceAussehen
               (laeuft bei jedem :server-Bau automatisch mit)

   Aenderungen in dieser Datei sind beim naechsten Bauen weg.
   ============================================================ */

/*
 * Die gesamte Gestaltung der Weboberflaeche. Handgeschrieben, kein Rahmenwerk.
 *
 * Warum kein Bootstrap oder Tailwind: fuer ein Dutzend Seiten waere eine Bauwerkzeugkette
 * (Node, Bundler, Uebersetzungsschritt) mehr Aufwand als Nutzen - zumal auf einem
 * Rechner mit vier Kernen. Ausserdem duerfte nichts von einem fremden Netz nachgeladen
 * werden: das waere bei jedem Seitenaufruf ein Datenabfluss an Dritte (Art. 44 DSGVO)
 * und wuerde ausserdem an der Inhaltssicherheitsregel scheitern.
 *
 * Systemschriften statt Webschriften - aus demselben Grund und weil sie schneller sind.
 *
 * Die Zustandsfarben sind DIESELBEN wie in der App (ui/theme/Farben.kt). Eine gruene
 * Kachel muss am Terminal und im Browser gleich aussehen, sonst entstehen Rueckfragen.
 */

:root {
    --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --schrift-fest: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

    --grund: #ffffff;
    --flaeche: #f6f7f8;
    --rand: #d8dbdf;
    --text: #1a1c1e;
    --text-schwach: #5b6169;
    --betont: #1c4d80;

    /* Zustandsfarben - gleich wie in der App */
    --anwesend: #c8e6c9;
    --anwesend-rand: #5c9a60;
    --pause: #fff3c4;
    --pause-rand: #b8992e;
    --abwesend: #e3e3e3;
    --abwesend-rand: #a8a8a8;
    --urlaub: #bbdefb;
    --urlaub-rand: #4a86c4;
    --krank: #e1bee7;
    --krank-rand: #9a5aa8;

    --erfolg: #1f7a3d;
    --warnung: #8a6100;
    --fehler: #b3261e;
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund: #16181a;
        --flaeche: #1f2225;
        --rand: #34383d;
        --text: #e6e8ea;
        --text-schwach: #a0a6ad;
        --betont: #7db3e8;

        --anwesend: #1e4025;
        --anwesend-rand: #4a8050;
        --pause: #4a3e1c;
        --pause-rand: #9c8330;
        --abwesend: #2e2e2e;
        --abwesend-rand: #565656;
        --urlaub: #16324a;
        --urlaub-rand: #3f6f9e;
        --krank: #3b2f4a;
        --krank-rand: #7a5a88;

        --erfolg: #7fd39a;
        --warnung: #e0bd6a;
        --fehler: #f2b8b5;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--schrift);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    background: var(--grund);
}

/* ------------------------------------------------------------ Kopfzeile */

header {
    background: var(--flaeche);
    border-bottom: 1px solid var(--rand);
}

.kopf-inhalt {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.marke {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

/* Das Logo skaliert auf die Höhe der Menüleiste; die Breite ergibt sich
   daraus. Eine feste Breite wäre falsch — sie verzerrte jedes Bild, das
   nicht zufällig das erwartete Seitenverhältnis hat.

   Die Höhe entspricht der Zeilenhöhe der Menüpunkte samt Polsterung, damit
   die Kopfzeile mit Logo genauso hoch bleibt wie ohne. Ein Logo, das die
   Kopfzeile wachsen lässt, verschiebt bei jedem Seitenaufbau den Inhalt
   darunter.

   max-width verhindert, dass ein sehr breites Bild die Navigation aus der
   Zeile drängt. */
.marke-logo {
    height: 2rem;
    width: auto;
    max-width: 14rem;
    object-fit: contain;
    display: block;
}

/* Die Vorschau in den Einstellungen — auf hellem wie dunklem Grund sichtbar,
   damit ein Logo mit durchsichtigem Hintergrund beurteilt werden kann. */
.logo-vorschau {
    display: inline-block;
    padding: 0.6rem 1rem;
    border: 1px dashed var(--rand);
    border-radius: 8px;
    background: var(--flaeche);
}

.logo-vorschau img {
    height: 2rem;
    width: auto;
    max-width: 20rem;
    object-fit: contain;
    display: block;
}

header nav {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    flex: 1;
}

header nav a {
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    color: var(--text-schwach);
    text-decoration: none;
    font-size: 0.94rem;
}

header nav a:hover { background: var(--rand); color: var(--text); }

header nav a.aktiv {
    background: var(--betont);
    color: var(--grund);
}

/* ------------------------------------------------ Untermenü „Verwalten"

   <details>/<summary> statt eines nachgebauten Menüs: Aufklappen, Tastatur-
   bedienung und Vorlesbarkeit bringt der Browser mit. Ein Skript wäre hier
   Mehrarbeit, die ohne Skript zu einem unbedienbaren Menü führt. */

.untermenue { position: relative; }

.untermenue > summary {
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    color: var(--text-schwach);
    font-size: 0.94rem;
    cursor: pointer;
    list-style: none;          /* Das voreingestellte Dreieck ersetzen wir selbst */
    white-space: nowrap;
}

.untermenue > summary::-webkit-details-marker { display: none; }

.untermenue > summary::after {
    content: " ▾";
    font-size: 0.8em;
}

.untermenue > summary:hover { background: var(--rand); color: var(--text); }

.untermenue > summary.aktiv {
    background: var(--betont);
    color: var(--grund);
}

.untermenue-inhalt {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    margin-top: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem;
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    min-width: 11rem;
}

/* Auf schmalen Geräten kein schwebendes Feld: dort wäre es breiter als der
   Bildschirm. Es klappt einfach im Fluss auf. */
@media (max-width: 700px) {
    .untermenue-inhalt {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0.2rem 0 0.2rem 0.8rem;
    }
}

/* --------------------------------------------------------------- Reiter

   Ohne JavaScript: versteckte Radioknöpfe, und `:checked ~` schaltet Kopf und
   Blatt. Die Regelpaare lassen sich nicht erzeugen, deshalb sind sie bis
   REITER_HOECHSTZAHL ausgeschrieben. */

.reiter > input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.reiter-koepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    border-bottom: 1px solid var(--rand);
    margin-bottom: 1.2rem;
}

.reiter-koepfe label {
    padding: 0.6rem 1.1rem;
    cursor: pointer;
    color: var(--text-schwach);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}

.reiter-koepfe label:hover { color: var(--text); }

.reiter-blatt { display: none; }

/* Sichtbarer Fokusrahmen: der Radioknopf selbst ist unsichtbar, ohne diese
   Regel wüsste ein Tastaturbediener nicht, wo er steht. */
.reiter > input[type="radio"]:focus-visible + .reiter-koepfe label,
.reiter > input[type="radio"]:focus-visible ~ .reiter-koepfe label {
    outline: revert;
}

.reiter > input:nth-of-type(1):checked ~ .reiter-koepfe label:nth-child(1),
.reiter > input:nth-of-type(2):checked ~ .reiter-koepfe label:nth-child(2),
.reiter > input:nth-of-type(3):checked ~ .reiter-koepfe label:nth-child(3),
.reiter > input:nth-of-type(4):checked ~ .reiter-koepfe label:nth-child(4),
.reiter > input:nth-of-type(5):checked ~ .reiter-koepfe label:nth-child(5),
.reiter > input:nth-of-type(6):checked ~ .reiter-koepfe label:nth-child(6) {
    color: var(--text);
    font-weight: 600;
    border-bottom-color: var(--betont);
}

.reiter > input:nth-of-type(1):checked ~ .reiter-blaetter > .reiter-blatt:nth-child(1),
.reiter > input:nth-of-type(2):checked ~ .reiter-blaetter > .reiter-blatt:nth-child(2),
.reiter > input:nth-of-type(3):checked ~ .reiter-blaetter > .reiter-blatt:nth-child(3),
.reiter > input:nth-of-type(4):checked ~ .reiter-blaetter > .reiter-blatt:nth-child(4),
.reiter > input:nth-of-type(5):checked ~ .reiter-blaetter > .reiter-blatt:nth-child(5),
.reiter > input:nth-of-type(6):checked ~ .reiter-blaetter > .reiter-blatt:nth-child(6) {
    display: block;
}

.benutzer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
}

.benutzer .kuerzel { font-weight: 600; }
.benutzer .rolle { color: var(--text-schwach); }

/* ------------------------------------------------------------ Rumpf */

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

h1 { font-size: 1.5rem; margin: 0 0 1.2rem; }
h2 { font-size: 1.15rem; margin: 2rem 0 0.8rem; }

/* ------------------------------------------------------------ Hinweise */

.hinweis {
    border-radius: 6px;
    padding: 0.7rem 1rem;
    margin: 0 0 1.2rem;
    border-left: 4px solid;
}
.hinweis p { margin: 0; }
.hinweis.erfolg  { background: var(--anwesend); border-color: var(--erfolg); }
.hinweis.warnung { background: var(--pause);    border-color: var(--warnung); }
.hinweis.fehler  { background: var(--krank);    border-color: var(--fehler); }
.hinweis.info    { background: var(--flaeche);  border-color: var(--betont); }

/* ------------------------------------------------------------ Formulare */

form.karte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 1.2rem;
    max-width: 32rem;
}

.feld { margin-bottom: 1rem; }

.feld label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.feld .erlaeuterung {
    font-size: 0.83rem;
    color: var(--text-schwach);
    margin: 0.25rem 0 0;
}

input[type=text], input[type=password], input[type=date],
input[type=number], select, textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--rand);
    border-radius: 6px;
    background: var(--grund);
    color: var(--text);
    font: inherit;
}

input:focus-visible, select:focus-visible, button:focus-visible,
a:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--betont);
    outline-offset: 2px;
}

button, input[type=submit] {
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--betont);
    border-radius: 6px;
    background: var(--betont);
    color: #fff;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
}

button:hover, input[type=submit]:hover { filter: brightness(1.1); }

button.zweitrangig, input.zweitrangig {
    background: transparent;
    color: var(--betont);
}

button.gefaehrlich, input.gefaehrlich {
    background: transparent;
    color: var(--fehler);
    border-color: var(--fehler);
}

input.verknuepfung {
    background: none;
    border: none;
    color: var(--text-schwach);
    padding: 0;
    text-decoration: underline;
    font-weight: normal;
}
input.verknuepfung:hover { color: var(--text); filter: none; }

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

.tabelle-rahmen { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.94rem;
}

th, td {
    text-align: left;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--rand);
    white-space: nowrap;
}

th {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-schwach);
    font-weight: 600;
}

tbody tr:hover { background: var(--flaeche); }

/* Zahlen rechtsbuendig und in fester Breite - sonst lassen sich Spalten mit
   Zeiten und Salden nicht mit dem Auge vergleichen. */
td.zahl, th.zahl {
    text-align: right;
    font-family: var(--schrift-fest);
    font-variant-numeric: tabular-nums;
}

td.plus  { color: var(--erfolg); }
td.minus { color: var(--fehler); }

.abgeschwaecht { color: var(--text-schwach); }

/* ------------------------------------------------------------ Marken */

.marke-zustand {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    border: 1px solid;
}
.marke-zustand.anwesend { background: var(--anwesend); border-color: var(--anwesend-rand); }
.marke-zustand.pause    { background: var(--pause);    border-color: var(--pause-rand); }
.marke-zustand.abwesend { background: var(--abwesend); border-color: var(--abwesend-rand); }
.marke-zustand.urlaub   { background: var(--urlaub);   border-color: var(--urlaub-rand); }
.marke-zustand.krank    { background: var(--krank);    border-color: var(--krank-rand); }

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

body.anmeldung main {
    max-width: 24rem;
    margin-top: 12vh;
}

/* ------------------------------------------------------------ Zeitansichten */

.zeitraum-wahl {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--rand);
}

/* Nur noch das Pfeilzeichen, ohne Beschriftung. Quadratisch und groß genug,
   damit es auch mit dem Daumen zu treffen ist - ein 2,4 rem breites Feld ist
   knapp über der üblichen Mindestgröße für Berührziele. */
.zeitraum-wahl .blaettern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.2rem;
    line-height: 1;
    border: 1px solid var(--rand);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
}
.zeitraum-wahl .blaettern:hover { background: var(--flaeche); }

.zeitraum-wahl .arten { margin-left: auto; display: flex; gap: 0.3rem; }
.zeitraum-wahl .arten a {
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-schwach);
}
.zeitraum-wahl .arten a.aktiv { background: var(--betont); color: var(--grund); }

/* Kennzahlen als Reihe von Kacheln - die wichtigste Zahl (Saldo) faellt durch die
   Farbe auf, ohne dass Farbe die einzige Unterscheidung waere: das Vorzeichen steht
   immer dabei. */
.kennzahlen {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}

.kennzahl {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 0.6rem 1rem;
    min-width: 8rem;
}
.kennzahl .bezeichnung {
    display: block;
    font-size: 0.8rem;
    color: var(--text-schwach);
}
.kennzahl .wert {
    display: block;
    font-size: 1.3rem;
    font-family: var(--schrift-fest);
    font-variant-numeric: tabular-nums;
}
.kennzahl .wert.plus  { color: var(--erfolg); }
.kennzahl .wert.minus { color: var(--fehler); }

table.tage tr.wochenende td { background: color-mix(in srgb, var(--flaeche) 60%, transparent); }
table.tage tr.verstoss td:first-child { border-left: 3px solid var(--fehler); }
table.tage td.anmerkung { white-space: normal; }
table.tage td.anmerkung .marke-zustand { margin-right: 0.3rem; }

tr.abgeschwaecht td { opacity: 0.55; }

textarea { font: inherit; resize: vertical; }

/* ------------------------------------------------------- Eigene Stempeluhr

   Steht über der Tafel und ist für die meisten Mitarbeiter der einzige Grund,
   die Startseite überhaupt aufzurufen. Die Knöpfe sind bewusst groß: das hier
   wird auch am Telefon bedient, mit dem Daumen, oft im Vorbeigehen. */

.stempeluhr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: none;
    margin-bottom: 1.2rem;
}

.stempeluhr-stand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.stempeluhr-zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    font-size: 1.1rem;
    /* Dieselben Flächenfarben wie die Kacheln - Uhr und Tafel sollen nicht in
       verschiedenen Farben dasselbe sagen. */
    background: var(--flaeche);
    border: 1px solid var(--rand);
}

.stempeluhr-zeichen.anwesend { background: var(--anwesend); }
.stempeluhr-zeichen.pause    { background: var(--pause); }
.stempeluhr-zeichen.abwesend { background: var(--abwesend); }

.stempeluhr-knoepfe {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.stempeluhr-knoepfe input[type="submit"] {
    min-width: 8rem;
    padding: 0.75rem 1.4rem;
    font-size: 1.05rem;
}

/* ------------------------------------------------------------ Live-Tafel */

.tafel-kopf {
    font-size: 1.1rem;
    color: var(--text-schwach);
    margin: 0 0 0.8rem;
}

.tafel-alter {
    background: var(--pause);
    border-left: 4px solid var(--warnung);
    border-radius: 6px;
    padding: 0.5rem 0.9rem;
    margin: 0 0 1rem;
}

/* Die Kacheln wachsen mit dem Fenster. Anders als am Terminal wird hier NICHT
   rückwärts gerechnet: im Browser ist Scrollen zumutbar, und eine feste Kachelzahl
   pro Bildschirm wäre bei frei wählbarer Fenstergröße eine Schikane. */
.tafel-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.6rem;
}

/* Bedienbare Kacheln - nur für Administrator und Hauptbenutzer. Der Zeiger und
   das Anheben beim Überfahren sagen "hier kann man klicken", ohne dass die Tafel
   für alle anderen anders aussieht. */
a.tafel-kachel.bedienbar {
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}

a.tafel-kachel.bedienbar:hover,
a.tafel-kachel.bedienbar:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Das Kürzel sitzt IMMER in der Mitte der Kachel — unabhängig davon, ob
   darunter noch „Urlaub", „Pause" oder eine Dauer steht.

   Vorher waren Kürzel und Zusatz zusammen zentriert; sobald ein Zusatz da war,
   rutschte das Kürzel nach oben. Auf einer Wand mit vierzig Kacheln, von denen
   nur ein Teil einen Zusatz trägt, ergibt das eine unruhige Zickzacklinie —
   und das Kürzel ist die Information, auf die das Auge zuerst springt.

   Umgesetzt, indem der Zusatz aus dem Fluss genommen wird (position: absolute).
   Er beansprucht dadurch keinen Platz mehr, den sich das Kürzel teilen müsste. */
.tafel-kachel {
    position: relative;
    border: 2px solid;
    border-radius: 10px;
    padding: 1.1rem 0.6rem 0.9rem;
    text-align: center;
    min-height: 6.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tafel-kachel .kuerzel {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
}

.tafel-kachel .zusatz {
    position: absolute;
    left: 0.4rem;
    right: 0.4rem;
    bottom: 0.5rem;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    /* Ein langer Text („Freizeitausgleich") darf die Kachel nicht sprengen. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Das Statuszeichen oben rechts - die farbunabhängige zweite Unterscheidung.
   Rund 8 % der Männer unterscheiden Grün und Gelb schlecht; die Farbe allein
   darf die Information nicht tragen. */
.tafel-kachel .zeichen {
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;
    font-size: 0.8rem;
    opacity: 0.75;
}

.tafel-kachel.anwesend { background: var(--anwesend); border-color: var(--anwesend-rand); }
.tafel-kachel.pause    { background: var(--pause);    border-color: var(--pause-rand); }
.tafel-kachel.abwesend { background: var(--abwesend); border-color: var(--abwesend-rand); }
.tafel-kachel.urlaub   { background: var(--urlaub);   border-color: var(--urlaub-rand); }
.tafel-kachel.krank    { background: var(--krank);    border-color: var(--krank-rand); }
.tafel-kachel.feiertag {
    background: var(--urlaub);
    border-color: var(--urlaub-rand);
    border-style: dashed;
}