/* ==========================================================================
   Mitarbeiterseite (/mitarbeiter) — Personenauswahl und Stempeluhr.

   Bedient wird das an einem Wandtablet, im Stehen, oft mit fettigen Fingern und
   im Vorbeigehen. Daraus folgt alles Weitere: große Trefferflächen, Antwort auf
   den Druck statt auf das Loslassen, und keine Fläche, die beim Tippen ihre Höhe
   ändert — wer eine Kachel trifft und die nächste verfehlt, weil das Raster
   nachgerutscht ist, tippt zweimal.

   Eine Farbe trägt Bedeutung: die des Mitarbeiters, dieselbe wie in der
   Kassenübersicht. Der Zustand („seit 08:15", „in Pause") steht als Text, nicht
   als weitere Farbe — eine Liste aus grünen Pillen liest niemand mehr.

   Ergänzt sb-page.css; jede Regel hängt an einer wf-*-Klasse.
   ========================================================================== */

/* -- Personenauswahl ------------------------------------------------------- */
.wf-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
    gap: 0.75rem;
}

.wf-person {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "mark name"
        "mark state";
    align-items: center;
    column-gap: 0.85rem;
    row-gap: 0.1rem;
    min-height: 5rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--sb-border);
    border-left: 3px solid transparent;
    border-radius: var(--sb-radius);
    background: var(--sb-bg-card);
    color: var(--sb-text);
    text-align: start;
}

/* Wer im Haus ist, bekommt eine Kante — kein Etikett. Die Kachel bleibt dadurch
   exakt gleich groß, egal ob jemand eingestempelt ist oder nicht. Vorher hielt
   eine unsichtbare Pille den Platz frei; das ist derselbe Gedanke ohne den Trick. */
.wf-person.is-present { border-left-color: var(--sb-success); }

.wf-person__initials {
    grid-area: mark;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--wf-person-color, var(--sb-text-muted)) 22%, var(--sb-bg-elev));
    box-shadow: inset 0 0 0 2px var(--wf-person-color, var(--sb-border));
    color: var(--sb-text);
    font-family: var(--sb-font-mono);
    font-size: var(--sb-fs-md);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.wf-person__name {
    grid-area: name;
    font-size: var(--sb-fs-lg);
    font-weight: 600;
    line-height: 1.2;
}

.wf-person__state {
    grid-area: state;
    color: var(--sb-text-muted);
    font-size: var(--sb-fs-sm);
    font-variant-numeric: tabular-nums;
}

.wf-person.is-present .wf-person__state { color: var(--sb-text-dim); }

/* -- Stempeluhr ------------------------------------------------------------ */
/* Name klein über dem Zustand: wer hier steht, weiß, wer er ist — er will wissen,
   ob er drin ist. Die Zeile, wegen der jemand kommt, ist die Überschrift. */
.wf-clock__who {
    margin: 0;
    color: var(--sb-text-muted);
    font-size: var(--sb-fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wf-clock__state {
    font-variant-numeric: tabular-nums;
}

.wf-clock__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

/* Ab Tabletbreite nebeneinander: Aktion links, Ziffernblock rechts. Beides
   gleichzeitig sichtbar — vorher erschien der Block erst nach der Auswahl, und
   die Karte wuchs unter dem Finger. */
@media (min-width: 48rem) {
    .wf-clock__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

.wf-clock__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wf-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.6rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    background: var(--sb-bg-card);
    color: var(--sb-text-dim);
    font-size: var(--sb-fs-lg);
    text-align: start;
}

.wf-action .bi { font-size: 1.2em; }

/* Die gewählte Aktion trägt die einzige kräftige Fläche des Bildschirms. Vorher
   konkurrierten grün, rot und blau nebeneinander um dieselbe Aufmerksamkeit. */
.wf-action.is-chosen {
    border-color: color-mix(in srgb, var(--sb-accent) 55%, var(--sb-border));
    background: color-mix(in srgb, var(--sb-accent) 14%, var(--sb-bg-card));
    color: var(--sb-text);
    font-weight: 600;
}

/* Feierabend ist die eine Handlung, die man nicht versehentlich tut. Sie bleibt
   ruhig, bis sie gewählt ist — dann sagt die Farbe, was gleich passiert. */
.wf-action--leave.is-chosen {
    border-color: color-mix(in srgb, var(--sb-danger) 55%, var(--sb-border));
    background: color-mix(in srgb, var(--sb-danger) 14%, var(--sb-bg-card));
}

.wf-clock__pin-label {
    margin-bottom: 0.5rem;
    color: var(--sb-text-dim);
    font-size: var(--sb-fs-md);
}

/* -- Rückmeldung auf den Druck --------------------------------------------- */
.wf-person:focus-visible,
.wf-action:focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .wf-person,
    .wf-action {
        transition: background-color var(--sb-dur) var(--sb-ease),
                    border-color var(--sb-dur) var(--sb-ease),
                    transform 0.1s ease-out;
    }
}

/* Auf den Druck, nicht auf das Loslassen: am Touchscreen ist das der einzige
   Moment, in dem das Gerät bestätigt, dass es den Finger gesehen hat. */
.wf-person:active,
.wf-action:active { transform: scale(0.985); }

/* Ein Touchscreen lässt Hover nach dem Antippen stehen — die zuletzt getippte
   Kachel sähe sonst dauerhaft ausgewählt aus. */
@media (hover: hover) and (pointer: fine) {
    .wf-person:hover,
    .wf-action:hover { border-color: color-mix(in srgb, var(--sb-accent) 40%, var(--sb-border)); }
}

/* -- Persönlicher Bereich -------------------------------------------------- */
/* Der Ziffernblock steht am Wandtablet mittig und in Daumenbreite — er ist hier
   dieselbe Handlung wie am Stempelterminal und soll sich auch so anfühlen. */
.wf-unlock .numeric-keypad {
    max-width: 22rem;
    margin-inline: auto;
}

/* Unterschreiben ist ein Vorgang, kein Formularfeld: PIN und Taste stehen als
   eine Einheit am Ende des Antrags, nicht zwischen Datum und Anmerkung. */
.wf-sign {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.85rem;
    border-top: var(--sb-rule-dashed);
}

.wf-sign__pin { width: 10rem; }