/* ========================================================================== Axindo ATP Application - App CSS (Mobile-First Reference Style) ========================================================================== */ /* Custom Touch Target & Typography Defaults for Mobile */ html { -webkit-tap-highlight-color: transparent; font-size: 14px; } @media (min-width: 640px) { html { font-size: 16px; } } /* Scrollbar Custom Styling */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #0b132b; } ::-webkit-scrollbar-thumb { background: #1e2942; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #0088FF; } /* Transisi Perubahan Tema Halus */ body, header, div, input, select, textarea, button, table { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* Touch Target Minimum untuk Form Input pada Ponsel */ input[type="text"], input[type="number"], input[type="date"], select, textarea { min-height: 44px; font-size: 13px !important; } /* ========================================================================== Light Mode Overrides (Berlaku saat class .dark dilepas dari ) ========================================================================== */ html:not(.dark) body { background-color: #f1f5f9 !important; color: #0f172a !important; } /* Header Biru Korporat tetap Biru di Mode Terang */ html:not(.dark) header { background-color: #0088FF !important; color: #ffffff !important; } /* App Bottom Navigation Bar di Mode Terang */ html:not(.dark) .fixed.bottom-0 { background-color: #ffffff !important; border-color: #e2e8f0 !important; } /* Kartu Utama & Container */ html:not(.dark) [class*="bg-slate-850"], html:not(.dark) [class*="bg-slate-900"], html:not(.dark) [class*="bg-slate-800"], html:not(.dark) [class*="bg-slate-950"], html:not(.dark) [class*="bg-[#0b132b]"], html:not(.dark) [class*="bg-[#121c33]"], html:not(.dark) [class*="bg-[#162038]"] { background-color: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } /* Sub-panel & Input Box dalam Mode Terang */ html:not(.dark) [class*="bg-slate-900/"], html:not(.dark) [class*="bg-slate-850/"] { background-color: #f8fafc !important; border-color: #cbd5e1 !important; color: #0f172a !important; } /* Penyesuaian Teks */ html:not(.dark) .text-white, html:not(.dark) .text-slate-100, html:not(.dark) .text-slate-200, html:not(.dark) .text-slate-300 { color: #0f172a !important; } /* Pengecualian Teks di Header Biru Tetap Putih */ html:not(.dark) header .text-white, html:not(.dark) header .text-blue-100 { color: #ffffff !important; } html:not(.dark) .text-slate-400 { color: #475569 !important; } /* Form Inputs, Select, Textarea dalam Mode Terang */ html:not(.dark) input[type="text"], html:not(.dark) input[type="number"], html:not(.dark) input[type="date"], html:not(.dark) select, html:not(.dark) textarea { background-color: #ffffff !important; color: #0f172a !important; border-color: #cbd5e1 !important; } /* Border & Garis Pembatas */ html:not(.dark) [class*="border-slate-"] { border-color: #cbd5e1 !important; } /* Tabel Data */ html:not(.dark) table th { background-color: #f1f5f9 !important; color: #0f172a !important; border-color: #e2e8f0 !important; } html:not(.dark) table td { border-color: #f1f5f9 !important; color: #1e293b !important; }