/* ================================================================ */
/* == FONDASI LAYOUT BARU (GANTI SEMUA KODE LAMA DENGAN INI) == */
/* ================================================================ */

/* Mengatur fondasi dasar halaman */
html {
    height: 100%;
    font-family: 'nunito';
}

body {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    
    /* === PERUBAHAN DI SINI === */
    
    /* 1. Palet Warna Baru (Lebih Hidup) */
    background: linear-gradient(135deg, #cce7ff, #f0f4f8, #e0e8ff, #fbeeff);
    
    /* 2. Ukuran background tetap */
    background-size: 400% 400%;
    
    /* 3. Animasi Dipercepat menjadi 12 detik */
    animation: dynamicGradientShift 12s ease infinite;
}

/* 4. Definisikan animasinya (@keyframes) */
/* Tambahkan ini di bagian bawah file CSS Anda */
@keyframes dynamicGradientShift {
    0% {
        background-position: 0% 0%; /* Mulai dari Kiri Atas */
    }
    25% {
        background-position: 100% 0%; /* Pindah ke Kanan Atas */
    }
    50% {
        background-position: 100% 100%; /* Pindah ke Kanan Bawah */
    }
    75% {
        background-position: 0% 100%; /* Pindah ke Kiri Bawah */
    }
    100% {
        background-position: 0% 0%; /* Kembali ke Kiri Atas */
    }
}

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

.header {
    top: 0;
    bottom: auto; /* Mencegah header meregang ke bawah */
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(10px);
    padding: 10px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
    font-weight: 500;
}

/* GANTI ATURAN .footer LAMA ANDA DENGAN SEMUA INI */

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #ffffffad;
    padding: 8px 15px; /* Sedikit lebih tipis agar elegan */
    
    /* Kunci untuk layout 3 bagian yang rapi */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-text {
    color: rgb(3, 23, 112);
    font-size: 0.8rem;
    font-weight: 500;
}

.footer-button {
    background: transparent;
    border: none;
    padding: 5px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.footer-button:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Efek highlight saat disentuh */
}

.footer-button img {
    width: 40px;  /* Anda bisa sesuaikan ukuran ikon di sini */
    height: 40px;
}

/* Mengatur Area Konten sebagai SATU-SATUNYA area yang bisa di-scroll */
.main-content,
.page {
    flex: 1; /* Mengisi semua ruang kosong di antara header dan footer */
    overflow-y: auto; /* Kunci #3: HIDUPKAN scroll HANYA di area ini */
    -webkit-overflow-scrolling: touch; /* Scroll mulus di iOS */

    /* Memberi jarak agar konten tidak terpotong oleh header dan footer */
    /* Sesuaikan nilai 85px dan 65px jika perlu */
    padding-top: 50px; 
    padding-bottom: 90px;
    
    /* Properti lain dari kode asli Anda */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box; /* Tambahan untuk kalkulasi padding yang lebih baik */
}

/* Aturan spesifik dari kode asli Anda untuk penempatan konten */
.main-content {
    justify-content: flex-start;
}
.page {
    justify-content: flex-start;
}
#loginGuru, #loginWali, #mainPage {
    justify-content: center;
}

/* ================================================================ */
/* == 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: #1F3A5F;
            color: white;
            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: #2F4A70;
            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: #1F3A5F;
            margin: 0;
        }

        /* Teks Pembuka */
        .welcome-text {
            font-size: 1.1rem;
            color: #555;
            text-align: center;
            margin-bottom: 50px;
            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: #1F3A5F;
            color: white;
            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: #2F4A70;
            box-shadow: 0 6px 20px rgba(31, 58, 95, 0.4);
            transform: translateY(-2px);
        }

        .main-button.tosca {
            background: #006D77;
        }

        .main-button.tosca:hover {
            background: #007F8A;
            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-content {
            text-align: center;
            background: white;
            padding: 60px 40px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            max-width: 500px;
            width: 100%;
        }

        .page-title {
            font-size: 2rem;
            font-weight: 700;
            color: #1F3A5F;
            margin-bottom: 20px;
        }

        .page-description {
            font-size: 1rem;
            color: #666;
            line-height: 1.6;
        }

        .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: 900px; 
        }
        
        .form-wali {
            max-width: 900px;
        }

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

        .form-title {
            font-size: 2rem;
            font-weight: 700;
            color: #1F3A5F;
            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: white;
            text-align: left;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #1F3A5F;
            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;
        }
        
        #ruangWaliMurid .radio-options-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        #ruangWaliMurid .radio-option {
            display: flex;
            align-items: flex-start;
            padding: 8px;
            border: 1px solid #dee2e6;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            background-color: #f8f9fa;
        }
        #ruangWaliMurid .radio-option:hover {
            background-color: #e9ecef;
            border-color: #adb5bd;
        }
        #ruangWaliMurid .radio-option input[type="radio"] {
            width: auto;
            height: auto;
            margin-top: 5px;
            margin-right: 15px;
            flex-shrink: 0;
        }
        #ruangWaliMurid .radio-label {
            display: flex;
            flex-direction: column;
            text-align: left;
        }
        #ruangWaliMurid .radio-label strong {
            color: #212529;
            line-height: 1.3;
        }
        #ruangWaliMurid .radio-label .deskripsi {
            font-size: 0.85em;
            color: #6c757d;
            margin-top: 2px;
            line-height: 1.4;
            font-weight: 400;
        }
        .submit-button.tosca-btn {
            background: #006D77;
        }
        .submit-button.tosca-btn:hover {
            background: #007F8A;
        }

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

        .submit-button {
            width: 100%;
            background: #1F3A5F;
            color: white;
            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: 5px;
        }

        .submit-button:hover {
            background: #2F4A70;
            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: #1F3A5F;
        }

        .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: #1F3A5F;
            margin-bottom: 30px;
        }

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

        .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: white;
            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;
        }

        /* 1. Atur padding untuk form "Generate Tagihan" */
        /* Kita targetkan <select> di dalam .form-row-iuran */
        #manajemenIuran .form-row-iuran .form-group select {
            padding: 7px; /* Biarkan besar dan tinggi (atau sesuaikan) */
            background-color: #ececec; /* (Contoh warna hijau muda) */
        }

        /* 2. Atur padding untuk form "Filter" (agar lebih pendek) */
        /* Kita targetkan input & select di dalam .filter-group */
        #manajemenIuran .filter-group input,
        #manajemenIuran .filter-group select {
            padding: 7px; /* <--- Dibuat lebih kecil/pendek */
        }

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

        .teacher-menu-title {
            font-size: 2rem;
            font-weight: 700;
            color: #1F3A5F;
            margin-bottom: 40px;
            text-align: center;
        }

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

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

        .teacher-menu-button, .report-nav-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 170px;
            height: 180px;
            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;
            background: linear-gradient(135deg, #1F3A5F 0%, #2F4A70 100%);
        }

        .teacher-menu-button:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
            background: linear-gradient(135deg, #2F4A70 0%, #3F5A80 100%);
        }

        .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: 1rem;
            font-weight: 600;
            color: white;
            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: #1F3A5F;
            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: white;
            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: white;
            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: #1F3A5F;
            color: white;
            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: white;
            transition: color 0.3s ease;
            line-height: 1;
        }

        .close:hover {
            color: #ccc;
        }

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

        .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: #1F3A5F;
            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: left;
            font-weight: 600;
            color: #333;
            border-bottom: 2px solid #E5E5E5;
            font-size: 0.7rem;
        }

        #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: white;
            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: #1F3A5F;
            margin: 0;
        }

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

        .action-btn {
            background: #1F3A5F;
            color: white;
            border: none;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .action-btn:hover {
            background: #2F4A70;
            transform: translateY(-1px);
        }

        .action-btn.copy-btn {
            background: #006D77;
        }

        .action-btn.copy-btn:hover {
            background: #007F8A;
        }

        .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: white;
            border-radius: 8px;
        }

        .form-validation-message {
            color: #dc3545;
            font-size: 0.85rem;
            margin-top: 5px;
            display: none;
        }

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

        .report-page-title {
            font-size: 2.2rem;
            font-weight: 700;
            color: #1F3A5F;
            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;
        }

        .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;
        }

        .filter-group input,
        .filter-group select {
            width: 100%;
            padding: 5px;
            border: 2px solid #D3D3D3;
            border-radius: 8px;
            font-size: 0.8rem;
            font-family: 'Poppins', sans-serif;
            transition: all 0.3s ease;
        }

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

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

        .reset-filter-btn {
            background: #006D77;
            color: white;
            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: #007F8A;
            transform: translateY(-1px);
        }

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

        .refresh-btn {
            background: #1F3A5F;
            color: white;
            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: #2F4A70;
            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: white;
            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: #1F3A5F;
        }

        .report-table th {
            padding: 15px 12px;
            text-align: center;
            font-weight: 600;
            color: white;
            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: #28a745;
            font-weight: 600;
        }

        .status-mengulang {
            color: #dc3545;
            font-weight: 600;
        }

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

        .pagination-wrapper {
            display: none;
            justify-content: space-between;
            align-items: center;
            background: white;
            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: #1F3A5F;
            color: white;
            border-color: #1F3A5F;
        }

        .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: white;
            border-radius: 15px;
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            animation: modalSlideIn 0.3s ease-out;
        }

        .detail-modal-header {
            background: #1F3A5F;
            color: white;
            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: 800px;
            margin: 0 auto;
            padding: 10px;
        }

        .student-report-title {
            font-size: 2.2rem;
            font-weight: 700;
            color: #1F3A5F;
            margin-bottom: 40px;
        }

        .student-biodata-card {
            background: white;
            border-radius: 20px;
            padding: 40px 30px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            margin-bottom: 40px;
            width: 100%;
            max-width: 100%;
            text-align: center;
        }

        .student-profile-photo {
            margin-bottom: 25px;
        }

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

        .student-full-name {
            font-size: 1.8rem;
            font-weight: 700;
            color: #1F3A5F;
            margin: 0 0 25px 0;
            line-height: 1.2;
        }

        .student-badges {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }

        .badge {
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            text-align: center;
            white-space: nowrap;
        }

        .badge-program {
            background: #E3F2FD;
            color: #1565C0;
        }

        .badge-class {
            background: #f0f0f0;
            color: #666;
            border: 1px solid #ddd;
        }

        .badge-status-active {
            background: #E8F5E8;
            color: #2E7D32;
        }

        .badge-status-inactive {
            background: #FFEBEE;
            color: #C62828;
        }
        
        .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: #006D77;
            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: #006D77;
            color: white;
            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: #007F8A;
        }

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

        .header {
        font-size: 12px; /* Ukuran asli 14px, kita kecilkan menjadi 12px */
        padding-left: 15px; /* Sedikit kurangi padding horizontal agar lebih lega */
        padding-right: 15px;
        }

        .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: 40px;
        padding: 0 10px;
        }

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

        .separator {
        max-width: none;
        margin: 30px 10px 20px;
        }

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

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

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

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

        .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: 120px;
        }

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

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

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

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

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

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

        .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.68rem;
        }

        /* === [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.25rem !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;
            } 
        }

/* =================================
   ==      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: #1F3A5F;
    margin-bottom: 0;
    text-align: left;
}

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

.stat-card {
    background: white;
    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: #1F3A5F;
    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: white;
    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: #1F3A5F;
    margin-top: 0;
    margin-bottom: 20px;
    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: #1F3A5F;
    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;
    }
}

@media (min-width: 768px) {
    .student-biodata-card {
        display: flex;
        flex-direction: row; /* Ubah dari atas-bawah menjadi kiri-kanan */
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        gap: 30px; /* Memberi jarak antara foto dan teks */
        padding: 30px 40px;
    }

    .student-full-name {
        margin: 0 0 15px 0; /* Atur ulang margin nama */
    }
}

.form-row-iuran {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    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: column; /* Ubah dari sampingan menjadi atas-bawah */
        align-items: center;   /* Pusatkan isinya */
        gap: 12px;             /* Beri sedikit jarak */
    }
}

/* -- STYLE UNTUK DAFTAR BULAN RIWAYAT IURAN -- */
.daftar-bulan {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.item-bulan {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item-bulan .nama-bulan {
    font-weight: 600;
    color: #495057;
}

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

.mushaf-image-wrapper {
    flex: 1;
    min-width: 200px;
    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: #1F3A5F;
    color: white;
    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: #2F4A70;
}
.mushaf-nav-btn:disabled {
    background: #A4A4A4;
    cursor: not-allowed;
}
#halamanInfo {
    font-size: 0.5rem;
    font-weight: 500;
    color: #555;
}

body {
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 8px;
    background-color: #f0f0f0;
    gap: 20px;
}

.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: 600px;
    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;
}

.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 */
}


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

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

#mushafInteractiveContainer {
    display: flex;
    flex-direction: row; /* Berdampingan ke samping */
    gap: 20px;
}

.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: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: left;
}

.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 {
        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;
}

/*
 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: white; /* 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;
    }

    .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: #1F3A5F; /* 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: 20px;               /* (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: #1F3A5F;
    margin: 0;
    text-align: center;
}

/* ==== STYLE UNTUK SPLASH SCREEN ==== */

/* Kontainer utama splash screen */
#splash-screen {
  /* Menutupi seluruh layar */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Tampil di atas semua konten */
  z-index: 9999; 

  /* Latar belakang (sesuaikan dengan warna BG aplikasi Anda) */
  background-color: #f8f9fa; 

  /* Menengahkan logo */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* * Animasi Menghilang (fadeOut):
   * Durasi: 1 detik
   * Delay: 2 detik (Animasi akan mulai setelah 2 detik)
   * forwards: Tetap di kondisi akhir (transparan)
   */
  animation: fadeOut 11s ease-out 5s forwards;
}

/* Logo di dalam splash screen */
#splash-logo {
  /* Sesuaikan ukuran logo Anda */
  width: 340px; 

  /* * Animasi Muncul (fadeIn):
   * Durasi: 1.5 detik
   */
  animation: fadeIn 2s ease-in-out;
  margin-bottom: 25px;
}

@media (max-width: 768px) {
#splash-screen {
  /* Menutupi seluruh layar */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* Tampil di atas semua konten */
  z-index: 9999; 

  /* Latar belakang (sesuaikan dengan warna BG aplikasi Anda) */
  background-color: #f8f9fa; 

  /* Menengahkan logo */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* * Animasi Menghilang (fadeOut):
   * Durasi: 1 detik
   * Delay: 2 detik (Animasi akan mulai setelah 2 detik)
   * forwards: Tetap di kondisi akhir (transparan)
   */
  animation: fadeOut 11s ease-out 5s forwards;
}

/* Logo di dalam splash screen */
#splash-logo {
  /* Sesuaikan ukuran logo Anda */
  width: 230px; 

  /* * Animasi Muncul (fadeIn):
   * Durasi: 1.5 detik
   */
  animation: fadeIn 2s ease-in-out;
  margin-bottom: 25px;
}
}

/* ==== KEYFRAMES (DEFINISI ANIMASI) ==== */

/* Keyframe untuk logo (Hanya Muncul / FadeIn Saja) */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Animasi untuk seluruh layar (Menghilang) */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    /* * Sembunyikan dari pointer setelah selesai, 
     * tapi JS di bawah lebih aman.
     */
    visibility: hidden; 
  }
}



/* ==== CSS UNTUK PULSING DOTS (Dari Canva) ==== */

.pulse-dots {
  display: flex;
  gap: 8px;
}

.pulse-dot {
  width: 16px;
  height: 16px;
  /* Saya ganti warnanya jadi abu-abu netral, Anda bisa ganti */
  background-color: #251669; 
  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; }


/* Keyframe untuk animasi 'pulse' */
@keyframes pulse {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 1;
  }
  40% {
    transform: scale(1);
    opacity: 0.5;
  }
}

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

    /* Mengatur lebar 'kotak' form khusus untuk halaman ini */
    #penilaianTahsin .form-container {
        max-width: 850px; /* Form ini kita buat lebih sempit agar fokus */
        padding: 25px;
    }

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

    /* Mengatur semua input, select, dan textarea di halaman ini */
    #penilaianTahsin .form-group input,
    #penilaianTahsin .form-group select,
    #penilaianTahsin .form-group textarea {
        padding: 10px; /* Padding-nya kita buat sedikit lebih pendek */
        font-size: 0.95rem;
    }

    /* Mengatur input yang 'readonly' (Nama, Kode, dll) */
    #penilaianTahsin .form-group input[readonly] {
        background-color: #f0f2f5; /* Warna abu-abu */
        color: #555;
        cursor: not-allowed;
    }

    /* Mengatur kotak info setoran terakhir (memindahkan style inline ke CSS) */
    #penilaianTahsin #infoSetoranTerakhirTahsin {
        text-align: left;
        font-style: normal;
        border-left: 5px solid #006D77; /* (Warna tosca) */
        background-color: #e6f7f8;
        color: #004a50;
        padding: 15px;
    }

    /* Mengatur tombol "Pilih Murid" (memindahkan style inline ke CSS) */
    #penilaianTahsin .form-group .submit-button {
        width: 100%;
        margin-top: 0;
        background-color: #1F3A5F; /* (Samakan dengan tombol submit) */
    }

    @media (max-width: 768px) {
        /* ======================================================= */
        /* ==   STYLE MOBILE KHUSUS - Penilaian Tahsin          == */
        /* ======================================================= */

        /* (Tambahkan ini DI DALAM @media (max-width: 768px) { ... } ) */

        #penilaianTahsin .form-container {
            /* Di HP, kita buat padding lebih tipis
            dan hilangkan 'max-width' agar 'full width'.
            */
            width: 95%; /* Beri sedikit jarak 5% di layar */
            padding: 20px; /* Padding lebih tipis dari 40px (desktop) */
        }

        #penilaianTahsin .form-title {
            font-size: 1.5rem; /* Perkecil judulnya di HP */
            margin-bottom: 20px;
        }

        #penilaianTahsin .form-group {
            margin-bottom: 15px; /* Kurangi jarak antar grup */
        }

        #penilaianTahsin .form-group label {
            font-size: 0.85rem; /* Perkecil label */
            margin-bottom: 5px;
        }

        #penilaianTahsin .form-group input,
        #penilaianTahsin .form-group select,
        #penilaianTahsin .form-group textarea {
            /* Ini adalah pengaturan padding yang ANDA TANYAKAN.
            Padding 10px ini HANYA berlaku untuk form Tahsin di HP.
            */
            padding: 8px;
            font-size: 0.8rem;
        }

        #penilaianTahsin #infoSetoranTerakhirTahsin {
            padding: 15px;
            font-size: 0.85rem;
        }
    }

    /* ======================================================= */
    /* ==      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: 10px;
    }

    /* 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 #006D77; /* (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) {
        /* ======================================================= */
        /* ==   STYLE MOBILE KHUSUS - Penilaian Tahfizh         == */
        /* ======================================================= */

        /* (Tambahkan ini DI DALAM @media (max-width: 768px) { ... } ) */

        #penilaianTahfizh .form-container {
            width: 95%;
            padding: 20px 15px; /* Padding lebih tipis di HP */
        }

        #penilaianTahfizh .form-title {
            font-size: 1.5rem; /* Judul lebih kecil */
        }

        /* Di HP, kita buat semua input punya padding yang SAMA */
        #penilaianTahfizh .form-group input,
        #penilaianTahfizh .form-group select {
            padding: 10px;
            font-size: 0.9rem;
        }

        #penilaianTahfizh .form-row-iuran .form-group input,
        #penilaianTahfizh .form-row-iuran .form-group select {
            padding: 8px 12px; /* 14px atas/bawah, 12px kiri/kanan */
            font-size: 1rem;    /* Perbesar font-nya sedikit */
        }

        /* Atur barisan tombol simpan di paling bawah */
        #penilaianTahfizh .form-row-iuran {
            flex-direction: column; /* Tumpuk tombol ke bawah */
            gap: 10px;
        }

        #penilaianTahfizh .form-row-iuran .submit-button {
            width: 100%; /* Buat tombol 'full-width' */
            margin-top: 10px;
        }

        #penilaianTahfizh .form-row-iuran {
            flex-direction: column; /* <-- Kunci Utamanya: Susun ke Bawah */
            gap: 0; /* Hapus 'gap' antar kolom */
        }

        /* * Aturan ini akan membuat setiap .form-group (yang membungkus
        * label dan input) memakan 100% lebar dan memberi jarak bawah.
        */
        #penilaianTahfizh .form-row-iuran .form-group {
            width: 100%; /* Pastikan 100% lebar */
            margin-bottom: 15px; /* Beri jarak antar baris form */
        }
    }

    /* ======================================================= */
    /* ==      STYLE KHUSUS Halaman Kelola Kode Murid       == */
    /* ======================================================= */

    /* Kunci 1: Mengatur 'kotak' form utama */
    #kelolaKodeMurid .form-container {
        max-width: 900px; /* Lebar yang pas untuk form entri data */
    }

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

    /* Kunci 3: Mengatur SEMUA input & select di halaman ini */
    #kelolaKodeMurid .form-group input,
    #kelolaKodeMurid .form-group select {
        padding: 9px; /* Padding standar yang nyaman */
        font-size: 0.95rem;
    }

    /* Kunci 4: Mengatur helper text (di bawah input Iuran) */
    #kelolaKodeMurid .form-group small {
        display: block;
        color: #6c757d;
        margin-top: 8px;
        font-size: 0.85rem;
        text-align: left;
    }

    #kelolaKodeMurid button[onclick="generateKodeMurid()"] {
        width: auto;
        padding: 14px 20px; /* Style desktop */
        margin: 0;
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    /* Ini menargetkan input kode murid di sebelahnya */
    #kelolaKodeMurid #kodeMuridBaru {
        flex: 1; /* Biarkan input mengisi sisa ruang */
        background-color: #f0f2f5;
        text-align: center;
        font-weight: 600;
    }

    /* Kunci 6: Mengatur tombol "Batal Edit" */
    #kelolaKodeMurid #cancelEditBtn {
        background-color: #6c757d;
        border-color: #6c757d;
    }

    /* Kunci 7: Mengatur kontainer kartu murid di bawah */
    #kelolaKodeMurid .student-cards-container {
        max-height: 500px; /* Batasi tinggi, lalu scroll */
        overflow-y: auto;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 10px;
        background-color: #f8f9fa;
    }

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

    @media (max-width: 768px) {
        /* ======================================================= */
        /* ==   STYLE MOBILE KHUSUS - Kelola Kode Murid         == */
        /* ======================================================= */

        /* (Tambahkan ini DI DALAM @media (max-width: 768px) { ... } ) */

        #kelolaKodeMurid .form-container {
            width: 95%;
            padding: 20px 15px; /* Padding lebih tipis */
        }

        #kelolaKodeMurid .form-title {
            font-size: 1.5rem; /* Judul lebih kecil */
        }

        /* Mengatur input & select di HP */
        #kelolaKodeMurid .form-group input,
        #kelolaKodeMurid .form-group select {
            padding: 8px;
        }

        #kelolaKodeMurid button[onclick="generateKodeMurid()"] {
            padding: 12px 15px; /* Style mobile (lebih kecil) */
            font-size: 0.8rem;
        }

        #kelolaKodeMurid #kodeMuridBaru {
            text-align: center; /* Input kode tetap di tengah */
        }
        
    }

    /* ======================================================= */
        /* ==   STYLE KHUSUS Form Pendaftaran (Guru & Wali)     == */
        /* ======================================================= */

        /* Kunci 1: Mengatur 'kotak' form utama
        * Kita gabungkan 'teacherForm' dan 'parentForm' dengan koma (,)
        */
        #teacherForm .form-container,
        #parentForm .form-container {
            max-width: 900px; /* Cukup lebar untuk form pendaftaran */
        }

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

        /* Kunci 3: Mengatur SEMUA input & select di kedua form */
        #teacherForm .form-group input,
        #teacherForm .form-group select,
        #teacherForm .form-group textarea,
        #parentForm .form-group input,
        #parentForm .form-group select,
        #parentForm .form-group textarea {
            padding: 10px; /* Padding standar yang nyaman */
            font-size: 0.95rem;
        }

        /* Kunci 4: Mengatur input 'readonly' (Tanggal Pendaftaran) */
        #teacherForm input[readonly],
        #parentForm input[readonly] {
            background-color: #f0f2f5;
            color: #555;
            font-weight: 500;
        }

        /* Kunci 5: Mengatur kotak info "Dua kolom..." di form guru */
        #teacherForm .form-info {
            text-align: center;
            font-style: italic;
            font-size: 0.9rem;
            background-color: #e6f7f8;
            border-left: 5px solid #006D77;
            padding: 15px;
            margin-bottom: 25px;
        }

        @media (max-width: 768px) {
            /* ======================================================= */
            /* ==   STYLE MOBILE KHUSUS - Pendaftaran Guru & Wali   == */
            /* ======================================================= */

            /* (Tambahkan ini DI DALAM @media (max-width: 768px) { ... } ) */

            #teacherForm .form-container,
            #parentForm .form-container {
                width: 95%;
                padding: 20px 15px; /* Padding lebih tipis */
            }

            #teacherForm .form-title,
            #parentForm .form-title {
                font-size: 1.5rem; /* Judul lebih kecil */
            }

            /* Mengatur input & select di HP */
            #teacherForm .form-group input,
            #teacherForm .form-group select,
            #teacherForm .form-group textarea,
            #parentForm .form-group input,
            #parentForm .form-group select,
            #parentForm .form-group textarea {
                padding: 8px;
            }
        }

/* --- 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;
}