/* ========================================= */
/* ==   1. VARIABEL GLOBAL ("TOKO CAT")   == */
/* ========================================= */
:root {
    --warna-primer: #1F3A5F;       /* Biru Tua Elegan */
    --warna-primer-gelap: #2F4A70; 
    --warna-sekunder: #006D77;     /* Hijau Tosca */
    --warna-sekunder-gelap: #007F8A; 
    --warna-teks-utama: #1e293b;
    --warna-teks-pendukung: #64748b;
    --warna-teks-putih: #ffffff;
    --warna-bg-body: #f6fcf8;
    --warna-border: #e2e8f0;
    --shadow-halus: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --shadow-tebal: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* ========================================= */
/* ==   2. RESET & FONDASI DASAR          == */
/* ========================================= */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { height: 100%; scroll-behavior: smooth; }

body {
    font-family: 'Poppins', 'Nunito', sans-serif;
    color: var(--warna-teks-utama);
    line-height: 1.5;
    background-color: var(--warna-bg-body);
    background-image: 
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #ecfdf5 0%, #f6fcf8 40%, #ffffff 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex; flex-direction: column;
    min-height: 100vh; overflow-x: hidden;
}

body.bg-landing-mode {
    background-image: url('images/bg-depan.png') !important; 
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
}

a { text-decoration: none; color: inherit; }

/* ========================================= */
/* ==   3. HEADER UTAMA (Top Bar)         == */
/* ========================================= */
.header {
    position: fixed; top: 0; left: 0; right: 0;
    height: 70px;
    background: #ffffff;
    box-shadow: var(--shadow-halus);
    display: none; justify-content: space-between; align-items: center;
    padding: 0 25px;
    z-index: 1100;
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--warna-border);
}

.header-left { display: flex; align-items: center; gap: 15px; }
.logo-image { height: 40px; width: auto; object-fit: contain; }
.app-brand { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.brand-name { font-size: 1.1rem; font-weight: 800; color: var(--warna-primer); }
.brand-subtitle { font-size: 0.75rem; color: var(--warna-teks-pendukung); }

#desktopDateTime {
    font-size: 0.85rem; color: var(--warna-teks-pendukung); font-weight: 600;
    background: #f1f5f9; padding: 5px 10px; border-radius: 20px;
}
#mobileClock { display: none; }
.menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--warna-primer); }


/* =========================================
   GAYA BREADCRUMBS & HEADER BAR (LENGKAP)
   ========================================= */

/* 1. Wadah Utama (Bar Abu-abu) */
.breadcrumb-container {
    background-color: #dddddd73;
    padding: 10px 20px;
    border-bottom: 1px solid #e2e8f0;
    
    /* POSISI & LAYOUT */
    margin-top: 0px;
    margin-left: 60px; /* Jarak dari Menu Samping */
    
    /* TEKNIK KIRI - KANAN (Flexbox) */
    display: none;
    justify-content: space-between; /* Dorong isi ke ujung kiri & kanan */
    align-items: center; /* Rata tengah vertikal */
    
    position: relative; 
    z-index: 1;
    transition: margin-left 0.3s ease;
}

/* 2. Deskripsi Halaman (Sebelah Kanan) */
.page-description {
    font-size: 0.85rem;
    color: #64748b; 
    font-style: italic;
    font-weight: 500;
    max-width: 50%; 
    text-align: right;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
}

/* 3. PERBAIKAN ITEM NAVIGASI (HAPUS NOMOR 1. 2.) */
.breadcrumb {
    display: flex !important;       /* Wajib ke samping (Horizontal) */
    flex-wrap: wrap;
    list-style: none !important;    /* PENTING: Menghapus angka 1. 2. */
    padding: 0 !important;          /* Hapus jarak bawaan */
    margin: 0 !important;
    align-items: center;            
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 0.85rem; /* Ukuran font disamakan */
}

/* Memastikan pemisah (tanda >) muncul rapi */
.breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: #94a3b8;
    padding: 0 8px;
    font-weight: bold;
}

/* Link Navigasi */
.breadcrumb-item a {
    color: #1F3A5F;
    text-decoration: none;
    font-weight: 600;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: #64748b;
    pointer-events: none;
}

/* 4. RESPONSIVE (Tampilan HP) */
@media (max-width: 768px) {
    .breadcrumb-container {
        margin-left: 0;
        margin-top: -10px;
    }
    .page-description {
        display: none; /* Sembunyikan deskripsi di layar kecil */
    }
}


/* ========================================= */
/* ==   4. SIDEBAR (Menu Samping)         == */
/* ========================================= */
.sidebar {
    position: fixed; top: 70px; left: 0;
    height: calc(100vh - 70px); width: 250px;
    background: #ffffff; border-right: 1px solid var(--warna-border);
    display: none; flex-direction: column;
    z-index: 1000;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible; /* Penting untuk tooltip */
}

/* Mode Collapsed (Mengecil) */
.sidebar.collapsed { width: 70px; }

.sidebar-header {
    padding: 20px; display: flex; align-items: center;
    border-bottom: 1px solid var(--warna-border);
    min-height: 80px; overflow: hidden; 
}

.user-avatar {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--warna-primer); color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; flex-shrink: 0; margin-right: 12px;
}

.user-info { opacity: 1; transition: opacity 0.2s; white-space: nowrap; }
.sidebar.collapsed .user-info { opacity: 0; pointer-events: none; }
.user-name { font-size: 0.9rem; font-weight: 700; color: var(--warna-teks-utama); }
.user-role { font-size: 0.75rem; color: var(--warna-teks-pendukung); }

.menu-section { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px; }

/* Scrollbar Tipis Minimalis */
.menu-section::-webkit-scrollbar {
    width: 3px; /* Sangat tipis */
}

.menu-section::-webkit-scrollbar-track {
    background: transparent; 
}

.menu-section::-webkit-scrollbar-thumb {
    background-color: #cbd5e1; /* Abu-abu muda */
    border-radius: 10px;
}

.menu-section::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8; /* Sedikit gelap saat didekati mouse */
}

.menu-title { font-size: 0.7rem; text-transform: uppercase; color: #94a3b8; font-weight: 700; margin: 15px 0 5px 10px; white-space: nowrap; }
.sidebar.collapsed .menu-title { display: none; }

.menu-item {
    display: flex; align-items: center; padding: 10px;
    border-radius: 8px; color: var(--warna-teks-pendukung);
    cursor: pointer; margin-bottom: 4px; transition: all 0.2s;
    position: relative; text-decoration: none;
}
.menu-item:hover { background-color: #f1f5f9; color: var(--warna-primer); }
.menu-item.active { background-color: #e0f2fe; color: var(--warna-primer); font-weight: 600; }

.menu-icon { display: flex; align-items: center; justify-content: center; width: 24px; flex-shrink: 0; }
.menu-text { margin-left: 12px; font-size: 0.9rem; white-space: nowrap; transition: opacity 0.2s; }
.sidebar.collapsed .menu-text { display: none; }

/* Tooltip */
/* Tooltip Versi Fixed (Anti-Terpotong) */
.tooltip {
    position: fixed; /* Menembus batasan overflow sidebar */
    background-color: #1e293b;
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 99999; /* Pastikan di atas semua elemen */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    
    /* Hilangkan left/top/transform bawaan karena akan diatur JS */
    left: 0;
    top: 0;
}

/* Panah kecil */
.tooltip::before {
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: -4px;
    transform: translateY(-50%);
    border-width: 4px; 
    border-style: solid; 
    border-color: transparent #1e293b transparent transparent;
}

/* Trigger muncul hanya saat sidebar mengecil */
.sidebar.collapsed .menu-item:hover .tooltip { 
    opacity: 1; 
    visibility: visible; 
}

.toggle-btn {
    position: absolute; bottom: 20px; right: 20px;
    width: 32px; height: 32px; background: var(--warna-primer);
    color: white; border-radius: 50%; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 1002;
}
.sidebar.collapsed .toggle-btn { right: 50%; transform: translateX(50%); }
.close-sidebar-btn { display: none; }

/* ========================================= */
/* ==   6. LAYOUT KONTEN (PENTING!)       == */
/* ========================================= */
/* Ini kode yang memperbaiki margin agar tidak 'lebar sebelah' */

.page, .main-content {
    /* Posisi Normal (Saat Sidebar Terbuka) */
    margin-left: 250px; 
    padding-top: 30px;
    padding-bottom: 20px;
    width: auto;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* LOGIKA OTOMATIS: Jika Sidebar Mengecil (.collapsed), Margin ikut mengecil */
body:has(.sidebar.collapsed) .page,
body:has(.sidebar.collapsed) .main-content {
    margin-left: 60px !important;
    margin-top: -30px;
}

/* "Hei Browser, kalau lagi di halaman depan (bg-landing-mode), 
   margin kirinya JANGAN 250px, tapi ubah jadi 0 saja!" */

body.bg-landing-mode .page, 
#homePage {
    margin-left: 0 !important; /* <--- INI OBATNYA */
}

/* =========================================
   CUSTOM SCROLLBAR UTAMA (BODY)
   ========================================= */

/* Lebar Scrollbar Utama */
body::-webkit-scrollbar {
    width: 8px; /* Sedikit lebih lebar dari sidebar agar mudah diklik mouse */
}

/* Jalur Belakang (Track) */
body::-webkit-scrollbar-track {
    background: #f8fafc; /* Warna background sangat muda/putih */
}

/* Batang Scroll (Thumb) */
body::-webkit-scrollbar-thumb {
    background-color: #cbd5e1; /* Abu-abu soft */
    border-radius: 10px;       /* Membulat */
    border: 2px solid #f8fafc; /* Memberi jarak (padding) biar cantik */
}

/* Saat Mouse Hover di Scrollbar */
body::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8; /* Sedikit lebih gelap saat disentuh */
}

/* ======================================================= */
/* ==      FIX LAYOUT LAPORAN (AGAR RATA TENGAH)        == */
/* ======================================================= */

/* 1. Atur Wadah Utama Laporan */
.report-page-content {
    /* Lebar maksimal agar enak dilihat di layar lebar */
    max-width: 1200px !important; 
    width: 95% !important;        /* Beri jarak sedikit di HP */
    
    /* INI KUNCINYA: Membuat konten berada di tengah */
    margin: 0 auto !important;    
    
    /* Reset padding agar rapi */
    padding: 20px 0 !important;   
    
    /* Pastikan flex direction tetap kolom */
    display: flex;
    flex-direction: column;
}

/* 2. Pastikan Tabel Laporan Putih & Bersih */
/* Menggunakan style yang sama dengan Manajemen Iuran */
.report-page-content .table-wrapper {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    margin-top: 20px;
    width: 100%;
}

/* 3. Perbaiki Input Pencarian di Laporan */
.report-page-content input[type="text"],
.report-page-content select,
.report-page-content input[type="date"] {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.9rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

input#searchKabar {
    padding-left: 50px;
}


/* 4. Responsif di HP */
@media (max-width: 768px) {
    .report-page-content {
        width: 100% !important;
        padding: 10px !important;
        max-width: none !important;
    }

    input#searchKabar {
        padding-left: 45px;
        width: 95%;
        margin-left: 10px;
    }

    .search-box-wrapper svg {
        left: 30px !important;
    }
    
    /* Agar filter (Input/Select) tumpuk ke bawah di HP */
    .filter-row {
        flex-direction: column !important;
        gap: 10px !important;
    }
}

/* ========================================= */
/* ==   7. LOGIKA RESPONSIF (HP / TABLET) == */
/* ========================================= */
@media (max-width: 768px) {
    .header { height: 60px; padding: 0 15px; }
    .brand-subtitle, #desktopDateTime { display: none; }
    #mobileClock { display: block; font-size: 0.8rem; font-weight: bold; color: var(--warna-primer); }
    .menu-toggle { display: block; }
    
    .sidebar {
        top: 60px; height: calc(100vh - 60px); left: 0;
        width: 100% !important; max-width: 280px;
        transform: translateX(-100%); box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    }
    .sidebar.active { transform: translateX(0); }
    
    .sidebar.collapsed { width: 100% !important; max-width: 280px !important; }
    .sidebar.collapsed .menu-text, .sidebar.collapsed .menu-title, .sidebar.collapsed .user-info {
        display: block !important; opacity: 1 !important;
    }
    
    .toggle-btn { display: none; }
    .close-sidebar-btn {
        display: block; position: absolute; top: 10px; right: 10px;
        background: transparent; border: none; font-size: 1.5rem; color: #ef4444;
    }

    /* Reset Margin di HP agar penuh layar */
    .page, .main-content { margin-left: 0 !important; width: 100%; padding-top: 10px; }
}

/* ======================================================= */
/* == BATAS KODE BARU (Kode Lama Anda Lanjut di Bawah) == */
/* ======================================================= */



/* Mengatur fondasi dasar halaman */
html {
    height: 100%;
    font-family: 'Poppins', sans-serif;
}


/* Mengatur Header dan Footer yang posisinya tetap */
.header, .footer {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1000;
}


/* --- UPDATE STYLE FOOTER (CLEAN VERSION) --- */

.footer {
    position: fixed; 
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px 0;
    
    /* Hanya menengahkan teks */
    display: none;
    justify-content: center; 
    align-items: center;
    
    background: transparent; 
    z-index: 99;
    pointer-events: none; /* User bisa klik tembus footer */
}

.footer-text {
    font-size: 12px;
    color: #999; 
    font-weight: 500;
    pointer-events: auto; /* Teks tetap bisa di-blok */
    text-shadow: 0 1px 2px rgba(255,255,255,0.8); /* Agar terbaca di background gelap */
}

/* HAPUS class .footer-button dan .footer-button img karena tidak dipakai lagi */




#loginGuru, #loginWali, #mainPage {
    justify-content: center;
    padding-bottom: 80px;
    padding-top: 80px;
}

#loginWali input {
    text-align: center; /* Input kode biasanya bagus di tengah */
}


/* ================================================================ */
/* == AKHIR DARI FONDASI LAYOUT BARU == */
/* ================================================================ */
        * {
            box-sizing: border-box;
        }


        .header-left, .header-right {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .header-right {
            align-items: flex-end;
            text-align: right;
        }

        .back-button {
            background: var(--warna-primer); /* <-- Ganti dengan ini */
            color: var(--warna-teks-putih); /* <-- Ganti juga 'white' agar konsisten */
            border: none;
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(31, 58, 95, 0.3);
        }

        .back-button:hover {
            background: var(--warna-primer-gelap);
            box-shadow: 0 4px 12px rgba(31, 58, 95, 0.4);
            transform: translateY(-1px);
        }

        /* Logo dan Judul */
        .logo-section {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            gap: 20px;
        }

        .logo {
            width: 80px;
            height: 80px;
            object-fit: contain;
        }

        .title {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--warna-primer);
            margin: 0;
        }

        /* Teks Pembuka */
        .welcome-text {
            font-size: 1.1rem;
            color: #555;
            text-align: center;
            margin-bottom: 10px;
            max-width: 600px;
            line-height: 1.6;
            font-weight: 400;
        }

        /* Container Tombol */
        .button-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            width: 100%;
            max-width: 600px;
        }

        /* Tombol Utama */
        .main-button {
            background: var(--warna-primer);
            color: var(--warna-teks-putih);
            border: none;
            padding: 13px 40px;
            border-radius: 50px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(31, 58, 95, 0.3);
            width: 100%;
            max-width: 500px;
        }

        .main-button:hover {
            background: var(--warna-primer-gelap);
            box-shadow: 0 6px 20px rgba(31, 58, 95, 0.4);
            transform: translateY(-2px);
        }

        .main-button.tosca {
            background: var(--warna-sekunder);
        }

        .main-button.tosca:hover {
            background: var(--warna-sekunder-gelap);
            box-shadow: 0 6px 20px rgba(0, 109, 119, 0.4);
        }

        /* Garis Pemisah */
        .separator {
            width: 100%;
            max-width: 500px;
            height: 2px;
            background: #A4A4A4;
            margin: 15px 0 15px 0;
        }

        /* Teks Kecil */
        .small-text {
            font-size: 0.9rem;
            color: #666;
            text-align: center;
            margin-top: 5px;
            margin-bottom: 5px;
            line-height: 1.5;
        }

        /* Tombol Masuk */
        .login-button {
            background: #c5c4c477;
            color: rgb(19, 14, 78);
            border: line;
            padding: 5px 10px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .login-button:hover {
            background: #c7cad4;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
            transform: translateY(-2px);
        }

       

        .page-title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--warna-primer);
            margin-bottom: 20px;
        }


        .form-container {
            width: 95%;
            margin: 0 auto;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            background-color: #ffffff9d;
            box-sizing: border-box;
        }

        /* Form Pendaftaran Styles */
        .form-pendaftaran {
           max-width: 1000px; 
        }
        
        .form-wali {
            max-width: 900px;
        }

        .form-login {
            max-width: 550px; /* Form login sempit */
        }

        .form-title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--warna-primer);
            margin-bottom: 30px;
            text-align: center;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-pendaftaran .form-group label .form-wali .form-group label {
            display: block;
            font-size: 0.9rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
            text-align: left;
        }

        .form-login .form-group label {
            /* Style khusus untuk label login */
            display: block;
            font-weight: 600;
            margin-bottom: 10px;
            text-align: left; /* <-- KITA UBAH JADI TENGAH */
            font-size: 1rem; /* <-- CONTOH UBAH UKURAN */
        }

        .form-wali .form-group label {
            /* Style khusus untuk label login */
            display: block;
            font-weight: 600;
            margin-bottom: 20px;
            text-align: center; /* <-- KITA UBAH JADI TENGAH */
            font-size: 1.2rem; /* <-- CONTOH UBAH UKURAN */
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 15px;
            border: 2px solid #D3D3D3;
            border-radius: 8px;
            font-size: 0.9rem;
            font-family: 'Poppins', sans-serif;
            transition: all 0.3s ease;
            background: var(--warna-teks-putih);
            text-align: left;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color:  var(--warna-primer);
            box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.1);
        }

        .form-group input[readonly] {
            background: rgba(245, 245, 245, 0.3);
            color: rgba(51, 51, 51, 0.3);
            cursor: not-allowed;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 100px;
        }
        
/* ======================================================= */
/* ==       STYLE RUANG WALI (OPTIMIZED VERSION)        == */
/* ======================================================= */

/* 3. Menghilangkan Batasan Lebar pada Kontainer Form */
#ruangWaliMurid .form-container {
    max-width: 100% !important; 
    width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
}

/* 1. Paksa Kontainer Utama untuk Melebar Luas */
.ruangwali-container {
    width: 95% !important;     /* Menggunakan 95% lebar layar */
    max-width: 1600px !important; /* Batas maksimal yang sangat luas untuk monitor besar */
    margin: 0 auto;
    padding: 0 20px;
}

/* 2. Optimasi Grid agar Mengisi Seluruh Baris */
.selection-grid {
    display: grid;
    /* Meningkatkan min-width kartu agar tidak terlalu kecil di layar lebar */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 20px;
    margin: 30px 0;
}

.selection-card {
    position: relative;
    cursor: pointer;
}

.selection-card input[type="radio"] {
    position: absolute; opacity: 0;
}

.selection-card-content {
    width: 100%;
    min-height: 100px; /* Tinggi seragam */
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

.svg-icon {
    width: 50px; /* Ukuran disesuaikan agar proporsional */
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f1f5f9;
    color: #64748b;
    flex-shrink: 0;
}

/* State: Checked (Dipilih) */
.selection-card input:checked + .selection-card-content {
    border-color: var(--warna-sekunder);
    background: #f0fdfa;
    box-shadow: 0 0 0 1px var(--warna-sekunder);
}

.selection-card input:checked + .selection-card-content .svg-icon {
    background: var(--warna-sekunder);
    color: #ffffff;
}

/* 4. Membuat Area Pesan (Textarea) Mengikuti Lebar Penuh */
.textarea-wrapper textarea {
    width: 100%;
    max-width: 100%;
    min-height: 200px; /* Lebih tinggi sedikit agar lebih nyaman di layar besar */
    box-sizing: border-box;
    border-radius: 10px;
}

.textarea-wrapper textarea:focus {
    outline: none;
    border-color: var(--warna-sekunder);
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.1);
}

/* 5. Perbaikan Tombol Kirim agar Melebar Serasi */
#ruangWaliMurid .submit-button {
    width: 100%;             /* Tombol memanjang memenuhi seluruh form bawah */
    max-width: 100%; 
    padding: 18px;           /* Lebih tebal sedikit untuk layar lebar */
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 20px;
    display: block;
    cursor: pointer;
    background: var(--warna-sekunder);
    color: white;
    border-radius: 12px;
    border: none;
    transition: all 0.3s ease;
}

/* Efek Hover */
#ruangWaliMurid .submit-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(13, 148, 136, 0.3);
}

/* Responsif */
@media (max-width: 768px) {
    .selection-grid { grid-template-columns: 1fr; }
    #ruangWaliMurid .form-actions { text-align: center; }
    #ruangWaliMurid .submit-button { width: 100%; }

    #ruangWaliMurid .form-container {
        max-width: 100% !important;
        padding: 0 15px !important;
    }
    
    .selection-grid {
        grid-template-columns: 1fr !important; /* Satu baris di HP agar mudah ditekan */
    }
}


/* =================================
==      TOMBOL LOGOUT BARU      ==
================================= */

.logout-button {
    background-color: #c54c1c; /* Warna merah (bahaya) */
    color: var(--warna-teks-putih);
    border: none;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    margin-left: 15px; /* Jarak dari jam */
    transition: background-color 0.2s ease;
}

.logout-button:hover {
    background-color: #c82333; /* Merah lebih gelap saat disentuh */
}

/* Di HP, kita buat tombolnya sedikit lebih kecil */
@media (max-width: 768px) {
    .logout-button {
        padding: 3px 8px;
        font-size: 0.7rem;
        margin-left: 10px;
    }
}

        .form-info {
            background: #F5F5F5;
            padding: 5px;
            border-radius: 8px;
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 25px;
            text-align: center;
            font-style: italic;
        }

        .submit-button {
            width: 100%;
            background: var(--warna-primer);
            color: var(--warna-teks-putih);
            border: none;
            padding: 10px;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(31, 58, 95, 0.3);
            margin-top: 10px;
        }

        .submit-button:hover {
            background: var(--warna-primer-gelap);
            box-shadow: 0 6px 20px rgba(31, 58, 95, 0.4);
            transform: translateY(-2px);
        }
        
        .submit-button:disabled {
            background-color: #A4A4A4;
            cursor: not-allowed;
            box-shadow: none;
            transform: none;
        }

        .password-container {
            position: relative;
        }

        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            padding: 5px;
            font-size: 1.2rem;
            color: #666;
            transition: color 0.3s ease;
        }

        .password-toggle:hover {
            color: var(--warna-primer);
        }

        .eye-icon {
            display: inline-block;
            user-select: none;
        }

        .main-page-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            padding: 10px 10px; 
        }

        .main-page-title {
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--warna-primer);
            margin-bottom: 30px;
        }

        .main-logo-section {
            margin-bottom: 10px;
        }

        .main-logo {
            height: 200px;
            width: auto;
            object-fit: contain;
            background: transparent;
        }

        .main-welcome-text {
            margin-bottom: 5px;
            font-size: 1.2rem;
            color: #555;
            line-height: normal;
            font-weight: 500;
        }

        .main-welcome-text p {
            margin: 5px 0;
        }

        .main-menu-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 40px;
        }

        .main-menu-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 300px;
            height: 180px;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            padding: 20px;
            text-decoration: none;
        }

        .guru-button {
            background: linear-gradient(135deg, #1F3A5F 0%, #2F4A70 100%);
        }

        .wali-button {
            background: linear-gradient(135deg, #006D77 0%, #007F8A 100%);
        }

        .main-menu-button:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        }

        .guru-button:hover {
            background: linear-gradient(135deg, #2F4A70 0%, #3F5A80 100%);
        }

        .wali-button:hover {
            background: linear-gradient(135deg, #007F8A 0%, #008F9A 100%);
        }

        .menu-icon {
            width: 190px;
            height: 135px;
            object-fit: contain;
            background: transparent;
        }

        .menu-label {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--warna-teks-putih);
            text-align: center;
            line-height: 1.2;
        }

        /* --- TAMBAHKAN ATURAN BARU INI --- */

        /* Atur lebar Halaman Penilaian (lebih sempit) */
        .page-penilaian {
        max-width: 500px; 
        }

        /* Atur lebar Halaman Kelola Kode (mungkin sama seperti pendaftaran) */
        .page-kelola-kode {
        max-width: 900px;
        }

        /* Atur lebar Halaman Iuran (lebih LEBAR untuk tabel) */
        .page-iuran {
        max-width: 1200px;
        }

/* ======================================================= */
/* ==      STYLE KHUSUS Halaman Manajemen Iuran         == */
/* ======================================================= */

/* 1. HILANGKAN CONTAINER (BORDER BIRU & BACKGROUND) */
#manajemenIuran .form-container {
    max-width: 1255px !important; /* Kita lebarkan agar tabel leluasa */
    margin: 0 auto;
    
    /* Reset Tampilan Kotak */
    background: transparent !important;
    box-shadow: none !important;
    border: none !important; /* Hapus border biru samping */
    padding: 5px !important;
    margin-bottom: 50px;
}

/* 2. Styling Input & Select (Agar Kontras & Rapi) */
#manajemenIuran select,
#manajemenIuran input[type="text"] {
    padding: 10px;
    background-color: #ffffff; /* Pastikan input putih bersih */
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.9rem;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.3s;
}

#manajemenIuran select:focus,
#manajemenIuran input:focus {
    border-color: var(--warna-primer);
    box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.1);
}

/* 3. Tombol Generate & Reset (Penyesuaian Ukuran) */
#manajemenIuran .submit-button,
#manajemenIuran .reset-filter-btn {
    border-radius: 5px;
    padding: 10px 20px;
    height: auto; /* Biarkan tinggi menyesuaikan */
}

button.submit-button.tosca-btn {
    font-size: 0.75rem;
    padding-top: 14px !important;
    padding-bottom: 12px !important;
}

/* 4. Judul Halaman */
#manajemenIuran h2 {
    font-size: 1rem;
    color: var(--warna-primer);
    font-weight: 700;
    margin-bottom: 5px;
    text-align: left;
}

/* 5. Tabel Wrapper (Wajib Putih agar data terbaca) */
/* Kita pastikan tabelnya punya wadah sendiri yang putih */
#manajemenIuran .table-wrapper {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    padding: 0; /* Reset padding wrapper tabel */
    margin-top: 20px;
    overflow: hidden;
}

/* --- RESPONSIF HP --- */
@media (max-width: 768px) {
    #manajemenIuran .form-container {
        width: 100% !important;
        padding: 0 10px !important; /* Sedikit jarak kiri-kanan di HP */
    }

    /* Input & Select di HP */
    #manajemenIuran select,
    #manajemenIuran input[type="text"] {
        font-size: 0.85rem;
        padding: 8px;
    }
    
    /* Tombol Generate di HP */
    #manajemenIuran .form-row-iuran .submit-button {
        width: 100%;
        margin-top: 10px;
    }
}

        .teacher-menu-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 100%;
            max-width: 1300px;
            margin: 0 auto;
            padding: 10px;
            margin-bottom: 25px;
        }

        .teacher-menu-title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--warna-primer);
            margin-bottom: 20px;
            text-align: center;
        }

        .teacher-menu-description {
            font-size: 1.1rem;
            color: #666;
            line-height: 1.6;
            margin-bottom: 25px;
            max-width: 800px;
            text-align: center;
        }

/* ========================================= */
/* ==   DASHBOARD RUANG GURU (GRID FIX)   == */
/* ========================================= */

/* 1. Container Grid (UBAH JADI DISPLAY: GRID) */
.teacher-menu-container {
    display: grid; /* KUNCI UTAMA: Ganti flex jadi grid */
    
    /* Di layar laptop: Otomatis isi kolom, minimal lebar kartu 180px */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    
    gap: 20px; 
    margin-top: 10px;
    padding-bottom: 20px;
    width: 100%;
    max-width: 1250px;
}

/* 2. Kartu Menu */
.teacher-menu-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e2e8f0; 
    border-radius: 20px;
    padding: 20px;
    
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    width: 100%; /* Pastikan memenuhi kotak grid */
    height: 180px; /* Tinggi standar desktop */
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

/* ... (Style hover, after, icon, label untuk desktop biarkan sama) ... */
.teacher-menu-button::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, transparent, var(--warna-primer, #2563eb), transparent);
    opacity: 0.5;
    transition: opacity 0.3s;
}

.teacher-menu-button:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: var(--warna-primer, #2563eb);
}

.teacher-menu-button:hover::after {
    opacity: 1;
    height: 8px;
}

.teacher-menu-icon {
    width: 70px;
    height: 70px;
    object-fit: contain;
    margin-bottom: 15px;
    transition: transform 0.4s ease;
}

.teacher-menu-button:hover .teacher-menu-icon {
    transform: scale(1.15) rotate(3deg);
}

.teacher-menu-label {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
    line-height: 1.3;
}


/* ========================================= */
/* ==   KHUSUS TAMPILAN HP (2 KOLOM)      == */
/* ========================================= */

@media (max-width: 768px) {
    .teacher-menu-container {
        /* PAKSA JADI 2 KOLOM SEJAJAR */
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 12px; /* Jarak antar tombol diperkecil biar muat */
        margin-bottom: 20px;
    }
    
    .teacher-menu-button {
        /* Kecilkan tinggi kartu agar ringkas */
        height: 80px !important; 
        padding: 15px 10px !important;
        border-radius: 16px !important;
    }
    
    .teacher-menu-icon {
        /* Kecilkan ikon agar proporsional */
        width: 45px !important;
        height: 45px !important;
        margin-bottom: 10px !important;
    }
    
    .teacher-menu-label {
        /* Kecilkan huruf sedikit */
        font-size: 0.8rem !important; 
        font-weight: 600 !important;
    }
}

/* ========================================= */
/* ==   TOMBOL KEMBALI KHUSUS FORMULIR    == */
/* ========================================= */

.form-back-btn {
    background: transparent;
    border: none;
    color: #64748b; /* Abu-abu soft */
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    
    /* Tata letak flex agar ikon & teks sejajar */
    display: flex;
    align-items: center;
    gap: 8px;
    
    /* Posisi: Geser ke kiri atas */
    margin-bottom: 10px; 
    padding: 5px 0;
    
    transition: all 0.3s ease;
}

/* Warna ikon SVG mengikuti warna teks */
.form-back-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor; 
    transition: transform 0.3s ease;
}

/* Efek saat disorot (Hover) */
.form-back-btn:hover {
    color: var(--warna-primer); /* Berubah jadi warna tema (Biru) */
    transform: translateX(-3px); /* Geser sedikit ke kiri (efek petunjuk arah) */
}

/* Khusus HP: Beri jarak sedikit biar gampang dipencet */
@media (max-width: 768px) {
    .form-back-btn {
        font-size: 1rem;
        padding: 10px 0;
    }
}


/* ========================================= */
/* ==   TEACHER DASHBOARD SUMMARY CARD    == */
/* ========================================= */

.dashboard-summary-card {
    width: 100%;
    background: #f8f9fa;
    border-radius: 24px; /* Sudut membulat sama dengan menu */
    padding: 30px 40px;
    margin-bottom: 30px; /* Jarak ke menu di bawahnya */
    margin-top: 10px;
    
    /* Layout Kiri (Teks) & Kanan (Angka) */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    
    /* Dekorasi */
    border: 1px solid #fff; /* Border putih agar menyatu */
    box-shadow: 0 10px 40px rgba(31, 58, 95, 0.08); /* Shadow lembut */
    position: relative;
    overflow: hidden;
}

/* Hiasan Background Halus (Opsional) */
.dashboard-summary-card::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 200px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(240, 249, 255, 0.5));
    z-index: 0;
    pointer-events: none;
}

/* --- Bagian Kiri: Sapaan --- */
.summary-left {
    flex: 1;
    z-index: 1;
    text-align: left;
}

.summary-greeting {
    font-size: 2rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 5px 0;
}

.summary-date {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
    margin-bottom: 15px;
    display: inline-block;
    background: #f1f5f9;
    padding: 5px 12px;
    border-radius: 20px;
}

.summary-quote {
    font-size: 1rem;
    color: #475569;
    font-style: italic;
    line-height: 1.5;
    max-width: 500px;
    border-left: 4px solid var(--warna-primer);
    padding-left: 15px;
}

/* --- Bagian Kanan: Statistik (Grid Kecil) --- */
.summary-stats {
    display: flex;
    gap: 15px;
    z-index: 1;
}

.stat-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 15px 20px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    transition: transform 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.stat-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px rgba(0,0,0,0.05);
    border-color: var(--warna-primer);
}

.stat-icon-bg {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.stat-label {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 5px;
}

/* Pastikan ikon SVG berada persis di tengah lingkaran/kotak */
.stat-icon-bg svg {
    display: block;
    margin: 0 auto;
}

/* --- Responsif HP --- */
@media (max-width: 900px) {
    .dashboard-summary-card {
        flex-direction: column; /* Tumpuk ke bawah */
        align-items: flex-start;
        padding: 15px;
        gap: 5px;
        padding-bottom: 20px;
    }
    
    .summary-stats {
        display: flex;           /* Pastikan tetap flex */
        flex-wrap: nowrap;       /* KUNCI: Jangan biarkan turun baris */
        justify-content: space-between; /* Bagi jarak secara merata */
        width: 100%;             /* Gunakan lebar penuh layar */
        gap: 5px;                /* Jarak antar kotak (sesuaikan selera) */
        padding: 0 0px;         /* Beri sedikit napas di kiri-kanan layar */
    }
    
    .stat-box {
        flex: 1;                 /* Paksa semua kotak punya ukuran setara */
        min-width: 0;            /* Penting! Agar kotak mau mengecil jika teks panjang */
        width: auto;             /* Reset width manual jika ada */
        margin: 0;               /* Hapus margin jika ada, kita pakai gap */
        
        /* Opsional: Kecilkan padding agar muat */
        padding: 10px 5px;       
    }
    
    .summary-greeting {
        font-size: 1.3rem;
        text-align: left !important;
    }

    .stat-box h3, 
    .stat-box .stat-number, 
    .stat-box p {
        font-size: 0.95rem !important;       /* Sesuaikan ukuran font */
        white-space: nowrap;     /* Opsional: Mencegah teks turun baris */
        overflow: hidden;        /* Sembunyikan jika terlalu panjang */
        text-overflow: ellipsis; /* Tambah ... jika kepotong */
    }
}

/* ======================================================== */
/* ==  FIX LAYOUT KARTU STATISTIK (FLEXBOX RAPI)         == */
/* ======================================================== */

@media only screen and (max-width: 768px) {
    
    .stat-box {
        /* 1. Gunakan Flexbox Modern */
        display: flex !important; 
        flex-direction: column !important; /* Susun ke bawah (Vertikal) */
        align-items: center !important;    /* Rata tengah horizontal */
        justify-content: center !important; /* Rata tengah vertikal */
        text-align: center !important;      /* Pastikan teks juga rata tengah */
        
        /* 2. Atur Jarak */
        padding: 7px 5px 10px 7px !important; /* Atas-Bawah 15px, Kiri-Kanan 5px */
        gap: 5px !important; /* Jarak antar elemen (Ikon-Angka-Teks) */
        
        /* 3. Pastikan tidak gepeng */
        
        width: 100% !important;
        flex-wrap: nowrap;  
        align-items: center;
    }

    /* Ini pembungkus teks/angka yang terlihat di DevTools Anda (.stat-info) */
    .stat-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* Rapikan Angka */
    .stat-number {
        font-size: 1.8rem !important; /* Ukuran angka */
        line-height: 1 !important;    /* Rapatkan baris */
        margin: 5px 0 !important;     /* Beri jarak sedikit atas bawah */
        display: block !important;
    }

    /* Rapikan Label (Misal: "Setoran Hari Ini") */
    .stat-label {
        font-size: 0.8rem !important; /* Kecilkan font label agar muat */
        line-height: 1.2 !important;
        white-space: normal !important; /* Izinkan teks turun baris jika kepanjangan */
        display: block !important;
        max-width: 100%; /* Agar tidak melebar keluar kotak */
    }
    
    /* Pastikan Ikon di tengah */
    .stat-icon, .stat-box svg {
        display: block !important;
        margin: 0 auto !important;
    }
}

        .teacher-menu-icon, .report-nav-icon {
            width: 80px;
            height: 80px;
            object-fit: contain;
            margin-bottom: 15px;
            background: transparent;
        }

        .teacher-menu-label, .report-nav-label {
            font-size: 0.95rem;
            font-weight: 600;
            color: #666;
            text-align: center;
            line-height: 1.2;
            max-width: 140px;
        }

        .report-menu-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
            padding: 10px;
        }

        .report-menu-title {
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--warna-primer);
            margin-bottom: 20px;
        }

        .report-menu-description {
            font-size: 1.1rem;
            color: #666;
            line-height: 1.6;
            margin-bottom: 50px;
            max-width: 600px;
            text-align: center;
        }

        .report-menu-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 40px;
            flex-wrap: wrap;
            width: 100%;
        }

        .report-menu-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 200px;
            height: 170px;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            padding: 20px 15px;
            text-decoration: none;
        }

        .tahsin-report {
            background: linear-gradient(135deg, #1F3A5F 0%, #2F4A70 100%);
        }

        .tahfizh-report {
            background: linear-gradient(135deg, #006D77 0%, #007F8A 100%);
        }

        .report-menu-button:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        }

        .tahsin-report:hover {
            background: linear-gradient(135deg, #2F4A70 0%, #3F5A80 100%);
        }

        .tahfizh-report:hover {
            background: linear-gradient(135deg, #007F8A 0%, #008F9A 100%);
        }

        .report-menu-icon {
            width: 180px;
            height: 100px;
            object-fit: contain;
            margin-bottom: 15px;
            background: transparent;
        }

        .report-menu-label {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--warna-teks-putih);
            text-align: center;
            line-height: 1.2;
            max-width: 180px;
        }

        .modal {
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            display: none;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background: var(--warna-teks-putih);
            border-radius: 15px;
            width: 90%;
            max-width: 800px;
            max-height: 80vh;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: modalSlideIn 0.3s ease-out;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-50px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .modal-header {
            background: var(--warna-primer);
            color: var(--warna-teks-putih);
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header h3 {
            margin: 0;
            font-size: 1.5rem;
            font-weight: 600;
        }

        .close {
            font-size: 2rem;
            font-weight: bold;
            cursor: pointer;
            color: var(--warna-teks-putih);
            transition: color 0.3s ease;
            line-height: 1;
        }

        .close:hover {
            color: #ccc;
        }


@media only screen and (max-width: 768px) {

    .teacher-menu-label, .report-nav-label {
        font-size: 0.8rem;
        text-align: left;
        max-width: none;
        margin-top: -5px;
    }

    .teacher-menu-icon, .report-nav-icon {
        width: 45px;
        height: 50px;
        margin-bottom: 5px;
        margin-left: 8px;
    }

}


        .modal-body {
            padding: 30px;
            max-height: 50vh;
            overflow-y: auto;
            text-align: center;
        }

        .search-container {
            margin-bottom: 25px;
        }

        .search-container input {
            width: 100%;
            padding: 9px;
            border: 2px solid #D3D3D3;
            border-radius: 8px;
            font-size: 0.85rem;
            font-family: 'Poppins', sans-serif;
            transition: all 0.3s ease;
        }

        .search-container input:focus {
            outline: none;
            border-color: var(--warna-primer);
            box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.1);
        }

        .table-container-responsive {
            overflow-x: auto;
        }

        #studentsTable {
            width: 100%;
            border-collapse: collapse;
            font-family: 'Poppins', sans-serif;
        }

        #studentsTable thead {
            background: #F8F9FA;
        }

        #studentsTable th {
            padding: 7px 8px;
            text-align: center;
            font-weight: 600;
            color: #333;
            border-bottom: 2px solid #E5E5E5;
            font-size: 1rem;
        }

        #studentsTable td {
            padding: 10px 10px;
            border-bottom: 1px solid #E5E5E5;
            color: #555;
            font-size: 0.rem;
        }

        #studentsTable tbody tr {
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        #studentsTable tbody tr:hover {
            background-color: #F0F8FF;
        }

        #studentsTable tbody tr:last-child td {
            border-bottom: none;
        }

        .no-results {
            text-align: center;
            padding: 40px 20px;
            color: #666;
            font-style: italic;
        }

        .student-cards-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            max-height: 500px;
            overflow-y: auto;
            padding: 10px;
            border: 1px solid #E5E5E5;
            border-radius: 8px;
            background: #F8F9FA;
        }

        .student-card {
            background: var(--warna-teks-putih);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border: 1px solid #E5E5E5;
            transition: all 0.3s ease;
        }

        .student-card:hover {
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
        }

        .student-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }

        .student-name {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--warna-primer);
            margin: 0;
        }

        .student-actions {
            display: flex;
            gap: 8px;
        }

        .action-btn {
            background: var(--warna-primer);
            color: var(--warna-teks-putih);
            border: none;
            padding: 6px 7px;
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .action-btn:hover {
            background: var(--warna-primer-gelap);
            transform: translateY(-1px);
        }

        .action-btn.copy-btn {
            background: var(--warna-sekunder);
        }

        .action-btn.copy-btn:hover {
            background: var(--warna-sekunder-gelap);
        }

        .student-details {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .student-detail-item {
            display: flex;
            align-items: center;
            font-size: 0.95rem;
            color: #555;
        }

        .student-detail-item strong {
            color: #333;
            margin-right: 8px;
        }

        .no-students {
            text-align: center;
            padding: 40px 20px;
            color: #666;
            font-style: italic;
            background: var(--warna-teks-putih);
            border-radius: 8px;
        }

        .form-validation-message {
            color: var(--warna-bahaya);
            font-size: 0.85rem;
            margin-top: 5px;
            display: none;
        }

        .report-page-content {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 85vw; 
            box-sizing: border-box; 
            padding: 0 9px;
            margin-bottom: 35px !important;
        }

        .report-page-title {
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--warna-primer);
            margin-bottom: 30px;
            text-align: center;
        }

        .filter-section {
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            margin-bottom: 15px !important;
            margin-top: 15px !important;
        }

        .filter-row {
            display: flex;
            gap: 20px;
            align-items: end;
            flex-wrap: wrap;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .filter-group label {
            font-size: 0.9rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
            text-align: left;
        }

        

        .filter-group input:focus,
        .filter-group select:focus {
            outline: none;
            border-color: var(--warna-primer);
            box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.1);
        }

        .filter-actions {
            display: flex;
            align-items: end;
        }

        .reset-filter-btn {
            background: var(--warna-sekunder);
            color: var(--warna-teks-putih);
            border: none;
            padding: 8px 13px;
            border-radius: 8px;
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .reset-filter-btn:hover {
            background: var(--warna-sekunder-gelap);
            transform: translateY(-1px);
        }

        .table-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            gap: 20px;
            flex-wrap: wrap;
        }

        .refresh-btn {
            background: var(--warna-primer);
            color: var(--warna-teks-putih);
            border: none;
            padding: 8px 9px;
            border-radius: 8px;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .refresh-btn:hover {
            background: var(--warna-primer-gelap);
            transform: translateY(-1px);
        }

        .pagination-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .pagination-controls label {
            font-size: 0.8rem;
            font-weight: 500;
            color: #333;
        }

        .pagination-controls select {
            padding: 3px 10px;
            border: 2px solid #D3D3D3;
            border-radius: 6px;
            font-size: 0.8rem;
            font-family: 'Poppins', sans-serif;
        }

        .table-wrapper {
            background: var(--warna-teks-putih);
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin-bottom: 20px;
        }

        .table-container-responsive {
            overflow-x: auto;
        }

        .report-table {
            width: 100%;
            border-collapse: collapse;
            font-family: 'Poppins', sans-serif;
        }

        .report-table th {
            white-space: nowrap;
        }

        .report-table thead {
            background: var(--warna-primer);
        }

        .report-table th {
            padding: 15px 12px;
            text-align: center;
            font-weight: 600;
            color: var(--warna-teks-putih);
            font-size: 0.8rem;
        }

        .report-table td {
            padding: 15px 12px;
            border-bottom: 1px solid #E5E5E5;
            color: #555;
            font-size: 0.9rem;
            text-align:center
        }

        .report-table tbody tr {
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .report-table tbody tr:hover {
            background-color: #F0F8FF;
        }

        .report-table tbody tr:last-child td {
            border-bottom: none;
        }

        .no-data {
            text-align: center;
            padding: 40px 20px;
            color: #666;
            font-style: italic;
            background: #F8F9FA;
        }

        .status-lanjut {
            color: var(--warna-sukses);
            font-weight: 600;
        }

        .status-mengulang {
            color: var(--warna-bahaya);
            font-weight: 600;
        }

        .status-berhenti {
            color: #fd7e14;
            font-weight: 600;
        }

        .pagination-wrapper {
            display: none;
            justify-content: space-between;
            align-items: center;
            background: var(--warna-teks-putih);
            padding: 7px 10px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .pagination-info {
            font-size: 0.6rem;
            color: #666;
            font-weight: 600;
        }

        .pagination-buttons {
            display: flex;
            gap: 8px;
        }

        .pagination-btn {
            background: #F8F9FA;
            color: #333;
            border: 1px solid #D3D3D3;
            padding: 5px 5px;
            border-radius: 6px;
            font-size: 0.6rem;
            cursor: pointer;
            transition: all 0.3s ease;
            min-width: 20px;
            text-align: center;
        }

        .pagination-btn:hover {
            background: #E9ECEF;
        }

        .pagination-btn.active {
            background: var(--warna-primer);
            color: var(--warna-teks-putih);
            border-color: var(--warna-primer);
        }

        .pagination-btn:disabled {
            background: #F8F9FA;
            color: #999;
            cursor: not-allowed;
            opacity: 0.6;
        }

        .detail-modal {
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            display: none;
            justify-content: center;
            align-items: center;
        }

        .detail-modal-content {
            background: var(--warna-teks-putih);
            border-radius: 15px;
            width: 90%;
            max-width: 750px;
            max-height: 100vh;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: modalSlideIn 0.3s ease-out;
        }

        .detail-modal-header {
            background: var(--warna-primer);
            color: var(--warna-teks-putih);
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .detail-modal-header h3 {
            margin: 0;
            font-size: 1.5rem;
            font-weight: 600;
        }

        .detail-modal-body {
            padding: 30px;
            max-height: 60vh;
            overflow-y: auto;
        }

        .detail-item {
            display: flex;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #E5E5E5;
        }

        .detail-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .detail-label {
            font-weight: 600;
            color: #333;
            min-width: 120px;
            margin-right: 15px;
        }

        .detail-value {
            color: #555;
            flex: 1;
        }

        .student-report-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            text-align: center;
            width: 100%;
            max-width: 1250px;
            margin: 0 auto;
            margin-top: 10px;
            margin-bottom: 30px;
            padding: 10px;
        }

        .student-report-title {
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--warna-primer);
            margin-bottom: 10px;
        }


/* --- Styling untuk Detail Modal Tahfizh Modern --- */

.detail-info-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-family: 'Poppins', sans-serif;
}

/* 1. Header Section (Sesi & Surah) */
.detail-header-card {
    background-color: #f8fafc;
    border-left: 5px solid #0d9488; /* Warna Tosca Utama */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.detail-header-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
    gap: 10px;
}

.badge-sesi {
    background-color: #e0f2fe;
    color: #0284c7;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.text-juz {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

.detail-surah-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1e293b;
    margin: 5px 0;
    text-align: center;
}

.detail-ayat-range {
    font-size: 0.95rem;
    color: #475569;
    text-align: center;
}

/* 2. Grid Nilai (4 Kotak) */
.detail-scores-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Kolom */
    gap: 10px;
}

.score-card-mini {
    background: #fff;
    border: 3px solid #e2e8f0;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
}

.score-label {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 2px;
}

.score-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0d9488; /* Warna angka nilai */
}

/* 3. Footer Section (Rata-rata & Status) */
.detail-footer-card {
    display: flex;
    justify-content: end;
    align-items: center;
    background-color: #f0fdfa; /* Hijau muda pudar */
    padding: 15px;
    border-radius: 8px;
    border: 3px solid #008ba1;
    text-align: center;
    gap: 10px;
    flex-direction: column;
}

.avg-box {
    display: flex;
    flex-direction: column;
}

.avg-label {
    font-size: 1rem;
    font-weight: 650;
    color: #115e59;
}

.avg-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f766e;
}

.status-badge-lg {
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Warna Status Dinamis (Bisa disesuaikan JS nanti, ini default styling) */
.status-lulus { background: #dcfce7; color: #166534; border: 2px solid #bfbfbf}
.status-ulang { background: #fee2e2; color: #991b1b; border: 2px solid #bfbfbf}


/* =========================================
   1. CORE VARIABLES & ANIMATIONS (Biodata)
   ========================================= */
:root {
    /* Palette Warna Premium */
    --primary-gradient: linear-gradient(135deg, #0F2027 0%, #203A43 50%, #2C5364 100%);
    --accent-color: #3b82f6; /* Electric Blue */
    --bg-body: #eef2f3;
    
    --stat-success: #10b981;
    --stat-warning: #f59e0b;
    --stat-danger: #ef4444;

    /* Bayangan Halus */
    --shadow-soft: 0 10px 40px -10px rgba(0,0,0,0.1);
    --shadow-hover: 0 20px 50px -12px rgba(0,0,0,0.25);
}

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

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* =========================================
   2. MAIN CARD (GLASS EFFECT)
   ========================================= */
.student-biodata-card {
    display: flex;
    flex-direction: row; /* Desktop: Foto di kiri, Info di kanan */
    
    width: 100%;
    max-width: 1250px; /* BATASI LEBARNYA AGAR TIDAK KELEBARAN */
    
    /* KUNCI SUPAYA DI TENGAH: Atas-Bawah 20px, Kiri-Kanan AUTO */
    margin: 20px auto; 
    
    /* Hapus posisi manual yang bikin error */
    position: relative;
    left: auto !important; 
    right: auto !important;
    transform: none !important;

    background: rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: fadeInUp 0.8s ease-out forwards;
    margin-bottom: 30px;
}

.student-biodata-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

/* =========================================
   3. LEFT SECTION (PROFILE)
   ========================================= */
.card-left-section {
    width: 240px;
    background: var(--primary-gradient);
    padding: 40px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Dekorasi lingkaran di background kiri */
.card-left-section::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.student-profile-photo {
    width: 130px;
    height: 130px;
    margin-bottom: 10px;
    position: relative;
    border-radius: 50%;
    padding: 4px;
    background: rgba(255,255,255,0.1);
    transition: transform 0.4s ease;
}

.student-biodata-card:hover .student-profile-photo {
    transform: scale(1.05);
}

.profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.student-id-badge {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* =========================================
   4. RIGHT SECTION (CONTENT)
   ========================================= */
.card-right-section {
    flex: 1;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}

.student-full-name {
    font-size: 1.8rem;
    color: #1f2937;
    margin-bottom: 12px;
    font-weight: 800;
    letter-spacing: -0.5px;
    position: relative;
    display: inline-block;
}

/* =========================================
   BADGES (CARD STYLE)
   Style: Kotak Tumpul - Seragam dengan Statistik
   ========================================= */

.student-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    justify-content: left; /* Rata tengah */
}

/* Base Badge Style */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    font-family: 'Nunito', 'Poppins', sans-serif;
    font-size: 0.9rem; /* Font sedikit lebih besar biar jelas */
    font-weight: 700;
    text-transform: uppercase; /* Memaksa teks jadi KAPITAL semua */
    /* BENTUK KARTU (Bukan Kapsul) */
    padding: 10px 18px; 
    border-radius: 14px; /* Sudut tumpul mirip kotak statistik */
    
    /* Border & Shadow */
    border: 1px solid transparent; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    
    transition: all 0.2s ease;
    cursor: default;
}

/* Hover Effect (Naik sedikit) */
.badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

/* --- WARNA VARIAN (SENADA DENGAN STATISTIK) --- */

/* 1. Program (Biru - Mirip tema utama) */
.badge-program { 
    background: #f0f9ff; /* Sky-50 */
    color: #0369a1;      /* Sky-700 */
    border-color: #e0f2fe;
}

/* 2. Kelas (Abu-abu - Netral) */
.badge-class { 
    background: #f8fafc; /* Slate-50 */
    color: #475569;      /* Slate-600 */
    border-color: #e2e8f0;
}

/* 3. Status Aktif (Hijau - Mirip Stat Hadir) */
.badge-status-active { 
    background: #f0fdf4; /* Green-50 */
    color: #15803d;      /* Green-700 */
    border-color: #dcfce7;
    
    /* Indikator Titik Hijau */
    padding-left: 14px;
}
.badge-status-active::before {
    content: "●";
    margin-right: 6px;
    color: #22c55e;
    font-size: 0.6rem;
}

/* 4. Status Nonaktif (Merah - Mirip Stat Alpha) */
.badge-status-inactive { 
    background: #fef2f2; /* Red-50 */
    color: #b91c1c;      /* Red-700 */
    border-color: #fee2e2;
}

/* Update Style Nama di Kolom Kiri */
.student-full-name {
    font-size: 1.4rem; /* Agak kecilkan dikit biar muat */
    color: #ffffff;    /* Ganti warna jadi PUTIH (kontras dengan background gradient) */
    font-weight: 700;
    margin-top: 15px;  /* Jarak dari foto */
    margin-bottom: 0;
    text-align: center;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Sedikit bayangan biar terbaca jelas */
}

/* Update Card Right Section (Karena nama sudah hilang) */
.card-right-section {
    justify-content: flex-start; /* Isinya rata atas */
    padding-top: 25px; 
}

/* --- PENYESUAIAN DI HP --- */
@media (max-width: 768px) {
    .student-badges {
        justify-content: center;
        gap: 5px !important;
    }
    .badge {
        font-size: 0.7rem !important;
        padding: 5px 10px !important;
        border-radius: 10px !important; /* Perkecil sedikit radius di HP */
    }


}


/* =========================================
   5. STATS GRID (INTERACTIVE)
   ========================================= */
.biodata-stats-container {
    margin-top: auto;
}

.biodata-stats-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

.biodata-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.stat-card-modern {
    padding: 10px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    background: #e8f1fa;
}

.stat-card-modern span {
    font-size: 0.7rem;
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #64748b;
}

.stat-card-modern strong {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
}

/* --- Hover Effects per Color --- */
.stat-card-modern.success:hover {
    background: #ecfdf5;
    border-color: var(--stat-success);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -5px rgba(16, 185, 129, 0.2);
}
.stat-card-modern.success:hover strong { color: var(--stat-success); }

.stat-card-modern.warning:hover {
    background: #fffbeb;
    border-color: var(--stat-warning);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -5px rgba(245, 158, 11, 0.2);
}
.stat-card-modern.warning:hover strong { color: var(--stat-warning); }

.stat-card-modern.danger:hover {
    background: #fef2f2;
    border-color: var(--stat-danger);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -5px rgba(239, 68, 68, 0.2);
}
.stat-card-modern.danger:hover strong { color: var(--stat-danger); }

/* Dekorasi Garis Bawah - Shimmer Effect */
.decoration-line {
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, #f1f5f9 0%, #cbd5e1 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    border-radius: 2px;
    margin-top: 15px;
    animation: shimmer 3s infinite linear;
}

/* =========================================
   6. RESPONSIVE (MOBILE)
   ========================================= */
@media (max-width: 768px) {
    .student-biodata-card {
        flex-direction: column !important; /* HP: Foto di atas, Info di bawah */
        
        width: 95% !important; /* Lebar hampir penuh di HP */
        max-width: 400px !important; /* Tapi jangan terlalu lebar */
        
        /* KUNCI SUPAYA DI TENGAH HP */
        margin-left: auto !important;
        margin-right: auto !important;
        
        left: 0 !important; /* Reset posisi */
        margin-bottom: 15px !important;
        margin-top: -10px;
    }

    .card-left-section {
        width: 100% !important;
        padding: 10px !important;
        flex-direction: row !important; /* Foto & ID Sejajar */
        justify-content: center !important;
        align-items: center !important;
        text-align: left !important;
        gap: 5px !important;
        border-radius: 24px 24px 0 0 !important; /* Lengkung atas saja */
    }

    .card-left-section::before {
        display: none !important;
    }

    .student-profile-photo {
        width: 70px !important;
        height: 70px !important;
        margin-bottom: 0 !important;
    }

    .student-id-badge {
        padding: 5px 12px !important;
        font-size: 0.75rem !important;
    }

    .card-right-section {
        padding: 15px !important;
    }

    .student-full-name {
        font-size: 1.3rem !important;
        margin-top: -5px;
    }
    .biodata-stats-container {
        margin-top: 5px !important;
    }
    .biodata-stats-title {
        font-size: 0.85rem;
        text-transform: uppercase;
        color: #94a3b8;
        margin-bottom: 15px;
        font-weight: 700;
        letter-spacing: 0.5px;
        display: flex;
        justify-content: center;
        gap: 5px;
    }
    .progress-card-container {
        padding: 15px !important;
        width: 100% !important;
    }
    .progress-percentage {
        font-weight: 700 !important;
        font-size: 1rem !important;
    }
}

        
        .ruang-wali-murid-container {
            max-width: 500px;
            width: 100%;
            margin: 20px auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            box-sizing: border-box;
            text-align: left;
        }
        .ruang-wali-murid-container h2 {
            text-align: center;
            color: var(--warna-sekunder);
            margin-bottom: 10px;
        }
        .ruang-wali-murid-container .subjudul {
            text-align: center;
            color: #555;
            margin-bottom: 30px;
            font-size: 0.9em;
            line-height: 1.5;
        }
        .ruang-wali-murid-container .radio-options-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        .ruang-wali-murid-container .radio-option {
            display: flex;
            align-items: flex-start;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            cursor: pointer;
            transition: border-color 0.2s, background-color 0.2s;
        }
        .ruang-wali-murid-container .radio-option:hover {
            background-color: #f9f9f9;
        }
        .ruang-wali-murid-container .radio-option input[type="radio"] {
            margin-top: 3px;
            margin-right: 12px;
        }
        .ruang-wali-murid-container .radio-option .radio-label {
            display: flex;
            flex-direction: column;
        }
        .ruang-wali-murid-container .radio-option .radio-label strong {
            font-weight: 600;
            color: #222;
        }
        .ruang-wali-murid-container .radio-option .radio-label .deskripsi {
            font-size: 0.85em;
            color: #666;
            margin-top: 4px;
            line-height: 1.4;
        }
        .ruang-wali-murid-container .tombol-kirim {
            width: 100%;
            padding: 15px;
            border: none;
            border-radius: 6px;
            background-color: var(--warna-sekunder);
            color: var(--warna-teks-putih);
            font-size: 1.1em;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.2s;
            margin-top: 10px;
        }
        .ruang-wali-murid-container .tombol-kirim:hover {
            background-color: var(--warna-sekunder-gelap);
        }

        @media (max-width: 768px) {
        .report-table th, .report-table td {
        padding: 8px 10px;
        font-size: 0.55rem;
        text-align:center
        }

        .svg-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: #f1f5f9;
            color: #64748b;
            flex-shrink: 0;
        }

        .svg-icon svg {
            width: 26px !important;
            height: 26px !important;
        }

        .logo-section {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 30px;
        }

       .logo {
        width: 60px;
        height: 60px;
        }

        .title {
        font-size: 2rem;
        }

        .welcome-text {
        font-size: 1rem;
        margin-bottom: 20px;
        padding: 0 10px;
        }

        .main-button {
        width: 100%;
        max-width: none;
        margin: 0 10px;
        }

        .separator {
        max-width: none;
        margin: 10px 10px 10px;
        width: 100%;
        max-width: 500px;
        height: 2px;
        background: #a4a4a426;
        margin: 15px 0 15px 0;
        }

         .small-text {
        max-width: none;
        padding: 0 10px;
        }

        .page-content {
        margin: 0 10px;
        padding: 40px 20px;
        }

        .page-title {
        font-size: 1.5rem;
        }

        .form-pendaftaran {
        width: 100%;
        padding: 15px;
        margin: 0;
        border-radius: 0;
        }

        .form-wali, .form-container{
            max-width: 900px;
            padding: 20px;
            margin-top: 70px;
        }

        .form-title {
        font-size: 1.5rem;
        margin-bottom: 25px;
        }

        .form-group {
        margin-bottom: 10px;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            padding: 7px;
            text-align: left;
        }

        .main-page-title {
            font-size: 1.8rem;
            margin-bottom: 25px;
        }

        .main-logo {
            height: 170px;
        }

        .main-welcome-text {
            font-size: 1.1rem;
            margin-bottom: 35px;
        }

        .main-menu-container {
            gap: 10px;
            flex-wrap: nowrap;
        }

        .main-menu-button {
            width: 150px;
            height: 150px;
        }

        .menu-icon {
            width: 150px;
            height: 90px;
            margin-bottom: 10px;
        }

        .menu-label {
            font-size: 0.85rem;
        }

        .teacher-menu-title,
        .report-menu-title,
        .student-report-title,
        .report-page-title {
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

        .teacher-menu-description,
        .report-menu-description {
            font-size: 1rem;
            margin-bottom: 20px;
            padding: 0 1px;
        }

        .teacher-menu-container,
        .report-menu-container {
            flex-direction: column;
            gap: 10px;
            width: 100%;
            max-width: 360px;
        }

        .teacher-menu-button, .report-menu-button, .report-nav-button {
            width: 100%;
            height: 85px;
            flex-direction: row;
            justify-content: flex-start;
            padding: 20px;
            gap: 10px;
        }

        .teacher-menu-icon {
            width: 60px;
            height: 60px;
            margin-bottom: 0;
            margin-left: 8px;
        }
        
        .teacher-menu-label,
        .report-menu-label {
            font-size: 1rem;
            text-align: left;
            max-width: none;
            margin-top: -10px;
        }

        .report-menu-icon {
            width: 80px;
            height: 80px;
            margin-bottom: 0;
        }

        .modal-content,
        .detail-modal-content {
            width: 95%;
            max-height: 90vh;
        }

        .modal-header,
        .detail-modal-header {
            padding: 15px 20px;
        }

        .modal-header h3,
        .detail-modal-header h3 {
            font-size: 1.3rem;
        }

        .modal-body,
        .detail-modal-body {
            padding: 20px;
        }

        /* === [INI BAGIAN PERBAIKANNYA] === */

        .filter-row {
            flex-direction: column;
            gap: 15px;
            align-items: stretch;
        }

        .report-table th,
        .report-table td {
            padding: 8px 10px;
            font-size: 0.66rem;
        }

        /* === [AKHIR DARI BAGIAN PERBAIKAN] === */

        .footer {
            padding: 5px 15px; /* Kurangi padding atas & bawah */
        }

        .footer-button img {
            width: 40px;  /* Sedikit perkecil ukuran ikon */
            height: 40px;
        }

        .student-card {
            padding: 15px;
        }

        .student-card-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        .student-actions {
            width: 100%;
            justify-content: flex-end;
        }

        .student-name {
            font-size: 1.1rem;
        }

        .student-detail-item {
            font-size: 0.9rem;
        }
    
        .ruang-wali-murid-container {
            width: 95%;
            padding: 20px;
        }
    
        .swal2-popup {
            width: 85vw !important; /* Lebar popup menjadi 85% dari lebar layar */
            font-size: 0.9rem; /* Ukuran font dasar untuk konten */
        }

        .swal2-title {
            font-size: 1.1rem !important; /* Perkecil ukuran judul */
        }

        .swal2-html-container {
            font-size: 0.85rem !important; /* Perkecil ukuran teks konten */
        }

        .swal2-confirm,
        .swal2-cancel,
        .swal2-deny {
            font-size: 0.8rem !important; /* Perkecil font tombol */
            padding: 8px 16px !important; /* Perkecil bantalan/ukuran tombol */
        }
        }

        @media (min-width: 768px) {
            .ruang-wali-murid-container {
                max-width: 800px;
                padding: 40px;
            }
            
        }

        @media (max-width: 480px) {
            .main-content {
                padding: 80px 10px 80px;
            }

            .title {
                font-size: 1.8rem;
            }

            .welcome-text {
                font-size: 1rem;
            }
            #loginGuru,
            #loginWali {
                justify-content: center;
                padding-top: 0px;
            } 

            .teacher-menu-title {
                font-size: 1.42rem;
                margin-bottom: 10px;
            }
        }

/* =================================
   ==      DASHBOARD STYLES       ==
   ================================= */

.dashboard-container {
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.dashboard-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--warna-primer);
    margin-bottom: 0;
    text-align: left;
}

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.stat-card {
    background: var(--warna-teks-putih);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.stat-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.stat-value {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--warna-primer);
    line-height: 1;
}

.stat-label {
    font-size: 1rem;
    font-weight: 500;
    color: #555;
    margin-top: 5px;
}

.dashboard-main-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
}

.dashboard-section {
    background: var(--warna-teks-putih);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.section-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--warna-primer);
    margin-top: 0;
    margin-bottom: 1px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.recent-activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.activity-item {
    font-size: 0.95rem;
    color: #333;
}

.activity-item-placeholder {
    font-style: italic;
    color: #888;
}

.quick-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.quick-action-btn {
    width: 100%;
    padding: 15px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--warna-primer);
    background-color: #F8F9FA;
    border: 1px solid #E9ECEF;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 15px;
}

.quick-action-btn:hover {
    background-color: #E9ECEF;
    border-color: #DEE2E6;
    transform: translateY(-2px);
}

.quick-action-btn .btn-icon {
    font-size: 1.5rem;
}

/* Responsif untuk HP */
@media (max-width: 900px) {
    .dashboard-main-content {
        grid-template-columns: 1fr;
    }
}

.form-row-iuran {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: flex-end;
}

.form-row-iuran .form-group {
    flex: 1;
    min-width: 180px;
    margin: 0;
}

.form-row-iuran button {
    flex: 1;
    min-width: 180px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* =================================
   == PERBAIKAN PAGINATION DI HP ==
   ================================= */
@media (max-width: 768px) {
    .pagination-wrapper {
        flex-direction: row; 
        align-items: center;   /* Pusatkan isinya */
        gap: 12px;             /* Beri sedikit jarak */
    }

    .status-btn {
        padding: 10px 10px;
        font-size: 0.77rem !important;
        font-weight: 600;
        border: 2px solid #e0e0e0;
        background-color: #f8f9fa;
        color: #555;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .toggle-title {
        font-size: 0.9rem !important;
        font-weight: 700;
        color: #0284c7;
    }

    .toggle-subtitle {
        font-size: 0.7rem !important;
        color: #64748b;
    }

}



/* ======================================================= */
/* ==      STYLE RIWAYAT PEMBAYARAN (GRID 3 KOLOM)      == */
/* ======================================================= */

/* 1. Container Utama */
.riwayat-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 2. Alert Box (Pesan Status) */
.alert-box {
    background-color: #f0fdf4; /* Hijau muda */
    color: #166534; /* Hijau tua */
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #bbf7d0;
    text-align: left;
    font-size: 0.9rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

/* 3. Tombol Info Bayar (Hijau) */
.btn-info-bayar {
    background: #10b981;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
    transition: transform 0.2s;
}
.btn-info-bayar:hover { transform: translateY(-2px); background: #059669; }

/* 4. Filter Tahun (Diperlebar) */
.filter-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px; /* Jarak antara label dan kotak */
    
    /* INI PERUBAHANNYA: */
    width: 100%;      /* Agar responsif */
    max-width: 250px; /* Lebarkan batas maksimalnya (tadinya cuma 150px) */
}

.filter-wrapper label {
    font-weight: 700;
    font-size: 0.9rem;
    color: #334155;
    margin-left: 2px; /* Geser sedikit agar lurus dengan border input */
}

.select-wrapper {
    width: 100%; /* Pastikan pembungkusnya memenuhi lebar filter-wrapper */
}

.select-wrapper select {
    width: 100%;
    padding: 12px 15px; /* Padding tebal agar tinggi */
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background-color: white;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    
    /* Ikon Panah Kustom (Opsional - Agar lebih modern) */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 18px;
}

/* Efek Fokus */
.select-wrapper select:focus {
    border-color: var(--warna-primer);
    outline: none;
    box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.1);
}

/* 5. GRID BULAN (LOGIKA KOLOM KORAN) */
.month-grid {
    display: block; /* Matikan Grid, ganti Block biasa */
    
    /* DEFAULT (DESKTOP): 3 KOLOM SEPERTI KORAN */
    column-count: 3;
    column-gap: 15px; /* Jarak antar kolom */
    
    margin-top: 20px;
    width: 100%;
}

/* Kartu Bulan */
.item-bulan {
    /* PENTING: Mencegah kartu terpotong di tengah kolom */
    break-inside: avoid;
    page-break-inside: avoid;
    
    /* Margin bawah sebagai pengganti Gap vertikal */
    margin-bottom: 15px; 
    
    /* Style Kartu Tetap Sama */
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.item-bulan:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-color: #cbd5e1;
}

/* --- RESPONSIF HP (MAX 768px) --- */
@media (max-width: 768px) {
    /* UBAH JADI 1 KOLOM MEMANJANG DI HP */
    .month-grid {
        column-count: 1; /* Paksa 1 kolom */
    }
    
    .filter-wrapper {
        max-width: 100%; /* Filter tahun jadi lebar penuh */
    }
    
    .btn-info-bayar {
        width: 100%; /* Tombol transfer lebar penuh */
        justify-content: center;
        margin-bottom: 20px;
    }

    .text-box strong {
        font-size: 0.95rem;
        color: #334155;
        font-weight: 600;
        margin-bottom: 3px;
        transition: color 0.2s;
        text-align: left;
    }

    .selection-card-content {
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 15px !important;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);

    }

    .text-box span {
        display: block !important;
        font-size: 0.7rem;
        color: #94a3b8;
        line-height: 1.3;
        text-align: left;
    }
}



/* -- STYLE UNTUK MUSHAF INTERAKTIF -- */
.mushaf-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

.mushaf-image-wrapper {
    flex: 1;
    min-width: 830px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.mushaf-image-wrapper img {
    max-width: 100%;
    height: auto;
}

.ayat-panel-wrapper {
    flex: 1;
    min-width: 250px;
    max-height: 500px; /* Batasi tinggi agar bisa di-scroll */
    overflow-y: auto; /* Aktifkan scroll vertikal */
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    background: #374151;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 6px;
    align-content: flex-start;
}

.ayat-btn {
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 50%; /* Membuat tombol menjadi bulat */
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ayat-btn:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

/* Style untuk tombol yang sudah dikoreksi */
.ayat-btn.corrected {
    background-color: #FFFBEB; /* Kuning */
    border-color: #f70000;
    font-weight: bold;
}

/* -- STYLE UNTUK CHECKLIST KOREKSI DI POP-UP -- */
#checklist-koreksi {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* -- STYLE UNTUK NAVIGASI MUSHAF -- */
.mushaf-nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}
.mushaf-nav-btn {
    background: var(--warna-primer);
    color: var(--warna-teks-putih);
    border: none;
    padding: 6px 6px;
    border-radius: 9px;
    font-size: 0.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.mushaf-nav-btn:hover {
    background: var(--warna-primer-gelap);
}
.mushaf-nav-btn:disabled {
    background: #A4A4A4;
    cursor: not-allowed;
}
#halamanInfo {
    font-size: 0.5rem;
    font-weight: 500;
    color: #555;
}

.mushaf-container {
    position: relative;
    width: fit-content;
    border: 2px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

#mushaf-image {
    display: block;
    max-width: 300px;
    height: auto;
}

#drawing-canvas {
    position: absolute;
    top: 0;
    left: 0;
    cursor: crosshair;
}

/* ======================================================= */
/* == CSS FINAL UNTUK PANEL INTERAKTIF (DESKTOP & HP) == */
/* ======================================================= */

/* --- 1. ATURAN DASAR (UNTUK DESKTOP) --- */

#mushafInteractiveContainer {
    display: flex;
    flex-direction: row; /* Berdampingan ke samping */
    gap: 5px;
    border-radius: 8px;
}

.controls-column {
    display: flex;
    flex-direction: column; /* Toolbar & Opsi menumpuk ke bawah */
    width: 220px;
    flex-shrink: 0; /* Mencegah kolom ini menyusut */
}

.toolbar {
    width: 100%;
    display: flex;
    flex-direction: column; /* Tombol di toolbar menumpuk ke bawah */
    gap: 10px;
    padding: 15px;
    background-color: rgb(0, 41, 129);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.tool-options {
    padding: 10px;
    margin-top: 10px; /* Jarak dari toolbar */
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: #fafafa;
}

.mushaf-image-wrapper {
    flex-grow: 1; /* Biarkan area mushaf mengisi sisa ruang */
}

/* --- 2. ATURAN PENIMPA (HANYA UNTUK HP) --- */

@media screen and (max-width: 768px) {
    #mushafInteractiveContainer {
        flex-direction: column; /* Tumpuk ke bawah di HP */
        align-items: center;
        gap: 15px;
    }

    .controls-column {
        width: 100%;
        order: 1; /* Pastikan kolom kontrol selalu di atas */
        position: relative; /* JANGKAR BARU untuk panel opsi */
    }

    .toolbar {
        /* [PERBAIKAN UTAMA] Gunakan CSS Grid untuk tata letak yang rapi */
        display: grid;
        grid-template-columns: 1fr 1fr 1fr; /* Tiga kolom sama lebar */
        gap: 5px;
        padding: 3px;
        /* Hilangkan style container agar menyatu */
        background: #04386b;
        box-shadow: none;
        border: 1px solid #ddd; /* Ganti shadow dengan border tipis */
        border-radius: 8px;
    }
    
    /* Atur tombol agar teksnya di tengah dan ukurannya pas */
    .toolbar button {
        text-align: left;
        padding: 5px 5px;
        font-size: 10px;
        /* Hapus icon agar lebih ringkas */
        background-image: none; 
        border-radius: 8px;
    }

    /* Buat tombol 'Atur' dan 'Bersihkan' memenuhi lebar grid */
    .settings-btn,
    #clear-tool {
        grid-column: 1 / -1; /* Membentang dari kolom 1 sampai kolom terakhir */
    }
    
    .toolbar h3,
    .toolbar hr {
        display: none; /* Sembunyikan judul & garis di HP */
    }

    .tool-options {
        position: absolute;      /* Buat panel opsi melayang */
        top: 100%;               /* Posisikan tepat di bawah .controls-column */
        margin-top: 5px;         /* Beri sedikit jarak */
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 300px;
        z-index: 10;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .mushaf-image-wrapper {
        min-width: 100%;
        order: 2; /* Mushaf di bawah kontrol */
    }
    
    #ayatPanelContainer {
        width: 100%;
        order: 3; /* Panel ayat paling bawah */
    }
}

/* =========================================== */
/* ==       KURSOR KUSTOM UNTUK KANVAS      == */
/* =========================================== */

#drawing-canvas {
  /* 'url(...)': Menggunakan icon pena format SVG yang disematkan langsung.
    '4 20': Ini adalah koordinat "hotspot" (ujung pena), agar titik gambar pas.
    'crosshair': Ini adalah fallback. Jika icon gagal dimuat, kursor akan kembali menjadi '+'.
  */
  cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3e%3c/svg%3e") 4 20, crosshair;
}

/* =========================================== */
/* ==   STYLE UNTUK MODAL DETAIL LAPORAN    == */
/* =========================================== */

/* Garis pemisah untuk bagian koreksi */
.detail-separator {
    font-weight: bold;
    color: var(--warna-primer, #333);
    margin-top: 20px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--warna-sekunder, #eee);
}

/* Wrapper untuk daftar koreksi agar rapi */
.detail-koreksi-wrapper {
    text-align: left;
    padding: 0 10px;
}

/* Styling untuk daftar <ul> koreksi dari main.js */
ul.daftar-koreksi-laporan {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
}

ul.daftar-koreksi-laporan li {
    margin-bottom: 8px;
    line-height: 1.4;
}

/* Styling untuk catatan lama jika JSON gagal di-parse */
p.catatan-lama {
    font-style: italic;
    color: #555;
    margin: 0;
}

/* Styling jika tidak ada catatan sama sekali */
span.tidak-ada-catatan {
    color: #999;
}

span {
    font-size: 0.9rem;
}

/*
 Style untuk melebarkan Text Area di dalam Pop-up Koreksi Ayat
*/
#catatan-tambahan {
    width: 90%;              /* Lebar penuh sesuai pop-up */
    box-sizing: border-box;   /* Best practice agar padding tidak membuat overflow */
    margin-top: 15px;         /* Beri sedikit jarak dari checklist di atasnya */
    min-height: 80px;         /* Tinggi minimal agar tidak terlalu pendek */
    resize: vertical;         /* Izinkan user mengubah tinggi, tapi bukan lebar */
    margin: 15px 0 0 0;
}

/*
 Style untuk memaksa kontainer HTML di dalam SweetAlert
 agar lebarnya penuh. Ini akan memperbaiki lebar textarea.
*/
.swal2-html-container {
    width: 100%;
}

/* ======================================================= */
/* ==       STYLE UNTUK PANEL KONTROL (DESKTOP)       == */
/* ======================================================= */

/* Wrapper untuk semua panel kontrol */
.controls-column {
    display: flex;
    flex-direction: column;
    width: 220px;
    flex-shrink: 0; /* Mencegah kolom ini menyusut */
}

/* Kotak putih utama untuk tombol */
.toolbar {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px;
    background-color: #374151; /* Latar belakang putih solid */
    border: 1px solid #e5e7eb; /* Border abu-abu muda */
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Judul "Pilih Alat" dan "Pengaturan" */
.toolbar h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff; /* Warna teks abu-abu tua */
    margin: 8px 0 0 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #f3f4f6;
}

/* Sembunyikan garis <hr> agar lebih rapi */
.toolbar hr {
    display: none;
}

/* Style untuk SEMUA tombol di dalam toolbar */
.toolbar button {
    width: 100%;
    padding: 10px 15px;
    font-size: 0.9rem;
    font-weight: 500;
    
    /* [PERMINTAAN ANDA] Teks rata kiri */
    text-align: left;
    
    /* [PERMINTAAN ANDA] Warna teks dan latar */
    color: #374151; /* Warna teks abu-abu gelap */
    background-color: #f9fafb; /* Latar abu-abu sangat muda */

    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Efek saat mouse diarahkan ke tombol */
.toolbar button:hover {
    border-color: #3b82f6; /* Border biru saat hover */
    background-color: #eff6ff; /* Latar biru muda saat hover */
}

/* Style untuk tombol yang sedang AKTIF */
.toolbar button.active {
    background-color: #1756bb; /* Latar biru */
    color: var(--warna-teks-putih); /* Teks putih */
    border-color: #2563eb;
    font-weight: 600;
}

/* Style KHUSUS untuk tombol "Atur" */
.settings-btn {
    background-color: #f3f4f6;
}
.settings-btn:hover {
    background-color: #e5e7eb;
}

/* Panel opsi (Warna, Tebal, dll) */
.tool-options {
    /* [PERMINTAAN ANDA] Style untuk panel pengaturan */
    padding: 15px;
    margin-top: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #ffffff; /* Latar putih */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.tool-options label {
    font-size: 0.85rem;
    color: #4b5563;
}

/* --- 2. ATURAN PENIMPA (HANYA UNTUK HP) --- */
/* (Pastikan blok ini ada SETELAH aturan desktop di atas) */

@media screen and (max-width: 768px) {
    #mushafInteractiveContainer {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-left: 10px;
        width: 95%;
    }

    .controls-column {
        width: 100%;
        order: 1;
        position: relative;
    }

    .toolbar {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        padding: 10px;
        background: #ffffff;
        box-shadow: none;
        border: 1px solid #e5e7eb;
    }
    
    .toolbar button {
        text-align: center; /* Di HP, teks kembali ke tengah */
        padding: 5px 5px;
        font-size: 0.6rem;
    }
    
    .settings-btn,
    #clear-tool {
        grid-column: 1 / -1;
    }
    
    .toolbar h3 {
        display: none;
    }

    .tool-options {
        position: absolute;
        top: 100%; 
        margin-top: 5px;
        left: 50%;
        transform: translateX(-50%);
        width: 95%;
        max-width: 320px;
        z-index: 10;
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    }
}

/* Styling untuk palet warna highlighter */
.color-palette {
    display: flex; /* Membuat tombol warna berjajar */
    gap: 5px;      /* Jarak antar tombol warna */
    margin-top: 5px;
}

.color-swatch {
    width: 25px;         /* Lebar tombol warna */
    height: 25px;        /* Tinggi tombol warna */
    border-radius: 50%;  /* Membuat tombol menjadi lingkaran */
    cursor: pointer;
    border: 2px solid transparent; /* Border transparan default */
    transition: border-color 0.2s ease; /* Transisi halus untuk border */
}

.color-swatch.active {
    border-color: #3498db; /* Border biru untuk warna yang aktif */
    /* Atau Anda bisa menggunakan border putih atau hitam agar lebih jelas */
    /* border-color: #fff; */ 
    /* box-shadow: 0 0 5px rgba(0,0,0,0.5); */ /* Opsional: bayangan untuk yang aktif */
}

/* Sedikit penyesuaian untuk label dan tool-options agar rapi */
#highlighter-options label {
    display: block; /* Agar label "Warna:" ada di baris sendiri */
    margin-bottom: 5px;
    font-weight: bold;
}

.tool-options {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
}

/* Wrapper Anda sudah memiliki position: relative, jadi kita tidak perlu menambahkannya lagi.
   Kita hanya perlu menata letak kanvas di dalamnya.
*/

/* Atur KEDUA kanvas agar menumpuk sempurna di atas gambar */
#drawing-canvas,
#temp-drawing-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;  /* Mengikuti lebar <img> */
    height: 100%; /* Mengikuti tinggi <img> */
}

/* Atur urutan tumpukan (z-index) */
#drawing-canvas {
    z-index: 1; /* Coretan permanen (di lapisan bawah) */
}

#temp-drawing-canvas {
    z-index: 2; /* Coretan live (di lapisan atas) */
    cursor: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"%3e%3ccircle cx="12" cy="12" r="7" stroke="black" stroke-width="2" fill="none"/%3e%3c/svg%3e') 12 12, auto;
}

/* Style untuk link "Daftar" di Halaman Utama */
.main-page-footer {
    width: 100%;
    max-width: 400px; /* Lebar yang pas, tidak terlalu lebar */
    margin-top: 40px; /* Jarak dari tombol di atasnya */
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px; /* Jarak dari garis pemisah */
    border-top: 1px solid #D3D3D3; /* Garis pemisah abu-abu tipis */
    text-align: center;
    font-size: 14px;
    color: #555;
}

.main-page-footer p {
    margin: 0;
}

.main-page-footer a {
    color: var(--warna-primer); /* Samakan dengan warna tombol Guru */
    text-decoration: underline;
    font-weight: 600;
}

.main-logo-section {
  display: flex;             /* 1. Membuat item di dalamnya (logo & judul) sejajar horizontal */
  align-items: center;       /* 2. Menyejajarkan logo & judul agar rapi secara vertikal */
  justify-content: center;   /* 3. Menengahkan grup (logo+judul) ke tengah halaman */
  gap: 15px;                 /* 4. (Opsional) Memberi jarak 15px antara logo dan judul */
}

.register-button-wrapper {
  display: flex;
  justify-content: center;  /* Menengahkan kedua tombol */
  align-items: stretch;    /* (Opsional) Bikin tombol sama tinggi jika perlu */
  width: 100%;             /* Memastikan lebar penuh */
  gap: 10px;               /* (Opsional) Memberi jarak antar tombol */
}

.registration-subtitle {
    font-size: 1rem;
    color: #555;
    text-align: center;
    margin-bottom: 30px;
    max-width: 600px;
    line-height: 1.6;
    font-weight: 400;
}

.registration-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--warna-primer);
    margin: 0;
    text-align: center;
}




/* =========================================
   2. STYLE SPLASH SCREEN (FIXED)
   ========================================= */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa; /* Warna BG Anda */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    z-index: 9999; /* Paling atas */
    
    /* PERBAIKAN: Gunakan transition untuk efek fade-out yang dikontrol JS */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* Kelas bantuan untuk menyembunyikan splash via JS */
#splash-screen.hide {
    opacity: 0;
    visibility: hidden;
}

/* Logo di dalam splash screen */
#splash-logo {
    width: 340px; /* Ukuran Anda */
    height: auto;
    margin-bottom: 25px;
    
    /* PENTING: Hapus baris 'animation' yang lama */
    /* Sembunyikan total di awal */
    opacity: 0;
    transition: opacity 0.7s ease-in;
}

/* Class helper untuk memunculkan logo (dipicu oleh JS) */
#splash-logo.visible {
    opacity: 1;
}

/* Responsive Logo */
@media (max-width: 768px) {
    #splash-logo {
        width: 230px; /* Ukuran HP Anda */
    }
}

/* Sembunyikan logo splash screen di awal agar tidak ada glitch ganti gambar */
#splash-logo {
    opacity: 0;
    transition: opacity 0.5s ease-in; /* Efek muncul pelan */
}

/* Class helper untuk memunculkan logo */
#splash-logo.visible {
    opacity: 1;
}

/* =========================================
   3. ANIMASI DOTS (STYLE ANDA)
   ========================================= */
.pulse-dots {
    display: flex;
    gap: 8px;
}

.pulse-dot {
    width: 16px;
    height: 16px;
    background-color: #251669; /* Warna Anda */
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite both;
}

.pulse-dot:nth-child(1) { animation-delay: -0.48s; }
.pulse-dot:nth-child(2) { animation-delay: -0.32s; }
.pulse-dot:nth-child(3) { animation-delay: -0.16s; }
.pulse-dot:nth-child(4) { animation-delay: 0s; }

/* Keyframes */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
    0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* ======================================================= */
/* ==      STYLE KHUSUS Halaman Penilaian Tahsin        == */
/* ======================================================= */

/* MENGHILANGKAN CONTAINER (BORDER/BOX) AGAR FLAT */
#penilaianTahsin .form-container {
    max-width: 1250px; /* Lebar tetap dijaga agar rapi */
    width: 100%;
    margin-top: 20px;   /* Tengah horizontal */
    
    /* HILANGKAN EFEK KOTAK */
    background: transparent !important; /* Latar transparan */
    box-shadow: none !important;        /* Hilangkan bayangan */
    border: none !important;            /* Hilangkan garis pinggir */
    padding: 0 !important;              /* Hilangkan jarak dalam */
    margin-bottom: 50px;
}

/* Mengatur label (rata kiri, tebal, dll) */
#penilaianTahsin .form-group label {
    display: flex;
    text-align: left;
    font-weight: 600;
    font-size: 1rem;
    color: #333;
    margin-bottom: 8px;
}

/* Mengatur input agar tetap terlihat jelas walau tanpa container */
#penilaianTahsin .form-group input,
#penilaianTahsin .form-group select,
#penilaianTahsin .form-group textarea {
    padding: 10px;
    font-size: 0.95rem;
    background: #ffffff; /* Pastikan input putih */
    border: 1px solid #cbd5e1; /* Border halus */
    border-radius: 10px; /* Sudut tumpul modern */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* Sedikit bayangan pada input */
}

/* Input Readonly (Nama Murid dll) */
#penilaianTahsin .form-group input[readonly] {
    background-color: #f1f5f9; /* Abu-abu muda */
    color: #64748b;
    cursor: not-allowed;
    border-color: #e2e8f0;
}

/* Kotak Info Setoran Terakhir (Tetap dipertahankan agar menonjol) */
#penilaianTahsin #infoSetoranTerakhirTahsin {
    text-align: left;
    border-left: 5px solid var(--warna-sekunder);
    background-color: #e6f7f8;
    color: #004a50;
    padding: 15px;
    border-radius: 8px; /* Tambahkan radius biar tidak kaku */
    margin-bottom: 20px;
}

/* Tombol Pilih Murid (Full Width) */
#penilaianTahsin .form-group .submit-button {
    width: 100%;
    margin-top: 10px;
    background-color: var(--warna-primer);
    border-radius: 10px;
}

/* --- RESPONSIF HP (Mobile) --- */
@media (max-width: 768px) {
    /* Pastikan di HP juga tidak ada container */
    #penilaianTahsin .form-container {
        width: 100% !important;
        padding: 10px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    #penilaianTahsin .form-title {
        font-size: 1.5rem;
        margin-bottom: 15px;
        text-align: center;
    }

    /* Grid 2 Kolom untuk Input (Tanggal & Halaman) */
    #penilaianTahsin .form-grid-2col {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    #penilaianTahsin .form-group input,
    #penilaianTahsin .form-group select {
        width: 100% !important;
        font-size: 0.9rem !important;
    }

    /* Tombol Status (Hadir/Sakit) di HP */
    #penilaianTahsin .status-btn-group {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 5px !important;
    }
}

    /* ======================================================= */
    /* ==      STYLE KHUSUS Halaman Penilaian Tahfizh       == */
    /* ======================================================= */

    /* Kunci 1: Mengatur 'kotak' form utama
    * Kita buat SANGAT LEBAR (1200px) agar mushaf dan panel muat.
    */
    #penilaianTahfizh .form-container {
        max-width: 1200px; 
        width: 95%;
    }

    /* Kunci 2: Mengatur SEMUA label di halaman ini (rata kiri) */
    #penilaianTahfizh .form-group label {
        display: block;
        text-align: left;
        font-weight: 600;
        font-size: 0.9rem;
        color: #333;
        margin-bottom: 8px;
    }

    /* Kunci 3: Mengatur input 'readonly' (Nama Murid, Info Juz, dll) */
    #penilaianTahfizh .form-group input[readonly] {
        background-color: #f0f2f5;
        color: #555;
        font-weight: 500;
    }

    /* Kunci 4: Mengatur padding input/select di barisan atas 
    * (Juz, Surah, Ayat, Sesi) agar lebih ramping/pendek.
    */
    #penilaianTahfizh .form-row-iuran .form-group input,
    #penilaianTahfizh .form-row-iuran .form-group select {
        padding: 9px; /* Padding lebih ramping */
        font-size: 0.9rem;
        margin-bottom: 5px;
        margin-left: 0px;
    }

    /* Kunci 5: Mengatur padding input 'Nama Murid' (biar tetap besar) */
    #penilaianTahfizh #namaMuridTahfizh {
        padding: 10px; /* Biarkan sedikit lebih besar */
    }

    /* Kunci 6: Mengatur kotak info setoran terakhir */
    #penilaianTahfizh #infoSetoranTerakhirTahfizh {
        text-align: left;
        font-style: normal;
        border-left: 5px solid var(--warna-sekunder); /* (Warna tosca) */
        background-color: #e6f7f8;
        color: #004a50;
        padding: 15px;
        margin-bottom: 20px; /* Tambah jarak bawah */
    }

    /* Kunci 7: Mengatur tombol 'Pilih Murid' */
    #penilaianTahfizh .form-group .submit-button {
        width: 100%;
        margin-top: 0;
    }

    /* Kunci 8: Mengatur tombol Simpan di paling bawah
    * (Kita gunakan .form-row-iuran lagi, tidak masalah)
    */
    #penilaianTahfizh .form-row-iuran .submit-button {
        padding: 10px;
        font-size: 0.95rem;
        font-weight: 600;
        text-align: center;
    }

    @media (max-width: 768px) {

    /* ======================================================= */
    /* ==   MOBILE FIX: STRICT CONTAINER & GRID             == */
    /* ======================================================= */

    /* 1. MENGAMANKAN WADAH UTAMA (SI KARTU PUTIH) */
    #penilaianTahfizh .form-container {
        /* Kita kecilkan width dari 100% ke 94% agar ada jarak kiri-kanan aman */
        width: 94% !important; 
        margin: 10px auto !important; /* Auto membuatnya rata tengah */
        padding: 15px !important;     /* Jarak dalam kartu */
        box-sizing: border-box !important; /* Kunci perhitungan lebar */
        overflow: hidden !important;  /* PENTING: Potong apapun yang mau keluar batas */
    }

    /* 2. GRID SYSTEM (BARIS) */
    #penilaianTahfizh .form-row-iuran {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 2 Kolom sama besar */
        gap: 5px !important;
        
        /* Reset total margin & padding */
        margin: 3px !important;
        padding: 0 !important;
        width: 100% !important;
        
        /* Matikan fungsi flex bawaan HTML agar tidak bentrok */
        flex: none !important;
        display: grid !important;
    }

    /* 3. ITEM PEMBUNGKUS INPUT */
    #penilaianTahfizh .form-row-iuran .form-group {
        width: 100% !important;
        
        /* Hapus margin aneh-aneh */
        margin: 0 !important;
        padding: 0 !important;
        
        /* Matikan style="flex:..." yang ada di HTML */
        flex: unset !important;
        min-width: 0 !important; /* Trik CSS Grid agar konten tidak memaksa melebar */
    }

    /* 4. INPUT & SELECT (BIANG KEROK UTAMA) */
    #penilaianTahfizh .form-row-iuran .form-group input,
    #penilaianTahfizh .form-row-iuran .form-group select {
        /* Pastikan width 100% tidak ditambah padding */
        width: 100% !important; 
        
        /* KUNCI SUPAYA GAK GESER KE KANAN: */
        box-sizing: border-box !important; 
        
        height: 40px !important;
        font-size: 13px !important;
        margin: 0 !important;
        margin-bottom: 5px !important;
        margin-left: -4px !important;
    }

    /* 5. KHUSUS TOMBOL (Opsional) */
    #penilaianTahfizh .submit-button {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   FIX LAYOUT DESKTOP (AGAR MAU BERJEJER KE SAMPING)
   ============================================================ */

.form-row-iuran {
    /* INI KUNCINYA: Wajib Flex agar anak-anaknya bisa dibagi */
    display: flex !important;       
    flex-direction: row !important; /* Jejer ke samping */
    gap: 15px;                      /* Jarak antar kolom */
    width: 100%;
    margin-bottom: 15px;
    align-items: flex-end;          /* Rata bawah (agar label & input rapi) */
}

/* Pastikan margin anak-anak tidak mengganggu layout */
.form-row-iuran .form-group {
    margin-bottom: 0 !important;
    /* Lebar (width) akan diatur otomatis oleh style="flex:..." di HTML */
}

/* Paksa Input agar memenuhi ruang flex-nya */
.form-row-iuran input,
.form-row-iuran select {
    width: 100% !important;
}

/* =========================================
   STYLE KELOLA MURID (ELEGANT & CLEAN)
========================================= */

.manage-layout {
    display: flex;
    gap: 25px;
    align-items: flex-start;
    width: 1250px !important;
    margin: 0 auto;
    height: calc(100vh - 100px); /* Agar fit di layar desktop */
    overflow: hidden; /* Mencegah scroll ganda */
    margin-bottom: 50px;
    margin-left: 20px;
    margin-top: 20px;
}

/* --- SEKSI KIRI: FORM --- */
.manage-form-section {
    flex: 0 0 950px; /* Lebar tetap */
    height: 100%;
    overflow-y: auto; /* Scroll internal */
    padding-right: 5px; /* Space untuk scrollbar */
}

.form-card {
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.form-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f5f9;
}
.form-header h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
}
.form-header svg {
    color: #64748b;
}

.form-block {
    margin-bottom: 20px;
}
.block-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
}

.input-wrapper {
    margin-bottom: 12px;
}
.input-wrapper label {
    display: block;
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 5px;
    font-weight: 500;
}
.input-wrapper input,
.input-wrapper select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #1e293b;
    transition: border-color 0.2s;
}
.input-wrapper input:focus,
.input-wrapper select:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* Radio Button Group Custom */
.gender-selector {
    display: flex;
    gap: 10px;
}
.gender-selector input { display: none; }
.gender-selector label {
    flex: 1;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    font-size: 0.85rem;
    cursor: pointer;
    color: #22416d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    margin: 0;
}

.gender-selector input:checked + label {
    border-color: #0a6a95;
    background: #2f4a70;
    color: #f8fafc;
    font-weight: 600;
}

.row-2-col {
    display: flex;
    gap: 10px;
}
.row-2-col .input-wrapper { flex: 1; }

/* Input dengan Tombol di Kanan */
.input-icon-group {
    display: flex;
}
.input-icon-group input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
    font-family: monospace;
}
.btn-icon-only {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 0 12px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    cursor: pointer;
    color: #64748b;
    transition: background 0.2s;
}
.btn-icon-only:hover {
    background: #e2e8f0;
    color: #334155;
}

/* Tombol Utama */
.form-actions-stacked {
    margin-top: 20px;
}
.btn-primary-wide {
    width: 100%;
    background: #0ea5e9;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
}
.btn-primary-wide:hover:not(:disabled) {
    background: #0284c7;
}
.btn-primary-wide:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
}
.btn-secondary-wide {
    width: 100%;
    background: white;
    border: 1px solid #cbd5e1;
    color: #64748b;
    padding: 8px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    margin-top: 8px;
}
.btn-secondary-wide:hover {
    background: #f1f5f9;
    color: #ef4444;
    border-color: #ef4444;
}

/* --- SEKSI KANAN: LIST MURID --- */
.manage-list-section {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    width: 800px;
}

.list-toolbar {
    padding: 15px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    gap: 10px;
    background: #f8f9fa;
}
.search-box {
    flex: 1;
    position: relative;
}
.search-box svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    width: 16px; 
    height: 16px;
}
.search-box input {
    width: 100%;
    padding: 8px 10px 8px 35px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 0.9rem;
    background: #f8fafc;
    outline: none;
}
.search-box input:focus {
    background: white;
    border-color: #0891b2;
}
.btn-refresh {
    background: white;
    border: 1px solid #e2e8f0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.btn-refresh:hover {
    background: #f1f5f9;
    color: #0d9488;
    transform: rotate(180deg);
}

/* Grid Kartu */
.student-grid {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 15px;
    align-content: start;
    background: #fbfcfd;
}

/* Desain Kartu (Elegant Card) */
.std-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 15px;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}
.std-card:hover {
    border-color: #94a3b8;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.std-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}
.std-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e293b;
    line-height: 1.3;
}
.std-code {
    font-family: monospace;
    font-size: 0.75rem;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

.std-info {
    font-size: 0.8rem;
    color: #475569;
    margin-bottom: 15px;
    flex: 1;
}
.std-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.std-icon {
    color: #94a3b8;
    width: 14px; 
    height: 14px;
}

.std-actions {
    display: flex;
    gap: 8px;
    border-top: 1px solid #f1f5f9;
    padding-top: 10px;
}
.action-btn-small {
    flex: 1;
    font-size: 0.8rem;
    padding: 6px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.1s;
}
.action-btn-small:hover {
    background: #f8fafc;
    color: #0d9488;
}

/* Status Badge Kecil */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.status-dot.active { background: #10b981; }
.status-dot.inactive { background: #ef4444; }

/* Empty State */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding-top: 50px;
    color: #94a3b8;
}
.btn-link {
    background: none;
    border: none;
    color: #0891b2;
    text-decoration: underline;
    cursor: pointer;
}

/* =========================================
   RESPONSIVE LAYOUT KELOLA MURID (MOBILE)
========================================= */

@media (max-width: 768px) {
    /* 1. Ubah Layout Utama menjadi Vertikal */
    .manage-layout {
        flex-direction: column; /* Tumpuk form di atas, list di bawah */
        width: 100% !important;
        height: auto;           /* Biarkan tinggi mengikuti konten */
        margin: 0;
        padding: 10px;
        overflow: visible;      /* Aktifkan scroll utama halaman */
        gap: 20px;
    }

    /* 2. Form Section jadi Lebar Penuh */
    .manage-form-section {
        flex: none;
        width: 100% !important;
        height: auto;
        padding-right: 0;
    }

    /* 3. List Section jadi Lebar Penuh */
    .manage-list-section {
        flex: none;
        width: 100% !important;
        height: 500px; /* Berikan tinggi tetap agar grid tetap bisa di-scroll internal */
    }

    /* 4. Ubah Baris 2 Kolom menjadi 1 Kolom */
    .row-2-col {
        flex-direction: column;
        gap: 0; /* Input akan menggunakan margin-bottom dari .input-wrapper */
    }

    /* 5. Penyesuaian Header Form */
    .form-header h3 {
        font-size: 1.2rem;
    }

    /* 6. Optimasi Grid Kartu untuk Layar HP Sempit */
    .student-grid {
        grid-template-columns: 1fr; /* Satu kartu per baris di HP */
        padding: 10px;
    }

    /* 7. Perlebar area tombol simpan */
    .btn-primary-wide {
        padding: 12px;
        font-size: 1rem;
    }
}

/* Khusus untuk HP Sangat Kecil (Lebar < 400px) */
@media (max-width: 400px) {
    .gender-selector label {
        font-size: 0.75rem;
        padding: 6px;
    }
    
    .std-name {
        font-size: 0.85rem;
    }
}

/* =========================================
   SCROLLBAR TIPIS (CUSTOM WEBKIT)
   Untuk Halaman Kelola Murid
========================================= */

/* 1. Targetkan Container yang memiliki scroll */
.manage-form-section::-webkit-scrollbar,
.student-grid::-webkit-scrollbar {
    width: 5px; /* Lebar scrollbar sangat tipis */
}

/* 2. Jalur Scrollbar (Track) - Transparan agar bersih */
.manage-form-section::-webkit-scrollbar-track,
.student-grid::-webkit-scrollbar-track {
    background: transparent; 
}

/* 3. Batang Scrollbar (Thumb) - Abu-abu soft & Bulat */
.manage-form-section::-webkit-scrollbar-thumb,
.student-grid::-webkit-scrollbar-thumb {
    background-color: #cbd5e1; /* Warna abu-abu muda */
    border-radius: 20px;       /* Membuat ujungnya bulat */
    border: none;              /* Tanpa border agar flat */
}

/* 4. Efek Saat Hover pada Scrollbar */
.manage-form-section::-webkit-scrollbar-thumb:hover,
.student-grid::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8; /* Sedikit lebih gelap saat disentuh */
}

/* Opsional: Scrollbar Horizontal (jika ada) */
.manage-form-section::-webkit-scrollbar:horizontal,
.student-grid::-webkit-scrollbar:horizontal {
    height: 5px;
}

/* --- Responsif Mobile (Update untuk membatasi tinggi List Murid) --- */
@media (max-width: 900px) {
    .manage-layout {
        flex-direction: column; /* Form di atas, List di bawah */
        gap: 20px;
        height: auto; 
        overflow: visible; /* Biarkan body page yang handle scroll utama */
        padding-bottom: 20px; /* Sedikit ruang di paling bawah */
    }

    /* 1. Bagian Form (Atas) */
    .manage-form-section {
        flex: none;
        width: 100%;
        height: auto; /* Form mengikuti isinya */
        overflow: visible;
        padding-right: 0;
    }

    /* 2. Bagian List Murid (Bawah - DIBATASI TINGGINYA) */
    .manage-list-section {
        flex: none;
        width: 100%;
        
        /* KUNCI PERBAIKAN: */
        height: 400px; /* Batasi tinggi kotak list murid (misal 400px atau 50vh) */
        
        /* Pastikan scroll bekerja di dalam kotak ini */
        display: flex;
        flex-direction: column;
        border: 1px solid #cbd5e1; /* Perjelas batas kotaknya */
        border-radius: 12px;
        background: #fff;
    }

    /* Pastikan header list (pencarian) tetap diam di atas */
    .list-toolbar {
        flex-shrink: 0; /* Jangan menyusut */
        border-bottom: 1px solid #e2e8f0;
    }

    /* Area scroll kartu murid */
    .student-grid {
        flex: 1; /* Ambil sisa ruang dari 400px tadi */
        overflow-y: auto; /* Scroll vertikal aktif di sini */
        padding: 10px;
        
        /* Grid kartu di HP: 1 kolom atau 2 kolom tergantung selera */
        /* Gunakan repeat(auto-fill) agar responsif: */
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); 
        /* Ubah minmax 100% jika ingin 1 kartu per baris agar lebar penuh */
    }
}


/* --- Sembunyikan kolom di modal Pilih Murid (berlaku di semua halaman) --- */
.modal-body #studentsTable th:nth-child(n+2),
.modal-body #studentsTable td:nth-child(n+2) {
    display: none;
}

/* ================================================================ */
/* ==             DESAIN BARU PENILAIAN TAHSIN             == */
/* ================================================================ */

/* 1. Kartu Info Murid */
#tahsinStudentInfoCard {
    background-color: #f8f9fa8f;
    border: 5px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 10px;
}
.tahsin-info-card-header {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
#tahsinCardName {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--warna-primer);
    margin: 0 0 10px 0;
}

#tahsinCardBadges .badge {
    font-size: 0.8rem; /* Menggunakan style .badge yang sudah ada */
    justify-content: flex-start;
}

/* Tombol Ganti Murid di kartu */
#tahsinStudentInfoCard .reset-filter-btn {
    background-color: #6c757d;
    padding: 8px 12px;
    font-size: 0.85rem;
    flex-shrink: 0; /* Mencegah tombol mengecil */
    min-width: 100%;
}
#tahsinStudentInfoCard .reset-filter-btn:hover {
    background-color: #5a6268;
}

/* 2. Tata Letak Grid 2 Kolom */
.form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 kolom sama lebar */
    gap: 10px; /* Jarak antar kolom dan baris */
    row-gap: 2px;
}

/* 3. Tombol Status Interaktif */
.status-btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.status-btn {
    padding: 9px 10px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid #e0e0e0;
    background-color: #f8f9fa;
    color: #15356e;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.status-btn:hover {
    background-color: #e9ecef;
    border-color: #ccc;
}

/* Warna spesifik & Status Aktif */
.status-btn.status-btn-ulang.active {
    background-color: #fd1414; /* Merah */
    color: var(--warna-teks-putih);
    border-color: #fd1414;
}
.status-btn.status-btn-berhenti.active {
    background-color: #fd7e14; /* Oranye */
    color: var(--warna-teks-putih);
    border-color: #fd7e14;
}
.status-btn.status-btn-lanjut.active {
    background-color: #018845; /* Hijau */
    color: var(--warna-teks-putih);
    border-color: #018845;
}

/* 4. Responsif untuk HP */
@media (max-width: 768px) {
    .form-grid-2col {
        grid-template-columns: 1fr; /* 1 kolom di HP */
        gap: 15px;
    }
    .status-btn-group {
        grid-template-columns: 1fr; /* 1 kolom di HP, tombol menumpuk */
    }
    .tahsin-info-card-header {
        flex-direction: row; /* Tumpuk kartu info di HP */
        gap: 15px;
    }
    
    /* [INI TAMBAHAN BARUNYA]
       Memaksa badge rata kiri HANYA di tampilan HP */
    #tahsinCardBadges {
        justify-content: flex-start;
    }
}

/* ================================================================ */
/* ==             DESAIN BARU PENILAIAN TAHSIN (v2.0)          == */
/* ================================================================ */

/* 1. Kartu Info Murid (yang sudah kita buat) */
#tahsinStudentInfoCard {
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 10px;
}
.tahsin-info-card-header {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
#tahsinCardName {
    font-size: 2rem;
    font-weight: 700;
    color: var(--warna-primer);
    margin: 0 0 10px 0;
    text-align: center;
}
/* Kita pastikan badge rata kiri di desktop juga */
#tahsinCardBadges {
    justify-content: flex-start; 
}
#tahsinCardBadges .badge {
    font-size: 0.8rem;
}
#tahsinStudentInfoCard .reset-filter-btn {
    background-color: #6c757d;
    padding: 8px 12px;
    font-size: 0.85rem;
    flex-shrink: 0;
}
#tahsinStudentInfoCard .reset-filter-btn:hover {
    background-color: #5a6268;
}

/* 2. Tata Letak Grid 2 Kolom (yang sudah kita buat) */
.form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* 3. Tombol Status Interaktif (yang sudah kita buat) */
.status-btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.status-btn {
    padding: 10px 10px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid #e0e0e0;
    background-color: #f8f9fa;
    color: #555;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.status-btn:hover {
    background-color: #e9ecef;
    border-color: #ccc;
}


/* ================================================================== */
/* ==  4. [UPDATE] PANEL KOREKSI TAHSIN (GRID 2 KOLOM PER BAB)     == */
/* ================================================================== */

.correction-panel {
    display: block; /* Gunakan Block, bukan Grid/Flex untuk kolom koran */
    
    /* DEFAULT (HP & Tablet): 2 Kolom */
    column-count: 2; 
    column-gap: 10px;
    
    padding: 10px;
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* KHUSUS KOMPUTER/LAPTOP (Layar Lebar > 1024px) */
@media (min-width: 1024px) {
    .correction-panel {
        column-count: 3; /* Otomatis jadi 3 Kolom */
    }
}

.correction-btn {
    width: 100%;
    /* PENTING: Mencegah tombol terpotong di tengah kolom */
    break-inside: avoid; 
    page-break-inside: avoid;
    
    /* Margin bawah sebagai pengganti Gap */
    margin-bottom: 8px; 
    
    padding: 10px 5px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #ced4da;
    background-color: #ffffff;
    color: #495057;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: inline-flex; /* Agar rapi */
    align-items: center;
    justify-content: left;
    padding-left: 20px;
}

.correction-btn:hover {
    background-color: #e9ecef;
    border-color: #0d9488;
    color: #0d9488;
}

/* ================================================================== */
/* ==  5. [UPDATE] POP-UP MODAL KOREKSI (CHECKLIST & KEYBOARD)     == */
/* ================================================================== */

.correction-modal-content {
    text-align: left;
    max-height: 400px; 
    overflow-y: auto;
    padding: 5px;
}

/* Grid untuk Checkbox (Pilihan Detail) */
.correction-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 Kolom */
    gap: 8px;
}

/* Label Checkbox */
.correction-modal-label {
    display: flex; 
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: 0.1s;
}

.correction-modal-label:hover {
    background-color: #f0fdfa;
    border-color: #0d9488;
}

.correction-modal-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: #0d9488; /* Warna centang hijau */
}

/* ================================================================== */
/* ==  6. [UPDATE] KEYBOARD HIJAIYAH (7 KOLOM)                     == */
/* ================================================================== */

.hijaiyah-keyboard {
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* 7 Huruf per baris (Standar) */
    gap: 5px;
    direction: rtl; /* Kanan ke Kiri */
}

.hijaiyah-btn {
    padding: 5px;
    font-size: 1.4rem; 
    font-family: 'Amiri', 'LPMQ Isep Misbah', serif; 
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    aspect-ratio: 1/1; /* Agar tombol kotak sempurna */
    display: flex;
    align-items: center;
    justify-content: center;
}

.hijaiyah-btn:hover {
    background-color: #f0fdfa;
    border-color: #0d9488;
}

.hijaiyah-btn.active {
    background-color: #0d9488;
    color: #fff;
    border-color: #0d9488;
}

/* ================================================================== */
/* ==  7. [UPDATE] RESPONSIF KHUSUS HP (MEDIA QUERY)               == */
/* ================================================================== */

@media (max-width: 768px) {
    /* Agar panel bab tetap 2 kolom di HP (Lebih hemat tempat) */
    .correction-panel {
        grid-template-columns: 1fr 1fr; 
        gap: 6px;
    }
    
    .correction-btn {
        font-size: 0.696rem; /* Font diperkecil sedikit */
        padding: 8px 4px;
        justify-content: left;
    }

    /* Modal Checklist jadi 1 kolom di HP agar teks terbaca jelas */
    .correction-modal-grid {
        grid-template-columns: 1fr; 
    }
    
    .correction-modal-label {
        padding: 6px;
        font-size: 0.75rem;
    }

    /* Keyboard Hijaiyah tetap 7 kolom tapi ukurannya menyesuaikan */
    .hijaiyah-keyboard {
        gap: 8px;
        grid-template-columns: repeat(7, 1fr);
    }
    
    .hijaiyah-btn {
        font-size: 0.75rem;
    }
}



/* ======================================= */
/* ==   KOMPONEN LOADER (BARU)          == */
/* ======================================= */

.loader {
  /* Tampilan lingkaran */
  border: 5px solid #f3f3f3; /* Abu-abu muda */
  border-top: 5px solid #1F3A5F; /* Biru Primer (dari warna Anda) */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  
  /* Posisi & Animasi */
  margin: 20px auto; /* Otomatis menengahkan diri */
  animation: spin 1s linear infinite;
}

/* Ini adalah definisi animasi berputarnya */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ======================================= */
/* ==   PERBAIKAN POP-UP TAHAP 2        == */
/* ======================================= */
/* Membuat pop-up kedua (catatan)
   muncul di atas pop-up pertama (pilihan) */

.swal2-container.swal2-shown {
  z-index: 10000; /* Z-index SweetAlert standar */
}

/* Ini adalah kelas kustom yang kita tambahkan di JS */
.swal-popup-level-2.swal2-shown {
  z-index: 10001 !important; /* Paksa pop-up kedua lebih tinggi */
}


/* ==========================================================================
   STYLE TOOLBAR ALAT TULIS (FLOATING TOOLBAR)
   ========================================================================== */

/* --- 1. Container Utama Toolbar (Tampilan Desktop) --- */
.floating-toolbar {
    position: fixed;
    /* Posisi Tengah Bawah (Gaya Dock iPad) */
    bottom: 45px; 
    left: 35%;
    transform: translateX(-50%); /* Trik untuk menengahkan elemen fixed */
    
    /* Tampilan Kaca (Glassmorphism) */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    
    /* Bentuk Dock */
    border-radius: 50px;
    padding: 8px 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    
    /* Layout Flex Horizontal */
    display: flex;
    flex-direction: row; 
    align-items: center;
    gap: 15px;
    
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-toolbar.collapsed {
    width: 10px;
    padding: 0.5rem;
    overflow: hidden; /* Sembunyikan isi jika collapsed */
}

/* --- 2. Tombol Toggle (Disembunyikan di Desktop) --- */
.toolbar-toggle {
    display: none; 
}

.toolbar-toggle:hover {
    transform: scale(1.1);
}

/* --- 3. Wrapper Ikon-Ikon --- */
.tool-icons {
    display: flex;
    flex-direction: row; /* Mendatar */
    gap: 12px;
    padding: 0;
    margin: 0;
}

/* --- 4. Style Ikon Individual --- */
.tool-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: transparent;
    border: none;
    
    /* Penataan Isi Ikon */
    display: flex;
    align-items: center;
    justify-content: center;
    
    font-size: 1.25rem;
    color: #475569;
    position: relative;
    transition: all 0.2s;
    cursor: pointer;
}

/* Efek Hover Ikon */
.tool-icon:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: translateY(-3px); /* Ikon naik sedikit */
}

/* Efek Aktif (Saat alat dipilih) */
.tool-icon.active {
    background: #4f46e5;
    color: white;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
    transform: scale(1.1);
}

/* --- 5. Tooltip (Label yang muncul saat hover) --- 
.tool-tooltip {
    position: absolute;
    left: 50%;
    top: -40px; /* Muncul di atas ikon 
    transform: translateX(-50%);
    
    background: rgba(15, 23, 42, 0.9);
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    pointer-events: none;  Agar tidak mengganggu klik
}

.tool-icon:hover .tool-tooltip {
    opacity: 1;
    visibility: visible;
}*/


/* ==========================================================================
   STYLE POPUP PENGATURAN (WARNA & KETEBALAN)
   ========================================================================== */

.tool-popup {
    position: fixed;
    background: #f8f9fa;
    backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 1.5rem;
    
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(79, 70, 229, 0.3);
    color: #333; /* Perbaikan warna teks agar terbaca di background terang */
    
    z-index: 1002;
    min-width: 280px;
    
    /* Animasi Masuk */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);
    transition: all 0.3s ease;
}

.tool-popup.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

div#penPopup {
    left: 260px !important;
    top: 310px !important;
}

div#highlighterPopup {
    left: 305px !important;
    top: 330px !important;
}

div#eraserPopup {
    left: 355px !important;
    top: 385px !important;
}

.tool-popup h4 {
    margin: 0 0 10px 0;
    color: #2f4a70;
    font-size: 1.1rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

/* Grid Pilihan Warna */
.color-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin: 1rem 0;
}

.color-option {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: transform 0.2s;
}

.color-option.active {
    border-color: #4f46e5;
    transform: scale(1.1);
}

/* Slider Ketebalan */
.slider-container {
    margin: 1rem 0;
}

.slider-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: #304a69;
}

.slider {
    width: 100%;
    height: 6px;
    background: #2f4a70;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none; /* Reset style default browser */
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Tombol Close Popup (Umum) */
.popup-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.popup-close-btn:hover {
    color: #ef4444;
}


/* ==========================================================================
   STYLE KHUSUS LAYAR HP (MOBILE RESPONSIVE)
   ========================================================================== */

@media (max-width: 768px) {

    /* --- 1. Penyesuaian Toolbar di HP --- */
    .floating-toolbar {
        /* Ubah posisi ke Pojok Kiri Bawah */
        position: fixed !important;
        top: auto !important;
        bottom: 20px !important;
        left: 20px !important;
        right: auto !important;
        transform: none !important; /* Hapus centering */
        
        /* Ubah tampilan jadi vertikal (opsional) atau tetap horizontal tapi kecil */
        padding: 8px 15px !important;
        border-radius: 30px !important;
        gap: 10px !important;
        
        z-index: 10000 !important;
    }

    /* Tampilkan tombol toggle di HP (jika diperlukan untuk buka/tutup) */
    .toolbar-toggle {
        display: flex !important; /* Munculkan kembali */
        position: absolute;
        top: -50px; /* Muncul di atas toolbar */
        left: 0;
        
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: #4f46e5;
        color: white;
        border: none;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }
    
    /* Layout Ikon di HP */
    .tool-icons {
        /* Jika ingin vertikal di HP, ubah row jadi column */
        flex-direction: column !important; 
        padding-top: 10px;
    }
    
    .tool-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    /* Sembunyikan Tooltip di HP (karena menutupi jari) */
    .tool-tooltip {
        display: none !important;
    }


    /* --- 2. Penyesuaian Popup di HP --- */
    .tool-popup {
        /* Posisikan benar-benar di tengah layar (Modal) */
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        
        /* Ukuran Popup */
        width: 90% !important;
        max-width: 320px !important;
        max-height: 80vh !important;
        overflow-y: auto !important; /* Scroll jika konten panjang */
        
        box-shadow: 0 0 0 100vh rgba(0,0,0,0.5) !important; /* Overlay gelap di belakang popup */
        z-index: 10005 !important;
    }
    
    .popup-close-btn {
        padding: 10px !important; /* Area sentuh lebih besar */
        font-size: 1.8rem !important;
    }

    div#penPopup {
        left: 200px !important;
        top: 525px !important;
    }

    div#highlighterPopup {
        left: 200px !important;
        top: 525px !important;
    }

    div#eraserPopup {
        left: 200px !important;
        top: 525px !important;
    }
}

/* ======================================================= */
/* ==      1. LAYOUT UTAMA HALAMAN TAHFIZH (GRID)       == */
/* ======================================================= */

/* Container Pembungkus Utama (Membagi Layar jadi 2) */
.main-layout {
    display: grid;
    /* Kolom Kiri (Mushaf) 1fr | Kolom Kanan (Panel) 420px Fixed */
    grid-template-columns: 1fr 420px; 
    gap: 10px;
    padding: 10px;
    margin-bottom: 70px;
    margin-top: 10px;
    align-items: start; /* Penting agar panel kanan tidak melar ke bawah */
}

/* AREA KIRI: MUSHAF */
.mushaf-area {
    position: relative;
    /* Agar mushaf bisa di-scroll sendiri jika panjang */
    /* max-height: 90vh; 
       overflow-y: auto; */ 
    /* (Opsional: Matikan comment di atas jika ingin scroll area mushaf saja) */
    
    /* Beri jarak bawah agar tidak tertutup toolbar */
    padding-bottom: 100px; 
}

/* AREA KANAN: CONTROL PANEL (FORMULIR) */
.control-panel {
    background-color: #fff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    
    /* Agar panel bisa di-scroll jika isinya banyak */
    max-height: 90vh;
    overflow-y: auto;
    position: sticky;
    top: 20px; /* Panel akan 'nempel' saat di-scroll */
}


/* ======================================================= */
/* ==      2. STYLE FORMULIR & INPUT TAHFIZH            == */
/* ======================================================= */

/* Judul Seksi (Detail Setoran, dll) */
.section-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #1F3A5F;
    color: #1e293b;
    text-align: center;
}
.section-title:first-child { margin-top: 0; }

/* Styling Input & Select agar Rapi */
#penilaianTahfizh .form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 6px;
}

#penilaianTahfizh .form-control,
#penilaianTahfizh input[type="text"],
#penilaianTahfizh input[type="date"],
#penilaianTahfizh input[type="number"],
#penilaianTahfizh select {
    width: 100%;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9rem;
    box-sizing: border-box; /* KUNCI agar padding tidak bikin lebar */
}

/* Efek Fokus Khusus Tahfizh agar Serasi */
#penilaianTahfizh input:focus,
#penilaianTahfizh select:focus,
#penilaianTahfizh textarea:focus {
    border-color: #1F3A5F;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(31, 58, 95, 0.15);
    transform: translateY(-1px);
}

/* Baris Form (Row) */
.form-row-iuran {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}

.form-group {
    flex: 1; /* Input berbagi lebar sama rata */
}


/* ======================================================= */
/* ==      3. TOOLBAR ALAT TULIS (MODEL iPAD DOCK)      == */
/* ======================================================= */

.floating-toolbar {
    position: fixed;
    /* Posisi Tengah Bawah */
    bottom: 45px; 
    left: 35%;
    transform: translateX(-50%); /* Geser agar pas tengah */
    
    /* Efek Kaca (Glassmorphism) */
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    
    /* Bentuk Dock Kapsul */
    border-radius: 50px;
    padding: 8px 25px;
    
    /* Bayangan Halus */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.6);
    
    /* Layout Horizontal */
    display: flex;
    flex-direction: row; 
    align-items: center;
    gap: 20px;
    
    z-index: 1000;
    width: auto; /* Lebar menyesuaikan isi */
}

/* Sembunyikan tombol toggle (Pena Besar) */
.toolbar-toggle { display: none !important; }

/* Container Ikon */
.tool-icons {
    display: flex;
    flex-direction: row;
    gap: 15px;
    padding: 0;
    margin: 0;
}

/* Style Ikon */
.tool-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

/* Efek Hover & Active */
.tool-icon:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: translateY(-3px);
}
.tool-icon.active {
    background: #4f46e5;
    color: white;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.35);
    transform: scale(1.1);
}

/* Tooltip (Label di atas ikon) */
.tool-tooltip {
    position: absolute;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.9);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    pointer-events: none;
}
.tool-icon:hover .tool-tooltip {
    opacity: 1;
    visibility: visible;
    top: -45px;
}


/* ======================================================= */
/* ==      4. POPUP PENGATURAN (WARNA & SIZE)           == */
/* ======================================================= */

.tool-popup {
    position: fixed;
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
    z-index: 1002;
    min-width: 280px;
    
    /* Animasi muncul */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: all 0.2s;
}

.tool-popup.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* Judul Popup */
.tool-popup h4 {
    margin: 0 0 15px 0;
    color: #1e293b;
    font-size: 1rem;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 10px;
}

/* Tombol Close Popup */
.popup-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #94a3b8;
    cursor: pointer;
}
.popup-close-btn:hover { color: #ef4444; }


/* ======================================================= */
/* ==      5. RESPONSIF MOBILE (LAYOUT HP)              == */
/* ======================================================= */

@media (max-width: 768px) {
    /* 1. Reset Grid Layout jadi 1 Kolom */
    .main-layout {
        grid-template-columns: 1fr; /* Tumpuk ke bawah */
        gap: 15px;
        padding: 5px;
    }

    /* 2. Urutan: Mushaf di Atas, Panel di Bawah */
    .mushaf-area {
        order: 1;
        margin-bottom: -70px;
    }

    .control-panel {
        order: 2;
        width: 95%;
        max-width: 95%;
        position: static;
        padding: 15px;
        box-sizing: border-box;
        margin-left: 10px;
    }

    /* 3. Toolbar di HP: Tetap Horizontal di Bawah */
    .floating-toolbar {
        /* 1. PAKSA MENDATAR (Horizontal) */
        display: flex !important;
        flex-direction: row !important; 
        
        /* 2. ATUR POSISI (Tengah Bawah) */
        position: fixed !important;
        bottom: 50px !important;       /* Jarak dari bawah */
        left: 50% !important;          /* Titik tengah layar */
        transform: translateX(-50%) !important; /* Geser agar pas di tengah */
        right: auto !important;        /* Reset properti right */
        top: auto !important;          /* Reset properti top */

        /* 3. ATUR UKURAN */
        width: auto !important;        /* Lebar menyesuaikan isi */
        max-width: 90% !important;     /* Jangan melebihi lebar layar */
        padding: 5px 10px 5px 10px !important;  /* Jarak dalam */
        border-radius: 50px !important;
        gap: 15px !important;          /* Jarak antar ikon */
        
        /* 4. RAPIKAN ISI */
        justify-content: center !important;
        align-items: center !important;
        z-index: 9999 !important;      /* Pastikan di paling depan */
    }
    
    /* Reset Container Ikon di dalam Toolbar */
    .tool-icons {
        display: flex !important;
        flex-direction: row !important; /* Wajib baris */
        gap: 15px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Ukuran Ikon di HP */
    .tool-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.1rem !important;
        margin: 0 !important;
    }

    /* Sembunyikan Tombol Toggle besar (jika masih muncul) */
    .toolbar-toggle {
        display: none !important;
    }

    /* 4. Sembunyikan Tooltip di HP */
    .tool-tooltip { display: none !important; }

    /* 5. Perbaikan Form di HP agar tidak gepeng */
    .form-row-iuran {
        flex-direction: column; /* Input tumpuk ke bawah */
        gap: 10px;
    }
    
    /* 6. Popup di Tengah Layar */
    .tool-popup {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 85%;
        max-width: 320px;
    }
    .tool-popup.show {
        transform: translate(-50%, -50%) scale(1) !important;
    }
}

/* =========================================
   2. STYLE HEADER MODERN
   ========================================= */


/* Logo & Brand */
.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row;
}
.logo-image {
    height: 50px; /* Ukuran logo disesuaikan */
    width: auto;
    object-fit: contain;
}
.app-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.brand-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: #1e293b;
    margin-bottom: 5px;
    margin-top: 5px;
}
.brand-subtitle {
    font-size: 0.75rem;
    color: #64748b;
}

/* Jam & Tanggal */
.header-center {
    font-weight: 500;
    color: #475569;
    font-size: 0.95rem;
}
.mobile-clock {
    display: none;
    font-weight: 600;
    color: #013e4c;
    background: #f1f1f1;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.9rem;
    border: 2px solid #ddd;
}

/* Tombol Menu */
.header-right {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-direction: row;
}
.menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    padding: 5px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.menu-btn:hover {
    background-color: #f1f5f9;
    color: #0891b2;
}

/* =========================================
   STYLE SIDEBAR BARU (COLLAPSIBLE)
   ========================================= */



/* Kondisi saat Sidebar Mengecil (Collapsed) */
.sidebar.collapsed {
    width: 60px;
}



/* Sidebar Header (Profil) */
.sidebar-header {
    padding: 10px 10px;
    border-bottom: 1px solid #e0e6ed;
    text-align: center;
    min-height: 80px;
    overflow: hidden; /* Mencegah teks bocor saat mengecil */
}

.sidebar.collapsed .user-avatar {
    width: 40px;
    height: 40px;
    font-size: 18px;
    margin-bottom: 0;
}

.user-info {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.sidebar.collapsed .user-info {
    opacity: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    display: none;
}

.user-name {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 5px;
    white-space: pre-wrap;
    color: #1e293b;
}

.user-role {
    font-size: 0.85rem;
    color: #64748b;
    white-space: nowrap;
}

/* Menu Items Area */
.menu-section {
    padding: 0px 0;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 80px;
}

.menu-title {
    padding: 10px 20px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.sidebar.collapsed .menu-title {
    opacity: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    display: none;
}


.sidebar.collapsed .menu-item {
    justify-content: center;
    padding: 12px;
    margin: 4px auto;
    width: 50px;
}

.menu-item:hover {
    background: #f1f5f9;
    color: #0891b2;
}

.menu-item.active {
    background: #e0f2fe;
    color: #0284c7;
}

/* Icon Styling */
.menu-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.menu-icon svg {
    /* Paksa warna ikon mengikuti warna teks parent */
    stroke: currentColor !important; 
}

/* Text Menu */
.menu-text {
    margin-left: 15px;
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.sidebar.collapsed .menu-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
    margin: 0;
    display: none;
}

/* Tooltip (Muncul saat collapsed) 
.tooltip {
    position: fixed;
    background: #1e293b;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 10000;
    visibility: hidden;
}

/* Panah kecil pada tooltip *
.tooltip::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-30%);
    border: 4px solid transparent;
    border-right-color: #1e293b;
}

.sidebar.collapsed .menu-item:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

.sidebar:not(.collapsed) .tooltip {
    display: none;
}*/

/* Logout Button Specifics */
.logout-item:hover {
    background: #fef2f2;
    color: #ef4444;
}

/* =========================================
   STYLE SIDEBAR KHUSUS MOBILE (HP)
   ========================================= */

@media (max-width: 768px) {
    

    /* 2. Kondisi Saat Sidebar Aktif (Muncul) */
    .sidebar.active {
        transform: translateX(0); /* Geser masuk ke layar */
    }
    
    /* 3. Sembunyikan Tombol Toggle (Panah Kecil) */
    /* Di HP kita pakai tombol hamburger di header, bukan panah kecil ini */
    .toggle-btn {
        display: none !important; 
    }

    /* 4. Perbaikan Tampilan Menu di HP */
    .menu-text {
        opacity: 1 !important; /* Teks selalu muncul */
        width: auto !important;
        display: block !important;
    }
    
    .menu-title {
        opacity: 1 !important;
        display: block !important;
        height: auto !important;
        padding: 10px 20px !important;
    }
    
    .user-info {
        opacity: 1 !important;
        display: block !important;
        height: auto !important;
    }

    /* 5. Tombol Close (Silang) Manual */
    /* Agar user mudah menutup sidebar */
    .sidebar-header {
        position: relative;
    }
    
    /* Tombol X transparan di pojok kanan atas sidebar */
    .sidebar-header::before {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 24px;
        color: #64748b;
        cursor: pointer;
        padding: 5px;
        line-height: 1;
        z-index: 10;
    }
    
    /* Pastikan area ini bisa diklik untuk menutup */
    .sidebar-header {
        cursor: pointer; 
        text-align: left;
    }
}

/* 6. OVERLAY LATAR BELAKANG (Opsional tapi Bagus) */
/* Membuat layar belakang gelap saat sidebar terbuka */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998; /* Di bawah sidebar, di atas konten */
    display: none; /* Default sembunyi */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}


/* ========================================================= */
/* ==  FIX MENU SAMPING (AGAR TIDAK MENCIUT DI HP)        == */
/* ========================================================= */

@media only screen and (max-width: 768px) {
    
    /* 1. PAKSA LEBAR SIDEBAR (Hajar pengaturan collapsed desktop) */
    .sidebar, 
    .sidebar.collapsed { 
        width: 280px !important; /* Lebar tetap, jangan mengecil */
        transform: translateX(-100%); /* Default sembunyi */
    }

    /* Saat aktif, geser masuk */
    .sidebar.active,
    .sidebar.collapsed.active {
        transform: translateX(0) !important;
    }

    /* 2. PAKSA TEKS MUNCUL (Jangan disembunyikan) */
    .sidebar.collapsed .menu-text,
    .sidebar.collapsed .menu-title,
    .sidebar.collapsed .user-info {
        display: block !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        margin-left: 15px !important;
        visibility: visible !important;
    }

    /* 3. PERBAIKI POSISI ITEM MENU (Rata Kiri, Bukan Tengah) */
    .sidebar.collapsed .menu-item {
        justify-content: flex-start !important; /* Jangan center */
        padding: 12px 20px !important; /* Kembalikan padding normal */
        margin: 4px 10px !important;
        width: auto !important; /* Jangan dipaksa 50px */
    }

    /* 4. PERBAIKI AVATAR/FOTO PROFIL */
    .sidebar.collapsed .user-avatar {
        width: 60px !important;
        height: 60px !important;
        font-size: 24px !important;
        margin: 0 auto 15px !important;
    }

    /* 5. MEMASTIKAN ITEM BISA DI-SCROLL */
    .menu-section {
        overflow-y: auto !important;
        flex: 1;
    }
}

/* ======================================================== */
/* ==  FIX SUBMENU GLITCH (MUNCUL SETELAH SCROLL)        == */
/* ======================================================== */

@media only screen and (max-width: 768px) {
    
    /* 1. Paksa Render Hardware (Solusi Ajaib) */
    .submenu-container {
        /* Ini memancing browser untuk menggambar ulang elemen SEGERA */
        transform: translateZ(0); 
        -webkit-transform: translateZ(0); 
        will-change: max-height; /* Memberitahu browser akan ada animasi */
    }

    /* 2. Pastikan Item Submenu Tampil Sempurna */
    .submenu-item {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        transform: translateZ(0); /* Pancingan ganda biar aman */
    }

    /* 3. Pastikan Teks di dalam Submenu Juga Muncul */
    .submenu-item .menu-text {
        opacity: 1 !important;
        display: block !important;
        width: auto !important;
        margin-left: 10px !important;
    }
}

/* ======================================================== */
/* ==  FIX TOOLTIP NYANGKUT (PHANTOM HOVER DI HP)        == */
/* ======================================================== */

@media only screen and (max-width: 768px) {
    
    /* Matikan semua tooltip di HP */
    .tooltip {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Pastikan tidak muncul walau di-hover/tap */
    .menu-item:hover .tooltip,
    .sidebar.collapsed .menu-item:hover .tooltip {
        display: none !important;
    }
}


/* ======================================================== */
/* ==  FIX POSISI TEKS MENU (REVISI - AGAR MENU ROLE JALAN) == */
/* ======================================================== */

@media only screen and (max-width: 768px) {
    


    .menu-text {
        display: inline-block !important;
        line-height: 1 !important; 
        margin: 0 0 0 15px !important; 
        padding: 0 !important;
        
        /* Geser teks ke atas agar lurus dengan ikon */
        transform: translateY(-3px) !important; 
    }

    .menu-icon {
        display: flex !important;
        align-items: center !important;
        height: 24px !important;
    }
}

/* ======================================================== */
/* ==  FIX POPUP TERTUTUP SIDEBAR (SWEETALERT Z-INDEX)   == */
/* ======================================================== */

/* Paksa SweetAlert agar selalu di atas Sidebar (9999) */
.swal2-container {
    z-index: 20000 !important; /* Angka ini harus sangat besar */
}

/* Opsional: Jika ada backdrop hitam */
.swal2-backdrop-show {
    z-index: 19999 !important;
}


/* --- CSS UNTUK TOMBOL SIDEBAR --- */

/* 1. Tombol Close (X) - HANYA MUNCUL DI HP */
@media only screen and (max-width: 768px) {
    .close-sidebar-btn {
        display: block !important; /* Wajib tampil */
        position: absolute;
        top: 10px;
        right: 15px;
        background: transparent;
        border: none;
        color: #64748b;
        font-size: 36px; /* Besar biar enak dipencet */
        cursor: pointer;
        z-index: 10001;
        padding: 5px;
        line-height: 1;
    }

    /* Sembunyikan tombol panah desktop saat di HP */
    .toggle-btn {
        display: none !important;
    }
}

/* 2. Sembunyikan Tombol X saat di Laptop */
@media only screen and (min-width: 769px) {
    .close-sidebar-btn {
        display: none !important;
    }
}

/* ========================================================== */
/* ==  FIX HEADER HTML (KHUSUS MOBILE / HP)                == */
/* ========================================================== */

@media only screen and (max-width: 768px) {

   

    /* 2. LOGO & BRANDING */
    /* Kecilkan logo sedikit */
    .logo-image {
        height: 32px !important; 
        width: auto !important;
    }

    /* Teks "Bayyina" */
    .brand-name {
        font-size: 0.9rem !important;
        margin-left: 0px !important;
        line-height: 1.2;
    }

    /* [PENTING] Sembunyikan Subtitle Panjang di HP */
    /* "Smart Qur'an Learning System" terlalu panjang buat HP */
    .brand-subtitle {
        display: none !important; 
    }

    /* 3. JAM & TANGGAL */
    /* Sembunyikan Tanggal Panjang Desktop */
    #desktopDateTime {
        display: none !important;
    }

    /* Tampilkan Jam Singkat Mobile */
    #mobileClock {
        display: block !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        color: #0891b2 !important; /* Warna biru tosca */
        background: #f0f9ff;
        padding: 4px 8px;
        border-radius: 6px;
    }

    /* 4. TOMBOL MENU (HAMBURGER) */
    .menu-toggle {
        padding: 0 !important;
        margin-right: 10px !important;
        border: none !important;
        background: transparent !important;
        color: #333 !important;
    }
    
    /* Perbesar ikon garis tiga biar gampang dipencet */
    .menu-toggle svg {
        width: 28px !important;
        height: 28px !important;
    }
}


/* =========================================
   STYLE SIDEBAR DROPDOWN (SUBMENU)
   ========================================= */

/* Item Menu Induk */
.menu-item.has-submenu {
    justify-content: space-between; /* Agar panah di kanan mentok */
}

/* Ikon Panah (Chevron) */
.chevron-icon {
    color: #94a3b8;
    transition: transform 0.3s ease;
}

/* Saat Submenu Terbuka, Panah Berputar */
.menu-item.submenu-active .chevron-icon {
    transform: rotate(180deg);
}

/* Wadah Submenu */
.submenu-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #e9e9e9; /* Sedikit lebih gelap dari putih */
    margin: 0 10px; /* Jarak kiri kanan */
    border-radius: 8px;
}

/* Item Submenu */
.submenu-item {
    display: flex;
    align-items: center;
    padding: 10px 15px 10px 12px; /* Indentasi lebih dalam */
    cursor: pointer;
    color: #475569;
    font-size: 0.9rem;
    transition: all 0.2s;
    border-radius: 6px;
    margin: 2px 5px;
    padding-left: 5px;
}

.submenu-item:hover {
    background: #e2e8f0;
    color: #035a70;
}

.submenu-item .menu-icon svg {
    stroke: #385680;
    width: 18px;
    height: 18px;
}

/* Kelas Aktif untuk Submenu */
.submenu-container.open {
    display: block !important; /* Memaksa tampil jika sebelumnya tersembunyi oleh Role Guru */
    max-height: 500px; /* Diperbesar agar aman jika nanti menu bertambah */
    margin-bottom: 10px;
    overflow: visible; /* Agar tooltip atau bayangan tidak terpotong */
}


/* =========================================
   PERBAIKAN POSISI TENGAH (CENTERING)
   ========================================= */

/* 1. Pastikan Halaman Pendaftaran memenuhi layar & flex center */
#mainPage {
    display: flex;
    justify-content: center; /* Tengah Horizontal */
    align-items: center;     /* Tengah Vertikal */
    min-height: 100vh;       /* Tinggi minimal seukuran layar */
    width: 100%;
    padding-top: 40px;
}

/* 2. Atur Kontainer Tombol agar isinya rata tengah */
.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;     /* KUNCI: Menengahkan item (tombol/gambar) di tengah kolom */
    justify-content: center;
    text-align: center;      /* KUNCI: Menengahkan teks judul/deskripsi */
    width: 100%;
    max-width: 700px;        /* Batasi lebar agar tidak terlalu melebar */
    margin: 0 auto;          /* Pastikan container ada di tengah */
    padding: 10px;
}

/* 3. Atur Pembungkus Tombol Pilihan (Guru/Wali) */
.register-button-wrapper {
    display: flex;
    gap: 10px;
    justify-content: center; /* KUNCI: Menengahkan dua tombol besar */
    width: 100%;
    flex-wrap: nowrap;         /* Agar turun ke bawah jika di HP */
    margin-top: 10px;
    margin-bottom: 10px;
    flex-direction: row;
}

/* 4. Pastikan Logo di tengah */
.main-logo-section {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
}

/* (Opsional) Style Judul agar lebih rapi */
.registration-title {
    font-size: 1.7rem;
    color: #1e293b;
    margin-bottom: 5px;
}

.registration-subtitle {
    color: #64748b;
    margin-bottom: 5px;
    max-width: 500px; /* Agar teks tidak terlalu panjang ke samping */
    line-height: 1.5;
}

/* =========================================
   KHUSUS FORMULIR PENDAFTARAN (GURU & WALI)
   AGAR RAPI DI HP
   (Letakkan ini di paling bawah file style.css)
========================================= */

@media (max-width: 768px) {
    
    /* 1. Atur ulang container form di HP */
    #teacherForm .form-container, 
    #parentForm .form-container {
        width: 92% !important; /* Lebih lebar di HP (biar tidak sempit) */
        max-width: none !important;
        padding: 20px 15px !important; /* Padding kiri-kanan lebih kecil */
        margin: 85px auto 30px auto !important; /* Margin atas disesuaikan Header */
        box-shadow: none !important; /* Hilangkan shadow tebal biar clean */
        background: #ffffffde !important;
    }

    /* 2. Judul Form */
    .form-title {
        font-size: 1.45rem !important; /* Kecilkan font judul */
        margin-bottom: 20px !important;
        text-align: center;
    }

    

    /* 3. Input & Select (Agar mudah diketik jari) */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 14px !important; /* PENTING: Mencegah zoom otomatis di iPhone */
        padding: 10px !important; /* Area tap lebih luas */
        width: 98% !important;
        box-sizing: border-box; 
        margin-bottom: 5px;
    }

    /* 4. Label Form */
    .form-group label {
        font-size: 0.9rem !important;
        margin-bottom: 8px !important;
        display: block;
        margin-top: 8px;
    }

    /* 5. Tombol Submit (Daftar) */
    .submit-button {
        width: 100% !important; /* Tombol lebar penuh */
        padding: 9px !important;
        font-size: 0.9rem !important;
        margin-top: 10px !important;
        border-radius: 8px !important;
        margin-bottom: 15px;
    }

    /* 6. Jarak antar form group */
    .form-group {
        margin-bottom: 15px !important;
    }

    .form-group, #loginWali {
        margin-bottom: 1px !important;
    }
    
    /* Bagian No. 7 (Tombol Pilihan Peran) SUDAH SAYA HAPUS karena tidak dipakai lagi */
}


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

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}




/* Card Styles */
.scene {
    width: 450px;
    height: 600px;
    perspective: 1000px;
    position: relative; /* Penting untuk positioning toggle */
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.card.is-flipped {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    /* TAMBAHKAN VERSI -webkit- UNTUK CHROME & SAFARI */
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden;
}

.card-face-front {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    /* Pastikan z-index default lebih tinggi */
    z-index: 2;
}

.card-face-back {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    transform: rotateY(180deg);
    /* Z-index lebih rendah awalnya */
    z-index: 1;
}

.card-content {
    padding: 10px 40px 10px; /* Tambah padding bawah untuk ruang toggle */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 0px;
}

/* Toggle Switch - Positioned absolutely di dalam scene */
.toggle-container {
    position: absolute;
    bottom: 545px;
    left: 410px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    background: none;
    backdrop-filter: blur(10px);
    padding: 1px 8px;
    border-radius: 50px;
    /*box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);*/
    animation: slideUp 0.6s ease 0.3s backwards;
    z-index: 100; /* Di atas card */
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.toggle-label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    cursor: pointer;
    user-select: none;
}

.toggle-label.active {
    color: #1f3a5f;
    transform: scale(1.1);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.toggle-switch {
    width: 48px;
    height: 24px;
    background: #94a3b8a1;
    border-radius: 34px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.toggle-switch:hover {
    background: rgba(255, 255, 255, 0.25);
}

.toggle-slider {
    width: 17px;
    height: 17px;
    background: linear-gradient(135deg, #1fabab 0%, #034777 100%);
    border-radius: 50%;
    position: absolute;
    top: 1px;
    left: 2px;
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.toggle-switch.active .toggle-slider {
    left: 24px;
    top: 1px;
    background: linear-gradient(135deg, #122c69 0%, #8E54E9 100%);
}

.logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.title {
    font-size: 30px;
    font-weight: 800;
    color: #333;
    margin-top: 0px;
    letter-spacing: 0.5px;
}

.role-section {
    flex: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-top: 10px;
}

.role-icon {
    width: 150px;
    height: 150px;
    object-fit: contain;
    margin-bottom: 0px;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}

.card:not(.is-flipped) .card-face-front .role-icon:hover,
.card.is-flipped .card-face-back .role-icon:hover {
    transform: scale(1.2)
}

h2 {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
    padding: 0 10px;
}

.access-button {
    border-radius: 25px;
    border: none;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    padding: 15px 40px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.guru-button {
    background: linear-gradient(135deg, #1fabab 0%, #034777 100%);
}

.wali-button {
    background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
}

.access-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.access-button:active {
    transform: translateY(-1px);
}

.footer-section {
    width: 100%;
}

.footer-text {
    font-size: 12px;
    margin-bottom: 5px;
    margin-top: 15px;
}

.footer-text a {
    color: #1a7dc5;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.footer-text a:hover {
    color: #FF416C;
    text-decoration: underline;
}

/* Animasi masuk */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.scene {
    animation: slideIn 0.6s ease 0.2s backwards;
}

/* ========================================= */
/* ==   RESPONSIF (HP & TABLET)           == */
/* ========================================= */

@media screen and (max-width: 768px) {
    .scene {
        /* Ubah lebar fix 450px jadi 100% agar masuk di layar HP */
        width: 100%;
        /* Beri batas maksimal lebar agar tidak kelebaran di Tablet */
        max-width: 400px;
        /* Tinggi dikurangi sedikit biar toggle tidak ketutup tombol navigasi HP */
        height: 500px; 
        /* Jarak aman kiri-kanan */
        padding: 0 20px;
        box-sizing: border-box;
    }

    /* Penyesuaian Isi Kartu agar muat & rapi */
    .card-content {
        padding: 5px 10px 0px;
        padding-top: 20px;
    }

    .logo {
        width: 75px;
        height: 75px;
    }

    .role-icon {
        width: 130px; /* Icon dikecilkan sedikit */
        height: 130px;
    }

    h2 {
        font-size: 0.93rem !important;
        margin-bottom: 0px !important;
        text-align: center !important;
    }

    p {
        font-size: 13px; /* Deskripsi dikecilkan */
        line-height: 1.4;
        margin-bottom: 20px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .footer-text {
        font-size: 11px;
        margin-bottom: 10px;
        margin-top: 2px;
    }

    .access-button {
        width: 90%; /* Tombol dibuat melebar penuh agar gampang dipencet */
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 5px;
        padding-right: 5px;
        font-size: 12px;
        margin-bottom: 15px;
    }

    .toggle-container {
        position: absolute;
        bottom: 310px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 7px;
        background: #cbd5e100;
        backdrop-filter: blur(10px);
        padding: 1px 8px;
        border-radius: 50px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        animation: slideUp 0.6s ease 0.3s backwards;
        z-index: 100; /* Di atas card */
    }

    .toggle-slider {
        width: 17px;
        height: 17px;
        background: linear-gradient(135deg, #1fabab 0%, #034777 100%);
        border-radius: 50%;
        position: absolute;
        top: 1px;
        left: 2px;
        transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .toggle-switch {
        width: 48px;
        height: 24px;
        background: #94a3b8a1;
        border-radius: 34px;
        position: relative;
        cursor: pointer;
        transition: background 0.3s ease;
        border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .title {
        font-size: 26px;
        font-weight: 800;
        color: #333;
        margin-top: 0px;
        letter-spacing: 0.5px;
    }

    .summary-quote {
        font-size: 0.9rem;
    }

    .wali-button {
        background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
        width: 100%;
        display: block;
        margin: 0 auto 15px auto;
        padding: 10px 50px;
        font-size: 12px;
        border-radius: 20px;
        border: none;
        color: white;
        font-weight: bold;
        text-transform: uppercase;
    }
}

/* Efek shimmer untuk card */
.card-face::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s;
}

.card:hover .card-face::before {
    left: 100%;
}




/* ==================================================
   TAMBAHKAN INI DI BARIS PALING ATAS FILE CSS ANDA
   ================================================== */



/* 2. WADAH UTAMA (PEMBUNGKUS) - INI KUNCINYA */
.page#homePage {
    /* Gunakan fixed agar menimpa posisi apapun sebelumnya */
    position: fixed; 
    top: 0;
    left: 0;
    
    /* Ukuran Layar Penuh */
    width: 100vw;
    height: 100vh;
    
    /* LOGIKA TENGAH (CENTERING) */
    display: flex;           /* Wajib pakai flex */
    justify-content: center; /* Tengah Kiri-Kanan */
    align-items: center;     /* Tengah Atas-Bawah */
    
    /* Background Ungu */
    background: linear-gradient(135deg, #cce7ff, #f0f4f8, #e0e8ff, #fbeeff);
    
    /* Pastikan di atas elemen lain */
    z-index: 10; 
}

/* Pastikan halaman form punya jarak dari atas */
#teacherForm, #parentForm {
    padding-top: 0px; /* Sesuaikan dengan tinggi Header kamu */
    padding-bottom: 50px;
    min-height: 100vh;
    box-sizing: border-box;
}

/* Biar form container rapi di tengah */
.form-container {
    background: white;
    max-width: 800px;
    margin: 0 auto; /* Tengah horizontal */
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

/* ========================================= */
/* ==   STYLE FORMULIR UTAMA (DESKTOP)    == */
/* ========================================= */

/* 1. Pembungkus Utama Form (Kartu Putih) */
.form-container {
    background-color: #ffffff;
    width: 100%;
    max-width: 600px; 
    
    /* INI BAGIAN PENTINGNYA: */
    margin: 30px auto 30px auto; /* Jarak atas 30px sudah cukup karena ada padding body */
    
    padding: 40px 50px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;
    border-left: 5px solid #113b97;
    border-right: 5px solid #113b97;
}

/* 2. Judul Form */
.form-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-bottom: 35px;
    position: relative;
}

/* 3. Group Input (Wadah per kolom) */
.form-group {
    margin-bottom: 10px;
    text-align: left; /* Pastikan label rata kiri */
}

/* 4. Label */
.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
}

/* 5. Input Text, Select, Textarea */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    color: #333;
    background-color: #ffffff; /* Ubah ke putih bersih agar lebih kontras */
    border: 2px solid #e2e8f0; /* Warna garis saat diam (light grey-blue) */
    border-radius: 12px;
    transition: all 0.3s ease;
    outline: none;
    box-sizing: border-box;
}

/* Efek saat diklik/fokus (Final Brand Version) */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background-color: #ffffff;    /* Tetap putih agar bersih */
    border-color: #1F3A5F;        /* Garis tepi berubah jadi Biru Bayyina */
    
    /* Cahaya biru lembut (menggunakan warna brand dengan transparansi 15%) */
    box-shadow: 0 0 0 4px rgba(31, 58, 95, 0.15); 
    
    /* Sedikit efek mengangkat */
    transform: translateY(-1px);
}

/* 6. Info Tambahan (Teks kecil) */
.form-info {
    font-size: 13px;
    color: #052153;
    background: #f3f2f2;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    margin-top: 15px;
}

/* 7. Tombol Submit (Daftar) */
.submit-button {
    width: 100%;
    padding: 12px;
    font-size: 14px;
    font-weight: 700;
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Gradient Default (Bisa ditimpa per halaman) */
    background: linear-gradient(135deg, #333, #555); 
}

/* Warna khusus tombol Guru */
#teacherForm .submit-button {
    background: linear-gradient(135deg, #FF4B2B 0%, #FF416C 100%);
    box-shadow: 0 10px 20px rgba(255, 75, 43, 0.3);
}

/* Warna khusus tombol Wali */
#parentForm .submit-button {
    background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
    box-shadow: 0 10px 20px rgba(71, 118, 230, 0.3);
}

.submit-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(0,0,0,0.2);
}

.submit-button:active {
    transform: translateY(-1px);
}

/* --- STYLE UNTUK INPUT PASSWORD & ICON --- */

.password-container {
    position: relative;
    width: 100%;
}

/* Pastikan input punya ruang di kanan agar teks tidak menabrak icon */
.password-container input {
    width: 100%;
    padding-right: 45px !important; /* Ruang untuk icon */
    box-sizing: border-box;
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%); /* Posisi vertikal tengah presisi */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
    opacity: 0.6; /* Agak transparan biar tidak mengganggu */
}

.password-toggle:hover {
    opacity: 1; /* Jelas saat disorot */
}

/* Mengatur warna garis icon SVG */
.password-toggle svg {
    stroke: #888; /* Warna abu-abu elegan */
    transition: stroke 0.3s;
}

.password-toggle:hover svg {
    stroke: #333; /* Jadi gelap saat di-hover */
}


/* --- FIX POSISI SWEETALERT (Tengah Layar) --- */
.swal2-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important; /* Paksa setinggi layar */
    padding: 0 !important;
}

.swal2-popup {
    margin: auto !important; /* Memastikan kotak ada di tengah */
    width: 650px !important;
}

/* Opsional: Memastikan overlay background menutup sempurna */
body.swal2-shown > [aria-hidden="true"] {
    transition: 0.1s filter;
    filter: blur(2px); /* Efek blur dikit biar keren */
}



/* --- STYLE KHUSUS PRESENSI --- */

/* Radio Button Group yang cantik */
.attendance-options {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.attendance-options label {
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    background: white;
    color: #64748b;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Sembunyikan radio button asli */
.attendance-options input[type="radio"] {
    display: none;
}

/* Warna saat dipilih (Checked) */
.attendance-options input[type="radio"]:checked + label {
    transform: scale(1.05);
    border-color: transparent;
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Warna spesifik per status */
.radio-hadir:checked + label { background-color: #10b981; } /* Hijau */
.radio-sakit:checked + label { background-color: #f59e0b; } /* Kuning */
.radio-izin:checked + label  { background-color: #3b82f6; } /* Biru */
.radio-alpha:checked + label { background-color: #ef4444; } /* Merah */

.catatan-input {
    width: 100%;
    padding: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Style untuk Statistik di Kartu Biodata */
.biodata-stat-pill {
    padding: 6px 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1; /* Agar lebar rata */
    min-width: 80px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Di HP, biarkan statistik memenuhi lebar kartu */
@media (max-width: 480px) {
    .biodata-stats-wrapper {
        width: 100%;
    }
}

/* ============================================================
   4. STYLE KHUSUS FITUR ABSENSI & DASHBOARD (CLEAN VERSION)
   ============================================================ */

/* --- Header & Pencarian di Halaman Absensi --- */
.absensi-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 15px;
}

.absensi-title-group {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.absensi-title-group h4 {
    margin: 0;
    color: #334155;
    white-space: nowrap;
}

/* Input Pencarian Modern */
.search-bar-wrapper {
    position: relative;
    max-width: 250px;
    width: 100%;
}

.search-input-modern {
    width: 100%;
    padding: 8px 10px 8px 35px;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.3s;
}

.search-input-modern:focus {
    border-color: #0891b2;
}

.search-icon-overlay {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

/* Statistik Mini (Pill) di Header Absensi */
.stats-counter-pill {
    font-size: 0.85rem;
    display: flex;
    gap: 5px;
    background: white;
    padding: 6px 10px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 5px;
}


/* =========================================================
   FIX AMAN: MELEBARKAN KHUSUS HALAMAN ABSENSI SAJA
   ========================================================= */

@media (min-width: 900px) {
    #absensiKelas .teacher-menu-content {
        /* Paksa isinya melebar kiri-kanan */
        align-items: stretch !important; 
        width: 100% !important;
    }

    /* Kita juga rapikan grid di dalamnya biar seimbang */
    #absensiKelas .attendance-grid {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)) !important;
    }
}

/* ======================================================= */
/* ==      FIX LAYOUT FILTER ABSENSI (FULL ROW STYLE)   == */
/* ======================================================= */

/* 1. Paksa Container Filter agar Lebar Penuh */
#absensiKelas .form-container {
    width: 100% !important;
    max-width: 100% !important; 
    box-sizing: border-box;
    padding: 20px; /* Tambah padding biar lega */
}

/* 2. Rapikan Baris Input (MENGGUNAKAN STYLE YANG ANDA MINTA) */
#absensiKelas .form-row {
    display: flex !important;
    flex-direction: row !important; /* Paksa memanjang ke samping */
    width: 100%;
    gap: 15px; /* Sesuai permintaan */
    align-items: flex-end; /* Sesuai permintaan (agar tombol sejajar bawah) */
    margin-bottom: 0; /* Reset margin */
}

/* 3. Pastikan Tiap Kolom Input Seimbang */
#absensiKelas .form-group {
    flex: 1; /* Input Tanggal & Program akan mengisi ruang kosong */
    width: 100%;
    margin-bottom: 0 !important; /* Hilangkan margin bawah bawaan */
}

/* Pastikan label tidak berantakan */
#absensiKelas .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* 4. Tombol Buka Absensi */
#absensiKelas .submit-button {
    height: 40px;
    padding: 0 15px;
    white-space: nowrap;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

select#absensiProgram {
    padding: 8px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 2px;
}

input#absensiTanggal {
    padding: 8px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
}

/* --- RESPONSIF HP --- */
@media (max-width: 768px) {
    #absensiKelas .form-row {
        flex-direction: column !important; /* Di HP harus turun ke bawah */
        align-items: stretch !important;
    }
    
    #absensiKelas .submit-button {
        height: 40px !important;
        padding: 0 15px;
        white-space: nowrap;
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .stats-counter-pill {
        font-size: 0.85rem;
        display: flex;
        gap: 20%;
        background: white;
        border-radius: 20px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
        padding-left: 30%;
        padding-right: 27%;
        justify-content: center;
    }

    .stat-item {
        display: flex;
        align-items: center;
        gap: 5px;
    }
}

/* ============================================================
   UPDATE: STATISTIK KEHADIRAN (GRID 3 KOLOM ANTI-GESER)
   ============================================================ */

.biodata-stats-container {
    margin-top: 25px;
}

.biodata-stats-title {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 10px;
    font-weight: 500;
}

/* UBAH INI JADI GRID (Agar pas 3 kolom) */
.biodata-stats-grid {
    display: grid;
    /* Rumus: 3 kolom dengan lebar sama rata */
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 10px;
    width: 100%;
}



/* Filter Section Absensi (Background abu-abu itu) */
.absensi-filter-box {
    background: #f8fafc;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-bottom: 20px;
    margin-top: 10px;
}

/* =========================================
   DESAIN BARU: KARTU ABSENSI INTERAKTIF
   ========================================= */

/* Wadah Grid (Biar responsif) */
.attendance-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default 1 kolom */
    gap: 15px;
    margin-top: 20px;
}

/* Tampilan Desktop: 2 Kolom biar efisien */
@media (min-width: 900px) {
    .attendance-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Kartu Murid Individual */
.student-att-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

/* Efek saat status Terisi */
.student-att-card.status-filled {
    border-color: #0891b2;
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.1);
}

/* Header Kartu (Nama & Info) */
.att-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.att-student-name {
    font-size: 1rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 2px;
}

.att-student-id {
    font-size: 0.75rem;
    color: #94a3b8;
    font-family: monospace;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Group Tombol Absen (Segmented Control) */
.att-action-group {
    display: flex;
    background: #f8fafc;
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}

/* Desain Radio Button Tersembunyi */
.att-radio-input {
    display: none;
}

/* Label Tombol (Yang terlihat) */
.att-btn-label {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

/* Hover */
.att-btn-label:hover {
    background: #e2e8f0;
}

/* Logika Warna Saat Dipilih */
.att-radio-input[value="Hadir"]:checked + .att-btn-label {
    background: #10b981; /* Hijau */
    color: white;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

.att-radio-input[value="Sakit"]:checked + .att-btn-label {
    background: #f59e0b; /* Kuning */
    color: white;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.att-radio-input[value="Izin"]:checked + .att-btn-label {
    background: #3b82f6; /* Biru */
    color: white;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.att-radio-input[value="Alpha"]:checked + .att-btn-label {
    background: #ef4444; /* Merah */
    color: white;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

/* Input Keterangan (Minimalis) */
.att-notes-wrapper {
    position: relative;
}
.att-notes-input {
    width: 100%;
    border: none;
    border-bottom: 1px dashed #cbd5e1;
    padding: 5px 0 5px 25px; /* Space untuk ikon */
    font-size: 0.85rem;
    color: #475569;
    background: transparent;
    outline: none;
    transition: border-color 0.3s;
}
.att-notes-input:focus {
    border-bottom-color: #0891b2;
}
.att-notes-icon {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

/* ========================================================== */
/* ==  SCROLL AREA UNTUK LIST MURID (DESKTOP)              == */
/* ========================================================== */

#absensiCardGrid {
    /* 1. Batasi Tinggi Container */
    /* Gunakan vh (Viewport Height) agar menyesuaikan tinggi monitor */
    max-height: 60vh; 
    
    /* 2. Aktifkan Scroll */
    overflow-y: auto; 
    
    /* 3. Kosmetik Container */
    padding: 15px; /* Beri jarak agar scrollbar tidak menempel kartu */
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background-color: #fff; /* Warna latar dalam kotak scroll */
    
    /* Pastikan layout Grid tetap rapi */
    /* display: grid; <--- Biarkan ini mengikuti class .attendance-grid asli kamu */
}

/* ========================================================== */
/* ==  BONUS: MEMPERCANTIK SCROLLBAR (BIAR GAK KAKU)       == */
/* ========================================================== */

/* Lebar scrollbar */
#absensiCardGrid::-webkit-scrollbar {
    width: 8px;
}

/* Warna jalur (track) scrollbar */
#absensiCardGrid::-webkit-scrollbar-track {
    background: #f1f5f9; 
    border-radius: 10px;
}

/* Warna batang (thumb) scrollbar */
#absensiCardGrid::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 10px;
}

/* Warna saat discroll/hover */
#absensiCardGrid::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; 
}

/* ======================================================== */
/* ==  FIX FORM ABSENSI (AGAR RAPI KE BAWAH DI HP)       == */
/* ======================================================== */

@media only screen and (max-width: 768px) {
    
    /* 1. Atur Ulang Kotak Pembungkus Filter */
    .absensi-filter-box, 
    .filter-section {
        display: flex !important;
        flex-direction: column !important; /* Paksa susun ke bawah */
        padding: 15px !important;
        gap: 15px !important;
        height: auto !important;
        width: 100%;
        background: #f8fafc !important; /* Pastikan background terang bersih */
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
    }

    /* 2. Atur Baris (Row) agar tidak memaksa ke samping */
    .filter-row {
        display: flex !important;
        flex-direction: column !important; /* SUSUN KE BAWAH */
        width: 100% !important;
        gap: 7px !important;
        align-items: stretch !important; /* Lebarkan anak-anaknya */
        margin: 0 !important;
    }

    /* 3. Perbaiki Grup Input (Label + Input) */
    .filter-group {
        width: 100% !important;
        margin: 0 !important;
        min-width: 0 !important; /* Mencegah overflow */
    }
    
    .filter-group label {
        text-align: left;
    }

    /* 4. Perbaiki Input & Select */
    .filter-group input, 
    .filter-group select,
    #absensiTanggal,
    #absensiKelas {
        width: 100% !important; /* Lebar penuh */
        height: 35px !important; /* Tinggi yang nyaman disentuh */
        font-size: 0.85rem !important;
        box-sizing: border-box !important;
        background-color: #ffffff !important;
    }

    /* 5. Perbaiki Tombol 'Buka Absensi' */
    .filter-row button,
    .btn-buka-absensi {
        width: 100% !important;
        margin-top: 10px !important;
        height: 30px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 6. Rapikan Pencarian 'Daftar Murid' di bawahnya */
    .absensi-header-wrapper {
        margin-top: 20px !important;
        padding: 0 10px !important;
        gap: 5px;
    }

    .search-input-modern {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Target ID wadah kartu murid dari HTML kamu */
    #absensiCardGrid {
        /* 1. Tentukan tinggi maksimal (misal 55% dari layar HP) */
        max-height: 55vh !important; 
        
        /* 2. Aktifkan Scroll Vertikal */
        overflow-y: auto !important;
        
        /* 3. Agar scroll mulus di iPhone/Android */
        -webkit-overflow-scrolling: touch !important; 
        
        /* 4. Kosmetik: Beri batas agar terlihat seperti 'box' terpisah */
        background-color: #f8fafc !important; /* Warna latar sedikit abu */
        border: 1px solid #cbd5e1 !important; /* Garis pinggir */
        border-radius: 8px !important;        /* Sudut membulat */
        padding: 10px !important;             /* Jarak isi ke pinggir */
        
        /* 5. Jarak dari elemen atas/bawah */
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
}


/* =========================================
   FIX LAYOUT HALAMAN LAPORAN (TENGAH)
   ========================================= */

/* Wadah Utama Kartu Laporan */
.report-hub-grid {
    display: flex;           /* Berjejer ke samping */
    justify-content: center; /* Rata tengah */
    align-items: stretch;    /* Tinggi kartu disamakan */
    gap: 30px;               /* Jarak antar kartu */
    flex-wrap: wrap;         /* Turun ke bawah jika layar HP sempit */
    padding: 0px;
    width: 100%;
    margin-top: 50px;
}

/* Mengatur Ukuran Kartu Laporan */
.report-hub-grid .std-card {
    width: 280px;       /* Lebar tetap yang ideal */
    flex: none;         /* Jangan melar sembarangan */
    padding: 40px 20px; /* Padding dalam lebih lega */
    box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Shadow lebih lembut */
    border: 1px solid #e2e8f0;
}

/* Efek Hover biar enak dilihat */
.report-hub-grid .std-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    border-color: #3b82f6;
}

@media (max-width: 768px) {
    /* 1. WADAH UTAMA (Menjadi 1 Kolom Penuh) */
    .report-hub-grid {
        display: grid !important;
        grid-template-columns: 1fr !important; /* Satu kartu per baris */
        gap: 12px !important;
        padding: 15px !important;
        width: 100% !important;
        margin-top: 15px !important;
        box-sizing: border-box !important;
    }

    /* 2. ATUR KARTU (Layout Horizontal di Dalam Kartu) */
    .report-hub-grid .std-card {
        width: 100% !important;
        min-height: auto !important; /* Tinggi mengikuti isi */
        padding: 15px !important;
        display: grid !important;
        /* Kolom 1: Ikon, Kolom 2: Judul & Deskripsi */
        grid-template-columns: 50px 1fr !important; 
        grid-template-rows: auto auto !important;
        column-gap: 15px !important;
        row-gap: 4px !important;
        align-items: center !important; 
        text-align: left !important;
        background: #ffffff;
        border-radius: 12px !important;
        border: 1px solid #f1f5f9;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    }

    /* 3. POSISI IKON (Samping Kiri) */
    .report-hub-grid .std-card > div:first-child {
        grid-row: 1 / 3 !important;    /* Membentang dari baris 1 sampai 3 */
        grid-column: 1 / 2 !important; /* Tetap di kolom 1 */
        width: 45px !important;
        height: 45px !important;
        background: #f0fdfa; /* Teal muda lembut */
        border-radius: 12px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .report-hub-grid .std-card svg {
        width: 24px !important;
        height: 24px !important;
        color: #0d9488; /* Warna Teal sesuai tema */
    }

    /* 4. POSISI JUDUL (Di Samping Ikon) */
    .report-hub-grid .std-card h3 {
        grid-row: 1 / 2 !important;
        grid-column: 2 / 3 !important;
        font-size: 1rem !important; /* Lebih besar karena ruang luas */
        font-weight: 700 !important;
        margin: 0 !important;
        color: #1e293b;
    }

    /* 5. POSISI DESKRIPSI (Di Bawah Judul, Samping Ikon) */
    .report-hub-grid .std-card p {
        grid-row: 2 / 3 !important;
        grid-column: 2 / 3 !important;
        font-size: 0.8rem !important;
        color: #64748b;
        margin: 0 !important;
        line-height: 1.4 !important;
        text-align: left !important;
        display: block !important; /* Tampilkan teks lebih lengkap */
    }
    
    /* Efek Interaksi */
    .report-hub-grid .std-card:active {
        background: #f1f5f9;
        transform: scale(0.98);
    }

    /* 1. Pastikan Wadah Ikon Menjadi Flexbox agar Ikon di Tengah */
    .report-hub-grid .std-card > div:first-child {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 45px !important;
        height: 45px !important;
        background: #f0fdfa; 
        border-radius: 12px !important;
        flex-shrink: 0; /* Mencegah wadah ikon gepeng/menyusut */
    }

    /* 2. ATUR UKURAN IKON SVG DI SINI */
    .report-hub-grid .std-card svg {
        /* Ukuran 24px - 28px biasanya paling pas untuk list vertikal */
        width: 26px !important; 
        height: 26px !important;
        
        /* Pastikan ikon tidak bisa menyusut */
        min-width: 26px !important;
        min-height: 26px !important;
        
        display: block;
        margin: 0 auto;
    }
}

/* ================================================= */
/* ==   RESPONSIVE MOBILE (LAYAR < 768px)         == */
/* ================================================= */

@media only screen and (max-width: 768px) {

    /* --- 0. ATURAN UMUM (Berlaku untuk kedua halaman) --- */
    /* Mencegah zoom otomatis di iPhone saat ketik */
    .form-group input {
        font-size: 16px !important; 
        margin-bottom: 5px;
    }

    /* =============================================
       BAGIAN 1: PENGATURAN KHUSUS LOGIN GURU
       ============================================= */
    
    /* A. Layout Halaman Guru */
    #loginGuru {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center; /* Posisi vertikal tengah */
        align-items: center;     /* Posisi horizontal tengah */
        padding-bottom: 50px;    /* Ruang jaga-jaga keyboard HP */
        margin-top: 0px;         /* Reset margin */
        /* PERBAIKAN: Hapus warna solid, ganti jadi transparan */
        background-color: transparent !important; 
        background: transparent !important;
    }

    /* B. Kartu Form Guru (.form-container di dalam #loginGuru) */
    #loginGuru .form-container {
        /* Lebar & Posisi */
        width: 100% !important;
        max-width: 90% !important;
        margin: 10px auto !important; /* Jarak atas-bawah */

        /* Dekorasi Box */
        padding: 30px 25px !important; /* Padding sedikit lebih besar */
        border-radius: 20px !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
        
        border-left: 4px solid #113b97;
        border-right: 4px solid #113b97;
    }

    /* C. Judul di Halaman Guru */
    #loginGuru .teacher-menu-title {
        font-size: 1.54rem !important;
        margin-bottom: 20px !important;
        color: #071a58;
    }

    /* D. Tombol Login Guru */
    #loginGuru .submit-button {
        padding: 8.5px !important;
        background-color: #2563eb !important; /* Biru */
        border-radius: 8px !important; /* Sudut agak kotak */
        margin-top: 10px !important;
    }


/* =========================================
   RESPONSIVE LAYOUT GANTI PASSWORD (MOBILE)
   ========================================= */

@media (max-width: 480px) {
    /* 1. Menyesuaikan Wadah Formulir */
    #changePasswordPage .form-container {
        width: 92% !important;      /* Memberikan sedikit ruang di pinggir layar */
        max-width: 100% !important;
        padding: 30px 20px !important; /* Mengurangi padding agar input lebih lebar */
        margin: 125px auto !important;
        border-radius: 15px !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
        
        /* Menipiskan aksen garis biru di samping agar tidak memakan tempat */
        border-left-width: 4px !important;
        border-right-width: 4px !important;
    }

    /* 2. Menyesuaikan Judul */
    #changePasswordPage h2 {
        font-size: 1.4rem !important;
        margin-bottom: 25px !important;
        line-height: 1.3;
    }

    /* 3. Menyesuaikan Input Field */
    #changePasswordPage .input-group input {
        padding: 12px 15px !important;
        font-size: 15px !important;
        margin-bottom: 15px !important;
    }

    /* 4. Menyesuaikan Tombol Update */
    #changePasswordPage .submit-button {
        width: 100% !important;
        padding: 14px !important;
        font-size: 1rem !important;
        margin-top: 10px !important;
        letter-spacing: 0.5px;
    }

    /* 5. Mengatur Jarak Ikon Mata (Show/Hide Password) */
    #changePasswordPage .password-toggle {
        right: 15px !important;
    }
}


    /* =============================================
       BAGIAN 2: PENGATURAN KHUSUS LOGIN WALI
       ============================================= */

    /* A. Layout Halaman Wali */
    #loginWali {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center; /* Posisi vertikal tengah */
        align-items: center;
        padding-bottom: 30px;
        /* PERBAIKAN */
        background-color: transparent !important;
        background: transparent !important;
    }

    /* B. Kartu Form Wali (.form-container di dalam #loginWali) */
    #loginWali .form-container {
        /* Lebar & Posisi */
        width: 100% !important;
        max-width: 85% !important; /* Wali sedikit lebih ramping kartunya */
        margin: 5px auto 20px auto !important;

        /* Dekorasi Box */
        padding: 20px 20px !important; /* Padding lebih hemat tempat */
        border-radius: 25px !important; /* Lebih bulat dari guru */
        box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
        border-top: none !important; /* Wali tidak pakai garis atas */
    }

    /* C. Judul di Halaman Wali */
    #loginWali h2 { /* Asumsi judul wali pakai tag h2 */
        font-size: 1.4rem !important; /* Sedikit lebih kecil */
        margin-bottom: 20px !important;
        color: #064e3b; /* Hijau Tua */
    }

    /* D. Input Khusus Wali (Kode Murid) */
    #loginWali input {
        text-align: center; /* Input kode biasanya bagus di tengah */
        letter-spacing: 2px; /* Jarak antar huruf kode */
        border-radius: 10px !important; /* Input bulat */
        border: 1px solid #d1d5db !important;
    }

    /* E. Tombol Login Wali */
    #loginWali .submit-button {
        padding: 10px !important;
        width: 100% !important;
        background-color: #059669 !important; /* Hijau */
        border-radius: 10px !important; /* Tombol Capsule (Bulat penuh) */
        font-weight: bold !important;
        letter-spacing: 1px;    
        margin-top: 10px !important;
    }
}


/* =========================================
   STYLE STATISTIK KEHADIRAN (GRID SYSTEM)
   ========================================= */

/* 1. Wadah Utama (Grid 3 Kolom) */
.report-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* Bagi 3 sama rata */
    gap: 10px;
    width: 100%;
    margin-bottom: 20px;
}

/* 2. Gaya Dasar Kotak */
.stat-box {
    padding: 15px 5px; /* Padding atas-bawah 15px, kiri-kanan 5px */
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 90px; /* Tinggi minimal agar terlihat gagah */
}

/* 3. Tipografi Teks */
.stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 5px;
    opacity: 0.9;
}

.stat-value {
    font-size: 1.5rem; /* Angka besar */
    font-weight: 700;
    line-height: 1;
}

/* 4. Varian Warna (Sesuai kode asli Anda) */

/* Hijau */
.stat-box.green {
    background: #dcfce7;
    border: 1px solid #86efac;
}
.stat-box.green .stat-label { color: #166534; }
.stat-box.green .stat-value { color: #15803d; }

/* Kuning */
.stat-box.yellow {
    background: #fef9c3;
    border: 1px solid #fde047;
}
.stat-box.yellow .stat-label { color: #854d0e; }
.stat-box.yellow .stat-value { color: #a16207; }

/* Merah */
.stat-box.red {
    background: #fee2e2;
    border: 1px solid #fca5a5;
}
.stat-box.red .stat-label { color: #991b1b; }
.stat-box.red .stat-value { color: #b91c1c; }


/* --- PENGATURAN KHUSUS HP --- */
@media (max-width: 768px) {
    .report-stats-grid {
        gap: 8px; /* Jarak antar kotak lebih rapat di HP */
    }
    
    .stat-box {
        padding: 10px 2px; /* Hemat ruang padding di HP */
        min-height: 80px;
    }

    .stat-label {
        font-size: 0.7rem; /* Kecilkan teks label di HP */
    }

    .stat-value {
        font-size: 1.3rem; /* Sesuaikan ukuran angka di HP */
    }
}


/* =========================================
   BASE STYLE (Dipakai Keduanya)
   ========================================= */
.chart-container {
    position: relative;
    width: 90%;
    margin: 20px auto;
    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
    height: 250px;
    transition: transform 0.3s ease; /* Efek halus saat hover */
}

/* =========================================
   STYLE KHUSUS TAHSIN (Nuansa Biru/Hijau)
   ========================================= */
#chartContainerTahsin {
    border-top: 5px solid #10b981; /* Garis atas Hijau Emerald */
    background: linear-gradient(to bottom, #f0fdf4, #ffffff 15%); /* Gradasi halus hijau pudar */
}

/* =========================================
   STYLE KHUSUS TAHFIZH (Nuansa Emas/Gold)
   ========================================= */
#chartContainerTahfizh {
    border-top: 5px solid #f59e0b; /* Garis atas Emas */
    background: linear-gradient(to bottom, #fffbeb, #ffffff 15%); /* Gradasi halus kuning pudar */
}

/* Responsif HP (Tetap sama untuk keduanya agar rapi) */
@media (max-width: 768px) {
    .chart-container {
        width: 100% !important;
        height: 200px !important;
        margin: 15px 0 !important;
        padding: 10px !important;
    }
}



/* =========================================
   FIX HOMEPAGE TRANSPARENCY
   Menghapus warna background lama di Home
   agar motif Islami di Body terlihat.
   ========================================= */

.page#homePage {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important; /* Hilangkan bayangan kotak jika ada */
}


/* =========================================
   BACKGROUND KHUSUS LANDING & LOGIN
   ========================================= */

/* Kelas ini akan disuntikkan oleh JS saat di halaman depan */
body.bg-landing-mode {
    /* Ganti URL ini dengan gambar pilihan Anda */
    background-image: url('images/bg-depan.png') !important;
    
    /* Agar gambar memenuhi layar & tidak gerak */
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* Opsional: Memberi lapisan gelap tipis agar Card tetap menonjol */
body.bg-landing-mode::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.2); /* Gelap 20% */
    z-index: -1;
    pointer-events: none;
}


/* =========================================
   FIX TABEL KHUSUS PENILAIAN TAHSIN
   (Agar tidak merusak tampilan Tahfizh)
   ========================================= */

/* 1. Kolom Kategori (Kiri) - Dikecilkan */
#penilaianTahsin .report-table th:nth-child(1),
#penilaianTahsin .report-table td:nth-child(1) {
    width: 25%; /* Cukup 25% saja */
    white-space: normal; /* Biarkan teks turun baris jika panjang */
    vertical-align: middle; /* Posisi vertikal tengah */
}

/* 2. Kolom Catatan Detail (Tengah) - Dilebarkan */
#penilaianTahsin .report-table th:nth-child(2),
#penilaianTahsin .report-table td:nth-child(2) {
    width: 60%; /* Berikan porsi paling besar */
    text-align: center; /* Rata kiri biar enak dibaca */
    white-space: normal; 
    word-wrap: break-word; /* Potong kata jika terlalu panjang */
    vertical-align: middle;
}

/* 3. Kolom Aksi/Hapus (Kanan) - Kecil saja */
#penilaianTahsin .report-table th:nth-child(3),
#penilaianTahsin .report-table td:nth-child(3) {
    width: 15%; 
    text-align: center;
    vertical-align: middle;
}


/* =========================================
   FIX PLACEHOLDER TANGGAL (MOBILE)
   ========================================= */

/* 1. Saat nilai kosong/invalid, tampilkan teks bantuan */
input[type="date"]:invalid::-webkit-datetime-edit {
    color: transparent; /* Sembunyikan format bawaan browser */
}

/* KODE BARU (HANYA UNTUK TAHSIN) */
#penilaianTahsin input[type="date"]:invalid::before {
    content: "Tanggal Penilaian";
    color: #9ca3af;
    position: absolute;
    left: 10px;
    pointer-events: none; /* Agar klik tembus ke input */
}

/* 2. Saat diklik/fokus, hilangkan teks bantuan */
input[type="date"]:focus::before,
input[type="date"]:valid::before {
    content: "" !important;
    display: none;
}





/* =========================================
   STYLE POPUP INFO REKENING (MULTI-CHANNEL)
   ========================================= */

/* 1. Container Utama Popup */
.payment-popup-container {
    max-height: 60vh;
    overflow-y: auto;
    padding: 5px;
    background: #f8fafc;
    border-radius: 12px;
}

/* 2. Bagian QRIS */
.payment-qris-box {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #cbd5e1;
}

.payment-qris-label {
    font-weight: 700;
    color: #334155;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.payment-qris-img {
    max-width: 180px;
    width: 100%; /* Responsif */
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    padding: 5px;
    background: white;
}

/* 3. Kartu Rekening (Item) */
.payment-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.2s;
}

.payment-card:hover {
    border-color: #0d9488;
    transform: translateY(-2px);
}

/* 4. Logo/Icon Pembayaran */
.payment-logo-box {
    width: 60px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f1f5f9;
    border-radius: 50px;
    padding: 5px;
    flex-shrink: 0; /* Agar tidak gepeng di HP */
}

.payment-logo-img {
    width: 120%;
    height: 140%;
    object-fit: contain;
}

.payment-icon-text {
    font-size: 1.5rem;
}

/* 5. Detail Teks Rekening */
.payment-details {
    flex: 1; /* Mengisi sisa ruang */
    min-width: 0; /* Mencegah teks panjang merusak layout flex */
}

.payment-provider {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.payment-number {
    font-size: 1rem;
    color: #1e293b;
    font-weight: 800;
    font-family: monospace;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.payment-name {
    font-size: 0.75rem;
    color: #10b981;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 6. Tombol Salin */
.payment-copy-btn {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
    padding: 8px 5px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    flex-shrink: 0;
}

.payment-copy-btn:hover {
    background: #15803d;
    color: white;
}

.payment-copy-btn svg {
    margin-bottom: 2px;
}

.payment-copy-text {
    font-size: 0.65rem;
}

/* 7. Footer Catatan */
.payment-footer-note {
    margin-top: 15px;
    font-size: 0.8rem;
    color: #94a3b8;
    text-align: center;
    font-style: italic;
}

/* --- RESPONSIF HP (Mobile Tweaks) --- */
@media (max-width: 480px) {
    .payment-card {
        padding: 12px;
        gap: 10px;
    }
    
    .payment-logo-box {
        width: 55px; /* Perkecil logo di HP */
        height: 40px;
    }
    
    .payment-number {
        font-size: 0.9rem; /* Perkecil font nomor */
    }
    
    .payment-copy-btn {
        width: 40px;
        padding: 6px;
    }
    .payment-copy-text {
        display: none; /* Sembunyikan teks "Salin" di HP kecil, cukup ikon */
    }
}


/* =========================================
   STYLE KHUSUS POPUP PEMBAYARAN (UI.JS)
   ========================================= */

/* 1. Wadah Utama Popup (Scrollable) */
.payment-popup-container {
    padding: 5px;
    background-color: #f8fafc; /* Warna latar abu-abu muda */
    border-radius: 12px;
}

/* 2. Kartu Rekening (Kotak Putih) */
.payment-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    
    /* Flexbox agar isinya sejajar ke samping */
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 3. Kotak Logo (Kiri) */
.payment-logo-box {
    width: 65px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f1f5f9;
    border-radius: 8px;
    padding: 4px;
    flex-shrink: 0; /* Agar tidak tergencet */
}

/* 4. Detail Teks (Tengah) */
.payment-details {
    flex: 1; /* Mengisi ruang kosong */
    min-width: 0; /* Penting! Mencegah teks panjang merusak layout */
    text-align: left;
}

.payment-provider {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 2px;
}

.payment-number {
    font-size: 0.95rem; /* Ukuran font nomor rekening */
    font-weight: 800;
    color: #1e293b;
    font-family: monospace; /* Font ala mesin ketik */
    letter-spacing: 0.5px;
}

.payment-name {
    font-size: 0.7rem;
    color: #10b981; /* Warna Hijau */
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Titik-titik jika kepanjangan */
}

/* 5. Tombol Salin (Kanan) */
.payment-copy-btn {
    display: flex;
    flex-direction: column; /* Ikon di atas, Teks di bawah */
    align-items: center;
    justify-content: center;
    
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
    
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}

.payment-copy-btn:active {
    background-color: #dcfce7; /* Efek saat ditekan */
    transform: scale(0.95);
}

.payment-copy-text {
    font-size: 0.65rem;
    font-weight: 700;
    margin-top: 2px;
}

/* --- RESPONSIF KHUSUS HP (Mobile) --- */
@media (max-width: 480px) {
    /* Perkecil padding di HP */
    .payment-card {
        padding: 12px;
        gap: 10px;
    }

    /* Perkecil logo sedikit */
    .payment-logo-box {
        width: 55px;
        height: 45px;
    }

    /* Sembunyikan teks "Salin" di HP kecil, cukup ikon saja */
    .payment-copy-text {
        display: none; 
    }
    
    .payment-copy-btn {
        padding: 10px; /* Biar tombolnya tetap enak dipencet */
    }
}

/* =========================================
   CUSTOM STYLE SWEETALERT (POP-UP)
   ========================================= */

/* 1. Mengatur Padding (Jarak Dalam) Popup */
div:where(.swal2-container) div:where(.swal2-popup) {
    padding: 20px !important; /* Ganti angka ini sesuka Anda */
    /* Contoh: 10px (tipis) atau 40px (lega) */
    
    border-radius: 20px !important; /* Biar sudutnya lebih bulat modern */
}

/* 2. Mengatur Padding Khusus Konten HTML di dalamnya */
div:where(.swal2-container) .swal2-html-container {
    margin: 10px 0 !important; /* Jarak atas-bawah konten */
    padding: 0 !important;     /* Reset padding bawaan biar rapi */
}

/* =========================================
   TOMBOL INFO BAYAR (KWITANSI/RIWAYAT)
   ========================================= */

.btn-info-bayar {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    
    /* Animasi halus */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efek saat disentuh/hover */
.btn-info-bayar:hover {
    transform: translateY(-2px); /* Naik sedikit */
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5); /* Bayangan menebal */
}

.btn-info-bayar:active {
    transform: scale(0.98); /* Efek tekan */
}


/* =========================================
   STYLE PROGRESS BAR (DASHBOARD WALI)
   ========================================= */

.progress-card-container {
    background: #e4f0ff7a;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border: 1px solid #e2e8f0;
    width: 100%;
    box-sizing: border-box;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.progress-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #334155;
    font-size: 1rem;
}

.progress-percentage {
    font-weight: 800;
    font-size: 1.1rem;
    color: #0d9488; /* Hijau Tosca */
}

/* Batang Track (Abu-abu) */
.progress-track {
    width: 100%;
    height: 12px;
    background-color: #cbd5e1;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}

/* Batang Isi (Hijau) */
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #2dd4bf 0%, #0d9488 100%);
    border-radius: 10px;
    transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1); /* Animasi gerak */
    width: 0%;
}

.progress-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #64748b;
}

.progress-badge {
    background: #ecfdf5;
    color: #059669;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}


/* =========================================
   STYLE HALAMAN KABAR & PRESTASI (TIMELINE)
   ========================================= */

/* 1. Wadah Utama Kartu (Grid System) */
.timeline-container {
    width: 100%;
    /* Gunakan Grid agar rapi */
    display: grid !important; 
    /* Desktop: Auto Fit (Responsif) */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 20px;
    padding: 20px 0;
    
    /* Reset style lama */
    flex-direction: unset !important;
    max-width: 100% !important;
}

/* 2. Kartu Kabar (Item) */
.kabar-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid #f1f5f9;
    border-left: 5px solid #0d9488; /* Aksen Hijau Tosca */
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    
    /* Pastikan tidak tumpang tindih */
    margin-bottom: 0 !important; /* Jarak diurus oleh Grid gap */
    width: 100%;
    box-sizing: border-box;
}

.kabar-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* 3. Komponen Dalam Kartu */
.kabar-date {
    font-size: 0.8rem;
    color: #94a3b8; /* Slate-400 */
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}
/* Ikon jam kecil sebelum tanggal (opsional, pakai CSS pseudo) */
.kabar-date::before {
    content: "📅";
    font-size: 0.9rem;
}

.kabar-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b; /* Slate-800 */
    margin-bottom: 5px;
    line-height: 1.3;
}

.kabar-detail {
    font-size: 0.9rem;
    color: #0d9488; /* Warna primer */
    font-weight: 600;
    margin-bottom: 8px;
    
    /* Batasi panjang teks */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 4. Tombol Lihat Sertifikat (VERSI FIX KECIL) */
.btn-lihat-sertifikat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    /* KUNCI: Agar tombol tidak raksasa */
    width: fit-content; 
    min-width: 0;
    
    /* Posisi Kanan Bawah */
    margin-top: 5px;
    margin-left: auto; 
    
    background: #f0fdfa;
    color: #0f766e;
    border: 1px solid #ccfbf1;
    
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-lihat-sertifikat:hover {
    background: #0d9488;
    color: white;
    border-color: #0d9488;
    box-shadow: 0 4px 10px rgba(13, 148, 136, 0.2);
}

/* Styling Tombol Refresh Kabar */
.btn-refresh-kabar {
    background: white;
    border: 1px solid #e2e8f0;
    width: 45px;
    height: 35px;
    border-radius: 12px;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.btn-refresh-kabar:hover {
    background: #f1f5f9;
    color: #0d9488; /* Warna Teal khas aplikasi */
}

.btn-refresh-kabar:active {
    transform: rotate(180deg) scale(0.95);
}

/* =========================================
   RESPONSIF MOBILE (MAX-WIDTH 768px)
   ========================================= */
@media (max-width: 768px) {
    
    /* Ubah Grid jadi 1 Kolom di HP */
    .timeline-container {
        grid-template-columns: 1fr !important; /* 1 Kartu per baris */
        gap: 15px !important;
        padding: 10px 5px !important;
    }

    .kabar-card {
        padding: 15px; /* Sedikit lebih tipis */
        border-radius: 12px;
    }

    .kabar-detail {
        font-size: 0.95rem;
        color: #0d9488;
        font-weight: 600;
        margin-bottom: 0px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .btn-lihat-sertifikat {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: fit-content;
        min-width: 0;
        margin-top: 5px;
        margin-left: auto;
        background: #f0fdfa;
        color: #0f766e;
        border: 1px solid #ccfbf1;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .kabar-title {
        font-size: 1rem;
    }

    .btn-refresh-kabar {
        width: 40px;
        height: 35px;
        border-radius: 10px;
    }
}

/* =========================================
   STYLE KABAR & PRESTASI (SEARCH & SCROLL)
   ========================================= */

/* 1. Search Bar Cantik */
.search-bar-container {
    margin-bottom: 20px;
    display: flex;
    justify-content: left;
}

.search-box-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.search-box-wrapper svg {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.search-box-wrapper input {
    width: 100%;
    padding: 12px 15px 12px 45px; /* Padding kiri besar untuk ikon */
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.search-box-wrapper input:focus {
    border-color: #0d9488;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.15);
}

/* 2. Scrollable Area (Desktop) */
/* Di desktop, kita batasi tingginya agar halaman tidak memanjang ke bawah */
.timeline-scroll-area {
    max-height: 600px; /* Batas tinggi */
    overflow-y: auto;  /* Muncul scrollbar jika lebih */
    padding: 5px;      /* Ruang untuk shadow kartu */
    
    /* Styling Scrollbar cantik */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

/* Scrollbar Webkit (Chrome/Safari) */
.timeline-scroll-area::-webkit-scrollbar {
    width: 8px;
}
.timeline-scroll-area::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}
.timeline-scroll-area::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px;
}

/* 3. Responsif HP (Scroll Natural) */
@media (max-width: 768px) {
    .timeline-scroll-area {
        max-height: none; /* Lepas batas tinggi */
        overflow-y: visible; /* Biarkan memanjang natural */
    }
}


/* =========================================
   STYLE TOGGLE SWITCH (MODERN UI)
   ========================================= */

/* 1. Wadah Utama (Baris Kiri-Kanan) */
.special-toggle-wrapper {
    display: flex;
    justify-content: space-between; /* Teks kiri, Saklar kanan */
    align-items: center;
    
    background-color: #f0f9ff;      /* Biru sangat muda */
    border: 1px solid #bae6fd;      /* Garis biru */
    border-radius: 16px;            /* Sudut bulat modern */
    padding: 15px 20px;
    margin-top: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    margin-bottom: 8px;
}

/* 2. Teks Label */
.toggle-text-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-right: 15px; /* Jarak ke saklar */
}

.toggle-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0284c7; /* Biru Tua */
}

.toggle-subtitle {
    font-size: 0.75rem;
    color: #64748b;
}

/* 3. Komponen Saklar (Switch) */
.ios-switch {
    position: relative;
    display: inline-block;
    width: 50px;  /* Lebar saklar */
    height: 28px; /* Tinggi saklar */
    flex-shrink: 0; /* Jangan gepeng */
}

/* Sembunyikan checkbox asli */
.ios-switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

/* Rel / Track Saklar */
.ios-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1; /* Abu-abu (Off) */
    transition: .4s;
    border-radius: 34px;
    height: 27.5px;
}

/* Bulatan Kenop (Knob) */
.ios-switch .slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* State: ON (Checked) */
.ios-switch input:checked + .slider {
    background-color: #0284c7; /* Biru (On) */
}

/* State: ON (Geser Kenop) */
.ios-switch input:checked + .slider:before {
    transform: translateX(22px);
}


/* ================================================================
   FIX BADGE KECIL (KHUSUS DI HALAMAN PENILAIAN TAHSIN & TAHFIZH)
   ================================================================ */

/* 1. Target Badge HANYA yang ada di dalam form penilaian */
#penilaianTahsin .student-badges .badge,
#penilaianTahfizh .student-badges .badge {
    
    /* Perkecil Ukuran */
    font-size: 0.75rem !important;  /* Tulisan kecil (sekitar 12px) */
    padding: 4px 8px !important;    /* Kotak lebih ramping */
    border-radius: 6px !important;  /* Sudut sedikit lebih tajam */
    
    /* Hapus bayangan berlebih biar flat/rapi */
    box-shadow: none !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

/* 2. Perkecil Ikon di dalam badge (jika ada) */
#penilaianTahsin .student-badges .badge svg,
#penilaianTahfizh .student-badges .badge svg,
#penilaianTahsin .student-badges .badge i,
#penilaianTahfizh .student-badges .badge i {
    width: 14px !important;
    height: 14px !important;
    margin-right: 4px !important;
}

/* 3. Atur Jarak Antar Badge agar lebih rapat */
#penilaianTahsin .student-badges,
#penilaianTahfizh .student-badges {
    gap: 8px !important;
    margin-top: 5px !important;
    justify-content: center !important; /* Rata tengah agar rapi di panel */
}

/* 4. Pastikan Nama Murid di Penilaian tidak terlalu raksasa */
#penilaianTahsin h3#tahsinCardName,
#penilaianTahfizh h3#tahfizhCardName {
    font-size: 2rem !important; /* Ukuran wajar (sekitar 20px) */
    margin-bottom: 10px !important;
    font-weight: 700 !important;
}


/* ========================================================= */
/* ==   FIX PLACEHOLDER TANGGAL (TAHSIN & TAHFIZH)       == */
/* ========================================================= */

/* 1. MEMBUAT JANGKAR (PENTING!)
   Agar teks tidak terbang ke pojok layar, pembungkusnya harus Relative */
#penilaianTahsin .form-group,
#penilaianTahfizh .form-group {
    position: relative !important;
}

/* 2. MENAMPILKAN PLACEHOLDER PALSU
   Berlaku untuk Tahsin DAN Tahfizh */
#penilaianTahsin input[type="date"]:invalid::before,
#penilaianTahfizh input[type="date"]:invalid::before {
    content: "Tanggal Penilaian"; /* Teks yang muncul */
    color: #94a3b8;               /* Warna abu-abu soft */
    
    position: absolute;
    left: 12px;                   /* Jarak dari kiri (sesuaikan padding input) */
    top: 43%;                     /* Posisi tengah vertikal */
    transform: translateY(-50%);  /* Koreksi agar pas di tengah */
    
    pointer-events: none;         /* Agar input tetap bisa diklik tembus */
    background-color: #ffffff;    /* Latar putih agar menutupi placeholder bawaan browser */
    width: auto;                  /* Lebar menyesuaikan teks */
    font-size: 0.9rem;
    padding-right: 5px;
}

/* 3. MENGHILANGKAN PLACEHOLDER SAAT DIISI/FOKUS */
#penilaianTahsin input[type="date"]:focus::before,
#penilaianTahsin input[type="date"]:valid::before,
#penilaianTahfizh input[type="date"]:focus::before,
#penilaianTahfizh input[type="date"]:valid::before {
    display: none !important;
}

/* ======================================================= */
/* ==   FIX FINAL: PAKSA INPUT JADI 2 KOLOM (GRID)      == */
/* ======================================================= */

/* Target khusus baris di dalam panel penilaian Tahfizh */
#penilaianTahfizh .control-panel .form-row-iuran {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Paksa bagi 2 sama rata */
    gap: 15px !important;                      /* Jarak antar kolom */
    
    /* Reset gaya lama yang mungkin bikin kacau */
    flex-direction: unset !important;
    align-items: unset !important;
    width: 100% !important;
}

/* Pastikan pembungkus input (form-group) nurut sama Grid */
#penilaianTahfizh .control-panel .form-group {
    width: 100% !important;
    min-width: 0 !important; /* Mencegah input meledak keluar */
    margin: 0 !important;
}

/* ======================================================= */
/* ==      CUSTOM SCROLLBAR TIPIS (KHUSUS TAHFIZH)      == */
/* ======================================================= */

/* 1. Targetkan Panel Kanan (.control-panel) & Panel Ayat */
#penilaianTahfizh .control-panel::-webkit-scrollbar,
#penilaianTahfizh .ayat-panel-wrapper::-webkit-scrollbar {
    width: 6px; /* Ubah angka ini untuk mengatur ketebalan (misal: 4px lebih tipis) */
}

/* 2. Jalur/Track Scrollbar (Background) */
#penilaianTahfizh .control-panel::-webkit-scrollbar-track,
#penilaianTahfizh .ayat-panel-wrapper::-webkit-scrollbar-track {
    background: transparent; /* Transparan agar bersih */
}

/* 3. Batang Scrollbar (Thumb) */
#penilaianTahfizh .control-panel::-webkit-scrollbar-thumb,
#penilaianTahfizh .ayat-panel-wrapper::-webkit-scrollbar-thumb {
    background-color: #cbd5e1; /* Warna abu-abu soft */
    border-radius: 20px;       /* Membuatnya bulat lonjong */
    border: 2px solid transparent; /* Jarak agar tidak terlalu nempel pinggir */
    background-clip: content-box;
}

/* 4. Saat Mouse Hover di Scrollbar */
#penilaianTahfizh .control-panel::-webkit-scrollbar-thumb:hover,
#penilaianTahfizh .ayat-panel-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8; /* Sedikit lebih gelap saat disentuh */
}

/* ======================================================= */
/* ==   LOGIKA MUNCUL/HILANG TOOLBAR (DESKTOP & HP)     == */
/* ======================================================= */

/* 1. KONDISI AWAL: SEMBUNYI */
.floating-toolbar {
    display: none !important; /* Wajib hilang dulu */
    /* Pastikan transisi tetap ada jika nanti dimunculkan */
    transition: all 0.3s ease; 
}

/* 2. KONDISI MUNCUL (Dipanggil lewat JS) */
.floating-toolbar.muncul {
    display: flex !important; /* Paksa muncul (flex agar ikon berjejer) */
    
    /* Animasi masuk kecil (opsional, biar manis) */
    animation: fadeInUp 0.3s ease-out forwards;
}

/* Keyframes untuk animasi muncul dari bawah */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, 20px); /* Dari sedikit ke bawah */
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0); /* Ke posisi asli */
    }
}


/* Sembunyikan banner jika sidebar dalam keadaan mini/collapsed */
.sidebar.collapsed #install-banner {
    display: none !important;
}

/* Animasi halus agar menarik perhatian tapi tidak mengganggu */
@keyframes soft-glow {
    0%, 100% { box-shadow: 0 10px 15px -3px rgba(20, 184, 166, 0.3); }
    50% { box-shadow: 0 15px 25px -5px rgba(20, 184, 166, 0.5); }
}

#install-banner {
    animation: soft-glow 3s infinite;
}


/* Pastikan banner terlihat saat JS menghapus class .hidden */
#install-banner:not(.hidden) {
    display: flex !important;
}

/* Sembunyikan banner jika sidebar sedang dalam mode kecil/collapsed */
.sidebar.collapsed #install-banner {
    display: none !important;
}

/* Penyesuaian agar tidak merusak padding sidebar */
.menu-section {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#install-banner {
    margin-top: auto; /* Memaksa banner berada di paling bawah sidebar */
    margin-bottom: 20px;
}


/* Container Navigasi agar Flexbox bekerja */
.menu-section {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 400px;
}

/* Container Banner yang Tipis & Elegan */
#install-banner {
    margin: 15px 15px;
    padding: 10px 14px;
    background: #556985; /* Warna Teal Solid */
    border-radius: 12px;
    display: none; /* Default tersembunyi */
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Memaksa muncul sebagai flex saat aktif */
#install-banner:not(.hidden) {
    display: flex !important;
}

/* Detail Teks */
.pwa-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pwa-main-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pwa-action-text {
    color: white !important;
    font-size: 11px;
    font-weight: 700;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Ikon Kecil di Samping */
.pwa-icon-box {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Sembunyikan jika sidebar kecil */
.sidebar.collapsed #install-banner {
    display: none !important;
}


.elegant-toggle-wrapper {
    position: absolute;
    top: -40px;
    right: -20px;
    z-index: 100;
}

/* Diperlebar agar teks muat di dalam */
.toggle-switch {
    width: 80px; 
    height: 34px;
    background-color: #e2e8f0;
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.toggle-switch.active {
    background-color: #e2e8f0; /* Warna hijau saat mode Wali */
}

/* Bulatan Slider */
.toggle-slider {
    width: 24px;
    height: 24px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 2; /* Di atas teks */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.toggle-switch.active .toggle-slider {
    left: 49px; /* Geser ke kanan */
    top: 3px;
}

/* Teks di dalam Switch */
.toggle-internal-text {
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    user-select: none;
    transition: all 0.3s ease;
    padding-left: 25px; /* Posisi teks saat mode GURU (slider di kiri) */
    padding-top: 3px;
}

/* Penyesuaian teks saat mode WALI (slider di kanan) */
.toggle-switch.active .toggle-internal-text {
    color: #64748b;
    padding-left: 0;
    padding-right: 25px; /* Geser teks agar tidak tertutup slider di kanan */
}

/* Hilangkan margin-top karena sekarang posisinya di samping, bukan di bawah */
.active-status-label {
    font-size: 0.8rem; /* Sedikit diperbesar agar lebih terbaca */
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    margin-top: 0; /* Pastikan ini 0 */
    transition: all 0.3s ease;
    white-space: nowrap; /* Mencegah teks turun ke bawah (pindah baris) */
}

/* Warna saat mode Wali aktif */
.active-status-label.wali-active {
    color: #0d9488;
}

/* ==========================================================
   OPTIMASI MOBILE (SCREEN < 768px)
   ========================================================== */

@media (max-width: 768px) {
    /* Pindahkan posisi agar tidak keluar layar di HP */
    .elegant-toggle-wrapper {
        top: 15px !important;    /* Masuk ke dalam area kartu */
        right: 15px !important;  /* Masuk ke dalam area kartu */
    }

    /* Sedikit penyesuaian ukuran agar pas di layar kecil */
    .toggle-switch {
        width: 75px;
        height: 30px;
        bottom: 190px;
        left: 163px;
    }
    .toggle-slider {
        width: 22px;
        height: 22px;
        top: 2px;
        left: 3px;
    }

    .toggle-switch.active .toggle-slider {
        left: 47px; /* Sesuaikan dengan lebar baru */
        top: 2px;
    }

    .toggle-internal-text {
        font-size: 0.75rem; /* Ukuran teks lebih kecil sedikit */
        padding-left: 22px;
        padding-bottom: 2px;
    }

    .toggle-switch.active .toggle-internal-text {
        padding-right: 22px;
        padding-bottom: 4px;
    }

    /* Jika ada label tambahan di luar, sembunyikan atau sesuaikan */
    .active-status-label {
        font-size: 0.65rem;
    }
}


/* Efek Hover: Kartu naik ke atas + Shadow makin tebal */
.mode-card-pro:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    border-color: transparent !important;
}

/* Efek Klik: Kartu turun sedikit */
.mode-card-pro:active {
    transform: translateY(-2px);
    transition: all 0.1s;
}

/* Responsive: Di HP tumpuk ke bawah */
@media (max-width: 768px) {
    .mode-selection-container {
        flex-direction: column;
        align-items: center;
    }
    .mode-card-pro {
        width: 100% !important; /* Full width di HP */
        max-width: 340px;
    }
}



/* ========================================= */
/* REVISI TOTAL: RUANG WALI MURID (FIX)    */
/* ========================================= */

.ruangwali-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 10px;
}

/* --- 1. GRID SYSTEM YANG KOKOH --- */
.selection-grid {
    display: grid;
    /* Mobile: 2 Kolom */
    grid-template-columns: 1fr 1fr !important; 
    gap: 15px;
    margin-bottom: 25px;
}

/* Laptop/Tablet: 4 Kolom (Biar tidak gepeng) */
@media (min-width: 768px) {
    .selection-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- 2. KARTU PILIHAN (STANDARD) --- */
.selection-card {
    position: relative;
    background: #fff;
    border: 2px solid #e2e8f0; /* Border abu halus */
    border-radius: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}

/* Sembunyikan radio button asli */
.selection-card input[type="radio"] {
    display: none;
}

/* Isi Kartu (Vertical Stack) */
.selection-card-content {
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

/* Ikon SVG */
.svg-icon {
    margin-bottom: 10px;
    color: #64748b;
    transition: transform 0.2s;
}
.svg-icon svg {
    width: 36px;
    height: 36px;
}

/* Teks */
.text-box strong {
    display: block;
    font-size: 0.9rem;
    color: #334155;
    margin-bottom: 4px;
}
.text-box span {
    display: block;
    font-size: 0.7rem;
    color: #94a3b8;
    line-height: 1.3;
}

/* --- 3. EFEK SAAT DIPILIH (CHECKED) --- */
.selection-card:has(input:checked) {
    border-color: #0d9488; /* Hijau Tosca */
    background-color: #f0fdfa;
    box-shadow: 0 4px 10px rgba(13, 148, 136, 0.15);
    transform: translateY(-3px);
}

.selection-card input:checked + .selection-card-content .svg-icon {
    color: #ffffff;
    transform: scale(1.1); /* Ikon membesar dikit */
}

.selection-card input:checked + .selection-card-content .text-box strong {
    color: #0f766e;
}

/* --- 4. KARTU SPESIAL: PRIVASI (FULL WIDTH) --- */
.selection-card.full-width {
    grid-column: 1 / -1; /* Rentang dari awal sampai akhir grid */
}

/* Ubah layout jadi Horizontal (Kiri-Kanan) */
.selection-card.full-width .selection-card-content {
    flex-direction: row; 
    align-items: center;
    justify-content: center; /* Rata Kiri */
    text-align: left;
    padding: 20px 25px;
    gap: 20px;
}

.selection-card.full-width .svg-icon {
    margin-bottom: 0; /* Hapus margin bawah */
    padding-right: 0px;
    border-right: 1px solid #e2e8f0; /* Garis pemisah tipis */
}

.selection-card.full-width input:checked + .selection-card-content .svg-icon {
    border-right-color: #99f6e4; /* Garis pemisah jadi hijau saat aktif */
}

/* --- 5. TEXTAREA & TOMBOL --- */
.input-group {
    margin-top: 25px;
}

.textarea-wrapper textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    font-family: inherit;
    font-size: 0.95rem;
    color: #334155;
    transition: 0.2s;
    resize: vertical;
    box-sizing: border-box; /* Agar padding tidak bikin lebar berlebih */
}

.textarea-wrapper textarea:focus {
    outline: none;
    border-color: #0d9488;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.1);
}

.form-actions {
    margin-top: 20px;
}

.submit-button {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 50px;
    background: linear-gradient(135deg, #0d9488 0%, #115e59 100%);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(13, 148, 136, 0.3);
    transition: transform 0.1s, box-shadow 0.2s;
}

.submit-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(13, 148, 136, 0.4);
}

.submit-button:active {
    transform: scale(0.98);
}


/* Sembunyikan gambar mushaf jika error atau kosong */
#mushaf-image[src=""],
#mushaf-image:not([src]) {
    display: none !important; /* Paksa sembunyi */
    visibility: hidden !important;
    opacity: 0 !important;
}


/* =========================================
   HALAMAN PILIHAN MODE TAHFIZH
   ========================================= */

/* 1. Container Utama Halaman */
.mode-page-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

/* 2. Header / Judul Halaman */
.mode-page-header {
    margin-bottom: 50px;
}

.mode-page-header p {
    color: #64748b;
    font-size: 1.1rem;
    line-height: 1.6;
}

/* 3. Container Kartu (Flexbox) */
.mode-selection-container {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

/* 4. Base Style Kartu Mode */
.mode-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 24px;
    width: 340px;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    text-align: left;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Efek Hover Kartu (Opsional, agar lebih interaktif) */
.mode-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Typography di dalam Kartu */
.mode-card h3 {
    margin-bottom: 12px;
    font-size: 1.4rem;
    font-weight: 800;
}

.mode-card p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* 5. Icon Wrapper (Lingkaran Icon) */
.mode-icon-wrapper {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}

/* Tema Warna: Mode Ringkas (Teal/Hijau Tosca) */
.mode-card-ringkas h3 { color: #0f766e; }

.icon-ringkas {
    background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%);
    color: #0f766e;
    box-shadow: 0 10px 15px -3px rgba(13, 148, 136, 0.2);
}

/* Tema Warna: Mode Detail (Indigo/Biru Ungu) */
.mode-card-detail h3 { color: #4338ca; }

.icon-detail {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4338ca;
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.2);
}

/* 6. Badge "FAST MODE" */
.badge-fast-mode {
    position: absolute;
    top: 25px;
    right: 25px;
    background: #f0fdf4;
    color: #16a34a;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 50px;
    letter-spacing: 0.5px;
    border: 1px solid #dcfce7;
}

/* 7. Lock Overlay (Fitur Terkunci) */
.lock-overlay {
    position: absolute;
    inset: 0;
    /* Blur lebih halus sesuai permintaan */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s;
    padding: 25px;
}

/* Kotak Pesan di Tengah Overlay */
.lock-message-box {
    background: rgba(255, 255, 255, 0.95);
    padding: 25px 20px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #f1f5f9;
    text-align: center;
    max-width: 260px;
}

.lock-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.lock-message-box h4 {
    margin: 0 0 5px 0;
    color: #1e293b;
    font-weight: 700;
    font-size: 1rem;
}

.lock-message-box p {
    margin: 0;
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Utility Class */
.hidden {
    display: none !important;
}

/* =========================================
   RESPONSIVE (Tampilan HP)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. Atur Jarak Container Halaman */
    .mode-page-container {
        padding: 20px 15px; /* Padding lebih kecil biar lega */
    }

    /* 2. Judul Halaman di HP */
    .mode-page-header {
        margin-bottom: 30px;
    }
    .mode-page-header p {
        font-size: 0.85rem; /* Font agak dikecilkan */
    }

    /* 3. Kartu Disusun ke Bawah (Satu Kolom) */
    .mode-selection-container {
        flex-direction: column; /* Wajib: Susun ke bawah */
        align-items: center;    /* Tengah */
        gap: 20px;              /* Jarak antar kartu lebih rapat */
    }

    /* 4. Ukuran Kartu Menyesuaikan Lebar HP */
    .mode-card {
        width: 100% !important;
        max-width: 100%;
        padding: 15px;
        height: auto;
        padding-bottom: 5px;
        padding-left: 30px;
    }

    /* 5. Icon Dikecilkan Sedikit */
    .mode-icon-wrapper {
        width: 40px;
        height: 30px;
        margin-bottom: 10px;
    }
    .mode-icon-wrapper svg {
        width: 15px;
        height: 15px;
    }

    /* 6. Judul Kartu */
    .mode-card h3 {
        font-size: 1.1rem; /* Ukuran font judul pas di HP */
    }

    .mode-card p {
        color: #64748b;
        font-size: 0.8rem;
        line-height: 1.7;
    }

    /* 7. Badge "FAST MODE" */
    .badge-fast-mode {
        top: 20px;
        right: 20px;
        font-size: 0.65rem;
        padding: 4px 10px;
    }

    /* 8. Pesan Lock (Fitur Eksklusif) */
    .lock-message-box {
        max-width: 90%; /* Agar tidak terlalu lebar di HP */
        padding: 20px 15px;
    }
}


/* =========================================
   FORM PENILAIAN TAHFIZH (RINGKAS)
   ========================================= */

/* 1. Container Utama */
.tahfizh-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
}

/* 2. Kartu Form (Card Style) */
.form-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    margin-bottom: 25px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.card-header {
    margin-top: 0;
    color: #334155;
    font-size: 1.1rem;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* 3. Tombol Pilih Murid */
.btn-select-student {
    width: 100%;
    background: #0f766e;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: 0.2s;
}

.btn-select-student:hover {
    background: #115e59;
}

/* 4. Info Murid Box */
.student-info-box {
    background: #f0fdfa;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #ccfbf1;
    margin-top: 15px;
}

.student-info-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.student-name {
    margin: 0;
    color: #115e59;
    font-size: 1.2rem;
}

.student-badges {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

/* 5. Layout Form (Row & Col) */
.form-row {
    display: flex;
    gap: 15px; /* Jarak antar kolom */
}

.form-col {
    flex: 1; /* Membagi lebar sama rata */
}

/* Label & Input Khusus */
.label-highlight {
    color: #0f766e;
    font-weight: 600;
}

.input-highlight {
    font-weight: 600;
    color: #0f766e;
}

.label-bold {
    font-weight: 600;
    color: #475569;
}

/* 6. Grid Penilaian (4 Kolom jadi Grid) */
.scoring-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Default: 2 Kolom */
    gap: 20px;
    margin-bottom: 20px;
}

/* 7. Box Hasil Rata-rata */
.result-box {
    margin-top: 15px;
    background: #f8fafc;
    padding: 15px;
    border-radius: 10px;
}

.label-result {
    color: #0f766e;
    font-weight: bold;
}

.input-result {
    font-size: 1.2rem !important;
    font-weight: bold !important;
    color: #0f766e !important;
    border: 2px solid #0f766e !important;
    text-align: center;
}

/* 8. Tombol Simpan Utama */
.btn-save-tahfizh {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    font-weight: 600;
    background-color: #0f766e;
    color: white;
    border: none;
    border-radius: 10px;
    margin-bottom: 30px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-save-tahfizh:hover {
    background-color: #115e59;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.3);
}

/* Utility Class */
.mt-20 { margin-top: 20px; }


/* =========================================
   RESPONSIVE (TAMPILAN HP - FINAL CANTIK)
   ========================================= */
@media (max-width: 768px) {
    
    .tahfizh-container { padding: 0 10px; }
    .form-card { padding: 20px 15px; }

    /* --- 1. LAYOUT GRID (Agar Rapi Sebelahan) --- */
    .form-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Bagi 2 rata */
        gap: 12px;
        align-items: end;
        text-align: center;
    }

    .form-col {
        width: 100%;
        min-width: 0;
    }

    /* Item ganjil terakhir (Jenis Sesi) lebar penuh */
    .form-row > .form-col:last-child:nth-child(odd) {
        grid-column: span 2;
    }

    /* --- 2. KOSMETIK INPUT (INI KUNCINYA BIAR GA KOTAK BIASA) --- */
    .form-control {
        width: 100%;
        box-sizing: border-box;
        height: 42px; /* Tinggi fix supaya seragam */
        
        /* GAYA VISUAL (Style Tumpul & Abu) */
        background-color: #f8fafc; /* Abu-abu sangat muda (Slate-50) */
        border: 1px solid #cbd5e1; /* Garis tepi abu soft (Slate-300) */
        border-radius: 12px;       /* SUDUT TUMPUL (Lengkung) */
        
        /* Font & Padding */
        color: #334155;
        font-size: 0.8rem;
        padding: 0 12px; /* Jarak teks dari pinggir */
        
        /* Hilangkan gaya bawaan HP yang jelek */
        -webkit-appearance: none; 
        -moz-appearance: none;
        appearance: none;
        
        transition: all 0.3s ease;
    }

    /* Efek saat diklik/dipilih (Jadi Hijau Tosca) */
    .form-control:focus {
        background-color: #ffffff; /* Jadi putih bersih */
        border-color: #0f766e;     /* Garis jadi hijau */
        box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15); /* Efek cahaya */
        outline: none;
    }

    /* KHUSUS INPUT DATE (Supaya icon kalender pas) */
    input[type="date"].form-control {
        /* Kembalikan icon bawaan tapi atur posisinya */
        -webkit-appearance: textfield; 
        appearance: textfield;
        min-height: 42px;
        padding-right: 5px; 
    }

    /* KHUSUS SELECT (Tambahkan Panah Custom karena 'appearance:none' menghapus panah) */
    select.form-control {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.5rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        padding-right: 2.5rem; /* Beri ruang untuk panah */
    }

    /* --- 3. LABEL & TEXT --- */
    .form-group label, .form-col label {
        font-size: 0.8rem !important;
        font-weight: 600;
        color: #475569;
        margin-bottom: 3px !important;
        display: block;
    }

    /* --- 4. GRID PENILAIAN --- */
    .scoring-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    /* --- 5. HEADER & TOMBOL --- */
    .card-header {
        font-size: 1.05rem;
        font-weight: 700;
        margin-bottom: 15px;
    }

    .btn-select-student, .btn-save-tahfizh {
        border-radius: 12px; /* Tombol juga tumpul */
        padding: 12px;
        font-size: 0.95rem;
    }
    
    /* Input Result (Rata-rata) */
    .input-result {
        background: #fff;
        border: 2px solid #0f766e;
        font-weight: 800;
        font-size: 1.1rem;
        text-align: center;
    }

    .result-box {
        margin-top: 15px;
        background: #e2e8f0;
        padding: 5px;
        border-radius: 10px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}