/* ================================================================ KUNDI DARK MODE · kundi-dark.css Loaded LAST (after kundi-modern.css) so .dark rules win the cascade. Activated by a `.dark` class on (see index.html bootstrap). Light mode is untouched — every rule here is .dark-scoped except the theme-agnostic toggle-button styles at the bottom. ================================================================ */ /* ── 1. RE-ASSERT THE DARK THEME TOKENS ────────────────────────── kundi-modern.css redeclares several tokens in :root with LIGHT values. :root and .dark share specificity, so this later .dark block beats it by source order. Values copied from the bundle CSS (.dark block in index-CasCs3N-.css). Shadows are left to kundi-modern.css so card depth is preserved. */ .dark { --button-outline: #ffffff1a; --badge-outline: #ffffff0d; --opaque-button-border-intensity: 9; --elevate-1: #ffffff0a; --elevate-2: #ffffff17; --background: 240 28% 10%; --foreground: 30 20% 98%; --border: 240 28% 20%; --card: 240 28% 14%; --card-foreground: 30 20% 98%; --card-border: 240 28% 20%; --sidebar: 240 28% 12%; --sidebar-foreground: 30 20% 98%; --sidebar-border: 240 28% 20%; --sidebar-primary: 16 100% 60%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 180 79% 24%; --sidebar-accent-foreground: 0 0% 100%; --sidebar-ring: 16 100% 60%; --popover: 240 28% 14%; --popover-foreground: 30 20% 98%; --popover-border: 240 28% 20%; --primary: 16 100% 60%; --primary-foreground: 0 0% 100%; --secondary: 180 79% 24%; --secondary-foreground: 0 0% 100%; --muted: 240 28% 20%; --muted-foreground: 240 10% 70%; --accent: 180 79% 24%; --accent-foreground: 0 0% 100%; --destructive: 0 84% 60%; --destructive-foreground: 0 0% 100%; --input: 240 28% 25%; --ring: 16 100% 60%; --chart-1: 16 100% 60%; --chart-2: 180 79% 40%; --chart-3: 45 93% 47%; --chart-4: 340 59% 50%; --chart-5: 200 80% 50%; } /* Native form controls / scrollbar gutters follow the theme */ .dark { color-scheme: dark; } /* ── 2. SCROLLBARS (kundi-modern hardcodes light thumbs) ────────── */ .dark ::-webkit-scrollbar-thumb { background: hsl(240 28% 30%) !important; } .dark ::-webkit-scrollbar-thumb:hover { background: hsl(240 28% 40%) !important; } /* ── 3. SIDEBAR ────────────────────────────────────────────────── kundi-modern forces a white sidebar + light divider. */ .dark .fixed.left-0.top-0.z-40 { background: hsl(var(--sidebar)) !important; border-right: 1px solid hsl(var(--sidebar-border)) !important; box-shadow: 2px 0 16px rgba(0,0,0,.45) !important; } /* ── 4. TOPBAR / PAGE HEADER (light hairline -> token) ──────────── */ .dark .border-b.bg-background\/95, .dark .border-b.bg-card.sticky, .dark .sticky.top-0.z-\[100\], .dark .border-b.sticky { box-shadow: 0 1px 0 hsl(var(--border)), 0 2px 8px rgba(0,0,0,.4) !important; } /* ── 5. CARDS (light border override) ───────────────────────────── */ .dark .rounded-xl.border, .dark .rounded-xl.border.bg-card, .dark .bg-card.border.rounded-xl, .dark .rounded-lg.border, .dark .bg-card.border.rounded-lg { border-color: hsl(var(--card-border)) !important; } /* ── 6. TABLES ──────────────────────────────────────────────────── */ .dark thead tr { background: hsl(var(--muted)) !important; border-bottom: 2px solid hsl(var(--border)) !important; } .dark tbody tr { border-bottom: 1px solid hsl(var(--border)) !important; } .dark tbody tr:nth-child(even) { background: hsl(240 28% 13%) !important; } .dark tbody tr:hover { background: hsl(var(--primary) / 0.12) !important; } .dark tbody td { border-bottom: 1px solid hsl(var(--border)) !important; } .dark tfoot tr { background: hsl(var(--muted)) !important; border-top: 2px solid hsl(var(--border)) !important; } /* ── 7. TABS (white active pill -> dark, with clear hierarchy) ───── */ .dark [role="tablist"] { background: hsl(240 28% 13%) !important; } .dark [role="tab"][data-state="active"], .dark [role="tab"].bg-background { background: hsl(240 28% 24%) !important; color: hsl(var(--foreground)) !important; box-shadow: 0 1px 3px rgba(0,0,0,.4) !important; } .dark [role="tab"]:hover:not([data-state="active"]) { background: hsl(240 28% 20%) !important; color: hsl(var(--foreground)) !important; } /* ── 8. STATUS BADGES (light pastels -> deep tints + light text) ── */ .dark [data-kstatus="active"] { background: hsl(142 45% 18%) !important; color: hsl(142 60% 75%) !important; border-color: hsl(142 40% 32%) !important; } .dark [data-kstatus="completed"] { background: hsl(210 55% 20%) !important; color: hsl(210 75% 78%) !important; border-color: hsl(210 50% 36%) !important; } .dark [data-kstatus="pending"] { background: hsl(40 60% 18%) !important; color: hsl(45 85% 72%) !important; border-color: hsl(40 55% 34%) !important; } .dark [data-kstatus="draft"] { background: hsl(240 16% 24%) !important; color: hsl(240 12% 78%) !important; border-color: hsl(240 14% 38%) !important; } .dark [data-kstatus="inactive"] { background: hsl(240 16% 24%) !important; color: hsl(240 12% 78%) !important; border-color: hsl(240 14% 38%) !important; } .dark [data-kstatus="cancelled"] { background: hsl(0 55% 22%) !important; color: hsl(0 80% 80%) !important; border-color: hsl(0 55% 38%) !important; } .dark [data-kstatus="ongoing"] { background: hsl(270 45% 24%) !important; color: hsl(270 70% 82%) !important; border-color: hsl(270 45% 40%) !important; } .dark [data-kstatus="planning"] { background: hsl(30 60% 20%) !important; color: hsl(30 85% 74%) !important; border-color: hsl(30 55% 36%) !important; } /* ── 9. DIALOGS / MENUS / POPOVERS / TOOLTIPS / TOASTS (borders) ── */ .dark .fixed.left-\[50\%\].top-\[50\%\].z-50, .dark [role="menu"], .dark [data-radix-select-content], .dark [data-radix-popper-content-wrapper] > div, .dark [role="alert"], .dark [data-sonner-toast] { border-color: hsl(var(--border)) !important; } /* ── 10. AVATARS (white ring -> card/border ring) ───────────────── */ .dark .rounded-full.h-9, .dark .rounded-full.h-8, .dark .rounded-full.h-10 { box-shadow: 0 0 0 2px hsl(var(--card)), 0 0 0 3px hsl(var(--border)) !important; } /* ── 11. EMPTY STATES (light dashed panel) ──────────────────────── */ .dark .text-center.py-16.border, .dark .text-center.py-8.border { border-color: hsl(var(--border)) !important; background: hsl(var(--card) / 0.4) !important; } /* ── 12. PHASE / PROJECT ROWS (white hover) ─────────────────────── */ .dark .group.flex.items-center.justify-between.border.rounded-lg { border-color: hsl(var(--border)) !important; } .dark .group.flex.items-center.justify-between.border.rounded-lg:hover { border-color: hsl(var(--primary) / 0.4) !important; background: hsl(var(--card)) !important; box-shadow: 0 2px 12px rgba(0,0,0,.4) !important; } /* ── 13. SKELETON SHIMMER ───────────────────────────────────────── */ .dark .animate-pulse > div, .dark [class*="skeleton"] { background: linear-gradient(90deg, hsl(240 28% 16%) 0%, hsl(240 28% 24%) 50%, hsl(240 28% 16%) 100%) !important; background-size: 200% 100% !important; } /* ── 14. CHART GRID LINES ───────────────────────────────────────── */ .dark .recharts-cartesian-grid-horizontal line, .dark .recharts-cartesian-grid-vertical line { stroke: hsl(var(--border)) !important; } /* ── 15. PLACEHOLDERS ───────────────────────────────────────────── */ .dark ::placeholder { color: hsl(var(--muted-foreground)) !important; } /* ── 16. LOGIN PAGE (light gradient -> dark gradient) ───────────── */ .dark .min-h-screen.flex.items-center.justify-center.bg-background { background: linear-gradient(135deg, hsl(240 28% 10%) 0%, hsl(240 28% 13%) 50%, hsl(var(--primary) / 0.06) 100%) !important; } .dark .min-h-screen.flex.items-center.justify-center.bg-background .rounded-xl.border, .dark .min-h-screen.flex.items-center.justify-center.bg-background .rounded-lg.border { border-color: hsl(var(--card-border)) !important; box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3) !important; } /* ================================================================ 17. INLINE OVERLAY COMPONENTS (defined in index.html