/**
* oddjobs.im � dashboard themes + chrome (nav accent / icons)
* Light: (default)
* Envisage: dusk mid-theme, no white surfaces
* Night:
* Chrome: data-oj-accent / data-oj-icons / data-oj-rail + --oj-nav-accent
* data-oj-theme: light|plain|mono|fuchsia|clinic(Calm)|sand|ocean|slate|envisage|graphite|dark
*/
:root {
--oj-nav-accent: #0ea5e9;
--oj-nav-active-fg: #e0f2fe;
/* Left menu / rail — themes override these */
--oj-sidebar-bg: #0f172a;
--oj-sidebar-bg-end: #0b1220;
--oj-sidebar-border: #1e2937;
--oj-sidebar-text: #e2e8f0;
--oj-sidebar-muted: #94a3b8;
--oj-sidebar-hover: #1e2937;
--oj-sidebar-active: #1e2937;
--oj-sidebar-sub-border: #334155;
--oj-sidebar-icon: var(--oj-nav-accent);
}
html.dark {
color-scheme: dark;
}
/* Accent presets (also set via JS --oj-nav-accent) */
html[data-oj-accent="teal"] { --oj-nav-accent: #0f766e; --oj-nav-active-fg: #ccfbf1; }
html[data-oj-accent="emerald"] { --oj-nav-accent: #10b981; --oj-nav-active-fg: #d1fae5; }
html[data-oj-accent="sky"] { --oj-nav-accent: #0ea5e9; --oj-nav-active-fg: #e0f2fe; }
html[data-oj-accent="cyan"] { --oj-nav-accent: #22d3ee; --oj-nav-active-fg: #cffafe; }
html[data-oj-accent="violet"] { --oj-nav-accent: #8b5cf6; --oj-nav-active-fg: #ede9fe; }
html[data-oj-accent="rose"] { --oj-nav-accent: #f43f5e; --oj-nav-active-fg: #ffe4e6; }
html[data-oj-accent="amber"] { --oj-nav-accent: #f59e0b; --oj-nav-active-fg: #fef3c7; }
html[data-oj-accent="blue"] { --oj-nav-accent: #2563eb; --oj-nav-active-fg: #dbeafe; }
html[data-oj-accent="orange"] { --oj-nav-accent: #ea580c; --oj-nav-active-fg: #ffedd5; }
html[data-oj-accent="fuchsia"] { --oj-nav-accent: #c026d3; --oj-nav-active-fg: #fae8ff; }
/* ---------- Theme → left menu (rail) tokens ---------- */
html[data-oj-theme="light"] {
--oj-sidebar-bg: #1e293b;
--oj-sidebar-bg-end: #0f172a;
--oj-sidebar-border: #334155;
--oj-sidebar-text: #e2e8f0;
--oj-sidebar-muted: #94a3b8;
--oj-sidebar-hover: #334155;
--oj-sidebar-active: #334155;
--oj-sidebar-sub-border: #475569;
}
html.plain,
html[data-oj-theme="plain"] {
--oj-nav-accent: #737373 !important;
--oj-nav-accent-vivid: #525252 !important;
--oj-nav-accent-soft: #404040 !important;
--oj-nav-active-fg: #f5f5f5 !important;
--oj-header-accent: #404040 !important;
--oj-header-accent-vivid: #404040 !important;
--oj-sidebar-bg: #2a2a2a;
--oj-sidebar-bg-end: #171717;
--oj-sidebar-border: #404040;
--oj-sidebar-text: #e5e5e5;
--oj-sidebar-muted: #a3a3a3;
--oj-sidebar-hover: #3f3f3f;
--oj-sidebar-active: #404040;
--oj-sidebar-sub-border: #525252;
--oj-sidebar-icon: #d4d4d4;
}
/* Mono: pure white rail, black type — zero chroma */
html.mono,
html[data-oj-theme="mono"] {
--oj-nav-accent: #000000 !important;
--oj-nav-accent-vivid: #000000 !important;
--oj-nav-accent-soft: #000000 !important;
--oj-nav-active-fg: #ffffff !important;
--oj-header-accent: #000000 !important;
--oj-header-accent-vivid: #000000 !important;
--oj-sidebar-bg: #ffffff;
--oj-sidebar-bg-end: #ffffff;
--oj-sidebar-border: #000000;
--oj-sidebar-text: #000000;
--oj-sidebar-muted: #000000;
--oj-sidebar-hover: #f0f0f0;
--oj-sidebar-active: #e8e8e8;
--oj-sidebar-sub-border: #000000;
--oj-sidebar-icon: #000000;
}
html.clinic,
html[data-oj-theme="clinic"] {
--oj-sidebar-bg: #0f2926;
--oj-sidebar-bg-end: #0a1f1c;
--oj-sidebar-border: #134e4a;
--oj-sidebar-text: #ccfbf1;
--oj-sidebar-muted: #5eead4;
--oj-sidebar-hover: #115e59;
--oj-sidebar-active: #0f766e;
--oj-sidebar-sub-border: #0d9488;
}
html.sand,
html[data-oj-theme="sand"] {
--oj-sidebar-bg: #292218;
--oj-sidebar-bg-end: #1c1917;
--oj-sidebar-border: #44403c;
--oj-sidebar-text: #fef3c7;
--oj-sidebar-muted: #d6d3d1;
--oj-sidebar-hover: #44403c;
--oj-sidebar-active: #57534e;
--oj-sidebar-sub-border: #78716c;
}
html.ocean,
html[data-oj-theme="ocean"] {
--oj-sidebar-bg: #0c2340;
--oj-sidebar-bg-end: #0a192f;
--oj-sidebar-border: #1e3a5f;
--oj-sidebar-text: #e0f2fe;
--oj-sidebar-muted: #7dd3fc;
--oj-sidebar-hover: #164e7a;
--oj-sidebar-active: #0c4a6e;
--oj-sidebar-sub-border: #0369a1;
}
html.nebula,
html[data-oj-theme="nebula"] {
--oj-sidebar-bg: #1e1b4b;
--oj-sidebar-bg-end: #0f0a2a;
--oj-sidebar-border: #4c1d95;
--oj-sidebar-text: #ede9fe;
--oj-sidebar-muted: #c4b5fd;
--oj-sidebar-hover: #4c1d95;
--oj-sidebar-active: #5b21b6;
--oj-sidebar-sub-border: #7c3aed;
}
html.slate,
html[data-oj-theme="slate"] {
--oj-sidebar-bg: #334155;
--oj-sidebar-bg-end: #1e293b;
--oj-sidebar-border: #475569;
--oj-sidebar-text: #f1f5f9;
--oj-sidebar-muted: #cbd5e1;
--oj-sidebar-hover: #475569;
--oj-sidebar-active: #64748b;
--oj-sidebar-sub-border: #64748b;
}
html.fuchsia,
html[data-oj-theme="fuchsia"] {
--oj-sidebar-bg: #1a0b24;
--oj-sidebar-bg-end: #0b1220;
--oj-sidebar-border: rgba(232, 121, 249, 0.18);
--oj-sidebar-text: #f5d0fe;
--oj-sidebar-muted: #e879f9;
--oj-sidebar-hover: #2a1238;
--oj-sidebar-active: #3b1650;
--oj-sidebar-sub-border: rgba(232, 121, 249, 0.28);
}
html.envisage,
html[data-oj-theme="envisage"] {
--oj-sidebar-bg: #141c2e;
--oj-sidebar-bg-end: #0f1524;
--oj-sidebar-border: rgba(130, 175, 220, 0.16);
--oj-sidebar-text: #e2ebf6;
--oj-sidebar-muted: #94a3b8;
--oj-sidebar-hover: #1c2740;
--oj-sidebar-active: #243148;
--oj-sidebar-sub-border: rgba(130, 175, 220, 0.22);
}
html.graphite,
html[data-oj-theme="graphite"] {
--oj-sidebar-bg: #1e293b;
--oj-sidebar-bg-end: #0f172a;
--oj-sidebar-border: #334155;
--oj-sidebar-text: #e2e8f0;
--oj-sidebar-muted: #94a3b8;
--oj-sidebar-hover: #334155;
--oj-sidebar-active: #475569;
--oj-sidebar-sub-border: #475569;
}
html.dark,
html[data-oj-theme="dark"] {
--oj-sidebar-bg: #020617;
--oj-sidebar-bg-end: #000000;
--oj-sidebar-border: #1e2937;
--oj-sidebar-text: #e2e8f0;
--oj-sidebar-muted: #64748b;
--oj-sidebar-hover: #0f172a;
--oj-sidebar-active: #1e2937;
--oj-sidebar-sub-border: #334155;
}
/* Dashboard brand logo - matches public nav frame (admin: Site branding → logo border) */
.oj-dash-logo.oj-site-logo {
object-fit: contain;
max-width: 11.5rem;
max-height: 2.85rem;
height: auto;
width: auto;
vertical-align: middle;
display: block;
}
/* Brand block: logo row + optional trial nag under logo */
.oj-brand-block {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.35rem;
min-width: 0;
width: 100%;
}
/* Brand row: logo + role pill on ONE line, no overlap */
.oj-brand-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 0.5rem;
width: 100%;
min-width: 0;
}
/* Slight trial nag under logo (tradie free trial) */
.oj-trial-nag {
display: none;
align-items: center;
justify-content: flex-start;
gap: 0.35rem;
width: 100%;
max-width: 100%;
margin: 0;
padding: 0.28rem 0.55rem;
border-radius: 0.65rem;
border: 1px solid rgba(251, 191, 36, 0.35);
background: linear-gradient(135deg, rgba(251, 191, 36, 0.14), rgba(56, 189, 248, 0.1));
color: #fde68a;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.25;
text-align: left;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.15) inset;
}
.oj-trial-nag:not(.hidden) {
display: inline-flex;
}
.oj-trial-nag:hover {
border-color: rgba(251, 191, 36, 0.55);
background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(56, 189, 248, 0.16));
transform: translateY(-0.5px);
}
.oj-trial-nag i {
font-size: 0.58rem;
opacity: 0.9;
flex-shrink: 0;
}
.oj-trial-nag .oj-trial-nag-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Urgency states */
.oj-trial-nag.is-ok {
border-color: rgba(56, 189, 248, 0.35);
background: linear-gradient(135deg, rgba(56, 189, 248, 0.12), rgba(99, 102, 241, 0.1));
color: #bae6fd;
}
.oj-trial-nag.is-warn {
border-color: rgba(251, 191, 36, 0.45);
background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), rgba(245, 158, 11, 0.12));
color: #fde68a;
}
.oj-trial-nag.is-urgent {
border-color: rgba(248, 113, 113, 0.5);
background: linear-gradient(135deg, rgba(248, 113, 113, 0.2), rgba(251, 146, 60, 0.14));
color: #fecaca;
animation: ojTrialNagPulse 2.4s ease-in-out infinite;
}
@keyframes ojTrialNagPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
50% { box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18); }
}
.oj-mobile-topbar .oj-trial-nag {
padding: 0.18rem 0.45rem;
font-size: 0.6rem;
border-radius: 0.5rem;
}
.oj-mobile-topbar .oj-brand-block {
gap: 0.22rem;
}
.oj-brand-row > button,
.oj-brand-row > a,
.oj-brand-row > .oj-brand-logo-wrap {
display: flex;
align-items: center;
min-width: 0;
flex: 1 1 auto;
/* Leave room for role pills (Careers / Recruitment / Customer, etc.) */
max-width: calc(100% - 7.5rem);
}
.oj-brand-row .oj-dash-logo {
max-width: 100%;
max-height: 2.65rem;
height: auto !important;
width: auto;
}
.oj-brand-row .oj-status-chip,
.oj-brand-row .tradie-tier-pill,
.oj-brand-row .med-chip,
.oj-brand-row .leg-chip,
.oj-brand-row .rec-chip {
flex: 0 0 auto;
margin-left: auto;
white-space: nowrap;
/* Never clip role labels next to the logo */
max-width: none;
overflow: visible;
text-overflow: clip;
}
/* Mobile topbar brand cluster (logo + pill before menu) */
.oj-mobile-topbar .oj-brand-row {
flex: 1 1 auto;
min-width: 0;
margin-right: 0.35rem;
}
.oj-mobile-topbar .oj-brand-row > button,
.oj-mobile-topbar .oj-brand-row > a,
.oj-mobile-topbar .oj-brand-row > .oj-brand-logo-wrap {
max-width: calc(100% - 6.75rem);
}
.oj-mobile-topbar .oj-brand-row .oj-dash-logo {
max-height: 2.35rem;
}
/* Framed logo on dark rails: keep the white pad so the wordmark pops (same vibe as homepage) */
.sidebar .oj-dash-logo.rounded-xl,
.oj-mobile-topbar .oj-dash-logo.rounded-xl,
.med-sidebar .oj-dash-logo.rounded-xl,
.leg-sidebar .oj-dash-logo.rounded-xl,
.rec-sidebar .oj-dash-logo.rounded-xl,
.med-mobile-top .oj-dash-logo.rounded-xl,
.leg-mobile-top .oj-dash-logo.rounded-xl,
.rec-mobile-top .oj-dash-logo.rounded-xl {
background: #ffffff !important;
border-color: rgba(226, 232, 240, 0.95) !important;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
/* Sidebar surfaces — theme tokens first, then rail modes */
.sidebar,
#sidebar,
.med-sidebar,
.leg-sidebar,
.rec-sidebar,
.biz-sidebar {
background: linear-gradient(180deg, var(--oj-sidebar-bg) 0%, var(--oj-sidebar-bg-end) 100%) !important;
border-right: 1px solid var(--oj-sidebar-border) !important;
color: var(--oj-sidebar-text) !important;
}
html[data-oj-rail="ink"] .sidebar,
html[data-oj-rail="ink"] #sidebar,
html[data-oj-rail="ink"] .med-sidebar,
html[data-oj-rail="ink"] .leg-sidebar,
html[data-oj-rail="ink"] .rec-sidebar {
background: linear-gradient(180deg, var(--oj-sidebar-bg) 0%, var(--oj-sidebar-bg-end) 100%) !important;
}
html[data-oj-rail="deep"] .sidebar,
html[data-oj-rail="deep"] #sidebar,
html[data-oj-rail="deep"] .med-sidebar,
html[data-oj-rail="deep"] .leg-sidebar,
html[data-oj-rail="deep"] .rec-sidebar {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--oj-sidebar-bg) 75%, #000) 0%,
#020617 100%
) !important;
}
html[data-oj-rail="tinted"] .sidebar,
html[data-oj-rail="tinted"] #sidebar,
html[data-oj-rail="tinted"] .med-sidebar,
html[data-oj-rail="tinted"] .leg-sidebar,
html[data-oj-rail="tinted"] .rec-sidebar {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--oj-nav-accent) 18%, var(--oj-sidebar-bg)) 0%,
var(--oj-sidebar-bg) 42%,
var(--oj-sidebar-bg-end) 100%
) !important;
}
/* Nav links — theme-aware hover/active (shared) */
#tradie-nav .nav-link,
#customer-nav .nav-link,
#admin-nav .nav-link,
#tradie-nav .nav-group-btn,
#customer-nav .nav-group-btn,
#admin-nav .nav-group-btn,
.sidebar .nav-link,
.sidebar .nav-group-btn {
color: var(--oj-sidebar-text);
}
#tradie-nav .nav-link.active,
#customer-nav .nav-link.active,
#admin-nav .nav-link.active,
#tradie-nav .nav-group-btn.active,
#customer-nav .nav-group-btn.active,
#admin-nav .nav-group-btn.active,
.sidebar .nav-link.active,
.sidebar .nav-group-btn.active {
background-color: var(--oj-sidebar-active) !important;
color: var(--oj-nav-active-fg) !important;
box-shadow: inset 3px 0 0 var(--oj-nav-accent) !important;
}
#tradie-nav .nav-link:hover,
#customer-nav .nav-link:hover,
#admin-nav .nav-link:hover,
#tradie-nav .nav-group-btn:hover,
#customer-nav .nav-group-btn:hover,
#admin-nav .nav-group-btn:hover,
.sidebar .nav-link:hover,
.sidebar .nav-group-btn:hover {
background-color: var(--oj-sidebar-hover) !important;
color: var(--oj-nav-active-fg) !important;
}
.sidebar .nav-sub {
border-left-color: var(--oj-sidebar-sub-border) !important;
}
.sidebar-footer {
border-top-color: var(--oj-sidebar-border) !important;
}
/* Icon modes - only inside main nav trees */
html[data-oj-icons="muted"] #tradie-nav i,
html[data-oj-icons="muted"] #customer-nav i,
html[data-oj-icons="muted"] #admin-nav i,
html[data-oj-icons="muted"] .sidebar i {
color: var(--oj-sidebar-muted) !important;
}
html[data-oj-icons="mono"] #tradie-nav i,
html[data-oj-icons="mono"] #customer-nav i,
html[data-oj-icons="mono"] #admin-nav i,
html[data-oj-icons="mono"] .sidebar i,
html[data-oj-icons="mono"] .med-sidebar i,
html[data-oj-icons="mono"] .leg-sidebar i,
html[data-oj-icons="mono"] .rec-sidebar i {
color: var(--oj-sidebar-icon, var(--oj-nav-accent)) !important;
opacity: 0.92;
}
/* Colour icons still use theme accent wash on active */
html[data-oj-icons="colour"] #tradie-nav .nav-link.active i,
html[data-oj-icons="colour"] #customer-nav .nav-link.active i,
html[data-oj-icons="colour"] #admin-nav .nav-link.active i {
filter: saturate(1.05);
}
/* High contrast - thicker rails, stronger type, borders (not colour alone) */
html[data-oj-contrast="high"] #tradie-nav .nav-link,
html[data-oj-contrast="high"] #customer-nav .nav-link,
html[data-oj-contrast="high"] #admin-nav .nav-link,
html[data-oj-contrast="high"] #tradie-nav .nav-group-btn,
html[data-oj-contrast="high"] #customer-nav .nav-group-btn,
html[data-oj-contrast="high"] #admin-nav .nav-group-btn {
font-weight: 700;
border: 1px solid transparent;
}
html[data-oj-contrast="high"] #tradie-nav .nav-link.active,
html[data-oj-contrast="high"] #customer-nav .nav-link.active,
html[data-oj-contrast="high"] #admin-nav .nav-link.active,
html[data-oj-contrast="high"] #tradie-nav .nav-group-btn.active,
html[data-oj-contrast="high"] #customer-nav .nav-group-btn.active,
html[data-oj-contrast="high"] #admin-nav .nav-group-btn.active {
background-color: #1e2937 !important;
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.35) !important;
box-shadow:
inset 5px 0 0 var(--oj-nav-accent),
inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}
html[data-oj-contrast="high"] #tradie-nav .nav-link:hover,
html[data-oj-contrast="high"] #customer-nav .nav-link:hover,
html[data-oj-contrast="high"] #admin-nav .nav-link:hover {
border-color: rgba(255, 255, 255, 0.2);
}
html[data-oj-contrast="high"] #tradie-nav i,
html[data-oj-contrast="high"] #customer-nav i,
html[data-oj-contrast="high"] #admin-nav i {
opacity: 1 !important;
}
/* High contrast prefers mono icons unless user chose colour explicitly - boost mono/muted */
html[data-oj-contrast="high"][data-oj-icons="muted"] #tradie-nav i,
html[data-oj-contrast="high"][data-oj-icons="muted"] #customer-nav i,
html[data-oj-contrast="high"][data-oj-icons="muted"] #admin-nav i {
color: #e2e8f0 !important;
}
html[data-oj-contrast="high"] .sidebar {
border-right: 1px solid rgba(255, 255, 255, 0.12);
}
html[data-oj-contrast="high"] .oj-chrome-swatch.is-selected {
box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px #fff, 0 0 0 6px var(--swatch, #0ea5e9);
}
html[data-oj-contrast="high"] .oj-footer-icon-btn {
border-width: 2px;
}
html[data-oj-contrast="high"].dark body {
background-color: #000 !important;
}
html[data-oj-contrast="high"] body:not(.dark) {
/* light page: slightly stronger text when high contrast */
}
/* Chrome picker popover - fixed via JS (avoids sidebar overflow clipping in browser) */
.oj-chrome-panel {
position: fixed;
z-index: 10050;
width: min(300px, calc(100vw - 24px));
max-height: min(520px, calc(100vh - 24px));
}
.oj-chrome-panel.hidden {
display: none !important;
}
.oj-chrome-panel-inner {
background: #0f172a;
border: 1px solid #334155;
border-radius: 1rem;
padding: 0.75rem 0.85rem 0.9rem;
box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.55);
max-height: inherit;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.oj-chrome-title {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #64748b;
margin: 0.45rem 0 0.4rem;
}
.oj-chrome-title:first-child {
margin-top: 0;
}
.oj-chrome-swatches {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.oj-chrome-swatch {
width: 1.55rem;
height: 1.55rem;
border-radius: 9999px;
border: 2px solid rgba(255, 255, 255, 0.12);
background: var(--swatch, #0ea5e9);
cursor: pointer;
padding: 0;
transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.oj-chrome-swatch:hover {
transform: scale(1.08);
}
.oj-chrome-swatch.is-selected {
box-shadow: 0 0 0 2px #0f172a, 0 0 0 4px var(--swatch, #0ea5e9);
}
.oj-chrome-modes {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.oj-chrome-mode-btn {
font-size: 11px;
font-weight: 600;
padding: 0.3rem 0.55rem;
border-radius: 0.55rem;
border: 1px solid #334155;
background: transparent;
color: #94a3b8;
cursor: pointer;
}
.oj-chrome-mode-btn:hover {
background: #1e2937;
color: #e2e8f0;
}
.oj-chrome-mode-btn.is-selected {
border-color: color-mix(in srgb, var(--oj-nav-accent) 55%, #334155);
background: color-mix(in srgb, var(--oj-nav-accent) 18%, transparent);
color: var(--oj-nav-active-fg);
}
.oj-chrome-hint {
font-size: 10px;
line-height: 1.35;
color: #64748b;
margin: 0.35rem 0 0.15rem;
}
.oj-chrome-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-top: 0.75rem;
padding-top: 0.65rem;
border-top: 1px solid #1e2937;
}
.oj-chrome-default-btn {
font-size: 11px;
font-weight: 700;
padding: 0.35rem 0.7rem;
border-radius: 0.55rem;
border: 1px solid #475569;
background: #1e2937;
color: #e2e8f0;
cursor: pointer;
}
.oj-chrome-default-btn:hover {
background: #334155;
border-color: #64748b;
}
.oj-chrome-sync-hint {
font-size: 10px;
color: #64748b;
text-align: right;
flex: 1;
min-width: 0;
line-height: 1.3;
}
/* ---------- Page chrome ---------- */
html.dark body {
background-color: #0b1220 !important;
color: #e2e8f0;
}
html.dark body.bg-slate-50,
html.dark body.bg-slate-100 {
background-color: #0b1220 !important;
}
/* Mobile top bars */
html.dark .md\:hidden.fixed.top-0.bg-white,
html.dark .md\:hidden.fixed.top-0 {
background-color: #0f172a !important;
border-color: #1e2937 !important;
color: #e2e8f0;
}
html.dark #mobile-menu-btn {
color: #e2e8f0 !important;
}
/* ---------- Surfaces ---------- */
html.dark .bg-white {
background-color: #1e2937 !important;
}
html.dark .bg-slate-50 {
background-color: #0f172a !important;
}
html.dark .bg-slate-100 {
background-color: #1e2937 !important;
}
html.dark .bg-slate-200 {
background-color: #334155 !important;
}
html.dark .hover\:bg-slate-50:hover {
background-color: #1e2937 !important;
}
html.dark .hover\:bg-slate-100:hover {
background-color: #334155 !important;
}
html.dark .hover\:bg-slate-200:hover {
background-color: #475569 !important;
}
html.dark .hover\:bg-white:hover {
background-color: #334155 !important;
}
/* Soft tinted panels → deeper equivalents */
html.dark .bg-emerald-50 {
background-color: rgba(6, 78, 59, 0.35) !important;
}
html.dark .bg-amber-50 {
background-color: rgba(120, 53, 15, 0.35) !important;
}
html.dark .bg-orange-50 {
background-color: rgba(124, 45, 18, 0.35) !important;
}
html.dark .bg-sky-50,
html.dark .bg-blue-50 {
background-color: rgba(12, 74, 110, 0.35) !important;
}
html.dark .bg-red-50,
html.dark .bg-rose-50 {
background-color: rgba(127, 29, 29, 0.35) !important;
}
html.dark .bg-violet-50,
html.dark .bg-purple-50 {
background-color: rgba(76, 29, 149, 0.3) !important;
}
html.dark .bg-cyan-50 {
background-color: rgba(22, 78, 99, 0.35) !important;
}
/* ---------- Borders ---------- */
html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-300 {
border-color: #334155 !important;
}
html.dark .border-2.border-slate-200 {
border-color: #334155 !important;
}
html.dark .border-emerald-200 {
border-color: rgba(16, 185, 129, 0.35) !important;
}
html.dark .border-amber-200 {
border-color: rgba(245, 158, 11, 0.35) !important;
}
html.dark .border-orange-200 {
border-color: rgba(249, 115, 22, 0.35) !important;
}
html.dark .border-sky-200,
html.dark .border-blue-200 {
border-color: rgba(56, 189, 248, 0.3) !important;
}
html.dark .border-red-200,
html.dark .border-rose-200 {
border-color: rgba(248, 113, 113, 0.35) !important;
}
html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
border-color: #334155 !important;
}
/* ---------- Text ---------- */
html.dark .text-slate-900,
html.dark .text-slate-800 {
color: #f1f5f9 !important;
}
html.dark .text-slate-700 {
color: #e2e8f0 !important;
}
html.dark .text-slate-600 {
color: #cbd5e1 !important;
}
html.dark .text-slate-500 {
color: #94a3b8 !important;
}
html.dark .text-slate-400 {
color: #94a3b8 !important;
}
html.dark .text-slate-300 {
color: #cbd5e1 !important;
}
html.dark .text-emerald-800,
html.dark .text-emerald-700 {
color: #6ee7b7 !important;
}
html.dark .text-amber-800,
html.dark .text-amber-700 {
color: #fcd34d !important;
}
html.dark .text-orange-800,
html.dark .text-orange-700 {
color: #fdba74 !important;
}
html.dark .text-blue-800,
html.dark .text-blue-700,
html.dark .text-sky-800,
html.dark .text-sky-700 {
color: #7dd3fc !important;
}
html.dark .text-red-800,
html.dark .text-red-700,
html.dark .text-rose-800,
html.dark .text-rose-700,
html.dark .text-rose-600 {
color: #fca5a5 !important;
}
/* Placeholders */
html.dark ::placeholder {
color: #64748b !important;
opacity: 1;
}
/* ---------- Forms ---------- */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark select,
html.dark textarea {
background-color: #0f172a !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
color-scheme: dark;
}
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
border-color: #38bdf8 !important;
}
/* Native