/* Ergänzungen des Mitarbeiterbereichs zu shared/css/app.css (Stile der Hauptanwendung) */

/* Bezeichnung „Mitarbeiter“ neben dem Logo */
.staff-label {
    display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
    border-radius: 999px; background: var(--blue-500); color: #fff;
    font-size: 13.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.staff-brand { display: flex; align-items: center; justify-content: center; gap: 12px; }

/* Anmeldung: eine zentrierte Karte ohne Werbespalte */
.staff-login .auth-main { min-height: 100dvh; }
.staff-login .auth-head { text-align: center; }
.staff-username {
    display: inline-block; margin-top: 4px; padding: 4px 12px; border-radius: 10px;
    background: var(--blue-50); color: var(--blue-700); font-size: 20px; font-weight: 700; letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
}

/* App-Shell wie in der Hauptanwendung; nur das Logo mit der Bezeichnung „Mitarbeiter“ */
.staff-shell .topbar .brand { display: inline-flex; align-items: center; gap: 12px; }

@media (max-width: 640px) {
    .staff-shell .topbar .brand-logo { height: 32px; }
    .staff-label { height: 24px; padding: 0 9px; font-size: 12px; }
}

/* Übersicht: die übrigen Seiten als Kacheln */
.staff-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.staff-tile {
    display: flex; align-items: center; gap: 14px; padding: 18px 20px;
    color: var(--ink-800); text-decoration: none; transition: border-color .15s, box-shadow .15s;
}
.staff-tile:hover { color: var(--ink-900); border-color: var(--blue-300); box-shadow: var(--shadow-lg); }
.staff-tile:focus-visible { outline: none; box-shadow: var(--ring); }
.staff-tile strong { font-size: 16px; }
.staff-tile-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-500); }
.staff-tile-icon svg { width: 22px; height: 22px; }
.staff-tile-arrow { width: 18px; height: 18px; margin-left: auto; color: var(--ink-300); }

/* Stammdaten: Abschnitte wie im Formular der Firma, ohne Zusammenfassung daneben */
.staff-form { max-width: 960px; }

/* Zeiterfassung: heutiger Tag hervorgehoben */
.staff-today td { background: var(--blue-50); }
/* Mobil ist jede Zeile eine Karte mit Innenabstand: dann die ganze Zeile einfärben, nicht die einzelnen Zellen */
@media (max-width: 640px) {
    .staff-today { background: var(--blue-50); box-shadow: inset 3px 0 0 var(--blue-500); }
    .staff-today td { background: transparent; }
}
/* Noch offener Ist-Zeitraum (ohne „bis“) */
.staff-open-slot { background: var(--warning-bg); color: var(--warning); }
/* Stempeluhr auf der Übersicht */
.staff-clock { display: grid; gap: 12px; padding: 20px 22px; margin-bottom: 20px; }
/* Zweizeilig, damit der Text auch am Handy passt */
.staff-clock .btn-lg { height: auto; min-height: 68px; padding-top: 10px; padding-bottom: 10px; gap: 12px; white-space: normal; }
.staff-clock .btn-lg svg { width: 26px; height: 26px; flex: none; }
.staff-clock-label { display: grid; justify-items: start; line-height: 1.2; text-align: left; }
.staff-clock-label span:first-child { font-size: 13px; font-weight: 600; opacity: .9; }
.staff-clock-label span:last-child { font-size: 18px; font-weight: 700; }
.staff-clock.running { border-color: var(--orange-500); }
.staff-clock-time { display: grid; justify-items: center; gap: 2px; }
.staff-clock-timer { font-size: 40px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--ink-900); }
.staff-clock-time small, .staff-clock-event { text-align: center; color: var(--ink-500); font-size: 13px; }

/* Zeiterfassung: Tag, Soll, Ist und Abweichung in einer Zeile */
.staff-nowrap { white-space: nowrap; }
/* Summe unter der Liste */
.staff-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--surface-2); }
.staff-sum-label { font-weight: 700; margin-right: auto; }
.staff-sum div { display: grid; justify-items: end; }
.staff-sum small { font-size: 12px; color: var(--ink-400); font-weight: 600; }
/* Soll-Zeit im Dialog */
.staff-plan-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.staff-plan-row strong { margin-left: auto; }
.staff-tracking-note { padding-top: 16px; padding-bottom: 16px; }
/* Mein Profil: schmale Karten */
.staff-narrow { max-width: 640px; }