/* ============================================================ DARK MODE — aktif saat Seluruh override menggunakan selector html.dark untuk specificity lebih tinggi dari utility Tailwind ============================================================ */ /* ---------- BASE ---------- */ html.dark body { background-color: #0f172a; color: #e2e8f0; } /* ---------- BACKGROUNDS ---------- */ html.dark .bg-white { background-color: #1e293b !important; } html.dark .bg-gray-50 { background-color: #1e293b !important; } html.dark .bg-gray-100 { background-color: #243247 !important; } html.dark .bg-gray-200 { background-color: #2d3f5a !important; } /* Opacity variants */ html.dark .bg-white\/80 { background-color: rgba(30,41,59,.85) !important; } html.dark .bg-white\/90 { background-color: rgba(30,41,59,.92) !important; } /* Main content area (bg-gray-100/50) */ html.dark .flex.h-screen { background-color: #0f172a !important; } /* Card / panel */ html.dark .shadow-sm, html.dark [class*="rounded-xl"], html.dark [class*="rounded-2xl"], html.dark [class*="rounded-3xl"] { color: inherit; } /* ---------- TEXT ---------- */ html.dark .text-gray-900 { color: #f8fafc !important; } html.dark .text-gray-800 { color: #f1f5f9 !important; } html.dark .text-gray-700 { color: #e2e8f0 !important; } html.dark .text-gray-600 { color: #cbd5e1 !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; } /* ---------- BORDERS ---------- */ html.dark .border-gray-100 { border-color: #1e3a5f !important; } html.dark .border-gray-200 { border-color: #2d4a6b !important; } html.dark .border-gray-300 { border-color: #3b5a7d !important; } /* ---------- HOVER STATES ---------- */ html.dark .hover\:bg-gray-50:hover { background-color: #243247 !important; } html.dark .hover\:bg-gray-100:hover { background-color: #2d3f5a !important; } html.dark .hover\:bg-gray-200:hover { background-color: #344f6e !important; } html.dark .hover\:bg-red-50:hover { background-color: #3b1b1b !important; } html.dark .hover\:bg-emerald-50:hover { background-color: #0d3d2f !important; } html.dark .hover\:bg-blue-50:hover { background-color: #0f2744 !important; } /* ---------- FORM INPUTS ---------- */ html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.dark textarea, html.dark select { background-color: #1e293b !important; color: #e2e8f0 !important; border-color: #3b5a7d !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #475569 !important; } html.dark input:focus, html.dark textarea:focus, html.dark select:focus { border-color: #10b981 !important; } /* ---------- TABLE ---------- */ html.dark thead, html.dark .sticky.top-0 { background-color: #1a2942 !important; color: #cbd5e1 !important; } html.dark tbody tr { background-color: #1e293b !important; } html.dark tbody tr:hover { background-color: #243247 !important; } html.dark .divide-y > * { border-color: #243247 !important; } html.dark th, html.dark td { border-color: #2d4a6b !important; } /* ---------- SIDEBAR ---------- */ html.dark .border-b-4.border-emerald-500 { border-bottom-color: #10b981 !important; } /* Active menu item */ html.dark .bg-emerald-50 { background-color: #0d3d2f !important; } html.dark .text-emerald-700 { color: #34d399 !important; } html.dark .text-emerald-900 { color: #6ee7b7 !important; } html.dark .text-emerald-800 { color: #4ade80 !important; } /* ---------- HEADER ---------- */ html.dark header.sticky { background-color: rgba(15,23,42,.85) !important; } /* ---------- CARDS (bg-white border rounded shadow) ---------- */ html.dark .p-4.border, html.dark .p-5.border, html.dark .p-6.border, html.dark .p-8.border, html.dark .p-6.md\:p-8.border { background-color: #1e293b !important; border-color: #2d4a6b !important; color: #e2e8f0 !important; } /* ---------- MODALS & DROPDOWNS ---------- */ html.dark .fixed.inset-0 > div > .bg-white, html.dark .absolute.right-0 .bg-white, html.dark [role="dialog"] .bg-white { background-color: #1e293b !important; } /* ---------- CUSTOM SCROLLBAR ---------- */ html.dark .custom-scrollbar::-webkit-scrollbar-track { background: #1e293b; } html.dark .custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } html.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #475569; } /* ---------- BADGE & PILLS ---------- */ html.dark .bg-gray-100.text-gray-800 { background-color: #243247 !important; color: #e2e8f0 !important; } html.dark .bg-gray-50.rounded { background-color: #1e293b !important; } /* ---------- UTILITY OVERRIDES ---------- */ html.dark .bg-white.border { background-color: #1e293b !important; border-color: #2d4a6b !important; } html.dark .bg-gray-50.border { background-color: #1a2942 !important; border-color: #2d4a6b !important; } html.dark .bg-gray-50.p-4 { background-color: #1a2942 !important; } html.dark .bg-gray-50.p-6 { background-color: #1a2942 !important; } html.dark .bg-amber-50 { background-color: #2d1f0d !important; } html.dark .text-amber-900 { color: #fbbf24 !important; } html.dark .text-amber-800 { color: #f59e0b !important; } html.dark .border-amber-200 { border-color: #78350f !important; } /* ---------- LANDING PAGE (sebagian sudah gelap, perlu sedikit adjustment) ---------- */ html.dark .bg-white.rounded-\[2rem\] { background-color: #1e293b !important; } html.dark .bg-white.rounded-3xl { background-color: #1e293b !important; } html.dark .bg-white.rounded-2xl { background-color: #1e293b !important; } /* Modal di landing page */ html.dark .bg-white.shadow-2xl { background-color: #1e293b !important; } html.dark .text-gray-800.mb-2 { color: #f1f5f9 !important; } html.dark .text-gray-600.leading-relaxed { color: #94a3b8 !important; }