/* ============================================================================
   ANTRETO - style.css: das gesamte Erscheinungsbild
   ============================================================================
   Gestaltungsidee:
   - Feuerwehrrot als einzige Signalfarbe, sonst ruhige Grautöne. Rot bleibt
     dadurch dem vorbehalten, was wichtig ist (Marke, Hauptaktionen - und
     später dem Einsatz-Kontext auf dem Kiosk).
   - Systemschriften statt Webfonts: lädt sofort, funktioniert auch wenn das
     Gerätehaus-WLAN lahmt, keine Abhängigkeit von Google & Co.
   - Großzügige Klickflächen, weil die Hauptnutzung per Finger am Tablet ist.

   CSS-Variablen (--name) am Anfang definieren die "Designsprache" zentral.
   Wer z.B. das Rot ändern will, ändert es nur hier oben.
   ============================================================================ */

:root {
    /* Farbpalette */
    --rot:        #C8102E;   /* Feuerwehrrot - Marke und Hauptaktionen */
    --rot-dunkel: #9E0C24;   /* dunkleres Rot für Hover-Effekte */
    --anthrazit:  #1F2429;   /* fast schwarz - Kopfleiste, Überschriften */
    --grau:       #5A6470;   /* gedämpftes Grau - Nebentexte */
    --linie:      #D9DDE2;   /* helle Linien und Rahmen */
    --papier:     #F4F5F7;   /* Seitenhintergrund */
    --weiss:      #FFFFFF;   /* Karten und Tabellen */

    /* Rückmeldefarben */
    --gruen:      #1E7B3C;   /* Erfolg / anwesend */
    --gruen-hell: #E3F3E8;
    --rot-hell:   #FBE7EA;
}

/* ---------------------------------------------------------------------------
   Grundgerüst
   --------------------------------------------------------------------------- */

* {
    box-sizing: border-box;   /* Breitenangaben schließen Innenabstand mit ein */
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif;   /* Systemschrift des Geräts */
    background: var(--papier);
    color: var(--anthrazit);
    font-size: 16px;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;   /* Kopf, Inhalt, Fuß untereinander; Fuß klebt unten */
}

/* Inhaltsbereich: zentriert, mit Maximalbreite für gute Lesbarkeit */
.page {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 28px 20px;
    flex: 1;                  /* nimmt den verfügbaren Platz ein */
}

h1 {
    font-size: 1.5rem;
    margin-bottom: 18px;
    letter-spacing: -0.01em;
}

h2 {
    font-size: 1.1rem;
    margin: 24px 0 12px;
}

p {
    margin-bottom: 12px;
}

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

/* ---------------------------------------------------------------------------
   Kopfleiste mit Navigation
   --------------------------------------------------------------------------- */

.topbar {
    background: var(--anthrazit);
    color: var(--weiss);
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0 20px;
    height: 56px;
    /* Die rote Linie oben ist das Markenzeichen der App: */
    border-top: 4px solid var(--rot);
}

.brand {
    color: var(--weiss);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Das rote Quadrat vor dem Schriftzug */
.brand-mark {
    width: 14px;
    height: 14px;
    background: var(--rot);
    display: inline-block;
}

.topnav {
    display: flex;
    gap: 4px;
}

.topnav a {
    color: #C8CDD3;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.95rem;
}

.topnav a:hover {
    color: var(--weiss);
    background: rgba(255, 255, 255, 0.08);
}

.topbar-user {
    margin-left: auto;        /* schiebt den Block ganz nach rechts */
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: #C8CDD3;
}

/* ---------------------------------------------------------------------------
   Karten - weiße Boxen, in denen Inhalte liegen
   --------------------------------------------------------------------------- */

.card {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 10px;
    padding: 22px;
    margin-bottom: 20px;
}

/* Kennzahlen auf der Übersichtsseite (z.B. "42 aktive Mitglieder") */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
}

.stat-label {
    color: var(--grau);
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   Formulare
   --------------------------------------------------------------------------- */

label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"] {
    width: 100%;
    padding: 11px 12px;
    font-size: 1rem;
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: var(--weiss);
    color: var(--anthrazit);
}

/* Roter Rahmen beim aktiven Feld, damit man sieht, wo man tippt */
input:focus {
    outline: 2px solid var(--rot);
    outline-offset: 1px;
    border-color: var(--rot);
}

/* Abstand zwischen Formularzeilen */
.form-row {
    margin-bottom: 16px;
}

/* Zwei Felder nebeneinander (z.B. Vorname / Nachname) */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Auf schmalen Bildschirmen wieder untereinander */
@media (max-width: 600px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------------------------
   Kopfleiste auf dem Smartphone
   --------------------------------------------------------------------------- */
/* Bis hier passt die Navigation in EINE Zeile. Auf schmalen Geräten würde sie
   sonst über den rechten Rand hinauslaufen und die ganze Seite horizontal
   scrollbar machen. Deshalb: Leiste umbrechen lassen - Marke und Benutzer
   bleiben oben, die Navigation rutscht in eine eigene, volle Zeile darunter,
   die bei Bedarf seitlich gewischt werden kann (statt die Seite zu verschieben). */
@media (max-width: 720px) {
    .topbar {
        flex-wrap: wrap;
        height: auto;
        min-height: 56px;
        padding: 8px 14px;
        gap: 8px 18px;
    }
    .topbar-user {
        margin-left: auto;      /* Marke links, Benutzer/Abmelden rechts */
    }
    .topnav {
        order: 3;               /* immer unterhalb von Marke + Benutzer */
        width: 100%;
        overflow-x: auto;       /* lange Menüs seitlich scrollbar */
        -webkit-overflow-scrolling: touch;
        gap: 2px;
        padding-bottom: 2px;
        /* dezenter Trenner zur oberen Zeile */
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-top: 8px;
    }
    .topnav a {
        white-space: nowrap;    /* Menüpunkte nicht umbrechen */
        padding: 8px 11px;
    }
}

.form-hint {
    font-size: 0.85rem;
    color: var(--grau);
    margin-top: 4px;
}

/* Checkbox mit Text in einer Zeile */
.check-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.check-row label {
    margin: 0;
    font-weight: 400;
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.btn {
    display: inline-block;
    padding: 11px 18px;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid var(--linie);
    border-radius: 8px;
    background: var(--weiss);
    color: var(--anthrazit);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.btn:hover {
    background: var(--papier);
}

/* Hauptaktion (Speichern, Anmelden) - rot gefüllt */
.btn-primary {
    background: var(--rot);
    border-color: var(--rot);
    color: var(--weiss);
}

.btn-primary:hover {
    background: var(--rot-dunkel);
    border-color: var(--rot-dunkel);
}

.btn-small {
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* Für gefährliche/unumkehrbare Aktionen wie Löschen */
.btn-danger {
    background: var(--weiss);
    color: var(--rot-dunkel);
    border-color: var(--rot-dunkel);
}
.btn-danger:hover {
    background: var(--rot-dunkel);
    color: var(--weiss);
}

/* Button-Gruppe: mehrere Knöpfe in einer Reihe mit etwas Abstand,
   bricht auf schmalen Bildschirmen sauber um. */
.btn-gruppe {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Gesperrte Knöpfe (z.B. Export vor dem Abschließen): blass und nicht
   anklickbar. "not-allowed" zeigt am Mauszeiger, dass es gerade nicht geht. */
.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   Tabellen (Mitgliederliste)
   --------------------------------------------------------------------------- */

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: 10px;
    overflow: hidden;         /* damit die runden Ecken sichtbar bleiben */
}

th, td {
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--linie);
}

th {
    background: var(--papier);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--grau);
}

tr:last-child td {
    border-bottom: none;
}

/* Status-Plaketten ("aktiv" / "inaktiv") */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-active {
    background: var(--gruen-hell);
    color: var(--gruen);
}

.badge-inactive {
    background: var(--rot-hell);
    color: var(--rot);
}

/* Blaue Plakette - genutzt für manuell beendete Events ("manuell") */
.badge-manual {
    background: #E2ECF7;
    color: #1769C4;
}

/* Werkzeugleiste über der Tabelle: Suchfeld links, Knopf rechts */
.toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;          /* bricht auf schmalen Bildschirmen um */
}

.toolbar form {
    display: flex;
    gap: 8px;
    flex: 1;
}

.toolbar input[type="search"] {
    max-width: 320px;
}

/* ---------------------------------------------------------------------------
   Flash-Meldungen (Rückmeldungen nach Aktionen)
   --------------------------------------------------------------------------- */

.flash {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-weight: 500;
}

.flash-success {
    background: var(--gruen-hell);
    color: var(--gruen);
    border: 1px solid #BBDEC6;
}

.flash-error {
    background: var(--rot-hell);
    color: var(--rot-dunkel);
    border: 1px solid #F0BFC7;
}

/* ---------------------------------------------------------------------------
   Login- und Setup-Seite: eine zentrierte Karte
   --------------------------------------------------------------------------- */

.auth-wrap {
    max-width: 420px;
    margin: 8vh auto 0;       /* vertikal etwas nach unten gerückt */
}

.auth-logo {
    text-align: center;
    margin-bottom: 22px;
}

.auth-logo .brand-mark {
    width: 18px;
    height: 18px;
    vertical-align: -2px;
    margin-right: 10px;
}

.auth-logo span.name {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Tabs (z.B. Einstellungsbereiche)
   --------------------------------------------------------------------------- */

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 2px solid var(--linie);
    margin-bottom: 20px;
}

.tab-btn {
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--grau);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
}

.tab-btn:hover { color: var(--anthrazit); }

.tab-btn.aktiv {
    color: var(--anthrazit);
    border-bottom-color: var(--rot);
}

.tab-panel[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   Fußzeile
   --------------------------------------------------------------------------- */

.footer {
    text-align: center;
    color: var(--grau);
    font-size: 0.8rem;
    padding: 18px;
}


/* ---------------------------------------------------------------------------
   Bezeichnung eines Dienstes/Einsatzes direkt ändern (Stift neben der
   Überschrift in der Detailansicht)
   --------------------------------------------------------------------------- */
.titelzeile {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
/* WICHTIG: "display: flex" würde das hidden-Attribut aushebeln - beide
   Elemente müssen beim Umschalten wirklich verschwinden. */
.titelzeile[hidden],
.titel-form[hidden] {
    display: none !important;
}
.stift {
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--grau);
    cursor: pointer;
    padding: 6px;
    line-height: 0;
    flex: none;
}
.stift svg { width: 20px; height: 20px; }
.stift:hover { color: var(--rot); border-color: var(--linie); }

.titel-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.titel-form input[type="text"] {
    flex: 1;
    min-width: 240px;
    font-size: 1.3rem;
    font-weight: 600;
    padding: 8px 12px;
}


/* Zwischenüberschriften innerhalb der Einstellungs-Reiter: gliedern lange
   Formulare in erkennbare Themenblöcke. */
.unterabschnitt {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--grau);
    margin: 26px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--linie);
}
.unterabschnitt:first-of-type { margin-top: 14px; }