/*
 * dewoc-mobile.css
 * Correcciones responsive completas para el CRM Dewoc.
 * Se carga después de theme.bundle.css — sobreescribe solo lo necesario.
 *
 * Breakpoints usados (idénticos a Bootstrap 5):
 *   xs   < 576px
 *   sm   576 – 767px
 *   md   768 – 991px
 *   lg   ≥ 992px  ← punto donde aparece el sidebar de escritorio
 */

/* ══════════════════════════════════════════════════════════════════
   1. GLOBAL — Evitar scroll horizontal en toda la página
   ══════════════════════════════════════════════════════════════════ */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
}

main {
    overflow-x: hidden;
}

/* ══════════════════════════════════════════════════════════════════
   2. SIDEBAR / NAVBAR VERTICAL — Comportamiento en mobile
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    /* El sidebar se convierte en drawer lateral que se desliza */
    #mainNavbar {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 270px !important;
        max-width: 85vw !important;
        z-index: 1045;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        box-shadow: none;
    }

    /* Cuando el drawer está abierto, mostrarlo */
    #mainNavbar.mobile-open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    }

    /* Forzar el contenido del collapse siempre visible dentro del drawer */
    #mainNavbar.mobile-open #sidenavCollapse {
        display: block !important;
    }

    /* Ocultar el toggler interno del sidebar (lo reemplaza el botón del topbar) */
    #mainNavbar .navbar-toggler {
        display: none !important;
    }

    /* Overlay oscuro detrás del sidebar */
    #sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1044;
    }
    body.sidebar-open #sidebar-backdrop {
        display: block;
    }

    /* El main NO tiene el margen izquierdo del sidebar */
    main,
    .main-content {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   3. TOPBAR (Header.php) — Ajustes en mobile
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    /* Reducir altura del topbar para ganar espacio vertical */
    header.navbar {
        height: 48px !important;
        min-height: 48px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   4. CONTENEDOR — Reducir padding lateral en pantallas chicas
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

@media (max-width: 767.98px) {
    /* Cards: menos padding interno */
    .card-body {
        padding: 0.875rem !important;
    }

    .card-header {
        padding: 0.75rem 0.875rem !important;
    }

    .card-footer {
        padding: 0.65rem 0.875rem !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   5. TABLAS — Scroll interno sin romper el layout de la página
   ══════════════════════════════════════════════════════════════════ */

/* Cualquier tabla dentro de un card que no tenga ya table-responsive */
@media (max-width: 991.98px) {

    /* Hacer que todos los .table dentro de cards sean scrollables */
    .card > .table,
    .card > .card-body > .table,
    .card > .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* El card no debe desbordar la pantalla */
    .card {
        overflow: hidden;
    }

    /* Indicador visual de que la tabla es scrollable */
    .table-responsive,
    .card > .table,
    .card > .card-body > .table {
        border-right: 3px solid transparent; /* evita clipping visual */
    }

    /* Evitar que celdas se expandan demasiado */
    .table td,
    .table th {
        white-space: nowrap;
    }

    /* Celdas con texto largo: permitir wrap en columnas de descripción */
    .table td.text-wrap,
    .table th.text-wrap {
        white-space: normal;
        min-width: 150px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   6. MODALES — Fullscreen en mobile, sin márgenes desperdiciados
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* Todos los modales: full-screen */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .modal-content {
        border-radius: 0 !important;
        border: none !important;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    /* Override del !important que pone comprobantes-compra.php */
    #createInvoiceModal .modal-dialog,
    [id$="Modal"] .modal-dialog,
    [id*="Modal"] .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Header y footer del modal: compactos */
    .modal-header {
        padding: 0.65rem 1rem !important;
        flex-shrink: 0;
    }

    .modal-footer {
        padding: 0.65rem 1rem !important;
        flex-shrink: 0;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .modal-footer .btn {
        flex: 1 1 auto;
        min-width: 80px;
    }

    /* Body del modal: scrollable */
    .modal-body {
        padding: 0.875rem 1rem !important;
        overflow-y: auto;
        flex: 1;
    }

    /* Título del modal: más pequeño */
    .modal-title {
        font-size: 1rem;
    }

    /* Grillas dentro de modales: columna única */
    .modal-body .row > [class*="col-"]:not([class*="col-12"]) {
        flex: 0 0 100%;
        max-width: 100%;
    }

}

/* Excepción: col-6 dentro de modal en 2 columnas solo desde 400px (evita campos de 140px en iPhones pequeños) */
@media (min-width: 400px) and (max-width: 767.98px) {
    .modal-body .row > .col-6,
    .modal-body .row > .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* CR-2: Modal POS — forzar fullscreen en mobile con especificidad mayor que el !important inline */
@media (max-width: 575.98px) {
    body #createInvoiceModal .modal-dialog {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        min-height: 100dvh;
    }
}

/* ══════════════════════════════════════════════════════════════════
   7. INPUTS — Eliminar ícono de validación que tapa números
   ══════════════════════════════════════════════════════════════════ */

/* Quitar el ícono de validación verde/rojo en inputs de tipo número */
input[type="number"].form-control.is-valid,
input[type="number"].form-control.is-invalid,
.was-validated input[type="number"].form-control:valid,
.was-validated input[type="number"].form-control:invalid {
    background-image: none !important;
    padding-right: 0.75rem !important;
}

/* En mobile, quitarlo de TODOS los inputs para ganar espacio */
@media (max-width: 767.98px) {
    .form-control.is-valid,
    .form-select.is-valid,
    .was-validated .form-control:valid,
    .was-validated .form-select:valid {
        background-image: none !important;
        padding-right: 0.75rem !important;
        border-color: #198754; /* mantener borde verde */
    }

    .form-control.is-invalid,
    .form-select.is-invalid,
    .was-validated .form-control:invalid,
    .was-validated .form-select:invalid {
        background-image: none !important;
        padding-right: 0.75rem !important;
        border-color: #dc3545; /* mantener borde rojo */
    }

    /* Reducir padding excesivo en inputs */
    .form-control {
        padding: 0.375rem 0.65rem;
    }

    .form-control-lg {
        padding: 0.45rem 0.75rem;
        font-size: 0.95rem;
    }
}

/* ══════════════════════════════════════════════════════════════════
   8. CARD HEADER — Wrap automático del toolbar (búsqueda + botones)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* Hacer que el header de la card se envuelva */
    .card-header,
    .card-header-space-between {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        align-items: center !important;
    }

    /* Buscador ocupa todo el ancho en la primera línea */
    .card-header .position-relative:first-child,
    .card-header input[type="search"],
    .card-header input[type="text"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        order: -1;
    }

    /* Botones de acción: alineados a la derecha */
    .card-header .d-flex.gap-2 {
        flex-wrap: wrap;
        gap: 0.35rem !important;
    }

    .card-header .btn {
        font-size: 0.8rem;
        padding: 0.35rem 0.6rem;
    }
}

/* ══════════════════════════════════════════════════════════════════
   9. PANEL DE FILTROS — Stack vertical en mobile
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* Panel de filtros: cada item ocupa 50% (2 por fila) */
    div[style*="padding:10px 20px"] .d-flex.flex-wrap.gap-2 > div,
    div[style*="padding:10px 20px 12px"] .d-flex.flex-wrap.gap-2 > div,
    div[style*="background:#f8f9fa"] .d-flex.flex-wrap.gap-2 > div,
    .filter-panel .d-flex.flex-wrap.gap-2 > div,
    .filter-panel > div {
        flex: 1 1 calc(50% - 0.5rem) !important;
        min-width: 130px;
    }

    /* Inputs y selects dentro de filtros: ancho total del contenedor */
    div[style*="padding:10px 20px"] input,
    div[style*="padding:10px 20px"] select,
    div[style*="padding:10px 20px 12px"] input,
    div[style*="padding:10px 20px 12px"] select,
    div[style*="background:#f8f9fa"] .d-flex.flex-wrap.gap-2 input,
    div[style*="background:#f8f9fa"] .d-flex.flex-wrap.gap-2 select,
    .filter-panel input,
    .filter-panel select {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Botón exportar + badge: se van a una fila aparte */
    div[style*="padding:10px 20px"] .ms-auto,
    div[style*="padding:10px 20px 12px"] .ms-auto,
    .filter-panel .ms-auto {
        flex: 1 1 100%;
        display: flex;
        justify-content: flex-end;
        margin-top: 0.35rem;
    }
}

@media (max-width: 575.98px) {
    /* En pantallas muy pequeñas, cada filtro ocupa el 100% */
    div[style*="padding:10px 20px"] .d-flex.flex-wrap.gap-2 > div,
    div[style*="padding:10px 20px 12px"] .d-flex.flex-wrap.gap-2 > div,
    div[style*="background:#f8f9fa"] .d-flex.flex-wrap.gap-2 > div,
    .filter-panel .d-flex.flex-wrap.gap-2 > div,
    .filter-panel > div {
        flex: 1 1 100% !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   10. BREADCRUMB — Ocultar en pantallas muy pequeñas
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    nav[aria-label="breadcrumb"] {
        display: none !important;
    }

    /* Título de página: más pequeño */
    h1.h2 {
        font-size: 1.2rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Header de sección: permitir wrap */
    .d-flex.align-items-baseline.justify-content-between {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 0.25rem;
    }
}

/* ══════════════════════════════════════════════════════════════════
   11. BADGES Y PILLS — Legibles en mobile
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .badge {
        font-size: 0.7rem;
    }
}

/* ══════════════════════════════════════════════════════════════════
   12. GRILLAS — Responsividad mejorada para cards en fila
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    /* Forzar columna única para .row > .col-md-* cuando no hay clase sm */
    .row > .col-md-3,
    .row > .col-md-4,
    .row > .col-md-6:not(.col-sm-6):not(.col-6) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════════
   13. BOTONES DE ACCIÓN — Más compactos en mobile
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    /* Botones con ícono + texto: ocultar texto si hay clase .btn-icon-only */
    .btn-icon-only span:not(.visually-hidden) {
        display: none;
    }

    /* Grupos de botones: wrap */
    .btn-group {
        flex-wrap: wrap;
    }
}

/* ══════════════════════════════════════════════════════════════════
   14. SIDEBAR — Animación de apertura con hamburguesa del topbar
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    /* El collapse en sí siempre visible cuando está dentro del sidebar abierto */
    #mainNavbar #sidenavCollapse.show {
        display: flex !important;
        flex-direction: column;
    }
}

/* ══════════════════════════════════════════════════════════════════
   15. FORMULARIOS DENTRO DE CARDS — Grid responsivo
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* Formularios multi-columna pasan a 1 columna */
    .row.g-3 > [class*="col-lg-"],
    .row.g-3 > [class*="col-md-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Excepción: col-6 y col-sm-6 mantienen 2 columnas */
    .row.g-3 > .col-6,
    .row.g-3 > .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* En tablet (sm), col-md-3 pasa a 2 columnas en lugar de 1 */
@media (min-width: 576px) and (max-width: 767.98px) {
    .row.g-3 > .col-md-3,
    .row.g-2 > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ══════════════════════════════════════════════════════════════════
   16. TOOLTIPS Y POPOVERS — Asegurarse de que no salgan de pantalla
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .tooltip {
        max-width: calc(100vw - 24px);
    }

    .popover {
        max-width: calc(100vw - 24px);
    }
}

/* ══════════════════════════════════════════════════════════════════
   17. DROPDOWNS — Asegurarse de que no salgan de pantalla
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .dropdown-menu {
        max-width: calc(100vw - 24px);
    }

    .dropdown-menu.dropdown-menu-end {
        right: 0 !important;
        left: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   18. INVENTARIO — Dropdown "Columnas" fijado para no ser cortado
       por overflow-x:hidden del layout principal
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    #colVisDropdown + .dropdown-menu {
        position: fixed !important;
        top: auto !important;
        left: 12px !important;
        right: 12px !important;
        max-width: calc(100vw - 24px) !important;
        transform: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   19. SCROLL SUAVE Y TOUCH-FRIENDLY
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    /* Aumentar área táctil de botones */
    .btn-sm {
        min-height: 34px;
        min-width: 34px;
    }

    /* Aumentar área táctil de links en tablas */
    .table td a,
    .table td button {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
    }

    /* Scroll suave en containers */
    .table-responsive,
    .card,
    .modal-body {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
}

/* ══════════════════════════════════════════════════════════════════
   20. INPUTS DE BÚSQUEDA CON mt-5 — Corregir margen excesivo mobile
       Afecta: Users, Customers, Empleados, MateriaPrima, Logs,
               CostosFijos, Agents, CategoriasTrabajo, Impuestos,
               Providers, Sueldos, ordenes-compra, extractor-docs
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .card-header .list-fuzzy-search,
    .card-header input[type="search"].mt-5,
    .card-header input[type="search"].mt-md-0 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* ms-md-4 en botones: sin margen en mobile */
    .card-header .d-flex.gap-2.ms-md-4,
    .card-header .d-flex.gap-2.ms-0.ms-md-4 {
        margin-left: 0 !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   21. INVENTARIO — Dropdown Producto/Ítem sin overflow
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    #filtroProductoBtn {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    #filtroProductoMenu {
        min-width: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-width: calc(100vw - 24px) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   22. TOMA INVENTARIO — Panel de detalle en mobile
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    /* Input de búsqueda y select en panel de detalle */
    #buscar-item-wrapper {
        width: 100% !important;
        min-width: 0 !important;
    }
    #filtro-cat-items {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Barra de resumen sticky: compactar y hacer scrollable horizontal */
    #resumen-bar {
        gap: 8px !important;
        padding: 6px 12px !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
    }
    #resumen-bar .stat {
        flex-shrink: 0;
        min-width: 52px;
    }
    #resumen-bar .stat-value {
        font-size: 0.85rem !important;
    }
    #resumen-bar .stat-label {
        font-size: 0.62rem !important;
    }
}

/* Dark mode para barra de resumen */
[data-theme="dark"] #resumen-bar,
[data-bs-theme="dark"] #resumen-bar {
    background: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
}

/* ══════════════════════════════════════════════════════════════════
   23. INDICADOR FLOTANTE IA — Contener en pantalla mobile
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    #ed-global-indicator {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        max-width: calc(100vw - 24px);
    }
    #ed-global-indicator > div {
        width: 100%;
        box-sizing: border-box;
        justify-content: center;
        border-radius: 12px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   24. RENTABILIDAD — Dropdown meses sin min-width fijo mobile
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    #rentMesBtn {
        min-width: 0 !important;
        width: 100%;
    }
    #rentMesDropdown {
        width: 100%;
    }
    #rentMesDropdown .dropdown-menu {
        width: 100%;
        min-width: 0 !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   25. BODY/MAIN — Cancelar margin-left residual del tema en mobile
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    body,
    body > main,
    body > .main-content {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}