body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f3f4f6; }
.modal-overlay { background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); }
.img-preview { max-width: 100%; height: 150px; object-fit: cover; border-radius: 0.375rem; display: none; }
.loader { border: 4px solid #f3f3f3; border-top: 4px solid #10b981; border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Custom scrollbar untuk tabel */
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #10b981; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #059669; }

/* --- STYLING KHUSUS BOTTOM NAVIGATION (MOBILE) --- */
.bottom-nav { box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05); }
.bottom-nav-item { width: 65px; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.icon-container {
    width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); margin: 0 auto; color: #6b7280; background-color: transparent;
}
.bottom-nav-text { transition: all 0.3s ease; color: #6b7280; font-size: 10px; margin-top: 4px; display: block; text-align: center; }

/* Efek Timbul 3D (Active State) */
.bottom-nav-active .icon-container {
    transform: translateY(-16px);
    background-color: #10b981;
    color: white;
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.5);
    border: 4px solid #f3f4f6; 
}
.bottom-nav-active .bottom-nav-text {
    transform: translateY(-10px);
    color: #10b981;
    font-weight: 700;
}