/* ============================================================ ChemiSource — Night Mode (eye-comfort) Activated when is present. Warm charcoal surfaces + soft cream text: low blue light, clear readable contrast, gentle on the eyes for night use. Overrides common Tailwind utility classes + custom component classes. Loaded AFTER output.css so these unlayered rules win over Tailwind's layered utilities. ============================================================ */ html.dark { color-scheme: dark; --dm-bg: #282624; /* main page background (warm dark) */ --dm-surface: #322f2c; /* cards / bg-white */ --dm-surface-2: #393633; /* bg-gray-50 / gray-100 */ --dm-surface-3: #45413c; /* bg-gray-200/300 / hover */ --dm-surface-4: #504b45; /* bg-gray-300/400 */ --dm-border: #504a44; --dm-border-soft: #423e39; --dm-border-strong:#5c554e; --dm-text: #ece5d6; /* primary text — warm cream */ --dm-text-2: #d8d1c2; /* gray-700/800 */ --dm-muted: #ada494; /* gray-500/600 */ --dm-faint: #8c8477; /* gray-400 */ } /* ---------- Base ---------- */ html.dark body { background: var(--dm-bg); color: var(--dm-text); } html.dark .root-layout main { background: var(--dm-bg); } /* ---------- Backgrounds (grays) ---------- */ html.dark .bg-white { background-color: var(--dm-surface) !important; } html.dark .bg-gray-50 { background-color: var(--dm-surface-2) !important; } html.dark .bg-gray-100 { background-color: var(--dm-surface-2) !important; } html.dark .bg-gray-200 { background-color: var(--dm-surface-3) !important; } html.dark .bg-gray-300 { background-color: var(--dm-surface-4) !important; } html.dark .bg-slate-50 { background-color: var(--dm-surface-2) !important; } html.dark .bg-slate-100 { background-color: var(--dm-surface-2) !important; } /* Pale colored tints -> subtle warm dark tints (keep text readable) */ html.dark .bg-blue-50 { background-color: #2b333f !important; } html.dark .bg-blue-100 { background-color: #313b49 !important; } html.dark .bg-blue-200 { background-color: #384453 !important; } html.dark .bg-green-50 { background-color: #2c3327 !important; } html.dark .bg-green-100 { background-color: #323b2c !important; } html.dark .bg-red-50 { background-color: #392f2c !important; } html.dark .bg-red-100 { background-color: #443633 !important; } html.dark .bg-red-200 { background-color: #4d3c37 !important; } html.dark .bg-yellow-50 { background-color: #383219 !important; } html.dark .bg-yellow-100 { background-color: #40391d !important; } html.dark .bg-amber-50 { background-color: #383219 !important; } /* ---------- Text ---------- */ html.dark .text-black { color: #f2ecdd !important; } html.dark .text-gray-900 { color: #f2ecdd !important; } html.dark .text-gray-800 { color: var(--dm-text) !important; } html.dark .text-gray-700 { color: var(--dm-text-2) !important; } html.dark .text-gray-600 { color: #c3bbab !important; } html.dark .text-gray-500 { color: var(--dm-muted) !important; } html.dark .text-gray-400 { color: var(--dm-faint) !important; } html.dark .text-slate-600{ color: #c3bbab !important; } html.dark .text-slate-500{ color: var(--dm-muted) !important; } html.dark .text-slate-400{ color: var(--dm-faint) !important; } /* Colored text — softened & warmed so it reads clearly but is gentle at night */ html.dark .text-blue-800 { color: #9cbce0 !important; } html.dark .text-blue-700 { color: #93b4da !important; } html.dark .text-blue-600 { color: #8fb1d8 !important; } html.dark .text-blue-500 { color: #86a9d2 !important; } html.dark .text-green-800{ color: #a6cd8c !important; } html.dark .text-green-700{ color: #a6cd8c !important; } html.dark .text-green-600{ color: #9dc683 !important; } html.dark .text-red-700 { color: #e6a29b !important; } html.dark .text-red-600 { color: #e2968e !important; } html.dark .text-amber-800{ color: #e0c079 !important; } html.dark .text-amber-700{ color: #e0c079 !important; } html.dark .text-amber-600{ color: #dab766 !important; } html.dark .text-indigo-700{ color: #a8aee0 !important; } html.dark .text-red-500 { color: #e2968e !important; } html.dark .text-green-500{ color: #9dc683 !important; } html.dark .text-blue-400 { color: #86a9d2 !important; } html.dark .text-green-400{ color: #9dc683 !important; } /* ---------- Borders ---------- */ html.dark .border-gray-100 { border-color: var(--dm-border-soft) !important; } html.dark .border-gray-200 { border-color: var(--dm-border-soft) !important; } html.dark .border-gray-300 { border-color: var(--dm-border) !important; } html.dark .border-gray-400 { border-color: var(--dm-border-strong)!important; } html.dark .border-gray-500 { border-color: var(--dm-border-strong)!important; } html.dark .border-gray-600 { border-color: #6b6459 !important; } html.dark .border-gray-700 { border-color: #5c554e !important; } html.dark .border-slate-200{ border-color: var(--dm-border-soft) !important; } html.dark .border-slate-300{ border-color: var(--dm-border) !important; } /* ---------- Hover states (grays) ---------- */ html.dark .hover\:bg-gray-50:hover { background-color: var(--dm-surface-3) !important; } html.dark .hover\:bg-gray-100:hover { background-color: var(--dm-surface-3) !important; } html.dark .hover\:bg-gray-200:hover { background-color: var(--dm-surface-4) !important; } html.dark .hover\:bg-blue-50:hover { background-color: #313b49 !important; } html.dark .hover\:text-gray-900:hover { color: #f2ecdd !important; } /* ---------- Form controls (only those without an explicit bg/text utility) ---------- */ html.dark input:not([class*="bg-"]):not([type="checkbox"]):not([type="radio"]), html.dark select:not([class*="bg-"]), html.dark textarea:not([class*="bg-"]) { background-color: var(--dm-surface); } html.dark input:not([class*="text-"]):not([type="checkbox"]):not([type="radio"]), html.dark select:not([class*="text-"]), html.dark textarea:not([class*="text-"]) { color: var(--dm-text); } html.dark ::placeholder { color: var(--dm-muted); opacity: 1; } /* Cells without explicit border/bg utility get a soft dark border */ html.dark td:not([class*="border-"]), html.dark th:not([class*="border-"]) { border-color: var(--dm-border-soft); } /* ---------- Custom component classes (from input.css) ---------- */ html.dark .sidebar { background: #26241f; border-right-color: var(--dm-border); } html.dark .sidebar-header, html.dark .sidebar-footer { background: var(--dm-surface); border-color: var(--dm-border); } html.dark .sidebar-header small { color: var(--dm-muted) !important; } html.dark .nav-link { color: var(--dm-text-2); } html.dark .nav-link:hover { background: var(--dm-surface-2); } html.dark .nav-link.active { background: #3a4034; border-left-color: #b8bb26; color: #d5d99a; } html.dark .nav-link-category { color: var(--dm-text-2); } html.dark .nav-link-category:hover { background: rgba(184, 187, 38, 0.12); border-left-color: #b8bb26; } html.dark .submenu { border-left-color: var(--dm-border); } html.dark .submenu a, html.dark .submenu .sub-link { color: var(--dm-text-2); } html.dark .submenu a::before, html.dark .submenu .sub-link::before { background: var(--dm-border); } html.dark .submenu a:hover, html.dark .submenu .sub-link:hover { background: var(--dm-surface-2); color: #f2ecdd; } html.dark .submenu a.active, html.dark .submenu .sub-link.active { background: #3a4034; border-left-color: #b8bb26; color: #d5d99a; } html.dark .submenu .sub-link.sub-parent { color: var(--dm-text-2); } /* Search box / view-mode toggle / favorites area */ html.dark .search-input { background: var(--dm-surface); color: var(--dm-text); border-color: var(--dm-border); } html.dark .view-mode-toggle, html.dark .favorites-list-header, html.dark .add-favorites-panel { border-color: var(--dm-border); } /* Old-school widgets */ html.dark .tree-view, html.dark .org-list { background: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); } html.dark .org-item { border-color: var(--dm-border-soft); } html.dark .org-item:hover { background: var(--dm-surface-3); } html.dark .org-item.selected { background: var(--dm-surface-4); } html.dark .form-input, html.dark .form-select, html.dark .form-button { background: var(--dm-surface); color: var(--dm-text); border-color: var(--dm-border-strong); } /* Reconnect modal box */ html.dark .reconnect-box { background: var(--dm-surface); } html.dark .reconnect-title { color: var(--dm-text) !important; } /* ---------- App header bar (PageHeader.razor uses inline styles) ---------- */ /* Inline styles need !important from a stylesheet to be overridden. Scoped to the header's two top-level content areas so the notification / chatbot overlays (white popups) are left untouched. */ html.dark .app-header { background: var(--dm-surface) !important; border-bottom-color: var(--dm-border) !important; } html.dark .app-header > div:first-child h1 { color: var(--dm-text) !important; } html.dark .app-header > div:first-child button { color: var(--dm-text-2) !important; } html.dark .app-header > div:nth-child(2) button { color: var(--dm-muted) !important; } html.dark .app-header > div:first-child button:hover, html.dark .app-header > div:nth-child(2) button:hover { color: var(--dm-text) !important; } /* ---------- Theme toggle button ---------- */ .theme-toggle-btn { background: none; border: none; cursor: pointer; padding: 0.15rem; font-size: 0.7rem; line-height: 1; color: #374151; border-radius: 0.25rem; } .theme-toggle-btn:hover { background: rgba(0, 0, 0, 0.06); } html.dark .theme-toggle-btn { color: #e0c079; } html.dark .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.08); } /* ============================================================ App UI kit (qf-*, app-ui.css) — night mode ------------------------------------------------------------ app-ui.css is written light-first, so the whole design system needs a dark counterpart. Two layers: 1. Re-point the --qf-* tokens at this file's warm charcoal palette. Everything in app-ui.css that already uses var() follows automatically — surfaces, borders, inputs, section headers, the split panels. 2. Override the rules where app-ui.css hardcoded a colour: table heads, tiles, chips, meters, tabs, modals. Loaded after app-ui.css and scoped to html.dark, so these win on cascade order + specificity — no !important needed except where the markup carries an inline style. ============================================================ */ html.dark { --qf-blue: #7ea6d8; /* softened: full #2563eb glares on charcoal */ --qf-blue-dark: #6d97cd; --qf-blue-ink: #9cbce0; --qf-blue-soft: #313b49; /* section header bars */ --qf-blue-faint: #2b333f; /* row hover */ --qf-line: #5c554e; --qf-line-soft: #4a443e; --qf-bg: #282624; --qf-bg-soft: #322f2c; --qf-ink: #ece5d6; --qf-ink-2: #d8d1c2; --qf-muted: #ada494; } /* ---------- Shell ---------- */ html.dark .qf { color: var(--dm-text-2); } html.dark .qf-shell { background: var(--dm-bg); } html.dark .qf-pane, html.dark .qf-sec, html.dark .qf-fieldset, html.dark .qf-side { background: var(--dm-surface); border-color: var(--dm-border); } html.dark .qf-legend { color: var(--dm-text-2); } html.dark .qf-scroll { scrollbar-color: #6b645a var(--dm-surface-2); } html.dark .qf-scroll::-webkit-scrollbar-track, html.dark .qf-scroll::-webkit-scrollbar-corner { background: var(--dm-surface-2); } html.dark .qf-scroll::-webkit-scrollbar-thumb { background: #6b645a; border-color: var(--dm-surface-2); } html.dark .qf-scroll::-webkit-scrollbar-thumb:hover { background: #7d7568; } /* ---------- Section headers ---------- */ html.dark .qf-sec-head { background: var(--qf-blue-soft); border-bottom-color: var(--dm-border); } html.dark .qf-sec-head-gray { background: var(--dm-surface-2); } html.dark .qf-sec-title { color: var(--qf-blue-ink); } html.dark .qf-sec-head-gray .qf-sec-title { color: var(--dm-text-2) !important; } /* ---------- Summary tiles ---------- */ html.dark .qf-tile { background: var(--dm-surface-2); border-color: var(--dm-border); } html.dark .qf-tile-label, html.dark .qf-tile-sub { color: var(--dm-muted); } html.dark .qf-t-slate { background: #343330; border-color: #4f4a44; } html.dark .qf-t-slate .qf-tile-value { color: #cfc8ba; } html.dark .qf-t-blue { background: #2b333f; border-color: #3d4a5c; } html.dark .qf-t-blue .qf-tile-value { color: #9cbce0; } html.dark .qf-t-green { background: #2c3327; border-color: #414d38; } html.dark .qf-t-green .qf-tile-value { color: #a6cd8c; } html.dark .qf-t-amber { background: #383219; border-color: #514726; } html.dark .qf-t-amber .qf-tile-value { color: #e0c079; } html.dark .qf-t-red { background: #392f2c; border-color: #543f3a; } html.dark .qf-t-red .qf-tile-value { color: #e6a29b; } html.dark .qf-t-indigo { background: #2f2f42; border-color: #43436b; } html.dark .qf-t-indigo .qf-tile-value { color: #a8aee0; } html.dark .qf-t-purple { background: #362e3d; border-color: #4d4159; } html.dark .qf-t-purple .qf-tile-value { color: #c6a6da; } html.dark .qf-t-teal { background: #263533; border-color: #37504c; } html.dark .qf-t-teal .qf-tile-value { color: #8ccbc2; } /* ---------- Form controls ---------- */ html.dark .qf-input, html.dark .qf-select, html.dark .qf-textarea { background: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); } html.dark .qf-input:focus, html.dark .qf-select:focus, html.dark .qf-textarea:focus { border-color: var(--qf-blue); box-shadow: 0 0 0 2px rgba(126, 166, 216, 0.22); } html.dark .qf-input[readonly], html.dark .qf-input:disabled, html.dark .qf-select:disabled, html.dark .qf-textarea:disabled { background: #2f2d2a; color: var(--dm-faint); } /* Key fields keep their "fill this in" tint, warmed for night. */ html.dark .qf-input-key, html.dark .qf-input-key[readonly] { background: #3a3524; color: var(--dm-text); } html.dark .qf-input-auto { background: #35322a; color: var(--dm-muted); } html.dark .qf-row > label, html.dark .qf-fld > label, html.dark .qf-radioset { color: var(--dm-text-2); } html.dark .qf-radioset { background: var(--dm-surface-2); border-color: var(--dm-border); } html.dark .qf-pick-btn { background: var(--qf-blue); border-color: var(--qf-blue); color: #22201d; } html.dark .qf-pick-btn:hover { background: var(--qf-blue-dark); } /* ---------- Tables ---------- */ html.dark .qf-grid { border-color: var(--dm-border); } html.dark .qf-table thead th, html.dark .qf-table tfoot td { background: var(--dm-surface-3); border-color: var(--dm-border); color: var(--dm-text); } html.dark .qf-table tbody td { border-color: var(--dm-border-soft); } html.dark .qf-table tbody tr:hover { background: var(--qf-blue-faint); } html.dark .qf-table tbody tr.qf-sel, html.dark .qf-table tbody tr.qf-sel:hover { background: #37424f; } html.dark .qf-th-sort:hover { background: var(--dm-surface-4); } html.dark .qf-searchrow td { background: #2f3843; } html.dark .qf-colsearch { color: var(--dm-text); } html.dark .qf-colsearch::placeholder { color: var(--dm-muted); } html.dark .qf-empty { color: var(--dm-faint); } html.dark .qf-link { color: #9cbce0; } html.dark .qf-muted { color: var(--dm-muted); } html.dark .qf-cell-input { color: var(--dm-text); } html.dark .qf-cell-input:hover { border-color: var(--dm-border); } html.dark .qf-cell-input:focus { border-color: var(--qf-blue); background: var(--dm-surface-2); } /* ---------- Status chips ---------- */ html.dark .qf-chip { background: var(--dm-surface-3); color: var(--dm-text-2); } html.dark .qf-chip-draft { background: #3a3733; color: #cfc8ba; } html.dark .qf-chip-sent { background: #313b49; color: #9cbce0; } html.dark .qf-chip-viewed { background: #2f2f42; color: #a8aee0; } html.dark .qf-chip-accepted, html.dark .qf-chip-paid, html.dark .qf-chip-done { background: #2c3327; color: #a6cd8c; } html.dark .qf-chip-rejected, html.dark .qf-chip-overdue { background: #392f2c; color: #e6a29b; } html.dark .qf-chip-changes, html.dark .qf-chip-due { background: #3a3122; color: #e0b98a; } html.dark .qf-chip-partial { background: #383219; color: #e0c079; } html.dark .qf-chip-expired { background: #35322e; color: var(--dm-muted); } html.dark .qf-chip-converted { background: #263533; color: #8ccbc2; } html.dark .qf-chip-upcoming { background: #2b333f; color: #93b4da; } html.dark .qf-ch-wa { background: #2c3327; color: #a6cd8c; } html.dark .qf-ch-em { background: #313b49; color: #9cbce0; } html.dark .qf-ch-cl { background: #362e3d; color: #c6a6da; } /* ---------- Pager ---------- */ html.dark .qf-pager { background: var(--dm-surface-2); border-color: var(--dm-border); } html.dark .qf-pager-info { color: var(--dm-muted); } html.dark .qf-pg { background: var(--dm-surface); border-color: var(--dm-border); color: var(--dm-text-2); } html.dark .qf-pg:hover:not(:disabled) { background: var(--dm-surface-3); } html.dark .qf-pg.qf-pg-on { background: #3d5a80; border-color: #3d5a80; color: #eef3fa; } /* ---------- Two-panel entry ---------- */ html.dark .qf-side-filter, html.dark .qf-side-list { border-bottom-color: var(--dm-border); } html.dark .qf-side-item { border-bottom-color: var(--dm-border-soft); } html.dark .qf-side-item:hover { background: var(--dm-surface-2); } html.dark .qf-side-item.qf-sel { background: #3d5a80; color: #eef3fa; } html.dark .qf-side-item.qf-sel .qf-side-item-sub { color: #c4d5e8; } html.dark .qf-side-item-sub { color: var(--dm-muted); } html.dark .qf-side-foot { background: var(--dm-surface-2); color: var(--dm-muted); } html.dark .qf-side-toggle { background: var(--qf-blue); color: #22201d; } html.dark .qf-side-toggle:hover { background: var(--qf-blue-dark); } /* ---------- Dashboard bits ---------- */ html.dark .qf-quick-btn { background: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text-2); } html.dark .qf-quick-btn:hover { background: var(--qf-blue-faint); border-color: var(--qf-blue); } html.dark .qf-bar { background: linear-gradient(180deg, #7ea6d8 0%, #4f7cb0 100%); } html.dark .qf-bar-alt { background: linear-gradient(180deg, #a6cd8c 0%, #6f9b57 100%); } html.dark .qf-bar-lbl { color: var(--dm-muted); } html.dark .qf-meter { background: var(--dm-surface-4); } html.dark .qf-meter-fill { background: #6f9b57; } html.dark .qf-meter-fill-warn { background: #b8963f; } html.dark .qf-meter-fill-bad { background: #b0655c; } /* ---------- Totals ---------- */ html.dark .qf-total-grand { border-top-color: var(--dm-border-strong); color: var(--qf-blue-ink); } /* ---------- Tabs ---------- */ html.dark .qf-tabs { border-bottom-color: var(--dm-border); } html.dark .qf-tab { color: var(--dm-muted); } html.dark .qf-tab:hover { background: var(--dm-surface-2); color: var(--dm-text); } html.dark .qf-tab.qf-tab-on { background: var(--dm-surface); color: var(--qf-blue-ink); border-color: var(--dm-border); border-bottom-color: var(--dm-surface); } /* ---------- Modal ---------- */ html.dark .qf-overlay { background: rgba(0, 0, 0, 0.66); } html.dark .qf-modal { background: var(--dm-surface); } html.dark .qf-modal-head { background: var(--dm-surface-2); border-bottom-color: var(--dm-border); } html.dark .qf-modal-title { color: var(--dm-text); } html.dark .qf-modal-x { color: #e2968e; } html.dark .qf-modal-x:hover { background: #392f2c; } html.dark .qf-modal-foot { background: var(--dm-surface-2); border-top-color: var(--dm-border); } /* ---------- Notes / misc ---------- */ html.dark .qf-note { background: #2b333f; border-color: #3d4a5c; color: #9cbce0; } html.dark .qf-note-warn { background: #383219; border-color: #514726; color: #e0c079; } html.dark .qf-pos { color: #a6cd8c; } html.dark .qf-neg { color: #e6a29b; } html.dark .qf-warn { color: #e0c079; } html.dark .qf-ink-danger { color: #e2968e; } html.dark .qf-hr { border-top-color: var(--dm-border); } html.dark .qf-avatar { background: #3f4266; color: #c3c8ee; } html.dark .qf-strong { color: var(--dm-text); } html.dark .qf-req { color: #e2968e; } /* ---------- Ghost / neutral buttons ---------- */ /* The solid brand buttons (primary, success, danger…) read fine on charcoal and are left alone; only the ones that were white-on-white need help. */ html.dark .qf-btn { background: transparent; color: var(--dm-text-2); } html.dark .qf-btn-ghost { background: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text-2); } html.dark .qf-btn-ghost:hover:not(:disabled) { background: var(--dm-surface-3); } /* ---------- Public page shell (sign-up) ---------- */ html.dark .qf-public { background: #211f1d; } html.dark .qf-paper { background: var(--dm-surface); border-color: var(--dm-border); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); } html.dark .qf-paper-head { border-bottom-color: var(--qf-blue); } html.dark .qf-paper-foot { background: var(--dm-surface-2); border-top-color: var(--dm-border); } html.dark .qf-brand { background: #3d5a80; color: #eef3fa; } /* Inline styles on a few screens hardcode near-black text on what is now a dark surface. These are the ones that would otherwise disappear. */ html.dark .qf-paper-head div[style*="color:#111827"], html.dark .qf-sec-body div[style*="color:#111827"] { color: var(--dm-text) !important; }