/* ==========================================================================
   Dark Mode Overrides - ERP
   Todas las reglas están bajo html.dark-mode para que solo apliquen cuando
   la clase está presente. Este archivo se carga siempre pero no tiene efecto
   visual en modo claro.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables / Color Palette Reference:
   - Body bg:           #1a1d23
   - Surface (cards):   #22262e
   - Elevated (modals): #2a2e38
   - Input bg:          #2a2e38
   - Borders:           #3a3f4b
   - Text primary:      #e0e0e0
   - Text secondary:    #a0a0a0
   - Table stripe:      #252930
   - Table hover:       #2e333b
   -------------------------------------------------------------------------- */

/* ==========================================================================
   1. Body & Layout
   ========================================================================== */

html.dark-mode body {
    background-color: #1a1d23;
    color: #e0e0e0;
}

html.dark-mode .main {
    background-color: #1a1d23;
}

html.dark-mode .content {
    background-color: transparent;
}

html.dark-mode .footer {
    background-color: #1a1d23;
    border-top: 1px solid #3a3f4b;
    color: #a0a0a0;
}

html.dark-mode .footer .text-muted {
    color: #808080 !important;
}

/* Wrapper top bar y sidebar brand.
   Usa !important para ganar sobre modern.css.
   Si hay ColorTema configurado, themeColor.js inyecta un <style> inline
   DESPUÉS de este archivo, y su !important gana por orden de cascada. */
html.dark-mode .wrapper:before {
    background: #13161b !important;
}

html.dark-mode .sidebar-brand,
html.dark-mode .sidebar-brand:hover {
    background: #13161b !important;
}

/* ==========================================================================
   2. Sidebar
   ========================================================================== */

html.dark-mode .sidebar-content {
    background: #1e2128;
}

html.dark-mode .sidebar-nav {
    background: #1e2128;
}

html.dark-mode .sidebar-user {
    background: #1e2128;
    color: #e0e0e0;
}

html.dark-mode .sidebar-link,
html.dark-mode a.sidebar-link {
    color: #b0b8c8;
}

html.dark-mode .sidebar-link:hover,
html.dark-mode a.sidebar-link:hover {
    color: #ffffff;
    background: #282c34;
}

html.dark-mode .sidebar-link.active,
html.dark-mode .sidebar-item.active > .sidebar-link {
    color: #ffffff;
    background: #282c34;
}

html.dark-mode .sidebar-link svg,
html.dark-mode .sidebar-link .fas,
html.dark-mode .sidebar-link .far,
html.dark-mode .sidebar-link .fal,
html.dark-mode .sidebar-link .fab {
    color: #8090a8;
}

html.dark-mode .sidebar-link:hover svg,
html.dark-mode .sidebar-link:hover .fas,
html.dark-mode .sidebar-link:hover .far {
    color: #c0c8d8;
}

html.dark-mode .sidebar-item.active > .sidebar-link svg,
html.dark-mode .sidebar-item.active > .sidebar-link .fas,
html.dark-mode .sidebar-item.active > .sidebar-link .far {
    color: #c0c8d8;
}

/* Sidebar children (sub-menu: "Facturas por Cobrar", "Recibos", etc.) */
html.dark-mode .sidebar-dropdown .sidebar-link {
    color: #9098a8;
    background: #1e2128;
}

html.dark-mode .sidebar-dropdown .sidebar-item .sidebar-link:hover {
    color: #ffffff;
    background: #282c34;
}

html.dark-mode .sidebar-dropdown .sidebar-item.active .sidebar-link {
    color: #ffffff;
    background: #282c34;
}

html.dark-mode .sidebar-header {
    color: #6a7080;
}

html.dark-mode .sidebar-bottom {
    background: #1a1d23;
    border-top: 1px solid #3a3f4b;
}

/* ==========================================================================
   3. Cards
   ========================================================================== */

html.dark-mode .card {
    background-color: #22262e;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    color: #e0e0e0;
}

html.dark-mode .card-header {
    background-color: #22262e;
    border-bottom: 1px solid #3a3f4b;
    color: #e0e0e0;
}

html.dark-mode .card-footer {
    background-color: #22262e;
    border-top: 1px solid #3a3f4b;
}

html.dark-mode .card-title {
    color: #e0e0e0;
}

/* ==========================================================================
   4. Tables
   ========================================================================== */

html.dark-mode .table {
    color: #e0e0e0;
    --bs-table-bg: #22262e;
    --bs-table-border-color: #3a3f4b;
    --bs-table-striped-bg: #252930;
    --bs-table-hover-bg: #2e333b;
    --bs-table-active-bg: #2e333b;
    --bs-border-color: #3a3f4b;
    border-color: #3a3f4b;
}

html.dark-mode .table * {
    border-color: #3a3f4b !important;
}

html.dark-mode .table thead th {
    background-color: #1e2128;
    border-bottom-color: #3a3f4b;
    color: #c0c8d8;
}

html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: #252930;
    color: #e0e0e0;
}

html.dark-mode .table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: #2e333b;
    color: #e0e0e0;
}

/* Mantener rojo visible para registros anulados */
html.dark-mode .table-danger,
html.dark-mode .table-danger > td,
html.dark-mode .table-danger > th {
    --bs-table-bg: #3b1a20 !important;
    --bs-table-striped-bg: #3b1a20 !important;
    --bs-table-hover-bg: #452028 !important;
    --bs-table-active-bg: #452028 !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-border-color: #5a2a32 !important;
    background-color: #3b1a20 !important;
    box-shadow: none !important;
    color: #e8a0a5 !important;
}

html.dark-mode .table-success,
html.dark-mode .table-success > td,
html.dark-mode .table-success > th {
    --bs-table-bg: #1a3328;
    color: #90d8a8;
}

html.dark-mode .table-warning,
html.dark-mode .table-warning > td,
html.dark-mode .table-warning > th {
    --bs-table-bg: #3d3520;
    color: #f0d890;
}

html.dark-mode .table-info,
html.dark-mode .table-info > td,
html.dark-mode .table-info > th {
    --bs-table-bg: #1a2d38;
    color: #90c8e0;
}

html.dark-mode .table td,
html.dark-mode .table th {
    border-color: #3a3f4b;
}

/* Document table (facturación) */
html.dark-mode .document-table thead th {
    background-color: #1e2128;
}

html.dark-mode .table-bordered {
    border-color: #3a3f4b !important;
}

html.dark-mode .table-bordered > :not(caption) > * > * {
    border-color: #3a3f4b !important;
}

html.dark-mode .table-bordered td,
html.dark-mode .table-bordered th {
    border-color: #3a3f4b !important;
}

html.dark-mode .table > :not(caption) > * > * {
    border-bottom-color: #3a3f4b !important;
}

/* ==========================================================================
   5. DataTables
   ========================================================================== */

html.dark-mode .dataTables_wrapper .dataTables_length,
html.dark-mode .dataTables_wrapper .dataTables_filter,
html.dark-mode .dataTables_wrapper .dataTables_info,
html.dark-mode .dataTables_wrapper .dataTables_processing,
html.dark-mode .dataTables_wrapper .dataTables_paginate {
    color: #a0a0a0;
}

html.dark-mode .dataTables_wrapper .dataTables_filter input,
html.dark-mode .dataTables_wrapper .dataTables_length select {
    background-color: #2a2e38;
    border-color: #3a3f4b;
    color: #e0e0e0;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #a0a0a0 !important;
    background-color: #22262e;
    border-color: #3a3f4b;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #ffffff !important;
    background: #2e333b !important;
    border-color: #4a4f5b !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #ffffff !important;
    background: #3B7DDD !important;
    border-color: #3B7DDD !important;
}

html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
html.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #555 !important;
    background-color: #1e2128 !important;
    border-color: #3a3f4b !important;
}

html.dark-mode table.dataTable.no-footer {
    border-bottom-color: #3a3f4b;
}

html.dark-mode .dataTables_scrollHead,
html.dark-mode .dataTables_scrollHead table {
    background-color: #1e2128 !important;
}

html.dark-mode .dataTables_scrollBody {
    border-color: #3a3f4b;
}

/* ==========================================================================
   6. Forms & Inputs
   ========================================================================== */

html.dark-mode .form-control {
    background-color: #2a2e38;
    border-color: #3a3f4b;
    color: #e0e0e0;
}

/* Force dark background on ALL inputs including those inside tables/modals */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
    background-color: #2a2e38 !important;
    border-color: #3a3f4b !important;
    color: #e0e0e0 !important;
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
    background-color: #2e333b !important;
    border-color: #5080c0 !important;
    color: #e0e0e0 !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: #6a7080 !important;
}

html.dark-mode input:disabled,
html.dark-mode textarea:disabled,
html.dark-mode select:disabled {
    background-color: #1e2128 !important;
    color: #808080 !important;
}

/* Readonly inputs should be more readable - they show important data like totals */
html.dark-mode input[readonly],
html.dark-mode textarea[readonly] {
    background-color: #1e2128 !important;
    color: #c0c8d8 !important;
}

/* Exclude checkboxes and radios from the background override */
html.dark-mode input[type="checkbox"],
html.dark-mode input[type="radio"] {
    background-color: #2a2e38 !important;
}

html.dark-mode input[type="checkbox"]:checked,
html.dark-mode input[type="radio"]:checked {
    background-color: #3B7DDD !important;
}

/* Color picker inputs should keep their native style */
html.dark-mode input[type="color"] {
    background-color: transparent !important;
}

html.dark-mode .form-control:focus {
    background-color: #2e333b;
    border-color: #5080c0;
    color: #e0e0e0;
    box-shadow: 0 0 0 0.2rem rgba(59, 125, 221, 0.25);
}

html.dark-mode .form-control::placeholder {
    color: #6a7080;
}

html.dark-mode .form-control:disabled,
html.dark-mode .form-control[readonly] {
    background-color: #1e2128;
    color: #808080;
}

html.dark-mode .form-select {
    background-color: #2a2e38;
    border-color: #3a3f4b;
    color: #e0e0e0;
}

html.dark-mode .form-select:focus {
    background-color: #2e333b;
    border-color: #5080c0;
    color: #e0e0e0;
}

/* Fix dropdown arrow color (Bootstrap uses dark SVG by default) */
html.dark-mode .form-select {
    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='%23a0a0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

html.dark-mode .form-select:disabled {
    background-color: #1e2128;
    color: #808080;
}

html.dark-mode .input-group-text {
    background-color: #1e2128;
    border-color: #3a3f4b;
    color: #a0a0a0;
}

html.dark-mode .form-check-input {
    background-color: #2a2e38;
    border-color: #4a4f5b;
}

html.dark-mode .form-check-input:checked {
    background-color: #3B7DDD;
    border-color: #3B7DDD;
}

html.dark-mode .form-check-label {
    color: #e0e0e0;
}

html.dark-mode .form-label,
html.dark-mode label {
    color: #c0c8d8;
}

html.dark-mode .form-floating > label {
    color: #808890;
}

html.dark-mode .form-text {
    color: #808080;
}

/* ==========================================================================
   7. Select2
   ========================================================================== */

html.dark-mode .select2-container--default .select2-selection--single,
html.dark-mode .select2-container--default .select2-selection--multiple,
html.dark-mode .select2-container--bootstrap4 .select2-selection {
    background-color: #2a2e38;
    border-color: #3a3f4b;
    color: #e0e0e0;
}

html.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e0e0e0;
}

html.dark-mode .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #6a7080;
}

html.dark-mode .select2-dropdown {
    background-color: #2a2e38;
    border-color: #3a3f4b;
    color: #e0e0e0;
}

html.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #3B7DDD;
    color: #ffffff;
}

html.dark-mode .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #353a44;
}

html.dark-mode .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: #22262e;
    border-color: #3a3f4b;
    color: #e0e0e0;
}

html.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #353a44;
    border-color: #4a4f5b;
    color: #e0e0e0;
}

/* ==========================================================================
   8. Modals
   ========================================================================== */

html.dark-mode .modal-content {
    background-color: #22262e;
    color: #e0e0e0;
}

html.dark-mode .modal-header {
    border-bottom-color: #3a3f4b;
    color: #e0e0e0;
}

html.dark-mode .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

html.dark-mode .modal-footer {
    border-top-color: #3a3f4b;
}

html.dark-mode .modal-title {
    color: #e0e0e0;
}

/* ==========================================================================
   9. Dropdowns
   ========================================================================== */

html.dark-mode .dropdown-menu {
    background-color: #2a2e38;
    border-color: #3a3f4b;
    color: #e0e0e0;
}

html.dark-mode .dropdown-item {
    color: #c0c8d8;
}

html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
    background-color: #353a44;
    color: #ffffff;
}

html.dark-mode .dropdown-item.active,
html.dark-mode .dropdown-item:active {
    background-color: #3B7DDD;
    color: #ffffff;
}

html.dark-mode .dropdown-divider {
    border-top-color: #3a3f4b;
}

/* ==========================================================================
   10. Tabs
   ========================================================================== */

html.dark-mode .nav-tabs {
    border-bottom-color: #3a3f4b;
}

html.dark-mode .nav-tabs .nav-link {
    color: #a0a0a0;
}

html.dark-mode .nav-tabs .nav-link:hover {
    border-color: #3a3f4b #3a3f4b transparent;
    color: #e0e0e0;
}

html.dark-mode .nav-tabs .nav-link.active {
    background-color: #22262e;
    border-color: #3a3f4b #3a3f4b #22262e;
    color: #e0e0e0;
}

html.dark-mode .footer-tabs .nav-link {
    background-color: #1b1f27;
    border-color: #3a3f4b #3a3f4b transparent;
    color: #a0a0a0;
}

html.dark-mode .footer-tabs .nav-link.active {
    background-color: #22262e;
    border-color: #3a3f4b #3a3f4b #22262e;
    color: #e0e0e0;
}

html.dark-mode .footer-tabs .nav-link:hover {
    color: #e0e0e0;
}

html.dark-mode .footer-tabs .btn-close {
    filter: invert(1);
}

html.dark-mode .tab-content {
    background-color: #22262e;
    border-color: #3a3f4b;
}

html.dark-mode .tab-pane {
    color: #e0e0e0;
}

/* ==========================================================================
   11. Nav pills
   ========================================================================== */

html.dark-mode .nav-pills .nav-link {
    color: #a0a0a0;
}

html.dark-mode .nav-pills .nav-link.active {
    background-color: #3B7DDD;
    color: #ffffff;
}

/* ==========================================================================
   12. Breadcrumbs
   ========================================================================== */

html.dark-mode .breadcrumb-item,
html.dark-mode .breadcrumb-item a {
    color: #a0a0a0;
}

html.dark-mode .breadcrumb-item.active {
    color: #e0e0e0;
}

/* ==========================================================================
   13. Alerts
   ========================================================================== */

html.dark-mode .alert-primary {
    background-color: #1a2d48;
    color: #90b8e8;
}

html.dark-mode .alert-secondary {
    background-color: #2a2535;
    color: #b8a0d0;
}

html.dark-mode .alert-success {
    background-color: #1a3328;
    color: #80d0a0;
}

html.dark-mode .alert-danger {
    background-color: #3d1f22;
    color: #f0a0a5;
}

html.dark-mode .alert-warning {
    background-color: #3d3520;
    color: #f0d890;
}

html.dark-mode .alert-info {
    background-color: #1a2d38;
    color: #80c8e0;
}

html.dark-mode .alert-light {
    background-color: #2a2e38;
    color: #c0c8d8;
}

html.dark-mode .alert-dark {
    background-color: #1a1d23;
    color: #a0a0a0;
}

/* ==========================================================================
   14. Badges
   ========================================================================== */

html.dark-mode .badge.bg-light {
    background-color: #353a44 !important;
    color: #e0e0e0;
}

html.dark-mode .badge.bg-secondary {
    background-color: #3a3f4b !important;
    color: #e0e0e0;
}

/* ==========================================================================
   15. List group
   ========================================================================== */

html.dark-mode .list-group-item {
    background-color: #22262e;
    border-color: #3a3f4b;
    color: #e0e0e0;
}

html.dark-mode .list-group-item:hover {
    background-color: #2a2e38;
}

html.dark-mode .list-group-item.active {
    background-color: #3B7DDD;
    border-color: #3B7DDD;
}

/* ==========================================================================
   16. Scrollbars
   ========================================================================== */

html.dark-mode *::-webkit-scrollbar-track {
    background: #1a1d23;
}

html.dark-mode *::-webkit-scrollbar-thumb {
    background-color: #3a3f4b;
    border-color: #1a1d23;
}

html.dark-mode *::-webkit-scrollbar-thumb:hover {
    background-color: #4a5060;
}

/* ==========================================================================
   17. Typography & Text utilities
   ========================================================================== */

html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
html.dark-mode .h1, html.dark-mode .h2, html.dark-mode .h3,
html.dark-mode .h4, html.dark-mode .h5, html.dark-mode .h6 {
    color: #e0e0e0;
}

html.dark-mode .text-muted {
    color: #808080 !important;
}

html.dark-mode .text-dark {
    color: #c0c8d8 !important;
}

html.dark-mode .text-body {
    color: #e0e0e0 !important;
}

html.dark-mode a {
    color: #5a9ae8;
}

html.dark-mode a:hover {
    color: #7ab0f0;
}

/* ==========================================================================
   18. Buttons - mostly keep colors, adjust outlines
   ========================================================================== */

html.dark-mode .btn-light {
    background-color: #353a44;
    border-color: #4a4f5b;
    color: #e0e0e0;
}

html.dark-mode .btn-light:hover {
    background-color: #3a4050;
    border-color: #5a5f6b;
    color: #ffffff;
}

html.dark-mode .btn-outline-secondary {
    border-color: #4a4f5b;
    color: #a0a0a0;
}

html.dark-mode .btn-outline-secondary:hover {
    background-color: #353a44;
    color: #e0e0e0;
}

html.dark-mode .btn-outline-light {
    border-color: #4a4f5b;
    color: #c0c8d8;
}

html.dark-mode .btn-outline-light:hover {
    background-color: #353a44;
    border-color: #5a5f6b;
    color: #ffffff;
}

html.dark-mode .btn-outline-primary {
    color: #5a9ae8;
    border-color: #5a9ae8;
}

html.dark-mode .btn-outline-dark {
    border-color: #4a4f5b;
    color: #c0c8d8;
}

html.dark-mode .btn-outline-dark:hover {
    background-color: #353a44;
    border-color: #5a5f6b;
    color: #ffffff;
}

html.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ==========================================================================
   19. Pagination (standalone)
   ========================================================================== */

html.dark-mode .page-link {
    background-color: #22262e;
    border-color: #3a3f4b;
    color: #a0a0a0;
}

html.dark-mode .page-link:hover {
    background-color: #2e333b;
    border-color: #4a4f5b;
    color: #e0e0e0;
}

html.dark-mode .page-item.active .page-link {
    background-color: #3B7DDD;
    border-color: #3B7DDD;
}

html.dark-mode .page-item.disabled .page-link {
    background-color: #1a1d23;
    border-color: #3a3f4b;
    color: #555;
}

/* ==========================================================================
   20. Toastr (minimal - already uses colored backgrounds)
   ========================================================================== */

html.dark-mode #toast-container > .toast {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   21. Radzen components
   ========================================================================== */

/* Override Radzen CSS variables for dark mode */
html.dark-mode {
    --rz-base-background-color: #2a2e38;
    --rz-input-background-color: #2a2e38;
    --rz-input-border: 1px solid #3a3f4b;
    --rz-input-shadow: none;
    --rz-text-color: #e0e0e0;
    --rz-text-secondary-color: #a0a0a0;
    --rz-dropdown-item-hover-background-color: #353a44;
    --rz-dropdown-item-hover-color: #e0e0e0;
    --rz-dropdown-item-selected-background-color: #3B7DDD;
    --rz-dropdown-item-selected-color: #ffffff;
    --rz-dropdown-item-selected-hover-background-color: #3570c7;
    --rz-dropdown-item-selected-hover-color: #ffffff;
    --rz-dropdown-filter-border: 1px solid #3a3f4b;
    --rz-border-base-100: 1px solid #3a3f4b;
}

html.dark-mode .rz-datepicker .rz-inputtext,
html.dark-mode .rz-dropdown,
html.dark-mode .rz-inputtext {
    background-color: #2a2e38;
    border-color: #3a3f4b;
    color: #e0e0e0;
}

html.dark-mode .rz-panel {
    background-color: #22262e;
    color: #e0e0e0;
}

html.dark-mode .rz-dropdown-panel {
    background-color: #2a2e38;
    border-color: #3a3f4b;
    color: #e0e0e0;
}

html.dark-mode .rz-chkbox-box {
    background-color: #2a2e38;
    border-color: #3a3f4b;
}

html.dark-mode .rz-chkbox-box.rz-state-active {
    background-color: #3B7DDD;
    border-color: #3B7DDD;
}

html.dark-mode .rz-calendar-header,
html.dark-mode .rz-datepicker-calendar {
    background-color: #22262e;
    color: #e0e0e0;
}

html.dark-mode .rz-datepicker-calendar td span:hover {
    background-color: #353a44;
}

html.dark-mode .rz-state-highlight {
    background-color: #3B7DDD;
}

/* ==========================================================================
   21b. ApexCharts
   ========================================================================== */

/* Axis labels - ApexCharts sets fill as inline style attribute on <tspan>,
   so we need !important on every possible element to override inline styles */
html.dark-mode .apexcharts-xaxis-label,
html.dark-mode .apexcharts-yaxis-label,
html.dark-mode .apexcharts-xaxis-label tspan,
html.dark-mode .apexcharts-yaxis-label tspan,
html.dark-mode .apexcharts-xaxis text,
html.dark-mode .apexcharts-yaxis text,
html.dark-mode .apexcharts-xaxis text tspan,
html.dark-mode .apexcharts-yaxis text tspan {
    fill: #a0a0a0 !important;
    color: #a0a0a0 !important;
}

/* Axis title */
html.dark-mode .apexcharts-xaxis-title text,
html.dark-mode .apexcharts-yaxis-title text {
    fill: #a0a0a0 !important;
}

/* Grid lines */
html.dark-mode .apexcharts-gridline {
    stroke: #3a3f4b !important;
}

html.dark-mode .apexcharts-grid-borders line {
    stroke: #3a3f4b !important;
}

/* Axis lines and ticks */
html.dark-mode .apexcharts-xaxis line,
html.dark-mode .apexcharts-yaxis line,
html.dark-mode .apexcharts-xaxis-tick {
    stroke: #3a3f4b !important;
}

/* Tooltip */
html.dark-mode .apexcharts-tooltip {
    background: #2a2e38 !important;
    border-color: #3a3f4b !important;
    color: #e0e0e0 !important;
}

html.dark-mode .apexcharts-tooltip-title {
    background: #22262e !important;
    border-bottom-color: #3a3f4b !important;
    color: #e0e0e0 !important;
}

html.dark-mode .apexcharts-tooltip-text,
html.dark-mode .apexcharts-tooltip-text-y-label,
html.dark-mode .apexcharts-tooltip-text-y-value {
    color: #e0e0e0 !important;
}

/* Legend text */
html.dark-mode .apexcharts-legend-text {
    color: #a0a0a0 !important;
}

/* Chart title/subtitle */
html.dark-mode .apexcharts-title-text {
    fill: #e0e0e0 !important;
}

/* Data labels on bars/columns */
html.dark-mode .apexcharts-datalabel,
html.dark-mode .apexcharts-data-labels text {
    fill: #e0e0e0 !important;
}

/* Pie/Donut chart labels */
html.dark-mode .apexcharts-pie-label {
    fill: #e0e0e0 !important;
}

/* Crosshair */
html.dark-mode .apexcharts-xcrosshairs,
html.dark-mode .apexcharts-ycrosshairs {
    stroke: #4a5060 !important;
}

/* Menu icon (hamburger on charts) */
html.dark-mode .apexcharts-menu-icon svg {
    fill: #a0a0a0 !important;
}

html.dark-mode .apexcharts-menu {
    background: #2a2e38 !important;
    border-color: #3a3f4b !important;
    color: #e0e0e0 !important;
}

html.dark-mode .apexcharts-menu-item:hover {
    background: #353a44 !important;
}

/* Annotation labels */
html.dark-mode .apexcharts-yaxis-annotations text,
html.dark-mode .apexcharts-xaxis-annotations text,
html.dark-mode .apexcharts-point-annotations text {
    fill: #e0e0e0 !important;
}

/* ==========================================================================
   21c. Chart.js
   ========================================================================== */

/* Chart.js renders on <canvas> so CSS can't override colors.
   Chart.js colors are set via JS config. This section is a placeholder
   for any wrapper elements. */

/* ==========================================================================
   22. Accordion
   ========================================================================== */

html.dark-mode .accordion-item {
    background-color: #22262e;
    border-color: #3a3f4b;
    color: #e0e0e0;
}

html.dark-mode .accordion-button {
    background-color: #22262e;
    color: #e0e0e0;
}

html.dark-mode .accordion-button:not(.collapsed) {
    background-color: #2a2e38;
    color: #e0e0e0;
}

html.dark-mode .accordion-button::after {
    filter: invert(1) brightness(200%);
}

/* ==========================================================================
   23. Popover & Tooltip
   ========================================================================== */

html.dark-mode .popover {
    background-color: #2a2e38;
    border-color: #3a3f4b;
}

html.dark-mode .popover-header {
    background-color: #22262e;
    border-bottom-color: #3a3f4b;
    color: #e0e0e0;
}

html.dark-mode .popover-body {
    color: #c0c8d8;
}

/* ==========================================================================
   24. Progress bars
   ========================================================================== */

html.dark-mode .progress {
    background-color: #2a2e38;
}

/* ==========================================================================
   25. Borders & hr
   ========================================================================== */

html.dark-mode hr {
    border-color: #3a3f4b;
    opacity: 0.5;
}

html.dark-mode .border {
    border-color: #3a3f4b !important;
}

html.dark-mode .border-top {
    border-top-color: #3a3f4b !important;
}

html.dark-mode .border-bottom {
    border-bottom-color: #3a3f4b !important;
}

html.dark-mode .border-start {
    border-left-color: #3a3f4b !important;
}

html.dark-mode .border-end {
    border-right-color: #3a3f4b !important;
}

/* ==========================================================================
   26. Backgrounds
   ========================================================================== */

html.dark-mode .bg-white {
    background-color: #22262e !important;
}

html.dark-mode .bg-light {
    background-color: #1e2128 !important;
}

html.dark-mode .bg-body {
    background-color: #1a1d23 !important;
}

/* ==========================================================================
   27. Splash / Login page
   ========================================================================== */

html.dark-mode .splash {
    background: #1a1d23;
}

/* ==========================================================================
   27b. Login page
   ========================================================================== */

html.dark-mode .main.h-100.w-100 {
    background-color: #1a1d23;
}

html.dark-mode .theme-blue {
    background-color: #1a1d23;
}

html.dark-mode .theme-blue .main {
    background-color: #1a1d23;
}

/* Login card */
html.dark-mode .theme-blue .card {
    background-color: #22262e;
}

/* Labels in login form */
html.dark-mode .theme-blue label {
    color: #c0c8d8;
}

/* Login title and subtitle */
html.dark-mode .theme-blue h1,
html.dark-mode .theme-blue .h2 {
    color: #e0e0e0;
}

html.dark-mode .theme-blue .lead {
    color: #a0a0a0;
}

/* Forgot password link */
html.dark-mode .theme-blue small a {
    color: #5a9ae8;
}

/* ==========================================================================
   28. Date Range Picker
   ========================================================================== */

/* Bootstrap Datepicker / Tempus Dominus */
html.dark-mode .bootstrap-datetimepicker-widget {
    background-color: #2a2e38;
    border-color: #3a3f4b;
    color: #e0e0e0;
}

html.dark-mode .bootstrap-datetimepicker-widget table td,
html.dark-mode .bootstrap-datetimepicker-widget table th {
    color: #e0e0e0;
}

html.dark-mode .bootstrap-datetimepicker-widget table td.day:hover,
html.dark-mode .bootstrap-datetimepicker-widget table th:hover {
    background: #353a44;
    color: #ffffff;
}

html.dark-mode .bootstrap-datetimepicker-widget table td.active,
html.dark-mode .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: #3B7DDD;
    color: #ffffff;
}

html.dark-mode .bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: #3B7DDD;
}

/* Days from other months (grayed out) */
html.dark-mode .bootstrap-datetimepicker-widget table td.old,
html.dark-mode .bootstrap-datetimepicker-widget table td.new {
    color: #606878;
}

html.dark-mode .bootstrap-datetimepicker-widget table td.disabled,
html.dark-mode .bootstrap-datetimepicker-widget table td.disabled:hover {
    color: #404858;
}

/* Month/Year header and arrows */
html.dark-mode .bootstrap-datetimepicker-widget table th.picker-switch,
html.dark-mode .bootstrap-datetimepicker-widget table th.prev,
html.dark-mode .bootstrap-datetimepicker-widget table th.next {
    color: #e0e0e0;
}

html.dark-mode .bootstrap-datetimepicker-widget table th.prev:hover,
html.dark-mode .bootstrap-datetimepicker-widget table th.next:hover,
html.dark-mode .bootstrap-datetimepicker-widget table th.picker-switch:hover {
    background: #353a44;
}

/* Day of week headers (LU, MA, MI...) */
html.dark-mode .bootstrap-datetimepicker-widget table th.dow {
    color: #a0a0a0;
}

/* Bottom links (Borrar, Hoy, Cerrar) */
html.dark-mode .bootstrap-datetimepicker-widget table td span,
html.dark-mode .bootstrap-datetimepicker-widget a[data-action] {
    color: #5a9ae8;
}

html.dark-mode .bootstrap-datetimepicker-widget a[data-action]:hover {
    color: #7ab0f0;
}

/* Separator border */
html.dark-mode .bootstrap-datetimepicker-widget .separator {
    border-color: #3a3f4b;
}

/* Time picker */
html.dark-mode .bootstrap-datetimepicker-widget .timepicker-hour,
html.dark-mode .bootstrap-datetimepicker-widget .timepicker-minute,
html.dark-mode .bootstrap-datetimepicker-widget .timepicker-second {
    color: #e0e0e0;
}

html.dark-mode .bootstrap-datetimepicker-widget table td span:hover {
    background: #353a44;
    color: #ffffff;
}

html.dark-mode .daterangepicker {
    background-color: #2a2e38;
    border-color: #3a3f4b;
    color: #e0e0e0;
}

html.dark-mode .daterangepicker .calendar-table {
    background-color: #2a2e38;
    border-color: #3a3f4b;
}

html.dark-mode .daterangepicker td.off,
html.dark-mode .daterangepicker td.off.in-range {
    background-color: #1e2128;
    color: #555;
}

html.dark-mode .daterangepicker td.active,
html.dark-mode .daterangepicker td.active:hover {
    background-color: #3B7DDD;
    color: #ffffff;
}

html.dark-mode .daterangepicker td.in-range {
    background-color: #253050;
    color: #e0e0e0;
}

html.dark-mode .daterangepicker th {
    color: #a0a0a0;
}

html.dark-mode .daterangepicker .drp-buttons {
    border-top-color: #3a3f4b;
}

html.dark-mode .daterangepicker select.monthselect,
html.dark-mode .daterangepicker select.yearselect {
    background-color: #22262e;
    border-color: #3a3f4b;
    color: #e0e0e0;
}

/* ==========================================================================
   29. Custom layout overrides (from layout.scss)
   ========================================================================== */

/* Select with primary border */
html.dark-mode .select-primary {
    border-color: #3B7DDD;
    color: #5a9ae8;
}

/* Spinner already dark overlay - no change needed */

/* ==========================================================================
   30. Navbar (top nav bar)
   ========================================================================== */

html.dark-mode .navbar-theme {
    background-color: #13161b;
    border-bottom: none;
}

/* ==========================================================================
   31. Smart Wizard
   ========================================================================== */

html.dark-mode .sw .tab-content {
    background-color: #22262e;
}

html.dark-mode .sw .nav-link {
    color: #a0a0a0;
}

/* ==========================================================================
   32. Close button for alerts
   ========================================================================== */

html.dark-mode .btn-close-white {
    filter: none;
}

/* ==========================================================================
   33. Images / Logos - subtle adjustment
   ========================================================================== */

html.dark-mode .sidebar-brand img {
    filter: brightness(1.1);
}

/* ==========================================================================
   34. Print - Do NOT apply dark mode to print
   ========================================================================== */

@media print {
    html.dark-mode body {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    html.dark-mode .card {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    html.dark-mode .table {
        color: #000000 !important;
        --bs-table-bg: #ffffff !important;
    }
}