:root {
    color-scheme: light;
    --color-bg: #F7F8F6;
    --color-navy: #1B2A38;
    --color-steel: #4C6B82;
    --color-in-hangar: #FFFFFF;
    --color-requested: #4C6B82;
    --color-confirmed: #E8A33D;
    --color-outside: #3B8F5C;
    --color-text: #1B2A38;
    --color-border: #C9CDD2;
    --font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    /* Flächen und Texte, die im dunklen Design wechseln */
    --color-surface: #FFFFFF;
    --color-header: #EEF2F5;
    --color-subheader: #F3F6F8;
    --color-heading: #1B2A38;
    --color-muted: #4C6B82;
    --color-in-hangar-text: #1B2A38;
    --color-gone: #CFE6F5;
    --color-badge: rgba(0, 0, 0, 0.08);
    --color-error: #B3261E;
    --shadow: rgba(27, 42, 56, 0.06);
}

/* Dunkles Design: automatisch nach Systemeinstellung (z.B. abends am
   Tablet/PC) oder fest über den Schalter oben rechts (data-theme) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --color-bg: #0F1720;
        --color-text: #E6EDF3;
        --color-border: #33424F;
        --color-in-hangar: #1F2B36;
        --color-surface: #18232D;
        --color-header: #22303D;
        --color-subheader: #1E2B37;
        --color-heading: #E6EDF3;
        --color-muted: #9DB3C6;
        --color-in-hangar-text: #E6EDF3;
        --color-gone: #1E3A52;
        --color-badge: rgba(255, 255, 255, 0.12);
        --color-error: #F2B8B5;
        --shadow: rgba(0, 0, 0, 0.4);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #0F1720;
    --color-text: #E6EDF3;
    --color-border: #33424F;
    --color-in-hangar: #1F2B36;
    --color-surface: #18232D;
    --color-header: #22303D;
    --color-subheader: #1E2B37;
    --color-heading: #E6EDF3;
    --color-muted: #9DB3C6;
    --color-in-hangar-text: #E6EDF3;
    --color-gone: #1E3A52;
    --color-badge: rgba(255, 255, 255, 0.12);
    --color-error: #F2B8B5;
    --shadow: rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }

/* Knöpfe und Eingabefelder übernehmen sonst nicht die Seitenschrift */
button, input, select, textarea { font: inherit; }

body {
    margin: 0;
    font-family: var(--font-family);
    background: var(--color-bg);
    color: var(--color-text);
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-navy);
    color: white;
    padding: 0.75rem 1.5rem;
}

.topbar-title {
    font-weight: 600;
    font-size: 1.1rem;
}

.topbar-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
}

.topbar-nav a {
    color: white;
    text-decoration: underline;
}

main {
    padding: 1.5rem;
    max-width: 1920px;
    margin: 0 auto;
}

.page-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.hint {
    color: var(--color-muted);
    margin-top: 0;
    margin-bottom: 1.5rem;
    max-width: 70ch;
}

/* Positions-Grid */
.position-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
}

.position-column {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 1px 3px var(--shadow);
    padding: 0.6rem;
    /* Schmal genug, dass alle Hallen auf einem Bildschirm mit voller
       HD-Breite nebeneinander passen (wie im Altsystem) */
    min-width: 150px;
    flex: 1 1 150px;
}

/* Hallenname: farbig hinterlegter Kopf über die volle Spaltenbreite */
.position-column h2 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: -0.6rem -0.6rem 0.6rem;
    padding: 0.5rem 0.6rem;
    background: var(--color-header);
    border-bottom: 2px solid var(--color-steel);
    border-radius: 8px 8px 0 0;
}

.column-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-muted);
    background: var(--color-surface);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
}

/* Teil einer Halle (z.B. "VI links"): eigene kleine Überschrift mit Balken */
.sub-heading {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0.8rem 0 0.4rem 0;
    padding: 0.2rem 0.5rem;
    background: var(--color-subheader);
    border-left: 3px solid var(--color-steel);
    border-radius: 0 3px 3px 0;
}

.sub-heading:first-of-type {
    margin-top: 0;
}

.aircraft-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.aircraft-card { margin: 0; }

.aircraft-btn {
    width: 100%;
    text-align: left;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
    font-size: 1rem;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.05s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

button.aircraft-btn:not(:disabled):hover { box-shadow: 0 2px 6px rgba(27, 42, 56, 0.2); }
button.aircraft-btn:not(:disabled):active { transform: scale(0.98); }
.aircraft-btn:focus-visible { outline: 3px solid var(--color-steel); outline-offset: 2px; }

.aircraft-btn:disabled {
    cursor: default;
    opacity: 0.7;
}

.kennung {
    font-weight: 600;
    font-size: 1.05rem;
}

.badge {
    font-size: 0.75rem;
    background: var(--color-badge);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
}

.status-in_hangar .aircraft-btn { background: var(--color-in-hangar); color: var(--color-in-hangar-text); }
/* "weg bis": Flugzeug ist nicht da - hellblau wie im Altsystem und nicht
   anklickbar, bis das Datum entfernt wird (unabhängig vom Status) */
.aircraft-card.is-gone .aircraft-btn,
.aircraft-card.is-gone .aircraft-btn:disabled {
    background: var(--color-gone);
    color: var(--color-in-hangar-text);
    opacity: 1;
    cursor: not-allowed;
}
.aircraft-card.is-gone .badge { background: var(--color-badge); }
.status-requested .aircraft-btn { background: var(--color-requested); color: white; }
.status-confirmed .aircraft-btn { background: var(--color-confirmed); color: var(--color-navy); }
.status-outside .aircraft-btn { background: var(--color-outside); color: white; }
.status-requested .badge, .status-outside .badge { background: rgba(255,255,255,0.25); }
.status-confirmed .badge { background: rgba(0,0,0,0.12); }

/* Login */
.login-wrap {
    display: flex;
    justify-content: center;
    padding-top: 3rem;
}

.login-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 2rem;
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.login-box h1 {
    font-size: 1.2rem;
    margin: 0 0 0.5rem 0;
}

.login-box label {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.login-box input {
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 1rem;
}

.login-box button {
    margin-top: 1rem;
    padding: 0.6rem;
    background: var(--color-navy);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
}

.error {
    color: var(--color-error);
    font-size: 0.9rem;
}

/* Öffentlicher Piloten-Monitor */
.monitor-header {
    text-align: center;
    padding: 1.5rem 1rem 0.5rem;
}

.monitor-header h1 {
    font-size: 2rem;
    margin: 0;
}

.monitor-grid {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.monitor-card {
    background: var(--color-outside);
    color: white;
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
}

.monitor-empty {
    text-align: center;
    color: var(--color-muted);
    font-size: 1.3rem;
    padding: 3rem 1rem;
}

/* Admin */
.admin-links { margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.admin-section { margin-bottom: 2rem; }
.admin-table { border-collapse: collapse; width: 100%; margin-bottom: 0.75rem; background: var(--color-surface); }
.admin-table th, .admin-table td { border: 1px solid var(--color-border); padding: 0.4rem 0.6rem; text-align: left; font-size: 0.9rem; }
.inline-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.inline-form input, .inline-form select { padding: 0.4rem; border: 1px solid var(--color-border); border-radius: 4px; }
.btn-small { padding: 0.25rem 0.5rem; font-size: 0.8rem; border: none; border-radius: 3px; cursor: pointer; }
.btn-danger { background: #B3261E; color: white; }

/* Suchbare Flugzeug-Combobox (SOF und „weg bis“) */
.combobox { position: relative; width: 220px; }

.combobox-control {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
}

.combobox.invalid .combobox-control { border-color: #B3261E; }

.combobox-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    height: 2.1rem;
    background: none;
    border: none;
    border-right: 1px solid var(--color-border);
    color: var(--color-muted);
    cursor: pointer;
}

.combobox-input {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.5rem;
    border: none;
    border-radius: 0 4px 4px 0;
    font-size: 1rem;
    background: transparent;
}

.combobox-input:focus { outline: none; }
.combobox.open .combobox-control { border-color: var(--color-muted); }

.combobox-options {
    position: absolute;
    z-index: 10;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
}

.combobox-option {
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-size: 0.95rem;
}

.combobox-option:hover, .combobox-option.active { background: var(--color-bg); }

.combobox-empty {
    padding: 0.4rem 0.6rem;
    color: var(--color-muted);
    font-size: 0.9rem;
}

/* THD: Ton eingeschaltet, aber vom Browser noch nicht freigegeben */
.sound-blocked { background: var(--color-confirmed); color: var(--color-navy); }

/* Name oben rechts = Link zu "Passwort ändern" - bewusst unauffällig */
.topbar-nav a.topbar-user { text-decoration: none; }
.topbar-nav a.topbar-user:hover { text-decoration: underline; }

/* Breite Tabellen (Admin) auf dem Handy seitlich scrollbar statt die Seite zu sprengen */
.table-scroll { overflow-x: auto; }
.success { color: var(--color-outside); font-size: 0.9rem; }

/* Pilot: reine Anzeige, Karten ohne Klick */
.aircraft-card.readonly .aircraft-btn { cursor: default; }

/* Hinweis bei Serverausfall (live.js) */
.connection-banner {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #B3261E;
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.4;
    padding: 1.1rem 1.5rem;
    text-align: center;
    border-bottom: 4px solid #7A1A14;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Legende über dem Hallenplan */
.legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.1rem;
    margin: -0.75rem 0 1.25rem;
    font-size: 0.85rem;
    color: var(--color-muted);
}
.legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.legend-swatch {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 3px;
    border: 1px solid var(--color-border);
}
.legend-swatch.in_hangar { background: var(--color-in-hangar); }
.legend-swatch.requested { background: var(--color-requested); }
.legend-swatch.confirmed { background: var(--color-confirmed); }
.legend-swatch.outside { background: var(--color-outside); }
.legend .badge { color: var(--color-heading); }

/* Handy: weniger Rand, damit zwei Hallen nebeneinander Platz haben */
@media (max-width: 600px) {
    .topbar { padding: 0.6rem 1rem; }
    main { padding: 1rem; }
}

.legend-swatch.gone { background: var(--color-gone); }

/* "Sonstige Positionen" (GPU, Starthilfe, Tankstellen ...): Dienste, keine
   Flugzeuge - kleinere Kacheln mit gestricheltem Rahmen */
.aircraft-card.service .aircraft-btn {
    padding: 0.3rem 0.55rem;
    border-style: dashed;
}
.aircraft-card.service .kennung { font-size: 0.85rem; }
.aircraft-card.service.status-in_hangar .aircraft-btn { background: transparent; }
.aircraft-list.services { gap: 0.3rem; }

/* Neue Anfrage beim THD: pulsiert einige Sekunden, auch wenn der Ton aus ist */
@keyframes request-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232, 163, 61, 0.9); }
    50% { box-shadow: 0 0 0 7px rgba(232, 163, 61, 0); }
}
.aircraft-card.pulse .aircraft-btn {
    animation: request-pulse 1.1s ease-in-out infinite;
    outline: 3px solid var(--color-confirmed);
    outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
    .aircraft-card.pulse .aircraft-btn { animation: none; }
}

/* Logo und Umschalter Hell/Dunkel in der Kopfzeile */
.topbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: white;
    text-decoration: none;
}
.topbar-logo { width: 30px; height: 30px; flex: none; }
.theme-toggle {
    background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.1); }

/* Monitor: orange = THD holt das Flugzeug gerade raus */
.monitor-card.status-confirmed { background: var(--color-confirmed); color: var(--color-navy); }
.monitor-legend { justify-content: center; margin: 0.5rem 0 1.25rem; }
/* Monitor: Hallen nicht über die ganze Breite ziehen, wenn nur wenige draußen stehen */
.monitor-grid-wrap { justify-content: center; }
.monitor-grid-wrap .position-column { flex: 0 1 240px; }