/* ============================================================================= custom-theme.css — single source of truth for app colors (Material Design 3) ----------------------------------------------------------------------------- To recolor the whole app, edit ONLY the hex values below. Light tokens -> .custom-theme Dark tokens -> .custom-theme.dark (manual) OR [data-bs-theme="dark"] (driven by the existing light/dark/auto toggle in _Header.cshtml, which sets data-bs-theme on ). Consume colors via var(--token) or the .ct-* / utility classes below — never hard-code a hex in a view or component. ============================================================================= */ /* ---- Light ---- (ZeMTech deep-green brand: anchor #00241F, accent teal #20B2A2) */ .custom-theme { --primary:#00241F; --on-primary:#FFFFFF; --primary-container:#CDEFE9; --on-primary-container:#00241F; --secondary:#0B3B35; --on-secondary:#FFFFFF; --secondary-container:#D6E8E4; --on-secondary-container:#0B3B35; --tertiary:#20B2A2; --on-tertiary:#FFFFFF; --tertiary-container:#A7E7DF; --on-tertiary-container:#00241F; --error:#DC2626; --on-error:#FFFFFF; --error-container:#FEECEC; --on-error-container:#5A1E1E; --background:#F7FAFA; --on-background:#0F1413; --surface:#FFFFFF; --on-surface:#0F1413; --surface-variant:#EEF5F4; --on-surface-variant:#4E5B59; --outline:#C2D1CE; --primary-rgb:0,36,31; /* rgb of --primary, for Bootstrap's rgba() vars (--bs-primary-rgb) */ /* sidebar — deep-green panel (overrides AdminLTE's data-bs-theme=dark sidebar) */ --sidebar-bg:#00241F; --sidebar-color:#C9D6D3; --sidebar-hover-bg:#0F3A34; --sidebar-active-bg:#11443E; --sidebar-active-color:#FFFFFF; --sidebar-accent:#20B2A2; /* dashboard chart palette (read by dashboard.charts.js) */ --chart-1:#20B2A2; --chart-2:#0F3A34; --chart-3:#0891B2; --chart-4:#16A34A; --chart-5:#F59E0B; --chart-6:#0B3B35; --chart-success:#16A34A; --chart-danger:#DC2626; --chart-warning:#F59E0B; --chart-grid:rgba(15,20,19,.08); --chart-axis:rgba(15,20,19,.18); /* ambient canvas — 40px grid + two corner washes (teal top-right, amber bottom-left) */ --grid-line:rgba(6,64,43,.06); --wash-teal:rgba(32,178,162,.14); --wash-amber:rgba(245,158,11,.10); /* neon glow — a medium green that stays visible as a shadow on white surfaces. Every button variant glows with a hue-matched token (always brighter than its fill). */ --glow-primary:#18B45E; --panel-glow:rgba(6,64,43,.14); --glow-danger:#EF4444; --glow-success:#22C55E; --glow-warning:#FFB020; --glow-info:#3DD5F3; --glow-neutral:#94A3B8; } /* ---- Dark ---- (manual .dark class OR the app's data-bs-theme toggle) */ .custom-theme.dark, [data-bs-theme="dark"] .custom-theme { --primary:#2FD0BE; --on-primary:#00241F; --primary-container:#103935; --on-primary-container:#A7E7DF; --secondary:#1E5E57; --on-secondary:#E6FFFB; --secondary-container:#14302C; --on-secondary-container:#C1D2CF; --tertiary:#20B2A2; --on-tertiary:#00241F; --tertiary-container:#103935; --on-tertiary-container:#A7E7DF; --error:#E69490; --on-error:#5A1E1E; --error-container:#5A1E1E; --on-error-container:#FEECEC; --background:#0A0E0D; --on-background:#F2F5F4; /* deep near-black green canvas (neon dark look) */ --surface:#111C1A; --on-surface:#F2F5F4; --surface-variant:#14221F; --on-surface-variant:#8EA29E; --outline:#2E3F3C; --primary-rgb:47,208,190; /* rgb of dark-mode --primary */ /* sidebar — deeper green */ --sidebar-bg:#001814; --sidebar-color:#A9BDB8; --sidebar-hover-bg:#0F2F2B; --sidebar-active-bg:#103935; --sidebar-active-color:#E6FFFB; --sidebar-accent:#20B2A2; /* dashboard chart palette — lighter so it reads on the dark canvas */ --chart-1:#2FD0BE; --chart-2:#5BC8A0; --chart-3:#4FB8D8; --chart-4:#5CD37E; --chart-5:#F0B968; --chart-6:#86C7BE; --chart-success:#5CD37E; --chart-danger:#E69490; --chart-warning:#F0B968; --chart-grid:rgba(242,245,244,.10); --chart-axis:rgba(242,245,244,.22); /* ambient canvas — brighter grid/washes so they read on the dark surface */ --grid-line:rgba(47,208,190,.08); --wash-teal:rgba(32,178,162,.12); --wash-amber:rgba(245,158,11,.07); /* neon glow — a bright green that actually pops as a halo on the dark canvas */ --glow-primary:#2FE08C; --panel-glow:rgba(32,178,162,.22); --glow-danger:#FF6B6B; --glow-success:#4ADE80; --glow-warning:#FFD75E; --glow-info:#67E3F9; --glow-neutral:#8EA29E; } /* ============================================================================= Bootstrap variable bridge — map Bootstrap/AdminLTE's OWN theme + component CSS variables onto the MD3 tokens, so every component STATE (hover/active/focus/ checked/show) derives from the brand palette instead of the baked-in #0d6efd blue. This is the root-cause layer: set the colour once here rather than chasing each pseudo-class. Bootstrap re-declares some component vars ON the component element (e.g. .dropdown-menu), so those must be retargeted on that element (scoped rules). ============================================================================= */ .custom-theme { --bs-primary: var(--primary); --bs-primary-rgb: var(--primary-rgb); --bs-link-color: var(--primary); --bs-link-color-rgb: var(--primary-rgb); --bs-link-hover-color: var(--tertiary); --bs-link-hover-color-rgb: var(--primary-rgb); /* Neutral surfaces — remap Bootstrap/AdminLTE's default backgrounds onto the ZeMTech tokens so nothing (bg utilities, table stripe/hover, disabled inputs, subtle panels) falls back to the bluish-slate --bs-*-bg in dark mode. Cards / inputs / modals are already pinned to var(--surface) directly, so they're unaffected. */ --bs-body-bg: var(--background); --bs-body-color: var(--on-background); --bs-secondary-bg: var(--surface-variant); --bs-tertiary-bg: var(--surface-variant); } /* AdminLTE sets --bs-dropdown-link-active-bg:#0d6efd on .dropdown-menu itself, which would win over a body-level override — so retarget it on the menu element. */ .custom-theme .dropdown-menu { --bs-dropdown-link-active-bg: var(--primary); --bs-dropdown-link-active-color: var(--on-primary); } /* ============================================================================= Scrollbars — brand-teal handle. Covers native scrollbars (modals, tables, textareas, any element OverlayScrollbars doesn't manage) AND the OverlayScrollbars sidebar/body handle. Token-driven; follows light/dark. ============================================================================= */ .custom-theme ::-webkit-scrollbar { width: 8px; height: 8px; } .custom-theme ::-webkit-scrollbar-track { background: transparent; } .custom-theme ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--tertiary) 55%, transparent); border: 2px solid transparent; border-radius: 8px; background-clip: padding-box; } .custom-theme ::-webkit-scrollbar-thumb:hover { background: var(--tertiary); background-clip: padding-box; } .custom-theme { scrollbar-color: color-mix(in srgb, var(--tertiary) 55%, transparent) transparent; } /* OverlayScrollbars (sidebar + body) — tint the handle teal instead of the default grey/white */ .custom-theme .os-theme-light, .custom-theme .os-theme-dark, .os-theme-light, .os-theme-dark { --os-size: 8px; --os-handle-bg: color-mix(in srgb, var(--tertiary) 60%, transparent); --os-handle-bg-hover: var(--tertiary); --os-handle-bg-active: var(--primary); } /* ============================================================================= Opt-in layer — uses the variables above. Does NOT globally restyle AdminLTE / Bootstrap component classes (.btn-primary, .card), so existing pages are unaffected. New / restyled components opt in via these classes or var(--token). ============================================================================= */ /* page surface — solid canvas + a 40px grid and two soft corner washes (teal top-right, amber bottom-left). The opaque header/sidebar/cards sit on top; the pattern only shows through in the content gutters and around cards. */ body.custom-theme { /* !important so the theme canvas beats the body's `bg-body-tertiary` utility, which otherwise forces Bootstrap's --bs-tertiary-bg (a bluish slate in dark mode) and hid --background. In light the two nearly matched, so this only showed up in dark mode. */ background-color: var(--background) !important; color: var(--on-background); background-image: radial-gradient(1100px 600px at 85% -10%, var(--wash-teal), transparent 65%), radial-gradient(900px 640px at -10% 105%, var(--wash-amber), transparent 60%), linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: auto, auto, 40px 40px, 40px 40px; background-attachment: fixed; } /* tint native form controls (checkbox/radio/range + native popup chrome follows the active theme (light list in light, dark in dark) */ .custom-theme .form-select { color-scheme: light; } [data-bs-theme="dark"] .custom-theme .form-select, .custom-theme.dark .form-select { color-scheme: dark; } .custom-theme .form-control:focus, .custom-theme .form-select:focus { border-color: var(--tertiary); /* neon focus halo (teal) — matches the kit's soft-glow focus, not a flat ring */ box-shadow: 0 0 18px -6px var(--tertiary); } .custom-theme .form-control::placeholder { color: var(--on-surface-variant); } .custom-theme .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } /* native 's selected option) */ .custom-theme .select2-container--bootstrap-5 .select2-results__option--selected, .custom-theme .select2-results__option[aria-selected="true"] { background-color: var(--primary-container) !important; color: var(--on-primary-container) !important; } /* hovering/keyboarding the selected row — solid primary wins */ .custom-theme .select2-results__option--selected.select2-results__option--highlighted { background-color: var(--primary) !important; color: var(--on-primary) !important; } /* multi-select tags */ .custom-theme .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice { background-color: var(--primary-container); color: var(--on-primary-container); border-color: var(--outline); }