/* Tambahan khusus aplikasi, dimuat setelah hr.css.
   hr.css berasal dari desain (docs/hasil-desain/aset/hr.css) dan sengaja tidak
   diubah, supaya mudah diperbarui kalau desainnya berubah. */

/* ---------- Tambahan ---------- */
.kepala .lonceng[aria-current="page"] { background: var(--merek-muda); color: var(--merek); }
.menu-avatar-isi a[aria-current="page"] { background: var(--merek-muda); color: var(--merek); }
.menu-avatar-isi .ma-pisah { position: relative; margin-top: 9px; }
.menu-avatar-isi .ma-pisah::before { content: ""; position: absolute; left: 6px; right: 6px; top: -5px; border-top: 1px solid var(--garis); }
.menu-avatar-isi form { margin-top: 4px; border-top: 1px solid var(--garis); padding-top: 4px; }
.daftar .baris.belum-dibaca .judul { font-weight: 760; }
.daftar .baris.belum-dibaca .judul::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; border-radius: 50%;
  background: var(--aksen); vertical-align: middle;
}
.halaman > .peringatan + .peringatan { margin-top: var(--j-2); }
.halaman-sempit { max-width: 560px; }
.dua-kolom > * { min-width: 0; }
.kisi-kartu { display: grid; gap: var(--j-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: start; }
.kosong.rapat { padding: var(--j-6) var(--j-4); }
.baris .meta > .bungkus-teks { white-space: normal; text-wrap: pretty; }
.halaman > dialog, .halaman dialog { animation: none; }
.js .tanpa-js { display: none; }
.mb-4 { margin-bottom: var(--j-4); }
.ikon-bulat-kecil { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--merek-muda); color: var(--merek); }
.kartu-kepala > .lencana { flex: none; }
.bar-aksi > form.sebaris { display: contents; }
.goyang-sekali > .peringatan { animation: goyang 340ms var(--lentur); }
.sebaris { display: inline; margin: 0; }
/* Desain memakai kelas "ringkas" untuk kartu pilihan kecil dan juga untuk kisi kartu angka dasbor. */
.pilihan-kartu.ringkas { display: block; }
.alat .baris-flex > .masukan { width: auto; flex: 1 1 220px; min-width: 0; }
.pilihan-grup.tiga:has(> .ringkas) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Pilihan tampilan di menu akun: tiga tombol berdampingan. */
.menu-avatar-isi .ma-tema { padding: 6px 10px 8px; border-top: 1px solid var(--garis); margin-top: 4px; }
.menu-avatar-isi .ma-tema-label { display: block; font-size: var(--t-kecil); color: var(--redup); margin-bottom: 6px; }
.menu-avatar-isi .ma-tema-pilihan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; border-radius: var(--sudut-k); background: var(--latar); }
.menu-avatar-isi .ma-tema-pilihan button {
  flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: 4px 2px; font-size: var(--t-kecil); text-align: center;
}
.menu-avatar-isi .ma-tema-pilihan button .i { width: 18px; height: 18px; }
.menu-avatar-isi .ma-tema-pilihan button[aria-pressed="true"] { background: var(--kartu); color: var(--merek); box-shadow: var(--bayang-1); }

/* Staf yang digantikan: pilihan staf + tombol hapus di satu baris; isian "nama lain"
   di bawahnya, hanya tampil kalau "Nama lain (ketik sendiri)" dipilih. */
.daftar-nama .baris-nama { flex-wrap: wrap; }
.daftar-nama .baris-nama .nama-lain { display: none; flex-basis: 100%; }
.daftar-nama .baris-nama:has(option[value="__lain"]:checked) .nama-lain { display: block; }

/* Penanda tahap dengan 6 langkah (permintaan dengan SPV) di HP: kolomnya sempit.
   Kata hanya dipotong di titik potong lunak ("Recruit-ment"), bukan sembarang huruf. */
@media (max-width: 519px) {
  .tahap:has(> li:nth-child(6)) li { overflow-wrap: normal; letter-spacing: -.01em; }
}

/* Admin > Jabatan: daftar divisi yang bisa dicentang. */
.pilih-divisi summary { cursor: pointer; font-weight: 650; font-size: var(--t-kecil); }
.pilih-divisi .centang-grup { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; margin-top: 8px; max-height: 260px; overflow-y: auto; }

/* Bentrok nama class di hr.css: ".isi" juga pembungkus halaman (berjarak besar) dan
   ".merek" juga logo di kepala halaman (tinggi minimal 56-64px). Titik skor yang terisi
   (i.isi) dan meter nilai (meter.bar.merek) memakai nama yang sama, jadi gaya
   halaman/logo itu dinolkan di sini. */
.bar-skor .titik-skor i.isi { max-width: none; margin: 0; padding: 0; overflow: visible; }
meter.bar.merek { min-height: 0; display: block; gap: 0; grid-area: auto; justify-self: stretch; border-radius: var(--bulat); }
@media (min-width: 760px) { .bar-skor .titik-skor i.isi { padding: 0; } meter.bar.merek { min-height: 0; } }

/* Kandidat: unggah CV dilipat jadi satu baris; dibuka hanya kalau perlu. */
.unggah-cv > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 650; font-size: var(--t-kecil); color: var(--merek); list-style: none; }
.unggah-cv > summary::-webkit-details-marker { display: none; }
.unggah-cv[open] > summary { border-bottom: 1px solid var(--garis); }
.kuning-teks { color: var(--kuning); font-weight: 650; }

/* Lowongan: siapa saja yang mengisi kursinya. */
.daftar-pengisi { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.daftar-pengisi li { display: flex; align-items: center; gap: 10px; }
.daftar-pengisi .teks { display: grid; gap: 1px; min-width: 0; }

/* Form OJT digital */
.sorot-ojt { border-color: color-mix(in srgb, var(--merek) 35%, var(--garis)); background: var(--merek-lembut); }
.matriks-ojt { list-style: none; margin: 0; padding: 0; }
.matriks-ojt > li { display: grid; gap: 8px; padding: var(--j-4) var(--j-5); border-top: 1px solid var(--garis); }
.matriks-judul { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.status-ojt input[value="dikuasai"]:checked + span { background: var(--hijau-latar); color: var(--hijau); border-color: transparent; }
.status-ojt input[value="dipraktikkan"]:checked + span { background: var(--kuning-latar); color: var(--kuning); border-color: transparent; }
.tambah-log > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 650; font-size: var(--t-kecil); color: var(--merek); list-style: none; border-top: 1px solid var(--garis); }
.tambah-log > summary::-webkit-details-marker { display: none; }
.nilai-praktik { display: grid; gap: 2px; padding: var(--j-3) var(--j-4); border-radius: var(--sudut); background: var(--kartu-2); border: 1px solid var(--garis); }
.daftar-butir { list-style: none; margin: 0; padding: 0; }
.butir-ojt { padding: var(--j-4) var(--j-5); border-top: 1px solid var(--garis); }
.butir-ojt.nonaktif { opacity: .6; }
.butir-kisi { grid-template-columns: 90px minmax(0, 1fr); }
.butir-kisi .lebar { grid-column: 1 / -1; }

/* ---------- Papan kandidat (tabel berwarna, gaya spreadsheet) ---------- */
/* Warna sel penuh (status) dan warna grup lowongan, terang dan gelap. */
:root, [data-tema="terang"] {
  --s-hijau: #178a4f; --s-kuning: #f0a73a; --s-kuning-teks: #3a2400; --s-merah: #d23b53;
  --s-biru: #3a6fd6; --s-ungu: #7d4fd1; --s-abu: #8f95ab; --s-teks: #ffffff;
  --s-oranye: #c95d17; --s-pink: #c93f80; --s-toska: #0f857a;
  --t-hijau: #e4f3ea; --t-toska: #def2ef; --t-biru: #e5ecfb; --t-ungu: #eee7fb; --t-pink: #fbe6f0;
  --t-merah: #fbe4e8; --t-oranye: #fdebdd; --t-kuning: #fdf2d9; --t-abu: #eceef3;
  --g1: #2b3f8c; --g2: #0d8276; --g3: #8a3fbf; --g4: #b9530f;
  --bayang-pop: 0 12px 32px rgba(22, 26, 43, .18);
  --bayang-beku: linear-gradient(to right, rgba(22, 26, 43, .14), rgba(22, 26, 43, 0));
}
[data-tema="gelap"] {
  --s-hijau: #1f8a52; --s-kuning: #d9942c; --s-kuning-teks: #251700; --s-merah: #c23a50;
  --s-biru: #3b67c4; --s-ungu: #7a52c7; --s-abu: #5c627a;
  --s-oranye: #b9581a; --s-pink: #b8437a; --s-toska: #13817a;
  --t-hijau: #17291f; --t-toska: #132826; --t-biru: #172036; --t-ungu: #211a33; --t-pink: #2e1a26;
  --t-merah: #2f1a1f; --t-oranye: #2e2115; --t-kuning: #2c2614; --t-abu: #1f2230;
  --g1: #8ea2ff; --g2: #4fd1c0; --g3: #c08cff; --g4: #ffa25f;
  --bayang-pop: 0 12px 32px rgba(0, 0, 0, .5);
  --bayang-beku: linear-gradient(to right, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) {
    --s-hijau: #1f8a52; --s-kuning: #d9942c; --s-kuning-teks: #251700; --s-merah: #c23a50;
    --s-biru: #3b67c4; --s-ungu: #7a52c7; --s-abu: #5c627a;
    --s-oranye: #b9581a; --s-pink: #b8437a; --s-toska: #13817a;
    --t-hijau: #17291f; --t-toska: #132826; --t-biru: #172036; --t-ungu: #211a33; --t-pink: #2e1a26;
    --t-merah: #2f1a1f; --t-oranye: #2e2115; --t-kuning: #2c2614; --t-abu: #1f2230;
    --g1: #8ea2ff; --g2: #4fd1c0; --g3: #c08cff; --g4: #ffa25f;
    --bayang-pop: 0 12px 32px rgba(0, 0, 0, .5);
    --bayang-beku: linear-gradient(to right, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0));
  }
}
html:not(.js) .hanya-js { display: none; }

/* Halaman lowongan (tim rekrutmen): ringkasan satu baris, rincian dan kriteria dilipat, lalu papan. */
.rincian-lowongan > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 12px 16px; list-style: none; cursor: pointer;
  background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--sudut-b); box-shadow: var(--bayang-2); font-size: var(--t-kecil); color: var(--redup); }
.rincian-lowongan > summary::-webkit-details-marker { display: none; }
.rincian-lowongan > summary b { color: var(--teks); font-variant-numeric: tabular-nums; }
.rincian-lowongan > summary:focus-visible { outline: 2px solid var(--merek); outline-offset: 2px; }
.rincian-lowongan .ringkas-terisi { display: inline-flex; align-items: center; gap: 10px; }
.rincian-lowongan .ringkas-terisi progress { width: 110px; }
.rincian-lowongan .buka-rincian { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--merek); font-weight: 650; }
.rincian-lowongan .buka-rincian .i { width: 14px; height: 14px; transition: transform .15s; }
.rincian-lowongan[open] .buka-rincian .i { transform: rotate(180deg); }
.petunjuk-papan { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: var(--j-3) 0; font-size: var(--t-kecil); color: var(--redup); }
.petunjuk-papan span { display: inline-flex; align-items: center; gap: 6px; }
.petunjuk-papan .i { width: 13px; height: 13px; color: var(--samar); }
.titik-papan { width: 12px; height: 12px; border-radius: 4px; display: inline-block; flex: none; }
.papan-kartu { padding: 4px 0 10px; overflow: hidden; }
.gulir-papan { overflow-x: auto; }
/* Di layar lebar papan setinggi layar, seperti sheet: batang geser samping selalu terlihat,
   judul kolom menempel di atas dan nama kandidat di kiri. Di HP halaman digulir biasa. */
@media (min-width: 760px) {
  .gulir-papan { overflow: auto; max-height: calc(100vh - 96px); }
  .papan .kepala-kolom th { position: sticky; top: 0; z-index: 3; background: var(--kartu); }
  .papan .kepala-kolom th.kol-nama { z-index: 4; }
}
.papan { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 13px; }
.papan th, .papan td { padding: 0; border: 0; text-transform: none; letter-spacing: 0; vertical-align: middle; background: none; }
.papan .grup-judul td { padding: 18px 0 8px; }
.papan .grup-baris { position: sticky; left: 0; display: inline-flex; align-items: center; gap: 10px; padding-left: 10px; }
.papan .grup-baris h2 { font-size: 16px; font-weight: 700; margin: 0; }
.papan .grup-baris h2 a { color: var(--g); text-decoration: none; }
.papan .grup-baris h2 a:hover { text-decoration: underline; }
.papan .grup-info { font-size: var(--t-kecil); color: var(--redup); white-space: nowrap; }
.papan .lipat { width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--g); display: grid; place-items: center; cursor: pointer; }
.papan .lipat:hover { background: var(--latar); }
.papan .lipat .i { transition: transform var(--cepat); }
.papan .terlipat .lipat .i { transform: rotate(-90deg); }
.papan .terlipat tr:not(.grup-judul) { display: none; }
.papan .kepala-kolom th { font: 600 12.5px var(--huruf); color: var(--redup); padding: 0 2px 6px; text-align: center; white-space: nowrap; }
.papan .kepala-kolom th.kol-nama { text-align: left; padding-left: 18px; }
.papan .judul-kolom { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; border: 0; background: none; color: inherit; font: inherit; padding: 4px 8px; border-radius: 7px; cursor: pointer; }
.papan .judul-kolom:hover { background: var(--latar); color: var(--teks); }
.papan .judul-kolom .i { width: 12px; height: 12px; color: var(--samar); flex: none; }
.papan .th-sumber { min-width: 112px; } .papan .th-cv { min-width: 84px; }
.papan .th-screening, .papan .th-interview1, .papan .th-interview2, .papan .th-penawaran, .papan .th-pengukuhan { min-width: 150px; }
.papan .th-melamar { min-width: 104px; } .papan .th-usia { min-width: 58px; } .papan .th-pendidikan { min-width: 92px; } .papan .th-jenis_kelamin { min-width: 100px; }
.papan .th-wa { min-width: 124px; } .papan .th-email { min-width: 170px; } .papan .th-gaji { min-width: 150px; } .papan .th-training, .papan .th-pkwt { min-width: 150px; }
.papan .th-status { min-width: 150px; } .papan .th-teks { min-width: 240px; } .papan .th-tanggal { min-width: 120px; } .papan .th-centang { min-width: 96px; } .papan .th-tambah { min-width: 48px; }
.papan .kol-nama { position: sticky; left: 0; z-index: 2; background: var(--kartu); text-align: left; }
/* Kolom beku (Bekukan sampai kolom ini): posisi kiri tiap kolom beku dan bayangan di batas
   kanannya (--bayang-beku, muncul saat papan digeser) ditulis papan.js di <style id="gaya-beku">,
   karena lebar kolomnya baru diketahui sesudah papan tampil. */
.papan .baris-kandidat td { height: 40px; border-bottom: 2px solid var(--kartu); border-right: 2px solid var(--kartu); }
.papan .baris-kandidat .kol-nama { background: var(--latar-baris, var(--kartu-2)); box-shadow: inset 4px 0 0 var(--g), inset 10px 0 0 var(--warna-baris, transparent); min-width: 230px; max-width: 300px; }
.papan .baris-kandidat.dipilih .kol-nama { background: var(--merek-muda); }
.papan .nama-sel { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; }
.papan .nama-sel .centang, .papan .centang-kosong { flex: none; width: 22px; }
.papan .nama { color: var(--teks); font-weight: 600; font-size: 13.5px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.papan .nama:hover { color: var(--merek); text-decoration: underline; }
/* Progress kecil di sel nama, supaya tetap terlihat saat papan digeser. */
.papan .nama-blok { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.papan .prog-mini { display: block; height: 4px; border-radius: 2px; background: var(--garis); overflow: hidden; }
.papan .prog-mini i { display: block; height: 100%; background: var(--s-hijau); }
.papan .prog-mini.henti i { background: var(--s-merah); }
.papan .persen-mini { flex: none; min-width: 34px; text-align: right; font-size: 11.5px; font-weight: 650; color: var(--redup); font-variant-numeric: tabular-nums; }
.papan .persen-mini.henti { color: var(--merah); }
.papan .baris-kosong td { padding: 12px 0; box-shadow: inset 4px 0 0 var(--garis); }
.papan .tetap-kiri { position: sticky; left: 0; display: inline-block; padding-left: 18px; }
.papan .td-info { background: var(--latar-baris, var(--kartu-2)); color: var(--redup); text-align: center; padding: 0 10px; font-size: var(--t-kecil); white-space: nowrap; }
.papan .td-centang { background: var(--latar-baris, var(--kartu-2)); text-align: center; }
/* Kolom data pelamar (dari form): teks biasa, rata kiri, terpotong kalau panjang. */
.papan .td-data { background: var(--latar-baris, var(--kartu-2)); color: var(--teks); padding: 0 10px; font-size: 12.5px; white-space: nowrap; }
.papan .isi-data { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.papan .isi-data.wa { color: var(--merek); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.papan .isi-data.wa:hover { text-decoration: underline; }
.papan .isi-data.wa:focus-visible { outline: 2px solid var(--merek); outline-offset: 2px; }
/* Warna baris dari kolom Tanda (atau kolom status lain yang dipilih mewarnai baris). */
.papan tr.t-hijau { --latar-baris: var(--t-hijau); --warna-baris: var(--s-hijau); }
.papan tr.t-toska { --latar-baris: var(--t-toska); --warna-baris: var(--s-toska); }
.papan tr.t-biru { --latar-baris: var(--t-biru); --warna-baris: var(--s-biru); }
.papan tr.t-ungu { --latar-baris: var(--t-ungu); --warna-baris: var(--s-ungu); }
.papan tr.t-pink { --latar-baris: var(--t-pink); --warna-baris: var(--s-pink); }
.papan tr.t-merah { --latar-baris: var(--t-merah); --warna-baris: var(--s-merah); }
.papan tr.t-oranye { --latar-baris: var(--t-oranye); --warna-baris: var(--s-oranye); }
.papan tr.t-kuning { --latar-baris: var(--t-kuning); --warna-baris: var(--s-kuning); }
.papan tr.t-abu { --latar-baris: var(--t-abu); --warna-baris: var(--s-abu); }
/* Stabilo: warna satu sel (data-w). Sel biasa diisi penuh; sel alur yang sudah berwarna diberi bingkai. */
.papan td[data-w="hijau"] { --stabilo: var(--s-hijau); } .papan td[data-w="toska"] { --stabilo: var(--s-toska); }
.papan td[data-w="biru"] { --stabilo: var(--s-biru); } .papan td[data-w="ungu"] { --stabilo: var(--s-ungu); }
.papan td[data-w="pink"] { --stabilo: var(--s-pink); } .papan td[data-w="merah"] { --stabilo: var(--s-merah); }
.papan td[data-w="oranye"] { --stabilo: var(--s-oranye); } .papan td[data-w="kuning"] { --stabilo: var(--s-kuning); }
.papan td[data-w="abu"] { --stabilo: var(--s-abu); }
.papan td[data-w].td-data, .papan td[data-w].td-info, .papan td[data-w].td-centang,
.papan td[data-w] > .sel.w-kosong, .papan td[data-w] > .sel.w-teks, .papan td[data-w] > .sel.w-siap { background: var(--stabilo); color: var(--s-teks); }
.papan td[data-w="kuning"].td-data, .papan td[data-w="kuning"].td-info, .papan td[data-w="kuning"] > .sel.w-kosong, .papan td[data-w="kuning"] > .sel.w-teks,
.papan td[data-w="kuning"] > .sel.w-siap { color: var(--s-kuning-teks); }
.papan td[data-w] .isi-data.wa { color: inherit; text-decoration: underline; }
.papan td[data-w] > .sel { box-shadow: inset 0 0 0 3px var(--stabilo), inset 0 0 0 4px var(--kartu); }
.papan td[data-w] > .sel.w-siap { outline-color: rgba(255, 255, 255, .6); }
/* Judul kolom yang disaring atau diurutkan */
.papan .judul-kolom.tersaring { background: var(--merek-muda); color: var(--merek); }
.papan .judul-kolom.tersaring::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--merek); flex: none; }
.papan .tanda-urut { color: var(--merek); font-weight: 700; }
.papan .tanda-urut:empty { display: none; }
.papan .kepala-kolom th.kol-nama .judul-kolom { margin-left: -8px; }
.info-saring { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 var(--j-3); padding: 10px 14px; border-radius: 10px;
  background: var(--merek-lembut); border: 1px solid var(--garis); font-size: var(--t-kecil); color: var(--teks); }
.info-saring.baru { background: var(--kartu); border-color: var(--merek); }
.papan .td-centang input { width: 18px; height: 18px; accent-color: var(--s-hijau); cursor: pointer; }
.papan .td-akhir { border-right: 0; }
.papan .sel { display: block; width: 100%; height: 40px; border: 0; border-radius: 0; padding: 0 10px; font: 650 12.5px/40px var(--huruf); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; text-decoration: none; }
.papan .sel:hover { filter: brightness(1.08); }
.papan .sel:focus-visible, .papan .judul-kolom:focus-visible, .papan .lipat:focus-visible, .papan .nama:focus-visible { outline: 2px solid var(--merek); outline-offset: -2px; }
.papan .sel-teks { text-align: left; font-weight: 500; }
.papan .masuk-sel { display: block; width: 100%; min-width: 220px; height: 40px; border: 2px solid var(--merek); background: var(--isian-latar); color: var(--teks); font: 13px var(--huruf); padding: 0 10px; }
.papan .baris-tambah td { height: 36px; }
.papan .baris-lebih td { padding: 10px 0; box-shadow: inset 4px 0 0 var(--g); }
.papan .lebih-isi { position: sticky; left: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-left: 18px; font-size: var(--t-kecil); color: var(--redup); }
.papan .baris-tambah .kol-nama { box-shadow: inset 4px 0 0 var(--garis); }
.papan .tambah-kandidat { display: inline-block; color: var(--redup); font-weight: 600; font-size: 13px; padding: 9px 18px; text-decoration: none; }
.papan .tambah-kandidat:hover { color: var(--merek); }
.papan .tambah-kolom { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--garis-kuat); background: var(--kartu); color: var(--redup); font: 700 17px/1 var(--huruf); cursor: pointer; }
.papan .tambah-kolom:hover { color: var(--merek); border-color: var(--merek); }
/* Warna sel dan pilihan label (dipakai juga di jendela kecil). */
.w-hijau { background: var(--s-hijau); color: var(--s-teks); }
.w-kuning { background: var(--s-kuning); color: var(--s-kuning-teks); }
.w-merah { background: var(--s-merah); color: var(--s-teks); }
.w-biru { background: var(--s-biru); color: var(--s-teks); }
.w-ungu { background: var(--s-ungu); color: var(--s-teks); }
.w-abu { background: var(--s-abu); color: var(--s-teks); }
.w-oranye { background: var(--s-oranye); color: var(--s-teks); }
.w-pink { background: var(--s-pink); color: var(--s-teks); }
.w-toska { background: var(--s-toska); color: var(--s-teks); }
.w-kosong, .w-teks { background: var(--latar-baris, var(--kartu-2)); color: var(--teks); }
.w-siap { background: var(--latar-baris, var(--kartu-2)); color: var(--merek); outline: 1.5px dashed var(--garis-kuat); outline-offset: -6px; }
.papan .w-siap { font-weight: 600; }
.riwayat-papan .waktu-riwayat { flex: none; white-space: nowrap; }
.catatan-papan h2 { font-size: var(--t-sedang); margin: 0 0 var(--j-2); }
.catatan-papan ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--t-kecil); color: var(--redup); }

/* Jendela kecil saat sel atau judul kolom diklik */
.pop-papan { position: absolute; z-index: 60; width: min(320px, calc(100vw - 24px)); background: var(--kartu); color: var(--teks); border: 1px solid var(--garis-kuat); border-radius: 12px; box-shadow: var(--bayang-pop); padding: 14px; display: grid; gap: 10px; font-size: var(--t-sedang); }
.pop-papan .pop-judul { font-weight: 700; margin: 0; }
.pop-papan p { margin: 0; }
.pop-papan .pop-catatan { font-size: var(--t-kecil); color: var(--redup); }
.pop-papan .pop-galat { font-size: var(--t-kecil); color: var(--merah); font-weight: 650; }
.pop-papan label, .pop-papan legend { font-size: 12px; font-weight: 650; color: var(--redup); }
.pop-papan .isian-pop { display: grid; gap: 4px; }
.pop-papan .masukan { height: 40px; min-height: 0; font-size: 14px; }
.pop-papan .dua { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.pop-papan .opsi-daftar { display: grid; gap: 6px; }
.pop-papan .opsi { border: 0; border-radius: 8px; padding: 9px 10px; font: 650 13px var(--huruf); cursor: pointer; text-align: center; }
.pop-papan .opsi:hover { filter: brightness(1.08); }
.pop-papan .opsi.w-kosong { border: 1px dashed var(--garis-kuat); color: var(--redup); }
.pop-papan .opsi:focus-visible, .pop-papan .pop-tautan:focus-visible { outline: 2px solid var(--merek); outline-offset: 2px; }
.pop-papan .pop-aksi { display: flex; flex-wrap: wrap; gap: 8px; }
.pop-papan .pop-tautan { background: none; border: 0; padding: 0; color: var(--merek); font: 650 13px var(--huruf); cursor: pointer; text-align: left; justify-self: start; text-decoration: none; }
.pop-papan .pop-tautan.bahaya { color: var(--merah); }
.pop-papan .label-baris { display: grid; grid-template-columns: 12px minmax(0, 1fr) 92px 32px; gap: 6px; align-items: center; }
.pop-papan .label-baris.nama-w { grid-template-columns: 12px minmax(0, 1fr); }
.pop-papan .hapus-label { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--redup); font-size: 18px; cursor: pointer; }
.pop-papan .hapus-label:hover { background: var(--merah-latar); color: var(--merah); }
.pop-papan .pilih-jenis { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.pop-papan .pilih-jenis div { display: flex; align-items: center; gap: 8px; }
.pop-papan .pilih-jenis div label { font-size: var(--t-sedang); font-weight: 500; color: var(--teks); }
.pop-papan .rincian-pop { display: grid; gap: 2px; font-size: var(--t-kecil); color: var(--redup); }
.pop-papan .rincian-pop b { color: var(--teks); font-weight: 650; }
/* Saring dan urutkan di jendela judul kolom */
.pop-papan .pop-urut { display: flex; flex-wrap: wrap; gap: 6px; }
.pop-papan .tombol.aktif { border-color: var(--merek); color: var(--merek); background: var(--merek-muda); }
.pop-papan .tombol:disabled:not(.memuat) { opacity: .4; cursor: default; }
.pop-papan .pop-sub { font-size: 12px; font-weight: 650; color: var(--redup); }
.pop-papan .daftar-nilai { display: grid; gap: 1px; max-height: 232px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.pop-papan .nilai-saring { display: flex; align-items: center; gap: 9px; padding: 6px 6px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--teks); cursor: pointer; }
.pop-papan .nilai-saring:hover { background: var(--latar); }
.pop-papan .nilai-saring[hidden] { display: none; }
.pop-papan .nilai-saring input { width: 16px; height: 16px; accent-color: var(--merek); flex: none; }
.pop-papan .nilai-saring span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-papan .nilai-saring small { color: var(--redup); font-variant-numeric: tabular-nums; }
/* Tombol Kolom: centang tampil + panah susunan */
.pop-papan .baris-susun { display: flex; align-items: center; gap: 4px; }
.pop-papan .baris-susun .nilai-saring { flex: 1; min-width: 0; }
.pop-papan .geser-kolom { flex: none; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--garis); background: var(--kartu); color: var(--redup); font: 700 13px/1 var(--huruf); cursor: pointer; }
.pop-papan .geser-kolom:hover:not(:disabled) { color: var(--merek); border-color: var(--merek); }
.pop-papan .geser-kolom:focus-visible { outline: 2px solid var(--merek); outline-offset: 1px; }
.pop-papan .geser-kolom:disabled { opacity: .35; cursor: default; }
.pop-papan .opsi-warna { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pop-papan .opsi-warna .opsi.terpilih { box-shadow: 0 0 0 2px var(--kartu), 0 0 0 4px var(--merek); }
.pop-papan .opsi-warna .w-kosong { grid-column: 1 / -1; }
.pop-papan .opsi-warna-saring { display: flex; flex-wrap: wrap; gap: 6px; }
.pop-papan .opsi-w { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--garis-kuat); background: var(--kartu);
  color: var(--teks); font: 600 12.5px var(--huruf); cursor: pointer; }
.pop-papan .opsi-w small { color: var(--redup); font-weight: 600; }
.pop-papan .opsi-w.terpilih { border-color: var(--merek); background: var(--merek-muda); }
.pop-papan .opsi-w:focus-visible { outline: 2px solid var(--merek); outline-offset: 2px; }
.pop-papan .pop-garis { border: 0; border-top: 1px solid var(--garis); margin: 2px 0; }
@media (max-width: 559px) {
  .papan .baris-kandidat .kol-nama { min-width: 150px; max-width: 170px; }
  .papan .nama-sel { padding-left: 12px; gap: 8px; }
  .papan .persen-mini { display: none; }   /* di HP cukup garisnya, nama butuh tempat */
  .papan .grup-baris { flex-wrap: wrap; row-gap: 2px; max-width: calc(100vw - 48px); }
}

/* Skrip Apps Script untuk disalin (halaman Google Form lowongan) */
.kode-skrip { min-height: 220px; font: 12px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre; overflow: auto; }
.catatan-papan ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--t-kecil); color: var(--redup); }

/* Form permintaan: bagian 3 (alasan penggantian) dan tautannya hanya tampil untuk penggantian staf. */
@supports selector(:has(*)) {
  .dua-kolom:not(:has(input[name="alasan"][value="penggantian"]:checked)) .bagian-ganti { display: none; }
}