/* ============================================================
   Zeiterfassung – Modern Minimal Theme
   Design system: neutral surfaces, one accent, soft radii
   ============================================================ */

:root {
    /* Akzent: kräftiges, klares Blau */
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-soft: #dbeafe;

    /* Neutral: Weiß + Hellgrau, dunkles Anthrazit */
    --bg: #f4f6f8;
    --surface: #ffffff;
    --border: #e5e8ec;
    --text: #1f2937;
    --text-muted: #6b7280;

    --sidebar-bg: #1e2530;      /* dunkles Anthrazit */
    --sidebar-text: #e5e9ef;
    --sidebar-muted: #9aa5b5;
    --sidebar-hover: rgba(255, 255, 255, 0.06);
    --sidebar-active: var(--accent);

    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);

    /* Typografie: moderne Sans-Serif mit klarer Hierarchie */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;

    /* Shift type colors */
    --shift-phone-bg: #e0e7ff;
    --shift-phone-text: #3730a3;
    --shift-meeting-bg: #d1fae5;
    --shift-meeting-text: #065f46;
    --shift-transfer-bg: #fef3c7;
    --shift-transfer-text: #92400e;
}

* {
    -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   APP SHELL: Sidebar + Header + Content
   ============================================================ */
body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
}

.app-shell {
    display: none;
    min-height: 100vh;
}

/* ---- Sidebar (dunkles Anthrazit, weiße Schrift) ---- */
.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 232px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .22s ease;
}

.sidebar-brand {
    padding: 20px 22px 16px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.sidebar-brand i { color: var(--accent); margin-right: 4px; }

.sidebar-nav {
    display: block;   /* Menüpunkte immer UNTEREINANDER */
    list-style: none;
    margin: 12px 0 0;
    padding: 0 12px;
    flex: 1;
    overflow-y: auto;
}

.sidebar-nav li { margin-bottom: 2px; }

.sidebar-nav .nav-link,
.sidebar-footer .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-text);
    font-size: .92rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}

.sidebar-nav .nav-link i { font-size: 1.05rem; color: var(--sidebar-muted); width: 22px; text-align: center; }

.sidebar-nav .nav-link:hover,
.sidebar-footer .nav-link:hover {
    background: var(--sidebar-hover);
    color: #fff;
}

.sidebar-nav .nav-link.active {
    background: var(--sidebar-active);
    color: #fff;
}

.sidebar-nav .nav-link.active i { color: #fff; }

.sidebar-footer {
    padding: 12px 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    display: none;
    flex-direction: column;
    gap: 6px;
}

.sidebar-footer .settings-link { color: var(--sidebar-muted); }
.sidebar-footer .settings-link i { color: var(--sidebar-muted); }

.btn-logout {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--sidebar-muted);
    font-size: .92rem;
    font-weight: 500;
    transition: background .12s ease, color .12s ease;
}

.btn-logout:hover { background: rgba(239, 68, 68, .12); color: #fca5a5; }

/* ---- Hauptbereich ---- */
.main-area {
    flex: 1;
    margin-left: 232px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ---- Header ---- */
.top-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1020;
}

.header-left h1 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -.01em;
}

.header-date {
    margin: 2px 0 0;
    font-size: .82rem;
    color: var(--text-muted);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.icon-btn {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: var(--text);
    padding: 6px;
    border-radius: 50%;
    transition: background .12s ease;
}

.icon-btn:hover { background: var(--bg); }

.notif-badge {
    position: absolute;
    top: 0; right: -2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: .64rem;
    line-height: 17px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-weight: 700;
}

.user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.user-avatar-xs {
    width: 24px;
    height: 24px;
    font-size: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    vertical-align: middle;
}

/* ---- Hamburger (mobil, floating top right) ---- */
.hamburger {
    display: none;
    position: fixed;
    top: 14px;
    right: 14px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    background: var(--sidebar-bg);
    color: #fff;
    font-size: 1.5rem;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    z-index: 1060;
}

/* ---- Content ---- */
.content {
    padding: 24px 28px 48px;
    max-width: 1600px;
    width: 100%;
}

/* ---- Dashboard: Timer + Widgets ---- */
.dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.dash-main { min-width: 0; }
.dash-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.timer-card {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.timer-label {
    margin: 0 0 6px;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
}

.timer-label.active { color: #16a34a; }

.big-timer {
    font-size: clamp(3rem, 8vw, 4.6rem);
    font-weight: 800;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    color: var(--text);
}

.btn-accent {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}

.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

.btn-quiet {
    background: #e9edf2;
    border-color: #e9edf2;
    color: var(--text);
    font-weight: 600;
}

.btn-quiet:hover { background: #dde3ea; border-color: #dde3ea; color: var(--text); }

.btn-quiet.btn-danger-like, #stopWorkBtn {
    background: #e9edf2;
    border-color: #e9edf2;
    color: var(--text);
}

/* --- Pause-Button: Halte-Fortschritt --- */
#pauseBtn { position: relative; overflow: hidden; transition: transform .12s ease; }
/* --- Stempel-Buttons (Arbeit/Pause/Feierabend): Halte-Fortschritt --- */
.holdable {
    position: relative; overflow: hidden;
    transition: transform .12s ease;
    background-repeat: no-repeat;
}
@keyframes holdFill { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.holdable.holding {
    transform: scale(.97);
    color: #fff !important;
    border-color: #16a34a !important;
}

/* --- Aktive Pause: Button NEUTRAL, die Uhr atmet stattdessen --- */
@keyframes clockBreath {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0);       background-color: rgba(34,197,94,0); }
    50%      { box-shadow: 0 0 32px 6px rgba(34,197,94,.10); background-color: rgba(34,197,94,.10); }
}
.timer-card.on-pause {
    background-image: repeating-linear-gradient(45deg,
        rgba(34, 197, 94, .08) 0 10px,
        transparent 10px 22px);
    animation: stripesPan 7s linear infinite;
}
@keyframes stripesPan {
    from { background-position: 0 0; }
    to   { background-position: 62px 0; }
}
/* Pausen-Button aktiv: gruener Zustand */
#pauseBtn.pause-active,
#pauseBtn.pause-active:hover,
#pauseBtn.pause-active:focus {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #fff !important;
}
/* Beim Halten (Pausen-Ende) liegt unter dem entladenden Gruen eine GRAUE Schicht */
#pauseBtn.pause-active.holding,
#pauseBtn.pause-active.holding:hover,
#pauseBtn.pause-active.holding:focus {
    background: #6b7280 !important;
    border-color: #4b5563 !important;
}

/* Pause-Hinweis als gruene Pille */
#pauseInfo:not(:empty) {
    display: inline-block; margin-top: 6px;
    padding: 3px 12px; border-radius: 999px;
    background: linear-gradient(90deg, #dcfce7, #bbf7d0);
    color: #14532d; font-weight: 600;
}

.shift-info-bar {
    background: var(--bg);
    border-top: 1px solid var(--border);
    padding: 10px 16px;
    font-size: .85rem;
    color: var(--text-muted);
    text-align: center;
}

.stat-card {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.stat-card h4 { font-weight: 700; }

/* Widgets rechte Spalte */
.widget-card {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.widget-head {
    padding: 12px 16px;
    font-weight: 600;
    font-size: .9rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.upcoming-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}

.upcoming-item:last-child { border-bottom: none; }
.upcoming-item strong { font-size: .86rem; }

.vacation-progress {
    height: 10px;
    border-radius: 6px;
    background: var(--bg);
}

.vacation-progress .progress-bar { background: var(--accent); border-radius: 6px; }

.vacation-pending {
    margin-top: 10px;
    font-size: .8rem;
    color: var(--text-muted);
}

/* Mitarbeiter-Kürzel in Tabellen */
.table td .user-avatar-xs { margin-right: 2px; }

/* Mal-Dropdown: größer und klar sichtbar */
.paint-select {
    min-width: 250px;
    max-width: 100%;
    font-size: .95rem;
    font-weight: 500;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Tagesgruppierung in Zeitlisten */
.day-group-row td {
    background: var(--surface);
    border-top: 1px solid var(--border) !important;
    font-size: .82rem;
    padding: 8px 10px !important;
}

.dow-label {
    display: inline-block;
    min-width: 34px;
    color: var(--text-muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ---- Soll-Abdeckung ---- */
.coverage-row {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border);
}

.coverage-row:last-child { border-bottom: none; }

.coverage-label {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: .88rem;
}

.coverage-bar {
    height: 8px;
    border-radius: 5px;
    background: var(--bg);
    overflow: hidden;
}

.coverage-fill {
    height: 100%;
    border-radius: 5px;
    background: var(--cov-color, var(--accent));
    transition: width .3s ease;
}

.coverage-status { font-size: .8rem; white-space: nowrap; }
.coverage-status.ok { color: #16a34a; }
.coverage-status.missing { color: #d97706; }

/* ---- Wochentag-Zeiten im Mehrtägig-Dialog ---- */
.weekend-times .weekend-row td,
.weekday-times .weekend-row { background: #fafbfc; }

.weekday-times td { padding: 4px 6px; }

/* ---- Login (Vollbild, ohne Shell) ---- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 20px;
}

/* ============================================================
   MOBILE: Sidebar wird Fullscreen-Menü
   ============================================================ */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
        width: 100%;
        z-index: 1055;
        transition: transform .25s ease;
    }

    body.menu-open .sidebar { transform: translateX(0); }

    .main-area { margin-left: 0; }

    .top-header { padding: 14px 16px 14px 16px; padding-right: 74px; }
    .header-left h1 { font-size: 1.1rem; }

    .hamburger { display: flex; }

    .content { padding: 16px 14px 40px; }

    .dash-grid { grid-template-columns: 1fr; }
    .dash-side { order: 2; }

    body.menu-open .sidebar-nav .nav-link {
        padding: 16px 18px;
        font-size: 1.05rem;
    }

    .big-timer { font-size: clamp(2.6rem, 14vw, 4rem); }
}

/* ---- Responsive Grid für Desktop schmal (Sid widgets entfallen) ---- */

body {
    background-color: var(--bg);
    min-height: 100vh;
    letter-spacing: -0.01em;
}

h1, h2, h3, h4 {
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* ---------- Navbar ---------- */
.navbar.bg-primary {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
}

.navbar .navbar-brand {
    font-weight: 700;
    color: var(--text) !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar .navbar-brand i {
    color: var(--accent);
}

.navbar .nav-link {
    color: var(--text-muted) !important;
    font-weight: 500;
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.85rem !important;
    transition: color .15s ease, background-color .15s ease;
}

.navbar .nav-link:hover {
    color: var(--text) !important;
    background: var(--bg);
}

.navbar .nav-link.active {
    color: var(--accent) !important;
    background: var(--accent-soft);
}

.navbar .btn-outline-light {
    border-color: var(--border);
    color: var(--text-muted);
}

.navbar .btn-outline-light:hover {
    background: var(--bg);
    color: var(--text);
    border-color: var(--border);
}

/* ---------- Cards ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.9rem 1.25rem;
}

.card-body {
    padding: 1.25rem;
}

/* ---------- Buttons ---------- */
.btn {
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: all .15s ease;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: none;
}

.btn-outline-secondary {
    border-color: var(--border);
    color: var(--text-muted);
}

.btn-outline-secondary:hover {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}

.btn-success {
    background: #059669;
    border-color: #059669;
}

.btn-danger {
    background: #dc2626;
    border-color: #dc2626;
}

.btn-lg {
    padding: 0.7rem 2rem;
    border-radius: var(--radius);
}

/* ---------- Forms ---------- */
.form-control,
.form-select {
    border-radius: var(--radius-sm);
    border-color: var(--border);
    padding: 0.5rem 0.75rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.35rem;
}

/* ---------- Tables ---------- */
.table th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border) !important;
}

.table td {
    border-color: var(--border);
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: var(--bg);
}

/* ---------- Badges ---------- */
.badge {
    font-weight: 500;
    padding: 0.45em 0.75em;
    border-radius: 999px;
}

.badge.bg-primary   { background: var(--accent) !important; }
.badge.bg-info     { background: #06b6d4 !important; color: #fff !important; }
.badge.bg-warning  { background: #f59e0b !important; color: #78350f !important; }

/* ---------- Modals ---------- */
.modal-content {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

.modal-header {
    border-bottom: 1px solid var(--border);
}

.modal-footer {
    border-top: 1px solid var(--border);
}

/* ---------- Toast ---------- */
.toast {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

/* ---------- Tab transitions ---------- */
.tab-content-section {
    animation: fadeIn 0.25s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Running timer ---------- */
#currentDuration {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- Login ---------- */
#loginSection {
    min-height: 80vh;
    align-items: center;
}

#loginSection .card {
    margin-top: 8vh;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* ---------- Admin tabs ---------- */
#adminTabs .nav-link {
    border: none;
    color: var(--text-muted);
    font-weight: 500;
}

#adminTabs .nav-link.active {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    background: none;
}

/* ---------- Progress (Soll/Ist) ---------- */
.progress {
    border-radius: 999px;
    background: var(--bg);
}

/* ---------- List groups ---------- */
.list-group-item {
    border-color: var(--border);
}

.list-group-item-light.fw-bold {
    background: var(--bg);
    font-size: 0.85rem;
    color: var(--text-muted) !important;
}

/* ============================================================
   SHIFT MATRIX (Dienstplan: Zeilen=Mitarbeiter, Spalten=Tage)
   ============================================================ */

.matrix-wrap {
    overflow-x: auto;
    -webkit-user-select: none;
    user-select: none;
}
/* Tastatur-Fokus klar sichtbar (Mausklick ohne Ring) */
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
.form-check-input:focus-visible, [data-tab]:focus-visible, a.nav-link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent, #2563eb) 55%, transparent);
    outline-offset: 2px;
}

/* Lade-Zustand: Inhalt bleibt sichtbar, sanft abgedunkelt + Spinner */
.matrix-wrap.loading {
    position: relative;
    pointer-events: none;
}
.matrix-wrap.loading::after {
    content: "Dienste werden geladen \2026";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .55);
    color: var(--accent, #2563eb);
    font-weight: 600;
    z-index: 5;
}

.matrix-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 0.78rem;
}

.matrix-table th,
.matrix-table td {
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

/* Corner + row head */
.matrix-corner {
    min-width: 110px;
    text-align: left !important;
    padding-left: 6px !important;
    font-size: 0.72rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--surface);
}

.matrix-table .row-head {
    min-width: 110px;
    max-width: 130px;
    text-align: left !important;
    padding: 4px 6px !important;
    font-weight: 600;
    line-height: 1.15;
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

.matrix-table .row-head small {
    color: var(--text-muted);
    font-size: 0.68rem;
}

/* Day header cells – kompakt */
.matrix-table th.matrix-day {
    min-width: 30px;
    max-width: 34px;
    padding: 3px 0 !important;
    font-weight: 500;
    cursor: default;
}

.matrix-table th.matrix-day span {
    display: block;
    font-size: 0.58rem;
    color: var(--text-muted);
    letter-spacing: 0;
    text-transform: none;
}

.matrix-table th.matrix-day strong {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
}

.matrix-table th.matrix-day.weekend {
    background: var(--bg);
    border-radius: 6px;
}

.matrix-table th.matrix-day.today {
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 6px;
}

.matrix-table th.matrix-day.today strong {
    color: var(--accent);
}

/* Body cells – deutlich kleiner als zuvor */
.matrix-cell {
    min-width: 30px;
    max-width: 34px;
    height: 32px;
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease;
}

/* Geburtstag: Kuchen-Ecke, ohne die Zelle als belegt zu markieren */
.birthday-badge {
    position: absolute;
    top: -6px;
    right: -5px;
    z-index: 3;
    font-size: .68rem;
    line-height: 1;
    padding: 1px 3px;
    border-radius: 6px;
    background: #fdf2f8;
    box-shadow: 0 0 0 1px #f9a8d4;
    pointer-events: none;
}

.matrix-cell.weekend {
    background: var(--bg);
}

.matrix-cell.today {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.matrix-cell:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
    z-index: 2;
    position: relative;
}

.matrix-cell:active {
    transform: scale(0.94);
}

/* While painting a range */
.matrix-cell.painting {
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
    background: var(--accent-soft) !important;
}

/* Bearbeiten-Modus: nur die Zeile im Fokus, alle anderen abdunkeln.
   Wird beim Malen/Eintragen bzw. Rechtsklick-Loeschen gesetzt. */
#shiftMatrix.row-focus .matrix-table tbody tr {
    opacity: 0.3;
    transition: opacity 0.12s ease;
}
#shiftMatrix.row-focus .matrix-table tbody tr.paint-focus-row {
    opacity: 1;
}
#shiftMatrix.row-focus .matrix-table tbody tr.paint-focus-row .row-head {
    font-weight: 800;
}

/* Chips in belegten Zellen */
.cell-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 0.8rem;
    line-height: 1;
}

/* Gestapelte Einträge (mehrere Schichten/Urlaub am selben Tag) */
.cell-stack {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    height: 100%;
}

.cell-stack .cell-chip {
    flex: 1;
    min-height: 0;
    font-size: 0.72rem;
}

.cell-stack.stacked {
    padding: 1px;
}

.cell-stack.stacked .cell-chip {
    font-size: 0.62rem;
    border-radius: 4px;
}

.matrix-cell.filled {
    cursor: pointer;
}

/* Beim Malen über belegte Zellen (Konflikt) */
.matrix-cell.paint-conflict {
    outline: 2px dashed #dc2626 !important;
    outline-offset: -2px;
    background: color-mix(in srgb, #dc2626 8%, white) !important;
}

/* Rechtsklick-Lösch-Geste */
.matrix-cell.erasing {
    outline: 2px solid #dc2626 !important;
    outline-offset: -2px;
    background: color-mix(in srgb, #dc2626 14%, white) !important;
}

.matrix-cell.erasing .cell-chip {
    opacity: 0.45;
}

/* ArbZG-Pausenwarnung: gelb = Pause zu kurz, rot = keine Pause */
.pause-warn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: #f0ad4e;
    color: #212529;
    font-weight: 800;
    font-size: 0.72rem;
    line-height: 1;
    vertical-align: middle;
    margin-left: 0.3rem;
    cursor: help;
}
.pause-warn.pause-warn-missing { background: #dc3545; color: #fff; }
.pause-warn-who {
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
    margin-left: 0.1rem;
    margin-right: 0.25rem;
    vertical-align: middle;
}

/* Stundenabrechnung: ein Block je ausgewaehlter Person */
.st-user-block { margin-bottom: 1.5rem; }
.st-user-block:last-child { margin-bottom: 0; }
.st-user-head {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--bs-secondary-color);
    margin: 0 0 0.35rem 0.15rem;
}

/* Abwesenheitsliste: chronologische Abschnitte */
.abs-section-head {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-secondary-color);
    margin: 1rem 0 0.4rem;
    padding-left: 0.25rem;
}
.abs-section-head:first-child { margin-top: 0; }
.abs-section-upcoming { color: var(--bs-primary); }
.abs-section-current { color: var(--bs-success); }

/* Legacy shift calendar classes removed (replaced by matrix). */

/* Paint toolbar reflects selected type */
.paint-bar {
    border-left: 4px solid var(--accent);
    transition: border-color .15s ease;
}

.paint-bar[data-type="telefonbereitschaft"] { border-left-color: #6366f1; }
.paint-bar[data-type="besprechen"]          { border-left-color: #10b981; }
.paint-bar[data-type="ueberfuehrung"]       { border-left-color: #f59e0b; }

/* Legacy shift badges */
.shift-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.8rem;
}

.shift-badge-telefonbereitschaft { background: var(--shift-phone-bg);    color: var(--shift-phone-text); }
.shift-badge-besprechen          { background: var(--shift-meeting-bg);  color: var(--shift-meeting-text); }
.shift-badge-ueberfuehrung       { background: var(--shift-transfer-bg); color: var(--shift-transfer-text); }
.shift-badge-bereitschaft        { background: var(--shift-phone-bg);    color: var(--shift-phone-text); }
.shift-badge-nacht               { background: var(--shift-phone-bg);    color: var(--shift-phone-text); }
.shift-badge-rufbereitschaft     { background: var(--shift-phone-bg);    color: var(--shift-phone-text); }

/* ============================================================
   CALENDAR TAB (week / month / list views)
   ============================================================ */

.calendar-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

.calendar-nav {
    display: flex;
    gap: 8px;
}

.calendar-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.calendar-view-btns .btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Week view */
.week-view {
    display: grid;
    grid-template-columns: 56px repeat(7, 1fr);
    min-height: 600px;
}

.week-view .time-column {
    border-right: 1px solid var(--border);
}

.week-view .time-slot {
    height: 48px;
    border-bottom: 1px solid var(--border);
    padding: 2px 8px;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: right;
}

.week-view .day-column {
    border-right: 1px solid var(--border);
    position: relative;
}

.week-view .day-header {
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface);
}

.week-view .day-header.today {
    background: var(--accent-soft);
    color: var(--accent);
}

.week-view .hour-cell {
    height: 48px;
    border-bottom: 1px solid var(--border);
    transition: background .1s ease;
}

.week-view .hour-cell:hover {
    background: var(--accent-soft);
}

/* Events */
.calendar-event {
    position: absolute;
    left: 3px;
    right: 3px;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 0.72rem;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    border-left: 3px solid;
    top: 50px;
}

.calendar-event:hover {
    filter: brightness(0.96);
    z-index: 2;
}

.calendar-event.time-entry {
    background: var(--accent-soft);
    border-left-color: var(--accent);
    color: var(--accent-hover);
}

.calendar-event.shift-telefonbereitschaft,
.calendar-event.shift-bereitschaft {
    background: var(--shift-phone-bg);
    border-left-color: #6366f1;
    color: var(--shift-phone-text);
}

.calendar-event.shift-besprechen {
    background: var(--shift-meeting-bg);
    border-left-color: #10b981;
    color: var(--shift-meeting-text);
}

.calendar-event.shift-ueberfuehrung,
.calendar-event.shift-nacht,
.calendar-event.shift-rufbereitschaft {
    background: var(--shift-transfer-bg);
    border-left-color: #f59e0b;
    color: var(--shift-transfer-text);
}

.calendar-event .event-time {
    font-weight: 600;
}

.calendar-event .event-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Month view */
.month-view {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.month-view .day-header {
    padding: 8px;
    text-align: center;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.month-view .day-cell {
    min-height: 100px;
    border: 1px solid var(--border);
    padding: 5px;
    cursor: pointer;
    transition: background .1s ease;
}

.month-view .day-cell:hover {
    background: var(--accent-soft);
}

.month-view .day-cell.other-month {
    background: var(--bg);
    color: #adb5bd;
    pointer-events: none;
}

.month-view .day-cell.today {
    background: var(--accent-soft);
}

.month-view .day-cell.weekend {
    background: var(--bg);
}

.month-view .day-number {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.month-view .day-event {
    font-size: 0.68rem;
    padding: 1px 5px;
    margin-bottom: 2px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* List view */
.list-view .list-date-header {
    background: var(--bg);
    padding: 9px 15px;
    font-weight: 600;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
}

.list-view .list-event {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .1s ease;
}

.list-view .list-event:hover {
    background: var(--bg);
}

.list-view .list-event-time {
    width: 110px;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.list-view .list-event-type {
    width: 90px;
}

.list-view .list-event-title {
    flex: 1;
}

.list-view .list-event-duration {
    color: var(--text-muted);
}

/* ---------- Entry type colors ---------- */
.entry-type-work     { color: var(--accent); }
.entry-type-meeting  { color: #7c3aed; }
.entry-type-training { color: #06b6d4; }
.entry-type-travel   { color: #f59e0b; }
.entry-type-break    { color: var(--text-muted); }

/* ---------- Absence icons ---------- */
.absence-type-vacation::before { content: '🌴 '; }
.absence-type-sick::before     { content: '🏥 '; }
.absence-type-special::before  { content: '⭐ '; }
.absence-type-business::before { content: '✈️ '; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .card-body { padding: 1rem; }
    .btn-lg { padding: 0.55rem 1.2rem; font-size: 1rem; }
    .shift-calendar .day { font-size: 0.8rem; }
    .shift-calendar .day small { display: none; }
}

/* ============================================================
   PRINT VIEW
   ============================================================ */
@page {
    size: A4 landscape;
    margin: 8mm;
}

@media print {
    .navbar,
    .sidebar,
    .top-header,
    .hamburger,
    .no-print,
    .paint-bar,
    #startWorkBtn,
    #pauseBtn,
    #stopWorkBtn,
    #timerButtons,
    .modal,
    .toast,
    .btn,
    select.form-select {
        display: none !important;
    }

    .app-shell { display: block !important; }
    .main-area { margin-left: 0 !important; }

    body {
        background: #fff !important;
        font-size: 11px;
    }

    .container-fluid {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    /* Nur die aktive Sektion drucken */
    .tab-content-section:not(.tab-active) {
        display: none !important;
    }
    .tab-content-section.tab-active {
        display: block !important;
    }

    h2 { font-size: 16px !important; margin-bottom: 6px !important; }

    .card {
        border: 1px solid #999 !important;
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .card-header {
        background: #eee !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Matrix druckt kompakt und farbig */
    .matrix-wrap {
        overflow: visible !important;
    }

    .matrix-table {
        border-spacing: 1px;
        font-size: 8.5px;
        width: 100%;
    }

    .matrix-table .row-head,
    .matrix-corner {
        position: static !important;
        min-width: 70px;
        font-size: 9px !important;
    }

    .matrix-cell {
        height: auto;
        min-width: 18px;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cell-chip,
    .badge,
    th.matrix-day.today,
    th.matrix-day.weekend {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .list-group-item .btn {
        display: none !important;
    }
}

/* Analoge Uhr im Timer-Modul */
#analogWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 4px auto 8px;
}

.analog-legend {
    display: flex;
    gap: 18px;
    justify-content: center;
    margin-top: 6px;
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
}

/* Timer-Umschalter oben rechts in der Timer-Karte */
.timer-mode-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Schichttypen-Modal: ausgerichtete Spalten statt floatender Felder */
#shiftTypesList .stype-grid {
    display: grid;
    grid-template-columns: 46px 54px minmax(120px, 1.1fr) 100px 100px minmax(150px, 1fr) 56px 40px;
    gap: .5rem;
    align-items: center;
}

#shiftTypesList .stype-row {
    padding: .45rem .35rem;
    border-bottom: 1px solid var(--border);
    border-radius: 6px;
}

#shiftTypesList .stype-row:hover {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.stype-head {
    font-size: .74rem;
    font-weight: 600;
    color: var(--text-muted);
    padding-bottom: .3rem;
    border-bottom: 2px solid var(--border);
}

.stype-legend {
    line-height: 1.5;
}

/* ArbZG-Hinweis im Verwaltungsbereich */
.arbzg-hint {
    font-size: .8rem;
    color: var(--text-muted);
}

/* ---- Monatskalender (Zeiten + Abwesenheiten) ---- */
.calendar-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
}
.calendar-table th, .calendar-table td {
    border: 1px solid var(--border);
    padding: 3px 4px;
    text-align: center;
    white-space: nowrap;
}
.calendar-table .cal-name {
    text-align: left;
    font-weight: 600;
    min-width: 170px;
    position: sticky;
    left: 0;
    background: var(--surface);
    z-index: 1;
}
.calendar-table thead th {
    background: var(--surface);
    position: sticky;
    top: 0;
}
.calendar-table .cal-weekend { background: color-mix(in srgb, var(--color-weekend, #22c55e) 10%, white); }
.calendar-table .cal-holiday { background: color-mix(in srgb, var(--color-holiday, #16a34a) 20%, white); }
.calendar-table .cal-burlaub { background: #dbeafe; }
.calendar-table .cal-today { outline: 2px solid #2563eb; outline-offset: -2px; }
.calendar-table td.cal-absence { font-weight: 700; }
.calendar-table td.cal-zero { color: var(--text-muted); }
.calendar-table tfoot td { font-weight: 700; background: var(--surface); }
.cal-legend .badge { margin-right: 2px; }

/* Eieruhr an getauschten Diensten */
.swap-hourglass { font-size: .85em; margin-left: 2px; }

/* Ampel-Badges der Urlaubs-Ruecksprache: Kuerzel gruen/rot/orange */
.vote-ampel {
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.35rem;
    padding: 0 .32rem;
    font-size: .64rem;
    font-weight: 700;
    cursor: help;
}

/* Tausch-Mehrfachauswahl: ausgewählte eigene Dienste markieren */
.matrix-cell.swap-pick {
    outline: 2.5px solid #f59e0b;
    outline-offset: -2px;
    background: #fef3c7;
    border-radius: 4px;
}
#swapSelectBar .form-select { width: auto; }

/* Tausch-Markierung im Dienstplan: Gegenpart direkt am Chip sichtbar */
.swap-hourglass.swap-partner {
    font-size: .62rem;
    font-weight: 700;
    margin-left: 3px;
    padding: 0 3px;
    border-radius: 4px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
    white-space: nowrap;
}

/* Eingetragener Dienst, der zum Tausch vorgesehen ist:
   NUR gestrichelte Linie am Rand in der FARBE DES DIENSTES (currentColor)
   + rotes Minus vor dem Kuerzel (Hintergrund bleibt normal) */
.cell-chip.swap-pending-chip {
    border: 2px dashed !important;   /* currentColor = Dienstfarbe */
}
/* Zukuenftiger Dienst (kommt durch Tausch): Schraffur in der
   HINTERGRUNDFARBE des Dienstes (gleiche Toenung wie normale Chips),
   Leerraeume transparent -> Zellhintergrund scheint durch */
.cell-chip.swap-ghost-chip {
    background-color: transparent !important;
    background-image: repeating-linear-gradient(45deg,
        color-mix(in srgb, var(--g-color, #16a34a) 22%, white) 0 3px,
        transparent 3px 6px) !important;
    color: var(--g-color, #1f2937);
}
.cell-chip.swap-ghost-chip .swap-chip-badge.swap-ghost { color: var(--g-color, #1f2937); }
/* Kollegen-Badge am eigenen Dienstchip: mit wem bin ich zusammen im Dienst? */
.crew-badge {
    display: inline-block;
    font-size: .52rem;
    font-weight: 700;
    color: #334155;
    background: color-mix(in srgb, var(--crew-color, #6366f1) 18%, white);
    border: 1px solid color-mix(in srgb, var(--crew-color, #6366f1) 45%, white);
    border-radius: 4px;
    padding: 0 2px;
    margin-left: 2px;
    white-space: nowrap;
}

/* Eigene Zeile im Dienstplan: frei waehlbare Hervorhebung.
   Der Tint liegt als inset-Schatten UBER der Zellfarbe, aber UNTER dem
   Inhalt -> Wochenend-/Tausch-/Urlaubshintergruende bleiben sichtbar. */
tr.own-row.own-hl-amber td { box-shadow: inset 0 0 0 999px rgba(245, 158, 11, .12); }
tr.own-row.own-hl-blue td { box-shadow: inset 0 0 0 999px rgba(59, 130, 246, .12); }
tr.own-row.own-hl-green td { box-shadow: inset 0 0 0 999px rgba(34, 197, 94, .12); }
tr.own-row.own-hl-violet td { box-shadow: inset 0 0 0 999px rgba(139, 92, 246, .12); }
tr.own-row.own-hl-rose td { box-shadow: inset 0 0 0 999px rgba(236, 72, 153, .12); }
tr.own-row.own-hl-amber .row-head { border-left: 4px solid #f59e0b; }
tr.own-row.own-hl-blue .row-head { border-left: 4px solid #3b82f6; }
tr.own-row.own-hl-green .row-head { border-left: 4px solid #22c55e; }
tr.own-row.own-hl-violet .row-head { border-left: 4px solid #8b5cf6; }
tr.own-row.own-hl-rose .row-head { border-left: 4px solid #ec4899; }

/* Abwesenheits-Tageschips: Wochentag ueber der Tageszahl, Monatsmarker davor */
.abs-day-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.05;
    padding: .15rem .45rem .25rem;
    vertical-align: top;
}
.abs-day-chip .abs-dow {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.abs-day-chip .abs-dom {
    font-size: .85rem;
    font-weight: 600;
}
.abs-month-mark {
    align-self: center;
    margin-right: .2rem;
    color: #6c757d;
    font-size: .95rem;
}

/* Rotes Minus VOR dem Dienstkuerzel (weggetauscht) */
.swap-chip-badge.swap-minus {
    color: #dc2626;
    font-weight: 800;
    margin-right: 1px;
}

/* Tausch-Pendenzen im KALENDER */
/* Eigener Dienst an dem Tag fallt weg: NUR gestrichelte Linie am Zellrand
   in der Farbe des Dienstes */
td.cal-swap-minus {
    outline: 2px dashed var(--m-color, #b45309);
    outline-offset: -2px;
}
/* Neuer Dienst kommt dazu: Schraffur in der HINTERGRUNDFARBE des Dienstes,
   Leerraeume transparent (Zell-/Wochenend-Hintergrund scheint durch) */
td.cal-swap-plus {
    background: repeating-linear-gradient(45deg,
        color-mix(in srgb, var(--g-color, #16a34a) 22%, white) 0 5px,
        transparent 5px 10px) !important;
}
.cal-sign {
    font-weight: 800;
    font-size: .78rem;
    line-height: 1;
}
.cal-sign.neg { color: #dc2626; }
.cal-sign.pos { color: #16a34a; }
/* angemalte FREMDE Tage im Auswahl-Modus: blaue statt gelbe Markierung */
.matrix-cell.swap-pick-foreign {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
    background-color: rgba(37, 99, 235, .10) !important;
}

/* Ausstehender Urlaub im Kalender: gestrichelte Umrandung am Badge */
.cal-absence .badge.abs-pending,
.calw-absence.abs-pending {
    border: 1.5px dashed currentColor;
}

/* Kalenderwochen-Kopfzeile im Schichtplan */
.matrix-kw-row th { padding: 1px 2px; }
.matrix-kw {
    font-size: .68rem;
    font-weight: 700;
    color: #64748b;
    background: color-mix(in srgb, #2563eb 7%, white);
    border-left: 1px dashed #cbd5e1;
    text-align: center;
    letter-spacing: .02em;
}
.matrix-kw-corner { font-size: .62rem; color: #94a3b8; }

/* Heute-Streifen: durchgehende Spalte ueber Kopf und Koerper */
.matrix-day.today {
    background: color-mix(in srgb, #2563eb 16%, white);
    box-shadow: inset 2px 0 0 #2563eb, inset -2px 0 0 #2563eb;
}
.matrix-cell.today {
    background: color-mix(in srgb, #2563eb 8%, white);
    box-shadow: inset 2px 0 0 #2563eb, inset -2px 0 0 #2563eb;
}

/* Kalender: klickbare Tageskoepfe und Mitarbeiter */
.cal-day-click, .cal-user-click { cursor: pointer; }
.cal-day-click:hover { background: color-mix(in srgb, #2563eb 14%, white); }
.cal-user-click:hover { color: #2563eb; text-decoration: underline; }

/* Geburtstage im Monatsraster: Kuchen in der Zelle der Person */
.cal-birthday-icon { font-size: .82em; }
.cal-birthday { background: color-mix(in srgb, #ec4899 7%, transparent); }

/* Abwesenheiten im Dienstplan: eigene Optik – schraffiert,
   Farbe kommt einstellbar aus den Abwesenheitsarten.
   Genehmigt: durchgezogene Umrandung; ausstehend: gestrichelt (s. u.) */
.cell-chip.absence-chip {
    background: color-mix(in srgb, var(--abs-color, #64748b) 12%, white);
    color: var(--abs-color, #64748b);
    border: 1.5px solid var(--abs-color, #64748b) !important;
    background-image: repeating-linear-gradient(
        45deg,
        transparent 0 5px,
        color-mix(in srgb, var(--abs-color, #64748b) 10%, transparent) 5px 9px);
}

/* Ausstehender Urlaub (noch nicht genehmigt): gestrichelte Umrandung */
.cell-chip.absence-chip.absence-pending {
    border-style: dashed !important;
}

/* Pflicht-Merkmal: ~2px roter Horizontalbalken in jeder Abwesenheit */
.cell-chip.absence-chip {
    position: relative;
}
.cell-chip.absence-chip::after {
    content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 1px;
    height: 2px;
    background: #dc2626;
    border-radius: 1px;
    pointer-events: none;
}

/* Klickbare Namen: wie Fliesstext, Hover zeigt Klickbarkeit */
.user-name-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
}
.user-name-link:hover {
    color: var(--accent, #2563eb);
    text-decoration: none;
    border-bottom-color: currentColor;
}

/* Dashboard: kommende Schichten – Tagescluster */
.upcoming-day { margin-bottom: .5rem; }
.upcoming-day:last-child { margin-bottom: 0; }
.upcoming-item + .upcoming-item { margin-top: .25rem; }

/* ===== Dienstplan: eckiger, tabellarischer Look mit Gitter + Zebra ===== */
.matrix-table th,
.matrix-table td {
    border-radius: 0;
}

/* Helles Graugitter */
.matrix-table .matrix-day,
.matrix-table .matrix-cell,
.matrix-table .row-head {
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}
.matrix-table thead th {
    border-bottom: 1px solid #d1d5db;
}
.row-head {
    border-right: 2px solid #d1d5db;
}

/* Jede zweite Zeile etwas dunkler (Zebra) */
.matrix-table tbody tr:nth-child(even) .matrix-cell:not(.weekend):not(.holiday) {
    background-color: #f3f4f6;
}
.matrix-table tbody tr:nth-child(even) .matrix-cell.weekend:not(.holiday) {
    background-color: color-mix(in srgb, var(--color-weekend, #22c55e) 16%, #eef2f0);
}

/* Feiertage in der Dienstplan-Kopfzeile sichtbar machen */
.matrix-table th.matrix-day.holiday { background: color-mix(in srgb, var(--color-holiday, #16a34a) 18%, white); }
.matrix-table th.matrix-day.burlaub { background: #dbeafe; }
.matrix-table .matrix-day-sub { display:block; font-size:.56rem; font-weight:600; color:var(--color-holiday, #16a34a); line-height:1.1; max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.matrix-table .matrix-day.burlaub .matrix-day-sub { color:#1d4ed8; }

/* Wochenende + Feiertage im einstellbaren Gruen */
.matrix-cell.weekend {
    background-color: color-mix(in srgb, var(--color-weekend, #22c55e) 14%, white);
}
.matrix-cell.holiday {
    background-color: color-mix(in srgb, var(--color-holiday, #16a34a) 20%, white);
}

/* Paint-Dropdown kompakt */
.paint-bar .paint-select {
    max-width: 240px;
    width: auto;
    min-width: 170px;
    font-size: .875rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
}

/* ===== Crosshair im Dienstplan ===== */
/* Zeile: JS setzt .xh-row auf <tr> | Spalte: .xh-col auf den Zellen.
   Als Hintergrund-UEberlagerung geloest, damit Zebra/Wochenende durchscheinen. */
.matrix-table tr.xh-row td {
    background-image: linear-gradient(
        color-mix(in srgb, var(--color-crosshair, #2563eb) 16%, transparent),
        color-mix(in srgb, var(--color-crosshair, #2563eb) 16%, transparent));
}
.matrix-table tr.xh-row td.row-head {
    background-image: linear-gradient(
        color-mix(in srgb, var(--color-crosshair, #2563eb) 26%, transparent),
        color-mix(in srgb, var(--color-crosshair, #2563eb) 26%, transparent));
    color: var(--color-crosshair, #2563eb);
}
.matrix-table tr.xh-row td.row-head small {
    color: color-mix(in srgb, var(--color-crosshair, #2563eb) 75%, var(--text, #111));
    font-weight: 600;
}
.matrix-table .xh-col {
    background-image: linear-gradient(
        color-mix(in srgb, var(--color-crosshair, #2563eb) 11%, transparent),
        color-mix(in srgb, var(--color-crosshair, #2563eb) 11%, transparent));
}
.matrix-table th.xh-col {
    background-image: linear-gradient(
        color-mix(in srgb, var(--color-crosshair, #2563eb) 14%, transparent),
        color-mix(in srgb, var(--color-crosshair, #2563eb) 14%, transparent));
    color: var(--color-crosshair, #2563eb);
    font-weight: 700;
}

/* ===== Benachrichtigungen: gross + Bildschirmmitte ===== */
.toast-container.toast-center-screen {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(680px, 94vw);
    max-width: none;
    z-index: 2200;
    pointer-events: none;      /* Klicks daneben durchlassen */
}
.toast-container.toast-center-screen .toast {
    pointer-events: auto;
    font-size: 1.1rem;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .35);
    border: 1px solid rgba(148, 163, 184, .45);
}
.toast-container.toast-center-screen .toast-header {
    padding: .95rem 1.2rem;
    font-size: 1.12rem;
}
.toast-container.toast-center-screen .toast-header strong { font-size: 1.12rem; }
.toast-container.toast-center-screen .toast-body {
    padding: 1.05rem 1.25rem 1.25rem;
    font-size: 1.12rem;
    line-height: 1.55;
    white-space: pre-line;
    max-height: 56vh;
    overflow: auto;
}

/* ===== Kalender Wochen-/Tagesansicht ===== */
.calw-scroll { max-height: 70vh; overflow: auto; position: relative; }
.calw-grid {
    display: grid;
    /* Mindestbreite pro Tag -> horizontales Scrollen statt Quetschen */
    grid-template-columns: 46px repeat(var(--cols, 7), minmax(150px, 1fr));
    position: relative;
    min-height: 480px;
    width: max(100%, calc(46px + var(--cols, 7) * 150px));
}
.calw-corner {
    grid-row: 1; grid-column: 1;
    background: #fff; border-bottom: 2px solid var(--border);
    position: sticky; top: 0; z-index: 4;
}
.calw-gutter {
    position: relative;
    grid-row: 2; grid-column: 1;
    border-right: 1px solid var(--border);
}
.calw-init {
    font-weight: 700; font-size: .72em;
    opacity: .9; margin-right: 4px;
    letter-spacing: .3px;
}
.calw-hour {
    position: absolute; right: 6px; transform: translateY(-50%);
    font-size: .68rem; color: var(--text-muted);
}
/* Kopfzeile: erste Reihe = Headcells (Spalte 2..n), Gutter-Zelle leer */
.calw-headcell {
    grid-row: 1; grid-column: auto;
    padding: 6px 8px; text-align: center;
    border-bottom: 2px solid var(--border); background: #fff;
    position: sticky; top: 0; z-index: 3;
    display: flex; flex-direction: column; line-height: 1.15;
}
.calw-headcell.weekend { background: color-mix(in srgb, var(--color-weekend, #22c55e) 10%, white); }
.calw-headcell.today { background: color-mix(in srgb, var(--accent, #2563eb) 12%, white); }
.calw-headcell.today strong { color: var(--accent, #2563eb); }
.calw-holname { font-size: .62rem; color: var(--color-holiday, #16a34a); }
.calw-bday {
    font-size: .62rem;
    color: #be185d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.calw-col {
    position: relative;
    border-right: 1px dashed var(--border);
    background-image:
        repeating-linear-gradient(to bottom,
            transparent 0, transparent calc(100%/16 - 1px),
            var(--border) calc(100%/16 - 1px), var(--border) calc(100%/16));
    min-height: 480px;
}
/* Abwesenheit fuellt das ganze Tagesfeld in der Wochenansicht */
.calw-col.abs-day {
    background-color: color-mix(in srgb, var(--abs-bg, #64748b) 9%, white);
    background-image: repeating-linear-gradient(45deg,
        transparent 0 6px, rgba(15,23,42,.055) 6px 10px);
}

/* Gutter-Hintergrundlinien passend zur ersten Spalte */
.calw-grid > .calw-gutter::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
}
.calw-col.weekend { background-color: color-mix(in srgb, var(--color-weekend, #22c55e) 8%, white); }
.calw-col.today { box-shadow: inset 3px 0 0 var(--accent, #2563eb); }

.calw-event {
    position: absolute; z-index: 2;
    margin: 0 3px; padding: 3px 6px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--color-work, #2563eb) 88%, white);
    color: #fff; font-size: .78rem; line-height: 1.25;
    overflow: hidden; cursor: pointer;
    min-height: 14px;                 /* kurze Buchungen bleiben anklickbar */
    box-shadow: 0 1px 2px rgba(0,0,0,.18);
    transition: transform .06s ease;
}
.calw-event:hover { transform: scale(1.02); z-index: 4; }
.calw-event.is-break {
    background: repeating-linear-gradient(
        45deg, color-mix(in srgb, var(--color-break, #f59e0b) 85%, white),
        color-mix(in srgb, var(--color-break, #f59e0b) 85%, white) 6px,
        color-mix(in srgb, var(--color-break, #f59e0b) 60%, white) 6px,
        color-mix(in srgb, var(--color-break, #f59e0b) 60%, white) 12px);
    color: #3d2c00; font-style: italic;
}
.calw-event.ro { cursor: pointer; opacity: .92; }
.st-entry-link { cursor: pointer; }
/* Nachtrag aufziehen: freie Tagesflaeche als Zeichenflaeche */
.draw-request-mode .calw-col { cursor: crosshair; touch-action: none; }
.calw-draw-sel {
    position: absolute; left: 0; right: 0; z-index: 1;
    background: rgba(37, 99, 235, .22);
    border: 1px dashed #2563eb; border-radius: 4px;
    pointer-events: none;
}
/* Fehlbuchung: rote Schraffur + Warnrahmen (Daten bleiben sichtbar) */
.calw-event.is-flagged {
    background: repeating-linear-gradient(
        45deg, #dc2626, #dc2626 7px, #b91c1c 7px, #b91c1c 14px) !important;
    color: #fff !important; font-style: normal;
    outline: 2px solid #7f1d1d; outline-offset: -2px;
}
.calw-event.is-flagged::before {
    content: "⚠ "; font-weight: 700;
}
/* Nachtragsantrag: gelb/amber schraffiert, wartet auf Freigabe */
.calw-event.is-request {
    background: repeating-linear-gradient(
        45deg, #fbbf24, #fbbf24 7px, #f59e0b 7px, #f59e0b 14px) !important;
    color: #3a2c00 !important; outline: 2px solid #b45309; outline-offset: -2px;
}
.calw-event.is-request::before { content: "📝 "; }
.calw-time { font-weight: 700; display: block; }
.calw-desc { display: block; opacity: .9; }

.calw-absence {
    position: sticky; top: 0; z-index: 1;
    margin: 2px; padding: 2px 5px 3px; border-radius: 6px;
    font-size: .64rem; font-weight: 600;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
    background-image: repeating-linear-gradient(45deg,
        transparent 0 5px, rgba(15,23,42,.07) 5px 9px);
}
.calw-absence::after {
    content: ''; position: absolute; left: 2px; right: 2px; bottom: 1px;
    height: 2px; border-radius: 1px; background: #dc2626;
}
/* Einheitliche Abwesenheits-/Dienst-Badges in Tag/Woche */
.calw-absence-line, .calw-shift-line { margin: 2px 2px 0; position: sticky; top: 0; z-index: 1; }
.calw-absence-line { }
.calw-absence-line .absence-chip { max-width: 100%; }
.calw-absence-line + .calw-absence-line { margin-top: 1px; }

/* Kuerzel in Abwesenheits-Balken: Typ-Buchstabe + Mitarbeiter-Kurzel */
.calw-absence .calw-abs-letter {
    display: inline-block; min-width: 1.05em; text-align: center;
    border-radius: 3px; color: #fff; font-size: .6rem; padding: 0 2px; margin-right: 3px;
}
.calw-absence .calw-abs-who { font-weight: 800; margin-right: 2px; }
.cal-vacation .calw-abs-letter { background: var(--color-vacation, #22c55e); }
.cal-sick     .calw-abs-letter { background: var(--color-sick, #ef4444); }
.cal-special  .calw-abs-letter { background: var(--color-special, #8b5cf6); }
.cal-business .calw-abs-letter { background: var(--color-business, #0ea5e9); }
/* Dunne Start-Markierung je Mitarbeiter-Bahn (Gruppierung sichtbar machen) */
.calw-event.calw-evfirst { border-left: 2px dashed rgba(15, 23, 42, .35) !important; }
/* Rote "Jetzt"-Linie auf der Zeitachse */
.calw-now {
    position: absolute; left: 0; right: 0; height: 2px;
    background: #ef4444; z-index: 5; pointer-events: none;
}
.calw-now::before {
    content: ''; position: absolute; left: -1px; top: -4px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #ef4444; box-shadow: 0 0 0 2px rgba(239, 68, 68, .25);
}
.calw-now::after {
    content: attr(data-hhmm); position: absolute; right: 2px; top: 3px;
    font-size: .6rem; font-weight: 700; color: #fff;
    background: #ef4444; border-radius: 3px; padding: 0 4px; line-height: 1.4;
}
.cal-vacation { background: color-mix(in srgb, var(--color-vacation, #22c55e) 25%, white); color: #14532d; }
.cal-sick { background: color-mix(in srgb, var(--color-sick, #ef4444) 22%, white); color: #7f1d1d; }
.cal-special { background: color-mix(in srgb, var(--color-special, #8b5cf6) 20%, white); color: #4c1d95; }
.cal-business { background: color-mix(in srgb, var(--color-business, #0ea5e9) 20%, white); color: #083344; }
/* Schraffur auch in der Wochenansicht (nach den Farb-Shorthands) */
.calw-absence.cal-vacation,
.calw-absence.cal-sick,
.calw-absence.cal-special,
.calw-absence.cal-business {
    background-image: repeating-linear-gradient(45deg,
        transparent 0 5px, rgba(15,23,42,.07) 5px 9px);
}

.calw-usermenu { max-height: 320px; overflow-y: auto; min-width: 220px; }
.calw-usermenu label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }

/* ===== Notification-Panel ===== */
.notif-panel { width: 380px; max-width: 92vw; }
.notif-panel-body { max-height: 420px; overflow-y: auto; }
.notif-item.unread { background: color-mix(in srgb, var(--accent, #2563eb) 5%, white); }
.notif-item:hover { background: color-mix(in srgb, var(--accent, #2563eb) 9%, white); }
.notif-item.read { opacity: .72; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
/* "Öffnen"-Hinweis unter klickbaren Glocken-Eintraegen */
.notif-open-hint { font-size: .72rem; color: var(--accent, #2563eb); margin-top: 2px; }

/* --- Kurzer Halte-Hinweis oben mittig (3 s) --- */
#holdHintFlash {
    position: fixed;
    transform: scale(.94);
    max-width: min(340px, 80vw); text-align: center;
    opacity: 0; pointer-events: none; z-index: 2000;
    padding: 9px 20px; border-radius: 999px;
    background: linear-gradient(120deg, #14532d, #166534);
    color: #dcfce7; font-weight: 600; font-size: .92rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    transition: opacity .2s ease, transform .2s ease;
}
#holdHintFlash.show { opacity: 1; transform: scale(1); }

/* --- Halte-Fortschritt als Overlay-Kind: identisch auf allen Stempel-Buttons --- */
.hold-progress {
    position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
    background: linear-gradient(90deg, #15803d, #22c55e);
    transform-origin: left center;
    animation: progGrow .5s linear forwards;
    z-index: 0; pointer-events: none;
}
/* Eigene Farbe je Stempel-Button */
[data-hold-color="blue"] .hold-progress { background: linear-gradient(90deg, #1d4ed8, #3b82f6); }
[data-hold-color="red"]  .hold-progress { background: linear-gradient(90deg, #b91c1c, #ef4444); }
[data-hold-color="green"] .hold-progress { background: linear-gradient(90deg, #15803d, #22c55e); }
[data-hold-color="blue"] .spinner-border { color: #3b82f6; }
[data-hold-color="red"]  .spinner-border { color: #ef4444; }
[data-hold-color="green"] .spinner-border { color: #22c55e; }
/* Pause-Ende: Button startet VOLL gruen und ENTLAEDT von rechts nach links –
   der gruene Balken schrumpft (Anker links), graue Unterschicht kommt von rechts. */
[data-hold-reverse="1"] .hold-progress {
    transform-origin: left center;
    animation: progDrain .5s linear forwards;
}
@keyframes progDrain {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}
@keyframes progGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.holdable.holding > *:not(.hold-progress) { position: relative; z-index: 1; }


/* ---- Touchpad-Terminal (PIN-Login) ---- */
#pinTerminal{position:fixed;inset:0;z-index:2000;background:var(--bg,#f1f5f9);display:flex;align-items:center;justify-content:center;}
#pinTerminal.d-none{display:none !important;}
.pin-stage{width:min(940px,94vw);max-height:96vh;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:18px;}
.pin-head{color:var(--text-muted,#64748b);font-weight:600;}
.pin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;width:100%;margin-bottom:10px;}
.pin-tile{background:#fff;border:2px solid var(--border,#e2e8f0);border-radius:16px;padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:1.05rem;font-weight:600;color:var(--text,#0f172a);transition:transform .15s,border-color .15s,box-shadow .15s;}
.pin-tile:hover,.pin-tile:focus-visible{transform:translateY(-2px);border-color:var(--color-work,#2563eb);box-shadow:0 6px 18px rgba(37,99,235,.15);outline:none;}
.pin-avatar{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:1.15rem;}
.pin-dots{display:flex;gap:10px;height:16px;}
.pin-dots i{width:14px;height:14px;border-radius:50%;background:#cbd5e1;display:inline-block;}
.pin-dots i.on{background:var(--color-work,#2563eb);}
.pin-pad{display:grid;grid-template-columns:repeat(3,86px);gap:12px;justify-content:center;}
.pin-pad button{height:70px;font-size:1.6rem;font-weight:700;border-radius:16px;border:2px solid var(--border,#e2e8f0);background:#fff;color:var(--text,#0f172a);}
.pin-pad button:active{transform:scale(.96);border-color:var(--color-work,#2563eb);}
.pin-pad .pin-fn{font-size:1.25rem;color:var(--text-muted,#64748b);}
.pin-pad .pin-ok{grid-column:span 3;background:var(--color-work,#2563eb);color:#fff;border-color:transparent;font-size:1.15rem;}
.pin-msg-err{color:#dc2626;font-weight:600;}
@keyframes pinShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-7px)}80%{transform:translateX(7px)}}
.shake{animation:pinShake .4s;}

/* ---- Kiosk-Aktionen (Terminal) ---- */
.kiosk-actions{display:grid;grid-template-columns:repeat(2,minmax(230px,1fr));gap:16px;width:min(560px,90vw);}
.kiosk-btn{min-height:108px;font-size:1.35rem;font-weight:700;border-radius:20px;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden;border-width:2px;}
.kiosk-btn .hold-progress{animation-duration:.7s !important;}
#pinStepApp.d-none{display:none !important;}
#pinStepApp{display:flex;}
.kiosk-bookings{width:min(520px,92vw);max-height:34vh;overflow:auto;background:#fff;border:1px solid var(--border,#e2e8f0);border-radius:14px;padding:8px 12px;}
.kb-row{display:flex;align-items:center;gap:10px;padding:6px 4px;font-size:1.02rem;color:var(--text,#0f172a);}
.kb-row+.kb-row{border-top:1px dashed #eef2f7;}
.kb-row i.bi-pause-circle{color:var(--color-break,#f59e0b);}
.kb-row i.bi-play-circle{color:var(--color-work,#2563eb);}
.kb-row span:last-child{margin-left:auto;color:var(--text-muted,#64748b);}
#kioskState.text-muted{color:#94a3b8;}
#kioskState{font-size:1.15rem;}
/* Grund-Pflicht im Terminal */
.pin-reason-box{position:absolute;inset:0;background:#fff;z-index:30;display:flex;
  align-items:center;padding:1rem;}

/* ---------- Terminal: Dashboard-analoge Detailansicht ---------- */
/* Buchungszeilen wie die verbesserte Dienstplan-Darstellung: Arbeit = satte
   Farbe, Pause = 45deg-Streifen in der Pausenfarbe (wie .calw-event.is-break) */
.kiosk-bookings{max-width:560px;width:100%;}
.kb-row{
    display:flex;align-items:center;gap:.6rem;
    padding:.55rem .9rem;margin-bottom:.5rem;border-radius:7px;
    background:color-mix(in srgb,var(--color-work,#2563eb) 88%,white);
    color:#fff;font-weight:600;letter-spacing:.2px;
    box-shadow:0 1px 2px rgba(0,0,0,.18);
}
.kb-row .bi{font-size:1.15rem;}
.kb-row.kb-brk{
    background:repeating-linear-gradient(
        45deg,color-mix(in srgb,var(--color-break,#f59e0b) 85%,white),
        color-mix(in srgb,var(--color-break,#f59e0b) 85%,white) 6px,
        color-mix(in srgb,var(--color-break,#f59e0b) 60%,white) 6px,
        color-mix(in srgb,var(--color-break,#f59e0b) 60%,white) 12px);
    color:#3d2c00;font-style:italic;
}
.kb-row > span:first-of-type{min-width:9.5rem;}

/* Buttons GROSS wie im Dashboard (Fuellung via btn-accent / btn-secondary / btn-quiet) */
.kiosk-btn{
    min-height:112px;min-width:250px;
    font-size:1.3rem;font-weight:600;border-radius:14px;padding:0 1.6rem;
}
.kiosk-btn:hover{filter:brightness(1.05);}
.kiosk-btn:active,.kiosk-btn.holding{transform:translateY(1px);}
.kiosk-btn .hold-progress{height:9px;border-radius:9px;}

/* ---------- Terminal: 10s Auto-Logout-Leiste (ganz unten, volle Breite) ---------- */
#kioskAutoBar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    height:46px;background:rgba(15,23,42,.85);
    cursor:pointer;user-select:none;overflow:hidden;
}
#kioskAutoFill{
    position:absolute;inset:0;width:0%;height:100%;
    background:linear-gradient(90deg,#2563eb,#7c3aed);
    opacity:.85;
}
#kioskAutoText{
    position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
    height:100%;width:100%;color:#fff;font-weight:800;letter-spacing:.4px;
    text-shadow:0 1px 2px rgba(0,0,0,.6);
}
#pinStepApp{padding-bottom:64px;}   /* Platz fuer die Leiste */

/* Meine Zeiten: Tages-Zeilen unter den Kalenderwochen */
.my-day-row td{font-size:.78rem;color:#64748b;padding-top:1px;padding-bottom:1px;}
.my-day-row td:nth-child(2){padding-left:1.8rem;font-weight:600;color:#475569;}
.my-day-row:nth-child(odd) td{background:rgba(148,163,184,.06);}

/* Planoption-Matrix */
#planOptMatrix select{min-width:118px;}
#planOptMatrix td{vertical-align:middle;}

/* Datums-/Zeit-Shim: eigene Kalenderauswahl (Woche beginnt montags, TT.MM.JJJJ / 24h) */
.dt-shim-cal{
    position:fixed;z-index:3000;background:#fff;color:#212529;
    border:1px solid #dee2e6;border-radius:.5rem;
    box-shadow:0 .5rem 1rem rgba(0,0,0,.2);
    padding:.5rem;width:254px;user-select:none;font-size:.875rem;
}
.dt-shim-cal .dt-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.3rem;}
.dt-shim-cal .dt-cal-title{font-weight:700;font-size:.85rem;}
.dt-shim-cal .dt-cal-nav{border:none;background:none;padding:.1rem .55rem;border-radius:.3rem;font-size:1.05rem;line-height:1.3;color:#495057;}
.dt-shim-cal .dt-cal-nav:hover{background:#f1f3f5;}
.dt-shim-cal .dt-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.dt-shim-cal .dt-cal-dow{text-align:center;font-size:.72rem;color:#6c757d;font-weight:700;padding:.15rem 0;}
.dt-shim-cal .dt-cal-day{text-align:center;padding:.28rem 0;border-radius:.3rem;cursor:pointer;border:none;background:none;font-size:.82rem;color:#212529;}
.dt-shim-cal .dt-cal-day:hover{background:#e7f1ff;}
.dt-shim-cal .dt-cal-day.is-weekend{color:#dc3545;}
.dt-shim-cal .dt-cal-day.is-out{color:#adb5bd;}
.dt-shim-cal .dt-cal-day.is-today{box-shadow:inset 0 0 0 2px #0d6efd;}
.dt-shim-cal .dt-cal-day.is-selected{background:#0d6efd;color:#fff;box-shadow:none;}
.dt-shim-cal .dt-cal-foot{display:flex;justify-content:space-between;margin-top:.3rem;}
.dt-shim-cal .dt-cal-today-btn{border:none;background:none;color:#0d6efd;padding:.2rem .45rem;border-radius:.3rem;font-size:.8rem;}
.dt-shim-cal .dt-cal-today-btn:hover{background:#e7f1ff;}

/* ===================== Statistik (nur Administrator) ===================== */
.stat-kpis{display:flex;gap:.75rem;flex-wrap:wrap;}
.stat-kpi{
    flex:1 1 150px;min-width:150px;
    background:#f8f9fa;border:1px solid #e9ecef;border-radius:.5rem;
    padding:.65rem .9rem;
}
.stat-kpi-val{font-size:1.35rem;font-weight:700;line-height:1.2;}
.stat-kpi-label{font-size:.75rem;color:#6c757d;text-transform:uppercase;letter-spacing:.03em;}
.stat-chart{
    display:flex;align-items:flex-end;gap:6px;
    height:170px;padding:.25rem .25rem 0;
}
.stat-bar-col{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:14px;}
.stat-bar{
    width:100%;max-width:38px;min-height:3px;
    background:linear-gradient(180deg,#6366f1,#4f46e5);
    border-radius:4px 4px 0 0;
}
.stat-bar-label{font-size:.62rem;color:#6c757d;margin-top:.25rem;white-space:nowrap;}
.stat-table td,.stat-table th{white-space:nowrap;}
@media (max-width:576px){
    .stat-kpi{min-width:calc(50% - .4rem);}
    .stat-chart{height:120px;}
    .stat-bar-label{font-size:.55rem;}
}

/* Dienstplan-Overlay: erfasste Zeiten + Tagessaldo je Zelle (nur Admin) */
.cell-hours{display:block;font-size:9.5px;line-height:1.15;text-align:center;margin-top:1px;color:#475569;white-space:nowrap;}
.cell-hours .wh-plus{color:#16a34a;font-weight:600;}
.cell-hours .wh-minus{color:#dc2626;font-weight:600;}
matrix-table td .cell-hours{pointer-events:none;}

/* Stundenabrechnung: Wochenend-/Feiertags- und Heute-Zeilen */
.st-weekend{background:var(--bs-tertiary-bg);}
.st-holiday{background:color-mix(in srgb, #16a34a 8%, white);}
.st-today td{border-top:2px solid #2563eb;}

/* Zeiterfassung-Wochenansicht: volles 24-h-Band (wie grobes Wochenbild) */
.calw-grid.calw-24h{min-height:720px;}
.calw-grid.calw-24h .calw-col{min-height:720px;
    background-image:repeating-linear-gradient(to bottom,
        transparent 0, transparent calc(100%/24 - 1px),
        var(--border) calc(100%/24 - 1px), var(--border) calc(100%/24));}
/* Abwesenheit hat Vorrang vor dem Stundenraster */
.calw-grid.calw-24h .calw-col.abs-day,
.calw-grid.calw-24h .calw-col.duty-day{
    background-image:repeating-linear-gradient(45deg,
        transparent 0 6px, rgba(15,23,42,.055) 6px 10px);}
.calw-col.duty-day {
    background-color: color-mix(in srgb, var(--shift-bg, #6366f1) 8%, white);
    background-image: repeating-linear-gradient(45deg,
        transparent 0 6px, rgba(15,23,42,.055) 6px 10px);
}
.calw-grid.calw-24h .calw-gutter{min-height:720px;}

/* Zeiterfassung-Monatsansicht: Raster mit Kompaktzeilen je Tag */
.tem-scroll{overflow:auto;}
.tem-grid{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));
    border-left:1px solid var(--border);border-top:1px solid var(--border);}
.tem-head{padding:5px 6px;text-align:center;font-weight:600;font-size:12px;
    border-right:1px solid var(--border);border-bottom:2px solid var(--border);background:#fff;}
.tem-head.we{color:#94a3b8;}
.tem-cell{min-height:104px;padding:2px 4px 4px;border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);background:#fff;cursor:pointer;position:relative;}
.tem-cell:hover{background:color-mix(in srgb,var(--accent,#2563eb) 4%,white);}
.tem-cell.we:not(.other){background:color-mix(in srgb,var(--color-weekend,#22c55e) 6%,white);}
.tem-cell.other{background:var(--bs-tertiary-bg);}
.tem-cell.other .tem-daynum{color:#94a3b8;}
.tem-cell.today{box-shadow:inset 0 0 0 2px var(--accent,#2563eb);}
.tem-daynum{font-size:11px;font-weight:600;float:right;color:var(--text-muted);}
.tem-hol{position:absolute;left:4px;top:2px;font-size:11px;color:var(--color-holiday,#16a34a);}
.tem-shift{margin:2px 0;}
.tem-cell.abs-day {
    background-color: color-mix(in srgb, var(--abs-bg, #64748b) 9%, white);
    background-image: repeating-linear-gradient(45deg,
        transparent 0 6px, rgba(15,23,42,.055) 6px 10px);
}
.tem-cell.duty-day {
    background-color: color-mix(in srgb, var(--shift-bg, #6366f1) 8%, white);
    background-image: repeating-linear-gradient(45deg,
        transparent 0 6px, rgba(15,23,42,.055) 6px 10px);
}
.tem-ev{font-size:10px;border-radius:3px;padding:1px 4px;margin:2px 0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;line-height:1.35;}
.tem-work{background:color-mix(in srgb,var(--color-work,#2563eb) 88%,black 5%);}
.tem-break{background:color-mix(in srgb,var(--color-break,#f59e0b) 85%,white 8%);color:#3a2c00;}
.tem-abs{font-size:10px;color:#7c3aed;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tem-more{font-size:10px;color:#94a3b8;padding:0 4px;}

/* Abwesenheits-Badge in Monatsansicht */
.cell-chip.shift-inline {
    width: auto; height: 20px; min-height: 0; padding: 0 5px;
    border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
    font-size: .6rem; line-height: 1; vertical-align: middle; font-weight: 700;
}

.cell-chip.absence-chip.absence-inline {
    width: auto; height: 20px; min-height: 0; padding: 0 5px;
    border-radius: 6px; display: inline-flex; align-items: center; gap: 3px;
    font-size: .6rem; line-height: 1; vertical-align: middle;
}

/* Jahresansicht: kompakte 12×31-Matrix */
.te-year-legend{font-size:.58rem;color:var(--text-muted);margin:0 0 4px 2px;}
.te-ym-hours{position:absolute;left:1px;bottom:0;font-size:.42rem;line-height:1;color:#475569;font-weight:600;}

.te-year-matrix-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:6px;background:#fff;}
.te-ym-sumhead{background:var(--bs-tertiary-bg);font-weight:700;font-size:.58rem;line-height:1.05;}
.te-year-matrix .te-ym-sum{background:#f8fafc;font-weight:700;font-size:.54rem;text-align:center;white-space:nowrap;}
.te-year-matrix .te-ym-total th,
.te-year-matrix .te-ym-total td{border-top:2px solid var(--border);background:var(--bs-tertiary-bg);font-weight:800;}
.te-year-matrix .te-ym-total .te-ym-sum{background:var(--bs-tertiary-bg);}
.te-ym-cell.abs-full .te-ym-code{background:transparent!important;border:0!important;color:inherit!important;font-size:.58rem;}
.te-ym-cell.abs-full .te-ym-hours,
.te-ym-cell.abs-full .te-ym-bal{color:inherit!important;}
.te-ym-cell.filled-cell .te-ym-code{background:transparent!important;border:0!important;color:inherit!important;}
.te-ym-cell.filled-cell .te-ym-hours,
.te-ym-cell.filled-cell .te-ym-bal{color:inherit!important;}
.te-ym-cell.abs-full{padding:0;}
.te-ym-abs{width:calc(100% - 2px);height:calc(100% - 2px);border-radius:5px;font-size:.56rem;}
.te-ym-shift{width:calc(100% - 2px);height:calc(100% - 2px);border-radius:5px;font-size:.56rem;}
.te-year-matrix{border-collapse:collapse;table-layout:fixed;width:100%;min-width:1080px;font-size:.62rem;}
.te-year-matrix thead th{height:20px;padding:1px 0;text-align:center;font-weight:600;color:var(--text-muted);
    border:1px solid var(--border);background:var(--bs-tertiary-bg);}
.te-year-matrix tbody th{width:38px;padding:2px 5px;text-align:left;font-weight:700;white-space:nowrap;
    border:1px solid var(--border);background:var(--bs-tertiary-bg);}
.te-year-matrix td{height:31px;padding:0;text-align:center;vertical-align:middle;position:relative;
    border:1px solid var(--border);background:#fff;}
.te-year-matrix td.weekend{background:color-mix(in srgb,var(--color-weekend,#22c55e) 11%,white);}
.te-year-matrix td.holiday{background:color-mix(in srgb,var(--color-holiday,#16a34a) 20%,white);}
.te-year-matrix td.today{box-shadow:inset 0 0 0 2px var(--accent,#2563eb);}
.te-year-matrix td:hover{filter:brightness(.97);cursor:pointer;}
.te-year-matrix td.te-ym-empty{background:var(--bs-tertiary-bg);border-color:var(--border);}
.te-ym-code{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
    border-radius:3px;padding:0 2px;font-size:.55rem;font-weight:800;line-height:1;}
.te-ym-bal{position:absolute;right:1px;bottom:0;font-size:.42rem;line-height:1;font-weight:700;}
.te-ym-bal.pos{color:#15803d;}
.te-ym-bal.neg{color:#b91c1c;}
.te-ym-hol{font-size:.58rem;color:var(--color-holiday,#16a34a);}

/* Jahresansicht: 12 Monatskarten mit allen 365 Tagen */
.te-year-months{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:8px;}
.te-year-month{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fff;}
.te-year-monthhead{padding:5px 7px;font-weight:700;font-size:.72rem;border-bottom:1px solid var(--border);background:var(--bs-tertiary-bg);}
.te-year-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;padding:2px 1px;font-size:.55rem;text-align:center;color:var(--text-muted);background:#fff;}
.te-year-weekdays .we{color:#94a3b8;}
.te-year-days{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);padding:1px;}
.te-year-day{min-height:38px;padding:1px 2px;background:#fff;position:relative;cursor:pointer;display:flex;flex-direction:column;gap:1px;}
.te-year-day.blank{background:transparent;cursor:default;}
.te-year-day.weekend:not(.blank){background:color-mix(in srgb,var(--color-weekend,#22c55e) 7%,white);}
.te-year-day.holiday:not(.blank){background:color-mix(in srgb,var(--color-holiday,#16a34a) 12%,white);}
.te-year-day.today{box-shadow:inset 0 0 0 2px var(--accent,#2563eb);}
.te-year-day:hover:not(.blank){background:color-mix(in srgb,var(--accent,#2563eb) 6%,white);}
.te-year-daynum{font-size:.59rem;font-weight:700;color:var(--text-muted);display:flex;align-items:center;justify-content:space-between;line-height:1;}
.te-year-hol{color:var(--color-holiday,#16a34a);font-size:.62rem;}
.te-year-chips{display:flex;flex-direction:column;gap:1px;overflow:hidden;}
.te-year-chip{font-size:.45rem;line-height:1.12;border-radius:2px;padding:0 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.te-year-chip.balance.pos{background:#dcfce7;color:#166534;}
.te-year-chip.balance.neg{background:#fee2e2;color:#991b1b;}
.te-year-more{font-size:.48rem;color:#94a3b8;line-height:1.1;}

/* Gehoppelter Ziel-Eintrag (z. B. "Anzeigen" der >12-h-Anfrage) */
@keyframes teRowFlash{0%,55%{background:#fde68a;}100%{background:transparent;}}
tr.te-flash td{animation:teRowFlash 2.4s ease-out both;}

/* Dashboard "Mein Monat": Wochenzeilen mit Σ rechts + Monatssumme */
.calendar-table td.cal-mc{white-space:normal;min-width:38px;height:36px;
    vertical-align:top;text-align:right;padding:2px 4px;cursor:pointer;}
.cal-mc .cm-d{display:block;font-size:.62rem;color:var(--text-muted);
    text-align:left;line-height:1;}
td.cal-out,th.cal-out{background:var(--bs-tertiary-bg);}
td.cal-sum,th.cal-sum{font-weight:700;text-align:right;
    background:color-mix(in srgb,var(--accent,#2563eb) 6%,white);}
td.cal-wd,th.cal-wd{font-size:.66rem;color:var(--text-muted);text-align:left;
    padding:2px 6px;white-space:nowrap;background:transparent;border:none;}
.cal-monthlbl{text-align:right;font-weight:600;font-size:.8rem;}
/* Kleine Dienst-Kuerzel-Badges in "Mein Monat" (ersetzt "Naechster Dienst"-Widget) */
.cal-mc .cm-shift{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin:1px 2px 0 0;
    min-width:22px;height:20px;padding:0 4px;border-radius:6px;
    border:1px solid color-mix(in srgb, currentColor 35%, transparent);
    font-size:.58rem;font-weight:700;line-height:1;letter-spacing:.1px;cursor:default;}
.cal-mc .cm-shift:hover{filter:brightness(1.12);}
/* "Mein Monat" kompakter: Tageszahl oben links, Rest Rechtsbuendigung */
.calendar-table td.cal-mc .cm-d{text-align:left;font-weight:600;}
/* Startseite: Abwesenheits-/Dienst-Badges gross und gleich breit */
.calendar-table td.cal-mc .absence-inline,
.calendar-table td.cal-mc .cm-shift {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-width: 0; height: 32px; margin: 2px 0 0;
    padding: 0 4px; border-radius: 6px;
    font-size: .68rem; line-height: 1; vertical-align: middle;
}

/* Urlaubsuebersicht (ganze Breite): drei Kennzahlen nebeneinander */
.vac-stats{display:flex;flex-wrap:wrap;gap:10px 24px;}
.vac-stat{min-width:90px;}
.vac-stat-num{font-size:1.5rem;font-weight:700;line-height:1.1;}
.vac-stat-of{font-size:.9rem;font-weight:600;color:var(--text-muted);}
.vac-stat-lbl{font-size:.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px;}

/* Dashboard Team-Anwesenheit: 3-Spalten-Karten */
.team-pres{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
@media(max-width:1500px){.team-pres{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){.team-pres{grid-template-columns:1fr;}}
.tp-card{display:flex;justify-content:space-between;align-items:center;gap:6px;
    border:1px solid var(--border);border-radius:10px;padding:8px 10px;background:#fff;}
.tp-card .tp-name{font-size:.9rem;display:block;}
.tp-card .tp-info small{font-size:.72rem;}
.tp-card .badge{font-size:.65rem;}
.tp-card .btn{font-size:.72rem;padding:2px 8px;}

/* ===== Einfacher Modus (Standard fuer Mitarbeiter) =====
   Blendet alle als "adv-only" markierten Navigationen und Sekundaerkarten
   aus. Umschaltbar im Avatar-Menue; die Rolle regelt weiterhin zusaetzlich,
   was ueberhaupt eingeblendet wird (CSS!important ueberschreibt JS-display). */
body.simple-mode .adv-only{display:none !important;}
/* Timer-Karte im einfachen Modus: mehr Luft, ein klarer Fokus */
body.simple-mode .timer-card{padding:.5rem 0;}
body.simple-mode .big-timer{font-size:3.4rem;}