/*
 * ============================================
 *  MODO OSCURO — Lenora 2
 *  Activado por la clase html.dark-mode
 * ============================================
 *  Paleta azulada oscura:
 *    Base:       #1a1a2e
 *    Surface:    #16213e
 *    Card:       #1e2a4a
 *    Card alt:   #243154
 *    Border:     #2e3a5a
 *    Text:       #d1d3e2 (headings), #b8b9cc (body)
 * ============================================
 */

/* --- Variables de referencia --- */
html.dark-mode {
    --dm-bg-base: #1a1a2e;
    --dm-bg-surface: #16213e;
    --dm-bg-card: #1e2a4a;
    --dm-bg-card-alt: #243154;
    --dm-bg-input: #141c30;
    --dm-border: #2e3a5a;
    --dm-border-input: #3a4d6e;
    --dm-text: #b8b9cc;
    --dm-text-heading: #d1d3e2;
    --dm-text-muted: #8a8ca0;
    --dm-link: #6d8fe8;
    --dm-hover: #283a5e;
}

/* ==============================
   BASE / BODY
   ============================== */

html.dark-mode body {
    background-color: var(--dm-bg-base) !important;
    color: var(--dm-text) !important;
}

html.dark-mode #content-wrapper {
    background-color: var(--dm-bg-surface) !important;
}

html.dark-mode #content {
    background-color: var(--dm-bg-surface) !important;
}

/* ==============================
   TOPBAR
   ============================== */

html.dark-mode .topbar,
html.dark-mode .navbar-light {
    background-color: var(--dm-bg-card) !important;
}

html.dark-mode .topbar .nav-link,
html.dark-mode .topbar .text-gray-600 {
    color: var(--dm-text) !important;
}

html.dark-mode .topbar .form-control {
    background-color: var(--dm-bg-input) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .topbar-divider {
    border-color: var(--dm-border) !important;
}

/* ==============================
   FOOTER
   ============================== */

html.dark-mode .sticky-footer {
    background-color: var(--dm-bg-card) !important;
    color: var(--dm-text-muted) !important;
}

html.dark-mode .sticky-footer .copyright span {
    color: var(--dm-text-muted) !important;
}

/* ==============================
   CARDS
   ============================== */

html.dark-mode .card {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .card-header {
    background-color: var(--dm-bg-card-alt) !important;
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .card-footer {
    background-color: var(--dm-bg-card-alt) !important;
    border-top-color: var(--dm-border) !important;
}

html.dark-mode .card-body {
    color: var(--dm-text) !important;
}

/* ==============================
   BG UTILITIES
   ============================== */

html.dark-mode .bg-white {
    background-color: var(--dm-bg-card) !important;
}

html.dark-mode .bg-light {
    background-color: var(--dm-bg-card-alt) !important;
}

html.dark-mode .bg-gray-100 {
    background-color: var(--dm-bg-surface) !important;
}

html.dark-mode .bg-gray-200 {
    background-color: var(--dm-bg-card-alt) !important;
}

/* ==============================
   TEXT UTILITIES
   ============================== */

html.dark-mode .text-dark {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .text-gray-100 {
    color: #d1d3e2 !important;
}

html.dark-mode .text-gray-200 {
    color: #c8cad8 !important;
}

html.dark-mode .text-gray-300 {
    color: #bfc1d0 !important;
}

html.dark-mode .text-gray-400 {
    color: #a5a7b8 !important;
}

html.dark-mode .text-gray-500 {
    color: #9a9cae !important;
}

html.dark-mode .text-gray-600 {
    color: #b8b9cc !important;
}

html.dark-mode .text-gray-700 {
    color: #c5c7d6 !important;
}

html.dark-mode .text-gray-800 {
    color: #d1d3e2 !important;
}

html.dark-mode .text-gray-900 {
    color: #e0e1ec !important;
}

html.dark-mode .text-body {
    color: var(--dm-text) !important;
}

html.dark-mode .text-muted {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .text-black-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

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: var(--dm-text-heading) !important;
}

html.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sidebar-brand):not(.sidebar *) {
    color: var(--dm-link);
}

html.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sidebar-brand):not(.sidebar *):hover {
    color: #8da8f0;
}

/* ==============================
   TABLES
   ============================== */

html.dark-mode .table {
    color: var(--dm-text) !important;
}

html.dark-mode .table th,
html.dark-mode .table td {
    border-color: var(--dm-border) !important;
}

html.dark-mode .table thead th {
    border-bottom-color: var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

html.dark-mode .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .table-bordered {
    border-color: var(--dm-border) !important;
}

html.dark-mode .table-bordered th,
html.dark-mode .table-bordered td {
    border-color: var(--dm-border) !important;
}

/* ==============================
   FORMS
   ============================== */

html.dark-mode .form-control {
    background-color: var(--dm-bg-input) !important;
    border: 1px solid var(--dm-border-input) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .form-control:focus {
    background-color: #192540 !important;
    border-color: #4e73df !important;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .form-control::placeholder {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .form-control:disabled,
html.dark-mode .form-control[readonly] {
    background-color: var(--dm-bg-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
    opacity: 0.7 !important;
}

html.dark-mode .custom-select {
    background-color: var(--dm-bg-input) !important;
    border: 1px solid var(--dm-border-input) !important;
    color: var(--dm-text) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23b8b9cc' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") !important;
}

html.dark-mode .input-group-text {
    background-color: #1a2540 !important;
    border: 1px solid var(--dm-border-input) !important;
    color: var(--dm-text) !important;
}

html.dark-mode select option {
    background-color: var(--dm-bg-input) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .custom-control-label::before {
    background-color: var(--dm-bg-input) !important;
    border-color: var(--dm-border-input) !important;
}

html.dark-mode .custom-switch .custom-control-label::before {
    background-color: var(--dm-bg-input) !important;
    border-color: var(--dm-border-input) !important;
}

html.dark-mode .custom-file-label {
    background-color: var(--dm-bg-input) !important;
    border-color: var(--dm-border-input) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .custom-file-label::after {
    background-color: #1a2540 !important;
    border-left-color: var(--dm-border-input) !important;
    color: var(--dm-text) !important;
}

html.dark-mode textarea.form-control {
    background-color: var(--dm-bg-input) !important;
}

html.dark-mode .form-group label,
html.dark-mode label {
    color: var(--dm-text) !important;
}

/* ==============================
   DROPDOWNS
   ============================== */

html.dark-mode .dropdown-menu {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .dropdown-item {
    color: var(--dm-text) !important;
}

html.dark-mode .dropdown-item:hover,
html.dark-mode .dropdown-item:focus {
    background-color: var(--dm-hover) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .dropdown-item.active,
html.dark-mode .dropdown-item:active {
    background-color: #4e73df !important;
    color: #fff !important;
}

html.dark-mode .dropdown-divider {
    border-top-color: var(--dm-border) !important;
}

html.dark-mode .dropdown-header {
    color: var(--dm-text-muted) !important;
}

/* ==============================
   MODALS
   ============================== */

html.dark-mode .modal-content {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .modal-header {
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .modal-header .close {
    color: var(--dm-text) !important;
    text-shadow: none !important;
}

html.dark-mode .modal-footer {
    border-top-color: var(--dm-border) !important;
}

html.dark-mode .modal-title {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .modal-body {
    color: var(--dm-text) !important;
}

/* ==============================
   ALERTS
   ============================== */

html.dark-mode .alert-light {
    background-color: var(--dm-bg-card-alt) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* ==============================
   BADGES — Dark Mode (modern glass style)
   ============================== */

html.dark-mode .badge {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

html.dark-mode .badge-light {
    background-color: var(--dm-bg-card-alt) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .badge-primary {
    background: #1e3a6e !important;
    color: #a4bcf4 !important;
    border-color: #2a4d8e !important;
}

html.dark-mode .badge-success {
    background: #0f3d2e !important;
    color: #7ee8c0 !important;
    border-color: #18573f !important;
}

html.dark-mode .badge-danger {
    background: #4a1a1a !important;
    color: #f4a8a0 !important;
    border-color: #6b2525 !important;
}

html.dark-mode .badge-warning {
    background: #3d3010 !important;
    color: #f5d978 !important;
    border-color: #564618 !important;
}

html.dark-mode .badge-info {
    background: #133a40 !important;
    color: #7ed6e5 !important;
    border-color: #1c5260 !important;
}

html.dark-mode .badge-secondary {
    background: #2a2c3a !important;
    color: #a8aabe !important;
    border-color: #3a3d50 !important;
}

html.dark-mode .badge-dark {
    background: #1a1c28 !important;
    color: var(--dm-text) !important;
    border-color: #2a2d3e !important;
}

/* Dashboard monitor cards — gradient badges deep dark */
html.dark-mode .badge.bg-gradient-danger {
    background: linear-gradient(180deg, #8b2a2a, #6b1d1d) !important;
    border-color: #943030 !important;
    box-shadow: 0 2px 10px rgba(180, 50, 40, 0.3);
    color: #ffc4bf !important;
}

html.dark-mode .badge.bg-gradient-warning {
    background: linear-gradient(180deg, #6e5412, #523d0a) !important;
    border-color: #7d6118 !important;
    box-shadow: 0 2px 10px rgba(200, 160, 30, 0.3);
    color: #ffe599 !important;
}

html.dark-mode .badge.bg-gradient-info {
    background: linear-gradient(180deg, #1c5060, #143a44) !important;
    border-color: #246878 !important;
    box-shadow: 0 2px 10px rgba(54, 185, 204, 0.25);
    color: #a0e8f0 !important;
}

html.dark-mode .badge.bg-gradient-primary {
    background: linear-gradient(180deg, #243d7a, #1a2e5e) !important;
    border-color: #2e4e96 !important;
    box-shadow: 0 2px 10px rgba(78, 115, 223, 0.25);
    color: #b0c4f5 !important;
}

html.dark-mode .badge.bg-gradient-success {
    background: linear-gradient(180deg, #155a3e, #0d3326) !important;
    border-color: #1a7050 !important;
    box-shadow: 0 2px 10px rgba(28, 200, 138, 0.25);
    color: #8ef0c8 !important;
}

html.dark-mode .badge.bg-gradient-secondary {
    background: linear-gradient(180deg, #333650, #252738) !important;
    border-color: #3e4260 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    color: #b8bacf !important;
}

/* Badge counter (notification dots) */
html.dark-mode .badge-counter {
    box-shadow: 0 0 6px rgba(231, 74, 59, 0.5) !important;
}

/* Badges con clases utilitarias bg-* (usados en tablas, solicitudes, etc.) */
html.dark-mode .badge.bg-primary {
    background-color: #1e3a6e !important;
    color: #a4bcf4 !important;
    border-color: #2a4d8e !important;
}

html.dark-mode .badge.bg-success {
    background-color: #0f3d2e !important;
    color: #7ee8c0 !important;
    border-color: #18573f !important;
}

html.dark-mode .badge.bg-danger {
    background-color: #4a1a1a !important;
    color: #f4a8a0 !important;
    border-color: #6b2525 !important;
}

html.dark-mode .badge.bg-warning {
    background-color: #3d3010 !important;
    color: #f5d978 !important;
    border-color: #564618 !important;
}

html.dark-mode .badge.bg-info {
    background-color: #133a40 !important;
    color: #7ed6e5 !important;
    border-color: #1c5260 !important;
}

html.dark-mode .badge.bg-secondary {
    background-color: #2a2c3a !important;
    color: #a8aabe !important;
    border-color: #3a3d50 !important;
}

/* ==============================
   LIST GROUPS
   ============================== */

html.dark-mode .list-group-item {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .list-group-item.active {
    background-color: #4e73df !important;
    border-color: #4e73df !important;
    color: #fff !important;
}

html.dark-mode .list-group-item-action:hover,
html.dark-mode .list-group-item-action:focus {
    background-color: var(--dm-hover) !important;
    color: var(--dm-text-heading) !important;
}

/* ==============================
   PAGINATION
   ============================== */

html.dark-mode .page-link {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-link) !important;
}

html.dark-mode .page-link:hover {
    background-color: var(--dm-hover) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .page-item.active .page-link {
    background-color: #4e73df !important;
    border-color: #4e73df !important;
    color: #fff !important;
}

html.dark-mode .page-item.disabled .page-link {
    background-color: var(--dm-bg-surface) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
}

/* ==============================
   BREADCRUMB
   ============================== */

html.dark-mode .breadcrumb {
    background-color: var(--dm-bg-card-alt) !important;
}

html.dark-mode .breadcrumb-item a {
    color: var(--dm-link) !important;
}

html.dark-mode .breadcrumb-item.active {
    color: var(--dm-text-muted) !important;
}

/* ==============================
   NAV TABS / PILLS
   ============================== */

html.dark-mode .nav-tabs {
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .nav-tabs .nav-link {
    color: var(--dm-text) !important;
}

html.dark-mode .nav-tabs .nav-link:hover {
    border-color: var(--dm-border) var(--dm-border) transparent !important;
}

html.dark-mode .nav-tabs .nav-link.active {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) var(--dm-border) var(--dm-bg-card) !important;
    color: var(--dm-text-heading) !important;
}

/* ==============================
   BORDERS
   ============================== */

html.dark-mode .border {
    border-color: var(--dm-border) !important;
}

html.dark-mode .border-top {
    border-top-color: var(--dm-border) !important;
}

html.dark-mode .border-bottom {
    border-bottom-color: var(--dm-border) !important;
}

html.dark-mode .border-left {
    border-left-color: var(--dm-border) !important;
}

html.dark-mode .border-right {
    border-right-color: var(--dm-border) !important;
}

html.dark-mode .shadow {
    box-shadow: 0 0.15rem 1.75rem 0 rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .shadow-sm {
    box-shadow: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode .shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5) !important;
}

/* ==============================
   LOADING OVERLAY
   ============================== */

html.dark-mode #loading {
    background: rgba(10, 10, 20, 0.85) !important;
}

html.dark-mode .overlay {
    background: rgba(10, 10, 20, 0.6) !important;
}

/* ==============================
   SCROLL TO TOP BUTTON
   ============================== */

html.dark-mode .scroll-to-top {
    background-color: var(--dm-bg-card-alt) !important;
}

/* ==============================
   SB ADMIN 2 SPECIFIC
   ============================== */

/* Notification dropdown */
html.dark-mode .dropdown-list .dropdown-header {
    background-color: #4e73df !important;
}

html.dark-mode .dropdown-list .dropdown-item {
    border-bottom-color: var(--dm-border) !important;
}

/* Topbar search */
html.dark-mode .navbar-search .form-control {
    background-color: var(--dm-bg-input) !important;
}

/* Card border-left colored cards - keep the left border color, darken rest */
html.dark-mode .card[class*="border-left-"] {
    background-color: var(--dm-bg-card) !important;
}

/* Sidebar - mismo fondo que topbar en dark mode */
html.dark-mode .sidebar,
html.dark-mode .sidebar.bg-gradient-primary {
    background: var(--dm-bg-card) !important;
    background-image: none !important;
}

html.dark-mode .sidebar .sidebar-brand {
    background-color: var(--dm-bg-card-alt) !important;
}

html.dark-mode .sidebar hr.sidebar-divider {
    border-top-color: var(--dm-border) !important;
}

html.dark-mode .sidebar .nav-item .nav-link {
    color: var(--dm-text) !important;
}

html.dark-mode .sidebar .nav-item .nav-link:hover,
html.dark-mode .sidebar .nav-item .nav-link:focus {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .sidebar .nav-item .nav-link i {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .sidebar .nav-item .nav-link:hover i {
    color: var(--dm-text) !important;
}

html.dark-mode .sidebar .nav-item.active .nav-link {
    color: #fff !important;
}

html.dark-mode .sidebar .nav-item.active .nav-link i {
    color: #fff !important;
}

html.dark-mode .sidebar #sidebarToggle {
    background-color: var(--dm-bg-card-alt) !important;
}

html.dark-mode .sidebar #sidebarToggle:hover {
    background-color: var(--dm-hover) !important;
}

html.dark-mode .sidebar .sidebar-heading {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .sidebar .collapse-item {
    color: var(--dm-text) !important;
}

html.dark-mode .sidebar .collapse-inner {
    background-color: var(--dm-bg-card-alt) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .sidebar .collapse-item:hover {
    background-color: var(--dm-hover) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .sidebar .collapse-item.active {
    color: #4e73df !important;
}

/* ==============================
   CHARTS (text labels)
   ============================== */

html.dark-mode .chart-area,
html.dark-mode .chart-bar,
html.dark-mode .chart-pie {
    color: var(--dm-text) !important;
}

/* --- ApexCharts dark mode overrides --- */

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

/* Axis labels */
html.dark-mode .apexcharts-xaxis-label,
html.dark-mode .apexcharts-yaxis-label {
    fill: #b8b9cc !important;
}

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

/* Data labels inside charts */
html.dark-mode .apexcharts-datalabel,
html.dark-mode .apexcharts-datalabel-label,
html.dark-mode .apexcharts-datalabel-value {
    fill: #e0e1ec !important;
}

/* Stacked bar total labels */
html.dark-mode .apexcharts-bar-goals-markers text,
html.dark-mode .apexcharts-datalabels text {
    fill: #d1d3e2 !important;
}

/* Grid lines */
html.dark-mode .apexcharts-gridline {
    stroke: rgba(255, 255, 255, 0.06) !important;
}

html.dark-mode .apexcharts-grid-borders line {
    stroke: rgba(255, 255, 255, 0.08) !important;
}

/* Tooltip */
html.dark-mode .apexcharts-tooltip {
    background: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .apexcharts-tooltip-title {
    background: var(--dm-bg-card-alt) !important;
    border-bottom-color: var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .apexcharts-tooltip-text {
    color: var(--dm-text) !important;
}

/* Toolbar icons */
html.dark-mode .apexcharts-toolbar svg {
    fill: var(--dm-text-muted) !important;
}

html.dark-mode .apexcharts-toolbar svg:hover {
    fill: var(--dm-text-heading) !important;
}

/* Menu (download/export) */
html.dark-mode .apexcharts-menu {
    background: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode .apexcharts-menu-item {
    color: var(--dm-text) !important;
}

html.dark-mode .apexcharts-menu-item:hover {
    background: var(--dm-hover) !important;
}

/* Pie/donut chart labels */
html.dark-mode .apexcharts-pie-label {
    fill: #fff !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* ==============================
   TOASTR (notifications)
   ============================== */

html.dark-mode .toast {
    background-color: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

/* ==============================
   FLATPICKR (date picker)
   ============================== */

html.dark-mode .flatpickr-calendar {
    background: var(--dm-bg-card) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode .flatpickr-months .flatpickr-month,
html.dark-mode .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--dm-bg-card) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .flatpickr-current-month input.cur-year {
    color: var(--dm-text-heading) !important;
}

html.dark-mode .flatpickr-weekdays {
    background: var(--dm-bg-card) !important;
}

html.dark-mode span.flatpickr-weekday {
    background: var(--dm-bg-card) !important;
    color: var(--dm-text-muted) !important;
}

html.dark-mode .flatpickr-day {
    color: var(--dm-text) !important;
}

html.dark-mode .flatpickr-day:hover {
    background: var(--dm-hover) !important;
    border-color: var(--dm-hover) !important;
}

html.dark-mode .flatpickr-day.prevMonthDay,
html.dark-mode .flatpickr-day.nextMonthDay {
    color: var(--dm-text-muted) !important;
}

html.dark-mode .flatpickr-months .flatpickr-prev-month,
html.dark-mode .flatpickr-months .flatpickr-next-month {
    color: var(--dm-text) !important;
    fill: var(--dm-text) !important;
}

/* ==============================
   LOGIN PAGE (bg-gradient-primary body)
   ============================== */

html.dark-mode body.bg-gradient-primary {
    background: linear-gradient(180deg, #1a1a2e 10%, #16213e 100%) !important;
}

html.dark-mode body.bg-gradient-primary .card {
    background-color: var(--dm-bg-card) !important;
}

/* ==============================
   CUSTOM APP ELEMENTS
   ============================== */

/* Timeline */
html.dark-mode .timeline .timeline-item .timeline-item-marker .timeline-item-marker-indicator {
    background-color: var(--dm-bg-card-alt) !important;
}

html.dark-mode .timeline .timeline-item .timeline-item-content {
    border-left-color: var(--dm-border) !important;
}

html.dark-mode .timeline .timeline-item .timeline-item-marker .timeline-item-marker-text {
    color: var(--dm-text-muted) !important;
}

/* ==============================
   HR / DIVIDERS
   ============================== */

html.dark-mode hr {
    border-top-color: var(--dm-border) !important;
}

/* ==============================
   BUTTONS — Dark Mode (deep tones)
   ============================== */

html.dark-mode .btn-primary {
    background-color: #1e3a6e !important;
    border-color: #2a4d8e !important;
    color: #a4bcf4 !important;
}

html.dark-mode .btn-primary:hover,
html.dark-mode .btn-primary:focus {
    background-color: #24457f !important;
    border-color: #3060a8 !important;
    color: #c0d4ff !important;
}

html.dark-mode .btn-success {
    background-color: #0f3d2e !important;
    border-color: #18573f !important;
    color: #7ee8c0 !important;
}

html.dark-mode .btn-success:hover,
html.dark-mode .btn-success:focus {
    background-color: #144a38 !important;
    border-color: #1e6a4c !important;
    color: #a0f5d5 !important;
}

html.dark-mode .btn-danger {
    background-color: #4a1a1a !important;
    border-color: #6b2525 !important;
    color: #f4a8a0 !important;
}

html.dark-mode .btn-danger:hover,
html.dark-mode .btn-danger:focus {
    background-color: #5a2222 !important;
    border-color: #7d3030 !important;
    color: #ffbeB8 !important;
}

html.dark-mode .btn-warning {
    background-color: #3d3010 !important;
    border-color: #564618 !important;
    color: #f5d978 !important;
}

html.dark-mode .btn-warning:hover,
html.dark-mode .btn-warning:focus {
    background-color: #4a3a14 !important;
    border-color: #695520 !important;
    color: #ffe599 !important;
}

html.dark-mode .btn-info {
    background-color: #133a40 !important;
    border-color: #1c5260 !important;
    color: #7ed6e5 !important;
}

html.dark-mode .btn-info:hover,
html.dark-mode .btn-info:focus {
    background-color: #18454d !important;
    border-color: #246878 !important;
    color: #a0e8f0 !important;
}

html.dark-mode .btn-secondary {
    background-color: #2a2c3a !important;
    border-color: #3a3d50 !important;
    color: #a8aabe !important;
}

html.dark-mode .btn-secondary:hover,
html.dark-mode .btn-secondary:focus {
    background-color: #333650 !important;
    border-color: #454866 !important;
    color: #c0c2d5 !important;
}

html.dark-mode .btn-light {
    background-color: var(--dm-bg-card-alt) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .btn-light:hover {
    background-color: var(--dm-hover) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-heading) !important;
}

html.dark-mode .btn-outline-primary {
    border-color: #2a4d8e !important;
    color: #a4bcf4 !important;
}

html.dark-mode .btn-outline-primary:hover {
    background-color: #1e3a6e !important;
    color: #c0d4ff !important;
}

html.dark-mode .btn-outline-success {
    border-color: #18573f !important;
    color: #7ee8c0 !important;
}

html.dark-mode .btn-outline-success:hover {
    background-color: #0f3d2e !important;
    color: #a0f5d5 !important;
}

html.dark-mode .btn-outline-danger {
    border-color: #6b2525 !important;
    color: #f4a8a0 !important;
}

html.dark-mode .btn-outline-danger:hover {
    background-color: #4a1a1a !important;
    color: #ffbeb8 !important;
}

html.dark-mode .btn-outline-warning {
    border-color: #564618 !important;
    color: #f5d978 !important;
}

html.dark-mode .btn-outline-warning:hover {
    background-color: #3d3010 !important;
    color: #ffe599 !important;
}

html.dark-mode .btn-outline-info {
    border-color: #1c5260 !important;
    color: #7ed6e5 !important;
}

html.dark-mode .btn-outline-info:hover {
    background-color: #133a40 !important;
    color: #a0e8f0 !important;
}

html.dark-mode .btn-outline-light {
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .btn-outline-secondary {
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

html.dark-mode .btn-outline-secondary:hover {
    background-color: var(--dm-hover) !important;
    color: var(--dm-text-heading) !important;
}

/* ==============================
   DARK MODE TOGGLE BUTTON
   ============================== */

html.dark-mode .btn-dark-mode-toggle {
    color: #f6c23e !important;
}

.btn-dark-mode-toggle {
    color: #858796;
    background: none;
    border: none;
    padding: 0;
    font-size: 1.1rem;
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
}

.btn-dark-mode-toggle:hover {
    color: #4e73df;
}

html.dark-mode .btn-dark-mode-toggle:hover {
    color: #ffd666 !important;
}

/* ==============================
   MISC / CATCH-ALL
   ============================== */

html.dark-mode .close {
    color: var(--dm-text) !important;
    opacity: 0.7 !important;
}

html.dark-mode .close:hover {
    color: var(--dm-text-heading) !important;
    opacity: 1 !important;
}

html.dark-mode code {
    color: #e83e8c;
}

html.dark-mode pre {
    background-color: var(--dm-bg-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}

html.dark-mode ::selection {
    background-color: rgba(78, 115, 223, 0.4);
    color: #fff;
}

/* Scrollbar styling for dark mode */
html.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark-mode ::-webkit-scrollbar-track {
    background: var(--dm-bg-surface);
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--dm-border);
    border-radius: 4px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #3e5080;
}