/* Gleiche Farbpalette wie die WPF-App (Resources/Styles.xaml), damit beide
   Oberflächen der Flugverwaltung als EIN System erkennbar bleiben. */
:root {
    --navy-dark: #0B2540;
    --navy: #123B63;
    --gold: #F5A623;
    --green: #2FAE7A;
    --rot: #BC2D2D;
    --rot-dunkel: #A02525;
    --bg: #F8FAFB;
    --card: #FFFFFF;
    --card-border: #D7E0E8;
    --text: #123B63;
    --muted: #8496A6;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
}

header.kopfleiste {
    background: var(--navy-dark);
    color: #fff;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header.kopfleiste .trennstreifen {
    height: 3px;
    background: var(--gold);
}

/* Vereinslogo + Name (Nutzer-Wunsch 07.09.2026, offizielles Logo) - das
   Flugzeug-Symbol ist ein aus dem gelieferten Logo freigestelltes, auf
   Weiß eingefärbtes PNG (Original hat einen eigenen, leicht anderen
   Blauton als --navy-dark und würde als Rechteck störend abstechen).
   flex-wrap, damit auf sehr schmalen Bildschirmen der Vereinsname nötigenfalls
   umbricht statt den Rand zu sprengen. */
header.kopfleiste .marke {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

header.kopfleiste .marke-logo {
    height: 30px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    header.kopfleiste {
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    header.kopfleiste .marke-logo {
        height: 24px;
    }

    header.kopfleiste strong {
        font-size: 14px;
    }
}

main {
    max-width: 720px;
    margin: 40px auto;
    padding: 0 20px;
}

.karte {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 24px;
}

h1 {
    font-size: 22px;
    margin: 0 0 16px;
}

h2 {
    font-size: 16px;
    margin: 0 0 12px;
    color: var(--navy);
}

label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin: 12px 0 4px;
}

/* ================================================================ */
/* Vereinheitlichungs-Anfrage (07.09.2026): einheitliche, abgerundete */
/* Optik für ALLE Formularelemente auf jeder Seite, statt wie vorher  */
/* pro Seite eigener (und leicht abweichender) Kopien - admin.html    */
/* hatte z. B. einen 6px-Radius, hier jetzt wie in der WPF-App        */
/* (Resources/Styles.xaml: RoundedTextBoxStyle/RoundedComboBoxStyle)  */
/* einheitlich 10px. select/input[type=date]/input[type=time] hatten  */
/* auf mehreren Seiten (reservierungen.html, fluglog.html) bisher gar */
/* keinen eigenen Stil und liefen im nackten Browser-Aussehen.        */
/* ================================================================ */

input[type="text"],
input[type="password"],
input[type="date"],
input[type="time"],
select {
    width: 100%;
    font-size: 15px;
    padding: 10px 12px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card);
    color: var(--text);
    font-family: inherit;
}

/* Zahlenfelder bewusst OHNE erzwungene volle Breite (meist kurze
   Beträge/Preise) - für eine schmale Variante siehe .schmal. */
input[type="number"] {
    font-size: 15px;
    padding: 10px 12px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card);
    color: var(--text);
    font-family: inherit;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
select:focus {
    outline: none;
    border-color: var(--navy);
    border-width: 1.5px;
}

input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--navy);
    cursor: pointer;
}

.schmal {
    width: 90px;
}

/* Buttons - Grundstil (rund, wie die RoundedTouchButtonStyle-Buttons der
   WPF-App), darauf aufbauend vier Bedeutungs-Varianten, die den dortigen
   Farbrollen entsprechen: primaer = Navy (Standardaktion), akzent = Gold
   (die eine hervorgehobene Aktion einer Karte/eines Formulars), klein =
   Grau (neutrale/sekundäre Aktion), gefahr = Rot (zerstörerische Aktion,
   z. B. Grounden/Stornieren). Vorher hatte jede Seite eigene, leicht
   abweichende Klassennamen und Radien dafür (.klein-button/.primaer-klein
   in admin.html, .grounden-button/.aufheben-button in
   reservierungen.html). Als reine Klassen (nicht auf "button" beschränkt)
   definiert, damit z. B. der CSV-Export-Link (ein <a>, kein <button>)
   dieselbe Optik bekommt. */
button,
.primaer,
.akzent,
.klein,
.gefahr {
    font-family: inherit;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 18px;
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

/* Kleiner Standard-Abstand nach oben (die meisten Vorkommen stehen als
   letztes Element unter gestapelten Formularfeldern). .gefahr bekommt
   bewusst KEINEN, da es als einziges der vier auch in einer Flex-Zeile
   neben einem Eingabefeld verwendet wird (reservierungen.html,
   .grounding-form) und dort vertikal auf gleicher Höhe bleiben soll. */
.primaer,
.akzent,
.klein {
    margin-top: 10px;
}

.primaer {
    background: var(--navy);
    color: #fff;
}

.primaer:hover {
    background: var(--navy-dark);
}

.akzent {
    background: var(--gold);
    color: var(--navy-dark);
}

.akzent:hover {
    filter: brightness(0.95);
}

.klein {
    background: var(--card-border);
    color: var(--text);
    padding: 7px 14px;
    font-size: 13px;
}

.klein:hover {
    background: #C7D3DD;
}

.gefahr {
    background: var(--rot);
    color: #fff;
    padding: 7px 14px;
    font-size: 13px;
}

.gefahr:hover {
    background: var(--rot-dunkel);
}

/* Auswahl-Buttons (genau ein Element aus mehreren wählen, z. B. das
   Flugzeug bei "Neue Reservierung") - Nutzer-Wunsch 07.09.2026, Web-
   Entsprechung des ToggleButtonStyler in der WPF-App: unausgewählt =
   weiß mit Rahmen, ausgewählt = Navy gefüllt (gleiche Farbrolle wie dort
   ColorNavyBrush/ColorNavyDarkBrush). */
.auswahl-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.auswahl-button {
    background: #fff;
    color: var(--text);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.auswahl-button:hover {
    border-color: var(--navy);
}

.auswahl-button.ausgewaehlt {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy-dark);
}

/* Volle Breite - bisher das einzige Verhalten von .primaer, jetzt ein
   eigenes Zusatzmerkmal (nicht jeder primäre Button soll die volle
   Zeilenbreite einnehmen, z. B. in der Admin-Konsole/Reservierung).
   Weiterhin Standard auf der Anmeldeseite. */
.volle-breite {
    width: 100%;
    margin-top: 18px;
    padding: 14px;
    font-size: 16px;
}

.fehler {
    color: var(--rot);
    font-size: 14px;
    margin-top: 10px;
}

.rolle-badge {
    display: inline-block;
    background: var(--gold);
    color: var(--navy-dark);
    border-radius: 12px;
    padding: 3px 12px;
    font-size: 13px;
    font-weight: 600;
}

/* Nutzer-Wunsch 07.09.2026: "Admin-Konsole"-Link direkt neben dem
   "Admin"-Rollen-Badge, exakt in dessen Größe (gleiche Maße wie
   .rolle-badge), aber in der bisherigen hellblauen Farbe (wie .klein). */
.badge-button {
    display: inline-block;
    background: var(--card-border);
    color: var(--text);
    border-radius: 12px;
    padding: 3px 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.badge-button:hover {
    background: #C7D3DD;
}

/* Nutzer-Wunsch 07.09.2026: "Abmelden" und "← Übersicht" sind jetzt
   kleine Buttons (.klein, wie überall sonst in der App) statt reiner
   Textlinks. margin-top:0, weil .klein sonst in seiner Zeile (Kopfleiste
   bzw. Unternav) unnötig nach unten rutschen würde. */
header.kopfleiste .klein,
nav.unternav .klein {
    margin-top: 0;
}

/* Tabellen - vorher auf admin.html/fluglog.html einzeln kopiert, mit
   leicht abweichenden Werten (Innenabstand, letter-spacing). */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: 12px;
}

th, td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--card-border);
}

th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

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

/* ================================================================ */
/* Responsive-Anfrage (07.09.2026): auf schmalen Bildschirmen (iPhone/  */
/* iPad) darf nichts abgeschnitten werden. Tabellen sind das größte     */
/* Risiko dafür (viele Spalten, z. B. der Flugverlauf oder die Piloten- */
/* Fristen) - .tabelle-wrap macht sie horizontal scrollbar statt sie    */
/* über den Bildschirmrand hinauslaufen zu lassen.                      */
/* ================================================================ */
.tabelle-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Nutzer-Wunsch 08.09.2026 (Screenshot: die 4 Lizenzfristen-Felder der
   Piloten-Tabelle wirken auf dem Handy zu eng/gedrängt): unter 900px
   Breite (deckt Handy UND iPad-Hochformat ab) wird die Tabelle in
   gestapelte Karten umgewandelt statt horizontal scrollbar zu bleiben -
   jede Pilotenzeile wird zur eigenen Karte, jede Zelle bekommt per
   data-label (siehe admin.html) ihre Beschriftung als eigene Zeile
   statt einer engen Tabellenspalte, die Datumsfelder bekommen dadurch
   wieder ihre volle, gut bedienbare Breite. Ab 900px (Desktop/größere
   iPads quer) bleibt es die normale, kompakte Tabelle - reines CSS,
   kein zweiter Render-Pfad in admin.html nötig. */
@media (max-width: 900px) {
    .piloten-tabelle-responsiv table,
    .piloten-tabelle-responsiv thead,
    .piloten-tabelle-responsiv tbody,
    .piloten-tabelle-responsiv tr,
    .piloten-tabelle-responsiv td {
        display: block;
        width: 100%;
    }

    .piloten-tabelle-responsiv thead {
        display: none;
    }

    .piloten-tabelle-responsiv tbody tr {
        border: 1px solid var(--card-border);
        border-radius: 10px;
        padding: 12px 14px;
        margin-bottom: 12px;
    }

    .piloten-tabelle-responsiv td {
        border-bottom: none;
        padding: 6px 0;
    }

    /* Name + Aktiv-Kästchen bleiben oben in der Karte nebeneinander,
       statt wie die Fristen-Felder jeweils eine eigene Zeile zu
       bekommen - liest sich wie eine kurze Kopfzeile der Karte. */
    .piloten-tabelle-responsiv td[data-label="Name"] {
        display: inline-block;
        width: auto;
        font-weight: 600;
        padding-bottom: 0;
    }

    .piloten-tabelle-responsiv td[data-label="Aktiv"] {
        display: inline-block;
        width: auto;
        float: right;
        padding-bottom: 0;
    }

    .piloten-tabelle-responsiv td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--muted);
        margin-bottom: 4px;
    }

    .piloten-tabelle-responsiv td[data-label="Name"]::before,
    .piloten-tabelle-responsiv td[data-label="Aktiv"]::before {
        content: none;
    }

    .piloten-tabelle-responsiv tbody tr::after {
        content: "";
        display: block;
        clear: both;
    }

    .piloten-tabelle-responsiv td:last-child {
        clear: both;
        padding-top: 10px;
    }
}

/* Nutzer-Wunsch 07.09.2026: für Tabellen, die extra kompakt bleiben
   sollen, damit auf einem schmalen Bildschirm möglichst gar nicht erst
   horizontal gescrollt werden muss (z. B. Mitglieder-Übersicht in der
   Admin-Konsole). */
.kompakte-tabelle th,
.kompakte-tabelle td {
    padding: 6px 6px;
    font-size: 13px;
}

.kompakte-tabelle select {
    padding: 6px 8px;
    font-size: 13px;
}

/* Lange Listen (z. B. Guthaben-/Flugverlauf) nicht mehr unbegrenzt
   wachsen lassen, sondern ab mehr Zeilen als die Grenze in fester Höhe
   scrollbar (horizontal UND vertikal, siehe overflow:auto) - gleiches
   Prinzip wie die Flughistorie in PilotManagementWindow (WPF-App). Rein
   über max-height gelöst: bei weniger Zeilen als die Grenze bleibt der
   Bereich in seiner natürlichen (kleineren) Höhe ohne Scrollbalken. */
.scroll-ab-5, .scroll-ab-10 {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.scroll-ab-5 { max-height: 215px; }
.scroll-ab-10 { max-height: 400px; }

.scroll-ab-5 table, .scroll-ab-10 table {
    margin-top: 0;
}

.scroll-ab-5 thead th, .scroll-ab-10 thead th {
    position: sticky;
    top: 0;
    background: var(--card);
}

/* Aufklappbarer Bereich (<details>/<summary>), z. B. "+ Neues Konto
   anlegen" in der Admin-Konsole - abgerundete Karten-Optik mit drehendem
   Pfeil, angeglichen an den neuen RoundedExpanderStyle der WPF-App
   (Resources/Styles.xaml). Vorher nur schlichter Text ohne Rahmen. */
details {
    margin-top: 16px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 0 16px;
    background: var(--card);
}

details[open] {
    padding-bottom: 16px;
}

summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--navy);
    padding: 12px 0;
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

summary::after {
    content: "▾";
    float: right;
    color: var(--muted);
    transition: transform 0.15s ease;
}

details[open] summary::after {
    transform: rotate(180deg);
}

.hinweis {
    color: var(--muted);
    font-size: 13px;
    margin-top: 10px;
}