/* Dark-mode override layer. Activated by data-theme="dark" on (set by window.texwin.theme). The Radzen base stylesheet is swapped to material-dark-base.css at the same time, which flips the framework --rz-* surface and text colours; this file only re-points the app's CUSTOM light-hardcoded variables and the handful of surfaces that force white, so the shell reads as one coherent dark theme. Light mode is untouched (every rule is scoped under html[data-theme="dark"]). */ html[data-theme="dark"] { /* Neutral brand backgrounds (root.css hardcodes light greys here). */ --texwin-base-color-muted: #23262b; --cust-background: #1b1e23; --cust-background-light: #24272d; /* figma UI surface ramp (root.css derives these from --cust-background via color-mix; pin them dark). */ --fui-bg1: #1b1e23; --fui-bg2: #14161a; --fui-bg3: #23262b; --fui-bg4: #2c3037; /* Softer secondary text on dark. */ --rz-secondary: #b8b8b8; --rz-secondary-light: #cfcfcf; --rz-secondary-lighter: #8a8a8a; color-scheme: dark; } /* Header + sidebar + cards that use the .rz-background-color-white utility must follow the dark surface. */ html[data-theme="dark"] .rz-background-color-white, html[data-theme="dark"] .rz-header, html[data-theme="dark"] .rz-sidebar, html[data-theme="dark"] .sidebar-header { background-color: var(--rz-base-background-color) !important; color: var(--rz-text-color) !important; } /* Body/page ground. */ html[data-theme="dark"] body, html[data-theme="dark"] .main-body-container { background-color: var(--rz-body-background-color) !important; color: var(--rz-text-color) !important; } /* App-owned surfaces that hardcode white in site.css. */ html[data-theme="dark"] .tx-overview-section, html[data-theme="dark"] .notifications-dialog-shell { background: var(--rz-base-background-color) !important; color: var(--rz-text-color) !important; } /* Keep the circular user avatar legible (it is already a dark chip in light mode). */ html[data-theme="dark"] .tx-avatar { background: #6b6763 !important; color: #fff !important; } /* The active breadcrumb crumb is near-black in light mode; lift it on dark. */ html[data-theme="dark"] .tx-breadcrumbs .rz-breadcrumb-item:last-child { color: var(--rz-text-color); } /* Header profile-menu strip is hardcoded white (figmaui .fui-profile-menu) — blend it into the dark header so there is no white patch beside the avatar. */ html[data-theme="dark"] .rz-profile-menu, html[data-theme="dark"] .fui-profile-menu { background-color: transparent !important; } /* …but the OPEN dropdown panel needs a solid dark surface to stay readable. */ html[data-theme="dark"] .fui-profile-menu .rz-navigation-menu { background-color: var(--rz-base-background-color) !important; border: 1px solid var(--rz-border-color, #3a3f47); } /* Segmented toggles (MudToggleGroup .fui-button-group — e.g. Connect All/In-Progress/Completed and the attachments All/Documents/Photos): the selected pill is white in light mode, which leaves light text on white in dark. Give it a visible elevated surface + light text. */ html[data-theme="dark"] .fui-button-group .mud-toggle-item-selected, html[data-theme="dark"] .fui-button-group .mud-button-filled { background-color: #33383f !important; color: #fff !important; } html[data-theme="dark"] .fui-button-group .mud-toggle-item-selected .mud-button-label, html[data-theme="dark"] .fui-button-group .mud-button-filled .mud-button-label { color: #fff !important; } html[data-theme="dark"] .fui-button-group .mud-toggle-item { color: var(--rz-text-color); } /* Radzen SelectBar variant (same treatment, wherever it is used). */ html[data-theme="dark"] .fui-selectbar.rz-selectbar, html[data-theme="dark"] .rz-selectbar { --rz-selectbar-selected-background-color: #33383f; --rz-selectbar-selected-color: #fff; } /* Aging-quotes "follow up" banner (Home dashboard + Connect quote list): the light-mode style pins a light pink background (!important), which leaves the dark-mode light text washed out on it. Repaint it as a dark red-tinted alert surface so the (already light) text reads clearly. */ html[data-theme="dark"] .quote-aging-banner { background-color: color-mix(in srgb, #e53935 16%, #1b1e23 84%) !important; border: 1px solid color-mix(in srgb, #e53935 42%, transparent); } /* ---- Command palette (⌘K) + its header launcher pill ---- The pill/keycaps and the overlay hardcoded light greys; repoint them to dark surfaces so the search affordance and its icon stay legible on the dark header. */ html[data-theme="dark"] .tx-cmdk-pill { background: var(--rz-base-200) !important; border-color: var(--rz-base-400) !important; color: var(--rz-text-color) !important; } html[data-theme="dark"] .tx-cmdk-pill kbd { background: var(--rz-base-300); border-color: var(--rz-base-500); color: var(--rz-text-color); } /* Overlay panel + rows (the fallback literals were light). */ html[data-theme="dark"] .tx-cmdk-panel { background: var(--rz-base-background-color) !important; color: var(--rz-text-color) !important; } html[data-theme="dark"] .tx-cmdk-search { border-bottom-color: var(--rz-base-300); } html[data-theme="dark"] .tx-cmdk-footer { border-top-color: var(--rz-base-300); } html[data-theme="dark"] .tx-cmdk-esc, html[data-theme="dark"] .tx-cmdk-footer kbd { background: var(--rz-base-300); border-color: var(--rz-base-500); color: var(--rz-text-color); } html[data-theme="dark"] .tx-cmdk-row-active { background: var(--rz-base-300); } /* ---- Building Designer dark mode ---- The designer's scoped CSS hardcodes light surfaces/text/borders. Blazor scoped CSS can't reference a global ancestor (no :global/::deep for ancestors), so the dark repoints live here as global rules with !important to beat the scoped [b-*] selectors (this file loads before the scoped bundle). */ /* Ground + studio canvas backdrop (Babylon canvas is transparent; this gradient shows through). */ html[data-theme="dark"] .designer-shell { background: #14161a !important; } html[data-theme="dark"] .designer-canvas-wrap { background: linear-gradient(#262a30, #15171b) !important; border-color: #3a3f46 !important; } /* Panels / buttons / menus / selects (white → dark surface). */ html[data-theme="dark"] .sv-panel { background: #1b1e23 !important; border-left-color: #3a3f46 !important; } html[data-theme="dark"] .sv-view-toggle, html[data-theme="dark"] .sv-loc-btn, html[data-theme="dark"] .sv-loc-menu, html[data-theme="dark"] .sv-btn-outline, html[data-theme="dark"] .designer-select { background: #23262b !important; border-color: #3a3f46 !important; color: #e6e6e6 !important; } /* Hover surfaces. */ html[data-theme="dark"] .sv-view-toggle:hover, html[data-theme="dark"] .sv-loc-btn:hover, html[data-theme="dark"] .sv-loc-item:hover, html[data-theme="dark"] .sv-step:hover, html[data-theme="dark"] .designer-card:hover, html[data-theme="dark"] .designer-openings-table tr:hover { background: #2c3037 !important; border-color: #4a4f57 !important; } /* Text: dark → light. */ html[data-theme="dark"] .designer-h1, html[data-theme="dark"] .sv-title, html[data-theme="dark"] .sv-step, html[data-theme="dark"] .sv-step-icon, html[data-theme="dark"] .designer-card, html[data-theme="dark"] .sv-loc-item, html[data-theme="dark"] .designer-openings-table th, html[data-theme="dark"] .designer-openings-table td { color: #e6e6e6 !important; } html[data-theme="dark"] .designer-dims, html[data-theme="dark"] .sv-size, html[data-theme="dark"] .sv-meta, html[data-theme="dark"] .designer-muted { color: #a8adb5 !important; } /* Borders. */ html[data-theme="dark"] .sv-accordion, html[data-theme="dark"] .sv-step, html[data-theme="dark"] .sv-step-body, html[data-theme="dark"] .designer-card, html[data-theme="dark"] .designer-swatch, html[data-theme="dark"] .designer-openings-table th, html[data-theme="dark"] .designer-openings-table tr { border-color: #3a3f46 !important; } /* Selected / red-tinted states. */ html[data-theme="dark"] .sv-loc-item.selected, html[data-theme="dark"] .designer-card.selected, html[data-theme="dark"] .sv-badge, html[data-theme="dark"] .sv-btn-outline:hover { background: rgba(239, 59, 66, 0.18) !important; color: #ff6b70 !important; border-color: rgba(239, 59, 66, 0.55) !important; } /* Links + warn rows + estimate banner. */ html[data-theme="dark"] .sv-meta a, html[data-theme="dark"] .sv-link { color: #6ba3ff !important; } html[data-theme="dark"] .designer-openings-table tr.warn { background: rgba(224, 134, 0, 0.16) !important; } html[data-theme="dark"] .designer-estimate { background: #12333a !important; color: #7fd3e0 !important; } /* Building Designer — the config panel + its sections (the actual classes are .designer-panel / .designer-section / .sv-* headers; the earlier block missed these, leaving the right panel white). */ html[data-theme="dark"] .designer-panel { background: #1b1e23 !important; border-left-color: #3a3f46 !important; } html[data-theme="dark"] .sv-body { border-bottom-color: #3a3f46 !important; } html[data-theme="dark"] .designer-panel-footer { border-top-color: #3a3f46 !important; } html[data-theme="dark"] .designer-section, html[data-theme="dark"] .sv-price-label, html[data-theme="dark"] .sv-payment { color: #a8adb5 !important; } html[data-theme="dark"] .designer-slider-label { color: #e6e6e6 !important; } html[data-theme="dark"] .sv-pill { background: rgba(239, 59, 66, 0.18) !important; color: #ff6b70 !important; }