/* =========================================================
   PAROCHOS VCR – darkmode-patch.css  (v5)
   =========================================================

   KEY CHANGES vs v4:
   ─────────────────────────────────────────────────────────
   NEW  Primary colour in dark mode changed from indigo
        #6366f1 (μπλε/μωβ, κουραστικό) to sky-blue #38bdf8
        (φωτεινό, ξεκούραστο). All tints updated to match.

   NEW  DataGrid row-expander (expand arrow) — better hover
        colour and visibility in dark mode.

   All selectors use html[data-theme="dark"] prefix →
   specificity 0-2-1, beats Blazor scoped + Radzen rules.
   ========================================================= */


/* ── 00  CSS variables ──────────────────────────────────────
   PRIMARY: #38bdf8  (Tailwind sky-400)
   Bright, clean, easy on the eyes on dark backgrounds.
   ─────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
    color-scheme: dark;
    /* ── New primary palette ── */
    --rz-primary: #38bdf8 !important;
    --rz-primary-dark: #0ea5e9 !important;
    --rz-primary-darker: #0284c7 !important;
    --rz-primary-light: rgba(56, 189, 248, 0.30) !important;
    --rz-primary-lighter: rgba(56, 189, 248, 0.14) !important;
    /* ── Borders ── */
    --rz-border-color: rgba(255,255,255,0.09) !important;
    --rz-border-color-base: rgba(255,255,255,0.09) !important;
    /* ── Text ── */
    --rz-text-color: #e2e8f0 !important;
    --rz-text-secondary-color: #94a3b8 !important;
    --rz-text-tertiary-color: #64748b !important;
    --rz-text-disabled-color: #475569 !important;
    /* ── Surfaces ── */
    --rz-body-background-color: #0f1117 !important;
    --rz-base-background-color: #1a1d27 !important;
    --rz-base-50: #1e2130 !important;
    --rz-base-100: #252838 !important;
    --rz-base-200: #2d3148 !important;
    --rz-base-300: rgba(255,255,255,0.09) !important;
    --rz-base-400: rgba(255,255,255,0.16) !important;
    --rz-base-500: rgba(255,255,255,0.24) !important;
    /* ── Semantic lighter variants ── */
    --rz-success-lighter: rgba(34,197,94,0.13) !important;
    --rz-danger-lighter: rgba(239,68,68,0.13) !important;
    --rz-warning-lighter: rgba(245,158,11,0.13) !important;
    --rz-info-lighter: rgba(14,165,233,0.13) !important;
    /* ── Grid ── */
    --rz-grid-cell-border: 1px solid rgba(255,255,255,0.07) !important;
    /* ── Links ── */
    --rz-link-color: #7dd3fc !important;
    --rz-link-hover-color: #bae6fd !important;
}


    /* ── 01  RadzenText ─────────────────────────────────────── */
    html[data-theme="dark"] .rz-text,
    html[data-theme="dark"] .rz-text-h1,
    html[data-theme="dark"] .rz-text-h2,
    html[data-theme="dark"] .rz-text-h3,
    html[data-theme="dark"] .rz-text-h4,
    html[data-theme="dark"] .rz-text-h5,
    html[data-theme="dark"] .rz-text-h6,
    html[data-theme="dark"] .rz-text-body1,
    html[data-theme="dark"] .rz-text-body2,
    html[data-theme="dark"] .rz-text-subtitle1,
    html[data-theme="dark"] .rz-text-subtitle2,
    html[data-theme="dark"] .rz-text-overline {
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .rz-text-caption {
        color: #94a3b8 !important;
    }

    html[data-theme="dark"] .rz-color-secondary {
        color: #94a3b8 !important;
    }


    /* ── 02  Page / body ─────────────────────────────────────── */
    html[data-theme="dark"] body {
        background-color: #0f1117 !important;
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .rz-body {
        background: #0f1117 !important;
    }

    html[data-theme="dark"] .page-title {
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .page-subtitle {
        color: #94a3b8 !important;
    }

    html[data-theme="dark"] .stat-card-label {
        color: #94a3b8 !important;
    }

    html[data-theme="dark"] .stat-card-value {
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .stat-card-value-secondary {
        color: #64748b !important;
    }

    html[data-theme="dark"] .grid-primary-text {
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .grid-secondary-text {
        color: #64748b !important;
    }


    /* ── 03  Sidebar ─────────────────────────────────────────── */
    html[data-theme="dark"] .rz-sidebar {
        background-color: #1a1d27 !important;
        background: #1a1d27 !important;
        border-right: 1px solid rgba(255,255,255,0.07) !important;
    }

    html[data-theme="dark"] .rz-panel-menu .rz-panel-menu-item-wrapper:hover {
        background: rgba(255,255,255,0.06) !important;
    }

    html[data-theme="dark"] .rz-panel-menu .rz-state-active > .rz-panel-menu-item-wrapper {
        background: rgba(56,189,248,0.14) !important;
    }

    html[data-theme="dark"] .rz-panel-menu .rz-navigation-item-text {
        color: #cbd5e1 !important;
    }

    html[data-theme="dark"] .rz-panel-menu .rz-state-active .rz-navigation-item-text {
        color: #38bdf8 !important;
    }

    /* Nav icons */
    html[data-theme="dark"] .rz-panel-menu .rz-navigation-item-icon-children,
    html[data-theme="dark"] .rz-panel-menu .rz-navigation-item-icon-children .material-icons,
    html[data-theme="dark"] .rz-panel-menu .rz-navigation-item-icon-children .rzi,
    html[data-theme="dark"] .rz-panel-menu .rz-navigation-item-icon-children span {
        color: #94a3b8 !important;
        opacity: 1 !important;
    }

    html[data-theme="dark"] .rz-panel-menu .rz-state-active .rz-navigation-item-icon-children,
    html[data-theme="dark"] .rz-panel-menu .rz-state-active .rz-navigation-item-icon-children .material-icons,
    html[data-theme="dark"] .rz-panel-menu .rz-state-active .rz-navigation-item-icon-children .rzi,
    html[data-theme="dark"] .rz-panel-menu .rz-state-active .rz-navigation-item-icon-children span {
        color: #38bdf8 !important;
        opacity: 1 !important;
    }

    html[data-theme="dark"] .sidebar-section-label {
        color: #475569 !important;
    }

    html[data-theme="dark"] .sidebar-version {
        color: #334155 !important;
    }

    html[data-theme="dark"] .sidebar-copyright {
        color: #334155 !important;
    }

    html[data-theme="dark"] .sidebar-footer {
        border-top-color: rgba(255,255,255,0.07) !important;
    }

    html[data-theme="dark"] .sidebar-logo {
        border-bottom-color: rgba(255,255,255,0.07) !important;
    }


    /* ── 04  Header & icon buttons ───────────────────────────── */
    html[data-theme="dark"] .rz-layout > .rz-header,
    html[data-theme="dark"] .rz-header {
        background-color: #1a1d27 !important;
        background: #1a1d27 !important;
        color: #e2e8f0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.07) !important;
        box-shadow: 0 1px 8px rgba(0,0,0,0.35) !important;
    }

        html[data-theme="dark"] .rz-header .rz-text {
            color: #e2e8f0 !important;
        }

        html[data-theme="dark"] .rz-header .rz-button,
        html[data-theme="dark"] .rz-header .rz-sidebar-toggle {
            color: rgba(255,255,255,0.70) !important;
            background: transparent !important;
        }

            html[data-theme="dark"] .rz-header .rz-button:hover,
            html[data-theme="dark"] .rz-header .rz-sidebar-toggle:hover {
                background: rgba(255,255,255,0.08) !important;
                color: rgba(255,255,255,0.95) !important;
            }

    html[data-theme="dark"] .icon-btn {
        color: rgba(255,255,255,0.70) !important;
        background: transparent !important;
    }

        html[data-theme="dark"] .icon-btn .rzi,
        html[data-theme="dark"] .icon-btn .rz-button-icon,
        html[data-theme="dark"] .icon-btn span[class*="rzi"] {
            color: rgba(255,255,255,0.70) !important;
        }

        html[data-theme="dark"] .icon-btn:hover {
            background: rgba(255,255,255,0.09) !important;
        }

            html[data-theme="dark"] .icon-btn:hover .rzi,
            html[data-theme="dark"] .icon-btn:hover .rz-button-icon {
                color: rgba(255,255,255,0.95) !important;
            }

    /* Dark mode toggle button — sun stays amber */
    html[data-theme="dark"] .dm-toggle-btn--sun .rzi,
    html[data-theme="dark"] .dm-toggle-btn--sun:hover .rzi {
        color: #fbbf24 !important;
    }

    html[data-theme="dark"] .dm-toggle-btn--moon .rzi {
        color: rgba(255,255,255,0.75) !important;
    }


    /* ── 05  Cards ───────────────────────────────────────────── */
    html[data-theme="dark"] .rz-card {
        background-color: #1a1d27 !important;
        background: #1a1d27 !important;
        border-color: rgba(255,255,255,0.07) !important;
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .stat-card {
        background: #1a1d27 !important;
        border-color: rgba(255,255,255,0.07) !important;
    }

    html[data-theme="dark"] .dashboard-card {
        background: #1a1d27 !important;
        border-color: rgba(255,255,255,0.07) !important;
    }

    html[data-theme="dark"] .dashboard-catalog-row:hover {
        background: #252838 !important;
    }

    html[data-theme="dark"] .printer-row--locked {
        background: rgba(245,158,11,0.10) !important;
    }


    /* ── 06  DataGrid — cells ────────────────────────────────── */
    html[data-theme="dark"] .rz-data-grid,
    html[data-theme="dark"] .rz-data-grid .rz-grid-table,
    html[data-theme="dark"] .rz-data-grid .rz-grid-table tbody,
    html[data-theme="dark"] .rz-data-grid .rz-grid-table tbody tr,
    html[data-theme="dark"] .rz-data-grid .rz-grid-table tbody td,
    html[data-theme="dark"] .rz-data-grid .rz-data-row,
    html[data-theme="dark"] .rz-data-grid .rz-data-row td,
    html[data-theme="dark"] table.rz-grid-table tbody tr td {
        background-color: #1a1d27 !important;
        background: #1a1d27 !important;
        color: #e2e8f0 !important;
        border-color: rgba(255,255,255,0.05) !important;
    }

        html[data-theme="dark"] .rz-data-grid .rz-data-row:hover td,
        html[data-theme="dark"] table.rz-grid-table tbody tr:hover td {
            background-color: #252838 !important;
            background: #252838 !important;
        }

        html[data-theme="dark"] .rz-data-grid .rz-state-selected td,
        html[data-theme="dark"] .rz-data-grid .rz-data-row.rz-state-selected td {
            background-color: rgba(56,189,248,0.14) !important;
            background: rgba(56,189,248,0.14) !important;
        }

    html[data-theme="dark"] .rz-datatable,
    html[data-theme="dark"] .rz-datatable tbody,
    html[data-theme="dark"] .rz-datatable tbody tr,
    html[data-theme="dark"] .rz-datatable tbody td {
        background-color: #1a1d27 !important;
        background: #1a1d27 !important;
        color: #e2e8f0 !important;
        border-color: rgba(255,255,255,0.05) !important;
    }

        html[data-theme="dark"] .rz-datatable tbody tr:hover,
        html[data-theme="dark"] .rz-datatable tbody tr:hover td {
            background-color: #252838 !important;
            background: #252838 !important;
        }


        /* ── 07  DataGrid header / pager ─────────────────────────── */
        html[data-theme="dark"] .rz-data-grid .rz-grid-table thead th,
        html[data-theme="dark"] .rz-data-grid .rz-grid-table thead td,
        html[data-theme="dark"] table.rz-grid-table thead th,
        html[data-theme="dark"] .rz-datatable .rz-datatable-thead > tr > th,
        html[data-theme="dark"] .rz-column-header {
            background-color: #1e2130 !important;
            background: #1e2130 !important;
            color: rgba(255,255,255,0.55) !important;
            border-color: rgba(255,255,255,0.07) !important;
        }

            html[data-theme="dark"] .rz-column-title,
            html[data-theme="dark"] .rz-column-title-text,
            html[data-theme="dark"] .rz-column-header .rz-column-title,
            html[data-theme="dark"] .rz-column-header .rz-column-title-text,
            html[data-theme="dark"] .rz-data-grid .rz-grid-table thead th .rz-column-title,
            html[data-theme="dark"] .rz-data-grid .rz-grid-table thead th .rz-column-title-text,
            html[data-theme="dark"] .rz-data-grid .rz-column-header-filterable .rz-column-title,
            html[data-theme="dark"] .rz-data-grid .rz-column-header-filterable .rz-column-title-text {
                color: rgba(255,255,255,0.55) !important;
            }

            html[data-theme="dark"] .rz-data-grid .rz-grid-table thead th .rzi,
            html[data-theme="dark"] .rz-column-header .rzi {
                color: rgba(255,255,255,0.35) !important;
            }

    html[data-theme="dark"] .rz-data-grid .rz-column-filter-row td,
    html[data-theme="dark"] .rz-data-grid tfoot td,
    html[data-theme="dark"] .rz-data-grid .rz-column-filter-row {
        background-color: #1e2130 !important;
        background: #1e2130 !important;
        border-color: rgba(255,255,255,0.06) !important;
    }

    html[data-theme="dark"] .rz-data-grid-header,
    html[data-theme="dark"] .rz-data-grid-footer,
    html[data-theme="dark"] .rz-pager {
        background-color: #1e2130 !important;
        background: #1e2130 !important;
        border-color: rgba(255,255,255,0.07) !important;
        color: #94a3b8 !important;
    }

        html[data-theme="dark"] .rz-pager .rz-button {
            color: #94a3b8 !important;
        }

            html[data-theme="dark"] .rz-pager .rz-state-active .rz-button,
            html[data-theme="dark"] .rz-pager .rz-button:hover {
                background-color: rgba(56,189,248,0.14) !important;
                color: #38bdf8 !important;
            }

    html[data-theme="dark"] .rz-data-grid .rz-empty-message,
    html[data-theme="dark"] .rz-data-grid .rz-no-data-label {
        background-color: #1a1d27 !important;
        color: #64748b !important;
    }


    /* ── 07b  DataGrid row expander (expand arrow) ──────────────
   FIX: The expand/collapse chevron button needs a visible
   hover state in dark mode.
   ─────────────────────────────────────────────────────────── */
    html[data-theme="dark"] .rz-row-expander,
    html[data-theme="dark"] .rz-data-grid .rz-row-expander {
        color: rgba(255,255,255,0.45) !important;
        background: transparent !important;
        border: none !important;
        transition: color 0.15s ease, background 0.15s ease !important;
    }

        html[data-theme="dark"] .rz-row-expander .rzi,
        html[data-theme="dark"] .rz-data-grid .rz-row-expander .rzi {
            color: rgba(255,255,255,0.45) !important;
        }

        html[data-theme="dark"] .rz-row-expander:hover,
        html[data-theme="dark"] .rz-data-grid .rz-row-expander:hover {
            background: rgba(56,189,248,0.14) !important;
            color: #38bdf8 !important;
            border-radius: 6px !important;
        }

            html[data-theme="dark"] .rz-row-expander:hover .rzi,
            html[data-theme="dark"] .rz-data-grid .rz-row-expander:hover .rzi {
                color: #38bdf8 !important;
            }


    /* ── 08  sl-table ────────────────────────────────────────── */
    html[data-theme="dark"] .sl-table-card {
        background-color: #1a1d27 !important;
        background: #1a1d27 !important;
        border-color: rgba(255,255,255,0.07) !important;
    }

    html[data-theme="dark"] .sl-table thead tr,
    html[data-theme="dark"] .sl-table thead th {
        background-color: #1e2130 !important;
        background: #1e2130 !important;
        border-color: rgba(255,255,255,0.07) !important;
        color: rgba(255,255,255,0.50) !important;
    }

    html[data-theme="dark"] .sl-table tbody tr,
    html[data-theme="dark"] .sl-table tbody td,
    html[data-theme="dark"] .sl-row td {
        background-color: #1a1d27 !important;
        background: #1a1d27 !important;
        color: #e2e8f0 !important;
        border-color: rgba(255,255,255,0.06) !important;
    }

    html[data-theme="dark"] .sl-row:hover td {
        background-color: #252838 !important;
        background: #252838 !important;
    }

    html[data-theme="dark"] .sl-bar-track {
        background-color: rgba(255,255,255,0.10) !important;
    }


    /* ── 09  Form inputs ─────────────────────────────────────── */
    html[data-theme="dark"] .rz-textbox,
    html[data-theme="dark"] .rz-inputtext,
    html[data-theme="dark"] .rz-textarea,
    html[data-theme="dark"] .rz-numeric input,
    html[data-theme="dark"] input.rz-inputtext,
    html[data-theme="dark"] textarea.rz-inputtextarea {
        background: #252838 !important;
        border-color: rgba(255,255,255,0.12) !important;
        color: #e2e8f0 !important;
    }

        html[data-theme="dark"] .rz-textbox::placeholder,
        html[data-theme="dark"] .rz-inputtext::placeholder,
        html[data-theme="dark"] input.rz-inputtext::placeholder {
            color: #64748b !important;
        }

        html[data-theme="dark"] .rz-textbox:focus,
        html[data-theme="dark"] .rz-inputtext:focus,
        html[data-theme="dark"] input.rz-inputtext:focus {
            border-color: #38bdf8 !important;
            box-shadow: 0 0 0 3px rgba(56,189,248,0.18) !important;
        }

    html[data-theme="dark"] .rz-dropdown,
    html[data-theme="dark"] .rz-dropdown-trigger,
    html[data-theme="dark"] .rz-dropdown-panel {
        background: #252838 !important;
        border-color: rgba(255,255,255,0.10) !important;
        color: #e2e8f0 !important;
    }

        html[data-theme="dark"] .rz-dropdown-trigger .rz-inputtext,
        html[data-theme="dark"] .rz-multiselect-label {
            background-color: #252838 !important;
            color: #e2e8f0 !important;
        }

        html[data-theme="dark"] .rz-dropdown-panel .rz-dropdown-item {
            color: #e2e8f0 !important;
        }

            html[data-theme="dark"] .rz-dropdown-panel .rz-dropdown-item:hover,
            html[data-theme="dark"] .rz-dropdown-panel .rz-dropdown-item.rz-state-highlight {
                background: rgba(56,189,248,0.14) !important;
                color: #38bdf8 !important;
            }

    html[data-theme="dark"] .rz-datepicker,
    html[data-theme="dark"] .rz-datepicker-input,
    html[data-theme="dark"] .rz-datepicker .rz-inputtext {
        background: #252838 !important;
        border-color: rgba(255,255,255,0.10) !important;
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .rz-datepicker-panel,
    html[data-theme="dark"] .rz-calendar,
    html[data-theme="dark"] .rz-datepicker-calendar {
        background: #1e2130 !important;
        border-color: rgba(255,255,255,0.09) !important;
        color: #e2e8f0 !important;
    }

        html[data-theme="dark"] .rz-calendar .rz-datepicker-header,
        html[data-theme="dark"] .rz-datepicker-header {
            background: #1e2130 !important;
            color: #e2e8f0 !important;
        }

        html[data-theme="dark"] .rz-calendar td > a,
        html[data-theme="dark"] .rz-calendar td > span {
            color: #e2e8f0 !important;
        }

        html[data-theme="dark"] .rz-calendar td.rz-state-active > a,
        html[data-theme="dark"] .rz-calendar td.rz-state-active > span {
            background: #38bdf8 !important;
            color: #0f1117 !important;
        }

        html[data-theme="dark"] .rz-calendar td:not(.rz-state-active):hover > a,
        html[data-theme="dark"] .rz-calendar td:not(.rz-state-active):hover > span {
            background: rgba(56,189,248,0.14) !important;
        }

        html[data-theme="dark"] .rz-calendar .rz-datepicker-other-month {
            color: #475569 !important;
        }

    html[data-theme="dark"] .rz-spinner {
        background-color: #1e2130 !important;
        border-color: rgba(255,255,255,0.08) !important;
    }

    html[data-theme="dark"] .rz-spinner-button {
        background-color: #252838 !important;
        color: #94a3b8 !important;
        border-color: rgba(255,255,255,0.08) !important;
    }

    html[data-theme="dark"] .rz-inputgroup,
    html[data-theme="dark"] .rz-input-group-container,
    html[data-theme="dark"] .rz-state-default input,
    html[data-theme="dark"] .rz-autocomplete-input {
        background-color: #252838 !important;
        color: #e2e8f0 !important;
        border-color: rgba(255,255,255,0.12) !important;
    }


    /* ── 10  RadzenFormField ─────────────────────────────────── */
    html[data-theme="dark"] .rz-form-field,
    html[data-theme="dark"] .rz-form-field .rz-form-field-wrapper,
    html[data-theme="dark"] .rz-form-field .rz-form-field-content {
        background-color: transparent !important;
    }

        html[data-theme="dark"] .rz-form-field .rz-input,
        html[data-theme="dark"] .rz-form-field input,
        html[data-theme="dark"] .rz-form-field .rz-dropdown {
            background-color: #252838 !important;
            border-color: rgba(255,255,255,0.12) !important;
            color: #e2e8f0 !important;
        }

        html[data-theme="dark"] .rz-form-field label,
        html[data-theme="dark"] .rz-form-field .rz-form-field-label {
            color: #94a3b8 !important;
            background-color: transparent !important;
        }

        html[data-theme="dark"] .rz-form-field fieldset,
        html[data-theme="dark"] .rz-form-field legend {
            border-color: rgba(255,255,255,0.12) !important;
            background-color: transparent !important;
        }

        html[data-theme="dark"] .rz-form-field:focus-within fieldset {
            border-color: #38bdf8 !important;
        }

    html[data-theme="dark"] .rz-variant-outlined .rz-textbox,
    html[data-theme="dark"] .rz-variant-outlined .rz-dropdown,
    html[data-theme="dark"] .rz-variant-outlined .rz-datepicker,
    html[data-theme="dark"] .rz-variant-outlined .rz-numeric {
        background-color: #252838 !important;
        border-color: rgba(255,255,255,0.12) !important;
        color: #e2e8f0 !important;
    }


    /* ── 11  Dialog ───────────────────────────────────────────── */
    html[data-theme="dark"] .rz-dialog-wrapper .rz-dialog {
        background: #1e2130 !important;
        color: #e2e8f0 !important;
        box-shadow: 0 24px 80px rgba(0,0,0,0.55) !important;
    }

    html[data-theme="dark"] .rz-dialog-wrapper .rz-dialog-title {
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .rz-dialog-wrapper .rz-dialog-titlebar {
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        background: #1e2130 !important;
    }

    html[data-theme="dark"] .rz-dialog-wrapper .rz-dialog-content {
        background: #1e2130 !important;
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .rz-overlay-backdrop {
        background: rgba(0,0,0,0.65) !important;
    }

    html[data-theme="dark"] .rz-dialog-titlebar-close {
        color: #94a3b8 !important;
    }

        html[data-theme="dark"] .rz-dialog-titlebar-close:hover {
            background-color: rgba(255,255,255,0.08) !important;
            color: #e2e8f0 !important;
        }

    html[data-theme="dark"] .dlg-section {
        background: #252838 !important;
        border-color: rgba(255,255,255,0.08) !important;
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .dlg-section-title {
        color: #38bdf8 !important;
    }

    html[data-theme="dark"] .dlg-toggle {
        background: #1e2130 !important;
        border-color: rgba(255,255,255,0.10) !important;
    }

        html[data-theme="dark"] .dlg-toggle:hover {
            background: #252838 !important;
            border-color: rgba(255,255,255,0.18) !important;
        }

        html[data-theme="dark"] .dlg-toggle.active {
            background: rgba(56,189,248,0.14) !important;
            border-color: #38bdf8 !important;
            box-shadow: 0 0 0 3px rgba(56,189,248,0.12) !important;
        }

    html[data-theme="dark"] .dlg-toggle-icon {
        color: #64748b !important;
    }

    html[data-theme="dark"] .dlg-toggle.active .dlg-toggle-icon {
        color: #38bdf8 !important;
    }

    html[data-theme="dark"] .dlg-flag {
        background: #1e2130 !important;
        border-color: rgba(255,255,255,0.09) !important;
    }

        html[data-theme="dark"] .dlg-flag:hover {
            background: #252838 !important;
            border-color: rgba(255,255,255,0.16) !important;
        }

    html[data-theme="dark"] .dlg-color-row {
        background: #1e2130 !important;
        border-color: rgba(255,255,255,0.08) !important;
    }

    html[data-theme="dark"] .dlg-preview {
        background: #1e2130 !important;
        border-color: rgba(255,255,255,0.09) !important;
    }

    html[data-theme="dark"] .dlg-preview-eyebrow {
        color: #64748b !important;
    }

    html[data-theme="dark"] .dlg-footer {
        border-top-color: rgba(255,255,255,0.07) !important;
    }

    /* Dialog inline-style divs (#e5e7eb border / #f9fafb bg) */
    html[data-theme="dark"] .rz-dialog-content [style*="#e5e7eb"],
    html[data-theme="dark"] .rz-dialog-content [style*="#E5E7EB"] {
        border-color: rgba(255,255,255,0.12) !important;
        background-color: #1e2130 !important;
        background: #1e2130 !important;
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .rz-dialog-content [style*="#f9fafb"],
    html[data-theme="dark"] .rz-dialog-content [style*="#F9FAFB"] {
        background-color: #252838 !important;
        background: #252838 !important;
        border-color: rgba(255,255,255,0.10) !important;
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .rz-dialog-content [style*="background: #fff"],
    html[data-theme="dark"] .rz-dialog-content [style*="background:#fff"] {
        background-color: #1e2130 !important;
        background: #1e2130 !important;
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .rz-dialog-content [style*="#e5e7eb"] label,
    html[data-theme="dark"] .rz-dialog-content [style*="#f9fafb"] label,
    html[data-theme="dark"] .rz-dialog-content [style*="#e5e7eb"] .rz-text,
    html[data-theme="dark"] .rz-dialog-content [style*="#f9fafb"] .rz-text {
        color: #e2e8f0 !important;
    }


    /* ── 12  Misc Radzen ─────────────────────────────────────── */
    html[data-theme="dark"] .rz-chip {
        background-color: rgba(56,189,248,0.14) !important;
        color: #38bdf8 !important;
        border-color: rgba(56,189,248,0.28) !important;
    }

    html[data-theme="dark"] .rz-divider {
        border-color: rgba(255,255,255,0.07) !important;
    }

    html[data-theme="dark"] .rz-messages .rz-message.rz-message-error,
    html[data-theme="dark"] .rz-alert {
        background-color: rgba(239,68,68,0.12) !important;
        border-color: rgba(239,68,68,0.25) !important;
        color: #fca5a5 !important;
    }

    html[data-theme="dark"] .rz-notification {
        background: #1e2130 !important;
        color: #e2e8f0 !important;
        box-shadow: 0 4px 24px rgba(0,0,0,0.45) !important;
    }

    html[data-theme="dark"] .rz-tooltip {
        background: #2d3148 !important;
        color: #e2e8f0 !important;
        border: 1px solid rgba(255,255,255,0.10) !important;
    }

    html[data-theme="dark"] .rz-contextmenu,
    html[data-theme="dark"] .rz-menu .rz-menu-list {
        background: #1e2130 !important;
        border-color: rgba(255,255,255,0.08) !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.45) !important;
    }

    html[data-theme="dark"] .rz-checkbox .rz-checkbox-box {
        background: #252838 !important;
        border-color: rgba(255,255,255,0.18) !important;
    }

    html[data-theme="dark"] .rz-switch-body {
        background: #2d3148 !important;
    }

    html[data-theme="dark"] .rz-tabview-nav {
        border-bottom-color: rgba(255,255,255,0.09) !important;
        background: transparent !important;
    }

        html[data-theme="dark"] .rz-tabview-nav li .rz-tabview-nav-link {
            color: #94a3b8 !important;
        }

        html[data-theme="dark"] .rz-tabview-nav li.rz-state-active .rz-tabview-nav-link {
            color: #38bdf8 !important;
            border-bottom-color: #38bdf8 !important;
            background: transparent !important;
        }

    html[data-theme="dark"] .rz-tabview-panels {
        background: transparent !important;
    }

    html[data-theme="dark"] .detail-row {
        border-bottom-color: rgba(255,255,255,0.07) !important;
    }

    html[data-theme="dark"] .detail-row-value--mono {
        background: #252838 !important;
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .dept-code {
        background: rgba(56,189,248,0.14) !important;
        color: #38bdf8 !important;
    }

    html[data-theme="dark"] .color-swatch,
    html[data-theme="dark"] .color-swatch--lg {
        border-color: rgba(255,255,255,0.15) !important;
    }

    html[data-theme="dark"] .tab-card {
        background: #1a1d27 !important;
        border-color: rgba(255,255,255,0.07) !important;
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .tab-divider {
        border-top-color: rgba(255,255,255,0.07) !important;
    }

    html[data-theme="dark"] .details-section {
        border-top-color: #38bdf8 !important;
    }

    html[data-theme="dark"] .device-tabs .rz-tabview-nav {
        border-bottom-color: rgba(255,255,255,0.09) !important;
    }

    html[data-theme="dark"] .app-card-interactive:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.45) !important;
    }

    html[data-theme="dark"] .supervisor-avatar {
        border-color: rgba(255,255,255,0.10) !important;
    }

    html[data-theme="dark"] .client-row-name:hover {
        background: rgba(56,189,248,0.12) !important;
        color: #38bdf8 !important;
    }

    html[data-theme="dark"] .client-row-secondary {
        color: #64748b !important;
    }

    html[data-theme="dark"] #blazor-error-ui {
        background: #2d1515 !important;
        color: #fca5a5 !important;
        border-top: 1px solid rgba(239,68,68,0.25) !important;
    }

    html[data-theme="dark"] ::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.15) !important;
    }

    html[data-theme="dark"] ::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.03) !important;
    }


    /* ── 13  Expiring-devices table ──────────────────────────── */
    html[data-theme="dark"] .expiring-table {
        border-color: rgba(255,255,255,0.09) !important;
        background: #1a1d27 !important;
    }

    html[data-theme="dark"] .expiring-row {
        border-bottom-color: rgba(255,255,255,0.06) !important;
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .expiring-row--header {
        background: #1e2130 !important;
        color: rgba(255,255,255,0.50) !important;
    }

    html[data-theme="dark"] .expiring-row--clickable:hover {
        background: #252838 !important;
    }

    html[data-theme="dark"] .expiring-device-name {
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .expiring-company,
    html[data-theme="dark"] .expiring-date {
        color: #94a3b8 !important;
    }


    /* ── 14  Audit card ──────────────────────────────────────── */
    html[data-theme="dark"] .audit-filters {
        background: #1e2130 !important;
        border-color: rgba(255,255,255,0.07) !important;
    }

    html[data-theme="dark"] .audit-table {
        border-color: rgba(255,255,255,0.09) !important;
        background: #1a1d27 !important;
    }

    html[data-theme="dark"] .audit-row {
        border-bottom-color: rgba(255,255,255,0.06) !important;
        color: #e2e8f0 !important;
        background: #1a1d27 !important;
    }

    html[data-theme="dark"] .audit-row--header {
        background: #1e2130 !important;
        color: rgba(255,255,255,0.50) !important;
    }

    html[data-theme="dark"] .audit-row:not(.audit-row--header):hover {
        background: #252838 !important;
    }

    html[data-theme="dark"] .audit-type-badge {
        background: rgba(255,255,255,0.08) !important;
        color: #cbd5e1 !important;
    }

    html[data-theme="dark"] .audit-total {
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .audit-date {
        color: #64748b !important;
    }

    html[data-theme="dark"] .audit-empty {
        color: #64748b !important;
    }

    html[data-theme="dark"] .audit-avatar--admin {
        background: rgba(245,158,11,0.18) !important;
        color: #fbbf24 !important;
    }

    html[data-theme="dark"] .audit-pager-btn {
        background: #1e2130 !important;
        border-color: rgba(255,255,255,0.10) !important;
        color: #94a3b8 !important;
    }

        html[data-theme="dark"] .audit-pager-btn:hover:not(:disabled) {
            background: rgba(56,189,248,0.14) !important;
            border-color: #38bdf8 !important;
            color: #38bdf8 !important;
        }

    html[data-theme="dark"] .audit-pager-btn--active {
        background: #38bdf8 !important;
        border-color: #38bdf8 !important;
        color: #0f1117 !important;
    }

    html[data-theme="dark"] .audit-pager-btn:disabled {
        opacity: 0.30 !important;
    }

    html[data-theme="dark"] .audit-pager-info {
        color: #64748b !important;
    }


    /* ── 15  FAB ─────────────────────────────────────────────── */
    html[data-theme="dark"] .fab-item-label {
        background: #1e2130 !important;
        color: #e2e8f0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
    }

    html[data-theme="dark"] .fab-item:hover .fab-item-label {
        box-shadow: 0 4px 14px rgba(0,0,0,0.50) !important;
    }

    html[data-theme="dark"] .fab-item-btn--secondary {
        background: #252838 !important;
        color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .fab-trigger--open {
        background: #252838 !important;
    }


    /* ── 16  Welcome banner (Index.razor) ────────────────────── */
    /*
   The banner uses linear-gradient(var(--rz-primary), var(--rz-primary-dark))
   which is now sky-400 (#38bdf8) — too bright / washed-out on dark mode.
   We override with deeper navy-to-blue tones that feel at home on a dark UI.
*/
    html[data-theme="dark"] .welcome-banner {
        background: linear-gradient(135deg, #0369a1 0%, #075985 100%) !important;
        /* sky-700 → sky-800: rich, readable, clearly "primary" but not glaring */
    }


    /* ── 17  DatePicker calendar button ──────────────────────────
   Radzen Material renders the calendar toggle as:
   <button class="rz-button rz-variant-filled rz-base rz-shade-default rz-button-icon-only">
   The combination .rz-variant-filled + .rz-base + .rz-shade-default
   gets background:#fff from the Material theme.
   We override ALL filled/base buttons inside filter rows and
   datepicker wrappers.
   ─────────────────────────────────────────────────────────── */

    /* Exact Radzen Material class chain that sets background:#fff */
    html[data-theme="dark"] .rz-button.rz-variant-filled.rz-base,
    html[data-theme="dark"] .rz-button.rz-variant-filled.rz-base.rz-shade-default,
    html[data-theme="dark"] .rz-button.rz-variant-filled.rz-base.rz-shade-default.rz-button-icon-only {
        background-color: #252838 !important;
        background: #252838 !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
        color: #94a3b8 !important;
        box-shadow: none !important;
    }

        html[data-theme="dark"] .rz-button.rz-variant-filled.rz-base:hover,
        html[data-theme="dark"] .rz-button.rz-variant-filled.rz-base.rz-shade-default:hover {
            background-color: #2d3148 !important;
            background: #2d3148 !important;
            color: #38bdf8 !important;
        }

        html[data-theme="dark"] .rz-button.rz-variant-filled.rz-base .rzi,
        html[data-theme="dark"] .rz-button.rz-variant-filled.rz-base .material-icons {
            color: #94a3b8 !important;
        }

        html[data-theme="dark"] .rz-button.rz-variant-filled.rz-base:hover .rzi {
            color: #38bdf8 !important;
        }


    /* ── 18  Transitions ─────────────────────────────────────── */


    html[data-theme="dark"] .rz-data-grid td,
    html[data-theme="dark"] .rz-datatable td,
    html[data-theme="dark"] .sl-table td {
        transition: background-color 0.15s ease, color 0.15s ease !important;
    }