/* SIAP Dishub Cilegon - style tambahan di luar utility Tailwind */ * { -webkit-tap-highlight-color: transparent; } body { scroll-behavior: smooth; } .card { background: #fff; border-radius: 1.5rem; border: 1px solid #eef1f6; box-shadow: 0 2px 10px rgba(30, 90, 168, 0.04); } input, select, textarea { border-radius: 1rem !important; } .btn-primary { background: #1E5AA8; color: #fff; border-radius: 1rem; font-weight: 600; padding: 0.75rem 1.25rem; transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 6px 16px rgba(30,90,168,0.25); } .btn-primary:hover { transform: translateY(-1px); } .btn-primary:disabled { opacity: .6; box-shadow:none; } .btn-outline { border: 1.5px solid #e2e8f0; border-radius: 1rem; font-weight: 600; padding: 0.75rem 1.25rem; color: #475569; background: #fff; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #d7e2ee; border-radius: 8px; } /* Modal error box */ .modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.45); display: flex; align-items: center; justify-content: center; z-index: 999; padding: 16px; } .modal-box { background: #fff; border-radius: 1.75rem; max-width: 420px; width: 100%; padding: 1.75rem; } /* ========================================================= DARK MODE — diaktifkan via class "dark" di , toggle di navbar. Pendekatan: override warna dasar secara global tanpa perlu menulis ulang class Tailwind di setiap halaman (agar seluruh app konsisten gelap). ========================================================= */ html.dark body { background: #0f172a; color: #cbd5e1; } html.dark header { background: rgba(15,23,42,0.9) !important; border-color: #1e293b !important; } html.dark .card, html.dark .modal-box { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1; } html.dark input, html.dark select, html.dark textarea { background: #0f172a !important; border-color: #334155 !important; color: #e2e8f0 !important; } html.dark .bg-white { background: #1e293b !important; } html.dark .bg-\[\#F5F8FB\] { background: #0f172a !important; } html.dark .bg-slate-50 { background: #1e293b !important; } html.dark .bg-slate-100 { background: #334155 !important; } html.dark .text-slate-800, html.dark .text-slate-700, html.dark .text-slate-600 { color: #e2e8f0 !important; } html.dark .text-slate-500, html.dark .text-slate-400 { color: #94a3b8 !important; } html.dark .border-slate-100, html.dark .border-slate-200 { border-color: #334155 !important; } html.dark nav.md\:hidden { background: #1e293b !important; border-color: #334155 !important; } html.dark table th { background: #0f172a !important; } html.dark table tr:hover { background: #273449 !important; }