/* ============================================================
   MAXIMA ERP — Dark Mode Global Overrides
   Cargado DESPUÉS de todos los estilos de componentes para
   que !important aquí gane sobre !important en scoped CSS.
   Paleta: Negro (#111) / Gris oscuro (#1C1C1C / #252525)
   ============================================================ */

/* ─────────────────────────────────────────
   1. UTILIDADES BOOTSTRAP QUE NO CAMBIAN
      automáticamente con data-bs-theme="dark"
   ───────────────────────────────────────── */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--bg-surface) !important;
}
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-body-tertiary {
    background-color: var(--bg-elevated) !important;
}
[data-bs-theme="dark"] .text-dark {
    color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end {
    border-color: var(--border-color) !important;
}

/* ─────────────────────────────────────────
   2. SCROLLBAR
   ───────────────────────────────────────── */
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3A3A3A;
}
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #4A4A4A;
}

/* ─────────────────────────────────────────
   3. APP LOADER (inline style no puede
      sobreescribirse con CSS, se maneja con JS)
   ───────────────────────────────────────── */
[data-bs-theme="dark"] #app-loader .text-muted {
    color: var(--text-secondary) !important;
}

/* ─────────────────────────────────────────
   4. LAYOUT PRINCIPAL (MainLayout)
   ───────────────────────────────────────── */
[data-bs-theme="dark"] .page {
    background-color: var(--bg-body) !important;
}
[data-bs-theme="dark"] .header-bar {
    background-color: var(--bg-surface) !important;
    border-bottom-color: var(--border-color) !important;
}
[data-bs-theme="dark"] .sidebar {
    background-color: var(--bg-surface) !important;
    border-right-color: var(--border-color) !important;
}
[data-bs-theme="dark"] .main-content-area {
    background-color: var(--bg-body) !important;
}

/* ─────────────────────────────────────────
   5. CONTENEDORES DASHBOARD (Products, Home, Users)
      Estos tienen background-color: #ffffff hardcodeado
   ───────────────────────────────────────── */
[data-bs-theme="dark"] .dashboard-container {
    background-color: var(--bg-body) !important;
    color: var(--text-primary) !important;
}

/* ─────────────────────────────────────────
   6. TARJETAS / CARDS
   ───────────────────────────────────────── */
[data-bs-theme="dark"] .white-card {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
[data-bs-theme="dark"] .dark-card {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .card {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .card-body {
    background-color: var(--bg-surface) !important;
}

/* ─────────────────────────────────────────
   7. TIPOGRAFÍA
   ───────────────────────────────────────── */
[data-bs-theme="dark"] .card-title-dark {
    color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .section-title-thin {
    color: var(--text-secondary) !important;
}
[data-bs-theme="dark"] .section-header {
    color: var(--text-secondary) !important;
}
[data-bs-theme="dark"] .stat-label {
    color: var(--text-secondary) !important;
}

/* ─────────────────────────────────────────
   8. TABLAS
      thead tiene !important hardcodeado en scoped CSS.
      Este archivo carga después, así que gana.
   ───────────────────────────────────────── */
[data-bs-theme="dark"] thead,
[data-bs-theme="dark"] thead th {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
[data-bs-theme="dark"] .custom-table th {
    background-color: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}
[data-bs-theme="dark"] .table-hover tbody tr:hover,
[data-bs-theme="dark"] .table tbody tr:hover {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .table td,
[data-bs-theme="dark"] .table th {
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* ─────────────────────────────────────────
   9. FORMULARIOS E INPUTS
   ───────────────────────────────────────── */
[data-bs-theme="dark"] .bg-gray-input {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .filter-input {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .role-select {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--bg-elevated) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important;
}
[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--text-secondary) !important;
}
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* ─────────────────────────────────────────
   10. SEARCH CONTAINER
   ───────────────────────────────────────── */
[data-bs-theme="dark"] .search-container {
    border-color: var(--border-color) !important;
    background-color: var(--bg-elevated) !important;
}

/* ─────────────────────────────────────────
   11. PANEL DE ALERTAS (Products.razor)
   ───────────────────────────────────────── */
[data-bs-theme="dark"] .alert-item-row {
    border-bottom-color: var(--border-color) !important;
}
[data-bs-theme="dark"] .alert-text {
    color: var(--text-secondary) !important;
}
[data-bs-theme="dark"] .btn-manage-pill {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
[data-bs-theme="dark"] .btn-manage-pill:hover {
    background-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .section-header-dark {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}

/* ─────────────────────────────────────────
   12. TASK CENTER / HOME (TaskCenter.razor)
   ───────────────────────────────────────── */
[data-bs-theme="dark"] .task-item:hover {
    background-color: var(--bg-elevated) !important;
}
[data-bs-theme="dark"] .task-item.active-task {
    background-color: rgba(79, 70, 229, 0.15) !important;
    border-left-color: var(--primary-color) !important;
}
[data-bs-theme="dark"] .chat-area {
    background-color: var(--bg-surface) !important;
}

/* ─────────────────────────────────────────
   13. AVATARS
   ───────────────────────────────────────── */
[data-bs-theme="dark"] .avatar-circle {
    background-color: var(--primary-light) !important;
    border-color: var(--border-color) !important;
}

/* ─────────────────────────────────────────
   14. BOTONES
   ───────────────────────────────────────── */
[data-bs-theme="dark"] .btn-light {
    background-color: var(--bg-elevated) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .btn-outline-secondary {
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
[data-bs-theme="dark"] .btn-icon-circle:hover {
    background-color: var(--bg-elevated) !important;
}

/* ─────────────────────────────────────────
   15. MODALES
   ───────────────────────────────────────── */
[data-bs-theme="dark"] .modal-content {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .modal-header {
    border-bottom-color: var(--border-color) !important;
}
[data-bs-theme="dark"] .modal-footer {
    border-top-color: var(--border-color) !important;
}
[data-bs-theme="dark"] .offcanvas {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .offcanvas-header {
    border-bottom-color: var(--border-color) !important;
}

/* ─────────────────────────────────────────
   16. DROPDOWNS
   ───────────────────────────────────────── */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}
[data-bs-theme="dark"] .dropdown-item {
    color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .dropdown-divider {
    border-color: var(--border-color) !important;
}

/* ─────────────────────────────────────────
   17. LISTAS Y NAV
   ───────────────────────────────────────── */
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .list-group-item:hover {
    background-color: var(--bg-elevated) !important;
}
[data-bs-theme="dark"] .nav-tabs {
    border-color: var(--border-color) !important;
}
[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary) !important;
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) var(--border-color) var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

/* ─────────────────────────────────────────
   18. BADGES Y STATUS PILLS
   ───────────────────────────────────────── */
[data-bs-theme="dark"] .badge.bg-light {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
}

/* ─────────────────────────────────────────
   19. SEPARADORES (hr, border-secondary)
   ───────────────────────────────────────── */
[data-bs-theme="dark"] hr {
    border-color: var(--border-color) !important;
    opacity: 1 !important;
}

/* ─────────────────────────────────────────
   20. TRANSICIÓN SUAVE AL CAMBIAR TEMA
   ───────────────────────────────────────── */
html {
    transition: background-color var(--transition-base), color var(--transition-base);
}
body,
.sidebar,
.header-bar,
.card,
.white-card,
.modal-content,
.form-control,
.form-select,
.dashboard-container {
    transition: background-color var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base);
}