/* Inerk Dark Mode Theme Overrides */ /* Applied when has class="dark" */ /* === ROOT / BODY === */ html.dark body, html.dark .font-sans { background-color: #0f172a !important; color: #e2e8f0 !important; } /* === BACKGROUNDS === */ html.dark .bg-white { background-color: #1e293b !important; } html.dark .bg-slate-50 { background-color: #0f172a !important; } html.dark .bg-slate-100 { background-color: #1e293b !important; } html.dark .bg-gray-50 { background-color: #0f172a !important; } html.dark .bg-gray-100 { background-color: #1e293b !important; } html.dark .bg-slate-900 { background-color: #020617 !important; } html.dark .bg-gray-900 { background-color: #020617 !important; } /* === BORDERS === */ html.dark .border-slate-200 { border-color: #334155 !important; } html.dark .border-slate-100 { border-color: #1e293b !important; } html.dark .border-slate-300 { border-color: #475569 !important; } html.dark .border-gray-100 { border-color: #1e293b !important; } html.dark .border-gray-200 { border-color: #334155 !important; } html.dark .border-dashed { border-color: #475569 !important; } /* === TEXT COLORS === */ html.dark .text-slate-900 { color: #f1f5f9 !important; } html.dark .text-slate-800 { color: #e2e8f0 !important; } html.dark .text-slate-700 { color: #cbd5e1 !important; } html.dark .text-slate-600 { color: #94a3b8 !important; } html.dark .text-slate-500 { color: #94a3b8 !important; } html.dark .text-slate-400 { color: #64748b !important; } html.dark .text-slate-300 { color: #475569 !important; } html.dark .text-gray-900 { color: #f1f5f9 !important; } html.dark .text-gray-800 { color: #e2e8f0 !important; } html.dark .text-gray-700 { color: #cbd5e1 !important; } html.dark .text-gray-600 { color: #94a3b8 !important; } html.dark .text-gray-500 { color: #94a3b8 !important; } html.dark .text-gray-400 { color: #64748b !important; } html.dark .text-gray-300 { color: #475569 !important; } /* === INPUT FIELDS === */ html.dark input, html.dark select, html.dark textarea { background-color: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b !important; } html.dark input:focus, html.dark select:focus, html.dark textarea:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important; } /* === NAV / SIDEBAR === */ html.dark .nav-link:hover { background-color: #1e293b !important; color: #60a5fa !important; } html.dark .nav-link.active { background-color: #172554 !important; color: #60a5fa !important; } /* === CARDS & PANELS === */ html.dark .shadow-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; } html.dark .shadow-xl { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important; } html.dark .shadow-2xl { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6) !important; } /* === PLACEHOLDER / EMPTY STATES === */ html.dark .bg-slate-200 { background-color: #334155 !important; } /* === HOVER STATES === */ html.dark .hover\:bg-slate-50:hover { background-color: #1e293b !important; } html.dark .hover\:bg-red-50:hover { background-color: #450a0a !important; } html.dark .hover\:bg-slate-100:hover { background-color: #334155 !important; } html.dark .hover\:bg-blue-50:hover { background-color: #172554 !important; } html.dark .hover\:bg-emerald-50:hover { background-color: #022c22 !important; } html.dark .hover\:bg-violet-50:hover { background-color: #2e1065 !important; } html.dark .hover\:bg-amber-50:hover { background-color: #451a03 !important; } html.dark .hover\:bg-orange-50:hover { background-color: #431407 !important; } /* === GRADIENT OVERRIDES === */ html.dark .bg-gradient-to-br.from-slate-900 { background: linear-gradient(to bottom right, #020617, #0f172a) !important; } html.dark .bg-gradient-to-br.from-brand-900 { background: linear-gradient(to bottom right, #172554, #1e3a5f) !important; } html.dark .bg-gradient-to-br.from-blue-600 { background: linear-gradient(to bottom right, #1e40af, #1e3a8a) !important; } html.dark .bg-gradient-to-r.from-emerald-500 { background: linear-gradient(to right, #047857, #065f46) !important; } html.dark .bg-gradient-to-r.from-violet-500 { background: linear-gradient(to right, #6d28d9, #5b21b6) !important; } /* === SCROLLBAR === */ html.dark ::-webkit-scrollbar-track { background: #0f172a !important; } html.dark ::-webkit-scrollbar-thumb { background: #334155 !important; } html.dark ::-webkit-scrollbar-thumb:hover { background: #475569 !important; } /* === SKELETON LOADING === */ html.dark .skeleton, html.dark .shimmer { background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%) !important; background-size: 200% 100% !important; } /* === BACKDROP === */ html.dark .backdrop-blur-xl { background-color: rgba(15, 23, 42, 0.85) !important; } html.dark .bg-white\/80 { background-color: rgba(30, 41, 59, 0.9) !important; } html.dark .bg-slate-900\/40 { background-color: rgba(15, 23, 42, 0.85) !important; } html.dark .bg-black\/50 { background-color: rgba(0, 0, 0, 0.7) !important; } html.dark .bg-black\/30 { background-color: rgba(0, 0, 0, 0.6) !important; } /* === MISC FIXES === */ html.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #1e293b !important; } html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: #334155 !important; } /* === SPECIFIC MODAL OVERRIDES === */ html.dark .modal-overlay { background-color: rgba(0, 0, 0, 0.7) !important; } html.dark .modal-bg { background-color: rgba(0, 0, 0, 0.7) !important; } html.dark .modal-content { background-color: #1e293b !important; border-color: #334155 !important; } html.dark .modal-footer { background-color: #0f172a !important; border-color: #334155 !important; } /* === TABLE / LIST STRIPES === */ html.dark .even\:bg-slate-50:nth-child(even) { background-color: #1e293b !important; } /* === PAYMENT / WALLET SPECIFIC === */ html.dark .bg-blue-50 { background-color: #172554 !important; } html.dark .bg-emerald-50 { background-color: #022c22 !important; } html.dark .bg-amber-50 { background-color: #451a03 !important; } html.dark .bg-red-50 { background-color: #450a0a !important; } html.dark .bg-violet-50 { background-color: #2e1065 !important; } html.dark .bg-orange-50 { background-color: #431407 !important; } html.dark .bg-green-50 { background-color: #022c22 !important; } html.dark .text-blue-200 { color: #93c5fd !important; } html.dark .text-blue-100 { color: #bfdbfe !important; } html.dark .border-blue-200 { border-color: #1e40af !important; } html.dark .border-emerald-200 { border-color: #065f46 !important; } html.dark .border-amber-200 { border-color: #92400e !important; } html.dark .border-red-200 { border-color: #991b1b !important; } html.dark .border-violet-200 { border-color: #6d28d9 !important; } html.dark .border-orange-200 { border-color: #9a3412 !important; } html.dark .shadow-blue-200 { box-shadow: 0 8px 24px -4px rgba(30, 64, 175, 0.3) !important; } html.dark .shadow-emerald-200 { box-shadow: 0 8px 24px -4px rgba(6, 95, 70, 0.3) !important; } /* === ACTION BUTTON DARK MODE === */ html.dark .action-btn.bg-blue-50 { background-color: #172554 !important; } html.dark .action-btn.bg-emerald-50 { background-color: #022c22 !important; } html.dark .action-btn.bg-red-50 { background-color: #450a0a !important; } html.dark .action-btn.bg-violet-50 { background-color: #2e1065 !important; } html.dark .action-btn.bg-orange-50 { background-color: #431407 !important; } html.dark .action-btn.bg-amber-50 { background-color: #451a03 !important; } html.dark .action-btn.bg-slate-50 { background-color: #1e293b !important; } /* === RING FOCUS === */ html.dark .ring-blue-500 { --tw-ring-color: #3b82f6 !important; } /* === ACCORDION DARK === */ html.dark .accordion-body { background-color: transparent !important; } /* === BADGE DARK MODE === */ html.dark .bg-blue-100 { background-color: #172554 !important; } html.dark .bg-emerald-100 { background-color: #022c22 !important; } html.dark .bg-amber-100 { background-color: #451a03 !important; } html.dark .bg-red-100 { background-color: #450a0a !important; } html.dark .bg-violet-100 { background-color: #2e1065 !important; } html.dark .bg-orange-100 { background-color: #431407 !important; } /* === SQUAD/POSITION COLOR ACCENTS DARK === */ html.dark .border-l-blue-500 { border-left-color: #3b82f6 !important; } html.dark .border-l-violet-500 { border-left-color: #7c3aed !important; } html.dark .border-l-emerald-500 { border-left-color: #10b981 !important; } html.dark .border-l-amber-500 { border-left-color: #f59e0b !important; } html.dark .border-l-rose-500 { border-left-color: #f43f5e !important; } html.dark .border-l-teal-500 { border-left-color: #14b8a6 !important; }