/* ================================================================ DARK THEME — "Midnight Ocean" Activated by: html.dark class on Palette: Deep navy + glowing sky-blue/cyan accents ================================================================ */ /* ── Smooth theme transition on key surfaces ── */ body, #app-sidebar, header, .card-gold, .metric-card, .db-card, .db-stat-card, .nav-item, input, select, textarea, #header-notifications-dropdown, #org-dropdown, thead th, tbody tr { transition: background-color 0.28s ease, background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, color 0.20s ease; } /* ================================================================ CSS CUSTOM PROPERTY OVERRIDES ================================================================ */ html.dark { --background: 222 47% 8%; --foreground: 210 40% 94%; --card: 222 47% 11%; --card-foreground: 210 40% 94%; --popover: 222 47% 10%; --popover-foreground: 210 40% 94%; --primary: 199 89% 58%; --primary-foreground: 222 47% 8%; --secondary: 222 35% 17%; --secondary-foreground:210 40% 88%; --muted: 222 40% 15%; --muted-foreground: 210 20% 52%; --accent: 222 35% 20%; --accent-foreground: 210 40% 90%; --destructive: 0 72% 58%; --destructive-foreground: 0 0% 98%; --border: 222 35% 20%; --input: 222 35% 20%; --ring: 199 89% 58%; --sidebar: 222 47% 6%; --sidebar-border: 222 35% 14%; --gradient-gold: linear-gradient(135deg, #0369A1 0%, #38BDF8 100%); } /* ================================================================ BACKGROUND — Deep navy aurora mesh ================================================================ */ html.dark, html.dark body { background: radial-gradient(ellipse 70% 50% at 8% 18%, rgba(14,165,233,0.14) 0%, transparent 58%), radial-gradient(ellipse 55% 60% at 92% 80%, rgba(6,182,212,0.12) 0%, transparent 55%), radial-gradient(ellipse 50% 45% at 78% 5%, rgba(2,132,199,0.10) 0%, transparent 52%), radial-gradient(ellipse 60% 35% at 20% 92%, rgba(56,189,248,0.09) 0%, transparent 50%), linear-gradient(145deg, #060d1f 0%, #071425 35%, #060f1d 65%, #081825 100%) !important; color: hsl(210 40% 94%) !important; min-height: 100vh; } html.dark #root, html.dark #app-shell-content, html.dark main { background: transparent !important; } /* Dot grid — subtler in dark */ html.dark body::before { background-image: radial-gradient(rgba(56,189,248,0.07) 1.2px, transparent 1.2px) !important; } /* Floating blobs — glowing cyan in dark */ html.dark body::after { background: radial-gradient(circle 360px at 93% 10%, rgba(56,189,248,0.12) 0%, transparent 70%), radial-gradient(circle 300px at 4% 88%, rgba(14,165,233,0.10) 0%, transparent 70%) !important; } /* ================================================================ SIDEBAR ================================================================ */ html.dark #app-sidebar { background: linear-gradient(170deg, rgba(6,14,34,0.97) 0%, rgba(5,11,26,0.99) 100%) !important; border-right: 1px solid rgba(56,189,248,0.10) !important; box-shadow: 4px 0 36px rgba(0,0,0,0.55), 1px 0 0 rgba(56,189,248,0.06) !important; } html.dark #app-sidebar .h-16.border-b { border-bottom-color: rgba(56,189,248,0.08) !important; background: linear-gradient(90deg, rgba(56,189,248,0.04), transparent) !important; } /* ── Dark nav items ── */ html.dark .nav-item { color: hsl(210 25% 58%); } html.dark .nav-item:hover { background: rgba(56,189,248,0.09) !important; color: hsl(199 89% 72%); } html.dark .nav-item.active { background: linear-gradient(135deg, rgba(2,132,199,0.20) 0%, rgba(56,189,248,0.12) 100%) !important; color: hsl(199 89% 72%); box-shadow: inset 0 0 0 1px rgba(56,189,248,0.16), 0 2px 10px rgba(2,132,199,0.20) !important; } html.dark .nav-item.active::before { background: linear-gradient(to bottom, #38BDF8, #0EA5E9) !important; box-shadow: 2px 0 10px rgba(56,189,248,0.65) !important; } /* ================================================================ HEADER ================================================================ */ html.dark header { background: rgba(6,14,34,0.82) !important; backdrop-filter: blur(28px) saturate(140%) !important; -webkit-backdrop-filter: blur(28px) saturate(140%) !important; border-bottom: 1px solid rgba(56,189,248,0.09) !important; box-shadow: 0 2px 24px rgba(0,0,0,0.40), 0 1px 0 rgba(56,189,248,0.06) !important; } /* ── Header icon buttons in dark ── */ html.dark #sidebar-toggle-btn, html.dark #header-notifications-bell, html.dark #theme-toggle-btn { background: rgba(15,30,65,0.80) !important; border: 1px solid rgba(56,189,248,0.14) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.30), inset 0 1px 0 rgba(56,189,248,0.08) !important; } html.dark #sidebar-toggle-btn:hover, html.dark #header-notifications-bell:hover, html.dark #theme-toggle-btn:hover { background: rgba(56,189,248,0.12) !important; border-color: rgba(56,189,248,0.30) !important; } html.dark #org-switcher-btn { background: rgba(15,30,65,0.80) !important; border: 1px solid rgba(56,189,248,0.14) !important; } html.dark #org-switcher-btn:hover { background: rgba(56,189,248,0.10) !important; } /* ── Dropdowns in dark ── */ html.dark #header-notifications-dropdown, html.dark #org-dropdown { background: rgba(8,18,44,0.97) !important; border: 1px solid rgba(56,189,248,0.14) !important; box-shadow: 0 0 0 1px rgba(56,189,248,0.08), 0 20px 56px rgba(0,0,0,0.65) !important; } /* ── Global search in dark ── */ html.dark #global-search-input { background: rgba(15,30,65,0.80) !important; border: 1px solid rgba(56,189,248,0.16) !important; color: hsl(210 40% 92%) !important; } html.dark #global-search-input::placeholder { color: hsl(210 20% 45%) !important; } html.dark #global-search-input:focus { border-color: rgba(56,189,248,0.40) !important; box-shadow: 0 0 0 3px rgba(56,189,248,0.10) !important; } /* ================================================================ CARDS ================================================================ */ html.dark .card-gold { background: rgba(10,22,52,0.72) !important; border: 1px solid rgba(56,189,248,0.12) !important; box-shadow: 0 0 0 1px rgba(56,189,248,0.07), 0 4px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(56,189,248,0.10) !important; } html.dark .card-gold::before { background: linear-gradient(90deg, transparent, rgba(56,189,248,0.40), rgba(14,165,233,0.20), transparent) !important; } html.dark .card-gold:hover { box-shadow: 0 0 0 1px rgba(56,189,248,0.16), 0 12px 44px rgba(0,0,0,0.55), inset 0 1px 0 rgba(56,189,248,0.14) !important; } html.dark .metric-card { background: rgba(10,22,52,0.72) !important; border: 1px solid rgba(56,189,248,0.12) !important; box-shadow: 0 0 0 1px rgba(56,189,248,0.07), 0 4px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(56,189,248,0.10) !important; } html.dark .bg-card { background: rgba(10,22,52,0.72) !important; } html.dark [class*="bg-card"][class*="rounded"], html.dark .border.rounded-xl, html.dark .border.rounded-2xl { background: rgba(10,22,52,0.72) !important; border-color: rgba(56,189,248,0.11) !important; box-shadow: 0 0 0 1px rgba(56,189,248,0.06), 0 4px 28px rgba(0,0,0,0.42), inset 0 1px 0 rgba(56,189,248,0.09) !important; } /* ================================================================ FORM INPUTS ================================================================ */ html.dark input:not([type=checkbox]):not([type=radio]):not(#global-search-input), html.dark select, html.dark textarea { background: rgba(10,22,52,0.80) !important; border-color: rgba(56,189,248,0.18) !important; color: hsl(210 40% 90%) !important; } html.dark input:not([type=checkbox]):not([type=radio]):focus, html.dark select:focus, html.dark textarea:focus { border-color: rgba(56,189,248,0.42) !important; box-shadow: 0 0 0 3px rgba(56,189,248,0.10) !important; } /* ================================================================ TEXT & BORDERS ================================================================ */ html.dark .text-foreground { color: hsl(210 40% 92%) !important; } html.dark .text-muted-foreground { color: hsl(210 20% 50%) !important; } html.dark .border-border, html.dark .border-sidebar-border { border-color: rgba(56,189,248,0.14) !important; } html.dark .bg-muted { background: rgba(12,26,58,0.60) !important; } html.dark .bg-secondary { background: rgba(10,22,52,0.65) !important; } html.dark .bg-background { background: transparent !important; } /* ================================================================ BUTTONS ================================================================ */ html.dark [class*="bg-primary"]:not(svg):not(circle):not(path) { background: linear-gradient(135deg, #0369A1 0%, #0EA5E9 60%, #38BDF8 100%) !important; box-shadow: 0 4px 20px rgba(14,165,233,0.40), inset 0 1px 0 rgba(255,255,255,0.15) !important; } html.dark [class*="bg-primary"]:not(svg):not(circle):not(path):hover { box-shadow: 0 6px 30px rgba(56,189,248,0.55), 0 0 20px rgba(56,189,248,0.20), inset 0 1px 0 rgba(255,255,255,0.15) !important; } html.dark #header-notifications-bell .absolute { background: linear-gradient(135deg, #0284C7, #38BDF8) !important; box-shadow: 0 0 10px rgba(56,189,248,0.55) !important; } /* ================================================================ TABLE ================================================================ */ html.dark thead th { background: rgba(10,22,52,0.65) !important; border-bottom-color: rgba(56,189,248,0.10) !important; } html.dark tbody tr:hover { background: rgba(56,189,248,0.06) !important; } html.dark tbody tr { border-color: rgba(56,189,248,0.06) !important; } /* ================================================================ SCROLLBAR ================================================================ */ html.dark ::-webkit-scrollbar-track { background: rgba(6,14,34,0.60); } html.dark ::-webkit-scrollbar-thumb { background: rgba(56,189,248,0.20); } html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(56,189,248,0.38); } /* ================================================================ MODAL OVERLAYS ================================================================ */ html.dark .bg-black\/50 { background: rgba(4,10,25,0.65) !important; } html.dark #mobile-sidebar-backdrop { background: rgba(4,10,25,0.55) !important; } /* ================================================================ STATUS BADGES ================================================================ */ html.dark .bg-green-500\/10 { background: rgba(34,197,94,0.15) !important; } html.dark .bg-red-500\/20 { background: rgba(239,68,68,0.18) !important; } html.dark .bg-orange-500\/20 { background: rgba(249,115,22,0.18) !important; } html.dark .bg-gray-500\/20 { background: rgba(148,163,184,0.15)!important; } html.dark .bg-blue-500\/10 { background: rgba(56,189,248,0.14) !important; } html.dark .bg-yellow-500\/20 { background: rgba(56,189,248,0.14) !important; } /* ================================================================ DASHBOARD CARDS ================================================================ */ html.dark .db-card { background: rgba(10,22,52,0.72) !important; border: 1px solid rgba(56,189,248,0.12) !important; box-shadow: 0 0 0 1px rgba(56,189,248,0.06), 0 4px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(56,189,248,0.09) !important; } html.dark .db-card::after { background: linear-gradient(90deg, transparent, rgba(56,189,248,0.38), rgba(14,165,233,0.18), transparent) !important; } /* Stat cards — deeper, more vibrant in dark */ html.dark .db-stat-gold { background: linear-gradient(135deg, #0a3d6b 0%, #0369A1 50%, #0EA5E9 100%) !important; box-shadow: 0 8px 32px rgba(3,105,161,0.50), inset 0 1px 0 rgba(56,189,248,0.25) !important; } html.dark .db-stat-rose { background: linear-gradient(135deg, #044554 0%, #0891B2 50%, #22D3EE 100%) !important; box-shadow: 0 8px 32px rgba(8,145,178,0.48), inset 0 1px 0 rgba(34,211,238,0.22) !important; } /* Calendar */ html.dark .db-cal-arrow { border-color: rgba(56,189,248,0.18) !important; color: hsl(210 20% 55%) !important; } html.dark .db-cal-arrow:hover { border-color: rgba(56,189,248,0.50) !important; color: hsl(199 89% 65%) !important; } html.dark .db-cal-day { color: hsl(210 20% 50%) !important; } html.dark .db-cal-day:hover { background: rgba(56,189,248,0.12) !important; color: hsl(199 89% 70%) !important; } html.dark .db-cal-today { background: linear-gradient(135deg, #0284C7, #38BDF8) !important; box-shadow: 0 2px 14px rgba(56,189,248,0.65), 0 0 0 2px rgba(56,189,248,0.25) !important; color: #fff !important; } /* Activity rows */ html.dark .db-activity-row { border-bottom-color: rgba(56,189,248,0.06) !important; } html.dark .db-proj-item, html.dark .db-action-row, html.dark .db-msg-item { border-bottom-color: rgba(56,189,248,0.07) !important; } /* ================================================================ TEAM LOGS PAGE ================================================================ */ html.dark .tl-stat-card { background: rgba(8,18,48,0.85) !important; border-color: rgba(56,189,248,0.14) !important; box-shadow: 0 4px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(56,189,248,0.07) !important; } html.dark .tl-card { background: rgba(8,18,48,0.88) !important; border-color: rgba(56,189,248,0.12) !important; box-shadow: 0 6px 24px rgba(0,0,0,0.50), inset 0 1px 0 rgba(56,189,248,0.06) !important; } html.dark #tl-stats .card-gold { background: rgba(10,22,52,0.72) !important; border: 1px solid rgba(56,189,248,0.14) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(56,189,248,0.08) !important; } /* ================================================================ LOADING SPINNER ================================================================ */ html.dark .db-spinner { border-color: rgba(56,189,248,0.15) !important; border-top-color: hsl(199 89% 58%) !important; } /* ================================================================ GRADIENT TEXT (sidebar org name) ================================================================ */ html.dark .text-gold-gradient { background: linear-gradient(135deg, #38BDF8 0%, #7DD3FC 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ================================================================ ROLE BADGE — violet becomes sky-blue in dark ================================================================ */ html.dark .bg-violet-500\/20, html.dark .bg-sky-500\/20 { background: rgba(56,189,248,0.16) !important; } html.dark .text-violet-600, html.dark .text-sky-600 { color: hsl(199 89% 65%) !important; } html.dark .bg-purple-500\/20 { background: rgba(167,139,250,0.18) !important; } html.dark .text-purple-500 { color: #c4b5fd !important; } html.dark .text-blue-500 { color: #93c5fd !important; } html.dark .text-green-500, html.dark .text-green-600 { color: #86efac !important; } html.dark .text-gray-400 { color: #94a3b8 !important; } /* ================================================================ CHART CANVAS — ensure dark bg shows through ================================================================ */ html.dark canvas { filter: brightness(1.08) saturate(1.10); } /* ================================================================ DIVIDERS & SEPARATORS ================================================================ */ html.dark .divide-border > * + * { border-color: rgba(56,189,248,0.10) !important; } html.dark .border-t, html.dark .border-b { border-color: rgba(56,189,248,0.10) !important; }