/* ===================================================================== SLD – Dark Mode overrides Applied when is set via ThemeToggle.razor ===================================================================== */ body[data-theme="dark"] { /* ── Core colour tokens ──────────────────────────────────────── */ --rz-base: #000000; --rz-on-base: #ffffff; --rz-base-100: #272727; --rz-base-900: #f0f0f0; --rz-text-color: #FFFFFF; --rz-color-black: #e8e8e8; --sld-color-white: #272727; --rz-body-background-color: #000000; --rz-base-background-color: #000000; /* ── Primary / Secondary ─────────────────────────────────────── */ --rz-on-primary: #000000; --rz-secondary: #000000; --rz-on-secondary: #ffffff; /* ── Buttons ────────────────────────────────────────────────────*/ --rz-on-warning: #000; /* ── Panel / Profile menus ───────────────────────────────────── */ --rz-panel-menu-item-active-background-color: none; --rz-panel-menu-item-active-color: #e8e8e8; --rz-profile-menu-top-item-background-color: #212121; --rz-profile-menu-toggle-button-color: #e8e8e8; --rz-profile-menu-background-color: #272727; --rz-menu-item-color: #e8e8e8; /* ── Grid ────────────────────────────────────────────────────── */ --rz-grid-stripe-background-color: #000000; --rz-grid-selected-background-color: #3a3a3a; --rz-grid-selected-color: var(--sld-color-yellow); --rz-grid-header-color: #FFFFFF; --rz-pager-numeric-button-color: #fff; --rz-pager-back-button-color: #fff; --rz-pager-next-button-color: #fff; --rz-pager-numeric-button-hover-background-color: #212121; --rz-pager-numeric-button-hover-color: #fff; --rz-pager-numeric-button-selected-background-color: #212121; /* ── Tree ────────────────────────────────────────────────────── */ --rz-tree-node-selected-background-color: var(--sld-color-yellow); --rz-tree-node-hover-background-color: var(--sld-color-yellow); --rz-tree-node-selected-color: #000000; --rz-tree-node-toggle-color: #A3A3A3; /* ── Selectbar ───────────────────────────────────────────────── */ --rz-selectbar-selected-background-color: #f0f0f0; --rz-selectbar-border: 1px solid #656565; --rz-selectbar-selected-border: 1px solid var(--sld-color-yellow); /* ── Input ───────────────────────────────────────────────────── */ --rz-input-background-color: #272727; --rz-input-hover-background-color: #191919; --rz-input-focus-background-color: #191919; --rz-input-value-color: #ffffff; /* ── DatePicker────────────────────────────────────────────────── */ --rz-datepicker-calendar-selected-hover-background-color: var(--sld-color-yellow); --rz-datepicker-calendar-selected-hover-color: #000000; --rz-datepicker-panel-background-color: #212121; --rz-datepicker-calendar-color: #FFFFFF; --rz-datepicker-calendar-header-color: #A3A3A3; /* ── overlay──────────────────────────────────────────────────── */ --rz-overlay-background-color: #000000; --rz-grid-filter-buttons-background-color: #000; } /* ── html / body background ─────────────────────────────────────── */ body[data-theme="dark"], body[data-theme="dark"] html { background-color: #000000; color: #e8e8e8; } /* ── Header row ─────────────────────────────────────────────────── */ body[data-theme="dark"] .sld-header-row { border-bottom: 1px solid #2e2e2e; background-color: #212121; } /* ── Radzen layout / body area ───────────────────────────────────── */ body[data-theme="dark"] .rz-body, body[data-theme="dark"] .rz-layout { background-color: #000000; } /* Default: hide dark logo until dark mode is active */ .logo-dark { display: none; } /* Swap header logo for dark mode */ body[data-theme="dark"] .logo-light { display: none !important; } body[data-theme="dark"] .logo-dark { display: inline-block !important; } /* ── Radzen cards / panels ───────────────────────────────────────── */ body[data-theme="dark"] .rz-card, body[data-theme="dark"] .rz-panel, body[data-theme="dark"] .rz-panel-titlebar { background-color: #272727; } body[data-theme="dark"] .rz-text-body1 { color: #FFFFFF; } /* ── Radzen data grid ────────────────────────────────────────────── */ body[data-theme="dark"] .rz-datatable, body[data-theme="dark"] .rz-grid-table, body[data-theme="dark"] .rz-datatable-header, body[data-theme="dark"] .rz-datatable-footer { background-color: #000000; color: #e8e8e8; border-color: #333333; } /* DataGrid header (material-base.css compatible selectors) */ body[data-theme="dark"] .rz-datatable .rz-grid-table thead > tr > th, body[data-theme="dark"] .rz-datatable .rz-grid-table .rz-datatable-thead th, body[data-theme="dark"] .rz-datatable .rz-sortable-column, body[data-theme="dark"] .rz-datatable .rz-column-title, body[data-theme="dark"] .rz-datatable .rz-column-title-content { background-color: #242424; color: #f0f0f0; border-color: #3a3a3a; } body[data-theme="dark"] .rz-datatable .rz-grid-table thead > tr > th:hover, body[data-theme="dark"] .rz-datatable .rz-sortable-column:hover, body[data-theme="dark"] .rz-datatable .rz-sortable-column:focus-visible { background-color: #2d2d2d; color: #ffffff; } /* Frozen/sticky header cells */ body[data-theme="dark"] .rz-datatable .rz-grid-table thead > tr > th.rz-frozen-cell, body[data-theme="dark"] .rz-datatable .rz-grid-table thead > tr > th.rz-frozen-column, body[data-theme="dark"] .rz-datatable .rz-grid-table thead > tr > th[style*="position: sticky"] { background-color: #242424; color: #f0f0f0; border-color: #3a3a3a; } /* Sort/filter icons inside headers */ body[data-theme="dark"] .rz-datatable .rz-sortable-column .rzi, body[data-theme="dark"] .rz-datatable .rz-column-title-content .rzi, body[data-theme="dark"] .rz-datatable .rz-cell-filter .rzi { color: #d8d8d8; } body[data-theme="dark"] .rz-datatable th, body[data-theme="dark"] .rz-datatable td { border-color: #2e2e2e; } /* Material buttons */ body[data-theme="dark"] .rz-button.rz-light { background-color: #333; color: #FFF; } body[data-theme="dark"] .rz-selectbar .rz-button:hover { background-color: #2e2e2e; } /* Material striped tables */ body[data-theme="dark"] .rz-datatable .rz-grid-table-striped > tbody > tr > td, body[data-theme="dark"] .rz-datatable .rz-grid-table-striped > tbody > tr > th { background-color: #000000; color: #e8e8e8; } body[data-theme="dark"] .rz-datatable .rz-grid-table-striped > tbody > tr:nth-child(even) > td, body[data-theme="dark"] .rz-datatable .rz-grid-table-striped > tbody > tr:nth-child(even) > th { background-color: #212121; } body[data-theme="dark"] .rz-datatable .rz-grid-table-striped > tbody > tr:nth-child(odd) > td, body[data-theme="dark"] .rz-datatable .rz-grid-table-striped > tbody > tr:nth-child(odd) > th { background-color: #000000; } body[data-theme="dark"] .rz-datatable .rz-grid-table-striped > tbody > tr:hover > td, body[data-theme="dark"] .rz-datatable .rz-grid-table-striped > tbody > tr:hover > th, body[data-theme="dark"] .rz-datatable .rz-grid-table-striped > tbody > tr.rz-state-hover > td, body[data-theme="dark"] .rz-datatable .rz-grid-table-striped > tbody > tr.rz-state-hover > th { background-color: #2d2d2d; } body[data-theme="dark"] .rz-datatable .rz-grid-table-striped > tbody > tr.rz-state-highlight > td, body[data-theme="dark"] .rz-datatable .rz-grid-table-striped > tbody > tr.rz-state-highlight > th, body[data-theme="dark"] .rz-datatable .rz-grid-table-striped > tbody > tr.rz-state-selected > td, body[data-theme="dark"] .rz-datatable .rz-grid-table-striped > tbody > tr.rz-state-selected > th, body[data-theme="dark"] .rz-datatable .rz-grid-table-striped > tbody > tr.rz-selection-row > td, body[data-theme="dark"] .rz-datatable .rz-grid-table-striped > tbody > tr.rz-selection-row > th { background-color: #3a3a3a; color: var(--sld-color-yellow); } /* Fallback for non-striped grid tables */ body[data-theme="dark"] .rz-datatable .rz-grid-table > tbody > tr > td, body[data-theme="dark"] .rz-datatable .rz-grid-table > tbody > tr > th { background-color: #000000; color: #e8e8e8; } /* Grid body text color (dark mode): keep all row content readable */ body[data-theme="dark"] .rz-datatable .rz-grid-table > tbody > tr > td .rz-cell-data { color: #ffffff; } /* Keep links visible and consistent inside grid cells */ body[data-theme="dark"] .rz-datatable .rz-grid-table > tbody > tr > td a, body[data-theme="dark"] .rz-datatable .rz-grid-table > tbody > tr > td a:visited { color: #e8e8e8; } .grid-btn-col { .rz-button.rz-base.rz-shade-default { color: #000000; background-color: var(--sld-color-yellow); } } /* ── Radzen dropdowns / inputs ───────────────────────────────────── */ body[data-theme="dark"] .rz-dropdown, body[data-theme="dark"] .rz-dropdown-panel, body[data-theme="dark"] .rz-dropdown-items-wrapper, body[data-theme="dark"] .rz-dropdown-item { background-color: #272727; color: #e8e8e8; border-color: #656565; } body[data-theme="dark"] .rz-dropdown-item:hover, body[data-theme="dark"] .rz-dropdown-item.rz-state-highlight { background-color: #2e2e2e; } body[data-theme="dark"] .rz-input, body[data-theme="dark"] .rz-textbox, body[data-theme="dark"] .rz-textarea, body[data-theme="dark"] input, body[data-theme="dark"] textarea, body[data-theme="dark"] select { background-color: #2a2a2a; color: #e8e8e8; border-color: #444444; } body[data-theme="dark"] input::placeholder, body[data-theme="dark"] textarea::placeholder, body[data-theme="dark"] select::placeholder{ color: #e8e8e8; } /* ── Radzen dialogs ──────────────────────────────────────────────── */ body[data-theme="dark"] .rz-dialog { background-color: #272727; color: #e8e8e8; } body[data-theme="dark"] .rz-dialog-titlebar { background-color: #252525; color: #e8e8e8; } /* Dialog/login background mask – replace white fill with dark */ body[data-theme="dark"] .rz-dialog-mask::before, body[data-theme="dark"] #login-page-mask::before, body[data-theme="dark"] #account-settings-page-mask::before { background-color: #000; background-image: url("dialogbg1-dark.png"); background-repeat: no-repeat; background-position-x: right; background-position-y: bottom; opacity: 0.8; } /* Dialog/login background mask – replace white fill with dark */ body[data-theme="dark"] .rz-dialog-mask::after, body[data-theme="dark"] #login-page-mask::after, body[data-theme="dark"] #account-settings-page-mask::after { background-image: url("dialogbg2-dark.png"); } /* ── Login / Account-settings content panel ─────────────────────── */ body[data-theme="dark"] #login-page-content, body[data-theme="dark"] #account-settings-page-content { background-color: #272727; color: #e8e8e8; } body[data-theme="dark"] .forgot-password-link { color: #b0b0b0; } body[data-theme="dark"] .sld-login-container a, body[data-theme="dark"] .sld-login-container .btn-link { color: var(--sld-color-yellow); } /*** ── Metric page ─────────────────────────────────────────────── ***/ body[data-theme="dark"] .date-control-stack { .rz-card { background-color: #000 !important; border: none; } } body[data-theme="dark"] .rz-dropdown:not(:disabled):not(.rz-state-disabled):hover{ select { background-color: red; } } body[data-theme="dark"] .metric-date-view-selector-bar, .month-picker { .rz-button.rz-state-active { background-color: var(--sld-color-yellow); .rz-button-text { color: #000000; } } .rz-button-text { color: #FFFFFF; } } body[data-theme="dark"] .month-picker { .btn-action { background-color: #333333; color: #FFFFFF; } .rz-button.rz-variant-outlined.rz-light.rz-shade-default.month-btn { color: #FFFFFF; background-color: unset; border: 1px solid #656565; box-shadow: none; } .month-btn.selected { background-color: var(--sld-color-yellow); color: #000000; border: 1px solid var(--sld-color-yellow); font-weight:bold; } } /* ── Metric header cards ─────────────────────────────────────────── */ body[data-theme="dark"] .metric-header-card { background-color: #191600; border-color: var(--sld-color-yellow); color: var(--sld-color-yellow); h3 { color: var(--sld-color-yellow); } p { color: var(--sld-color-yellow); } } body[data-theme="dark"] .metric-header-card.disabled { background-color: #1a1a1a; } /* ── Metric chart cards ─────────────────────────────────────────── */ body[data-theme="dark"] .metric-charts-container { .rz-card { border: none; } } /* ── Metric tree ─────────────────────────────────────────────────── */ body[data-theme="dark"] .metric-tree { border: none; } body[data-theme="dark"] .rz-treenode { background-color: #000; } body[data-theme="dark"] .sld-state-selected { .rz-tree-toggler, .rz-treenode-label { color: #000000; } } /* ── App version label ───────────────────────────────────────────── */ body[data-theme="dark"] #app-version { color: #666666; } /* ── Navigation menu ─────────────────────────────────────────────── */ body[data-theme="dark"] #main-navigation .rz-navigation-item-active { color: #e8e8e8; border-color: #e8e8e8; } body[data-theme="dark"] #main-navigation .rz-navigation-item.rz-state-active { border-color: #e8e8e8; } /* Nav menu in dark mode */ body[data-theme="dark"] #main-navigation, body[data-theme="dark"] #main-navigation .rz-panel-menu, body[data-theme="dark"] #main-navigation .rz-navigation-item, body[data-theme="dark"] #main-navigation .rz-navigation-item-link { background-color: transparent; } body[data-theme="dark"] #main-navigation { .rz-navigation-item-icon, .rz-navigation-item-text { color: #A3A3A3; } .rz-navigation-item-link-active { border-bottom: 1px solid #e8e8e8; background-color: unset; .rz-navigation-item-icon, .rz-navigation-item-text { color: #ffffff; } } .rz-navigation-item-link:hover, .rz-navigation-item-link:focus-visible { background-color: #2a2a2a; color: #656565; } } body[data-theme="dark"] #main-navigation .rz-navigation-item-link { border-color: transparent; } body[data-theme="dark"] #main-navigation .rz-navigation-item.rz-state-active, body[data-theme="dark"] #main-navigation .rz-navigation-item-active, body[data-theme="dark"] #main-navigation .rz-navigation-item-active .rz-navigation-item-link { background-color: transparent; border-color: #e8e8e8; } body[data-theme="dark"] #main-navigation .rz-navigation-item-active .rz-navigation-item-icon, body[data-theme="dark"] #main-navigation .rz-navigation-item-active .rz-navigation-item-text { color: #ffffff; } /* ── Language menu ───────────────────────────────────────────────── */ body[data-theme="dark"] .language-menu { border-color: #e8e8e8 !important; } body[data-theme="dark"] .language-menu-option { color: #e8e8e8 !important; } /* ── Radzen profile menu ─────────────────────────────────────────── */ body[data-theme="dark"] .rz-profile-menu-popup, body[data-theme="dark"] .rz-menu-popup { background-color: #272727; color: #e8e8e8; border-color: #333333; } body[data-theme="dark"] .rz-menu-item:hover, body[data-theme="dark"] .rz-profile-menu-item:hover { background-color: #2e2e2e; } /* ── Translations table ──────────────────────────────────────────── */ body[data-theme="dark"] #translations-overview .table-striped > tbody > tr:nth-of-type(2n+1) > * { --bs-table-bg-type: #222 !important; background-color: #222222 !important; } body[data-theme="dark"] #translations-overview .language-translation:focus { border-color: var(--sld-color-yellow); } /* ── Bootstrap table ─────────────────────────────────────────────── */ body[data-theme="dark"] .table { color: #e8e8e8; border-color: #333333; } body[data-theme="dark"] .table > :not(caption) > * > * { background-color: #272727; color: #e8e8e8; border-color: #333333; } /* ── Bootstrap form controls ─────────────────────────────────────── */ body[data-theme="dark"] .form-control, body[data-theme="dark"] .form-select { background-color: #2a2a2a; color: #e8e8e8; border-color: #444444; } body[data-theme="dark"] .form-control:focus, body[data-theme="dark"] .form-select:focus { background-color: #2a2a2a; color: #e8e8e8; } body[data-theme="dark"] .form-label, body[data-theme="dark"] label { color: #e8e8e8; } /* ── Bootstrap buttons (non-Radzen) ──────────────────────────────── */ body[data-theme="dark"] .btn-white { background-color: #2a2a2a; color: #e8e8e8; border-color: #666666; } /* ── Headings / links ────────────────────────────────────────────── */ body[data-theme="dark"] h1, body[data-theme="dark"] h2, body[data-theme="dark"] h3, body[data-theme="dark"] h4, body[data-theme="dark"] h5, body[data-theme="dark"] h6 { color: #e8e8e8; } body[data-theme="dark"] #home-page .contact-link { color: #e8e8e8 !important; } /* ── Theme toggle button itself ──────────────────────────────────── */ body[data-theme="dark"] .theme-toggle-btn { color: #e8e8e8 !important; box-shadow: none !important; border: none; } /* ── Scrollbar (Chromium) ────────────────────────────────────────── */ body[data-theme="dark"] ::-webkit-scrollbar { background-color: #1a1a1a; } body[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #444444; border-radius: 4px; }