@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
.camera-box { position: relative; width: 100%; aspect-ratio: 4/3; background: #000; border-radius: 1rem; overflow: hidden; }
video, canvas { width: 100%; height: 100%; object-fit: cover; }
.sidebar { transition: all 0.3s ease; }
@media (max-width: 768px) { .sidebar-closed { transform: translateX(-100%); } }
#map { height: 250px; width: 100%; border-radius: 1rem; z-index: 1; }
.animate-fadeIn { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.absensi-btn.active-S { background-color: #f59e0b; color: white; }
.absensi-btn.active-I { background-color: #3b82f6; color: white; }
.absensi-btn.active-A { background-color: #ef4444; color: white; }

/* Utility classes */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.pb-safe {
    padding-bottom: env(safe-area-inset-bottom, 20px);
}
/* Fix Tampilan Mobile Terlalu Tinggi (Kena Status Bar) */
.pt-safe-app {
    padding-top: 35px; /* Fallback aman untuk status bar */
    padding-top: max(35px, env(safe-area-inset-top));
}
@media (min-width: 768px) {
    .pt-safe-app {
        padding-top: 0 !important;
    }
}