/* =============================================================
   aset/portal.css — tampilan portal (v0.19.0: tema terang "Lapis Terang" + mode gelap "Zellige Malam").
   * Semua warna lewat TOKEN di :root (terang, bawaan) dan [data-tema="gelap"]. Kelas lain hanya memakai token,
     jadi menambah atau mengubah warna cukup di dua blok token ini.
   * Atribut data-tema di <html> diisi server dari cookie portal_tema (tanpa kedipan); tombol tema di portal.js.
   * Properti logis (inline/block) supaya bahasa Arab (rtl) otomatis terbalik. Cetak selalu memakai tema terang.
   ============================================================= */
:root {
  --latar: #F4F6FA; --panel: #FFFFFF; --panel-2: #F7F9FC; --sidebar: #FFFFFF;
  --garis: #E1E6EF; --garis-halus: #EEF1F7; --garis-tegas: #D6DCE7;
  --teks: #141B2D; --redup: #5B6478; --teks-nav: #2B3347;
  --utama: #2448C9; --utama-tua: #16308F; --utama-muda: #EAF0FF; --pada-utama: #FFFFFF;
  --perhatian: #C2410C; --perhatian-muda: #FDEBDF; --perhatian-teks: #9A3412;
  --sukses-muda: #E3F4EA; --sukses-teks: #1F6B3E;
  --bahaya: #B42318; --bahaya-muda: #FBE6E4; --bahaya-teks: #A01F15;
  --info-muda: #EAF0FF; --info-teks: #1D3FAE;
  --input-latar: #FFFFFF; --bayang: 0 1px 2px rgba(20, 27, 45, .10);
  --hadir: #1F6B3E; --izin: #2251D1; --sakit: #B4530E; --alpa: #B42318;
  --radius: 12px; --lebar-menu: 248px;
  --huruf: "Albert Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", Tahoma, sans-serif;
  --huruf-angka: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
  font-family: var(--huruf);
  color: var(--teks); background: var(--latar);
}
[data-tema="gelap"] {
  --latar: #071A15; --panel: #0D2620; --panel-2: #0A221C; --sidebar: #0A221C;
  --garis: #1B3B33; --garis-halus: #16332B; --garis-tegas: #1F5245;
  --teks: #E7F2EE; --redup: #93B3A9; --teks-nav: #D2E4DD;
  --utama: #3CC9B4; --utama-tua: #5FE0CC; --utama-muda: #123A31; --pada-utama: #052019;
  --perhatian: #F0B23A; --perhatian-muda: #3A2A0B; --perhatian-teks: #F5C66A;
  --sukses-muda: #12392E; --sukses-teks: #6FE3B8;
  --bahaya: #F27466; --bahaya-muda: #3B1714; --bahaya-teks: #F8A399;
  --info-muda: #13304A; --info-teks: #9CC3F5;
  --input-latar: #0A221C; --bayang: none;
  --hadir: #3FBF7F; --izin: #6D9CF5; --sakit: #F0A04B; --alpa: #EF5B4C;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; background: var(--latar); color: var(--teks); }
a { color: var(--utama); }
[data-tema="gelap"] a { color: var(--utama-tua); }
h1 { font-size: 24px; font-weight: 700; margin: 0 0 16px; }
h2 { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 16px 0 4px; }
.redup { color: var(--redup); }
.kecil { font-size: 13px; }
.angka { font-family: var(--huruf-angka); }
.tabel, .data dd, .paging { font-variant-numeric: tabular-nums; }
.tersembunyi { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sebaris { display: inline; margin: 0; }
:focus-visible { outline: 2px solid var(--utama); outline-offset: 2px; }

/* Pita lingkungan uji dan "masuk sebagai" */
.pita-uji { background: #7A2E0E; color: #fff; text-align: center; font-size: 13px; font-weight: 700; padding: 4px 12px; }
.pita-sebagai { background: var(--perhatian-muda); color: var(--perhatian-teks); padding: 8px 16px; display: flex; gap: 12px; align-items: center; justify-content: center; font-weight: 600; }

/* Kerangka: menu samping (merek di atas) + kolom utama (bilah atas, isi, kaki) */
.kerangka { flex: 1; display: flex; min-block-size: 0; }
.menu-samping { inline-size: var(--lebar-menu); flex-shrink: 0; background: var(--sidebar); border-inline-end: 1px solid var(--garis); padding: 20px 14px; display: flex; flex-direction: column; gap: 18px; }
.merek { display: flex; align-items: center; gap: 10px; padding: 0 8px; color: var(--teks); text-decoration: none; font-weight: 700; font-size: 17px; }
[data-tema="gelap"] .merek { color: var(--teks); }
.merek svg { flex-shrink: 0; }
.logo-isi { fill: var(--utama); }
.logo-garis { stroke: var(--perhatian); }
.merek .merek-redup { color: var(--redup); font-weight: 500; }
.menu-samping { gap: 12px; }
.grup-menu { display: flex; flex-direction: column; gap: 2px; }
.grup-menu + .grup-menu { border-block-start: 1px solid var(--garis); padding-block-start: 12px; }
.judul-grup { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--teks); padding: 4px 10px 6px; }
.ikon-menu { inline-size: 18px; block-size: 18px; flex-shrink: 0; color: var(--redup); }
.grup-aktif .judul-grup { color: var(--utama-tua); }
.grup-aktif .judul-grup .ikon-menu, .grup-umum a[aria-current] .ikon-menu { color: var(--utama); }
[data-tema="gelap"] .grup-aktif .judul-grup .ikon-menu, [data-tema="gelap"] .grup-umum a[aria-current] .ikon-menu { color: var(--utama-tua); }
.item-grup { display: flex; flex-direction: column; gap: 1px; margin-inline-start: 18px; padding-inline-start: 8px; border-inline-start: 1px solid var(--garis); }
.menu-samping .grup-menu a { display: flex; align-items: center; gap: 10px; min-block-size: 38px; padding: 0 10px; border-radius: 8px; color: var(--teks-nav); text-decoration: none; font-size: 14px; }
.menu-samping .grup-umum a { font-weight: 600; min-block-size: 42px; }
.menu-samping .grup-menu a:hover { background: var(--panel-2); }
.menu-samping .grup-menu a[aria-current] { background: var(--utama-muda); color: var(--utama-tua); font-weight: 700; box-shadow: inset 3px 0 0 var(--utama); }
[dir="rtl"] .menu-samping .grup-menu a[aria-current] { box-shadow: inset -3px 0 0 var(--utama); }
.kolom-utama { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; }
.kepala { background: var(--panel); border-block-end: 1px solid var(--garis); display: flex; align-items: center; gap: 12px; padding: 12px 28px; position: sticky; inset-block-start: 0; z-index: 10; flex-wrap: wrap; }
.kepala-kanan { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.isi { flex: 1; padding: 26px 32px; min-inline-size: 0; inline-size: 100%; }
.kaki { text-align: center; color: var(--redup); font-size: 12px; padding: 12px; }

/* Bilah atas: tab kampus, bahasa, tema, akun */
.tab-kampus { display: flex; background: var(--garis-halus); border-radius: 10px; padding: 4px; gap: 2px; margin: 0; flex-wrap: wrap; }
.tab-kampus button { font: inherit; font-size: 14px; min-block-size: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--teks-nav); cursor: pointer; }
.tab-kampus button:hover { color: var(--teks); }
.tab-kampus button[aria-pressed="true"] { background: var(--panel); color: var(--utama); font-weight: 700; box-shadow: var(--bayang); }
[data-tema="gelap"] .tab-kampus { background: var(--panel-2); }
[data-tema="gelap"] .tab-kampus button[aria-pressed="true"] { background: var(--utama-muda); color: var(--utama-tua); }
.label-kampus { background: var(--garis-halus); color: var(--teks); padding: 6px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.pilih-bahasa { display: flex; gap: 2px; border: 1px solid var(--garis-tegas); border-radius: 10px; padding: 3px; }
.pilih-bahasa a { color: var(--teks-nav); text-decoration: none; padding: 4px 10px; border-radius: 7px; font-size: 13px; }
.pilih-bahasa a[aria-current] { background: var(--utama); color: var(--pada-utama); font-weight: 700; }
.pilih-bahasa.tengah { justify-content: center; margin: 0 auto 16px; inline-size: max-content; }
.tombol-ikon { inline-size: 40px; block-size: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--garis-tegas); background: var(--input-latar); color: var(--teks); cursor: pointer; padding: 0; }
.tombol-ikon:hover { border-color: var(--utama); color: var(--utama); }
.tombol-ikon svg { inline-size: 20px; block-size: 20px; }
.ikon-matahari { display: none; }
[data-tema="gelap"] .ikon-matahari { display: block; }
[data-tema="gelap"] .ikon-bulan { display: none; }
.akun-ringkas { display: flex; align-items: center; gap: 8px; }
.inisial { inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--utama); color: var(--pada-utama); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
[data-tema="gelap"] .inisial { background: var(--perhatian); color: #071A15; }
.nama-akun { font-weight: 600; font-size: 14px; }
.tombol-menu { display: none; background: none; border: 1px solid var(--garis-tegas); border-radius: 10px; color: var(--teks); font-size: 20px; cursor: pointer; inline-size: 40px; block-size: 40px; }

/* Kartu, kisi, data */
.kartu { background: var(--panel); border: 1px solid var(--garis); border-radius: var(--radius); padding: 20px; margin-block-end: 16px; }
.kartu.sempit { max-inline-size: 460px; }
.kisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.data { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.data dt { color: var(--redup); }
.data dd { margin: 0; font-weight: 600; }

/* Formulir dan tombol */
.formulir { display: flex; flex-direction: column; gap: 6px; }
.formulir label { font-weight: 600; font-size: 14px; margin-block-start: 8px; }
.formulir input, .formulir select, .formulir textarea { font: inherit; padding: 10px 12px; border: 1.5px solid var(--garis-tegas); border-radius: 8px; background: var(--input-latar); color: var(--teks); min-block-size: 44px; }
.formulir textarea { resize: vertical; }
.formulir input:focus, .formulir select:focus, .formulir textarea:focus { outline: 2px solid var(--utama); outline-offset: 1px; border-color: var(--utama); }
.tombol { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 700; background: var(--utama); color: var(--pada-utama); border: 0; border-radius: 8px; padding: 10px 18px; min-block-size: 44px; cursor: pointer; text-decoration: none; }
.tombol:hover { background: var(--utama-tua); }
[data-tema="gelap"] .tombol { color: var(--pada-utama); }
.tombol.sekunder { background: var(--panel); color: var(--utama); border: 1.5px solid var(--garis-tegas); }
.tombol.sekunder:hover { border-color: var(--utama); background: var(--utama-muda); }
[data-tema="gelap"] .tombol.sekunder { color: var(--utama-tua); background: var(--panel-2); }
.tombol.kecil { padding: 5px 12px; min-block-size: 32px; font-size: 13px; }
.tombol.penuh { inline-size: 100%; margin-block-start: 16px; }
.formulir .tombol { margin-block-start: 16px; align-self: flex-start; }
.formulir .tombol.penuh { align-self: stretch; }
.tombol.bahaya { background: var(--bahaya); color: #fff; }
.tombol.bahaya:hover { filter: brightness(.9); background: var(--bahaya); }

/* Pesan */
.pesan { padding: 10px 14px; border-radius: 8px; margin-block-end: 12px; font-size: 14px; }
.pesan-sukses { background: var(--sukses-muda); color: var(--sukses-teks); }
.pesan-galat { background: var(--bahaya-muda); color: var(--bahaya-teks); }
.pesan-info { background: var(--info-muda); color: var(--info-teks); }

/* Halaman polos: masuk dan galat */
.kotak-tengah { inline-size: 100%; max-inline-size: 420px; margin: 8vh auto 40px; padding: 0 16px; }
.masuk h1 { color: var(--utama); }
.galat { text-align: center; }

/* Judul dengan tombol di sisinya */
.judul-baris { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-block-end: 16px; }
.judul-baris h1 { margin: 0; }

/* Penyaring di atas daftar */
.penyaring { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block-end: 8px; }
.penyaring input[type="search"], .penyaring input:not([type]), .penyaring input[type="date"], .penyaring select { font: inherit; padding: 8px 10px; border: 1.5px solid var(--garis-tegas); border-radius: 8px; background: var(--input-latar); color: var(--teks); min-block-size: 40px; }
.penyaring input[type="search"] { min-inline-size: 240px; }
.pilihan { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }

/* Tabel */
.gulir-tabel { overflow-x: auto; background: var(--panel); border: 1px solid var(--garis); border-radius: var(--radius); margin-block-end: 12px; }
.kartu .gulir-tabel { border: 0; border-radius: 0; }
.tabel { inline-size: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th { background: var(--panel-2); color: var(--redup); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; text-align: start; padding: 10px 12px; border-block-end: 1px solid var(--garis); white-space: nowrap; }
.tabel td { padding: 10px 12px; border-block-end: 1px solid var(--garis-halus); vertical-align: top; }
.tabel tbody tr:hover { background: var(--panel-2); }
.tabel .kosong { text-align: center; color: var(--redup); padding: 24px; }
.tabel tfoot th { background: var(--panel-2); color: var(--teks); font-size: 13px; text-transform: none; letter-spacing: 0; }
.potong { max-inline-size: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Lencana */
.lencana { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; background: var(--garis-halus); color: var(--teks); white-space: nowrap; }
.lencana.hijau { background: var(--sukses-muda); color: var(--sukses-teks); }
.lencana.merah { background: var(--bahaya-muda); color: var(--bahaya-teks); }
.lencana.kuning { background: var(--perhatian-muda); color: var(--perhatian-teks); }
.lencana.biru { background: var(--info-muda); color: var(--info-teks); }
h1 .lencana { vertical-align: middle; font-size: 13px; }

/* Halaman bernomor */
.paging { display: flex; gap: 4px; flex-wrap: wrap; margin-block: 12px; }
.paging a, .paging span { min-inline-size: 36px; padding: 6px 10px; border-radius: 8px; text-align: center; text-decoration: none; font-size: 14px; }
.paging a { background: var(--panel); border: 1px solid var(--garis); color: var(--teks); }
.paging a:hover { border-color: var(--utama); }
.paging-ini { background: var(--utama); color: var(--pada-utama); font-weight: 700; }
.paging-celah { color: var(--redup); }

/* Isian berjajar */
.baris-isian { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.baris-isian label { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.formulir + .formulir { margin-block-start: 8px; border-block-start: 1px solid var(--garis); padding-block-start: 8px; }

/* Hyperadmin dan pembaruan database */
.kartu-peringatan { border-color: var(--perhatian); background: var(--perhatian-muda); }
.kartu-bahaya { border-color: var(--bahaya); }
.kartu-hyper { border-color: var(--utama); }
.kunci-pemulihan { font-family: var(--huruf-angka); font-size: 18px; font-weight: 600; letter-spacing: .04em; background: var(--panel); border: 1.5px dashed var(--garis-tegas); border-radius: 8px; padding: 12px 14px; word-break: break-all; user-select: all; }
.rahasia summary { cursor: pointer; font-weight: 700; color: var(--utama); padding: 6px 0; }
.rahasia.kedaluwarsa summary { color: var(--redup); }
pre.sql { background: #101826; color: #E8EEF2; padding: 14px; border-radius: 8px; overflow-x: auto; font-size: 13px; max-block-size: 420px; font-family: var(--huruf-angka); }

/* Formulir data induk */
fieldset.tanpa-bingkai { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: flex; flex-direction: column; gap: 6px; }
fieldset[disabled] input, fieldset[disabled] select { background: var(--panel-2); color: var(--teks); }
.galat-isian { color: var(--bahaya-teks); font-size: 13px; font-weight: 600; }
.formulir .pilihan { margin-block-start: 12px; font-weight: 600; }
.isian { display: flex; flex-direction: column; gap: 4px; margin-block-end: 6px; }
.formulir .kartu label { margin-block-start: 6px; }
.besar { font-size: 22px; font-weight: 700; color: var(--utama); margin: 4px 0 12px; font-family: var(--huruf-angka); }
[data-tema="gelap"] .besar { color: var(--utama-tua); }
.daftar-ringkas { margin: 0; padding-inline-start: 18px; font-size: 14px; }
.daftar-ringkas li { padding: 2px 0; }

/* Jadwal: baris judul hari */
.tabel .baris-grup td { background: var(--utama-muda); color: var(--utama-tua); font-weight: 700; padding-block: 6px; }

/* Transkrip dan peringkat */
.baris-tombol { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.data.dua-kolom { grid-template-columns: max-content 1fr max-content 1fr; }
.baris-gagal td { color: var(--bahaya-teks); }
.ringkasan-nilai .besar { margin: 0; }

/* Absensi: kartu sesi harian */
.kisi-sesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.kartu.sesi { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--teks); margin: 0; border-inline-start: 4px solid var(--perhatian); }
.kartu.sesi.terisi { border-inline-start-color: var(--utama); }
.kartu.sesi:hover { border-color: var(--utama); }
.kartu.sesi .jam { font-weight: 600; font-size: 17px; color: var(--utama); font-family: var(--huruf-angka); }
[data-tema="gelap"] .kartu.sesi .jam { color: var(--utama-tua); }

/* Absensi: pilihan H / I / S / A */
.pilih-status { display: inline-flex; gap: 4px; }
.pilih-status label { cursor: pointer; }
.pilih-status input { position: absolute; opacity: 0; pointer-events: none; }
.pilih-status span { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 36px; border-radius: 8px; border: 1.5px solid var(--garis-tegas); font-weight: 800; color: var(--redup); background: var(--input-latar); }
.pilih-status input:focus-visible + span { outline: 2px solid var(--utama); outline-offset: 1px; }
.pilih-status .status-H input:checked + span { background: var(--hadir); border-color: var(--hadir); color: #fff; }
.pilih-status .status-I input:checked + span { background: var(--izin); border-color: var(--izin); color: #fff; }
.pilih-status .status-S input:checked + span { background: var(--sakit); border-color: var(--sakit); color: #fff; }
.pilih-status .status-A input:checked + span { background: var(--alpa); border-color: var(--alpa); color: #fff; }
[data-tema="gelap"] .pilih-status input:checked + span { color: #071A15; }
fieldset[disabled] .pilih-status label { cursor: default; opacity: .75; }
.tabel-absen tr.belum td { background: var(--perhatian-muda); }
.formulir-absen .tombol[type="submit"] { margin-block-start: 12px; }

/* Absensi: rekap */
.tabel-rekap th.sel, .tabel-rekap td.sel { text-align: center; padding-inline: 4px; min-inline-size: 30px; font-weight: 700; }
.tabel-rekap td.status-H { color: var(--hadir); }
.tabel-rekap td.status-I { color: var(--izin); background: var(--info-muda); }
.tabel-rekap td.status-S { color: var(--sakit); background: var(--perhatian-muda); }
.tabel-rekap td.status-A { color: #fff; background: var(--alpa); }
.teks-merah { color: var(--bahaya-teks); }

/* Lembar nilai */
.isian-nilai { inline-size: 84px; font: inherit; font-family: var(--huruf-angka); padding: 6px 8px; border: 1.5px solid var(--garis-tegas); border-radius: 8px; text-align: center; background: var(--input-latar); color: var(--teks); }
.isian-nilai:focus { outline: 2px solid var(--utama); border-color: var(--utama); }
.isian-nilai.tidak-sah { border-color: var(--bahaya); background: var(--bahaya-muda); }
.tabel-nilai + .tombol, fieldset .tabel-nilai ~ .tombol { margin-block-start: 12px; }

/* Formulir cetak resmi (cuti pegawai): selalu RTL, hitam di atas putih */
.formulir-cetak { background: #fff; color: #000; max-inline-size: 760px; margin: 12px auto; padding: 28px 32px; border: 1px solid var(--garis); line-height: 2; font-size: 15px; font-family: "Traditional Arabic", "Noto Naskh Arabic", "Amiri", Tahoma, serif; }
.formulir-cetak h1 { text-align: center; font-size: 22px; margin: 4px 0 12px; text-decoration: underline; }
.formulir-cetak p { margin: 4px 0; }
.fc-nomor { text-align: start; font-size: 13px; }
.fc-kanan { float: inline-end; }
.fc-dua { display: flex; justify-content: space-between; gap: 24px; margin-block: 8px; }
.fc-kotak { border: 1px solid #000; padding: 6px 12px; margin-block-start: 10px; }

/* Tab dan isi kiriman (saran) */
.tab { display: flex; gap: 4px; border-block-end: 2px solid var(--garis); margin-block-end: 12px; flex-wrap: wrap; }
.tab a { padding: 8px 14px; text-decoration: none; color: var(--redup); font-weight: 700; border-block-end: 3px solid transparent; margin-block-end: -2px; }
.tab a[aria-current] { color: var(--utama); border-block-end-color: var(--utama); }
[data-tema="gelap"] .tab a[aria-current] { color: var(--utama-tua); }
.isi-saran { margin-block-start: 12px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--garis); border-radius: 8px; white-space: normal; line-height: 1.8; }

/* Daftar berkas */
.daftar-berkas { list-style: none; margin: 0 0 8px; padding: 0; }
.daftar-berkas li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-block-end: 1px solid var(--garis-halus); }
.daftar-berkas li::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 2px; background: var(--utama); flex-shrink: 0; }
.formulir input[type="file"] { padding: 8px; border: 1.5px dashed var(--garis-tegas); border-radius: 8px; background: var(--panel-2); }

/* Garis waktu tahap persetujuan cuti mahasiswa */
.garis-waktu { list-style: none; margin: 0; padding: 0; }
.garis-waktu li { position: relative; padding-block: 4px 14px; padding-inline-start: 26px; border-inline-start: 2px solid var(--garis); margin-inline-start: 7px; }
.garis-waktu li:last-child { border-inline-start-color: transparent; }
.garis-waktu li::before { content: ""; position: absolute; inset-inline-start: -9px; inset-block-start: 6px; inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--panel); border: 2px solid var(--garis-tegas); }
.garis-waktu li.gw-setuju::before { background: var(--hadir); border-color: var(--hadir); }
.garis-waktu li.gw-tolak::before { background: var(--alpa); border-color: var(--alpa); }
.garis-waktu li.gw-tunggu::before { background: var(--perhatian-muda); border-color: var(--perhatian); }
.garis-waktu li > strong { display: inline-block; margin-inline-end: 8px; }

/* Ringkasan status pendaftar (penyaring cepat) */
.ringkas-status { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 8px 12px; }
.ringkas-status a { padding: 6px 12px; border-radius: 999px; background: var(--panel); border: 1px solid var(--garis); color: var(--teks); text-decoration: none; font-size: 13px; }
.ringkas-status a strong { margin-inline-start: 4px; font-family: var(--huruf-angka); }
.ringkas-status a[aria-current] { background: var(--utama); border-color: var(--utama); color: var(--pada-utama); }
.ringkas-status a.rs-merah { border-color: var(--bahaya); } .ringkas-status a.rs-hijau { border-color: var(--sukses-teks); } .ringkas-status a.rs-biru { border-color: var(--info-teks); }

/* ---------- Beranda ---------- */
.beranda-sub { margin: -10px 0 18px; color: var(--redup); font-size: 14px; }
.kisi-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-block-end: 18px; }
.stat { background: var(--panel); border: 1px solid var(--garis); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--teks); }
a.stat:hover { border-color: var(--utama); }
.stat-label { font-size: 12px; color: var(--redup); letter-spacing: .05em; text-transform: uppercase; }
.stat-angka { font-family: var(--huruf-angka); font-size: 30px; font-weight: 600; line-height: 1.1; }
.stat-angka.utama { color: var(--utama); }
[data-tema="gelap"] .stat-angka.utama { color: var(--utama-tua); }
.stat-angka.perhatian { color: var(--perhatian); }
.stat-ket { font-size: 12px; color: var(--redup); }
.lacak { block-size: 6px; border-radius: 3px; background: var(--garis-halus); overflow: hidden; }
.lacak > span { display: block; block-size: 100%; background: var(--utama); border-radius: inherit; }
.lacak.perhatian > span { background: var(--perhatian); }
.lacak.tebal { block-size: 8px; border-radius: 4px; }
.kisi-beranda { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.kisi-beranda > .kartu { margin: 0; }
.kepala-kartu { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-block-end: 8px; }
.kepala-kartu h2 { margin: 0; font-size: 16px; }
.kepala-kartu a { font-size: 13px; font-weight: 600; text-decoration: none; }
.hadir-sel { display: flex; align-items: center; gap: 8px; min-inline-size: 150px; }
.hadir-sel .lacak { flex: 1; }
.hadir-angka { font-family: var(--huruf-angka); font-size: 12px; min-inline-size: 44px; text-align: end; color: var(--utama-tua); }
.hadir-angka.belum { color: var(--perhatian); font-weight: 600; }
.antrean { display: flex; flex-direction: column; gap: 10px; }
.antrean a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--garis-halus); text-decoration: none; color: var(--teks); min-block-size: 44px; }
.antrean a:hover { border-color: var(--utama); }
.antrean strong.angka { font-size: 22px; font-weight: 600; }
.antrean .perhatian { color: var(--perhatian); }
.antrean .utama { color: var(--utama-tua); }
.antrean .kosong-antrean { color: var(--redup); font-size: 14px; padding: 8px 0; }

/* ---------- Situs publik (mahasiswa.lipia.id, pmb.lipia.id): bilah atas mendatar, isi di tengah ---------- */
.situs-lebar { inline-size: 100%; max-inline-size: 1120px; margin-inline: auto; padding-inline: 24px; }
.situs-kepala { background: var(--panel); border-block-end: 1px solid var(--garis); position: sticky; inset-block-start: 0; z-index: 10; }
.situs-baris { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-block-size: 64px; padding-block: 8px; }
.situs-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.situs-nav a { display: inline-flex; align-items: center; min-block-size: 40px; padding: 0 14px; border-radius: 8px; color: var(--teks-nav); text-decoration: none; font-weight: 600; font-size: 14px; }
.situs-nav a:hover { background: var(--panel-2); }
.situs-nav a[aria-current] { background: var(--utama-muda); color: var(--utama-tua); }
.situs-isi { flex: 1; padding-block: 28px 40px; }
.situs-tengah { margin-inline: auto; }
.situs-formulir { max-inline-size: 760px; margin-inline: auto; }
.situs-sambutan { text-align: center; padding: 28px 0 22px; }
.situs-sambutan h1 { font-size: 30px; margin-block-end: 8px; }
.situs-sambutan p { color: var(--redup); max-inline-size: 620px; margin: 0 auto; }
.kisi-pilihan { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.pilihan-besar { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--teks); min-block-size: 120px; border-block-start: 4px solid var(--utama); margin: 0; }
.pilihan-besar:hover { border-color: var(--utama); }
.pilihan-besar strong { font-size: 17px; }
.kode-besar { font-size: 28px; text-align: center; letter-spacing: .12em; }
.perangkap { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
@media (max-width: 700px) {
  .situs-lebar { padding-inline: 14px; }
  .situs-nav { order: 3; inline-size: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .situs-sambutan h1 { font-size: 24px; }
}

/* Situs mahasiswa: jadwal per hari dan kehadiran */
.kisi-jadwal { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.hari-jadwal { margin: 0; }
.hari-jadwal.hari-ini { border-color: var(--utama); box-shadow: inset 0 3px 0 var(--utama); }
.daftar-jadwal { list-style: none; margin: 0; padding: 0; }
.daftar-jadwal li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 10px 0; border-block-start: 1px solid var(--garis-halus); }
.daftar-jadwal li:first-child { border-block-start: 0; }
.jam-jadwal { color: var(--utama); font-weight: 600; }
[data-tema="gelap"] .jam-jadwal { color: var(--utama-tua); }
.status-angka-H { color: var(--hadir); } .status-angka-I { color: var(--izin); } .status-angka-S { color: var(--sakit); } .status-angka-A { color: var(--alpa); }
.lencana.status-lencana-H { background: var(--sukses-muda); color: var(--sukses-teks); }
.lencana.status-lencana-I { background: var(--info-muda); color: var(--info-teks); }
.lencana.status-lencana-S { background: var(--perhatian-muda); color: var(--perhatian-teks); }
.lencana.status-lencana-A { background: var(--bahaya-muda); color: var(--bahaya-teks); }
.riwayat-sesi summary { cursor: pointer; font-weight: 600; color: var(--utama); padding: 6px 0; font-size: 14px; }
[data-tema="gelap"] .riwayat-sesi summary { color: var(--utama-tua); }

/* PMB: formulir bernomor, unggah sebaris, kartu pendaftaran */
.bagian-form { display: flex; align-items: center; gap: 10px; font-size: 17px; margin: 22px 0 6px; padding-block-start: 14px; border-block-start: 1px solid var(--garis); }
.bagian-form span { inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--utama); color: var(--pada-utama); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.formulir .bagian-form:first-of-type { border-block-start: 0; padding-block-start: 0; }
.unggah-sebaris { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; inline-size: 100%; margin: 4px 0 0; }
.unggah-sebaris input[type="file"] { font-size: 13px; max-inline-size: 100%; }
.lencana-besar { font-size: 15px; padding: 6px 12px; align-self: flex-start; }
.stat-angka.kecil-angka { font-family: var(--huruf); font-size: 18px; }
.kartu-daftar { max-inline-size: 640px; line-height: 1.7; }
.kd-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-block-end: 2px solid #000; padding-block-end: 10px; margin-block-end: 12px; }
.kd-foto { inline-size: 90px; block-size: 120px; object-fit: cover; border: 1px solid #000; }
.kd-tabel { inline-size: 100%; border-collapse: collapse; }
.kd-tabel th, .kd-tabel td { border: 1px solid #000; padding: 6px 10px; text-align: start; vertical-align: top; }
.kd-tabel th { inline-size: 34%; background: #f2f2f2; }
.kd-kaki { margin-block-start: 12px; font-size: 13px; }

/* Ponsel dan layar sempit: menu samping menjadi laci */
@media (max-width: 900px) {
  .tombol-menu { display: inline-flex; align-items: center; justify-content: center; }
  .menu-samping { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 20; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 24px rgba(0,0,0,.25); overflow-y: auto; }
  [dir="rtl"] .menu-samping { transform: translateX(100%); }
  .menu-samping.terbuka { transform: none; }
  .kepala { padding: 10px 16px; }
  .isi { padding: 16px; }
  .nama-akun { display: none; }
  .kisi-beranda { grid-template-columns: 1fr; }
}

/* Cetak: selalu tema terang; tanpa kepala, menu, pita, dan tombol */
@media print {
  [data-tema="gelap"] {
    --latar: #FFFFFF; --panel: #FFFFFF; --panel-2: #F7F9FC; --sidebar: #FFFFFF;
    --garis: #E1E6EF; --garis-halus: #EEF1F7; --garis-tegas: #D6DCE7;
    --teks: #141B2D; --redup: #5B6478; --teks-nav: #2B3347;
    --utama: #2448C9; --utama-tua: #16308F; --utama-muda: #EAF0FF; --pada-utama: #FFFFFF;
    --perhatian: #C2410C; --perhatian-muda: #FDEBDF; --perhatian-teks: #9A3412;
    --sukses-muda: #E3F4EA; --sukses-teks: #1F6B3E; --bahaya: #B42318; --bahaya-muda: #FBE6E4; --bahaya-teks: #A01F15;
    --info-muda: #EAF0FF; --info-teks: #1D3FAE; --input-latar: #FFFFFF;
    --hadir: #1F6B3E; --izin: #2251D1; --sakit: #B4530E; --alpa: #B42318;
    color-scheme: light;
  }
  .kepala, .situs-kepala, .menu-samping, .kaki, .pita-uji, .pita-sebagai, .tidak-dicetak, .pesan, .baris-tombol { display: none !important; }
  body { background: #fff; color: #000; font-size: 12px; }
  .isi { padding: 0; max-inline-size: none; }
  .kartu { border: 0; padding: 0 0 8px; margin: 0 0 8px; break-inside: avoid; background: #fff; }
  .gulir-tabel { border: 0; overflow: visible; }
  .tabel th, .tabel td { padding: 4px 6px; }
  a { color: inherit; text-decoration: none; }
  .formulir-cetak { border: 0; margin: 0; padding: 0; max-inline-size: none; font-size: 14px; }
  @page { size: A4; margin: 15mm; }
}