/* =====================================================================
   E-LEARNING ISLAHUNA — tema
   Rumpun toska yang sama dengan Idaroh, supaya kedua aplikasi terbaca
   sebagai satu keluarga meski berdiri di basis data yang berbeda.
   ===================================================================== */

:root {
    --isl-950: #04342C;
    --isl-900: #064136;
    --isl-800: #085041;
    --isl-700: #0F6E56;
    --isl-600: #12836A;
    --isl-500: #1D9E75;
    --isl-300: #5DCAA5;
    --isl-200: #9FE1CB;
    --isl-100: #C9EDDF;
    --isl-050: #E1F5EE;
}

body { font-size: 14px; }

/* ------------------------------------------------------------ bilah atas */
.navbar-isl { background-color: var(--isl-700); border-bottom: none; }
.navbar-isl .nav-link, .navbar-isl .nav-link:hover { color: #fff; }

/*
 * Kedua penanda di kanan (periode, Akunku) disamakan tinggi dan jarak
 * dalamnya (padding .5rem .9rem, sepadan dengan padding bawaan
 * .nav-link) supaya sebaris presisi -- dulu penanda-peran memakai
 * padding 5px yang lebih pendek dari nav-link polos (padding bawaan
 * Bootstrap .5rem/8px), jadi terlihat "naik" sendiri walau sudah
 * align-items:center. Bentuknya pil penuh, kaca lembut (latar tipis +
 * garis tipis), bukan kotak solid -- soft, tidak bersaing dengan
 * hijau bilah di belakangnya. Peran (dulu badge terpisah "Operator")
 * sekarang digabung ke kepala menu-turun Akunku, bukan pil sendiri --
 * lihat .akun-kepala di bawah.
 */
.penanda-peran {
    display: inline-flex;
    align-items: center;
    padding: .5rem .9rem !important;
    margin-right: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .14);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.1;
    transition: background .15s ease, border-color .15s ease;
    /*
     * Warna putih dulu HANYA datang dari cascade ".navbar-isl .nav-link"
     * (elemen ini di bilah admin/guru memang selalu dobel class "nav-link
     * penanda-peran") -- di kepala siswa (.kepala-siswa, layout/siswa.php,
     * revisi 141) elemennya CUMA "penanda-peran" tanpa "nav-link" sama
     * sekali, jadi tidak ada cascade itu dan teksnya jatuh ke biru bawaan
     * tautan. Disetel eksplisit di sini supaya putih di MANA PUN dipakai,
     * tidak bergantung konteks pembungkusnya.
     */
    color: #fff;
}
.penanda-peran i { opacity: .8; font-size: 12px; }

a.penanda-peran:hover, a.penanda-peran:focus {
    background: rgba(255, 255, 255, .17);
    border-color: rgba(255, 255, 255, .24);
    color: #fff;
}

/* Tombol hamburger menu disamakan bentuk pil + tinggi dengan
   penanda-peran di sebelahnya, supaya seluruh kelompok kanan terbaca
   sebagai satu deret yang serasi, bukan dua gaya berbeda. */
.navbar-isl .navbar-nav > .nav-item > a.nav-link:not(.penanda-peran) {
    display: inline-flex;
    align-items: center;
    padding: .5rem .9rem;
    border-radius: 999px;
    transition: background .15s ease;
}
.navbar-isl .navbar-nav > .nav-item > a.nav-link:not(.penanda-peran):hover,
.navbar-isl .navbar-nav > .nav-item > a.nav-link:not(.penanda-peran):focus {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

/*
 * Kepala menu-turun Akunku -- foto/ikon + nama + level, menggantikan
 * dropdown-header polos (dulu cuma username). Tanpa garis lingkaran
 * di sekeliling foto (permintaan Bapak: "yang penting presisi", bukan
 * hiasan) -- fotonya sendiri sudah cukup jadi penanda identitas.
 */
.akun-menu { min-width: 230px; overflow: hidden; }
.akun-kepala {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 16px 16px;
    background: var(--isl-050);
}
.akun-foto {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--isl-100);
    margin-bottom: 10px;
}
.akun-foto-bawaan {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--isl-600);
    font-size: 24px;
}
.akun-nama { font-weight: 600; font-size: 14.5px; color: #24312c; line-height: 1.3; }
.akun-level { font-size: 12px; color: #6b7a75; margin-top: 2px; }

/* --------------------------------------------------------- menu samping */
.sidebar-isl { background-color: var(--isl-950); }
/*
 * Logo kaligrafi (revisi 172, dibesarkan penuh revisi 173-174) -- permintaan
 * Bapak persis: "logonya tampil ukuran 100% dalam sidebar menu", "biarkan
 * menu bergeser ke bawah". <aside class="main-sidebar sidebar-isl"> dijadikan
 * KOLOM FLEX: brand-link (logo) tinggi APA ADANYA mengikuti gambar, .sidebar
 * (bungkus menu) mengisi SISA ruang lewat flex:1 + overflow-y:auto sendiri.
 *
 * REVISI 174 -- PERBAIKAN: percobaan revisi 173 TERNYATA belum cukup --
 * logo masih tampak terpotong kecil di layar Bapak. Sebabnya baru ketahuan
 * sesudah membaca CSS AdminLTE aslinya (bukan menebak lagi): AdminLTE
 * MEMATOK TIGA hal yang belum disentuh sebelumnya --
 *   (a) `.brand-link` bawaan AdminLTE = `position:fixed; overflow:hidden;
 *       height:calc(3.5rem + 1px)` -- posisi FIXED membuatnya keluar dari
 *       alur normal, sehingga perubahan flex pada induknya (.main-sidebar)
 *       TIDAK berpengaruh sama sekali padanya, dan overflow:hidden + tinggi
 *       tetap 56px MEMOTONG gambar apa pun yang lebih tinggi dari itu;
 *   (b) `.brand-image` bawaan AdminLTE = `float:left; max-height:33px` --
 *       batas tinggi 33px ini TIDAK ikut tertimpa oleh aturan lama kita
 *       (kita cuma menyetel width/height/display/margin/float, bukan
 *       max-height, jadi batas 33px bawaan tetap berlaku);
 *   (c) `.main-sidebar .sidebar` DAN `.brand-link~.sidebar` bawaan
 *       AdminLTE sama-sama memberi `margin-top:calc(2.93725rem + 1px)`
 *       (~47px) pada bungkus menu, mengasumsikan brand-link setinggi itu.
 * Ketiganya sekarang DITIMPA EKSPLISIT di bawah supaya logo benar-benar
 * lepas dari kotak tetap itu dan tampil 100% lebar apa adanya.
 */
.sidebar-isl.main-sidebar { display: flex; flex-direction: column; }
.sidebar-isl .brand-link {
    position: static; overflow: visible; height: auto; width: auto;
    background: var(--isl-900); border-bottom: none; color: #fff;
    display: block; padding: 0; flex: 0 0 auto;
}
.sidebar-isl .brand-image {
    width: 100%; height: auto; max-height: none;
    display: block; margin: 0; float: none;
}
/*
 * Bentuk jatuh-kembali bawaan (revisi 178) -- ikon bulat kecil + teks
 * nama aplikasi, susunan klasik AdminLTE dari SEBELUM revisi 172.
 * SENGAJA kelas terpisah dari .brand-link/.brand-image di atas (yang
 * dikhususkan untuk logo besar unggahan admin, width:100%) supaya
 * ikon kecil ini TIDAK ikut melar penuh lebar sidebar.
 */
.sidebar-isl .brand-link-bawaan {
    display: flex; align-items: center; padding: 14px 16px;
}
.sidebar-isl .brand-image-bawaan {
    max-height: 33px; width: 33px; flex: 0 0 auto;
    margin-right: .6rem; float: none;
}
.sidebar-isl .brand-text-bawaan {
    color: #fff; font-weight: 600; font-size: 1.05rem; line-height: 1.3;
}
.sidebar-isl .nav-header {
    color: var(--isl-300);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding-top: 14px;
}
.sidebar-isl .nav-sidebar .nav-link { color: #CFE7DA; font-size: 13.5px; }
.sidebar-isl .nav-sidebar .nav-link:hover { background: var(--isl-800); color: #fff; }
.sidebar-isl .nav-sidebar .nav-link.active { background: var(--isl-600); color: #fff; box-shadow: none; }

/* --------------------------------------------------- menu bertingkat
   Ditulis penuh di sini dan tidak bersandar pada kelas treeview bawaan
   AdminLTE, sebab bila widgetnya tidak aktif seluruh anak menu tampil
   sekaligus dan jenjangnya hilang.
   ------------------------------------------------------------------ */

/* Bilah menu harus dapat digulir sendiri bila isinya melebihi tinggi
   layar, terpisah dari gulungan halaman. Sejak revisi 174: flex:1 auto
   (mengisi SISA ruang di bawah logo, berapa pun tingginya) menggantikan
   height:calc(100vh - 3.5rem) yang mengasumsikan logo selalu 56px --
   margin-top bawaan AdminLTE (yang juga mengasumsikan brand-link 56px,
   lihat catatan di atas .sidebar-isl.main-sidebar) ikut ditimpa ke 0. */
.sidebar-isl .sidebar {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 24px;
}
.sidebar-isl .sidebar::-webkit-scrollbar { width: 6px; }
.sidebar-isl .sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 3px;
}

/* ---- induk ---- */
.menu-isl > .nav-induk > .tombol-induk {
    color: #EAF4EE;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 10px 10px 10px 12px;
    border-radius: 0;
}
.menu-isl > .nav-induk > .tombol-induk:hover { background: var(--isl-800); color: #fff; }
.menu-isl > .nav-induk.menu-open > .tombol-induk {
    background: var(--isl-800);
    color: #fff;
}
.menu-isl > .nav-induk > .tombol-induk .nav-icon { color: var(--isl-300); }

/* AdminLTE memotong isi menu dengan white-space:nowrap dan
   overflow:hidden pada .sidebar-mini. Aturan itu dibuat untuk animasi
   menciut, tetapi akibatnya label induk yang panjang mendorong lencana
   dan caret ke luar batas bilah sehingga keduanya tidak terlihat.

   Selama bilah sedang terbentang, pemotongan itu dilepas dan label
   dibiarkan turun ke baris berikutnya. Judul kelompok tetap terbaca
   utuh — memendekkannya dengan titik-titik justru menghilangkan
   keterangan yang dibutuhkan. Saat bilah diciutkan, pemotongan
   dikembalikan supaya animasinya tetap rapi. */
body:not(.sidebar-collapse) .menu-isl .nav-link {
    white-space: normal;
    overflow: visible;
}

.induk-teks {
    display: flex !important;
    align-items: center;
    width: 100%;
    margin: 0;
    gap: 6px;
}

/* min-width:0 wajib: tanpa itu kotak lentur menolak menyusut di bawah
   lebar isinya, dan label panjang tetap mendesak tetangganya keluar. */
.induk-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    line-height: 1.25;
}

/*
 * Lencana jumlah sub-laman per kelompok menu -- semula penanda kemajuan
 * pengembangan ("X/Y jadi"), disederhanakan jadi satu angka (jumlah
 * sub-laman yang TAMPIL untuk peran yang sedang masuk -- sudah otomatis
 * berbeda per peran sejak semula, sebab dihitung dari daftar $tampil
 * yang sudah disaring boleh_laman()/peran, lihat sidebar.php) dan
 * dipertahankan permanen atas permintaan Bapak, bukan lagi sekadar sisa
 * pengembangan. Diberi ikon supaya tidak terbaca sebagai angka
 * nyasar -- ukurannya sengaja dikecilkan presisi sepadan tinggi angka
 * di sampingnya, bukan ikon berdiri sendiri.
 */
.lencana-jumlah {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--isl-200);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 999px;
    padding: 1.5px 7px 1.5px 6px;
    margin-right: 8px;
    font-variant-numeric: tabular-nums;
}
.lencana-jumlah i { font-size: 9px; opacity: .75; }

.caret {
    flex: 0 0 auto;
    width: 12px;
    text-align: center;
    font-size: 13px;
    color: var(--isl-300);
    transition: transform .22s ease;
}
.menu-isl > .nav-induk.menu-open > .tombol-induk .caret { transform: rotate(-90deg); }

/* ---- anak ---- */
.menu-isl .nav-treeview {
    display: none;
    background: rgba(0, 0, 0, .22);
    padding: 2px 0 4px;
    list-style: none;
    margin: 0;
}
.menu-isl > .nav-induk.menu-open > .nav-treeview { display: block; }

/* Rel tipis di sisi kiri menegaskan bahwa baris-baris ini bernaung di
   bawah induknya, bukan sederajat dengannya. */
.menu-isl .nav-treeview > .nav-item > .nav-link {
    position: relative;
    padding: 7px 12px 7px 34px;
    margin-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, .13);
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #B9D6C8;
    border-radius: 0;
    white-space: normal;
    line-height: 1.3;
}
.menu-isl .nav-treeview > .nav-item > .nav-link .nav-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11.5px;
    width: auto;
    color: rgba(255, 255, 255, .45);
}
.menu-isl .nav-treeview > .nav-item > .nav-link:hover {
    background: var(--isl-800);
    color: #fff;
}
.menu-isl .nav-treeview > .nav-item > .nav-link:hover .nav-icon { color: #fff; }
.menu-isl .nav-treeview > .nav-item > .nav-link.active {
    background: var(--isl-600);
    color: #fff;
    border-left-color: var(--isl-300);
}
.menu-isl .nav-treeview > .nav-item > .nav-link.active .nav-icon { color: #fff; }

/* Beranda berdiri sendiri, sederajat dengan induk */
.menu-isl > .nav-item > .nav-link:not(.tombol-induk) {
    color: #EAF4EE;
    font-size: 13.5px;
    padding: 10px 12px;
}
.menu-isl > .nav-item > .nav-link.active:not(.tombol-induk) {
    background: var(--isl-600);
    color: #fff;
}

/* Saat bilah diciutkan, hanya ikon yang tersisa dan pemotongan
   dikembalikan agar animasi menciutnya tetap rapi. */
.sidebar-collapse .lencana-jumlah,
.sidebar-collapse .caret { display: none; }
.sidebar-collapse .menu-isl .nav-link {
    white-space: nowrap;
    overflow: hidden;
}

.titik-nanti {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--isl-500);
    opacity: .6;
    margin-left: 6px;
    vertical-align: middle;
}

/* -------------------------------------------------------------- kartu */
.content-wrapper { background: #F2F6F4; }
.card { border-radius: 10px; border: 0.5px solid var(--isl-100); }
.card-isl > .card-header {
    background: var(--isl-700);
    color: #fff;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}
.card-isl > .card-header .card-title { font-size: 15px; font-weight: 500; }

.btn-isl { background: var(--isl-700); border-color: var(--isl-700); color: #fff; }
.btn-isl:hover { background: var(--isl-900); border-color: var(--isl-900); color: #fff; }

table.table th { font-weight: 500; }
.text-isl { color: var(--isl-700); }
.bg-isl { background: var(--isl-700) !important; color: #fff; }

.kotak-angka { border-radius: 10px; padding: 16px 18px; background: #fff; border: .5px solid var(--isl-100); }
.kotak-angka .angka { font-size: 26px; font-weight: 700; color: var(--isl-800); line-height: 1.1; }
.kotak-angka .label { font-size: 12.5px; color: #6B8079; text-transform: uppercase; letter-spacing: .05em; }
.kotak-angka i { font-size: 26px; color: var(--isl-200); }

/* ------------------------------------------------- header beranda:
   foto & sambutan (revisi 84, dirombak revisi 85)
   Foto memenuhi penuh kolomnya sendiri (full-bleed, bukan thumbnail
   berbingkai) di sisi kiri 30% lebar kartu; teks sambutan mengisi 70%
   sisanya, rata kanan-kiri (justify). Garis pembatas adalah tepi
   kolom foto itu sendiri (border-right), bukan elemen terpisah —
   supaya fotonya betul-betul penuh tanpa jarak internal, dan teksnya
   tetap punya jarak sendiri dari garis lewat padding kolom teks.
   Kartu dipotong (overflow:hidden) mengikuti sudut membulat var yang
   sama dengan seluruh kartu di aplikasi (.card{border-radius:10px})
   supaya foto ikut melengkung rapi di sudutnya, tidak menabrak siku
   kartu.
   Di ponsel (<576px, breakpoint sama dengan .card-header responsif)
   foto naik jadi banner selebar kartu di atas, teks di bawahnya, dan
   garis ikut berubah jadi mendatar (border-bottom). */
.kartu-header-beranda { overflow: hidden; }
.hb-baris { display: flex; align-items: stretch; }
.hb-foto-kolom {
    flex: 0 0 30%;
    max-width: 30%;
    min-height: 280px;
    position: relative;
    background: var(--isl-050);
    border-right: 1px solid var(--isl-100);
}
.hb-foto-kolom img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    /* contain, BUKAN cover — cover memotong sisi yang tidak muat pas
       dengan bentuk kolomnya (kepala/kopiah bisa terpangkas di atas
       pada kolom landscape, bahu terpangkas di samping pada kolom
       sempit). Foto WAJIB utuh selalu, apa pun perbandingan sisi kolom
       terhadap perbandingan sisi fotonya — ruang kosong yang tersisa
       (kalau ada) diisi warna latar var(--isl-050) yang sama dengan
       warna kosong lainnya di aplikasi, supaya tetap terlihat sengaja,
       bukan rusak. */
    object-fit: contain;
    display: block;
}
.hb-foto-kosong {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 46px; color: var(--isl-300);
}
.hb-teks-kolom {
    flex: 1 1 70%;
    min-width: 0;
    padding: 24px 28px;
    display: flex;
    align-items: center;
}
.hb-teks { font-size: 13.5px; color: #3d4f49; line-height: 1.8; text-align: justify; white-space: pre-line; }
.hb-teks-kosong { font-size: 13.5px; color: #6B8079; font-style: italic; margin: 0; }
.hb-teks-kosong a { font-style: normal; }

@media (max-width: 575.98px) {
    .hb-baris { flex-direction: column; }
    .hb-foto-kolom {
        flex: 0 0 auto; max-width: 100%; width: 100%;
        /* Tinggi tetap, BUKAN aspect-ratio 16:9 seperti sebelumnya —
           kotak lebar-pendek itu memaksa foto potret (lebih tinggi
           daripada lebar, seperti foto wajah pada umumnya) mengecil
           jauh di dalamnya. Tinggi lebih leluasa ini cocok untuk foto
           potret maupun lanskap, dan object-fit:contain di atas tetap
           menjamin tidak ada yang terpotong pada kedua bentuk. */
        height: 300px;
        min-height: 0;
        border-right: none;
        border-bottom: 1px solid var(--isl-100);
    }
    .hb-teks-kolom { padding: 18px 20px; }
}
.sambutan-teks-bungkus { min-width: 0; flex: 1 1 240px; }
.sambutan-teks { font-size: 13.5px; color: #3d4f49; line-height: 1.6; white-space: pre-line; }
.sambutan-kosong { font-size: 13.5px; color: #6B8079; font-style: italic; }

/* ------------------------------------------------------------- masuk */
/*
 * Latar sengaja digradasikan dulu (bukan warna rata seperti sebelumnya)
 * atas permintaan Bapak, sebagai persiapan sebelum gambar latar
 * sungguhan dipasang: putih di atas (kira-kira 30% tinggi laman),
 * berpadu turun ke hijau (kira-kira 70% sisanya) — logo Yayasan yang
 * akan ditaruh di sini dominan hijau, jadi latar hijau di bawahnya
 * dipilih supaya logo tidak "melebur" dengan latar begitu gambar latar
 * dipasang nanti.
 *
 * Susunannya BUKAN logo-menempel-kartu, melainkan logo di area ATAS
 * laman dan kartu didorong ke area BAWAH (margin-top:auto pada
 * .kartu-masuk memakan seluruh sisa ruang kosong di atasnya di dalam
 * kolom flex) — atas permintaan Bapak, supaya kartu terlihat berada di
 * area bawah, bukan di tengah seperti sebelumnya. Logo dan kartu tetap
 * SEJAJAR secara horizontal (sama-sama di align-items:center pada
 * kolom yang sama).
 */
.laman-masuk {
    /*
     * Latar disusun DUA LAPIS lewat --foto-masuk: lapisan foto (bawaan
     * "none", jadi tembus pandang) di ATAS gradasi hijau di bawahnya.
     * Begitu Bapak sudah punya foto latar, cara memasangnya CUKUP SATU
     * BARIS, tidak perlu menyentuh apa pun yang lain di berkas ini:
     *
     *     --foto-masuk: url('../img/latar-masuk.jpg');
     *
     * Foto otomatis menutupi seluruh laman (cover, ditengahkan, tidak
     * berulang). Gradasinya TETAP disimpan sebagai jaring pengaman --
     * kalau berkas fotonya suatu saat salah nama atau gagal dimuat,
     * laman tidak jatuh jadi putih kosong, melainkan kembali ke gradasi
     * ini.
     */
    --foto-masuk: none;
    /*
     * SEBAB kartu terpotong & perlu discroll di hape (dilaporkan Bapak):
     * unit "vh" di kebanyakan peramban hape dihitung dari tinggi
     * viewport TERBESAR yang mungkin (seolah bilah alamat sudah
     * disembunyikan), padahal saat laman baru dimuat bilah alamatnya
     * masih tampil dan ruang yang BENAR-BENAR terlihat lebih pendek
     * dari 100vh itu. Akibatnya laman dianggap cukup tinggi untuk
     * seluruh isi (logo + kartu), padahal di layar sungguhan ruangnya
     * kurang -- kartu yang didorong ke bawah pun terpotong.
     *
     * "100dvh" (dynamic viewport height) mengukur tinggi yang BENAR-
     * BENAR terlihat saat itu, bukan potensi maksimalnya, jadi ini
     * baris utama yang memperbaikinya. Baris 100vh di atasnya dibiarkan
     * sebagai cadangan untuk peramban lama yang belum kenal dvh --
     * browser yang paham dvh otomatis memakai baris kedua ini karena
     * ditulis belakangan.
     */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex; flex-direction: column; align-items: center;
    background-image: var(--foto-masuk),
        linear-gradient(180deg, #ffffff 0%, var(--isl-100) 30%, var(--isl-600) 70%, var(--isl-800) 100%);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    padding: 4vh 20px 4vh;
}

/*
 * Sempat diberi plat putih di belakang logo (revisi 98), tapi dicabut
 * lagi atas permintaan Bapak -- logo langsung di atas gradasi latar,
 * tanpa bidang terang pembungkus.
 */
.logo-masuk { width: 100%; max-width: 300px; height: auto; max-height: 100px; display: block; object-fit: contain; margin-bottom: 22px; }

/*
 * Jaring pengaman KEDUA, untuk layar yang PENDEK sungguhan (bukan
 * cuma gara-gara bilah alamat) -- hape dalam posisi miring/mendatar,
 * atau model lama yang layarnya memang pendek. Logo dan jarak
 * dikecilkan supaya kartu tetap penuh kelihatan tanpa scroll.
 *
 * INI TEMPATNYA kalau Bapak ingin mengatur sendiri lain kali tanpa
 * perlu minta tolong lagi -- tiga angka di bawah ini yang menentukan
 * seberapa banyak logo "memakan" ruang di layar pendek:
 *   - padding pada .laman-masuk tepat di bawah (sekarang 3vh atas-bawah)
 *   - max-height pada .logo-masuk (sekarang 70px)
 *   - margin-bottom pada .logo-masuk (sekarang 14px)
 * Angka 700px pada "max-height" di baris @media di bawah menentukan
 * MULAI seberapa pendek layar dianggap "pendek" -- naikkan angka itu
 * kalau ingin efek ini berlaku di lebih banyak hape.
 */
@media (max-height: 700px) {
    .laman-masuk { padding: 3vh 20px 3vh; }
    .logo-masuk { max-height: 70px; margin-bottom: 14px; }
}

/*
 * Kartu login -- struktur SUSUNANNYA (bilah kepala hijau bernama
 * aplikasi, avatar bulat, versi di kaki) diadopsi dari model laman
 * login aplikasi lama (assets/app/css/login-tema.css), atas permintaan
 * Bapak. Warnanya TIDAK perlu disamakan manual -- --isl-700 di palet
 * aplikasi ini kebetulan PERSIS sama (#0F6E56) dengan --log-utama pada
 * tema lama itu, jadi tinggal dipakai ulang.
 */
.kartu-masuk {
    width: 100%; max-width: 390px; background: #fff; border-radius: 14px;
    margin-top: auto; overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.kartu-masuk-kepala {
    background: var(--isl-700); color: #fff; text-align: center;
    font-size: 15px; font-weight: 600; letter-spacing: .01em;
    padding: 12px 14px;
}
.kartu-masuk-isi { padding: 22px 24px 20px; }

.login-avatar {
    width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%;
    background: var(--isl-700); display: flex; align-items: center; justify-content: center;
}
.login-avatar i { font-size: 27px; color: #fff; line-height: 1; }

/*
 * Kaki kartu -- area TERPISAH dari .kartu-masuk-isi (lihat komentar
 * SEBAB di masuk.php), bukan sekadar paragraf tambahan. Garis pembatas
 * dan latar sedikit lebih gelap dari putih supaya blok ini terbaca
 * sebagai penutup kartu, bukan bagian dari borang.
 */
.kartu-masuk-kaki {
    background: var(--isl-050);
    border-top: 1px solid var(--isl-100);
    padding: 12px 24px 14px;
    text-align: center;
}
.kaki-platform { font-size: 11px; font-weight: 500; color: var(--isl-800); line-height: 1.4; margin: 0; }
.kaki-versi { font-size: 10.5px; color: #6B8079; margin: 3px 0 0; }

/* ------------------------------------------------------------ singgah */
.singgah { text-align: center; padding: 56px 20px; }
.singgah i { font-size: 42px; color: var(--isl-200); margin-bottom: 14px; }
.singgah h4 { font-size: 19px; font-weight: 500; color: var(--isl-900); }
.singgah p { color: #6B8079; max-width: 520px; margin: 8px auto 0; }

/* ------------------------------------------------- pilihan kelas bank */
.kotak-kelas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border: 1px solid var(--isl-100);
    border-radius: 8px;
    padding: 10px;
    background: #fff;
}
.pilih-kelas {
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
}
.pilih-kelas input { position: absolute; opacity: 0; pointer-events: none; }
.pilih-kelas span {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--isl-100);
    background: var(--isl-050);
    color: var(--isl-900);
    transition: background .15s ease, color .15s ease;
}
.pilih-kelas input:checked + span {
    background: var(--isl-700);
    border-color: var(--isl-700);
    color: #fff;
}
.pilih-kelas input:focus-visible + span { outline: 2px solid var(--isl-500); outline-offset: 2px; }

/* ---------------------------------------------------- penyusun soal */
.soal-isi { font-size: 13.5px; line-height: 1.55; }
.soal-isi img { max-width: 100%; height: auto; }
.soal-isi p { margin-bottom: 4px; }

.opsi-soal { margin: 6px 0 4px 18px; padding: 0; }
.opsi-soal li { margin-bottom: 2px; }
.opsi-soal li.opsi-benar {
    background: var(--isl-050);
    font-weight: 500;
    border-radius: 4px;
    padding: 1px 6px;
}
.kunci { font-size: 12.5px; color: var(--isl-800); margin-top: 4px; }

/* Baris opsi pada borang: huruf di kiri, editor di kanan */
.opsi-baris {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px;
    border: 1px solid #E6EDE9;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: border-color .15s ease, background .15s ease;
}
.opsi-baris.terpilih { border-color: var(--isl-500); background: var(--isl-050); }
.opsi-tanda { margin: 0; cursor: pointer; flex: 0 0 auto; }
.opsi-tanda input { position: absolute; opacity: 0; pointer-events: none; }
.opsi-tanda span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--isl-200);
    background: #fff;
    font-weight: 700;
    color: var(--isl-800);
}
.opsi-tanda input:checked + span {
    background: var(--isl-700);
    border-color: var(--isl-700);
    color: #fff;
}
.opsi-isi { flex: 1 1 auto; min-width: 0; }
.note-editor { margin-bottom: 0 !important; }

/* --------------------------------------------------- pratinjau impor */
.keberatan {
    font-size: 12.5px;
    color: #8A5A00;
    background: #FFF6E0;
    border-radius: 6px;
    padding: 4px 9px;
    margin-bottom: 4px;
}
.pilih-butir { accent-color: var(--isl-700); cursor: pointer; }

/* ------------------------------------------------------------- token */
.kotak-token {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 46px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--isl-800);
    background: var(--isl-050);
    border: 1px dashed var(--isl-200);
    border-radius: 12px;
    padding: 18px 10px;
    margin-bottom: 14px;
}
@media (max-width: 480px) {
    .kotak-token { font-size: 32px; letter-spacing: .12em; }
}

/* ------------------------------------------------- penjadwalan pengawas */
.tabel-pengawas td, .tabel-pengawas th { vertical-align: middle; }
/* Sel yang meneruskan nilai baris di atasnya dibiarkan kosong dengan
   garis atas yang dihapus, sehingga terbaca sebagai satu blok tanpa
   perlu penggabungan sel yang menyulitkan penyuntingan. */
.tabel-pengawas td.sel-lanjut { border-top-color: transparent; }

/* =====================================================================
   JARAK TEPI TABEL DI DALAM KARTU

   Tabel yang dipasang langsung di badan kartu — tanpa card-body — kehilangan
   jarak tepinya, sehingga angka di kolom pertama dan tombol di kolom terakhir
   menempel pada garis kartu. Aturan berikut mengembalikan jarak itu dan
   menyamakannya dengan jarak yang dipakai card-body, supaya kolom tabel
   sejajar dengan judul kartu di atasnya.
   ===================================================================== */

.card .table > thead > tr > th:first-child,
.card .table > tbody > tr > td:first-child,
.card .table > tfoot > tr > th:first-child {
    padding-left: 1.25rem;
}

.card .table > thead > tr > th:last-child,
.card .table > tbody > tr > td:last-child,
.card .table > tfoot > tr > th:last-child {
    padding-right: 1.25rem;
}

/* Kolom nomor: rata kanan agar satuan, puluhan, dan ratusan berbaris lurus. */
.kol-no { text-align: right; }
.table > tbody > tr > td.kol-no,
.table > tbody > tr > td:first-child.kol-no { text-align: right; }

/* ---- sel tombol tindakan ----
   Tombol diberi jarak lewat margin, bukan lewat aturan bersebelahan,
   supaya jaraknya tetap ada ketika baris tombol terlipat ke bawah pada
   layar sempit. Itu keadaan yang paling sering terjadi di ponsel, dan
   tombol yang berdempet di sana bukan sekadar kurang rapi — ikon hapus
   mudah tertekan keliru. */
.sel-aksi { white-space: normal; line-height: 1; }
.sel-aksi > .btn { margin: 3px 0 3px 5px; }
.sel-aksi > .btn:first-child { margin-left: 0; }

/* Baris tabel diberi tinggi yang lebih lega — tabel padat sulit dibaca
   pada layar ponsel, dan modul ini banyak dipakai sambil berdiri di
   ruang ujian. */
.card .table.table-sm > tbody > tr > td { padding-top: .5rem; padding-bottom: .5rem; }

/* =====================================================================
   ATURAN TAMPILAN BERSAMA
   Dipasang sekali di sini, berlaku untuk seluruh halaman — termasuk
   halaman yang dibuat kemudian, tanpa perlu diingat ulang.
   ===================================================================== */

/* ---- kepala kartu: judul di kiri, tindakan selalu di pojok kanan ---- */
.card > .card-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.card > .card-header > .card-title { margin: 0; float: none; }
.card > .card-header > .aksi-kanan {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}
.card > .card-header > .aksi-kanan .btn { white-space: nowrap; }

/* Keterangan singkat di pojok kanan kepala kartu (mis. "12 guru
   bertugas", "Tahun Pelajaran 2026/2027") lazimnya diberi .text-muted
   bawaan Bootstrap (#6c757d) supaya tidak bersaing dengan judul kartu.
   Bapak menilai warnanya terlalu gelap untuk sekadar keterangan
   sampingan -- diringankan KHUSUS pada posisi ini (bukan .text-muted
   di tempat lain, mis. pesan tabel kosong, yang tidak disinggung).
   !important perlu menandingi !important bawaan Bootstrap sendiri. */
.card > .card-header > .aksi-kanan.text-muted,
.card > .card-header > .aksi-kanan .text-muted {
    color: #9aa0a4 !important;
}

/* Tombol garis-luar abu (btn-outline-secondary) di pojok kanan kepala
   kartu -- mis. "Cetak Dokumen Pembelajaran" di laman Modul Ajar --
   memakai warna Bootstrap bawaan #6c757d untuk teks MAUPUN garis
   tepinya, dan itu jugalah yang Bapak nilai terlalu gelap. Diringankan
   dengan pola yang sama seperti .text-muted di atas: ditarget di
   POSISI (pojok kanan kepala kartu), bukan .btn-outline-secondary
   secara umum -- tombol garis-luar di tempat lain (mis. tombol Sunting
   di baris tabel) tidak disentuh, sebab tidak disinggung Bapak dan
   makna warnanya di sana berbeda (tindakan baris, bukan info sampingan
   kartu). Tidak perlu !important, Bootstrap tidak memakainya di sini,
   dan aturan ini lebih spesifik + termuat belakangan. */
.card > .card-header > .aksi-kanan.btn-outline-secondary,
.card > .card-header > .aksi-kanan .btn-outline-secondary {
    color: #8d949a;
    border-color: #ced3d6;
}
.card > .card-header > .aksi-kanan.btn-outline-secondary:hover,
.card > .card-header > .aksi-kanan .btn-outline-secondary:hover {
    color: #fff;
    background-color: #8d949a;
    border-color: #8d949a;
}

/* ---- penomoran halaman: di tengah, berbentuk bilah ---- */
.pager-isl { display: flex; justify-content: center; padding: 4px 0 2px; }
.pager-isl .pagination { margin: 0; flex-wrap: wrap; justify-content: center; gap: 4px; }
.pager-isl .page-item .page-link {
    border: 1px solid var(--isl-100);
    border-radius: 8px;
    color: var(--isl-800);
    min-width: 36px;
    text-align: center;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1.2;
}
.pager-isl .page-item .page-link:hover { background: var(--isl-050); border-color: var(--isl-200); }
.pager-isl .page-item.active .page-link {
    background: var(--isl-700);
    border-color: var(--isl-700);
    color: #fff;
    font-weight: 600;
}
.pager-isl .page-item.disabled .page-link { color: #B7C4BE; background: #fff; border-color: #EDF2EF; }

/* ---- kalender (tempusdominus) ----
   Bawaan pustaka ini memakai sel tabel persegi tanpa ukuran tetap, sehingga
   tanggal terpilih melar mengikuti isinya dan barisnya tampak tidak rata.
   Di sini tiap sel diberi ukuran pasti dan dibulatkan, agar penandanya
   berupa lingkaran seukuran sel — bukan kotak yang menonjol keluar baris. */
.bootstrap-datetimepicker-widget.dropdown-menu {
    width: 19.5rem;
    padding: 10px;
    font-size: 13.5px;
    border: 1px solid var(--isl-100);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(4, 52, 44, .14);
    overflow: hidden;
}
.bootstrap-datetimepicker-widget.dropdown-menu.bottom::before,
.bootstrap-datetimepicker-widget.dropdown-menu.bottom::after,
.bootstrap-datetimepicker-widget.dropdown-menu.top::before,
.bootstrap-datetimepicker-widget.dropdown-menu.top::after { display: none; }

/* Lebar kolom dikunci merata. Tanpa ini lebar tiap kolom ditentukan isinya,
   sehingga kolom yang memuat angka dua digit melebar sendiri dan penanda
   tanggal terpilih menonjol keluar dari garis tabel. */
.bootstrap-datetimepicker-widget table {
    width: 100%;
    margin: 0;
    table-layout: fixed;
}
.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget table td { border: 0; }

/* kepala: nama bulan dan dua panah */
.bootstrap-datetimepicker-widget table th.picker-switch {
    padding: 4px 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--isl-900);
}
.bootstrap-datetimepicker-widget table th.prev,
.bootstrap-datetimepicker-widget table th.next {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: var(--isl-700);
}
.bootstrap-datetimepicker-widget table th.prev:hover,
.bootstrap-datetimepicker-widget table th.next:hover { background: var(--isl-050); }

/* nama hari */
.bootstrap-datetimepicker-widget table th.dow {
    padding-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #93A29C;
}

/* sel tanggal */
/* Penanda dibuat persegi membulat, bukan lingkaran.
   Lingkaran hanya benar-benar bulat bila lebar sel kebetulan sama dengan
   tingginya; begitu lebar kolom berubah — dan itu berubah mengikuti lebar
   kotak isian — lingkarannya menjadi lonjong dan tepinya melewati garis.
   Persegi membulat selalu pas mengikuti selnya berapa pun lebarnya. */
.bootstrap-datetimepicker-widget table td.day {
    height: 34px;
    padding: 0;
    line-height: 34px;
    border-radius: 9px;
    color: #33413B;
}
.bootstrap-datetimepicker-widget table td:focus,
.bootstrap-datetimepicker-widget table th:focus { outline: none; }
.bootstrap-datetimepicker-widget table td.day:hover { background: var(--isl-050); }
.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new { color: #C2CEC9; }

/* Hari ini ditandai lingkaran tipis, bukan segitiga kecil di sudut sel —
   penanda sudut itu mudah disangka noda pada layar rapat. */
.bootstrap-datetimepicker-widget table td.today::before { display: none; }
.bootstrap-datetimepicker-widget table td.day.today { box-shadow: inset 0 0 0 1.5px var(--isl-300); }
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--isl-700);
    color: #fff;
    font-weight: 600;
    box-shadow: none;
    text-shadow: none;
}
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover { color: #DCE6E1; background: none; }

/* tampilan bulan, tahun, dan dasawarsa */
.bootstrap-datetimepicker-widget table td span.month,
.bootstrap-datetimepicker-widget table td span.year,
.bootstrap-datetimepicker-widget table td span.decade {
    width: 30%;
    height: 42px;
    line-height: 42px;
    margin: 3px 1.5%;
    border-radius: 9px;
    color: #33413B;
}
.bootstrap-datetimepicker-widget table td span.month:hover,
.bootstrap-datetimepicker-widget table td span.year:hover,
.bootstrap-datetimepicker-widget table td span.decade:hover { background: var(--isl-050); }
.bootstrap-datetimepicker-widget table td span.active { background: var(--isl-700); color: #fff; }

/* jam dan menit */
.bootstrap-datetimepicker-widget .timepicker-picker td span,
.bootstrap-datetimepicker-widget .timepicker-hours td,
.bootstrap-datetimepicker-widget .timepicker-minutes td {
    border-radius: 9px;
    color: #33413B;
}
.bootstrap-datetimepicker-widget .timepicker-picker td span:hover,
.bootstrap-datetimepicker-widget .timepicker-hours td:hover,
.bootstrap-datetimepicker-widget .timepicker-minutes td:hover { background: var(--isl-050); }

/* baris tombol di kaki kalender */
.bootstrap-datetimepicker-widget .picker-switch.accordion-toggle {
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px solid #EDF3F0;
}
.bootstrap-datetimepicker-widget .picker-switch td { padding: 0; }
.bootstrap-datetimepicker-widget .picker-switch td span {
    display: block;
    width: auto;
    height: auto;
    padding: 9px 0;
    line-height: 1;
    font-size: 15px;
    border-radius: 9px;
    color: var(--isl-700);
}
.bootstrap-datetimepicker-widget .picker-switch td span:hover { background: var(--isl-050); }

/* ---- kotak penegasan ---- */
.swal2-popup { border-radius: 12px; font-size: 14px; }
.swal2-title { font-size: 19px !important; color: var(--isl-900); }
.swal2-html-container { font-size: 14px !important; color: #495a54; }
.swal2-actions .btn { min-width: 110px; }


/* =====================================================================
   PEMBETULAN JARAK PADA LAYAR SEMPIT
   ===================================================================== */

/* ---- kotak pilihan: teks jangan tertimpa tanda siku ----
   Tanda siku digambar sebagai latar di tepi kanan, dan teks pilihan yang
   panjang berjalan menembusnya. Ruang di kanan disediakan agar keduanya
   tidak bertumpuk, dan teks yang tetap kepanjangan dipotong dengan titik
   tiga — bukan dibiarkan menabrak. */
select.form-control,
select.form-control-sm {
    padding-right: 2rem;
    text-overflow: ellipsis;
}

/* ---- kepala kartu di layar sempit ----
   Pada ponsel, judul dan tombol tidak muat sebaris. Dibiarkan berdesakan
   keduanya saling menempel; karena itu di bawah 576 piksel tombol
   diturunkan ke baris sendiri dan dirapatkan ke kiri, sejajar dengan
   judulnya. */
.card > .card-header { row-gap: 10px; }
.card > .card-header > .aksi-kanan { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }

@media (max-width: 575.98px) {
    .card > .card-header {
        flex-direction: column;
        align-items: stretch;
    }

    .card > .card-header > .aksi-kanan {
        margin-left: 0;
        justify-content: flex-start;
    }

    /* Jarak tepi disamakan dengan jarak card-body pada layar sempit,
       sehingga kolom pertama tabel yang digeser tetap sejajar dengan
       tulisan di atasnya ketika geserannya berada di posisi awal. */
    .card .table > thead > tr > th:first-child,
    .card .table > tbody > tr > td:first-child,
    .card .table > tfoot > tr > th:first-child { padding-left: 1.25rem; }

    .card .table > thead > tr > th:last-child,
    .card .table > tbody > tr > td:last-child,
    .card .table > tfoot > tr > th:last-child { padding-right: 1.25rem; }
}


/* ---- tabel yang digeser ke samping ----
   Sebagian tabel terlalu lebar untuk layar ponsel dan harus digeser.
   Lebar terkecil dipasang agar kolomnya tidak diperas sampai isinya
   terpotong — memeras kolom membuat tulisan patah tiap satu kata, dan
   itu justru lebih sulit dibaca daripada menggeser.  */
.card .table-responsive > .table { min-width: 620px; }
.card .table-responsive > .table.tabel-pengawas { min-width: 780px; }

/* Kolom pengawas diberi lebar tetap agar nama guru tampil utuh beserta
   tanda sikunya, tidak diperas mengikuti sisa ruang. */
.tabel-pengawas select { min-width: 210px; }

/* Bilah geser dibuat tipis dan sewarna tema, bukan bawaan sistem yang
   tebal dan mencolok di dalam kartu. */
.card .table-responsive::-webkit-scrollbar { height: 6px; }
.card .table-responsive::-webkit-scrollbar-thumb {
    background: var(--isl-200);
    border-radius: 3px;
}
.card .table-responsive::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------ periode arsip */
.penanda-arsip {
    background: #FFE8A3 !important;
    color: #6B4E00 !important;
    font-weight: 600;
}
.bilah-arsip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    background: #FFF3CD;
    border: 1px solid #FFE08A;
    border-left: 5px solid #E0A800;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13.5px;
    color: #6B4E00;
}

/* =====================================================================
   KEHADIRAN
   ===================================================================== */

/* ---- pilihan keterangan, berbentuk tombol berdampingan ---- */
.pilih-hadir { display: flex; flex-wrap: wrap; gap: 4px; }
.pilih-hadir label { margin: 0; cursor: pointer; }
.pilih-hadir input { position: absolute; opacity: 0; pointer-events: none; }
.pilih-hadir span {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #DCE6E1;
    background: #fff;
    font-size: 12.5px;
    color: #55635E;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.pilih-hadir input:disabled + span { opacity: .55; cursor: not-allowed; }

.hadir-h input:checked + span { background: #1D9E75; border-color: #1D9E75; color: #fff; }
.hadir-i input:checked + span { background: #2F86C9; border-color: #2F86C9; color: #fff; }
.hadir-a input:checked + span { background: #C62828; border-color: #C62828; color: #fff; }
.hadir-b input:checked + span { background: #E08A00; border-color: #E08A00; color: #fff; }

/* ---- warna tetap, dipakai pada kisi rekap dan legenda ---- */
.hadir-h-tetap { background: #E3F6EE; color: #106B4E; font-weight: 600; }
.hadir-i-tetap { background: #E4F0FB; color: #1F5F92; font-weight: 600; }
.hadir-a-tetap { background: #FBE4E4; color: #9B1C1C; font-weight: 700; }
.hadir-b-tetap { background: #FDF0DA; color: #8A5A00; font-weight: 700; }

.legenda-hadir { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lencana-hadir {
    display: inline-block;
    min-width: 24px;
    text-align: center;
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 12px;
    margin-right: 4px;
}
.sel-terkunci-tanda { background: #E9EEEC; border: 1px solid #D6DEDA; }

/* ---- kisi rekap bulanan ---- */
.kisi-hadir th, .kisi-hadir td { padding: 4px 5px !important; font-size: 12px; }
.kisi-hadir .sel-tgl { width: 30px; font-weight: 600; }
.kisi-hadir .hari-kecil { font-size: 9.5px; font-weight: 400; color: #93A29C; }
.kisi-hadir .sel-terkunci { background: #E9EEEC; }
.kisi-hadir .sel-hadir { font-size: 11.5px; }

.kolom-ket { width: 34px; font-size: 11px; }
.jumlah-semester { background: #F4F9F7; }

/* ---- kartu ringkasan semester ---- */
.kartu-hadir {
    background: #fff;
    border: 1px solid #E6EDE9;
    border-left-width: 5px;
    border-radius: 10px;
    padding: 14px 16px;
    height: 100%;
}
.kartu-hadir .angka-hadir { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--isl-900); }
.kartu-hadir .label-hadir { font-size: 12.5px; color: #6B8079; margin-bottom: 8px; }
.kartu-hadir .bilah-persen {
    height: 5px; border-radius: 3px; background: #EEF3F1; overflow: hidden; margin-bottom: 5px;
}
.kartu-hadir .bilah-persen i { display: block; height: 100%; background: currentColor; }
.kartu-hadir .persen-hadir { font-size: 11.5px; color: #93A29C; }

.hadir-h-tepi { border-left-color: #1D9E75; }
.hadir-h-tepi .bilah-persen { color: #1D9E75; }
.hadir-i-tepi { border-left-color: #2F86C9; }
.hadir-i-tepi .bilah-persen { color: #2F86C9; }
.hadir-a-tepi { border-left-color: #C62828; }
.hadir-a-tepi .bilah-persen { color: #C62828; }
.hadir-b-tepi { border-left-color: #E08A00; }
.hadir-b-tepi .bilah-persen { color: #E08A00; }

/* ---- bilah tanggal terkunci ---- */
.bilah-terkunci {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    background: #EEF3F1; border: 1px solid #DCE6E1; border-left: 5px solid #7D8E88;
    border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
    font-size: 13.5px; color: #44534E;
}

/* =====================================================================
   HALAMAN SISWA
   ===================================================================== */

/* ---- kartu materi dan tugas ---- */
/* Kartu dibuat berlapis: kepala berlatar hijau, badan putih, kaki bergaris.
   Bantalan dipindah dari kartu ke tiap lapis supaya kepala benar-benar
   memenuhi tepi atas — kepala berwarna yang masih menyisakan bingkai putih
   di kiri-kanannya tampak seperti tempelan, bukan bagian kartu. */
.kartu-bahan {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #E6EDE9;
    border-radius: 12px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.kartu-bahan:hover {
    text-decoration: none;
    color: inherit;
    border-color: var(--isl-200);
    box-shadow: 0 6px 18px rgba(6, 65, 54, .08);
    transform: translateY(-2px);
}
.kartu-bahan .kepala-bahan {
    display: flex; align-items: center; gap: 7px;
    background: var(--isl-700); color: #fff;
    padding: 9px 15px;
    font-size: 11.5px; text-transform: uppercase;
    letter-spacing: .05em; font-weight: 500; margin: 0;
}
.kartu-bahan .kepala-bahan i { opacity: .85; }
.kartu-bahan h4 {
    font-size: 15px; font-weight: 600; color: var(--isl-900);
    margin: 0; padding: 13px 15px 6px; line-height: 1.35;
}
.kartu-bahan .cuplikan {
    font-size: 12.5px; color: #6B8079; line-height: 1.5;
    margin: 0; padding: 0 15px 13px; flex: 1 1 auto;
}
/* Kaki diberi bantalan penuh di keempat sisinya. Sebelumnya tulisan
   "Baca" dan tanda panahnya menempel di tepi kartu karena kaki hanya
   mewarisi bantalan kartu yang sudah habis dipakai badan. */
.kartu-bahan .kaki-bahan {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; font-size: 11.5px; color: #93A29C;
    border-top: 1px solid #F0F4F2; padding: 10px 15px;
}
.kartu-bahan .kaki-aksi {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--isl-700); font-weight: 600;
}
.kartu-bahan:hover .kaki-aksi { gap: 9px; }
.kartu-bahan .kaki-aksi i { transition: transform .12s ease; }

.tanda-tugas {
    margin-left: auto; border-radius: 20px; padding: 2px 9px;
    font-size: 10.5px; letter-spacing: 0; text-transform: none; font-weight: 600;
}
/* Tanda keadaan tugas ditenangkan agar kartu tugas seirama dengan kartu
   materi. Warna kuat pada tiap kartu membuat sederet tugas tampak seperti
   deretan peringatan, padahal sebagian besar hanyalah tugas biasa yang
   belum jatuh tempo. Keadaan cukup dinyatakan lencana kecilnya, dan garis
   tepi kiri diganti garis tipis sewarna keluarga toska. */
.tanda-belum    { background: #FDF0DA; color: #8A5A00; }
.tanda-terkirim { background: var(--isl-050); color: var(--isl-700); }
.tanda-dinilai  { background: var(--isl-100); color: var(--isl-900); }
.kartu-dinilai .kepala-bahan  { background: var(--isl-800); }
.kartu-terkirim .kepala-bahan { background: var(--isl-700); }
.kartu-belum .kepala-bahan    { background: var(--isl-700); }

.isi-bahan { font-size: 14px; line-height: 1.7; }
.isi-bahan img { max-width: 100%; height: auto; border-radius: 6px; }

.angka-nilai { font-size: 46px; font-weight: 700; color: var(--isl-700); line-height: 1; }

/* ---- kehadiran siswa: hari ini ---- */
.kartu-hari-ini {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    border-radius: 12px; padding: 16px 20px; margin-bottom: 16px;
    color: #fff;
}
.kartu-hari-ini .hari-label { font-size: 12px; opacity: .85; text-transform: uppercase; letter-spacing: .06em; }
.kartu-hari-ini .hari-tanggal { font-size: 17px; font-weight: 600; }
.kartu-hari-ini .hari-status { font-size: 22px; font-weight: 700; text-align: right; }
.kartu-hari-ini .hari-catatan { font-size: 12.5px; opacity: .9; text-align: right; }
.hari-h { background: linear-gradient(135deg, #12836A, #1D9E75); }
.hari-i { background: linear-gradient(135deg, #1F5F92, #2F86C9); }
.hari-a { background: linear-gradient(135deg, #9B1C1C, #C62828); }
.hari-b { background: linear-gradient(135deg, #8A5A00, #E08A00); }
.hari-kosong { background: linear-gradient(135deg, #5C6B66, #7D8E88); }

/* ---- kalender bulan berjalan ---- */
.kalender-hadir {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 12px;
}
.kal-kepala { text-align: center; font-size: 11px; color: #93A29C; padding-bottom: 2px; }
.kal-kosong { aspect-ratio: 1; }
.kal-hari {
    aspect-ratio: 1; border-radius: 8px; background: #F4F7F6; border: 1px solid #EDF2F0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 12px; color: #6B8079;
}
.kal-angka { font-weight: 600; line-height: 1; }
.kal-kode { font-size: 9.5px; font-weight: 700; margin-top: 1px; }
.kal-ini { outline: 2px solid var(--isl-500); outline-offset: 1px; }
.kal-h { background: #E3F6EE; border-color: #C3EBDC; color: #106B4E; }
.kal-i { background: #E4F0FB; border-color: #C6DFF5; color: #1F5F92; }
.kal-a { background: #FBE4E4; border-color: #F3C9C9; color: #9B1C1C; }
.kal-b { background: #FDF0DA; border-color: #F6DFB4; color: #8A5A00; }

.ringkas-bulan { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; }
.ringkas-item { display: flex; align-items: center; gap: 6px; }
.titik-h, .titik-i, .titik-a, .titik-b {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
}
.titik-h { background: #1D9E75; } .titik-i { background: #2F86C9; }
.titik-a { background: #C62828; } .titik-b { background: #E08A00; }

/* ---- cincin semester ---- */
.cincin-hadir { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
.cincin {
    width: 150px; height: 150px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.cincin-isi {
    width: 104px; height: 104px; border-radius: 50%; background: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cincin-angka { font-size: 25px; font-weight: 700; color: var(--isl-900); line-height: 1; }
.cincin-label { font-size: 11.5px; color: #93A29C; }

.cincin-rincian { flex: 1 1 240px; min-width: 240px; }
.rincian-baris {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0; border-bottom: 1px solid #F0F4F2; font-size: 13.5px;
}
.rincian-label { flex: 1 1 auto; }
.rincian-angka { color: var(--isl-900); }
.rincian-persen { width: 54px; text-align: right; color: #93A29C; font-size: 12.5px; }
.rincian-total { border-bottom: 0; font-weight: 600; }

/* ---- bilah tiap bulan ---- */
.bulan-batang { display: flex; flex-direction: column; gap: 8px; }
.batang-baris { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.batang-nama { width: 92px; flex: 0 0 auto; color: #55635E; }
.batang-bilah {
    flex: 1 1 auto; height: 12px; border-radius: 6px; overflow: hidden;
    background: #F0F4F2; display: flex;
}
.batang-bilah i { display: block; height: 100%; }
.batang-h { background: #1D9E75; } .batang-i { background: #2F86C9; }
.batang-a { background: #C62828; } .batang-b { background: #E08A00; }
.batang-angka { width: 58px; text-align: right; color: #93A29C; flex: 0 0 auto; }

/* =====================================================================
   TATA LETAK SISWA
   ===================================================================== */
body.laman-siswa { background: #F2F6F4; padding-bottom: 72px; }
.bungkus-siswa { max-width: 780px; margin: 0 auto; padding: 0 14px; }

.kepala-siswa { background: var(--isl-700); color: #fff; position: sticky; top: 0; z-index: 20; }
.kepala-isi { display: flex; align-items: center; justify-content: space-between; height: 54px; }
.merek-siswa { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; font-size: 15px; }
.merek-siswa:hover { color: #fff; text-decoration: none; }
.merek-siswa img { border-radius: 50%; background: #fff; }

.isi-siswa { padding-top: 16px; }
.judul-siswa { font-size: 19px; font-weight: 600; color: var(--isl-900); margin: 0 0 14px; }

/* ---- bilah bawah ---- */
.bilah-bawah {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
    background: #fff; border-top: 1px solid #E1E9E5;
    display: flex; justify-content: space-around;
    padding: 6px 0 max(6px, env(safe-area-inset-bottom));
    box-shadow: 0 -2px 12px rgba(6, 65, 54, .06);
}
.bilah-bawah a {
    flex: 1 1 0; text-align: center; color: #8A9A94;
    font-size: 10.5px; text-decoration: none; padding: 2px 0;
}
.bilah-bawah a i { display: block; font-size: 17px; margin-bottom: 2px; }
.bilah-bawah a.aktif { color: var(--isl-700); font-weight: 600; }

/* ---- sapaan ---- */
.sapaan { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.sapaan h1 { font-size: 19px; font-weight: 600; color: var(--isl-900); margin: 0; }
.sapaan p { font-size: 12.5px; color: #6B8079; margin: 2px 0 0; }
.lencana-hadir-ini { border-radius: 20px; padding: 4px 12px; font-size: 12px; }

/* ---- kartu umum siswa ---- */
.kartu-siswa { border-radius: 12px; border: 1px solid #E6EDE9; }
.ks-kepala {
    padding: 11px 16px; border-bottom: 1px solid #F0F4F2;
    font-size: 13px; font-weight: 600; color: var(--isl-800);
}
.ks-isi { padding: 14px 16px; }

/* ---- kartu ujian hari ini ---- */
.kartu-ujian-ini {
    background: linear-gradient(135deg, #0F6E56, #1D9E75);
    color: #fff; border-radius: 12px; padding: 14px 16px; margin-bottom: 14px;
}
.ku-kepala { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; opacity: .9; margin-bottom: 8px; }
.ku-baris { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 8px 0; border-top: 1px solid rgba(255,255,255,.18); }
.ku-baris:first-of-type { border-top: 0; }
.ku-mapel { font-size: 16px; font-weight: 600; }
.ku-ket { font-size: 12px; opacity: .9; }

/* ---- jadwal hari ini ---- */
.tabel-jadwal { width: 100%; font-size: 13.5px; }
.tabel-jadwal td { padding: 5px 0; border-bottom: 1px solid #F4F7F6; }
.tabel-jadwal tr:last-child td { border-bottom: 0; }
.tj-jam { width: 74px; color: var(--isl-700); font-weight: 600; }
.tj-jam span { display: block; font-size: 11px; color: #93A29C; font-weight: 400; }

/* ---- kisi menu ---- */
.kisi-menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 10px; }
.pintu {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 14px 6px; border-radius: 12px; text-decoration: none;
    font-size: 12px; font-weight: 600; color: #fff; min-height: 84px;
}
.pintu:hover { text-decoration: none; color: #fff; opacity: .92; }
.pintu i { font-size: 20px; }
.mn-biru { background: #2F86C9; } .mn-jingga { background: #E08A00; }
.mn-hijau { background: #1D9E75; } .mn-ungu { background: #7C5CBF; }
.mn-toska { background: #12836A; }
.mn-cokelat { background: #8D6E63; }
.pintu-lencana {
    position: absolute; top: 6px; right: 8px; background: #fff; color: #C62828;
    border-radius: 20px; min-width: 20px; padding: 1px 6px; font-size: 11px; font-weight: 700;
}

/* ---- pengumuman ---- */
.teks-jalan {
    background: var(--isl-050); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px;
    font-size: 13px; color: var(--isl-900); overflow: hidden; white-space: nowrap;
}
.teks-jalan span { display: inline-block; animation: jalan 22s linear infinite; }
@keyframes jalan { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
.baris-umum { padding: 8px 0; border-top: 1px solid #F4F7F6; font-size: 13.5px; }
.baris-umum:first-child { border-top: 0; }
.bu-tanggal { font-size: 11.5px; color: #93A29C; }

/* ---- daftar ujian ---- */
.kartu-ujian {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    background: #fff; border: 1px solid #E6EDE9; border-left-width: 5px;
    border-radius: 12px; padding: 13px 16px; margin-bottom: 10px;
}
.uj-buka { border-left-color: #1D9E75; }
.uj-selesai { border-left-color: #B7C4BE; }
.uj-tutup { border-left-color: #E6EDE9; }
.uj-mapel { font-size: 15px; font-weight: 600; color: var(--isl-900); }
.uj-ket { font-size: 12px; color: #6B8079; }

.tabel-konfir { width: 100%; font-size: 13.5px; margin-bottom: 14px; }
.tabel-konfir td { padding: 5px 0; border-bottom: 1px solid #F4F7F6; }
.tabel-konfir td:first-child { color: #6B8079; width: 46%; }
.ingat-ujian {
    background: #FFF8E6; border: 1px solid #F5E3B3; border-radius: 10px;
    padding: 12px 14px; font-size: 12.5px; color: #6B4E00; margin-bottom: 16px;
}
.ingat-ujian ul { margin: 6px 0 0 16px; padding: 0; }
.ingat-ujian li { margin-bottom: 4px; }
.kotak-token-isi {
    text-align: center; font-size: 24px; letter-spacing: .3em;
    text-transform: uppercase; font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* ---- hasil ---- */
.angka-nilai-besar { font-size: 60px; font-weight: 700; color: var(--isl-700); line-height: 1; }
.nilai-kurang { color: #C62828; }
.tabel-rincian-nilai { width: 100%; max-width: 320px; margin: 0 auto; font-size: 13.5px; }
.tabel-rincian-nilai td { padding: 5px 0; border-bottom: 1px solid #F4F7F6; }
.nilai-tertutup { background: #F4F7F6; border-radius: 10px; padding: 18px; color: #55635E; font-size: 13.5px; }
.nilai-tertutup i { font-size: 26px; color: #A9B8B2; margin-bottom: 8px; display: block; }

/* =====================================================================
   HALAMAN MENGERJAKAN UJIAN

   Direvisi ulang menyusul keluhan Bapak "nuansanya jauh dari interface
   app ini, masih terasa desain lama" -- CSS sebelumnya sebetulnya sudah
   memakai palet --isl-*, tapi bahasa rupanya (border tegas 1px abu
   datar, kartu bersudut kotak, tombol Bootstrap polos) tertinggal dari
   arah yang dipakai laman lain SEJAK bilah atas dirombak (revisi 137):
   kartu berbayang lembut alih-alih bergaris tegas, bentuk pil pada
   tombol/lencana, dan mikro-interaksi tekan (transform:scale saat
   :active, sudah dipakai lebih dulu di .bk-tombol). Diselaraskan ke
   bahasa itu di sini -- SENGAJA hanya rupa (CSS), markah/JS tidak
   disentuh supaya perilaku anti-curang tidak ikut berisiko berubah.
   ===================================================================== */
body.laman-ujian { background: #EEF6F2; margin: 0; }

.kepala-ujian {
    position: sticky; top: 0; z-index: 40;
    background: linear-gradient(135deg, var(--isl-800), var(--isl-700));
    color: #fff;
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 16px;
    box-shadow: 0 3px 10px rgba(4, 52, 44, .18);
}
.ku-mapel-atas { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.ku-waktu {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 20px; font-weight: 700; letter-spacing: .04em;
    background: rgba(255, 255, 255, .12);
    border-radius: 999px;
    padding: 3px 14px;
}
.waktu-menipis { background: rgba(198, 40, 40, .35); color: #FFD7D7; animation: kedip 1.2s ease-in-out infinite; }
@keyframes kedip { 50% { opacity: .55; } }

.badan-ujian { max-width: 780px; margin: 0 auto; padding: 14px 14px 44px; }

.peta-nomor {
    display: flex; flex-wrap: wrap; gap: 7px;
    background: #fff; border: none; border-radius: 16px;
    padding: 12px; margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(8, 80, 65, .07);
}
.nomor-soal {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px solid #E1EAE6; background: #fff; color: #6B8079;
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.nomor-soal:hover { border-color: var(--isl-300); color: var(--isl-800); }
.nomor-soal:active { transform: scale(.88); }
.nomor-soal.terisi { background: var(--isl-050); border-color: var(--isl-200); color: var(--isl-800); }
.nomor-soal.ragu { background: #FDF0DA; border-color: #F6DFB4; color: #8A5A00; }
.nomor-soal.kini { background: var(--isl-700); border-color: var(--isl-700); color: #fff; box-shadow: 0 0 0 3px var(--isl-100); }

.lembar-soal {
    display: none; background: #fff; border: none;
    border-radius: 16px; padding: 18px 18px 16px;
    box-shadow: 0 4px 16px rgba(8, 80, 65, .08);
}
.lembar-soal.tampak { display: block; animation: soal-muncul .18s ease; }
@keyframes soal-muncul { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.ls-kepala { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ls-nomor {
    font-size: 11px; font-weight: 700; color: var(--isl-700);
    text-transform: uppercase; letter-spacing: .06em;
    background: var(--isl-050); border-radius: 999px; padding: 3px 11px;
}
.ls-ragu { margin: 0; font-size: 12.5px; color: #8A5A00; cursor: pointer; user-select: none; }
.ls-soal { font-size: 15px; line-height: 1.65; margin-bottom: 16px; color: #24312C; }
.ls-soal img { max-width: 100%; height: auto; border-radius: 8px; }
.ls-petunjuk { font-size: 12.5px; color: #6B8079; margin-bottom: 10px; }

.opsi-pilih {
    display: flex; align-items: flex-start; gap: 11px; width: 100%;
    border: 1.5px solid #EDF2EF; border-radius: 13px; padding: 11px 13px;
    margin-bottom: 8px; cursor: pointer; font-weight: 400;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.opsi-pilih:hover { border-color: var(--isl-200); background: #FAFDFC; }
.opsi-pilih:active { transform: scale(.99); }
.opsi-pilih input { position: absolute; opacity: 0; pointer-events: none; }
.op-huruf {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
    border: 1.5px solid var(--isl-200); background: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: var(--isl-800);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.op-teks { flex: 1 1 auto; font-size: 14.5px; line-height: 1.5; padding-top: 2px; }
.op-teks img { max-width: 100%; height: auto; border-radius: 8px; }
.opsi-pilih input:checked ~ .op-huruf { background: var(--isl-700); border-color: var(--isl-700); color: #fff; }
.opsi-pilih:has(input:checked) { border-color: var(--isl-500); background: var(--isl-050); }

.tabel-jodoh { width: 100%; font-size: 13px; border-collapse: collapse; }
.tabel-jodoh th, .tabel-jodoh td { border: 1px solid #EDF2EF; padding: 8px 9px; }
.tabel-jodoh th { background: var(--isl-050); font-weight: 600; color: var(--isl-800); }
.tabel-jodoh .tj-nama { text-align: left; }
.tabel-jodoh tr:hover td { background: #FAFDFC; }

.ls-kaki { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.ls-simpan { font-size: 11.5px; color: #93A29C; }
.simpan-aman { color: var(--isl-600); }
.simpan-gagal { color: #C62828; font-weight: 600; }

/*
 * Tombol Sebelumnya/Berikutnya/Selesaikan Ujian dipilkan (bentuk pil,
 * bukan sudut Bootstrap bawaan) -- KHUSUS di dalam laman ujian ini,
 * TIDAK mengubah .btn global (dipakai di seluruh laman lain dengan
 * sudut standar). Mikro-interaksi tekan sama seperti .bk-tombol.
 */
.badan-ujian .btn, .kotak-selesai .btn {
    border-radius: 999px; font-weight: 600; padding: .55rem 1.3rem;
    transition: transform .1s ease, box-shadow .15s ease;
}
.badan-ujian .btn:active, .kotak-selesai .btn:active { transform: scale(.97); }
.badan-ujian .btn-isl { box-shadow: 0 2px 8px rgba(15, 110, 86, .25); }
.badan-ujian .btn-outline-secondary { border-color: #DCE6E1; color: #55635E; }
.badan-ujian .btn-outline-secondary:hover { background: var(--isl-050); border-color: var(--isl-200); color: var(--isl-800); }

.kotak-selesai { margin-top: 18px; }
.kotak-selesai .btn-danger {
    box-shadow: 0 3px 12px rgba(198, 40, 40, .22);
}

.isian-singkat, textarea.uraian {
    border-radius: 12px !important; border-color: #E1EAE6 !important;
}
.isian-singkat:focus, textarea.uraian:focus {
    border-color: var(--isl-300) !important;
    box-shadow: 0 0 0 3px var(--isl-050) !important;
}

/* ---- bilah kembali pada halaman siswa ---- */
.bilah-kembali {
    position: sticky; top: 54px; z-index: 19;
    background: #fff; border-bottom: 1px solid #E9EFEC;
}
.bk-isi { display: flex; align-items: center; gap: 10px; height: 48px; }
.bk-tombol {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--isl-050); color: var(--isl-800);
    border: 1px solid var(--isl-100); font-size: 14px;
    transition: background .12s ease, color .12s ease;
}
.bk-tombol:hover { background: var(--isl-700); border-color: var(--isl-700); color: #fff; text-decoration: none; }
.bk-tombol:active { transform: scale(.94); }
.bk-judul {
    font-size: 15px; font-weight: 600; color: var(--isl-900);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.isi-siswa.ada-bilah-kembali { padding-top: 14px; }

.ket-halaman { font-size: 12.5px; color: #6B8079; margin: 0 0 12px; }

/* ---- pintasan hari pada pengisian kehadiran ---- */
.lompat-hari { display: flex; flex-wrap: wrap; gap: 6px; }
.pintas-hari {
    border: 1px solid #DCE6E1; border-radius: 20px; padding: 4px 13px;
    font-size: 12.5px; color: #55635E; background: #fff; text-decoration: none;
}
.pintas-hari:hover { border-color: var(--isl-300); color: var(--isl-800); text-decoration: none; }
.pintas-kini { background: var(--isl-700); border-color: var(--isl-700); color: #fff; }
.pintas-kini:hover { color: #fff; }

/* ---- penanda pengawasan di kepala ujian ---- */
.ku-kanan-atas { display: flex; align-items: center; gap: 12px; }
.tanda-awas {
    display: inline-flex; align-items: center; gap: 5px;
    border-radius: 20px; padding: 3px 11px;
    font-size: 12px; font-weight: 600;
    background: rgba(255, 255, 255, .16); color: #fff;
}
.awas-nyala { background: rgba(255, 255, 255, .18); }
.awas-langgar { background: #C62828; }
.awas-mati { background: #7D8E88; text-decoration: line-through; }

/* ---- baris istirahat pada kisi jadwal pelajaran ---- */
.baris-istirahat > td {
    background: var(--isl-050);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--isl-800);
    padding-top: 7px;
    padding-bottom: 7px;
}
.baris-istirahat > td:first-child { background: #F4F7F6; }

/* =====================================================================
   BARIS GURU DAN PEMBAGIAN TUGAS
   ===================================================================== */
.baris-guru { display: flex; align-items: flex-start; gap: 11px; }
.bg-foto {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px;
    object-fit: cover; background: var(--isl-050);
    border: 1px solid var(--isl-100);
}
/*
 * Logo akun bawaan (bukan foto asli) — ikon FontAwesome, bukan lagi
 * huruf awal nama. Dipakai untuk baris Guru & Tendik (fa-user-graduate)
 * dan baris Siswa (fa-book-reader) yang belum mengunggah foto.
 */
.bg-ikon {
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--isl-700);
}
.bg-teks { min-width: 0; }
.bg-nama { font-weight: 500; line-height: 1.3; }
.bg-nip  { font-size: 11.5px; color: #93A29C; }
.bg-jabatan { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }

.lencana-jabatan, .lencana-wali {
    display: inline-block; font-size: 11px; font-weight: 500;
    padding: 2px 7px; border-radius: 5px;
}
.lencana-jabatan { background: var(--isl-700); color: #fff; }
.lencana-wali    { background: var(--isl-100); color: var(--isl-900); }

.tugas-baris {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 12.5px; padding: 2px 0;
}
.tb-nama   { flex: 0 0 auto; font-weight: 500; color: #33413B; }
.tb-ekstra { color: #8A5A00; }
.tb-kelas  { color: #93A29C; font-size: 11.5px; }

/* ---- petak pemilihan kelas per mapel / ekstra ---- */
.petak-ampu {
    border: 1px solid #EDF3F0; border-radius: 10px;
    padding: 9px 11px; margin-bottom: 8px;
}
.pa-judul { font-size: 13px; font-weight: 500; color: var(--isl-900); margin-bottom: 6px; }
.pa-kelas { display: flex; flex-wrap: wrap; gap: 6px; }

.cip { margin: 0; cursor: pointer; }
.cip input { position: absolute; opacity: 0; pointer-events: none; }
.cip > span {
    display: inline-block; font-size: 12px; padding: 4px 10px;
    border: 1px solid #DCE6E1; border-radius: 999px;
    background: #fff; color: #55635E; transition: background .12s ease, border-color .12s ease;
}
.cip:hover > span { border-color: var(--isl-300); }
.cip input:checked ~ span {
    background: var(--isl-700); border-color: var(--isl-700); color: #fff; font-weight: 500;
}

/* Pasangan yang sudah dipegang guru lain. Dibuat jelas tidak dapat ditekan,
   bukan sekadar dipudarkan, supaya tidak dikira gagal merespons. */
.cip-mati { cursor: not-allowed; }
.cip-mati > span {
    background: #F4F7F6; border-style: dashed; color: #B7C4BE;
    text-decoration: line-through;
}

/* =====================================================================
   KELOMPOK MATA PELAJARAN
   ===================================================================== */
.kartu-kelompok {
    display: grid; gap: 10px; margin-bottom: 14px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.kk-kartu {
    display: flex; align-items: center; gap: 11px;
    background: #fff; border: 1px solid var(--isl-100); border-radius: 12px;
    padding: 12px 14px; color: inherit; text-decoration: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.kk-kartu:hover {
    border-color: var(--isl-300); color: inherit; text-decoration: none;
    box-shadow: 0 6px 18px rgba(4, 52, 44, .07);
}
.kk-kode {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
    background: var(--isl-700); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 700;
}
.kk-teks { min-width: 0; display: flex; flex-direction: column; }
.kk-nama  { font-size: 13.5px; font-weight: 500; color: var(--isl-900); line-height: 1.3; }
.kk-cacah { font-size: 11.5px; color: #93A29C; }
.kk-kosong {
    grid-column: 1 / -1; background: #fff; border: 1px dashed var(--isl-200);
    border-radius: 12px; padding: 14px; text-align: center;
    color: #6B8079; font-size: 13px;
}

/* baris pemisah kelompok di dalam tabel */
.baris-kelompok > td {
    background: var(--isl-050);
    font-size: 12.5px; font-weight: 500; color: var(--isl-800);
    padding-top: 7px; padding-bottom: 7px;
}
.bk-kode {
    display: inline-block; min-width: 22px; text-align: center;
    background: var(--isl-700); color: #fff; border-radius: 5px;
    font-size: 11px; font-weight: 700; padding: 1px 6px; margin-right: 7px;
}

.contoh-csv {
    background: #F4F7F6; border: 1px solid #E6EDE9; border-radius: 8px;
    padding: 10px 12px; font-size: 12.5px; margin-bottom: 10px;
}

/* =====================================================================
   KARTU PEMBAGIAN TUGAS
   ===================================================================== */
.kartu-tugas {
    display: grid; gap: 12px; margin-bottom: 14px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.kt-kartu {
    background: #fff; border: 1px solid var(--isl-100);
    border-radius: 12px; overflow: hidden;
}
.kt-kepala { background: var(--isl-700); padding: 10px 13px; }
.kt-nama { display: block; color: #fff; font-weight: 500; font-size: 13.5px; }
.kt-nama:hover { color: #fff; text-decoration: underline; }
.kt-lencana { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.kt-kepala .lencana-jabatan { background: rgba(255, 255, 255, .22); color: #fff; }
.kt-kepala .lencana-wali    { background: rgba(255, 255, 255, .9); color: var(--isl-900); }
.kt-isi { padding: 11px 13px; }
.kt-bagian + .kt-bagian { margin-top: 9px; padding-top: 9px; border-top: 1px solid #EDF3F0; }
.kt-label {
    display: block; font-size: 10.5px; font-weight: 600; color: #93A29C;
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px;
}

/* =====================================================================
   PEMINDAHAN ANGGOTA ROMBEL
   ===================================================================== */
.daftar-pindah {
    list-style: none; margin: 0; padding: 0 0 4px;
    max-height: 420px; overflow-y: auto;
}
.daftar-pindah li {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 14px; border-top: 1px solid #F1F5F3; font-size: 13px;
}
.daftar-pindah li:hover { background: var(--isl-050); }
.dp-nama { flex: 1 1 auto; min-width: 0; }
.dp-nis  { flex: 0 0 auto; font-size: 11.5px; color: #93A29C; }
.dp-tombol {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px;
    border: 1px solid var(--isl-200); background: #fff;
    color: var(--isl-700); font-size: 11px; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.dp-tombol:hover { background: var(--isl-700); border-color: var(--isl-700); color: #fff; }
.kaki-pindah { padding: 9px 14px; border-top: 1px solid #EDF3F0; }

/* =====================================================================
   PEMBAGIAN TUGAS — daftar padat dan kepala halaman penyuntingan
   ===================================================================== */
.kepala-tugas {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid var(--isl-100);
    border-radius: 12px; padding: 12px 15px; margin-bottom: 14px;
}
.kt-balik {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--isl-050); color: var(--isl-800);
    border: 1px solid var(--isl-100); font-size: 14px;
}
.kt-balik:hover { background: var(--isl-700); border-color: var(--isl-700); color: #fff; text-decoration: none; }
.kt-orang { font-size: 15.5px; font-weight: 500; color: var(--isl-900); line-height: 1.25; }
.kt-kecil { font-size: 12px; color: #93A29C; }

.tabel-tugas td { vertical-align: top; padding-top: 9px; padding-bottom: 9px; }
.tg-nama { font-weight: 500; line-height: 1.3; }
.tg-lencana { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.tg-sepi { color: #B7C4BE; font-size: 12.5px; }
.lencana-jam {
    display: inline-block; min-width: 30px;
    background: var(--isl-050); color: var(--isl-800);
    border: 1px solid var(--isl-100); border-radius: 7px;
    font-size: 12.5px; font-weight: 600; padding: 2px 8px;
}

.daftar-jabatan { list-style: none; margin: 0; padding: 0; }
.daftar-jabatan li {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 7px 0; border-top: 1px solid #F1F5F3; font-size: 13px;
}
.daftar-jabatan li:first-child { border-top: 0; }
.dj-hapus { color: #B7C4BE; font-size: 12px; }
.dj-hapus:hover { color: #C62828; }

/* ---- bilah kembali pada halaman anak (sisi petugas) ---- */
.bilah-balik {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--isl-100);
    border-radius: 10px; padding: 7px 13px; margin-bottom: 12px;
    font-size: 13px; color: var(--isl-800);
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.bilah-balik:hover {
    background: var(--isl-700); border-color: var(--isl-700);
    color: #fff; text-decoration: none;
}

/* Status melekat seorang pengajar — bukan tugas tambahan. */
.tg-status {
    margin-top: 2px; font-size: 11.5px; font-style: italic;
    color: var(--isl-600); display: flex; align-items: center; gap: 5px;
}
.tg-status i { font-size: 9px; color: var(--isl-300); font-style: normal; }

/*
 * Status keluar siswa (revisi 77) — dipakai di bawah nama pada Data
 * Siswa, pola sama persis dengan .tg-status di atas, hanya warnanya
 * dibedakan per status: hijau=lulus, kuning=pindah, merah=berhenti.
 */
.tg-status.status-lulus    { color: #1b7a3d; }
.tg-status.status-lulus i    { color: #2ecc71; }
.tg-status.status-pindah   { color: #8a6d00; }
.tg-status.status-pindah i   { color: #f0ad4e; }
.tg-status.status-berhenti { color: #a3272c; }
.tg-status.status-berhenti i { color: #e74c3c; }

/* ---- panel tugas hari ini dan besok (sisi siswa) ---- */
.panel-hari {
    background: #fff; border: 1px solid var(--isl-100);
    border-radius: 12px; overflow: hidden; margin-bottom: 14px;
}
.ph-kepala {
    background: var(--isl-700); color: #fff;
    padding: 9px 15px; font-size: 13px; font-weight: 500;
}
.panel-besok .ph-kepala { background: var(--isl-900); }
.ph-daftar { list-style: none; margin: 0; padding: 0; }
.ph-daftar li {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 15px; border-top: 1px solid #F1F5F3; font-size: 13px;
}
.ph-daftar li:first-child { border-top: 0; }
.ph-jam {
    flex: 0 0 auto; min-width: 54px; text-align: center;
    background: var(--isl-050); color: var(--isl-800);
    border-radius: 7px; padding: 3px 7px; font-size: 11px; font-weight: 600;
}
.ph-judul { flex: 1 1 auto; min-width: 0; color: var(--isl-900); }
a.ph-judul:hover { color: var(--isl-700); text-decoration: none; }
.ph-mapel { display: block; font-size: 11.5px; color: #93A29C; font-weight: 400; }
.ph-tanda {
    flex: 0 0 auto; font-size: 10.5px; font-weight: 600;
    border-radius: 20px; padding: 2px 9px;
}
.ph-sudah { background: var(--isl-050); color: var(--isl-700); }
.ph-belum { background: #FDF0DA; color: #8A5A00; }
.ph-kosong {
    padding: 14px 15px; font-size: 13px; color: #93A29C; text-align: center;
}
.ph-kaki {
    padding: 8px 15px; border-top: 1px solid #F1F5F3;
    font-size: 11.5px; color: #93A29C;
}

.isi-setoran {
    background: #F8FAF9; border: 1px solid #EDF3F0; border-radius: 9px;
    padding: 12px 14px; font-size: 13.5px; line-height: 1.6;
    max-height: 340px; overflow-y: auto; white-space: pre-wrap;
}

/* =====================================================================
   HASIL UJIAN & KOREKSI
   ===================================================================== */
.kartu-identitas {
    background: #fff; border: 1px solid var(--isl-100);
    border-radius: 12px; padding: 12px 15px; margin-bottom: 14px;
}
.ki-baris { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.ki-baris + .ki-baris { margin-top: 9px; padding-top: 9px; border-top: 1px solid #F1F5F3; }
.ki-baris span { display: block; font-size: 10.5px; color: #93A29C; text-transform: uppercase; letter-spacing: .05em; }
.ki-baris b { font-size: 13.5px; color: var(--isl-900); font-weight: 500; }

.tabel-hasil th.kol-kel, .tabel-hasil td.kol-kel { border-left: 1px solid #E6EDE9; }
.ok-benar { color: var(--isl-700); }
.ok-salah { color: #B7C4BE; }
.nilai-kurang { color: #C62828; }

.daftar-koreksi { padding: 4px 0; }
.dk-butir { border-top: 1px solid #F1F5F3; padding: 13px 16px; }
.dk-butir:first-child { border-top: 0; }
.dk-benar  { border-left: 3px solid var(--isl-300); }
.dk-salah  { border-left: 3px solid #F0C9C9; }
.dk-uraian { border-left: 3px solid #F6DFB4; }
.dk-kepala { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.dk-nomor {
    width: 26px; height: 26px; border-radius: 8px; background: var(--isl-050);
    color: var(--isl-800); font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.dk-jenis { font-size: 11px; color: #93A29C; text-transform: uppercase; letter-spacing: .05em; }
.dk-tanda { margin-left: auto; font-size: 10.5px; font-weight: 600; border-radius: 20px; padding: 2px 9px; }
.tanda-benar  { background: var(--isl-050); color: var(--isl-700); }
.tanda-salah  { background: #FBE4E4; color: #9B1C1C; }
.tanda-uraian { background: #FDF0DA; color: #8A5A00; }
.dk-soal { font-size: 13.5px; line-height: 1.6; margin-bottom: 9px; }
.dk-soal img { max-width: 100%; height: auto; }
.dk-jawab { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.dk-jawab > div { min-width: 180px; }
.dk-label { display: block; font-size: 10.5px; color: #93A29C; text-transform: uppercase; letter-spacing: .05em; }
.dk-isi { font-size: 13px; }
.dk-kosong { color: #B7C4BE; font-style: italic; }
.dk-kunci { color: var(--isl-700); font-weight: 500; }
.dk-poin { min-width: 150px; }

/* =====================================================================
   PENGGAJIAN
   ===================================================================== */
/* Kartu Rekap per Orang (Honorarium Bulanan) dulu bisa melebar dan
   memaksa geser kiri-kanan begitu ada nama panjang, sebab kolom Nama
   tidak berlebar tetap. table-layout:fixed + tiga lebar kolom persen
   memaksa nama panjang MEMBUNGKUS di dalam kolomnya sendiri. */
.tabel-sempit { table-layout: fixed; font-size: 12.5px; }
.tabel-sempit td { word-wrap: break-word; overflow-wrap: break-word; }