/* ============================================================ Dark-UI override for dashboard mockups. Applied when is set. The mocks (.ui-window and children) flip to dark surfaces. The marketing page chrome around them stays unchanged. ============================================================ */ [data-dashboard-dark="1"] .ui-window { background: #0F1620 !important; color: #E5E9EE !important; border-color: rgba(255,255,255,0.08) !important; } [data-dashboard-dark="1"] .ui-titlebar { background: linear-gradient(180deg, #14202B, #0F1620) !important; border-bottom-color: rgba(255,255,255,0.08) !important; } [data-dashboard-dark="1"] .ui-url { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.10) !important; color: rgba(255,255,255,0.55) !important; } /* Sidebar */ [data-dashboard-dark="1"] .ui-side { background: #0B1622 !important; border-right-color: rgba(255,255,255,0.06) !important; } [data-dashboard-dark="1"] .ui-side-brand span { color: #fff !important; } [data-dashboard-dark="1"] .ui-nav-group h6 { color: rgba(255,255,255,0.4) !important; } [data-dashboard-dark="1"] .ui-nav-item { color: rgba(255,255,255,0.7) !important; } [data-dashboard-dark="1"] .ui-nav-item.active { background: rgba(20,184,166,0.18) !important; color: #5BE49B !important; } [data-dashboard-dark="1"] .ui-nav-item .ic { background: rgba(255,255,255,0.10) !important; } /* Main pane (overrides inline `background: #FBFCFD`) */ [data-dashboard-dark="1"] .ui-shell > main { background: #0E1924 !important; } [data-dashboard-dark="1"] .ui-shell > main::after { background: linear-gradient(to top, #0E1924 35%, rgba(14,25,36,0)) !important; } [data-dashboard-dark="1"] .ui-shell > main::before { background: linear-gradient(to bottom, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 22%, rgba(255,255,255,0.20) 22%, rgba(255,255,255,0.20) 48%, rgba(255,255,255,0.04) 48%, rgba(255,255,255,0.04) 100%) !important; } /* Topbar */ [data-dashboard-dark="1"] .ui-top { background: #0F1620 !important; border-bottom-color: rgba(255,255,255,0.06) !important; } [data-dashboard-dark="1"] .ui-search { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.08) !important; color: rgba(255,255,255,0.5) !important; } [data-dashboard-dark="1"] .ui-icon-btn { background: rgba(255,255,255,0.04) !important; color: rgba(255,255,255,0.65) !important; } /* Cards */ [data-dashboard-dark="1"] .ui-card { background: #14202B !important; border-color: rgba(255,255,255,0.06) !important; } [data-dashboard-dark="1"] .ui-stat-value { color: #fff !important; } [data-dashboard-dark="1"] .ui-stat-label { color: rgba(255,255,255,0.55) !important; } /* Tables */ [data-dashboard-dark="1"] .ui-table th { color: rgba(255,255,255,0.45) !important; border-bottom-color: rgba(255,255,255,0.08) !important; } [data-dashboard-dark="1"] .ui-table td { color: rgba(255,255,255,0.85) !important; border-bottom-color: rgba(255,255,255,0.06) !important; } /* Tags / chips */ [data-dashboard-dark="1"] .ui-tag { background: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.78) !important; } [data-dashboard-dark="1"] .ui-tag.brand { background: rgba(20,184,166,0.18) !important; color: #5BE49B !important; } [data-dashboard-dark="1"] .ui-tag.warn { background: rgba(255,171,0,0.18) !important; color: #FFD666 !important; } [data-dashboard-dark="1"] .ui-tag.ok { background: rgba(34,197,94,0.18) !important; color: #86EFAC !important; } [data-dashboard-dark="1"] .ui-tag.err { background: rgba(255,86,48,0.18) !important; color: #FFAC82 !important; } [data-dashboard-dark="1"] .ui-tag.purple { background: rgba(142,51,255,0.20) !important; color: #C684FF !important; } /* Avatars stack — keep colors but darken white border */ [data-dashboard-dark="1"] .ui-stack > * { border-color: #0F1620 !important; } /* Inline-style escapes: flip the most common hard-coded colors used in the Mock* bodies. Some look-up here is fuzzy (CSS can't match React-serialized style attrs reliably), so we also scope a handful of structural selectors used by the Mock components. */ /* MockAdmissions — kanban lane background */ [data-dashboard-dark="1"] .ui-shell > main > div > div > div[style*="background: rgb(244, 246, 248)"], [data-dashboard-dark="1"] .ui-shell > main > div > div > div[style*="background: #F4F6F8"] { background: #0B1622 !important; } /* Inline-styled subtitles "#0F2A36" / headings — make them light. */ [data-dashboard-dark="1"] .ui-shell h3, [data-dashboard-dark="1"] .ui-shell h4 { color: #fff !important; } /* Dashed "+ Add applicant" footer in kanban — react with border + color */ [data-dashboard-dark="1"] .ui-shell *[style*="dashed"] { border-color: rgba(255,255,255,0.10) !important; color: rgba(255,255,255,0.45) !important; } /* MockReports — student picker selected state uses inline rgba(20,184,166,0.08), keep */ /* MockReports — student name initials chip already gradient, leaves it */ /* MockMessaging — thread bubbles */ [data-dashboard-dark="1"] .ui-shell *[style*="background: rgb(244, 246, 248)"] { background: #1A2935 !important; color: rgba(255,255,255,0.85) !important; } /* MockReports / Finance text colors used inline */ [data-dashboard-dark="1"] .ui-shell *[style*="color: rgb(15, 42, 54)"] { color: #fff !important; } [data-dashboard-dark="1"] .ui-shell *[style*="color: rgb(28, 37, 46)"] { color: #fff !important; } [data-dashboard-dark="1"] .ui-shell *[style*="color: rgb(69, 79, 91)"] { color: rgba(255,255,255,0.78) !important; } [data-dashboard-dark="1"] .ui-shell *[style*="color: rgb(99, 115, 129)"] { color: rgba(255,255,255,0.55) !important; } [data-dashboard-dark="1"] .ui-shell *[style*="color: rgb(145, 158, 171)"] { color: rgba(255,255,255,0.45) !important; } /* Inline white backgrounds inside the mock */ [data-dashboard-dark="1"] .ui-shell *[style*="background: rgb(255, 255, 255)"], [data-dashboard-dark="1"] .ui-shell *[style*="background: #fff"], [data-dashboard-dark="1"] .ui-shell *[style*="background: white"] { background: #14202B !important; } /* Light grey track backgrounds (progress / sparkline) */ [data-dashboard-dark="1"] .ui-shell *[style*="background: rgb(238, 241, 244)"], [data-dashboard-dark="1"] .ui-shell *[style*="background: rgb(223, 227, 232)"] { background: rgba(255,255,255,0.08) !important; } /* Sparkline grid lines in finance — keep but darken */ [data-dashboard-dark="1"] svg line[stroke="#EEF1F4"] { stroke: rgba(255,255,255,0.06) !important; } /* Message reply gradient — make a touch darker tone */ [data-dashboard-dark="1"] .ui-shell *[style*="rgba(20, 184, 166, 0.12)"] { background: linear-gradient(135deg, rgba(20,184,166,0.22), rgba(14,165,233,0.22)) !important; color: #fff !important; } /* Suggested-by-helm card in messaging */ [data-dashboard-dark="1"] .ui-shell *[style*="background: rgb(251, 252, 253)"] { background: #14202B !important; }