/* ==========================================================================
   Dark Theme - Scoped under html.dark-theme
   All overrides are isolated here; no changes to existing CSS files.
   ========================================================================== */

/* ---------- CSS Custom Properties (Dark Palette) ---------- */
html.dark-theme {
    --dt-bg: #1a1d23;
    --dt-bg-card: #22262e;
    --dt-bg-elevated: #2a2e37;
    --dt-bg-input: #2a2e37;
    --dt-bg-hover: #323742;
    --dt-bg-sidebar: #1e2128;
    --dt-bg-header: #1e2128;
    --dt-bg-dropdown: #282c34;
    --dt-bg-modal: #22262e;
    --dt-bg-table-head: #262a32;
    --dt-bg-table-row: #22262e;
    --dt-bg-table-alt: #1e2228;
    --dt-border: #3a3f4b;
    --dt-border-light: #31363f;
    --dt-text: #d4d8e0;
    --dt-text-muted: #8b92a0;
    --dt-text-heading: #e8ecf2;
    --dt-link: #5ba8d6;
    --dt-primary: #3d9ad6;
    --dt-primary-hover: #2d7fb8;
    --dt-shadow: rgba(0, 0, 0, 0.35);
}

    /* ---------- Base Elements ---------- */
    html.dark-theme,
    html.dark-theme body {
        background-color: var(--dt-bg) !important;
        color: var(--dt-text) !important;
    }

        html.dark-theme a {
            color: var(--dt-link);
        }

        html.dark-theme hr {
            border-color: var(--dt-border);
        }

        /* ---------- Layout (Blazorise) ---------- */
        html.dark-theme .b-layout,
        html.dark-theme .b-layout-body {
            background-color: var(--dt-bg) !important;
        }

        html.dark-theme .b-layout-sider,
        html.dark-theme .b-sidebar,
        html.dark-theme .b-sidebar-content {
            background-color: var(--dt-bg-sidebar) !important;
            border-right-color: var(--dt-border) !important;
        }

        html.dark-theme .b-layout-header,
        html.dark-theme #main-header {
            background-color: var(--dt-bg-header) !important;
            border-bottom: 1px solid var(--dt-border) !important;
            box-shadow: 0 2px 8px var(--dt-shadow) !important;
        }

        html.dark-theme .content {
            background-color: var(--dt-bg) !important;
        }

        /* ---------- Blazorise Bar / Bootstrap Navbar (Top & Side Nav) ---------- */
        html.dark-theme .b-bar,
        html.dark-theme .b-bar[class*="bg-light"],
        html.dark-theme .b-bar.b-bar-light,
        html.dark-theme .navbar,
        html.dark-theme .navbar.navbar-light,
        html.dark-theme .navbar.bg-light {
            background-color: var(--dt-bg-header) !important;
            color: var(--dt-text) !important;
        }

        /* Navbar links - Bootstrap .navbar-light forces rgba(0,0,0,.5) */
        html.dark-theme .navbar-light .navbar-nav .nav-link,
        html.dark-theme .navbar-light .navbar-nav .nav-link:focus,
        html.dark-theme .navbar-light .navbar-nav .nav-link:hover,
        html.dark-theme .navbar-light .navbar-nav .show > .nav-link,
        html.dark-theme .navbar-light .navbar-nav .active > .nav-link,
        html.dark-theme .navbar-light .navbar-nav .nav-link.show,
        html.dark-theme .navbar-light .navbar-nav .nav-link.active,
        html.dark-theme .navbar-nav .nav-link,
        html.dark-theme .b-bar-item > .b-bar-link,
        html.dark-theme .b-bar-item > .b-bar-link:hover,
        html.dark-theme .b-bar-link,
        html.dark-theme .b-bar-brand .b-bar-link {
            color: var(--dt-text) !important;
        }

        /* Navbar brand text */
        html.dark-theme .navbar-light .navbar-brand,
        html.dark-theme .navbar-brand,
        html.dark-theme .b-bar-brand {
            color: var(--dt-text-heading) !important;
        }

        /* Navbar toggler */
        html.dark-theme .navbar-light .navbar-toggler,
        html.dark-theme .navbar-toggler,
        html.dark-theme .b-bar-toggler {
            color: var(--dt-text) !important;
            border-color: var(--dt-border) !important;
        }

        html.dark-theme .navbar-light .navbar-toggler-icon,
        html.dark-theme .navbar-toggler-icon {
            filter: invert(1) grayscale(100%) brightness(200%);
        }

        /* Navbar text */
        html.dark-theme .navbar-light .navbar-text,
        html.dark-theme .navbar-text {
            color: var(--dt-text) !important;
        }

        /* Dropdown toggles inside navbar */
        html.dark-theme .navbar .dropdown-toggle,
        html.dark-theme .b-bar .dropdown-toggle,
        html.dark-theme .b-bar-dropdown > .b-bar-link,
        html.dark-theme .b-bar-dropdown-toggle {
            color: var(--dt-text) !important;
        }

        html.dark-theme .b-bar-link:hover,
        html.dark-theme .navbar-nav .nav-link:hover {
            background-color: var(--dt-bg-hover) !important;
        }

        /* Bar dropdown menus */
        html.dark-theme .b-bar-dropdown-menu,
        html.dark-theme .navbar .dropdown-menu {
            background-color: var(--dt-bg-dropdown) !important;
            border-color: var(--dt-border) !important;
            box-shadow: 0 4px 12px var(--dt-shadow) !important;
        }

        html.dark-theme .b-bar-dropdown-item,
        html.dark-theme .navbar .dropdown-item {
            color: var(--dt-text) !important;
        }

            html.dark-theme .b-bar-dropdown-item:hover,
            html.dark-theme .b-bar-dropdown-item:focus,
            html.dark-theme .navbar .dropdown-item:hover,
            html.dark-theme .navbar .dropdown-item:focus {
                background-color: var(--dt-bg-hover) !important;
                color: var(--dt-text-heading) !important;
            }

        html.dark-theme .b-bar-dropdown-divider,
        html.dark-theme .navbar .dropdown-divider {
            border-color: var(--dt-border) !important;
        }

        /* All icons and spans inside the bar */
        html.dark-theme .b-bar .b-bar-item svg,
        html.dark-theme .b-bar .b-bar-item i,
        html.dark-theme .b-bar .b-bar-item .b-icon,
        html.dark-theme .navbar .nav-link i,
        html.dark-theme .navbar .nav-link svg,
        html.dark-theme .navbar .dropdown-toggle i,
        html.dark-theme .navbar .dropdown-toggle svg {
            color: var(--dt-text) !important;
        }

        /* Sidebar nav menu bar */
        html.dark-theme .b-bar.b-bar-vertical-inline,
        html.dark-theme .b-bar[class*="b-bar-vertical"] {
            background-color: var(--dt-bg-sidebar) !important;
        }

            html.dark-theme .b-bar.b-bar-vertical-inline .b-bar-link,
            html.dark-theme .b-bar[class*="b-bar-vertical"] .b-bar-link,
            html.dark-theme .b-bar[class*="b-bar-vertical"] .navbar-nav .nav-link {
                color: var(--dt-text) !important;
            }

                html.dark-theme .b-bar.b-bar-vertical-inline .b-bar-link:hover,
                html.dark-theme .b-bar[class*="b-bar-vertical"] .b-bar-link:hover {
                    background-color: var(--dt-bg-hover) !important;
                }

        html.dark-theme .b-bar-vertical-inline.b-bar-light .b-bar-link.active,
        html.dark-theme .b-bar-vertical-popout.b-bar-light .b-bar-link.active,
        html.dark-theme .b-bar-vertical-small.b-bar-light .b-bar-link.active,
        html.dark-theme .b-bar-vertical-inline.b-bar-light .b-bar-dropdown-menu .b-bar-dropdown-item.active,
        html.dark-theme .b-bar-vertical-inline.b-bar-dark .b-bar-link.active,
        html.dark-theme .b-bar-vertical-popout.b-bar-dark .b-bar-link.active,
        html.dark-theme .b-bar-vertical-small.b-bar-dark .b-bar-link.active {
            background: rgba(61, 154, 214, 0.18) !important;
            color: #7cc4f0 !important;
        }

            html.dark-theme .b-bar-vertical-inline.b-bar-light .b-bar-link.active svg,
            html.dark-theme .b-bar-vertical-inline.b-bar-light .b-bar-link.active i,
            html.dark-theme .b-bar-vertical-inline.b-bar-light .b-bar-link.active .b-icon,
            html.dark-theme .b-bar-vertical-inline.b-bar-light .b-bar-link.active span {
                color: #7cc4f0 !important;
            }

        /* Logo/brand link: match other menu items (no active/clicked styling) - must override active rule above */
        html.dark-theme .b-bar-vertical-inline.b-bar-light .b-bar-brand .b-bar-link.active,
        html.dark-theme .b-bar-vertical-inline.b-bar-light .b-bar-brand .b-bar-link.active:hover,
        html.dark-theme .b-bar-vertical-popout.b-bar-light .b-bar-brand .b-bar-link.active,
        html.dark-theme .b-bar-vertical-small.b-bar-light .b-bar-brand .b-bar-link.active,
        html.dark-theme .b-bar-vertical-inline.b-bar-dark .b-bar-brand .b-bar-link.active,
        html.dark-theme .b-bar-vertical-popout.b-bar-dark .b-bar-brand .b-bar-link.active,
        html.dark-theme .b-bar-vertical-small.b-bar-dark .b-bar-brand .b-bar-link.active {
            background: transparent !important;
            color: var(--dt-text) !important;
        }

            html.dark-theme .b-bar-vertical-inline.b-bar-light .b-bar-brand .b-bar-link.active svg,
            html.dark-theme .b-bar-vertical-inline.b-bar-light .b-bar-brand .b-bar-link.active i,
            html.dark-theme .b-bar-vertical-inline.b-bar-light .b-bar-brand .b-bar-link.active .b-icon,
            html.dark-theme .b-bar-vertical-inline.b-bar-light .b-bar-brand .b-bar-link.active span {
                color: var(--dt-text) !important;
            }

        /* Title bar text */
        html.dark-theme .title-bar,
        html.dark-theme .title-bar * {
            color: var(--dt-text) !important;
        }

        /* Catch-all for any remaining black text inside navbar/bar */
        html.dark-theme .b-bar span,
        html.dark-theme .b-bar b,
        html.dark-theme .b-bar strong,
        html.dark-theme .navbar span,
        html.dark-theme .navbar b,
        html.dark-theme .navbar strong,
        html.dark-theme #main-header span,
        html.dark-theme #main-header b,
        html.dark-theme #main-header strong,
        html.dark-theme #main-header a,
        html.dark-theme #main-header .dropdown-toggle {
            color: var(--dt-text) !important;
        }

        html.dark-theme #main-header .title-bar,
        html.dark-theme #main-header .title-bar * {
            color: var(--dt-text) !important;
        }

        /* Brand name keeps --custom-blue (must come after catch-all) */
        html.dark-theme .b-bar-brand b,
        html.dark-theme .b-bar-brand strong {
            color: var(--custom-blue) !important;
        }

/* ---------- Bootstrap Cards ---------- */
html.dark-theme {
    --card-actions-bg: var(--dt-bg-elevated);
    --card-actions-border: var(--dt-border);
}

    html.dark-theme .card {
        background-color: var(--dt-bg-card) !important;
        border-color: var(--dt-border) !important;
        color: var(--dt-text) !important;
    }

    html.dark-theme .card-header {
        background-color: var(--dt-bg-elevated) !important;
        border-bottom-color: var(--dt-border) !important;
        color: var(--dt-text-heading) !important;
    }

    html.dark-theme .card-footer {
        background-color: var(--dt-bg-elevated) !important;
        border-top-color: var(--dt-border) !important;
    }

    /* ---------- Bootstrap Tables ---------- */
    html.dark-theme .table,
    html.dark-theme table {
        color: var(--dt-text) !important;
    }

        html.dark-theme .table thead th,
        html.dark-theme .table-bordered thead th {
            background-color: var(--dt-bg-table-head) !important;
            border-color: var(--dt-border) !important;
            color: var(--dt-text-heading) !important;
        }

    html.dark-theme .v-grid .bg-custom-blue,
    html.dark-theme .v-grid thead.bg-custom-blue th {
        background-color: var(--custom-blue) !important;
        color: #fff !important;
    }

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

    html.dark-theme .table-striped tbody tr:nth-of-type(odd) {
        background-color: var(--dt-bg-table-alt) !important;
    }

    html.dark-theme .table-hover tbody tr:hover {
        background-color: var(--dt-bg-hover) !important;
        color: var(--dt-text) !important;
    }

    html.dark-theme .table-info,
    html.dark-theme .table-info > td,
    html.dark-theme .table-info > th,
    html.dark-theme tr.table-info {
        background-color: rgba(61, 154, 214, 0.15) !important;
        color: var(--dt-text) !important;
    }


    html.dark-theme .table-danger,
    html.dark-theme .table-danger > td,
    html.dark-theme .table-danger > th {
        background-color: rgba(220, 53, 69, 0.35) !important;
        color: var(--dt-text) !important;
    }

        html.dark-theme .table-danger input,
    html.dark-theme .table-danger .form-control,
    html.dark-theme .table-danger textarea,
    html.dark-theme .table-danger select {
        color: #212529 !important;
    }

    html.dark-theme .table-success,
    html.dark-theme .table-success > td,
    html.dark-theme .table-success > th,
    html.dark-theme tr.table-success {
        background-color: rgba(25, 135, 84, 0.2) !important;
        color: var(--dt-text) !important;
    }



    html.dark-theme .table-warning,
    html.dark-theme .table-warning > td,
    html.dark-theme .table-warning > th,
    html.dark-theme tr.table-warning {
        background-color: rgba(255, 193, 7, 0.2) !important;
        color: var(--dt-text) !important;
    }

   
    /* ---------- Forms & Inputs ---------- */
    html.dark-theme .form-control,
    html.dark-theme .form-select,
    html.dark-theme input[type="text"],
    html.dark-theme input[type="number"],
    html.dark-theme input[type="email"],
    html.dark-theme input[type="password"],
    html.dark-theme input[type="search"],
    html.dark-theme input[type="date"],
    html.dark-theme input[type="datetime-local"],
    html.dark-theme select,
    html.dark-theme textarea {
        background-color: var(--dt-bg-input) !important;
        border-color: var(--dt-border) !important;
        color: var(--dt-text) !important;
    }

        html.dark-theme .form-control:focus,
        html.dark-theme input:focus,
        html.dark-theme select:focus,
        html.dark-theme textarea:focus {
            border-color: var(--dt-primary) !important;
            box-shadow: 0 0 0 0.2rem rgba(61, 154, 214, 0.25) !important;
        }

        html.dark-theme .form-control::placeholder,
        html.dark-theme input::placeholder,
        html.dark-theme textarea::placeholder {
            color: var(--dt-text-muted) !important;
        }

        html.dark-theme .form-control:disabled,
        html.dark-theme .form-control[readonly],
        html.dark-theme .readonly-div {
            background-color: var(--dt-bg-elevated) !important;
            color: var(--dt-text-muted) !important;
            border-color: var(--dt-border) !important;
        }

    html.dark-theme .input-group-text {
        background-color: var(--dt-bg-elevated) !important;
        border-color: var(--dt-border) !important;
        color: var(--dt-text) !important;
    }

    html.dark-theme .custom-select {
        background-color: var(--dt-bg-input) !important;
        border-color: var(--dt-border) !important;
        color: var(--dt-text) !important;
    }

    html.dark-theme label {
        color: var(--dt-text) !important;
    }

    /* Filter inputs in grids */
    html.dark-theme .filteInput {
        background-color: var(--dt-bg-input) !important;
        color: var(--dt-text) !important;
    }

        html.dark-theme .filteInput:focus {
            box-shadow: 0 0 2px 2px rgba(61, 154, 214, 0.35) !important;
            border-color: var(--dt-primary) !important;
        }

    html.dark-theme .input-grid {
        background: transparent !important;
        color: var(--dt-text) !important;
    }

    /* ---------- Buttons ---------- */
    html.dark-theme .btn-secondary {
        background-color: var(--dt-bg-elevated) !important;
        border-color: var(--dt-border) !important;
        color: var(--dt-text) !important;
    }

        html.dark-theme .btn-secondary:hover {
            background-color: var(--dt-bg-hover) !important;
        }

    html.dark-theme .btn-outline-primary {
        color: var(--dt-primary) !important;
        border-color: var(--dt-primary) !important;
    }

        html.dark-theme .btn-outline-primary:hover {
            background-color: var(--dt-primary) !important;
            color: #fff !important;
        }

    html.dark-theme .btn-outline-secondary {
        color: var(--dt-text-muted) !important;
        border-color: var(--dt-border) !important;
    }

        html.dark-theme .btn-outline-secondary:hover {
            background-color: var(--dt-bg-hover) !important;
            color: var(--dt-text) !important;
        }

    html.dark-theme .btn-light {
        background-color: var(--dt-bg-elevated) !important;
        border-color: var(--dt-border) !important;
        color: var(--dt-text) !important;
    }

    html.dark-theme .btn-danger,
    html.dark-theme .modal .btn-danger,
    html.dark-theme .modal-content .btn-danger {
        background-color: #c82333 !important;
        border-color: #bd2130 !important;
        color: #fff !important;
    }

        html.dark-theme .btn-danger:hover,
        html.dark-theme .modal .btn-danger:hover,
        html.dark-theme .modal-content .btn-danger:hover {
            background-color: #a71d2a !important;
            border-color: #9d1b26 !important;
            color: #fff !important;
        }

    /* ---------- Dropdowns (Bootstrap) ---------- */
    html.dark-theme .dropdown-menu {
        background-color: var(--dt-bg-dropdown) !important;
        border-color: var(--dt-border) !important;
        box-shadow: 0 4px 12px var(--dt-shadow) !important;
    }

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

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

    html.dark-theme .dropdown-divider {
        border-color: var(--dt-border) !important;
    }

    /* ---------- Modals ---------- */
    html.dark-theme .modal-content {
        background-color: var(--dt-bg-modal) !important;
        border-color: var(--dt-border) !important;
        color: var(--dt-text) !important;
    }

    html.dark-theme .modal-header {
        border-bottom-color: var(--dt-border) !important;
        color: var(--dt-text-heading) !important;
    }

        html.dark-theme .modal-header .close,
        html.dark-theme .modal-header .btn-close {
            color: var(--dt-text) !important;
            opacity: 0.7;
        }

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

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

    /* ---------- Tabs ---------- */
    html.dark-theme .nav-tabs {
        border-bottom-color: var(--dt-border) !important;
    }

        html.dark-theme .nav-tabs .nav-link {
            color: var(--dt-primary) !important;
        }

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

            html.dark-theme .nav-tabs .nav-link:hover {
                border-color: var(--dt-border) !important;
            }

    /* ---------- Alerts ---------- */
    html.dark-theme .alert-info {
        background-color: rgba(61, 154, 214, 0.15) !important;
        border-color: rgba(61, 154, 214, 0.3) !important;
        color: #7cc4f0 !important;
    }

    html.dark-theme .alert-warning {
        background-color: rgba(255, 193, 7, 0.15) !important;
        border-color: rgba(255, 193, 7, 0.3) !important;
        color: #f0d060 !important;
    }

    html.dark-theme .alert-danger {
        background-color: rgba(220, 53, 69, 0.15) !important;
        border-color: rgba(220, 53, 69, 0.3) !important;
        color: #f08090 !important;
    }

    html.dark-theme .alert-success {
        background-color: rgba(25, 135, 84, 0.15) !important;
        border-color: rgba(25, 135, 84, 0.3) !important;
        color: #70c098 !important;
    }

        html.dark-theme .alert-success .btn {
            background-color: var(--dt-bg-elevated) !important;
            border-color: var(--dt-border) !important;
            color: var(--dt-text-heading) !important;
        }

            html.dark-theme .alert-success .btn:hover {
                background-color: var(--dt-bg-hover) !important;
                color: #fff !important;
            }

    /* ---------- Badges ---------- */
    html.dark-theme .badge-secondary,
    html.dark-theme .bg-secondary {
        background-color: var(--dt-bg-elevated) !important;
        color: var(--dt-text) !important;
    }

    html.dark-theme .badge-light,
    html.dark-theme .bg-light {
        background-color: var(--dt-bg-elevated) !important;
        color: var(--dt-text) !important;
    }

    /* ---------- V-Grid (Custom Data Grid) ---------- */
    html.dark-theme .v-grid {
        background: var(--dt-bg-card) !important;
        box-shadow: 0 4px 7px var(--dt-shadow) !important;
        scrollbar-color: rgba(61, 154, 214, 0.4) rgba(42, 46, 55, 0.3) !important;
    }

    html.dark-theme .v-grid-empty-row {
        background-color: var(--dt-bg-card) !important;
    }

    html.dark-theme .v-grid tbody input,
    html.dark-theme .v-grid tbody select,
    html.dark-theme .v-grid tbody textarea,
    html.dark-theme .v-grid tbody .form-control,
    html.dark-theme .v-grid tbody .input-grid {
        background: transparent !important;
        color: var(--dt-text) !important;
    }

    html.dark-theme .v-grid-empty-row td {
        border-color: var(--dt-border) !important;
    }

    html.dark-theme .v-grid tbody tr {
        background-color: var(--dt-bg-table-row) !important;
    }

        html.dark-theme .v-grid tbody tr:hover {
            background-color: inherit !important;
        }

    html.dark-theme .v-grid tfoot td {
        border-color: var(--dt-border) !important;
    }

    /* ---------- Context Menus ---------- */
    html.dark-theme .context-menu {
        background-color: var(--dt-bg-dropdown) !important;
        border-color: var(--dt-border) !important;
        color: var(--dt-text) !important;
    }

    html.dark-theme .dropdown-submenu {
        color: var(--dt-text) !important;
    }

    html.dark-theme .context-menu-scroll {
        background-color: var(--dt-bg-dropdown) !important;
    }

    /* ---------- Custom Header Labels (styleLabelCommon / styleDataCommon) ---------- */
    html.dark-theme .styleLabelCommon {
        background-color: #3a3f4b !important;
        color: #e0e4eb !important;
    }

    html.dark-theme .styleDataCommon {
        color: var(--dt-text) !important;
    }

    /* ---------- Widgets ---------- */
    html.dark-theme .widget-card {
        background-color: var(--dt-bg-card) !important;
    }

        html.dark-theme .widget-card .card-header {
            background-color: var(--dt-bg-card) !important;
        }

        html.dark-theme .widget-card .btn,
        html.dark-theme .widget-card .btn i,
        html.dark-theme .widget-card .btn svg {
            color: var(--dt-text) !important;
        }

    html.dark-theme .refresh-button,
    html.dark-theme .refresh-button i,
    html.dark-theme .refresh-button svg {
        color: var(--dt-text) !important;
    }

        html.dark-theme .refresh-button:hover {
            background: var(--dt-bg-hover) !important;
        }

    html.dark-theme .widget-title {
        color: var(--dt-text-heading) !important;
    }

    html.dark-theme .last-update-label {
        color: var(--dt-text-muted) !important;
    }

    /* ---------- Amount Box ---------- */
    html.dark-theme .amount-box {
        background: linear-gradient(145deg, #1f3a2a, #274834) !important;
        box-shadow: 0 4px 12px var(--dt-shadow) !important;
    }

    html.dark-theme .amount-title {
        color: #70c098 !important;
    }

    html.dark-theme .amount-icon {
        color: #60b888 !important;
    }

    html.dark-theme .amount-value {
        color: #d4e8dc !important;
    }

    /* ---------- Receipt Action Buttons ---------- */
    html.dark-theme .receipt-action-btn {
        background: var(--dt-bg-elevated) !important;
        border-color: var(--dt-border) !important;
        color: var(--dt-text) !important;
        box-shadow: 0 2px 6px var(--dt-shadow) !important;
    }

        html.dark-theme .receipt-action-btn:hover {
            box-shadow: 0 6px 16px var(--dt-shadow) !important;
        }

    html.dark-theme .action-shortcut {
        background: rgba(61, 154, 214, 0.15) !important;
        color: var(--dt-primary) !important;
    }

    /* ---------- Receipt Card ---------- */
    html.dark-theme .receipt-card {
        box-shadow: 0 4px 11px var(--dt-shadow) !important;
    }

    /* ---------- JSON Snippet ---------- */
    html.dark-theme .json-snippet {
        background-color: var(--dt-bg-elevated) !important;
        border-color: var(--dt-border) !important;
        color: #c8cdd6 !important;
    }

    /* ---------- Bootstrap BG Utilities ---------- */
    html.dark-theme .bg-white {
        background-color: var(--dt-bg-card) !important;
    }

    html.dark-theme .bg-light {
        background-color: var(--dt-bg-elevated) !important;
    }

    html.dark-theme .text-dark {
        color: var(--dt-text) !important;
    }

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

    html.dark-theme .border {
        border-color: var(--dt-border) !important;
    }

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

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

    /* ---------- Scrollbar (Webkit) ---------- */
    html.dark-theme ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    html.dark-theme ::-webkit-scrollbar-track {
        background: var(--dt-bg);
    }

    html.dark-theme ::-webkit-scrollbar-thumb {
        background-color: #4a5060;
        border-radius: 4px;
    }

        html.dark-theme ::-webkit-scrollbar-thumb:hover {
            background-color: #5a6070;
        }

    /* ---------- DevExpress Blazor Components ---------- */
    html.dark-theme .dxbl-grid,
    html.dark-theme .dxbl-grid-wrapper {
        background-color: var(--dt-bg-card) !important;
        color: var(--dt-text) !important;
    }

    html.dark-theme .dxbl-grid-header,
    html.dark-theme .dxbl-grid-header-cell {
        background-color: var(--dt-bg-table-head) !important;
        color: var(--dt-text-heading) !important;
        border-color: var(--dt-border) !important;
    }

    html.dark-theme .dxbl-grid-data-row {
        background-color: var(--dt-bg-table-row) !important;
        color: var(--dt-text) !important;
    }

        html.dark-theme .dxbl-grid-data-row:hover {
            background-color: var(--dt-bg-hover) !important;
        }

    html.dark-theme .dxbl-grid td,
    html.dark-theme .dxbl-grid th {
        border-color: var(--dt-border) !important;
    }

    html.dark-theme .dxbl-btn-toolbar {
        background-color: var(--dt-bg-elevated) !important;
    }

    /* ---------- DevExpress Report Viewer Toolbar ---------- */
    html.dark-theme .dxbl-toolbar {
        background-color: var(--dt-bg-elevated) !important;
        border-color: var(--dt-border) !important;
    }

        html.dark-theme .dxbl-toolbar .dxbl-btn {
            color: var(--dt-text) !important;
        }

            html.dark-theme .dxbl-toolbar .dxbl-btn:hover {
                background-color: var(--dt-bg-hover) !important;
                color: #fff !important;
            }

        /* Font icons - set color, not filter */
        html.dark-theme .dxbl-toolbar [class^="dxd-icon-"],
        html.dark-theme .dxbl-toolbar [class*=" dxd-icon-"],
        html.dark-theme .dxbl-toolbar .dxbl-image {
            color: var(--dt-text) !important;
        }

        html.dark-theme .dxbl-toolbar .dxbl-btn:hover [class^="dxd-icon-"],
        html.dark-theme .dxbl-toolbar .dxbl-btn:hover [class*=" dxd-icon-"],
        html.dark-theme .dxbl-toolbar .dxbl-btn:hover .dxbl-image {
            color: #fff !important;
        }

        html.dark-theme .dxbl-toolbar input,
        html.dark-theme .dxbl-toolbar .dxbl-edit-input-container,
        html.dark-theme .dxbl-toolbar .dxbl-input-group,
        html.dark-theme .dxbl-toolbar .form-control {
            background-color: var(--dt-bg-input) !important;
            border-color: var(--dt-border) !important;
            color: var(--dt-text) !important;
        }

        html.dark-theme .dxbl-toolbar .dxbl-spin-edit-btn {
            color: var(--dt-text) !important;
            border-color: var(--dt-border) !important;
        }

        html.dark-theme .dxbl-toolbar .dxbl-toolbar-separator {
            border-color: var(--dt-border) !important;
        }

        html.dark-theme .dxbl-toolbar .dxbl-btn-caption {
            color: var(--dt-text) !important;
        }

    /* ---------- DevExpress Report Viewer - Side Panel / Search ---------- */
    html.dark-theme .dxbrv-tab-panel {
        background: var(--dt-bg-card) !important;
        color: var(--dt-text) !important;
    }

    html.dark-theme .dxrbv-gridlayout-side-bar {
        background-color: var(--dt-bg-card) !important;
        border-left: 1px solid var(--dt-border) !important;
    }

        html.dark-theme .dxrbv-gridlayout-side-bar .tab-content {
            background-color: var(--dt-bg-card) !important;
            color: var(--dt-text) !important;
        }

    html.dark-theme .dxbrv-wrapper .dxrbv-viewbox .dxrbv-gridlayout-side-bar .tab-content .search-title {
        background-color: var(--dt-bg-elevated) !important;
        color: var(--dt-text) !important;
        border-bottom: 1px solid var(--dt-border) !important;
    }

    html.dark-theme .dxbrv-wrapper .dxrbv-viewbox .dxrbv-gridlayout-side-bar .tab-content .h6,
    html.dark-theme .dxbrv-wrapper .dxbrv-tab-panel .h6 {
        color: var(--dt-text-heading) !important;
    }

    html.dark-theme .dxrbv-gridlayout-side-bar .dxbl-group {
        background-color: var(--dt-bg-card) !important;
        border-color: var(--dt-border) !important;
        color: var(--dt-text) !important;
    }

    html.dark-theme .dxrbv-gridlayout-side-bar .dxbl-group-header {
        background-color: var(--dt-bg-elevated) !important;
        border-color: var(--dt-border) !important;
        color: var(--dt-text-heading) !important;
    }

    html.dark-theme .dxrbv-gridlayout-side-bar .dxbl-group-body {
        background-color: var(--dt-bg-card) !important;
        color: var(--dt-text) !important;
    }

    html.dark-theme .dxrbv-gridlayout-side-bar input,
    html.dark-theme .dxrbv-gridlayout-side-bar .form-control,
    html.dark-theme .dxrbv-gridlayout-side-bar .dxbl-edit-input-container {
        background-color: var(--dt-bg-input) !important;
        border-color: var(--dt-border) !important;
        color: var(--dt-text) !important;
    }

    html.dark-theme .dxrbv-gridlayout-side-bar .btn {
        background-color: var(--dt-bg-elevated) !important;
        border-color: var(--dt-border) !important;
        color: var(--dt-text) !important;
    }

        html.dark-theme .dxrbv-gridlayout-side-bar .btn:hover {
            background-color: var(--dt-bg-hover) !important;
        }

    html.dark-theme .dxrbv-gridlayout-side-bar .dxbl-listbox,
    html.dark-theme .dxrbv-gridlayout-side-bar .search-panel-items {
        background-color: var(--dt-bg-card) !important;
        color: var(--dt-text) !important;
    }

    html.dark-theme .dxrbv-gridlayout-side-bar .dxbl-listbox-item {
        color: var(--dt-text) !important;
        border-color: var(--dt-border) !important;
    }

        html.dark-theme .dxrbv-gridlayout-side-bar .dxbl-listbox-item:hover,
        html.dark-theme .dxrbv-gridlayout-side-bar .dxbl-listbox-item.dxbl-active {
            background-color: var(--dt-bg-hover) !important;
            color: var(--dt-text-heading) !important;
        }

    html.dark-theme .dxrbv-gridlayout-side-bar label,
    html.dark-theme .dxrbv-gridlayout-side-bar span,
    html.dark-theme .dxrbv-gridlayout-side-bar .dxbl-fl-cpt {
        color: var(--dt-text) !important;
    }

    html.dark-theme .dxrbv-gridlayout-side-bar .dxbl-fl {
        color: var(--dt-text) !important;
    }

    html.dark-theme .dxrbv-gridlayout-side-bar .form-check-input {
        background-color: var(--dt-bg-input) !important;
        border-color: var(--dt-border) !important;
    }

    html.dark-theme .dxrbv-gridlayout-side-bar .nav-link {
        color: var(--dt-text) !important;
    }

    html.dark-theme .dxrbv-gridlayout-side-bar .dxbrv-objectproperties-node {
        color: var(--dt-text) !important;
    }

    html.dark-theme .dxrbv-rightpanel-resize-anchor:before {
        background-color: var(--dt-border) !important;
    }

    html.dark-theme .dxbrv-surface-container:before {
        background: var(--dt-bg) !important;
        opacity: 0.6 !important;
    }

    /* ---------- Radzen Components ---------- */
    html.dark-theme .rz-dialog,
    html.dark-theme .rz-dialog-content {
        background-color: var(--dt-bg-modal) !important;
        color: var(--dt-text) !important;
    }

    /* Radzen Scheduler */
    html.dark-theme .rz-scheduler {
        background-color: var(--dt-bg-card) !important;
        color: var(--dt-text) !important;
    }

        html.dark-theme .rz-scheduler .rz-slots,
        html.dark-theme .rz-scheduler .rz-slot,
        html.dark-theme .rz-scheduler td,
        html.dark-theme .rz-scheduler th {
            border-color: var(--dt-border) !important;
        }

        html.dark-theme .rz-scheduler .rz-view-header,
        html.dark-theme .rz-scheduler .rz-slot-header,
        html.dark-theme .rz-scheduler thead,
        html.dark-theme .rz-scheduler thead th {
            background-color: var(--dt-bg) !important;
            color: var(--dt-text) !important;
            border-color: var(--dt-border) !important;
        }

    html.dark-theme .rz-scheduler-nav {
        background: var(--dt-bg) !important;
    }

        html.dark-theme .rz-scheduler-nav .rz-scheduler-nav-title {
            color: var(--dt-text-heading) !important;
        }

    html.dark-theme .rz-scheduler-nav-views .rz-button.rz-primary {
        background: var(--dt-bg-elevated) !important;
        color: var(--dt-text) !important;
        border-color: var(--dt-border) !important;
    }

        html.dark-theme .rz-scheduler-nav-views .rz-button.rz-primary.rz-state-active {
            background-color: var(--dt-primary) !important;
            border-color: var(--dt-primary) !important;
            color: #fff !important;
        }

    html.dark-theme .rz-scheduler-nav .rz-button {
        color: var(--dt-text) !important;
    }

    /* Radzen SplitButton & Dropdowns */
    html.dark-theme .rz-splitbutton-menu,
    html.dark-theme .rz-dropdown-panel,
    html.dark-theme .rz-autocomplete-panel,
    html.dark-theme .rz-multiselect-panel {
        background-color: var(--dt-bg-dropdown) !important;
        border-color: var(--dt-border) !important;
        box-shadow: 0 4px 12px var(--dt-shadow) !important;
    }

    html.dark-theme .rz-menu-list .rz-navigation-item,
    html.dark-theme .rz-menu-list .rz-link {
        color: var(--dt-text) !important;
    }

        html.dark-theme .rz-menu-list .rz-navigation-item:hover,
        html.dark-theme .rz-menu-list .rz-link:hover {
            background-color: var(--dt-bg-hover) !important;
            color: var(--dt-text-heading) !important;
        }


    html.dark-theme .rz-scheduler .rz-today {
        color: var(--dt-primary) !important;
    }

    html.dark-theme .rz-scheduler .rz-button,
    html.dark-theme .rz-scheduler .rz-navigation button {
        color: var(--dt-text) !important;
    }

    html.dark-theme .rz-scheduler .rz-cell,
    html.dark-theme .rz-scheduler .rz-slot {
        background-color: var(--dt-bg-card) !important;
    }

    html.dark-theme .rz-scheduler [data-slot="nonworking"] {
        background: rgba(220, 60, 80, 0.35) !important;
    }

    html.dark-theme .rz-scheduler [data-slot="today"] {
        background: rgba(50, 180, 180, 0.3) !important;
    }

    html.dark-theme .rz-scheduler [data-slot="past"] {
        background: rgba(120, 120, 120, 0.3) !important;
    }

    html.dark-theme .rz-scheduler [data-slot="weekend"] {
        background: rgba(220, 180, 50, 0.3) !important;
    }

    html.dark-theme .rz-datepicker-calendar td,
    html.dark-theme .rz-datepicker-calendar th {
        color: var(--dt-text) !important;
    }

    /* Appointment status colors in dark theme via data attributes */
    html.dark-theme [data-status="scheduled"] {
        background: rgba(50, 160, 80, 0.45) !important;
        color: #d4d8e0 !important;
    }

    html.dark-theme [data-status="canceled"] {
        background: rgba(200, 60, 80, 0.45) !important;
        color: #d4d8e0 !important;
    }

    html.dark-theme [data-status="emergency"] {
        background: rgba(200, 160, 60, 0.45) !important;
        color: #d4d8e0 !important;
    }

    html.dark-theme [data-status="workorder"] {
        background: rgba(200, 130, 15, 0.55) !important;
        color: #d4d8e0 !important;
    }

    html.dark-theme [data-status="finished"] {
        background: rgba(50, 160, 160, 0.45) !important;
        color: #d4d8e0 !important;
    }

    html.dark-theme [data-status="default"] {
        background: rgba(50, 160, 160, 0.45) !important;
        color: #d4d8e0 !important;
    }

    html.dark-theme [data-status="scheduled"][data-past="true"] {
        background: rgba(50, 160, 80, 0.2) !important;
    }

    html.dark-theme [data-status="canceled"][data-past="true"] {
        background: rgba(200, 60, 80, 0.2) !important;
    }

    html.dark-theme [data-status="emergency"][data-past="true"] {
        background: rgba(200, 160, 60, 0.2) !important;
    }

    html.dark-theme [data-status="workorder"][data-past="true"] {
        background: rgba(200, 130, 15, 0.2) !important;
    }

    html.dark-theme [data-status="finished"][data-past="true"] {
        background: rgba(50, 160, 160, 0.2) !important;
    }

    html.dark-theme [data-status="default"][data-past="true"] {
        background: rgba(50, 160, 160, 0.2) !important;
    }

    /* Legend swatches in dark theme */
    html.dark-theme .slot-nonworking {
        background: rgba(220, 60, 80, 0.35) !important;
    }

    html.dark-theme .slot-today {
        background: rgba(50, 180, 180, 0.3) !important;
    }

    html.dark-theme .slot-past {
        background: rgba(120, 120, 120, 0.3) !important;
    }

    html.dark-theme .slot-weekend {
        background: rgba(220, 180, 50, 0.3) !important;
    }

    /* Appointment info text */
    html.dark-theme .appointment-info,
    html.dark-theme .appointment-info div,
    html.dark-theme .appointment-info strong {
        color: var(--dt-text) !important;
    }

    /* Appointment Legend */
    html.dark-theme .legend-card {
        background-color: var(--dt-bg-card) !important;
        border-color: var(--dt-border) !important;
        color: var(--dt-text) !important;
    }

    html.dark-theme .legend-title {
        color: var(--dt-text-heading) !important;
    }

    html.dark-theme .legend-label-cell,
    html.dark-theme .legend-label-cell strong,
    html.dark-theme .legend-item {
        color: var(--dt-text) !important;
    }

    html.dark-theme .legend-swatch {
        border-color: var(--dt-border) !important;
    }

    html.dark-theme .legend-actions label {
        color: var(--dt-text) !important;
    }

    /* ---------- Blazorise Specific ---------- */
    /* Blazorise Autocomplete */
    html.dark-theme .b-is-autocomplete,
    html.dark-theme .b-is-autocomplete .form-control,
    html.dark-theme .b-is-autocomplete input,
    html.dark-theme .b-is-autocomplete input[type="search"] {
        background-color: var(--dt-bg-input) !important;
        color: var(--dt-text) !important;
        border-color: var(--dt-border) !important;
    }

        html.dark-theme .b-is-autocomplete .dropdown-menu {
            background-color: var(--dt-bg-dropdown) !important;
            border-color: var(--dt-border) !important;
        }

            html.dark-theme .b-is-autocomplete .dropdown-menu .dropdown-item {
                color: var(--dt-text) !important;
            }

                html.dark-theme .b-is-autocomplete .dropdown-menu .dropdown-item.focus,
                html.dark-theme .b-is-autocomplete .dropdown-menu .dropdown-item:hover,
                html.dark-theme .b-is-autocomplete .dropdown-menu .dropdown-item:focus {
                    color: var(--dt-text-heading) !important;
                    background-color: var(--dt-bg-hover) !important;
                }

    html.dark-theme .b-is-autocomplete-suggestion {
        color: var(--dt-text) !important;
    }

        html.dark-theme .b-is-autocomplete-suggestion:hover,
        html.dark-theme .b-is-autocomplete-suggestion.focus {
            background-color: var(--dt-bg-hover) !important;
            color: var(--dt-text-heading) !important;
        }

    html.dark-theme .b-is-autocomplete.b-is-autocomplete-multipleselection {
        background-color: var(--dt-bg-input) !important;
        color: var(--dt-text) !important;
        border-color: var(--dt-border) !important;
    }

        html.dark-theme .b-is-autocomplete.b-is-autocomplete-multipleselection.focus {
            color: var(--dt-text) !important;
            background-color: var(--dt-bg-input) !important;
            border-color: var(--dt-primary) !important;
            box-shadow: 0 0 0 0.2rem rgba(61, 154, 214, 0.25) !important;
        }

        html.dark-theme .b-is-autocomplete .badge,
        html.dark-theme .b-is-autocomplete .b-is-autocomplete-tag,
        html.dark-theme .b-is-autocomplete.b-is-autocomplete-multipleselection > .badge {
            background-color: var(--dt-bg-elevated) !important;
            color: var(--dt-text) !important;
            border-color: var(--dt-border) !important;
        }

    html.dark-theme .dropdown.dropdown-disabled.b-is-autocomplete {
        background-color: var(--dt-bg-elevated) !important;
        color: var(--dt-text-muted) !important;
    }

    html.dark-theme .b-is-autocomplete-suggestion.b-is-autocomplete-suggestion-selected,
    html.dark-theme .b-is-autocomplete-suggestion.active,
    html.dark-theme .b-is-autocomplete-suggestion[class*="selected"] {
        background-color: rgba(61, 154, 214, 0.2) !important;
        color: var(--dt-text-heading) !important;
    }

    html.dark-theme .b-modal .modal-content {
        background-color: var(--dt-bg-modal) !important;
        color: var(--dt-text) !important;
    }

    /* Blazorise notification/snackbar */
    html.dark-theme .b-snackbar {
        background-color: var(--dt-bg-elevated) !important;
        color: var(--dt-text) !important;
    }

    /* Blazorise snackbar-success: same background and font color as default theme */
    html.dark-theme .snackbar.snackbar-success {
        background-color: #d4edda !important;
    }

        html.dark-theme .snackbar.snackbar-success,
        html.dark-theme .snackbar.snackbar-success .snackbar-body,
        html.dark-theme .snackbar.snackbar-success td,
        html.dark-theme .snackbar.snackbar-success b,
        html.dark-theme .snackbar.snackbar-success strong {
            color: #155724 !important;
        }

    /* Blazorise snackbar-danger: same background and font color as default theme */
    html.dark-theme .snackbar.snackbar-danger {
        background-color: #f8d7da !important;
    }

        html.dark-theme .snackbar.snackbar-danger,
        html.dark-theme .snackbar.snackbar-danger .snackbar-body,
        html.dark-theme .snackbar.snackbar-danger td,
        html.dark-theme .snackbar.snackbar-danger b,
        html.dark-theme .snackbar.snackbar-danger strong {
            color: #721c24 !important;
        }

    /* ---------- Blazorise LoadingIndicator ---------- */
    html.dark-theme .b-loading-indicator-overlay {
        background: rgba(26, 29, 35, 0.75) !important;
        color: var(--dt-text) !important;
    }

        html.dark-theme .b-loading-indicator-overlay svg,
        html.dark-theme .b-loading-indicator-overlay .b-loading-indicator-blazorise {
            filter: brightness(1.8) !important;
        }

        html.dark-theme .b-loading-indicator-overlay .spinner-border {
            color: var(--dt-primary) !important;
        }

    /* ---------- Blazor Error UI ---------- */
    html.dark-theme #blazor-error-ui {
        background: #3a2020 !important;
        color: #f0a0a0 !important;
    }

    /* ---------- Pagination ---------- */
    html.dark-theme .page-link {
        background-color: var(--dt-bg-card) !important;
        border-color: var(--dt-border) !important;
        color: var(--dt-primary) !important;
    }

    html.dark-theme .page-item.active .page-link {
        background-color: var(--dt-primary) !important;
        border-color: var(--dt-primary) !important;
        color: #fff !important;
    }

    html.dark-theme .page-item.disabled .page-link {
        background-color: var(--dt-bg-elevated) !important;
        border-color: var(--dt-border) !important;
        color: var(--dt-text-muted) !important;
    }

    /* ---------- List Groups ---------- */
    html.dark-theme .list-group-item {
        background-color: var(--dt-bg-card) !important;
        border-color: var(--dt-border) !important;
        color: var(--dt-text) !important;
    }

        html.dark-theme .list-group-item:hover {
            background-color: var(--dt-bg-hover) !important;
        }

        html.dark-theme .list-group-item.active {
            background-color: var(--dt-primary) !important;
            border-color: var(--dt-primary) !important;
            color: #fff !important;
        }

    /* ---------- Accordion ---------- */
    html.dark-theme .accordion-item {
        background-color: var(--dt-bg-card) !important;
        border-color: var(--dt-border) !important;
    }

    html.dark-theme .accordion-button {
        background-color: var(--dt-bg-elevated) !important;
        color: var(--dt-text) !important;
    }

        html.dark-theme .accordion-button:not(.collapsed) {
            background-color: rgba(61, 154, 214, 0.1) !important;
            color: var(--dt-primary) !important;
        }

    /* Blazorise Accordion / Collapse (renders as Bootstrap card + btn-link) */
    html.dark-theme .btn-link {
        color: var(--dt-text) !important;
    }

    html.dark-theme .card-header .btn-link,
    html.dark-theme .card-header button.btn-link,
    html.dark-theme .card-header h5 .btn-link,
    html.dark-theme .card-header h5 button {
        color: #fff !important;
    }

    /* ---------- Popovers & Tooltips ---------- */
    html.dark-theme .popover {
        background-color: var(--dt-bg-dropdown) !important;
        border-color: var(--dt-border) !important;
    }

    html.dark-theme .popover-header {
        background-color: var(--dt-bg-elevated) !important;
        border-bottom-color: var(--dt-border) !important;
        color: var(--dt-text-heading) !important;
    }

    html.dark-theme .popover-body {
        color: var(--dt-text) !important;
    }

    html.dark-theme .tooltip-inner {
        background-color: var(--dt-bg-elevated) !important;
        color: var(--dt-text) !important;
    }

    /* ---------- Theme Toggle Button Style ---------- */
    html.dark-theme .theme-toggle-icon {
        color: #f0c040 !important;
    }

.theme-toggle-icon {
    color: #555 !important;
    transition: color 0.2s ease;
}

/* ---------- Smooth transition for theme switch ---------- */
html.dark-theme *,
html.dark-theme *::before,
html.dark-theme *::after {
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Exclude elements where transition causes flicker */
html.dark-theme input,
html.dark-theme textarea,
html.dark-theme select,
html.dark-theme .modal,
html.dark-theme .modal-backdrop {
    transition: none !important;
}

/* ---------- Custom BG opacity utilities (dark variants) ---------- */
html.dark-theme .bg-secondary-opacity-25 {
    background-color: rgba(108, 117, 125, 0.15) !important;
}

html.dark-theme .bg-warning-opacity-25 {
    background-color: rgba(255, 193, 7, 0.12) !important;
}

html.dark-theme .bg-primary-opacity-25 {
    background-color: rgba(61, 154, 214, 0.15) !important;
}

html.dark-theme .bg-success-opacity-25 {
    background-color: rgba(25, 135, 84, 0.15) !important;
}

html.dark-theme .bg-danger-opacity-25 {
    background-color: rgba(220, 53, 69, 0.15) !important;
}

html.dark-theme .bg-info-opacity-25 {
    background-color: rgba(13, 202, 240, 0.12) !important;
}

html.dark-theme .bg-color-light-green {
    background-color: rgba(25, 135, 84, 0.18) !important;
}


html.dark-theme .scrollableImage {
    background-color: var(--dt-bg-elevated) !important;
}

/* ---------- Auth / Login Pages ---------- */
html.dark-theme .login-card {
    background: var(--dt-bg-card) !important;
    box-shadow: 0 2px 16px var(--dt-shadow) !important;
}

html.dark-theme .login-body {
    background: var(--dt-bg-card);
}

html.dark-theme .form-input-modern {
    background: var(--dt-bg-input) !important;
    border-color: var(--dt-border) !important;
    color: var(--dt-text) !important;
}

    html.dark-theme .form-input-modern:focus {
        border-color: var(--dt-primary) !important;
        box-shadow: 0 0 0 2px rgba(61, 154, 214, 0.25) !important;
    }

        html.dark-theme .form-input-modern:focus ~ .floating-label,
        html.dark-theme .form-input-modern:not(:placeholder-shown) ~ .floating-label,
        html.dark-theme .form-input-modern:-webkit-autofill ~ .floating-label {
            color: var(--dt-primary) !important;
            background: var(--dt-bg-card) !important;
        }

html.dark-theme .floating-label {
    color: var(--dt-text-muted) !important;
}

html.dark-theme .input-icon {
    color: var(--dt-text-muted) !important;
}

html.dark-theme .form-input-modern:focus ~ .input-icon,
html.dark-theme .form-input-modern:-webkit-autofill ~ .input-icon {
    color: var(--dt-primary) !important;
}

html.dark-theme .form-input-modern:-webkit-autofill,
html.dark-theme .form-input-modern:-webkit-autofill:hover,
html.dark-theme .form-input-modern:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--dt-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--dt-bg-input) inset !important;
    border-color: var(--dt-primary) !important;
}

html.dark-theme .login-links {
    border-top-color: var(--dt-border) !important;
}

html.dark-theme .login-link {
    color: var(--dt-link) !important;
}

    html.dark-theme .login-link:hover {
        color: var(--dt-primary-hover) !important;
    }

html.dark-theme .validation-message-modern {
    color: #f08090 !important;
}

html.dark-theme .alert-success-modern {
    background: rgba(25, 135, 84, 0.15) !important;
    color: #70c098 !important;
    border-left-color: #198754 !important;
}

html.dark-theme .alert-danger-modern {
    background: rgba(220, 53, 69, 0.15) !important;
    color: #f08090 !important;
    border-left-color: #dc3545 !important;
}

html.dark-theme .alert-info-modern {
    background: rgba(61, 154, 214, 0.15) !important;
    color: #7cc4f0 !important;
    border-left-color: var(--dt-primary) !important;
}

    html.dark-theme .alert-info-modern strong {
        color: #7cc4f0 !important;
    }

/* Tenant selection */
html.dark-theme .tenant-section-header {
    border-bottom-color: var(--dt-border) !important;
}

html.dark-theme .section-title {
    color: var(--dt-text-muted) !important;
}

html.dark-theme .tenant-item {
    background: var(--dt-bg-elevated) !important;
    border-color: var(--dt-border) !important;
}

    html.dark-theme .tenant-item:hover {
        border-color: #6366f1 !important;
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.2) !important;
    }

html.dark-theme .tenant-name {
    color: var(--dt-text) !important;
}

html.dark-theme .tenant-arrow {
    color: var(--dt-text-muted) !important;
}

html.dark-theme .tenant-item-invite {
    background: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
}

/* ---------- Selection highlight ---------- */
html.dark-theme ::selection {
    background-color: rgba(61, 154, 214, 0.35);
    color: #fff;
}

/* ---------- InstantCosts Shift+F10 - Choose file field (UploadData modal) ---------- */
html.dark-theme .upload-file-modal .form-control,
html.dark-theme .upload-file-modal input[type="text"],
html.dark-theme .upload-file-modal .custom-file,
html.dark-theme .upload-file-modal .custom-file-label,
html.dark-theme .upload-file-modal .b-file-edit,
html.dark-theme .upload-file-modal .b-file-input,
html.dark-theme .upload-file-modal [class*="file-edit"],
html.dark-theme .upload-file-modal .field .form-control {
    background-color: var(--dt-bg-input) !important;
    border-color: var(--dt-border) !important;
    color: var(--dt-text) !important;
}

html.dark-theme .upload-file-modal .custom-file-label::after {
    background-color: var(--dt-bg-elevated) !important;
    border-color: var(--dt-border) !important;
    color: var(--dt-text) !important;
}

/* Cost type autocomplete in same modal (InstantCosts) */
html.dark-theme .upload-file-modal .b-is-autocomplete,
html.dark-theme .upload-file-modal .b-is-autocomplete input {
    background-color: var(--dt-bg-input) !important;
    border-color: var(--dt-border) !important;
    color: var(--dt-text) !important;
}

/* ---------- TenantDetails TenantLogos - logo file input and design buttons ---------- */
/* FilePicker custom-file-input (logo upload in TenantLogo) */
html.dark-theme .tenant-logo-upload .custom-file,
html.dark-theme .tenant-logo-upload .custom-file-label,
html.dark-theme .tenant-logo-upload .custom-file-input {
    background-color: var(--dt-bg-input) !important;
    border-color: var(--dt-border) !important;
    color: var(--dt-text) !important;
}

html.dark-theme .tenant-logo-upload .custom-file-label::after {
    background-color: var(--dt-bg-elevated) !important;
    border-color: var(--dt-border) !important;
    color: var(--dt-text) !important;
}

/* Design buttons: Add, Edit, Delete, Copy */
html.dark-theme .tenant-logos-design-actions .btn,
html.dark-theme .tenant-logos-design-actions .btn i,
html.dark-theme .tenant-logos-design-actions .btn svg {
    background-color: var(--dt-bg-elevated) !important;
    border-color: var(--dt-border) !important;
    color: var(--dt-text) !important;
}

html.dark-theme .tenant-logos-design-actions .btn:hover {
    background-color: var(--dt-bg-hover) !important;
    border-color: var(--dt-border) !important;
    color: var(--dt-text-heading) !important;
}