/* ================================================================
   LOHMIA MOBILE AUDIT FIXES v1.0 — 2026-02-18
   Correcciones mobile (375px) para 8 páginas:
   dashboard, chat, bbdd, config, saas, metering, tenants, live-browser
   Solo breakpoints ≤768px. No toca estilos desktop.
================================================================ */

/* ================================================================
   GLOBAL: Touch targets mínimo 44px (WCAG 2.5.8)
================================================================ */
@media (max-width: 768px) {
    button,
    .btn,
    [role="button"],
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.btn,
    .action-btn,
    .icon-btn,
    .tool-btn,
    .nav-link,
    .dropdown-item,
    .menu-item {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Inputs y selects también */
    input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]),
    select,
    textarea {
        min-height: 44px !important;
        font-size: 16px !important; /* evita zoom auto en iOS */
        box-sizing: border-box;
    }

    /* Overflow horizontal global */
    body {
        overflow-x: hidden !important;
    }
}

/* ================================================================
   DASHBOARD (index.html) — health-metrics grid + header compact
================================================================ */
@media (max-width: 480px) {
    /* Forzar 1 columna en health-metrics para cards de servidor */
    .health-metrics {
        grid-template-columns: 1fr !important;
    }

    /* Compactar server cards en 2 columnas (no 3) */
    .servers-grid,
    .server-grid,
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Reducir padding de main-content */
    .main-content,
    #mainContent,
    .dashboard-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* ================================================================
   SAAS (saas.html) — Override inline minmax() grids problemáticos
   Los minmax(300px+, 1fr) en style="" causan overflow en 375px
================================================================ */
@media (max-width: 768px) {
    /* Override inline styles con !important */
    [style*="minmax(400px"],
    [style*="minmax(300px"],
    [style*="minmax(280px"],
    [style*="minmax(250px"] {
        grid-template-columns: 1fr !important;
    }

    [style*="minmax(200px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Contenedor principal sin desbordamiento */
    .saas-main,
    .saas-content,
    .main-content {
        overflow-x: hidden !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
    }
}

/* ================================================================
   METERING (metering.html) — Header flex no se rompe en mobile
================================================================ */
@media (max-width: 768px) {
    /* El header de metering usa flex con flex:0 0 350px en acciones — colapsar */
    .header-actions {
        flex: 0 0 auto !important;
        gap: 8px !important;
    }

    .logo-section {
        flex: 0 0 auto !important;
        min-width: 100px !important;
    }

    /* Ocultar nav-links del header en mobile (ya hay bottom nav) */
    .nav-links {
        display: none !important;
    }

    /* Compactar header a single row */
    /* NOTA: .page-header excluido — es contenido (titulo+botones), no nav header */
    header:not(.page-header),
    .header:not(.page-header),
    .main-header,
    .top-header {
        flex-wrap: wrap !important;
        padding: 8px 12px !important;
        gap: 8px !important;
        min-height: 56px !important;
        max-height: 80px !important;
    }

    /* Page-header (titulo+acciones) se apila verticalmente sin max-height */
    .page-header:not(.section-header) {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px 16px !important;
        gap: 10px !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .page-header:not(.section-header) .header-actions-page {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .page-header:not(.section-header) .header-actions-page .btn {
        flex: 1 1 auto !important;
        min-width: 100px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Grids de metering a 1 columna por debajo de 480px */
    .grid,
    .stats-grid,
    .metrics-grid,
    .cards-grid {
        grid-template-columns: 1fr !important;
    }

    /* Skeleton a 1 columna */
    .skeleton-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

@media (max-width: 480px) {
    /* Skeleton a columna única */
    .skeleton-row {
        grid-template-columns: 1fr !important;
    }
}

/* ================================================================
   TENANTS (tenants.html) — Tabla 7 columnas → scroll horizontal
================================================================ */
@media (max-width: 768px) {
    /* El skeleton usa 7 columnas → reducir a 3 (nombre + plan + acciones) */
    .skeleton-row {
        grid-template-columns: 2fr 1fr 80px !important;
        gap: 8px !important;
    }

    /* Ocultar columnas skeleton no esenciales (4ª en adelante excepto última) */
    .skeleton-row .skeleton-cell:nth-child(n+4):not(:last-child) {
        display: none !important;
    }

    /* Stats grid a 2 columnas */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Tabla real: scroll horizontal (solución limpia sin contradiciones) */
    .tenants-table-wrapper,
    .table-scroll-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        display: block !important;
    }

    /* Tabla mantiene su estructura pero con scroll */
    .tenants-table,
    table.data-table {
        min-width: 600px !important; /* fuerza scroll antes de colapsar */
    }

    /* Celdas: padding compacto */
    .tenants-table td,
    .tenants-table th {
        padding: 8px 6px !important;
        font-size: 13px !important;
    }

    /* Botones de acción en filas */
    .tenant-actions button,
    .row-actions button,
    .action-icon {
        min-width: 36px !important; /* Espacio limitado en tabla */
        min-height: 36px !important;
        padding: 4px !important;
    }

    /* Header de página: botones de añadir/exportar */
    .header-actions-page {
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .header-actions-page .btn {
        flex: 1 1 auto !important;
        min-width: 120px !important;
        text-align: center !important;
    }
}

/* ================================================================
   CONFIG (config.html) — Forms stack a columna única
================================================================ */
@media (max-width: 768px) {
    /* Form grids a columna única */
    .form-row,
    .form-grid,
    .settings-grid,
    .config-grid {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }

    /* Form groups con espacio adecuado */
    .form-group,
    .setting-item,
    .config-item {
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    /* Checkboxes y toggles: área de click más grande */
    input[type="checkbox"],
    input[type="radio"],
    .toggle-switch,
    .switch {
        width: 44px !important;
        height: 44px !important;
        cursor: pointer !important;
    }

    /* Labels clickeables con padding para mejor touch area */
    label {
        padding: 8px 0 !important;
        display: block !important;
    }
}

/* ================================================================
   LIVE BROWSER — Toolbar buttons ≥44px, header compacto
================================================================ */
@media (max-width: 768px) {
    /* Toolbar buttons al mínimo WCAG */
    .toolbar-dropdown-btn,
    .toolbar-btn,
    .control-btn,
    #zoomIn, #zoomOut, #toggleDevTools,
    #toggleMobile, #captureBtn, #refreshBtn {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
    }

    /* Overflow oculto en live browser */
    #liveViewerApp,
    .viewer-container,
    .browser-frame {
        overflow-x: hidden !important;
    }
}

@media (max-width: 500px) {
    /* Override el 36px que ya existe con 44px */
    .toolbar-dropdown-btn,
    .control-btn {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* ================================================================
   CHAT (chat.html) — Toolbar icons touch targets
================================================================ */
@media (max-width: 768px) {
    /* Botones del toolbar de chat */
    .chat-toolbar button,
    .toolbar-btn,
    #serverList .server-item,
    .model-selector,
    .action-button,
    .send-btn,
    #sendButton {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Input de chat */
    #userInput,
    .chat-input,
    textarea.message-input {
        min-height: 44px !important;
        font-size: 16px !important;
    }
}

/* ================================================================
   BBDD (bbdd.html) — Document list padding + touch targets
================================================================ */
@media (max-width: 768px) {
    /* Evitar que el contenido toque el borde derecho */
    .document-list,
    .rag-list,
    .file-list,
    .doc-card,
    .rag-card {
        padding-right: 8px !important;
        box-sizing: border-box !important;
    }

    /* Action buttons en documento */
    .doc-action,
    .file-action,
    .rag-action,
    .document-actions button,
    .file-actions a {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px !important;
    }

    /* Filtros de búsqueda */
    .search-bar,
    .filter-bar,
    .search-input {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ================================================================
   TABLAS GENÉRICAS — Scroll horizontal contenido (todas las páginas)
================================================================ */
@media (max-width: 768px) {
    /* Wrap todas las tablas nativas */
    .table-container,
    .table-wrapper,
    .responsive-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        display: block !important;
        width: 100% !important;
    }

    /* Tablas heredadas sin wrapper */
    table:not(.no-mobile-scroll) {
        min-width: auto !important;
        width: 100% !important;
    }
}

/* ================================================================
   MOBILE v2 FIXES — 2026-02-18
   Issues detectados en iPhone 14 Pro Max (430px):
   1. Chat sidebar visible por defecto → ocultar, mostrar como overlay
   2. Metering filtros desbordados → apilar verticalmente
   3. Live Browser toolbar botón cortado → scroll visible
   4. Bottom nav consistencia cross-page
================================================================ */

/* ================================================================
   CHAT: Sidebar oculto por defecto — FIX DEFINITIVO
   Usa transform (más robusto que left: calc()) con !important
================================================================ */
@media (max-width: 768px) {
    /* Sidebar completamente fuera de pantalla */
    #sidebar.sidebar {
        display: flex !important; /* Override .sidebar{display:none} in mobile-polish.css — ID specificity wins */
        transform: translateX(-100%) !important;
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100dvh !important;
        width: 85vw !important;
        max-width: 320px !important;
        z-index: 9999 !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Sidebar visible al añadir .mobile-open */
    #sidebar.sidebar.mobile-open {
        transform: translateX(0) !important;
    }

    /* Overlay semitransparente (oculto por defecto) */
    #sidebarOverlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        z-index: 9998 !important;
        display: none !important;
        transition: opacity 0.3s ease !important;
    }

    #sidebarOverlay.visible {
        display: block !important;
    }

    /* Area de chat ocupa 100% cuando sidebar esta oculto */
    .main-layout {
        width: 100% !important;
        overflow: hidden !important;
    }

    /* FIX: historyPanel encima del sidebar (z-index:9999) cuando ambos visibles en móvil */
    #historyPanel {
        z-index: 10000 !important;
    }
}

/* ================================================================
   METERING: Controles de filtro apilados verticalmente <=480px
================================================================ */
@media (max-width: 480px) {
    .date-filter {
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .date-filter select,
    .date-filter input[type="date"],
    .date-filter button,
    .date-filter .pdf-button {
        width: 100% !important;
        flex: none !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
}

/* ================================================================
   LIVE BROWSER: Toolbar scroll visible + info no esencial oculta
================================================================ */
@media (max-width: 500px) {
    /* Scroll visible con scrollbar fino */
    .browser-toolbar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(255, 255, 255, 0.3) transparent !important;
    }

    .browser-toolbar::-webkit-scrollbar {
        height: 3px !important;
        display: block !important;
    }

    .browser-toolbar::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.35) !important;
        border-radius: 2px !important;
    }

    /* Ocultar info no esencial para dar mas espacio a botones */
    .viewport-info,
    .fps-counter {
        display: none !important;
    }

    /* URL mas compacta */
    .current-url {
        min-width: 80px !important;
        max-width: 130px !important;
        font-size: 11px !important;
    }
}

/* ================================================================
   BOTTOM NAV: Consistencia cross-page (chat, config, metering, tenants)
================================================================ */
@media (max-width: 768px) {
    /* Altura y fondo consistentes */
    .bottom-nav {
        height: 60px !important;
        min-height: 60px !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        box-sizing: content-box !important;
    }

    /* Touch targets minimo 44px en todos los items */
    .bottom-nav .bottom-nav-item,
    .bottom-nav-item {
        min-height: 44px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
    }

    /* Labels uniformes */
    .bottom-nav .nav-label,
    .bottom-nav-label,
    .bottom-nav-item span:not(.badge):not(.bottom-nav-badge) {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    /* Separar bottom nav del contenido */
    body.has-bottom-nav {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    }
}