/* ==============================================================
   Fahrtenbuch Admin – Desktop-fokussiert mit linker Sidebar
   Vereinsfarben: Schwarz und Gelb
   ============================================================== */

:root {
    --sidebar-w: 240px;
    --sidebar-bg: var(--side-bg);
}

body.admin {
    background: var(--col-bg);
    margin: 0;
}

/* ---------- Sidebar (links, fixiert) ---------- */
.admin__sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    color: #fff;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,.07);
    z-index: 50;
    overflow-y: auto;
    scrollbar-width: thin;
}

.admin__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 14px;
    text-decoration: none;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.admin__brand-logo {
    width: 42px; height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}
.admin__brand strong {
    display: block;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -.01em;
}
.admin__brand small {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--col-accent);
    letter-spacing: .17em;
    text-transform: uppercase;
    margin-top: 3px;
}

.admin__nav {
    flex: 1;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
}
.admin__nav {
    padding: 10px 10px;
    gap: 1px;
}
.admin__nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    color: var(--side-fg);
    text-decoration: none;
    font-size: 14px;
    border-radius: var(--r-sm);
    transition: background .15s var(--ease), color .15s var(--ease);
}
.admin__nav a:hover {
    background: var(--side-hover);
    color: var(--side-fg-hover);
}
.admin__nav a.is-active {
    background: var(--side-active);
    color: #fff;
    font-weight: 600;
}
.admin__nav a.is-active .admin__nav-icon { color: var(--col-accent); }
/* Strichsymbole als Inline-SVG statt Emoji: identisch auf jedem Gerät,
   einfarbig in der Textfarbe, keine springende Zeilenhöhe. */
.admin__nav-icon {
    width: 17px; height: 17px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: currentColor;
    opacity: .92;
}
.admin__nav-icon svg { width: 17px; height: 17px; display: block; }
.admin__nav-label { flex: 1; }
/* Zähler offener Bus-Anträge – die einzige Aufgabe, die sonst nur auf ihrer
   eigenen Seite sichtbar wäre. */
.admin__nav-badge {
    flex: 0 0 auto;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--alert);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.admin__user {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin__user-info {
    flex: 1;
    min-width: 0;
}
.admin__user-info strong {
    display: block;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin__user-info small {
    display: block;
    font-size: 11px;
    color: rgba(255,255,255,.5);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.admin__logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 6px;
    background: rgba(255,255,255,.08);
    color: var(--col-accent);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.admin__logout:hover { background: var(--col-accent); color: var(--sidebar-bg); }

.admin__menu-toggle {
    display: none;
    position: fixed;
    top: 12px; left: 12px;
    z-index: 60;
    width: 44px; height: 44px;
    background: var(--sidebar-bg);
    color: var(--col-accent);
    border: none;
    border-radius: var(--r-sm);
    font-size: 22px;
    cursor: pointer;
    box-shadow: var(--shadow-2);
}

/* ---------- Main-Bereich ---------- */
.admin__main {
    margin-left: var(--sidebar-w);
    padding: 32px 36px 64px;
    max-width: 1320px;
}
.admin__main > .page-head h1 {
    font-size: 25px;
    letter-spacing: -.025em;
    margin: 0 0 4px;
}

/* Login-Seite trotzdem zentriert (ohne Sidebar) */
.admin--login .admin__sidebar,
.admin--login .admin__menu-toggle { display: none; }
.admin--login .admin__main { margin-left: 0; padding: 0; }
.admin--login .container { max-width: 460px; padding-top: 60px; }

/* ---------- Mobile: Sidebar wird zum Overlay ---------- */
@media (max-width: 880px) {
    .admin__sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 4px 0 24px rgba(0,0,0,.3);
    }
    body.nav-open .admin__sidebar { transform: translateX(0); }
    body.nav-open::after {
        content: "";
        position: fixed; inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 40;
    }
    .admin__menu-toggle { display: block; }
    .admin__main { margin-left: 0; padding: 70px 16px 24px; }
}

/* ---------- Dashboard ---------- */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.dash-card {
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: 20px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
}
.dash-card h2 {
    font-family: var(--font-mono);
    font-size: 11px;
    margin: 0 0 8px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 500;
}
.big-num {
    font-size: 38px; font-weight: 700; color: var(--text);
    line-height: 1; margin: 4px 0 8px;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
}

.dash-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 800px) {
    .dash-cols { grid-template-columns: 1fr; }
}

/* ---------- Statistik: Kennzahlen + km je Bus ---------- */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 10px 0 6px;
}
@media (max-width: 640px) {
    .dash-kpis { grid-template-columns: repeat(2, 1fr); }
}
.dash-kpi {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 9px 10px;
    text-align: center;
    background: var(--surface-2);
}
.dash-kpi__label { display: block; font-size: 12px; color: var(--text-3); }
.dash-kpi__value {
    display: block; font-size: 24px; font-weight: 700; line-height: 1.2;
    font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.dash-kpi__trend { display: block; font-size: 12px; }
.dash-kpi__trend.is-up   { color: var(--ok); }
.dash-kpi__trend.is-down { color: var(--alert); }
.dash-kpi__trend.is-flat { color: var(--col-muted); }

.dash-busbars { display: grid; gap: 6px; margin-top: 8px; }
.dash-busbar {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) 2fr minmax(90px, auto);
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
@media (max-width: 640px) {
    .dash-busbar { grid-template-columns: 1fr; gap: 2px; }
}
.dash-busbar__track {
    background: var(--col-border);
    border-radius: 5px;
    height: 10px;
    overflow: hidden;
}
.dash-busbar__fill {
    display: block;
    background: var(--col-primary);
    height: 100%;
}
.dash-busbar__val { text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
    .dash-busbar__val { text-align: left; }
}

/* ---------- Bus-Kacheln ---------- */
.bus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.bus-tile {
    background: var(--col-card);
    border: 1.5px solid var(--col-border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bus-tile--unterwegs {
    border-color: var(--col-warn);
    border-width: 2px;
    background: var(--col-warn-bg);
    box-shadow: 0 2px 8px rgba(139, 88, 0, 0.15);
}
.bus-tile__head {
    display: flex; flex-direction: column;
    margin-bottom: 4px;
}
.bus-tile__status { margin: 0; }
.bus-tile__unterwegs {
    display: flex; flex-direction: column; gap: 2px;
    padding: 6px 0;
    border-top: 1px solid rgba(139, 88, 0, 0.2);
    border-bottom: 1px solid rgba(139, 88, 0, 0.2);
}
.bus-tile__km {
    font-size: 22px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--col-primary);
}
.bus-tile__meta { font-size: 14px; }
.tank--low { color: var(--col-alert); font-weight: 600; }

/* Bus-Status-Badge: deutlich erkennbar in Tabelle und Kachel */
.bus-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.bus-status--unterwegs {
    background: var(--col-warn);
    color: var(--surface);
    animation: bus-status-pulse 2s ease-in-out infinite;
}
.bus-status--frei {
    background: var(--col-ok-bg);
    color: var(--col-ok);
    border: 1px solid var(--col-ok);
}
@keyframes bus-status-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 88, 0, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(139, 88, 0, 0); }
}

/* Tabellenzeile für unterwegs-Fahrzeug leicht hervorheben */
.tbl tr.is-unterwegs {
    background: var(--col-warn-bg);
}
.tbl tr.is-unterwegs:hover {
    background: var(--col-warn-bg) !important;
    filter: brightness(0.97);
}

/* ---------- Tabellen ---------- */
.tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.tbl thead th {
    text-align: left;
    background: var(--surface);
    color: var(--text-3);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0;
    z-index: 1;
}
.tbl tbody td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--border-soft);
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background .12s var(--ease); }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.tbl .center { text-align: center; }
.tbl tbody td a { color: var(--text); text-decoration: none; font-weight: 600; }
.tbl tbody td a:hover { color: var(--accent-text); text-decoration: underline; }
/* Ausnahme: Links, die als Button auftreten, behalten ihre Button-Farben.
   Ohne das gewinnt die Zeile darüber (höhere Spezifität als .btn--primary)
   und ein Button in einer Tabelle wird schwarz auf schwarz. */
.tbl tbody td a.btn--primary            { color: var(--btn-fg); }
.tbl tbody td a.btn--primary:hover      { color: var(--btn-fg-hover); text-decoration: none; }
.tbl tbody td a.btn--ghost              { color: var(--text); }
.tbl tbody td a.btn--ghost:hover        { color: var(--text); text-decoration: none; }
.tbl tbody td a.btn--danger             { color: var(--surface); }
.tbl tbody td a.btn--danger:hover       { color: var(--surface); text-decoration: none; }

.tbl--compact thead th { padding: 6px 8px; }
.tbl--compact tbody td { padding: 6px 8px; }
.tbl--compact .num { font-size: 13px; }

.card--no-pad { padding: 0; overflow-x: auto; }
.card--no-pad .tbl { margin: 0; }
.card--no-pad .tbl thead th:first-child { padding-left: 18px; }
.card--no-pad .tbl tbody td:first-child { padding-left: 18px; }

/* Plausi-Reihenfärbung */
.trip-row--auffaellig { background: rgba(180,83,9,0.04); }
.trip-row--verdacht   { background: rgba(185,28,28,0.05); }
.trip-row--auffaellig:hover { background: rgba(180,83,9,0.08); }
.trip-row--verdacht:hover   { background: rgba(185,28,28,0.10); }

/* ---------- Filter ---------- */
.filter__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.filter__grid label {
    display: flex; flex-direction: column; gap: 4px;
}
.filter__grid label > span {
    font-size: 13px; color: var(--col-muted); font-weight: 600;
}
.filter__grid input, .filter__grid select {
    padding: 8px 10px;
    border: 1.5px solid var(--col-border);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    background: var(--col-card);
}
.filter__q { grid-column: span 2; }
.filter__actions {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding-top: 8px; border-top: 1px solid var(--col-border);
}

/* ---------- Pagination ---------- */
.pagination {
    display: flex; justify-content: center; align-items: center;
    gap: 16px; margin-top: 24px;
}
.pagination a {
    color: var(--text); text-decoration: none; font-weight: 600;
    padding: 8px 14px; border-radius: var(--r-sm);
    background: var(--surface); border: 1px solid var(--border);
    transition: background .15s var(--ease), border-color .15s var(--ease);
}
.pagination a:hover { background: var(--surface-2); border-color: var(--border-strong); }

/* ---------- Tabs ---------- */
.tabs {
    display: flex; gap: 4px;
    border-bottom: 2px solid var(--col-border);
    margin-bottom: 18px;
}
.tabs a {
    padding: 10px 18px;
    text-decoration: none;
    color: var(--col-muted);
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.tabs a:hover { color: var(--text); }
.tabs a.is-active {
    color: var(--text);
    border-bottom-color: var(--accent);
}

/* ---------- Trip-Detail ---------- */
.trip-detail { display: grid; gap: 16px; }
.back { margin: 0 0 12px; }
.back a { color: var(--col-muted); text-decoration: none; font-weight: 600; }

/* Karten-Überschrift mit Aktion rechts (z.B. "Fahrt bearbeiten") */
.card__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.card__kopf h2 { margin: 0; }

/* Eckdaten-Zeile über dem Fahrtverlauf */
.fv-eck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.fv-eck__feld { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fv-eck__label {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600;
    color: var(--col-muted);
    text-transform: uppercase; letter-spacing: .04em;
}
.fv-eck__wert { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.fv-eck__sub  { font-size: 13px; color: var(--col-muted); overflow-wrap: anywhere; }

/* Verlauf: links der Fahrtbeginn, rechts die Rückkehr */
.fahrtverlauf {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 16px;
}
@media (max-width: 720px) {
    .fahrtverlauf { grid-template-columns: 1fr; gap: 20px; }
}
.fv-spalte { min-width: 0; }
.fv-spalte--offen { opacity: .85; }

.fv-kopf {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--accent);
}
.fv-spalte--offen .fv-kopf { border-bottom-color: var(--border-strong); }
.fv-kopf__titel {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--col-muted);
}
.fv-kopf__zeit { font-size: 15px; font-weight: 600; }

.fv-zeile {
    display: grid;
    grid-template-columns: 108px 1fr;
    gap: 4px 12px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
}
.fv-zeile:last-child { border-bottom: none; }
.fv-zeile__label { color: var(--col-muted); }
.fv-zeile__wert  { min-width: 0; overflow-wrap: anywhere; }
.fv-zeile__zusatz {
    display: block;
    font-size: 13px;
    color: var(--col-muted);
    margin-top: 2px;
}
@media (max-width: 420px) {
    .fv-zeile { grid-template-columns: 1fr; }
}

/* Ampel-Werte im Verlauf */
.fv-ok, .fv-warn { display: inline-flex; align-items: center; gap: 5px; }
.fv-ok   { color: var(--ok); }
.fv-warn { color: var(--warn); }

.fv-link {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 6px;
    font-size: 13px; font-weight: 600;
    color: var(--accent-text); text-decoration: none;
    white-space: nowrap;
}
.fv-link:hover { text-decoration: underline; }

.fv-fotos { margin-top: 10px; }
.fv-fotos__label {
    display: flex; align-items: center; gap: 5px;
    font-size: 13px; color: var(--col-muted);
    margin-top: 8px;
}

.fv-meta {
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.damage {
    background: var(--col-warn-bg);
    border-left: 4px solid var(--col-warn);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
}
.damage--unfall {
    background: var(--col-alert-bg);
    border-left-color: var(--col-alert);
}
.damage header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 8px;
}
.damage .photos {
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
}
.damage .photos img {
    width: 120px; height: 120px; object-fit: cover;
    border-radius: 6px; border: 1px solid var(--col-border);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; }
}

.form-inline {
    display: flex; gap: 8px; align-items: center;
    margin-top: 10px;
}
.form-inline .field__input { padding: 8px 10px; }

.checkbox {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; user-select: none;
}

/* ---------- Tachostand ---------- */

/* Foto-Galerie in der Prüf-Card (Trip-Detail) */
.pruef-fotos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}
.pruef-fotos__item {
    display: block;
    width: 110px;
    height: 85px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--col-border);
}
.pruef-fotos__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Seitenkopf mit Aktion rechts (z.B. "Alle QR drucken") */
.page-head--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* Bus-Zuteilung im Busplan: welcher Bus fährt zu welcher Fahrt */
.bus-zuteilung {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
/* In der Tages-Zusammenfassung (bestätigte Tage) die Chips unter die Zeile
   umbrechen, damit sie nicht den Mannschaftsnamen verdrängen. */
.busplan-tag__zusammenfassung li { flex-wrap: wrap; }
.busplan-tag__zusammenfassung .bus-zuteilung { flex-basis: 100%; margin-top: 4px; }
.bus-chip {
    font-size: 11px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text-2);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}
.bus-chip:hover { border-color: var(--text-3); }
.bus-chip--an {
    background: var(--btn-bg);
    border-color: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 600;
}
.bus-chip:disabled { opacity: .5; cursor: default; }

/* ---- Fahrten-Tabelle: mobile Karten-Ansicht ---- */
@media (max-width: 760px) {
    /* Tabellenkopf ausblenden, jede Zeile wird zur Karte */
    .tbl--trips thead { display: none; }
    .tbl--trips,
    .tbl--trips tbody,
    .tbl--trips tr,
    .tbl--trips td { display: block; width: 100%; }

    .tbl--trips tr {
        border: 1px solid var(--col-border);
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 6px 0;
        background: var(--col-card);
    }
    .tbl--trips tr:hover { background: var(--col-card); }

    /* Zelle: Label links (aus data-label), Wert rechts */
    .tbl--trips td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 14px;
        padding: 7px 14px;
        border-bottom: 1px solid var(--border-soft);
        text-align: right;
    }
    .tbl--trips tr td:last-child { border-bottom: none; }
    .tbl--trips td::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 600;
        color: var(--col-muted);
        text-align: left;
        flex: 0 0 auto;
    }
    .tbl--trips .num { text-align: right; }

    /* Aktion-Zelle (Details-Link) als auffälliger Button am Kartenende */
    .tbl--trips td.tbl__aktion {
        justify-content: center;
        padding-top: 10px;
    }
    .tbl--trips td.tbl__aktion::before { content: none; }
    .tbl--trips td.tbl__aktion a {
        display: inline-block;
        width: 100%;
        text-align: center;
        padding: 9px;
        background: var(--col-card-hover);
        border-radius: 8px;
    }
    /* Leere-Meldung nicht als Flex-Zeile zerlegen */
    .tbl--trips td[colspan]::before { content: none; }
    .tbl--trips td[colspan] { justify-content: center; }
}

/* ===== Fahrzeug-Kacheln ===== */
.fz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 18px;
}
@media (max-width: 460px) {
    .fz-grid { grid-template-columns: 1fr; }
}
.fz-card {
    background: var(--col-card);
    border: 1px solid var(--col-border);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.fz-card--unterwegs { border-color: var(--col-accent); }
.fz-card--inaktiv { opacity: .65; }
.fz-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.fz-card__icon { font-size: 26px; line-height: 1; }
.fz-card__titel { display: flex; flex-direction: column; line-height: 1.25; }
.fz-card__titel strong { font-size: 15px; }
.fz-card__head .bus-status { margin-left: auto; }
.fz-card__unterwegs { margin: -4px 0 0; }
.fz-card__stats {
    display: flex;
    gap: 10px;
}
.fz-stat {
    flex: 1;
    background: var(--col-card-hover);
    border-radius: 10px;
    padding: 8px 10px;
    text-align: center;
}
.fz-stat__wert { display: block; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fz-stat__label { display: block; font-size: 11px; color: var(--col-muted); }
.fz-card__url {
    font-size: 12px;
    word-break: break-all;
    background: var(--surface-2);
    border-radius: 8px;
    padding: 6px 8px;
}
.fz-card__url a { color: var(--col-primary); text-decoration: none; }
.fz-card__aktionen {
    display: flex;
    gap: 8px;
    margin-top: auto;
}
.fz-card__aktionen .btn { flex: 1; text-align: center; }

/* ===== Modal ===== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal[hidden] { display: none; }
.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
}
.modal__box {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 22px;
    box-shadow: var(--shadow-3);
    animation: modal-auf .18s var(--ease);
}
@keyframes modal-auf {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.modal__head h2 { margin: 0; font-size: 18px; }
.modal__close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--col-muted);
    cursor: pointer;
    padding: 4px 8px;
}
.modal__close:hover { color: var(--text); }

/* Breitere Variante für zweispaltige Formulare (z.B. Fahrt bearbeiten) */
.modal__box--breit { max-width: 640px; }

/* Fußzeile im Modal: Speichern links, Randaktionen rechts */
.modal__aktionen {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

/* Gruppierte Formularblöcke im Modal */
.form-block {
    border: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}
.form-block > legend {
    padding: 0;
    margin-bottom: 10px;
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--col-muted);
}

/* ===== Dashboard: Statusleiste ===== */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.dash-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 15px 17px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    box-shadow: var(--shadow-1);
}
.dash-stat__wert {
    font-size: 29px; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums; letter-spacing: -.035em;
}
.dash-stat__von { font-size: 17px; font-weight: 600; color: var(--col-muted); }
/* Für Text statt Zahl (z.B. "Sa 26.07.") – 28px würde umbrechen */
.dash-stat__wert--klein { font-size: 20px; }
.dash-stat__label { font-size: 13px; font-weight: 600; }
.dash-stat__sub { font-size: 12px; color: var(--col-muted); }
.dash-stat--alert { border-color: var(--warn-border); background: var(--warn-bg); }
.dash-stat--alert .dash-stat__wert { color: var(--warn); }
.dash-stat--ok .dash-stat__wert { color: var(--ok); }

/* ===== Dashboard: Zu-erledigen-Box ===== */
.dash-todo--aktiv { border-color: var(--accent-strong); }
.dash-todo__leer {
    color: var(--ok);
    font-weight: 600;
    margin: 0;
}
.dash-todo__liste { list-style: none; margin: 8px 0 0; padding: 0; }
.dash-todo__liste li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
    transition: background .12s var(--ease);
}
.dash-todo__liste li:hover { background: var(--surface-2); }
.dash-todo__liste li:last-child { border-bottom: none; }
.dash-todo__icon { font-size: 20px; flex: 0 0 auto; }
.dash-todo__text { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.dash-todo__text .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-todo__link {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--col-primary);
    text-decoration: none;
    padding: 4px 10px;
}

/* Gruppen innerhalb der Zu-erledigen-Box */
.dash-todo__gruppe { margin-top: 14px; }
.dash-todo__gruppe:first-of-type { margin-top: 6px; }
.dash-todo__gruppe-titel {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--col-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.dash-todo__zahl {
    background: var(--col-border);
    color: var(--text);
    border-radius: 10px;
    padding: 0 7px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.dash-todo__gruppe .dash-todo__liste { margin-top: 2px; }
.dash-todo__mehr { margin: 2px 0 0; }

/* ===== Dashboard: nächste Einsätze ===== */
.dash-einsaetze { list-style: none; margin: 8px 0 0; padding: 0; }
.dash-einsatz {
    display: grid;
    grid-template-columns: 78px 52px minmax(120px, 1.4fr) minmax(120px, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 14px;
}
.dash-einsatz--tagstart { border-top: 1px solid var(--col-border); }
.dash-einsatz:first-child { border-top: none; }
.dash-einsatz__tag { font-size: 13px; white-space: nowrap; }
.dash-einsatz__zeit { font-variant-numeric: tabular-nums; color: var(--col-muted); }
.dash-einsatz__wer { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.dash-einsatz__wer .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-einsatz__bus { font-size: 13px; }
@media (max-width: 700px) {
    .dash-einsatz {
        grid-template-columns: 70px 1fr auto;
        row-gap: 2px;
    }
    .dash-einsatz__wer   { grid-column: 2 / 3; }
    .dash-einsatz__bus,
    .dash-einsatz__status { grid-column: 2 / 3; }
    .dash-einsatz__zeit  { grid-column: 1 / 2; }
}

/* ===== Dashboard: eingeklappte Statistik ===== */
.dash-details summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}
.dash-details summary::-webkit-details-marker { display: none; }
.dash-details summary h2 { margin: 0; }

/* Tacho-Abgleich-Zeile in der Fahrzeug-Kachel */
.fz-tacho {
    font-size: 12px;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--surface-2);
    line-height: 1.4;
}
.fz-tacho__zeile { display: block; }
.fz-tacho__diff { color: var(--col-muted); }
.fz-tacho--ok { background: var(--ok-bg); }
.fz-tacho--ok .fz-tacho__diff { color: var(--ok); }
.fz-tacho--warn { background: var(--warn-bg); }
.fz-tacho--warn .fz-tacho__diff { color: var(--warn); font-weight: 600; }

/* Abgesetzte/abgesagte Spiele im Busplan */
.aw-abgesetzt { opacity: .6; }
.aw-abgesetzt strong { text-decoration: line-through; }

/* Theme-Schalter sitzt auf der dunklen Sidebar und braucht eigene Farben */
.admin__user { gap: 8px; }
.admin__user .theme-schalter {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.14);
    color: rgba(255,255,255,.8);
}
.admin__user .theme-schalter:hover { background: rgba(255,255,255,.18); color: #fff; }

/* Dashboard: vergessene Fahrten mit Vorschlag aus der Folgefahrt.
   Jeder Fall ist ein abgesetzter Block, damit bei mehreren offenen Fahrten
   klar bleibt, welche Eingabefelder zu welchem Bus gehören. */
.vergessen-fall {
    border: 1px solid var(--border);
    border-radius: var(--r-md, 10px);
    background: var(--surface);
    padding: 12px 14px;
    margin-top: 12px;
}
.vergessen-fall__kopf { display: flex; flex-direction: column; gap: 2px; }
.vergessen-fall__form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.vergessen-fall__form .field { margin: 0; max-width: 320px; }
.vergessen-fall__form .actions { margin-top: 2px; }