From a446a19760caea1e73d90bedac25c44aab753944 Mon Sep 17 00:00:00 2001 From: JCBSComputer Date: Fri, 3 Jul 2026 10:39:04 +0200 Subject: [PATCH] Fixed Themes colors --- Web_Backgrounds/cosmic-theme.css | 161 +++++++++++++++++++++++++++++++ Web_Backgrounds/cyber2-theme.css | 161 +++++++++++++++++++++++++++++++ 2 files changed, 322 insertions(+) diff --git a/Web_Backgrounds/cosmic-theme.css b/Web_Backgrounds/cosmic-theme.css index 0219b76..3c7f15c 100644 --- a/Web_Backgrounds/cosmic-theme.css +++ b/Web_Backgrounds/cosmic-theme.css @@ -288,6 +288,167 @@ background: none !important; } +/* ============================================================================ + Charts — Donut (LeadStatus) & Bar (LeadsPerMonth) — Cosmic colors + ============================================================================ */ + +/* ---- SVG gradient overrides (donut chart segments) ---- */ +.dark.theme-cosmic #chart-grad-0 stop { stop-color: hsl(280, 60%, 55%) !important; } +.dark.theme-cosmic #chart-grad-1 stop { stop-color: hsl(120, 100%, 45%) !important; } +.dark.theme-cosmic #chart-grad-2 stop { stop-color: hsl(320, 80%, 60%) !important; } +.dark.theme-cosmic #chart-grad-3 stop { stop-color: hsl(170, 80%, 50%) !important; } +.dark.theme-cosmic #chart-grad-4 stop { stop-color: hsl(260, 15%, 40%) !important; } + +.light.theme-cosmic #chart-grad-0 stop { stop-color: hsl(280, 50%, 50%) !important; } +.light.theme-cosmic #chart-grad-1 stop { stop-color: hsl(120, 80%, 40%) !important; } +.light.theme-cosmic #chart-grad-2 stop { stop-color: hsl(320, 70%, 55%) !important; } +.light.theme-cosmic #chart-grad-3 stop { stop-color: hsl(170, 70%, 40%) !important; } +.light.theme-cosmic #chart-grad-4 stop { stop-color: hsl(260, 10%, 55%) !important; } + +/* ---- SVG gradient overrides (bar chart) ---- */ +.dark.theme-cosmic #newLeadsGrad stop { stop-color: hsl(280, 60%, 55%) !important; } +.dark.theme-cosmic #closedGrad stop { stop-color: hsl(120, 100%, 45%) !important; } +.light.theme-cosmic #newLeadsGrad stop { stop-color: hsl(280, 50%, 50%) !important; } +.light.theme-cosmic #closedGrad stop { stop-color: hsl(120, 80%, 40%) !important; } + +/* ---- Inline chart colors (legend dots, hover text) ---- */ +.dark.theme-cosmic [style*="background: #3b82f6"], +.dark.theme-cosmic [style*="background:#3b82f6"] { background: hsl(280, 60%, 55%) !important; } +.dark.theme-cosmic [style*="background: #f59e0b"], +.dark.theme-cosmic [style*="background:#f59e0b"] { background: hsl(120, 100%, 45%) !important; } +.dark.theme-cosmic [style*="background: #8b5cf6"], +.dark.theme-cosmic [style*="background:#8b5cf6"] { background: hsl(320, 80%, 60%) !important; } +.dark.theme-cosmic [style*="background: #10b981"], +.dark.theme-cosmic [style*="background:#10b981"] { background: hsl(170, 80%, 50%) !important; } +.dark.theme-cosmic [style*="background: #6B7280"], +.dark.theme-cosmic [style*="background:#6B7280"] { background: hsl(260, 15%, 40%) !important; } + +.light.theme-cosmic [style*="background: #3b82f6"], +.light.theme-cosmic [style*="background:#3b82f6"] { background: hsl(280, 50%, 50%) !important; } +.light.theme-cosmic [style*="background: #f59e0b"], +.light.theme-cosmic [style*="background:#f59e0b"] { background: hsl(120, 80%, 40%) !important; } +.light.theme-cosmic [style*="background: #8b5cf6"], +.light.theme-cosmic [style*="background:#8b5cf6"] { background: hsl(320, 70%, 55%) !important; } +.light.theme-cosmic [style*="background: #10b981"], +.light.theme-cosmic [style*="background:#10b981"] { background: hsl(170, 70%, 40%) !important; } +.light.theme-cosmic [style*="background: #6B7280"], +.light.theme-cosmic [style*="background:#6B7280"] { background: hsl(260, 10%, 55%) !important; } + +/* ---- Chart legend hover borders/box-shadows ---- */ +.dark.theme-cosmic [style*="border: 1px solid #3b82f6"], +.dark.theme-cosmic [style*="border:1px solid #3b82f6"] { border-color: hsl(280, 60%, 55%) !important; } +.dark.theme-cosmic [style*="border: 1px solid #f59e0b"], +.dark.theme-cosmic [style*="border:1px solid #f59e0b"] { border-color: hsl(120, 100%, 45%) !important; } +.dark.theme-cosmic [style*="border: 1px solid #8b5cf6"], +.dark.theme-cosmic [style*="border:1px solid #8b5cf6"] { border-color: hsl(320, 80%, 60%) !important; } +.dark.theme-cosmic [style*="border: 1px solid #10b981"], +.dark.theme-cosmic [style*="border:1px solid #10b981"] { border-color: hsl(170, 80%, 50%) !important; } +.dark.theme-cosmic [style*="border: 1px solid #6B7280"], +.dark.theme-cosmic [style*="border:1px solid #6B7280"] { border-color: hsl(260, 15%, 40%) !important; } + +/* ---- Donut chart segment text color on hover ---- */ +.dark.theme-cosmic [style*="color: #3b82f6"] { color: hsl(280, 60%, 55%) !important; } +.dark.theme-cosmic [style*="color: #f59e0b"] { color: hsl(120, 100%, 45%) !important; } +.dark.theme-cosmic [style*="color: #8b5cf6"] { color: hsl(320, 80%, 60%) !important; } +.dark.theme-cosmic [style*="color: #10b981"] { color: hsl(170, 80%, 50%) !important; } +.dark.theme-cosmic [style*="color: #6B7280"] { color: hsl(260, 15%, 40%) !important; } + +.light.theme-cosmic [style*="color: #3b82f6"] { color: hsl(280, 50%, 50%) !important; } +.light.theme-cosmic [style*="color: #f59e0b"] { color: hsl(120, 80%, 40%) !important; } +.light.theme-cosmic [style*="color: #8b5cf6"] { color: hsl(320, 70%, 55%) !important; } +.light.theme-cosmic [style*="color: #10b981"] { color: hsl(170, 70%, 40%) !important; } +.light.theme-cosmic [style*="color: #6B7280"] { color: hsl(260, 10%, 55%) !important; } + +/* ============================================================================ + Stat Cards — Icon backgrounds, text colors, progress bars + ============================================================================ */ + +.dark.theme-cosmic .rounded-xl.border.bg-card .rounded-xl.shrink-0 { + background: hsla(280, 60%, 55%, 0.12) !important; +} +.dark.theme-cosmic .rounded-xl.border.bg-card .rounded-xl.shrink-0 svg { + color: hsl(280, 60%, 55%) !important; +} + +.dark.theme-cosmic .rounded-xl.border.bg-card .h-1\.5.bg-muted.rounded-full .rounded-full { + background: linear-gradient(to right, hsl(280, 60%, 55%), hsl(120, 100%, 45%)) !important; +} + +.dark.theme-cosmic .rounded-xl.border.bg-card .absolute.bottom-0.left-0.right-0.h-1 { + background: linear-gradient(to right, transparent, hsla(280, 60%, 55%, 0.2), transparent) !important; +} + +.light.theme-cosmic .rounded-xl.border.bg-card .rounded-xl.shrink-0 { + background: hsla(280, 50%, 50%, 0.1) !important; +} +.light.theme-cosmic .rounded-xl.border.bg-card .rounded-xl.shrink-0 svg { + color: hsl(280, 50%, 50%) !important; +} + +.light.theme-cosmic .rounded-xl.border.bg-card .h-1\.5.bg-muted.rounded-full .rounded-full { + background: linear-gradient(to right, hsl(280, 50%, 50%), hsl(120, 80%, 40%)) !important; +} + +.light.theme-cosmic .rounded-xl.border.bg-card .absolute.bottom-0.left-0.right-0.h-1 { + background: linear-gradient(to right, transparent, hsla(280, 50%, 50%, 0.15), transparent) !important; +} + +/* ============================================================================ + Inline hex color overrides — stat card values, page icons, etc. + ============================================================================ */ + +.dark.theme-cosmic .text-\[#C84B4B\], .dark.theme-cosmic .dark\:text-\[\#C84B4B\] { color: hsl(280, 60%, 55%) !important; } +.dark.theme-cosmic .text-\[#5A8FC4\], .dark.theme-cosmic .dark\:text-\[\#5A8FC4\] { color: hsl(120, 100%, 45%) !important; } +.dark.theme-cosmic .text-\[#FF1111\], .dark.theme-cosmic .dark\:text-\[\#FF1111\] { color: hsl(280, 80%, 60%) !important; } +.dark.theme-cosmic .text-\[#1144FF\], .dark.theme-cosmic .dark\:text-\[\#1144FF\] { color: hsl(120, 100%, 55%) !important; } + +.light.theme-cosmic .text-\[#C84B4B\], .light.theme-cosmic .dark\:text-\[\#C84B4B\] { color: hsl(280, 50%, 50%) !important; } +.light.theme-cosmic .text-\[#5A8FC4\], .light.theme-cosmic .dark\:text-\[\#5A8FC4\] { color: hsl(120, 80%, 40%) !important; } + +.dark.theme-cosmic .bg-\[#C84B4B\]\/10, .dark.theme-cosmic .dark\:bg-\[\#C84B4B\]\/10 { background: hsla(280, 60%, 55%, 0.1) !important; } +.dark.theme-cosmic .bg-\[#5A8FC4\]\/10, .dark.theme-cosmic .dark\:bg-\[\#5A8FC4\]\/10 { background: hsla(120, 100%, 45%, 0.1) !important; } + +.light.theme-cosmic .bg-\[#C84B4B\]\/10, .light.theme-cosmic .dark\:bg-\[\#C84B4B\]\/10 { background: hsla(280, 50%, 50%, 0.08) !important; } +.light.theme-cosmic .bg-\[#5A8FC4\]\/10, .light.theme-cosmic .dark\:bg-\[\#5A8FC4\]\/10 { background: hsla(120, 80%, 40%, 0.08) !important; } + +.dark.theme-cosmic .from-\[#C84B4B\], .dark.theme-cosmic .dark\:from-\[\#C84B4B\], +.dark.theme-cosmic .via-\[#C84B4B\], .dark.theme-cosmic .dark\:via-\[\#C84B4B\], +.dark.theme-cosmic .to-\[#C84B4B\], .dark.theme-cosmic .dark\:to-\[\#C84B4B\] { --tw-gradient-from: hsl(280, 60%, 55%) !important; } + +.dark.theme-cosmic .from-\[#5A8FC4\], .dark.theme-cosmic .dark\:from-\[\#5A8FC4\], +.dark.theme-cosmic .via-\[#5A8FC4\], .dark.theme-cosmic .dark\:via-\[\#5A8FC4\], +.dark.theme-cosmic .to-\[#5A8FC4\], .dark.theme-cosmic .dark\:to-\[\#5A8FC4\] { --tw-gradient-from: hsl(120, 100%, 45%) !important; } + +.light.theme-cosmic .from-\[#C84B4B\], .light.theme-cosmic .dark\:from-\[\#C84B4B\], +.light.theme-cosmic .via-\[#C84B4B\], .light.theme-cosmic .dark\:via-\[\#C84B4B\], +.light.theme-cosmic .to-\[#C84B4B\], .light.theme-cosmic .dark\:to-\[\#C84B4B\] { --tw-gradient-from: hsl(280, 50%, 50%) !important; } + +.light.theme-cosmic .from-\[#5A8FC4\], .light.theme-cosmic .dark\:from-\[\#5A8FC4\], +.light.theme-cosmic .via-\[#5A8FC4\], .light.theme-cosmic .dark\:via-\[\#5A8FC4\], +.light.theme-cosmic .to-\[#5A8FC4\], .light.theme-cosmic .dark\:to-\[\#5A8FC4\] { --tw-gradient-from: hsl(120, 80%, 40%) !important; } + +/* ---- SVG stroke/fill overrides ---- */ +.dark.theme-cosmic [stroke="#CC0000"] { stroke: hsl(280, 60%, 55%) !important; } +.dark.theme-cosmic [stroke="#0033CC"] { stroke: hsl(120, 100%, 45%) !important; } +.light.theme-cosmic [stroke="#CC0000"] { stroke: hsl(280, 50%, 50%) !important; } +.light.theme-cosmic [stroke="#0033CC"] { stroke: hsl(120, 80%, 40%) !important; } + +/* ============================================================================ + Light mode — deeper visual polish + ============================================================================ */ + +.light.theme-cosmic .rounded-xl.border.bg-card { + box-shadow: 0 1px 3px hsla(280, 50%, 30%, 0.08), 0 4px 12px hsla(280, 50%, 30%, 0.04) !important; +} + +.light.theme-cosmic aside .group:hover { + background: hsla(280, 50%, 50%, 0.04) !important; +} + +.light.theme-cosmic .hover\:bg-accent:hover { + background: hsla(280, 50%, 50%, 0.06) !important; +} + /* ============================================================================ Client Portal Overrides — Background for portal pages ============================================================================ */ diff --git a/Web_Backgrounds/cyber2-theme.css b/Web_Backgrounds/cyber2-theme.css index d0aacb6..1316bd8 100644 --- a/Web_Backgrounds/cyber2-theme.css +++ b/Web_Backgrounds/cyber2-theme.css @@ -319,6 +319,167 @@ background: none !important; } +/* ============================================================================ + Charts — Donut (LeadStatus) & Bar (LeadsPerMonth) — Cyber2 colors + ============================================================================ */ + +/* ---- SVG gradient overrides (donut chart segments) ---- */ +.dark.theme-cyber2 #chart-grad-0 stop { stop-color: hsl(180, 100%, 50%) !important; } +.dark.theme-cyber2 #chart-grad-1 stop { stop-color: hsl(280, 80%, 55%) !important; } +.dark.theme-cyber2 #chart-grad-2 stop { stop-color: hsl(310, 90%, 60%) !important; } +.dark.theme-cyber2 #chart-grad-3 stop { stop-color: hsl(170, 100%, 45%) !important; } +.dark.theme-cyber2 #chart-grad-4 stop { stop-color: hsl(180, 20%, 40%) !important; } + +.light.theme-cyber2 #chart-grad-0 stop { stop-color: hsl(180, 80%, 40%) !important; } +.light.theme-cyber2 #chart-grad-1 stop { stop-color: hsl(280, 60%, 50%) !important; } +.light.theme-cyber2 #chart-grad-2 stop { stop-color: hsl(310, 70%, 55%) !important; } +.light.theme-cyber2 #chart-grad-3 stop { stop-color: hsl(170, 80%, 38%) !important; } +.light.theme-cyber2 #chart-grad-4 stop { stop-color: hsl(180, 15%, 50%) !important; } + +/* ---- SVG gradient overrides (bar chart) ---- */ +.dark.theme-cyber2 #newLeadsGrad stop { stop-color: hsl(180, 100%, 50%) !important; } +.dark.theme-cyber2 #closedGrad stop { stop-color: hsl(280, 80%, 55%) !important; } +.light.theme-cyber2 #newLeadsGrad stop { stop-color: hsl(180, 80%, 40%) !important; } +.light.theme-cyber2 #closedGrad stop { stop-color: hsl(280, 60%, 50%) !important; } + +/* ---- Inline chart colors (legend dots, hover text) ---- */ +.dark.theme-cyber2 [style*="background: #3b82f6"], +.dark.theme-cyber2 [style*="background:#3b82f6"] { background: hsl(180, 100%, 50%) !important; } +.dark.theme-cyber2 [style*="background: #f59e0b"], +.dark.theme-cyber2 [style*="background:#f59e0b"] { background: hsl(280, 80%, 55%) !important; } +.dark.theme-cyber2 [style*="background: #8b5cf6"], +.dark.theme-cyber2 [style*="background:#8b5cf6"] { background: hsl(310, 90%, 60%) !important; } +.dark.theme-cyber2 [style*="background: #10b981"], +.dark.theme-cyber2 [style*="background:#10b981"] { background: hsl(170, 100%, 45%) !important; } +.dark.theme-cyber2 [style*="background: #6B7280"], +.dark.theme-cyber2 [style*="background:#6B7280"] { background: hsl(180, 20%, 40%) !important; } + +.light.theme-cyber2 [style*="background: #3b82f6"], +.light.theme-cyber2 [style*="background:#3b82f6"] { background: hsl(180, 80%, 40%) !important; } +.light.theme-cyber2 [style*="background: #f59e0b"], +.light.theme-cyber2 [style*="background:#f59e0b"] { background: hsl(280, 60%, 50%) !important; } +.light.theme-cyber2 [style*="background: #8b5cf6"], +.light.theme-cyber2 [style*="background:#8b5cf6"] { background: hsl(310, 70%, 55%) !important; } +.light.theme-cyber2 [style*="background: #10b981"], +.light.theme-cyber2 [style*="background:#10b981"] { background: hsl(170, 80%, 38%) !important; } +.light.theme-cyber2 [style*="background: #6B7280"], +.light.theme-cyber2 [style*="background:#6B7280"] { background: hsl(180, 15%, 50%) !important; } + +/* ---- Chart legend hover borders ---- */ +.dark.theme-cyber2 [style*="border: 1px solid #3b82f6"], +.dark.theme-cyber2 [style*="border:1px solid #3b82f6"] { border-color: hsl(180, 100%, 50%) !important; } +.dark.theme-cyber2 [style*="border: 1px solid #f59e0b"], +.dark.theme-cyber2 [style*="border:1px solid #f59e0b"] { border-color: hsl(280, 80%, 55%) !important; } +.dark.theme-cyber2 [style*="border: 1px solid #8b5cf6"], +.dark.theme-cyber2 [style*="border:1px solid #8b5cf6"] { border-color: hsl(310, 90%, 60%) !important; } +.dark.theme-cyber2 [style*="border: 1px solid #10b981"], +.dark.theme-cyber2 [style*="border:1px solid #10b981"] { border-color: hsl(170, 100%, 45%) !important; } +.dark.theme-cyber2 [style*="border: 1px solid #6B7280"], +.dark.theme-cyber2 [style*="border:1px solid #6B7280"] { border-color: hsl(180, 20%, 40%) !important; } + +/* ---- Donut chart segment text color on hover ---- */ +.dark.theme-cyber2 [style*="color: #3b82f6"] { color: hsl(180, 100%, 50%) !important; } +.dark.theme-cyber2 [style*="color: #f59e0b"] { color: hsl(280, 80%, 55%) !important; } +.dark.theme-cyber2 [style*="color: #8b5cf6"] { color: hsl(310, 90%, 60%) !important; } +.dark.theme-cyber2 [style*="color: #10b981"] { color: hsl(170, 100%, 45%) !important; } +.dark.theme-cyber2 [style*="color: #6B7280"] { color: hsl(180, 20%, 40%) !important; } + +.light.theme-cyber2 [style*="color: #3b82f6"] { color: hsl(180, 80%, 40%) !important; } +.light.theme-cyber2 [style*="color: #f59e0b"] { color: hsl(280, 60%, 50%) !important; } +.light.theme-cyber2 [style*="color: #8b5cf6"] { color: hsl(310, 70%, 55%) !important; } +.light.theme-cyber2 [style*="color: #10b981"] { color: hsl(170, 80%, 38%) !important; } +.light.theme-cyber2 [style*="color: #6B7280"] { color: hsl(180, 15%, 50%) !important; } + +/* ============================================================================ + Stat Cards — Icon backgrounds, text colors, progress bars + ============================================================================ */ + +.dark.theme-cyber2 .rounded-xl.border.bg-card .rounded-xl.shrink-0 { + background: hsla(180, 100%, 50%, 0.12) !important; +} +.dark.theme-cyber2 .rounded-xl.border.bg-card .rounded-xl.shrink-0 svg { + color: hsl(180, 100%, 50%) !important; +} + +.dark.theme-cyber2 .rounded-xl.border.bg-card .h-1\.5.bg-muted.rounded-full .rounded-full { + background: linear-gradient(to right, hsl(180, 100%, 50%), hsl(280, 80%, 55%)) !important; +} + +.dark.theme-cyber2 .rounded-xl.border.bg-card .absolute.bottom-0.left-0.right-0.h-1 { + background: linear-gradient(to right, transparent, hsla(180, 100%, 50%, 0.2), transparent) !important; +} + +.light.theme-cyber2 .rounded-xl.border.bg-card .rounded-xl.shrink-0 { + background: hsla(180, 80%, 40%, 0.1) !important; +} +.light.theme-cyber2 .rounded-xl.border.bg-card .rounded-xl.shrink-0 svg { + color: hsl(180, 80%, 40%) !important; +} + +.light.theme-cyber2 .rounded-xl.border.bg-card .h-1\.5.bg-muted.rounded-full .rounded-full { + background: linear-gradient(to right, hsl(180, 80%, 40%), hsl(280, 60%, 50%)) !important; +} + +.light.theme-cyber2 .rounded-xl.border.bg-card .absolute.bottom-0.left-0.right-0.h-1 { + background: linear-gradient(to right, transparent, hsla(180, 80%, 40%, 0.15), transparent) !important; +} + +/* ============================================================================ + Inline hex color overrides — stat card values, page icons, etc. + ============================================================================ */ + +.dark.theme-cyber2 .text-\[#C84B4B\], .dark.theme-cyber2 .dark\:text-\[\#C84B4B\] { color: hsl(180, 100%, 50%) !important; } +.dark.theme-cyber2 .text-\[#5A8FC4\], .dark.theme-cyber2 .dark\:text-\[\#5A8FC4\] { color: hsl(280, 80%, 55%) !important; } +.dark.theme-cyber2 .text-\[#FF1111\], .dark.theme-cyber2 .dark\:text-\[\#FF1111\] { color: hsl(180, 100%, 55%) !important; } +.dark.theme-cyber2 .text-\[#1144FF\], .dark.theme-cyber2 .dark\:text-\[\#1144FF\] { color: hsl(280, 80%, 60%) !important; } + +.light.theme-cyber2 .text-\[#C84B4B\], .light.theme-cyber2 .dark\:text-\[\#C84B4B\] { color: hsl(180, 80%, 40%) !important; } +.light.theme-cyber2 .text-\[#5A8FC4\], .light.theme-cyber2 .dark\:text-\[\#5A8FC4\] { color: hsl(280, 60%, 50%) !important; } + +.dark.theme-cyber2 .bg-\[#C84B4B\]\/10, .dark.theme-cyber2 .dark\:bg-\[\#C84B4B\]\/10 { background: hsla(180, 100%, 50%, 0.1) !important; } +.dark.theme-cyber2 .bg-\[#5A8FC4\]\/10, .dark.theme-cyber2 .dark\:bg-\[\#5A8FC4\]\/10 { background: hsla(280, 80%, 55%, 0.1) !important; } + +.light.theme-cyber2 .bg-\[#C84B4B\]\/10, .light.theme-cyber2 .dark\:bg-\[\#C84B4B\]\/10 { background: hsla(180, 80%, 40%, 0.08) !important; } +.light.theme-cyber2 .bg-\[#5A8FC4\]\/10, .light.theme-cyber2 .dark\:bg-\[\#5A8FC4\]\/10 { background: hsla(280, 60%, 50%, 0.08) !important; } + +.dark.theme-cyber2 .from-\[#C84B4B\], .dark.theme-cyber2 .dark\:from-\[\#C84B4B\], +.dark.theme-cyber2 .via-\[#C84B4B\], .dark.theme-cyber2 .dark\:via-\[\#C84B4B\], +.dark.theme-cyber2 .to-\[#C84B4B\], .dark.theme-cyber2 .dark\:to-\[\#C84B4B\] { --tw-gradient-from: hsl(180, 100%, 50%) !important; } + +.dark.theme-cyber2 .from-\[#5A8FC4\], .dark.theme-cyber2 .dark\:from-\[\#5A8FC4\], +.dark.theme-cyber2 .via-\[#5A8FC4\], .dark.theme-cyber2 .dark\:via-\[\#5A8FC4\], +.dark.theme-cyber2 .to-\[#5A8FC4\], .dark.theme-cyber2 .dark\:to-\[\#5A8FC4\] { --tw-gradient-from: hsl(280, 80%, 55%) !important; } + +.light.theme-cyber2 .from-\[#C84B4B\], .light.theme-cyber2 .dark\:from-\[\#C84B4B\], +.light.theme-cyber2 .via-\[#C84B4B\], .light.theme-cyber2 .dark\:via-\[\#C84B4B\], +.light.theme-cyber2 .to-\[#C84B4B\], .light.theme-cyber2 .dark\:to-\[\#C84B4B\] { --tw-gradient-from: hsl(180, 80%, 40%) !important; } + +.light.theme-cyber2 .from-\[#5A8FC4\], .light.theme-cyber2 .dark\:from-\[\#5A8FC4\], +.light.theme-cyber2 .via-\[#5A8FC4\], .light.theme-cyber2 .dark\:via-\[\#5A8FC4\], +.light.theme-cyber2 .to-\[#5A8FC4\], .light.theme-cyber2 .dark\:to-\[\#5A8FC4\] { --tw-gradient-from: hsl(280, 60%, 50%) !important; } + +/* ---- SVG stroke/fill overrides ---- */ +.dark.theme-cyber2 [stroke="#CC0000"] { stroke: hsl(180, 100%, 50%) !important; } +.dark.theme-cyber2 [stroke="#0033CC"] { stroke: hsl(280, 80%, 55%) !important; } +.light.theme-cyber2 [stroke="#CC0000"] { stroke: hsl(180, 80%, 40%) !important; } +.light.theme-cyber2 [stroke="#0033CC"] { stroke: hsl(280, 60%, 50%) !important; } + +/* ============================================================================ + Light mode — deeper visual polish + ============================================================================ */ + +.light.theme-cyber2 .rounded-xl.border.bg-card { + box-shadow: 0 1px 3px hsla(180, 80%, 30%, 0.08), 0 4px 12px hsla(180, 80%, 30%, 0.04) !important; +} + +.light.theme-cyber2 aside .group:hover { + background: hsla(180, 80%, 40%, 0.04) !important; +} + +.light.theme-cyber2 .hover\:bg-accent:hover { + background: hsla(180, 80%, 40%, 0.06) !important; +} + /* ============================================================================ Client Portal Overrides — Background for portal pages ============================================================================ */