/* =============================================================================
DARK MODE OVERRIDES
=============================================================================
When is set, these rules override Tailwind utility classes
and custom styles to provide a consistent dark theme.
Strategy: Override light-only Tailwind classes with dark equivalents using
the .dark ancestor selector. This avoids modifying 2000+ class references
across 60+ Razor components.
============================================================================= */
/* =============================================================================
1. GLOBAL DEFAULTS
============================================================================= */
.dark body {
background-color: #0f172a; /* slate-900 */
color: #e2e8f0; /* slate-200 */
}
/* =============================================================================
2. BACKGROUND COLORS — Neutral (white / slate / gray)
============================================================================= */
.dark .bg-white {
background-color: #1e293b !important; /* slate-800 */
}
/* Tailwind bg-white/95, bg-white/10, bg-white/20 (used in GlobalSearch etc.) */
.dark [class*="bg-white\/"] {
--tw-bg-opacity: 1;
}
.dark .bg-white\/95 {
background-color: rgba(30, 41, 59, 0.95) !important;
}
.dark .bg-white\/10 {
background-color: rgba(148, 163, 184, 0.1) !important;
}
.dark .bg-white\/20 {
background-color: rgba(148, 163, 184, 0.2) !important;
}
.dark .bg-slate-50 {
background-color: #0f172a !important; /* slate-900 */
}
/* Opacity-suffixed slate-50 panels (bg-slate-50/40 … /80) — subtle grouping
boxes and table-header strips. A faint slate-400 tint gives gentle definition
on both slate-900 page and slate-800 card surfaces; the solid override above
doesn't match these escaped opacity classes, leaving them light otherwise. */
.dark .bg-slate-50\/40,
.dark .bg-slate-50\/50,
.dark .bg-slate-50\/60,
.dark .bg-slate-50\/80 {
background-color: rgba(148, 163, 184, 0.08) !important; /* slate-400/8 */
}
.dark .bg-slate-100 {
background-color: #1e293b !important; /* slate-800 */
}
.dark .bg-slate-200 {
background-color: #334155 !important; /* slate-700 */
}
.dark .bg-slate-300 {
background-color: #475569 !important; /* slate-600 */
}
.dark .bg-slate-400 {
background-color: #64748b !important; /* slate-500 */
}
.dark .bg-slate-500 {
background-color: #475569 !important; /* slate-600 */
}
.dark .bg-slate-600 {
background-color: #334155 !important; /* slate-700 */
}
.dark .bg-slate-700 {
background-color: #1e293b !important; /* slate-800 */
}
.dark .bg-slate-800 {
background-color: #0f172a !important; /* slate-900 */
}
.dark .bg-slate-900 {
background-color: #020617 !important; /* slate-950 */
}
.dark .bg-gray-50 {
background-color: #111827 !important; /* gray-900 */
}
.dark .bg-gray-100 {
background-color: #1f2937 !important; /* gray-800 */
}
.dark .bg-gray-200 {
background-color: #374151 !important; /* gray-700 */
}
.dark .bg-gray-400 {
background-color: #4b5563 !important; /* gray-600 */
}
.dark .bg-gray-500 {
background-color: #374151 !important; /* gray-700 */
}
/* =============================================================================
3. TEXT COLORS — Neutral (slate / gray / white)
============================================================================= */
.dark .text-slate-900 {
color: #f1f5f9 !important; /* slate-100 */
}
.dark .text-slate-800 {
color: #e2e8f0 !important; /* slate-200 */
}
.dark .text-slate-700 {
color: #cbd5e1 !important; /* slate-300 */
}
.dark .text-slate-600 {
color: #94a3b8 !important; /* slate-400 */
}
.dark .text-slate-500 {
color: #94a3b8 !important; /* slate-400 */
}
.dark .text-slate-400 {
color: #64748b !important; /* slate-500 — keeps muted feel */
}
.dark .text-slate-300 {
color: #cbd5e1 !important; /* stays readable */
}
.dark .text-gray-900 {
color: #f3f4f6 !important; /* gray-100 */
}
.dark .text-gray-800 {
color: #e5e7eb !important; /* gray-200 */
}
.dark .text-gray-700 {
color: #d1d5db !important; /* gray-300 */
}
.dark .text-gray-600 {
color: #9ca3af !important; /* gray-400 */
}
.dark .text-gray-500 {
color: #9ca3af !important; /* gray-400 */
}
.dark .text-gray-400 {
color: #6b7280 !important; /* gray-500 */
}
/* text-white stays white in dark mode — no override needed */
/* =============================================================================
4. BORDER COLORS — Neutral
============================================================================= */
.dark .border-slate-50 {
border-color: #334155 !important; /* slate-700 */
}
.dark .border-slate-100 {
border-color: #334155 !important; /* slate-700 */
}
.dark .border-slate-200 {
border-color: #475569 !important; /* slate-600 */
}
.dark .border-slate-300 {
border-color: #475569 !important; /* slate-600 */
}
.dark .border-slate-400 {
border-color: #64748b !important; /* slate-500 */
}
.dark .border-slate-900 {
border-color: #e2e8f0 !important; /* slate-200 */
}
.dark .border-gray-200 {
border-color: #4b5563 !important; /* gray-600 */
}
.dark .border-gray-300 {
border-color: #4b5563 !important; /* gray-600 */
}
.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
border-color: #475569 !important; /* slate-600 */
}
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
border-color: #4b5563 !important; /* gray-600 */
}
/* =============================================================================
5. COLORED BACKGROUNDS — Semantic (status badges, alerts, highlights)
============================================================================= */
/* --- Red --- */
.dark .bg-red-50 {
background-color: rgba(127, 29, 29, 0.3) !important; /* red-900/30 */
}
.dark .bg-red-100 {
background-color: rgba(153, 27, 27, 0.35) !important; /* red-800/35 */
}
.dark .bg-red-500 {
background-color: #dc2626 !important; /* stays vivid */
}
.dark .border-red-200 {
border-color: #991b1b !important; /* red-800 */
}
.dark .border-red-300 {
border-color: #991b1b !important;
}
/* --- Green --- */
.dark .bg-green-50 {
background-color: rgba(6, 78, 59, 0.3) !important; /* emerald-900/30 */
}
.dark .bg-green-100 {
background-color: rgba(6, 95, 70, 0.35) !important;
}
.dark .bg-green-500 {
background-color: #16a34a !important;
}
.dark .border-green-200 {
border-color: #065f46 !important;
}
/* --- Emerald --- */
.dark .bg-emerald-50 {
background-color: rgba(6, 78, 59, 0.3) !important;
}
.dark .bg-emerald-100 {
background-color: rgba(6, 95, 70, 0.35) !important;
}
.dark .bg-emerald-500 {
background-color: #10b981 !important;
}
.dark .border-emerald-200 {
border-color: #065f46 !important;
}
/* --- Blue --- */
.dark .bg-blue-50 {
background-color: rgba(30, 58, 138, 0.3) !important; /* blue-900/30 */
}
.dark .bg-blue-100 {
background-color: rgba(30, 64, 175, 0.35) !important;
}
.dark .bg-blue-500 {
background-color: #3b82f6 !important;
}
.dark .border-blue-200 {
border-color: #1e40af !important;
}
/* --- Sky --- */
.dark .bg-sky-50 {
background-color: rgba(12, 74, 110, 0.3) !important;
}
.dark .bg-sky-100 {
background-color: rgba(7, 89, 133, 0.35) !important;
}
.dark .bg-sky-500 {
background-color: #0ea5e9 !important;
}
.dark .border-sky-200 {
border-color: #075985 !important;
}
/* --- Amber --- */
.dark .bg-amber-50 {
background-color: rgba(120, 53, 15, 0.3) !important; /* amber-900/30 */
}
.dark .bg-amber-100 {
background-color: rgba(146, 64, 14, 0.35) !important;
}
.dark .bg-amber-500 {
background-color: #f59e0b !important;
}
.dark .border-amber-200 {
border-color: #92400e !important;
}
/* --- Orange --- */
.dark .bg-orange-50 {
background-color: rgba(124, 45, 18, 0.3) !important;
}
.dark .bg-orange-100 {
background-color: rgba(154, 52, 18, 0.35) !important;
}
.dark .bg-orange-500 {
background-color: #f97316 !important;
}
.dark .border-orange-200 {
border-color: #9a3412 !important;
}
/* --- Yellow --- */
.dark .bg-yellow-100 {
background-color: rgba(113, 63, 18, 0.35) !important;
}
.dark .bg-yellow-500 {
background-color: #eab308 !important;
}
/* --- Purple --- */
.dark .bg-purple-50 {
background-color: rgba(88, 28, 135, 0.3) !important;
}
.dark .bg-purple-100 {
background-color: rgba(107, 33, 168, 0.35) !important;
}
.dark .bg-purple-500 {
background-color: #a855f7 !important;
}
.dark .border-purple-200 {
border-color: #6b21a8 !important;
}
/* --- Rose --- */
.dark .bg-rose-50 {
background-color: rgba(136, 19, 55, 0.3) !important;
}
.dark .border-rose-200 {
border-color: #9f1239 !important;
}
/* --- Indigo --- */
.dark .bg-indigo-50 {
background-color: rgba(49, 46, 129, 0.3) !important;
}
.dark .bg-indigo-100 {
background-color: rgba(55, 48, 163, 0.35) !important;
}
/* --- Teal --- */
.dark .bg-teal-50 {
background-color: rgba(19, 78, 74, 0.3) !important; /* teal-900/30 */
}
.dark .bg-teal-100 {
background-color: rgba(17, 94, 89, 0.35) !important; /* teal-800/35 */
}
.dark .bg-teal-500 {
background-color: #14b8a6 !important;
}
.dark .border-teal-200 {
border-color: #115e59 !important; /* teal-800 */
}
/* --- Cyan --- */
.dark .bg-cyan-500 {
background-color: #06b6d4 !important;
}
/* --- Violet --- */
.dark .bg-violet-500 {
background-color: #8b5cf6 !important;
}
/* =============================================================================
6. COLORED TEXT — Status text colors
============================================================================= */
/* Dark mode text colors generally stay vivid/readable — keep 500-600 range.
Darken 800-level text slightly since dark backgrounds need softer contrast. */
.dark .text-red-800 {
color: #fca5a5 !important; /* red-300 */
}
.dark .text-red-700 {
color: #f87171 !important; /* red-400 */
}
.dark .text-red-600 {
color: #ef4444 !important; /* red-500 */
}
.dark .text-red-500 {
color: #ef4444 !important;
}
.dark .text-green-800 {
color: #86efac !important; /* green-300 */
}
.dark .text-green-700 {
color: #4ade80 !important; /* green-400 */
}
.dark .text-green-600 {
color: #22c55e !important; /* green-500 */
}
.dark .text-emerald-800 {
color: #6ee7b7 !important; /* emerald-300 */
}
.dark .text-emerald-700 {
color: #34d399 !important; /* emerald-400 */
}
.dark .text-emerald-600 {
color: #10b981 !important; /* emerald-500 */
}
.dark .text-blue-800 {
color: #93c5fd !important; /* blue-300 */
}
.dark .text-blue-700 {
color: #60a5fa !important; /* blue-400 */
}
.dark .text-blue-600 {
color: #3b82f6 !important; /* blue-500 */
}
.dark .text-blue-500 {
color: #60a5fa !important; /* blue-400 */
}
.dark .text-sky-800 {
color: #7dd3fc !important; /* sky-300 */
}
.dark .text-sky-700 {
color: #38bdf8 !important; /* sky-400 */
}
.dark .text-sky-600 {
color: #0ea5e9 !important; /* sky-500 */
}
.dark .text-amber-800 {
color: #fcd34d !important; /* amber-300 */
}
.dark .text-amber-700 {
color: #fbbf24 !important; /* amber-400 */
}
.dark .text-amber-600 {
color: #f59e0b !important; /* amber-500 */
}
.dark .text-amber-500 {
color: #f59e0b !important;
}
.dark .text-orange-800 {
color: #fdba74 !important; /* orange-300 */
}
.dark .text-orange-700 {
color: #fb923c !important; /* orange-400 */
}
.dark .text-orange-600 {
color: #f97316 !important; /* orange-500 */
}
.dark .text-yellow-800 {
color: #fde047 !important; /* yellow-300 */
}
.dark .text-yellow-700 {
color: #facc15 !important; /* yellow-400 */
}
.dark .text-yellow-600 {
color: #eab308 !important; /* yellow-500 */
}
.dark .text-purple-700 {
color: #c084fc !important; /* purple-400 */
}
.dark .text-purple-600 {
color: #a855f7 !important; /* purple-500 */
}
.dark .text-purple-500 {
color: #a855f7 !important;
}
.dark .text-indigo-700 {
color: #818cf8 !important; /* indigo-400 */
}
.dark .text-indigo-600 {
color: #6366f1 !important; /* indigo-500 */
}
.dark .text-teal-700 {
color: #2dd4bf !important; /* teal-400 */
}
.dark .text-teal-600 {
color: #14b8a6 !important; /* teal-500 */
}
/* =============================================================================
7. GRADIENT OVERRIDES
============================================================================= */
/* Gradients used for badges/charts — keep vivid in dark mode, no override needed
for from-emerald-500, from-sky-500, from-blue-500, to-blue-600, to-teal-600 */
/* =============================================================================
8. RING / FOCUS COLORS
============================================================================= */
.dark .ring-slate-200 {
--tw-ring-color: #475569 !important;
}
.dark .ring-gray-200 {
--tw-ring-color: #4b5563 !important;
}
/* =============================================================================
9. SHADOW ADJUSTMENTS
============================================================================= */
.dark .shadow-sm,
.dark .shadow,
.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-xl,
.dark .shadow-2xl {
--tw-shadow-color: rgba(0, 0, 0, 0.4);
}
/* =============================================================================
10. MUDBLAZOR COMPONENT OVERRIDES
=============================================================================
CRITICAL: Use hardcoded colors here, NOT var(--mud-palette-*).
MudBlazor CSS variables are only set once MudThemeProvider renders with
IsDarkMode=true (after Blazor hydrates in OnAfterRenderAsync). Using
var() references causes a white flash on page load. Hardcoded values
apply instantly via the .dark class on .
============================================================================= */
/* --- Core layout surfaces (prevent FOUC) --- */
.dark .mud-appbar {
background-color: #0f172a !important; /* slate-900 — matches PaletteDark.AppbarBackground */
color: #e2e8f0 !important;
}
.dark .mud-drawer {
background-color: #1e293b !important; /* slate-800 — matches PaletteDark.DrawerBackground */
color: #e2e8f0 !important;
}
.dark .mud-drawer-content {
background-color: #1e293b !important;
}
.dark .mud-main-content {
background-color: #0f172a !important; /* slate-900 — matches PaletteDark.Background */
}
/* Paper surfaces (cards, dialogs, etc.) */
.dark .mud-paper {
background-color: #1e293b !important; /* slate-800 */
}
/* Cards */
.dark .mud-card {
background-color: #1e293b !important;
}
/* DataGrid / Table */
.dark .mud-table {
background-color: #1e293b !important;
}
.dark .mud-table-container {
background-color: #1e293b !important;
}
.dark .mud-table-row:hover {
background-color: rgba(71, 85, 105, 0.3) !important; /* slate-600/30 */
}
.dark .mud-table-head .mud-table-cell {
background-color: #1e293b !important;
color: #94a3b8 !important;
}
.dark .mud-table-cell {
border-bottom-color: #334155 !important;
}
.dark .mud-table-foot .mud-table-cell {
background-color: #1e293b !important;
}
/* Chip with custom background */
.dark .mud-chip.mud-chip-filled {
border: 1px solid rgba(148, 163, 184, 0.2);
}
/* Dialog / overlay */
.dark .mud-dialog {
background-color: #1e293b !important;
}
.dark .mud-overlay {
background-color: rgba(0, 0, 0, 0.6) !important;
}
/* Input fields */
.dark .mud-input {
color: #e2e8f0 !important;
}
/* MudBlazor input slot must stay transparent so the field inherits the
surrounding surface color. Without this, the native-input override in
section 12 (.dark input[type="text"] / [type="search"]) paints the
slate-900 while the icon adornment span keeps the slate-800 card color,
producing a visible seam between the adornment and the text zone. */
.dark .mud-input-slot,
.dark .mud-input-root {
background-color: transparent !important;
}
.dark .mud-input-label {
color: #94a3b8 !important;
}
.dark .mud-input-outlined .mud-input-outlined-border {
border-color: #475569 !important;
}
.dark .mud-input-outlined:hover .mud-input-outlined-border {
border-color: #64748b !important;
}
.dark .mud-input-underline::before {
border-bottom-color: #475569 !important;
}
/* Tabs */
.dark .mud-tabs-header {
border-bottom-color: #475569 !important;
}
/* Menu */
.dark .mud-menu .mud-list {
background-color: #1e293b !important;
}
.dark .mud-list {
background-color: #1e293b !important;
color: #e2e8f0 !important;
}
.dark .mud-list-item:hover {
background-color: rgba(71, 85, 105, 0.3) !important;
}
.dark .mud-popover {
background-color: #1e293b !important;
border-color: #475569 !important;
}
/* Navigation drawer hover — override MainLayout.razor.css */
.dark .mud-nav-link {
color: #e2e8f0 !important;
}
.dark .mud-nav-link:hover {
background-color: rgba(148, 163, 184, 0.1) !important;
}
.dark .mud-nav-link.active {
background-color: rgba(148, 163, 184, 0.15) !important;
}
.dark .mud-nav-link .mud-icon-root {
color: #94a3b8 !important; /* slate-400 */
}
.dark .mud-nav-link.active .mud-icon-root {
color: #e2e8f0 !important; /* slate-200 */
}
.dark .mud-nav-group-header {
color: #e2e8f0 !important;
}
.dark .mud-nav-group-header:hover {
background-color: rgba(148, 163, 184, 0.1) !important;
}
/* Expansion panel */
.dark .mud-expand-panel {
background-color: #1e293b !important;
}
/* Skeleton loader */
.dark .mud-skeleton {
background-color: #334155 !important;
}
/* Autocomplete */
.dark .mud-autocomplete .mud-list {
background-color: #1e293b !important;
}
/* Select */
.dark .mud-select .mud-list {
background-color: #1e293b !important;
}
/* Divider */
.dark .mud-divider {
border-color: #334155 !important;
}
/* Toolbar */
.dark .mud-toolbar {
background-color: #1e293b !important;
}
/* Tooltip */
.dark .mud-tooltip {
background-color: #334155 !important;
color: #e2e8f0 !important;
}
/* Alert */
.dark .mud-alert {
color: #e2e8f0 !important;
}
/* Switch / Checkbox / Radio labels */
.dark .mud-switch,
.dark .mud-checkbox,
.dark .mud-radio {
color: #e2e8f0 !important;
}
/* =============================================================================
10b. AI ASSISTANT DRAWER — Dark mode overrides
============================================================================= */
.dark .ai-drawer {
background: #1e293b;
border-left-color: #334155;
}
.dark .ai-drawer-messages {
background: #0f172a;
}
.dark .ai-drawer-input {
background: #1e293b;
border-top-color: #334155;
}
.dark .ai-msg-user .ai-msg-content {
background: #334155;
color: #f1f5f9;
}
.dark .ai-msg-assistant .ai-msg-content {
background: #1e293b;
color: #e2e8f0;
border-color: #334155;
}
.dark .ai-msg-assistant .ai-msg-content h2 {
color: #f1f5f9;
border-bottom-color: #334155;
}
.dark .ai-msg-assistant .ai-msg-content h3 { color: #e2e8f0; }
.dark .ai-msg-assistant .ai-msg-content h4 { color: #cbd5e1; }
.dark .ai-msg-assistant .ai-msg-content p { color: #cbd5e1; }
.dark .ai-msg-assistant .ai-msg-content li { color: #cbd5e1; }
.dark .ai-msg-assistant .ai-msg-content strong { color: #f1f5f9; }
.dark .ai-msg-assistant .ai-msg-content hr {
border-top-color: #334155;
}
.dark .ai-msg-assistant .ai-msg-content code {
background: #0f172a;
color: #94a3b8;
border-color: #334155;
}
/* AI drawer tables */
.dark .ai-table-wrap {
border-color: #334155;
}
.dark .ai-table th {
background: #0f172a;
color: #e2e8f0;
border-bottom-color: #475569;
}
.dark .ai-table td {
color: #cbd5e1;
border-bottom-color: #1e293b;
}
.dark .ai-table td:first-child,
.dark .ai-table th:first-child {
color: #f1f5f9;
}
.dark .ai-table tbody tr:hover {
background: rgba(51, 65, 85, 0.3);
}
/* AI suggestion chips */
.dark .ai-suggestion-chip {
background: #1e293b;
border-color: #334155;
color: #94a3b8;
}
.dark .ai-suggestion-chip:hover {
background: #334155;
border-color: #475569;
color: #e2e8f0;
}
/* AI copy/retry buttons */
.dark .ai-copy-btn {
background: #1e293b;
border-color: #334155;
color: #64748b;
}
.dark .ai-copy-btn:hover {
background: #334155;
color: #94a3b8;
border-color: #475569;
}
/* AI source tags */
.dark .ai-source-tag {
background: rgba(14, 165, 233, 0.15);
color: #38bdf8;
border-color: rgba(14, 165, 233, 0.3);
}
/* AI code blocks */
.dark .ai-code-block {
border-color: #334155;
}
.dark .ai-code-summary {
color: #94a3b8;
}
.dark .ai-code-pre {
background: #0f172a;
color: #94a3b8;
}
.dark .ai-code-result-pre {
background: #0f172a;
color: #94a3b8;
}
/* AI entity links */
.dark .ai-entity-link {
color: #38bdf8;
background: rgba(14, 165, 233, 0.15);
}
.dark .ai-entity-link:hover {
background: rgba(14, 165, 233, 0.25);
color: #7dd3fc;
}
/* AI attachment buttons */
.dark .ai-attachment-btn {
background: rgba(16, 185, 129, 0.15);
border-color: rgba(16, 185, 129, 0.3);
color: #34d399;
}
.dark .ai-attachment-btn:hover {
background: rgba(16, 185, 129, 0.25);
border-color: rgba(16, 185, 129, 0.4);
}
/* =============================================================================
11. SCROLLBAR STYLING
============================================================================= */
.dark ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.dark ::-webkit-scrollbar-track {
background: #1e293b;
}
.dark ::-webkit-scrollbar-thumb {
background-color: #475569;
border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb:hover {
background-color: #64748b;
}
/* =============================================================================
12. ACCOUNT / LOGIN PAGE
============================================================================= */
/* Page background gradient → dark */
.dark .bg-gradient-to-br.from-slate-50 {
background-image: none !important;
background-color: #0f172a !important;
}
/* Native HTML inputs (non-MudBlazor) used on login/register pages.
The :not(.mud-input-slot) guard prevents this from bleeding onto MudBlazor
text fields — their must stay transparent so the field inherits the
surrounding surface color (otherwise the icon adornment and the text zone
show two different darks, producing a visible seam). */
.dark input[type="text"]:not(.mud-input-slot),
.dark input[type="email"]:not(.mud-input-slot),
.dark input[type="password"]:not(.mud-input-slot),
.dark input[type="tel"]:not(.mud-input-slot),
.dark input[type="url"]:not(.mud-input-slot),
.dark input[type="search"]:not(.mud-input-slot),
.dark input[type="number"]:not(.mud-input-slot),
.dark textarea:not(.mud-input-slot),
.dark select:not(.mud-input-slot) {
background-color: #0f172a !important;
color: #e2e8f0 !important;
border-color: #475569 !important;
}
.dark input[type="text"]:not(.mud-input-slot):focus,
.dark input[type="email"]:not(.mud-input-slot):focus,
.dark input[type="password"]:not(.mud-input-slot):focus,
.dark textarea:not(.mud-input-slot):focus,
.dark select:not(.mud-input-slot):focus {
border-color: #64748b !important;
--tw-ring-color: #475569 !important;
}
/* Checkbox dark mode */
.dark input[type="checkbox"] {
background-color: #0f172a !important;
border-color: #475569 !important;
}
/* Login button gradient → adjust for dark */
.dark .bg-gradient-to-r.from-slate-700 {
background-image: none !important;
background-color: #3b82f6 !important;
}
.dark .bg-gradient-to-r.from-slate-700:hover {
background-color: #2563eb !important;
}
/* "Or continue with" divider text bg must match card bg */
.dark .bg-white.text-slate-500 {
background-color: #1e293b !important;
}
/* Passkey / external login button */
.dark .border-2.border-slate-300 {
border-color: #475569 !important;
color: #e2e8f0 !important;
}
.dark .border-2.border-slate-300:hover {
border-color: #64748b !important;
background-color: rgba(51, 65, 85, 0.3) !important;
}
/* Error alert in dark mode */
.dark .bg-red-50.border-l-4 {
background-color: rgba(127, 29, 29, 0.3) !important;
}
/* =============================================================================
13. MISCELLANEOUS
============================================================================= */
/* Code blocks / pre */
.dark pre,
.dark code {
background-color: #0f172a !important;
color: #e2e8f0 !important;
}
/* Horizontal rules */
.dark hr {
border-color: #334155 !important;
}
/* Placeholder text */
.dark ::placeholder {
color: #64748b !important;
}
/* Selection highlight */
.dark ::selection {
background-color: rgba(56, 189, 248, 0.3);
color: #f1f5f9;
}
/* Blazor error UI */
.dark #blazor-error-ui {
background: #1e293b;
color: #e2e8f0;
}
/* Hover utilities (hover:bg-*) */
.dark .hover\:bg-slate-50:hover {
background-color: #334155 !important;
}
.dark .hover\:bg-slate-100:hover {
background-color: #334155 !important;
}
.dark .hover\:bg-gray-50:hover {
background-color: #374151 !important;
}
.dark .hover\:bg-gray-100:hover {
background-color: #374151 !important;
}
.dark .hover\:bg-white:hover {
background-color: #334155 !important;
}
.dark .hover\:bg-white\/20:hover {
background-color: rgba(148, 163, 184, 0.25) !important;
}
/* Hover text utilities */
.dark .hover\:text-slate-900:hover {
color: #f1f5f9 !important;
}
.dark .hover\:text-slate-800:hover {
color: #e2e8f0 !important;
}
.dark .hover\:text-slate-700:hover {
color: #cbd5e1 !important;
}
.dark .hover\:text-slate-600:hover {
color: #94a3b8 !important;
}
/* Focus ring overrides */
.dark .focus\:ring-slate-300:focus {
--tw-ring-color: #475569 !important;
}
.dark .focus\:border-slate-300:focus {
border-color: #64748b !important;
}
/* =============================================================================
13. TRANSITION — Smooth mode switching
============================================================================= */
html.dark-transition,
html.dark-transition *,
html.dark-transition *::before,
html.dark-transition *::after {
transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}