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

        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #ecf0f5;
        }

        * {
            font-style: normal !important;
        }

        input[type="radio"]:checked+label {
            background-color: #3c8dbc !important;
            color: white !important;
            border-color: #3c8dbc !important;
        }

        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-out {
            animation: fadeOut 0.5s ease-in-out forwards;
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: translateY(0);
            }

            to {
                opacity: 0;
                transform: translateY(-10px);
            }
        }

        .modal-overlay {
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(2px);
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .active-link {
            background: #1e282c;
            color: white;
            border-left: 4px solid #3c8dbc;
        }

        /* Catatan: sidebar mobile kini berupa panel vertikal di sisi kiri (bukan
           bottom-bar), sehingga gaya active-link border-left standar (di atas)
           dipakai konsisten untuk semua ukuran layar. */

        /* ===== PERBAIKAN RESPONSIVITAS & KEMUDAHAN KLIK MENU ===== */
        #main-nav button,
        #main-nav a {
            cursor: pointer;
            touch-action: manipulation;
            -webkit-tap-highlight-color: rgba(60, 141, 188, 0.25);
            -webkit-user-select: none;
            user-select: none;
            min-height: 56px;
            position: relative;
        }

        #main-nav button:active {
            transform: scale(0.95);
            background-color: #1a2226 !important;
        }

        #main-nav button:focus-visible {
            outline: 2px solid #3c8dbc;
            outline-offset: -2px;
        }

        @media (min-width: 768px) {
            #main-nav button {
                min-height: 46px;
            }
        }

        /* Perbesar area sentuh tombol aksi kecil (edit/hapus/detail dsb) di tabel & modal */
        table button,
        .modal-overlay button {
            touch-action: manipulation;
            -webkit-tap-highlight-color: rgba(60, 141, 188, 0.25);
        }

        table button:active {
            transform: scale(0.93);
        }

        .small-box:hover .icon i {
            transform: scale(1.15);
        }

        @media screen {

            /* PERBAIKAN "KOLOM 1 & 2 SEPERTI UNDERPAS" DI MOBILE:
               Secara CSS, kolom 1 & 2 di sini sudah position:sticky dengan
               background solid (bukan transparan) -- seharusnya cukup untuk
               menutupi kolom lain yang lewat di bawahnya. Tapi di browser
               mobile (terutama WebKit/Safari & sebagian Chrome Android),
               elemen sticky yang TIDAK dipaksa punya "compositing layer"
               sendiri kadang tidak sempat menggambar ulang background-nya
               secepat gerakan scroll -- efeknya kolom yang sedang digulir
               sekilas masih "tembus pandang" di balik kolom sticky sebelum
               akhirnya benar-benar tertutup (ghosting/bleed-through), persis
               seperti dijelaskan: kolom 1 & 2 jadi seolah jalan underpas.
               Trik standar untuk masalah ini: paksa browser membuat layer
               render terpisah untuk kolom sticky lewat transform/​backface-
               visibility, supaya background-nya selalu digambar solid tanpa
               nunggu giliran, dan kolom lain langsung hilang total begitu
               lewat di baliknya. */
            table.whitespace-nowrap:not(.no-sticky) th:nth-child(1),
            table.whitespace-nowrap:not(.no-sticky) td:nth-child(1),
            table.whitespace-nowrap:not(.no-sticky) th:nth-child(2),
            table.whitespace-nowrap:not(.no-sticky) td:nth-child(2) {
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
                will-change: transform;
                isolation: isolate;
            }

            table.whitespace-nowrap:not(.no-sticky) th:nth-child(1),
            table.whitespace-nowrap:not(.no-sticky) td:nth-child(1) {
                position: sticky !important;
                left: 0 !important;
                z-index: 20 !important;
                background-color: white !important;
                text-align: center;
            }

            table.whitespace-nowrap:not(.no-sticky) th:nth-child(2),
            table.whitespace-nowrap:not(.no-sticky) td:nth-child(2) {
                position: sticky !important;
                z-index: 20 !important;
                background-color: white !important;
                box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.15) !important;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            table.whitespace-nowrap:not(.no-sticky) thead th:nth-child(1),
            table.whitespace-nowrap:not(.no-sticky) thead th:nth-child(2) {
                z-index: 30 !important;
                background-color: #f3f4f6 !important;
            }

            table.whitespace-nowrap:not(.no-sticky) tbody tr:hover td:nth-child(1),
            table.whitespace-nowrap:not(.no-sticky) tbody tr:hover td:nth-child(2) {
                background-color: #f9fafb !important;
            }

            table.whitespace-nowrap:not(.no-sticky) thead.bg-\[\#222d32\] th:nth-child(1),
            table.whitespace-nowrap:not(.no-sticky) thead.bg-\[\#222d32\] th:nth-child(2) {
                background-color: #222d32 !important;
                color: white !important;
            }
        }

        @media (max-width: 639px) {

            table.whitespace-nowrap:not(.no-sticky) th:nth-child(1),
            table.whitespace-nowrap:not(.no-sticky) td:nth-child(1) {
                width: 30px !important;
                min-width: 30px !important;
                max-width: 30px !important;
                padding-left: 2px !important;
                padding-right: 2px !important;
            }

            table.whitespace-nowrap:not(.no-sticky) th:nth-child(2),
            table.whitespace-nowrap:not(.no-sticky) td:nth-child(2) {
                left: 30px !important;
                width: 130px !important;
                min-width: 130px !important;
                max-width: 130px !important;
                padding-left: 6px !important;
                padding-right: 6px !important;
                font-size: 9.5px !important;
                line-height: 1.25 !important;
                /* Nama TIDAK dipotong dengan "..." lagi -- dibiarkan patah ke baris
           berikutnya (wrap) supaya nama selalu terbaca utuh. Penting terutama
           untuk membedakan siswa yang nama depannya sama (mis. dua siswa
           sama-sama berawalan "Muhammad") yang sebelumnya sama-sama terpotong
           jadi tampilan yang identik dan tidak bisa dibedakan. */
                white-space: normal !important;
                overflow-wrap: break-word !important;
                word-break: break-word !important;
                overflow: visible !important;
                text-overflow: unset !important;
            }

            table.whitespace-nowrap th,
            table.whitespace-nowrap td {
                padding: 5px 3px !important;
                font-size: 9.5px !important;
            }

            table.whitespace-nowrap td span {
                font-size: 8.5px !important;
            }

            table.whitespace-nowrap input[type="number"] {
                width: 36px !important;
                height: 24px !important;
                padding: 2px !important;
                font-size: 10.5px !important;
                border-radius: 3px !important;
                margin: 0 auto !important;
                display: block !important;
            }

            table.whitespace-nowrap label.group\/radio>div {
                width: 22px !important;
                height: 22px !important;
                font-size: 9px !important;
                border-width: 1px !important;
            }

            table.whitespace-nowrap .flex.justify-center.gap-2,
            table.whitespace-nowrap .flex.justify-center.gap-4 {
                gap: 3px !important;
            }
        }

        @media (min-width: 640px) {

            table.whitespace-nowrap:not(.no-sticky) th:nth-child(1),
            table.whitespace-nowrap:not(.no-sticky) td:nth-child(1) {
                width: 45px !important;
                min-width: 45px !important;
                max-width: 45px !important;
                padding-left: 8px !important;
                padding-right: 8px !important;
            }

            table.whitespace-nowrap:not(.no-sticky) th:nth-child(2),
            table.whitespace-nowrap:not(.no-sticky) td:nth-child(2) {
                left: 45px !important;
                max-width: 250px !important;
            }
        }

        /* PERBAIKAN KHUSUS "Laporan Hafalan Siswa" (#table-laporan-tahfidz-pdf):
           Tabel ini urutan kolomnya BEDA dari tabel lain -- kolom 1 = No,
           kolom 2 = Tanggal, kolom 3 = Siswa & Kelas. Aturan sticky umum di
           atas mengunci kolom 1 & 2 (asumsi kolom 2 selalu "Nama"), padahal
           di sini info penting (nama + kelas siswa) justru ada di KOLOM 3,
           dan kolom itu lebih lebar dari zona sticky kolom 1+2 gabungan.
           Akibatnya sebagian isi kolom 3 SELALU nongol di celah antara zona
           sticky dan kolom berikutnya berapa pun jauhnya digulir -- inilah
           yang terlihat seperti kolom "menembus" kolom sticky. Perbaikannya:
           lepas status sticky dari kolom 2 (Tanggal boleh ikut tergulir),
           lalu pindahkan ke kolom 3 (Siswa & Kelas) supaya identitas siswa
           tetap terlihat sepanjang tabel digulir, sama seperti tabel lain. */
        @media screen {
            #table-laporan-tahfidz-pdf th:nth-child(2),
            #table-laporan-tahfidz-pdf td:nth-child(2) {
                position: static !important;
                left: auto !important;
                z-index: auto !important;
                background-color: transparent !important;
                box-shadow: none !important;
                width: auto !important;
                min-width: auto !important;
                max-width: none !important;
                white-space: nowrap !important;
                overflow: visible !important;
                text-overflow: clip !important;
            }

            #table-laporan-tahfidz-pdf th:nth-child(3),
            #table-laporan-tahfidz-pdf td:nth-child(3) {
                position: sticky !important;
                z-index: 20 !important;
                background-color: white !important;
                box-shadow: 2px 0 5px -2px rgba(0, 0, 0, 0.15) !important;
                white-space: normal !important;
                overflow-wrap: break-word !important;
                word-break: break-word !important;
            }

            #table-laporan-tahfidz-pdf thead th:nth-child(3) {
                z-index: 30 !important;
                background-color: #1e293b !important; /* samakan dengan header slate-800 tabel ini */
                color: #ffffff !important;
            }

            #table-laporan-tahfidz-pdf tbody tr:hover td:nth-child(3) {
                background-color: #ecfdf5 !important; /* emerald-50, senada tema hijau tabel ini */
            }
        }

        @media (max-width: 639px) {
            #table-laporan-tahfidz-pdf th:nth-child(3),
            #table-laporan-tahfidz-pdf td:nth-child(3) {
                left: 30px !important; /* pas setelah kolom No selebar 30px di mobile */
                width: 130px !important;
                min-width: 130px !important;
                max-width: 130px !important;
            }
        }

        @media (min-width: 640px) {
            #table-laporan-tahfidz-pdf th:nth-child(3),
            #table-laporan-tahfidz-pdf td:nth-child(3) {
                left: 45px !important; /* pas setelah kolom No selebar 45px di desktop/tablet */
                max-width: 250px !important;
            }
        }