/*=============================================
MODO OSCURO — COMPLEMENTO ESPECÍFICO DE ZIREX
=============================================
Este archivo NO reemplaza a dark-theme.css (que ya venía incluido con la
plantilla base y cubre sidebar, header, cards, tablas, formularios,
dropdowns, select2, modales, etc.). Aquí solo se añade lo que ese archivo
original no cubría: SweetAlert2, DataTables, algunas utilidades de
texto/fondo usadas directamente en las vistas de ZIREX, el panel de
alertas de stock, gráficos y el propio botón de cambio de tema.

Todo está bajo el selector "html.dark-theme", igual que el archivo base,
así que en modo claro (sin esa clase) nada de este archivo tiene efecto.
Es puramente visual: no toca datos, cálculos, consultas ni lógica.
=============================================*/

/* Controles nativos del navegador (scrollbar, selects, etc.) en Chrome/Edge */
html.dark-theme {
    color-scheme: dark;
}

/*=============================================
UTILIDADES DE TEXTO/FONDO USADAS DIRECTAMENTE EN LAS VISTAS
(la plantilla base no las cubría)
=============================================*/
html.dark-theme .text-dark {
    color: #e4e5e6 !important;
}
html.dark-theme .bg-white {
    background-color: #171717 !important;
}
html.dark-theme .bg-light {
    background-color: rgb(255 255 255 / 8%) !important;
}

/*=============================================
SWEETALERT2 — usado en confirmaciones y alertas de TODOS los módulos
=============================================*/
html.dark-theme .swal2-popup {
    background-color: #1e1e1e !important;
    color: #e4e5e6 !important;
}
html.dark-theme .swal2-title,
html.dark-theme .swal2-html-container,
html.dark-theme .swal2-content {
    color: #e4e5e6 !important;
}
html.dark-theme .swal2-close {
    color: #e4e5e6 !important;
}
html.dark-theme .swal2-input,
html.dark-theme .swal2-textarea,
html.dark-theme .swal2-select {
    background-color: #1e1e1e !important;
    color: #e4e5e6 !important;
    border: 1px solid rgb(255 255 255 / 34%) !important;
}
html.dark-theme .swal2-icon.swal2-question {
    border-color: #9ba7b2;
    color: #9ba7b2;
}
html.dark-theme .swal2-timer-progress-bar {
    background: rgb(255 255 255 / 40%) !important;
}

/*=============================================
DATATABLES — red de seguridad además de lo que .form-control/.form-select
ya heredan del archivo base (búsqueda, longitud, info, paginación, botones)
=============================================*/
html.dark-theme .dataTables_wrapper .dataTables_info,
html.dark-theme .dataTables_wrapper .dataTables_length,
html.dark-theme .dataTables_wrapper .dataTables_filter,
html.dark-theme .dataTables_wrapper .dataTables_paginate {
    color: #e4e5e6;
}
html.dark-theme table.dataTable > tbody > tr {
    background-color: transparent;
}
html.dark-theme div.dt-buttons .btn {
    color: #e4e5e6;
}

/*=============================================
PANEL DE ALERTAS DE STOCK EN EL HEADER (fondo con gradiente en línea)
=============================================*/
html.dark-theme #dropdownStockAlerts .msg-header {
    background: linear-gradient(135deg, #1e1e1e, #171717) !important;
}
html.dark-theme #dropdownStockAlerts .msg-footer {
    background-color: #1e1e1e !important;
}

/*=============================================
GRÁFICOS (ApexCharts) — solo texto/tooltip/menú, no los colores de las series
=============================================*/
html.dark-theme .apexcharts-tooltip {
    background: #1e1e1e !important;
    color: #e4e5e6 !important;
    border: 1px solid rgb(255 255 255 / 20%) !important;
}
html.dark-theme .apexcharts-tooltip-title {
    background: #171717 !important;
    color: #e4e5e6 !important;
    border-bottom: 1px solid rgb(255 255 255 / 12%) !important;
}
html.dark-theme .apexcharts-menu {
    background: #1e1e1e !important;
    border: 1px solid rgb(255 255 255 / 20%) !important;
    color: #e4e5e6 !important;
}
html.dark-theme .apexcharts-menu-item:hover {
    background: rgb(255 255 255 / 10%) !important;
}
html.dark-theme .apexcharts-gridline {
    stroke: rgb(255 255 255 / 8%);
}
html.dark-theme .apexcharts-legend-text {
    color: #c0c8d1 !important;
}

/*=============================================
BOTÓN DE CAMBIO DE TEMA (mismo estilo que el botón de información del
header; en modo claro conserva el color azul original, en modo oscuro
cambia a un tono cálido para diferenciarse)
=============================================*/
html.dark-theme #btnToggleTema {
    background: rgba(255, 193, 7, 0.12) !important;
    border-color: rgba(255, 193, 7, 0.25) !important;
    color: #ffc107 !important;
}
html.dark-theme #btnToggleTema:hover {
    background: rgba(255, 193, 7, 0.2) !important;
}

/*=============================================
SELECT2 DE #filtroCategoriaPOS (POS de Ventas) — dark-theme.css apunta a
".select2-container--bootstrap4", pero este proyecto usa theme:'bootstrap-5',
por lo que esas reglas nunca aplican y el texto queda oscuro sobre fondo
oscuro. Acotado por ID (adjacent sibling / id de resultados que Select2
genera a partir de "filtroCategoriaPOS") para NO afectar otros Select2 del
sistema (proveedores en Compras, clientes en Cotizaciones, etc.)
=============================================*/
html.dark-theme #filtroCategoriaPOS + .select2-container .select2-selection {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
}
html.dark-theme #filtroCategoriaPOS + .select2-container .select2-selection__rendered {
    color: #e3dfdf !important;
}
html.dark-theme #filtroCategoriaPOS + .select2-container .select2-selection__placeholder {
    color: #adb5bd !important;
}
html.dark-theme #filtroCategoriaPOS + .select2-container .select2-selection--single {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}
html.dark-theme .select2-dropdown:has(#select2-filtroCategoriaPOS-results) .select2-search__field {
    background-color: #171717 !important;
    border-color: rgb(255 255 255 / 35%) !important;
    color: #e3dfdf !important;
}
html.dark-theme .select2-dropdown:has(#select2-filtroCategoriaPOS-results) .select2-search__field::placeholder {
    color: #adb5bd !important;
    opacity: 1 !important;
}
html.dark-theme #select2-filtroCategoriaPOS-results .select2-results__option:not(.select2-results__option--selected) {
    color: #e3dfdf !important;
}
html.dark-theme #select2-filtroCategoriaPOS-results .select2-results__option--highlighted:not(.select2-results__option--selected) {
    background-color: rgb(255 255 255 / 14%) !important;
    color: #fff !important;
}