/* ==========================================================================
   0. MENCEGAH FLICKER (Elemen berkedip sebelum Alpine.js siap)
   ========================================================================== */
[x-cloak] { 
    display: none !important; 
}

/* Durasi sedang agar panel terasa bergerak tanpa menunda interaksi. */
.duration-600 { transition-duration: 600ms !important; }
.duration-450 { transition-duration: 450ms !important; }

/* ==========================================================================
   1. CUSTOM SCROLLBAR
   ========================================================================== */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ==========================================================================
   2. DRAG HANDLE (BOTTOM SHEET)
   ========================================================================== */
.drag-handle {
    touch-action: none;
    cursor: grab;
    user-select: none;
}
.drag-handle:active {
    cursor: grabbing;
}
.is-dragging {
    transition: none !important;
}

/* ==========================================================================
   3. ANIMASI AVATAR (MUNCUL DARI BAWAH)
   ========================================================================== */
@keyframes avatarRise {
    0%   { opacity: 0; transform: translateY(14px) scale(0.92); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.avatar-item {
    opacity: 0;
    animation: avatarRise 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* (Aturan nth-child dihapus karena delay sudah diurus otomatis oleh Alpine.js di HTML) */

/* ==========================================================================
   4. INDIKATOR TAB BULAN
   ========================================================================== */
#tabIndicator {
    width: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, width;
}

/* ==========================================================================
   5. STATE DISABLED (FILTER ANGGOTA)
   ========================================================================== */
.member-choice.is-disabled {
    pointer-events: none;
    opacity: 0.4;
    filter: grayscale(1);
}

/* Dekorasi lembut pada header kartu profil anggota */
.profile-orb {
    position: absolute;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}
.profile-orb-one {
    width: 12rem;
    height: 12rem;
    right: -3.5rem;
    top: -5rem;
}
.profile-orb-two {
    width: 8rem;
    height: 8rem;
    right: 4rem;
    bottom: -6rem;
    background: rgba(52, 211, 153, 0.14);
}

/* ==========================================================================
   6. PENGATURAN KHUSUS UNTUK PRINT / CETAK PDF
   ========================================================================== */
@media print {
    body {
        background: white !important;
        padding: 0 !important;
        min-height: auto !important;
    }
    
    .no-print {
        display: none !important;
    }
    
    .mobile-frame {
        box-shadow: none !important;
        border: none !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    #historySheet {
        position: static !important;
        overflow: visible !important;
        box-shadow: none !important;
        padding-bottom: 0 !important;
    }
    
    .avatar-item {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}