/* =====================================================================
   OFFICE — mode TERANG & GELAP
   ---------------------------------------------------------------------
   Satu warna lembaga (hijau, TIDAK diubah dari aslinya), yang digilir
   cuma terang <-> gelap. Permintaan Bapak: "tidak ada pilihan warna,
   hanya pilihan terang dan gelap, seperti banyak tersedia di berbagai
   situs situs atau template template."

   Cabang ini sengaja dibangun dari f30c13f -- keadaan SEBELUM pekerjaan
   pilihan-warna dimulai. Percobaan pertama dibangun di atas main, dan
   Bapak benar menolaknya: hijaunya di sana sudah hijau hasil modifikasi,
   sehingga perbandingannya tidak jujur dan diff yang akan ditimpakan ke
   server memuat banyak perombakan yang tidak ada hubungannya dengan
   terang/gelap. Di sini nilai hijaunya persis seperti yang sekarang
   berjalan di server.

   DUA lapis, dan tidak ada --hue sama sekali (itu milik alternatif tiga
   warna; di sini cuma menambah beban tanpa guna):

   1. --isl-950..050 -- tangga warna lembaga. Di mode gelap PERANNYA
      DIBALIK di kedua ujung: 050/100/200 yang tadinya latar lembut jadi
      permukaan gelap, 800/900 yang tadinya teks gelap jadi teks terang.
      Bagian tengah 500-700 tetap hijau -- itu warna lembaga.

   2. --l0 / --ls -- pembalik kecerahan untuk 265 warna netral (garis,
      latar lembut, teks redup) yang hue-nya masing-masing DIPERTAHANKAN.
      Terang: 0%/+1, artinya nilai apa adanya -- mode terang identik
      dengan berkas aslinya. Gelap: 100%/-1, sehingga L 95% jadi 5%.

   Warna berkroma tinggi (hadir/izin/alpa, lencana peringatan, hijau
   lembaga) tidak ikut dibalik, dan SELURUH berkas cetak tidak memuat
   berkas ini sehingga cetakan tidak terpengaruh.
   ===================================================================== */

:root {
    /* ---- MODE TERANG (bawaan, nilai asli) ---- */
    --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;

    --l0: 0%;
    --ls: 1;

    --permukaan:   #ffffff;
    --permukaan-2: #F2F6F4;
    --permukaan-3: #F7FAF8;
    --teks:        #212529;
    --teks-redup:  #6B8079;
    --garis:       #E6EDE9;
}

html[data-mode="gelap"] {
    /*
     * Nilainya DIREDUPKAN, bukan sekadar dibalik. Temuan Bapak:
     * "tujuan daripada penggelapan ini ... untuk meramahkan aplikasi di
     * mata orang-orang yang memang bermasalah dengan cahaya ... ketika
     * teksnya putih terang, itu justru lebih menyilaukan daripada mode
     * terang."
     *
     * Beliau benar, dan angkanya menjelaskan kenapa. Susunan pertama
     * berkontras 13,76:1 (teks #E3EFEA di atas #16231E) -- hampir
     * setara mode terang yang 15,43:1. Pada latar GELAP, kontras
     * setinggi itu membuat huruf terang "melebar" (halation) dan justru
     * lebih menyengat daripada kontras yang sama di latar terang.
     *
     * Sasarannya kini 8-12:1, pita yang lazim dipakai mode gelap:
     *   teks utama  #C6D5CE di kartu  10,17:1   (dulu 13,76)
     *   teks utama  di latar laman    11,24:1   (dulu 15,46)
     *   teks redup  #8FA39B            5,80:1
     * Latar laman juga dinaikkan dari #0E1714 ke #131E1A -- hitam nyaris
     * pekat ikut memperparah halation, jadi ia sengaja tidak dibiarkan
     * mendekati #000.
     *
     * `color:#fff` yang tersisa (83 tempat) SENGAJA dibiarkan: semuanya
     * duduk di atas hijau lembaga, bukan di atas permukaan gelap --
     * kontrasnya cuma 4,7-6,2:1, jauh dari menyengat.
     */
    --isl-950: #04110E;
    --isl-900: #C6D5CE;   /* PERAN DIBALIK: dulu teks paling gelap */
    --isl-800: #A8BDB4;   /* PERAN DIBALIK */
    --isl-700: #0F6E56;   /* hijau lembaga, tetap */
    --isl-600: #16A47F;
    --isl-500: #1FBE90;
    --isl-300: #33534A;   /* PERAN DIBALIK */
    --isl-200: #294038;   /* PERAN DIBALIK */
    --isl-100: #20302A;   /* PERAN DIBALIK */
    --isl-050: #1A2723;   /* PERAN DIBALIK */

    /*
     * Kurva pembalikan kecerahan. BUKAN pembalikan lurus (100 - L).
     *
     * Susunan sebelumnya 94% - L memotong habis segala yang lebih
     * terang dari 94%: #F0F2F1 (94,51%) jadi -0,51% lalu terpotong ke
     * 0% -- HITAM PEKAT. Bapak menemukannya di baris selang-seling
     * laman Pengajuan Judul: "hitam itu tidak menarik, karena terlalu
     * pekat." Diperiksa, ternyata 76 dari 262 warna netral bernasib
     * sama, bukan satu itu saja.
     *
     * 93% - 0,85 x L memampatkan, bukan memotong:
     *   putih 100%  -> 8%     (permukaan gelap, bukan hitam)
     *   94,5%       -> 12,7%  (selang-seling lembut, sesuai maksudnya)
     *   61%         -> 41%
     *   15%         -> 80%    (teks gelap jadi teks terang)
     * Tidak ada lagi yang menyentuh 0%.
     */
    --l0: 93%;
    --ls: -0.85;

    --permukaan:   #1A2723;
    --permukaan-2: #131E1A;
    --permukaan-3: #1F2E29;
    --teks:        #C6D5CE;
    --teks-redup:  #8FA39B;
    --garis:       #2A3A34;

    color-scheme: dark;
}

body { font-size: 14px; }

/*
 * Sudut .badge dicoba dua gaya berbeda (diagonal tajam, lalu gaya
 * gelembung pesan) -- keduanya akhirnya tidak sreg di mata Bapak.
 * Dikembalikan ke sudut membulat bawaan Bootstrap.
 */

/*
 * .lencana-tahap -- lencana Tahap di Bimbingan (Pantauan Prodi). Dulu
 * badge-light (latar nyaris putih dengan garis nyaris putih juga) --
 * bentuknya jadi cuma terlihat sebagai garis pinggir kosong, seolah
 * tulisannya menjorok ke kanan sendiri. Diganti hijau sangat muda
 * (--isl-050), dan lebarnya (bukan cuma tinggi) disamakan PERSIS
 * dengan bar gradasi persis di bawahnya lewat display:block+width:100%,
 * bukan lagi mengikuti panjang tulisannya sendiri.
 */
.lencana-tahap {
    display: block; width: 100%; margin-bottom: 3px; text-align: left;
    background: var(--isl-050); color: var(--isl-800);
}

/*
 * .baris-progres -- baris tambahan di bawah baris utama Bimbingan, berisi
 * label tahap + bar (dipindah dari kolom Tahap yang dihapus, digabung
 * visual di bawah kolom Judul/Pembimbing lewat colspan). border-top:0 +
 * padding-top:0 membuatnya menempel rapat ke baris utama, tidak terlihat
 * sebagai baris terpisah; lencana-tahap dikembalikan ke lebar konten
 * saja (bukan 100%) sebab kolom gabungannya sekarang jauh lebih lebar
 * dari kolom Tahap yang lama.
 */
.baris-progres td { border-top: 0; padding-top: 0; }
.baris-progres .lencana-tahap { display: inline-block; width: auto; }

/*
 * .baris-sesi-ujian -- baris pemisah "SESI I/II/III" di tabel Jadwal
 * yang Rilis, menandai pergantian kelompok tanggal+jam+jenis
 * (SkripsiUjianModel::kelompokkanSesi()) -- padanan web dari baris
 * tr.baris-sesi di cetak_ujian_batch.php, warna disesuaikan ke palet
 * aplikasi (bukan biru cetak).
 */
.baris-sesi-ujian td { background: var(--isl-050); color: var(--isl-800); font-weight: 700; text-align: center; font-size: 12.5px; padding: 6px; }

/*
 * .pemisah-aksi-sesi -- tanda "&middot;" pemisah ikon Cetak/Hapus di
 * baris sesi (REVISI 273). Sempat dicoba dibawahkan + diberi tulisan
 * ("Cetak Jadwal Ini"/"Hapus Jadwal Ini"), lalu diminta Bapak
 * dikembalikan: serbaris dengan label sesi lagi, HANYA ikon (tanpa
 * tulisan) -- lihat skripsi/ujian.php.
 *
 * BUGFIX -- jarak sebelum & sesudah titik sempat TIDAK sama (ditegur
 * Bapak: "icon hapus terlalu jomplang ke kanan"): margin-left:12px
 * bawaan .tautan-cetak-sesi (dipakai bersama oleh ikon Cetak MAUPUN
 * Hapus, lihat di bawah) ikut menambah jarak SESUDAH titik, padahal
 * SEBELUM titik cuma dapat margin milik .pemisah-aksi-sesi sendiri --
 * jadi sisi kanan titik lebih lebar dari sisi kiri. Sekarang jarak
 * kiri-kanan titik SAMA (margin di sini saja), dan margin-left bawaan
 * ikon Hapus ditiadakan (lihat .tautan-hapus-sesi).
 */
.pemisah-aksi-sesi { color: var(--isl-800); opacity: .5; margin: 0 6px; }

/*
 * .tautan-cetak-sesi -- ikon "Cetak Jadwal Ini" (fa-print), disematkan
 * serbaris setelah label "Ujian Proposal/Skripsi ... Hari, Tanggal /
 * Waktu" di baris sesi, membuka modal borang nomor surat (bukan kartu/
 * borang terpisah) -- satu sesi, satu klik cetak, memuat ulang alur
 * cetak batch yang sudah ada dengan id_ujian sesi itu saja.
 */
.tautan-cetak-sesi { margin-left: 12px; font-weight: 400; font-size: 12.5px; color: var(--isl-800); text-decoration: none; }
.tautan-cetak-sesi:hover { text-decoration: underline; color: var(--isl-800); }

/*
 * .tautan-hapus-sesi -- ikon "Hapus Jadwal Ini" (fa-eraser), BARU REVISI
 * 273, berdampingan dengan .tautan-cetak-sesi (dipisah .pemisah-aksi-sesi).
 * Elemennya <button type="submit"> (bukan <a>, sebab perlu mengirim id[]
 * sesi ini lewat POST) -- kelas ini membuang seluruh gaya tombol bawaan
 * supaya tampil PERSIS seperti tautan ikon, sewarna .tautan-cetak-sesi
 * tapi merah (tindakan merusak). margin-left:0 MENIMPA margin-left:12px
 * bawaan .tautan-cetak-sesi (kelas dipakai bersama) -- jarak ke titik di
 * kirinya sudah cukup dari margin .pemisah-aksi-sesi sendiri, lihat
 * catatan di atas.
 */
.tautan-hapus-sesi { background: none; border: 0; padding: 0; margin-left: 0; cursor: pointer; color: #C0392B; }
.tautan-hapus-sesi:hover { text-decoration: underline; color: #C0392B; }

/*
 * .lencana-sudah-cetak -- penanda kecil "sudah dicetak" di bawah tombol
 * aksi utama (pensil Tetapkan Pembimbing / bintang Nilai), gradasi
 * kuning->hijau spt .btn-tandai-selesai supaya dikenali sbg tanda
 * "sesuatu sudah beres", bukan warna status/galat. Baris tetap boleh
 * dicentang lagi utk cetak ulang -- ini murni penanda riwayat, bukan
 * pengunci.
 */
.lencana-sudah-cetak {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 20px; border-radius: 4px;
    background: linear-gradient(to right, #ffc107, var(--isl-500));
    color: #fff; font-size: 10px; cursor: help;
}

/*
 * .btn-tandai-selesai -- tombol "Tandai Selesai" (override Prodi) di
 * kolom Aksi Bimbingan, ditaruh di ATAS dua tombol "Lihat Bimbingan"
 * (lebar sama, 56px, cuma sedikit lebih tinggi). Gradasi kuning->hijau
 * LANDAI (dua titik warna polos, bukan 4 titik dgn jarak sempit seperti
 * .kap-isi -- itu sengaja dibuat tegas krn dipakai clip-path bar
 * progres, di tombol kecil ini malah kelihatan seperti potongan tegas
 * tanpa transisi).
 *
 * .btn-batalkan-selesai -- muncul GANTI tombol di atas begitu kasus
 * sudah ditandai selesai (tahap siap_ujian_*) -- hijau penuh + ikon
 * undo, jalan pintas balik kalau salah klik/salah pilih.
 */
.btn-tandai-selesai {
    background: linear-gradient(to right, #ffc107, var(--isl-500));
    border: none; color: #fff; padding-top: 6px; padding-bottom: 6px;
}
.btn-tandai-selesai:hover, .btn-tandai-selesai:focus { color: #fff; opacity: .9; }
.btn-batalkan-selesai {
    background: var(--isl-500); border: none; color: #fff; padding-top: 6px; padding-bottom: 6px;
}
.btn-batalkan-selesai:hover, .btn-batalkan-selesai:focus { color: #fff; opacity: .9; }

/*
 * .grid-aksi-bimbingan -- BARU REVISI 276, laman Bimbingan. Dulu
 * keempat tombol (Selesai/Batalkan, Hapus, Bimbingan 1, Bimbingan 2)
 * ditumpuk satu kolom (flex-column) sampai bertingkat empat ke bawah --
 * ditambah bar progres (baris TERPISAH di bawahnya, tidak ikut
 * dihitung), satu baris per mahasiswa jadi sangat panjang. Permintaan
 * Bapak persis: "tombol tombol itu dijadikan dua baris... tombol
 * selesai dan hapus di baris atas, tombol bimbingan 1 dan 2 itu di
 * baris kedua" -- grid 2x2, kotak sama sisi. EMPAT sel SELALU dicetak
 * (walau salah satu tombolnya tidak muncul utk baris tsb, mis. mahasiswa
 * belum siap ditandai selesai, atau Bimbingan 2 tidak ada) supaya
 * posisi Selesai/Hapus/Bimbingan-1/Bimbingan-2 tidak pernah geser
 * antar baris -- sel kosong dibiarkan kosong, bukan dilompati.
 */
.grid-aksi-bimbingan {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px;
    justify-items: end; margin-left: auto; width: fit-content;
}
.sel-aksi-bimbingan { width: 32px; height: 32px; }
.sel-aksi-bimbingan .btn {
    width: 32px; height: 32px; padding: 0; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
}
/*
 * .ikon-kunci-geser -- BARU REVISI 285, tombol "Bimbingan 1" saat
 * terkunci (fa-lock). Kotak fa-fw fa-lock & fa-hands-helping SUDAH
 * lebar sama (diukur presisi: 13.75px keduanya, terpusat sama rata,
 * lihatGap kiri=kanan utk keduanya) -- tapi glyph fa-lock sendiri
 * (bentuk gembok) secara visual condong ke kanan dalam kotaknya
 * dibanding fa-hands-helping, jadi tetap terlihat sedikit njomplang
 * kalau dibandingkan. Digeser dikit ke kiri/dalam (permintaan Bapak
 * persis: "kalau icon kunci agak ke kiri atau ke dalam") murni koreksi
 * optik, BUKAN perubahan posisi sel/kolom (posisi slot 1 = sel kiri,
 * slot 2 = sel kanan TETAP SAMA PERSIS dgn laman Prodi).
 */
.ikon-kunci-geser { margin-left: -2px; }

/*
 * .badge-offline-tombol -- penanda kecil pojok kanan-atas di tombol
 * "Lihat Bimbingan 1/2" (daftar Bimbingan) begitu jalur itu ditandai
 * offline oleh Prodi. Warna abu netral (bukan warna status/galat) --
 * ini keterangan, bukan peringatan.
 */
.badge-offline-tombol {
    position: absolute; top: -6px; right: -6px;
    width: 16px; height: 16px; border-radius: 50%;
    background: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); color: #fff; border: 2px solid #fff;
    display: flex; align-items: center; justify-content: center; font-size: 8px;
}

/*
 * .lencana-huruf-nilai -- huruf hasil konversi otomatis di sebelah tiap
 * kotak angka nilai (borang Penilaian Ujian), dihitung LIVE lewat JS
 * begitu angka diketik (skala dari SkripsiSkalaNilaiModel, bisa diubah
 * Prodi lewat Iktishar > Pengaturan).
 */
.kotak-nilai-huruf { gap: 6px; }
.lencana-huruf-nilai {
    flex-shrink: 0; min-width: 30px; text-align: center; font-weight: 700;
    font-size: 12px; color: var(--isl-800); background: var(--isl-050);
    border-radius: 4px; padding: 4px 6px;
}

/*
 * .kotak-cari -- kotak pencarian menyatu (label "Cari" + kotak ketik
 * jadi SATU elemen visual, dipisah garis tipis di antaranya -- bukan
 * label terpisah berdiri sendiri di luar kotak). Bingkai/radius/tinggi
 * disamakan persis dengan .form-control-sm bawaan supaya menyatu mulus
 * dengan gaya borang yang sudah ada di aplikasi ini.
 */
.kotak-cari {
    display: flex; align-items: center; height: 31px;
    border: 1px solid hsl(210.000 13.953% calc(var(--l0) + var(--ls) * 83.137%)); border-radius: 3.2px; background: var(--permukaan); padding: 0 8px;
}
.kotak-cari:focus-within { border-color: var(--isl-500); box-shadow: 0 0 0 .2rem rgba(15, 110, 86, .15); }
.kotak-cari .label-cari {
    padding-right: 8px; margin-right: 8px; border-right: 1px solid hsl(210.000 13.953% calc(var(--l0) + var(--ls) * 83.137%));
    color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); font-size: 12.5px; white-space: nowrap; flex-shrink: 0;
}
.kotak-cari input {
    border: none !important; outline: none; box-shadow: none !important; background: transparent !important;
    flex: 1; height: 100%; padding: 0;
}

/*
 * Kombo cari-ketik (.kombo-cari) -- pengganti <select> polos yang
 * daftarnya panjang (mis. daftar mahasiswa aktif). Klik kotaknya untuk
 * mulai mengetik; daftar tersaring muncul TEPAT DI BAWAH kotak, mengalir
 * dalam susunan biasa (bukan melayang di atas) supaya tidak pernah
 * terpotong batas gulir modal.
 */
.kombo-cari { position: relative; }
.kombo-tampil[readonly] { background: var(--permukaan); cursor: pointer; }
.kombo-daftar {
    margin-top: 4px;
    border: 1px solid hsl(210.000 13.953% calc(var(--l0) + var(--ls) * 83.137%));
    border-radius: 3.2px;
    max-height: 180px;
    overflow-y: auto;
    background: var(--permukaan);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}
.kombo-item { padding: 6px 10px; font-size: 13px; cursor: pointer; }
.kombo-item:hover { background: var(--isl-050, hsl(144.000 31.250% calc(var(--l0) + var(--ls) * 93.725%))); }
.kombo-kosong { padding: 6px 10px; font-size: 12.5px; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); font-style: italic; }

/*
 * .baris-cari-sortir -- baris Cari + Sortir memenuhi lebar kartu, Cari
 * 65% & Sortir 35%, sejajar persis (tinggi & box-sizing disamakan
 * eksplisit -- <select> Bootstrap punya line-height berbeda dari
 * .kotak-cari kalau dibiarkan default, bikin agak turun sedikit).
 */
.baris-cari-sortir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* min-width:0 pada kotak & <input> di dalamnya WAJIB -- tanpa itu <input>
   menolak menyusut di bawah lebar bawaannya (~20 karakter), jadi di layar
   HP baris ini melebar melewati kartu dan <select> Sortir keluar zona. */
.baris-cari-sortir .kotak-cari { flex: 1 1 60%; min-width: 0; box-sizing: border-box; margin: 0; }
.baris-cari-sortir .kotak-cari input { min-width: 0; }
.baris-cari-sortir select[name="urut"] {
    flex: 1 1 30%; min-width: 8.5em; width: auto; height: 31px; box-sizing: border-box; margin: 0; padding: 0 8px;
}

/*
 * .baris-cari-kurikulum -- laman Mata Kuliah, pola PERSIS sama dgn
 * .baris-cari-sortir di atas, cuma rasio Cari/pilihan-nya 70%/30%
 * (bukan 65%/35%) sesuai permintaan Bapak -- kelas terpisah drpd
 * dipaksa share supaya rasio masing2 laman tidak saling mengganggu
 * kalau salah satu diubah lagi nanti.
 */
.baris-cari-kurikulum { display: flex; align-items: center; gap: 8px; }
.baris-cari-kurikulum .kotak-cari { flex: 1 1 70%; box-sizing: border-box; margin: 0; }
.baris-cari-kurikulum select {
    flex: 1 1 30%; width: auto; height: 31px; box-sizing: border-box; margin: 0; padding: 0 8px;
}

/*
 * .status-ikon-teks -- ikon bundar + teks singkat di bawahnya, dipakai
 * di kolom Rekom. PA/Keputusan Prodi (Pengajuan Judul) baik untuk baris
 * judul yang cocok (centang hijau) maupun status fallback (menunggu/
 * revisi/tolak, ikon+warna beda). Ukuran ikon difikskan (bukan
 * mengikuti font-size baris tabel) dan teks presisi di tengah persis
 * di bawah ikon, supaya seragam di semua baris/status.
 */
.status-ikon-teks { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.status-ikon-teks i { font-size: 22px; line-height: 1; }
.status-ikon-teks span { font-size: 10.5px; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); white-space: nowrap; }
.kol-status-ikon { min-width: 96px; }

/*
 * .baris-judul-nomor/.kol-nomor-judul -- penomoran 1./2./3. di kolom
 * Judul (Pengajuan Judul). Nomor ditaruh di kolom lebar tetap lewat
 * flex, supaya teks judul DAN baris kluster di bawahnya sama-sama mulai
 * persis di titik x yang sama -- bukan menempel mepet ke angka.
 */
.baris-judul-nomor { display: flex; align-items: baseline; }
.kol-nomor-judul { flex: 0 0 16px; }

/*
 * .judul-klik -- setiap judul di Pengajuan Judul (Prodi/PA) yang punya
 * Pokok Masalah/Referensi "hidup": diklik membuka rincian lewat modal
 * bersama #modal-rincian-judul (bukan expand inline di kolom) -- sebab
 * referensi di dunia nyata bisa panjang/banyak baris, dan menampilkannya
 * langsung di tabel akan memakan tempat halaman utama.
 */
.judul-klik { cursor: pointer; border-radius: 6px; margin: -3px -6px; padding: 3px 6px; transition: background-color .12s ease; }
.judul-klik:hover, .judul-klik:focus { background-color: var(--isl-050); outline: none; }
/* Warna .ikon-detail sengaja diberi INLINE per baris (bukan di sini) --
   hijau utk judul yang diterima, abu/merah tua utk lainnya, lihat
   skripsi/pengajuan.php. */
.judul-klik .ikon-detail { font-size: 11px; margin-left: 5px; }

/*
 * #modal-rincian-judul -- satu modal dibagikan utk semua judul di
 * seluruh tabel, isinya diisi lewat JS (show.bs.modal + data-* pada
 * elemen .judul-klik yang diklik) supaya tidak perlu satu modal
 * per-judul yang menggandakan markup.
 */
.rj-label {
    margin-bottom: 3px; font-size: 10.5px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase; color: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%));
}
.rj-judul { margin-bottom: 6px; font-size: 16px; font-weight: 700; color: var(--isl-800); line-height: 1.35; }
.rj-kluster { margin-bottom: 14px; font-size: 12.5px; color: var(--isl-600); }
.rj-isi { margin-bottom: 16px; font-size: 13.5px; color: hsl(158.571 12.069% calc(var(--l0) + var(--ls) * 22.745%)); line-height: 1.6; }
.rj-referensi { margin: 0; padding-left: 20px; font-size: 13.5px; color: hsl(158.571 12.069% calc(var(--l0) + var(--ls) * 22.745%)); line-height: 1.8; }
.rj-referensi li { margin-bottom: 4px; }
.rj-referensi li:last-child { margin-bottom: 0; }

/*
 * .td-judul-pengajuan -- sel Judul di baris judul ke-2/ke-3 (yang
 * rowspan No./Mahasiswa-nya dilewati) otomatis menjadi td:first-child
 * pada <tr>-nya sendiri, sehingga ikut kena aturan global "padding-left:
 * 1.25rem" (lihat blok .card .table > tbody > tr > td:first-child --
 * itu sebetulnya ditujukan utk kolom No., bukan Judul). !important di
 * sini memaksa sel Judul selalu memakai padding table-sm baku, supaya
 * penomoran 1./2./3. persis sejajar di semua barisnya.
 */
td.td-judul-pengajuan { padding-left: .3rem !important; }

/*
 * Bug yang sama dgn .td-judul-pengajuan di atas, muncul lagi di tabel
 * Offering Mata Kuliah & kedua tabel Rekap: baris ke-2/ke-3 dst dalam satu
 * kelompok rowspan (huruf kelas lain / mata kuliah lain milik dosen yang
 * sama) melewati sel Kode MK/Mata Kuliah/No./Nama Dosen yang dirowspan,
 * jadi sel Kelas (Offering) atau Mata Kuliah (Rekap) otomatis jadi
 * td:first-child pada baris itu & ikut kena padding-left:1.25rem yang
 * sebetulnya utk kolom PALING KIRI sungguhan -- bikin baris breakdown
 * kelihatan menjorok ke kanan drpd baris pertamanya.
 */
td.kolom-kelas-offering,
td.kolom-mk-rekap { padding-left: .3rem !important; }

/*
 * Bug yang sama lagi di Grid Jadwal (Penyusunan Jadwal): kolom Jam
 * dirowspan 7x (satu per baris Ruang), jadi baris Ruang ke-2..7 tiap
 * kelompok Jam otomatis menjadikan sel Ruang sbg td:first-child & ikut
 * kena padding-left:1.25rem yang sebetulnya utk kolom paling kiri
 * sungguhan -- angka Ruang jadi tidak center thd kolom "Ruang" di header.
 */
td.kolom-ruang-jadwal { padding-left: .3rem !important; }

/*
 * Grid Jadwal: kotak slot per mata kuliah py padding kanan-bawah lebih
 * lega utk menampung ikon hapus yg diposisikan mengambang di pojok
 * kanan-bawah kotak (bukan nempel sebaris dgn teks Semester/Kelas spy
 * tidak keliru dipencet & tidak menyempitkan lebar teks).
 */
/* Bar kartu statistik Offering -- MENGAMBANG di dasar kotak persis spt
   .kap-jalur (ukuran/posisi PERSIS sama, height:5px, bukan di alur normal
   body), pakai kelas kotak-angka-progres yg sama (padding-bottom+overflow
   hidden) supaya seluruh kartu statistik konsisten ukurannya. */

/* Perbandingan Mengajar -- SATU bar gradasi (bukan 2 blok kaku spt
   sebelumnya), hijau (DT) meluber ke kuning (DLB) dgn transisi lembut di
   titik proporsinya (var(--pct-dt)), pola sama dgn .kap-isi (gradasi
   linear-gradient), cuma titik potongnya proporsional bukan tetap 50%. */
.kap-jalur.bar-dt-dlb {
    background: linear-gradient(to right,
        #28a745 0%,
        #28a745 calc(var(--pct-dt, 50%) - 4%),
        #ffc107 calc(var(--pct-dt, 50%) + 4%),
        #ffc107 100%);
}

/* Proporsi DLB -- tetap bar ambang batas (bukan gradasi proporsional,
   krn maknanya beda: 3 KEADAAN diskret, bukan proporsi kontinu) -- hijau
   = sehat, kuning = perlu perhatian, merah = kritis. */
.bar-dua-warna { position: absolute; left: 0; right: 0; bottom: 0; display: flex; height: 5px; overflow: hidden; background: var(--isl-100); }
.bar-dua-warna > div { height: 100%; }
.bar-dua-warna .bar-isi-hijau { background: #28a745; }
.bar-dua-warna .bar-isi-kuning { background: #ffc107; }
.bar-dua-warna .bar-isi-merah { background: #dc3545; }

/* Baris pemisah antar-kelompok di laman Dosen (Homebase / non-Homebase /
   DLB) -- lis diberi warna lembut penuh + ikon dalam kotak semi-bundar
   (setiap sudut melengkung), TIDAK memutus nomor urut (No. tetap mengalir
   lintas kelompok). */
.baris-pemisah-dosen td {
    padding: 8px 1.25rem !important;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: center;
    border-top: none;
    border-bottom: none;
    vertical-align: middle;
}
.baris-pemisah-non-homebase td { background: hsl(145.714 46.667% calc(var(--l0) + var(--ls) * 94.118%)); color: #1E7E34; }
.baris-pemisah-dlb td { background: hsl(46.000 100.000% calc(var(--l0) + var(--ls) * 94.118%)); color: #8A6D00; }

.ikon-pemisah-dosen {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 30%;
    margin-right: 6px; vertical-align: middle; font-size: 11px;
}
.baris-pemisah-non-homebase .ikon-pemisah-dosen { background: hsl(122.000 37.500% calc(var(--l0) + var(--ls) * 84.314%)); color: #1E7E34; }
.baris-pemisah-dlb .ikon-pemisah-dosen { background: #FFE9A8; color: #8A6D00; }

/*
 * Nama dosen di grid Jadwal -- hijau tua utk dosen Homebase. Hijau muda
 * (non-Homebase) dan kuning (DLB) yang lama SENGAJA diganti (permintaan
 * Bapak): keduanya buram/kurang terbaca di layar sungguhan -- non-
 * Homebase jadi biru tua, DLB jadi kuning tua yang lebih gelap (dipakai
 * sama dgn .baris-pemisah-dlb di laman Dosen, #8A6D00, supaya satu
 * warna "kuning tua" konsisten di seluruh aplikasi).
 */
.teks-dosen-homebase { color: #1e5f37; font-weight: 600; }
.teks-dosen-luar-homebase { color: #1B4F72; }
.teks-dosen-dlb { color: #8A6D00; }

.baris-slot-jadwal { position: relative; padding: 2px 16px 2px 0; }
.baris-slot-jadwal .tautan-hapus-slot-jadwal {
    position: absolute; right: 0; bottom: 2px; color: hsl(210.000 10.811% calc(var(--l0) + var(--ls) * 70.980%)); font-size: 10px;
}
.baris-slot-jadwal .tautan-hapus-slot-jadwal:hover { color: #dc3545; }

/*
 * Kartu slot mata kuliah di Grid Jadwal -- perombakan tampilan
 * (permintaan Bapak, "biar lebih keren"):
 *
 * - .judul-mk diberi min-height SENGAJA cukup utk DUA baris (bukan
 *   satu), supaya .meta-mk di bawahnya SELALU mulai di posisi yang
 *   sama persis pada SEMUA kolom Jam -- entah judul mata kuliah di
 *   kolom itu kebetulan satu baris atau dua baris. Tanpa ini, kolom
 *   yang judulnya pendek akan punya meta lebih naik daripada kolom yang
 *   judulnya panjang, dan barisan info dosen/sks/semester/kelas jadi
 *   tidak sejajar dipandang sepintas.
 * - line-height judul disetel eksplisit (bukan mengikuti bawaan yang
 *   jomplang) supaya jarak antar baris rapi saat judul memang dua baris.
 * - ikon di depan tiap baris meta (fa-user-graduate utk dosen,
 *   fa-layer-group utk sks/semester/kelas) TIDAK diberi font-size
 *   sendiri -- ukurannya ikut ukuran teks di sekelilingnya (bawaan
 *   ikon berbasis fon).
 */
.judul-mk {
    display: block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    min-height: 2.5em;
}
.meta-mk { margin-top: 1px; }
.meta-mk > span { line-height: 1.35; }
/*
 * .ikon-meta -- ikon kecil di depan baris rincian mata kuliah (dosen,
 * sks/kelas). Dipakai pertama di kartu penyusunan jadwal (.meta-mk di
 * app/Views/perkuliahan/jadwal.php); kartu "Jadwal Mengajar Minggu
 * Ini" di Beranda dosen (.bjd-meta, REVISI 328 lanjutan) memakai ikon
 * yang sama persis agar bahasa visualnya seragam antar dua laman.
 */
.meta-mk .ikon-meta, .bjd-meta .ikon-meta { width: 1.1em; text-align: center; margin-right: 6px; opacity: .8; }

/*
 * Kotak kosong (belum ada Offering di slot Hari+Jam+Ruang itu) --
 * tanda "--" rata kiri, posisi tengah sel secara vertikal (permintaan
 * Bapak; semula strip garis, diganti tanda ini spy lebih jelas terbaca
 * sbg "kosong", bukan sisa render). Sel-nya sendiri yg diberi
 * vertical-align:middle (lihat class align-middle yg ditambahkan
 * kondisional pd <td> saat $isi kosong) -- .slot-kosong ini sendiri
 * cukup rata kiri spt teks biasa.
 */
.slot-kosong {
    display: block;
    text-align: left;
    color: hsl(152.727 5.759% calc(var(--l0) + var(--ls) * 62.549%));
    font-size: 13px;
}

/*
 * Baris pemisah antar-hari di Grid Jadwal -- baris <tr> ekstra (bukan
 * border biasa) supaya garisnya menyambung utuh sepanjang lebar tabel,
 * tidak terpotong-potong per sel spt kalau pakai border-image per <td>.
 * Gradasi kuning tua->hijau tua yg semula dipakai kurang pas dipandang
 * (permintaan Bapak) -- diganti hijau tua polos, senada dgn warna dosen
 * Homebase (.teks-dosen-homebase) supaya satu warna hijau konsisten.
 * Tingginya 2px -- sedikit lebih tebal drpd garis tabel biasa (1px),
 * tapi sengaja tidak lebih dari itu supaya tidak mengganggu.
 * opacity .5 -- warnanya semula terlalu menonjol dibanding garis tabel
 * lain di sekitarnya (permintaan Bapak), diredupkan spy menyatu.
 *
 * Selector ditulis SELENGKAP ".card .table.table-sm > tbody > tr..." --
 * bukan cuma "tr.baris-pemisah-hari td" -- sebab aturan padding baris
 * table-sm di atas (.card .table.table-sm > tbody > tr > td, sel. 0-3-3)
 * lebih spesifik drpd versi pendeknya (sel. 0-1-2) dan MENANG, membuat
 * padding-top/bottom .5rem ikut menumpuk di baris ini -- itu penyebab
 * garisnya kelihatan sangat tebal sebelum diperbaiki di sini.
 */
.card .table.table-sm > tbody > tr.baris-pemisah-hari > td {
    height: 2px;
    padding: 0;
    border: 0;
    background: #1e5f37;
    opacity: .5;
}

/*
 * .baris-kasus-hover -- disorot lewat JS (bukan :hover CSS bawaan),
 * sebab sel Nama/No. dirowspan dari baris judul pertama sehingga tidak
 * ikut tersorot kalau hanya mengandalkan table-hover per-<tr>. Dengan
 * ini, seluruh baris milik satu kasus mahasiswa (Nama, semua judul,
 * kolom PA/Prodi) tersambung abu-abu muda saat kursor diarahkan ke
 * bagian mana pun dari kasus itu.
 */
tr.baris-kasus-hover > td { background-color: hsl(150.000 18.182% calc(var(--l0) + var(--ls) * 95.686%)); }

/*
 * .baris-kasus-genap -- selang-seling putih/abu tipis ANTAR KASUS
 * (bukan antar baris judul di dalam satu kasus, yang tetap sewarna)
 * supaya tiap mahasiswa mudah dibedakan saat dipindai turun tabel.
 * Spesifisitas sengaja lebih rendah dari .baris-kasus-hover supaya
 * hover tetap menang menimpa baik yang genap maupun ganjil.
 */
.baris-kasus-genap > td { background-color: hsl(150.000 7.143% calc(var(--l0) + var(--ls) * 94.510%)); }

/*
 * .th-palu-kepala / .palu-kepala -- PORTAL DOSEN (PA) SAJA: tombol
 * "Putuskan" (palu) menyatu di kepala kolom "Rekom. PA"; judul kolom
 * tetap rata tengah, tombol palu dipatok di tepi kanan sel kepala itu,
 * sejajar ujung kanan baris-baris judul. Tampilan Prodi tidak memakai ini.
 */
.th-palu-kepala { position: relative; }
.palu-kepala {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.5;
}

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

/*
 * Pil berisi IKON SAJA (tombol "buka situs publik di tab baru", di kiri
 * pemilih periode). Angkanya DIUKUR dari pil di sebelahnya, bukan
 * dikira-kira: pil periode, saklar mode, dan Akunku ketiganya setinggi
 * 40px. Lebarnya disamakan dengan tinggi itu supaya benar-benar bulat,
 * bukan lonjong. Jarak antar pil tetap 8px (margin-right diwarisi dari
 * .penanda-peran) -- sama dengan jarak periode ke saklar mode dan saklar
 * mode ke Akunku; sudah dihitung ulang, ketiganya persis 8,0px.
 */
.penanda-ikon {
    width: 40px;
    padding: .5rem 0 !important;
    justify-content: center;
}
.penanda-ikon i { font-size: 13px; opacity: .85; }

/*
 * Saklar mode terang/gelap. DULU ia sengaja bukan .penanda-peran: tanpa
 * latar pil, cuma ikon -- lingkarannya hanya muncul saat kursor lewat,
 * lalu hilang lagi begitu klik berpindah ke tempat lain (dilaporkan
 * Bapak, 24 Sep). Sekarang ia memakai pil yang sama dengan pemilih
 * periode dan tombol buka-situs, jadi lingkarannya tetap terlihat.
 *
 * margin-right 8px kini diwarisi dari .penanda-peran, tidak lagi perlu
 * ditulis sendiri di sini.
 */

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: hsl(156.923 15.294% calc(var(--l0) + var(--ls) * 16.667%)); line-height: 1.3; }
.akun-level { font-size: 12px; color: hsl(160.000 6.550% calc(var(--l0) + var(--ls) * 44.902%)); margin-top: 2px; }

/*
 * BARU REVISI 232 -- dua baris menu di bawah kepala ("Ganti kata
 * sandi" dan "Keluar", di navbar.php DAN siswa.php, markupnya sama
 * persis) sebelumnya memakai ukuran huruf bawaan Bootstrap
 * (.dropdown-item, lebih besar dari .akun-nama di atasnya) dan rata
 * kiri. Permintaan Bapak: dikecilkan mengikuti ukuran nama akun
 * (.akun-nama = 14.5px persis di atas), dan diposisikan tengah --
 * ikon (kunci utk Ganti Kata Sandi, panah keluar utk Keluar) ikut
 * pindah ke tengah bersama teksnya sebab keduanya satu baris teks
 * inline yang sama, text-align:center memindahkan ikon+teks sebagai
 * satu kesatuan, bukan cuma tulisannya saja.
 */
.akun-menu .dropdown-item { font-size: 14.5px; text-align: center; }

/* --------------------------------------------------------- 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.
 */
/*
 * REVISI 238 -- menu Pengaturan tidak terjangkau di hape (dilaporkan
 * Bapak): AdminLTE mematok <aside class="main-sidebar"> setinggi
 * `height:100vh` (plus overflow-y:hidden pada kotak luarnya). SEBAB
 * SAMA PERSIS dengan kartu login yang dulu terpotong (lihat catatan
 * panjang "100dvh" di .laman-masuk) -- "100vh" di kebanyakan peramban
 * hape dihitung dari tinggi layar TERBESAR yang mungkin (seolah bilah
 * alamat/bilah bawah peramban sudah tersembunyi), padahal saat sidebar
 * baru dibuka bilah itu masih tampil, sehingga kotak sidebar-nya lebih
 * tinggi dari ruang yang BENAR-BENAR terlihat. Bagian paling bawah
 * (tempat menu Pengaturan berada) jadi tertutup bilah peramban itu
 * sendiri, dan sebab kotak luarnya position:fixed, tidak ada cara
 * menggulirnya ke sana -- mentok, persis seperti dilaporkan.
 *
 * PERBAIKAN SUSULAN -- "100dvh" (dynamic viewport height) TERNYATA
 * belum cukup (dilaporkan Bapak): dvh itu HIDUP, dihitung ULANG setiap
 * kali bilah alamat peramban muncul/tenggelam. Menyeka ke atas membuat
 * peramban menyembunyikan bilah alamatnya sesaat -- sidebar yang
 * dipatok dvh ikut MEMBESAR mengikuti ruang yang baru saja lebih luas
 * itu (Pengaturan sesaat kelihatan), tapi begitu jari dilepas dan bilah
 * alamat muncul lagi, sidebar ikut MENGECIL kembali (Pengaturan
 * tertutup lagi). Cocok untuk laman biasa yang memang boleh sedikit
 * berubah tinggi (kartu login), tapi TIDAK cocok untuk sidebar yang
 * posisinya tetap dan isinya perlu ditekan dengan stabil.
 *
 * "100svh" (SMALL viewport height) tidak pernah berubah-ubah -- selalu
 * menganggap bilah peramban SEDANG TAMPIL (ukuran terkecil yang
 * mungkin), berapa pun sebenarnya yang tampil saat itu. Konsekuensinya
 * cuma sedikit ruang kosong tersisa di paling bawah kalau kebetulan
 * bilahnya sedang tenggelam -- jauh lebih baik daripada sidebar yang
 * naik-turun dan menutup-buka menu sendiri. Baris 100vh dan 100dvh di
 * atasnya dibiarkan sebagai cadangan berjenjang untuk peramban yang
 * belum kenal svh; peramban yang paham svh otomatis memakai baris
 * terakhir ini karena ditulis paling belakang. Menang atas aturan
 * bawaan AdminLTE (.main-sidebar polos) lewat kekhususan dua kelas
 * sekaligus (.sidebar-isl.main-sidebar), tanpa perlu !important.
 */
.sidebar-isl.main-sidebar {
    display: flex; flex-direction: column;
    height: 100vh;
    height: 100dvh;
    height: 100svh;
}
/*
 * REVISI 242 -- permintaan Bapak persis: "kunci dia, jangan
 * distatiskan (jangan ikut terbawa), taruh ukuran yang sekiranya bisa
 * untuk hape." Tiga percobaan sebelumnya (238 dvh, 239 svh, 240 JS
 * window.innerHeight) semuanya MENGUKUR tinggi jendela dalam satu
 * bentuk atau lain -- dan tinggi jendela di hape itu sendiri yang
 * berubah-ubah setiap kali Chrome menyembunyikan/memunculkan bilah
 * alamatnya, jadi sidebar ikut "terbawa" walau caranya berbeda-beda.
 *
 * Sekarang, KHUSUS layar hape (lebar 991px ke bawah -- di atas itu
 * tetap memakai vh/dvh/svh dari atas, sebab di komputer/laptop tidak
 * ada bilah alamat yang muncul-tenggelam, jadi tidak bermasalah),
 * tinggi sidebar TIDAK LAGI diukur dari apa pun -- dipatok angka
 * TETAP yang sengaja dilebihkan (1600px), jauh melebihi tinggi layar
 * hape mana pun yang wajar. Sidebar-nya posisinya tetap (fixed) dan
 * kotak luarnya overflow-y:hidden (lihat aturan bawaan AdminLTE),
 * jadi kelebihan 1600px itu HANYA memanjang ke luar layar yang
 * kelihatan -- tidak pernah menimbulkan bilah gulir, tidak pernah
 * kelihatan sama sekali. Berapa pun Chrome membesar/mengecilkan
 * jendelanya saat menggulir, angka 1600px ini TIDAK PERNAH ikut
 * berubah -- sidebar benar-benar terkunci, tidak lagi "terbawa".
 *
 * Isi menunya sendiri (kotak flex :.sidebar di bawah brand-link) tetap
 * mengambil tempat sesuai tingginya sendiri seperti biasa -- 1600px
 * ini cuma batas ATAS kotak pembungkusnya, bukan memaksa isinya
 * melar sampai sepanjang itu.
 *
 * REVISI 243 -- PERBAIKAN SUSULAN: gulir hilang sama sekali sesudah
 * revisi 242 (dilaporkan Bapak: "ini malah terkunci sama sekali tanpa
 * adanya skrol"). Sebabnya: kotak menu di dalam (.sidebar-isl .sidebar,
 * lihat aturan "flex: 1 1 auto" di bawah) diatur mengisi SISA ruang
 * kotak luarnya -- begitu kotak luar dipatok 1600px, kotak menu ini
 * ikut MELAR sampai +-1600px juga (jauh lebih tinggi daripada daftar
 * menunya sendiri). Padahal gulir (overflow-y:auto) cuma muncul kalau
 * ISI lebih panjang daripada KOTAKNYA -- begitu kotaknya sendiri sudah
 * dipaksa setinggi itu, syarat itu tidak pernah terpenuhi lagi, gulir
 * pun hilang sama sekali.
 *
 * Perbaikannya: kotak menu ini SEKARANG dibatasi max-height-nya sendiri
 * (angka tetap juga, BUKAN diukur dari jendela apa pun -- tetap sejalan
 * dengan permintaan Bapak "jangan ikut terbawa"), supaya tidak lagi
 * ikut melar mengikuti kotak luar yang sengaja dilebihkan itu. Kotak
 * LUAR (.main-sidebar) tetap 1600px seperti semula -- itu yang membuat
 * sidebar tidak lagi "terbawa" naik-turun bilah alamat Chrome. Kotak
 * DALAM (.sidebar, daftar menunya) yang sekarang dibatasi supaya gulir
 * di dalamnya berfungsi lagi seperti sedia kala.
 *
 * REVISI 244 -- PERBAIKAN SUSULAN LAGI: angka 760px di revisi 243
 * ternyata MASIH KETERLALU TINGGI (dilaporkan Bapak: kedipan sudah
 * hilang, tapi menu paling bawah tetap tidak kelihatan lagi).
 *
 * Sebabnya, baru disadari sekarang: sidebar ini posisinya "fixed" --
 * ia digambar menempel pada LAYAR (viewport), bukan pada laman yang
 * bisa digulir. Bagian kotak menu yang melebihi TINGGI LAYAR yang
 * benar-benar terlihat saat itu (bukan tinggi kotaknya sendiri) akan
 * selalu terpotong oleh tepi layar -- dan karena posisinya tetap,
 * bagian yang terpotong itu TIDAK PERNAH bisa digulir masuk ke layar,
 * betapa pun sering digulir. Jadi kalau kotak menu (760px) ternyata
 * lebih tinggi daripada ruang yang benar-benar tersisa di layar hape
 * Bapak (tinggi layar dikurangi tinggi bagian atas/brand), bagian
 * bawahnya (termasuk Pengaturan) akan selalu tersembunyi di luar
 * layar -- persis yang dilaporkan.
 *
 * Angka sekarang diturunkan jauh lebih aman (max-height: 420px) --
 * sengaja dipilih cukup kecil supaya HAMPIR PASTI muat sepenuhnya di
 * layar hape mana pun, bahkan yang paling kecil sekalipun dan bahkan
 * ketika bilah alamat maupun bilah navigasi Chrome sedang sama-sama
 * tampil (kondisi paling sempit). Konsekuensinya: di hape yang
 * layarnya lebih lega, mungkin ada sedikit ruang kosong di bawah
 * kotak menu sebelum ujung layar -- itu tidak masalah, cuma kosong,
 * bukan galat. Yang penting kotak menu ini sekarang PASTI seluruhnya
 * kelihatan di layar, sehingga gulir di dalamnya benar-benar bisa
 * menampilkan Pengaturan di paling bawah.
 */
@media (max-width: 991.98px) {
    .sidebar-isl.main-sidebar {
        height: 1600px;
    }
    .sidebar-isl .sidebar {
        max-height: 490px;
    }
}
.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: hsl(147.500 33.333% calc(var(--l0) + var(--ls) * 85.882%)); 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;
    /* REVISI 238 -- gulir dorongan (momentum) bawaan Safari iOS, supaya
       menyeret jari di dalam bilah menu terasa selancar menggulir laman
       biasa, bukan berhenti kaku begitu jari diangkat. */
    -webkit-overflow-scrolling: touch;
    /*
     * REVISI 241 -- kedipan sesaat di bawah sidebar saat bilah alamat
     * Chrome bersembunyi (dilaporkan Bapak): begitu daftar menu ini
     * mentok di ujung gulirannya, GERAKAN SISA menyeka jari "bocor" ke
     * laman di baliknya -- Chrome menafsirkannya sebagai perintah
     * menggulir laman dan menyembunyikan bilah alamatnya, yang memicu
     * jendela membesar sesaat dan memperlihatkan potongan laman di
     * bawah sidebar sebelum menetap lagi.
     *
     * "overscroll-behavior: contain" menghentikan gerakan sisa itu
     * TEPAT di batas sidebar -- begitu daftar menu mentok, sisa
     * gerakan tidak lagi diteruskan ke laman, jadi Chrome tidak lagi
     * terpicu menyembunyikan bilah alamatnya gara-gara menggulir di
     * dalam sidebar. Dukungan peramban jauh lebih luas dan lebih lama
     * daripada satuan dvh/svh yang sempat dicoba di revisi 238/239
     * (properti ini sudah ada sejak 2017), jadi tidak berisiko diabaikan
     * diam-diam seperti yang terjadi pada percobaan sebelumnya.
     */
    overscroll-behavior: contain;
}
.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: hsl(144.000 31.250% calc(var(--l0) + var(--ls) * 93.725%));
    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: hsl(151.034 26.126% calc(var(--l0) + var(--ls) * 78.235%));
    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: hsl(144.000 31.250% calc(var(--l0) + var(--ls) * 93.725%));
    font-size: 13.5px;
    padding: 10px 12px;
}
.menu-isl > .nav-item > .nav-link.active:not(.tombol-induk) {
    background: var(--isl-600);
    color: #fff;
}

/*
 * Pembatas visual DI DALAM satu grup (mis. "E-Learning"/"CBT" di dalam
 * Pelaksanaan Perkuliahan) -- permintaan Bapak: label kecil, italic,
 * diapit bintang, kiri-kanannya garis sepanjang lebar menu. SENGAJA
 * bukan .nav-link (tidak bertaut ke mana pun) supaya tidak ikut kena
 * gaya hover/active baris menu biasa.
 *
 * REVISI (permintaan Bapak): digeser ke kiri -- garis KIRI sengaja
 * dibuat pendek dengan lebar TETAP (bukan flex:1 spt garis kanan),
 * dihitung supaya bintang kiri mulai TEPAT presisi dgn ikon anak menu
 * di bawahnya (.nav-treeview > .nav-item > .nav-link .nav-icon, yang
 * mulai 27.8px dari tepi kiri .nav-treeview -- diukur langsung lewat
 * getBoundingClientRect(), bukan agakan). Garis kanan tetap flex:1,
 * mengisi sisa lebar menu sampai ujung kanan.
 */
.menu-pembatas { padding: 6px 12px 3px; }
.menu-isl .nav-treeview > .menu-pembatas:first-child { padding-top: 4px; }
.pembatas-baris {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pembatas-garis {
    height: 1px;
    background: rgba(255, 255, 255, .18);
}
.pembatas-garis:first-child { flex: 0 0 10px; }
.pembatas-garis:last-child { flex: 1 1 auto; }
.pembatas-teks {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-style: italic;
    font-weight: 400;
    color: rgba(255, 255, 255, .55);
    white-space: nowrap;
    letter-spacing: .02em;
}
.pembatas-bintang { font-size: 7px; color: rgba(255, 255, 255, .4); vertical-align: 1px; }

/* 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-pembatas { 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: hsl(150.000 18.182% calc(var(--l0) + var(--ls) * 95.686%)); }
.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; }

/*
 * .btn-kartu-konsul -- tombol "Isi kartu Konsul" di bawah kartu Ringkasan
 * laman Bimbingan (portal dosen). Permintaan Bapak: gradasi Hijau->Hitam,
 * dengan garis pinggir putih DI DALAM tombol (inset box-shadow, bukan
 * border, supaya tidak menambah lebar kotak). GARIS ITU KINI DICABUT --
 * Bapak: "mungkin itu maksudnya memberi distingsi. namun, bagi saya itu
 * tidak penting. hilangkan saja." Padding-nya sengaja DIBIARKAN apa
 * adanya: ia sudah jadi tinggi tombol yang dikenal, dan menyempitkannya
 * sekarang berarti mengubah hal yang tidak diminta.
 */
.btn-kartu-konsul {
    display: block;
    width: 100%;
    margin-top: .75rem;
    padding: .6rem .9rem;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    color: #fff;
    border: 0;
    border-radius: 8px;
    /* Gradasi DIPATOK, tidak ikut mode. Di mode gelap dulu ada DUA yang
       terbalik sekaligus: ujung hitamnya (kroma nol) menjadi putih, DAN
       var(--isl-900) di tengahnya menjadi terang karena peran nada 900
       dibalik jadi teks terang -- teks putih tombol ini pun hilang.
       Bapak: "sebaiknya gradasi tetapkan saja hitam." */
    background: linear-gradient(135deg, #1D9E75 0%, #064136 45%, #0b0b0b 100%);
}
.btn-kartu-konsul:hover,
.btn-kartu-konsul:focus {
    /* Hijau muda saat dikursor (permintaan Bapak: "putih asli, hijau
       saat dikursor") -- 9,80:1 di atas ujung gelap gradasi. */
    color: #5DCAA5;
    text-decoration: none;
    filter: brightness(1.08);
}

/*
 * .rincian-konsul -- daftar identitas kepala laman Kartu Konsul. Label
 * di kolom max-content, titik dua didorong ke tepi kanan kolom itu
 * (margin-left:auto) sehingga SEMUA titik dua sejajar persis di satu
 * garis vertikal, berapa pun panjang labelnya.
 */
.rincian-konsul {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: .5rem;
    row-gap: .2rem;
    margin: 0;
    font-size: .875rem;
}
.rincian-konsul dt { display: flex; font-weight: 600; white-space: nowrap; }
.rincian-konsul dt::after { content: ":"; margin-left: auto; padding-left: .75rem; }
.rincian-konsul dd { margin: 0; }

/* Isi Materi Konsultasi (HTML dari editor) di sel tabel -- kembalikan
   indent daftar & jarak paragraf yang di-nol-kan reboot dalam tabel. */
.materi-konsul p { margin: 0 0 .3rem; }
.materi-konsul p:last-child { margin-bottom: 0; }
.materi-konsul ol,
.materi-konsul ul { margin: 0; padding-left: 1.2rem; }

/* Kotak signature pad + gambar TTD di tabel -- laman Kartu Konsul */
.kotak-ttd {
    display: inline-block;
    max-width: 100%;
    border: 1px solid var(--isl-100);
    border-radius: 6px;
    background: var(--permukaan);
    padding: 4px;
}
.kanvas-ttd { display: block; touch-action: none; cursor: crosshair; }
/* Baris alat di BAWAH kotak TTD -- tombol Bersihkan + keterangan, sejajar. */
.ttd-alat {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .4rem;
    font-size: .75rem;
}
.ttd-alat .btn { flex: none; }
/* TTD tersimpan di tabel -- PNG transparan, TANPA latar/bingkai sendiri
   supaya menyatu dgn baris (ikut abu-abu saat baris di-hover, bukan
   kotak putih yang terkesan ber-latar). */
.gambar-ttd {
    display: block;
    max-width: 150px;
    height: 52px;
    object-fit: contain;
    object-position: left center;
}

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: var(--permukaan); border: .5px solid var(--isl-100); position: relative; }

/*
 * Bar progres SEBAGAI footer kotak (bukan elemen terpisah di bawahnya) --
 * menempel presisi di tepi bawah kotak, ikut sudut membulatnya, lewat
 * position:absolute + overflow:hidden pada induknya.
 */
.kotak-angka-progres { padding-bottom: 22px; overflow: hidden; }
/*
 * .kotak-angka-ringkas -- BARU REVISI 277, kartu Persentase Kluster
 * Judul (Iktishar) sejak jadi separuh lebar (sebaris dgn Persentase
 * Tahap Alur Skripsi, permintaan Bapak). Padding & angka diperkecil
 * supaya 2-3 kotak tetap muat rapi dalam ruang yang lebih sempit,
 * bukan mepet/tumpang tindih.
 */
.kotak-angka-ringkas { padding: 12px 14px 22px; }
.kotak-angka-ringkas .angka { font-size: 20px; }
/*
 * BARU REVISI 278 -- dulu label-kluster cuma MIN-height (2.4em), jadi
 * label panjang (mis. "Ilmu Pemerintahan, Birokrasi & Kebijakan
 * Publik", 3 baris di lebar sesempit ini) tetap mendorong tinggi kotak
 * lebih jauh dari label pendek ("Belum Berkluster", 1 baris) -- angka
 * persenannya jadi naik-turun antar kotak. Permintaan Bapak: "ukurannya
 * ditetapkan sehingga angka persenan tidak naik turun" -- height TETAP
 * (bukan min-height lagi), disiapkan utk 3 baris (label terpanjang yang
 * ada), overflow:hidden membuang sisa kalau kelak ada nama kluster yang
 * lebih panjang lagi -- posisi angka jadi TERKUNCI sama persis di
 * seluruh kotak, apa pun jumlah baris label sesungguhnya.
 */
.kotak-angka-ringkas .label-kluster { font-size: 11.5px; height: 3.6em; min-height: 0; overflow: hidden; }
.kap-jalur { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--isl-100); }
/*
 * Gradasi kuning->hijau di titik 50% -- gradiennya digambar relatif
 * terhadap lebar PENUH jalur (bukan terhadap lebar isinya sendiri),
 * lalu clip-path menyingkap cuma sebagian sepanjang persentase progres.
 * Kalau warnanya ditaruh langsung di elemen isi yang lebarnya berubah-
 * ubah, gradiennya akan meregang ulang tiap kali persen berubah alih-
 * alih tetap di titik 50% yang sama -- itu sebabnya bukan cuma
 * background+width biasa.
 */
.kap-isi {
    height: 100%; width: 100%;
    background: linear-gradient(to right, #ffc107 0%, #ffc107 46%, var(--isl-500) 54%, var(--isl-500) 100%);
    clip-path: inset(0 var(--kap-sisa, 100%) 0 0);
}
.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: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }

/*
 * .label-kluster -- label kluster (Persentase Kluster Judul, Iktishar)
 * dikunci tingginya PERSIS 2 baris (bukan mengikuti panjang tulisan
 * sendiri-sendiri), rata BAWAH -- supaya kartu tidak naik-turun ikut
 * panjang nama kluster, dan angka persentase di bawahnya selalu
 * sejajar persis di seluruh kartu terlepas label itu 1 atau 2 baris.
 */
.label-kluster { min-height: 2.6em; line-height: 1.3; display: flex; align-items: flex-end; }

/*
 * .grafik-batang-tahap -- BARU (kartu "Persentase Tahap Alur Skripsi",
 * Iktishar), permintaan Bapak: "grafik ... dalam bentuk bar" -- beda
 * bentuknya dari .kap-jalur/.kap-isi tipis di kartu Persentase Kluster
 * di sebelahnya (yang itu garis tipis di kaki kotak statistik), ini
 * BATANG sendiri per baris (label kiri, batang tengah, angka kanan) --
 * bentuk grafik batang yang lebih lazim dikenal.
 */
.grafik-batang-tahap { display: flex; flex-direction: column; gap: 14px; }
.baris-batang-tahap { display: flex; align-items: center; gap: 8px; }
.baris-batang-tahap .label-batang-tahap { width: 128px; flex: none; font-size: 11.5px; color: var(--isl-800); }
.baris-batang-tahap .jalur-batang-tahap { position: relative; flex: 1 1 auto; height: 14px; border-radius: 7px; background: var(--isl-050); overflow: hidden; }
/*
 * BARU REVISI 277 -- dulu warna batang polos var(--isl-600) (hijau
 * rata, beda dari elemen progres lain di aplikasi ini). Permintaan
 * Bapak: "barnya berwarna tetap konsisten, gradasi kuning dan hijau"
 * -- disamakan dgn pola .kap-isi persis di sebelahnya (kartu Persentase
 * Kluster Judul): gradien digambar relatif LEBAR PENUH jalur lewat
 * elemen absolute+clip-path, bukan langsung width:X% pada elemen isi
 * sendiri -- supaya titik transisi kuning->hijau tetap di tengah jalur
 * yang sama, tidak ikut meregang tiap persentase berbeda (lihat catatan
 * panjang di .kap-isi soal alasan yang sama persis).
 */
.baris-batang-tahap .isi-batang-tahap {
    position: absolute; inset: 0; width: 100%;
    background: linear-gradient(to right, #ffc107 0%, #ffc107 46%, var(--isl-500) 54%, var(--isl-500) 100%);
    clip-path: inset(0 var(--sisa-batang-tahap, 100%) 0 0);
    transition: clip-path .3s;
}
.baris-batang-tahap .angka-batang-tahap { width: 62px; flex: none; text-align: right; font-size: 11.5px; color: var(--isl-800); }

@media (max-width: 575.98px) {
    .baris-batang-tahap { flex-wrap: wrap; }
    .baris-batang-tahap .label-batang-tahap { width: 100%; }
    .baris-batang-tahap .angka-batang-tahap { width: auto; }
}

/*
 * .label-kesiapan/.angka-kesiapan/.kap-jalur-kesiapan/.kap-isi-kesiapan
 * -- BARU REVISI 280, kartu "Kesiapan Persiapan Perkuliahan" (Beranda).
 * Bar tipis gaya SAMA PERSIS .kap-jalur/.kap-isi (kartu Persentase
 * Kluster Judul, Ikhtisar), cuma dibuat versi BUKAN position:absolute
 * -- di sana jalurnya menempel di footer kotak (posisi tetap thd
 * induk), di sini tiga indikator berjejer dalam SATU kartu jadi
 * jalurnya perlu ikut alur normal (relative), bukan menumpuk di footer
 * kartu bersama.
 */
.label-kesiapan { font-size: 12px; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.angka-kesiapan { font-size: 20px; font-weight: 700; color: var(--isl-800); line-height: 1.25; }
.angka-kesiapan .fa-check-circle { color: var(--isl-500); margin-right: 4px; }
/* BARU REVISI 284 -- dipertebal dari 5px (permintaan Bapak: "garis-garis
   bar itu maksud saya, masih terlalu tipis", kartu "Persiapan Perkuliahan"). */
.kap-jalur-kesiapan { position: relative; height: 9px; border-radius: 5px; background: var(--isl-100); overflow: hidden; margin: 8px 0 6px; }
.kap-isi-kesiapan {
    position: absolute; inset: 0; width: 100%;
    background: linear-gradient(to right, #ffc107 0%, #ffc107 46%, var(--isl-500) 54%, var(--isl-500) 100%);
    clip-path: inset(0 var(--sisa-kesiapan, 100%) 0 0);
}

/*
 * .donut-* -- BARU REVISI 281, kartu "Progres Alur Skripsi" (Beranda),
 * permintaan Bapak: "progres bimbingan skripsi pakai grafik bundar".
 * Lingkaran pakai conic-gradient() murni CSS (bukan library/JS/SVG) --
 * lubang tengah (.donut-lubang) sekadar lingkaran putih lebih kecil
 * DITUMPUK di atasnya, teknik "donut dari pie" paling ringan tanpa
 * mask/clip-path tambahan.
 */
.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut-lingkaran {
    /* BARU REVISI 283 -- diperbesar lagi dari 158px (permintaan Bapak:
       "pienya diperbesar dalam arti ukurannya buka ketebalannya") --
       REVISI 282 menaikkan outer 128->158 (+30) TAPI lubang cuma
       74->92 (+18), jadi ketebalan cincin ikut membesar 27px->33px,
       bukan tetap spt niat awal. Kali ini outer naik lagi ke 190px
       TAPI lubang ikut naik PERSIS SAMA (+32, 92->124) supaya
       ketebalan cincin TETAP 33px, cuma diameternya yang membesar. */
    width: 190px; height: 190px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
}
.donut-lubang {
    width: 124px; height: 124px; border-radius: 50%; background: var(--permukaan);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donut-total { font-size: 25px; font-weight: 700; color: var(--isl-800); line-height: 1; }
.donut-total-label { font-size: 10px; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); text-align: center; margin-top: 2px; }
.donut-legenda { flex: 1 1 160px; min-width: 160px; display: flex; flex-direction: column; gap: 9px; }
.baris-legenda-donut { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.titik-legenda-donut { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.teks-legenda-donut { flex: 1; color: var(--isl-800); }
.angka-legenda-donut { flex: none; text-align: right; }

/*
 * .bungkus-grafik-garis dkk -- BARU REVISI 282, kartu "Distribusi
 * Angkatan Mahasiswa" & "Tren Kelulusan per Tahun" (Beranda),
 * permintaan Bapak: "distribusi per angkatan pakai line chart... tren
 * kelulusan pakai chart line chart" (gantikan grafik batang/kolom
 * REVISI 280-281). Lihat docblock app/Views/beranda/_grafik_garis.php
 * utk penjelasan lengkap kenapa titik & angka DITUMPUK sbg elemen HTML
 * biasa di atas SVG (bukan elemen SVG), bukan sekadar gaya.
 */
/*
 * .baris-sumbu-grafik-garis dkk -- BARU REVISI 283 (kartu "Tren
 * Kelulusan per Tahun" saja mulai revisi ini, "Distribusi Angkatan"
 * baIik jadi bar lagi): permintaan Bapak persis "ada indikator di
 * samping kiri, diikuti garis garis tipis sepanjang kartu, baru
 * linenya berambat. itu seperti tampilan linechart pada umumnya" --
 * jadi sumbu-Y (angka skala) di kiri + garis kisi horizontal
 * sepanjang lebar plot, DI BAWAH garis data.
 */
.baris-sumbu-grafik-garis { display: flex; margin-top: 14px; }
.sumbu-grafik-garis { position: relative; width: 26px; flex: none; height: 130px; }
.tanda-sumbu-grafik-garis {
    position: absolute; right: 4px; transform: translateY(-50%);
    font-size: 10px; color: hsl(163.333 8.824% calc(var(--l0) + var(--ls) * 60.000%)); white-space: nowrap;
}
.bungkus-grafik-garis { position: relative; flex: 1 1 auto; height: 130px; min-width: 0; }
/* BARU REVISI 285 -- dipertebal dari 1px + warna dipertegas dari --isl-050
   (permintaan Bapak: "garis garis yang mengiringi angka bar di sebelah
   kiri ... terlalu tipis"). */
.kisi-grafik-garis { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--isl-100); }
.svg-grafik-garis { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.svg-grafik-garis polyline {
    /* BARU REVISI 284 -- dipertebal dari 2.4 (permintaan Bapak: "garis
       di line chart terlalu tipis pertebal sedikit agar lebih jelas"). */
    fill: none; stroke: var(--isl-500); stroke-width: 3.2;
    stroke-linejoin: round; stroke-linecap: round;
}
.titik-grafik-garis {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    background: var(--isl-800); transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2.5px #fff;
}
.angka-grafik-garis {
    position: absolute; transform: translate(-50%, calc(-100% - 8px));
    font-size: 11px; font-weight: 700; color: var(--isl-800); white-space: nowrap;
}
.label-grafik-garis { display: flex; justify-content: space-between; margin-top: 4px; padding: 0 1px; font-size: 11px; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); }

/*
 * .kesiapan-tumpuk/.baris-kesiapan -- BARU REVISI 282, kartu "Kesiapan
 * Persiapan Perkuliahan" sejak jadi separuh lebar (sebaris dgn Progres
 * Alur Skripsi, permintaan Bapak) -- 3 indikator BERTUMPUK (dulu
 * col-md-4 sejajar, terlalu sesak di kartu sesempit ini).
 */
.kesiapan-tumpuk { display: flex; flex-direction: column; gap: 16px; }
.baris-kesiapan:not(:last-child) { padding-bottom: 16px; border-bottom: .5px solid var(--isl-100); }

/*
 * .kolom-peta -- kolom Penguji/Waktu/Ruang di borang Jadwalkan Ujian
 * (peta menyeluruh satu sesi) mulai REDUP sampai baris mahasiswa itu
 * dicentang -- bukan disembunyikan total (field tetap ada di DOM &
 * tetap terkirim kalau kebetulan sudah diisi lalu batal dicentang,
 * TAPI server hanya memproses baris yang benar masuk mahasiswa[]),
 * cuma dijelaskan begitu baris itu dipilih supaya urutan "pilih dulu,
 * baru peta muncul" tetap terasa tanpa geser-geser tata letak tabel.
 */
.baris-peta td.kolom-peta { opacity: .3; transition: opacity .15s ease; }
.baris-peta.terpilih td.kolom-peta { opacity: 1 !important; }

/*
 * .lingkaran-nomor -- lencana bundar kecil "1"/"2" di depan label
 * Pembimbing (kartu Judul & Pembimbing, Ikhtisar mahasiswa), pengganti
 * penomoran yang dulu nempel di teks label ("Pembimbing 1") jadi
 * penanda visual bundar -- konsisten dengan penomoran judul di
 * Pengajuan Judul.
 */
.lingkaran-nomor {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--isl-700); color: #fff; font-size: 9px; font-weight: 700;
    margin-right: 5px; text-transform: none; letter-spacing: normal;
}

/*
 * .bar-meta-judul -- satu bar kecil di bawah judul (Tentukan Pembimbing)
 * menandai apakah judul itu sudah di-ACC PA dan Prodi, sebelum bar
 * progres di bawahnya. .progres-tautan membungkus bar progres yang sama
 * (.kap-jalur/.kap-isi) sebagai TAUTAN ke laman Bimbingan -- pengganti
 * tombol "Pantau bimbingan" yang dulu terpisah di kolom Aksi, sekarang
 * bar progresnya sendiri yang diklik.
 */
.bar-meta-judul { display: flex; gap: 14px; margin-top: 5px; font-size: 10.5px; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); }
.bar-meta-judul i { font-size: 11px; margin-right: 3px; }
.progres-tautan {
    display: block; position: relative; height: 5px; margin-top: 6px;
    border-radius: 3px; overflow: hidden;
}
a.progres-tautan:hover .kap-jalur { background: var(--isl-200); }

/*
 * Versi mini -- disematkan DI DALAM baris judul yang diterima (Pengajuan
 * Judul mahasiswa), bukan sebagai kartu ringkasan terpisah di atasnya
 * (permintaan Bapak: dua kotak status PA/Prodi dianggap tidak berfaedah
 * berdiri sendiri -- lebih presisi kalau menempel pada judul yang benar
 * memang diputuskan).
 */
.kotak-angka-mini { padding: 8px 10px; }
.kotak-angka-mini .label { font-size: 10px; margin-bottom: 3px; }
.kotak-angka-mini .angka { font-size: 15px; }
.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;
}
/*
 * white-space:pre-line DICABUT -- teksnya sudah melalui nl2br() di
 * beranda/_header_card.php (mengubah tiap baris baru jadi <br>), dan
 * pre-line MEMBUAT peramban IKUT menganggap karakter baris-baru MENTAH
 * di baliknya sebagai jeda baris juga. Dua mekanisme jeda baris jalan
 * bersamaan berarti satu baris baru sungguhan (mis. "\r\n" hasil enter
 * di kotak isian) tercetak sebagai DUA jeda -- itu sebab pasti gejala
 * "baris dobel/jomplang" yang dilaporkan, pola sama seperti perbaikan
 * rich text CP dulu (dua mekanisme jeda baris bentrok). nl2br() SAJA
 * sudah cukup -- pola yang sama sudah lama dipakai aman di tempat lain
 * (.bu-teks, .isi-bahan) yang tidak pernah diberi white-space:pre-line.
 */
.hb-teks { font-size: 13.5px; color: hsl(160.000 12.857% calc(var(--l0) + var(--ls) * 27.451%)); line-height: 1.8; text-align: justify; }
.hb-teks-kosong { font-size: 13.5px; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); 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: hsl(160.000 12.857% calc(var(--l0) + var(--ls) * 27.451%)); line-height: 1.6; white-space: pre-line; }
.sambutan-kosong { font-size: 13.5px; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); 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, hsl(0.000 0.000% calc(var(--l0) + var(--ls) * 100.000%)) 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. REVISI 230 TIDAK mengembalikan plat
 * itu -- tetap tanpa bidang/border/latar di belakang logo, cuma
 * ukurannya yang disunting (lihat di bawah).
 *
 * DIUBAH REVISI 230 -- permintaan Bapak persis: logo di sini SUDAH
 * (sejak awal) mengambil berkas yang sama dengan kop yang diunggah di
 * tab "Kop & Pengesahan" (lihat PengaturanCetakModel::kopBerkas() di
 * auth/masuk.php, dipakai bersama seluruh naskah cetak) -- tidak ada
 * perubahan sumber berkas. Yang diubah UKURANNYA: max-width disamakan
 * dengan lebar kartu login di bawahnya (.kartu-masuk, mula-mula
 * disamakan 390px) supaya "sejalan" bukan cuma sejajar tengah tapi
 * juga sejajar lebar, dan max-height:100px (yang memaksa kop
 * menyusut/terpotong proporsinya) DICABUT -- height:auto murni, rasio
 * gambar tampil apa adanya, sama seperti pratinjau kop di tab "Kop &
 * Pengesahan" (_tab_kop.php, yang juga width:100%/height:auto tanpa
 * batas tinggi).
 *
 * DIKECILKAN REVISI 231 -- max-width diturunkan dari 390px (persis
 * lebar kartu) ke 300px atas permintaan Bapak ("saya ingin memperkecil
 * sedikit"), supaya logo tidak lagi selebar penuh kartu di bawahnya.
 * INI TEMPATNYA kalau lain kali Bapak ingin mengecilkan/membesarkan
 * lagi sendiri tanpa perlu minta tolong -- cukup ubah angka max-width
 * di baris di bawah ini (satu-satunya angka yang menentukan lebar
 * logo sekarang, sebab height:auto otomatis mengikuti rasio asli).
 */
.logo-masuk { width: 100%; max-width: 300px; height: auto; 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: var(--permukaan); 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-lembaga -- BARU REVISI 318. Nama lembaga dipecah ke barisnya
 * sendiri di kaki kartu Masuk saja (permintaan Bapak, "agar lebih
 * estetik"); kaki laman dalam tetap satu baris. Sedikit lebih tebal dari
 * baris di atasnya supaya nama lembaganya yang menonjol, bukan nama
 * aplikasinya. Ukuran & warna sengaja SAMA dengan .kaki-platform supaya
 * kedua baris terbaca sebagai satu blok, bukan dua keterangan terpisah.
 */
.kaki-lembaga { font-size: 11px; font-weight: 600; color: var(--isl-800); line-height: 1.4; margin: 1px 0 0; }
.kaki-versi { font-size: 10.5px; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); 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: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); 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: var(--permukaan);
}
.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 hsl(145.714 16.279% calc(var(--l0) + var(--ls) * 91.569%));
    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: var(--permukaan);
    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: hsl(42.581 100.000% calc(var(--l0) + var(--ls) * 93.922%));
    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.
   ===================================================================== */

/*
 * DIBATASI ke BARIS PERTAMA thead (tr:first-child). Sebelumnya berlaku
 * untuk setiap baris kepala, dan itu keliru pada kepala DUA BARIS.
 *
 * Contoh yang ditemukan Bapak di laman Pengajuan Judul: kepala baris 1
 * berisi "Status" ber-colspan 2, kepala baris 2 berisi "PA" dan
 * "Prodi". Karena keduanya kebetulan anak pertama dan anak terakhir di
 * barisnya, "PA" kena padding-left 20px dan "Prodi" kena padding-right
 * 20px -- padahal keduanya ada di TENGAH tabel, bukan di tepinya.
 * Akibatnya tulisan "PA" tergeser 7,6px ke kanan dan "Prodi" 7,6px ke
 * kiri terhadap titik tengah selnya, sementara ikon centang di bawahnya
 * tetap di tengah. Bapak: "posisi tulisan PA tidak presisi dengan
 * simbol centang disetujui di bawahnya ... ia agak ke kiri sedikit."
 *
 * Baris PERTAMA thead selalu membentang selebar tabel, jadi anak
 * pertama dan terakhirnya memang benar-benar di tepi. Baris kedua tidak
 * dijamin begitu -- karena itu ia tidak lagi ikut aturan ini.
 */
.card .table > thead > tr:first-child > 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:first-child > 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 (hsl(208.235 7.296% calc(var(--l0) + var(--ls) * 45.686%))) 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: hsl(204.000 5.208% calc(var(--l0) + var(--ls) * 62.353%)) !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 hsl(208.235 7.296% calc(var(--l0) + var(--ls) * 45.686%)) 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: hsl(207.692 6.047% calc(var(--l0) + var(--ls) * 57.843%));
    border-color: hsl(202.500 8.889% calc(var(--l0) + var(--ls) * 82.353%));
}
.card > .card-header > .aksi-kanan.btn-outline-secondary:hover,
.card > .card-header > .aksi-kanan .btn-outline-secondary:hover {
    color: #fff;
    background-color: hsl(207.692 6.047% calc(var(--l0) + var(--ls) * 57.843%));
    border-color: hsl(207.692 6.047% calc(var(--l0) + var(--ls) * 57.843%));
}

/* ---- 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: hsl(152.308 9.924% calc(var(--l0) + var(--ls) * 74.314%)); background: var(--permukaan); border-color: hsl(144.000 16.129% calc(var(--l0) + var(--ls) * 93.922%)); }

/* ---- 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: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%));
}

/* 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: hsl(154.286 12.069% calc(var(--l0) + var(--ls) * 22.745%));
}
.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: hsl(155.000 10.909% calc(var(--l0) + var(--ls) * 78.431%)); }

/* 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: hsl(150.000 16.667% calc(var(--l0) + var(--ls) * 88.235%)); 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: hsl(154.286 12.069% calc(var(--l0) + var(--ls) * 22.745%));
}
.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: hsl(154.286 12.069% calc(var(--l0) + var(--ls) * 22.745%));
}
.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 hsl(150.000 20.000% calc(var(--l0) + var(--ls) * 94.118%));
}
.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: hsl(158.824 10.429% calc(var(--l0) + var(--ls) * 31.961%)); }
.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
   ===================================================================== */

/*
 * ---- REVISI 211 -- tabel siswa & tabel guru mapel presisi segaris ----
 * table-layout:fixed memaksa lebar kolom mengikuti <colgroup> apa
 * adanya (bukan dihitung ulang dari isi tiap tabel) -- lihat catatan
 * panjang di kelas/kehadiran.php. Kepala tabel (thead) diberi warna
 * hijau sangat lembut sekadar penanda visual, permintaan Bapak.
 *
 * REVISI 212 -- min-width BARU (856px = jumlah keempat <col> di
 * kelas/kehadiran.php: 56+240+330+220+sedikit lebar batas sel).
 * Tanpa ini, di layar sempit (hape) width:100% memaksa peramban
 * MEMERAS keempat kolom supaya muat, sehingga kolom Catatan yang
 * paling longgar habis diperas duluan sampai cuma tersisa beberapa
 * huruf -- keluhan Bapak. Dengan min-width, tabel TIDAK PERNAH
 * menyempit di bawah lebar itu -- di hape, .table-responsive (bawaan
 * Bootstrap, div pembungkus tabel ini) yang mengambil alih lewat geser
 * (scroll) ke samping, bukan lagi memeras kolom.
 */
.tabel-kehadiran-presisi { table-layout: fixed; width: 100%; min-width: 856px; }
.kepala-kehadiran > th { background: hsl(147.692 44.828% calc(var(--l0) + var(--ls) * 94.314%)); }

/* ---- 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 hsl(150.000 16.667% calc(var(--l0) + var(--ls) * 88.235%));
    background: var(--permukaan);
    font-size: 12.5px;
    color: hsl(158.571 7.609% calc(var(--l0) + var(--ls) * 36.078%));
    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; }
/* .hadir-t -- BARU, Kehadiran per Pertemuan (Hadir/Tidak Hadir saja, revisi Bapak): sama merah dengan .hadir-a lama (Alpa), makna terdekat dengan "Tidak Hadir". */
.hadir-t input:checked + span { background: #C62828; border-color: #C62828; color: #fff; }

/* ---- warna tetap, dipakai pada kisi rekap dan legenda ---- */
.hadir-h-tetap { background: hsl(154.737 51.351% calc(var(--l0) + var(--ls) * 92.745%)); color: #106B4E; font-weight: 600; }
.hadir-i-tetap { background: hsl(208.696 74.194% calc(var(--l0) + var(--ls) * 93.922%)); color: #1F5F92; font-weight: 600; }
.hadir-a-tetap { background: hsl(0.000 74.194% calc(var(--l0) + var(--ls) * 93.922%)); color: #9B1C1C; font-weight: 700; }
.hadir-b-tetap { background: hsl(37.714 89.744% calc(var(--l0) + var(--ls) * 92.353%)); color: #8A5A00; font-weight: 700; }
.hadir-t-tetap { background: hsl(0.000 74.194% calc(var(--l0) + var(--ls) * 93.922%)); color: #9B1C1C; font-weight: 700; }

/*
 * ---- REVISI 209 -- pilihan Terisi/Tidak Terisi (guru mapel) ----
 * Cuma DUA tombol (beda dari .pilih-hadir yang empat), dan permintaan
 * Bapak persis: "tombol terisi sama lebarnya dengan pemaduan dua tombol
 * di atasnya yaitu hadir dan izin. tombol tidak terisi sama besarnya
 * seperti pemaduan dua tombol di atasnya yaitu alpa dan bolos." Kolom
 * Keterangan yang menampungnya SENGAJA dibuat lebar yang SAMA (330px,
 * lihat kelas/kehadiran.php) dengan kolom Keterangan siswa di atasnya --
 * membagi rata dua tombol ini 50/50 (flex: 1 1 0) di lebar yang sama
 * itulah cara paling wajar meniru "lebar gabungan dua tombol" tanpa
 * mengukur piksel tombol satu per satu (yang tak akan pernah pas persis,
 * sebab labelnya beda panjang teks).
 */
/*
 * REVISI 213 -- dulu flex:1 1 0 (membagi rata SELURUH lebar kolom
 * Keterangan, 330px, jadi 165px per tombol) -- ternyata jauh lebih
 * lebar dari maksud aslinya. Tombol Hadir/Izin/Alpa/Bolos siswa di
 * atasnya (.pilih-hadir) TIDAK memenuhi 330px sama sekali -- ukurannya
 * mengikuti isi teksnya sendiri (kira-kira 55-65px per tombol),
 * menyisakan banyak ruang kosong di sisa kolom. Akibatnya SATU tombol
 * Terisi/Tidak Terisi (165px) tampak seluas EMPAT tombol siswa
 * digabung, bukan DUA seperti dimaksud -- keluhan Bapak.
 *
 * Sekarang TIDAK lagi memenuhi kolom (flex:0 0 auto, lebar tetap
 * 128px per tombol, pola ukuran serupa .pilih-hadir) -- dua tombol ini
 * (128+128+4 gap = 260px) kira-kira sepadan dengan jumlah lebar empat
 * tombol siswa (kira-kira 60px x 4 + 3 gap = 252px), sehingga secara
 * bawaan sejajar dengan baris tombol siswa di atasnya, bukan
 * memanjang sampai ujung kolom.
 */
.pilih-terisi { display: flex; gap: 4px; }
.pilih-terisi label { margin: 0; cursor: pointer; flex: 0 0 auto; width: 128px; }
.pilih-terisi input { position: absolute; opacity: 0; pointer-events: none; }
.pilih-terisi span {
    display: block;
    text-align: center;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid hsl(150.000 16.667% calc(var(--l0) + var(--ls) * 88.235%));
    background: var(--permukaan);
    font-size: 12.5px;
    color: hsl(158.571 7.609% calc(var(--l0) + var(--ls) * 36.078%));
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.pilih-terisi input:disabled + span { opacity: .55; cursor: not-allowed; }

.terisi-t input:checked + span { background: #1D9E75; border-color: #1D9E75; color: #fff; }
.terisi-k input:checked + span { background: #E08A00; border-color: #E08A00; color: #fff; }

.terisi-t-tetap { background: hsl(154.737 51.351% calc(var(--l0) + var(--ls) * 92.745%)); color: #106B4E; font-weight: 600; }
.terisi-k-tetap { background: hsl(37.714 89.744% calc(var(--l0) + var(--ls) * 92.353%)); 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: hsl(156.000 12.821% calc(var(--l0) + var(--ls) * 92.353%)); border: 1px solid hsl(150.000 10.811% calc(var(--l0) + var(--ls) * 85.490%)); }

/* ---- 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: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); }
.kisi-hadir .sel-terkunci { background: hsl(156.000 12.821% calc(var(--l0) + var(--ls) * 92.353%)); }
.kisi-hadir .sel-hadir { font-size: 11.5px; }

.kolom-ket { width: 34px; font-size: 11px; }
.jumlah-semester { background: hsl(156.000 29.412% calc(var(--l0) + var(--ls) * 96.667%)); }

/* ---- kartu ringkasan semester ---- */
.kartu-hadir {
    background: var(--permukaan);
    border: 1px solid hsl(145.714 16.279% calc(var(--l0) + var(--ls) * 91.569%));
    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: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); margin-bottom: 8px; }
.kartu-hadir .bilah-persen {
    height: 5px; border-radius: 3px; background: hsl(156.000 17.241% calc(var(--l0) + var(--ls) * 94.314%)); 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: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); }

.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; }
.hadir-t-tepi { border-left-color: #C62828; }
.hadir-t-tepi .bilah-persen { color: #C62828; }

/* ---- bilah tanggal terkunci ---- */
.bilah-terkunci {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    background: hsl(156.000 17.241% calc(var(--l0) + var(--ls) * 94.314%)); border: 1px solid hsl(150.000 16.667% calc(var(--l0) + var(--ls) * 88.235%)); border-left: 5px solid hsl(158.824 6.996% calc(var(--l0) + var(--ls) * 52.353%));
    border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
    font-size: 13.5px; color: hsl(160.000 9.934% calc(var(--l0) + var(--ls) * 29.608%));
}

/* =====================================================================
   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: var(--permukaan);
    border: 1px solid hsl(145.714 16.279% calc(var(--l0) + var(--ls) * 91.569%));
    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: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); 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: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%));
    border-top: 1px solid hsl(150.000 15.385% calc(var(--l0) + var(--ls) * 94.902%)); 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: hsl(37.714 89.744% calc(var(--l0) + var(--ls) * 92.353%)); 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 DIPATOK -- ia anggota keluarga .hari-h/-i/-a/-b di
   atasnya yang semuanya warna STATUS dan tetap. Kalau cuma ia yang
   terbalik, "tanpa keterangan" jadi lebih terang daripada
   hadir/izin/alpa di sebelahnya. */
.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: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); padding-bottom: 2px; }
.kal-kosong { aspect-ratio: 1; }
.kal-hari {
    aspect-ratio: 1; border-radius: 8px; background: hsl(160.000 15.789% calc(var(--l0) + var(--ls) * 96.275%)); border: 1px solid hsl(156.000 16.129% calc(var(--l0) + var(--ls) * 93.922%));
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 12px; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%));
}
.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: hsl(154.737 51.351% calc(var(--l0) + var(--ls) * 92.745%)); border-color: #C3EBDC; color: #106B4E; }
.kal-i { background: hsl(208.696 74.194% calc(var(--l0) + var(--ls) * 93.922%)); border-color: #C6DFF5; color: #1F5F92; }
.kal-a { background: hsl(0.000 74.194% calc(var(--l0) + var(--ls) * 93.922%)); border-color: #F3C9C9; color: #9B1C1C; }
.kal-b { background: hsl(37.714 89.744% calc(var(--l0) + var(--ls) * 92.353%)); 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: var(--permukaan);
    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: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); }

.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 hsl(150.000 15.385% calc(var(--l0) + var(--ls) * 94.902%)); font-size: 13.5px;
}
.rincian-label { flex: 1 1 auto; }
.rincian-angka { color: var(--isl-900); }
.rincian-persen { width: 54px; text-align: right; color: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); 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: hsl(158.571 7.609% calc(var(--l0) + var(--ls) * 36.078%)); }
.batang-bilah {
    flex: 1 1 auto; height: 12px; border-radius: 6px; overflow: hidden;
    background: hsl(150.000 15.385% calc(var(--l0) + var(--ls) * 94.902%)); 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: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); flex: 0 0 auto; }

/* =====================================================================
   TATA LETAK SISWA
   ===================================================================== */
body.laman-siswa { background: hsl(150.000 18.182% calc(var(--l0) + var(--ls) * 95.686%)); 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: var(--permukaan); }
/*
 * BARU REVISI 226 -- dua baris tulisan (nama aplikasi + nama madrasah/
 * sekolah) menggantikan satu baris nama aplikasi saja. .merek-siswa-nama
 * SENGAJA tidak diberi font-size sendiri -- mewarisi 15px/600 bawaan
 * .merek-siswa di atas ("Dirosah App ukurannya tidak berubah", permintaan
 * Bapak), cuma .merek-siswa-sekolah yang dikecilkan dan dipudarkan.
 * EKSPERIMENTAL, lihat catatan di layout/siswa.php.
 */
.merek-siswa-teks { display: flex; flex-direction: column; line-height: 1.2; }
.merek-siswa-sekolah { font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, .62); }

.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: var(--permukaan); border-top: 1px solid hsl(150.000 15.385% calc(var(--l0) + var(--ls) * 89.804%));
    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: hsl(157.500 7.339% calc(var(--l0) + var(--ls) * 57.255%));
    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: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); 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 hsl(145.714 16.279% calc(var(--l0) + var(--ls) * 91.569%)); overflow: hidden; }
.ks-kepala {
    padding: 11px 16px; border-bottom: 1px solid var(--isl-100);
    font-size: 13px; font-weight: 600; color: var(--isl-800);
    background: var(--isl-050);
}
.ks-isi { padding: 14px 16px; }
.ks-kaki { padding: 10px 16px; border-top: 1px solid hsl(150.000 15.385% calc(var(--l0) + var(--ls) * 94.902%)); }

/*
 * Kepala kartu di Beranda DOSEN: hijau muda, bukan hijau tua seperti
 * kepala kartu di laman lain. Permintaan Bapak: "buat warna kepala
 * kartu di beranda itu warnanya hijau muda seperti di beranda
 * mahasiswa" -- ketiga nilainya disalin PERSIS dari .ks-kepala tepat di
 * atas ini (kartu beranda mahasiswa), supaya dua beranda itu benar-
 * benar sewarna, bukan sekadar mirip. Kalau kelak .ks-kepala diubah,
 * ubah yang ini juga.
 *
 * Diikat ke pembungkus .beranda-dosen, BUKAN digubah di .card-isl
 * umum: .card-isl > .card-header dipakai SELURUH laman aplikasi, jadi
 * mengubahnya di sana akan mengecat ulang kepala kartu di mana-mana --
 * yang tidak diminta. Cukup spesifik (0,2,1) untuk menang atas aturan
 * .card-isl > .card-header (0,1,1) tanpa perlu !important.
 *
 * .card-title diikutkan sebab warna putihnya diwarisi dari .card-header
 * induknya; tanpa baris ini judulnya jadi putih di atas hijau muda.
 */
.beranda-dosen .card-isl > .card-header {
    background: var(--isl-050);
    color: var(--isl-800);
    border-bottom: 1px solid var(--isl-100);
}
.beranda-dosen .card-isl > .card-header .card-title { color: var(--isl-800); }

/*
 * ---- ikhtisar skripsi: alur tahap ----
 * .alur-langkah punya lebar tetap (104px) dengan lingkaran (40px)
 * ditengahkan di dalamnya, supaya garis penghubung antar langkah presisi
 * di tengah kolom. SEMPAT dicoba menggeser seluruh baris via margin-left
 * negatif supaya lingkaran pertama rata kiri dengan cincin progres di
 * bawahnya -- TERNYATA salah acuan: tulisan label langkah pertama
 * ("Pengajuan Judul", lebih lebar dari lingkarannya) ikut tergeser
 * sampai terpotong di tepi kiri area gulir. Acuan yang benar adalah
 * TULISAN, bukan simbol lingkaran -- jadi TIDAK digeser sama sekali;
 * lingkaran pertama boleh terlihat sedikit menjorok dari cincin di
 * bawahnya, itu konsekuensi yang diterima demi tulisan yang utuh.
 */
.alur-skripsi {
    display: flex; overflow-x: auto; padding: 6px 0 12px;
    -webkit-overflow-scrolling: touch;
}
.alur-langkah {
    display: flex; flex-direction: column; align-items: center;
    flex: 0 0 auto; width: 104px; position: relative; text-align: center;
}
.alur-langkah:not(:first-child)::before {
    content: ''; position: absolute; top: 20px; right: 50%; width: 100%;
    height: 2px; background: hsl(145.714 16.279% calc(var(--l0) + var(--ls) * 91.569%)); z-index: 0;
}
.alur-langkah.selesai:not(:first-child)::before { background: var(--isl-500); }
.alur-bulat {
    width: 40px; height: 40px; border-radius: 50%; background: var(--permukaan);
    border: 2px solid hsl(145.714 16.279% calc(var(--l0) + var(--ls) * 91.569%)); display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); position: relative; z-index: 1; flex-shrink: 0;
}
.alur-langkah.selesai .alur-bulat { background: var(--isl-500); border-color: var(--isl-500); color: #fff; }
.alur-langkah.aktif .alur-bulat {
    background: var(--isl-700); border-color: var(--isl-700); color: #fff;
    box-shadow: 0 0 0 4px var(--isl-050);
}
.alur-teks { font-size: 11.5px; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); margin-top: 7px; line-height: 1.25; }
.alur-langkah.aktif .alur-teks { color: var(--isl-800); font-weight: 600; }

/*
 * .alur-gradasi -- gradasi kuning->hijau satu kesatuan sepanjang tujuh
 * langkah (bukan blok warna terpisah), pusat perpindahannya di langkah
 * "Ujian Proposal" (tengah dari tujuh). Warna latar & kontras tulisan
 * DIHITUNG per-langkah di PHP (lihat $gradasiWarna di
 * skripsi_ikhtisar.php) sebab tiap lingkaran adalah elemen terpisah --
 * tidak ada satu elemen kontinu untuk dipasangi satu linear-gradient
 * biasa. Warna itu dititipkan lewat custom property --warna-segmen di
 * setiap .alur-langkah (elemen sungguhan), lalu garis penghubung
 * (pseudo-elemen ::before, tidak bisa ditembak inline style langsung)
 * membacanya dari situ supaya warnanya ikut sama dengan lingkarannya.
 */
.alur-gradasi .alur-langkah.selesai:not(:first-child)::before,
.alur-gradasi .alur-langkah.aktif:not(:first-child)::before { background: var(--warna-segmen, var(--isl-500)); }

/* ---- alur-mini: variasi kecil dipakai di Pengajuan Ujian, ukuran diatur
   inline per baris -- di sini cuma posisi garis penghubung yang ditimpa. */
.alur-mini .alur-langkah { width: 76px; }
.alur-mini .alur-bulat { width: 24px; height: 24px; font-size: 10px; }
.alur-mini .alur-teks { font-size: 9.5px; }
.alur-mini .alur-langkah::before { top: 12px; }

/* ---- ikhtisar skripsi: kartu portal (Pengajuan/Bimbingan/Ujian) ---- */
.portal-skripsi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.portal-item {
    display: flex; flex-direction: column; padding: 14px; border-radius: 12px; background: var(--permukaan);
    border: 1px solid hsl(145.714 16.279% calc(var(--l0) + var(--ls) * 91.569%)); text-decoration: none; color: inherit;
    transition: border-color .15s, transform .15s;
}
.portal-item:hover { border-color: var(--isl-300); text-decoration: none; color: inherit; transform: translateY(-1px); }
.portal-item .portal-ikon {
    width: 38px; height: 38px; border-radius: 10px; background: var(--isl-050);
    color: var(--isl-700); display: flex; align-items: center; justify-content: center;
    font-size: 16px; margin-bottom: 10px; order: -1;
}
.portal-item .portal-judul { font-size: 13.5px; font-weight: 600; color: var(--isl-900); order: -1; }
.portal-item .portal-ket { font-size: 11px; color: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); margin-top: 2px; margin-bottom: 10px; order: -1; }
/*
 * Lencana status SENGAJA di bawah, dalam alur normal kartu (bukan
 * mengambang di pojok kanan atas seperti sebelumnya) -- posisinya jadi
 * konsisten lewat flex column + order di atas, tidak bergantung pada
 * panjang teks ikon/judul/keterangan di atasnya.
 */
.portal-item .portal-lencana { align-self: flex-start; margin-top: auto; }

/* ---- 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-kaki { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.18); }
.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 hsl(160.000 15.789% calc(var(--l0) + var(--ls) * 96.275%)); }
.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: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); font-weight: 400; }

/* ---- kisi menu ---- */
/* Tepat TIGA kotak per baris (Pilihan Studi/Materi/Tugas, lalu
   Kehadiran/Ujian/Nilai). SEMUA kotak hijau muda seperti kepala kartu
   (--isl-050), garis bingkai dalam hijau, ikon & teks hijau tua. Tiap
   kotak berbingkai garis dalam berjarak proporsional dari tepi. */
.kisi-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pintu {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; padding: 20px 10px; border-radius: 16px; text-decoration: none;
    font-size: 13px; font-weight: 600; min-height: 108px; text-align: center;
    background: var(--isl-050); color: var(--isl-900);
    box-shadow: 0 2px 6px rgba(4, 52, 44, .08);
}
.pintu i { font-size: 24px; color: var(--isl-900); }
/* Garis lingkar mengikuti sisi, jaraknya proporsional dari tepi kotak. */
.pintu::before {
    content: ""; position: absolute; inset: 8px; border-radius: 10px;
    border: 1px solid var(--isl-500); opacity: .7; pointer-events: none;
}
/* Ikon & label diangkat di atas garis bingkai (::before). Lencana
   notifikasi DIKECUALIKAN -- ia harus tetap position:absolute (dipatok
   di pojok), bukan relative yang mendorong ikon + tulisan ke bawah. */
.pintu i, .pintu span:not(.pintu-lencana) { position: relative; z-index: 1; }
.pintu:hover { text-decoration: none; color: var(--isl-900); background: var(--isl-100); }

.pintu-lencana {
    position: absolute; top: 6px; right: 6px; z-index: 3;
    background: #C62828; color: #fff; line-height: 1.4;
    border-radius: 20px; min-width: 18px; padding: 0 5px; font-size: 10.5px; font-weight: 700;
    text-align: center;
}

/* ---- 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 hsl(160.000 15.789% calc(var(--l0) + var(--ls) * 96.275%)); font-size: 13.5px; }
.baris-umum:first-child { border-top: 0; }
.bu-tanggal { font-size: 11.5px; color: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); }

/*
 * .baris-jadwal-dosen -- kartu "Jadwal Mengajar Minggu Ini" di Beranda
 * dosen (REVISI 328, diluaskan dari sehari ke seminggu penuh). Kolom
 * jam dipisah dari info mata kuliah, BUKAN satu baris teks seperti
 * .baris-umum -- jam adalah yang paling sering dicari sekilas di kartu
 * ini (dosen membuka beranda untuk tahu "jam berapa saya mengajar",
 * bukan sekadar "apa saja"), jadi diberi kolom sendiri yang lebar
 * tetap, sejajar rapi antar baris. .hari-jadwal-dosen mengelompokkan
 * baris-baris itu di bawah nama harinya masing-masing.
 */
.hari-jadwal-dosen { margin-bottom: 4px; }
.hari-jadwal-dosen:last-child { margin-bottom: 0; }
.hari-jadwal-dosen-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--isl-600); margin-top: 10px;
}
.hari-jadwal-dosen:first-child .hari-jadwal-dosen-label { margin-top: 0; }
/*
 * .hari-jadwal-dosen-daftar -- pembungkus baris "Jam ke-X" satu hari.
 * Permintaan Bapak: kartunya "menguasai satu area penuh saja, agar di
 * layar lebar ia bisa dijejer empat jadwal dalam satu baris. ketika di
 * phone kembali seperti biasa berjejer menurun per jadwal."
 *
 * GRID, bukan lagi flex-wrap. Dua alasan, dua-duanya baru terasa
 * setelah kartunya dilebarkan jadi col-12:
 *
 * 1. flex-grow membuat baris terakhir yang sendirian MELAR selebar
 *    kartu. Waktu kartunya masih setengah lebar itu tak seberapa;
 *    begitu lebar penuh, satu jadwal yatim jadi memanjang aneh
 *    sepanjang laman. Grid menahan tiap petak tetap selebar kolomnya.
 * 2. auto-fill saja akan memuat SEBANYAK yang muat -- di layar 1920
 *    bisa jadi lima atau enam per baris, bukan empat yang diminta.
 *
 * Karena itu batas bawah petaknya memakai max() dari dua hal:
 *   - calc((100% - 3 * 8px) / 4) = lebar satu kolom SEANDAINYA ada
 *     empat kolom. Karena tiap petak minimal selebar itu, mustahil
 *     muat lebih dari empat. Inilah pagar "maksimal empat".
 *   - 230px = lebar terkecil yang masih terbaca. Begitu kartu
 *     menyempit (tablet, lalu HP), angka inilah yang menang, sehingga
 *     kolomnya turun sendiri jadi tiga, dua, lalu satu -- tanpa satu
 *     pun breakpoint media-query. Di HP 375px: (375-24)/4 = 88px,
 *     kalah oleh 230px, jadi tinggal satu kolom. Persis "kembali
 *     seperti biasa berjejer menurun per jadwal".
 *
 * Setiap .baris-jadwal-dosen diberi bingkai penuh (bukan lagi
 * border-top pemisah) -- pola pembagi atas/bawah tidak lagi make
 * sense begitu baris bisa berdampingan menyamping.
 */
.hari-jadwal-dosen-daftar {
    display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(max(230px, calc((100% - 3 * 8px) / 4)), 1fr));
}
/*
 * Isi satu petak: TIGA baris bertumpuk, bukan lagi dua kolom
 * [jam | mata kuliah] bersebelahan. Permintaan Bapak: "lebih baik area
 * jam tidak ditaruh di samping mata kuliah ... di satu area":
 *
 *   Jam ke-1 (07.30-09.10)
 *   Politik Hukum
 *   2 sks, Kelas B, PPI 2
 *
 * Kolom jam yang dulu lebar-tetap 92px dicabut. Itu dulu ada supaya jam
 * antar baris sejajar rapi ke bawah -- alasan yang gugur begitu petaknya
 * berjejer menyamping empat-empat: yang sejajar sekarang adalah petaknya,
 * dan 92px itu justru memakan lebar yang dibutuhkan nama mata kuliah.
 *
 * Media query max-width:480px yang dulu menumpuk jam & info di HP juga
 * dicabut -- susunannya kini SUDAH bertumpuk di segala lebar, jadi
 * aturan itu tidak lagi punya kerja.
 */
.baris-jadwal-dosen {
    min-width: 0;
    padding: 9px 10px; border: 1px solid hsl(160.000 15.789% calc(var(--l0) + var(--ls) * 96.275%)); border-radius: 8px; background: hsl(150.000 25.000% calc(var(--l0) + var(--ls) * 98.431%));
}
/* Jam & rentangnya SATU baris; flex-wrap supaya rentang turun sendiri
   kalau petaknya sempit, bukan terpotong. */
.bjd-jam { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; }
.bjd-jam-label { font-size: 12.5px; font-weight: 600; color: var(--isl-800); }
.bjd-jam-rentang { font-size: 10.5px; color: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); }
.bjd-mk { display: block; font-size: 13px; margin-top: 2px; }
.bjd-meta { font-size: 11px; margin-top: 2px; }

/* ---- daftar ujian ---- */
.kartu-ujian {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    background: var(--permukaan); border: 1px solid hsl(145.714 16.279% calc(var(--l0) + var(--ls) * 91.569%)); border-left-width: 5px;
    border-radius: 12px; padding: 13px 16px; margin-bottom: 10px;
}
.uj-buka { border-left-color: #1D9E75; }
.uj-selesai { border-left-color: hsl(152.308 9.924% calc(var(--l0) + var(--ls) * 74.314%)); }
.uj-tutup { border-left-color: hsl(145.714 16.279% calc(var(--l0) + var(--ls) * 91.569%)); }
.uj-mapel { font-size: 15px; font-weight: 600; color: var(--isl-900); }
.uj-ket { font-size: 12px; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); }

.tabel-konfir { width: 100%; font-size: 13.5px; margin-bottom: 14px; }
.tabel-konfir td { padding: 5px 0; border-bottom: 1px solid hsl(160.000 15.789% calc(var(--l0) + var(--ls) * 96.275%)); }
.tabel-konfir td:first-child { color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); width: 46%; }
.ingat-ujian {
    background: hsl(43.200 100.000% calc(var(--l0) + var(--ls) * 95.098%)); 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 hsl(160.000 15.789% calc(var(--l0) + var(--ls) * 96.275%)); }
.nilai-tertutup { background: hsl(160.000 15.789% calc(var(--l0) + var(--ls) * 96.275%)); border-radius: 10px; padding: 18px; color: hsl(158.571 7.609% calc(var(--l0) + var(--ls) * 36.078%)); font-size: 13.5px; }
.nilai-tertutup i { font-size: 26px; color: hsl(156.000 9.554% calc(var(--l0) + var(--ls) * 69.216%)); 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: hsl(150.000 30.769% calc(var(--l0) + var(--ls) * 94.902%)); 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: var(--permukaan); 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 hsl(153.333 17.647% calc(var(--l0) + var(--ls) * 90.000%)); background: var(--permukaan); color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%));
    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: hsl(37.714 89.744% calc(var(--l0) + var(--ls) * 92.353%)); 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: var(--permukaan); 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: hsl(156.923 15.294% calc(var(--l0) + var(--ls) * 16.667%)); }
.ls-soal img { max-width: 100%; height: auto; border-radius: 8px; }
.ls-petunjuk { font-size: 12.5px; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); margin-bottom: 10px; }

.opsi-pilih {
    display: flex; align-items: flex-start; gap: 11px; width: 100%;
    border: 1.5px solid hsl(144.000 16.129% calc(var(--l0) + var(--ls) * 93.922%)); 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: hsl(160.000 42.857% calc(var(--l0) + var(--ls) * 98.627%)); }
.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: var(--permukaan);
    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 hsl(144.000 16.129% calc(var(--l0) + var(--ls) * 93.922%)); 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: hsl(160.000 42.857% calc(var(--l0) + var(--ls) * 98.627%)); }

.ls-kaki { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.ls-simpan { font-size: 11.5px; color: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); }
.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: hsl(150.000 16.667% calc(var(--l0) + var(--ls) * 88.235%)); color: hsl(158.571 7.609% calc(var(--l0) + var(--ls) * 36.078%)); }
.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: hsl(153.333 17.647% calc(var(--l0) + var(--ls) * 90.000%)) !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: var(--permukaan); border-bottom: 1px solid hsl(150.000 15.789% calc(var(--l0) + var(--ls) * 92.549%));
}
.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: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); margin: 0 0 12px; }

/* ---- pintasan hari pada pengisian kehadiran ---- */
.lompat-hari { display: flex; flex-wrap: wrap; gap: 6px; }
.pintas-hari {
    border: 1px solid hsl(150.000 16.667% calc(var(--l0) + var(--ls) * 88.235%)); border-radius: 20px; padding: 4px 13px;
    font-size: 12.5px; color: hsl(158.571 7.609% calc(var(--l0) + var(--ls) * 36.078%)); background: var(--permukaan); 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: hsl(158.824 6.996% calc(var(--l0) + var(--ls) * 52.353%)); 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: hsl(160.000 15.789% calc(var(--l0) + var(--ls) * 96.275%)); }

/* =====================================================================
   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: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); }
.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: hsl(154.286 12.069% calc(var(--l0) + var(--ls) * 22.745%)); }
.tb-ekstra { color: #8A5A00; }
.tb-kelas  { color: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); font-size: 11.5px; }

/* ---- petak pemilihan kelas per mapel / ekstra ---- */
.petak-ampu {
    border: 1px solid hsl(150.000 20.000% calc(var(--l0) + var(--ls) * 94.118%)); 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 hsl(150.000 16.667% calc(var(--l0) + var(--ls) * 88.235%)); border-radius: 999px;
    background: var(--permukaan); color: hsl(158.571 7.609% calc(var(--l0) + var(--ls) * 36.078%)); 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: hsl(160.000 15.789% calc(var(--l0) + var(--ls) * 96.275%)); border-style: dashed; color: hsl(152.308 9.924% calc(var(--l0) + var(--ls) * 74.314%));
    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: var(--permukaan); 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: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); }
.kk-kosong {
    grid-column: 1 / -1; background: var(--permukaan); border: 1px dashed var(--isl-200);
    border-radius: 12px; padding: 14px; text-align: center;
    color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); 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: hsl(160.000 15.789% calc(var(--l0) + var(--ls) * 96.275%)); border: 1px solid hsl(145.714 16.279% calc(var(--l0) + var(--ls) * 91.569%)); 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: var(--permukaan); 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 hsl(150.000 20.000% calc(var(--l0) + var(--ls) * 94.118%)); }
.kt-label {
    display: block; font-size: 10.5px; font-weight: 600; color: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%));
    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 hsl(150.000 16.667% calc(var(--l0) + var(--ls) * 95.294%)); 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: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); }
.dp-tombol {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px;
    border: 1px solid var(--isl-200); background: var(--permukaan);
    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 hsl(150.000 20.000% calc(var(--l0) + var(--ls) * 94.118%)); }

/* =====================================================================
   PEMBAGIAN TUGAS — daftar padat dan kepala halaman penyuntingan
   ===================================================================== */
.kepala-tugas {
    display: flex; align-items: center; gap: 12px;
    background: var(--permukaan); 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: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); }

.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: hsl(152.308 9.924% calc(var(--l0) + var(--ls) * 74.314%)); 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 hsl(150.000 16.667% calc(var(--l0) + var(--ls) * 95.294%)); font-size: 13px;
}
.daftar-jabatan li:first-child { border-top: 0; }
.dj-ubah { color: hsl(152.308 9.924% calc(var(--l0) + var(--ls) * 74.314%)); font-size: 12px; margin-right: 8px; }
.dj-ubah:hover { color: var(--isl-600); }
.dj-hapus { color: hsl(152.308 9.924% calc(var(--l0) + var(--ls) * 74.314%)); 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: var(--permukaan); 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 mahasiswa (revisi 77) — dipakai di bawah nama pada Data
 * Mahasiswa, pola sama persis dengan .tg-status di atas, hanya warnanya
 * dibedakan per status: hijau=lulus, merah=tidak aktif.
 */
.tg-status.status-lulus       { color: #1b7a3d; }
.tg-status.status-lulus i       { color: #2ecc71; }
.tg-status.status-tidak-aktif { color: #a3272c; }
.tg-status.status-tidak-aktif i { color: #e74c3c; }

/* ---- panel tugas hari ini dan besok (sisi siswa) ---- */
.panel-hari {
    background: var(--permukaan); 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 hsl(150.000 16.667% calc(var(--l0) + var(--ls) * 95.294%)); 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: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); 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: hsl(37.714 89.744% calc(var(--l0) + var(--ls) * 92.353%)); color: #8A5A00; }
.ph-kosong {
    padding: 14px 15px; font-size: 13px; color: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); text-align: center;
}
.ph-kaki {
    padding: 8px 15px; border-top: 1px solid hsl(150.000 16.667% calc(var(--l0) + var(--ls) * 95.294%));
    font-size: 11.5px; color: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%));
}

.isi-setoran {
    background: hsl(150.000 16.667% calc(var(--l0) + var(--ls) * 97.647%)); border: 1px solid hsl(150.000 20.000% calc(var(--l0) + var(--ls) * 94.118%)); 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: var(--permukaan); 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 hsl(150.000 16.667% calc(var(--l0) + var(--ls) * 95.294%)); }
.ki-baris span { display: block; font-size: 10.5px; color: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); 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 hsl(145.714 16.279% calc(var(--l0) + var(--ls) * 91.569%)); }
.ok-benar { color: var(--isl-700); }
.ok-salah { color: hsl(152.308 9.924% calc(var(--l0) + var(--ls) * 74.314%)); }
.nilai-kurang { color: #C62828; }

.daftar-koreksi { padding: 4px 0; }
.dk-butir { border-top: 1px solid hsl(150.000 16.667% calc(var(--l0) + var(--ls) * 95.294%)); 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 hsl(0.000 56.522% calc(var(--l0) + var(--ls) * 86.471%)); }
.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: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); 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: hsl(0.000 74.194% calc(var(--l0) + var(--ls) * 93.922%)); color: #9B1C1C; }
.tanda-uraian { background: hsl(37.714 89.744% calc(var(--l0) + var(--ls) * 92.353%)); 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: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); text-transform: uppercase; letter-spacing: .05em; }
.dk-isi { font-size: 13px; }
.dk-kosong { color: hsl(152.308 9.924% calc(var(--l0) + var(--ls) * 74.314%)); 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; }

/*
 * .tabel-kolom-tetap -- sama prinsipnya dgn .tabel-sempit di atas (table-
 * layout:fixed memaksa lebar kolom TIDAK ikut menyusut/melebar mengikuti
 * isi baris yg kebetulan tampil), tapi tanpa memaksa font-size tertentu --
 * dipakai tabel Pengajuan Judul & Bimbingan yang kolom Judul-nya dulu
 * "berpindah-pindah" posisi (kiri/kanan) tiap kali data yang tampil
 * beda panjang, karena browser menghitung ulang lebar tiap kolom dari
 * kontennya sendiri. Kolom TANPA width eksplisit (Judul) otomatis
 * mengisi sisa lebar tabel -- stabil di posisi yang sama setiap kali.
 */
.tabel-kolom-tetap { table-layout: fixed; }
.tabel-kolom-tetap td { word-wrap: break-word; overflow-wrap: break-word; }

/*
 * Lebar-minimum tabel berkolom-teks-panjang -- REVISI (permintaan Bapak).
 * Aturan umum ".card .table-responsive > .table { min-width: 620px }"
 * ternyata KEKECILAN utk tabel di bawah ini: kolom fleksibel (Judul /
 * Nama / Mata Kuliah / Dosen) yg mengisi sisa lebar cuma kebagian
 * belasan-puluhan px di layar sempit, sehingga teksnya menumpuk satu-dua
 * huruf per baris ke bawah. min-width per tabel dinaikkan ke jumlah lebar
 * kolom tetapnya + jatah wajar kolom fleksibel -- di HP .table-responsive
 * (overflow-x:auto) tinggal digeser samping, di desktop tabelnya memang
 * sudah lebih lebar dari angka ini jadi tak ada yang berubah. Pola &
 * selector sama persis dgn .tabel-pengawas di atas. */
.card .table-responsive > .table.tabel-bimbingan-daftar  { min-width: 860px; }
.card .table-responsive > .table.tabel-mahasiswa         { min-width: 760px; }
.card .table-responsive > .table.tabel-alumni            { min-width: 900px; }
.card .table-responsive > .table.tabel-offering-semester { min-width: 900px; }
.card .table-responsive > .table.tabel-rekap-dosen       { min-width: 920px; }

/*
 * Iktishar -- kartu "Rekap Pembimbing" & "Rekap Pembimbing dan Penguji"
 * (col-12 penuh sejak REVISI ttg pembimbing skripsi) -- REVISI (permintaan
 * Bapak): "sepertinya digeser lagi kolom pembimbing 1 dan pembimbing 2...
 * spacenya cukup leluasa utk diperluas" & "kolom penguji proposal hingga
 * pembimbing 2, silakan dilebarkan lagi agar tulisan di kepala tabel tidak
 * menumpuk". Cuma berlaku >=992px (breakpoint sama dgn @media
 * max-width:991.98px di atas) -- di HP/tablet kolom tetap seperti semula,
 * .table-responsive masih scroll horizontal. width di kelas "kol-*" ini
 * HARUS !important krn base width-nya dipasang inline (style="width:...")
 * di iktishar_ringkasan.php, spesifisitas inline selalu menang.
 */
@media (min-width: 992px) {
    .tabel-rekap-pembimbing .kol-pembimbing1,
    .tabel-rekap-pembimbing .kol-pembimbing2 { width: 220px !important; }

    .tabel-rekap-penguji .kol-pembimbing1,
    .tabel-rekap-penguji .kol-pembimbing2 { width: 130px !important; }
    .tabel-rekap-penguji .kol-proposal    { width: 140px !important; }
    .tabel-rekap-penguji .kol-penguji1,
    .tabel-rekap-penguji .kol-penguji2    { width: 110px !important; }
}

/*
 * Pengajuan Judul -- kolom tetapnya BEDA antara portal PA & Prodi: PA
 * cuma punya satu kolom status ("Rekom. PA", 115px), Prodi punya dua
 * (PA + Prodi, 230px). Dengan min-width umum 620px yang sama, kolom
 * Judul (fleksibel, mengisi sisa) di laman Prodi jadi ~115px lebih
 * sempit dari di laman PA -- di HP teksnya menumpuk satu-dua huruf per
 * baris. min-width laman Prodi dinaikkan sebesar selisih itu supaya
 * kolom Judul di kedua laman sama lebar di layar sempit (permintaan
 * Bapak: "samakan dengan pengaturan mobile untuk pengajuan di laman
 * PA/Dosen"). Desktop tak berubah -- tabelnya memang sudah lebih lebar
 * dari angka ini.
 * Kedua angka dinaikkan +40px (permintaan Bapak: "kolom mahasiswa
 * diperlebar sedikit") -- persis sebesar pelebaran kolom Mahasiswa
 * (160 -> 200px), supaya lebar ekstra itu TIDAK diambil dari kolom
 * Judul yang fleksibel. Kolom tetap lain tak disentuh. */
.card .table-responsive > .table.tabel-pengajuan-pa    { min-width: 660px; }
.card .table-responsive > .table.tabel-pengajuan-prodi { min-width: 775px; }

/* Baris "Putuskan / Terkunci" + ikon hapus (Prodi) di kolom Mahasiswa
   laman Pengajuan Judul. Ikon hapus = penghapus abu, jadi merah saat
   disorot kursor. */
.baris-putuskan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hapus-pengajuan-ikon {
    color: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); font-size: 13px; line-height: 1; text-decoration: none;
    transition: color .12s ease;
}
.hapus-pengajuan-ikon:hover,
.hapus-pengajuan-ikon:focus { color: #DC3545; text-decoration: none; }
/* Ikon paperclip "berkas kelengkapan" -- di depan baris Putuskan/Terkunci,
   abu netral, jadi hijau saat disorot. */
.berkas-pengajuan-ikon {
    color: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); font-size: 13px; line-height: 1; text-decoration: none;
    transition: color .12s ease;
}
.berkas-pengajuan-ikon:hover,
.berkas-pengajuan-ikon:focus { color: var(--isl-700); text-decoration: none; }

/* Tautan "Lihat berkas pengajuan" di bawah nama mahasiswa pada borang
   "Buat Jadwal Ujian" -- baris kecil abu dengan ikon berkas. */
.berkas-mhs-jadwal {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
    font-size: 11px; color: hsl(208.235 7.296% calc(var(--l0) + var(--ls) * 45.686%)); text-decoration: none;
    transition: color .12s ease;
}
.berkas-mhs-jadwal:hover,
.berkas-mhs-jadwal:focus { color: var(--isl-700); text-decoration: none; }
.berkas-mhs-jadwal-kosong {
    display: block; margin-top: 3px; font-size: 11px; color: hsl(150.000 6.349% calc(var(--l0) + var(--ls) * 75.294%));
}

/* Garis pemisah tipis antar kolom A/B/C/D di tabel Offering Mata Kuliah --
   membedakan tiap kolom SKS-per-huruf-kelas dari tetangganya. box-shadow
   INSET dipakai (bukan border-left) supaya garisnya murni visual -- tidak
   makan 1px dari content-box sel spt border sungguhan, yang dulu bikin
   angka di kolom itu geser dikit dari huruf kepala tabelnya di atasnya. */
.kolom-berbatas { box-shadow: inset 1px 0 0 var(--isl-100); }

/* Kolom A/B/C/D cuma menampung satu digit -- padding kiri-kanan bawaan
   .table-sm (.3rem) dipangkas lagi spy 4 kolom itu tidak makan tempat
   yang mestinya milik Mata Kuliah/Dosen. */
.kolom-sks-kelas { padding-left: .2rem !important; padding-right: .2rem !important; }

/* Jarak napas di kedua sisi kelompok "Kelas & SKS" (A/B/C/D) -- kolom
   Kelas & Jumlah SKS di kiri-kanannya cukup lapang (70px/104px), jadi
   aman ditambah padding tanpa bikin isinya mepet lagi. */
.kolom-kelas-gap { padding-right: .6rem !important; }
.kolom-jumlah-gap { padding-left: .6rem !important; padding-right: .6rem !important; }

/* Kolom aksi (+/hapus) di tabel Offering Mata Kuliah adalah kolom TERAKHIR,
   jadi kena aturan umum ".card .table > tbody > tr > td:last-child" yang
   menambah padding-right 1.25rem (spy ada jarak dari tepi kartu) -- pas utk
   kolom teks biasa, tapi bikin DUA tombol ikon (+/hapus) yg sudah sempit
   jadi tidak muat sebaris & malah bertumpuk vertikal nyaris tanpa jarak.
   Selektor sama spesifiknya + satu kelas tambahan supaya menang. */
.card .table > tbody > tr > td.kolom-aksi-sempit { padding-right: .3rem; }

/* Pilihan dosen di modal Tambah/Ubah Offering -- warna di JUDUL grup
   (optgroup), BUKAN di baris opsinya (yg tetap putih polos spy langsung
   kebedaan sekilas dari daftar namanya, bukan dari kotak warna berulang):
   kuning utk Dosen Tidak Tetap, hijau muda utk Dosen Tetap non-Homebase,
   hijau (teks saja, tanpa latar) utk Dosen Homebase. */
#tambah-id-guru optgroup.grup-dosen-dlb { background-color: #FFF3CD; color: #7A5C00; font-weight: 700; }
#tambah-id-guru optgroup.grup-dosen-non-homebase { background-color: hsl(151.200 49.020% calc(var(--l0) + var(--ls) * 90.000%)); color: #1E5F37; font-weight: 700; }
#tambah-id-guru optgroup.grup-dosen-homebase { color: #1E7E34; font-weight: 700; }
#tambah-id-guru optgroup option { color: hsl(210.000 10.811% calc(var(--l0) + var(--ls) * 14.510%)); font-weight: 400; background-color: var(--permukaan); }

/*
 * .pemisah-bagian -- garis pembatas antar-BAGIAN halaman (bukan antar
 * baris tabel), dgn ikon+label mengambang di tengahnya -- pola sama dgn
 * .pemisah-tanggal (garis via ::before, teks "memotong" garis lewat latar
 * sewarna halaman), dipakai mis. memisahkan blok Offering per-Tingkat dari
 * tabel Rekap di bawahnya spy jelas dua bagian yg beda maksud.
 */
.pemisah-bagian {
    text-align: center; margin: 22px 0; font-size: 12.5px; font-weight: 700;
    color: var(--isl-700); position: relative; letter-spacing: .02em;
}
.pemisah-bagian::before {
    content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--isl-200);
}
.pemisah-bagian span {
    background: hsl(150.000 18.182% calc(var(--l0) + var(--ls) * 95.686%)); padding: 0 16px; position: relative; z-index: 1;
}
.pemisah-bagian i { margin-right: 6px; }

/* =====================================================================
   PERCAKAPAN BIMBINGAN -- gelembung pesan, dipakai laman Bimbingan
   mahasiswa maupun admin/dosen supaya bahasa visualnya sama persis.
   ===================================================================== */
.percakapan-bimbingan { background: hsl(140.000 23.077% calc(var(--l0) + var(--ls) * 97.451%)); padding: 16px; overflow-y: auto; }
.pemisah-tanggal { text-align: center; margin: 4px 0 16px; font-size: 11px; color: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); position: relative; }
.pemisah-tanggal:first-child { margin-top: 0; }
.pemisah-tanggal::before {
    content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: hsl(150.000 15.385% calc(var(--l0) + var(--ls) * 89.804%));
}
.pemisah-tanggal span { background: hsl(140.000 23.077% calc(var(--l0) + var(--ls) * 97.451%)); padding: 0 10px; position: relative; z-index: 1; }

/*
 * Baris "Label : Nilai" yang titik duanya presisi sejajar antar baris,
 * TANPA meratakan labelnya sendiri ke kanan (tetap rata kiri seperti
 * biasa). Rahasianya: enam anak langsung (bukan dibungkus per-baris)
 * mengalir ke grid 3 kolom -- kolom label lebar mengikuti label
 * TERPANJANG di antara semua baris (max-content), jadi titik dua di
 * kolom kedua otomatis jatuh di x yang sama untuk setiap baris,
 * sementara teks labelnya sendiri tetap nempel kiri di kolomnya.
 */
.baris-info-titik {
    display: grid; grid-template-columns: max-content max-content 1fr;
    column-gap: 6px; row-gap: 4px; font-size: 12.5px; align-items: baseline;
}

/*
 * Garis pemisah giliran bicara -- polos, tanpa label, dipasang di antara
 * dua pesan berturut-turut yang PENGIRIMNYA beda (mahasiswa <-> lawan
 * bicaranya). TIDAK dipasang di pesan pertama (sudah ada garis tanggal
 * di atasnya) atau saat garis tanggal baru saja tampil (lihat kondisi
 * di templat -- keduanya tidak boleh dobel).
 */
.pemisah-giliran { height: 1px; background: hsl(150.000 15.385% calc(var(--l0) + var(--ls) * 89.804%)); margin: 14px 0; }

.pesan-baris { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 12px; }
.pesan-baris.punya-sendiri { flex-direction: row-reverse; }
.pesan-avatar {
    width: 30px; height: 30px; border-radius: 50%; background: var(--isl-100); color: var(--isl-800);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11.5px;
    flex-shrink: 0; margin-bottom: 2px;
}
.pesan-blok { max-width: 76%; min-width: 0; }
.pesan-baris.punya-sendiri .pesan-blok { display: flex; flex-direction: column; align-items: flex-end; }
.pesan-pengirim { font-size: 11px; color: hsl(157.500 7.339% calc(var(--l0) + var(--ls) * 57.255%)); margin: 0 2px 3px; }
.pesan-baris.punya-sendiri .pesan-pengirim { text-align: right; }

.gelembung {
    display: inline-block; padding: 9px 13px; border-radius: 15px 15px 15px 4px;
    background: var(--permukaan); border: 1px solid hsl(145.714 16.279% calc(var(--l0) + var(--ls) * 91.569%)); color: var(--isl-900);
    font-size: 13px; line-height: 1.45; white-space: pre-line; text-align: left;
    box-shadow: 0 1px 2px rgba(6, 65, 54, .04);
}
.pesan-baris.punya-sendiri .gelembung {
    background: var(--isl-700); color: #fff; border: none; border-radius: 15px 15px 4px 15px;
}
.pesan-waktu { font-size: 10px; color: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); margin: 4px 3px 0; }
.pesan-baris.punya-sendiri .pesan-waktu { text-align: right; }

/* Tombol hapus per-pesan -- SELALU tampak (samar), jadi merah saat
   disorot kursor. Pengirim boleh menghapus pesannya sendiri; Prodi boleh
   menghapus pesan siapa pun (moderasi, mis. membersihkan pesan uji coba).
   .pesan-waktu ada di BAWAH gelembung (latar terang) untuk kedua sisi,
   jadi warnanya sama di pesan sendiri maupun pesan lawan. */
.pesan-hapus {
    margin-left: 7px; color: #B98A86; font-size: 11px;
    text-decoration: none; transition: color .12s ease;
}
.pesan-hapus:hover,
.pesan-hapus:focus { color: #DC3545; text-decoration: none; }

.pesan-lampiran {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; padding: 7px 11px;
    background: hsl(140.000 23.077% calc(var(--l0) + var(--ls) * 97.451%)); border: 1px solid hsl(145.714 16.279% calc(var(--l0) + var(--ls) * 91.569%)); border-radius: 10px;
    font-size: 12px; color: var(--isl-800); text-decoration: none; max-width: 100%;
}
.pesan-lampiran:hover { border-color: var(--isl-300); text-decoration: none; color: var(--isl-800); }
.pesan-lampiran i { flex-shrink: 0; }
.pesan-lampiran span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/*
 * REVISI BUG (dilaporkan Bapak): warna semula (latar putih transparan
 * 14% + teks putih) dirancang MENGASUMSIKAN kotak lampiran ini selalu
 * duduk di atas .gelembung hijau tua -- padahal kotak berkas berdiri
 * SENDIRI (bukan di dalam .gelembung), dan pesan yang HANYA berisi
 * berkas (tanpa teks) tidak punya .gelembung sama sekali. Latar putih
 * transparan itu lalu duduk langsung di atas latar laman -- di mode
 * terang jadi PUTIH DI ATAS PUTIH, tulisan & bingkainya sama sekali
 * tak kelihatan (mahasiswa tidak bisa melihat link unggahannya
 * sendiri). Diganti latar PADAT (bukan transparan) memakai warna hijau
 * gelembung sendiri -- selalu berkontras cukup, baik berdampingan
 * gelembung teks maupun berdiri sendiri, di kedua mode.
 */
.pesan-baris.punya-sendiri .pesan-lampiran {
    background: var(--isl-700); border-color: var(--isl-700); color: #fff;
}
.pesan-baris.punya-sendiri .pesan-lampiran:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }

.percakapan-kosong { text-align: center; padding: 40px 20px; color: hsl(156.000 7.463% calc(var(--l0) + var(--ls) * 60.588%)); }
.percakapan-kosong i { font-size: 32px; color: var(--isl-100); margin-bottom: 10px; display: block; }
.percakapan-kosong p { font-size: 12.5px; margin: 0; }

/* Dua tab pada kartu jalur bimbingan: "Bimbingan Proposal Skripsi" /
   "Bimbingan Skripsi" -- korespondensi tiap tahap disimpan terpisah.
   Tab aktif = fase berjalan; tab lain = arsip (baca-saja). Dipakai di
   portal mahasiswa & portal dosen/Prodi. */
.tab-bimbingan-bar {
    background: var(--permukaan); border-bottom: 1px solid hsl(145.714 16.279% calc(var(--l0) + var(--ls) * 91.569%)); padding-bottom: 6px;
}
.tab-bimbingan {
    list-style: none; margin: 0; padding: 0 8px; display: flex; flex-wrap: wrap;
    gap: 2px; border-bottom: 1px solid hsl(145.714 16.279% calc(var(--l0) + var(--ls) * 91.569%));
}
.tab-bimbingan-bar .tab-bimbingan { border-bottom: none; }
.tab-bimbingan-btn {
    appearance: none; background: transparent; border: none; cursor: pointer;
    padding: 11px 14px 9px; font-size: 13px; font-weight: 600; color: hsl(157.500 7.339% calc(var(--l0) + var(--ls) * 57.255%));
    border-bottom: 3px solid transparent; margin-bottom: -1px;
    transition: color .12s ease, border-color .12s ease;
}
.tab-bimbingan-btn:hover { color: var(--isl-700); }
.tab-bimbingan-btn:focus { outline: none; box-shadow: none; }
.tab-bimbingan-btn.aktif { color: var(--isl-800); border-bottom-color: var(--isl-500); }

/* "Administrasi Umum" -- bilah tab bersama di puncak 4 laman administrasi
   Prodi (kartu .kartu-tab-adm: kepala hijau tua lalu deret tab putih).
   Tiap tab sebenarnya tautan ke laman/alamat masing-masing. */
.kartu-tab-adm .card-header { border-radius: 10px 10px 0 0; }
.tab-adm {
    list-style: none; margin: 0; padding: 0 8px; display: flex; flex-wrap: wrap;
    gap: 2px; background: var(--permukaan); border-radius: 0 0 10px 10px;
}
.tab-adm-btn {
    display: inline-block; padding: 11px 15px 9px; font-size: 13px; font-weight: 600;
    color: hsl(157.500 7.339% calc(var(--l0) + var(--ls) * 57.255%)); text-decoration: none; border-bottom: 3px solid transparent;
    transition: color .12s ease, border-color .12s ease;
}
.tab-adm-btn:hover,
.tab-adm-btn:focus { color: var(--isl-700); text-decoration: none; }
.tab-adm-btn.aktif { color: var(--isl-800); border-bottom-color: var(--isl-500); }

/* Borang Monev KBM -- kolom Ya/Tidak (radio berpasangan) di tabel instrumen. */
.monev-yatid label { margin: 0 4px; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.monev-yatid input { margin-right: 3px; vertical-align: -1px; }

/* Kepala kartu laman Monev: judul kiri, tombol "Cetak Semua" mepet pojok
   kanan, latar putih. `::before/::after` bawaan .card-header dimatikan --
   kalau tidak, pseudo-elemen itu ikut jadi flex-item dan membuat
   space-between menaruh tombol di tengah, bukan di tepi. */
.kepala-monev { display: flex; align-items: center; gap: 12px; }
.kepala-monev::before,
.kepala-monev::after { content: none; }
.btn-cetak-monev {
    flex: 0 0 auto; margin-left: auto; background: var(--permukaan); border: 1px solid #fff;
    color: var(--isl-800); font-size: 12px; font-weight: 600; padding: 4px 12px; line-height: 1.4;
}
.btn-cetak-monev:hover,
.btn-cetak-monev:focus { background: var(--permukaan); border-color: #fff; color: var(--isl-900); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }

/* Kartu jalur bimbingan: kepala kartu (hijau tua) -> strip tab (putih)
   -> tubuh 2 kolom (percakapan | ikhtisar milik tahap tab itu). Ikhtisar
   ada DI DALAM tab, jadi tiap tahap punya ikhtisar sendiri (badge siap,
   ACC awal, tombol Kartu Konsul, Tandai Siap -- semua spesifik tahap).
   REVISI 291. */
.kartu-bimbingan { overflow: hidden; }
.kartu-bimbingan .pb-kepala {
    background: var(--isl-700); color: #fff; padding: 12px 16px;
}
.kartu-bimbingan .pb-kepala-judul {
    font-size: 15px; font-weight: 500; margin: 0; color: #fff; line-height: 1.4;
}

/* Pita "Arsip" tipis di atas panel tahap lalu (portal dosen). */
.pb-arsip-bar {
    background: hsl(40.800 100.000% calc(var(--l0) + var(--ls) * 95.098%)); border-bottom: 1px solid #F1E2BF; color: #8A6D1D;
    padding: 7px 16px; font-size: 12px; font-weight: 600;
}

/* Sub-kepala per-tab (portal mahasiswa): info judul/pembimbing + tombol
   cetak Kartu Konsul tahap itu. */
.pb-subkepala {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    padding: 10px 16px; background: var(--permukaan); border-bottom: 1px solid hsl(156.000 17.241% calc(var(--l0) + var(--ls) * 94.314%));
}
.pb-subkepala-info { flex: 1 1 220px; margin: 0; }
.pb-cetak { flex: 0 0 auto; }
.pb-arsip-badge { flex: 0 0 auto; }

.pb-tubuh { align-items: stretch; }
.pb-kolom-chat { display: flex; flex-direction: column; }
.pb-kaki { border-top: 1px solid hsl(145.714 16.279% calc(var(--l0) + var(--ls) * 91.569%)); padding: 12px 14px; background: var(--permukaan); }
.pb-kolom-ikhtisar { background: hsl(140.000 23.077% calc(var(--l0) + var(--ls) * 97.451%)); border-left: 1px solid hsl(145.714 16.279% calc(var(--l0) + var(--ls) * 91.569%)); }
.pb-ikhtisar-isi { padding: 14px 16px; }
.pb-ikhtisar-judul {
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    color: var(--isl-700); margin: 0 0 10px;
}
/* Baris ikhtisar = flex sebaris: label, nilai, badge, dan tombol
   Acc-kan/Buka semuanya rata-tengah vertikal (align-items) -- tidak lagi
   mengandalkan fudge vertical-align/top yang tak pernah presisi & bikin
   tombol jatuh ke baris bawah. Teks bantu .d-block dipaksa turun sendiri. */
.pb-ikhtisar-baris {
    display: flex; flex-wrap: wrap; align-items: center;
    column-gap: 5px; row-gap: 3px;
    font-size: 12.5px; line-height: 1.35; margin: 0 0 8px;
}
.pb-ikhtisar-baris .badge { margin-left: 0; }
.pb-ikhtisar-baris > .d-block { flex-basis: 100%; margin-top: 2px; }
/* badge + tombol menempel jadi satu gugus -- kalau ruang sempit mereka
   turun BERSAMA ke baris bawah, tetap sejajar satu sama lain. */
.pb-chipset { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex-shrink: 0; }
.pb-ikhtisar-isi hr { margin: 12px 0; border-top-color: hsl(145.714 16.279% calc(var(--l0) + var(--ls) * 91.569%)); }

/* "Acc-kan" / "Batal Acc-kan" / "Buka" / "Kunci Kembali" -- pil kecil
   Prodi, tingginya disepadankan dengan .badge Bootstrap di sebelahnya. */
.pb-acckan {
    display: inline-flex; align-items: center; margin-left: 0;
    padding: 2px 8px; border-radius: 10px;
    font-size: 10.5px; font-weight: 700; line-height: 1;
    background: var(--isl-500); color: #fff; text-decoration: none;
    border: 1px solid var(--isl-500);
}
.pb-acckan:hover { background: var(--isl-700); border-color: var(--isl-700); color: #fff; text-decoration: none; }
.pb-acckan.batal {
    background: transparent; color: #9a6b00; border-color: #E4C36B;
}
.pb-acckan.batal:hover { background: hsl(40.800 100.000% calc(var(--l0) + var(--ls) * 95.098%)); color: #7a5400; }

/* Baris cuplikan korespondensi + penanda Acc pada kartu jalur bimbingan
   (portal mahasiswa) -- flex rata-tengah supaya badge presisi dgn teksnya,
   pola sama .pb-ikhtisar-baris. */
.pb-cuplikan-baris {
    display: flex; flex-wrap: wrap; align-items: center;
    column-gap: 5px; row-gap: 2px;
}
.pb-cuplikan-baris .text-muted { min-width: 0; }
.pb-cuplikan-baris .badge { flex-shrink: 0; }
@media (max-width: 991.98px) {
    .pb-kolom-ikhtisar { border-left: 0; border-top: 1px solid hsl(145.714 16.279% calc(var(--l0) + var(--ls) * 91.569%)); }
}

/* =====================================================================
 * Laman "Pilihan Studi" (portal mahasiswa) -- BARU REVISI 286.
 * Daftar mata kuliah gaya KARTU/DAFTAR, bukan tabel: mayoritas
 * mahasiswa membuka di HP, kolom tabel jadi terlalu sempit. Huruf
 * Kelas PINDAH ke bawah nama mata kuliah; tombol Kelas muncul begitu
 * mata kuliah dicentang. Pilih satu -> hanya yang dipilih tampil;
 * ketuk lagi tombol yang aktif -> semua Kelas muncul kembali
 * (permintaan Bapak persis). Lihat siswa/pilihan_studi.php.
 * ===================================================================== */
.ps-pemisah-tingkat {
    background: var(--isl-050); color: var(--isl-800); font-weight: 700;
    font-size: 12px; padding: 6px 1.25rem; border-top: 1px solid var(--isl-100);
}
.ps-pemisah-tingkat span { font-weight: 400; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); }

.ps-mk { padding: 10px 1.25rem; border-top: 1px solid hsl(156.000 17.241% calc(var(--l0) + var(--ls) * 94.314%)); }
.ps-mk.diambil { background: hsl(156.000 38.462% calc(var(--l0) + var(--ls) * 97.451%)); box-shadow: inset 3px 0 0 var(--isl-500); }
.ps-mk-atas { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; }
.ps-mk-atas input { margin-top: 3px; flex: none; width: 16px; height: 16px; }
.ps-mk-info { display: flex; flex-direction: column; min-width: 0; }
.ps-mk-nama { font-size: 13px; color: hsl(162.857 18.421% calc(var(--l0) + var(--ls) * 14.902%)); line-height: 1.35; }
.ps-mk-nama small { color: hsl(163.333 8.824% calc(var(--l0) + var(--ls) * 60.000%)); font-weight: 400; }
.ps-mk-meta { font-size: 11px; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); margin-top: 2px; }

.ps-kelas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0 26px; }
.ps-kelas-label { font-size: 11px; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); width: 100%; }
.ps-kelas-btn {
    display: inline-flex; align-items: baseline; gap: 6px; text-align: left;
    border: 1px solid var(--isl-200); background: var(--permukaan); color: var(--isl-800);
    border-radius: 999px; padding: 7px 15px; font-size: 12px; line-height: 1.3; cursor: pointer;
}
.ps-kelas-btn b { font-size: 13px; }
.ps-kelas-btn span { color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); font-size: 11px; }
.ps-kelas-btn:hover { border-color: var(--isl-500); }
/* Garis pinggir/fokus saat terpilih -- bawaan peramban hitam, diganti
   hijau tua (permintaan Bapak). */
.ps-kelas-btn:focus,
.ps-kelas-btn:focus-visible { outline: 2px solid var(--isl-900) !important; outline-offset: 1px; }
.ps-kelas-btn.aktif { background: var(--isl-500); border-color: var(--isl-900); color: #fff; }
.ps-kelas-btn.aktif span { color: rgba(255, 255, 255, .85); }
.ps-kelas-btn.sembunyi { display: none; }
.ps-kelas-btn[disabled] { opacity: .55; cursor: default; }
.ps-kelas-btn[disabled]:hover { border-color: var(--isl-200); }

@media (max-width: 575.98px) {
    .ps-kelas-btn { width: 100%; }
}

/* =====================================================================
 * Kehadiran Saya (portal mahasiswa) -- REVISI 287. Rekap PER MATA
 * KULIAH: kisi 16 Pertemuan (14 materi + Pertemuan 8 UTS + Pertemuan
 * 16 UAS), persentase atas 16. Bukan lagi kalender harian.
 * ===================================================================== */
.hadir-ringkas { display: flex; align-items: center; gap: 12px; }
.hadir-ringkas-angka {
    font-size: 30px; font-weight: 700; color: var(--isl-800); line-height: 1; flex: none;
}
.hadir-ringkas-teks { font-size: 12.5px; color: hsl(158.571 7.609% calc(var(--l0) + var(--ls) * 36.078%)); }

.hadir-mk .ks-isi { padding-top: 12px; padding-bottom: 12px; }
.hadir-mk-atas { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hadir-mk-info { display: flex; flex-direction: column; min-width: 0; }
.hadir-mk-nama { font-size: 13px; color: hsl(162.857 18.421% calc(var(--l0) + var(--ls) * 14.902%)); line-height: 1.35; }
.hadir-mk-nama small { color: hsl(163.333 8.824% calc(var(--l0) + var(--ls) * 60.000%)); font-weight: 400; }
.hadir-mk-meta { font-size: 11px; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); margin-top: 2px; }
.hadir-mk-persen { flex: none; text-align: right; line-height: 1.15; }
.hadir-mk-persen b { display: block; font-size: 13px; color: var(--isl-800); }
.hadir-mk-persen span { font-size: 11px; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); }
.hadir-mk-kaki { font-size: 11.5px; margin-top: 6px; }

.hadir-strip { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.hadir-sel {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 6px; flex: none;
    font-size: 10.5px; font-weight: 600; border: 1px solid transparent;
}
.hadir-sel.kosong { background: hsl(160.000 11.111% calc(var(--l0) + var(--ls) * 94.706%)); color: hsl(163.333 8.824% calc(var(--l0) + var(--ls) * 60.000%)); border-color: hsl(160.000 11.111% calc(var(--l0) + var(--ls) * 89.412%)); }
.hadir-sel.h { background: var(--isl-500); color: #fff; }
.hadir-sel.t { background: #C62828; color: #fff; }
.hadir-sel.ujian { border-color: var(--isl-900); border-width: 2px; font-size: 9px; }

.hadir-legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: hsl(158.571 7.609% calc(var(--l0) + var(--ls) * 36.078%)); }
.hadir-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.hadir-legenda .hadir-sel { width: 16px; height: 16px; border-radius: 4px; }

/* Kolom UTS/UAS di Rekap Kehadiran Semester (sisi dosen) -- tint tipis. */
.kol-ujian { background: var(--isl-050); }

/* =====================================================================
 * Jadwal Perkuliahan (portal mahasiswa) -- daftar per hari; tiap baris
 * kuliah: kolom Jam kiri + rincian kanan, menumpuk sendiri di HP.
 * ===================================================================== */
.jk-baris { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid hsl(156.000 17.241% calc(var(--l0) + var(--ls) * 94.314%)); }
.jk-baris:first-child { border-top: 0; padding-top: 2px; }
.jk-jam { flex: none; width: 96px; font-size: 11.5px; color: var(--isl-800); }
.jk-jam b { display: block; font-size: 12px; line-height: 1.3; }
.jk-jam span { color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); }
.jk-isi { min-width: 0; }
.jk-mk { font-size: 13px; font-weight: 600; color: hsl(162.857 18.421% calc(var(--l0) + var(--ls) * 14.902%)); line-height: 1.35; }
.jk-mk small { color: hsl(163.333 8.824% calc(var(--l0) + var(--ls) * 60.000%)); font-weight: 400; }
.jk-meta { font-size: 11.5px; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); margin-top: 2px; }
.jk-dosen { font-size: 11.5px; color: var(--isl-800); margin-top: 2px; }
.jk-catatan { font-size: 11px; color: #C98A00; margin-top: 2px; }

@media (max-width: 480px) {
    .jk-baris { flex-direction: column; gap: 3px; }
    .jk-jam { width: auto; }
    .jk-jam b { display: inline; }
    .jk-jam b::after { content: " \00b7"; color: hsl(160.000 8.936% calc(var(--l0) + var(--ls) * 46.078%)); }
}

/* Tautan "Cetak / Unduh Kartu Konsultasi" -- di bawah tombol Kartu
   Konsul pada laman Bimbingan (REVISI 288). Tautan datar, bukan tombol
   penuh, supaya tidak menyaingi tombol utama di atasnya. */
.tautan-cetak-konsul {
    display: block; text-align: center; margin-top: 6px;
    font-size: 12px; color: var(--isl-800); text-decoration: none;
}
.tautan-cetak-konsul:hover { color: var(--isl-900); text-decoration: underline; }

/* Lencana status "Pembimbing 1/2: [Belum/ACC/Siap]" pada kartu Pengajuan
   Ujian mahasiswa -- .badge Bootstrap duduk sedikit di bawah garis teks;
   disejajarkan ke tengah baris + naik 1px (permintaan Bapak "presisikan"). */
.baris-status-pemb .badge { vertical-align: middle; position: relative; top: -1px; }

/* ============================================================
   Diskusi / chat di bawah materi & tugas (kelas/_diskusi.php).
   Dipakai bersama portal dosen dan portal mahasiswa.
   ============================================================ */
.diskusi-aliran { display: flex; flex-direction: column; gap: 10px; }
.diskusi-pesan {
    border: 1px solid var(--isl-100, hsl(158.571 21.875% calc(var(--l0) + var(--ls) * 87.451%)));
    border-radius: 10px;
    padding: 8px 12px;
    background: var(--permukaan);
    max-width: 85%;
}
.diskusi-pesan.diskusi-saya {
    align-self: flex-end;
    background: var(--isl-050, hsl(157.500 30.769% calc(var(--l0) + var(--ls) * 94.902%)));
    border-color: var(--isl-200, hsl(161.250 31.373% calc(var(--l0) + var(--ls) * 80.000%)));
}
.diskusi-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 11.5px;
    margin-bottom: 3px;
}
.diskusi-nama { font-weight: 700; color: var(--isl-800, #0f5c48); }
.diskusi-waktu { font-size: 11px; }
.diskusi-hapus { color: #B98A86; margin-left: 4px; font-size: 11px; transition: color .12s; }
.diskusi-hapus:hover { color: #DC3545; }
.diskusi-isi { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }

/* =====================================================================
 * <input type="file"> tak berbingkai: padding kiri dari .form-control-sm
 * membuat tombol "Choose File" masuk ~8px, tampak tidak sejajar dengan
 * label & keterangan di atas/bawahnya (paling kentara di portal
 * mahasiswa: Pengajuan Judul/Proposal/Skripsi). Ratakan ke tepi.
 * ===================================================================== */
.form-control-file.form-control-sm { padding-left: 0; padding-right: 0; }

/* Tombol aksi HANYA-IKON di pojok kanan kepala kartu (Ekspor/Impor/
   Bersihkan/Buatkan Akun/Kelola PA) -- kotak putih seukuran, ikon di
   tengah, tanpa teks, supaya tidak berjejer panjang. */
.btn-ikon-kepala {
    width: 32px; padding-left: 0; padding-right: 0; text-align: center;
}
.btn-ikon-kepala > i { margin: 0; }

/*
 * Sel kosong Grid Jadwal kini BISA DIKLIK -- penyusunan jadwal dikerjakan
 * langsung di dalam grid (permintaan Bapak), bukan lagi lewat kartu
 * "Belum Terjadwal" di atas. Tanda "+" sengaja samar saat diam supaya
 * grid tidak jadi ramai titik biru, lalu menegas begitu disentuh kursor.
 */
a.slot-kosong.tautan-isi-slot {
    color: hsl(150.000 7.273% calc(var(--l0) + var(--ls) * 78.431%));
    text-decoration: none;
    border-radius: 4px;
    padding: 2px 6px;
    transition: background-color .12s, color .12s;
}
a.slot-kosong.tautan-isi-slot:hover,
a.slot-kosong.tautan-isi-slot:focus {
    color: #146C43;
    background: hsl(152.727 31.429% calc(var(--l0) + var(--ls) * 93.137%));
    text-decoration: none;
}



/*
 * Daftar kandidat di modal "Isi Slot". SENGAJA bukan <select>: nama mata
 * kuliah + nama dosen kerap lebih panjang daripada lebar modal, dan
 * <option> tidak bisa turun baris sehingga teksnya terpotong di kanan
 * (dilaporkan Bapak). Baris biasa bisa dibungkus dua baris sekaligus
 * memberi tempat bagi label alasan bentrok.
 */
.daftar-kandidat {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid hsl(210.000 13.953% calc(var(--l0) + var(--ls) * 83.137%));
    border-radius: .2rem;
    background: var(--permukaan);
}
.kandidat-baris {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid hsl(150.000 12.500% calc(var(--l0) + var(--ls) * 93.725%));
    background: transparent;
    padding: 7px 10px;
    line-height: 1.35;
    cursor: pointer;
}
.kandidat-baris:last-child { border-bottom: 0; }
/*
 * Sorotan kursor SENGAJA tidak berlaku pada baris terpilih. Tanpa
 * :not(.terpilih), latar hijau baris terpilih tertimpa hijau muda
 * begitu kursor lewat -- tulisannya yang putih jadi nyaris hilang
 * (dilaporkan Bapak). Baris terpilih punya sorotannya sendiri: hijau
 * yang sedikit lebih tua, jadi tetap terasa disentuh kursor.
 */
.kandidat-baris:hover:not(:disabled):not(.terpilih) { background: hsl(152.727 31.429% calc(var(--l0) + var(--ls) * 93.137%)); }

/*
 * Baris terpilih MEMAKAI garis pemisah yang sama seperti baris lain.
 * Sempat dihilangkan karena disangka sumber "garis hitam" -- ternyata
 * yang hitam itu cincin fokus bawaan peramban (lihat aturan :focus di
 * bawah). Begitu cincinnya dimatikan, garis pemisahnya justru perlu
 * dikembalikan supaya barisnya tidak menyatu dengan tetangganya
 * (koreksi Bapak).
 */
.kandidat-baris.terpilih { background: #146C43; }
.kandidat-baris.terpilih:hover { background: #115C39; }
.kandidat-baris.terpilih .kandidat-judul { color: #fff; }
.kandidat-baris.terpilih .kandidat-meta  { color: hsl(150.000 31.579% calc(var(--l0) + var(--ls) * 85.098%)); }
.kandidat-baris.terpilih .kandidat-alasan { background: var(--permukaan); }

.kandidat-judul {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: hsl(154.286 16.667% calc(var(--l0) + var(--ls) * 16.471%));
    white-space: normal;
    word-break: break-word;
}
.kandidat-meta {
    display: block;
    font-size: 11px;
    color: hsl(161.538 5.138% calc(var(--l0) + var(--ls) * 50.392%));
    white-space: normal;
    word-break: break-word;
}
.kandidat-alasan {
    display: inline-block;
    margin-top: 3px;
    font-size: 10.5px;
    color: #B02A37;
    background: hsl(0.000 73.333% calc(var(--l0) + var(--ls) * 97.059%));
    border-radius: 3px;
    padding: 1px 6px;
}
.kandidat-baris:disabled { cursor: not-allowed; }
.kandidat-baris:disabled .kandidat-judul { color: #B02A37; font-weight: 500; }
.kandidat-baris:disabled .kandidat-meta { color: #C08A90; }

.kandidat-kosong {
    padding: 14px 10px;
    font-size: 12px;
    color: hsl(161.538 5.138% calc(var(--l0) + var(--ls) * 50.392%));
    text-align: center;
}

/*
 * Cincin fokus bawaan peramban pada baris kandidat DIMATIKAN. Karena
 * barisnya berupa <button>, sekali diklik ia memegang fokus -- dan
 * peramban menggambar garis hitam mengelilinginya, yang di atas latar
 * hijau baris terpilih terlihat seperti bingkai hitam (dilaporkan
 * Bapak: hilang saat kursor menjauh, muncul lagi saat disentuh).
 *
 * Diganti penanda fokus yang hanya muncul untuk penjelajahan PAPAN
 * TIK (:focus-visible), supaya yang memakai Tab tetap tahu posisinya.
 */
.kandidat-baris:focus { outline: none; box-shadow: none; }
.kandidat-baris:focus-visible {
    outline: 2px solid #146C43;
    outline-offset: -2px;
}
.kandidat-baris.terpilih:focus-visible { outline-color: hsl(0.000 0.000% calc(var(--l0) + var(--ls) * 100.000%)); }

/* Keterangan slot yang sedang diisi -- dulu teks polos berikon peniti. */
.tajuk-slot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: hsl(152.727 31.429% calc(var(--l0) + var(--ls) * 93.137%));
    border: 1px solid hsl(148.571 28.000% calc(var(--l0) + var(--ls) * 85.294%));
    border-radius: 999px;
    padding: 4px 12px 4px 10px;
    font-size: 12.5px;
    color: #14543A;
}
.tajuk-slot i { font-size: 12px; opacity: .75; }

/*
 * Slot yang sudah DIANTREKAN tapi belum disimpan. Sengaja dibedakan
 * tegas dari slot yang sudah tersimpan (garis putus-putus + latar
 * kuning muda): selama tombol "Simpan N slot" belum ditekan, isian ini
 * belum ada di basis data, dan itu harus terlihat sekilas.
 */
.slot-antre {
    position: relative;
    border: 1px dashed #C9A227;
    background: hsl(48.571 100.000% calc(var(--l0) + var(--ls) * 95.882%));
    border-radius: 5px;
    padding: 5px 22px 5px 7px;
    font-size: 11px;
    line-height: 1.35;
    color: #6B5A12;
}
.slot-antre b { font-size: 11.5px; color: #4A3F0C; }
.slot-antre span { font-size: 10px; }

.slot-antre-batal {
    position: absolute;
    top: 3px;
    right: 3px;
    border: 0;
    background: transparent;
    color: #B08D1E;
    font-size: 11px;
    line-height: 1;
    padding: 2px 4px;
    cursor: pointer;
}
.slot-antre-batal:hover { color: #B02A37; }

/* =====================================================================
   MODE GELAP — penimpa permukaan
   AdminLTE & Bootstrap menuliskan #fff LANGSUNG, jadi variabel saja
   tidak menyentuhnya. Semua diikat ke html[data-mode="gelap"] sehingga
   mode terang tidak tersentuh sama sekali.
   ===================================================================== */

/* Bilah sisi & navbar SUDAH gelap sejak mode terang -- teksnya sudah
   terang. Membalik kecerahannya lagi membuat label menu lenyap
   (gelap di atas gelap). Keduanya dikembalikan ke nilai mode terang. */
html[data-mode="gelap"] .sidebar-isl,
html[data-mode="gelap"] .navbar-isl {
    --l0: 0%; --ls: 1;
    --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;
    /* --permukaan ikut dikembalikan: sejak seluruh `background:#fff`
       diganti var(--permukaan), latar putih di dalam dua komponen ini
       (mis. kotak putih kecil pada lencana) akan ikut menggelap kalau
       variabelnya tidak dipulihkan di sini. */
    --permukaan: #ffffff; --permukaan-2: #F2F6F4; --permukaan-3: #F7FAF8;
    --teks: #212529; --teks-redup: #6B8079; --garis: #E6EDE9;
}

html[data-mode="gelap"] body,
html[data-mode="gelap"] .content-wrapper,
html[data-mode="gelap"] .main-footer {
    background: var(--permukaan-2); color: var(--teks);
}

html[data-mode="gelap"] .card,
html[data-mode="gelap"] .card-header,
html[data-mode="gelap"] .card-footer,
html[data-mode="gelap"] .card-body {
    background: var(--permukaan); color: var(--teks); border-color: var(--garis);
}
html[data-mode="gelap"] .card-isl > .card-header { color: #fff; }

html[data-mode="gelap"] .table { color: var(--teks); }
html[data-mode="gelap"] .table th,
html[data-mode="gelap"] .table td { border-color: var(--garis); }
html[data-mode="gelap"] .table thead th { background: var(--permukaan-3); color: var(--teks); }
html[data-mode="gelap"] .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.028); }
html[data-mode="gelap"] .table-hover tbody tr:hover { background: rgba(255,255,255,.055); color: var(--teks); }

/* Isian borang, termasuk kotak pencarian dan daftar pilihan.
   Bapak: "form pencarian masih terang sehingga justru menyilaukan
   mata ... pilihan kursor para borang borang masih ada yang terlihat
   putih terang." */
html[data-mode="gelap"] .form-control,
html[data-mode="gelap"] .custom-select,
html[data-mode="gelap"] .custom-file-label,
html[data-mode="gelap"] input[type="text"],
html[data-mode="gelap"] input[type="search"],
html[data-mode="gelap"] input[type="number"],
html[data-mode="gelap"] input[type="date"],
html[data-mode="gelap"] input[type="time"],
html[data-mode="gelap"] input[type="email"],
html[data-mode="gelap"] input[type="password"],
html[data-mode="gelap"] select,
html[data-mode="gelap"] textarea,
html[data-mode="gelap"] .kotak-cari,
html[data-mode="gelap"] .kombo-kotak {
    background: var(--permukaan-3) !important;
    border-color: var(--garis);
    color: var(--teks);
}
html[data-mode="gelap"] .form-control:focus,
html[data-mode="gelap"] select:focus,
html[data-mode="gelap"] textarea:focus { color: var(--teks); border-color: var(--isl-500); }
html[data-mode="gelap"] .form-control::placeholder,
html[data-mode="gelap"] input::placeholder { color: var(--teks-redup); }
html[data-mode="gelap"] option { background: var(--permukaan-3); color: var(--teks); }
html[data-mode="gelap"] .input-group-text {
    background: var(--permukaan-3); border-color: var(--garis); color: var(--teks-redup);
}
html[data-mode="gelap"] .kombo-item:hover,
html[data-mode="gelap"] .kombo-item.aktif { background: var(--permukaan); }

html[data-mode="gelap"] .dropdown-menu {
    background: var(--permukaan); border-color: var(--garis); color: var(--teks);
}
html[data-mode="gelap"] .dropdown-item { color: var(--teks); }
html[data-mode="gelap"] .dropdown-item:hover,
html[data-mode="gelap"] .dropdown-item:focus { background: var(--permukaan-3); color: var(--teks); }
html[data-mode="gelap"] .dropdown-divider { border-color: var(--garis); }

html[data-mode="gelap"] .modal-content { background: var(--permukaan); color: var(--teks); border-color: var(--garis); }
html[data-mode="gelap"] .modal-header,
html[data-mode="gelap"] .modal-footer { border-color: var(--garis); }
html[data-mode="gelap"] .close { color: var(--teks); text-shadow: none; opacity: .7; }

/* Bilah tab pada kartu. Bapak: "tab tab pada kartu kabur teksnya
   karena putih." */
html[data-mode="gelap"] .nav-tabs { border-color: var(--garis); }
html[data-mode="gelap"] .nav-tabs .nav-link { color: var(--teks-redup); background: transparent; }
html[data-mode="gelap"] .nav-tabs .nav-link:hover { border-color: var(--garis); color: var(--teks); }
html[data-mode="gelap"] .nav-tabs .nav-link.active {
    background: var(--permukaan); color: var(--teks);
    border-color: var(--garis) var(--garis) var(--permukaan);
}
html[data-mode="gelap"] .nav-pills .nav-link { color: var(--teks-redup); }

/* Tombol beroutline: latar putih saat disentuh kursor mengaburkan
   ikonnya. Bapak: "di tombol tombol bimbingan, ketika dikursor, putih
   juga mengaburkan icon di tombol itu." */
html[data-mode="gelap"] .btn-light,
html[data-mode="gelap"] .btn-outline-light {
    background: var(--permukaan-3); border-color: var(--garis); color: var(--teks);
}
html[data-mode="gelap"] .btn-light:hover,
html[data-mode="gelap"] .btn-outline-light:hover { background: var(--permukaan); color: var(--teks); }
html[data-mode="gelap"] .btn-outline-secondary { color: var(--teks-redup); border-color: var(--garis); }
html[data-mode="gelap"] .btn-outline-secondary:hover { background: var(--permukaan-3); color: var(--teks); }

html[data-mode="gelap"] .text-muted { color: var(--teks-redup) !important; }
html[data-mode="gelap"] hr { border-color: var(--garis); }
html[data-mode="gelap"] .list-group-item { background: var(--permukaan); border-color: var(--garis); color: var(--teks); }
html[data-mode="gelap"] .badge-light { background: var(--permukaan-3); color: var(--teks); }
html[data-mode="gelap"] .breadcrumb { background: var(--permukaan-3); }
html[data-mode="gelap"] .bg-white,
html[data-mode="gelap"] .bg-light { background: var(--permukaan) !important; color: var(--teks); }

/* Penomoran halaman bawaan Bootstrap (.page-link di luar .pager-isl). */
html[data-mode="gelap"] .page-link {
    background: var(--permukaan); border-color: var(--garis); color: var(--teks);
}
html[data-mode="gelap"] .page-link:hover { background: var(--permukaan-3); color: var(--teks); }
html[data-mode="gelap"] .page-item.disabled .page-link {
    background: var(--permukaan); color: var(--teks-redup);
}

/* Keadaan HOVER yang berlatar terang. Pemindaian statis tidak
   menangkap ini -- Bapak yang menemukannya: "di tombol tombol
   bimbingan, ketika dikursor, putih juga mengaburkan icon di tombol
   itu." */
html[data-mode="gelap"] .btn:hover,
html[data-mode="gelap"] .btn:focus { color: inherit; }
html[data-mode="gelap"] .btn-outline-primary:hover,
html[data-mode="gelap"] .btn-outline-info:hover,
html[data-mode="gelap"] .btn-outline-dark:hover { color: #fff; }
html[data-mode="gelap"] a:hover { color: var(--isl-500); }
html[data-mode="gelap"] .list-group-item-action:hover { background: var(--permukaan-3); color: var(--teks); }
html[data-mode="gelap"] tr:hover .btn-light { background: var(--permukaan); }

/* Baris tabel berkonteks bawaan Bootstrap. Cuma .table-danger yang
   dipakai aplikasi ini (sekali), tapi keempatnya ditimpa sekalian
   supaya tidak jadi ranjau kalau kelak dipakai: aslinya semuanya
   berlatar pastel terang yang menyilaukan di mode gelap. Warnanya
   dijaga (merah tetap merah) lewat rgba tipis di atas permukaan
   gelap, jadi maknanya tidak hilang. */
html[data-mode="gelap"] .table-danger,
html[data-mode="gelap"] .table-danger > td,
html[data-mode="gelap"] .table-hover .table-danger:hover > td { background: rgba(198,40,40,.22); color: var(--teks); }
html[data-mode="gelap"] .table-warning,
html[data-mode="gelap"] .table-warning > td { background: rgba(224,138,0,.20); color: var(--teks); }
html[data-mode="gelap"] .table-success,
html[data-mode="gelap"] .table-success > td { background: rgba(29,158,117,.20); color: var(--teks); }
html[data-mode="gelap"] .table-info,
html[data-mode="gelap"] .table-info > td { background: rgba(47,134,201,.20); color: var(--teks); }
html[data-mode="gelap"] .table-light,
html[data-mode="gelap"] .table-light > td,
html[data-mode="gelap"] .table-secondary,
html[data-mode="gelap"] .table-secondary > td,
html[data-mode="gelap"] .table-active,
html[data-mode="gelap"] .table-active > td { background: var(--permukaan-3); color: var(--teks); }

/* Amber pekat menyilaukan di mode gelap. Warnanya TIDAK dibuang --
   maknanya "peringatan/perhatian" harus tetap terbaca -- melainkan
   dibalik polanya: dari amber pekat berteks gelap, jadi latar gelap
   beramber tipis dengan TEKS amber. Sama menonjolnya di antara
   permukaan gelap, tanpa menyakiti mata.
   Bapak: "di mode gelap ini ... justru menyilaukan mata." */
html[data-mode="gelap"] .badge-warning {
    background: rgba(255, 193, 7, .16);
    color: #FFC94D;
}
html[data-mode="gelap"] .ikon-pemisah-dosen {
    background: rgba(255, 193, 7, .18);
    color: #FFC94D;
}
html[data-mode="gelap"] .baris-pemisah-dlb td {
    background: rgba(255, 193, 7, .10);
    color: #FFC94D;
}

/*
 * DUA cacat yang saya buat sendiri di mode gelap, ketahuan lewat
 * pemburu teks-menyengat (kontras teks >14:1):
 *
 * 1. Penimpa `.card-header { background: var(--permukaan) }` di atas
 *    ikut mengenai .card-isl > .card-header -- kepala kartu berwarna
 *    LEMBAGA jadi ikut gelap, sementara teksnya tetap putih. Hasilnya
 *    putih di atas gelap, 15,5:1, menyengat. Hijaunya dikembalikan;
 *    putih di atas hijau cuma 6,2:1.
 *
 * 2. Pengecualian navbar membuat menu-turunnya (pemilih periode &
 *    Akunku) tetap PUTIH dengan teks gelap 15,4:1. Panel putih yang
 *    menyembul di tengah laman gelap justru sumber silau terburuk.
 *    Pengecualian hanya berlaku untuk BILAH-nya, bukan panel yang
 *    keluar darinya.
 */
html[data-mode="gelap"] .card-isl > .card-header {
    background: var(--isl-700);
    border-color: var(--isl-700);
    color: #fff;
}

html[data-mode="gelap"] .navbar-isl .dropdown-menu {
    --l0: 93%; --ls: -0.85;
    --isl-950: #04110E; --isl-900: #C6D5CE; --isl-800: #A8BDB4;
    --isl-700: #0F6E56; --isl-600: #16A47F; --isl-500: #1FBE90;
    --isl-300: #33534A; --isl-200: #294038; --isl-100: #20302A;
    --isl-050: #1A2723;
    --permukaan: #1A2723; --permukaan-2: #131E1A; --permukaan-3: #1F2E29;
    --teks: #C6D5CE; --teks-redup: #8FA39B; --garis: #2A3A34;
    background: var(--permukaan);
    border-color: var(--garis);
    color: var(--teks);
}
html[data-mode="gelap"] .navbar-isl .dropdown-menu .dropdown-item,
html[data-mode="gelap"] .navbar-isl .dropdown-menu label,
html[data-mode="gelap"] .navbar-isl .dropdown-menu .akun-nama { color: var(--teks); }
html[data-mode="gelap"] .navbar-isl .dropdown-menu .dropdown-item:hover,
html[data-mode="gelap"] .navbar-isl .dropdown-menu .dropdown-item:focus { background: var(--permukaan-3); }
html[data-mode="gelap"] .navbar-isl .dropdown-menu .form-control,
html[data-mode="gelap"] .navbar-isl .dropdown-menu select,
html[data-mode="gelap"] .navbar-isl .dropdown-menu option {
    background: var(--permukaan-3) !important; color: var(--teks); border-color: var(--garis);
}
html[data-mode="gelap"] .navbar-isl .dropdown-divider { border-color: var(--garis); }

/*
 * Baris selang-seling & baris terkursor pada tabel Pengajuan Judul.
 *
 * Kurva baru sudah menyelamatkan keduanya dari hitam pekat, tapi di
 * mode terang jaraknya cuma 94,51% vs 95,69% -- terbalik jadi 12,7%
 * vs 11,7%, nyaris kembar, sehingga hover nyaris tak terasa. Di mode
 * terang selisih setipis itu memang cukup; di atas permukaan gelap
 * tidak.
 *
 * Jadi keduanya diberi nada eksplisit yang BERTINGKAT jelas, diukur
 * terhadap permukaan kartu (#1A2723, kecerahan 13,5%):
 *   kartu        13,5%
 *   baris genap  17%    -- terasa berselang, tidak mencolok
 *   terkursor    24%    -- jelas terangkat
 * Arahnya sengaja LEBIH TERANG, bukan lebih gelap: di mode gelap,
 * "terangkat" dibaca mata sebagai lebih terang, sama seperti "lebih
 * gelap" dibaca terangkat di mode terang.
 */
html[data-mode="gelap"] .baris-kasus-genap > td { background-color: hsl(150 8% 17%); }
html[data-mode="gelap"] tr.baris-kasus-hover > td { background-color: hsl(150 12% 24%); }

/* Pola yang sama pada tabel Jodohkan -- hover-nya juga tertulis
   sebagai warna nyaris-putih (98,63%), jadi terbalik ia lebih GELAP
   daripada permukaannya dan hover terasa tenggelam, bukan terangkat. */
html[data-mode="gelap"] .tabel-jodoh tr:hover td { background: hsl(160 12% 24%); }

/* Kelas garis bawaan Bootstrap (#dee2e6) tidak pernah lewat variabel,
   jadi ia tetap terang di mode gelap -- terlihat sebagai garis putih
   tipis di kaki laman dan di bawah beberapa kartu. Penanda tab aktif
   SENGAJA tidak diikutkan: hijaunya memang penanda, bukan garis pemisah. */
html[data-mode="gelap"] .main-footer,
html[data-mode="gelap"] .border,
html[data-mode="gelap"] .border-top,
html[data-mode="gelap"] .border-right,
html[data-mode="gelap"] .border-bottom,
html[data-mode="gelap"] .border-left { border-color: var(--garis) !important; }

/*
 * PENGEMBALIAN jarak tepi untuk kepala baris-kedua yang MEMANG di tepi.
 *
 * Pembatasan ke tr:first-child di atas benar untuk laman Pengajuan
 * Judul (baris-1 berakhir dengan sel ber-rowspan, jadi "Prodi" di
 * baris-2 ada di TENGAH tabel). Tapi ia terlalu luas: pada
 * kelas/kehadiran_semester dan pengaturan/_tab_akses_laman, baris-1
 * berakhir dengan COLSPAN, sehingga sel terakhir baris-2 benar-benar
 * menyentuh tepi kanan tabel -- dan tanpa aturan ini ia kehilangan
 * padding-nya, lalu meleset 7,6px dari isi di bawahnya. Persis cacat
 * yang baru saja dibetulkan, cuma terbalik arah.
 *
 * :has() dipakai supaya CSS sendiri yang memutuskan: "kalau baris
 * pertama TIDAK berakhir dengan sel ber-rowspan, berarti baris kedua
 * yang memegang tepi." Tanpa ini, dua view itu harus disunting satu
 * per satu di dalam loop PHP-nya.
 *
 * Peramban lama yang belum kenal :has() cukup mengabaikan aturan ini --
 * hasilnya sama dengan keadaan sebelum aturan ini ada, bukan rusak.
 */
.card .table > thead:not(:has(> tr:first-child > th:last-child[rowspan])) > tr:not(:first-child) > th:last-child {
    padding-right: 1.25rem;
}
.card .table > thead:not(:has(> tr:first-child > th:first-child[rowspan])) > tr:not(:first-child) > th:first-child {
    padding-left: 1.25rem;
}

/* =====================================================================
   MODE GELAP — nada 800/900 yang dipakai sebagai LATAR
   ---------------------------------------------------------------------
   Peran --isl-800 dan --isl-900 DIBALIK di mode gelap: dari nada
   paling gelap (teks di atas kertas putih) menjadi nada TERANG (teks di
   atas permukaan gelap). Itu benar untuk pemakaian sebagai warna teks
   -- dan memang di situlah keduanya paling banyak dipakai.
   Tapi ada 15 tempat yang memakainya sebagai LATAR atau GARIS, dan di
   sana pembalikan itu justru merusak: latar yang semestinya pekat
   berubah jadi terang, lalu teks putih di atasnya hilang.
   Bapak menemukannya di dua tempat sekaligus: "tombol saring dikursor,
   ia berubah menjadi putih dan mengaburkan teksnya" dan "di portal
   mahasiswa ... banyak yang terlihat menyala."
   Lima dari 15 itu milik bilah sisi, yang sudah dikecualikan sejak
   awal; satu milik laman Masuk yang tidak mengenal mode. Sisanya
   ditimpa di bawah ini -- semuanya dikembalikan ke hijau lembaga, nada
   yang memang tidak ikut dibalik.
   ===================================================================== */

/* Tombol lembaga saat dikursor -- INI tombol "Saring". */
html[data-mode="gelap"] .btn-isl:hover,
html[data-mode="gelap"] .btn-isl:focus {
    /* #117E62, BUKAN var(--isl-600). Di mode terang hover tombol ini
       lebih GELAP daripada keadaan diamnya; di mode gelap arah itu
       dibalik jadi lebih terang, sebab "lebih gelap" akan tenggelam ke
       permukaan. Tapi --isl-600 (#16A47F) terlalu terang: teks putih di
       atasnya cuma berkontras 3,16:1, di bawah ambang 4,5. Nilai ini
       dipilih lewat pengukuran -- ia nada paling terang dari hue yang
       sama yang masih memberi 5,02:1, jelas berubah dari 6,20:1 saat
       diam sehingga hover tetap terasa. */
    background: #117E62;
    border-color: #117E62;
    color: #fff;
}

/* Kepala kartu/panel di portal mahasiswa & dosen. */
html[data-mode="gelap"] .kartu-dinilai .kepala-bahan,
html[data-mode="gelap"] .panel-besok .ph-kepala {
    background: var(--isl-700);
    color: #fff;
}
html[data-mode="gelap"] .kepala-ujian {
    background: linear-gradient(135deg, var(--isl-700), var(--isl-600));
    color: #fff;
}

/* Garis penanda terpilih -- dibalik jadi terang justru bagus di sini,
   tapi 900 terlalu pucat; dipakai hijau aksen supaya jelas "terpilih". */
html[data-mode="gelap"] .ps-kelas-btn.aktif,
html[data-mode="gelap"] .hadir-sel.ujian { border-color: var(--isl-500); }

/*
 * Alur Skripsi (portal mahasiswa) — lingkaran & segmen gradasi.
 *
 * Warnanya dihitung di PHP (gradasi_warna_langkah(), kuning #ffc107 ->
 * hijau #1D9E75) lalu ditulis sebagai gaya SEBARIS. Peladen tidak tahu
 * mode peramban, jadi ia tidak bisa menyesuaikan sendiri, dan gaya
 * sebaris tidak bisa ditimpa aturan biasa.
 *
 * Diredam dengan filter, bukan !important: gradasinya tetap utuh --
 * urutan kuning->hijau masih terbaca sebagai kemajuan -- cuma
 * terangnya diturunkan supaya tidak menyala di atas permukaan gelap.
 * Ujung kuningnya turun dari luminansi 0,60 ke sekitar 0,41.
 */
html[data-mode="gelap"] .alur-gradasi .alur-bulat,
html[data-mode="gelap"] .alur-gradasi .alur-langkah::before { filter: brightness(.78); }