/**
 * @project     Sistem Pelayanan Desa Digital (SPDD)
 * @author      PT. MNDS DIGITAL SOLUTION
 * @copyright   2026
 * @description Base Styling & UI Overrides
 */

body { -webkit-tap-highlight-color: transparent; transition: background-color 0.5s ease; background-color: #f8fafc; }
.dark body { background-color: #090e17; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark ::-webkit-scrollbar-thumb { background: #334155; }
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

.glass-header { 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.75);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.dark .glass-header {
    background: rgba(17, 24, 39, 0.75);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.swal2-popup { border-radius: 1.5rem !important; font-family: 'Inter', sans-serif !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important; }
.view-panel:not(.hidden) { animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.chat-slide-up { animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.nav-item { position: relative; transition: all 0.3s ease; overflow: hidden; }
.nav-item i { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease; }
.nav-item:hover { transform: translateX(6px); }
.nav-item.nav-active { font-weight: 700; color: #1e293b; background: linear-gradient(90deg, rgba(99,102,241,0.08) 0%, transparent 100%); }
.dark .nav-item.nav-active { color: #f8fafc; background: linear-gradient(90deg, rgba(99,102,241,0.15) 0%, transparent 100%); }
.nav-item.nav-active::before { 
    content: ''; position: absolute; left: 0; top: 10%; bottom: 10%; width: 4px; 
    background: #6366f1; border-radius: 0 4px 4px 0; box-shadow: 0 0 12px rgba(99,102,241,0.6); 
}

#nav-dashboard.nav-active i { color: #6366f1; transform: scale(1.25); filter: drop-shadow(0 0 8px rgba(99,102,241,0.4)); }
#nav-history.nav-active i { color: #10b981; transform: scale(1.25); filter: drop-shadow(0 0 8px rgba(16,185,129,0.4)); }
#nav-templates.nav-active i { color: #8b5cf6; transform: scale(1.25); filter: drop-shadow(0 0 8px rgba(139,92,246,0.4)); }
#nav-perangkat.nav-active i { color: #f59e0b; transform: scale(1.25); filter: drop-shadow(0 0 8px rgba(245,158,11,0.4)); }
#nav-settings.nav-active i { color: #f43f5e; transform: scale(1.25); filter: drop-shadow(0 0 8px rgba(244,63,94,0.4)); }
#nav-profile.nav-active i { color: #0ea5e9; transform: scale(1.25); filter: drop-shadow(0 0 8px rgba(14,165,233,0.4)); }

#nav-penduduk.nav-active i { color: #14b8a6; transform: scale(1.25); filter: drop-shadow(0 0 8px rgba(20,184,166,0.4)); }
#nav-siaga.nav-active i { color: #ef4444; transform: scale(1.25); filter: drop-shadow(0 0 8px rgba(239,68,68,0.4)); }

.nav-mob-active i { transform: translateY(-4px) scale(1.3); filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2)); }
#mob-dashboard.nav-mob-active { color: #6366f1; }
#mob-history.nav-mob-active { color: #10b981; }
#mob-templates.nav-mob-active { color: #8b5cf6; }
#mob-perangkat.nav-mob-active { color: #f59e0b; }
#mob-settings.nav-mob-active { color: #f43f5e; }
#mob-profile.nav-mob-active { color: #0ea5e9; }
#mob-penduduk.nav-mob-active { color: #14b8a6; }
#mob-siaga.nav-mob-active { color: #ef4444; }

.detail-transition { transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; overflow: hidden; }

input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px white inset !important; -webkit-text-fill-color: #1e293b !important; }
.dark input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px #090e17 inset !important; -webkit-text-fill-color: #f8fafc !important; }

.tox-tinymce { border-radius: 1rem !important; border: 1px solid #cbd5e1 !important; }
.dark .tox-tinymce { border: 1px solid #1f2937 !important; }
.tox-editor-header { border-bottom: 1px solid #cbd5e1 !important; box-shadow: none !important; }


div:has(input[required], select[required], textarea[required]) > label:not(:has(span))::after,
fieldset:has(input[required]) > label:not(:has(span))::after {
    content: " *";
    color: #f43f5e !important;
    font-size: 1.1em;
    font-weight: 800;
    margin-left: 2px;
}