:root { --primary-color: #4e73df; --secondary-color: #858796; }
    body { background: #f0f2f5; font-family: 'Segoe UI', sans-serif; overflow-x: hidden; }
    
    /* Mencegah zoom cubitan layar dan efek membal saat mentok */
html, body {
    touch-action: pan-y; 
    overscroll-behavior-y: none; }

/* Mencegah zoom otomatis saat mengklik kolom input / form */
input, button, select, textarea {
    touch-action: manipulation; 
    font-size: 16px !important; }

    
    /* LOGIN & THEME (BIRU BERGERAK & BAYANGAN) */
    #loginPage { 
        min-height: 100vh; 
        /* Gradien dasar warna biru elegan */
        background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #1e40af 100%); 
        background-size: 200% 200%;
        animation: gradientMove 15s ease infinite;
        display:flex; align-items:center; justify-content:center; padding: 20px; 
        position: relative; overflow: hidden;
    }

    /* --- PERBAIKAN OVERLAY LOADER JADI MODERN (GLASSMORPHISM) --- */
.loader-overlay { 
    position: fixed; 
    inset: 0; 
    background: rgba(255, 255, 255, 0.85); /* Putih transparan */
    backdrop-filter: blur(5px); /* Efek kaca buram */
    -webkit-backdrop-filter: blur(5px);
    z-index: 9999; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    color: var(--dark); /* Warna teks jadi gelap agar terbaca di background terang */
}
.spinner { 
    width: 50px; 
    height: 50px; 
    border: 5px solid #e2e8f0; /* Lingkaran dasar abu-abu lembut */
    border-top-color: var(--primary); /* Putaran warna biru/primary */
    border-radius: 50%; 
    animation: spin 1s linear infinite; 
}
    
    /* Animasi background dasar berjalan */
    @keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
    
    /* Efek bayangan bulat melayang di belakang */
    .bg-shadow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.6; z-index: 0; animation: floatShadow 20s infinite alternate ease-in-out; }
    .shadow1 { width: 350px; height: 350px; background: #60a5fa; top: -10%; left: -10%; }
    .shadow2 { width: 450px; height: 450px; background: #93c5fd; bottom: -20%; right: -10%; animation-delay: -5s; }
    @keyframes floatShadow { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(60px, 60px) scale(1.3); } }

    .sidebar { min-height: 100vh; background: var(--primary-color); color: #fff; background-image: linear-gradient(180deg, var(--primary-color) 10%, #000 100%); transition: left 0.3s ease-in-out; }
    .bg-theme { background: var(--primary-color) !important; }
    
    /* Animasi Tombol Melayang */
    .btn-melayang { animation: floatBtn 2s infinite ease-in-out; }
    @keyframes floatBtn { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
    
    /* Garis pemisah ATAU */
    .divider-text { display: flex; align-items: center; text-align: center; margin: 20px 0; color: #94a3b8; font-size: 12px; font-weight: bold;}
    .divider-text::before, .divider-text::after { content: ''; flex: 1; border-bottom: 1px solid #cbd5e1; }
    .divider-text:not(:empty)::before { margin-right: .5em; }
    .divider-text:not(:empty)::after { margin-left: .5em; }
    
    /* COMPONENTS */
    .sidebar .brand { padding: 20px; font-weight: 700; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.2); }
    .sidebar a { color: rgba(255,255,255,0.8); padding: 12px 20px; display: block; text-decoration: none; border-left: 4px solid transparent; transition: 0.3s; cursor: pointer; }
    .sidebar a:hover, .sidebar a.active { background: rgba(255,255,255,0.1); color: #fff; border-left-color: #fff; }
    .card { border: none; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); margin-bottom: 20px; transition: transform 0.2s; }
    .card:hover { transform: translateY(-3px); }
    
    .app-logo { max-height: 80px; margin: 5px; padding: 2px; object-fit: contain; }
 
    .settings-preview { max-height: 100px; width: auto; object-fit: contain; border: 1px solid #ddd; padding: 5px; border-radius: 5px; display: block; margin-top: 10px; }
    .student-photo { width: 120px; height: 160px; object-fit: cover; border: 3px solid #fff; box-shadow: 0 3px 6px rgba(0,0,0,0.1); background: #eee; }
    
    .floating-logo { animation: float 3s ease-in-out infinite; height: 80px; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2)); }
    @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
    
    /* MODAL FIX */
    .modal-dialog-scrollable .modal-body { overflow-y: auto; max-height: 65vh; }
    .modal-footer { position: sticky; bottom: 0; background: #fff; z-index: 100; border-top: 1px solid #dee2e6; }
    .modal-backdrop { z-index: 1050; } 
    #mdlSiswa { z-index: 1055; } 
    #mdlCrop { z-index: 1060 !important; }
    #mdlTranskrip { z-index: 2000 !important; }
    #mdlPrivacy { z-index: 3000 !important; }
    
    .fab-refresh { position: fixed; bottom: 30px; right: 30px; width: 55px; height: 55px; border-radius: 50%; z-index: 999; box-shadow: 0 4px 12px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: transform 0.2s; }
    .fab-refresh:active { transform: scale(0.9); }
    .img-container { max-height: 400px; background: #000; display:flex; justify-content:center; }
    .img-container img { max-width: 100%; }
    .hidden { display: none !important; }
    .app-footer { background: #fff; padding: 1.5rem 0; border-top: 1px solid #e3e6f0; color: #858796; margin-top: auto; text-align:center; font-size: 0.85rem; }

    /* --- RESPONSIVE & MOBILE (UPDATED SPACING) --- */
    .mobile-toggle { display: none; margin-right: 15px; font-size: 1.5rem; cursor: pointer; color: var(--secondary-color); }
    .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; }
    
   @media (max-width: 768px) {
        /* Sembunyikan sidebar lama dan tombol garis tiga di HP */
        .mobile-toggle { display: none !important; }
        #mainSidebar { display: none !important; }
        .sidebar-overlay { display: none !important; }
        
        /* Beri jarak atas dan bawah agar konten tidak tertutup bar menu */
        .col-md-10 { padding-top: 70px !important; padding-bottom: 90px !important; width: 100%; }
        
        /* Atur ulang posisi tombol Refresh (Diatas tombol Scroll Top) */
        .fab-refresh { width: 45px; height: 45px; font-size: 1.2rem; bottom: 140px !important; right: 20px; z-index: 1020; }
        .table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

        /* Mengangkat posisi Chatbot di HP agar tidak tertutup menu bawah */
    #btnChatbot {
        bottom: 90px !important; 
    }
    #chatWindow {
        bottom: 160px !important;
    }
    }

    /* Styling Efek Menu Bawah HP */
    .m-nav-item { color: #858796 !important; transition: all 0.3s; padding: 5px; flex-grow: 1;}
    .m-nav-item.active { color: var(--primary-color) !important; transform: translateY(-3px); }
    .m-nav-item:active { transform: scale(0.9); }
    
    /* Tombol Scroll Top (Dibawah Refresh) */
    #btnScrollTop { position: fixed; right: 20px; bottom: 85px; z-index: 1020; width: 45px; height: 45px; border-radius: 50%; display: none; align-items: center; justify-content: center; font-size: 1.2rem; background: #6c757d; color: #fff; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.2s; }
    #btnScrollTop:active { transform: scale(0.9); }

 /* --- CARD ID & CETAK MASSAL (PRESISI) --- */
    .id-card, .id-card * { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
    .info-table-new td { line-height: 1.1 !important; border: none !important; text-align: left; padding: 1px 0px; font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 400; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .info-table-new .lbl { width: 65px; }
    .info-table-new td:nth-child(2) { width: 12px; text-align: center; }
    .info-table-new .val { padding-left: 6px; }
    .id-card { width: 400px; height: 250px; background: white; position: relative; overflow: hidden; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); margin: 0 auto; font-family: Arial, sans-serif; }
    .card-bg-gradient { position: absolute; inset: 0; background: linear-gradient(120deg, var(--primary-color) 35%, #fff 35.5%); z-index: 1; }
    .card-bg-img { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 2; opacity: 1; }
    .card-content-wrap { position: relative; z-index: 10; height: 100%; display: flex; flex-direction: column; }
    .card-header-new { position: relative; height: 70px; padding-top: 5px; text-align: center; }
    .logo-kiri { position: absolute; top: 7px; left: 10px; width: 40px; height: 40px; object-fit: contain; }
    .logo-kanan { position: absolute; top: 7px; right: 10px; width: 40px; height: 40px; object-fit: contain; }
    .header-text-center { margin: 0 50px; }
    .txt-instansi-center { font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 550; text-transform: uppercase; color: #000; letter-spacing: 0.5px; }
    .txt-sekolah-center { font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 650; text-transform: uppercase; margin: 1px 0; color: #000; line-height: 1; letter-spacing: 0.5px; }
    .txt-alamat-center { font-family: 'Roboto', sans-serif; font-size: 8px; font-weight: 400; color: #000; margin-top: 2px; }
    .header-line { margin: 0 5px; height: 1px; border-top: 1px solid #000; border-bottom: 2px solid #000; margin-top: 4px; }
    .txt-kartupelajar-center { font-family: Arial, sans-serif; font-size: 18px; text-align: center; font-weight: 800; margin: 2px 0; color: #000; }
    .card-body-new { display: flex; padding: 3px 9px; margin-top: 0px; height: 100%; }
    .photo-area-new { width: 75px; height: 100px; background: #ddd; border: 0.5px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.2); margin-right: 10px; overflow: hidden; }
    .student-photo { width: 100%; height: 100%; object-fit: cover; }
    .info-area-new { flex: 1; position: relative; }
    .qr-area-new { position: absolute; bottom: 3px; right: 3px; background: white; padding: 1px; border: 0px solid #ccc; }
    #qrcode img, .qr-area-new img { width: 85px; height: 85px; display:block; }
    .txt-validasi-bawah { position: absolute; bottom: 4px; left: 10px; width: 260px; text-align: left; font-size: 5.5px; font-family: Arial, sans-serif; line-height: 1.2; color: #000; font-weight: 500;}

    @media screen { #print-area { display: none; } }
    @media print {
        body * { visibility: hidden; }
        #print-area, #print-area * { visibility: visible; }
        #print-area { position: absolute; left: 0; top: 0; width: 100%; display: block; }
        @page { size: A4 portrait; margin: 25mm 10mm 10mm 10mm !important; }
        .print-page { display: grid; grid-template-columns: 85.2mm 85.2mm; grid-template-rows: repeat(4, 53.3mm); gap: 5mm; justify-content: center; align-content: start; width: 100%; page-break-after: always; padding-top: 5mm; }
        .print-card-wrapper { width: 85.2mm; height: 53.3mm; overflow: hidden; position: relative; border: 1px dashed #cbd5e1; border-radius: 8px; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
        .print-card-wrapper .id-card { transform-origin: top left; transform: scale(0.805); margin: 0; box-shadow: none; border-radius: 0; }
    }

    /* ==========================================
           Pengecualian Warna Status Siswa di HP
           ========================================== */
        #view-profil_siswa .table td#profil_status.text-success {
            color: #1cc88a !important; /* Hijau terang untuk Aktif */
            font-weight: 800 !important; /* Dibuat sedikit lebih tebal agar mencolok */
        }
        
        #view-profil_siswa .table td#profil_status.text-danger {
            color: #e74a3b !important; /* Merah untuk Lulus */
            font-weight: 800 !important;
        }

    /* --- PASSWORD EYE --- */
    .pass-wrapper { position: relative; }
    .pass-toggle-btn { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #6c757d; z-index: 10; }


    /* ==========================================
       1. UPGRADE TAMPILAN KOTAK LOGIN & LANDING 
       ========================================== */
    .login-card {
        width: 100%;
        max-width: 480px; /* <--- INI KUNCI AGAR KOTAK LEBIH LEBAR KE SAMPING */
        background: rgba(255, 255, 255, 0.65) !important; 
        backdrop-filter: blur(25px) saturate(150%);
        -webkit-backdrop-filter: blur(25px) saturate(150%);
        border: 1px solid rgba(255, 255, 255, 0.8) !important;
        border-radius: 24px !important;
        padding: 40px 30px !important;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
        transition: transform 0.3s ease;
        margin: 0 auto; /* Pastikan berada di tengah */
    }

    /* Membuat form input (kolom ketik) di dalam login ikut lembut */
    .login-card .form-control {
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.9);
        border-radius: 16px !important;
        box-shadow: inset 0 2px 5px rgba(0,0,0,0.02);
        transition: all 0.3s ease;
    }

    .login-card .form-control:focus {
        background: #fff;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 4px rgba(78, 115, 223, 0.15); /* Cahaya biru lembut saat diketik */
    }

    /* Mempercantik tombol utama di halaman login */
    .login-card .btn-primary {
        border-radius: 16px !important;
        border: none;
        background: linear-gradient(135deg, var(--primary-color), #3b82f6) !important;
        box-shadow: 0 8px 20px rgba(78, 115, 223, 0.3) !important;
        transition: all 0.3s ease;
    }
    .login-card .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 25px rgba(78, 115, 223, 0.4) !important;
    }

    /* ==========================================
       2. UPGRADE TAMPILAN PROFIL SISWA & ALUMNI
       ========================================== */
    
    /* Memperhalus Card (Kotak Pembungkus) */
    #view-profil_siswa .card {
        border: none !important;
        border-radius: 20px !important;
        background: #ffffff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important; /* Bayangan sangat tipis, tidak kotor */
        transition: transform 0.3s ease;
    }
    #view-profil_siswa .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06) !important;
    }

    /* Modifikasi Kop Surat Sekolah di Profil agar tidak kaku */
    #headerSiswa {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fc 100%) !important;
        position: relative;
        overflow: hidden;
        border-bottom: none !important;
    }
    /* Garis pelangi/gradien di bawah kop surat */
    #headerSiswa::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; width: 100%; height: 5px;
        background: linear-gradient(90deg, var(--primary-color), #36b9cc, #1cc88a);
    }

    /* Menyulap Foto Profil Siswa menjadi sangat estetik */
    #profil_foto {
        width: 140px !important;
        height: 140px !important;
        border-radius: 50% !important; /* Membuatnya bulat sempurna */
        object-fit: cover;
        margin: 0 auto;
        padding: 4px; /* Jarak antara foto dan bingkai */
        background: linear-gradient(135deg, var(--primary-color), #36b9cc); /* Bingkai warna gradasi */
        border: 4px solid #fff !important; /* Border putih pelindung */
        box-shadow: 0 10px 25px rgba(78, 115, 223, 0.2) !important; /* Cahaya di bawah foto */
        transition: transform 0.3s ease;
    }
    #profil_foto:hover {
        transform: scale(1.05); /* Membesar sedikit saat disentuh */
    }

    /* Merapikan tabel biodata agar lebih lega (spacious) */
    #view-profil_siswa .table td {
        padding: 12px 8px;
        border-bottom: 1px dashed rgba(0,0,0,0.05) !important; /* Garis putus-putus sangat tipis */
        color: #4a5568;
    }
    #view-profil_siswa .table tr:last-child td {
        border-bottom: none !important;
    }

    /* ==========================================
       3. HEADER PROFIL SISWA SUPER KEREN (HERO BANNER)
       ========================================== */
    #headerSiswa {
        /* Latar belakang biru gradasi premium */
        background: linear-gradient(135deg, var(--primary-color) 0%, #1e3a8a 100%) !important;
        border-radius: 24px !important;
        padding: 40px 20px !important;
        box-shadow: 0 15px 35px rgba(30, 58, 138, 0.25) !important;
        margin-top: 15px;
    }
    
    /* Warna teks diubah menjadi putih agar menyala di atas biru */
    #headerSiswa h6 {
        color: rgba(255, 255, 255, 0.8) !important;
        letter-spacing: 2px;
        font-size: 0.85rem;
        margin-bottom: 5px !important;
    }
    #headerSiswa h4 {
        color: #ffffff !important;
        font-weight: 800 !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Bayangan pada teks */
        font-size: 1.6rem;
    }
    
    /* Efek 3D dan animasi pada Logo Sekolah */
    #headerSiswa img {
        height: 75px !important;
        filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.4)); /* Efek logo timbul */
        transition: transform 0.4s ease;
    }
    #headerSiswa img:hover {
        transform: scale(1.15) rotate(5deg); /* Membesar dan miring sedikit saat disentuh */
    }

    /* ==========================================
       4. HALAMAN VALIDASI QR (HASIL SCAN) FUTURISTIK
       ========================================== */
    #mdlHasilScan .modal-content {
        border-radius: 24px !important;
        border: none;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        box-shadow: 0 25px 50px rgba(0,0,0,0.15);
        overflow: hidden;
    }
    
    /* Header modal diubah jadi Hijau Verifikasi Sukses */
    #mdlHasilScan .modal-header {
        background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%) !important;
        border-bottom: none !important;
        padding: 25px 20px;
    }
    #mdlHasilScan .modal-title {
        color: white !important;
        letter-spacing: 2px;
        font-size: 1.2rem;
        text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    /* Mengembalikan foto validasi ke posisi aman agar tidak menabrak teks */
    #val-foto {
        width: 120px !important;
        height: 160px !important;
        border-radius: 16px !important;
        border: 5px solid #fff !important; 
        box-shadow: 0 10px 25px rgba(0,0,0,0.12) !important;
        margin-top: 10px !important; /* DIGANTI: Mendorong foto sedikit ke bawah, bukan ke atas */
        position: relative;
        z-index: 10;
        background: #f8f9fc;
        transition: transform 0.3s ease;
    }
    #val-foto:hover {
        transform: scale(1.05);
    }

    /* Merapikan tabel dan tombol di hasil validasi */
    #mdlHasilScan .modal-body {
        padding: 30px 25px !important;
        background: #ffffff;
    }
    #mdlHasilScan .table td {
        padding: 12px 5px !important;
        border-bottom: 1px dashed rgba(0,0,0,0.06) !important;
        color: #4a5568;
    }
    #mdlHasilScan .table tr:last-child td { border-bottom: none !important; }
    
    /* Tombol Buka Kartu Digital */
    #btn-buka-kartu-digital {
        border-radius: 14px !important;
        background: linear-gradient(135deg, var(--primary-color), #2563eb) !important;
        border: none;
        box-shadow: 0 8px 15px rgba(37, 99, 235, 0.25);
        padding: 12px;
    }
    
    /* Tombol Tutup Halaman (Ghost Button Merah) */
    #mdlHasilScan .btn-danger {
        border-radius: 14px !important;
        background: transparent !important;
        color: #ef4444 !important;
        border: 2px solid #ef4444 !important;
        padding: 10px;
        transition: all 0.3s ease;
    }
    #mdlHasilScan .btn-danger:hover {
        background: #ef4444 !important;
        color: white !important;
        box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3);
    }

    /* ==========================================
       5. RESPONSIVE HEADER KHUSUS HP (DI BAWAH 768px)
       ========================================== */
    @media (max-width: 768px) {
        /* Mengizinkan elemen untuk turun baris */
        #headerSiswa .d-flex {
            flex-wrap: wrap !important;
            justify-content: center !important;
        }
        
        /* Memaksa teks instansi & sekolah turun ke baris baru */
        #headerSiswa .d-flex > div {
            order: 3; /* Teks ditaruh di urutan terakhir (bawah) */
            width: 100%;
            margin-top: 15px; /* Jarak antara logo dan teks */
        }
        
        /* Mengatur logo berjejer di atas */
        #headerLogoInstansi {
            order: 1; /* Logo kiri */
            margin-right: 15px;
        }
        #headerLogoSekolah {
            order: 2; /* Logo kanan */
            margin-left: 15px;
        }
        
        /* Penyesuaian ukuran font & logo agar proporsional di HP */
        #headerSiswa h4 { font-size: 1rem !important; }
        #headerSiswa h6 { font-size: 0.75rem !important; }
        #headerSiswa img { height: 60px !important; }
    }

    /* ==========================================
       6. BIODATA SISWA ATAS-BAWAH KHUSUS HP (MOBILE)
       ========================================== */
    @media (max-width: 768px) {
        /* Memaksa tabel menjadi elemen blok (berdiri sendiri, tidak menyamping) */
        #view-profil_siswa .table, 
        #view-profil_siswa .table tbody, 
        #view-profil_siswa .table tr, 
        #view-profil_siswa .table td {
            display: block;
            width: 100%;
            text-align: left !important; /* Semua teks rata kiri */
        }

        /* Mengatur jarak antar kelompok data (baris) */
        #view-profil_siswa .table tr {
            margin-bottom: 12px;
            padding: 8px 12px;
            background: #f8f9fc; /* Latar belakang abu-abu sangat muda agar terlihat seperti kartu kecil */
            border-radius: 12px;
            border: 1px solid rgba(0,0,0,0.03);
        }

        /* Desain Judul/Label (contoh: NIS / NISN) - Posisi Atas */
        #view-profil_siswa .table td:first-child {
            font-size: 0.75rem !important; /* Huruf lebih kecil */
            text-transform: uppercase; /* Huruf kapital semua */
            letter-spacing: 0.5px;
            color: var(--primary-color) !important; /* Warna biru aplikasi */
            font-weight: 700 !important;
            padding-bottom: 2px !important; /* Jarak ditarik agar menempel dengan isinya */
            border-bottom: none !important;
        }

        /* Desain Isi/Data (contoh: 123 / 123456) - Posisi Bawah */
        #view-profil_siswa .table td:nth-child(2) {
            font-size: 1.05rem !important; /* Huruf lebih besar & jelas */
            color: #2d3748 !important; /* Warna abu-abu kehitaman pekat */
            font-weight: 600 !important;
            padding-top: 0 !important; /* Menempel dengan judul di atasnya */
            border-bottom: none !important;
        }

        /* Menyembunyikan baris kosong yang mungkin ada di tabel asli */
        #view-profil_siswa .table tr td:empty {
            display: none;
        }
    }

    /* ==========================================
       7. SEMBUNYIKAN TOMBOL BADAN PROFIL KHUSUS HP
       ========================================== */
    @media (max-width: 768px) {
        /* Sembunyikan tombol Keluar (Logout) yang ada di atas tabel profil */
        #view-profil_siswa > div.d-flex.justify-content-between.align-items-center.mb-3 > button {
            display: none !important;
        }
        
        /* Sembunyikan deretan tombol (Kartu, Sandi, Cek Data) di bawah pas foto */
        #view-profil_siswa .card .d-flex.justify-content-center.gap-2.flex-wrap {
            display: none !important;
        }
    }

    /* MEMAKSA TOMBOL AKSI DI TABEL TETAP 1 BARIS */
    #tblSiswa td:last-child,
    #tblDataSiswa td:last-child,
    #tblAlumni td:last-child,
    #tblIndukAlumni td:last-child,
    #tblDaftarUlang td:last-child,
    #tblMapel td:last-child {
        white-space: nowrap !important;
    }

    /* ==========================================
   PERBAIKAN TAMPILAN KHUSUS MOBILE (HP)
   ========================================== */

/* Mewarnai teks menu bawah karena backgroundnya sekarang pakai Tema (Biru/dll) */
#mobileBottomBar { background: var(--primary-color) !important; border-top: none !important; }
.m-nav-item { color: rgba(255,255,255,0.6) !important; }
.m-nav-item.active { color: #ffffff !important; }

/* Mengubah warna lingkaran aktif di bar bawah agar warnanya membalik (Circle Putih, Icon Tema) */
.m-nav-item.active .bg-primary { 
    background: #ffffff !important; 
    border-color: rgba(255,255,255,0.2) !important; 
}
.m-nav-item.active .bg-primary i { 
    color: var(--primary-color) !important; 
}

@media (max-width: 768px) {
    /* 1. Mengecilkan elemen agar luas dan tidak clunky */
    h3.text-secondary { font-size: 1.1rem !important; margin-bottom: 0.2rem !important; }
    .card { padding: 12px !important; margin-bottom: 12px !important; border-radius: 12px !important; }
    
    /* Tabel lebih padat dan pas */
    .table td, .table th { font-size: 0.75rem !important; padding: 6px !important; }
    
    /* 2. Container Sejajar untuk Tombol Aksi */
    .action-bar-mobile {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        gap: 6px !important;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }
    .action-bar-mobile::-webkit-scrollbar { display: none; } /* Chrome */
    
    /* 3. Menyesuaikan ukuran tombol agar 4 tombol muat sejajar */
    .action-bar-mobile .btn {
        font-size: 0.7rem !important;
        padding: 5px 8px !important;
        white-space: nowrap;
        flex: 1; /* Bagi rata ruang layar */
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
    }
    
    /* Sembunyikan teks pelengkap agar tidak terlalu panjang */
    .mobile-hide { display: none !important; }

/* Tambahkan bagian ini untuk mengecilkan Dropdown */
    .action-bar-mobile select.form-select {
        font-size: 0.7rem !important;
        padding: 4px 20px 4px 6px !important; /* Pangkas ruang kosong kiri-kanan */
        height: auto !important; /* Samakan tinggi dengan tombol sebelahnya */
        flex: 0 0 95px !important; /* Kunci lebar maksimalnya di 95px agar tidak melar */
    }
}

/* ==========================================
   PERBAIKAN UKURAN TABEL BIODATA SISWA 
   (DIBUAT LEBIH PADAT & KECIL)
   ========================================== */

/* 2. Pengaturan Khusus Layar HP (Mobile) */
@media (max-width: 768px) {
    /* Merapatkan jarak antar kotak (baris) */
    #view-profil_siswa .table tr {
        margin-bottom: 8px !important; 
        padding: 5px 10px !important; 
    }

    #view-profil_siswa .table td {
    padding: 6px 5px !important; /* Mengurangi jarak atas-bawah agar kolom lebih rapat */
    font-size: 0.85rem !important; /* Huruf dikecilkan menjadi sekitar 13.5px */
    border-bottom: 1px dashed rgba(0,0,0,0.06) !important;
}

    /* Label data (contoh: NIS / NISN) */
    #view-profil_siswa .table td:first-child {
        font-size: 0.65rem !important; /* Label diperkecil */
        padding-bottom: 0px !important; 
    }

    /* Isi datanya (contoh: 0012345678) */
    #view-profil_siswa .table td:nth-child(2) {
        font-size: 0.85rem !important; /* Isi data diperkecil dari sebelumnya 1.05rem */
        padding-top: 2px !important; 
    }
}