/* * Application styles — served via Propshaft (not Tailwind CLI). * Dark mode overrides use the .dark class on . */ /* ── Dark mode ─────────────────────────────────────── */ /* Background */ .dark body { background-color: #0f172a !important; color: #e2e8f0 !important; } .dark nav.bg-slate-900 { background-color: #020617 !important; } /* Cards and surfaces */ .dark .bg-white { background-color: #1e293b !important; } .dark .bg-slate-50 { background-color: #0f172a !important; } .dark .bg-slate-100 { background-color: #334155 !important; } .dark .bg-slate-200 { background-color: #475569 !important; } /* Borders */ .dark .border-slate-200 { border-color: #334155 !important; } .dark .border-slate-300 { border-color: #475569 !important; } .dark .border-slate-100 { border-color: #1e293b !important; } .dark .divide-slate-100 > :not(:last-child) { border-color: #1e293b !important; } /* Text — remap slate scale for dark mode */ .dark .text-slate-900 { color: #f1f5f9 !important; } .dark .text-slate-800 { color: #e2e8f0 !important; } .dark .text-slate-700 { color: #cbd5e1 !important; } .dark .text-slate-600 { color: #94a3b8 !important; } .dark .text-slate-500 { color: #94a3b8 !important; } .dark .text-slate-400 { color: #64748b !important; } /* Headings */ .dark h1, .dark h2, .dark h3 { color: #f1f5f9 !important; } .dark .font-bold { color: inherit; } .dark .font-semibold { color: inherit; } .dark .font-medium { color: inherit; } /* Form inputs */ .dark input[type="text"], .dark input[type="email"], .dark input[type="number"], .dark input[type="date"], .dark input[type="datetime-local"], .dark input[type="url"], .dark input[type="search"], .dark input[type="password"], .dark input[type="file"], .dark textarea, .dark select { background-color: #1e293b !important; border-color: #475569 !important; color: #e2e8f0 !important; } .dark input::placeholder, .dark textarea::placeholder { color: #64748b !important; } .dark input[type="checkbox"] { background-color: #1e293b !important; border-color: #475569 !important; } /* Colored badges — translucent on dark bg */ .dark .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.2) !important; } .dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.15) !important; } .dark .bg-amber-100 { background-color: rgba(245, 158, 11, 0.2) !important; } .dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.1) !important; } .dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.2) !important; } .dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; } .dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.15) !important; } .dark .bg-purple-100 { background-color: rgba(168, 85, 247, 0.2) !important; } .dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.2) !important; } .dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; } .dark .bg-sky-100 { background-color: rgba(56, 189, 248, 0.2) !important; } .dark .bg-rose-100 { background-color: rgba(244, 63, 94, 0.2) !important; } /* Accent borders */ .dark .border-emerald-200 { border-color: rgba(16, 185, 129, 0.3) !important; } .dark .border-emerald-300 { border-color: rgba(16, 185, 129, 0.4) !important; } .dark .border-amber-200 { border-color: rgba(245, 158, 11, 0.3) !important; } .dark .border-amber-300 { border-color: rgba(245, 158, 11, 0.4) !important; } .dark .border-red-200 { border-color: rgba(239, 68, 68, 0.3) !important; } .dark .border-red-300 { border-color: rgba(239, 68, 68, 0.4) !important; } /* Flash messages */ .dark .bg-emerald-50.border-emerald-200 { background-color: rgba(16, 185, 129, 0.15) !important; border-color: rgba(16, 185, 129, 0.3) !important; } .dark .bg-red-50.border-red-200 { background-color: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.3) !important; } /* Hover states */ .dark .hover\:bg-slate-50:hover { background-color: #334155 !important; } .dark .hover\:bg-slate-100:hover { background-color: #475569 !important; } /* Links in dark */ .dark a.text-red-600:hover { color: #fca5a5 !important; } /* Focus rings */ .dark .focus\:ring-red-500:focus { --tw-ring-color: rgba(239, 68, 68, 0.5); } .dark .focus\:border-red-500:focus { border-color: rgba(239, 68, 68, 0.5) !important; } /* Scrollbar */ .dark ::-webkit-scrollbar { width: 8px; } .dark ::-webkit-scrollbar-track { background: #1e293b; } .dark ::-webkit-scrollbar-thumb { background: #475569; border-radius: 4px; }