/* css/anggota.css — dipisah otomatis dari anggota.html */

.bg-grid {
            background-size: 40px 40px;
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
                              linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
        }
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        .skeleton {
            background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s ease-in-out infinite;
            border-radius: 0.75rem;
        }
        .skeleton-avatar { height: 150px; width: 100%; border-radius: 0.75rem; }
        .skeleton-name { height: 20px; width: 70%; margin-top: 12px; }
        .skeleton-role { height: 14px; width: 50%; margin-top: 8px; }
        .skeleton-absen { height: 16px; width: 40px; margin-top: 8px; }
        
        .filter-role {
            transition: all 0.3s ease;
            cursor: pointer;
            font-size: 0.65rem;
        }
        .filter-role.active {
            background: rgba(6, 182, 212, 0.2);
            border-color: #06b6d4;
            color: #06b6d4;
        }
        .filter-role:hover:not(.active) {
            border-color: #475569;
            background: rgba(71, 85, 105, 0.3);
        }
        .student-card {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .student-card:hover {
            transform: translateY(-4px);
            border-color: rgba(6, 182, 212, 0.4);
            box-shadow: 0 8px 25px rgba(6, 182, 212, 0.08);
        }
        @media screen and (max-width: 320px) {
            .ultra-small\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
            .ultra-small\:text-xs { font-size: 0.6rem !important; }
            .ultra-small\:p-2 { padding: 0.5rem !important; }
            .filter-role { font-size: 0.5rem !important; padding: 0.2rem 0.5rem !important; }
        }
        .toast {
            animation: slideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }
        @keyframes slideIn {
            from { transform: translateY(-100px) scale(0.9); opacity: 0; }
            to { transform: translateY(0) scale(1); opacity: 1; }
        }
        @keyframes slideOut {
            from { transform: translateY(0) scale(1); opacity: 1; }
            to { transform: translateY(-100px) scale(0.9); opacity: 0; }
        }
        .toast-modern {
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }
        .modal-overlay {
            animation: fadeIn 0.3s ease forwards;
            position: fixed;
            inset: 0;
            z-index: 50;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .modal-content {
            animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            max-height: 90vh;
            overflow-y: auto;
            width: 100%;
            max-width: 420px;
            margin: auto;
        }
        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: scale(0.9) translateY(30px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
        
        /* Custom scrollbar untuk modal */
        .modal-content::-webkit-scrollbar {
            width: 4px;
        }
        .modal-content::-webkit-scrollbar-track {
            background: transparent;
        }
        .modal-content::-webkit-scrollbar-thumb {
            background: #475569;
            border-radius: 4px;
        }
        .modal-content::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }

        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #0f172a; }
        ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #475569; }
        .stat-card { transition: all 0.3s ease; }
        .stat-card:hover { transform: translateY(-2px); border-color: rgba(6, 182, 212, 0.3); }
        .role-badge { transition: all 0.3s ease; }
        .role-badge.ketua { background: rgba(251, 191, 36, 0.2); color: #fbbf24; border-color: rgba(251, 191, 36, 0.3); }
        .role-badge.wakil { background: rgba(96, 165, 250, 0.2); color: #60a5fa; border-color: rgba(96, 165, 250, 0.3); }
        .role-badge.sekretaris { background: rgba(167, 139, 250, 0.2); color: #a78bfa; border-color: rgba(167, 139, 250, 0.3); }
        .role-badge.bendahara { background: rgba(52, 211, 153, 0.2); color: #34d399; border-color: rgba(52, 211, 153, 0.3); }
        .role-badge.siswa { background: rgba(148, 163, 184, 0.1); color: #94a3b8; border-color: rgba(148, 163, 184, 0.15); }
        .connection-status { transition: all 0.3s ease; }
        .connection-status.online { color: #10b981; }
        .connection-status.offline { color: #ef4444; }
        .connection-status.loading { color: #f59e0b; }