/*
 * Mejoras responsive para móvil - SwimHome
 *
 * En móvil (<992px) la barra de navegación se convierte en hamburguesa
 * (ver MenuTemplate_BodyEnd.html.twig). El menú se muestra como un panel
 * blanco desplegable, limpio y legible, en lugar del mega-menú horizontal.
 */

@media (max-width: 991.98px) {

    /* ---------- Botón hamburguesa ---------- */
    .navbar-toggler {
        padding: 0.35rem 0.6rem;
        border: 0;
    }

    /* Red de seguridad si el JS aún no ha corrido: que el menú no se salga. */
    nav.navbar .navbar-nav {
        flex-wrap: wrap;
    }

    /* ---------- Panel del menú (desplegable blanco) ---------- */
    nav.navbar .navbar-collapse.show,
    nav.navbar .navbar-collapse.collapsing {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #fff;
        max-height: 85vh;
        overflow-y: auto;
        overflow-x: hidden;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
        border-bottom: 3px solid var(--bs-primary, #d9230f);
        padding: 0.25rem 0;
    }

    /* Cada bloque (menú principal + iconos) uno debajo de otro */
    nav.navbar .navbar-collapse .navbar-nav {
        width: 100%;
        flex-direction: column;
    }

    /* ---------- Categorías (nivel 1) ---------- */
    nav.navbar .navbar-nav > .nav-item > .nav-link {
        display: flex;
        align-items: center;
        color: #212529 !important;
        font-weight: 500;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #eef0f2;
    }

    /* Mostrar el título COMPLETO, no las 2 letras que recorta la macro de FS */
    nav.navbar .navbar-nav .nav-link .d-md-none {
        display: none !important;
    }
    nav.navbar .navbar-nav .nav-link .d-none.d-md-inline-block {
        display: inline-block !important;
    }

    /* Chevron de los desplegables, alineado a la derecha */
    nav.navbar .navbar-nav .dropdown-toggle::after {
        margin-left: auto;
        border-top-color: #adb5bd;
    }

    /* ---------- Submenús (acordeón en gris claro) ---------- */
    nav.navbar .navbar-nav .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        padding: 0;
        background-color: #f6f7f9;
    }

    nav.navbar .navbar-nav .dropdown-menu .dropdown-item {
        color: #343a40;
        padding: 0.6rem 1rem 0.6rem 2.5rem;
        border-bottom: 1px solid #eef0f2;
        white-space: normal;
    }

    nav.navbar .navbar-nav .dropdown-menu .dropdown-item:hover,
    nav.navbar .navbar-nav .dropdown-menu .dropdown-item:focus,
    nav.navbar .navbar-nav .dropdown-menu .dropdown-item.active {
        background-color: #e9ecef;
        color: #000;
    }

    /* Carpetas de 2º nivel: mismo estilo, un poco más indentadas */
    nav.navbar .navbar-nav .dropdown-submenu > a.dropdown-item {
        font-weight: 500;
    }
    nav.navbar .navbar-nav .dropdown-submenu .dropdown-menu .dropdown-item {
        padding-left: 3.25rem;
        background-color: #fbfbfc;
    }

    /* Iconos de la derecha (buscar, dashboard, usuario) como filas normales */
    nav.navbar .navbar-nav.flex-row {
        flex-direction: column !important;
    }
    nav.navbar .navbar-nav.flex-row > .nav-item > .nav-link {
        color: #212529 !important;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #eef0f2;
    }

    /* ---------- Contenido de las páginas ---------- */

    /* Pestañas (Productos / Variantes / Stock...) deslizables en vez de romper */
    .nav-tabs,
    .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        white-space: nowrap;
    }

    /* Menos padding lateral para aprovechar la pantalla */
    .bg-header > .container-fluid,
    .card > .container-fluid,
    main > .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
}