/* Tambahan khusus aplikasi, dimuat setelah hr.css dan hr-warisan.css.
   hr.css berasal dari paket desain v2 dan sengaja tidak diubah, supaya mudah
   diperbarui kalau desainnya berubah. */

/* ---------- Tambahan ---------- */
.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; }
/* Animasi masuk hr.css memakai fill-mode "both": sesudah selesai, transform-nya (matrix identitas)
   tetap menempel, sehingga elemen position: fixed di dalamnya (bar pilih papan kandidat, lembar
   tanpa JavaScript) menempel ke pembungkusnya, bukan ke layar. "backwards" tetap menyembunyikan
   selama jeda awal, lalu melepas transform-nya begitu animasi selesai. Tampilannya sama. */
.halaman > * { animation-fill-mode: backwards; }
.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)); }


/* 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; }
/* Dropdown kustom (pilih.js) membungkus select dengan .pilih-kustom; tanpa ini bungkusnya selebar teks
   "Pilih staf" dan nama staf terpotong. */
.daftar-nama .baris-nama > .pilih-kustom { flex: 1; min-width: 0; }

/* 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; }
/* Belum dilakukan: merah supaya kelihatan mana yang belum diisi (keputusan pemilik 1 Nov 2026). */
.status-ojt input[value="belum"]:checked + span { background: var(--merah-latar); color: var(--merah); 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(--latar-sel)); 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); }
/* Kolom alur (a.sel): stabilo di sel kosong atau tombol langkah (+ Jadwalkan, Perlu screening) hanya latar muda
   dengan bingkai, supaya tidak terbaca sebagai status (keputusan pemilik 8 Nov 2026). */
.papan td[data-w] > a.sel.w-kosong, .papan td[data-w] > a.sel.w-siap { background: color-mix(in srgb, var(--stabilo) 20%, var(--kartu)); color: var(--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-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 + pegangan untuk menarik susunan */
.pop-papan .baris-susun { display: flex; align-items: center; gap: 4px; border-radius: 8px; }
.pop-papan .baris-susun .nilai-saring { flex: 1; min-width: 0; }
.pop-papan .pegangan-susun { flex: none; width: 30px; height: 30px; border: 0; border-radius: 7px; background: transparent; color: var(--samar); font: 700 16px/1 var(--huruf); cursor: grab; touch-action: none; }
.pop-papan .pegangan-susun:hover { color: var(--merek); background: var(--merek-muda); }
.pop-papan .pegangan-susun:focus-visible { outline: 2px solid var(--merek); outline-offset: 1px; }
.pop-papan .baris-susun.ditarik { background: var(--merek-muda); box-shadow: 0 4px 14px rgba(22, 26, 43, .16); }
.pop-papan .baris-susun.ditarik .pegangan-susun { cursor: grabbing; color: var(--merek); }
.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; }
/* Google Form: langkah, email robot, cara lain yang dilipat, jawaban yang tidak masuk */
.langkah-gform { margin: 0; padding-left: 18px; display: grid; gap: var(--j-3); }
.sandi-kotak.email-robot code { font-size: var(--t-sedang); font-weight: 650; letter-spacing: 0; }
.cara-lain > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 650; font-size: var(--t-kecil); color: var(--merek); list-style: none; }
.cara-lain > summary::-webkit-details-marker { display: none; }
.cara-lain[open] > summary { border-bottom: 1px solid var(--garis); }
.daftar-masalah { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--t-kecil); }
.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; }
}
/* Lembar jadwal papan kandidat: pewawancara mengikuti pilihan Interview 1 atau 2 (tanpa JavaScript juga). */
@supports selector(:has(*)) {
  #lembar-jadwal:has(input[name="tahap"][value="2"]:checked) [data-tahap-isian="1"],
  #lembar-jadwal:not(:has(input[name="tahap"][value="2"]:checked)) [data-tahap-isian="2"] { display: none; }
}
/* Baris yang baru masuk tanpa muat ulang (papan.js perbarui): disorot sebentar. */
.papan tr.baris-baru > td { animation: baris-baru 4s ease-out; }
@keyframes baris-baru { 0%, 35% { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--merek) 22%, transparent); } 100% { box-shadow: inset 0 0 0 999px transparent; } }
@media (prefers-reduced-motion: reduce) { .papan tr.baris-baru > td { animation: none; outline: 2px solid var(--merek); outline-offset: -2px; } }

/* Geser ke samping (touchpad laptop, HP) tidak memindah halaman (Back/Forward browser).
   Gestur sistem di tepi layar HP (navigasi gestur Android, iPhone) tetap milik HP-nya. */
html, body { overscroll-behavior-x: none; }

/* ---------- Pilihan, tanggal, dan jam bergaya web (app.js) ---------- */
.gaya-asli {
  position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important;
  border: 0 !important; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none;
}
.gaya-pemicu { display: flex; align-items: center; gap: 8px; min-width: 0; text-align: left; cursor: pointer; }
.gaya-pemicu .gaya-teks { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gaya-pemicu.gaya-belum .gaya-teks { color: var(--samar); }
.gaya-pemicu > .i { flex: none; color: var(--redup); }
.gaya-pemicu.gaya-pilih {
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--redup) 50%), linear-gradient(135deg, var(--redup) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.gaya-pemicu[aria-expanded="true"] { border-color: var(--merek); box-shadow: 0 0 0 4px color-mix(in srgb, var(--merek) 16%, transparent); }
.gaya-pemicu:focus-visible { outline: 0; border-color: var(--merek); box-shadow: 0 0 0 4px color-mix(in srgb, var(--merek) 16%, transparent); }
.gaya-pemicu[aria-invalid="true"] { border-color: var(--merah); }

.gaya-panel {
  position: fixed; z-index: 1000; display: flex; flex-direction: column; gap: 6px; max-width: calc(100vw - 24px); max-height: 340px;
  padding: 6px; background: var(--kartu); color: var(--teks); border: 1px solid var(--garis-kuat); border-radius: 12px; box-shadow: var(--bayang-pop);
  font-size: var(--t-sedang); animation: gaya-muncul var(--cepat) var(--lentur);
}
@keyframes gaya-muncul { from { opacity: 0; transform: translateY(-4px); } }
.gaya-panel-pilih { width: max-content; max-width: min(420px, calc(100vw - 24px)); }
.gaya-panel-jam { width: 220px; padding: 10px; }
/* Jam: dua gulungan (jam, menit). Angka di pita tengah yang terpilih; tinggi angka = TINGGI_RODA di app.js. */
.gaya-roda-wadah { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; }
.gaya-roda-sorot { position: absolute; left: 0; right: 0; top: 50%; height: 36px; transform: translateY(-50%); border-radius: 9px; background: var(--merek-lembut); box-shadow: inset 0 0 0 1px var(--garis); pointer-events: none; }
.gaya-roda {
  position: relative; height: 180px; padding-block: 72px; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none;
  border-radius: 9px; outline: 0; -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}
.gaya-roda::-webkit-scrollbar { display: none; }
.gaya-roda:focus-visible { box-shadow: inset 0 0 0 2px var(--merek); -webkit-mask-image: none; mask-image: none; }
.gaya-roda-isi { height: 36px; display: grid; place-items: center; scroll-snap-align: center; font: 550 17px var(--huruf); font-variant-numeric: tabular-nums; color: var(--redup); cursor: pointer; user-select: none; }
.gaya-roda-isi[aria-selected="true"] { color: var(--merek); font-weight: 750; }
.gaya-roda-titik { position: relative; font: 750 18px var(--huruf); color: var(--merek); }
.gaya-panel-jam .gaya-kal-kaki { margin-top: 6px; }
.gaya-panel-jam [data-pakai] { font-size: 14px; }
.gaya-daftar { overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 1px; outline: 0; }
.gaya-opsi { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 10px; border-radius: 8px; cursor: pointer; line-height: 1.3; }
.gaya-opsi > span { flex: 1; min-width: 0; }
.gaya-opsi > .i { flex: none; color: var(--merek); }
.gaya-opsi.aktif { background: var(--merek-lembut); }
.gaya-opsi[aria-selected="true"] { color: var(--merek); font-weight: 650; }
.gaya-opsi[aria-disabled="true"] { opacity: .45; cursor: default; }
.gaya-opsi.gaya-kosong { color: var(--redup); }
.gaya-grup { padding: 8px 10px 3px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--samar); }
.gaya-tidak-ada { margin: 0; padding: 10px; color: var(--redup); font-size: var(--t-kecil); }
.gaya-cari { position: relative; flex: none; }
.gaya-cari > .i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--redup); pointer-events: none; }
.gaya-panel .gaya-cari .masukan { min-height: 0; height: 38px; padding: 6px 10px 6px 34px; font-size: 14px; border-radius: 9px; }
.gaya-salah { margin: 0 4px; font-size: var(--t-kecil); font-weight: 620; color: var(--merah); }

.gaya-panel-tanggal { width: 288px; padding: 10px; }
.gaya-kal-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gaya-kal-kepala b { font-size: var(--t-sedang); }
.gaya-kal-geser { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--teks); cursor: pointer; }
.gaya-kal-geser:hover:not(:disabled) { background: var(--merek-muda); color: var(--merek); }
.gaya-kal-geser:disabled { opacity: .3; cursor: default; }
.gaya-kal-hari, .gaya-kal-isi { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.gaya-kal-hari span { padding: 4px 0; text-align: center; font-size: 11px; font-weight: 700; color: var(--samar); }
.gaya-kal-tgl {
  height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--teks); font: 550 13.5px var(--huruf);
  font-variant-numeric: tabular-nums; cursor: pointer;
}
.gaya-kal-tgl:hover:not(:disabled) { background: var(--merek-muda); color: var(--merek); }
.gaya-kal-tgl.luar { color: var(--samar); }
.gaya-kal-tgl.hari-ini { box-shadow: inset 0 0 0 1.5px var(--merek); font-weight: 750; }
.gaya-kal-tgl[aria-pressed="true"], .gaya-kal-tgl[aria-pressed="true"]:hover { background: var(--merek-terang); color: #fff; font-weight: 750; }
.gaya-kal-tgl:disabled { opacity: .3; cursor: default; }
.gaya-kal-tgl:focus-visible, .gaya-kal-geser:focus-visible, .gaya-tautan:focus-visible { outline: 2px solid var(--merek); outline-offset: 1px; }
/* Pilih berkas ringkas (app.js): pengganti tombol "Choose file" bawaan browser. */
.unggah-ringkas {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 14px;
  border: 1.5px dashed var(--garis-kuat); border-radius: 12px; background: var(--kartu-2); color: var(--teks); cursor: pointer;
  transition: border-color var(--cepat), background var(--cepat);
}
.unggah-ringkas > input[type="file"], .unggah-ringkas > input[type="file"].masukan {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 0;
}
.unggah-ringkas .ur-ikon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--merek-muda); color: var(--merek); }
.unggah-ringkas .ur-teks { display: grid; gap: 2px; min-width: 0; }
.unggah-ringkas .ur-judul { font-size: var(--t-sedang); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unggah-ringkas .ur-ket { font-size: var(--t-kecil); color: var(--redup); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unggah-ringkas:hover, .unggah-ringkas.seret { border-color: var(--merek); background: var(--merek-lembut); }
.unggah-ringkas:focus-within { outline: 2.5px solid var(--aksen); outline-offset: 2px; }
.unggah-ringkas.terisi { border-style: solid; border-color: color-mix(in srgb, var(--merek) 55%, var(--garis)); }
.unggah-ringkas.terisi .ur-judul { color: var(--merek); }
.isian.galat .unggah-ringkas, .isian-pop.galat .unggah-ringkas { border-color: var(--merah); }

/* Bulan: 4 baris x 3 bulan di bawah tahun. */
.gaya-panel-bulan { width: 264px; padding: 10px; }
.gaya-bln-isi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding-block: 4px; }
.gaya-kal-tgl.gaya-bln { height: 40px; font-size: 14px; }
.gaya-lembar.gaya-panel-bulan .gaya-kal-tgl.gaya-bln { height: 48px; font-size: 15px; }
.gaya-kal-kaki { display: flex; justify-content: space-between; gap: 8px; padding-top: 4px; border-top: 1px solid var(--garis); }
.gaya-kal-kaki:empty { display: none; }
.gaya-tautan { border: 0; background: none; padding: 6px 4px; color: var(--merek); font: 650 13px var(--huruf); cursor: pointer; }
.gaya-tautan.redup { color: var(--redup); }

/* HP: lembar dari bawah, pilihan lebih tinggi supaya mudah diketuk. */
.gaya-tirai { position: fixed; inset: 0; z-index: 999; background: var(--tirai); animation: gaya-pudar var(--cepat) var(--lentur); }
@keyframes gaya-pudar { from { opacity: 0; } }
.gaya-panel.gaya-lembar {
  left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: 72vh; border-radius: 18px 18px 0 0;
  padding: 12px max(12px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  animation: gaya-naik var(--sedang) var(--lentur);
}
@keyframes gaya-naik { from { transform: translateY(40px); opacity: 0; } }
.gaya-lembar .gaya-opsi { min-height: var(--sentuh); }
.gaya-lembar.gaya-panel-tanggal .gaya-kal-tgl { height: 44px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .gaya-panel, .gaya-tirai { animation: none; } }

/* Jendela kecil papan: cincin fokus tidak menimpa isian di sebelahnya. */
.pop-papan .dua { gap: 10px; }
.pop-papan .masukan:focus, .pop-papan .gaya-pemicu:focus-visible, .pop-papan .gaya-pemicu[aria-expanded="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--merek) 18%, transparent); }

/* Geser kolom papan dengan tarik judulnya (papan.js tarikKolom). */
.papan .judul-kolom { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.papan .judul-kolom.ditarik { background: var(--merek-muda); color: var(--merek); box-shadow: inset 0 0 0 1.5px var(--merek); opacity: .8; }
.garis-geser-kolom { position: fixed; z-index: 70; width: 3px; border-radius: 3px; background: var(--merek); box-shadow: 0 0 0 3px color-mix(in srgb, var(--merek) 22%, transparent); pointer-events: none; }
html.sedang-tarik-kolom, html.sedang-tarik-kolom * { cursor: grabbing !important; }

/* ---------- Layar sambutan sesudah masuk (web/sambut.php), meniru Umayumcha WMS ---------- */
.sambut {
  position: fixed; inset: 0; z-index: 2000; overflow: hidden; display: grid; place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background: linear-gradient(180deg, #1f2f6b 0%, #2b3f8c 100%); text-align: center;
  --sambut-tanggal: rgba(255, 255, 255, .75); --sambut-nama: #fff; --sambut-jabatan: rgba(255, 255, 255, .8);
  --sambut-garis: #fff; --sambut-arab: #fff; --sambut-arti: #fff; --sambut-sumber: rgba(255, 255, 255, .75);
  transition: opacity 350ms var(--keluar);
}
.sambut.keluar { opacity: 0; }
/* Warna teks per langit, sama dengan WMS: pagi dan siang terang (teks gelap), sore dan malam gelap (teks terang). */
.sambut-pagi, .sambut-siang {
  --sambut-tanggal: #4c7090; --sambut-nama: #12293f; --sambut-jabatan: #516c83; --sambut-garis: #c04a2a;
  --sambut-arab: #12293f; --sambut-arti: #1d3a55; --sambut-sumber: #4c7090;
}
.sambut-pagi { background: linear-gradient(180deg, #3d5b82 0%, #7fa6c9 45%, #f4c99a 100%); }
.sambut-siang { background: linear-gradient(180deg, #4f8fc7 0%, #86bfe6 55%, #cfe7f5 100%); }
.sambut-sore {
  background: linear-gradient(180deg, #3c3a63 0%, #a4536f 42%, #e6875e 72%, #ffce97 100%);
  --sambut-tanggal: #e4c3ca; --sambut-nama: #fff; --sambut-jabatan: #f1d6d4; --sambut-garis: #f7e7e6; --sambut-arab: #fff; --sambut-arti: #fff; --sambut-sumber: #f1d6d4;
}
.sambut-malam {
  background: linear-gradient(180deg, #05070d 0%, #0f1626 55%, #1c2942 100%);
  --sambut-tanggal: #9395a1; --sambut-nama: #f5f5f7; --sambut-jabatan: #a4a5af; --sambut-garis: #c8354f; --sambut-arab: #f5f5f7; --sambut-arti: #e6e6ea; --sambut-sumber: #a4a5af;
}
.sambut-langit { position: absolute; inset: 0; pointer-events: none; animation: sambut-zoom 20s ease-in-out infinite alternate; }
.sambut-pagi .sambut-langit { background: url('sambut-pagi.jpg') center / cover no-repeat; }
.sambut-siang .sambut-langit { background: url('sambut-siang.jpg') center / cover no-repeat; }
.sambut-sore .sambut-langit { background: url('sambut-sore.jpg') center / cover no-repeat; }
.sambut-malam .sambut-langit { background: url('sambut-malam.jpg') center / cover no-repeat; }
/* Peneduh tipis di tengah supaya teks terang tetap terbaca di bagian langit yang paling terang. */
.sambut-sore .sambut-langit::after, .sambut-malam .sambut-langit::after {
  content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 46% at 50% 50%, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .07) 62%, transparent 88%);
}
.sambut-bintang {
  position: absolute; inset: 0; opacity: 0;
  background-image: radial-gradient(1.6px 1.6px at 10% 20%, #fff, transparent), radial-gradient(1.2px 1.2px at 40% 15%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 70% 25%, #fff, transparent), radial-gradient(1.8px 1.8px at 85% 50%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 15% 72%, #fff, transparent), radial-gradient(1.6px 1.6px at 92% 78%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 65% 8%, #fff, transparent), radial-gradient(1.4px 1.4px at 3% 60%, #fff, transparent);
  background-repeat: no-repeat;
}
.sambut-malam .sambut-bintang { opacity: .3; animation: sambut-kerlip 3s ease-in-out infinite; }
.sambut-isi { position: relative; display: grid; justify-items: center; gap: 0; max-width: 640px; }
/* Nama dan kutipan sengaja dipisah (garis dan jarak lebar), supaya tidak terbaca sebagai satu kalimat. */
.sambut-orang { display: grid; justify-items: center; gap: 6px; }
.sambut-tanggal, .sambut-nama, .sambut-jabatan, .sambut-kutipan blockquote, .sambut-kutipan figcaption {
  margin: 0; font-family: -apple-system-rounded, ui-rounded, "SF Pro Rounded", -apple-system, "Segoe UI", system-ui, sans-serif;
}
.sambut-tanggal { font-size: clamp(11px, 1.05vw, 13px); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sambut-tanggal); margin-bottom: 6px; }
.sambut-nama { font-size: clamp(26px, 3.6vw, 44px); font-weight: 750; letter-spacing: -.02em; line-height: 1.1; color: var(--sambut-nama); text-wrap: balance; }
.sambut-jabatan { font-size: clamp(14px, 1.3vw, 17px); color: var(--sambut-jabatan); }
.sambut-garis { width: 54px; height: 3px; border-radius: 999px; background: var(--sambut-garis); margin: clamp(30px, 6vh, 56px) 0; }
.sambut-kutipan { margin: 0; display: grid; justify-items: center; gap: 10px; }
.sambut-arab {
  margin: 0; font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", "Traditional Arabic", "Sakkal Majalla", "Geeza Pro", "Segoe UI", serif;
  font-size: clamp(26px, 3.6vw, 44px); line-height: 1.7; color: var(--sambut-arab); text-wrap: balance;
}
.sambut-kutipan blockquote { margin: 0; }
.sambut-kutipan blockquote p { margin: 0; font-size: clamp(17px, 1.8vw, 22px); font-style: italic; font-weight: 500; line-height: 1.45; color: var(--sambut-arti); text-wrap: balance; }
.sambut-kutipan figcaption { font-size: clamp(12px, 1.1vw, 14px); font-weight: 650; letter-spacing: .06em; color: var(--sambut-sumber); }
/* Sapaan dan kutipan muncul bersamaan (keputusan pemilik 31 Okt 2026): sapaan (tanggal, nama,
   jabatan) naik sambil muncul, garis dan kutipannya cukup memudar masuk. */
.sambut-orang { opacity: 0; transform: translateY(10px); animation: sambut-masuk 600ms var(--lentur) 100ms forwards; }
.sambut-garis, .sambut-kutipan { opacity: 0; animation: sambut-pudar 700ms ease-out 100ms forwards; }
@keyframes sambut-masuk { to { opacity: 1; transform: none; } }
@keyframes sambut-pudar { to { opacity: 1; } }
@keyframes sambut-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes sambut-kerlip { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .sambut-orang, .sambut-garis, .sambut-kutipan { animation: none; opacity: 1; transform: none; }
  .sambut-langit, .sambut-bintang { animation: none; }
  .sambut { transition: none; }
}

/* Zoom tabel papan (papan.js zoomTabel): cubit di dalam tabel tidak menjadi zoom HP. */
.gulir-papan { touch-action: pan-x pan-y; }
.zoom-papan-angka {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 80; transform: translateX(-50%);
  padding: 7px 14px; border: 0; border-radius: 999px; background: var(--teks); color: var(--kartu);
  font: 700 14px var(--huruf); font-variant-numeric: tabular-nums; box-shadow: var(--bayang-pop); cursor: pointer;
  animation: gaya-pudar var(--cepat) var(--lentur);
}
.zoom-papan-angka:hover { background: var(--merek); color: #fff; }

/* Jawaban Google Form di halaman kandidat: pertanyaan di atas, jawabannya di bawah (pertanyaan form sering panjang). */
.rincian.jawaban-form > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.rincian.jawaban-form dd { font-weight: 560; }

/* Pil panjang (misalnya nama kompetensi di penilaian OJT) turun ke baris berikutnya di dalam
   kotak, bukan melewati tepi kartu. Sudut 18px: satu baris tetap berbentuk pil (tinggi 36px),
   dua baris jadi kotak membulat yang rapi. */
.chip { max-width: 100%; }
.chip > span, a.chip { max-width: 100%; white-space: normal; overflow-wrap: break-word; padding-block: 7px; border-radius: 18px; }

/* Di HP, tombol di bar aksi dibagi rata; label panjang ("Simpan kandidat", "Lanjut ke pratinjau")
   sempat melewati ruang tepi tombol. Sekarang lebarnya mengikuti label lalu sisa ruang dibagi rata,
   jadi bar tetap penuh. Tombol di bar pilih kandidat tidak ikut menyusut (labelnya sempat
   terpotong beberapa piksel). */
@media (max-width: 759.98px) { .bar-aksi > .tombol { flex: 1 1 auto; padding-inline: 14px; } }
.bar-pilih .tombol { flex: none; }

/* Ringkasan nilai OJT (app/penerimaan/ringkasan_ojt.php): nilai akhir besar, hasil sebagai lencana
   besar berwarna sesuai artinya, lalu rincian kecil. Dipakai di Form OJT dan detail penerimaan. */
.ringkasan-ojt {
  --nada: var(--abu); --nada-latar: var(--abu-latar); --nada-garis: var(--garis-kuat);
  position: relative; overflow: hidden; display: grid; gap: var(--j-4); padding: var(--j-5) var(--j-5) var(--j-5) calc(var(--j-5) + 4px);
  border-color: color-mix(in srgb, var(--nada-garis) 45%, var(--garis));
  background: linear-gradient(135deg, color-mix(in srgb, var(--nada-latar) 80%, var(--kartu)) 0%, var(--kartu) 65%);
}
.ringkasan-ojt::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--nada-garis); }
.ringkasan-ojt.nada-hijau { --nada: var(--hijau); --nada-latar: var(--hijau-latar); --nada-garis: var(--hijau); }
.ringkasan-ojt.nada-kuning { --nada: var(--kuning); --nada-latar: var(--kuning-latar); --nada-garis: var(--kuning-garis); }
.ringkasan-ojt.nada-merah { --nada: var(--merah); --nada-latar: var(--merah-latar); --nada-garis: var(--merah); }
.ringkasan-ojt-utama { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--j-3) var(--j-5); }
.ringkasan-ojt-nilai, .ringkasan-ojt-hasil { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.ringkasan-ojt-hasil p { margin: 0; }
.angka-ringkas { display: flex; align-items: baseline; gap: 6px; color: var(--nada); font-variant-numeric: tabular-nums; }
.angka-ringkas b { font-size: 64px; font-weight: 820; letter-spacing: -.045em; line-height: .9; }
.angka-ringkas span { font-size: var(--t-besar); font-weight: 650; color: var(--redup); letter-spacing: 0; }
.angka-ringkas.tanpa-nilai b { color: var(--samar); }
.lencana-besar { min-height: 40px; padding: 7px 16px; gap: 8px; font-size: var(--t-besar); font-weight: 740; white-space: normal; border-radius: 20px; }
.lencana-besar .i { width: 19px; height: 19px; flex: none; }
.ringkasan-ojt-skala { position: relative; }
.ringkasan-ojt-skala .penanda {
  position: absolute; top: -4px; left: calc(var(--nilai, 0) * 1%); width: 4px; height: 14px; margin-left: -2px;
  border-radius: 2px; background: var(--nada); box-shadow: 0 0 0 2px var(--kartu);
}
.ringkasan-ojt-rinci { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ringkasan-ojt-rinci > div { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 9px 12px; border-radius: var(--sudut-s); background: color-mix(in srgb, var(--kartu) 75%, transparent); border: 1px solid var(--garis); }
.ringkasan-ojt-rinci dt { font-size: var(--t-kecil); color: var(--redup); }
.ringkasan-ojt-rinci dd { margin: 0; font-size: var(--t-sedang); font-weight: 650; overflow-wrap: anywhere; }
.ringkasan-ojt-perlu { display: grid; gap: 8px; }
.ringkasan-ojt-perlu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ringkasan-ojt-perlu li { max-width: 100%; padding: 5px 12px; border-radius: 14px; background: var(--kartu); border: 1px solid var(--garis-kuat); font-size: var(--t-kecil); font-weight: 620; overflow-wrap: break-word; }
@media (min-width: 760px) {
  .ringkasan-ojt { padding: var(--j-6) var(--j-6) var(--j-6) calc(var(--j-6) + 4px); }
  .angka-ringkas b { font-size: 76px; }
  .ringkasan-ojt-hasil { justify-items: end; text-align: right; }
  .ringkasan-ojt-rinci { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* Tautan aksi kecil yang harus kelihatan bisa diklik (misalnya Ubah urgensi): biru dan tebal. */
.tautan-aksi { display: inline-flex; align-items: center; gap: 4px; color: var(--biru); font-weight: 700; font-size: var(--t-sedang); text-decoration: none; }
.tautan-aksi:hover { text-decoration: underline; }
.tautan-aksi:focus-visible { outline: 2px solid var(--biru); outline-offset: 2px; border-radius: 4px; }

/* Progres rekrutmen untuk pengaju (garis bertitik dengan angka, seperti penanda pesanan di WMS). */
.tahap-angka li { align-content: start; }
.tahap-angka small { display: block; }
.tahap-angka .angka { display: block; font-size: var(--t-angka); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: var(--teks); font-variant-numeric: tabular-nums; }
.tahap-angka li:not(.selesai):not(.sekarang) .angka { color: var(--samar); }
.tahap-angka .sekarang .angka { color: var(--merek); }
@media (max-width: 519px) { .tahap-angka .angka { font-size: var(--t-judul-2); } .tahap-angka small { font-size: 10px; } }
.progres-mini { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-kecil); color: var(--redup); font-variant-numeric: tabular-nums; white-space: nowrap; }
.titik-mini { display: inline-flex; align-items: center; gap: 3px; }
.titik-mini i { width: 7px; height: 7px; border-radius: 50%; background: var(--garis-kuat); }
.titik-mini i.ya { background: var(--merek); }
.titik-mini i.kini { background: var(--kartu); box-shadow: inset 0 0 0 2px var(--merek); }

/* Aturan screening (kandidat/screening.php): isian mengikuti pilihan peran dan jenis, tanpa JavaScript. */
.aturan-p { margin: 0; padding: 16px 18px; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--merek) 5%, transparent); display: grid; gap: 10px; min-width: 0; }
.aturan-p legend { float: left; width: 100%; padding: 0; font-weight: 700; display: flex; gap: 8px; align-items: baseline; overflow-wrap: anywhere; }
.aturan-p legend .aturan-no { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-grid; place-items: center; background: var(--abu-latar); color: var(--redup); font-size: var(--t-mini); font-variant-numeric: tabular-nums; }
.aturan-p > p { margin: 0; }
.aturan-p:has(input[name$="[peran]"][value="info"]:checked) .bila-dipakai { display: none; }
.aturan-p:not(:has(input[name$="[peran]"][value="nilai"]:checked)) .bila-nilai { display: none; }
.aturan-p:not(:has(input[name$="[peran]"][value="syarat"]:checked)) .bila-syarat { display: none; }
.aturan-p:has(input[name$="[jenis]"][value="angka"]:checked) .bila-pilihan { display: none; }
.aturan-p:not(:has(input[name$="[jenis]"][value="angka"]:checked)) .bila-angka { display: none; }
.aturan-p:has(input[name$="[peran]"]:not([value="info"]):checked) { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--merek) 45%, transparent); }
.aturan-bobot { max-width: 140px; }
.aturan-pilihan { display: grid; gap: 6px; }
.aturan-pilihan-kepala, .aturan-pilihan-baris { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.aturan-pilihan-kepala { font-size: var(--t-mini); color: var(--redup); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }
.aturan-pilihan-baris { padding: 6px 0; border-top: 1px solid var(--garis); }
.aturan-teks { overflow-wrap: anywhere; font-size: var(--t-sedang); }
.aturan-pilihan-baris .masukan { width: 84px; }
.daftar-lolos { max-height: 50vh; overflow-y: auto; padding: 4px 2px; }
.aturan-p:has(input[name$="[jenis]"][value="centang"]:checked) .bila-ganda { display: none; }
.aturan-p:not(:has(input[name$="[jenis]"][value="centang"]:checked)) .bila-centang { display: none; }

/* Isian wajib yang kosong di jendela kecil papan dan di luar .isian: merah dan bergetar seperti halaman masuk. */
.pop-papan .isian-pop.galat .masukan, .pop-papan .isian-pop.galat .gaya-pemicu, .masukan.goyang, .gaya-pemicu.goyang {
  border-color: var(--merah); box-shadow: 0 0 0 4px color-mix(in srgb, var(--merah) 16%, transparent);
}
.pop-papan .isian-pop.goyang .masukan, .pop-papan .isian-pop.goyang .gaya-pemicu, .masukan.goyang, .gaya-pemicu.goyang { animation: goyang 340ms var(--lentur); }
.pop-papan .isian-pop.galat label { color: var(--merah); }
.pop-papan.goyang { animation: goyang 340ms var(--lentur); }
/* Lembar tidak ditutup dengan menarik ke bawah lagi: pegangannya disembunyikan. */
dialog.lembar .pegangan { display: none; }
.bar-pilih .info-pilih { font-size: var(--t-kecil); color: var(--kuning); max-width: 22ch; line-height: 1.25; }
.bar-pilih .info-pilih:empty { display: none; }
.bar-pilih .tombol:disabled { opacity: .45; cursor: not-allowed; }
/* Aturan screening: kotak nilai yang belum diisi di pertanyaan yang dinilai. */
.aturan-p .masukan.belum-nilai { border-color: var(--merah); box-shadow: 0 0 0 3px color-mix(in srgb, var(--merah) 14%, transparent); }

/* Tabel data lengkap karyawan: 25 kolom, geser dalam wadahnya; judul dan nama tetap terlihat. */
.gulir-data-karyawan { max-height: calc(100vh - 300px); min-height: 320px; overflow: auto; }
.tabel-data-karyawan th, .tabel-data-karyawan td { white-space: nowrap; }
.tabel-data-karyawan td.panjang { white-space: normal; min-width: 240px; }
.tabel-data-karyawan thead th { position: sticky; top: 0; z-index: 2; background: var(--kartu); }
.tabel-data-karyawan th:first-child, .tabel-data-karyawan td:first-child { position: sticky; left: 0; z-index: 1; background: var(--kartu); }
.tabel-data-karyawan thead th:first-child { z-index: 3; }
.data-kosong { color: var(--merah); font-weight: 600; }

/* Pengaturan OJT */
.template-ojt.nonaktif { opacity: .65; }
.daftar-pakai-ojt { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--j-2); }
.daftar-pakai-ojt li { display: flex; align-items: center; justify-content: space-between; gap: var(--j-2); }

/* Absen */
.isian-ringkas { max-width: 320px; }

/* Penghasilan */
.daftar-tunjangan li { flex-wrap: wrap; }
.tunjangan-isi { flex: 1 1 200px; min-width: 0; }
.tunjangan-aksi, .tunjangan-henti { flex-wrap: wrap; }
.tunjangan-henti .masukan { width: 11rem; }
.angka-penghasilan { font-size: var(--t-angka); font-weight: 800; line-height: 1.2; }

/* Karyawan dalam pengawasan */
.foto-pratinjau { display: block; max-width: 100%; max-height: 260px; margin-top: var(--j-2); border-radius: 8px; }
.foto-pelanggaran { display: inline-block; margin-top: var(--j-2); }
.foto-pelanggaran img { display: block; max-width: 100%; width: 260px; max-height: 260px; object-fit: cover; border-radius: 8px; }
.aksi-laporan { flex-wrap: wrap; align-items: flex-start; }
.garis-waktu li > .lencana { align-self: flex-start; width: fit-content; }
/* Riwayat panjang dilipat (app.js): langkah lama tersembunyi, tombolnya di puncak garis. */
.garis-waktu.gw-gulir { max-height: min(var(--gw-tinggi, 440px), 75vh); overflow-y: auto; overscroll-behavior-y: auto; scrollbar-width: thin; }
@media (max-width: 700px) { .garis-waktu.gw-gulir { max-height: min(var(--gw-tinggi, 440px), 50vh); } }
.garis-waktu.gw-gulir:focus-visible { outline: 2px solid var(--merek); outline-offset: 2px; }
.gw-gulir.ada-atas { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40px); mask-image: linear-gradient(to bottom, transparent, #000 40px); }
.gw-gulir.ada-bawah { -webkit-mask-image: linear-gradient(to top, transparent, #000 40px); mask-image: linear-gradient(to top, transparent, #000 40px); }
.gw-gulir.ada-atas.ada-bawah { -webkit-mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent); }
@media print { .garis-waktu.gw-gulir { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; } }
.garis-waktu li:focus { outline: 0; }
.batal-laporan summary { display: inline-flex; cursor: pointer; list-style: none; }
.batal-laporan summary::-webkit-details-marker { display: none; }
.isi-sempit { max-width: 560px; }

/* Panel notifikasi di kepala saat belum ada isinya. */
.notif-kosong { padding: 18px 16px; margin: 0; color: var(--redup); font-size: var(--t-kecil); }

/* Menu layar penuh di HP: backdrop-filter membuat .kepala jadi acuan position: fixed, jadi isinya
   terkurung setinggi kepala. Saat menu terbuka, efek kacanya dilepas dan latarnya dibuat rapat. */
.kepala:has(.menu-hp.terbuka), .kepala:has(.menu-hp[open]:not(.siap)) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--kepala-latar, var(--latar)); }
.menu-hp-isi { background: var(--latar); }

/* Arah kaca memakai kartu tembus pandang. Lembar dan panel melayang di atas isi, jadi harus rapat. */
[data-arah="c"] dialog.lembar, [data-arah="c"] .menu-kecil-isi, [data-arah="c"] .menu-hp-isi, [data-arah="c"] .panel-menu { background: #fff; }
html[data-gelap] dialog.lembar, html[data-gelap] .menu-kecil-isi, html[data-gelap] .menu-hp-isi, html[data-gelap] .panel-menu { background: var(--kartu); }

/* Dasbor: To do tanpa centang, jadi judulnya memakai seluruh lebar. Tugas selesai dari pekerjaannya. */
.tugas.v3.tanpa-centang li { grid-template-columns: minmax(0, 1fr) auto; }
.tugas.v3.tanpa-centang .tugas-judul, .tugas.v3.tanpa-centang .tugas-ket { grid-column: 1; }
.tugas.v3.tanpa-centang .tenggat { grid-column: 2; }
.tugas-lain { padding: 0 20px 14px; }
.tugas-lain[open] { padding-inline: 0; }
.tugas-lain > summary { cursor: pointer; font-size: var(--t-kecil); }
.tugas-lain[open] > summary { padding-inline: 20px; }
.widget .tombol.terkirim { opacity: .7; cursor: default; }
.ajak-notif .ajak-panduan { display: none; }
.ajak-notif.panduan { white-space: normal; border-radius: 14px; align-items: flex-start; padding-block: 8px; max-width: 360px; }
.ajak-notif.panduan .ajak-label { display: none; }
.ajak-notif.panduan .ajak-panduan { display: inline; font-size: var(--t-kecil); }

/* Tab pil sebagai tautan (tab di aplikasi berpindah halaman, jadi garisnya tidak perlu bergeser). */
.tab-pil a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px; color: var(--redup); font: 640 13.5px var(--huruf); text-decoration: none; white-space: nowrap; transition: color 200ms ease, background 200ms ease; }
.tab-pil a:hover { color: var(--teks); }
.tab-pil a[aria-current="page"] { color: var(--teks); background: var(--papan-permukaan, var(--kartu)); box-shadow: 0 1px 2px rgba(20, 24, 41, .06), 0 4px 12px -4px rgba(31, 47, 107, .16); }
html[data-gelap] .tab-pil a[aria-current="page"] { background: #262e48; }
.pm-status .progres-mini { max-width: 100%; }
/* Pintasan papan dan Ganti lowongan di bar alat. */
.pintasan-papan { position: relative; }
.pintasan-papan > summary, .alat-papan .ganti-lowongan > summary { list-style: none; cursor: pointer; }
.pintasan-papan > summary::-webkit-details-marker { display: none; }
.pintasan-papan .ganti-isi { left: auto; right: 0; width: 340px; padding: 12px 14px; }
.pintasan-papan ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; color: var(--redup); }
.alat-papan a.tombol-alat { text-decoration: none; }
.alat-papan .ganti-lowongan .ganti-isi { max-height: 320px; overflow: auto; }

/* Pengawasan v2: laporan yang tingkatnya belum dipilih T&D, dan isi laci yang dipakai juga di halaman penuh. */
.aw-titik .t-belum { background: transparent; box-shadow: inset 0 0 0 2px var(--garis-kuat); }
.tingkat.belum { background: var(--abu-latar); color: var(--redup); font-weight: 600; }
.laci-isi.laci-lepas { overflow: visible; padding: 20px; }
.aw-riwayat .aw-tambahan { grid-column: 2; display: grid; gap: 8px; justify-items: start; margin-top: 6px; }
.aw-riwayat .foto-pelanggaran img { max-width: 220px; max-height: 180px; border-radius: 10px; }
.aw-tinjau { display: grid; gap: 8px; width: 100%; max-width: 340px; }
.aw-tinjau .isian { margin: 0; }
.pn-keputusan .grup-tombol { justify-content: flex-end; }

/* Karyawan v2 */
a.lok { color: inherit; text-decoration: none; }
a.lok[aria-current="true"] { color: #fff; }
.kry-laci-orang { display: flex; align-items: center; gap: 14px; }
.kry-laci-orang h2 { margin: 0; }
.rincian-laci dd .lencana { margin-left: 6px; }

/* Pengaturan OJT v2: isi disimpan per baris lewat formulir. Satu baris memakai susunan kolom .komp. */
.ojt-daftar > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
a.od-kartu { color: inherit; text-decoration: none; }
.oe-baris1 { margin: 0; }
.oe-nama-isian { flex: 1 1 260px; min-width: 0; margin: 0; display: grid; }
.oe-nama-isian .salah { font-size: 12.5px; color: var(--merah); display: none; }
.oe-nama-isian.galat .salah { display: block; }
.oe-kolom.oe-kolom-app { grid-template-columns: 44px minmax(0, 1fr) 96px 64px 74px; }
.oe-daftar .komp { display: block; padding: 6px 12px; }
.komp-form { display: grid; grid-template-columns: 44px minmax(0, 1fr) 96px 64px 74px; gap: 10px; align-items: center; margin: 0; }
.komp-urut { width: 44px; height: 32px; padding: 0; text-align: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--redup); font-weight: 650; font-variant-numeric: tabular-nums; }
.komp-urut:hover, .komp-urut:focus { border-color: var(--garis-kuat); background: var(--isian-latar, #fff); }
html[data-gelap] .komp-urut:hover, html[data-gelap] .komp-urut:focus { background: #10141f; }
.komp-isi .isian { margin: 0; display: block; }
.komp-isi .isian .salah { display: none; font-size: 12px; color: var(--merah); }
.komp-isi .isian.galat .salah { display: block; }
.komp-isi input[name="aspek"] { color: var(--redup); font-size: 12.5px; }
label.tanda-kritis { position: relative; cursor: pointer; justify-self: start; }
label.tanda-kritis input, label.sakelar-tombol input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.tanda-kritis:has(input:checked) { background: var(--s-merah); color: #fff; border-color: transparent; }
label.tanda-kritis:has(input:focus-visible), label.sakelar-tombol:has(input:focus-visible) { outline: 2.5px solid var(--aksen); outline-offset: 2px; }
label.sakelar-tombol { position: relative; cursor: pointer; }
label.sakelar-tombol input:checked + .sakelar { background: var(--s-hijau); }
label.sakelar-tombol input:checked + .sakelar::after { transform: translateX(16px); }
.oe-tambah { padding: 0 24px 16px; }
.oe-tambah > summary { list-style: none; }
.oe-tambah > summary::-webkit-details-marker { display: none; }
.oe-tambah > form { margin-top: 12px; max-width: 560px; }
form.chip-jab { margin: 0; }
.ojt-editor .oe-kaki { display: grid; gap: 4px; }
@media (max-width: 719.98px) {
  .oe-kolom.oe-kolom-app { display: none; }
  .komp-form { grid-template-columns: 44px minmax(0, 1fr); }
  .komp-form .tanda-kritis { grid-column: 2; }
  .komp-form .sakelar-tombol, .komp-form .tombol { grid-column: 2; justify-self: start; }
}

/* Data masuk v2 */
a.dm-item { color: inherit; text-decoration: none; }
.dmd-kaki details > summary { font-size: 13.5px; font-weight: 620; cursor: pointer; }
.dmd-kaki .baris-tombol { justify-content: flex-end; }

/* Data lengkap v2 */
a.chip-status { text-decoration: none; }
.saring-status .sr-saja { position: absolute; }
.dm-detail .dmd-kaki { position: static; }
@media (max-width: 559.98px) {
  .halaman .bar-pilih { flex-wrap: wrap; justify-content: center; height: auto; border-radius: 18px; padding: 8px 10px; }
}

/* Penggajian v2 */
a.sel-a { display: grid; place-items: center; text-decoration: none; }
.tabel-absen .kol-nama .nama { display: block; color: inherit; font-weight: 650; text-decoration: none; }
.tabel-absen .kol-nama small { display: block; font-size: 11.5px; font-weight: 500; color: var(--redup); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alat-absen .cari-papan { height: 40px; }
.alat-ph, .alat-absen { flex-wrap: wrap; }
.alat-ph .masukan:not(.pk-asli), .alat-absen .masukan:not(.pk-asli) { width: auto; min-width: 170px; height: 40px; }
.alat-ph a.chip { text-decoration: none; }
.rk-kepala.gj-kolom, .rk-baris.gj-kolom { grid-template-columns: minmax(0, 1.6fr) 90px minmax(0, 1fr) 110px 130px 150px 20px; }
.rk-baris.gj-kolom { color: inherit; text-decoration: none; }
.au-tangga { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; grid-column: 1 / -1; }
.au-tangga li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding-top: 8px; border-top: 1px solid var(--garis); }
.au-tangga li > span { display: grid; min-width: 0; }
.au-tangga small { font-size: 12px; color: var(--redup); }
.au-tangga-angka { margin-left: auto; text-align: right; }
.au-ubah > summary { list-style: none; cursor: pointer; }
.au-ubah > summary::-webkit-details-marker { display: none; }
.au-lain-baris { flex-wrap: wrap; }
.au-ubah[open] { flex-basis: 100%; }
/* Aturan upah: kartu membuka rincian tarif (keputusan pemilik 6 Nov 2026). */
a.au-kartu { color: inherit; text-decoration: none; cursor: pointer; }
.au-lihat { display: inline-flex; align-items: center; gap: 4px; justify-self: start; font: 650 13px var(--huruf); color: var(--merek); }
.au-rincian { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.au-rincian > li { display: grid; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--latar-sel); }
.au-rincian > li.au-r-kini { box-shadow: inset 0 0 0 1.5px var(--hijau); }
.au-rincian > li.au-r-lama { opacity: .78; }
.au-r-atas { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.au-r-atas > span:first-child { display: grid; gap: 2px; }
.au-r-atas small { font-size: 12.5px; color: var(--redup); }
.au-r-angka { margin: 0; display: grid; gap: 6px; }
.au-r-angka > div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.au-r-angka dt { color: var(--redup); }
.au-r-angka dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.au-r-angka .au-r-pokok { grid-column: 1 / -1; align-items: baseline; font-size: 14px; }
.au-r-angka .au-r-pokok dd { font: 760 22px/1.1 var(--huruf-judul); letter-spacing: -.02em; }
.au-r-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.au-r-kunci { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--redup); }
.sebaris { display: inline-flex; margin: 0; }
.slip-cetak-daftar { display: grid; gap: 16px; max-width: 720px; }
/* Slip berkelompok seperti master payroll (6 Nov 2026): judul kelompok dan subjudul tunjangan. */
dl .slip-judul { padding-top: 14px; border-bottom: 0 !important; }
dl .slip-judul dt { font-size: 11.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--redup); }
dl .slip-judul:first-child { padding-top: 0; }
dl .slip-subjudul { padding-top: 8px; padding-bottom: 2px; border-bottom: 0 !important; }
dl .slip-subjudul dt { font-size: 12.5px; font-weight: 650; color: var(--redup); }
dl .subtotal dt, dl .subtotal dd { font-weight: 650; }
.slip-cetak { padding: 24px; display: grid; gap: 14px; }
.slip-cetak header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--garis); }
.slip-cetak header img { max-height: 56px; width: auto; }
.slip-cetak header div { display: grid; text-align: right; }
.slip-cetak header span { color: var(--redup); font-size: 13px; }
@media (max-width: 899.98px) {
  .rk-kepala.gj-kolom, .rk-baris.gj-kolom { grid-template-columns: minmax(0, 1fr) auto 20px; }
  .rk-kepala.gj-kolom { display: none; }
  .rk-baris.gj-kolom > span:not(.rb-orang):not(.rk-status) { display: none; }
}
@media print {
  .kepala, .kepala-halaman, .kembali, .kilat-wadah, .lewati, .aksi-halaman, [data-cetak] { display: none !important; }
  html, body, .isi { background: #fff !important; color: #000 !important; }
  .slip-cetak { box-shadow: none !important; background: #fff !important; break-after: page; border: 1px solid #ccc; }
  .slip-cetak-daftar { display: block; max-width: none; }
}

/* Reimburse, Notifikasi, Profil, Crew v2 */
.rb-kepala.rb-tanpa-centang, .rb-baris.rb-tanpa-centang { grid-template-columns: 52px minmax(0, 1.5fr) minmax(150px, 1fr) 120px 170px 20px; }
@media (max-width: 899.98px) {
  .rb-kepala.rb-tanpa-centang { display: none; }
  .rb-baris.rb-tanpa-centang { grid-template-columns: minmax(0, 1fr) auto; }
  .rb-baris.rb-tanpa-centang .nota-mini, .rb-baris.rb-tanpa-centang .rb-orang, .rb-baris.rb-tanpa-centang .panah { display: none; }
  .rb-baris.rb-tanpa-centang .rb-status { grid-column: 1 / -1; }
}
.rb-hp a.pengajuan { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.alat-nt a.chip { text-decoration: none; }
.nt-setel-baris.nt-satu { grid-template-columns: minmax(0, 1fr) 52px; cursor: pointer; }
label.nt-sunyi { cursor: pointer; }
.nt-setel span.sakelar-tombol, .nt-setel .nt-sunyi span.sakelar-tombol { position: relative; padding: 0; }
.nt-setel .sakelar-tombol input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nt-setel .sakelar-tombol input:checked + .sakelar { background: var(--s-hijau); }
.nt-setel .sakelar-tombol input:checked + .sakelar::after { transform: translateX(16px); }
.nt-setel .sakelar-tombol input:focus-visible + .sakelar { outline: 2.5px solid var(--aksen); outline-offset: 2px; }
.pf-pintas { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pf-info .dorong-kanan { margin-left: auto; }
a.crew-uang { color: #fff; text-decoration: none; }
a.riw-baris { color: inherit; text-decoration: none; }
.crew-keluar { margin-top: 18px; display: none; }
@media (max-width: 759.98px) {
  .crew-keluar { display: block; }
  main.isi:has(.tab-bawah) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (min-width: 760px) { .tab-bawah { display: none; } .crew-app { margin-inline: auto; } }
label.nt-sunyi { display: flex; align-items: center; gap: 12px; }
label.nt-sunyi > span:first-child { flex: 1; }
.pf-info { flex-wrap: wrap; }
.pf-info > span { flex: 1 1 220px; }
/* Di bawah 1000 px kartu tidak bisa dipindah dan diubah ukurannya (widget.css), jadi menunya tidak ditampilkan. */
@media (max-width: 999.98px) { .menu-widget-isi [data-atur-dasbor] { display: none; } }
/* Tanda di baris pengaturan tidak ikut melebar seperti teks di sebelahnya. */
.nt-sunyi > .lencana { display: inline-flex; flex: none; }
/* Kolom angka cukup untuk "belum ada pembanding", supaya tidak menimpa panah. */
.lengkap-daftar .lengkap-baris { grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) 136px 16px; }
@media (max-width: 759.98px) { .lengkap-daftar .lengkap-baris { grid-template-columns: minmax(0, 1fr) 136px 16px; } }
/* Sapaan di kartu utama: teksnya putih di atas warna kartu. */
.sapa-atas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.sapa-atas .pil-waktu { margin-bottom: 0; }
.alat-atur { justify-content: flex-end; }
.hero-isi:has(> .hero-sapa) { grid-template-rows: auto 1fr; }
.widget.hero .sapa-v3.hero-sapa { position: relative; z-index: 1; display: block; grid-column: 1 / -1; margin: 0; padding: 24px 26px 20px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.widget.hero .hero-sapa .pil-waktu { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.widget.hero .hero-sapa .pil-waktu i, .widget.hero .hero-sapa .pil-waktu i::after { background: #4ade80; }
.widget.hero .hero-sapa h1 { font-size: clamp(26px, 2.6vw, 34px); color: #fff; }
.widget.hero .hero-sapa h1 .sapa-nama { background: none; color: #fff; -webkit-text-fill-color: #fff; animation: none; }
.widget.hero .hero-sapa .sejak { margin-top: 8px; max-width: none; font-size: var(--t-sedang); color: rgba(255, 255, 255, .84); }
.widget.hero .hero-sapa .sejak a.sejak-pil, .widget.hero .hero-sapa .sejak a.sejak-pil:hover, .widget.hero .hero-sapa .sejak a.sejak-pil:focus-visible { color: #fff; }
.widget.hero .hero-sapa .sejak a.sejak-pil.merah, .widget.hero .hero-sapa .sejak a.sejak-pil.merah:hover, .widget.hero .hero-sapa .sejak a.sejak-pil.merah:focus-visible { color: #ffc2cb; }
.widget.hero .hero-sapa .ajak-notif { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .88); }
.widget.hero .hero-sapa .ajak-notif .ya { color: #fff; }
.widget.hero .hero-sapa .ajak-notif .ya:hover, .widget.hero .hero-sapa .ajak-notif .tidak:hover { background: rgba(255, 255, 255, .18); }
.widget.hero .hero-sapa .ajak-notif .tidak { color: rgba(255, 255, 255, .8); }
/* Tugas lewat deadline di layar sempit: label dan tombol turun ke bawah judul, supaya judulnya tidak terjepit. */
@media (max-width: 639.98px) {
  .tugas.v3.sangkut li { grid-template-columns: 28px minmax(0, 1fr); }
  .tugas.v3.sangkut li .avatar { grid-row: 1 / span 2; align-self: start; }
  .tugas.v3.sangkut li .tenggat { grid-column: 2; grid-row: auto; flex-wrap: wrap; justify-content: space-between; margin-top: 6px; }
}
/* Halaman kerja selebar 1360 px (keputusan pemilik 3 Nov 2026). Data lengkap dan satu lowongan: hanya bagian atasnya, bar alat dan tabelnya tetap selebar 1680 px. */
.isi-sedang { max-width: 1360px; }
.isi-sedang-atas { max-width: 1680px; }
.isi-sedang-atas .halaman { --sisi-sedang: max(0px, calc((100% - 1312px) / 2)); }
.isi-sedang-atas .halaman > .kembali { margin-left: calc(var(--sisi-sedang) - 4px); }
.isi-sedang-atas .halaman > .kepala-papan, .isi-sedang-atas .halaman > .kepala-halaman, .isi-sedang-atas .halaman > .saring-status, .isi-sedang-atas .halaman > .rincian-lowongan, .isi-sedang-atas .halaman > .strip-nilai, .isi-sedang-atas .halaman > .peringatan { margin-left: var(--sisi-sedang); margin-right: var(--sisi-sedang); }
/* Rincian lowongan tidak menempel ke baris di bawahnya. */
.halaman > .rincian-lowongan { margin-bottom: 14px; }
.gulir-papan.tanpa-sisa { padding-bottom: 0; }
/* Logo Umayumcha di kepala halaman dan halaman masuk (keputusan pemilik 3 Nov 2026). */
.merek-logo { display: block; flex: none; width: 40px; height: 40px; transition: transform var(--sedang) var(--pegas); }
.merek-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.merek:hover .merek-logo { transform: rotate(-4deg) scale(1.04); }
/* Yang mengambang berlatar padat: --kartu tembus pandang di tema terang, jadi isi di belakangnya terbaca. */
:root { --padat: #fff; }
html[data-gelap] { --padat: #171d30; }
.gaya-panel, .gaya-panel.gaya-lembar, .pop-papan { background: var(--padat); }
html[data-gelap] .pk-panel { background: var(--padat); }
.lembar .lembar-tombol { background: var(--padat); box-shadow: 0 48px 0 var(--padat); }
.lembar .lembar-tombol .tombol:not(.tombol-utama):not(.tombol-bahaya) { background: var(--padat); }
body:has(dialog.lembar[open]) .tab-bawah { display: none; }

/* Pop up satu tema di semua halaman. Bingkai lama hr-warisan mengalahkan desain papan-v2, jadi jarak isinya
   dobel dan halaman tanpa papan-v2 memakai tata lama. Nilainya dari desain v2. Warna tirai ditulis langsung
   karena ::backdrop tidak mewarisi variabel di semua browser. */
.chip > input:checked + span, a.chip[aria-pressed="true"], button.chip[aria-pressed="true"] { color: var(--padat); }
dialog.lembar { padding: 0; border-radius: 20px 20px 0 0; max-height: 92dvh; box-shadow: 0 30px 80px rgba(11, 18, 48, .35); }
dialog.lembar[open] { animation: none; }
dialog.lembar.buka { transition: opacity 300ms cubic-bezier(.2, .8, .2, 1), transform 300ms cubic-bezier(.2, .8, .2, 1); }
dialog.lembar::backdrop { background: rgba(11, 18, 48, .32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
html[data-gelap] dialog.lembar { background: var(--padat); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 80px rgba(0, 0, 0, .7); }
dialog.lembar .lembar-kepala { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 22px 24px 6px; }
dialog.lembar .lembar-ikon { width: 40px; height: 40px; border-radius: 12px; }
dialog.lembar .lembar-kepala h2 { font-size: 18px; font-weight: 720; }
dialog.lembar .lembar-kepala p { margin-top: 3px; font-size: 13.5px; text-wrap: pretty; }
dialog.lembar .formulir { gap: 16px; padding: 14px 24px 20px; }
/* Sebagian pop up membungkus kepala dan tombol di dalam form. Jarak tepinya tetap 24 px, tidak dobel. */
dialog.lembar > form.formulir { padding: 0; }
dialog.lembar > form.formulir > .lembar-kepala { padding-bottom: 4px; }
dialog.lembar > .lembar-kepala + form.formulir { padding-top: 14px; }
dialog.lembar > form.formulir > :not(.lembar-kepala):not(.lembar-tombol) { margin-inline: 24px; }
dialog.lembar > form.formulir > :not(.lembar-kepala):has(+ .lembar-tombol) { margin-bottom: 4px; }
dialog.lembar .lembar-tombol { position: sticky; bottom: 0; z-index: 1; display: flex; justify-content: flex-end; gap: 8px; margin: 0; padding: 14px 24px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--garis); }
dialog.lembar > .lembar-kepala + .lembar-tombol { margin-top: 14px; }
dialog.lembar .isian > label, dialog.lembar .isian > legend, dialog.lembar .isian > .label { padding: 0; font-size: 13px; font-weight: 650; }
dialog.lembar .masukan-akhiran { align-items: center; gap: 8px; }
dialog.lembar .masukan-akhiran > .masukan { max-width: 120px; border-radius: 12px; }
dialog.lembar .masukan-akhiran > span { display: inline; padding: 0; border: 0; border-radius: 0; background: none; font-size: 13px; font-weight: 500; color: var(--redup); }
.gaya-tirai { background: rgba(11, 18, 48, .32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
@media (min-width: 760px) {
  dialog.lembar { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); padding: 0; border-radius: 20px; box-shadow: 0 30px 80px rgba(11, 18, 48, .35); transform: translateY(18px) scale(.98); }
  html[data-gelap] dialog.lembar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 80px rgba(0, 0, 0, .7); }
  dialog.lembar.buka { transform: none; }
  dialog.lembar .lembar-tombol .tombol { flex: none; min-width: 0; }
  dialog.lembar .pilihan-grup:not(.dua):not(.tiga):not(.empat):not(.empat-hp) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 759.98px) {
  dialog.lembar .lembar-tombol .tombol { flex: 1; min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.lembar, dialog.lembar.buka { transition: none; transform: none; }
}

/* Kilau menu panel di semua halaman, tidak hanya yang memuat gaya dasbor, termasuk menu yang sedang aktif. */
.panel-tautan a {
  background-image: linear-gradient(100deg, #4f566a 0%, #4f566a 30%, #8b93a7 42%, #d3d7e1 50%, #8b93a7 58%, #5a6176 70%, #5a6176 100%);
  background-size: 300% 100%; background-position: 0 0; -webkit-background-clip: text; background-clip: text;
}
.panel-tautan a:hover, .panel-tautan a:focus-visible, .panel-tautan a[aria-current="page"]:hover {
  color: transparent; -webkit-text-fill-color: transparent; background-position: 100% 0; transition: background-position 700ms cubic-bezier(.2, .8, .2, 1);
}
.panel-tautan a .hitung, .panel-tautan a .ket { -webkit-text-fill-color: currentColor; }
/* Menu HP: angka di samping judul halaman di dalam kelompok (6 Nov 2026). */
.mh-tautan .hitung { font-family: var(--huruf); letter-spacing: 0; margin-left: 8px; }
html[data-gelap] .panel-tautan a { background-image: linear-gradient(100deg, #e9ecf5 0%, #e9ecf5 30%, #9aa2b8 42%, #ffffff 50%, #c3c9d8 58%, #b9c0d1 70%, #b9c0d1 100%); }
[data-gerak="kurang"] .panel-tautan a:hover { transition: none; }

/* Teks di kartu utama tetap putih saat disorot. */
.widget.hero .hero-utama a.tautan-kartu, .widget.hero .hero-utama a.tautan-kartu:hover { color: #fff; }

/* Tab pil yang bergeser (app.js). Tanpa skrip, tab aktif memakai latarnya sendiri. */
.tab-pil { position: relative; }
.tab-geser { position: absolute; z-index: 0; border-radius: 10px; pointer-events: none; background: var(--papan-permukaan, #fff); box-shadow: 0 1px 2px rgba(20, 24, 41, .06), 0 4px 12px -4px rgba(31, 47, 107, .16); }
html[data-gelap] .tab-geser { background: #262e48; }
.tab-pil.ber-geser a[aria-current="page"], html[data-gelap] .tab-pil.ber-geser a[aria-current="page"] { background: transparent; box-shadow: none; }
@view-transition { navigation: auto; }
.kepala { view-transition-name: kepala; }
::view-transition-group(kepala) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
/* Pembungkus yang hanya dipakai untuk menyinkronkan bagian kepala saat pindah tab: tidak ikut tata letak. */
.isi-saja { display: contents; }
/* Isi tab yang sedang dimuat (data-tab-pegas): tetap terlihat, hanya diredupkan. */
.tab-memuat > :not([data-tab-tetap]) { opacity: .55; transition: opacity 200ms ease; }
html.tanpa-masuk .halaman > * { animation: none; }

/* Gambar tema pas di dalam kotaknya. */
.pf-tema button { grid-template-columns: minmax(0, 1fr); justify-items: stretch; text-align: center; }
.pf-contoh { min-width: 0; }

/* Kartu penghasilan Crew: nominal muncul di tempat. */
.crew-uang a, .crew-uang a:hover { color: inherit; text-decoration: none; }
.crew-uang .cu-kiri { flex: 1; min-width: 0; }
.crew-uang a.ketuk, .crew-uang a.ketuk:hover { min-height: 44px; color: rgba(255, 255, 255, .88); }

/* Absen tim di HP: kalender. Tabel tetap untuk layar lebar. */
.absen-kal { display: none; }
@media (max-width: 759.98px) {
  .absen-kal { display: grid; gap: 12px; }
  .papan-kartu.ada-kal { display: none; }
  .akal-kisi { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 10px; border-radius: 18px; background: var(--padat); box-shadow: var(--bayang-1, 0 1px 2px rgba(20, 24, 41, .06)); }
  .akal-hari-nama { padding-block: 4px; text-align: center; font-size: 11.5px; font-weight: 650; color: var(--redup); }
  .akal-hari-nama.minggu { color: var(--merah); }
  .akal-tgl { position: relative; display: grid; align-content: center; justify-items: center; gap: 1px; min-height: 52px; padding: 4px 0; border: 1px solid transparent; border-radius: 12px; background: var(--abu-latar); color: var(--teks); font: inherit; cursor: pointer; }
  .akal-tgl b { font-size: 14px; font-weight: 700; line-height: 1.1; }
  .akal-tgl small { min-height: 13px; font-size: 11px; line-height: 1.15; color: var(--redup); font-variant-numeric: tabular-nums; }
  .akal-tgl.minggu b { color: var(--merah); }
  .akal-tgl.ini { border-color: var(--garis-kuat); }
  .akal-tgl.dipilih { border-color: var(--merek); box-shadow: 0 0 0 2px color-mix(in srgb, var(--merek) 22%, transparent); }
  .akal-tgl i { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--kuning); }
  .akal-rincian { padding: 14px; border-radius: 18px; background: var(--padat); box-shadow: var(--bayang-1, 0 1px 2px rgba(20, 24, 41, .06)); }
  .akal-rincian h2 { margin-bottom: 8px; font: 700 15px/1.3 var(--huruf-judul); }
  .akal-rincian ul { list-style: none; margin: 0; padding: 0; display: grid; }
  .akal-rincian li + li { border-top: 1px solid var(--garis); }
  .akal-rincian a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding-block: 8px; color: inherit; text-decoration: none; }
  .akal-rincian a > span:first-child { display: grid; min-width: 0; }
  .akal-rincian b { overflow-wrap: anywhere; font-size: 14px; font-weight: 650; }
  .akal-rincian small { font-size: 12px; color: var(--redup); }
  .akal-rincian .lencana { flex: none; }
  .akal-kosong { flex: none; font-size: 12px; color: var(--samar); }
}

/* Kartu lowongan: kursi turun ke baris berikutnya sesudah 6 kotak, jadi lebar kolomnya tetap. Kolom proses
   dikunci selebar sisa kartu, karena teks yang tidak boleh turun baris mendorong barnya keluar kartu. */
.lw-isi .kursi { flex-wrap: wrap; max-width: 116px; }
.lw-isi .lw-pipa { grid-template-columns: minmax(0, 1fr); }
.lw-isi .lw-pipa .lw-angka { min-width: 0; white-space: normal; }

/* Halaman Google Form per lowongan: pemberitahuan lowongan ikut form utama. */
.ikut-form-utama { display: grid; gap: 8px; margin-bottom: var(--j-4); }
.form-utama .kartu-isi > .judul-kecil { font-size: var(--t-sedang); font-weight: 700; }

/* Tahap Penawaran probation (U164): warna pipa di kartu lowongan dan ringkasan dasbor. Berkas desain punya 5 tahap. */
.t5 { --w: var(--s-oranye); }
.pipa .f { background: var(--s-oranye); }
.pipa-ket span:nth-child(6)::before { background: var(--s-oranye); }
/* Papan Penerimaan punya 5 kolom sejak ada Penawaran (berkas desain 4 kolom). */
main .pn-papan { grid-template-columns: repeat(5, minmax(250px, 1fr)); }
main .pn-papan.ada-gagal { grid-template-columns: repeat(6, minmax(250px, 1fr)); }
@media (max-width: 999.98px) { main .pn-papan { grid-template-columns: repeat(5, minmax(260px, 82vw)); } }
/* Wadah pesan kilat sebagai popover (app.js): buang gaya bawaan browser, posisinya tetap seperti di hr.css. */
.kilat-wadah[popover] { right: auto; bottom: auto; height: auto; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; }

/* Kotak centang di halaman yang memuat papan-v2.css: tanda centangnya dari gambar latar di sana. Tanda lama (::after,
   hr-warisan.css) ikut tergambar dan bergeser, jadi kotaknya terlihat berbayang. Halaman lain tetap memakai tanda lama. */
html:has(link[href*="papan-v2.css"]) .centang > .kotak::after { content: none; }

/* Pop up yang dibuka dari alamat belum ada di lapisan teratas browser, jadi tab pil bisa menembusnya. */
dialog.lembar[open] { z-index: 60; }

/* Template screening (8 Nov 2026): garis pemisah antartemplate dalam satu posisi. */
.template-baris + .template-baris { border-top: 1px solid var(--garis); padding-top: 14px; }
.template-screening { border-top: 1px dashed var(--garis); padding-top: 12px; }
#lembar-template .pilihan-grup { grid-template-columns: 1fr; }
/* Baterai ringkasan papan: warna jadwal interview (ungu) dan warna lain yang belum ada di papan-v2.css. */
.papan .batere .w-ungu { background: var(--s-ungu); } .papan .batere .w-oranye { background: var(--s-oranye); } .papan .batere .w-pink { background: var(--s-pink); }