/* ============================================================
   FRONTEND MODERNISIERUNG
   Analog zum Admin-Dashboard (html_admin_dashboard.php), aber
   bewusst schlank gehalten: der Großteil läuft über native
   Bootstrap-5.3-Utilities direkt in den Templates:
     bg-*-subtle / border-*-subtle / text-*-emphasis / rounded-pill
   Diese Datei ergänzt nur, was Bootstrap nicht mitbringt.
   ============================================================ */

/* ── Card-Header mit Icon (ersetzt <legend> in Fieldsets) ─── */
.fe-card-header {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.fe-icon-circle {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Icon-Farben – nutzen die Bootstrap-5.3-Theme-Variablen der
   subtle-Paletten, damit sie 1:1 zu den Badges/Buttons passen */
.fe-ic-blue   { background: var(--bs-primary-bg-subtle);   color: var(--bs-primary-text-emphasis); }
.fe-ic-teal   { background: var(--bs-success-bg-subtle);   color: var(--bs-success-text-emphasis); }
.fe-ic-amber  { background: var(--bs-warning-bg-subtle);   color: var(--bs-warning-text-emphasis); }
.fe-ic-red    { background: var(--bs-danger-bg-subtle);    color: var(--bs-danger-text-emphasis); }
.fe-ic-purple { background: #f5f3ff; color: #7c3aed; }
.fe-ic-gray   { background: var(--bs-secondary-bg-subtle); color: var(--bs-secondary-text-emphasis); }

/* ── Icon-Buttons (rund, für die Aktionsleiste im Card-Header) ── */
.btn-fe-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1;
}

/* ── Karten allgemein: etwas weicher/moderner als card default ── */
.fe-card {
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.fe-card > .card-header {
    background: #fafbfc;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}

/* ── Accordion (Schützenliste) ───────────────────────────── */
.fe-accordion .accordion-item {
    border: 1px solid #eaecf0;
    border-radius: 14px !important;
    overflow: hidden;
    margin-bottom: 0.6rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.fe-accordion .accordion-button {
    font-weight: 500;
}
.fe-accordion .accordion-button:not(.collapsed) {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
    box-shadow: none;
}
.fe-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: #eaecf0;
}
.fe-accordion .accordion-button::after {
    flex-shrink: 0;
}

/* ── Pill-Buttons (falls kein passendes Bootstrap-Utility) ── */
.btn-fe {
    font-weight: 600;
}

/* ── Menü-/Filter-Pills (Listenseiten: Startzeiten-Filter etc.) ──
   Grundzustand: neutrales Pastell. Aktiv: primary-subtle mit
   kräftigerer Border als optischer Marker, bleibt aber im
   Pastell-Farbraum statt hartem Solid-Primary. ── */
.fe-pill {
    border-radius: 30px;
    font-weight: 500;
    font-size: 0.85rem;
    padding: 6px 16px;
    border: 1px solid var(--bs-secondary-border-subtle);
    background-color: var(--bs-secondary-bg-subtle);
    color: var(--bs-secondary-text-emphasis);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.fe-pill:hover {
    text-decoration: none;
    color: var(--bs-secondary-text-emphasis);
    filter: brightness(0.96);
}
.fe-pill.active {
    background-color: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
    color: var(--bs-primary-text-emphasis);
    font-weight: 700;
}

/* ── Hauptnavigation (navi.php) ──────────────────────────────
   Wird als eigene Klasse zusätzlich zu btco-hover-menu gesetzt,
   überschreibt also gezielt nur Optik, nicht das bestehende
   Hover-Dropdown-Verhalten aus navi.css. ── */
.fe-navbar {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 10px 3px rgba(0,0,0,0.06);
    padding: 0.3rem 0.6rem;
}
.fe-navbar .navbar-brand {
    font-weight: 700;
    color: #111827;
}
/* Top-Level-Links (Home, Kurzanleitung, Event-Untermenü, Sprache) –
   trifft NUR direkte Kinder von .nav-item, nicht die echten
   Dropdown-Menü-Einträge darunter.
   !important nötig, da navi.css (btco-hover-menu Theme) und
   Bootstraps eigenes .dropdown-item:active (Solid-Primary!)
   hier sonst mitreden. */
.fe-navbar .navbar-nav > .nav-item > .dropdown-item {
    border-radius: 30px !important;
    padding: 0.5rem 1rem !important;
    
    background-color: transparent !important;
    background-image: none !important;
    color: #374151 !important;
    transition: background-color .15s ease, color .15s ease;
}


/* Eigenständiger, robuster Hover NUR für Top-Level-Items – bewusst
   getrennt von der generischen Submenü-Hover-Regel weiter unten,
   damit hier nichts durch Selektor-Reihenfolge verloren geht. */
.fe-navbar .navbar-nav > .nav-item > .dropdown-item:hover,
.fe-navbar .navbar-nav > .nav-item > .dropdown-item:focus,
.fe-navbar .navbar-nav > .nav-item.show > .dropdown-item {
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-primary-text-emphasis) !important;
    border-radius: 10px !important;
}

/* style.css setzt "nav ul li:hover { background: #006fba; }" –
   das färbt das <li> selbst ein, nicht nur den Link darin.
   Muss separat zurückgesetzt werden, sonst schimmert das
   Solid-Blau hinter unserem transparenten Link durch. */
.fe-navbar li:hover,
.fe-navbar li.show {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Alle dropdown-toggle-Elemente in der Navbar (u.a. Sprachauswahl)
   im Ruhezustand hart zurücksetzen – falls style.css hierfür
   generisch schon eine (blaue) Button-Optik vorsieht, gewinnt die
   höhere Spezifität hier. */
.fe-navbar .navbar-nav .dropdown-toggle {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #374151 !important;
    border-radius: 30px !important;
}

/* Hover/Focus/Active/Show – auf ALLEN Ebenen (Top-Level UND
   verschachtelte Untermenü-Einträge), einheitlich helles
   Primary statt Bootstraps Solid-Blau oder navi.css-Grau/Blau */
.fe-navbar a.dropdown-item:hover,
.fe-navbar a.dropdown-item:focus,
.fe-navbar a.dropdown-item:active,
.fe-navbar a.dropdown-item.active,
.fe-navbar a.dropdown-item.show,
.fe-navbar li.show > a.dropdown-item,
.fe-navbar .collapse ul > li:hover > a,
.fe-navbar .collapse ul ul > li:hover > a,
.fe-navbar .collapse ul ul ul > li:hover > a {
    background-color: var(--bs-primary-bg-subtle) !important;
    background-image: none !important;
    color: var(--bs-primary-text-emphasis) !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Mobile (<991px): navi.css setzt hier weißen Text für den
   (früher dunklen) aufgeklappten Zustand – auf unserem jetzt
   hellen Hintergrund muss das dunkel bleiben */
@media only screen and (max-width: 991px) {
    .fe-navbar .navbar-nav > li,
    .fe-navbar .navbar-nav > li > a {
        color: #374151 !important;
    }
}
/* Betonter CTA-Link (Login / Anmeldung bearbeiten) */
.fe-navbar .fe-nav-accent {
    background-color: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-primary-text-emphasis) !important;
    font-weight: 100;
}
.fe-navbar .fe-nav-accent:hover {
    filter: brightness(0.97);
}
/* Echtes Dropdown-Menü (Sprachauswahl) */
.fe-navbar .dropdown-menu {
    border-radius: 14px;
    border: 1px solid #eaecf0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    padding: 0.4rem;
}
.fe-navbar .dropdown-menu .dropdown-item {
    border-radius: 10px;
    font-size: 0.9rem;
    padding: 0.45rem 0.75rem;
}
.fe-navbar .dropdown-menu .dropdown-item:hover {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}
.fe-navbar .navbar-toggler {
    border: 1px solid var(--bs-secondary-border-subtle);
    border-radius: 10px;
}
.fe-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem var(--bs-primary-bg-subtle);
}
/* Event-Menüpunkt, dessen Meldeschluss bereits erreicht ist –
   gleiche Warnfarbe wie die Meldeschluss-Alert im Admin-Dashboard */
.fe-navbar .navbar-nav > .nav-item > .dropdown-item.fe-nav-closed {
    background-color: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}
.fe-navbar .navbar-nav > .nav-item > .dropdown-item.fe-nav-closed:hover {
    filter: brightness(0.97);
}