/* Dark Mode Styles - Comprehensive
   Tonos ajustados (2026-08-04) de gris neutro genérico a azul marino,
   para que combine con la paleta de SmartNexo (--sn-fondo/--sn-superficie
   en smartnexo/assets/css/smartnexo-brand.css) en vez de un dark mode
   gris cualquiera. La estructura/selectores no se tocaron, solo los
   valores hex. */
body.dark-mode {
    background-color: #0A1120 !important;
    color: #d1d5db !important; /* Lighter gray for general text */
}

/* General text elements */
body.dark-mode .content-wrapper,
body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .card-body,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode span,
body.dark-mode strong,
body.dark-mode label {
    color: #d1d5db !important;
}

/* Force override AdminLTE's .text-dark class */
body.dark-mode .text-dark {
    color: #d1d5db !important;
}

/* Layout components */
body.dark-mode .main-header.navbar {
    background-color: #0F172A !important;
    border-bottom-color: #1E293B !important;
}

body.dark-mode .main-sidebar {
    background-color: #0F172A !important;
}

body.dark-mode .content-wrapper {
    background-color: #0A1120 !important;
}

/* Cards and Modals */
body.dark-mode .card,
body.dark-mode .modal-content {
    background-color: #0F172A !important;
    border-color: #1E293B;
}

/* BUG REAL CORREGIDO: .bg-light es una utilidad de Bootstrap con !important
   (background-color:#f8f9fa!important) usada en varias pantallas (ej. el
   panel "Importar datos desde paquete" en GR Remitente/Transportista) --
   nunca se cubrió, así que se veía como una caja blanca suelta en medio
   del formulario oscuro. */
/* BUG REAL CORREGIDO: .badge-info (tema-global-azul.css) usa un azul MUY
   pálido de fondo con texto azul oscuro -- pensado para fondo blanco, en
   modo oscuro se ve como una mancha casi blanca ilegible (ej. badge
   "Remolque" en Vehículos, tipo de unidad "Principal" en varias tablas). */
body.dark-mode .badge-info {
    background-color: rgba(0, 108, 255, .22) !important;
    color: #93C5FD !important;
}

body.dark-mode .bg-light,
body.dark-mode .bg-white,
body.dark-mode .alert-light {
    background-color: #111C33 !important;
    color: #d1d5db !important;
}

body.dark-mode .card-header,
body.dark-mode .modal-header {
    background-color: #0F172A !important;
    border-bottom-color: #1E293B !important;
}

/* BUG REAL CORREGIDO: las pestañas de Bootstrap (.nav-tabs, ej. Boletas/
   Facturas/Notas de Crédito en Comprobantes Electrónicos) y la celda
   "Ningún dato disponible" de DataTables tienen su propio fondo blanco
   que ninguna regla de arriba cubría. */
body.dark-mode .nav-tabs {
    background-color: transparent !important;
    border-bottom-color: #1E293B !important;
}
body.dark-mode .nav-tabs .nav-link {
    color: #d1d5db;
    background-color: transparent;
    border-color: transparent;
}
body.dark-mode .nav-tabs .nav-link.active,
body.dark-mode .nav-tabs .nav-item.show .nav-link {
    color: #fff !important;
    background-color: var(--color-primario, #006CFF) !important;
    border-color: transparent;
}
body.dark-mode .tab-content,
body.dark-mode table.dataTable tbody td.dataTables_empty {
    background-color: #0F172A !important;
    color: #d1d5db !important;
}
/* BUG REAL CORREGIDO: jquery.dataTables.min.css trae su PROPIA regla
   "table.dataTable tbody tr{background-color:#fff}" con más especificidad
   que ".table" de más arriba -- ganaba ella y las filas con datos reales
   se veían blancas en medio de una tabla oscura (a diferencia de la fila
   vacía "Ningún dato disponible", que sí se corrigió arriba). */
body.dark-mode table.dataTable tbody tr {
    background-color: #0F172A !important;
    color: #d1d5db !important;
}
/* BUG REAL CORREGIDO: además de la regla base de arriba, DataTables trae
   ".stripe"/".display tbody tr.odd/.even{background-color:#f9f9f9/#fff}"
   con TODAVÍA más especificidad (más clases en el selector) -- esa es la
   que realmente ganaba en tablas con filas reales (ej. detalle de venta
   en Boleta/Factura, tbl_ListadoProductos), dejando cada fila blanca
   aunque la regla genérica de arriba ya existiera. */
body.dark-mode table.dataTable.stripe tbody tr.odd,
body.dark-mode table.dataTable.display tbody tr.odd,
body.dark-mode table.dataTable.stripe tbody tr.even,
body.dark-mode table.dataTable.display tbody tr.even,
body.dark-mode table.dataTable tbody tr.odd,
body.dark-mode table.dataTable tbody tr.even,
body.dark-mode .table-striped tbody tr:nth-of-type(odd),
body.dark-mode .table-striped tbody tr:nth-of-type(even) {
    background-color: #0F172A !important;
    color: #d1d5db !important;
}
body.dark-mode table.dataTable tbody tr:hover,
body.dark-mode table.dataTable.hover tbody tr:hover,
body.dark-mode table.dataTable.display tbody tr:hover {
    background-color: #16233D !important;
}
/* Celdas individuales -- por si alguna columna trae su propio fondo en
   línea o vía clase (ej. columnas de "sorting" que DataTables tiñe). */
body.dark-mode table.dataTable tbody td {
    background-color: transparent;
    color: #d1d5db !important;
}
/* BUG REAL CORREGIDO: DataTables pinta la COLUMNA ordenada actualmente
   con su propio fondo (.sorting_1/_2/_3, distinto según fila par/impar) --
   la regla genérica de arriba no tenía !important y perdía contra esas,
   dejando esa columna (ej. "Nombre" en Choferes, si es la columna con la
   flecha de orden activa) con un recuadro gris claro en medio de la fila
   oscura. Afecta a CUALQUIER tabla del sistema con ordenamiento por
   columna activo, no solo Choferes. */
body.dark-mode table.dataTable tbody tr > .sorting_1,
body.dark-mode table.dataTable tbody tr > .sorting_2,
body.dark-mode table.dataTable tbody tr > .sorting_3 {
    background-color: transparent !important;
}

body.dark-mode .card-footer,
body.dark-mode .modal-footer {
    border-top-color: #1E293B !important;
}

/* Links */
body.dark-mode a:not(.btn):not(.nav-link):not(.brand-link) {
    color: #6cb2f7;
}
body.dark-mode a:not(.btn):hover {
    color: #8bc3ff;
}

/* Tables */
body.dark-mode .table {
    color: #d1d5db !important;
    background-color: #0F172A;
}

body.dark-mode .table-bordered,
body.dark-mode .table-bordered td,
body.dark-mode .table-bordered th {
    border-color: #1E293B !important;
}

body.dark-mode .table-hover tbody tr:hover {
    background-color: #16233D;
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: #111C33;
}


/* DataTables specific */
body.dark-mode .dataTables_info,
body.dark-mode .dataTables_length label,
body.dark-mode .dataTables_filter label,
body.dark-mode .dataTables_processing {
    color: #d1d5db !important;
}
/* BUG REAL CORREGIDO: el buscador y el "Show N rows" de DataTables no
   siempre traen la clase .form-control (depende de la integración
   bs4 de cada tabla), así que la regla genérica de .form-control de más
   abajo no los alcanzaba y quedaban blancos en medio de un panel oscuro. */
body.dark-mode .dataTables_filter input,
body.dark-mode .dataTables_length select {
    background-color: #111C33 !important;
    color: #d1d5db !important;
    border: 1px solid #1E293B !important;
}

/* Forms */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode select.form-control,
body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]),
body.dark-mode select,
body.dark-mode textarea {
    background-color: #111C33 !important;
    color: #d1d5db !important;
    border-color: #1E293B !important;
}
body.dark-mode .form-control::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #64748B !important;
}
/* Los <option> heredan del <select>, pero algunos navegadores los pintan
   blancos igual si no se fuerza -- ej. venta_boleta.php usa .form-select
   (Bootstrap 5) en vez de .form-control (Bootstrap 4), mezcla ya existente
   en el proyecto. */
body.dark-mode select option {
    background-color: #111C33;
    color: #d1d5db;
}

body.dark-mode .form-control:focus {
    background-color: #16233D !important;
}

body.dark-mode .select2-selection--single {
    background-color: #111C33 !important;
}

body.dark-mode .select2-selection__rendered {
    color: #d1d5db !important;
}

body.dark-mode .select2-dropdown {
    background-color: #0F172A !important;
}

body.dark-mode .select2-results__option {
    color: #d1d5db !important;
}

body.dark-mode .select2-results__option--highlighted {
    background-color: #1E293B !important;
}

body.dark-mode .input-group-text {
    background-color: #111C33 !important;
    border-color: #1E293B !important;
    color: #d1d5db !important;
}
/* BUG REAL CORREGIDO: sin !important, esta regla perdía contra el CSS
   base de Bootstrap para .input-group-text (ej. el ícono de lupa junto a
   Nro Documento y el de calendario junto a Fecha Emisión en venta_boleta.php),
   que quedaban con su fondo gris claro original en medio del formulario
   oscuro. */

/* BUG REAL CORREGIDO: "Montos en Soles (S/)" (#alerta_moneda_activa en
   venta_boleta.php) trae un fondo claro directo en el atributo style="..."
   del HTML -- un estilo inline solo pierde contra reglas con !important,
   así que hace falta apuntar al id específico. */
body.dark-mode #alerta_moneda_activa {
    background-color: #111C33 !important;
    color: #93C5FD !important;
}

/* Toggle Switch Icon */
body.dark-mode #dark-mode-toggle i.fa-moon {
    display: none;
}

body.dark-mode #dark-mode-toggle i.fa-sun {
    display: inline-block;
    color: #ffd700; /* Sun color */
}

body:not(.dark-mode) #dark-mode-toggle i.fa-sun {
    display: none;
}

body:not(.dark-mode) #dark-mode-toggle i.fa-moon {
    display: inline-block;
    color: initial;
}