/**
 * ============================================================
 * EVENTMASTER PRO - NAVBAR MOBILE FIX
 * Archivo: assets/css/navbar-mobile-fix.css
 *
 * Soluciona conflictos de z-index entre:
 *   - .mobile-menu-overlay (del header.php)
 *   - .mobile-sidebar-overlay (de páginas admin)
 *   - .navbar-menu (menú hamburguesa)
 *   - .dropdown-menu (dropdown del perfil)
 * ============================================================
 */

/* ============================================================
   MOBILE MENU OVERLAY (del header.php)
   Debe estar DEBAJO del navbar-menu y del dropdown,
   pero ENCIMA del contenido de la página.
   ============================================================ */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    /* z-index: 1018 — por debajo del navbar (1020) y navbar-menu (1019) */
    z-index: 1018;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    /* NO mostrar en desktop */
}

.mobile-menu-overlay.active {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Solo activar en mobile */
@media (min-width: 992px) {
    .mobile-menu-overlay {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

/* ============================================================
   NAVBAR MENU MOBILE
   Debe estar sobre el overlay pero debajo del navbar sticky
   ============================================================ */
@media (max-width: 991px) {
    .navbar-menu {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background-color: var(--bg-primary, #ffffff);
        flex-direction: column;
        padding: 0.5rem;
        box-shadow: 0 8px 16px rgba(0,0,0,0.15);
        gap: 0;
        z-index: 1019; /* sobre overlay (1018), bajo el navbar (1020) */
        border-top: 1px solid var(--border-color, #e5e7eb);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }

    .navbar-menu.active {
        display: flex;
    }

    .navbar-menu .navbar-link {
        padding: 0.875rem 1rem;
        width: 100%;
        border-radius: 6px;
        border-bottom: 1px solid var(--border-color, #e5e7eb);
        font-size: 0.95rem;
    }

    .navbar-menu .navbar-link:last-child {
        border-bottom: none;
    }
}

/* ============================================================
   DROPDOWN DEL PERFIL
   Siempre debe quedar sobre todo lo demás
   ============================================================ */
.dropdown-menu {
    z-index: 1025 !important; /* sobre el navbar (1020) y el overlay (1018) */
}

/* ============================================================
   NAVBAR - Mantener stacking context SIN romper dropdown
   El problema de .navbar { position: initial } es que destruye
   el stacking context y los dropdowns se posicionan mal.
   Usar position: sticky (el default del navbar) siempre.
   ============================================================ */

/* Para páginas que necesitan el navbar NO sticky (páginas admin
   que usan el navbar dentro de un layout flex): */
.navbar-not-sticky {
    position: relative !important;
    /* "relative" mantiene el stacking context, a diferencia de "initial" */
}

/* ============================================================
   ADMIN SIDEBAR OVERLAY
   Debe tener z-index más bajo que el dropdown del navbar
   para que el menú del perfil siga funcionando
   ============================================================ */
.mobile-sidebar-overlay {
    z-index: 998 !important; /* muy por debajo del dropdown (1025) */
}

/* ============================================================
   PROTECCIÓN EXTRA: body.sidebar-open
   Cuando el sidebar admin está abierto, el scroll se bloquea
   pero los dropdowns del navbar deben seguir funcionando
   ============================================================ */
body.sidebar-open .dropdown-menu.active {
    z-index: 1025 !important;
}