/* ============================================================ Dark Mode Overrides Loaded after desktop.css. All selectors prefixed with .dark-mode (applied on ) for higher specificity. Palette: warm charcoal (lighter dark grey, no purple tint) - Surface 1: rgba(28, 28, 32, *) #1c1c20 (deepest) - Surface 2: rgba(36, 36, 41, *) #242429 (mid panels) - Surface 3: rgba(46, 46, 52, *) #2e2e34 (inputs/raised) - Border: rgba(62, 62, 70, *) #3e3e46 - Text 1: #e4e4e7 (primary) - Text 2: #c4c4c8 (body) - Text 3: #8e8e96 (muted) - Accent: #2C9C88 / #5eead4 ============================================================ */ /* =========================================== 1. Desktop Background =========================================== */ .dark-mode .desktop-bg { background: linear-gradient(to bottom, #0e2f34 0%, #123a41 20%, #0f2d32 45%, #0c1f24 70%, #0a1a1e 100%); } .dark-mode .desktop-fab .mobile-only { background: rgba(148, 163, 184, 0.2) !important; } /* =========================================== 2. App Window =========================================== */ .dark-mode .app-window { background: rgba(28, 28, 32, 0.7); border-color: rgba(62, 62, 70, 0.4); } .dark-mode .app-window__titlebar { background: rgba(28, 28, 32, 0.9); border-color: rgba(62, 62, 70, 0.5); } .dark-mode .app-window__title { color: #e4e4e7; } .dark-mode .app-window__deal { color: #5eead4; background: rgba(28, 28, 32, 0.6); border-color: rgba(62, 62, 70, 0.4); } .dark-mode .app-window__btn { color: #8e8e96; } .dark-mode .app-window__btn--back { color: #8e8e96; } .dark-mode .app-window__body { background: rgba(28, 28, 32, 0.85); } /* =========================================== 3. Dock =========================================== */ .dark-mode .dock { background: rgba(28, 28, 32, 0.5); border-color: rgba(62, 62, 70, 0.3); } /* =========================================== 4. All-Apps Grid =========================================== */ .dark-mode .app-card { background: rgba(28, 28, 32, 0.4); border-color: rgba(62, 62, 70, 0.3); } .dark-mode .app-card:hover { background: rgba(28, 28, 32, 0.6); } /* =========================================== 5. Shared Modal Chrome =========================================== */ .dark-mode .work-modal, .dark-mode .report-modal, .dark-mode .deal-modal, .dark-mode .settings-modal, .dark-mode .builder-window { border-color: rgba(62, 62, 70, 0.5); } .dark-mode .work-modal .k-window-titlebar, .dark-mode .report-modal .k-window-titlebar, .dark-mode .deal-modal .k-window-titlebar, .dark-mode .settings-modal .k-window-titlebar, .dark-mode .builder-window .k-window-titlebar { background: rgba(28, 28, 32, 0.85); border-color: rgba(62, 62, 70, 0.4); color: #e4e4e7; } .dark-mode .work-modal .k-window-content, .dark-mode .report-modal .k-window-content, .dark-mode .deal-modal .k-window-content, .dark-mode .settings-modal .k-window-content, .dark-mode .builder-window .k-window-content { background: rgba(28, 28, 32, 0.95); } /* =========================================== 6. Shared Forms =========================================== */ .dark-mode .work-modal .k-form .k-form-label, .dark-mode .work-modal .k-form .k-label, .dark-mode .report-modal .k-form .k-form-label, .dark-mode .report-modal .k-form .k-label, .dark-mode .deal-modal .k-form .k-form-label, .dark-mode .deal-modal .k-form .k-label, .dark-mode .deal-glass .k-form .k-form-label, .dark-mode .deal-glass .k-form .k-label, .dark-mode .settings-glass .k-form .k-form-label, .dark-mode .settings-glass .k-form .k-label, .dark-mode .settings-glass .k-form label, .dark-mode .settings-glass .k-form-legend, .dark-mode .account-glass .k-form .k-form-label, .dark-mode .account-glass .k-form .k-label, .dark-mode .account-glass .k-form-legend, .dark-mode .account-glass .k-form label, .dark-mode .builder-window .k-form .k-form-label, .dark-mode .builder-window .k-form .k-label, .dark-mode .builder-window .k-form label, .dark-mode .builder-window label { color: #c4c4c8; } .dark-mode .work-modal .k-form .k-form-group-label, .dark-mode .settings-glass .k-form .k-form-group-label, .dark-mode .account-glass .k-form .k-form-group-label { color: #8e8e96; } .dark-mode .work-modal .k-form .k-textbox, .dark-mode .work-modal .k-form .k-input, .dark-mode .work-modal .k-form .k-picker, .dark-mode .work-modal .k-form .k-combobox, .dark-mode .report-modal .k-form .k-textbox, .dark-mode .report-modal .k-form .k-input, .dark-mode .report-modal .k-form .k-combobox, .dark-mode .deal-modal .k-form .k-textbox, .dark-mode .deal-modal .k-form .k-input, .dark-mode .deal-glass .k-form .k-textbox, .dark-mode .deal-glass .k-form .k-input, .dark-mode .deal-glass .k-form .k-picker, .dark-mode .deal-glass .k-form .k-dropdownlist, .dark-mode .deal-glass .k-form .k-combobox, .dark-mode .settings-glass .k-form .k-textbox, .dark-mode .settings-glass .k-form .k-input, .dark-mode .settings-glass .k-form .k-input-solid, .dark-mode .settings-glass .k-form .k-picker, .dark-mode .settings-glass .k-form .k-combobox, .dark-mode .settings-glass .k-form .k-maskedtextbox, .dark-mode .settings-glass .k-form .k-textarea, .dark-mode .account-glass .k-form .k-textbox, .dark-mode .account-glass .k-form .k-input, .dark-mode .account-glass .k-form .k-input-solid, .dark-mode .builder-window .k-form .k-textbox, .dark-mode .builder-window .k-form .k-input, .dark-mode .builder-window .k-form .k-input-solid, .dark-mode .builder-window .k-form .k-picker, .dark-mode .builder-window .k-form .k-combobox, .dark-mode .builder-window .k-form .k-dropdownlist, .dark-mode .builder-window .k-form .k-multiselect, .dark-mode .builder-window .k-form .k-numerictextbox, .dark-mode .builder-window .k-form .k-datepicker, .dark-mode .builder-window .k-form .k-textarea, .dark-mode .builder-window .k-form select, .dark-mode .builder-window .k-form input[type="text"], .dark-mode .builder-window input[type="text"], .dark-mode .builder-window select { background: rgba(46, 46, 52, 0.7); border-color: rgba(62, 62, 70, 0.6); color: #e4e4e7; } .dark-mode .work-modal .k-form .k-form-legend, .dark-mode .work-modal .k-form .k-form-fieldset > legend { color: #e4e4e7; border-color: rgba(62, 62, 70, 0.4); } /* form-control overrides */ .dark-mode .work-modal .form-control, .dark-mode .deal-glass .form-control, .dark-mode .builder-window .form-control { background: rgba(46, 46, 52, 0.7); border-color: rgba(62, 62, 70, 0.6); color: #e4e4e7; } .dark-mode .deal-glass .form-control:focus { background: rgba(46, 46, 52, 0.9); } .dark-mode .deal-glass .form-select, .dark-mode .deal-modal .form-select { background: rgba(46, 46, 52, 0.7); border-color: rgba(62, 62, 70, 0.5); color: #e4e4e7; } /* =========================================== 7. Shared Grids & TreeLists =========================================== */ /* TreeList */ .dark-mode .work-modal .k-treelist, .dark-mode .report-modal .k-treelist, .dark-mode .deal-modal .k-treelist, .dark-mode .deal-glass .k-treelist, .dark-mode .settings-glass .k-treelist { background: transparent; border-color: rgba(62, 62, 70, 0.4); } .dark-mode .work-modal .k-treelist .k-grid-header, .dark-mode .report-modal .k-treelist .k-grid-header, .dark-mode .deal-modal .k-treelist .k-grid-header, .dark-mode .deal-glass .k-treelist .k-grid-header, .dark-mode .settings-glass .k-treelist .k-grid-header { background: rgba(36, 36, 41, 0.5); border-color: rgba(62, 62, 70, 0.4); } .dark-mode .work-modal .k-treelist .k-grid-header th, .dark-mode .report-modal .k-treelist .k-grid-header th, .dark-mode .deal-modal .k-treelist .k-grid-header th, .dark-mode .deal-glass .k-treelist .k-grid-header th, .dark-mode .settings-glass .k-treelist .k-grid-header th { color: #8e8e96; border-color: rgba(62, 62, 70, 0.3); } .dark-mode .work-modal .k-treelist td, .dark-mode .report-modal .k-treelist td, .report-modal .k-treelist tr.k-selected > td, .dark-mode .deal-modal .k-treelist td, .dark-mode .deal-glass .k-treelist td, .dark-mode .settings-glass .k-treelist td { color: #c4c4c8; border-color: rgba(62, 62, 70, 0.2); } .dark-mode .work-modal .k-treelist .k-toolbar, .dark-mode .report-modal .k-treelist .k-toolbar, .dark-mode .deal-modal .k-treelist .k-toolbar, .dark-mode .deal-glass .k-treelist .k-toolbar, .dark-mode .settings-glass .k-treelist .k-toolbar { background: rgba(36, 36, 41, 0.4); border-color: rgba(62, 62, 70, 0.3); } .dark-mode .work-modal .k-treelist .k-pager, .dark-mode .report-modal .k-treelist .k-pager, .dark-mode .deal-glass .k-treelist .k-pager { background: rgba(36, 36, 41, 0.4); border-color: rgba(62, 62, 70, 0.3); color: #8e8e96; } /* Grid */ .dark-mode .report-glass .k-grid, .dark-mode .deal-glass .k-grid, .dark-mode .settings-glass .k-grid { background: transparent; border-color: rgba(62, 62, 70, 0.4); } .dark-mode .report-glass .k-grid .k-grid-header, .dark-mode .deal-glass .k-grid .k-grid-header, .dark-mode .settings-glass .k-grid .k-grid-header { background: rgba(36, 36, 41, 0.5); border-color: rgba(62, 62, 70, 0.4); } .dark-mode .report-glass .k-grid .k-grid-header th, .dark-mode .report-glass .k-grid .k-grid-header .k-header, .dark-mode .deal-glass .k-grid .k-grid-header th, .dark-mode .settings-glass .k-grid .k-grid-header th, .dark-mode .settings-glass .k-grid .k-grid-header .k-header { color: #8e8e96; border-color: rgba(62, 62, 70, 0.3); } .dark-mode .report-glass .k-grid td, .dark-mode .deal-glass .k-grid td, .dark-mode .settings-glass .k-grid td, .dark-mode .settings-glass .k-grid td a { color: #c4c4c8; border-color: rgba(62, 62, 70, 0.2); background: transparent; } .dark-mode .report-glass .k-grid tr:hover > td, .dark-mode .deal-glass .k-grid tr:hover > td, .dark-mode .settings-glass .k-grid tr:hover > td { background-color: rgba(46, 46, 52, 0.5); } .dark-mode .report-glass .k-grid tr.k-selected > td, .dark-mode .settings-glass .k-grid tr.k-selected > td { background-color: rgba(44, 156, 136, 0.15); color: #5eead4; } .dark-mode .report-glass .k-grid .k-grid-toolbar, .dark-mode .settings-glass .k-grid .k-grid-toolbar { background: rgba(36, 36, 41, 0.4); border-color: rgba(62, 62, 70, 0.3); } .dark-mode .report-glass .k-grid .k-pager, .dark-mode .report-glass .k-grid .k-pager-wrap, .dark-mode .settings-glass .k-grid .k-pager, .dark-mode .settings-glass .k-grid .k-pager-wrap { background: rgba(36, 36, 41, 0.4); border-color: rgba(62, 62, 70, 0.3); color: #8e8e96; } /* Work-glass grid */ .dark-mode .work-glass .k-grid { background: transparent; } .dark-mode .work-glass .k-grid .k-grid-header { background: rgba(36, 36, 41, 0.5); } .dark-mode .work-glass .k-grid .k-grid-header th { color: #8e8e96; background: transparent; border-color: rgba(62, 62, 70, 0.3); } .dark-mode .work-glass .k-grid td { color: #c4c4c8; border-color: rgba(62, 62, 70, 0.2); background: transparent; } .dark-mode .work-glass .k-grid tr:hover > td { background-color: rgba(46, 46, 52, 0.5); } .dark-mode .work-glass .k-grid tr.k-selected > td { background-color: rgba(44, 156, 136, 0.15); color: #5eead4; } .dark-mode .work-glass .k-grid .k-grid-toolbar { background: rgba(36, 36, 41, 0.4); border-color: rgba(62, 62, 70, 0.3); } .dark-mode .work-glass .k-grid .k-pager, .dark-mode .work-glass .k-grid .k-pager-wrap { background: rgba(36, 36, 41, 0.4); border-color: rgba(62, 62, 70, 0.3); color: #8e8e96; } /* =========================================== 8. Shared Primary Buttons =========================================== */ .dark-mode .report-glass .k-button-solid-primary, .dark-mode .report-modal .k-button-solid-primary, .dark-mode .deal-modal .k-button-solid-primary, .dark-mode .deal-glass .big-button, .dark-mode .settings-glass .k-button-solid-primary, .dark-mode .account-glass .k-button-solid-primary { background: #2C9C88; border-color: #2C9C88; color: #fff; } .dark-mode .report-glass .k-button-solid-primary:hover, .dark-mode .report-modal .k-button-solid-primary:hover, .dark-mode .deal-modal .k-button-solid-primary:hover, .dark-mode .deal-glass .big-button:hover, .dark-mode .settings-glass .k-button-solid-primary:hover, .dark-mode .account-glass .k-button-solid-primary:hover { background: #258775; border-color: #25877b; } /* =========================================== 9. Dashboard Tiles =========================================== */ .dark-mode .dash-glass .k-tilelayout-item, .dark-mode .k-tilelayout-item.builder { background: rgba(28, 28, 32, 0.6); border-color: rgba(62, 62, 70, 0.5); } .dark-mode .dash-glass .k-tilelayout-item:hover, .dark-mode .k-tilelayout-item.builder:hover { border-color: rgba(62, 62, 70, 0.7); } .dark-mode .dash-glass .k-card-header, .dark-mode .k-tilelayout-item.builder .k-card-header { background: rgba(36, 36, 41, 0.4); border-color: rgba(62, 62, 70, 0.3); color: #e4e4e7; } .dark-mode .dash-glass .k-card-title, .dark-mode .k-tilelayout-item.builder .k-card-title { color: #e4e4e7; } .dark-mode .k-tilelayout-item.builder .k-card-body { background: rgba(28, 28, 32, 0.4); color: #c4c4c8; } .dark-mode .k-tilelayout-item.builder .k-window-titlebar { background: rgba(36, 36, 41, 0.6); border-color: rgba(62, 62, 70, 0.4); color: #e4e4e7; } /* ---- Builder TileLayout container ---- */ .dark-mode .builder-layout { background: transparent; } .dark-mode .builder-layout .k-tilelayout-item { background: rgba(28, 28, 32, 0.6); border-color: rgba(62, 62, 70, 0.5); } /* Form inputs inside builder tiles */ .dark-mode .k-tilelayout-item.builder .k-form { background: transparent; color: #c4c4c8; } .dark-mode .k-tilelayout-item.builder .k-form label, .dark-mode .k-tilelayout-item.builder .k-form .k-form-label, .dark-mode .k-tilelayout-item.builder .k-form .k-label, .dark-mode .k-tilelayout-item.builder .k-label { color: #c4c4c8; } .dark-mode .k-tilelayout-item.builder .grid-layout { background: transparent; } .dark-mode .k-tilelayout-item.builder .k-form .k-textbox, .dark-mode .k-tilelayout-item.builder .k-form .k-input, .dark-mode .k-tilelayout-item.builder .k-form .k-picker, .dark-mode .k-tilelayout-item.builder .k-form .k-combobox, .dark-mode .k-tilelayout-item.builder .k-form .k-dropdownlist, .dark-mode .k-tilelayout-item.builder .k-form .k-input-solid, .dark-mode .k-tilelayout-item.builder .k-form .k-numerictextbox, .dark-mode .k-tilelayout-item.builder .k-form .k-datepicker, .dark-mode .k-tilelayout-item.builder .k-form .k-maskedtextbox, .dark-mode .k-tilelayout-item.builder .k-form .k-textarea, .dark-mode .k-tilelayout-item.builder .k-input, .dark-mode .k-tilelayout-item.builder .k-picker, .dark-mode .k-tilelayout-item.builder .k-input-solid { background: rgba(46, 46, 52, 0.7); border-color: rgba(62, 62, 70, 0.5); color: #e4e4e7; } .dark-mode .k-tilelayout-item.builder .k-form .k-input-inner, .dark-mode .k-tilelayout-item.builder .k-input-inner { color: #e4e4e7; } .dark-mode .k-tilelayout-item.builder .form-control { background: rgba(46, 46, 52, 0.7); border-color: rgba(62, 62, 70, 0.5); color: #e4e4e7; } .dark-mode .k-tilelayout-item.builder .btn.btn-primary { background-color: #2C9C88; border-color: #2C9C88; color: #fff; } .dark-mode .k-tilelayout-item.builder .btn-autocomplete { color: #8e8e96; } .dark-mode .k-tilelayout-item.builder .btn-clearform { color: #8e8e96; } .dark-mode .k-tilelayout-item.builder .smaller { color: #8e8e96; } .dark-mode .k-tilelayout-item.builder .smaller a { color: #5eead4; } .dark-mode .dash-glass .k-card-body { color: #8e8e96; } /* Stats */ .dark-mode .dash-glass .progress-step { border: none; } .dark-mode .dash-glass .stat-panel { background: rgba(36, 36, 41, 0.4); } .dark-mode .dash-glass .progress-label, .dark-mode .dash-glass .chart-header { color: #8e8e96; } /* PanelBar */ .dark-mode .dash-glass .k-panelbar > .k-item > .k-link, .dark-mode .dash-glass .k-panelbar > .k-panelbar-header > .k-link { color: #c4c4c8; border-color: rgba(62, 62, 70, 0.25); } .dark-mode .dash-glass .k-panelbar > .k-item > .k-link:hover, .dark-mode .dash-glass .k-panelbar > .k-panelbar-header > .k-link:hover { background: rgba(46, 46, 52, 0.5); } .dark-mode .dash-glass .k-panelbar > .k-item > .k-link.k-selected, .dark-mode .dash-glass .k-panelbar > .k-panelbar-header > .k-link.k-selected { background: rgba(44, 156, 136, 0.12); color: #5eead4; } .dark-mode .dash-glass .k-panelbar .k-group > .k-item > .k-link, .dark-mode .dash-glass .k-panelbar .k-panelbar-group > .k-panelbar-item > .k-link { color: #8e8e96; border-color: rgba(62, 62, 70, 0.3); } .dark-mode .dash-glass .k-panelbar .k-group > .k-item > .k-link:hover, .dark-mode .dash-glass .k-panelbar .k-panelbar-group > .k-panelbar-item > .k-link:hover { background: rgba(46, 46, 52, 0.5); } /* TabStrip */ .dark-mode .dash-glass .k-tabstrip-items { border-color: rgba(62, 62, 70, 0.4); } .dark-mode .dash-glass .k-tabstrip-items .k-item .k-link { color: #8e8e96; } .dark-mode .dash-glass .k-tabstrip-items .k-item.k-active .k-link { color: #5eead4; border-bottom-color: #5eead4; } .dark-mode .dash-glass .k-tabstrip .k-item.k-active, .dark-mode .dash-glass .k-tabstrip .k-item.k-tab-on-top { color: #5eead4; border-color: #5eead4; background: rgba(36, 36, 41, 0.6); } .dark-mode .dash-glass .k-tabstrip-items .k-item .k-link:hover { color: #c4c4c8; } /* k-content / k-tabstrip-content (Dashboard) */ .dark-mode .dash-glass .k-content, .dark-mode .dash-glass .k-tabstrip-content { background: transparent; color: #c4c4c8; } /* TreeList (DealsByType) k-grid-header */ .dark-mode .dash-glass .dealsbystats .k-grid-header, .dark-mode .dash-glass .dealsbystats .k-grid-header th { background: rgba(36, 36, 41, 0.5); border-color: rgba(62, 62, 70, 0.4); color: #8e8e96; } .dark-mode .dash-glass .dealsbystats td { border-color: rgba(62, 62, 70, 0.3); color: #c4c4c8; } .dark-mode .dash-glass .dealsbystats tr.k-selected > td { background-color: rgba(44, 156, 136, 0.15); color: #5eead4; } .dark-mode .dash-glass .dealsbystats tr[aria-level="1"].k-master-row > td { border-color: rgba(62, 62, 70, 0.5); background-color: rgba(36, 36, 41, 0.5); color: #e4e4e7; } .dark-mode .dash-glass .dealsbystats tr:hover > td { background-color: rgba(46, 46, 52, 0.5); } /* ListView text */ .dark-mode .dash-glass .current-activity .k-listview-content span { color: #8e8e96; } /* Assignments */ .dark-mode .dash-glass .k-card-body u { color: #e4e4e7; } /* Favorites */ .dark-mode .dash-glass .favorite-link { color: #5eead4; } .dark-mode .dash-glass .favorite-link:hover { color: #2dd4bf; } /* Form selects in tile headers */ .dark-mode .dash-glass .k-card-header .form-select { background: rgba(46, 46, 52, 0.6); border-color: rgba(62, 62, 70, 0.5); color: #e4e4e7; } .dark-mode .dash-glass .k-card-header .k-datepicker .k-input { background: rgba(46, 46, 52, 0.6); border-color: rgba(62, 62, 70, 0.5); color: #e4e4e7; } /* ListView dividers */ .dark-mode .dash-glass .k-listview hr, .dark-mode .dash-glass .k-card-body hr { border-color: rgba(62, 62, 70, 0.3); } /* Alerts wrapper */ .dark-mode .alerts-wrapper { background: rgba(28, 28, 32, 0.5); border-color: rgba(62, 62, 70, 0.4); } .dark-mode .alert-heading { color: #e4e4e7; } /* k-listview (Alerts app) */ .dark-mode .k-listview { background: transparent; color: #c4c4c8; } .dark-mode .k-listview-content { color: #c4c4c8; } /* Tile selector */ .dark-mode .tile-selector { border-color: rgba(62, 62, 70, 0.5); background: rgba(28, 28, 32, 0.8); } .dark-mode .tile-enabled { border-color: #2C9C88; color: #5eead4; background: rgba(44, 156, 136, 0.1); } .dark-mode .tile-disabled { border-color: rgba(62, 62, 70, 0.4); color: #6e6e76; } /* Dashboard control buttons */ .dark-mode .dash-glass ~ .dashboard-controls .dashboard-button, .dark-mode .dashboard-controls .dashboard-button { color: rgba(142, 142, 150, 0.5); } .dark-mode .dashboard-controls .dashboard-button:hover { color: #5eead4; } /* =========================================== 10. Work Page =========================================== */ .dark-mode .work-glass .work-header { background: rgba(28, 28, 32, 0.5); border-color: rgba(62, 62, 70, 0.4); } .dark-mode .work-glass .work-header h1 { color: #e4e4e7; } .dark-mode .work-glass .work-header h4 { color: #c4c4c8; } .dark-mode .work-glass .work-header b { color: #c4c4c8; } .dark-mode .work-glass .work-header hr { border-color: rgba(62, 62, 70, 0.3); } .dark-mode .work-glass .work-header .address { color: #8e8e96; } .dark-mode .work-glass .k-icon { color: #8e8e96; } /* Splitter */ .dark-mode .work-glass .k-splitbar { background: rgba(62, 62, 70, 0.4); } /* Work panels — standardized background */ .dark-mode .work-glass .work-panel { background: rgba(36, 36, 41, 0.4); } /* Work form area — standardized */ .dark-mode .work-glass .work-form-area { background: rgba(36, 36, 41, 0.3); } /* Drop zone */ .dark-mode .work-glass .drop-zone { background: rgba(36, 36, 41, 0.3); border-color: rgba(62, 62, 70, 0.3); } /* bg-light Bootstrap override in work context */ .dark-mode .work-glass .bg-light { background-color: rgba(36, 36, 41, 0.5) !important; color: #c4c4c8; } /* border-top in work panels */ .dark-mode .work-glass .border-top { border-color: rgba(62, 62, 70, 0.4) !important; } /* Panels TabStrip */ .dark-mode .work-glass .k-tabstrip { background: transparent; } .dark-mode .work-glass .k-tabstrip > .k-tabstrip-items-wrapper { background: rgba(36, 36, 41, 0.4); border-color: rgba(62, 62, 70, 0.4); } .dark-mode .work-glass .k-tabstrip .k-item { color: #8e8e96; } .dark-mode .work-glass .k-tabstrip .k-item:hover { color: #c4c4c8; } .dark-mode .work-glass .k-tabstrip .k-item.k-active { color: #5eead4; } .dark-mode .work-glass .k-tabstrip > .k-content, .dark-mode .work-glass .k-tabstrip-content, .dark-mode .work-glass .k-content { background: transparent; color: #c4c4c8; } /* Work-glass TreeList — standardized dark backgrounds */ .dark-mode .work-glass .k-treelist { background: transparent; border-color: rgba(62, 62, 70, 0.3); } .dark-mode .work-glass .k-treelist .k-grid-header { background: rgba(36, 36, 41, 0.5); border-color: rgba(62, 62, 70, 0.3); } .dark-mode .work-glass .k-treelist .k-grid-header th { color: #8e8e96; background: transparent; border-color: rgba(62, 62, 70, 0.3); } .dark-mode .work-glass .k-treelist td { color: #c4c4c8; background: transparent; border-color: rgba(62, 62, 70, 0.2); } .dark-mode .work-glass .k-treelist tr:hover > td { background-color: rgba(46, 46, 52, 0.5); } .dark-mode .work-glass .k-treelist tr.k-selected > td { background-color: rgba(44, 156, 136, 0.15); color: #5eead4; } .dark-mode .work-glass .k-treelist .k-grid-content { background: transparent; } /* Work-glass page-level form inputs */ .dark-mode .work-glass .k-form input { background: rgba(46, 46, 52, 0.7); border-color: rgba(62, 62, 70, 0.5); color: #e4e4e7; } /* ReviewForm — standardized dark backgrounds */ .dark-mode .work-glass .k-form { background: transparent; color: #c4c4c8; } .dark-mode .work-glass .k-form label, .dark-mode .work-glass .k-form .k-form-label, .dark-mode .work-glass .k-form .k-label { color: #c4c4c8; } .dark-mode .work-glass .grid-layout { background: transparent; } .dark-mode .work-glass .k-form .k-textbox, .dark-mode .work-glass .k-form .k-input, .dark-mode .work-glass .k-form .k-picker, .dark-mode .work-glass .k-form .k-combobox, .dark-mode .work-glass .k-form .k-dropdownlist, .dark-mode .work-glass .k-form .k-input-solid, .dark-mode .work-glass .k-form .k-numerictextbox, .dark-mode .work-glass .k-form .k-datepicker, .dark-mode .work-glass .k-form .k-maskedtextbox, .dark-mode .work-glass .k-form .k-textarea { background: rgba(46, 46, 52, 0.7); border-color: rgba(62, 62, 70, 0.5); color: #e4e4e7; } .dark-mode .work-glass .k-form .k-input-inner { color: #e4e4e7; } /* Save button in ReviewForm */ .dark-mode .work-glass .btn.btn-primary { background-color: #2C9C88; border-color: #2C9C88; color: #fff; } .dark-mode .work-glass .btn.btn-primary:hover { background-color: #258775; border-color: #25877b; } /* Autocomplete and clear buttons in ReviewForm */ .dark-mode .work-glass .btn-autocomplete { color: #8e8e96; } .dark-mode .work-glass .btn-autocomplete:hover { color: #5eead4; } .dark-mode .work-glass .btn-clearform { color: #8e8e96; } .dark-mode .work-glass .btn-clearform:hover { color: #e4e4e7; } /* ReviewForm metadata text */ .dark-mode .work-glass .smaller { color: #8e8e96; } .dark-mode .work-glass .smaller a { color: #5eead4; } /* Search textarea & button in Work page */ .dark-mode .work-glass .form-control { background: rgba(46, 46, 52, 0.7); border-color: rgba(62, 62, 70, 0.5); color: #e4e4e7; } .dark-mode .work-glass .form-control:focus { background: rgba(46, 46, 52, 0.9); border-color: rgba(44, 156, 136, 0.4); } .dark-mode .work-glass .search-button { background: rgba(46, 46, 52, 0.6); border-color: rgba(62, 62, 70, 0.5); color: #c4c4c8; } .dark-mode .work-glass .search-button:hover { background: rgba(44, 156, 136, 0.15); color: #5eead4; } /* Review list menu & property list menu */ .dark-mode .work-glass .review-list-menu, .dark-mode .work-glass .property-list-menu { background: transparent; } .dark-mode .work-glass .k-columnmenu-item { color: #c4c4c8; } .dark-mode .work-glass .k-columnmenu-item:hover { background: rgba(46, 46, 52, 0.6); } /* Column list checkboxes and labels */ .dark-mode .work-glass .k-column-list-item { color: #c4c4c8; } .dark-mode .work-glass .k-checkbox-label { color: #c4c4c8; } /* Status text classes */ .dark-mode .work-glass .status-text { color: #c4c4c8; } /* Work badges */ .dark-mode .work-glass .k-badge { color: #fff; } /* Work page hr elements */ .dark-mode .work-glass hr { border-color: rgba(62, 62, 70, 0.3); } /* form-check-input — visible check in dark mode */ .dark-mode .form-check-input { background-color: rgba(46, 46, 52, 0.7); border-color: rgba(90, 90, 100, 0.6); } .dark-mode .form-check-input:checked { background-color: #2C9C88; border-color: #2C9C88; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } .dark-mode .form-check-input:focus { border-color: rgba(44, 156, 136, 0.5); box-shadow: 0 0 0 0.2rem rgba(44, 156, 136, 0.25); } /* k-checkbox (Telerik) — global dark override */ .dark-mode .k-checkbox { background-color: rgba(46, 46, 52, 0.7); border-color: rgba(90, 90, 100, 0.6); } .dark-mode .k-checkbox:checked, .dark-mode .k-checkbox.k-checked { background-color: #2C9C88; border-color: #2C9C88; color: #fff; } .dark-mode .k-checkbox:indeterminate, .dark-mode .k-checkbox.k-indeterminate { background-color: #2C9C88; border-color: #2C9C88; color: #fff; } /* Modal legends */ .dark-mode .work-modal .k-wizard legend.legend { color: #e4e4e7; } .dark-mode .work-modal .k-wizard legend.legend + hr { border-color: rgba(62, 62, 70, 0.4); } /* Modal check labels */ .dark-mode .work-modal .form-check-label, .dark-mode .work-modal label { color: #8e8e96; } /* HTML tables in modals */ .dark-mode .work-modal .table { background: transparent; } .dark-mode .work-modal .table thead th { color: #8e8e96; background: rgba(36, 36, 41, 0.5); border-color: rgba(62, 62, 70, 0.4); } .dark-mode .work-modal .table tbody td { color: #c4c4c8; border-color: rgba(62, 62, 70, 0.2); } .dark-mode .work-modal .table tbody tr:hover td { background: rgba(44, 156, 136, 0.08); } /* =========================================== 11. Report Page =========================================== */ .dark-mode .report-glass .k-menu, .dark-mode .builder-menu { background: rgba(28, 28, 32, 0.5); border-color: rgba(62, 62, 70, 0.4); } .dark-mode .report-glass .k-menu .k-menu-item, .dark-mode .builder-menu .k-menu-item { color: #c4c4c8; } .dark-mode .report-glass .k-menu .k-menu-item:hover, .dark-mode .report-glass .k-menu .k-menu-item.k-hover, .dark-mode .builder-menu .k-menu-item:hover, .dark-mode .builder-menu .k-menu-item.k-hover { background: rgba(44, 156, 136, 0.1); color: #5eead4; } .dark-mode .builder-menu .k-menu-link { color: #c4c4c8; } .dark-mode .builder-menu .k-menu-link:hover { color: #5eead4; } /* Accordion sidebar */ .dark-mode .report-glass .accordion { --bs-accordion-bg: rgba(28, 28, 32, 0.5); --bs-accordion-border-color: rgba(62, 62, 70, 0.4); --bs-accordion-active-bg: rgba(28, 28, 32, 0.7); --bs-accordion-active-color: #5eead4; } .dark-mode .report-glass .accordion-item { background: rgba(28, 28, 32, 0.4); border-color: rgba(62, 62, 70, 0.3); } .dark-mode .report-glass .accordion-button { color: #c4c4c8; background: rgba(28, 28, 32, 0.4); } .dark-mode .report-glass .accordion-button:not(.collapsed) { background: rgba(28, 28, 32, 0.6); color: #5eead4; } .dark-mode .report-glass .accordion-body { background: rgba(28, 28, 32, 0.3); } .dark-mode .report-glass .accordion label { color: #8e8e96; } /* Sidebar inputs */ .dark-mode .report-glass .accordion .k-combobox, .dark-mode .report-glass .accordion .k-multiselect, .dark-mode .report-glass .accordion .k-input { background: rgba(46, 46, 52, 0.7); border-color: rgba(62, 62, 70, 0.5); color: #e4e4e7; } .dark-mode .report-glass .accordion textarea.form-control { background: rgba(46, 46, 52, 0.7); border-color: rgba(62, 62, 70, 0.5); color: #c4c4c8; } .dark-mode .report-glass .accordion textarea.form-control:focus { background: rgba(46, 46, 52, 0.9); } .dark-mode .report-glass .accordion .k-daterangepicker .k-input { background: rgba(46, 46, 52, 0.7); border-color: rgba(62, 62, 70, 0.5); color: #e4e4e7; } .dark-mode .report-glass .k-textbox { background: rgba(46, 46, 52, 0.7); border-color: rgba(62, 62, 70, 0.5); color: #e4e4e7; } /* Grid unique overrides */ .dark-mode .report-glass div.borders table td { border-color: rgba(62, 62, 70, 0.3); } /* Report modal unique */ .dark-mode .report-modal h5 { color: #e4e4e7; } .dark-mode .report-modal .k-autocomplete, .dark-mode .report-modal .k-combobox, .dark-mode .report-modal .k-datepicker { background: rgba(46, 46, 52, 0.7); border-color: rgba(62, 62, 70, 0.6); color: #e4e4e7; } .dark-mode .report-modal textarea.form-control { background: rgba(46, 46, 52, 0.7); border-color: rgba(62, 62, 70, 0.5); } /* =========================================== 12. Deal Page =========================================== */ .dark-mode .deal-glass .k-wizard .k-stepper { background: rgba(28, 28, 32, 0.5); border-color: rgba(62, 62, 70, 0.3); } .dark-mode .deal-glass .k-wizard .k-stepper .k-step-label { color: #c4c4c8; } .dark-mode .deal-glass .k-wizard .k-wizard-buttons, .dark-mode .work-modal .k-wizard .k-wizard-buttons { background: rgba(36, 36, 41, 0.4); border-color: rgba(62, 62, 70, 0.3); padding: 0.75rem 1.25rem; color: #e4e4e7; } .dark-mode .deal-glass .k-dropdownlist { background: rgba(46, 46, 52, 0.7); border-color: rgba(62, 62, 70, 0.6); color: #e4e4e7; } .dark-mode .deal-glass p.small { color: #8e8e96; } .dark-mode .deal-glass h4 { color: #e4e4e7; } .dark-mode .deal-glass .input-group-text { background: rgba(36, 36, 41, 0.6); border-color: rgba(62, 62, 70, 0.5); color: #c4c4c8; } .dark-mode .deal-glass .k-label { color: #8e8e96; } .dark-mode .deal-glass .validation-message { color: #fca5a5; } /* Deal modal unique */ .dark-mode .deal-modal .k-window-title span, .dark-mode .settings-modal .k-window-title span { color: #e4e4e7; } .dark-mode .deal-modal .k-checkbox-label { color: #8e8e96; } /* HTML tables in deal modals */ .dark-mode .deal-modal table th { color: #8e8e96; background: rgba(36, 36, 41, 0.5); border-color: rgba(62, 62, 70, 0.4); } .dark-mode .deal-modal table td { color: #c4c4c8; border-color: rgba(62, 62, 70, 0.2); } .dark-mode .deal-modal table tr:hover td { background: rgba(44, 156, 136, 0.08); } /* Error list */ .dark-mode .deal-modal ul { color: #fca5a5; } .dark-mode .deal-modal ul li { border-color: rgba(62, 62, 70, 0.2); } /* =========================================== 13. Settings Page =========================================== */ .dark-mode .settings-glass .k-tabstrip, .dark-mode .builder-window .k-tabstrip { background: transparent; } .dark-mode .settings-glass .k-tabstrip > .k-tabstrip-items-wrapper, .dark-mode .builder-window .k-tabstrip > .k-tabstrip-items-wrapper { background: rgba(36, 36, 41, 0.4); border-color: rgba(62, 62, 70, 0.4); } .dark-mode .settings-glass .k-tabstrip .k-item, .dark-mode .builder-window .k-tabstrip .k-item { color: #8e8e96; } .dark-mode .settings-glass .k-tabstrip .k-item:hover, .dark-mode .builder-window .k-tabstrip .k-item:hover { background: rgba(44, 156, 136, 0.08); color: #5eead4; } .dark-mode .settings-glass .k-tabstrip .k-item.k-active, .dark-mode .settings-glass .k-tabstrip .k-item.k-tab-on-top, .dark-mode .builder-window .k-tabstrip .k-item.k-active, .dark-mode .builder-window .k-tabstrip .k-item.k-tab-on-top { color: #5eead4; border-color: #5eead4; background: rgba(36, 36, 41, 0.6); } .dark-mode .settings-glass .k-tabstrip > .k-content, .dark-mode .builder-window .k-tabstrip > .k-content { background: transparent; } .dark-mode .settings-glass h5, .dark-mode .builder-window h5, .dark-mode .builder-window h6 { color: #e4e4e7; } /* Detail grid */ .dark-mode .settings-glass .k-grid .k-detail-cell .k-grid { border-color: rgba(62, 62, 70, 0.3); } /* Form buttons */ .dark-mode .settings-glass .k-checkbox + label, .dark-mode .settings-glass .k-radio-list label { color: #8e8e96; } /* Icon buttons */ .dark-mode .settings-glass .float-end .k-button { background: rgba(46, 46, 52, 0.6); border-color: rgba(62, 62, 70, 0.5); color: #c4c4c8; } .dark-mode .settings-glass .float-end .k-button:hover { background: rgba(44, 156, 136, 0.1); color: #5eead4; } /* Input group (API key) */ .dark-mode .settings-glass .input-group-text { background: rgba(36, 36, 41, 0.6); border-color: rgba(62, 62, 70, 0.5); color: #c4c4c8; } /* Badges */ .dark-mode .settings-glass .badge.text-bg-success { background-color: #2C9C88 !important; } /* JobViewer */ .dark-mode .settings-glass .k-progressbar { background: rgba(62, 62, 70, 0.3); } .dark-mode .settings-glass .k-button-solid-base.k-selected { border-color: rgba(62, 62, 70, 0.6); background-color: rgba(36, 36, 41, 0.6); color: #e4e4e7; } .dark-mode .settings-glass .k-datepicker { background: rgba(46, 46, 52, 0.7); border-color: rgba(62, 62, 70, 0.5); color: #e4e4e7; } /* DealManager menu */ .dark-mode .settings-glass .k-menu.k-menu-horizontal:not(.k-context-menu) { background: rgba(28, 28, 32, 0.5); border-color: rgba(62, 62, 70, 0.4); } .dark-mode .settings-glass .k-menu-link { color: #c4c4c8; } /* Settings modal unique (cards, tables) */ .dark-mode .settings-modal .card { background: rgba(28, 28, 32, 0.5); border-color: rgba(62, 62, 70, 0.4); } .dark-mode .settings-modal .card-header { background: rgba(36, 36, 41, 0.6); border-color: rgba(62, 62, 70, 0.3); color: #e4e4e7; } .dark-mode .settings-modal .card-body { color: #c4c4c8; } .dark-mode .settings-modal .card-title { color: #5eead4; } .dark-mode .settings-modal dt { color: #8e8e96; } .dark-mode .settings-modal dd { color: #c4c4c8; } .dark-mode .settings-modal h6 { color: #e4e4e7; } .dark-mode .settings-modal .table thead th { color: #8e8e96; background: rgba(36, 36, 41, 0.5); border-color: rgba(62, 62, 70, 0.4); } .dark-mode .settings-modal .table td { color: #c4c4c8; border-color: rgba(62, 62, 70, 0.2); } .dark-mode .settings-modal .table tr:hover td { background: rgba(44, 156, 136, 0.08); } .dark-mode .settings-modal .alert-secondary { background: rgba(28, 28, 32, 0.5); border-color: rgba(62, 62, 70, 0.4); color: #8e8e96; } .dark-mode .settings-modal ul { color: #c4c4c8; } .dark-mode .settings-modal ul li { border-color: rgba(62, 62, 70, 0.2); } /* =========================================== 14. Account Page =========================================== */ .dark-mode .account-glass h4 { color: #e4e4e7; } .dark-mode .account-glass .account-avatar { border-color: rgba(62, 62, 70, 0.5); } .dark-mode .account-glass .account-name { color: #e4e4e7; } .dark-mode .account-glass .account-email { color: #8e8e96; } .dark-mode .account-glass .account-divider { border-color: rgba(62, 62, 70, 0.4); } .dark-mode .account-glass .k-form .validation-message { color: #fca5a5; } /* Theme toggle labels */ .dark-mode .account-glass .account-theme-label { color: #6e6e76; } .dark-mode .account-glass .account-theme-label.active { color: #e4e4e7; } /* =========================================== 15. Telerik Popups (rendered at body root) =========================================== */ .dark-mode .k-popup { background: rgba(28, 28, 32, 0.95) !important; border-color: rgba(62, 62, 70, 0.5) !important; color: #e4e4e7; } .dark-mode .k-list-item { color: #c4c4c8; } .dark-mode .k-list-item:hover, .dark-mode .k-list-item.k-hover { background: rgba(44, 156, 136, 0.1) !important; color: #e4e4e7; } .dark-mode .k-list-item.k-selected { background: rgba(44, 156, 136, 0.2) !important; color: #5eead4; } /* Telerik dialog */ .dark-mode .k-dialog { background: rgba(28, 28, 32, 0.95); border-color: rgba(62, 62, 70, 0.5); } .dark-mode .k-dialog .k-window-titlebar { background: rgba(28, 28, 32, 0.85); color: #e4e4e7; } .dark-mode .k-dialog .k-window-content { color: #c4c4c8; } /* Notifications */ .dark-mode .k-notification { border-color: rgba(62, 62, 70, 0.5); } /* Context menu (work-glass) */ .dark-mode .work-glass .k-popup, .dark-mode .work-glass .k-animation-container { background: rgba(28, 28, 32, 0.92); border-color: rgba(62, 62, 70, 0.5); } /* TelerikSwitch in dark mode */ .dark-mode .k-switch-on .k-switch-track { background-color: #2C9C88; border-color: #2C9C88; } /* =========================================== 15b. TelerikButton — global dark overrides =========================================== */ /* Base (default) buttons — the grey ones */ .dark-mode .k-button-solid-base { background: rgba(46, 46, 52, 0.7); border-color: rgba(62, 62, 70, 0.6); color: #c4c4c8; } .dark-mode .k-button-solid-base:hover, .dark-mode .k-button-solid-base.k-hover { background: rgba(56, 56, 63, 0.8); border-color: rgba(72, 72, 80, 0.7); color: #e4e4e7; } .dark-mode .k-button-solid-base:active, .dark-mode .k-button-solid-base.k-active { background: rgba(62, 62, 68, 0.85); border-color: rgba(76, 76, 84, 0.7); color: #e4e4e7; } .dark-mode .k-button-solid-base:focus, .dark-mode .k-button-solid-base.k-focus { box-shadow: 0 0 0 0.2rem rgba(44, 156, 136, 0.2); } .dark-mode .k-button-solid-base.k-selected { background: rgba(44, 156, 136, 0.15); border-color: rgba(44, 156, 136, 0.4); color: #5eead4; } /* Flat buttons */ .dark-mode .k-button-flat-base { color: #c4c4c8; } .dark-mode .k-button-flat-base:hover, .dark-mode .k-button-flat-base.k-hover { color: #e4e4e7; background: rgba(62, 62, 70, 0.3); } /* Primary buttons (global fallback) */ .dark-mode .k-button-solid-primary { background: #2C9C88; border-color: #2C9C88; color: #fff; } .dark-mode .k-button-solid-primary:hover, .dark-mode .k-button-solid-primary.k-hover { background: #258775; border-color: #25877b; color: #fff; } .dark-mode .k-button-solid-primary:focus, .dark-mode .k-button-solid-primary.k-focus { box-shadow: 0 0 0 0.2rem rgba(44, 156, 136, 0.35); } /* Error buttons */ .dark-mode .k-button-solid-error { background: #b91c1c; border-color: #b91c1c; color: #fff; } .dark-mode .k-button-solid-error:hover, .dark-mode .k-button-solid-error.k-hover { background: #991b1b; border-color: #991b1b; } /* Outline buttons */ .dark-mode .k-button-outline-base { border-color: rgba(62, 62, 70, 0.6); color: #c4c4c8; } .dark-mode .k-button-outline-base:hover { background: rgba(62, 62, 70, 0.3); color: #e4e4e7; } /* Disabled buttons */ .dark-mode .k-button:disabled, .dark-mode .k-button.k-disabled { opacity: 0.45; } /* =========================================== 15c. Pager — global dark overrides =========================================== */ .dark-mode .k-pager, .dark-mode .k-pager-wrap { background: rgba(36, 36, 41, 0.5); border-color: rgba(62, 62, 70, 0.3); color: #8e8e96; } /* Pager info text ("1-20 of 150 items") */ .dark-mode .k-pager-info { color: #8e8e96; } /* Pager sizes dropdown */ .dark-mode .k-pager-sizes .k-dropdownlist { background: rgba(46, 46, 52, 0.7); border-color: rgba(62, 62, 70, 0.5); color: #c4c4c8; } /* Pager number links (Telerik renders as .k-pager-numbers .k-link) */ .dark-mode .k-pager-numbers .k-link { color: #8e8e96; background-color: transparent; border-color: rgba(62, 62, 70, 0.4); } .dark-mode .k-pager-numbers .k-link:hover, .dark-mode .k-pager-numbers .k-link.k-hover { color: #e4e4e7; background-color: rgba(62, 62, 70, 0.3); border-color: rgba(72, 72, 80, 0.5); } .dark-mode .k-pager-numbers .k-link:focus, .dark-mode .k-pager-numbers .k-link.k-focus { background-color: transparent; box-shadow: 0 0 0 0.15rem rgba(44, 156, 136, 0.2); } .dark-mode .k-pager-numbers .k-link.k-selected { background-color: rgba(44, 156, 136, 0.15); color: #5eead4; border-color: rgba(44, 156, 136, 0.3); } /* Pager nav arrows (Telerik renders as .k-pager-nav.k-link) */ .dark-mode .k-pager-nav.k-link, .dark-mode .k-pager-refresh { color: #8e8e96; background-color: transparent; border-color: rgba(62, 62, 70, 0.4); } .dark-mode .k-pager-nav.k-link:hover, .dark-mode .k-hover.k-pager-nav.k-link, .dark-mode .k-pager-refresh:hover { color: #e4e4e7; background-color: rgba(62, 62, 70, 0.3); border-color: rgba(72, 72, 80, 0.5); } .dark-mode .k-selected.k-pager-nav.k-link, .dark-mode .k-selected.k-pager-refresh { background-color: rgba(44, 156, 136, 0.15); color: #5eead4; border-color: rgba(44, 156, 136, 0.3); } .dark-mode .k-pager-nav.k-link.k-disabled, .dark-mode .k-disabled.k-pager-nav { color: rgba(110, 110, 116, 0.4); background-color: transparent; border-color: rgba(62, 62, 70, 0.2); } /* Responsive pager current-page dropdown */ .dark-mode .k-pager-numbers .k-current-page .k-link { background-color: rgba(46, 46, 52, 0.5); border-color: rgba(62, 62, 70, 0.4); color: #c4c4c8; } .dark-mode .k-pager-numbers .k-current-page .k-link:hover { background-color: rgba(62, 62, 70, 0.4); border-color: rgba(72, 72, 80, 0.5); } /* =========================================== 15d. GridSearchBox — global dark overrides =========================================== */ .dark-mode .k-grid-search, .dark-mode .k-grid-toolbar .k-searchbox, .dark-mode .k-toolbar .k-searchbox { background: rgba(46, 46, 52, 0.7); border-color: rgba(62, 62, 70, 0.5); border-radius: 0.375rem; color: #e4e4e7; } .dark-mode .k-searchbox .k-input-inner { color: #ffffff; } .dark-mode .k-searchbox .k-input-inner::placeholder { color: #ffffff; opacity: 1; } .dark-mode .k-searchbox .k-icon { color: #8e8e96; } .dark-mode .k-grid-search:focus-within, .dark-mode .k-searchbox:focus-within { border-color: rgba(44, 156, 136, 0.4); box-shadow: 0 0 0 0.15rem rgba(44, 156, 136, 0.15); } /* Grid toolbar (contains searchbox) */ .dark-mode .k-grid-toolbar { background: rgba(36, 36, 41, 0.4); border-color: rgba(62, 62, 70, 0.3); } /* =========================================== 15e. input-group-text — global dark override =========================================== */ .dark-mode .input-group-text { background-color: rgba(36, 36, 41, 0.6); border-color: rgba(62, 62, 70, 0.5); color: #c4c4c8; } /* k-input-inner placeholder (desktop search & all inputs) */ .dark-mode .k-input-inner::placeholder { color: #6e6e76; opacity: 1; } .dark-mode .k-input-inner:-ms-input-placeholder { color: #6e6e76; } .dark-mode .form-control::placeholder { color: #6e6e76; opacity: 1; } /* =========================================== 16. Scrollbar Styling =========================================== */ .dark-mode ::-webkit-scrollbar { width: 8px; height: 8px; } .dark-mode ::-webkit-scrollbar-track { background: rgba(28, 28, 32, 0.3); } .dark-mode ::-webkit-scrollbar-thumb { background: rgba(62, 62, 70, 0.5); border-radius: 4px; } .dark-mode ::-webkit-scrollbar-thumb:hover { background: rgba(82, 82, 90, 0.6); } /* =========================================== Misc / Catch-all =========================================== */ /* Mobile open apps list */ .dark-mode .mobile-open-app { background: rgba(28, 28, 32, 0.5); border-color: rgba(62, 62, 70, 0.3); } .dark-mode .mobile-open-app__name { color: #e4e4e7; } .dark-mode .mobile-open-app__desc { color: #8e8e96; } /* Callback card */ .dark-mode .callback-card { background: rgba(28, 28, 32, 0.4); border-color: rgba(62, 62, 70, 0.3); } /* Login card — no changes needed (already on dark bg) */ /* Search box */ .dark-mode .desktop-search .k-autocomplete, .dark-mode .desktop-search .k-input { background: rgba(28, 28, 32, 0.7) !important; border: 1px solid rgba(62, 62, 70, 0.5) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); color: #e4e4e7 !important; } .dark-mode .desktop-search .k-input-inner { color: #e4e4e7 !important; } .dark-mode .desktop-search .k-input-inner::placeholder { color: rgba(142, 142, 150, 0.5) !important; } .dark-mode .desktop-search .k-clear-value { color: rgba(142, 142, 150, 0.6) !important; } /* Search autocomplete dropdown */ .dark-mode .desktop-search-autocomplete .k-popup, .dark-mode .desktop-search-autocomplete .k-list { background-color: rgba(28, 28, 32, 0.92) !important; color: #e4e4e7 !important; border: 1px solid rgba(62, 62, 70, 0.5) !important; } /* ResoluteLoader — ensure it's visible on dark bg */ .dark-mode .k-loader { color: #2C9C88; } /* Account toggle styling */ .account-theme-label { font-size: 0.85rem; cursor: pointer; color: #8e8e96; transition: color 0.15s ease; } .account-theme-label.active { color: #334155; font-weight: 600; } /* ---- 17. Desktop Logo Dropdown (dark mode) ---- */ .dark-mode .desktop-logo-dropdown { background: rgba(28, 28, 32, 0.92); border-color: rgba(62, 62, 70, 0.5); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); } .dark-mode .desktop-logo-dropdown__item { color: #e4e4e7; } .dark-mode .desktop-logo-dropdown__divider { border-color: rgba(62, 62, 70, 0.5); } .dark-mode .desktop-logo-dropdown__link { color: #e4e4e7; } .dark-mode .desktop-logo-dropdown__link:hover { background: rgba(46, 46, 52, 0.6); color: #e4e4e7; }