/* ============================================================================
assets/theme.css — Shared 3-theme system for the WHOLE CRM Enterprise
project (home.html + every module: entity_admin, accounting, crm,
client_portal, compliance, document_management, leave_management,
renewals, staff_portal).
HOW TO USE IN A MODULE:
1. (adjust the
relative path to wherever assets/ sits relative to that module —
modules one level deep from the project root use "../assets/...",
entity_admin/doc_compliance.php etc. also one level deep, root-level
pages like home.html use "assets/...").
2. placed as the VERY FIRST
thing inside , before any other stylesheet, so the right
theme is already set before first paint (no flash of the wrong
theme).
3. Every place a module's OWN css previously hardcoded a colour (e.g.
background:#0f172a) gets that value replaced with the matching
variable below (e.g. background:var(--nav-bg)). This file does not
replace a module's layout/spacing rules — only colour.
WHY THESE VARIABLE NAMES: this project has two different visual
families today —
FAMILY A (entity_admin, accounting, compliance, leave_management,
renewals, document_management, crm): light pages, white cards, a
solid navy top nav bar.
FAMILY B (client_portal, staff_portal): fully dark glass pages.
The names below are chosen to serve both without forcing either family
to look like the other — --nav-bg is ALWAYS navy/dark even in the
lightest theme (that solid dark nav bar is a deliberate, recognisable
piece of this project's identity, kept on purpose rather than flattened
away), while --bg/--bg2/--text follow the theme normally.
THEME 1 — "Midnight": the closest match to what most of these modules
already looked like by default — light page, white cards, navy nav,
blue accent. Default theme, so an existing user's first load looks
the same as before.
THEME 2 — "Daylight": an even brighter, more neutral white-and-blue
variant — same family, lighter borders, softer shadows.
THEME 3 — "Aurora": dark page background, glass-effect cards, indigo/
violet base with a gold accent — a genuinely different, richer look,
consistent with home.html's Aurora theme of the same name.
============================================================================ */
/* :root alone = the page's ORIGINAL default appearance, used only for the
brief instant before theme.js's blocking script sets an explicit
data-theme attribute (or if JS is disabled entirely) — this is light,
matching exactly what every module already looked like before this
whole theme system existed, so nothing changes for anyone who never
touches the picker. It does NOT also apply to [data-theme="midnight"]
the way it used to — that was the actual bug: "Midnight" here was
defined identically to "Daylight" (both light), while home.html's own
completely separate theme system defines "Midnight" as genuinely dark.
Same name, two different meanings, depending on which page you were on.
Fixed by giving Midnight its own real dark definition below, consistent
with what "Midnight" already means on home.html. */
:root{
--bg:#f1f5f9;
--bg2:#ffffff;
--bg3:#f8fafc;
--border:#e2e8f0;
--border2:#cbd5e1;
--text:#1e293b;
--heading:#0f172a;
--muted:#64748b;
--muted2:#475569;
--nav-bg:#0f172a;
--nav-text:#ffffff;
--nav-text-muted:rgba(255,255,255,.7);
--nav-border:rgba(255,255,255,.1);
--accent:#2563eb;
--accent2:#3b82f6;
--accent-text:#ffffff;
--accent-light:#eff6ff;
--accent-glow:rgba(37,99,235,.18);
--gradient-end:#818cf8;
--success:#16a34a;
--success-bg:#f0fdf4;
--success-text:#15803d;
--success-text-on-fill:#ffffff;
--warning:#d97706;
--warning-bg:#fffbeb;
--warning-text:#92400e;
--warning-text-on-fill:#ffffff;
--danger:#dc2626;
--danger-bg:#fef2f2;
--danger-text:#b91c1c;
--danger-text-on-fill:#ffffff;
--gold:#d97706;
--purple:#7c3aed;
--purple-bg:#f5f3ff;
--purple-text:#6d28d9;
--orange:#c2410c;
--orange-bg:#fff7ed;
--orange-text:#c2410c;
--info:#1d4ed8;
--info-bg:#eff6ff;
--info-text:#1d4ed8;
--modal-bg:#ffffff;
--modal-border:#e2e8f0;
--input-bg:#ffffff;
--input-border:#e2e8f0;
--row-border:#f1f5f9;
--table-head-bg:#f8fafc;
--overlay-bg:rgba(15,23,42,.4);
--overlay-bg-strong:rgba(15,23,42,.6);
--shadow:rgba(15,23,42,.12);
--surface-tint:rgba(15,23,42,.03);
--glass-bg:#1a2744;
--glass-border:rgba(255,255,255,.08);
--glass-text:#f1f5f9;
--glass-muted:#94a3b8;
}
/* "Midnight" — now GENUINELY DARK in every module, AND its own distinct
accent colour: deep emerald green, matching exactly what Client Portal
already uses (--accent:#059669 / --accent2:#10b981 there). This is also
why Midnight previously looked too similar to Daylight even after the
dark/light fix — both were using the same blue accent, just on
different backgrounds. Now: Midnight = dark + green, Daylight =
light + blue, Aurora = dark + gold — three visibly distinct themes, not
two blues and a gold. */
[data-theme="midnight"]{
--bg:#0b1220;
--bg2:#111a2e;
--bg3:#0e1626;
--border:#1e2d45;
--border2:#28395a;
--text:#cbd5e1;
--heading:#ffffff;
--muted:#7c8aa3;
--muted2:#94a3b8;
--nav-bg:#070b14;
--nav-text:#ffffff;
--nav-text-muted:rgba(255,255,255,.7);
--nav-border:rgba(255,255,255,.1);
--accent:#059669;
--accent2:#10b981;
--accent-text:#ffffff;
--accent-light:rgba(5,150,105,.15);
--accent-glow:rgba(5,150,105,.3);
--gradient-end:#34d399;
--success:#22c55e;
--success-bg:rgba(34,197,94,.12);
--success-text:#86efac;
--success-text-on-fill:#ffffff;
--warning:#f59e0b;
--warning-bg:rgba(245,158,11,.12);
--warning-text:#fbbf24;
--warning-text-on-fill:#ffffff;
--danger:#ef4444;
--danger-bg:rgba(239,68,68,.12);
--danger-text:#fca5a5;
--danger-text-on-fill:#ffffff;
--gold:#f59e0b;
--purple:#a78bfa;
--purple-bg:rgba(139,92,246,.15);
--purple-text:#c4b5fd;
--orange:#fb923c;
--orange-bg:rgba(251,146,60,.15);
--orange-text:#fdba74;
--info:#60a5fa;
--info-bg:rgba(59,130,246,.15);
--info-text:#93c5fd;
--modal-bg:#111a2e;
--modal-border:rgba(255,255,255,.08);
--input-bg:rgba(7,11,20,.6);
--input-border:rgba(255,255,255,.1);
--row-border:rgba(255,255,255,.05);
--table-head-bg:rgba(7,11,20,.5);
--overlay-bg:rgba(0,0,0,.5);
--overlay-bg-strong:rgba(0,0,0,.75);
--shadow:rgba(0,0,0,.45);
--surface-tint:rgba(255,255,255,.04);
--glass-bg:#111a2e;
--glass-border:rgba(255,255,255,.08);
--glass-text:#f1f5f9;
--glass-muted:#94a3b8;
}
/* "Daylight" — this is the light/white-and-blue look that used to be
wrongly shared with "Midnight" above. Kept essentially as it was, since
that earlier definition was a perfectly good light theme — it just had
the wrong name attached to it. */
[data-theme="daylight"]{
--bg:#f8fafc;
--bg2:#ffffff;
--bg3:#f1f5f9;
--border:#e7edf5;
--border2:#d4dfec;
--text:#1e293b;
--heading:#0f172a;
--muted:#64748b;
--muted2:#475569;
--nav-bg:#0f172a;
--nav-text:#ffffff;
--nav-text-muted:rgba(255,255,255,.7);
--nav-border:rgba(255,255,255,.1);
--accent:#1d4ed8;
--accent2:#2563eb;
--accent-text:#ffffff;
--accent-light:#eff6ff;
--accent-glow:rgba(29,78,216,.15);
--gradient-end:#6366f1;
--success:#059669;
--success-bg:#ecfdf5;
--success-text:#047857;
--success-text-on-fill:#ffffff;
--warning:#d97706;
--warning-bg:#fffbeb;
--warning-text:#92400e;
--warning-text-on-fill:#ffffff;
--danger:#dc2626;
--danger-bg:#fef2f2;
--danger-text:#b91c1c;
--danger-text-on-fill:#ffffff;
--gold:#d97706;
--purple:#7c3aed;
--purple-bg:#f5f3ff;
--purple-text:#6d28d9;
--orange:#c2410c;
--orange-bg:#fff7ed;
--orange-text:#c2410c;
--info:#1d4ed8;
--info-bg:#eff6ff;
--info-text:#1d4ed8;
--modal-bg:#ffffff;
--modal-border:#e7edf5;
--input-bg:#fbfdff;
--input-border:#e7edf5;
--row-border:#f1f5f9;
--table-head-bg:#f8fafc;
--overlay-bg:rgba(15,23,42,.35);
--overlay-bg-strong:rgba(15,23,42,.55);
--shadow:rgba(15,23,42,.08);
--surface-tint:rgba(15,23,42,.025);
--glass-bg:#1a2744;
--glass-border:rgba(255,255,255,.08);
--glass-text:#f1f5f9;
--glass-muted:#94a3b8;
}
[data-theme="aurora"]{
--bg:#15102a;
--bg2:#1e1638;
--bg3:#241b42;
--border:#322458;
--border2:#43306f;
--text:#e7e1f5;
--heading:#ffffff;
--muted:#9183b8;
--muted2:#b3a6d4;
--nav-bg:#0f0a1f;
--nav-text:#ffffff;
--nav-text-muted:rgba(255,255,255,.7);
--nav-border:rgba(255,255,255,.1);
--accent:#fbbf24;
--accent2:#fcd34d;
--accent-text:#1e1638;
--accent-light:rgba(251,191,36,.12);
--accent-glow:rgba(251,191,36,.22);
--gradient-end:#f472b6;
--success:#2dd4bf;
--success-bg:rgba(45,212,191,.12);
--success-text:#5eead4;
--success-text-on-fill:#1e1638;
--warning:#fbbf24;
--warning-bg:rgba(251,191,36,.12);
--warning-text:#fcd34d;
--warning-text-on-fill:#1e1638;
--danger:#fb7185;
--danger-bg:rgba(251,113,133,.12);
--danger-text:#fda4af;
--danger-text-on-fill:#1e1638;
--gold:#fbbf24;
--purple:#c4b5fd;
--purple-bg:rgba(167,139,250,.18);
--purple-text:#ddd6fe;
--orange:#fb923c;
--orange-bg:rgba(251,146,60,.15);
--orange-text:#fdba74;
--info:#7dd3fc;
--info-bg:rgba(56,189,248,.15);
--info-text:#bae6fd;
--modal-bg:#1e1638;
--modal-border:rgba(255,255,255,.08);
--input-bg:rgba(15,10,31,.6);
--input-border:rgba(255,255,255,.1);
--row-border:rgba(255,255,255,.05);
--table-head-bg:rgba(15,10,31,.5);
--overlay-bg:rgba(0,0,0,.55);
--overlay-bg-strong:rgba(0,0,0,.8);
--shadow:rgba(0,0,0,.5);
--surface-tint:rgba(255,255,255,.04);
--glass-bg:#1e1638;
--glass-border:rgba(255,255,255,.08);
--glass-text:#f1f5f9;
--glass-muted:#a99cc9;
}
/* ── THEME PICKER WIDGET — shared markup/behaviour, see theme.js ── */
.theme-picker-wrap{position:relative}
.theme-trigger{
cursor:pointer;font-size:13px;line-height:1;transition:all .15s;
background:transparent;border:1px solid var(--nav-border);color:var(--nav-text-muted);
padding:5px 10px;border-radius:6px;font-family:inherit;
}
.theme-trigger:hover{background:rgba(255,255,255,.08);color:var(--nav-text)}
.theme-popover{
display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:1000;
background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:12px;
padding:10px;width:220px;box-shadow:0 16px 50px var(--shadow);
}
.theme-popover.open{display:block}
.theme-popover-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;padding:4px 8px 8px}
.theme-option{
display:flex;align-items:center;gap:10px;width:100%;
padding:8px;border:1px solid transparent;border-radius:8px;
background:transparent;cursor:pointer;text-align:left;font-family:inherit;
transition:all .15s;margin-bottom:2px;
}
.theme-option:hover{background:var(--surface-tint);border-color:var(--border)}
.theme-option.selected{border-color:var(--accent);background:var(--accent-light)}
.theme-swatch{width:30px;height:30px;border-radius:8px;flex-shrink:0;border:1px solid var(--modal-border)}
.theme-swatch-midnight{background:linear-gradient(135deg,#0b1220 0%,#070b14 50%,#059669 100%)}
.theme-swatch-daylight{background:linear-gradient(135deg,#ffffff 0%,#dbeafe 60%,#1d4ed8 100%)}
.theme-swatch-aurora{background:linear-gradient(135deg,#15102a 0%,#1e1638 50%,#fbbf24 100%)}
.theme-option-text{flex:1;display:flex;flex-direction:column;gap:1px}
.theme-option-text strong{font-size:12px;color:var(--text);font-weight:600}
.theme-option-text small{font-size:10px;color:var(--muted)}
.theme-check{font-size:13px;color:var(--accent);opacity:0;flex-shrink:0}
.theme-option.selected .theme-check{opacity:1}