/* ===========================================================
   Teamnavi Hessen - Basis-Stylesheet
   =========================================================== */

:root {
    --brand: #1f4e79;
    --brand-light: #dce6f1;
    --border: #d0d0d0;
    --text: #222;
    --muted: #777;
    --danger: #b00020;
    --success: #1a7a3c;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--text);
    margin: 0;
    background: #f7f8fa;
}

a { color: var(--brand); }

h1 { font-size: 1.5rem; margin: 0.4em 0; }
h2 { font-size: 1.2rem; margin-top: 1.6em; }
h3 { font-size: 1.05rem; }

.muted { color: var(--muted); }

/* --- "+ weitere Personen anzeigen" (view_extra_employees) --- */
.extra-employees-picker {
    margin: 0.6rem 0 1rem;
    font-size: 0.88rem;
}
.extra-employees-picker summary {
    cursor: pointer;
    color: var(--brand);
    display: inline-block;
    padding: 0.2rem 0;
}
.extra-employees-picker[open] summary { margin-bottom: 0.4rem; }
.extra-employees-picker p.muted { margin: 0.3rem 0 0.6rem; max-width: 640px; }
.extra-employees-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    max-width: 720px;
}
.extra-employee-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    white-space: nowrap;
}
.extra-employee-item .muted { font-size: 0.78rem; }

/* --- Topbar --- */
.topbar {
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.6rem 1.2rem;
    flex-wrap: wrap;
}
.topbar-brand { font-weight: bold; font-size: 1.1rem; }
.topbar-nav { display: flex; align-items: center; gap: 1rem; flex: 1; flex-wrap: wrap; }
.topbar-nav > a { display: inline-block; padding: 0.2rem 0; }
.topbar-nav a, .topbar-user a { color: #fff; text-decoration: none; opacity: 0.9; }
.topbar-nav a:hover, .topbar-user a:hover { opacity: 1; text-decoration: underline; }
.topbar-user { display: flex; align-items: center; gap: 1rem; }

.instance-switcher { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; margin: 0 1rem; }
.instance-switcher label { display: flex; align-items: center; gap: 0.4rem; }
.instance-switcher select { border-radius: 4px; border: none; padding: 0.15rem 0.4rem; }
.instance-switcher-single { opacity: 0.85; font-size: 0.9rem; }

.nav-item { position: relative; }
.nav-item > .nav-label { display: inline-block; padding: 0.2rem 0; }
.nav-item > .nav-label::after { content: ' \25BE'; font-size: 0.7em; opacity: 0.8; }
.nav-dropdown {
    display: none; position: absolute; top: 100%; left: 0; z-index: 20;
    background: #fff; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    padding: 0.4rem 0; min-width: 220px;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown { display: block; }
.nav-dropdown a {
    display: block; color: var(--text); opacity: 1; padding: 0.45rem 0.9rem;
    white-space: nowrap;
}
.nav-dropdown a:hover { background: var(--brand-light); text-decoration: none; }
/* Nicht-klickbare Unterüberschrift innerhalb eines Dropdowns, um Stammdaten-/
   Konfigurationsseiten optisch von den Tages-Ansichten darüber abzusetzen
   (z. B. "Konfiguration" im Einsatzplan-Menü vor Einsatzorte/Abwesenheiten/
   Dienste/Aufgaben). */
.nav-dropdown-heading {
    display: block; padding: 0.5rem 0.9rem 0.2rem; margin-top: 0.3rem;
    border-top: 1px solid var(--border); font-size: 0.72rem; font-weight: bold;
    text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted, #888);
}
.nav-dropdown-heading:first-child { margin-top: 0; border-top: none; }

.content { padding: 1.2rem 1.5rem 3rem; max-width: 1400px; margin: 0 auto; }
/* Einsatzplan-Ansichten: möglichst viel Bildschirmbreite nutzen (viele
   Tagesspalten), bevor die Tabelle selbst horizontal scrollen muss - im
   Gegensatz zum schmaleren Urlaubsplaner, der mit der Standardbreite auskommt. */
.content-wide { max-width: none; }

/* --- Login-Box --- */
.login-box {
    max-width: 360px;
    margin: 4rem auto;
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.login-box form label { display: block; margin-bottom: 1rem; }
.login-box input[type=text], .login-box input[type=password] {
    display: block; width: 100%; padding: 0.5rem; margin-top: 0.25rem;
}

/* --- Buttons / Forms --- */
.btn {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border-radius: 5px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    font-size: 0.95rem;
}
.btn:hover { background: #f0f0f0; }
.btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-primary:hover { background: #163a58; }
.btn-danger { background: #fff; color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }

.link-btn {
    background: none; border: none; color: var(--brand); cursor: pointer;
    padding: 0; font-size: 0.9rem; text-decoration: underline;
}
.link-btn:disabled { color: #ccc; text-decoration: none; cursor: default; }

form.inline { display: inline; }
form.inline-form { display: flex; align-items: end; gap: 1rem; margin: 0.8rem 0 1.2rem; }
form.inline-form label { display: flex; flex-direction: column; font-size: 0.85rem; }

.page-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.cal-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.form-grid { max-width: 640px; background: #fff; padding: 1.2rem 1.5rem; border-radius: 8px; }
.form-grid fieldset { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 1rem; padding: 0.8rem 1rem; }
.form-grid fieldset legend { padding: 0 0.4rem; color: var(--brand); font-size: 0.9rem; }
.mb-fieldset { display: flex; flex-wrap: wrap; gap: 0 1.2rem; }
.mb-fieldset label { flex: 1 1 220px; }
.form-grid label { display: block; margin: 0.6rem 0; }
.form-grid input[type=text], .form-grid input[type=password], .form-grid select {
    display: block; width: 100%; padding: 0.4rem; margin-top: 0.2rem;
}
.checkbox-label { display: flex !important; align-items: center; gap: 0.4rem; }
.weekday-checks { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.form-actions { margin-top: 1rem; display: flex; gap: 0.6rem; }

.alert { padding: 0.6rem 1rem; border-radius: 6px; margin: 0.6rem 0; }
.alert-error { background: #fde8e8; color: var(--danger); border: 1px solid #f3b8b8; }
.alert-success { background: #e6f6ea; color: var(--success); border: 1px solid #b7e3c3; }
.alert-info { background: var(--brand-light); color: var(--brand); border: 1px solid #b7cde3; }

/* --- Migrationen (migrate.php) --- */
.migration-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.8rem 1rem;
    margin-bottom: 1rem;
}
.migration-card h3 { margin: 0 0 0.5rem; font-size: 0.95rem; font-family: monospace; }
.migration-sql {
    background: #f5f5f5;
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.6rem 0.8rem;
    font-size: 0.82rem;
    overflow-x: auto;
    white-space: pre-wrap;
    margin: 0 0 0.7rem;
}
.migration-card form.inline { margin-right: 0.6rem; }

/* --- Tabellen --- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    margin-bottom: 1.5rem;
}
.data-table th, .data-table td {
    border: 1px solid var(--border);
    padding: 0.45rem 0.6rem;
    text-align: left;
    font-size: 0.92rem;
}
.data-table th { background: var(--brand-light); }
.data-table .row-inactive { opacity: 0.5; }
.data-table .actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.balance-table { max-width: 480px; }
.balance-table th { width: 55%; background: #f0f4f8; }

/* --- Kalender-Tabelle --- */
/* Der eigentliche Scroll-Container (.table-scroll) darf in Safari KEIN
   border-radius tragen - WebKit erzeugt dafür intern eine Clipping-Ebene,
   die "position: sticky" auf den Tabellenzellen zuverlässig aushebelt
   (bekannter WebKit-Bug bei "overflow:auto" + "border-radius" gemeinsam
   auf demselben Element). Die abgerundeten Ecken kommen deshalb von einem
   äußeren, NICHT scrollenden Wrapper (.table-scroll-outer); der innere
   Scroll-Container bleibt eckig. */
.table-scroll-outer { background: #fff; border-radius: 6px; overflow: hidden; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Edge-Pfeile für Monatswechsel links/rechts der Tabelle (Urlaubsplaner
   + Einsatzplan) - bleiben unabhängig vom horizontalen Scroll-Stand der
   Tabelle immer erreichbar, statt nur über die Buttons oben im Kopfbereich. */
.cal-table-nav-wrap { display: flex; align-items: stretch; gap: 0.4rem; }
.cal-table-nav-wrap > .table-scroll-outer { flex: 1 1 auto; min-width: 0; }
.cal-edge-nav {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 26px; border-radius: 6px; background: var(--brand-light); color: var(--brand);
    font-size: 1.6rem; line-height: 1; text-decoration: none;
}
.cal-edge-nav:hover { background: var(--brand); color: #fff; text-decoration: none; }

/* --- Einsatzplan: Wochenkontext (Randtage aus Vor-/Folgemonat) - reine
   Anzeige, schreibgeschützt, standardmäßig eingeklappt (siehe Toggle-Button
   in einsatzplan.php). */
.ep-table .ep-pad-col { opacity: 0.5; }
.ep-table.ep-pad-collapsed .ep-pad-col { display: none; }
/* border-collapse: separate (statt collapse) ist hier bewusst gewählt -
   in Safari/WebKit bricht "position: sticky" auf Tabellenzellen, wenn die
   Tabelle border-collapse: collapse verwendet (bekannter WebKit-Bug).
   Dadurch werden interne Rahmenlinien minimal doppelt so dick - optisch
   kaum wahrnehmbar, aber die sticky Mitarbeiterspalte funktioniert dafür
   browserübergreifend zuverlässig. */
.calendar-table { border-collapse: separate; border-spacing: 0; font-size: 0.8rem; }
.calendar-table th, .calendar-table td {
    border: 1px solid var(--border);
    text-align: center;
    padding: 0;
    width: 30px;
    height: 28px;
}
.calendar-table .sticky-col {
    position: -webkit-sticky; position: sticky; left: 0; background: #fff; z-index: 2;
    text-align: left; padding: 0.3rem 0.6rem; width: 160px; min-width: 160px;
    font-size: 0.85rem;
    /* Erzwingt in Safari eine eigene Compositing-Ebene fuer die sticky
       Zelle - behebt in der Praxis hartnäckige WebKit-Faelle, in denen
       "position: sticky" sonst gar nicht erst greift. */
    will-change: transform;
}
.calendar-table thead .sticky-col { background: var(--brand-light); z-index: 3; }
.calendar-table .emp-name { display: flex; justify-content: space-between; align-items: center; }
.emp-name-text { text-align: right; }
.emp-year-link { text-decoration: none; }

.day-head { background: #fafafa; font-size: 0.7rem; line-height: 1.1; position: relative; }
.day-head .day-num { font-weight: bold; }

/* Mindestbesetzung: Warn-Icon oben rechts am Tageskopf (siehe
   assets/js/einsatzplan_mindestbesetzung.js), aufklappbares Detail-Panel
   darunter. Rot = unter Minimum, Gelb = unter Standard (aber >= Minimum). */
.ep-mb-warn {
    position: absolute; top: 1px; right: 2px; cursor: pointer;
    font-size: 0.75rem; line-height: 1; z-index: 2;
}
.ep-mb-warn.ep-mb-crit { color: var(--danger, #c0392b); }
.ep-mb-warn.ep-mb-warn-yellow { color: #b8860b; }
/* Erscheint wie das Eingabe-Popover direkt an der Klickposition (siehe
   positionPanel() in assets/js/einsatzplan_mindestbesetzung.js), statt fest
   im Dokumentfluss zu stehen. */
.ep-mb-panel {
    position: fixed; z-index: 200; padding: 0.7rem 0.9rem; border: 1px solid var(--border);
    border-radius: 8px; background: #fffaf0; box-shadow: 0 6px 20px rgba(0,0,0,0.22);
    width: 340px; max-width: calc(100vw - 1.5rem);
}
.ep-mb-panel[hidden] { display: none; }
.ep-mb-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.ep-mb-panel-close { background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--muted, #888); }
.ep-mb-panel-row { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.15rem 0; font-size: 0.85rem; }
.ep-mb-panel-row.ep-mb-row-crit { color: var(--danger, #c0392b); font-weight: bold; }
.ep-mb-panel-row.ep-mb-row-warn { color: #8a6d00; }
.ep-mb-panel-ort { flex: 1 1 auto; }
.ep-mb-panel-group { flex: 0 0 auto; color: inherit; }
.ep-mb-panel-count { flex: 0 0 auto; }

/* Ausklappbare Übersichtszeilen unten im Monatsraster (eine je Einsatzort+
   Rollengruppe mit konfigurierter Mindestbesetzung) - zeigen je Tag die
   Ist-Anzahl farbig, standardmäßig eingeklappt (Toggle in der Symbolleiste). */
.ep-table.ep-mb-rows-collapsed .ep-mb-summary-row,
.ep-table.ep-mb-rows-collapsed .ep-mb-divider-row { display: none; }
.ep-mb-summary-row .sticky-col { font-size: 0.72rem; background: #fff8e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-mb-summary-cell { text-align: center; font-size: 0.75rem; font-weight: bold; }
.ep-mb-summary-cell.ep-mb-cell-ok { background: #e6f6ea; color: #2e7d32; }
.ep-mb-summary-cell.ep-mb-cell-warn { background: #fff6d8; color: #8a6d00; }
.ep-mb-summary-cell.ep-mb-cell-crit { background: var(--danger); color: #fff; }
.ep-mb-summary-cell.ep-mb-cell-na { background: #f5f5f5; }

/* Rotationsplan (rotationsplan.php) - Jahresraster + Eingabe-Popover, siehe
   assets/js/rotationsplan.js. Bewusst eigener Präfix "rp-", da eigenständiges
   Modul ohne Kopplung an die bestehenden Einsatzplan-Klassen. */
.rp-table .sticky-col { width: 220px; min-width: 220px; }
.rp-cell { cursor: pointer; text-align: center; vertical-align: middle; min-width: 64px; }
.rp-cell:hover { background: #f0f4fa; }
.rp-cell-empty { color: var(--muted, #999); }
.rp-chip {
    display: inline-block; margin: 1px 2px; padding: 0.1rem 0.4rem; border-radius: 10px;
    background: var(--brand-light, #e3ecf7); font-size: 0.78rem; white-space: nowrap;
}
.rp-chip-pct { color: var(--muted, #777); font-size: 0.72rem; }
.rp-panel {
    position: fixed; z-index: 200; padding: 0.7rem 0.9rem; border: 1px solid var(--border);
    border-radius: 8px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,0.22);
    width: 340px; max-width: calc(100vw - 1.5rem); max-height: 80vh; overflow-y: auto;
}
.rp-panel[hidden] { display: none; }
.rp-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.rp-panel-close { background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--muted, #888); }
.rp-panel-empty { margin: 0.3rem 0; }
.rp-panel-occupant { margin-bottom: 0.4rem; font-size: 0.85rem; }
.rp-panel-occupant-head { font-weight: bold; margin-bottom: 0.2rem; }
.rp-panel-range { font-weight: normal; color: var(--muted, #777); font-size: 0.78rem; }
.rp-panel-sep { border: none; border-top: 1px solid var(--border); margin: 0.5rem 0; }
.rp-panel-add { margin-top: 0.3rem; }
.rp-inline-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.2rem 0; }
.rp-inline-form label { display: flex; flex-direction: column; font-size: 0.72rem; gap: 0.1rem; }
/* Prioritaet der Spalten-Einfaerbung (Ferien niedrigste, dann Wochenende, dann
   Feiertag hoechste): die Regeln stehen bewusst in dieser Reihenfolge, bei
   gleicher Selektor-Spezifitaet gewinnt die spaeter stehende Regel - so
   ueberschreiben Wochenende/Feiertag die Ferien-Einfaerbung automatisch,
   auch wenn ein Tag mehrere dieser Klassen gleichzeitig traegt. */
.day-head.is-school { background: #e8f2ff; box-shadow: inset 0 -4px 0 #8fc7ff; }
.day-head.is-weekend { background: #dcdcdc; box-shadow: none; }
.day-head.is-holiday { background: #ffcf80; box-shadow: none; }

.cal-cell, .ep-orte-cell { cursor: default; user-select: none; }
.cal-cell.editable { cursor: pointer; }
.cal-cell.editable:hover { outline: 2px solid var(--brand); outline-offset: -2px; }
.cal-cell.not-workday { background: #f2f2f2; }
/* Tage außerhalb des Beschäftigungszeitraums (vor "Beschäftigt ab" bzw. nach
   "Beschäftigt bis") - bewusst mit Schraffur statt nur grau, damit klar
   erkennbar ist: hier fehlt nicht nur ein Arbeitstag, die Person ist an
   diesem Tag gar nicht beschäftigt. */
.cal-cell.not-employed {
    background: repeating-linear-gradient(45deg, #ececec, #ececec 6px, #e0e0e0 6px, #e0e0e0 12px);
    cursor: default;
}
.cal-cell.empty-cell { background: transparent; border: none; }
.cal-cell.selecting { outline: 2px solid var(--brand); outline-offset: -2px; background: var(--brand-light); }
/* Gleiche Prioritaet wie bei den Spaltenkoepfen (.day-head weiter oben):
   Ferien niedrigste, dann Wochenende, dann Feiertag hoechste Prioritaet. */
.cal-cell.is-school, .ep-orte-cell.is-school { background: #e8f2ff; }
.cal-cell.is-weekend, .ep-orte-cell.is-weekend { background: #dcdcdc; }
.cal-cell.is-holiday, .ep-orte-cell.is-holiday { background: #ffcf80; }
.chip-label { font-weight: bold; }
.chip-label.small { font-weight: normal; font-size: 0.65rem; }

.year-table .sticky-col { width: 90px; min-width: 90px; }
.year-scroll-table th, .year-scroll-table td { width: 22px; }
.year-scroll-table .sticky-col { width: 150px; min-width: 150px; }

/* --- Berufsgruppen-/Abschnitts-Trennzeilen --- */
.group-divider td {
    border: none; padding: 0; height: 12px;
    border-top: 5px solid #fff; border-bottom: 2px solid var(--brand);
}
.group-divider-label {
    position: -webkit-sticky; position: sticky; left: 0; background: #a9c2de; color: #1f4e79;
    font-weight: bold; font-size: 0.8rem; padding: 5px 0.6rem !important; height: auto !important;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.group-divider-fill { background: #a9c2de; }

/* --- Monatsbanner in der Jahresansicht --- */
.month-band {
    background: var(--brand); color: #fff; font-size: 0.75rem; font-weight: bold;
    padding: 4px 0 !important; height: auto !important;
}

/* --- Legende / Zuweisungs-Buttons --- */
.selection-status {
    background: var(--brand-light); color: var(--brand); border-radius: 6px;
    padding: 0.6rem 0.9rem; font-size: 0.9rem; margin: 0 0 0.6rem;
}
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; background: #fff; padding: 1rem; border-radius: 6px; }
.legend.legend-grouped { flex-direction: column; align-items: stretch; gap: 0.55rem; }
.legend-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.legend-group-title {
    flex: 0 0 100%; font-size: 0.68rem; font-weight: bold; text-transform: uppercase;
    letter-spacing: 0.03em; color: var(--muted);
}
.status-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.8rem; padding: 0.15rem 0.4rem; border-radius: 4px; font-weight: bold; font-size: 0.85rem;
}
.status-chip-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    border: 1px solid rgba(0,0,0,0.15); border-radius: 5px; padding: 0.3rem 0.6rem;
    font-weight: bold; font-size: 0.85rem; cursor: pointer; font-family: inherit;
}
.status-chip-btn .legend-name { font-weight: normal; color: inherit; }
.status-chip-btn:not(:disabled):hover { filter: brightness(0.93); }
.status-chip-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.status-chip-btn.clear-btn { background: #fff; color: var(--danger); border-color: var(--danger); }
.status-chip-btn.legend-chip { cursor: default; }
.legend-holiday { background: #ffe1b3; }
.legend-school { background: #e8f2ff; box-shadow: inset 0 -3px 0 #8fc7ff; }
.legend-name { font-size: 0.9rem; color: var(--muted); }
span.legend-name { margin-right: 1rem; }

/* --- Einsatzplan --- */
.ep-status-badge {
    display: inline-block; font-size: 0.6rem; font-weight: bold; text-transform: uppercase;
    letter-spacing: 0.03em; padding: 0.2rem 0.6rem; border-radius: 999px; margin-left: 0.6rem;
    vertical-align: middle; background: #e0e0e0; color: #555;
}
.ep-status-entwurf { background: #fff3cd; color: #7a5c00; }
.ep-status-veroeffentlicht { background: #d4edda; color: #1a7a3c; }
.ep-status-abgeschlossen { background: #e2e3e5; color: #41464b; }

/* --- Einsatzplan: kompakte Symbolleiste (Version, Status, Verwaltung,
   weitere Personen, Wochenkontext) - fasst die zuvor über mehrere Absätze/
   Blöcke verstreuten Bedienelemente in einer Zeile über dem Raster zusammen. */
.ep-toolbar {
    display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.5rem 0.9rem;
    background: #fff; border: 1px solid var(--border); border-radius: 6px;
    padding: 0.55rem 0.8rem; margin: 0.8rem 0 1rem; font-size: 0.85rem;
}
.ep-toolbar form { margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.ep-toolbar select { font-size: 0.85rem; padding: 0.2rem 0.3rem; }
.ep-toolbar .btn { font-size: 0.82rem; padding: 0.3rem 0.6rem; }
.ep-toolbar .extra-employees-picker { margin: 0; }
.ep-toolbar .extra-employees-picker summary { padding: 0.3rem 0.1rem; }
.ep-toolbar-meta { align-self: center; }

.ep-toolbar-menu { position: relative; }
.ep-toolbar-menu > summary {
    cursor: pointer; color: var(--brand); list-style: none;
    padding: 0.3rem 0.6rem; border-radius: 4px; border: 1px solid var(--border);
}
.ep-toolbar-menu > summary::-webkit-details-marker { display: none; }
.ep-toolbar-menu > summary::after { content: ' \25BE'; font-size: 0.7em; opacity: 0.8; }
.ep-toolbar-menu[open] > summary { background: var(--brand-light); }
.ep-toolbar-menu-body {
    position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 0.3rem;
    background: #fff; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    padding: 0.7rem; min-width: 300px; display: flex; flex-direction: column; gap: 0.6rem;
}
.ep-toolbar-menu-body form.inline-form { flex-wrap: wrap; margin: 0; }

/* --- Statistik: Zeitraum-Filter (analog zur Symbolleiste, aber ohne
   Version-spezifische Elemente) --- */
.stat-filter {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.6rem 1rem;
    background: #fff; border: 1px solid var(--border); border-radius: 6px;
    padding: 0.6rem 0.8rem; margin: 0.8rem 0 1rem; font-size: 0.85rem;
}
.stat-filter label { display: flex; flex-direction: column; gap: 0.2rem; }
.stat-filter select, .stat-filter input[type=number] { font-size: 0.85rem; padding: 0.2rem 0.3rem; }

.ep-table th, .ep-table td { width: 64px; min-width: 64px; height: 34px; vertical-align: top; }
.ep-table .sticky-col { width: 160px; min-width: 160px; }
.ep-table .chip-label { display: block; font-weight: bold; }
.ep-table .chip-orte {
    display: block; font-weight: normal; font-size: 0.5rem; line-height: 1;
    opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Dezentere Gitterlinien im Einsatzplan-Raster, damit die Chip-Farben staerker
   auffallen als die Zellrahmen (weniger "Kariertheit"). */
.ep-table th, .ep-table td, .ep-orte-table th, .ep-orte-table td { border-color: rgba(0,0,0,0.07); }

.ep-cell { padding: 1px 3px !important; text-align: left !important; }
/* Feste Drei-Zeilen-Struktur je Zelle: Grundeinsatz (Einsatzort/Abwesenheit),
   darunter Aufgaben, darunter Dienste. Alle drei Zeilen haben eine FESTE
   Hoehe - so bleibt die Hoehe jeder Zeile in JEDER Zelle exakt gleich,
   unabhaengig vom Inhalt, und die Trennlinien stehen tabellenweit auf
   derselben Hoehe. Die Chips sind eckig (kein Pillenschliff) und teilen
   sich die volle Zeilenbreite immer zu gleichen Teilen (flex:1 statt
   auto-Breite) - bei mehreren Eintraegen in einer Zeile wird die Schrift
   je nach Anzahl gestuft kleiner (per PHP als "count-N"-Klasse gesetzt),
   statt Text mit "..." abzuschneiden. */
.ep-grund-chips, .ep-tag-row {
    display: flex; flex-wrap: nowrap; align-items: stretch; gap: 1px; overflow: hidden;
}
.ep-grund-chips {
    height: 1.25rem;
    padding-bottom: 1px; margin-bottom: 1px; border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ep-tag-row {
    height: 0.85rem;
    margin-top: 1px;
}
.ep-tag-row[data-kat="aufgabe"] {
    padding-bottom: 1px; margin-bottom: 1px; border-bottom: 1px solid rgba(0,0,0,0.06);
}
/* Aufgaben-/Dienst-Zeile für Personen ohne jegliche Einträge dieser Art im
   sichtbaren Zeitraum komplett ausblenden - macht die ganze Tabellenzeile
   kompakter (siehe einsatzplan.php, $rowClasses). */
tr.ep-row-no-dienst .ep-tag-row[data-kat="dienst"] { display: none; }
tr.ep-row-no-aufgabe .ep-tag-row[data-kat="aufgabe"] { display: none; }
.ep-chip {
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; line-height: 1.1; text-align: center;
    padding: 0 2px; border-radius: 2px; white-space: nowrap;
    flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: clip;
}

/* Grundeinsatz (Einsatzort/Abwesenheit) bewusst deutlicher als Dienste/Aufgaben -
   das ist die wichtigste Information der Zelle und soll zuerst ins Auge fallen.
   Gestufte Schriftgroesse je nach Anzahl gleichzeitiger Eintraege. */
.ep-grund-chips .ep-chip { font-weight: 800; }
.ep-grund-chips.count-1 .ep-chip { font-size: 0.72rem; }
.ep-grund-chips.count-2 .ep-chip { font-size: 0.6rem; }
.ep-grund-chips.count-3 .ep-chip { font-size: 0.5rem; }
.ep-grund-chips.count-4plus .ep-chip { font-size: 0.42rem; }

.ep-tag-row.count-1 .ep-chip { font-size: 0.58rem; }
.ep-tag-row.count-2 .ep-chip { font-size: 0.48rem; }
.ep-tag-row.count-3 .ep-chip { font-size: 0.4rem; }
.ep-tag-row.count-4plus .ep-chip { font-size: 0.34rem; }
/* --- Einsatzplan-Popover: erscheint seitlich neben der angeklickten Zelle --- */
.ep-popover {
    position: fixed; z-index: 200; background: #fff; border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.12); box-shadow: 0 6px 20px rgba(0,0,0,0.22);
    width: 300px; max-width: calc(100vw - 1.5rem); max-height: 70vh;
    display: flex; flex-direction: column; overflow: hidden;
}
.ep-popover[hidden] { display: none; }
.ep-popover-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.4rem 0.4rem 0.4rem 0.7rem; background: var(--brand-light); color: var(--brand);
    font-weight: bold; font-size: 0.8rem; flex: 0 0 auto;
}
.ep-popover-actions { display: flex; align-items: center; gap: 0.15rem; }
.ep-popover-icon-btn {
    background: none; border: none; cursor: pointer; font-size: 1rem; line-height: 1;
    padding: 0.3rem 0.4rem; border-radius: 4px; color: var(--brand);
}
.ep-popover-icon-btn:hover { background: rgba(255,255,255,0.6); }
.ep-popover-body { overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; gap: 0.4rem; padding: 0.5rem 0.5rem 0.6rem; }
.ep-popover-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.ep-popover-col-head { display: flex; align-items: center; justify-content: space-between; gap: 0.2rem; margin-bottom: 0.1rem; }
.ep-popover-col-label { font-size: 0.62rem; font-weight: bold; color: var(--muted); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-popover-clear { background: none; border: none; color: var(--danger); font-size: 0.85rem; line-height: 1; cursor: pointer; padding: 0 0.1rem; flex: 0 0 auto; }
.ep-popover-clear:hover { text-decoration: underline; }

/* --- Hilfeseite: Inhaltsverzeichnis-Leiste --- */
.help-toc {
    background: var(--brand-light); border-radius: 6px; padding: 0.6rem 0.9rem;
    margin: 0.8rem 0 1.2rem; font-size: 0.88rem; line-height: 1.9;
}
.help-toc a { margin: 0 0.15rem; }
.ep-popover-chips { display: flex; flex-direction: column; gap: 0.2rem; }
.ep-pop-chip {
    display: block; width: 100%; border: 1px solid rgba(0,0,0,0.15); border-radius: 4px;
    padding: 0.2rem 0.2rem; font-weight: bold; font-size: 0.7rem; font-family: inherit;
    text-align: center; cursor: pointer;
}
.ep-pop-chip:hover { filter: brightness(0.93); }
.ep-pop-chip.is-selected { box-shadow: 0 0 0 3px var(--brand), inset 0 0 0 1px rgba(255,255,255,0.6); }
.ep-pop-chip:disabled { opacity: 0.35; cursor: not-allowed; filter: none; }

.ep-orte-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; background: #fff; padding: 1rem; border-radius: 6px; margin-bottom: 1.5rem; }

/* Tagesspalten sollen NICHT auf eine feste Breite gezwungen werden - jede
   Spalte soll sich auf den breitesten tatsächlich vorkommenden Namen
   einpendeln (Tabelle nutzt bewusst table-layout: auto, kein "width" mehr
   je Zelle). min-width nur als Untergrenze für Tage ohne Eintrag. */
.ep-orte-table th, .ep-orte-table td { min-width: 46px; height: auto; min-height: 30px; }
/* Einsatzort-Spalte (sticky-col) muss immer den vollen Namen zeigen, ohne
   Umbruch/Abschneiden - daher keine feste Breite, nur eine Mindestbreite
   plus white-space:nowrap, sodass sie sich exakt auf den längsten
   vorkommenden Einsatzort-/Aufgaben-Namen einpendelt. */
.ep-orte-table .sticky-col { width: auto; min-width: 170px; white-space: nowrap; }
.ep-orte-cell { padding: 2px 4px !important; vertical-align: top; text-align: left !important; }
.ep-orte-count {
    display: block; font-weight: bold; font-size: 0.65rem; background: var(--brand-light);
    color: var(--brand); border-radius: 3px; padding: 0 3px; margin-bottom: 2px; width: fit-content;
}
/* Zwei Zählungen statt einer Gesamtzahl direkt in der Zelle: erste Zahl
   CA/OA, zweite Zahl FA/Ass - je eine leicht andere Farbe (blau/grün), damit
   man auf einen Blick sieht, ob an dem Tag/Ort Supervision (CA/OA) dabei ist,
   ohne die Namen darunter lesen zu müssen. */
.ep-orte-count-split { display: flex; width: fit-content; margin-bottom: 2px; font-weight: bold; font-size: 0.65rem; }
.ep-orte-count-caoa { background: var(--brand-light); color: var(--brand); border-radius: 3px 0 0 3px; padding: 0 3px; }
.ep-orte-count-faass { background: #e6f6ea; color: var(--success); border-radius: 0 3px 3px 0; padding: 0 3px; }
.ep-orte-names { font-size: 0.65rem; line-height: 1.3; }
/* Bei besonders breiten Namen ist ein Umbruch bewusst in Ordnung (statt wie
   zuvor mit "..." abgeschnitten) - die Spalte darf dafür etwas breiter
   werden, soll aber nicht künstlich noch breiter erzwungen werden. */
.ep-orte-name-line { white-space: normal; overflow-wrap: break-word; max-width: 100%; }
.ep-orte-name-oa { font-weight: bold; }
.ep-orte-total-row td { background: #f0f4f8; font-size: 0.8rem; }