/**
 * Estilos de Modo Oscuro para el Panel de Laravel (SB-Admin-Pro)
 *
 * Versión final con corrección específica para tablas con clase .table-light.
 * Se mantiene `!important` para garantizar la sobreescritura de los estilos de la plantilla.
 */

/* 1. Definición de la paleta de colores como variables CSS */
body.dark-mode {
    --color-background: #0f172a;      /* Azul muy oscuro para el fondo general */
    --color-surface: #1e293b;         /* Azul-gris para superficies como cards, navbars */
    --color-surface-light: #334155;    /* Un tono más claro para hover, headers */
    --color-border: #4a5568;
    --color-text-primary: #f8fafc;     /* Blanco para textos principales */
    --color-text-secondary: #cbd5e1;   /* Gris claro para textos secundarios */
    --color-text-muted: #94a3b8;
    --color-primary: #b0cd33;         /* Verde/Lima principal para la marca */
    --color-primary-dark: #9ab82e;
    --color-primary-light: #c8e647;
    --color-hover-bg: rgba(176, 205, 51, 0.15); /* Efecto hover verde transparente */
}

/* 2. Estilos Generales */
body.dark-mode {
    background-color: var(--color-background) !important;
    color: var(--color-text-primary) !important;
}
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 li, body.dark-mode div,
body.dark-mode label {
    color: var(--color-text-primary) !important;
}
body.dark-mode a {
    color: var(--color-primary-light) !important;
}
body.dark-mode a:hover {
    color: var(--color-primary) !important;
}
body.dark-mode hr {
    border-top-color: var(--color-border) !important;
}
body.dark-mode .text-muted {
    color: var(--color-text-muted) !important;
}
body.dark-mode .text-gray-300,
body.dark-mode .text-gray-500,
body.dark-mode .text-gray-600 {
    color: var(--color-text-muted) !important;
}

/* 3. Layout (Navbar, Sidenav, Footer) */
body.dark-mode .topnav, body.dark-mode .sidenav-light {
    background-color: var(--color-surface) !important;
}
body.dark-mode .sidenav-light {
    border-right: 1px solid var(--color-border);
}
body.dark-mode .sidenav .nav-link, body.dark-mode .sidenav-menu-heading {
    color: var(--color-text-secondary) !important;
}
body.dark-mode .sidenav .nav-link:hover {
    color: var(--color-primary-light) !important;
    background-color: var(--color-hover-bg) !important;
}
body.dark-mode .nav-link.active {
    color: var(--color-primary-light) !important;
    background-color: var(--color-hover-bg) !important;
}
body.dark-mode .footer-light, body.dark-mode .footer-admin {
    background-color: var(--color-surface) !important;
    color: var(--color-text-muted) !important;
    border-top: 1px solid var(--color-border);
}

/* 4. Componentes (Cards, Modals, Dropdowns) */
body.dark-mode .card {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text-primary) !important;
}
body.dark-mode .card-header, body.dark-mode .card-footer {
    background-color: transparent !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}
body.dark-mode .modal-content {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}
body.dark-mode .modal-header, body.dark-mode .modal-footer {
    border-color: var(--color-border) !important;
}
body.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}
body.dark-mode .dropdown-menu {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}
body.dark-mode .dropdown-item {
    color: var(--color-text-secondary) !important;
}
body.dark-mode .dropdown-item:hover, body.dark-mode .dropdown-item:focus {
    color: var(--color-text-primary) !important;
    background-color: var(--color-hover-bg) !important;
}
body.dark-mode .dropdown-divider {
    border-top-color: var(--color-border) !important;
}
body.dark-mode .breadcrumb {
    background-color: transparent !important;
}
body.dark-mode .breadcrumb-item a {
    color: var(--color-primary-light) !important;
}
body.dark-mode .breadcrumb-item.active {
    color: var(--color-text-muted) !important;
}
body.dark-mode .breadcrumb-item+.breadcrumb-item::before {
    color: var(--color-text-muted) !important;
}
body.dark-mode .badge.bg-secondary {
    background-color: var(--color-surface-light) !important;
    color: var(--color-text-secondary) !important;
}
body.dark-mode .badge.bg-info {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #8ec3ff !important;
}

/* 5. Formularios e Inputs */
body.dark-mode .form-control, body.dark-mode .form-select {
    background-color: var(--color-background) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}
body.dark-mode .form-control:focus, body.dark-mode .form-select:focus {
    background-color: var(--color-background) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-text-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(176, 205, 51, 0.25) !important;
}
body.dark-mode .form-control::placeholder {
    color: var(--color-text-muted);
}
body.dark-mode .input-group.input-group-solid, body.dark-mode .input-group.input-group-joined {
    background-color: var(--color-background) !important;
    border: 1px solid var(--color-border) !important;
}
body.dark-mode .input-group.input-group-solid .form-control, body.dark-mode .input-group.input-group-joined .form-control,
body.dark-mode .input-group.input-group-solid .input-group-text, body.dark-mode .input-group.input-group-joined .input-group-text {
    background-color: transparent !important;
    border: none !important;
    color: var(--color-text-secondary) !important;
}
body.dark-mode #searchResults {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
}
body.dark-mode .form-check-input {
    background-color: var(--color-surface-light) !important;
    border-color: var(--color-border) !important;
}
body.dark-mode .form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary-dark) !important;
}

/* 6. Alertas */
body.dark-mode .alert { border: none !important; }
body.dark-mode .alert-primary, body.dark-mode .alert-info {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #9ac8ff !important;
}
body.dark-mode .alert-success {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #3ddda5 !important;
}
body.dark-mode .alert-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #ff8080 !important;
}
body.dark-mode .alert-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: #ffc966 !important;
}

/* 7. Botones */
body.dark-mode .btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-background) !important;
    font-weight: bold;
}
body.dark-mode .btn-primary:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}
body.dark-mode .btn-secondary {
    background-color: var(--color-surface-light) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}
body.dark-mode .btn-secondary:hover {
    background-color: var(--color-border) !important;
    color: var(--color-primary-light) !important;
}
body.dark-mode .btn-outline-primary {
    color: var(--color-primary-light) !important;
    border-color: var(--color-primary) !important;
}
body.dark-mode .btn-outline-primary:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-background) !important;
}

/* 8. Tablas (VERSIÓN CORREGIDA) */
body.dark-mode .table {
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
}

/* Encabezado: CORRECCIÓN CLAVE para sobreescribir .table-light */
body.dark-mode .table thead.table-light th,
body.dark-mode .table > thead > tr > th {
    background-color: var(--color-surface-light) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
}

/* Cuerpo de la tabla */
body.dark-mode .table tbody tr,
body.dark-mode .table tbody td {
    background-color: var(--color-surface) !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
}

/* Efecto hover */
body.dark-mode .table-hover tbody tr:hover td,
body.dark-mode .table-hover tbody tr:hover th {
    background-color: var(--color-hover-bg) !important;
    color: var(--color-text-primary) !important;
}

/* 9. Paginación */
body.dark-mode .pagination .page-link {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-secondary) !important;
}
body.dark-mode .pagination .page-item.disabled .page-link {
    background-color: var(--color-surface) !important;
    color: var(--color-text-muted) !important;
    opacity: 0.5;
}
body.dark-mode .pagination .page-item .page-link:hover {
    background-color: var(--color-surface-light) !important;
    color: var(--color-primary-light) !important;
}
body.dark-mode .pagination .page-item.active .page-link {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-background) !important;
    font-weight: bold;
}

/* 10. List Group */
body.dark-mode .list-group-item {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-secondary) !important;
}

/* 11. Iconos */
body.dark-mode svg {
    color: var(--color-text-secondary);
}
body.dark-mode i.fas, body.dark-mode i.far, body.dark-mode i.fab {
    color: var(--color-text-secondary);
}

/* 12. Contenedores con fondo claro */
body.dark-mode .bg-light {
    background-color: var(--color-surface) !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
    box-shadow: none;
}
body.dark-mode .bg-light .btn-primary {
    color: var(--color-background) !important;
}