/* ==========================================================
   ZenCBT Modern, Minimalist & Ultra-Premium Dashboard Styles
   Mendukung Mode Terang (Light) & Mode Gelap (Dark)
   Terisolasi secara ketat khusus Halaman Dashboard Siswa
   ========================================================== */

/* ----------------------------------------------------------
   0. LATAR BELAKANG (BACKGROUND) MINIMALIS, BERSIH & MODERN
   ---------------------------------------------------------- */

body,
div.min-h-screen {
    background-color: #f8fafc !important; /* Soft Slate-50 */
    background-image: 
        radial-gradient(at 50% 0%, rgba(59, 130, 246, 0.08) 0px, transparent 65%),
        radial-gradient(at 100% 100%, rgba(99, 102, 241, 0.05) 0px, transparent 50%),
        radial-gradient(#cbd5e1 0.85px, transparent 0.85px) !important;
    background-size: 100% 100%, 100% 100%, 28px 28px !important;
    background-attachment: fixed !important;
}

.dark body,
.dark div.min-h-screen {
    background-color: #0b0f19 !important;
    background-image: 
        radial-gradient(at 50% 0%, rgba(59, 130, 246, 0.14) 0px, transparent 65%),
        radial-gradient(rgba(51, 65, 85, 0.7) 0.85px, transparent 0.85px) !important;
    background-size: 100% 100%, 28px 28px !important;
    background-attachment: fixed !important;
}


/* ----------------------------------------------------------
   1. SEMBUNYIKAN MENU 'JADWAL' DI NAVBAR SISWA
   ---------------------------------------------------------- */

header nav a[href*="/peserta/jadwal"],
header a[href*="/peserta/jadwal"],
nav a[href*="/peserta/jadwal"] {
    display: none !important;
}


/* ----------------------------------------------------------
   2. ISOLASI KHUSUS DASHBOARD SISWA (TERKUNCI KE DASHBOARD)
   ---------------------------------------------------------- */

/* Sembunyikan 2 Kartu Statistik di Dashboard */
main > div:has(.mb-4.md\:mb-6) > .grid.grid-cols-2,
main > div:has(.mb-4.md\:mb-6) > div > .grid.grid-cols-2 {
    display: none !important;
}

/* Sembunyikan Banner & Informasi di Dashboard */
main > div:has(.mb-4.md\:mb-6) .space-y-6 > .bg-orange-50,
main > div:has(.mb-4.md\:mb-6) .space-y-6 > .bg-gray-50,
main > div:has(.mb-4.md\:mb-6) .space-y-6 > div[class*="bg-orange-50"],
main > div:has(.mb-4.md\:mb-6) .space-y-6 > div[class*="bg-gray-50"],
main > div:has(.mb-4.md\:mb-6) .space-y-6 > div:first-child:has(.prose) {
    display: none !important;
}


/* ----------------------------------------------------------
   3. HEADER SAMBUTAN MODERN DI TENGAH DASHBOARD
   ---------------------------------------------------------- */

main > div:has(.mb-4.md\:mb-6) > .mb-4.md\:mb-6,
main > div:has(.mb-4.md\:mb-6) .mb-4.md\:mb-6.flex.items-start.justify-between {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin-top: 0.75rem !important;
    margin-bottom: 2.25rem !important;
    width: 100% !important;
}

main > div:has(.mb-4.md\:mb-6) .mb-4.md\:mb-6.flex.items-start.justify-between > div:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

main > div:has(.mb-4.md\:mb-6) h2 {
    text-align: center !important;
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.03em !important;
    line-height: 1.25 !important;
}

main > div:has(.mb-4.md\:mb-6) p {
    text-align: center !important;
    font-size: 1.05rem !important;
    color: #64748b !important;
    font-weight: 500 !important;
    margin-top: 0.45rem !important;
    letter-spacing: -0.01em !important;
}


/* ----------------------------------------------------------
   4. KOTAK UTAMA JADWAL UJIAN ELEGAN DENGAN AKSEN BORDER ATAS
   ---------------------------------------------------------- */

main > div:has(.mb-4.md\:mb-6) .space-y-6 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

/* Card Container Glassmorphic & Elevated dengan Aksen Border Atas Minimalis */
main > div:has(.mb-4.md\:mb-6) .space-y-6 > .bg-white.border-slate-200,
main > div:has(.mb-4.md\:mb-6) .space-y-6 > div[class*="border-slate-200"],
main > div:has(.mb-4.md\:mb-6) .space-y-6 > div:not(.bg-orange-50):not(.bg-gray-50):has(svg) {
    position: relative !important;
    width: 100% !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-top: 4.5px solid #2563eb !important; /* Aksen garis tepi atas modern */
    border-radius: 1.75rem !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.03) !important;
    padding: 1.85rem 2.25rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Header 'Jadwal Ujian' dengan Icon Badge App-Style */
main > div:has(.mb-4.md\:mb-6) .space-y-6 .text-slate-800,
main > div:has(.mb-4.md\:mb-6) .space-y-6 div:has(> svg.text-orange-500) {
    color: #0f172a !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.85rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 1.5rem !important;
}

/* Styling Ikon Kalender */
main > div:has(.mb-4.md\:mb-6) .space-y-6 div:has(> svg.text-orange-500) svg {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    color: #2563eb !important;
    padding: 7px !important;
    border-radius: 12px !important;
    width: 36px !important;
    height: 36px !important;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15) !important;
    flex-shrink: 0 !important;
}

/* Tampilan Empty State ("Tidak ada ujian tersedia") Menjadi Estetik */
main > div:has(.mb-4.md\:mb-6) .space-y-6 .text-gray-500.text-center,
main > div:has(.mb-4.md\:mb-6) .space-y-6 div[class*="text-center"][class*="py-8"] {
    background: #f8fafc !important;
    border: 1.5px dashed #cbd5e1 !important;
    border-radius: 1.25rem !important;
    padding: 2.75rem 2rem !important;
    margin: 0.5rem 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
}

main > div:has(.mb-4.md\:mb-6) .space-y-6 .text-gray-500.text-center::before,
main > div:has(.mb-4.md\:mb-6) .space-y-6 div[class*="text-center"][class*="py-8"]::before {
    content: "☕" !important;
    font-size: 2.25rem !important;
    display: block !important;
    margin-bottom: 0.4rem !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05)) !important;
}


/* ----------------------------------------------------------
   5. KARTU ITEM UJIAN (DI DALAM DASHBOARD)
   ---------------------------------------------------------- */

main > div:has(.mb-4.md\:mb-6) .space-y-6 .border.border-gray-200,
main > div:has(.mb-4.md\:mb-6) .space-y-6 .border.dark\:border-slate-700 {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 5px solid #3b82f6 !important; /* Garis aksen biru modern */
    border-radius: 1.25rem !important;
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.05) !important;
    padding: 1.4rem 1.75rem !important;
    margin-bottom: 1rem !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

main > div:has(.mb-4.md\:mb-6) .space-y-6 .border.border-gray-200:hover {
    box-shadow: 0 16px 28px -6px rgba(59, 130, 246, 0.16) !important;
    transform: translateY(-2px) !important;
    border-color: #cbd5e1 !important;
    border-left-color: #2563eb !important;
}

/* Judul Ujian (TRYOUT TKA 1) */
main > div:has(.mb-4.md\:mb-6) .space-y-6 h3 {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 0.65rem !important;
    line-height: 1.3 !important;
}

/* Informasi Tanggal, Durasi & Soal */
main > div:has(.mb-4.md\:mb-6) .space-y-6 p {
    font-size: 0.9rem !important;
    color: #475569 !important;
    line-height: 1.65 !important;
    font-weight: 500 !important;
}

/* Badge Status 'TERSEDIA' */
main > div:has(.mb-4.md\:mb-6) .space-y-6 span.rounded-full {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.4rem 1rem !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    border-radius: 9999px !important;
    background-color: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.12) !important;
}

/* Tombol 'Mulai' yang Modern & Menonjol */
main > div:has(.mb-4.md\:mb-6) .space-y-6 button.bg-green-600 {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0.85rem !important;
    padding: 0.7rem 1.95rem !important;
    font-size: 0.925rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.025em !important;
    min-width: 110px !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

main > div:has(.mb-4.md\:mb-6) .space-y-6 button.bg-green-600:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.45) !important;
    transform: translateY(-2px) scale(1.02) !important;
}


/* ----------------------------------------------------------
   6. MODE GELAP (DARK MODE) ELEGAN
   ---------------------------------------------------------- */

.dark main > div:has(.mb-4.md\:mb-6) h2 {
    color: #f8fafc !important;
}

.dark main > div:has(.mb-4.md\:mb-6) p {
    color: #94a3b8 !important;
}

/* Kotak Utama Ujian di Mode Gelap */
.dark main > div:has(.mb-4.md\:mb-6) .space-y-6 > .bg-white.border-slate-200,
.dark main > div:has(.mb-4.md\:mb-6) .space-y-6 > div[class*="border-slate-200"],
.dark main > div:has(.mb-4.md\:mb-6) .space-y-6 > div:not(.bg-orange-50):not(.bg-gray-50):has(svg) {
    background: rgba(17, 24, 39, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-top: 4.5px solid #60a5fa !important;
    box-shadow: 0 25px 40px -10px rgba(0, 0, 0, 0.6) !important;
}

.dark main > div:has(.mb-4.md\:mb-6) .space-y-6 .text-slate-800,
.dark main > div:has(.mb-4.md\:mb-6) .space-y-6 div:has(> svg.text-orange-500) {
    color: #f8fafc !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark main > div:has(.mb-4.md\:mb-6) .space-y-6 div:has(> svg.text-orange-500) svg {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.2) 100%) !important;
    color: #60a5fa !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

/* Empty State di Mode Gelap */
.dark main > div:has(.mb-4.md\:mb-6) .space-y-6 .text-gray-500.text-center,
.dark main > div:has(.mb-4.md\:mb-6) .space-y-6 div[class*="text-center"][class*="py-8"] {
    background: rgba(30, 41, 59, 0.5) !important;
    border-color: rgba(71, 85, 105, 0.6) !important;
    color: #94a3b8 !important;
}

/* Kotak Item Ujian di Mode Gelap */
.dark main > div:has(.mb-4.md\:mb-6) .space-y-6 .border.border-gray-200,
.dark main > div:has(.mb-4.md\:mb-6) .space-y-6 .border.dark\:border-slate-700 {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-left: 5px solid #60a5fa !important;
    box-shadow: 0 8px 16px -2px rgba(0, 0, 0, 0.4) !important;
}

.dark main > div:has(.mb-4.md\:mb-6) .space-y-6 h3 {
    color: #f8fafc !important;
}

.dark main > div:has(.mb-4.md\:mb-6) .space-y-6 p {
    color: #cbd5e1 !important;
}

.dark main > div:has(.mb-4.md\:mb-6) .space-y-6 span.rounded-full {
    background-color: rgba(6, 78, 59, 0.4) !important;
    color: #34d399 !important;
    border: 1px solid rgba(5, 150, 105, 0.4) !important;
}


/* ----------------------------------------------------------
   7. NAVBAR ACTIVE STATE & FOOTER
   ---------------------------------------------------------- */

header nav a {
    transition: all 0.2s ease !important;
    border-radius: 0.65rem !important;
}

footer {
    border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
}

footer span {
    font-weight: 600 !important;
    color: #475569 !important;
}

.dark footer {
    border-top: 1px solid rgba(51, 65, 85, 0.5) !important;
}

.dark footer span {
    color: #94a3b8 !important;
}