.shift-area-vor { background-color: #ddebf7; }
.shift-area-vormittag { background-color: #e2efda; }
.shift-area-pause { background-color: #fce4d6; }

.table-sm td, .table-sm th { vertical-align: middle; }

.status-offen { color: #b36b00; font-weight: 600; }
.status-geplant { color: #2e7d32; }
.status-tausch_angefragt { color: #c62828; font-weight: 600; }

.login-card { max-width: 420px; margin: 8vh auto; }

/* --- Formatierte Hinweise (Rich-Text) --- */
.notice-body img { max-width: 100%; height: auto; }
.notice-body :last-child { margin-bottom: 0; }

/* --- Grundriss mit Positions-Markern --- */
.floorplan { position: relative; width: 100%; line-height: 0; }
.floorplan img { width: 100%; height: auto; display: block; }
.marker {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    line-height: 1;
}
.marker.belegt { background-color: #2e7d32; }
.marker.offen  { background-color: #b36b00; }
.marker.me     { background-color: #0d6efd; width: 32px; height: 32px; font-size: 15px;
                 box-shadow: 0 0 0 3px rgba(13,110,253,.4); z-index: 2; }

/* Eigene Schicht/Zeile hervorheben */
.shift-mine { border: 2px solid #0d6efd; }
.row-mine { background-color: #e7f1ff; font-weight: 600; }

/* Kurzes Aufblinken der eigenen Position beim gezielten Sprung vom Dashboard */
.row-mine-flash { animation: rowMineFlash 2.5s ease-out; }
@keyframes rowMineFlash {
    0%, 30% { background-color: #ffe08a; }
    100%    { background-color: #e7f1ff; }
}

/* Offene (noch unbesetzte) Position in der manuellen Zuteilung hervorheben */
.row-open td { background-color: #fff3cd; }
.row-open:hover td { background-color: #ffe8a1; }

/* --- Feststehende Wochentags-Navigation (Übersicht Schichten) --- */
/* z-index bewusst < 1000, damit das Bootstrap-Dropdown der Hauptnavigation
   (dropdown-menu = 1000) und Modals darüber liegen und nicht verdeckt werden. */
.shift-daynav {
    position: sticky;
    top: 0;
    z-index: 990;
    padding: .5rem 0;
    background-color: var(--bs-body-bg, #fff);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}

/* Zeile mit Prev-Button, scrollbaren Tages-Chips und Next-Button. */
.shift-daynav__bar {
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* Horizontal scrollbarer Chip-Streifen – skaliert für beliebig viele Tage. */
.shift-daynav__scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: .4rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: .15rem .1rem;
    scrollbar-width: none;              /* Firefox */
}
.shift-daynav__scroll::-webkit-scrollbar { display: none; } /* WebKit/Blink */

/* Einzelner Tages-Chip (Pille). */
.day-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    border-radius: 999px;
    padding: .35rem .8rem;
    line-height: 1.2;
}

/* Pfeil-Buttons zum tageweisen Blättern. */
.shift-daynav__arrow {
    flex: 0 0 auto;
    border-radius: 999px;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* "Jetzt"-Schnellsprung zur aktuell laufenden bzw. heutigen Schicht. */
.shift-jump-now { flex: 0 0 auto; border-radius: 999px; white-space: nowrap; }

/* Schwebender "Nach oben"-Button (FAB). */
.scroll-top-fab {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 995;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(.5rem);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.scroll-top-fab.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* Sprungziel nicht hinter der feststehenden Navi verstecken.
   Höhe der Sticky-Leiste (Padding + Chip-Höhe) berücksichtigt. */
.shift-card { scroll-margin-top: 4rem; }

/* Auf kleinen Screens etwas kompakter, damit mehr Chips sichtbar sind. */
@media (max-width: 575.98px) {
    .day-chip { padding: .35rem .6rem; font-size: .9rem; }
    .shift-daynav__arrow { width: 2rem; height: 2rem; }
}

/* Aktuell laufende Schicht deutlich hervorheben. */
.shift-active { border: 2px solid #198754; box-shadow: 0 0 0 3px rgba(25, 135, 84, .2); }

/* --- Ordner & Benutzer: responsive Card-Ansicht auf kleinen Screens --- */
/* Ab < lg (Smartphones/kleine Tablets) wird die breite Tabelle in Karten
   umgebrochen: Kopfzeile ausblenden, jede Zeile als Karte, jede Zelle mit
   ihrem Spaltentitel (data-label). So bleibt alles bedienbar, ohne seitliches
   Scrollen. Das Aktionen-Dropdown wird nicht abgeschnitten (kein overflow). */
@media (max-width: 991.98px) {
    .people-table thead { display: none; }
    .people-table, .people-table tbody, .people-table tr, .people-table td { display: block; width: 100%; }
    .people-table > tbody > tr {
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: .5rem;
        margin-bottom: .75rem;
        padding: .25rem .75rem;
        background: var(--bs-body-bg, #fff) !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    }
    .people-table > tbody > tr > td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        text-align: right;
        background: transparent !important;
        border: 0;
        border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .075));
        padding: .5rem .1rem;
    }
    .people-table > tbody > tr > td:last-child { border-bottom: 0; }
    .people-table > tbody > tr > td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
        color: var(--bs-secondary-color, #6c757d);
        flex: 0 0 auto;
    }
    .people-table > tbody > tr > td:not([data-label])::before { content: ""; }
    .people-table td .dropdown { width: 100%; }
    .people-table td .dropdown > .dropdown-toggle { width: 100%; }
    .people-table td .contact-lines { text-align: right; }
    /* Leere Hinweiszeilen (colspan) nicht als Karte umbrechen. */
    .people-table > tbody > tr[data-empty] > td,
    .people-table > tbody > tr#people-none > td { display: block; text-align: center; }
}