/* =========================================================
   SPHIRA LMS - ARTISAN NORDIC HORIZON (MOBILE-OPTIMIZED)
   Hak Cipta Arsitektur: Masagus Muhammad Aziz
   Fokus: Proporsi Responsif, Layered Shadows, & Micro-interactions
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* --- 🎨 PALET WARNA & VARIABEL ARSITEKTUR --- */
:root {
    /* Pondasi Warna */
    --bg-main: #F4F7F9; /* Abu-abu ultra-ringan, lebih sejuk untuk mata */
    --bg-card: #FFFFFF;
    
    /* Hierarki Teks */
    --text-primary: #0F172A;
    --text-secondary: #64748B;
    --text-tertiary: #94A3B8;

    /* Aksen Biru Samudra */
    --accent-blue-light: #EFF6FF;
    --accent-blue: #3B82F6;
    --accent-blue-dark: #1D4ED8;

    /* Garis Batas & Cahaya (Glass Edge) */
    --border-light: rgba(226, 232, 240, 0.6);
    --border-main: #E2E8F0;
    --glass-edge: inset 0 1px 1px rgba(255, 255, 255, 0.9);

    /* Layered Shadows (Kedalaman Visual Ala macOS) */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-float: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -1px rgba(15, 23, 42, 0.03);
    --shadow-elevated: 0 10px 25px -5px rgba(37, 99, 235, 0.1), 0 8px 10px -6px rgba(37, 99, 235, 0.1);
}

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    background: var(--bg-main) !important; 
    margin: 0; 
    overflow: hidden; 
    color: var(--text-primary) !important; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ================= 📱 KUSTOMISASI SCROLLBAR & TOUCH OPTIMIZATION ================= */
::-webkit-scrollbar { width: 4px; height: 4px; } 
::-webkit-scrollbar-track { background: transparent; } 
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 10px; } 
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* ================= KONTROL GEOMETRI UTAMA ================= */
[class*="rounded-[2.5rem]"], [class*="rounded-[2rem]"] { border-radius: 1.25rem !important; }
#sidebar { z-index: 40 !important; }
header { z-index: 30 !important; }
.modal-overlay, [id^="modal"] { z-index: 1000 !important; }
#globalLoader, #toastContainer { z-index: 9999 !important; }
#appDialogOverlay { z-index: 9998 !important; }

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

input[type=number] { 
    -moz-appearance: textfield; /* Untuk Firefox versi lama */
    appearance: textfield; /* Standar modern (VS Code menuntut baris ini) */
}

/* ================= 🪟 GLASSMORPHISM SIDEBAR & LAYOUT ================= */
.sidebar-bg { 
    /* Memaksa Gradient Frosty Blue yang lebih tegas namun lembut */
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(239,246,255,0.9) 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-right: 1px solid var(--border-light) !important; 
    box-shadow: 4px 0 24px -4px rgba(37, 99, 235, 0.06) !important;
    position: relative;
    z-index: 40;
}

/* Pendar tipis di tepi kanan untuk menegaskan material kaca */
.sidebar-bg::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%);
}

.main-content-area { 
    border-top: none !important; 
    background: var(--bg-main) !important;
}

/* ================= 🧭 NAVIGASI MENU (KINETIC UX) ================= */
.nav-item { 
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer; 
    border-radius: 12px !important; 
    color: var(--text-secondary) !important; 
    font-size: 13px !important; 
    font-weight: 600 !important; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    padding: 12px 16px !important; 
    border: 1px solid transparent !important; 
    min-height: 44px; 
    background: transparent !important; /* Membersihkan sisa background hitam Tailwind */
}
.nav-item svg { width: 20px; height: 20px; transition: 0.3s; opacity: 0.6; }

.nav-item:hover { 
    background: rgba(255, 255, 255, 0.8) !important; 
    color: var(--text-primary) !important; 
    transform: translateX(4px); 
    box-shadow: var(--shadow-sm) !important;
    border-color: var(--border-light) !important;
}
.nav-item:hover svg { opacity: 1; color: var(--accent-blue) !important; transform: scale(1.08); }

.nav-item.active { 
    background: linear-gradient(135deg, var(--accent-blue-light) 0%, rgba(255,255,255,1) 100%) !important;
    color: var(--accent-blue-dark) !important; 
    font-weight: 700 !important; 
    box-shadow: inset 3px 0 0 var(--accent-blue), var(--shadow-sm) !important;
    transform: none; 
    border: 1px solid var(--border-light) !important;
}
.nav-item.active svg { opacity: 1; color: var(--accent-blue) !important; }

details > summary { list-style: none; outline: none; }
details > summary::-webkit-details-marker { display: none; }

/* 🔴 FORCE DELETE WARNA EMAS TAILWIND 🔴 */
.text-\[\#D4AF37\] { color: var(--accent-blue) !important; }
.tracking-\[0\.2em\] { letter-spacing: 0.12em !important; } 
.bg-gradient-to-r.from-\[\#D4AF37\] { background: linear-gradient(to right, var(--accent-blue), var(--accent-blue-dark)) !important; }

/* ================= 📝 FORM INPUTS (CLEAN UI) ================= */
.input-soal { 
    width: 100%; 
    padding: 12px 16px !important; 
    border: 1.5px solid var(--border-main) !important; 
    border-radius: 12px !important; 
    outline: none; 
    background: var(--bg-card) !important; 
    transition: all 0.25s ease; 
    font-weight: 500; 
    color: var(--text-primary) !important; 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.01) !important; 
    font-size: 14px;
}
.input-soal:focus { 
    border-color: var(--accent-blue) !important; 
    box-shadow: 0 0 0 4px rgba(59,130,246,0.1) !important; 
    background: #FFFFFF !important;
}

/* ================= 🔘 TOMBOL AKSI UTAMA (TACTILE BUTTONS) ================= */
.btn-primary, .btn-gold { 
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-dark) 100%) !important; 
    color: #FFFFFF !important; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px; 
    border: none !important; 
    cursor: pointer; 
    border-radius: 12px !important;
    font-weight: 700 !important;
    box-shadow: var(--glass-edge), var(--shadow-float) !important;
    min-height: 44px; 
}
.btn-primary:hover, .btn-gold:hover { 
    box-shadow: var(--shadow-elevated) !important; 
    transform: translateY(-2px); 
    filter: brightness(1.05); 
}
.btn-primary:active, .btn-gold:active {
    transform: translateY(1px) scale(0.98); 
    box-shadow: var(--shadow-sm) !important;
}

.custom-checkbox { 
    width: 20px; height: 20px; 
    accent-color: var(--accent-blue); 
    cursor: pointer; border-radius: 6px; 
}

/* ================= 📊 TABEL DATA (DATA GRID) ================= */
table { width: 100%; border-collapse: separate; border-spacing: 0; } 
th, td { padding: 14px 16px !important; border-bottom: 1px solid var(--border-main) !important; text-align: left; vertical-align: middle; } 
th { 
    background: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(8px);
    font-size: 11px !important; 
    text-transform: uppercase; 
    color: var(--text-secondary) !important; 
    font-weight: 800 !important; 
    letter-spacing: 0.05em; 
    cursor: default; 
    position: sticky; 
    top: 0; 
    z-index: 10; 
    border-bottom: 2px solid var(--border-main) !important; 
} 
th:hover { color: var(--text-primary) !important; }
tr { transition: background-color 0.2s ease; border-left: 3px solid transparent; }
tr:last-child td { border-bottom: none !important; }
tr.selected-row { background-color: var(--accent-blue-light) !important; } 
tr.selected-row td:first-child { border-left: 3px solid var(--accent-blue) !important; }
tr:hover { background-color: rgba(241, 245, 249, 0.6); }

/* ================= 📦 KARTU & MODAL (DEPTH & SHADOWS) ================= */
.bg-white { 
    background-color: var(--bg-card) !important; 
    box-shadow: var(--glass-edge), var(--shadow-float);
}
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-float) !important; }
.modal-pop {
    background: var(--bg-card) !important;
    box-shadow: var(--glass-edge), 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
    border: 1px solid var(--border-light) !important;
}

/* ================= 📱 MEDIA QUERIES (MOBILE RESPONSIVENESS) ================= */
@media (max-width: 768px) {
    .nav-item { padding: 14px 16px !important; font-size: 14px !important; }
    th, td { padding: 12px !important; }
    .bg-white { border-radius: 1rem !important; }
    
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px; 
    }
}

/* ================= ✨ ANIMASI SISTEM (SMOOTH & CLEAN) ================= */
.enterprise-dialog {
    opacity: 0; transform: scale(0.95) translateY(10px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.enterprise-dialog.show {
    opacity: 1; transform: scale(1) translateY(0);
}

@keyframes fadeInUp { 
    from { opacity: 0; transform: translateY(15px); } 
    to { opacity: 1; transform: translateY(0); } 
} 
.anim-fade-up { animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes softPulse { 
    0%, 100% { opacity: 0.6; transform: scale(0.98); filter: drop-shadow(0 0 10px rgba(59,130,246,0.2)); } 
    50% { opacity: 1; transform: scale(1.02); filter: drop-shadow(0 0 20px rgba(59,130,246,0.4)); } 
}
.logo-soft-pulse { animation: softPulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@keyframes shine { 0% { left: -100%; } 20% { left: 100%; } 100% { left: 100%; } }
.shine-effect { position: relative; overflow: hidden; }
.shine-effect::after { 
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; 
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%); 
    transform: skewX(-25deg); animation: shine 3.5s infinite; pointer-events: none; 
}

/* ================= 🐘 MADA ANIMATION (UNTOUCHED) ================= */
.login-bg { 
    background: linear-gradient(135deg, var(--text-primary) 0%, #1E293B 100%); 
    position: relative; 
}
.login-bg::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 2px, transparent 2px);
    background-size: 30px 30px; z-index: 0; pointer-events: none;
}
.login-bg > div { z-index: 1; position: relative; }

.ramah-hug-stage { perspective: 1000px; }
.mada-actor-container { animation: madaWalkIn 3s ease-out forwards, madaTransformToHug 1s ease-in-out 3s forwards; }
.sphira-pillow-container { animation: sphiraAppearAsPillow 1s ease-out 1.5s forwards; }
.mada-actor-container[style*="madaWalkIn"] .mada-leg-front-L, .mada-actor-container[style*="madaWalkIn"] .mada-leg-back-R { transform-origin: center top; animation: legSwing 0.5s infinite ease-in-out; }
.mada-actor-container[style*="madaWalkIn"] .mada-leg-front-R, .mada-actor-container[style*="madaWalkIn"] .mada-leg-back-L { transform-origin: center top; animation: legSwing 0.5s infinite ease-in-out 0.25s; }
.mada-actor-container[style*="madaWalkIn"] .mada-svg { animation: bodyBob 0.5s infinite ease-in-out; }
.mada-actor-container[style*="madaWalkIn"] .mada-ear-L { transform-origin: right center; animation: earFlap 0.5s infinite ease-in-out; }
.mada-actor-container[style*="madaWalkIn"] .mada-ear-R { transform-origin: left center; animation: earFlap 0.5s infinite ease-in-out 0.1s; }
.mada-transform-hug-active .mada-arm-L { transform-origin: right top; animation: armHugL 1s ease-out forwards; }
.mada-transform-hug-active .mada-arm-R { transform-origin: left top; animation: armHugR 1s ease-out forwards; }
.mada-transform-hug-active .mada-trunk { transform-origin: top center; animation: trunkHappy 1s ease-out forwards; }
.mada-transform-hug-active .mada-eyes { opacity: 0; transition: opacity 0.5s 0.5s; }
.mada-transform-hug-active .mada-eyes-happy { opacity: 1 !important; transition: opacity 0.5s 0.5s; }
.sphira-pillow-active .sphira-pillow-img { animation: sphiraPillowSquish 1s ease-in-out forwards; }
.mada-transform-hug-active ~ .hug-glow { animation: glowAppear 1s ease-out forwards; }

@keyframes madaWalkIn { 0% { opacity: 0; transform: translateX(-200px) scale(0.9); } 10% { opacity: 1; } 90% { transform: translateX(0px) scale(1); } 100% { opacity: 1; transform: translateX(0px) scale(1); } }
@keyframes legSwing { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes bodyBob { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-3px); } }
@keyframes earFlap { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes sphiraAppearAsPillow { 0% { opacity: 0; transform: scale(0.5); filter: blur(5px); } 100% { opacity: 1; transform: scale(1); filter: blur(0px); } }
@keyframes madaTransformToHug { 0% { transform: translateX(0px) translateY(0px) scale(1); } 100% { transform: translateX(0px) translateY(5px) scale(1.02); } }
@keyframes armHugL { 0% { d: path("M55 110C45 120 45 135 55 145"); } 100% { d: path("M55 110C70 125 70 140 55 155"); stroke: #CBD5E1; } }
@keyframes armHugR { 0% { d: path("M145 110C155 120 155 135 145 145"); } 100% { d: path("M145 110C130 125 130 140 145 155"); stroke: #CBD5E1; } }
@keyframes trunkHappy { 0% { transform: rotate(0deg); } 100% { transform: rotate(15deg) translateX(5px); } }
@keyframes sphiraPillowSquish { 0% { transform: scale(1); filter: drop-shadow(0 5px 15px rgba(59,130,246,0.1)); } 100% { transform: scale(0.92) translateY(2px); filter: drop-shadow(0 2px 5px rgba(59,130,246,0.05)); } }
@keyframes glowAppear { 0% { opacity: 0; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } }
.sphira-load-progress { width: 0%; animation: progressLoadLoop 2.5s infinite ease-in-out; }
@keyframes progressLoadLoop { 0% { width: 0%; left: 0; } 50% { width: 100%; left: 0; } 100% { width: 0%; left: 100%; } }