/* ============================================================
   WhasaaS Mobile Foundation v2 — rail mode + override legacy
   ------------------------------------------------------------
   Aplica responsive a las 89 vistas sin tocar cada archivo.

   - Hamburger drawer estilo "rail" (90px, icon-focused)
   - Suprime el sistema mobile-menu-toggle legacy (app.css)
   - Touch targets ≥ 44px, inputs 16px (sin zoom iOS)
   - Tablas con scroll horizontal, modales fullscreen
   - Soporte iOS safe-area + print
   ============================================================ */

/* ─────────────────────────────────────────────
   Hamburger (inyectado por View.php)
   ───────────────────────────────────────────── */
.wh-hamburger {
    display: none;
    position: fixed;
    top: max(10px, env(safe-area-inset-top, 0px));
    left: 10px;
    z-index: 1001;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(22, 27, 34, .92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #e6edf3;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
    transition: transform .2s ease, background .2s ease;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.wh-hamburger:active { transform: scale(.92); }
.wh-hamburger svg { width: 22px; height: 22px; fill: currentColor; transition: transform .25s ease; }
body.wh-drawer-open .wh-hamburger svg { transform: rotate(90deg); }

/* Backdrop */
.wh-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
body.wh-drawer-open .wh-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* ===================================================================
   ≤ 768px — MÓVIL + TABLET PEQUEÑO
   (matchea el breakpoint del sistema legacy en app.css)
   =================================================================== */
@media (max-width: 768px) {

    /* Mostrar hamburger nuevo */
    .wh-hamburger { display: flex !important; }

    /* SUPRIMIR TODOS los hamburgers legacy para evitar duplicados.
       Cazamos por clase (.mobile-menu-toggle, .menu-toggle) y por handler inline
       (cualquier <button onclick="toggleMobileMenu...">) para no perder ninguno. */
    .mobile-menu-toggle,
    .menu-toggle,
    .mobile-menu-close-row,
    .mobile-menu-overlay,
    .mobile-topbar-nav,
    button[onclick*="toggleMobileMenu"],
    div[onclick*="toggleMobileMenu"] { display: none !important; }

    /* ─── Fix de scroll en shells admin/SA/settings ───
       Estrategia (corregida): NO liberamos los heights — eso rompe el flex layout
       y deja a .admin-content sin altura constraint, por lo que su overflow-y: auto
       no scrollea (sin un padre con altura definida, no hay nada que recortar).

       En vez de eso, PRESERVAMOS el flex layout pero lo convertimos a columna
       (admin-nav se pone fixed/drawer, admin-main toma 100% ancho), y nos aseguramos
       de que admin-content tenga altura constraint y scroll INTERNO.

       Crucial: `min-height: 0` en los flex children — sin esto, flex items por
       default tienen min-height: auto y NO se pueden encoger debajo de su contenido,
       lo que rompe overflow scroll en flex columns. */
    body.wh-app-shell,
    body:has(.admin-shell),
    body:has(.sa-shell),
    body:has(.settings-wrap) {
        overflow: hidden !important;
        height: 100vh !important;
        height: 100dvh !important;
    }
    body.wh-app-shell .admin-shell,
    body:has(.admin-shell) .admin-shell,
    body.wh-app-shell .sa-shell,
    body:has(.sa-shell) .sa-shell,
    body.wh-app-shell .settings-wrap,
    body:has(.settings-wrap) .settings-wrap {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
        min-width: 0;
    }
    body.wh-app-shell .admin-main,
    body.wh-app-shell .sa-main,
    body.wh-app-shell .settings-main {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;   /* CRÍTICO: permite que el child con overflow scrollee */
        min-width: 0 !important;
        overflow: hidden !important;
        width: 100% !important;
        margin-left: 0 !important;
    }
    body.wh-app-shell .admin-content,
    body.wh-app-shell .sa-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px !important;
    }
    /* Settings-main es el "content" del settings layout — debe scrollear */
    body.wh-app-shell .settings-main {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px !important;
        padding-top: 70px !important;
        display: block !important;
    }

    /* Bloquear scroll cuando el drawer está abierto — gana sobre lo anterior */
    body.wh-drawer-open { overflow: hidden !important; }

    /* ============== ADMIN SHELL ==============
       Estructura responsive ya manejada arriba en `body.wh-app-shell`.
       Aquí solo configuramos el drawer y elementos visuales del shell. */
    /* ── Drawer admin nav: rail mode (90px, icon-focused) ── */
    .admin-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 90px !important;
        max-width: 90px !important;
        z-index: 200 !important;
        transform: translateX(-105%) !important;
        transition: transform .35s cubic-bezier(.34, 1.56, .64, 1) !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .45) !important;
        padding: max(56px, env(safe-area-inset-top, 0px)) 0 16px 0 !important;
        background: #161b22 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    body.wh-drawer-open .admin-nav,
    .admin-nav.mobile-open {  /* compat con JS legacy */
        transform: translateX(0) !important;
    }

    /* Brand: oculto en rail (se ve el hamburger ya). */
    .admin-nav .admin-brand { display: none !important; }

    /* Secciones: títulos compactos centrados */
    .admin-nav .nav-section-title {
        font-size: 0.55rem !important;
        text-align: center !important;
        padding: 12px 4px 4px 4px !important;
        opacity: 0.6;
    }

    /* Nav items: icon arriba, label mini abajo (rail vertical) */
    .admin-nav .nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 10px 4px !important;
        font-size: 0.62rem !important;
        text-align: center !important;
        line-height: 1.15 !important;
        border-right: none !important;
        border-left: 3px solid transparent !important;
        word-break: break-word;
        hyphens: auto;
        min-height: 60px !important;
    }
    .admin-nav .nav-item.active {
        border-left-color: #00a884 !important;
        border-right: none !important;
    }
    .admin-nav .nav-item svg {
        width: 22px !important;
        height: 22px !important;
    }
    .admin-nav .nav-item .badge-pending-chats,
    .admin-nav .nav-item > span:not(.badge-pending-chats) {
        font-size: 0.6rem;
        line-height: 1.1;
    }

    /* Main: el layout responsive lo manejan las reglas wh-app-shell de arriba.
       Aquí solo ajustes visuales (topbar height, gaps). */
    .admin-topbar {
        padding-left: 64px !important;
        padding-right: 12px !important;
        height: 56px !important;
        flex-shrink: 0 !important;
    }
    .admin-topbar-title { font-size: 0.95rem !important; }
    .admin-topbar-actions { gap: 6px !important; }

    /* ============== SUPERADMIN SHELL (mismo patrón) ============== */
    /* Layout responsive en wh-app-shell arriba. */
    .sa-nav {
        position: fixed !important;
        top: 0 !important; left: 0 !important; bottom: 0 !important;
        width: 90px !important;
        max-width: 90px !important;
        z-index: 200 !important;
        transform: translateX(-105%) !important;
        transition: transform .35s cubic-bezier(.34, 1.56, .64, 1) !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .45) !important;
        padding: max(56px, env(safe-area-inset-top, 0px)) 0 16px 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    body.wh-drawer-open .sa-nav,
    .sa-nav.mobile-open {
        transform: translateX(0) !important;
    }
    .sa-nav .sa-brand { display: none !important; }
    .sa-nav .sa-nav-section {
        font-size: 0.55rem !important;
        text-align: center !important;
        padding: 12px 4px 4px 4px !important;
        opacity: 0.6;
    }
    .sa-nav .sa-nav-item {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 4px !important;
        padding: 10px 4px !important;
        font-size: 0.62rem !important;
        line-height: 1.15 !important;
        border-right: none !important;
        border-left: 3px solid transparent !important;
        min-height: 60px !important;
    }
    .sa-nav .sa-nav-item.active { border-left-color: var(--accent, #7c3aed) !important; border-right: none !important; }
    .sa-nav .sa-nav-item svg { width: 22px !important; height: 22px !important; }
    .sa-nav .sa-nav-footer { padding: 12px 4px !important; }
    .sa-nav .sa-user-name, .sa-nav .sa-user-role { display: none !important; }

    .sa-topbar { padding-left: 64px !important; padding-right: 12px !important; flex-shrink: 0 !important; }

    /* ============== SETTINGS sidebar legacy ============== */
    /* Layout settings-wrap manejado por wh-app-shell. Aquí drawer styles. */
    .settings-sidebar {
        position: fixed !important;
        top: 0 !important; left: 0 !important; bottom: 0 !important;
        width: 90px !important;
        max-width: 90px !important;
        z-index: 200 !important;
        transform: translateX(-105%) !important;
        transition: transform .35s cubic-bezier(.34, 1.56, .64, 1) !important;
        height: 100vh !important;
        height: 100dvh !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, .45) !important;
        padding-top: max(56px, env(safe-area-inset-top, 0px)) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: var(--bg-panel, #161b22) !important;
    }
    body.wh-drawer-open .settings-sidebar,
    .settings-sidebar.mobile-open { transform: translateX(0) !important; }
    .settings-sidebar a {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 4px !important;
        padding: 10px 4px !important;
        font-size: 0.62rem !important;
        line-height: 1.15 !important;
        border-left: 3px solid transparent !important;
        min-height: 60px !important;
    }
    .settings-sidebar a.active { border-left-color: var(--green, #00a884) !important; }
    .settings-sidebar svg { width: 22px !important; height: 22px !important; flex-shrink: 0; }
    .settings-sidebar .s-title { font-size: 0.55rem !important; padding: 12px 4px 4px 4px !important; text-align: center !important; opacity: 0.6; }
    /* settings-main scroll ya manejado por wh-app-shell de arriba */
    .settings-header h1 { font-size: 1.15rem !important; }

    /* ============== GRIDS: se apilan ============== */
    .metrics-grid, .dash-grid, .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .dash-row, .dash-row-3, .form-grid, .two-col, .layout {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .metric-value { font-size: 1.4rem !important; }
    .metric-card { padding: 14px !important; }

    /* Cards / forms compactos */
    .card, .form-card, .panel {
        padding: 14px !important;
        border-radius: 10px !important;
    }
    .card-title, .panel-title { font-size: 0.95rem !important; }

    /* ============== INPUTS: 16px = sin zoom iOS ============== */
    .form-input, .input-field,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="tel"], input[type="search"], input[type="url"],
    select, textarea {
        font-size: 16px !important;
    }
    .form-group { margin-bottom: 14px; }

    /* ============== TABLAS: scroll horizontal ============== */
    table { font-size: 0.85rem; }
    .table-wrap, .responsive-table-wrap, [class*="table-container"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .admin-content > table, .sa-content > table, .card > table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ============== MODALES fullscreen ============== */
    .modal-content, .qr-box, .modal-dialog, .dialog {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column;
    }
    /* Custom-modal compact (alerts/confirms) → conserva tamaño */
    .custom-modal-content {
        width: 92vw !important;
        max-width: 92vw !important;
        max-height: 88vh !important;
        height: auto !important;
        margin: auto !important;
        border-radius: 14px !important;
    }

    /* ============== Touch targets ≥ 44px ============== */
    .btn, .button, a.btn, button.btn {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 0.92rem;
    }
    .btn-sm, .btn-small { min-height: 36px; padding: 6px 12px; }

    /* ============== Botones tipo "topbar action" se apilan en row scrolleable ============== */
    .admin-topbar-actions {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        white-space: nowrap;
        flex-wrap: nowrap !important;
        max-width: calc(100vw - 200px);
    }
    .admin-topbar-actions::-webkit-scrollbar { display: none; }

    /* iOS safe areas */
    body { padding-bottom: env(safe-area-inset-bottom, 0); }

    /* Heading sizes */
    h1 { font-size: 1.3rem !important; }
    h2 { font-size: 1.1rem !important; }
    h3 { font-size: 1rem !important; }
}

/* ===================================================================
   769px–1024px — TABLET
   =================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .metrics-grid, .dash-grid, .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .dash-row-3 { grid-template-columns: 1fr !important; }
    .admin-content, .sa-content { padding: 20px !important; }
}

/* ===================================================================
   Print
   =================================================================== */
@media print {
    .wh-hamburger, .wh-drawer-backdrop,
    .wh-fab, .wh-fab-backdrop,
    .admin-nav, .sa-nav, .settings-sidebar { display: none !important; }
    .admin-main, .sa-main, .settings-main { margin-left: 0 !important; }
}