/**
 * ==============================================================================
 * FAIL GAYA TAMBAHAN (style.css)
 * Senibina: CSS Tulen (Pelengkap kepada utiliti kelas Tailwind CSS)
 * Pemproses: Pro Web Caster
 * ==============================================================================
 */

/* ==========================================================================
   1. PALANG TATAL KUSTOM (CUSTOM SCROLLBAR)
   Tujuan: Memberikan estetika gred industri/premium (ala macOS) 
   kepada elemen yang mempunyai kelas 'custom-scrollbar' (rujuk index.html)
   ========================================================================== */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #cbd5e1; /* Tailwind slate-300 */
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8; /* Tailwind slate-400 */
}

/* Utiliti untuk membenarkan tatalan tetapi menyembunyikan palang visual */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}

/* ==========================================================================
   2. KELAS ANIMASI MIKRO (MICRO-ANIMATIONS)
   Tujuan: Digunakan oleh fail logik Javascript semasa menukar paparan modul 
   untuk mengelakkan transisi yang statik/mengejut.
   ========================================================================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 0.25s ease-in-out forwards;
}

@keyframes slideUpFade {
    from { 
        opacity: 0; 
        transform: translateY(15px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.animate-slide-up {
    animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ==========================================================================
   3. PENGGAYAAN ELEMEN SPESIFIK & TINDAK BALAS (RESPONSIVE FIXES)
   ========================================================================== */
/* Mengelakkan elemen interaktif dari 'terhighlight' teksnya secara tidak sengaja */
.nav-item {
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Penyesuaian modal log masuk bagi peranti skrin sangat kecil (landskap) */
@media (max-height: 500px) {
    #login-modal {
        overflow-y: auto;
        align-items: flex-start;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}