/* komponenten/Navigation/assets/css/hauptmenue.css */

/* ==========================================================================
   Sichtbarkeits-Umschaltung Desktop <-> Mobil
   WICHTIG: Der Breakpoint 1750px muss exakt zur PHP-Logik in
   bausteine/hauptmenue.php passen (.view-desktop / .view-mobile-header /
   .view-mobile-drawer werden dort gesetzt).
   ========================================================================== */
.view-desktop { display: none !important; }
.view-mobile-header { display: flex !important; }

@media (min-width: 1750px) {
    .view-desktop { display: block !important; }
    .view-desktop-flex { display: flex !important; }
    .view-mobile-header { display: none !important; }
    .view-mobile-drawer { display: none !important; }
}

/* ==========================================================================
   MOBILE (< 1750px)
   ========================================================================== */
@media (max-width: 1749px) {
    /* Der weiße Nav-Balken verschwindet komplett: er soll keine Höhe
       mehr reservieren, damit der Seiteninhalt ganz nach oben rückt.
       Nur der schwebende Burger-Knopf bleibt sichtbar. */
    nav.hauptnav-bar {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        height: 0 !important;
    }
    nav.hauptnav-bar > .hauptnav-inner {
        height: 0 !important;
        padding: 0 !important;
        max-width: none !important;
    }
    nav.hauptnav-bar > .hauptnav-inner > .hauptnav-row {
        height: 0 !important;
    }

    /* Fest schwebender, transparenter Burger oben rechts.
       Etwas kräftiger als zuvor, damit er auf hellem Kalender besser sichtbar ist. */
    .view-mobile-header {
        position: fixed;
        top: 0.5rem;
        right: 0.5rem;
        z-index: 106;
    }
    .mobile-burger-fab {
        background: rgba(255, 255, 255, 0.85);
        border: 1px solid rgba(30, 41, 59, 0.12);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 4px 14px -3px rgba(15, 23, 42, 0.30);
        color: #1e293b !important;
    }
    .mobile-burger-fab:hover,
    .mobile-burger-fab:active {
        background: #ffffff;
    }

    /* ----------------------------------------------------------------------
       Abdunkelnder Hintergrund hinter dem Drawer.
       Wird über ein ::before am Drawer-Element realisiert (kein PHP nötig).
       Damit wird der schmale Drawer klar vom Seiteninhalt abgesetzt und
       das Antippen daneben schließt visuell den Fokus.
       ---------------------------------------------------------------------- */
    .view-mobile-drawer::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
        z-index: -1;
        animation: drawer-overlay-in 0.2s ease both;
    }

    @keyframes drawer-overlay-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    @keyframes drawer-panel-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* ----------------------------------------------------------------------
       Der Drawer selbst: nicht mehr volle Breite, sondern ein schmales,
       schwebendes Panel rechts. Überschreibt die Tailwind-Klassen
       (w-full / left-0 / absolute) aus dem PHP-Baustein.
       ---------------------------------------------------------------------- */
    .view-mobile-drawer {
        position: fixed !important;
        top: 0.5rem !important;
        /* Horizontal zentriert: left/right auf 0 und Auto-Margins.
           Bewusst KEIN transform: translateX(-50%), da ein transform einen
           Containing Block bilden und den schwebenden Suchergebnis-Fix
           (siehe drawer-search-panel) aushebeln würde. */
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;

        /* schmal: ~86% der Breite, aber gedeckelt, damit es auf großen
           Handys/Tablets nicht ausufert */
        width: 86vw !important;
        max-width: 22rem !important;

        /* Nur so hoch wie der Inhalt. Deckel auf den verfügbaren Raum
           (Viewport minus oben/unten je 0.5rem), damit bei langen Menüs
           gescrollt wird, statt das Panel künstlich zu strecken. */
        height: auto !important;
        max-height: calc(100vh - 1rem) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;

        background: #ffffff !important;
        border: 1px solid rgba(15, 23, 42, 0.12) !important;
        border-radius: 1rem !important;
        box-shadow: 0 20px 45px -12px rgba(15, 23, 42, 0.55) !important;

        animation: drawer-panel-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    /* Innenabschnitte, die im PHP-Baustein volle Breite/eckig sind,
       an die abgerundeten Ecken des Panels anpassen. */
    .view-mobile-drawer > *:first-child {
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        overflow: hidden;
    }
    .view-mobile-drawer > *:last-child {
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        overflow: hidden;
    }

    /* ----------------------------------------------------------------------
       MEHR KONTRAST für normale Benutzer.
       Die Vermieter-Sektion (weißer Bereich) wirkt bislang sehr flach.
       Wir verstärken Trennlinien, Hover-Zustände und die Schriftfarbe.
       Diese Regeln greifen nur mobil und nur innerhalb des Drawers.
       ---------------------------------------------------------------------- */

    /* Top-Level-Einträge (System / Verwaltung / Module / ...) im weißen Teil */
    .view-mobile-drawer .bg-white > div > button.font-bold,
    .view-mobile-drawer .bg-white > div > a.font-bold,
    .view-mobile-drawer .bg-white > div > span.font-bold {
        color: #0f172a !important;                 /* fast schwarz statt gray-800 */
        border-bottom: 1px solid #e2e8f0 !important;
    }
    .view-mobile-drawer .bg-white > div > button.font-bold:hover,
    .view-mobile-drawer .bg-white > div > a.font-bold:hover {
        background: #eef2ff !important;            /* indigo-50, deutlich sichtbar */
    }

    /* Aufgeklappte Untermenüs: etwas kräftigerer Grauton als bg-gray-50,
       damit die Ebene klar erkennbar ist. */
    .view-mobile-drawer .bg-gray-50 {
        background: #eef1f6 !important;
    }
    .view-mobile-drawer .bg-gray-50 a {
        color: #334155 !important;                 /* slate-700 statt gray-600 */
    }
    .view-mobile-drawer .bg-gray-50 a:hover {
        background: #e0e7ff !important;            /* indigo-100 */
        color: #4338ca !important;                 /* indigo-700 */
    }

    /* Benutzer-Profilblock unten: klare obere Trennlinie */
    .view-mobile-drawer .border-t.border-gray-200 {
        border-top-color: #cbd5e1 !important;      /* slate-300, sichtbarer */
    }

    /* Suchleiste im Kopf des Drawers etwas absetzen */
    .view-mobile-drawer .drawer-search-panel.is-open {
        background: #eef1f6 !important;
    }

    /* ----------------------------------------------------------------------
       SUCHERGEBNIS als schwebendes Panel ÜBER dem Menü.
       Problem: Das Ergebnis-Dropdown (absolute, top-full) wird sonst
       (a) vom overflow:hidden des aufklappbaren Suchbereichs abgeschnitten,
       (b) vom overflow-y:auto des Drawers am unteren Rand gekappt und
       (c) vom darunterliegenden (dunklen) Betreiber-Menü verdeckt.
       Lösung: Das Panel bleibt absolut unter dem Suchfeld verankert (korrekte
       Position ganz ohne JS), aber alle clippenden Vorfahren geben im
       geöffneten Suchzustand ihr Clipping frei und das Panel bekommt einen
       z-index über allen Menü-Sektionen.
       Hinweis: funktioniert, weil die Drawer-Einfahranimation kein transform
       mehr setzt (siehe drawer-panel-in) und somit keinen Containing Block bildet.
       ---------------------------------------------------------------------- */

    /* (a) Aufklappbarer Suchbereich: im offenen Zustand nicht mehr clippen.
       Die Aufklapp-Animation nutzt max-height und bleibt davon unberührt. */
    .view-mobile-drawer .drawer-search-panel.is-open {
        overflow: visible !important;
    }

    /* Suchbereich über die nachfolgenden Menü-Sektionen heben. */
    .view-mobile-drawer .drawer-search-panel {
        position: relative;
        z-index: 120;
    }

    /* (b) Solange die Suche offen ist, darf der Drawer sein Ergebnis-Panel
       nicht am Rand kappen. Der Menü-Scroll wird dabei kurzzeitig aufgehoben;
       das ist akzeptabel, da während der aktiven Suche ohnehin das Ergebnis
       im Fokus steht. Gesteuert über die Alpine-Klasse am Drawer-Kopf. */
    .view-mobile-drawer:has(.drawer-search-panel.is-open) {
        overflow: visible !important;
    }

    /* (c) Das eigentliche Ergebnis-Panel: sicher über allem im Drawer.
       Zielt gezielt auf das absolut positionierte Dropdown (nicht auf den
       Lade-Spinner), das die Klassen 'absolute top-full' trägt. */
    .view-mobile-drawer .drawer-search-panel .absolute.top-full {
        z-index: 130 !important;
        box-shadow: 0 18px 40px -10px rgba(15, 23, 42, 0.55) !important;
    }
}

/* ==========================================================================
   Alpine.js: Aufblitzen vor Initialisierung verhindern
   ========================================================================== */
[x-cloak] { display: none !important; }

/* ==========================================================================
   Ausklappbares Suchfeld im Drawer (Lupe -> Suchfeld)
   ========================================================================== */
.drawer-search-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease;
}
.drawer-search-panel.is-open {
    max-height: 30rem;
    opacity: 1;
}