/* ==============================================================
   wms-dark.css
   Enterprise Dark Mode Override (Slate Theme) for WMS
   ============================================================== */

/* 1. PALETA BASE SLATE DARK */
html[data-bs-theme="dark"] {
    --wms-dark-bg: #0f172a;           /* slate-900 (Fondo principal) */
    --wms-dark-surface: #1e293b;      /* slate-800 (Cards, Tablas) */
    --wms-dark-surface-elevated: #334155; /* slate-700 (Hover, Dropdowns, Bordes light) */
    --wms-dark-border: #334155;       /* slate-700 (Líneas divisorias) */
    --wms-dark-text-main: #f8fafc;    /* slate-50 (Texto primario blanco suave) */
    --wms-dark-text-muted: #94a3b8;   /* slate-400 (Texto descriptivo) */
    --wms-dark-text-accent: #38bdf8;  /* sky-400 (Links, acentos sutiles) */

    /* Reset Bootstrap native variables for global inheritance */
    --bs-body-bg: var(--wms-dark-bg);
    --bs-body-color: var(--wms-dark-text-main);
    --bs-body-color-rgb: 248, 250, 252;
    --bs-border-color: var(--wms-dark-border);
    --bs-light: var(--wms-dark-surface);
    --bs-dark: #cbd5e1;
    --bs-tertiary-bg: var(--wms-dark-surface);
}

/* 2. FORZAR FONDOS MAESTROS Y SUPERFICIES (Anular background estáticos) */
html[data-bs-theme="dark"] body,
html[data-bs-theme="dark"] .bg-page,
html[data-bs-theme="dark"] .catalog-main-content,
html[data-bs-theme="dark"] main,
html[data-bs-theme="dark"] #content-area {
    background-color: var(--wms-dark-bg) !important;
    background-image: none !important;
    color: var(--wms-dark-text-main) !important;
}

/* Sidebar / Elementos fijos */
html[data-bs-theme="dark"] .catalog-sidebar-container,
html[data-bs-theme="dark"] .sidebar {
    background-color: #020617 !important; /* slate-950 (Aún más oscuro que el fondo para dar profundidad) */
    background-image: none !important;
    border-right: 1px solid var(--wms-dark-border) !important;
}

/* 3. NEUTRALIZAR CLASES Y ESTILOS INLINE BLANCOS (`#fff`, `#f8f9fa`) */
/* Esta es la regla maestra que anula los cientos de "style='background: #fff'" a lo largo del WMS */
html[data-bs-theme="dark"] .bg-white,
html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .section-card,
html[data-bs-theme="dark"] .catalog-card,
html[data-bs-theme="dark"] [style*="background: #fff"],
html[data-bs-theme="dark"] [style*="background: white"],
html[data-bs-theme="dark"] [style*="background: #f8f9fa"],
html[data-bs-theme="dark"] [style*="background-color: white"],
html[data-bs-theme="dark"] [style*="background-color: #fff"],
html[data-bs-theme="dark"] [style*="background-color: #f8f9fa"],
html[data-bs-theme="dark"] .panel-box,
html[data-bs-theme="dark"] .bubble-item {
    background-color: var(--wms-dark-surface) !important;
    background-image: none !important; /* Anula gradientes duros inline */
    color: var(--wms-dark-text-main) !important;
    border-color: var(--wms-dark-border) !important;
}

/* Limpiar fondos de modales si se abren */
html[data-bs-theme="dark"] .modal-content {
    background-color: var(--wms-dark-surface) !important;
    border-color: var(--wms-dark-border) !important;
}
html[data-bs-theme="dark"] .modal-header,
html[data-bs-theme="dark"] .modal-footer {
    border-color: var(--wms-dark-border) !important;
}
html[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Manejo específico de Cabeceras Grises o degradados claros duros */
html[data-bs-theme="dark"] .page-header,
html[data-bs-theme="dark"] .card-header,
html[data-bs-theme="dark"] .card-header.head-neutral,
html[data-bs-theme="dark"] .panel-toolbar,
html[data-bs-theme="dark"] [style*="background: #e9ecef"],
html[data-bs-theme="dark"] [style*="background: #f1f2f6"],
html[data-bs-theme="dark"] [style*="background: #fafbfc"] {
    background-color: #0f172a !important; /* Mismo color del body o un poco más oscuro */
    background-image: none !important; 
    border-bottom: 1px solid var(--wms-dark-border) !important;
    color: var(--wms-dark-text-main) !important;
}

/* 4. LISTAS, TABLAS Y DATATABLES (Resolución visual central) */
html[data-bs-theme="dark"] table,
html[data-bs-theme="dark"] .table {
    color: var(--wms-dark-text-main) !important;
    background-color: transparent !important;
    border-color: var(--wms-dark-border) !important;
}

html[data-bs-theme="dark"] .table > :not(caption) > * > * {
    background-color: var(--wms-dark-surface) !important;
    color: var(--wms-dark-text-main) !important;
    border-bottom-color: var(--wms-dark-border) !important;
}

/* DataTables Cabecera "Sticky" o Th normals */
html[data-bs-theme="dark"] .table thead th,
html[data-bs-theme="dark"] .table-transacciones thead th,
html[data-bs-theme="dark"] .table-responsive thead th {
    background-color: #020617 !important; /* Contraste fuerte en la cabecera slate-950 */
    color: #cbd5e1 !important;            /* Slate-300 para Th */
    border-bottom: 2px solid var(--wms-dark-text-accent) !important; /* Acento azul marino/celeste suave en borde */
}

/* Filas específicas pares/impares (Striped) */
html[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > td,
html[data-bs-theme="dark"] .table-transacciones tbody tr > td {
    background-color: var(--wms-dark-surface) !important;
}
html[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: #242f40 !important; /* Ligerísimamente intermedio */
}
html[data-bs-theme="dark"] .table-hover > tbody > tr:hover > td,
html[data-bs-theme="dark"] .table-transacciones tbody tr:hover > td {
    background-color: var(--wms-dark-surface-elevated) !important; /* Slate-700 al hover */
}

/* Paginación DataTables */
html[data-bs-theme="dark"] .pagination .page-link {
    background-color: var(--wms-dark-surface) !important;
    border-color: var(--wms-dark-border) !important;
    color: var(--wms-dark-text-main) !important;
}
html[data-bs-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--wms-dark-text-accent) !important;
    border-color: var(--wms-dark-text-accent) !important;
    color: #000 !important;
}
html[data-bs-theme="dark"] .pagination .page-item.disabled .page-link {
    background-color: #0f172a !important; /* slate-900 */
    color: var(--wms-dark-text-muted) !important;
    opacity: 0.5;
}

/* Botones genéricos de tablas y DataTable utils */
html[data-bs-theme="dark"] .dt-buttons .btn {
    background-color: var(--wms-dark-surface-elevated) !important;
    border-color: var(--wms-dark-border) !important;
    color: var(--wms-dark-text-main) !important;
}
html[data-bs-theme="dark"] .dt-buttons .btn:hover {
    background-color: var(--wms-dark-text-muted) !important;
}
html[data-bs-theme="dark"] .dataTables_info,
html[data-bs-theme="dark"] .dataTables_length,
html[data-bs-theme="dark"] .dataTables_filter label {
    color: var(--wms-dark-text-muted) !important;
}

/* 5. FORMULARIOS, INPUTS Y CAJAS DE BÚSQUEDA (Search Pills) */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-control-sm,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] .form-select-sm,
html[data-bs-theme="dark"] .search-pill {
    background-color: #0f172a !important;   /* Slate-900 para inputs para máximo contraste tipo Vercel */
    border: 1px solid var(--wms-dark-border) !important;
    color: var(--wms-dark-text-main) !important;
}
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus,
html[data-bs-theme="dark"] .search-pill:focus-within {
    background-color: #0f172a !important;
    border-color: var(--wms-dark-text-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.25) !important;
    color: var(--wms-dark-text-main) !important;
}
html[data-bs-theme="dark"] .form-control::placeholder,
html[data-bs-theme="dark"] .search-pill input::placeholder {
    color: #64748b !important; /* slate-500 */
}
html[data-bs-theme="dark"] .input-group-text {
    background-color: var(--wms-dark-surface-elevated) !important;
    border-color: var(--wms-dark-border) !important;
    color: var(--wms-dark-text-main) !important;
}

/* Múltiples Select2 si existen (WMS usualmente tiene) */
html[data-bs-theme="dark"] .select2-container .select2-selection,
html[data-bs-theme="dark"] .select2-dropdown,
html[data-bs-theme="dark"] .select2-results__options {
    background-color: #0f172a !important;
    border-color: var(--wms-dark-border) !important;
    color: var(--wms-dark-text-main) !important;
}
html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--wms-dark-text-main) !important;
}
html[data-bs-theme="dark"] .select2-container--default .select2-results__option--selected {
    background-color: var(--wms-dark-surface-elevated) !important;
}
html[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--wms-dark-text-accent) !important;
    color: #000 !important;
}

/* 6. DROPDOWNS Y MENÚS FLOTANTES */
html[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--wms-dark-surface-elevated) !important;
    border: 1px solid var(--wms-dark-border) !important;
    color: var(--wms-dark-text-main) !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6) !important;
}
html[data-bs-theme="dark"] .dropdown-item {
    color: var(--wms-dark-text-main) !important;
}
html[data-bs-theme="dark"] .dropdown-item:hover,
html[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: #475569 !important; /* slate-600 */
    color: #fff !important;
}
html[data-bs-theme="dark"] .dropdown-header {
    color: #94a3b8 !important;
    font-weight: 700;
}
html[data-bs-theme="dark"] .dropdown-divider {
    border-top-color: var(--wms-dark-border) !important;
}

/* 7. TARJETAS ESPECIALES, ESTADÍSTICAS Y BADGES */
html[data-bs-theme="dark"] .stat-item,
html[data-bs-theme="dark"] .catalog-stats,
html[data-bs-theme="dark"] .catalog-description {
    background-color: transparent !important;
    color: var(--wms-dark-text-muted) !important;
}
html[data-bs-theme="dark"] .section-title,
html[data-bs-theme="dark"] .catalog-title,
html[data-bs-theme="dark"] .header-text h1,
html[data-bs-theme="dark"] .header-text p,
html[data-bs-theme="dark"] .card-title,
html[data-bs-theme="dark"] h1, html[data-bs-theme="dark"] h2, html[data-bs-theme="dark"] h3, html[data-bs-theme="dark"] h4, html[data-bs-theme="dark"] h5, html[data-bs-theme="dark"] h6 {
    color: var(--wms-dark-text-main) !important;
}

/* Corregir texto primario oscuro de list-group */
html[data-bs-theme="dark"] .list-group-item {
    background-color: var(--wms-dark-surface) !important;
    border-color: var(--wms-dark-border) !important;
    color: var(--wms-dark-text-main) !important;
}

/* Text-muted global override */
html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .text-dark {
    color: var(--wms-dark-text-muted) !important;
}

/* Icons within cards / bubbles */
html[data-bs-theme="dark"] .catalog-icon {
    /* Mantenemos el fondo gradiente si existe, pero suavizándolo si quieremos (aquí lo respetamos porque contrasta) */
    opacity: 0.9;
}