/* ============================================================ DFP-NEO Theme System CSS custom properties for Dark (default) and Light modes Applied via [data-theme="dark"] / [data-theme="light"] on ============================================================ */ /* ── Dark theme (default) ─────────────────────────────────── */ :root, [data-theme="dark"] { /* Backgrounds */ --bg-app: #111827; /* gray-900 */ --bg-primary: #1f2937; /* gray-800 */ --bg-secondary: #374151; /* gray-700 */ --bg-tertiary: #4b5563; /* gray-600 */ --bg-hover: #374151; /* gray-700 */ --bg-active: #1e3a5f; /* blue tint */ --bg-card: #1f2937; --bg-input: #374151; --bg-overlay: rgba(0,0,0,0.5); --bg-sidebar: #111827; /* Borders */ --border-primary: #374151; /* gray-700 */ --border-secondary:#4b5563; /* gray-600 */ --border-light: rgba(55,65,81,0.5); /* Text */ --text-primary: #f9fafb; /* gray-50 */ --text-secondary: #d1d5db; /* gray-300 */ --text-muted: #9ca3af; /* gray-400 */ --text-faint: #6b7280; /* gray-500 */ --text-inverse: #111827; --text-on-dark: #f9fafb; /* Accent - Sky/Blue */ --accent-primary: #0ea5e9; /* sky-500 */ --accent-hover: #0284c7; /* sky-600 */ --accent-muted: rgba(14,165,233,0.2); --accent-border: rgba(14,165,233,0.4); /* Status */ --success: #10b981; --success-bg: rgba(16,185,129,0.15); --warning: #f59e0b; --warning-bg: rgba(245,158,11,0.15); --danger: #ef4444; --danger-bg: rgba(239,68,68,0.15); --info: #6366f1; /* Schedule grid */ --grid-bg: #111827; --grid-row-alt: rgba(255,255,255,0.02); --grid-row-hover: rgba(255,255,255,0.05); --grid-line: rgba(55,65,81,0.5); --grid-line-half: rgba(55,65,81,0.25); /* Flight tiles - kept vivid for readability */ --tile-text: #f9fafb; --tile-shadow: rgba(0,0,0,0.5); /* Scrollbar */ --scrollbar-track: #1f2937; --scrollbar-thumb: #374151; --scrollbar-hover: #4b5563; /* Sidebar button */ --btn-alum-bg: linear-gradient(145deg, #374151, #1f2937); --btn-alum-border: #4b5563; --btn-alum-text: #e5e7eb; --btn-alum-active: linear-gradient(145deg, #1e3a5f, #1e40af); --btn-alum-active-border: #3b82f6; } /* ── Light theme ──────────────────────────────────────────── */ [data-theme="light"] { /* Backgrounds */ --bg-app: #eef4f8; /* cool daylight shell */ --bg-primary: #ffffff; --bg-secondary: #f8fafc; --bg-tertiary: #e1e9f2; --bg-quaternary: #cbd8e6; --bg-hover: #e8f1f8; --bg-active: #d8ecfb; --bg-card: #ffffff; --bg-input: #f8fafc; --bg-overlay: rgba(0,0,0,0.3); --bg-sidebar: #142235; /* Keep global chrome dark for contrast */ /* Borders */ --border-primary: #c5d3e1; --border-secondary:#dce6ef; --border-light: rgba(197,211,225,0.75); /* Text */ --text-primary: #102033; --text-secondary: #26384d; --text-muted: #4a5d73; --text-faint: #6c7f95; --text-inverse: #f9fafb; --text-on-dark: #f9fafb; /* Accent - Sky/Blue */ --accent-primary: #0369a1; --accent-hover: #075985; --accent-muted: rgba(3,105,161,0.13); --accent-border: rgba(3,105,161,0.35); /* Status */ --success: #059669; --success-bg: rgba(5,150,105,0.1); --warning: #d97706; --warning-bg: rgba(217,119,6,0.1); --danger: #dc2626; --danger-bg: rgba(220,38,38,0.1); --info: #4f46e5; /* Schedule grid */ --grid-bg: #f7fafc; --grid-row-alt: rgba(0,0,0,0.02); --grid-row-hover: rgba(0,0,0,0.04); --grid-line: rgba(203,213,225,0.7); --grid-line-half: rgba(203,213,225,0.4); /* Flight tiles */ --tile-text: #f9fafb; --tile-shadow: rgba(0,0,0,0.2); /* Scrollbar */ --scrollbar-track: #dfe8f1; --scrollbar-thumb: #94a3b8; --scrollbar-hover: #64748b; /* Sidebar button - keep dark for sidebar */ --btn-alum-bg: linear-gradient(145deg, #374151, #1f2937); --btn-alum-border: #4b5563; --btn-alum-text: #e5e7eb; --btn-alum-active: linear-gradient(145deg, #1e3a5f, #1e40af); --btn-alum-active-border: #3b82f6; } /* ============================================================ Global resets using CSS variables ============================================================ */ /* App root */ html[data-theme="light"], html[data-theme="light"] body { background: var(--bg-app) !important; color: var(--text-primary) !important; } #app-content { background-color: var(--bg-app) !important; color: var(--text-primary) !important; } /* ── Light mode overrides for Tailwind hardcoded classes ───── These selectors override the most common gray-800/900 backgrounds used throughout the app when light theme is active. */ [data-theme="light"] .bg-gray-950, [data-theme="light"] .bg-gray-950\/70, [data-theme="light"] .bg-gray-950\/60, [data-theme="light"] .bg-gray-950\/50, [data-theme="light"] .bg-gray-950\/40, [data-theme="light"] .bg-gray-950\/30 { background-color: #e7eef6 !important; } [data-theme="light"] .bg-gray-900, [data-theme="light"] .bg-gray-900\/90, [data-theme="light"] .bg-gray-900\/80, [data-theme="light"] .bg-gray-900\/70, [data-theme="light"] .bg-gray-900\/60, [data-theme="light"] .bg-gray-900\/50, [data-theme="light"] .bg-gray-900\/45, [data-theme="light"] .bg-gray-900\/40, [data-theme="light"] .bg-gray-900\/35, [data-theme="light"] .bg-gray-900\/30, [data-theme="light"] .bg-gray-900\/20 { background-color: var(--bg-app) !important; } [data-theme="light"] .bg-gray-800, [data-theme="light"] .bg-gray-800\/90, [data-theme="light"] .bg-gray-800\/80, [data-theme="light"] .bg-gray-800\/70, [data-theme="light"] .bg-gray-800\/65, [data-theme="light"] .bg-gray-800\/60, [data-theme="light"] .bg-gray-800\/50, [data-theme="light"] .bg-gray-800\/40, [data-theme="light"] .bg-gray-800\/30 { background-color: var(--bg-primary) !important; } [data-theme="light"] .bg-gray-700, [data-theme="light"] .bg-gray-700\/90, [data-theme="light"] .bg-gray-700\/80, [data-theme="light"] .bg-gray-700\/70, [data-theme="light"] .bg-gray-700\/60, [data-theme="light"] .bg-gray-700\/50, [data-theme="light"] .bg-gray-700\/40, [data-theme="light"] .bg-gray-700\/30 { background-color: var(--bg-tertiary) !important; } [data-theme="light"] .bg-gray-750 { background-color: #f1f5f9 !important; } [data-theme="light"] .bg-gray-600 { background-color: var(--bg-quaternary) !important; } [data-theme="light"] .bg-gray-500 { background-color: #94a3b8 !important; } /* Text colors - All dark greys for light mode readability */ [data-theme="light"] .text-white { color: var(--text-primary) !important; } [data-theme="light"] .text-gray-100 { color: #0f172a !important; /* slate-900 - near black */ } [data-theme="light"] .text-gray-200 { color: #1e293b !important; /* slate-800 - dark grey */ } [data-theme="light"] .text-gray-300 { color: #334155 !important; /* slate-700 - medium-dark grey */ } [data-theme="light"] .text-gray-400 { color: #475569 !important; /* slate-600 - medium grey */ } [data-theme="light"] .text-gray-500 { color: #64748b !important; /* slate-500 - medium grey */ } [data-theme="light"] .text-gray-600 { color: #475569 !important; /* slate-600 - medium grey */ } [data-theme="light"] .text-gray-700, [data-theme="light"] .text-gray-800, [data-theme="light"] .text-gray-900 { color: var(--text-primary) !important; } /* Borders */ [data-theme="light"] .border-gray-700 { border-color: var(--border-primary) !important; } [data-theme="light"] .border-gray-600 { border-color: var(--border-secondary) !important; } [data-theme="light"] .border-gray-800 { border-color: #e2e8f0 !important; } [data-theme="light"] .border-gray-900, [data-theme="light"] .border-gray-500 { border-color: var(--border-primary) !important; } /* Hover states */ [data-theme="light"] .hover\:bg-gray-700:hover { background-color: var(--bg-tertiary) !important; } [data-theme="light"] .hover\:bg-gray-800:hover { background-color: #f1f5f9 !important; } [data-theme="light"] .hover\:bg-gray-600:hover { background-color: #cbd5e1 !important; } [data-theme="light"] .hover\:border-gray-500:hover, [data-theme="light"] .hover\:border-gray-600:hover, [data-theme="light"] .hover\:border-gray-700:hover { border-color: #93a9bf !important; } [data-theme="light"] .hover\:text-white:hover { color: var(--text-primary) !important; } /* Dividers */ [data-theme="light"] .divide-gray-700 > * + * { border-color: var(--border-primary) !important; } [data-theme="light"] .divide-gray-800 > * + * { border-color: var(--border-secondary) !important; } /* Input fields */ [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background-color: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-primary) !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: var(--text-faint) !important; } [data-theme="light"] select option { background-color: var(--bg-primary) !important; color: var(--text-primary) !important; } /* Buttons and app chrome */ [data-theme="light"] .btn-aluminium-brushed { color: #111827 !important; border-color: #8f8f8f !important; background: #D3D3D3 !important; background-image: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 1px 2px rgba(15,23,42,0.16) !important; } [data-theme="light"] .btn-aluminium-brushed:hover { background: #c7c7c7 !important; background-image: none !important; } [data-theme="light"] .btn-aluminium-brushed.active, [data-theme="light"] .btn-aluminium-brushed:active { color: #111827 !important; background: #A9A9A9 !important; background-image: none !important; border-color: #6f6f6f !important; } /* Overlays should remain dark enough to separate modals */ [data-theme="light"] .bg-black\/70 { background-color: rgba(15,23,42,0.45) !important; } [data-theme="light"] .bg-black\/60, [data-theme="light"] .bg-black\/50 { background-color: rgba(15,23,42,0.35) !important; } /* Sidebar stays dark in light mode for visual anchor */ [data-theme="light"] aside, [data-theme="light"] [data-theme-stay-dark] { background-color: #1e293b !important; border-color: #334155 !important; } [data-theme="light"] aside .bg-gray-950\/35, [data-theme="light"] aside .bg-gray-900\/50, [data-theme="light"] aside .bg-gray-900\/45 { background-color: rgba(15,23,42,0.44) !important; } [data-theme="light"] aside .border-gray-700, [data-theme="light"] aside .border-gray-800 { border-color: #334155 !important; } [data-theme="light"] aside .text-gray-400, [data-theme="light"] aside .text-gray-300, [data-theme="light"] aside .text-gray-200, [data-theme="light"] aside .text-white { color: #e2e8f0 !important; } [data-theme="light"] aside .text-gray-500, [data-theme="light"] aside .text-gray-600 { color: #94a3b8 !important; } [data-theme="light"] aside input { background-color: rgba(15,23,42,0.72) !important; border-color: #42546a !important; color: #f8fafc !important; } [data-theme="light"] aside [data-sidebar-user-footer="true"] span { color: #374151 !important; } /* Scrollbars */ [data-theme="light"] ::-webkit-scrollbar-track { background: var(--scrollbar-track) !important; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb) !important; border-radius: 4px; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover) !important; } /* Schedule grid in light mode */ [data-theme="light"] .bg-gray-900.flex-1, [data-theme="light"] div[class*="bg-gray-900"]:not(aside) { background-color: var(--bg-app) !important; } /* Schedule / DFP grid */ [data-theme="light"] [class*="border-gray-800"], [data-theme="light"] [class*="border-gray-700"] { border-color: var(--border-primary); } [data-theme="light"] .sticky.left-0, [data-theme="light"] .sticky.top-0 { color: var(--text-secondary) !important; } [data-theme="light"] [data-is-flight-tile="true"], [data-theme="light"] [style*="--tile-bg"] { color: var(--tile-text) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.45); } [data-theme="light"] [data-is-flight-tile="true"] .text-white, [data-theme="light"] [style*="--tile-bg"] .text-white, [data-theme="light"] [data-is-flight-tile="true"] .text-gray-200, [data-theme="light"] [style*="--tile-bg"] .text-gray-200 { color: #ffffff !important; } /* Table rows */ [data-theme="light"] tr:hover td { background-color: var(--bg-hover) !important; } [data-theme="light"] .odd\:bg-gray-800\/30:nth-child(odd) { background-color: rgba(241,245,249,0.6) !important; } [data-theme="light"] .even\:bg-gray-900\/20:nth-child(even) { background-color: rgba(248,250,252,0.6) !important; } /* Gradient backgrounds for cards */ [data-theme="light"] .from-sky-500\/20 { --tw-gradient-from: rgba(14,165,233,0.12) !important; } [data-theme="light"] .to-sky-600\/10 { --tw-gradient-to: rgba(14,165,233,0.04) !important; } [data-theme="light"] .from-amber-500\/20 { --tw-gradient-from: rgba(245,158,11,0.12) !important; } [data-theme="light"] .to-amber-600\/10 { --tw-gradient-to: rgba(245,158,11,0.04) !important; } [data-theme="light"] .from-violet-500\/20 { --tw-gradient-from: rgba(139,92,246,0.12) !important; } [data-theme="light"] .to-violet-600\/10 { --tw-gradient-to: rgba(139,92,246,0.04) !important; } [data-theme="light"] .from-emerald-500\/20 { --tw-gradient-from: rgba(16,185,129,0.12) !important; } [data-theme="light"] .to-emerald-600\/10 { --tw-gradient-to: rgba(16,185,129,0.04) !important; } [data-theme="light"] .from-rose-500\/20 { --tw-gradient-from: rgba(244,63,94,0.12) !important; } [data-theme="light"] .from-cyan-500\/20 { --tw-gradient-from: rgba(6,182,212,0.12) !important; } [data-theme="light"] .to-cyan-600\/10 { --tw-gradient-to: rgba(6,182,212,0.04) !important; } /* Personnel column in schedule */ [data-theme="light"] .sticky.left-0.z-30 { background-color: var(--bg-primary) !important; border-color: var(--border-primary) !important; } /* Time header in schedule */ [data-theme="light"] .sticky.top-0.z-20 { background-color: var(--bg-primary) !important; border-color: var(--border-primary) !important; } /* Top-left corner cell in schedule */ [data-theme="light"] .sticky.top-0.left-0.z-40 { background-color: var(--bg-primary) !important; border-color: var(--border-primary) !important; } /* DFP schedule: light mode needs deliberate operational contrast, not a pale paper grid. */ [data-theme="light"] [data-schedule-surface="true"] { background: #d8e3ee !important; } [data-theme="light"] [data-schedule-grid="true"] { background: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0.10)), #dfe8f1 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8); } [data-theme="light"] [data-schedule-time-header="true"], [data-theme="light"] [data-schedule-corner="true"] { background: #1b2a3f !important; border-color: rgba(70,91,116,0.9) !important; color: #eef6ff !important; box-shadow: 0 1px 0 rgba(15,23,42,0.18); } [data-theme="light"] [data-schedule-time-header="true"] { background: linear-gradient(180deg, #263951, #1b2a3f) !important; } [data-theme="light"] [data-schedule-resource-column="true"] { background: #e5edf5 !important; border-color: #9fb0c4 !important; color: #172033 !important; box-shadow: 1px 0 0 rgba(15,23,42,0.08); } [data-theme="light"] [data-schedule-corner="true"] .bg-gray-700 { background-color: #263951 !important; color: #eef6ff !important; } [data-theme="light"] [data-schedule-corner="true"] .text-gray-300, [data-theme="light"] [data-schedule-corner="true"] .text-gray-400 { color: #d8e6f6 !important; } [data-theme="light"] [data-schedule-corner="true"] .hover\:bg-gray-600:hover { background-color: #314761 !important; } [data-theme="light"] [data-schedule-resource-column="true"] .bg-gray-800 { background: transparent !important; } [data-theme="light"] [data-schedule-resource-column="true"] .text-gray-400, [data-theme="light"] [data-schedule-resource-column="true"] .text-gray-300, [data-theme="light"] [data-schedule-resource-column="true"] .text-indigo-300, [data-theme="light"] [data-schedule-resource-column="true"] .text-cyan-300, [data-theme="light"] [data-schedule-resource-column="true"] .text-purple-300 { color: #182235 !important; } [data-theme="light"] [data-schedule-resource-column="true"] .text-amber-300 { color: #6f3d00 !important; } [data-theme="light"] [data-schedule-resource-column="true"] .text-green-300 { color: #0f6b3c !important; } [data-theme="light"] [data-schedule-resource-column="true"] .border-b-gray-700\/50 { border-bottom-color: rgba(96,113,133,0.34) !important; } [data-theme="light"] [data-schedule-resource-column="true"] .border-t-gray-500 { border-top-color: rgba(54,70,91,0.56) !important; } [data-theme="light"] [data-schedule-resource-column="true"] .hover\:bg-gray-700:hover { background-color: rgba(138,157,181,0.24) !important; } [data-theme="light"] [data-schedule-time-label="true"] { color: #d8e6f6 !important; font-weight: 700; text-shadow: 0 1px 1px rgba(0,0,0,0.28); } [data-theme="light"] [data-schedule-daylight-label="true"] { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.48); } [data-theme="light"] [data-schedule-hour-line="true"] > div { background-color: #E6E6E6 !important; width: 1px; } [data-theme="light"] [data-schedule-half-hour-line="true"] > div { background-color: #E6E6E6 !important; } [data-theme="light"] [data-schedule-row-line="true"] { background-color: #E6E6E6 !important; } [data-theme="light"] [data-schedule-date-selector="true"] { background: #e1e9f2 !important; border: 1px solid #c5d3e1 !important; animation: none !important; box-shadow: none !important; } [data-theme="light"] [data-schedule-corner="true"] [data-schedule-date-selector="true"], [data-theme="light"] [data-schedule-date-selector="true"]:hover, [data-theme="light"] [data-schedule-date-selector="true"]:active, [data-theme="light"] [data-schedule-date-selector="true"]:focus, [data-theme="light"] [data-schedule-date-selector="true"].neo-build-date-indicator, [data-theme="light"] [data-schedule-corner="true"] [data-schedule-date-selector="true"]:hover, [data-theme="light"] [data-schedule-corner="true"] [data-schedule-date-selector="true"]:active, [data-theme="light"] [data-schedule-corner="true"] [data-schedule-date-selector="true"]:focus, [data-theme="light"] [data-schedule-corner="true"] [data-schedule-date-selector="true"].neo-build-date-indicator { background: #e1e9f2 !important; border-color: #c5d3e1 !important; box-shadow: none !important; } [data-theme="light"] [data-schedule-corner="true"] [data-schedule-date-text="true"], [data-theme="light"] [data-schedule-corner="true"] [data-schedule-date-arrow="true"], [data-theme="light"] [data-schedule-date-text="true"], [data-theme="light"] [data-schedule-date-arrow="true"] { color: #000000 !important; opacity: 1 !important; text-shadow: none !important; } [data-theme="light"] [data-schedule-corner="true"] [data-schedule-date-arrow="true"]:hover, [data-theme="light"] [data-schedule-corner="true"] [data-schedule-date-arrow="true"]:active, [data-theme="light"] [data-schedule-corner="true"] [data-schedule-date-arrow="true"]:focus, [data-theme="light"] [data-schedule-date-arrow="true"]:hover, [data-theme="light"] [data-schedule-date-arrow="true"]:active, [data-theme="light"] [data-schedule-date-arrow="true"]:focus { color: #000000 !important; } [data-theme="light"] [data-schedule-separator="true"] { border-color: rgba(49,68,90,0.66) !important; } [data-theme="light"] [data-schedule-daylight-line="true"] { border-color: rgba(14,116,144,0.62) !important; } [data-theme="light"] [data-schedule-night-shade="true"] { background: rgba(40,59,82,0.12) !important; } [data-theme="light"] [data-schedule-current-time="true"] > div:first-child { background-color: #db2777 !important; box-shadow: 0 0 0 1px rgba(255,255,255,0.9), 0 0 8px rgba(219,39,119,0.55); } [data-theme="light"] [data-is-flight-tile="true"][style*="--tile-light-bg"] { background-color: var(--tile-light-bg) !important; border: 1px solid rgba(15,23,42,0.34) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(15,23,42,0.2), 0 2px 6px rgba(15,23,42,0.22) !important; filter: saturate(1.14) contrast(1.12); } [data-theme="light"] [data-is-flight-tile="true"] { text-shadow: 0 1px 2px rgba(15,23,42,0.78), 0 0 1px rgba(15,23,42,0.95) !important; } [data-theme="light"] [data-is-flight-tile="true"] .text-white, [data-theme="light"] [data-is-flight-tile="true"] .text-white\/80, [data-theme="light"] [data-is-flight-tile="true"] .text-white\/60, [data-theme="light"] [data-is-flight-tile="true"] .text-gray-200 { color: #ffffff !important; } [data-theme="light"] [data-is-flight-tile="true"] .text-yellow-100, [data-theme="light"] [data-is-flight-tile="true"] .text-yellow-300 { color: #fff2a3 !important; } /* Light-mode course colours should match the darker DFP tile treatment. */ [data-theme="light"] [data-course-color="true"].bg-sky-400, [data-theme="light"] [data-course-color="true"] .bg-sky-400 { background-color: rgb(35,117,154) !important; } [data-theme="light"] [data-course-color="true"].bg-sky-500, [data-theme="light"] [data-course-color="true"] .bg-sky-500 { background-color: rgb(9,102,144) !important; } [data-theme="light"] [data-course-color="true"].bg-purple-400, [data-theme="light"] [data-course-color="true"] .bg-purple-400 { background-color: rgb(119,82,156) !important; } [data-theme="light"] [data-course-color="true"].bg-purple-500, [data-theme="light"] [data-course-color="true"] .bg-purple-500 { background-color: rgb(104,53,153) !important; } [data-theme="light"] [data-course-color="true"].bg-yellow-400, [data-theme="light"] [data-course-color="true"] .bg-yellow-400 { background-color: rgb(155,126,13) !important; } [data-theme="light"] [data-course-color="true"].bg-yellow-500, [data-theme="light"] [data-course-color="true"] .bg-yellow-500 { background-color: rgb(145,111,5) !important; } [data-theme="light"] [data-course-color="true"].bg-amber-400, [data-theme="light"] [data-course-color="true"] .bg-amber-400 { background-color: rgb(156,119,22) !important; } [data-theme="light"] [data-course-color="true"].bg-amber-500, [data-theme="light"] [data-course-color="true"] .bg-amber-500 { background-color: rgb(152,98,7) !important; } [data-theme="light"] [data-course-color="true"].bg-cyan-400, [data-theme="light"] [data-course-color="true"] .bg-cyan-400 { background-color: rgb(21,131,148) !important; } [data-theme="light"] [data-course-color="true"].bg-cyan-500, [data-theme="light"] [data-course-color="true"] .bg-cyan-500 { background-color: rgb(4,113,131) !important; } [data-theme="light"] [data-course-color="true"].bg-blue-400, [data-theme="light"] [data-course-color="true"] .bg-blue-400 { background-color: rgb(60,102,155) !important; } [data-theme="light"] [data-course-color="true"].bg-blue-500, [data-theme="light"] [data-course-color="true"] .bg-blue-500 { background-color: rgb(37,81,153) !important; } [data-theme="light"] [data-course-color="true"].bg-teal-400, [data-theme="light"] [data-course-color="true"] .bg-teal-400 { background-color: rgb(28,131,118) !important; } [data-theme="light"] [data-course-color="true"].bg-teal-500, [data-theme="light"] [data-course-color="true"] .bg-teal-500 { background-color: rgb(12,114,103) !important; } [data-theme="light"] [data-course-color="true"].bg-green-400, [data-theme="light"] [data-course-color="true"] .bg-green-400 { background-color: rgb(46,138,79) !important; } [data-theme="light"] [data-course-color="true"].bg-green-500, [data-theme="light"] [data-course-color="true"] .bg-green-500 { background-color: rgb(21,122,58) !important; } [data-theme="light"] [data-course-color="true"].bg-pink-400, [data-theme="light"] [data-course-color="true"] .bg-pink-400 { background-color: rgb(151,71,113) !important; } [data-theme="light"] [data-course-color="true"].bg-pink-500, [data-theme="light"] [data-course-color="true"] .bg-pink-500 { background-color: rgb(146,45,95) !important; } [data-theme="light"] [data-course-color="true"].bg-rose-400, [data-theme="light"] [data-course-color="true"] .bg-rose-400 { background-color: rgb(156,70,82) !important; } [data-theme="light"] [data-course-color="true"].bg-rose-500, [data-theme="light"] [data-course-color="true"] .bg-rose-500 { background-color: rgb(151,39,58) !important; } [data-theme="light"] [data-course-color="true"].bg-gray-400, [data-theme="light"] [data-course-color="true"].bg-gray-500, [data-theme="light"] [data-course-color="true"] .bg-gray-400, [data-theme="light"] [data-course-color="true"] .bg-gray-500 { background-color: rgb(66,71,79) !important; } [data-theme="light"] [data-course-color="true"] { color: #ffffff !important; } [data-theme="light"] [data-course-color="true"] .text-white, [data-theme="light"] [data-course-color="true"] .text-white\/90, [data-theme="light"] [data-course-color="true"] .text-white\/80, [data-theme="light"] [data-course-color="true"] .text-white\/75, [data-theme="light"] [data-course-color="true"] .text-white\/70, [data-theme="light"] [data-course-color="true"] label, [data-theme="light"] [data-course-color="true"] span, [data-theme="light"] [data-course-color="true"] p, [data-theme="light"] [data-course-color="true"] h2, [data-theme="light"] [data-course-color="true"] h3 { color: #ffffff !important; } [data-theme="light"] [data-course-color="true"] input[data-course-date-input="true"] { background-color: transparent !important; color: #ffffff !important; border-color: transparent !important; box-shadow: none !important; color-scheme: dark; } [data-theme="light"] [data-course-color="true"] input[data-course-date-input="true"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.9; } [data-theme="light"] [data-course-color="true"][class*="bg-sky-400"], [data-theme="light"] [data-course-color="true"] [class*="bg-sky-400"] { background-color: rgb(35,117,154) !important; } [data-theme="light"] [data-course-color="true"][class*="bg-sky-500"], [data-theme="light"] [data-course-color="true"] [class*="bg-sky-500"] { background-color: rgb(9,102,144) !important; } [data-theme="light"] [data-course-color="true"][class*="bg-purple-400"], [data-theme="light"] [data-course-color="true"] [class*="bg-purple-400"] { background-color: rgb(119,82,156) !important; } [data-theme="light"] [data-course-color="true"][class*="bg-purple-500"], [data-theme="light"] [data-course-color="true"] [class*="bg-purple-500"] { background-color: rgb(104,53,153) !important; } [data-theme="light"] [data-course-color="true"][class*="bg-yellow-400"], [data-theme="light"] [data-course-color="true"] [class*="bg-yellow-400"] { background-color: rgb(155,126,13) !important; } [data-theme="light"] [data-course-color="true"][class*="bg-yellow-500"], [data-theme="light"] [data-course-color="true"] [class*="bg-yellow-500"] { background-color: rgb(145,111,5) !important; } [data-theme="light"] [data-course-color="true"][class*="bg-amber-400"], [data-theme="light"] [data-course-color="true"] [class*="bg-amber-400"] { background-color: rgb(156,119,22) !important; } [data-theme="light"] [data-course-color="true"][class*="bg-amber-500"], [data-theme="light"] [data-course-color="true"] [class*="bg-amber-500"] { background-color: rgb(152,98,7) !important; } [data-theme="light"] [data-course-color="true"][class*="bg-cyan-400"], [data-theme="light"] [data-course-color="true"] [class*="bg-cyan-400"] { background-color: rgb(21,131,148) !important; } [data-theme="light"] [data-course-color="true"][class*="bg-cyan-500"], [data-theme="light"] [data-course-color="true"] [class*="bg-cyan-500"] { background-color: rgb(4,113,131) !important; } [data-theme="light"] [data-course-color="true"][class*="bg-blue-400"], [data-theme="light"] [data-course-color="true"] [class*="bg-blue-400"] { background-color: rgb(60,102,155) !important; } [data-theme="light"] [data-course-color="true"][class*="bg-blue-500"], [data-theme="light"] [data-course-color="true"] [class*="bg-blue-500"] { background-color: rgb(37,81,153) !important; } [data-theme="light"] [data-course-color="true"][class*="bg-teal-400"], [data-theme="light"] [data-course-color="true"] [class*="bg-teal-400"] { background-color: rgb(28,131,118) !important; } [data-theme="light"] [data-course-color="true"][class*="bg-teal-500"], [data-theme="light"] [data-course-color="true"] [class*="bg-teal-500"] { background-color: rgb(12,114,103) !important; } [data-theme="light"] [data-course-color="true"][class*="bg-green-400"], [data-theme="light"] [data-course-color="true"] [class*="bg-green-400"] { background-color: rgb(46,138,79) !important; } [data-theme="light"] [data-course-color="true"][class*="bg-green-500"], [data-theme="light"] [data-course-color="true"] [class*="bg-green-500"] { background-color: rgb(21,122,58) !important; } [data-theme="light"] [data-course-color="true"][class*="bg-pink-400"], [data-theme="light"] [data-course-color="true"] [class*="bg-pink-400"] { background-color: rgb(151,71,113) !important; } [data-theme="light"] [data-course-color="true"][class*="bg-pink-500"], [data-theme="light"] [data-course-color="true"] [class*="bg-pink-500"] { background-color: rgb(146,45,95) !important; } [data-theme="light"] [data-course-color="true"][class*="bg-rose-400"], [data-theme="light"] [data-course-color="true"] [class*="bg-rose-400"] { background-color: rgb(156,70,82) !important; } [data-theme="light"] [data-course-color="true"][class*="bg-rose-500"], [data-theme="light"] [data-course-color="true"] [class*="bg-rose-500"] { background-color: rgb(151,39,58) !important; } [data-theme="light"] [data-course-progress-card="true"] .text-gray-300, [data-theme="light"] [data-course-progress-card="true"] .text-gray-400, [data-theme="light"] [data-course-progress-card="true"] .text-sky-300 { color: #172033 !important; } /* Sidebar course legend: light theme uses dark text for the course list. */ [data-theme="light"] [data-sidebar-course-legend="true"] .text-\[9px\].text-gray-300, [data-theme="light"] [data-sidebar-course-legend="true"] .text-\[10px\].text-gray-500 { color: #172033 !important; } /* Settings and Build Priorities: stronger dark text on light surfaces. */ [data-theme="light"] [data-settings-view="true"], [data-theme="light"] [data-priorities-view="true"], [data-theme="light"] .priorities-content { color: #172033 !important; } [data-theme="light"] [data-settings-view="true"] .text-white, [data-theme="light"] [data-settings-view="true"] .text-gray-100, [data-theme="light"] [data-settings-view="true"] .text-gray-200, [data-theme="light"] [data-settings-view="true"] .text-gray-300, [data-theme="light"] [data-settings-view="true"] .text-gray-400, [data-theme="light"] [data-settings-view="true"] .text-gray-500, [data-theme="light"] [data-settings-view="true"] label, [data-theme="light"] [data-settings-view="true"] p, [data-theme="light"] [data-settings-view="true"] span, [data-theme="light"] [data-settings-view="true"] h1, [data-theme="light"] [data-settings-view="true"] h2, [data-theme="light"] [data-settings-view="true"] h3, [data-theme="light"] [data-priorities-view="true"] .text-white, [data-theme="light"] [data-priorities-view="true"] .text-gray-100, [data-theme="light"] [data-priorities-view="true"] .text-gray-200, [data-theme="light"] [data-priorities-view="true"] .text-gray-300, [data-theme="light"] [data-priorities-view="true"] .text-gray-400, [data-theme="light"] [data-priorities-view="true"] .text-gray-500, [data-theme="light"] [data-priorities-view="true"] label, [data-theme="light"] [data-priorities-view="true"] p, [data-theme="light"] [data-priorities-view="true"] span, [data-theme="light"] [data-priorities-view="true"] h1, [data-theme="light"] [data-priorities-view="true"] h2, [data-theme="light"] [data-priorities-view="true"] h3, [data-theme="light"] .priorities-content .text-white, [data-theme="light"] .priorities-content .text-gray-100, [data-theme="light"] .priorities-content .text-gray-200, [data-theme="light"] .priorities-content .text-gray-300, [data-theme="light"] .priorities-content .text-gray-400, [data-theme="light"] .priorities-content label, [data-theme="light"] .priorities-content p, [data-theme="light"] .priorities-content span, [data-theme="light"] .priorities-content h1, [data-theme="light"] .priorities-content h2, [data-theme="light"] .priorities-content h3 { color: #172033 !important; } [data-theme="light"] [data-settings-view="true"] aside, [data-theme="light"] [data-settings-view="true"] .bg-gray-950\/35, [data-theme="light"] [data-priorities-view="true"] > .bg-gray-800 { background-color: #f0f4f8 !important; } [data-theme="light"] [data-settings-view="true"] .bg-gray-900, [data-theme="light"] [data-settings-view="true"] .bg-gray-900\/70, [data-theme="light"] [data-settings-view="true"] .bg-gray-900\/50, [data-theme="light"] [data-settings-view="true"] .bg-gray-900\/45, [data-theme="light"] [data-settings-view="true"] .bg-gray-800, [data-theme="light"] [data-settings-view="true"] .bg-gray-800\/70, [data-theme="light"] [data-priorities-view="true"] .bg-gray-900, [data-theme="light"] [data-priorities-view="true"] .bg-gray-800, [data-theme="light"] [data-priorities-view="true"] .bg-gray-700 { background-color: #ffffff !important; } [data-theme="light"] .priorities-content .bg-gray-800, [data-theme="light"] .priorities-content .bg-gray-900, [data-theme="light"] .priorities-content .bg-gray-700 { background-color: #ffffff !important; } [data-theme="light"] .priorities-content .border-gray-700, [data-theme="light"] .priorities-content .border-gray-800 { border-color: #c1cfdd !important; } [data-theme="light"] [data-priority-help="true"], [data-theme="light"] [data-priority-help="true"] p, [data-theme="light"] [data-priority-help="true"] ul, [data-theme="light"] [data-priority-help="true"] li { color: #111827 !important; } [data-theme="light"] [data-priority-help="true"] { background-color: #eef3f8 !important; border-color: #b8c6d5 !important; } [data-theme="light"] [data-progress-graph-header="true"], [data-theme="light"] [data-progress-graph-header="true"] h1, [data-theme="light"] [data-progress-graph-header="true"] label, [data-theme="light"] [data-progress-graph-header="true"] .text-white, [data-theme="light"] [data-progress-graph-header="true"] .text-gray-300 { color: #111827 !important; } [data-theme="light"] [data-progress-graph-course-meta="true"], [data-theme="light"] [data-progress-graph-course-meta="true"] span { color: #111827 !important; text-shadow: none !important; } /* Light-theme button system: inactive grey, active selected darker grey. */ [data-theme="light"] button.bg-gray-700, [data-theme="light"] button.bg-gray-600, [data-theme="light"] button.bg-gray-800 { background: #D3D3D3 !important; background-image: none !important; border-color: #8f8f8f !important; color: #111827 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(15,23,42,0.12) !important; } [data-theme="light"] [data-settings-view="true"] button, [data-theme="light"] [data-priorities-view="true"] button { background: #D3D3D3 !important; background-image: none !important; border-color: #8f8f8f !important; color: #111827 !important; } [data-theme="light"] [data-settings-view="true"] button:hover, [data-theme="light"] [data-priorities-view="true"] button:hover { background: #c7c7c7 !important; background-image: none !important; } [data-theme="light"] [data-settings-view="true"] button.active, [data-theme="light"] [data-priorities-view="true"] button.active, [data-theme="light"] [data-settings-view="true"] button[aria-selected="true"], [data-theme="light"] [data-priorities-view="true"] button[aria-selected="true"] { background: #A9A9A9 !important; background-image: none !important; border-color: #6f6f6f !important; color: #111827 !important; } [data-theme="light"] button.bg-gray-700:hover, [data-theme="light"] button.bg-gray-600:hover, [data-theme="light"] button[class*="hover:bg-gray-600"]:hover { background: #c7c7c7 !important; background-image: none !important; color: #0f172a !important; } [data-theme="light"] button.bg-sky-600, [data-theme="light"] button.bg-sky-500, [data-theme="light"] button.bg-blue-600, [data-theme="light"] button.bg-blue-500, [data-theme="light"] button[class*="bg-sky-600"], [data-theme="light"] button[class*="bg-blue-600"] { background: #A9A9A9 !important; background-image: none !important; border-color: #6f6f6f !important; color: #111827 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 1px 3px rgba(15,23,42,0.2) !important; } [data-theme="light"] button.bg-green-600, [data-theme="light"] button.bg-green-500, [data-theme="light"] button[class*="bg-green-600"] { background: #D3D3D3 !important; background-image: none !important; border-color: #8f8f8f !important; color: #111827 !important; } [data-theme="light"] button.active, [data-theme="light"] button[aria-pressed="true"], [data-theme="light"] button[aria-selected="true"], [data-theme="light"] button[class*="bg-sky-600"].active { background: #A9A9A9 !important; background-image: none !important; border-color: #6f6f6f !important; color: #111827 !important; } /* Night shade overlay - lighter in light mode */ [data-theme="light"] .bg-white\/5 { background-color: rgba(15,23,42,0.06) !important; } /* Top navigation / header bars */ [data-theme="light"] .border-b.border-gray-700 { border-color: var(--border-primary) !important; } /* Badges and pills */ [data-theme="light"] .bg-gray-700.rounded, [data-theme="light"] .bg-gray-700.rounded-full, [data-theme="light"] .bg-gray-700.rounded-md { background-color: var(--bg-tertiary) !important; color: var(--text-secondary) !important; } /* Common translucent accent panels */ [data-theme="light"] .bg-sky-500\/10, [data-theme="light"] .bg-sky-900\/20, [data-theme="light"] .bg-sky-900\/30 { background-color: rgba(3,105,161,0.11) !important; } [data-theme="light"] .bg-cyan-500\/10, [data-theme="light"] .bg-cyan-500\/20 { background-color: rgba(8,145,178,0.11) !important; } [data-theme="light"] .bg-amber-500\/10, [data-theme="light"] .bg-amber-900\/20 { background-color: rgba(217,119,6,0.12) !important; } [data-theme="light"] .bg-emerald-500\/10, [data-theme="light"] .bg-green-900\/30 { background-color: rgba(5,150,105,0.11) !important; } [data-theme="light"] .bg-red-500\/10, [data-theme="light"] .bg-red-900\/30, [data-theme="light"] .bg-red-900\/50 { background-color: rgba(220,38,38,0.10) !important; } /* Active tab indicators */ [data-theme="light"] .border-sky-400 { border-color: var(--accent-primary) !important; } [data-theme="light"] .text-sky-400 { color: var(--accent-primary) !important; } [data-theme="light"] .text-sky-300, [data-theme="light"] .text-sky-200 { color: #075985 !important; } [data-theme="light"] .text-cyan-300, [data-theme="light"] .text-cyan-200, [data-theme="light"] .text-cyan-100\/70 { color: #0e7490 !important; } [data-theme="light"] .text-amber-300, [data-theme="light"] .text-amber-200, [data-theme="light"] .text-amber-100\/70 { color: #92400e !important; } [data-theme="light"] .text-emerald-300, [data-theme="light"] .text-green-400 { color: #047857 !important; } [data-theme="light"] .text-red-300, [data-theme="light"] .text-red-400 { color: #b91c1c !important; } /* Toggle switches in light mode */ [data-theme="light"] .bg-gray-600 { background-color: #94a3b8 !important; } /* Warning/read-only banners */ [data-theme="light"] .bg-yellow-900\/30 { background-color: rgba(254,243,199,0.8) !important; } [data-theme="light"] .border-yellow-600\/40 { border-color: rgba(202,138,4,0.5) !important; } [data-theme="light"] .text-yellow-300 { color: #92400e !important; } /* Focus rings */ [data-theme="light"] *:focus { outline-color: var(--accent-primary); } /* Opacity utilities in light mode */ [data-theme="light"] .text-gray-400\/60 { color: rgba(71,85,105,0.7) !important; /* slate-600 at 70% opacity */ } /* Additional text color overrides for light mode */ [data-theme="light"] .text-slate-400 { color: #475569 !important; /* slate-600 */ } [data-theme="light"] .text-slate-500 { color: #64748b !important; /* slate-500 */ } [data-theme="light"] .text-slate-300 { color: #334155 !important; /* slate-700 */ } /* Ensure text in cards/tiles is dark */ [data-theme="light"] .text-gray-300\/80 { color: rgba(51,65,85,0.9) !important; } [data-theme="light"] .text-gray-400\/80 { color: rgba(71,85,105,0.9) !important; } /* Light-mode surface polish */ [data-theme="light"] .shadow-lg, [data-theme="light"] .shadow-xl, [data-theme="light"] .shadow-md { box-shadow: 0 10px 30px rgba(15,23,42,0.10), 0 1px 2px rgba(15,23,42,0.06) !important; } [data-theme="light"] .font-mono.text-yellow-300, [data-theme="light"] .font-mono.text-yellow-400 { color: #8a4b00 !important; } /* NEO Build Indicator Styles */ @keyframes neo-build-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.7), 0 0 0 0 rgba(251, 146, 60, 0.4); border-color: rgb(251, 146, 60); } 50% { box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.4), 0 0 0 8px rgba(251, 146, 60, 0.2); border-color: rgb(255, 165, 0); } } .neo-build-date-indicator { position: relative; border: 3px solid rgb(251, 146, 60); border-radius: 8px; animation: neo-build-pulse 1.5s ease-in-out infinite; } .neo-build-label { background: linear-gradient(135deg, rgb(251, 146, 60), rgb(255, 165, 0)); color: white; font-size: 10px; font-weight: 700; padding: 0px 8px; border-radius: 6px; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); display: inline-flex; align-items: center; justify-content: center; align-self: stretch; flex-shrink: 0; z-index: 50; } .neo-build-header-cell { overflow: visible !important; }