:root {
    /* Compact topbar; overrides base theme 70px via rules below (.vertical-menu top, .content margin, etc.) */
    --ems-topbar-height: 56px;

    /* Match .vertical-menu width (app.css) — header logo column uses same min/max width */
    --ems-sidebar-width: 240px;
    --ems-sidebar-width-collapsed: 70px;

    --brand-red: #C82033;
    --brand-red-hover: #A71B2A;
    --brand-green: #2E8B57;

    /* ApexCharts — Realtime / Daily / Monthly (see wwwroot/js/ems-apex-palette.js) */
    --ems-chart-1: #C82033;
    --ems-chart-2: #2E8B57;
    --ems-chart-3: #c2410c;
    --ems-chart-4: #6d28d9;
    --ems-chart-5: #0f766e;
    --ems-chart-6: #b45309;

    --bg-color: #F8F9FA;
    --surface-color: #FFFFFF;
    --surface-alt: #F1F5F9;
    --text-color: #1A1A1B;
    --muted-color: #64748B;
    --border-color: rgba(15, 23, 42, 0.12);
    --shadow-soft: 0 6px 24px rgba(15, 23, 42, 0.08);

    --topbar-bg: #FFFFFF;
    --sidebar-bg: #FFFFFF;
    --sidebar-text: #475569;
    --sidebar-hover-bg: rgba(200, 32, 51, 0.08);
    --sidebar-hover-text: #C82033;
    --input-bg: #FFFFFF;

    /* Multi-site dashboard: forecast, billing, alerts (see MultiSiteDashBoard.cshtml) */
    --ms-tile-cons: #E4E7F2;
    --ms-tile-bill: #DCEFEA;
    --ms-tile-last: #E9E9EB;
    --ms-proj-cons-bg: #F7F1E8;
    --ms-proj-cons-border: #F0526E;
    --ms-proj-bill-bg: #DFF1EB;
    --ms-proj-bill-border: #1F8A70;
    --ms-billing-card-bg: linear-gradient(135deg, #ffffff 0%, #f8fafc 45%, #ecfdf5 100%);
    --ms-billing-card-fg: #0f172a;
    --ms-billing-title: #111827;
    --ms-billing-sub: #6b7280;
    --ms-billing-label: #64748b;
    --ms-billing-amount: #0d9488;
    --ms-billing-pill-bg: rgba(34, 197, 94, 0.15);
    --ms-billing-pill-fg: #15803d;
    --ms-billing-item-bg: rgba(255, 255, 255, 0.65);
    --ms-billing-item-hover-bg: #ffffff;
    --ms-billing-item-border: rgba(148, 163, 184, 0.3);
    --ms-billing-item-text: #334155;
    --ms-billing-tod-wrap: rgba(255, 255, 255, 0.7);
    --ms-billing-tod-title: #64748b;
    --ms-save-tod: #15803d;
    --ms-save-pf: #0284c7;
    --ms-save-demand: #c2410c;
    --ms-save-admin: #64748b;
    --ms-title-blue: #4F63D2;
    --ms-title-green: #1F8A70;
    --ms-value-blue: #4F63D2;
    --ms-value-dark: #5F6368;
    --ms-value-pink: #F0526E;
    --ms-value-teal: #1F8A70;
    --ms-target-blue: #4F63D2;
    --ms-percent-red: #E23D3D;
    --ms-meter-change-up: #dc2626;
    --ms-meter-change-down: #16a34a;
    --ms-alert-success-bg: #d1e7dd;
    --ms-alert-success-fg: #0f5132;
    --ms-alert-danger-bg: #f8d7da;
    --ms-alert-danger-fg: #842029;
    --ms-alert-info-bg: #e7f1ff;
    --ms-alert-info-fg: #084298;
    --ms-progress-track: #D9D9D9;
    --ms-bar-track: #e9ecef;
}

/* Narrow sidebar layout (app.css body[data-sidebar-size=small]) */
body[data-sidebar-size="small"] {
    --ems-sidebar-width: 160px;
}

html.dark {
    --bg-color: #0F172A;
    --surface-color: #1E293B;
    --surface-alt: #273449;
    --text-color: #F1F5F9;
    --muted-color: #94A3B8;
    --border-color: rgba(148, 163, 184, 0.28);
    --shadow-soft: 0 10px 28px rgba(2, 6, 23, 0.5);

    --topbar-bg: #162235;
    --sidebar-bg: #162235;
    --sidebar-text: #CBD5E1;
    --sidebar-hover-bg: rgba(200, 32, 51, 0.2);
    --sidebar-hover-text: #FCA5A5;
    --input-bg: #243247;

    --ems-chart-1: #f87171;
    --ems-chart-2: #4ade80;
    --ems-chart-3: #fb923c;
    --ems-chart-4: #a78bfa;
    --ems-chart-5: #2dd4bf;
    --ems-chart-6: #fbbf24;

    --ms-tile-cons: color-mix(in srgb, var(--surface-alt) 86%, #818cf8 14%);
    --ms-tile-bill: color-mix(in srgb, var(--surface-alt) 86%, #2dd4bf 14%);
    --ms-tile-last: var(--surface-alt);
    --ms-proj-cons-bg: color-mix(in srgb, var(--surface-alt) 78%, #fb7185 22%);
    --ms-proj-cons-border: #f87171;
    --ms-proj-bill-bg: color-mix(in srgb, var(--surface-alt) 78%, #2dd4bf 22%);
    --ms-proj-bill-border: #34d399;
    --ms-billing-card-bg: linear-gradient(150deg, var(--surface-color) 0%, var(--surface-alt) 45%, color-mix(in srgb, var(--surface-alt) 72%, var(--brand-green) 28%) 100%);
    --ms-billing-card-fg: var(--text-color);
    --ms-billing-title: var(--text-color);
    --ms-billing-sub: var(--muted-color);
    --ms-billing-label: var(--muted-color);
    --ms-billing-amount: #5eead4;
    --ms-billing-pill-bg: rgba(46, 139, 87, 0.28);
    --ms-billing-pill-fg: #86efac;
    --ms-billing-item-bg: color-mix(in srgb, var(--surface-alt) 88%, transparent);
    --ms-billing-item-hover-bg: color-mix(in srgb, var(--surface-alt) 96%, #fff 4%);
    --ms-billing-item-border: var(--border-color);
    --ms-billing-item-text: var(--text-color);
    --ms-billing-tod-wrap: var(--surface-alt);
    --ms-billing-tod-title: var(--muted-color);
    --ms-save-tod: #86efac;
    --ms-save-pf: #7dd3fc;
    --ms-save-demand: #fdba74;
    --ms-save-admin: #cbd5e1;
    --ms-title-blue: #93c5fd;
    --ms-title-green: #6ee7b7;
    --ms-value-blue: #93c5fd;
    --ms-value-dark: var(--text-color);
    --ms-value-pink: #fda4af;
    --ms-value-teal: #5eead4;
    --ms-target-blue: #93c5fd;
    --ms-percent-red: #fca5a5;
    --ms-meter-change-up: #f87171;
    --ms-meter-change-down: #4ade80;
    --ms-alert-success-bg: color-mix(in srgb, var(--surface-alt) 68%, #22c55e 32%);
    --ms-alert-success-fg: #d1fae5;
    --ms-alert-danger-bg: color-mix(in srgb, var(--surface-alt) 68%, #ef4444 32%);
    --ms-alert-danger-fg: #fecaca;
    --ms-alert-info-bg: color-mix(in srgb, var(--surface-alt) 68%, #3b82f6 32%);
    --ms-alert-info-fg: #bfdbfe;
    --ms-progress-track: color-mix(in srgb, var(--surface-alt) 85%, #0f172a 15%);
    --ms-bar-track: var(--surface-alt);
}

html.dark body {
    color-scheme: dark;
}

body,
.main-content,
.page-content {
    background: var(--bg-color) !important;
    color: var(--text-color) !important;
}

#page-topbar,
.navbar-header {
    background: var(--topbar-bg) !important;
    color: var(--text-color) !important;
    border-bottom: 1px solid var(--border-color);
}

/* Compact topbar: override app.css fixed 70px height + trim vertical padding */
#page-topbar {
    overflow: visible !important;
}

#page-topbar .navbar-header {
    box-sizing: border-box;
    min-height: var(--ems-topbar-height);
    height: auto !important;
    max-height: none;
    overflow: visible !important;
    /* Keep vertical padding 0 so height stays aligned with --ems-topbar-height / .vertical-menu top */
    padding: 0 0.75rem 0 0;
    align-items: center;
    align-content: center;
}

/* Base theme ties header controls to 70px — let them size to the slimmer bar */
#page-topbar .navbar-header .header-item {
    height: auto !important;
    min-height: 0;
    padding-top: 4px;
    padding-bottom: 4px;
    display: inline-flex;
    align-items: center;
    align-self: center;
}

/* Alarm / notifications — compact pill, optically centered bell, badge aligned to top-right */
#page-topbar .ems-notify-bell-wrap {
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin-right: 0.35rem;
    overflow: visible !important;
}

#page-topbar .ems-notify-bell-btn {
    /* Slightly larger rounded rect so the bell has padding; stays within 56px topbar (no header height change) */
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    border: 1px solid var(--border-color) !important;
    background: color-mix(in srgb, var(--surface-alt) 55%, var(--topbar-bg) 45%) !important;
    box-shadow: none !important;
    /* app.css Waves: .waves-effect { overflow: hidden } clips badge + bell */
    overflow: visible !important;
}

#page-topbar .ems-notify-bell-btn.waves-effect {
    overflow: visible !important;
}

html.dark #page-topbar .ems-notify-bell-btn {
    background: color-mix(in srgb, var(--surface-alt) 38%, var(--topbar-bg) 62%) !important;
}

#page-topbar .ems-notify-bell-inner {
    width: 26px;
    height: 26px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    line-height: 0 !important;
}

#page-topbar .ems-notify-bell-btn i.ri-notification-line {
    color: var(--text-color) !important;
    font-size: 1.22rem !important;
    line-height: 1 !important;
    margin: 0;
    transform: translateX(1px);
}

#page-topbar .ems-notify-badge {
    min-width: 17px;
    height: 17px;
    font-size: 9px;
    font-weight: 700;
    padding: 0 4px;
    /* Sit on the corner without poking as far past the button (less clip risk) */
    top: -3px;
    right: -4px;
    line-height: 17px;
    text-align: center;
    background: var(--brand-red) !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px var(--topbar-bg);
    z-index: 2;
}

#page-topbar .user-dropdown > .btn.header-item {
    padding: 2px 8px 2px 6px !important;
    gap: 0.15rem;
}

#page-topbar .navbar-header > .d-flex {
    overflow: visible !important;
}

/* Fixed sidebar + scroll area must follow topbar height (app.css uses 70px) */
.main-content .content {
    margin-top: var(--ems-topbar-height) !important;
}

.page-content {
    padding-top: calc(var(--ems-topbar-height) + 24px) !important;
}

body[data-layout="horizontal"] .page-content {
    margin-top: var(--ems-topbar-height) !important;
}

.topnav {
    margin-top: var(--ems-topbar-height) !important;
}

#page-topbar .header-item,
#page-topbar .text-white,
#page-topbar .text-dark,
#page-topbar .navbar-brand-box a {
    color: var(--text-color) !important;
}

/* ─── Topbar: logo + company + property (aligned row, no Bootstrap .container in header) ─── */
.navbar-header .ems-header-left {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.35rem 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
}

/* Sidebar toggle sits after logo, before company name — do not wrap logo+titles in a flex-grow row */
.navbar-header .ems-header-menu-btn {
    flex-shrink: 0;
    margin-left: 0.125rem;
    margin-right: 0.125rem;
}

/* Same width as sidebar; logo centered in this column (expanded / collapsed) */
.navbar-header .navbar-brand-box.ems-header-brand-box {
    box-sizing: border-box;
    width: var(--ems-sidebar-width) !important;
    min-width: var(--ems-sidebar-width);
    max-width: var(--ems-sidebar-width);
    padding: 0 0.35rem !important;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}

body.vertical-collpsed .navbar-header .navbar-brand-box.ems-header-brand-box {
    width: var(--ems-sidebar-width-collapsed) !important;
    min-width: var(--ems-sidebar-width-collapsed);
    max-width: var(--ems-sidebar-width-collapsed);
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.navbar-header .ems-header-brand-box .logo {
    line-height: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    height: auto;
    min-height: 0;
    width: 100%;
}

/* Only one logo variant visible (match app.css); avoid stacked sm + lg in custom header */
.navbar-header .ems-header-brand-box .logo .logo-sm {
    display: none !important;
}

/* Collapsed sidebar: app.css swaps lg→sm — re-apply here so !important above does not hide the small logo */
body.vertical-collpsed .navbar-header .ems-header-brand-box .logo .logo-lg {
    display: none !important;
}
body.vertical-collpsed .navbar-header .ems-header-brand-box .logo .logo-sm {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

@media (max-width: 991.98px) {
    .navbar-header .ems-header-brand-box .logo .logo-lg {
        display: none !important;
    }
    .navbar-header .ems-header-brand-box .logo .logo-sm {
        display: inline-flex !important;
        align-items: center;
    }
}

.navbar-header .ems-header-brand-box .logo img,
.navbar-header .ems-header-brand-box .ems-header-logo-img {
    max-height: 38px; /* compact topbar */
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
    display: block;
}

/* Static header mark — scale up within sidebar-width column */
.navbar-header .ems-header-brand-box .ems-header-brand-mark {
    max-height: 44px;
    max-width: min(200px, calc(100% - 8px));
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

body.vertical-collpsed .navbar-header .ems-header-brand-box .ems-header-brand-mark {
    max-height: 34px;
    max-width: 56px;
}

/* Collapsed / narrow header: fixed meter glyph (not company wordmark). */
.navbar-header .ems-header-brand-box .ems-header-meter-icon {
    max-height: 34px;
    max-width: 34px;
    width: 34px;
    height: auto;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
}

body.vertical-collpsed .navbar-header .ems-header-brand-box .ems-header-meter-icon {
    max-height: 32px;
    max-width: 32px;
    width: 32px;
}

@media (max-width: 991.98px) {
    .navbar-header .ems-header-brand-box .ems-header-meter-icon {
        max-height: 28px;
        max-width: 28px;
        width: 28px;
    }
}

@media (max-width: 991.98px) {
    .navbar-header .ems-header-brand-box .logo img,
    .navbar-header .ems-header-brand-box .ems-header-logo-img {
        max-height: 28px;
    }

    /* Mobile: sidebar often overlay — don’t reserve full 240px */
    .navbar-header .navbar-brand-box.ems-header-brand-box {
        width: auto !important;
        min-width: 0;
        max-width: min(100px, 26vw);
        justify-content: flex-start;
        padding: 0 0.35rem 0 0.5rem !important;
    }

    body.vertical-collpsed .navbar-header .navbar-brand-box.ems-header-brand-box {
        width: auto !important;
        min-width: 0;
        max-width: min(70px, 18vw);
    }
}

.navbar-header .ems-header-titles {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    align-self: center !important;
    gap: 0.0625rem;
    min-width: 0;
    flex: 1 1 auto; /* fills space to the right of the menu btn; keeps btn next to logos */
    max-width: min(380px, 45vw);
    line-height: 1.2;
    padding: 0;
}

.ems-header-company {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-color);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ems-header-property {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--brand-red);
    letter-spacing: 0.02em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0;
    opacity: 0.95;
}

/* app.css hides .navbar-brand-box at 380px — keep EMS logo + titles visible */
@media (max-width: 380px) {
    .navbar-header .navbar-brand-box.ems-header-brand-box {
        display: flex !important;
        max-width: min(88px, 24vw);
    }

    .navbar-header .ems-header-titles {
        max-width: min(200px, 48vw);
    }
}

.vertical-menu {
    top: var(--ems-topbar-height) !important;
    background: var(--sidebar-bg) !important;
    border-right: 1px solid var(--border-color);
}

/* ─── Main content: scroll only below fixed header (scrollbar starts next to topbar) ─── */
html:has(#ems-main-content),
body:has(#ems-main-content) {
    height: 100%;
    overflow: hidden;
}

@media (min-width: 993px) {
    #ems-main-content.main-content {
        position: fixed !important;
        top: var(--ems-topbar-height) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: var(--ems-sidebar-width) !important;
        width: auto !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body.vertical-collpsed #ems-main-content.main-content {
        left: var(--ems-sidebar-width-collapsed) !important;
    }
}

@media (max-width: 992px) {
    #ems-main-content.main-content {
        position: fixed !important;
        top: var(--ems-topbar-height) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: auto !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* Inside scroll pane: drop extra top padding (pane already starts under header) */
#ems-main-content .page-content {
    padding-top: 12px !important;
    padding-bottom: 48px !important;
    padding-left: calc(24px / 2) !important;
    padding-right: calc(24px / 2) !important;
}

#sidebar-menu #side-menu li > a {
    color: var(--sidebar-text) !important;
}

#sidebar-menu #side-menu li > a:hover {
    background: var(--sidebar-hover-bg) !important;
    color: var(--sidebar-hover-text) !important;
}

#sidebar-menu #side-menu li > a i {
    color: var(--sidebar-text) !important;
    transition: color 0.15s ease;
}

#sidebar-menu #side-menu li > a:hover i {
    color: var(--sidebar-hover-text) !important;
}

#sidebar-menu #side-menu li.mm-active > a,
#sidebar-menu #side-menu li > a.active {
    background: var(--sidebar-hover-bg) !important;
    color: var(--brand-red) !important;
    border-left-color: var(--brand-red) !important;
}

#sidebar-menu #side-menu li.mm-active > a i,
#sidebar-menu #side-menu li > a.active i {
    color: var(--brand-red) !important;
}

.card,
.dropdown-menu,
.modal-content,
.table,
.table > :not(caption) > * > * {
    background-color: var(--surface-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

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

html.dark .bg-white,
html.dark .card.bg-white,
html.dark .dropdown-menu.bg-white {
    background-color: var(--surface-color) !important;
}

.card {
    box-shadow: var(--shadow-soft);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer {
    background: var(--surface-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

.dropdown-item {
    color: var(--text-color) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--surface-alt) !important;
    color: var(--text-color) !important;
}

.dropdown-item i {
    color: color-mix(in srgb, var(--brand-red) 55%, var(--muted-color) 45%) !important;
    transition: color 0.15s ease;
}

.dropdown-item:hover i,
.dropdown-item:focus i,
.dropdown-item.active i,
.dropdown-item:active i {
    color: var(--brand-red) !important;
}

.dropdown-item.text-danger i {
    color: var(--brand-red) !important;
}

/* Global icon theming for pages: normalize primary icon color by theme */
.main-content i.text-primary,
.page-content i.text-primary,
.modal i.text-primary,
.card i.text-primary {
    color: color-mix(in srgb, var(--brand-red) 58%, var(--muted-color) 42%) !important;
}

.main-content a:hover i.text-primary,
.page-content a:hover i.text-primary,
.main-content .btn:hover i.text-primary,
.page-content .btn:hover i.text-primary {
    color: var(--brand-red) !important;
}

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

/* Bootstrap 5 stripes use inset box-shadow + --bs-table-accent-bg, not only background-color */
html.dark .table {
    --bs-table-color: var(--text-color);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-color: var(--text-color);
    --bs-table-striped-bg: color-mix(in srgb, var(--surface-color) 88%, var(--surface-alt) 12%);
    --bs-table-hover-color: var(--text-color);
    --bs-table-hover-bg: var(--surface-alt);
    --bs-table-active-color: var(--text-color);
    --bs-table-active-bg: var(--surface-alt);
    color: var(--text-color);
    border-color: var(--border-color);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: color-mix(in srgb, var(--surface-color) 88%, var(--surface-alt) 12%) !important;
}

html.dark .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: color-mix(in srgb, var(--surface-color) 88%, var(--surface-alt) 12%);
    color: var(--text-color) !important;
}

html.dark .table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-accent-bg: transparent;
    background: color-mix(in srgb, var(--surface-color) 94%, var(--surface-alt) 6%) !important;
}

html.dark .table-hover > tbody > tr:hover > * {
    background: var(--surface-alt) !important;
}

.form-control,
.form-select,
.input-group-text {
    background: var(--input-bg) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

.form-control::placeholder {
    color: var(--muted-color) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-red) !important;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-red) 22%, transparent) !important;
}

html.dark .form-check-input {
    background-color: var(--input-bg);
    border-color: var(--border-color);
}

html.dark .form-check-input:checked {
    background-color: var(--brand-red);
    border-color: var(--brand-red);
}

.text-muted,
.form-text,
.small,
small {
    color: var(--muted-color) !important;
}

a {
    color: color-mix(in srgb, var(--brand-red) 84%, #ffffff 16%);
}

a:hover {
    color: var(--brand-red);
}

.btn-primary,
.btn-info {
    background-color: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-info:hover {
    background-color: var(--brand-red-hover) !important;
    border-color: var(--brand-red-hover) !important;
}

.btn-outline-primary {
    color: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
}

.btn-outline-primary:hover {
    background: var(--brand-red) !important;
    color: #fff !important;
}

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

html.dark .btn-light:hover {
    background: color-mix(in srgb, var(--surface-alt) 80%, #ffffff 20%) !important;
}

.badge.bg-success,
.alert-success,
.btn-success {
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #fff !important;
}

.theme-pref-wrap {
    padding: 0.4rem 0.75rem 0.2rem;
}

.theme-pref-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--muted-color);
    font-weight: 700;
    margin-bottom: 0.45rem;
    letter-spacing: .04em;
}

.theme-pref-buttons {
    display: flex;
    gap: .4rem;
}

.theme-pref-btn {
    flex: 1 1 0;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-color);
    border-radius: 8px;
    font-size: .82rem;
    padding: .35rem .45rem;
}

.theme-pref-btn.active {
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
}

/* Dashboard-specific dark overrides for hardcoded light cards */
html.dark .card-modern,
html.dark .card-box,
html.dark .panel-card,
html.dark .main-card,
html.dark .status-card,
html.dark .projection-card,
html.dark .custom-accordion .card,
html.dark .custom-accordion-arrow .card {
    background: var(--surface-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* Billing block uses --ms-billing-card-bg gradient; do not flatten to surface-color */
html.dark .billing-savings-card {
    color: var(--ms-billing-card-fg) !important;
    border-color: var(--border-color) !important;
}

html.dark .card-title,
html.dark .card-value,
html.dark .mini-stats-wid h1,
html.dark .mini-stats-wid h2,
html.dark .mini-stats-wid h3,
html.dark .mini-stats-wid h4,
html.dark .mini-stats-wid h5,
html.dark .mini-stats-wid h6,
html.dark .mini-stats-wid p,
html.dark .status-card small {
    color: var(--text-color) !important;
}

html.dark .card-footer.bg-info,
html.dark .bg-info {
    background-color: color-mix(in srgb, var(--brand-red) 70%, #0ea5e9 30%) !important;
    color: #fff !important;
}

/* Config pages (Roles, Property, Devices) with custom inline palettes */
html.dark .ru-title,
html.dark .cfg-title,
html.dark .cd-hero h4,
html.dark .gw-item-name,
html.dark .prop-item-name,
html.dark .header-title,
html.dark .prop-detail-head .fw-semibold,
html.dark .property-settings-content .card-header,
html.dark .property-settings-nav .nav-link {
    color: var(--text-color) !important;
}

html.dark .ru-subtitle,
html.dark .cfg-subtitle,
html.dark .gw-item-meta,
html.dark .prop-item-meta,
html.dark .cd-kpi .lbl,
html.dark .property-settings-content .form-label {
    color: var(--muted-color) !important;
}

html.dark .ru-page-hero,
html.dark .cfg-page-hero,
html.dark .cd-hero {
    background: linear-gradient(135deg, rgba(200, 32, 51, 0.16) 0%, rgba(56, 189, 248, 0.12) 100%) !important;
    border-color: var(--border-color) !important;
}

html.dark .ru-tab-pane,
html.dark .ru-table-wrap,
html.dark .cfg-card,
html.dark .property-settings-nav,
html.dark .property-settings-content .card,
html.dark .gw-item,
html.dark .prop-item,
html.dark .cd-card {
    background: var(--surface-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

html.dark .ru-tabs .nav-link,
html.dark .property-settings-nav .nav-link {
    background: transparent !important;
    color: var(--muted-color) !important;
}

html.dark .ru-tabs .nav-link.active,
html.dark .property-settings-nav .nav-link.active {
    background: color-mix(in srgb, var(--surface-alt) 70%, transparent) !important;
    color: #fda4af !important;
    border-left-color: var(--brand-red) !important;
    border-bottom-color: var(--brand-red) !important;
}

/* Property Settings → Billing Information: Bootstrap nav-tabs default active = white bg */
html.dark #propBillingTab.nav-tabs {
    border-bottom-color: var(--border-color) !important;
}

html.dark #propBillingTab .nav-link {
    background: transparent !important;
    color: var(--muted-color) !important;
    border-color: transparent transparent var(--border-color) !important;
}

html.dark #propBillingTab .nav-link:hover,
html.dark #propBillingTab .nav-link:focus {
    color: var(--text-color) !important;
    border-color: var(--border-color) var(--border-color) var(--border-color) !important;
    background: color-mix(in srgb, var(--surface-alt) 45%, transparent) !important;
    isolation: isolate;
}

html.dark #propBillingTab .nav-link.active,
html.dark #propBillingTab .nav-item.show .nav-link {
    background: color-mix(in srgb, var(--surface-alt) 75%, transparent) !important;
    color: #fda4af !important;
    border-color: var(--border-color) var(--border-color) var(--surface-color) !important;
}

html.dark .ru-table-wrap thead th,
html.dark .cd-table th {
    background: var(--surface-alt) !important;
    color: var(--muted-color) !important;
}

html.dark .gw-badge-active.on {
    background: rgba(46, 139, 87, 0.2) !important;
    color: #6ee7b7 !important;
}

html.dark .gw-badge-active.off {
    background: rgba(148, 163, 184, 0.24) !important;
    color: #cbd5e1 !important;
}

/* Reports page specific strips/tables */
html.dark .card > .d-lg-flex,
html.dark .card > .d-flex,
html.dark .card > .row {
    background: var(--surface-alt) !important;
    color: var(--text-color) !important;
}

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

html.dark .table-head th {
    background: var(--surface-alt) !important;
    color: var(--text-color) !important;
}

/* Reports pages: filter rows/date inputs were staying light */
html.dark .card > .d-lg-flex.mb-1.py-1,
html.dark .card > .d-lg-flex.mb-1 {
    background: var(--surface-alt) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

html.dark .card > .d-lg-flex.mb-1.py-1 label,
html.dark .card > .d-lg-flex.mb-1 label {
    color: var(--muted-color) !important;
}

html.dark .card > .d-lg-flex.mb-1.py-1 input[type="date"],
html.dark .card > .d-lg-flex.mb-1 input[type="date"],
html.dark .card > .d-lg-flex.mb-1.py-1 select,
html.dark .card > .d-lg-flex.mb-1 select {
    background: var(--input-bg) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

html.dark .card > .d-lg-flex.mb-1.py-1 input[type="date"]::-webkit-calendar-picker-indicator,
html.dark .card > .d-lg-flex.mb-1 input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
}

html.dark #tRowData thead,
html.dark #tLalLabRowData thead,
html.dark #tReadingConsumptionReport thead,
html.dark #AllMeterReportId thead,
html.dark #PowerEnergyDataId thead,
html.dark #PhaseReadingId thead {
    background: var(--surface-alt) !important;
}

html.dark #tRowData thead th,
html.dark #tLalLabRowData thead th,
html.dark #tReadingConsumptionReport thead th,
html.dark #AllMeterReportId thead th,
html.dark #PowerEnergyDataId thead th,
html.dark #PhaseReadingId thead th {
    background: var(--surface-alt) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

/* ApexCharts (all EMS views): default plot rect is removed so the themed card shows through */
html.dark .apexcharts-background,
html:not(.dark) .apexcharts-background {
    fill: transparent !important;
}

/*
 * Metronic app.css / app-dark.css hard-code Apex greys (#74788d legend, #adb5bd axes, #f8f9fa grid).
 * theme-brand loads after app — override with EMS tokens so Daily / Realtime / Monthly match html.dark.
 */
html.dark .apexcharts-legend-text {
    color: var(--text-color) !important;
    fill: var(--text-color) !important;
}

html:not(.dark) .apexcharts-legend-text {
    color: var(--muted-color) !important;
    fill: var(--muted-color) !important;
}

html.dark .apex-charts text,
html.dark .apexcharts-yaxis text,
html.dark .apexcharts-xaxis text {
    fill: var(--muted-color) !important;
}

html:not(.dark) .apex-charts text,
html:not(.dark) .apexcharts-yaxis text,
html:not(.dark) .apexcharts-xaxis text {
    fill: var(--muted-color) !important;
}

html.dark .apexcharts-gridline {
    stroke: var(--border-color) !important;
}

html:not(.dark) .apexcharts-gridline {
    stroke: color-mix(in srgb, var(--border-color) 80%, transparent) !important;
}

/* Multi-site live demand: axis / legend (plot fill handled globally above) */
html:not(.dark) .live-monitoring-chart-wrap .apexcharts-text,
html:not(.dark) .live-monitoring-chart-wrap .apexcharts-legend-text {
    fill: var(--muted-color) !important;
}

html:not(.dark) .live-monitoring-chart-wrap .apexcharts-yaxis-label,
html:not(.dark) .live-monitoring-chart-wrap .apexcharts-xaxis-label {
    fill: var(--muted-color) !important;
}

html:not(.dark) .live-monitoring-chart-wrap .apexcharts-gridline,
html:not(.dark) .live-monitoring-chart-wrap .apexcharts-xaxis-tick,
html:not(.dark) .live-monitoring-chart-wrap .apexcharts-yaxis-tick {
    stroke: var(--border-color) !important;
}

html.dark .live-monitoring-chart-wrap .apexcharts-text,
html.dark .live-monitoring-chart-wrap .apexcharts-legend-text {
    fill: var(--muted-color) !important;
}

html.dark .live-monitoring-chart-wrap .apexcharts-yaxis-label,
html.dark .live-monitoring-chart-wrap .apexcharts-xaxis-label {
    fill: var(--muted-color) !important;
}

html.dark .live-monitoring-chart-wrap .apexcharts-gridline,
html.dark .live-monitoring-chart-wrap .apexcharts-xaxis-tick,
html.dark .live-monitoring-chart-wrap .apexcharts-yaxis-tick {
    stroke: var(--border-color) !important;
}

html.dark .live-monitoring-chart-wrap .apexcharts-tooltip.apexcharts-theme-light {
    background: var(--surface-color) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Multi-site donut: center total + legend (defaults stay dark-gray on dark cards) */
html.dark #EnergySourcePie .apexcharts-datalabel-label,
html.dark #EnergySourcePie .apexcharts-datalabel-value,
html.dark #LoadMeterPie .apexcharts-datalabel-label,
html.dark #LoadMeterPie .apexcharts-datalabel-value {
    fill: var(--text-color) !important;
}

html.dark #EnergySourcePie .apexcharts-legend-text,
html.dark #LoadMeterPie .apexcharts-legend-text {
    fill: var(--text-color) !important;
    color: var(--text-color) !important;
}

/* Donut inner label group (some Apex builds wrap total in .apexcharts-text) */
html.dark #EnergySourcePie .apexcharts-datalabels-group .apexcharts-text,
html.dark #LoadMeterPie .apexcharts-datalabels-group .apexcharts-text {
    fill: var(--text-color) !important;
}

html.dark .card-modern .sub-text,
html.dark .card-modern .last-reading {
    color: var(--muted-color) !important;
}

/* Multi-site KPI cards: label vs value (override generic .card-title rule) */
html.dark .card-modern .card-title {
    color: var(--muted-color) !important;
}
html.dark .card-modern .card-value {
    color: var(--text-color) !important;
}
html:not(.dark) .card-modern .card-title {
    color: var(--muted-color) !important;
}
html:not(.dark) .card-modern .card-value {
    color: var(--text-color) !important;
}

/* Metric icon tiles — modern glass / tint; SVGs use currentColor */
.card-modern .icon-circle {
    flex-shrink: 0;
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card-modern:hover .icon-circle {
    transform: scale(1.05);
}

/* Light mode */
html:not(.dark) .card-modern .icon-circle.icon-purple {
    background: color-mix(in srgb, #8b5cf6 12%, var(--surface-alt)) !important;
    color: #5b21b6 !important;
    border-color: color-mix(in srgb, #8b5cf6 22%, transparent) !important;
}
html:not(.dark) .card-modern .icon-circle.icon-blue {
    background: color-mix(in srgb, #3b82f6 12%, var(--surface-alt)) !important;
    color: #1d4ed8 !important;
    border-color: color-mix(in srgb, #3b82f6 22%, transparent) !important;
}
html:not(.dark) .card-modern .icon-circle.icon-cyan {
    background: color-mix(in srgb, #06b6d4 12%, var(--surface-alt)) !important;
    color: #0e7490 !important;
    border-color: color-mix(in srgb, #06b6d4 22%, transparent) !important;
}
html:not(.dark) .card-modern .icon-circle.icon-red {
    background: color-mix(in srgb, var(--brand-red) 14%, var(--surface-alt)) !important;
    color: var(--brand-red) !important;
    border-color: color-mix(in srgb, var(--brand-red) 25%, transparent) !important;
}
html:not(.dark) .card-modern .icon-circle.icon-dark {
    background: color-mix(in srgb, #64748b 14%, var(--surface-alt)) !important;
    color: #334155 !important;
    border-color: color-mix(in srgb, #64748b 22%, transparent) !important;
}
html:not(.dark) .card-modern .icon-circle.icon-green {
    background: color-mix(in srgb, var(--brand-green) 14%, var(--surface-alt)) !important;
    color: #15803d !important;
    border-color: color-mix(in srgb, var(--brand-green) 25%, transparent) !important;
}
html:not(.dark) .card-modern .icon-circle.icon-indigo {
    background: color-mix(in srgb, #6366f1 12%, var(--surface-alt)) !important;
    color: #4338ca !important;
    border-color: color-mix(in srgb, #6366f1 22%, transparent) !important;
}
html:not(.dark) .card-modern .icon-circle.icon-orange {
    background: color-mix(in srgb, #f59e0b 14%, var(--surface-alt)) !important;
    color: #b45309 !important;
    border-color: color-mix(in srgb, #f59e0b 22%, transparent) !important;
}

/* Dark mode — subtle glow, no harsh pastel boxes */
html.dark .card-modern .icon-circle.icon-purple {
    background: color-mix(in srgb, #a78bfa 16%, var(--surface-alt)) !important;
    color: #e9d5ff !important;
    border-color: color-mix(in srgb, #a78bfa 32%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, #fff 6%, transparent) inset, 0 4px 20px color-mix(in srgb, #a78bfa 15%, transparent);
}
html.dark .card-modern .icon-circle.icon-blue {
    background: color-mix(in srgb, #60a5fa 14%, var(--surface-alt)) !important;
    color: #bfdbfe !important;
    border-color: color-mix(in srgb, #60a5fa 30%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, #fff 6%, transparent) inset, 0 4px 20px color-mix(in srgb, #60a5fa 14%, transparent);
}
html.dark .card-modern .icon-circle.icon-cyan {
    background: color-mix(in srgb, #22d3ee 12%, var(--surface-alt)) !important;
    color: #a5f3fc !important;
    border-color: color-mix(in srgb, #22d3ee 28%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, #fff 6%, transparent) inset, 0 4px 20px color-mix(in srgb, #22d3ee 12%, transparent);
}
html.dark .card-modern .icon-circle.icon-red {
    background: color-mix(in srgb, var(--brand-red) 18%, var(--surface-alt)) !important;
    color: #fecaca !important;
    border-color: color-mix(in srgb, var(--brand-red) 35%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, #fff 6%, transparent) inset, 0 4px 20px color-mix(in srgb, var(--brand-red) 14%, transparent);
}
html.dark .card-modern .icon-circle.icon-dark {
    background: color-mix(in srgb, #94a3b8 14%, var(--surface-alt)) !important;
    color: #e2e8f0 !important;
    border-color: color-mix(in srgb, #94a3b8 28%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, #fff 5%, transparent) inset;
}
html.dark .card-modern .icon-circle.icon-green {
    background: color-mix(in srgb, #4ade80 12%, var(--surface-alt)) !important;
    color: #bbf7d0 !important;
    border-color: color-mix(in srgb, #4ade80 28%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, #fff 6%, transparent) inset, 0 4px 20px color-mix(in srgb, #4ade80 12%, transparent);
}
html.dark .card-modern .icon-circle.icon-indigo {
    background: color-mix(in srgb, #818cf8 14%, var(--surface-alt)) !important;
    color: #c7d2fe !important;
    border-color: color-mix(in srgb, #818cf8 30%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, #fff 6%, transparent) inset, 0 4px 20px color-mix(in srgb, #818cf8 12%, transparent);
}
html.dark .card-modern .icon-circle.icon-orange {
    background: color-mix(in srgb, #fbbf24 12%, var(--surface-alt)) !important;
    color: #fde68a !important;
    border-color: color-mix(in srgb, #fbbf24 28%, transparent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, #fff 6%, transparent) inset, 0 4px 20px color-mix(in srgb, #fbbf24 12%, transparent);
}

html.dark .card-modern .status-pill.status-normal {
    background: color-mix(in srgb, var(--brand-green) 22%, var(--surface-alt)) !important;
    color: #86efac !important;
    border: 1px solid color-mix(in srgb, var(--brand-green) 35%, transparent);
}
html.dark .card-modern .status-pill.status-warning {
    background: color-mix(in srgb, #fbbf24 18%, var(--surface-alt)) !important;
    color: #fde68a !important;
    border: 1px solid color-mix(in srgb, #fbbf24 30%, transparent);
}
html.dark .card-modern .status-pill.status-critical,
html.dark .card-modern .status-pill.status-poor {
    background: color-mix(in srgb, var(--brand-red) 18%, var(--surface-alt)) !important;
    color: #fecaca !important;
    border: 1px solid color-mix(in srgb, var(--brand-red) 32%, transparent);
}

.card-modern .icon-circle svg {
    color: inherit;
}

/* Multi-site: HR inside forecast cards */
html.dark .main-card hr {
    border-color: var(--border-color) !important;
    opacity: 1;
}

/* TOD bar chart in billing section — axis labels (plot fill: global transparent) */
html.dark .billing-tod-chart-wrap .apexcharts-text,
html.dark .billing-tod-chart-wrap .apexcharts-legend-text {
    fill: var(--muted-color) !important;
}

html:not(.dark) .billing-tod-chart-wrap .apexcharts-text,
html:not(.dark) .billing-tod-chart-wrap .apexcharts-legend-text {
    fill: var(--muted-color) !important;
}

html.dark .billing-tod-chart-wrap .apexcharts-gridline {
    stroke: var(--border-color) !important;
}

html:not(.dark) .billing-tod-chart-wrap .apexcharts-gridline {
    stroke: var(--border-color) !important;
}

/* ==================================================================
   Modals & dialogs — readable titles + brand-aligned header icons
   ================================================================== */

.modal-content {
    background: var(--surface-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

.modal-header {
    background: var(--surface-color) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

.modal-header.bg-light {
    background: var(--surface-alt) !important;
    color: var(--text-color) !important;
}

.modal-title,
.modal-header .modal-title,
.modal-header .fw-semibold {
    color: var(--text-color) !important;
}

.modal-body {
    color: var(--text-color) !important;
}

.modal-footer {
    background: var(--surface-color) !important;
    border-top-color: var(--border-color) !important;
}

/* Title icon square (Gateways, Property, etc.) */
.modal-title-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--brand-red) 16%, var(--surface-alt)) !important;
    color: var(--brand-red) !important;
    border: 1px solid color-mix(in srgb, var(--brand-red) 28%, transparent) !important;
}

.modal-title-icon-wrap i {
    color: inherit !important;
}

.modal-title-icon-wrap--meter {
    background: color-mix(in srgb, var(--brand-green) 16%, var(--surface-alt)) !important;
    color: var(--brand-green) !important;
    border-color: color-mix(in srgb, var(--brand-green) 30%, transparent) !important;
}

.modal-title-icon-wrap--solid {
    background: linear-gradient(135deg, var(--brand-red), var(--brand-red-hover)) !important;
    color: #fff !important;
    border: none !important;
}

.modal-title-icon-wrap--solid i {
    color: #fff !important;
}

/* Bootstrap subtle primary/info on modal titles → theme */
.modal-title .bg-primary-subtle,
.modal-header .bg-primary-subtle,
.modal-title .avatar-title.bg-primary-subtle {
    background: color-mix(in srgb, var(--brand-red) 14%, var(--surface-alt)) !important;
}

.modal-title .text-primary,
.modal-header .text-primary,
.modal-title .avatar-title.text-primary,
.modal-title i.text-primary {
    color: var(--brand-red) !important;
}

.modal-title .bg-info-subtle,
.modal-header .bg-info-subtle {
    background: color-mix(in srgb, var(--brand-green) 14%, var(--surface-alt)) !important;
}

.modal-title .text-info,
.modal-header .text-info {
    color: color-mix(in srgb, var(--brand-green) 78%, var(--muted-color) 22%) !important;
}

/* Legacy bg-primary icon tile in modal title */
.modal-title .rounded.bg-primary.text-white,
.modal-header .rounded.bg-primary.text-white {
    background: linear-gradient(135deg, var(--brand-red), var(--brand-red-hover)) !important;
    color: #fff !important;
    border: none !important;
}

.modal-title .rounded.bg-primary.text-white i {
    color: #fff !important;
}

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

html.dark .modal-header .btn-close:hover {
    opacity: 1;
}

/* Bootstrap spinners: replace default blue “primary” with brand accent */
.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--brand-red) !important;
}

/* KPI / stat lines that used Bootstrap text-primary (avoid blue in modals & dark UI) */
.theme-kpi-accent {
    color: color-mix(in srgb, var(--brand-red) 72%, var(--text-color) 28%) !important;
}

html.dark .theme-kpi-accent {
    color: color-mix(in srgb, #FCA5A5 55%, var(--text-color) 45%) !important;
}

/* Global app dialog (#appDialogModal) — above Bootstrap modals (1055) if stacked */
#appDialogModal.modal {
    z-index: 200000 !important;
}

.app-dialog-icon-wrap {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.app-dialog-icon-wrap--info {
    background: color-mix(in srgb, var(--brand-red) 18%, var(--surface-alt)) !important;
}

.app-dialog-icon-wrap--success {
    background: color-mix(in srgb, var(--brand-green) 18%, var(--surface-alt)) !important;
}

.app-dialog-icon-wrap--warning {
    background: color-mix(in srgb, #f59e0b 20%, var(--surface-alt)) !important;
}

.app-dialog-icon-wrap--error {
    background: color-mix(in srgb, var(--brand-red) 16%, var(--surface-alt)) !important;
}

.app-dialog-type-icon--info {
    color: var(--brand-red) !important;
}

.app-dialog-type-icon--success {
    color: var(--brand-green) !important;
}

.app-dialog-type-icon--warning {
    color: #f59e0b !important;
}

.app-dialog-type-icon--error {
    color: var(--brand-red) !important;
}

#appDialogTitle.app-dialog-title {
    color: var(--text-color) !important;
}

/* Card / page section titles with leading icon */
h1 .theme-title-icon,
h2 .theme-title-icon,
h3 .theme-title-icon,
h4 .theme-title-icon,
h5 .theme-title-icon,
.card-title .theme-title-icon {
    color: color-mix(in srgb, var(--brand-red) 55%, var(--muted-color) 45%) !important;
}

h4.text-primary .theme-title-icon,
h4.text-primary i:first-child {
    color: color-mix(in srgb, var(--brand-red) 58%, var(--muted-color) 42%) !important;
}

html.dark h4.text-primary,
html.dark h5.text-primary {
    color: var(--text-color) !important;
}

html.dark h4.text-primary i,
html.dark h5.text-primary i {
    color: color-mix(in srgb, var(--brand-red) 70%, var(--muted-color) 30%) !important;
}

/* Dashboard cards using .text-dark */
html.dark .card.text-dark {
    color: var(--text-color) !important;
}