/* ============================================================
   iOS/iPadOS Design System (ADR-008)

   Alle Farben stehen als Tokens in den beiden Blöcken unten, Regeln
   danach nutzen nur noch die Tokens. Ein neues Paar aus Text und Fläche
   gehört in tests/test_design.py: Text 4,5:1, Feldrand und Icons 3:1
   (WCAG 2.2 AA), in Hell und Dunkel.

   Glas nur auf der Navigations- und Steuerungsebene (Navbar, Dropdowns),
   Inhalte liegen auf opaken Flächen. Im Zweifel opak.
   ============================================================ */

/* ============================================================
   Tokens — Hell
   Apple HIG: systemGroupedBackground, systemGray5.
   Akzent #005EC2 statt iOS-Blau #007AFF: das erreicht auf Weiß nur 4,0:1.
   ============================================================ */
:root {
    /* Native Felder, Scrollbalken und das Kalender-Icon folgen dem Theme */
    color-scheme: light;

    --bulma-family-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
        'Helvetica Neue', system-ui, sans-serif;

    /* -l: gefüllte Flächen, -on-scheme-l: Text auf den Oberflächen */
    --bulma-info-h: 211;
    --bulma-info-s: 100%;
    --bulma-info-l: 38%;
    --bulma-info-on-scheme-l: 38%;
    --bulma-link-h: 211;
    --bulma-link-s: 100%;
    --bulma-link-l: 38%;
    --bulma-link-on-scheme-l: 38%;

    /* Text */
    --bulma-text-weak-l: 42%;
    --ios-text-disabled: rgba(60, 60, 67, 0.3);

    /* Flächen, alle opak */
    --bulma-scheme-main: #F2F2F7;      /* systemGroupedBackground */
    --bulma-background:  #E5E5EA;      /* systemGray5 */
    --ios-surface:          #FFFFFF;   /* secondarySystemGroupedBackground */
    --ios-surface-elevated: #F2F2F7;   /* tertiarySystemGroupedBackground  */
    --ios-surface-floating: #FFFFFF;   /* Toasts */
    --ios-segment-active:   #FFFFFF;   /* aktives Segment des Theme Pickers */
    --ios-segment-shadow:   0 1px 3px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.08);
    --ios-tooltip-background: #1C1C1E;
    --ios-tooltip-text:       #FFFFFF;

    /* Apple HIG opaqueSeparator, nur Zierde */
    --ios-separator: rgba(60, 60, 67, 0.29);

    /* Formularfelder: Füllung und Rand, der Rand erfüllt 3:1 (WCAG 1.4.11) */
    --ios-control-fill:   rgba(118, 118, 128, 0.12);
    --ios-control-border: #86868B;

    /* Akzent */
    --ios-accent-text: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-on-scheme-l));
    --ios-accent-fill: hsl(var(--bulma-info-h), var(--bulma-info-s), var(--bulma-info-l));
    --ios-on-accent:   #FFFFFF;

    /* Status: Text, Tönung (Tags, Knöpfe, Meldungen), Tönung im Hover, Rand, Akzentlinie */
    --ios-info-text:        var(--ios-accent-text);
    --ios-info-tint:        rgba(0, 122, 255, 0.10);
    --ios-info-tint-hover:  rgba(0, 122, 255, 0.14);
    --ios-info-border:      rgba(0, 122, 255, 0.22);
    --ios-info-line:        hsl(211, 100%, 50%);

    --ios-success-text:       hsl(142, 70%, 25%);
    --ios-success-tint:       rgba(52, 199, 89, 0.12);
    --ios-success-tint-hover: rgba(52, 199, 89, 0.20);
    --ios-success-border:     rgba(52, 199, 89, 0.28);
    --ios-success-line:       hsl(142, 57%, 42%);

    --ios-warning-text:       hsl(35, 100%, 27%);
    --ios-warning-tint:       rgba(255, 149, 0, 0.12);
    --ios-warning-tint-hover: rgba(255, 149, 0, 0.20);
    --ios-warning-border:     rgba(255, 149, 0, 0.28);
    --ios-warning-line:       hsl(35, 100%, 46%);

    --ios-danger-text:       hsl(3, 100%, 38%);
    --ios-danger-tint:       rgba(255, 59, 48, 0.10);
    --ios-danger-tint-hover: rgba(255, 59, 48, 0.16);
    --ios-danger-border:     rgba(255, 59, 48, 0.24);
    --ios-danger-line:       hsl(3, 100%, 55%);

    --ios-purple-text: hsl(280, 60%, 42%);
    --ios-purple-tint: rgba(175, 82, 222, 0.14);
    --ios-purple-line: hsl(280, 68%, 60%);

    /* Weitere Farben der Dienstarten (Kategorien), dazu Status und Purple */
    --ios-teal-text:   hsl(186, 100%, 22%);
    --ios-teal-tint:   rgba(48, 176, 199, 0.16);
    --ios-indigo-text: hsl(241, 55%, 44%);
    --ios-indigo-tint: rgba(88, 86, 214, 0.14);

    --ios-gold-border: rgba(255, 179, 0, 0.65);

    /* Schatten der Karten auf Start- und Anmeldeseite, der Dropdowns und Toasts */
    --ios-card-shadow:     0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.06);
    --ios-floating-shadow: 0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);

    /* Glas: die einzige Stelle, an der es definiert ist, die Fallbacks unten greifen hier */
    --ios-glass-background: rgba(242, 242, 247, 0.85);
    --ios-glass-opaque:     #F2F2F7;
    --ios-glass-blur:       20px;
    --ios-glass-saturation: 180%;
    --ios-glass-filter:     saturate(var(--ios-glass-saturation)) blur(var(--ios-glass-blur));

    /* Override Bulma navbar variables → ermöglicht Frosted Glass in
       Bulma-eigenen Regeln (.navbar-menu, .navbar-dropdown) */
    --bulma-navbar-background-color:          transparent;
    --bulma-navbar-dropdown-background-color: var(--ios-glass-background);
    --bulma-navbar-dropdown-border-color:     var(--ios-separator);
    --bulma-navbar-item-hover-color:          var(--ios-accent-text);
    --bulma-navbar-item-active-color:         var(--ios-accent-text);
    --ios-navbar-item-hover: rgba(0, 0, 0, 0.06);

    /* Bulma setzt auf Hover --bulma-navbar-item-background-a: 1 (opak).
       Auf 0 setzen damit der hsla()-Wert transparent bleibt.
       div.navbar-item nutzt hsl() ohne Alpha — wird via !important überschrieben. */
    --bulma-navbar-item-background-a: 0;

    /* Navbar-Höhe explizit: logo (2.5rem) + padding oben/unten (je 0.5rem) = 3.5rem.
       Betrifft auch body padding-top und Hero-Höhen in Bulma. */
    --bulma-navbar-height: 3.5rem;

    /* Tabellen erben die Farbe der Box. Bulma nimmt sonst var(--bulma-scheme-main) = #F2F2F7,
       das auf einer weißen Box sichtbar abweicht. */
    --ios-table-background: transparent;
    --ios-table-row-hover:  var(--ios-surface-elevated);
    --ios-table-row-even:   #F9F9FB;

    /* Border-Radius */
    --bulma-radius:       10px;
    --bulma-radius-large: 14px;
    --bulma-radius-small: 6px;
}

/* ============================================================
   Tokens — Dunkel
   Apple HIG: true black base, #1C1C1E cards.
   Weiß auf iOS-Blau #0A84FF erreicht nur 3,6:1: gefüllte Flächen dunkler, Text heller.
   ============================================================ */
html[data-theme="dark"] {
    color-scheme: dark;

    --bulma-info-h: 210;
    --bulma-info-s: 99%;
    --bulma-info-l: 45%;
    --bulma-info-on-scheme-l: 68%;
    --bulma-link-h: 210;
    --bulma-link-s: 99%;
    --bulma-link-l: 45%;
    --bulma-link-on-scheme-l: 68%;

    --bulma-text-weak-l: 68%;
    --ios-text-disabled: rgba(235, 235, 245, 0.3);

    --bulma-scheme-main: #000000;      /* systemBackground — true black */
    --bulma-background:  #1C1C1E;      /* systemGray6 */
    --ios-surface:          #1C1C1E;   /* secondarySystemBackground */
    --ios-surface-elevated: #2C2C2E;   /* tertiarySystemBackground  */
    --ios-surface-floating: #2C2C2E;
    --ios-segment-active:   #3A3A3C;
    --ios-segment-shadow:   0 1px 3px rgba(0, 0, 0, 0.40);
    --ios-tooltip-background: #3A3A3C;
    --ios-tooltip-text:       #FFFFFF;

    --ios-separator: rgba(84, 84, 88, 0.65);

    --ios-control-fill:   rgba(118, 118, 128, 0.24);
    --ios-control-border: #8E8E93;

    --ios-info-tint:        rgba(10, 132, 255, 0.16);
    --ios-info-tint-hover:  rgba(10, 132, 255, 0.22);
    --ios-info-border:      rgba(10, 132, 255, 0.28);
    --ios-info-line:        hsl(210, 99%, 52%);

    --ios-success-text:       hsl(138, 61%, 62%);
    --ios-success-tint:       rgba(48, 209, 88, 0.16);
    --ios-success-tint-hover: rgba(48, 209, 88, 0.22);
    --ios-success-border:     rgba(48, 209, 88, 0.30);
    --ios-success-line:       hsl(138, 61%, 51%);

    --ios-warning-text:       hsl(37, 100%, 62%);
    --ios-warning-tint:       rgba(255, 159, 10, 0.16);
    --ios-warning-tint-hover: rgba(255, 159, 10, 0.22);
    --ios-warning-border:     rgba(255, 159, 10, 0.32);
    --ios-warning-line:       hsl(37, 100%, 51%);

    --ios-danger-text:       hsl(3, 100%, 75%);
    --ios-danger-tint:       rgba(255, 69, 58, 0.16);
    --ios-danger-tint-hover: rgba(255, 69, 58, 0.22);
    --ios-danger-border:     rgba(255, 69, 58, 0.28);
    --ios-danger-line:       hsl(3, 100%, 62%);

    --ios-purple-text: hsl(280, 90%, 78%);
    --ios-purple-tint: rgba(191, 90, 242, 0.20);
    --ios-purple-line: hsl(280, 85%, 65%);

    --ios-teal-text:   hsl(187, 75%, 62%);
    --ios-teal-tint:   rgba(64, 200, 224, 0.18);
    --ios-indigo-text: hsl(241, 100%, 82%);
    --ios-indigo-tint: rgba(94, 92, 230, 0.26);

    --ios-gold-border: rgba(255, 193, 7, 0.55);

    --ios-card-shadow:     0 1px 4px rgba(0, 0, 0, 0.24), 0 4px 20px rgba(0, 0, 0, 0.40);
    --ios-floating-shadow: 0 8px 32px rgba(0, 0, 0, 0.48), 0 2px 8px rgba(0, 0, 0, 0.24);

    --ios-glass-background: rgba(28, 28, 30, 0.85);
    --ios-glass-opaque:     #1C1C1E;

    --bulma-navbar-dropdown-background-color: var(--ios-glass-background);
    --ios-navbar-item-hover: rgba(255, 255, 255, 0.08);

    /* Zellen auf erhöhter Oberfläche, nicht auf Black */
    --ios-table-background: var(--ios-surface);
    --ios-table-row-even:   #161618;
}

/* ============================================================
   Barrierefreiheit — Wünsche aus den Systemeinstellungen

   Müssen nach den Tokens stehen, gleiche Spezifität wie dort.
   Weniger Bewegung steht unten, das ändert Regeln, keine Tokens.
   ============================================================ */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    :root,
    html[data-theme="dark"] {
        --ios-glass-background: var(--ios-glass-opaque);
        --ios-glass-filter: none;
    }
}

@media (prefers-contrast: more) {
    :root {
        --bulma-text-l: 15%;
        --bulma-text-weak-l: 30%;
        --ios-separator: #3C3C43;
        --ios-control-border: #3C3C43;
    }

    html[data-theme="dark"] {
        --bulma-text-l: 90%;
        --bulma-text-weak-l: 80%;
        --ios-separator: #AEAEB2;
        --ios-control-border: #AEAEB2;
    }
}

/* ============================================================
   Tastaturfokus: sichtbar auf allem, was bedienbar ist (WCAG 2.4.7).
   Felder zeigen den Fokus über ihren Rand, siehe unten.
   ============================================================ */
:focus-visible:not(.input, .textarea, select) {
    outline: 2px solid var(--ios-accent-text);
    outline-offset: 2px;
}

.navbar-item:focus-visible,
.navbar-link:focus-visible,
.navbar-burger:focus-visible,
.navbar-action-btn:focus-visible,
.theme-picker-btn:focus-visible {
    outline-offset: -2px;
}

/* ============================================================
   Navbar — Frosted Glass (iOS translucent bar)

   backdrop-filter auf ::before statt auf .navbar direkt.
   Grund: backdrop-filter auf einem Element erstellt einen
   Stacking Context — Kind-Elemente (z.B. .navbar-dropdown)
   sehen nur den bereits gefilterten Parent-Output als Backdrop,
   nicht den originalen Seiteninhalt. Mit ::before hat .navbar
   selbst keinen backdrop-filter-Stacking-Context, und das
   Dropdown kann seinen eigenen Blur unabhängig anwenden.
   ============================================================ */
.navbar {
    background-color: transparent;
    border-bottom: 1px solid var(--ios-separator);
    box-shadow: none;
}

.navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--ios-glass-background);
    backdrop-filter: var(--ios-glass-filter);
    -webkit-backdrop-filter: var(--ios-glass-filter);
    z-index: -1;
    pointer-events: none;
}

/* Navbar-Burger: aktives Menü erbt Frosted Glass vom .navbar-Parent.
   Hintergrund via --bulma-navbar-background-color (semitransparent).
   Kein eigenes backdrop-filter nötig. */
.navbar-menu {
    /* Auf Mobile: box-shadow entfernen, Trennlinie via border */
    box-shadow: none;
}

.navbar-menu.is-active {
    border-bottom: 1px solid var(--ios-separator);
}

/* Logo: max-height auf 2.5rem — passt in 3.5rem Navbar mit je 0.5rem Padding */
.navbar-brand .navbar-item img {
    max-height: 2.5rem;
}

/* Navbar-Items: immer transparent.
   !important nötig weil Bulma .navbar-item mit hsl() (ohne Alpha-Variable)
   und a.navbar-item mit hsla() überschreibt — beide ignorieren unsere
   niedrigere Spezifität ohne !important. */
.navbar-item,
.navbar-link,
a.navbar-item,
div.navbar-item {
    background-color: transparent !important;
}

/* Hover / Focus: subtiles Highlight — semi-transparent damit Blur sichtbar bleibt */
a.navbar-item:hover,
a.navbar-item:focus,
a.navbar-item:focus-within,
.navbar-link:hover,
.navbar-link:focus,
.navbar-link:focus-within {
    background-color: var(--ios-navbar-item-hover) !important;
}

.navbar-item.has-dropdown > .navbar-link {
    cursor: default;
}

/* Abteilungswechsler: Knöpfe eines POST-Formulars, die wie die Links im Dropdown aussehen sollen */
.navbar-dropdown button.navbar-item {
    width: 100%;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.navbar-dropdown button.navbar-item:not([disabled]):hover,
.navbar-dropdown button.navbar-item:not([disabled]):focus {
    background-color: var(--ios-navbar-item-hover) !important;
}

.navbar-dropdown button.navbar-item[disabled] {
    font-weight: 600;
    cursor: default;
}

/* Lange Namen kürzen, der ganze steht im Dropdown und im title */
.navbar-department-name {
    display: inline-block;
    max-width: 6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Schmale Desktop-Breiten (z. B. iPad quer): Mit dem Wechsler passt die Leiste nur ohne
   Beschriftung von Account und Abmelden, ohne Icon und mit kürzerem Namen */
@media screen and (min-width: 1024px) and (max-width: 1215px) {
    .navbar-department ~ .navbar-item .navbar-action-btn span,
    .navbar-department .icon {
        display: none;
    }

    .navbar-department-name {
        max-width: 4rem;
    }
}

/* ============================================================
   Navbar-Dropdown — Desktop Frosted Glass

   Das Dropdown ist position: absolute; top: 100% und rendert
   UNTERHALB der Navbar-Leiste. Die Seiteninhalt dahinter wird
   durch den .navbar-backdrop-filter bereits unscharf. Das
   Dropdown bekommt einen semitransparenten Hintergrund —
   der Blur kommt vom Elternelement (.navbar).

   Border nach Apple HIG: opaqueSeparator (kein box-border,
   sondern 1px-Linie mit --ios-separator).
   ============================================================ */
.navbar-dropdown {
    background-color: var(--ios-glass-background);
    backdrop-filter: var(--ios-glass-filter);
    -webkit-backdrop-filter: var(--ios-glass-filter);

    /* Apple HIG: subtle border, kein border-top allein */
    border: 1px solid var(--ios-separator);
    border-top: none;

    border-radius: var(--bulma-radius);
    box-shadow: var(--ios-floating-shadow);
}

.navbar-dropdown .navbar-item:hover {
    background-color: var(--ios-navbar-item-hover) !important;
    border-radius: var(--bulma-radius-small);
}

/* Mobile: Dropdown standardmäßig eingeklappt, öffnet per JS (.is-active) */
@media screen and (max-width: 1023px) {
    .navbar-item.has-dropdown .navbar-dropdown {
        display: none;
    }
    .navbar-item.has-dropdown.is-active .navbar-dropdown {
        display: block;
    }
}

/* Mobile: Menü und Dropdown vollständig transparent —
   backdrop-filter auf .navbar (Parent) deckt die gesamte
   aufgeklappte Fläche ab; eigene Hintergründe würden den Blur verdecken. */
@media screen and (max-width: 1023px) {
    .navbar-menu,
    .navbar-menu.is-active {
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .navbar-dropdown {
        background-color: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-top: 1px solid var(--ios-separator) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding-left: 1.25rem;
    }

    .navbar-dropdown .navbar-item:hover {
        border-radius: var(--bulma-radius-small);
    }
}

/* ============================================================
   Box / Card — iOS Grouped Card
   iOS Settings hat keine Schatten — nur Farbkontrast zwischen
   Karte (#FFF) und Hintergrund (#F2F2F7) trennt die Elemente.
   ============================================================ */
.box {
    --bulma-box-padding: 1rem;
    background-color: var(--ios-surface);
    border-radius: var(--bulma-radius-large);
    box-shadow: none;
}

/* Promo-Box (Spesenprofi) — normale Box mit goldenem Akzent-Rahmen */
.box.is-promo {
    border: 2px solid var(--ios-gold-border);
}

/* Kopf und Text der Startseite: nebeneinander, am Handy untereinander */
.promo-head,
.promo-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.promo-head .title {
    margin-bottom: 0;
}

/* Am Handy bricht der Titel neben dem Sparschwein um, statt es allein in eine Zeile zu stellen */
.promo-head .icon-text {
    flex-wrap: nowrap;
    align-items: flex-start;
}

.promo-body {
    margin-top: 0.5rem;
}

.promo-body > p {
    flex: 1 1 20rem;
    font-size: 0.875rem;
}

/* Gratis-Aktion — zugeklappt, aufgeklappt mit lila Akzentlinie (iOS systemPurple) */
.promo-details {
    margin-top: 0.75rem;
    font-size: 0.875rem;
}

.promo-details > summary {
    cursor: pointer;
    font-weight: 600;
}

.promo-offer {
    margin-top: 0.5rem;
    padding-left: 1rem;
    border-left: 3px solid var(--ios-purple-line);
}

.promo-offer > p {
    margin-bottom: 0.5rem;
}

/* Purple-getöntes Tag (Gratis-Badge) — analog zu den anderen .tag-Varianten */
.tag.is-purple {
    background-color: var(--ios-purple-tint);
    color: var(--ios-purple-text);
}

/* ============================================================
   Table — iOS List-View Appearance
   ============================================================ */
/* Bulma setzt seine Tabellenvariablen an .table selbst, aus :root kämen sie nicht an */
.table {
    --bulma-table-background-color:                        var(--ios-table-background);
    --bulma-table-cell-border-color:                       var(--ios-separator);
    --bulma-table-row-hover-background-color:              var(--ios-table-row-hover);
    --bulma-table-striped-row-even-background-color:       var(--ios-table-row-even);
    --bulma-table-striped-row-even-hover-background-color: var(--ios-table-row-hover);
    white-space: nowrap;
}

/* Zellen: iOS-Zeilenhöhe (~44pt) + Inset-Optik durch Padding */
.table td,
.table th {
    /* Mehr vertikales Padding für luftigere iOS-Zeilen */
    padding: 0.75rem 1rem;
    vertical-align: middle;
    line-height: 1.4;
}

/* Erster/letzter Cell: iOS-Inset (16pt ≈ 1rem).
   Separator geht technisch volle Breite, aber der größere
   Abstand links/rechts erzeugt denselben visuellen Eindruck. */
.table td:first-child,
.table th:first-child {
    padding-left: 1rem;
}

.table td:last-child,
.table th:last-child {
    padding-right: 1rem;
}

/* Tabelle mit Fließtext (Datenschutzerklärung): Zellen brechen um */
.table.is-wrapping {
    white-space: normal;
}

/* Letzter tbody-Eintrag: kein Separator nach unten */
.table tbody tr:last-child td {
    border-bottom: none;
}

.table-container {
    border-radius: var(--bulma-radius-large);
    overflow-x: auto;
}

/* ============================================================
   DataTables 2.x — iOS Theme
   Selektoren basieren auf DataTables v2.x + Bulma-Integration:
   .dt-container, .dt-length, .dt-search, .dt-info, .dt-paging
   ============================================================ */

/* Wrapper: iOS Card-Style mit Padding */
div.dt-container {
    background-color: var(--ios-surface);
    border-radius: var(--bulma-radius-large);
    padding: 1rem;
}

/* Select (Length) und Input (Search) — iOS Filled Style */
div.dt-container div.dt-length select,
div.dt-container div.dt-search input {
    background-color: var(--ios-control-fill);
    border: 1px solid var(--ios-control-border);
    border-radius: var(--bulma-radius-small);
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    padding-left: 0.6rem;
    font-size: 0.875rem;
    color: inherit;
    font-family: inherit;
    box-shadow: none;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Search-Input: kein extra Pfeil-Platz nötig */
div.dt-container div.dt-search input {
    padding-right: 0.6rem;
}

div.dt-container div.dt-search input:focus,
div.dt-container div.dt-length select:focus {
    border-color: var(--ios-accent-text);
    box-shadow: 0 0 0 3px var(--ios-info-border);
}

/* Info-Text (z. B. "Zeige 1 bis 10 von 42 Einträgen") */
div.dt-container div.dt-info {
    font-size: 0.8rem;
    color: var(--bulma-text-weak);
    padding-top: 0.5rem;
}

/* Paginierung — Bulma .pagination-link überschreiben */
div.dt-container div.dt-paging .pagination-link {
    border: none;
    background: transparent;
    color: var(--ios-accent-text);
    font-weight: 400;
    transition: background-color 0.15s ease;
    box-shadow: none;
}

div.dt-container div.dt-paging .pagination-link:hover {
    background: var(--ios-info-tint);
    border-color: transparent;
    color: var(--ios-accent-text);
}

/* Aktive Seite — iOS Blau gefüllt */
div.dt-container div.dt-paging .pagination-link.is-current {
    background: var(--ios-accent-fill);
    border-color: var(--ios-accent-fill);
    color: var(--ios-on-accent);
    font-weight: 600;
}

/* Deaktivierte Buttons */
div.dt-container div.dt-paging .pagination-link[disabled],
div.dt-container div.dt-paging .pagination-link.is-disabled {
    background: transparent;
    border-color: transparent;
    color: var(--ios-text-disabled);
    cursor: default;
    opacity: 1;
}

/* Column-Header Hover-Outline: iOS-subtil */
table.dataTable thead > tr > th.dt-orderable-asc:hover,
table.dataTable thead > tr > th.dt-orderable-desc:hover {
    outline: 2px solid var(--ios-info-border);
    outline-offset: -2px;
}

/* Sortier-Pfeile: aktive Spalte = iOS Blau */
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after {
    opacity: 1;
    color: var(--ios-accent-text);
}

/* ============================================================
   Inputs / Select / Textarea — iOS filled
   Fill-Hintergrund plus Rand, der sich mit 3:1 von der Box abhebt.
   Fokus: Rand in Akzentfarbe, weicher Ring.
   ============================================================ */
.input,
.select select,
.textarea {
    border-radius: var(--bulma-radius);
    background-color: var(--ios-control-fill);
    border-color: var(--ios-control-border);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input:hover,
.select select:hover,
.textarea:hover {
    border-color: var(--ios-control-border);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--bulma-text-weak);
}

.control.has-icons-left .icon,
.control.has-icons-right .icon {
    color: var(--bulma-text-weak);
}

.input:focus,
.input.is-focused,
.input:active,
.textarea:focus,
.textarea.is-focused,
.textarea:active,
.select select:focus {
    border-color: var(--ios-accent-text);
    box-shadow: 0 0 0 2px var(--ios-info-border);
    outline: none;
}

/* Validierungs-States behalten farbigen Rand */
.input.is-success,
.textarea.is-success {
    border-color: var(--ios-success-text);
}

.input.is-danger,
.textarea.is-danger {
    border-color: var(--ios-danger-text);
}

/* Select braucht im Dark Mode einen soliden Hintergrund.
   Browser-native Dropdown-Popups erben background-color vom Element,
   ignorieren aber rgba() — ohne solid color erscheint heller Text auf
   hellem Popup-Hintergrund (unlesbar). */
html[data-theme="dark"] .select select {
    background-color: var(--ios-surface-elevated);
}

html[data-theme="dark"] .select select option {
    background-color: var(--ios-surface-elevated);
    color: var(--bulma-text-strong);
}

/* ============================================================
   Tags — iOS getönte Varianten
   Gleiche Farbsystematik wie Buttons: soft bg + farbiger Text.
   is-dark bleibt opak (IDs, neutrale Labels).
   ============================================================ */
.tag.is-info {
    background-color: var(--ios-info-tint);
    color: var(--ios-info-text);
}

.tag.is-success {
    background-color: var(--ios-success-tint);
    color: var(--ios-success-text);
}

.tag.is-warning {
    background-color: var(--ios-warning-tint);
    color: var(--ios-warning-text);
}

.tag.is-danger {
    background-color: var(--ios-danger-tint);
    color: var(--ios-danger-text);
}

/* Bulma lässt die Schrift im Dark Mode hell und die Fläche hell (1,95:1) */
.tag.is-light {
    background-color: var(--ios-control-fill);
    color: var(--bulma-text-strong);
}

/* ============================================================
   Notifications — iOS getönte Varianten
   Tinted bg + farbiger Akzentstreifen links statt massiver Fill.
   ============================================================ */
.notification.is-info {
    background-color: var(--ios-info-tint);
    border-left: 3px solid var(--ios-info-line);
    color: var(--bulma-text);
}

.notification.is-success {
    background-color: var(--ios-success-tint);
    border-left: 3px solid var(--ios-success-line);
    color: var(--bulma-text);
}

.notification.is-warning {
    background-color: var(--ios-warning-tint);
    border-left: 3px solid var(--ios-warning-line);
    color: var(--bulma-text);
}

.notification.is-danger {
    background-color: var(--ios-danger-tint);
    border-left: 3px solid var(--ios-danger-line);
    color: var(--bulma-text);
}

/* ============================================================
   Message-Komponente — iOS getönter Banner
   Kein massiver farbiger Header-Block; stattdessen tinted bg
   über der gesamten Karte, farbiger Titeltext, Separator-Border.
   ============================================================ */
.message {
    border-radius: var(--bulma-radius-large);
    box-shadow: none;
}

.message-header {
    border-radius: var(--bulma-radius-large) var(--bulma-radius-large) 0 0;
    background-color: transparent;
    border-bottom: 1px solid var(--ios-separator);
    font-weight: 600;
}

.message-body {
    border-radius: 0 0 var(--bulma-radius-large) var(--bulma-radius-large);
    border-left: none;
    background-color: transparent;
}

.message.is-warning {
    background-color: var(--ios-warning-tint);
    border: 1px solid var(--ios-warning-border);
}

.message.is-warning .message-header {
    color: var(--ios-warning-text);
    border-bottom-color: var(--ios-warning-border);
}

.message.is-info {
    background-color: var(--ios-info-tint);
    border: 1px solid var(--ios-info-border);
}

.message.is-info .message-header {
    color: var(--ios-info-text);
    border-bottom-color: var(--ios-info-border);
}

.message.is-success {
    background-color: var(--ios-success-tint);
    border: 1px solid var(--ios-success-border);
}

.message.is-success .message-header {
    color: var(--ios-success-text);
    border-bottom-color: var(--ios-success-border);
}

.message.is-danger {
    background-color: var(--ios-danger-tint);
    border: 1px solid var(--ios-danger-border);
}

.message.is-danger .message-header {
    color: var(--ios-danger-text);
    border-bottom-color: var(--ios-danger-border);
}

/* ============================================================
   Buttons — iOS Design Language
   Hierarchie: Primär (.is-primary, gefüllt Blau) → Getönt (is-info/success/danger/warning) → Standard (Grau)
   ============================================================ */

/* Basis: iOS-Surface-Hintergrund, Separator-Border, kein Schatten,
   Opacity-Feedback auf :active (iOS-nativer Tap-Effekt) */
.button {
    border-radius: var(--bulma-radius);
    background-color: var(--ios-surface);
    border-color: var(--ios-separator);
    color: var(--bulma-text);
    box-shadow: none;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.button:hover,
.button.is-hovered {
    background-color: var(--ios-surface-elevated);
    border-color: var(--ios-separator);
    color: var(--bulma-text);
}

.button:focus,
.button:focus-visible {
    box-shadow: none;
}

.button:active {
    opacity: 0.72;
}

/* is-primary → iOS Blue gefüllt (explizite Hauptaktion) */
.button.is-primary,
.button.is-primary:hover,
.button.is-primary.is-hovered {
    background-color: var(--ios-accent-fill);
    border-color: transparent;
    color: var(--ios-on-accent);
}

.button.is-primary:hover,
.button.is-primary.is-hovered {
    filter: brightness(0.9);
}

/* is-info / is-link → iOS Blue getönt */
.button.is-info,
.button.is-link {
    background-color: var(--ios-info-tint);
    border-color: transparent;
    color: var(--ios-info-text);
}

.button.is-info:hover,
.button.is-info.is-hovered,
.button.is-link:hover,
.button.is-link.is-hovered {
    background-color: var(--ios-info-tint-hover);
    border-color: transparent;
    color: var(--ios-info-text);
}

/* is-success → iOS Grün getönt */
.button.is-success {
    background-color: var(--ios-success-tint);
    border-color: transparent;
    color: var(--ios-success-text);
}

.button.is-success:hover,
.button.is-success.is-hovered {
    background-color: var(--ios-success-tint-hover);
    border-color: transparent;
    color: var(--ios-success-text);
}

/* is-danger → iOS Rot getönt */
.button.is-danger {
    background-color: var(--ios-danger-tint);
    border-color: transparent;
    color: var(--ios-danger-text);
}

.button.is-danger:hover,
.button.is-danger.is-hovered {
    background-color: var(--ios-danger-tint-hover);
    border-color: transparent;
    color: var(--ios-danger-text);
}

/* is-warning → iOS Orange getönt */
.button.is-warning {
    background-color: var(--ios-warning-tint);
    border-color: transparent;
    color: var(--ios-warning-text);
}

.button.is-warning:hover,
.button.is-warning.is-hovered,
.button.is-warning:focus,
.button.is-warning.is-focused {
    background-color: var(--ios-warning-tint-hover);
    border-color: transparent;
    color: var(--ios-warning-text);
}

/* ============================================================
   Textfarben — Bulma nimmt hier die Füllfarben, die auf Weiß
   nur 2:1 bis 3:1 erreichen
   ============================================================ */
.has-text-grey,
.has-text-grey-light {
    color: var(--bulma-text-weak) !important;
}

.has-text-dark {
    color: var(--bulma-text-strong) !important;
}

.has-text-info {
    color: var(--ios-info-text) !important;
}

.has-text-success {
    color: var(--ios-success-text) !important;
}

.has-text-warning {
    color: var(--ios-warning-text) !important;
}

.has-text-danger {
    color: var(--ios-danger-text) !important;
}

/* Links im Fließtext sind nicht nur an der Farbe zu erkennen (WCAG 1.4.1) */
p a:not([class]),
.content a:not([class]),
.notification a:not([class]),
.message-body a:not([class]) {
    text-decoration: underline;
}

/* ============================================================
   Tooltip — ein Knopf mit data-tooltip und aria-label

   Ein Knopf, weil er per Tastatur und Fingertipp erreichbar ist.
   Links vom Knopf, weil die Zellen ganz rechts in der Tabelle stehen
   und .table-container sonst abschneidet. Der Rand überbrückt den
   Abstand, damit der Zeiger auf den Text wechseln kann (WCAG 1.4.13),
   Esc blendet ihn aus (functions.js).
   ============================================================ */
button[data-tooltip] {
    position: relative;
    padding: 0;
    border: none;
    background: none;
    color: var(--ios-accent-text);
    font: inherit;
    cursor: help;
    -webkit-tap-highlight-color: transparent;
}

button[data-tooltip]:is(:hover, :focus):not(.is-tooltip-hidden)::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    right: 100%;
    z-index: 30;
    transform: translateY(-50%);
    width: max-content;
    max-width: min(18rem, 70vw);
    padding: 0.375rem 0.625rem;
    border-right: 0.375rem solid transparent;
    border-radius: var(--bulma-radius-small);
    background-color: var(--ios-tooltip-background);
    background-clip: padding-box;
    color: var(--ios-tooltip-text);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
}

/* ============================================================
   Auge am Passwortfeld — ein Knopf, damit es per Tastatur erreichbar ist.
   Bulma nimmt Icons im Feld die Zeigerereignisse.
   ============================================================ */
.control.has-icons-right .icon.password-toggle {
    padding: 0;
    border: none;
    background: none;
    color: var(--bulma-text-weak);
    cursor: pointer;
    pointer-events: auto;
}

/* Edge zeigt sonst sein eigenes Auge daneben. Jedes Passwortfeld hat unseres (tests/test_passwords.py). */
input[type="password"]::-ms-reveal {
    display: none;
}

/* ============================================================
   Toast notifications — schweben über dem Inhalt, deshalb opak
   ============================================================ */
#toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    padding: 0.75rem 1.25rem;
    border-radius: var(--bulma-radius);
    font-size: 0.95rem;
    box-shadow: var(--ios-floating-shadow);
    opacity: 0;
    transform: translateY(12px);
    animation: toastIn 0.25s ease forwards, toastOut 0.3s ease 3s forwards;
    pointer-events: auto;
    max-width: 320px;
}

.toast.notification {
    background-color: var(--ios-surface-floating);
}

@keyframes toastIn {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
    to { opacity: 0; transform: translateY(12px); }
}

/* ============================================================
   Page fade-in
   ============================================================ */
.section {
    padding-top: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    animation: fadeIn 0.2s ease-in;
}

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

/* ============================================================
   Table loading overlay
   ============================================================ */
.table-loading {
    position: relative;
    min-height: 80px;
}

.table-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bulma-scheme-main);
    opacity: 0.6;
    border-radius: var(--bulma-radius);
    z-index: 1;
}

/* ============================================================
   Kopf der Seite: Titel, Zustand und Knöpfe stehen über der Karte
   auf der Fläche der Seite, in der Karte bleibt der Inhalt
   ============================================================ */
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
}

.page-title {
    color: var(--bulma-text-strong);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.page-subtitle {
    margin-top: 0.125rem;
    color: var(--bulma-text-weak);
    font-size: 0.875rem;
}

.page-actions {
    margin-left: auto;
}

.page-actions.buttons,
.page-actions.buttons .button {
    margin-bottom: 0;
}

/* ============================================================
   Zeilen der Verwaltung: ein Klick öffnet die Zeile. .row-link ist
   der echte Link für Tastatur, Screenreader und neue Tabs, die
   Zeile gibt ihren Klick an ihn weiter (functions.js)
   ============================================================ */
table:has(.row-link) {
    -webkit-tap-highlight-color: transparent;
}

.table tbody tr:has(.row-link) {
    cursor: pointer;
}

.table tbody tr:has(.row-link):hover {
    background-color: var(--ios-table-row-hover);
}

a.row-link {
    color: var(--ios-accent-text);
    font-weight: 600;
}

tr:hover > * > a.row-link {
    text-decoration: underline;
}

/* Langer Text in einer Tabelle: eine Zeile, der ganze Text steht im title und auf der Seite dahinter */
.cell-clip {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   Date grouped tags — monospace, das Wochenende hebt sich ab
   ============================================================ */
.tags.date-tags,
.tags.duty-swap {
    flex-wrap: nowrap;
    margin-bottom: 0;
}

.date-tags .tag,
.duty-swap .tag {
    margin-bottom: 0;
}

.date-tags .tag {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.75rem;
    letter-spacing: 0;
}

.date-tags .tag-weekday,
.date-tags .tag-date {
    background-color: var(--ios-control-fill);
    color: var(--bulma-text-strong);
}

.date-tags.is-weekend .tag-weekday,
.date-tags.is-weekend .tag-date {
    background-color: var(--ios-info-tint);
    color: var(--ios-info-text);
}

a.date-link {
    text-decoration: none;
    color: inherit;
}

a.date-link:hover .tag {
    opacity: 0.8;
}

/* ============================================================
   Dienstplan und Tagesplan (#66)
   ============================================================ */
.plan-status {
    font-weight: 700;
}

.plan-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.plan-controls > .buttons,
.plan-controls .buttons .button,
.plan-date .field {
    margin-bottom: 0;
}

/* Monat oder Tag und der Schalter für die Wache: auch am Handy eine Zeile */
.plan-date {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.plan-shortcuts {
    margin-left: auto;
}

/* Beide Abkürzungen ausgeblendet: kein leerer Platz in der Zeile */
.plan-shortcuts:not(:has(> :not(.is-hidden))) {
    display: none;
}

/* Kategorien der Dienstarten: Farbe und Icon, nie die Farbe allein (WCAG 1.4.1) */
.duty-tag {
    gap: 0.35em;
    font-weight: 600;
    white-space: nowrap;
}

.duty-tag i {
    font-size: 0.85em;
}

.tag.is-category-vehicle {
    background-color: var(--ios-success-tint);
    color: var(--ios-success-text);
}

.tag.is-category-on_call {
    background-color: var(--ios-warning-tint);
    color: var(--ios-warning-text);
}

.tag.is-category-day_off {
    background-color: var(--ios-info-tint);
    color: var(--ios-info-text);
}

.tag.is-category-absence {
    background-color: var(--ios-indigo-tint);
    color: var(--ios-indigo-text);
}

.tag.is-category-training {
    background-color: var(--ios-purple-tint);
    color: var(--ios-purple-text);
}

.tag.is-category-office {
    background-color: var(--ios-teal-tint);
    color: var(--ios-teal-text);
}

.tag.is-category-other {
    background-color: var(--ios-control-fill);
    color: var(--bulma-text-strong);
}

/* Der eigene Dienst lässt sich tauschen: ein Rand wie an einem Knopf, auch ohne Hover zu erkennen */
button.tag.is-editable {
    border: 1px solid currentColor;
    cursor: pointer;
}

button.tag.is-delete {
    flex: none;
    border: none;
    color: var(--bulma-text-strong);
    cursor: pointer;
}

.input.duty-input {
    width: 6rem;
    /* Unter 16 px vergrößert iOS die Seite beim Tippen */
    font-size: 1rem;
}

/* Tabellen bleiben sonst einzeilig. Hier brechen lange Namen und die Zeiten einer Kombination um,
   statt die Spalten rechts aus der Tabelle zu schieben */
.duty-table {
    white-space: normal;
}

.duty-table .duty-names {
    overflow-wrap: anywhere;
}

.duty-table .duty-times {
    min-width: 7.5rem;
}

.duty-table .duty-date,
.duty-table .duty-code {
    width: 1%;
    white-space: nowrap;
    font-weight: inherit;
}

.duty-table tr.is-today {
    background-color: var(--ios-info-tint);
}

.duty-table .duty-none {
    color: var(--bulma-text-weak);
    text-align: center;
}

.time-range {
    white-space: nowrap;
}

.duty-table .duty-station {
    white-space: nowrap;
}

.duty-table.hide-stations .duty-station {
    display: none;
}

/* Lange Besatzungen in Spalten, am Handy immer zwei */
.crew-names {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    column-gap: 1rem;
}

/* Sonst gibt die Tabelle je nach Inhalt der Zeilen mal Platz für zwei Spalten, mal für eine */
@media screen and (min-width: 1216px) {
    .crew-names {
        min-width: 22rem;
    }
}

.crew-group + .crew-group {
    margin-top: 0.5rem;
}

.crew-label {
    color: var(--bulma-text-weak);
    font-size: 0.75rem;
    font-weight: 600;
}

.crew-block + .crew-block {
    margin-top: 0.75rem;
    padding-top: 0.625rem;
    border-top: 1px dashed var(--ios-separator);
}

.crew-block-title {
    margin-bottom: 0.125rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.crew-block .crew-label {
    margin-top: 0.375rem;
}

@media screen and (max-width: 1023px) {
    .duty-table td,
    .duty-table th {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .crew-names {
        grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    }
}

.plan-details > summary {
    cursor: pointer;
    font-weight: 600;
}

.plan-details .table {
    white-space: normal;
}

/* Zwei Spalten mit Karten, gleich hoch: die letzte Karte nimmt den Rest */
.plan-export > .column,
.account-column {
    display: flex;
    flex-direction: column;
}

.plan-export .box-list,
.account-column > .box:last-child {
    flex-grow: 1;
}

/* Erklärungen auf der Seite: nummerierte Schritte und Hinweise mit Icon */
.plan-help {
    margin-top: 1rem;
}

.help-steps {
    counter-reset: help-step;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.help-steps > li {
    counter-increment: help-step;
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: start;
    gap: 0.25rem 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--bulma-radius);
    background-color: var(--ios-surface-elevated);
}

.help-steps > li::before {
    content: counter(help-step);
    grid-row: span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--ios-accent-fill);
    color: var(--ios-on-accent);
    font-weight: 700;
}

.help-steps > li > span {
    grid-column: 2;
    color: var(--bulma-text-weak);
    font-size: 0.875rem;
    line-height: 1.45;
}

.help-notes {
    margin-bottom: 1.5rem;
}

.help-notes > li {
    display: flex;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.help-notes .icon,
.box-list-row.is-info-row > .icon {
    flex-shrink: 0;
    color: var(--ios-accent-text);
}

.help-caption {
    margin-bottom: 0.75rem;
    color: var(--bulma-text-weak);
    font-size: 0.875rem;
}

/* Ein langer Text auf einem breiten Knopf bricht um, statt auf dem Handy herauszulaufen */
.button.is-fullwidth {
    height: auto;
    white-space: normal;
}

/* Ein Sprung zu einem Abschnitt endet nicht unter der festen Navigation */
html {
    scroll-padding-top: calc(var(--bulma-navbar-height) + 1rem);
}

/* Konto: die Abteilungen */
.account-department {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--ios-separator);
}

.account-department:first-child {
    padding-top: 0;
    border-top: none;
}

.account-department:last-child {
    padding-bottom: 0;
}

.account-department-text {
    flex: 1 1 14rem;
    min-width: 0;
}

.account-department-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.account-department-name .tag {
    font-weight: normal;
}

.account-department-detail {
    color: var(--bulma-text-weak);
    font-size: 0.875rem;
}

.account-department-state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================================
   iOS Settings list-box
   ============================================================ */
.box.box-list {
    padding: 0;
    overflow: hidden;
}

.box-list-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ios-separator);
}

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

.box-list-row.is-info-row {
    align-items: flex-start;
    color: var(--bulma-text-weak);
    font-size: 0.875rem;
    line-height: 1.45;
}

/* Überschrift einer Karte, darüber auf der Fläche der Seite */
.section-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bulma-text-weak);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 0.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0.375rem;
}

.section-label:first-child,
.page-head + .section-label,
.account-column > .section-label {
    margin-top: 0;
}

.box-list-footer {
    font-size: 0.75rem;
    color: var(--bulma-text-weak);
    padding: 0.375rem 0.25rem 0;
}

/* ============================================================
   Spacing overrides — einheitlicher 1rem-Rhythmus
   ============================================================ */
.mb-5 {
    margin-bottom: 1rem !important;
}

/* ============================================================
   Misc
   ============================================================ */
.title {
    --bulma-title-weight: var(--bulma-weight-bold);
}

/* Typografie — kompaktere Größenstaffelung.
   Bulma setzt font-size als Literalwert (nicht per Variable),
   daher direkter Override nötig.
   Bulma-Standard: 3 / 2.5 / 2 / 1.5 / 1.25 / 1rem
   Neue Skala:     2 / 1.75 / 1.5 / 1.25 / 1.0625 / 1rem */
.title.is-1 { font-size: 2.0rem; }
.title.is-2 { font-size: 1.75rem; }
.title.is-3 { font-size: 1.5rem; }
.title.is-4 { font-size: 1.25rem; }
.title.is-5 { font-size: 1.0625rem; }
.title.is-6 { font-size: 1.0rem; }

/* hr — iOS-Separator: haarfein, opaqueSeparator-Farbe */
hr {
    height: 1px;
    background-color: var(--ios-separator);
    border: none;
    margin: 1.25rem 0;
}

.footer {
    background-color: var(--bulma-scheme-main);
    padding: 3rem 1.5rem;
}

/* ============================================================
   Navbar Action Buttons — kompakte iOS-Pill-Buttons
   Primär (.is-filled): iOS-Blau gefüllt
   Ghost (Standard):    transparent, Blau-Text, subtiler Hover
   ============================================================ */
.navbar-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.75rem;
    height: 1.75rem;
    border: none;
    border-radius: var(--bulma-radius);
    background-color: transparent;
    color: var(--ios-accent-text);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.navbar-action-btn:hover {
    background-color: var(--ios-info-tint);
    color: var(--ios-accent-text);
}

/* Abmelden ist ein POST-Formular, das wie die Links daneben im Flex-Layout stehen soll */
.navbar-action-form {
    display: contents;
}

.navbar-action-btn.is-filled,
.navbar-action-btn.is-filled:hover {
    background-color: var(--ios-accent-fill);
    color: var(--ios-on-accent);
}

.navbar-action-btn.is-filled:hover {
    filter: brightness(0.9);
}

/* ============================================================
   Theme Picker — iOS Segmented Control (Navbar)
   ============================================================ */
.theme-picker {
    display: flex;
    align-items: center;
    background-color: var(--ios-control-fill);
    border-radius: var(--bulma-radius);
    padding: 2px;
}

.theme-picker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 1.75rem;
    border: none;
    background: transparent;
    border-radius: calc(var(--bulma-radius) - 2px);
    color: var(--bulma-text);
    cursor: pointer;
    font-size: 0.8rem;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.theme-picker-btn.is-active {
    background-color: var(--ios-segment-active);
    box-shadow: var(--ios-segment-shadow);
    color: var(--bulma-text-strong);
}

/* ============================================================
   Weniger Bewegung: keine Übergänge und dekorativen Animationen.
   Der Toast braucht seinen Endzustand, er startet unsichtbar. JS
   entfernt ihn weiter nach 3,5 s. Lade-Kreisel bleiben, sie zeigen
   an, dass etwas passiert.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .section {
        animation: none;
    }

    .toast {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   Handy (≤768px): Dienst- und Tagesplan als Karten statt als Tabelle.
   Datum, Dienst und Zeiten in einer Zeile, darunter nur, was es gibt.
   ============================================================ */
@media screen and (max-width: 768px) {
    .plan-controls > * {
        width: 100%;
    }

    .plan-worker select {
        width: 100%;
    }

    .plan-date .field {
        flex: 1;
        min-width: 0;
    }

    /* Am Handy nur das Auge, Name und Zustand liest ein Screenreader aus den Attributen */
    .plan-stations-label {
        display: none;
    }

    /* Bulma lässt neben dem Icon Platz für den Text, der hier fehlt */
    .button.plan-stations .icon:first-child:not(:last-child) {
        margin-inline: 0;
    }

    .plan-shortcuts .button {
        flex: 1;
    }

    /* Nichts zu scrollen, und der Tooltip der letzten Karte darf über den Rand hinaus */
    .table-container:has(> .duty-table) {
        overflow: visible;
    }

    .duty-table thead {
        display: none;
    }

    .duty-table,
    .duty-table tbody {
        display: block;
    }

    .duty-table tr {
        display: grid;
        grid-template-columns: auto auto 1fr;
        align-items: center;
        gap: 0.375rem 0.625rem;
        padding: 0.75rem 0.5rem;
        border-bottom: 1px solid var(--ios-separator);
    }

    .duty-table tbody tr:last-child {
        border-bottom: none;
    }

    .duty-table td,
    .duty-table th,
    .duty-table td:first-child,
    .duty-table th:first-child,
    .duty-table td:last-child,
    .duty-table th:last-child {
        display: block;
        width: auto;
        padding: 0;
        border: none;
    }

    .duty-table td:empty {
        display: none;
    }

    .duty-table .duty-date,
    .duty-table .duty-code {
        width: auto;
    }

    .crew-names {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0.75rem;
        font-size: 0.9375rem;
    }

    .duty-table .duty-station {
        white-space: normal;
    }

    .duty-table .duty-times {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        min-width: 0;
        text-align: right;
    }

    .duty-table .duty-names,
    .duty-table .duty-station,
    .duty-table .duty-none {
        grid-column: 1 / -1;
    }

    .duty-table td[data-label] {
        position: relative;
        padding-left: 6rem;
    }

    .duty-table td[data-label]::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        color: var(--bulma-text-weak);
        font-size: 0.875rem;
    }

    /* Spalten brauchen die ganze Breite, die Beschriftung steht dann darüber */
    .duty-table td[data-label]:has(.crew-names) {
        padding-left: 0;
    }

    .duty-table td[data-label]:has(.crew-names)::before {
        display: block;
        position: static;
    }

    /* Links neben dem Knopf wäre kein Platz: der Tooltip liegt unter der Zeile, so breit wie sie */
    .duty-table .duty-station button[data-tooltip] {
        position: static;
    }

    .duty-table .duty-station button[data-tooltip]:is(:hover, :focus):not(.is-tooltip-hidden)::after {
        top: 100%;
        right: 0;
        left: 0;
        width: auto;
        max-width: none;
        transform: none;
        border-right: none;
    }

    .section {
        padding: 1rem 0.75rem;
    }

    .box {
        padding: 1rem;
    }
}

/* ============================================================
   Mobile (≤1024px) — immer ZULETZT, überschreibt alles oben
   ============================================================ */
@media only screen and (max-width: 1024px) {
    .section {
        padding: 1.5rem 1rem;
    }

    /* box-mobile: einzelne abgerundete Kachel innerhalb des flachen Bereichs */
    .box-mobile {
        padding: 1rem;
        border-radius: var(--bulma-radius);
        box-shadow: none;
        background-color: var(--ios-surface);
    }

    .footer {
        box-shadow: 0 -0.125em 0 0 var(--bulma-background);
    }
}