:root {
  color-scheme: dark;
  /* Tema Biru malam. Dokumen kertas (slip, surat) dan hasil cetak memakai
     kembali palet terang di bawah, lihat .slip/.surat dan @media print. */
  --bg: #0f1a2b;
  --surface: #182742;
  --surface-2: #1d2f50;
  --line: #2a3b5c;
  --line-strong: #3a4f78;
  --ink: #e8edf6;
  --ink-2: #c3cde0;
  --muted: #93a3bd;
  --accent: #6ea3ee;
  --accent-soft: #1c3358;
  --on-accent: #0f1a2b;
  --warn: #e5a862;
  --warn-soft: #3b2e1c;
  --danger: #f08477;
  --danger-soft: #40201f;
  --ok: #62c493;
  --ok-soft: #16352a;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  --nav-h: 60px;
  /* Tangga merah bagan organisasi, diambil dari rancangan Canva milik HRD.
     Makin tinggi jenjangnya makin gelap kotaknya. */
  --org-1: #7e0200;
  --org-2: #a60805;
  --org-3: #b7140f;
  --org-4: #ee312b;
  --org-garis: #c9302b;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }
p { margin: 0 0 .6rem; }
a { color: var(--accent); }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.tabular { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- LOGIN */

#login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: linear-gradient(160deg, #1f3a5f 0%, #16283f 100%);
}

.login-card {
  background: var(--surface);
  border-radius: 14px;
  padding: 2rem 1.6rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}

.login-card .brand { text-align: center; margin-bottom: 1.4rem; }
.login-card .brand .mark {
  width: 46px; height: 46px; margin: 0 auto .7rem;
  background: var(--accent); color: var(--on-accent); border-radius: 12px;
  display: grid; place-items: center; font-weight: 700; font-size: 1.05rem;
}

/* ------------------------------------------------------------ APP SHELL */

#app { display: none; min-height: 100dvh; }
#app.aktif { display: block; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: .7rem 1rem;
  display: flex; align-items: center; gap: .75rem;
}

.topbar .mark {
  width: 32px; height: 32px; flex: 0 0 32px;
  background: var(--accent); color: var(--on-accent); border-radius: 8px;
  display: grid; place-items: center; font-weight: 700; font-size: .8rem;
}

.topbar .judul { flex: 1; min-width: 0; }
.topbar .judul strong { display: block; font-size: .93rem; }
.topbar .judul span { display: block; font-size: .74rem; color: var(--muted); }

.pil {
  font-size: .7rem; padding: .2rem .5rem; border-radius: 99px;
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
  white-space: nowrap;
}

main { padding: 1rem; padding-bottom: calc(var(--nav-h) + 1.5rem); max-width: 1180px; margin: 0 auto; }

nav.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--surface);
  border-top: 1px solid var(--line);
  /* Lebar kolom diberi batas bawah supaya label tetap terbaca. Begitu tab
     bertambah banyak dan tidak muat, baris ini bisa digeser ke samping. */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(60px, 1fr);
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: env(safe-area-inset-bottom);
}
nav.tabbar::-webkit-scrollbar { display: none; }

nav.tabbar button {
  border: 0; background: none; padding: .55rem .2rem .5rem;
  font: inherit; font-size: .68rem; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: .18rem;
  cursor: pointer; border-top: 2px solid transparent;
}
nav.tabbar button svg { width: 21px; height: 21px; stroke-width: 1.7; }
nav.tabbar button.aktif { color: var(--accent); border-top-color: var(--accent); font-weight: 600; }

/* --------------------------------------------------------------- CARDS */

.kartu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: .85rem;
  box-shadow: var(--shadow);
}
.kartu > header {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-bottom: .8rem; flex-wrap: wrap;
}

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: .85rem; }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .8rem .85rem; box-shadow: var(--shadow);
}
.stat .label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stat .nilai { font-size: 1.5rem; font-weight: 680; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.stat .nilai.rp { font-size: 1.05rem; }
.stat .sub { font-size: .74rem; color: var(--muted); margin-top: .1rem; }
.stat.tanda-danger { border-left: 3px solid var(--danger); }
.stat.tanda-warn { border-left: 3px solid var(--warn); }
.stat.tanda-ok { border-left: 3px solid var(--ok); }

/* ---------------------------------------------------------------- BARS */

.bar-row { display: grid; grid-template-columns: 1fr auto; gap: .3rem .6rem; margin-bottom: .55rem; }
.bar-row .nm { font-size: .84rem; }
.bar-row .vl { font-size: .84rem; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.bar-track { grid-column: 1 / -1; height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
.bar-fill { height: 100%; background: var(--accent); border-radius: 99px; }
.bar-fill.alt { background: var(--warn); }

/* --------------------------------------------------------------- FORMS */

label.f { display: block; margin-bottom: .7rem; }
label.f > span { display: block; font-size: .78rem; color: var(--ink-2); margin-bottom: .25rem; font-weight: 550; }

input, select, textarea, button { font: inherit; }

input[type=text], input[type=password], input[type=number], input[type=date], input[type=month], input[type=search], select, textarea {
  width: 100%; padding: .55rem .65rem;
  border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
input[readonly] { background: var(--surface-2); color: var(--muted); }
textarea { min-height: 68px; resize: vertical; }

.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 .8rem; }

.cek { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .55rem; }
.cek input { width: auto; margin-top: .25rem; flex: 0 0 auto; }
.cek span { font-size: .85rem; }

.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem .95rem; border-radius: 8px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: .88rem;
  cursor: pointer; text-decoration: none;
}
.tombol:disabled { opacity: .5; cursor: not-allowed; }
.tombol.sekunder { background: var(--surface); color: var(--accent); }
.tombol.netral { background: var(--surface); color: var(--ink-2); border-color: var(--line-strong); }
.tombol.bahaya { background: var(--danger); border-color: var(--danger); }
.tombol.kecil { padding: .35rem .6rem; font-size: .8rem; }
.tombol.penuh { width: 100%; }

.aksi-baris { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Rekrutmen: tombol kerja tetap dekat dengan KPI, sedangkan tabel mengikuti
   pola visual modul HR lain agar tidak terasa seperti aplikasi terpisah. */
.r-aksi { margin-bottom: .85rem; }
.r-biaya-stat { grid-column: 1 / -1; }
.r-grid { display: grid; gap: .85rem; }
.r-grid, .r-grid > *, #r-isi, .r-stat > * { min-width: 0; }
.r-email { border-left: 3px solid var(--warn); }
.r-email:has(.lencana.ok) { border-left-color: var(--ok); }
.r-status, .r-tahap { min-width: 145px; padding: .35rem .45rem; font-size: .8rem; }
.r-credit-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; margin-bottom: .85rem; }
.r-credit { margin: 0; }
.r-credit .label { display: block; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.r-credit strong { display: block; font-size: 1.15rem; margin:.1rem 0; }
.r-penjelasan { margin-bottom: .85rem; }
.r-dokumen { margin-top: .4rem; white-space: nowrap; }
.r-kandidat td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 205px; }
.r-kandidat th:first-child { left: 0; z-index: 3; min-width: 205px; }
.r-kandidat tr:hover td:first-child { background: var(--surface-2); }

/* Pemilih dua bagian di dalam satu halaman, misalnya Kontrak dan Riwayat Keluar. */
.segmen {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-bottom: .85rem;
  box-shadow: var(--shadow);
}
.segmen button {
  border: 0; background: none; padding: .6rem .5rem; cursor: pointer;
  font: inherit; font-size: .85rem; font-weight: 550; color: var(--ink-2);
  border-bottom: 2px solid transparent;
}
.segmen button.aktif { color: var(--accent); border-bottom-color: var(--accent); background: var(--accent-soft); }

/* --------------------------------------------------------------- TABLE */

.tabel-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -1rem; padding: 0 1rem; }
table { border-collapse: collapse; width: 100%; font-size: .84rem; }
th, td { padding: .5rem .55rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 650; background: var(--surface-2); position: sticky; top: 0; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 700; border-top: 2px solid var(--line-strong); border-bottom: 0; background: var(--surface-2); }
table input { padding: .3rem .4rem; font-size: .82rem; min-width: 90px; }

/* Tabel kecil di dalam kotak pesan, misalnya saat menentukan arti status
   absensi atau memasangkan nama yang tidak dikenali. */
table.rapat { font-size: .8rem; background: var(--surface); border-radius: 8px; }
table.rapat th, table.rapat td { padding: .35rem .45rem; }
table.rapat th { position: static; }
table.rapat select { padding: .25rem .3rem; font-size: .8rem; max-width: 100%; }

/* Rincian yang bisa dibuka tutup, dipakai menelusuri asal angka biaya. */
details.rincian {
  border: 1px solid var(--line); border-radius: 8px;
  padding: .5rem .7rem; margin-top: .5rem; background: var(--surface-2);
}
details.rincian > summary {
  cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--accent);
  list-style: none; display: flex; align-items: center; gap: .4rem;
}
details.rincian > summary::-webkit-details-marker { display: none; }
details.rincian > summary::before { content: '▸'; font-size: .8rem; }
details.rincian[open] > summary::before { content: '▾'; }
details.rincian[open] > summary { margin-bottom: .3rem; }
details.rincian table { background: var(--surface); }

/* Kolom yang terlalu panjang disembunyikan di layar HP supaya baris tabel
   tidak menjulang tinggi. Isinya tetap bisa dibaca dengan mengetuk barisnya. */
@media (max-width: 759px) {
  .sembunyi-hp { display: none; }
}

/* Centang pilihan di dalam kartu, misalnya ikut menerapkan keterlambatan. */
label.pilihan { display: flex; align-items: center; gap: .5rem; font-size: .85rem; cursor: pointer; }
label.pilihan input { width: 1.05rem; height: 1.05rem; flex: none; }

/* --------------------------------------------------------------- LISTS */

.daftar { display: grid; gap: .55rem; }
.item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .75rem .85rem; display: grid; gap: .2rem; cursor: pointer; box-shadow: var(--shadow);
}
.item:hover { border-color: var(--accent); }
.item .baris-1 { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.item .nm { font-weight: 620; }
.item .meta { font-size: .78rem; color: var(--muted); }

.lencana {
  display: inline-block; font-size: .68rem; font-weight: 650; padding: .12rem .45rem;
  border-radius: 99px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
}
.lencana.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.lencana.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.lencana.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.lencana.info { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* --------------------------------------------------------------- MODAL */

.tirai {
  position: fixed; inset: 0; z-index: 100; background: rgba(3, 8, 16, .68);
  display: flex; align-items: flex-end; justify-content: center;
}
.tirai .panel {
  background: var(--bg); width: 100%; max-width: 720px; max-height: 92dvh;
  overflow-y: auto; border-radius: 14px 14px 0 0; padding: 1rem 1rem 2rem;
  border: 1px solid var(--line);
}
.panel > header {
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: -1rem; background: var(--bg); padding: .3rem 0 .7rem;
  margin: -1rem 0 .6rem; border-bottom: 1px solid var(--line); z-index: 2;
}
.tutup { border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 .3rem; }

/* --------------------------------------------------------------- MISC */

.notif {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h) + 14px); z-index: 200;
  background: var(--ink); color: var(--bg); padding: .6rem 1rem; border-radius: 8px;
  font-size: .86rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); max-width: 92vw;
}
.notif.salah { background: var(--danger); }
.notif.benar { background: var(--ok); }

.pesan { padding: .6rem .75rem; border-radius: 8px; font-size: .85rem; margin-bottom: .7rem; }
.pesan.salah { background: var(--danger-soft); color: var(--danger); }
.pesan.info { background: var(--accent-soft); color: var(--accent); }
.pesan.warn { background: var(--warn-soft); color: var(--warn); }

.kosong { text-align: center; padding: 2rem 1rem; color: var(--muted); font-size: .88rem; }

/* Blok peubah lingkungan pada panduan setup email rekrutmen. */
.kode-blok {
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: .6rem .75rem; font-family: ui-monospace, Consolas, monospace; font-size: .78rem;
  line-height: 1.5; overflow-x: auto; white-space: pre; margin: .5rem 0;
}

.filter-baris { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-bottom: .8rem; }

.seg { display: flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.seg button {
  flex: 1; border: 0; background: var(--surface); padding: .45rem .5rem;
  font-size: .82rem; cursor: pointer; color: var(--ink-2); border-right: 1px solid var(--line);
}
.seg button:last-child { border-right: 0; }
.seg button.aktif { background: var(--accent); color: var(--on-accent); font-weight: 620; }

.def { display: grid; grid-template-columns: 40% 1fr; gap: .35rem .7rem; font-size: .86rem; }
.def dt { color: var(--muted); }
.def dd { margin: 0; word-break: break-word; }

/* ------------------------------------------------------------- SLIP */

/* Slip dan surat adalah lembar kertas, jadi tetap terang walau aplikasinya gelap. */
.slip, .surat {
  color-scheme: light;
  --surface: #ffffff; --surface-2: #fbfaf8; --line: #e3e0da; --line-strong: #cfcbc2;
  --ink: #1c1b19; --ink-2: #4a4741; --muted: #7a766e;
  --accent: #1f3a5f; --accent-soft: #eaeff5; --on-accent: #ffffff;
  --warn: #b8763e; --warn-soft: #fbf1e7; --danger: #a63a2e; --danger-soft: #fbecea;
  --ok: #2f6b4f; --ok-soft: #eaf3ee;
  color: var(--ink);
}
.slip { background: #fff; padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); }
.slip h3 { margin-bottom: .1rem; }
.slip .slip-head {
  border-bottom: 2px solid var(--accent); padding-bottom: .7rem; margin-bottom: .9rem;
  display: flex; align-items: center; gap: .9rem;
}
.slip .slip-logo { height: 46px; width: auto; max-width: 130px; object-fit: contain; flex: 0 0 auto; }
@media (min-width: 760px) { .slip .slip-logo { height: 56px; max-width: 170px; } }
.slip table { font-size: .85rem; }
.slip td { white-space: normal; }

/* ---------------------------------------------- SURAT PERJANJIAN KERJA */

.surat {
  background: #fff; color: #111; border: 1px solid var(--line); border-radius: var(--radius);
  font-family: Georgia, 'Times New Roman', serif; font-size: .88rem; line-height: 1.5;
}
.surat-halaman { padding: 1.4rem 1.2rem; }
.surat-halaman + .surat-halaman { border-top: 2px dashed var(--line); }
.surat h1, .surat h2 { font-family: inherit; letter-spacing: .02em; }

/* Susunan halaman sampul mengikuti berkas master: judul, logo, kotak nomor,
   lalu tabel kedua pihak. Jarak vertikalnya juga disamakan. */
.surat-sampul { text-align: center; padding-top: 3.4rem; padding-bottom: 2rem; }
.surat-sampul h1 { font-size: 1.2rem; letter-spacing: .06em; margin-bottom: 2.4rem; }
.surat-sampul .surat-logo { height: 66px; max-width: 200px; object-fit: contain; display: block; margin: 0 auto 2rem; }
.surat-sampul .surat-logo-kosong { height: 66px; margin-bottom: 2rem; }
.surat-kotak-nomor {
  border-collapse: collapse; margin: 0 auto 3rem; width: 74%; max-width: 380px;
}
.surat-kotak-nomor td {
  border: 1px solid #222; padding: .3rem .55rem; text-align: left;
  font-size: .84rem; white-space: normal; background: #fff; color: #111;
}
.surat-kotak-nomor td:first-child { width: 27%; }
.surat-nomor { margin-bottom: 1.6rem; }
.surat-nomor.tengah { text-align: center; }
.surat-antara { margin-bottom: .7rem; }
.surat-pihak { width: 100%; margin: 0 auto; border-collapse: collapse; }
.surat-pihak th, .surat-pihak td {
  border: 1px solid #222; padding: .5rem .6rem; text-align: left; vertical-align: top;
  font-size: .82rem; white-space: normal; background: #fff; color: #111;
}
/* Kepala tabel di aplikasi ini menempel saat digulir. Untuk surat itu justru
   merusak, karena saat dicetak kepalanya ikut turun ke bawah tabel. */
.surat-pihak th {
  text-align: center; font-weight: 700; background: #f2f2f2;
  position: static; text-transform: none; letter-spacing: 0;
  font-size: .82rem; color: #111;
}
.surat-pihak-baris {
  display: grid; grid-template-columns: 4.2rem .6rem 1fr; align-items: baseline; margin-bottom: .3rem;
}
.surat-isian {
  border-bottom: 1px dotted #555; min-height: 1.1em; padding: 0 .15rem;
  overflow-wrap: anywhere;
}

.surat-judul-bagian { text-align: center; font-size: 1.02rem; margin-bottom: .5rem; }
.surat-pembuka p { margin: .6rem 0; text-align: justify; }
.surat-identitas { display: grid; grid-template-columns: 11rem 1fr; margin: .5rem 0 .5rem 1.2rem; }
.surat-identitas dt { padding: .12rem 0; }
.surat-identitas dt::after { content: ':'; float: right; padding-right: .6rem; }
.surat-identitas dd { padding: .12rem 0; }

.surat-pasal { margin-top: 1rem; }
.surat-pasal-kepala { text-align: center; margin-bottom: .45rem; }
.surat-pasal-kepala .nomor { font-weight: 700; }
.surat-pasal-kepala .judul { font-weight: 700; }
.surat-paragraf { margin: .3rem 0; text-align: justify; }
.surat-ayat, .surat-sub {
  display: grid; grid-template-columns: 1.9rem 1fr; column-gap: .25rem; margin: .22rem 0;
  text-align: justify;
}
.surat-sub { margin-left: 1.9rem; }
.surat-ayat .tanda, .surat-sub .tanda { text-align: left; }
.surat-nilai {
  display: grid; grid-template-columns: 12rem 1fr; margin: .18rem 0 .18rem 3.8rem; column-gap: .5rem;
}
.surat-nilai span:first-child::after { content: ':'; float: right; padding-right: .5rem; }

/* ------------------------------------- SPK PERJALANAN DINAS LUAR KOTA */

.surat-kop { display: block; width: 100%; height: auto; margin-bottom: 1.1rem; }
.surat-spk .spk-judul {
  text-align: center; font-size: 1.02rem; text-decoration: underline; margin-bottom: .1rem;
}
.surat-spk .spk-nomor { text-align: center; font-weight: 700; margin-bottom: 1rem; }
.surat-baris-label {
  display: grid; grid-template-columns: 6.5rem .6rem 1fr; align-items: baseline; margin-bottom: .12rem;
}
.spk-peserta { width: 100%; border-collapse: collapse; margin: .5rem 0 .8rem 1rem; }
.spk-peserta th, .spk-peserta td {
  border: 0; padding: .16rem .4rem .16rem 0; text-align: left; white-space: normal;
  background: none; color: inherit; position: static; font-size: inherit;
  text-transform: none; letter-spacing: 0; vertical-align: top;
}
.spk-peserta th { font-weight: 700; }
.spk-peserta td:nth-child(1), .spk-peserta th:nth-child(1) { width: 38%; }
.spk-peserta td:nth-child(2), .spk-peserta th:nth-child(2) { width: 4%; }
.spk-butir { margin: 0 0 .6rem 1.4rem; padding-left: 0; list-style: none; }
.spk-butir li {
  margin-bottom: .35rem; text-align: justify; position: relative; padding-left: 1.1rem;
}
.spk-butir li::before { content: '-'; position: absolute; left: 0; }
.spk-ttd { margin-top: 1.4rem; text-align: right; }
.spk-ttd .ruang { height: 3.6rem; }
.spk-form { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.spk-form th, .spk-form td {
  border: 1px solid #222; padding: .35rem .5rem; text-align: left; white-space: normal;
  background: #fff; color: #111; position: static; font-size: .82rem;
  text-transform: none; letter-spacing: 0; vertical-align: top;
}
.spk-form th { font-weight: 700; text-align: center; }
.spk-form tr.tinggi td { height: 3rem; }
.spk-form td.kanan { text-align: right; }
.spk-form th, .spk-form td { width: 50%; }

.surat-ttd { margin-top: 1.8rem; }
.surat-ttd-tanggal { text-align: right; margin-bottom: 1rem; }
.surat-ttd-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; text-align: center; }
.surat-ttd-kolom .ruang { height: 4.2rem; }
.surat-ttd-kolom .nama { font-weight: 700; border-top: 1px solid #444; padding-top: .2rem; }

@media (min-width: 760px) {
  .r-stat { grid-template-columns: repeat(5, 1fr); }
  .r-biaya-stat { grid-column: auto; }
  .r-grid { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
  .r-credit-grid { grid-template-columns: 1fr 1fr; }
  .surat { font-size: .92rem; }
  .surat-halaman { padding: 2rem 2.4rem; }
}

@media print {
  @page { margin: 14mm; }
  :root {
    color-scheme: light;
    --bg: #ffffff; --surface: #ffffff; --surface-2: #fbfaf8; --line: #e3e0da; --line-strong: #cfcbc2;
    --ink: #1c1b19; --ink-2: #4a4741; --muted: #7a766e;
    --accent: #1f3a5f; --accent-soft: #eaeff5; --on-accent: #ffffff;
    --warn: #b8763e; --warn-soft: #fbf1e7; --danger: #a63a2e; --danger-soft: #fbecea;
    --ok: #2f6b4f; --ok-soft: #eaf3ee;
  }
  body { background: #fff; }
  .topbar, nav.tabbar, .tombol, .panel > header, .notif { display: none !important; }
  .tirai { position: static; background: none; display: block; }
  .tirai .panel {
    max-height: none; overflow: visible; padding: 0;
    background: #fff; box-shadow: none; border: 0;
  }
  .slip { border: 0; }
  /* Peringatan yang hanya untuk HRD di layar, tidak ikut tercetak di slip. */
  .tanpa-cetak { display: none !important; }

  /* Saat mencetak slip gaji, seluruh isi halaman di belakangnya disembunyikan.
     Tanpa ini, tabel payroll ikut tercetak lebih dulu dan slipnya terdorong
     ke halaman berikutnya, terpotong di tengah. */
  body.cetak-slip #login,
  body.cetak-slip #app { display: none !important; }
  body.cetak-slip #modal-host { display: block !important; }

  /* Sama halnya saat mencetak surat kontrak. Formulir isian, peringatan, dan
     daftar berkas diberi kelas tanpa-cetak sehingga tidak ikut ke kertas. */
  body.cetak-surat #login,
  body.cetak-surat #app { display: none !important; }
  body.cetak-surat #modal-host { display: block !important; }

  .surat { border: 0; font-size: 11pt; }
  .surat-halaman { padding: 0; border: 0; }
  /* Sampul, badan surat, dan Perjanjian Bersama masing-masing mulai di
     halaman baru, seperti berkas master yang selama ini dipakai. */
  .surat-halaman + .surat-halaman { break-before: page; page-break-before: always; border-top: 0; }
  .surat-pasal, .surat-ayat, .surat-sub, .surat-nilai, .surat-identitas,
  .surat-ttd, .surat-pihak tr { break-inside: avoid; page-break-inside: avoid; }
  .surat-pasal-kepala { break-after: avoid; page-break-after: avoid; }
  /* Jarak vertikal halaman sampul disamakan dengan berkas master, diukur
     dalam sentimeter supaya hasil cetaknya tidak ikut berubah mengikuti
     lebar layar. */
  .surat-sampul { padding-top: 5.3cm; padding-bottom: 0; }
  .surat-sampul h1 { font-size: 14pt; margin-bottom: 2.6cm; }
  .surat-sampul .surat-logo { height: 2.3cm; max-width: 6.5cm; margin-bottom: 2.1cm; }
  .surat-sampul .surat-logo-kosong { height: 2.3cm; margin-bottom: 2.1cm; }
  .surat-kotak-nomor { width: 9.4cm; max-width: none; margin-bottom: 3.4cm; }
  .surat-antara { margin-bottom: .5cm; }
  .surat-pihak th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Kop surat SPK ikut tercetak di setiap halaman karena memang dipasang
     satu per halaman, bukan sekali di atas. */
  .surat-kop { -webkit-print-color-adjust: exact; print-color-adjust: exact; margin-bottom: .8cm; }
  .surat-spk .surat-halaman { padding: 0; }
  .spk-form tr.tinggi td { height: 1.5cm; }
  .spk-form tr, .spk-peserta tr, .spk-butir li, .spk-ttd { break-inside: avoid; page-break-inside: avoid; }

  /* Jangan sampai satu baris terbelah antara dua halaman. */
  .slip tr, .slip dl, .slip .slip-head { break-inside: avoid; page-break-inside: avoid; }
  .slip thead { display: table-header-group; }
  .slip p { orphans: 3; widows: 3; }

  /* Dirapatkan sedikit supaya satu slip muat dalam satu halaman A4, termasuk
     saat ada baris tambahan seperti penggantian biaya dan catatan prorata. */
  .slip { padding: 0; font-size: 10.5pt; }
  .slip .slip-head { margin-bottom: .6rem; padding-bottom: .5rem; }
  .slip .slip-logo { height: 42px; max-width: 130px; }
  .slip dl.def { margin-bottom: .6rem !important; row-gap: .1rem; }
  .slip dl.def dt, .slip dl.def dd { padding: .12rem 0; }
  .slip table { font-size: 9.5pt; }
  .slip th, .slip td { padding: .3rem .4rem; }
  .slip p.small { font-size: 8.5pt; margin-top: .5rem !important; line-height: 1.35; }
}

/* ------------------------------------------------------------ DESKTOP */

@media (min-width: 760px) {
  body { font-size: 15px; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .lebar { grid-column: 1 / -1; }
  .filter-baris { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .tirai { align-items: center; }
  .tirai .panel { border-radius: 14px; padding: 1.25rem; }
  .panel > header { top: -1.25rem; margin: -1.25rem 0 .8rem; }
  main { padding: 1.25rem; padding-bottom: 2rem; }
  .tabel-bungkus { margin: 0; padding: 0; }
  nav.tabbar {
    position: sticky; top: 0; bottom: auto;
    display: flex; justify-content: flex-start; gap: .2rem;
    border-top: 0; border-bottom: 1px solid var(--line); padding: 0 1rem;
  }
  nav.tabbar button {
    flex-direction: row; gap: .4rem; font-size: .85rem; padding: .7rem .85rem;
    border-top: 0; border-bottom: 2px solid transparent;
  }
  nav.tabbar button.aktif { border-bottom-color: var(--accent); }
  .notif { bottom: 20px; }
}

/* ------------------------------------------ MASTER POSISI & RACI MATRIX */

/* Daftar berpenanda di dalam kartu, dipakai jobdesc dan wewenang. */
.poin { margin: .4rem 0 0; padding-left: 1.15rem; font-size: .86rem; line-height: 1.5; }
.poin li { margin-bottom: .3rem; }
.poin li:last-child { margin-bottom: 0; }
.raci-poin { list-style: none; padding-left: 0; }
.raci-poin li { display: flex; gap: .45rem; align-items: flex-start; }

.tautan { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Huruf peran R, A, C, I. Ukurannya dijaga tetap supaya kolom matriks rata. */
.peran {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6rem; height: 1.3rem; padding: 0 .28rem;
  border-radius: 5px; font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line);
}
.peran.info { background: var(--accent-soft); color: var(--accent); border-color: var(--line-strong); }
.peran.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--line-strong); }
.peran.danger { background: var(--danger-soft); color: var(--danger); border-color: var(--line-strong); }

table.raci { font-size: .78rem; background: var(--surface); }
table.raci th, table.raci td { border: 1px solid var(--line); padding: .3rem .35rem; }
table.raci thead th { position: static; background: var(--surface-2); font-size: .72rem; }
table.raci th.kode { text-align: center; white-space: nowrap; }
/* Kolom aktivitas menempel di kiri supaya tetap terbaca saat matriks digeser. */
table.raci th.nm-akt {
  position: sticky; left: 0; z-index: 1; text-align: left; font-weight: 550;
  background: var(--surface); width: 16rem;
}
table.raci thead th.nm-akt { background: var(--surface-2); z-index: 2; }
table.raci td.sel { text-align: center; cursor: pointer; }
table.raci td.sel:hover { background: var(--accent-soft); }
table.raci tr.bagian td {
  background: var(--accent); color: var(--on-accent); font-weight: 620; font-size: .74rem;
  letter-spacing: .03em; padding: .35rem .45rem;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
}
table.raci tr.bagian .btn-tambah-bagian {
  font: inherit; font-weight: 500; font-size: .68rem; letter-spacing: normal;
  padding: .15rem .55rem; white-space: nowrap; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--on-accent); color: var(--on-accent);
}
table.raci tr.bagian .btn-tambah-bagian:hover { background: rgb(255 255 255 / .18); }
table.raci tr.bermasalah th.nm-akt { background: var(--danger-soft); color: var(--danger); }
table.raci .tanda { color: var(--warn); font-weight: 700; }

.pilih-peran { display: grid; gap: .45rem; margin-top: .8rem; }
.pilih-peran button { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; }

/* --------------------------------------------- BAGAN STRUKTUR ORGANISASI

   Bagan menurun dari atas ke bawah dengan garis penghubung yang digambar CSS,
   bukan gambar, supaya isinya tetap teks yang bisa dicari dan diketuk. Karena
   di jenjang terbawah ada belasan posisi, bagannya digeser ke samping di dalam
   wadahnya sendiri, sama seperti RACI Matrix, dan tidak memaksa seluruh
   halaman ikut melebar. */
.org { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: .3rem 0 .6rem; margin: 0 -1rem; }
.org-dalam { display: inline-block; min-width: 100%; padding: 0 1rem; }
.org ul {
  position: relative; padding: 1.4rem 0 0; margin: 0; list-style: none;
  white-space: nowrap; text-align: center;
}
.org li {
  display: inline-block; vertical-align: top; text-align: center;
  list-style: none; position: relative; padding: 1.4rem .3rem 0;
}
.org li::before, .org li::after {
  content: ''; position: absolute; top: 0; right: 50%;
  border-top: 1.5px solid var(--org-garis); width: 50%; height: 1.4rem;
}
.org li::after { right: auto; left: 50%; border-left: 1.5px solid var(--org-garis); }
.org li:only-child::before { display: none; }
.org li:only-child::after { left: 50%; right: auto; border-top: 0; }
.org li:first-child::before, .org li:last-child::after { border-top: 0 none; }
.org li:last-child::before { border-right: 1.5px solid var(--org-garis); border-radius: 0 4px 0 0; }
.org li:first-child::after { border-radius: 4px 0 0 0; }
.org ul ul::before {
  content: ''; position: absolute; top: 0; left: 50%;
  border-left: 1.5px solid var(--org-garis); width: 0; height: 1.4rem;
}
.org > .org-dalam > ul { padding-top: 0; }
.org > .org-dalam > ul > li { padding-top: 0; }
.org > .org-dalam > ul > li::before, .org > .org-dalam > ul > li::after { display: none; }

.org-kotak {
  display: inline-flex; flex-direction: column; align-items: center;
  white-space: normal; width: 8.8rem; padding: 0; border: 0; background: none;
  cursor: pointer; text-align: center; font: inherit; color: inherit;
}
.org-kotak:focus-visible { outline: none; }
.org-kotak .jbt {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 2.5rem; padding: .4rem .5rem;
  border-radius: 8px; background: var(--org-4); color: #fff;
  font-size: .66rem; font-weight: 800; line-height: 1.22;
  text-transform: uppercase; letter-spacing: .02em;
  box-shadow: var(--shadow); transition: box-shadow .12s;
}
/* Pil nama menggantung setengah keluar dari kotak merahnya. */
.org-kotak .org-orang {
  display: flex; flex-direction: column; align-items: center; gap: .18rem;
  width: 100%; margin-top: -.5rem;
}
.org-kotak .org-nama, .org-kotak .org-kosong {
  display: block; max-width: 94%; padding: .14rem .5rem;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface); box-shadow: var(--shadow);
  font-size: .68rem; line-height: 1.25;
}
.org-kotak .org-nama { font-weight: 750; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.org-kotak .org-kosong { font-style: italic; color: var(--muted); border-style: dashed; }
/* Warna mengikuti level baris, bukan tingkat jabatan, supaya seluruh kotak
   dalam satu baris berwarna sama seperti rancangan HRD. Supervisor Project
   bertingkat Leader tetapi digambar di baris keempat, jadi warnanya ikut
   baris keempat. */
.org-kotak.lv-1 .jbt { background: var(--org-1); }
.org-kotak.lv-2 .jbt { background: var(--org-2); }
.org-kotak.lv-3 .jbt { background: var(--org-3); }
.org-kotak.lv-4 .jbt { background: var(--org-4); }
.org-kotak:hover .jbt, .org-kotak:focus-visible .jbt {
  box-shadow: 0 0 0 3px rgba(238, 49, 43, .3), var(--shadow);
}
/* Penanda beban kerja lewat batas. Warnanya dibuat kuning karena merah sudah
   dipakai seluruh kotak, jadi garis merah tidak akan kelihatan. */
.org-kotak.lewat-standar .jbt { box-shadow: 0 0 0 2.5px var(--warn), var(--shadow); }

/* Penyambung lurus: baris tanpa kotak, dipakai ketika level seorang bawahan
   melompat lebih dari satu dari atasannya. Yang terlihat hanya garis turun. */
.org li.antara > .lurus {
  display: block; width: 0; margin: 0 auto;
  border-left: 1.5px solid var(--org-garis);
}

/* Menyeret kotak untuk mengganti atasan langsungnya, lewat Pointer Events
   supaya seragam di mouse, trackpad, dan sentuhan. Hijau dipakai untuk
   target lepas yang valid supaya beda jelas dari merah kotaknya sendiri dan
   dari kuning tanda lewat standar beban. */
.org-kotak.boleh-seret { cursor: grab; touch-action: none; }
.org-kotak.org-dragging { opacity: .35; }
.org-kotak.org-drop-target .jbt { box-shadow: 0 0 0 3px var(--ok), var(--shadow); }
/* Kotak hantu yang mengikuti pointer selama menyeret. Kloningan kotak asli,
   dilepas dari alur halaman supaya tidak ikut mendorong tata letak. */
.org-kotak-hantu {
  position: fixed; top: 0; left: 0; z-index: 500; pointer-events: none;
  opacity: .92; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25));
}
.org-dropzone-puncak {
  display: none; margin: 0 0 .6rem; padding: .5rem .8rem;
  border: 1.5px dashed var(--line-strong); border-radius: 8px;
  text-align: center; font-size: .78rem; color: var(--muted);
}
.org-dropzone-puncak.tampil { display: block; }
.org-dropzone-puncak.org-drop-target {
  border-color: var(--accent); color: var(--accent); background: rgba(110, 163, 238, .12);
}

/* Kepala bagan: logo di kiri, judul di kanan, seperti rancangan HRD. */
.org-kepala {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .1rem .1rem .8rem; flex-wrap: wrap;
}
.org-kepala img { max-height: 40px; max-width: 130px; object-fit: contain; }
.org-kepala .org-judul {
  text-align: right; font-weight: 800; line-height: 1.1; letter-spacing: -.01em;
  font-size: 1.02rem; text-transform: uppercase; color: var(--ink);
}

.bagan { margin-top: .5rem; }
.bagan .simpul {
  padding: .3rem .5rem; border-left: 2px solid var(--line-strong);
  display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap;
}
.bagan .simpul .nm { font-size: .86rem; font-weight: 550; }

/* Judul aktivitas dibungkus supaya teks panjang membungkus di dalam kolomnya,
   tidak melimpah menutupi kotak peran di sebelah kanannya. */
table.raci .akt-teks { width: 16rem; white-space: normal; word-break: break-word; line-height: 1.35; }

/* Pemilih skor pada penilaian inisiatif: satu baris per pilihan supaya
   keterangan skalanya ikut terbaca, bukan hanya angkanya. */
.pilih-skor { display: grid; gap: .35rem; }
.pilih-skor button {
  display: grid; grid-template-columns: 1.6rem 1fr; align-items: baseline;
  gap: .5rem; text-align: left; padding: .45rem .6rem;
}

/* Baris pilihan bercentang pada layar perbandingan impor Data Master. */
.pilihan {
  display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: start;
  padding: .35rem .1rem; font-size: .85rem; border-bottom: 1px solid var(--line);
}
.pilihan:last-child { border-bottom: 0; }
.pilihan input { margin-top: .2rem; }
.pilihan .small { display: block; }

/* -------------------------------------------------- SURAT PERINGATAN */

/* Judul SP tidak digarisbawahi, berbeda dengan SPK dinas. Itu mengikuti
   delapan surat yang sudah terbit, bukan penyeragaman sendiri. */
.surat-sp .spk-judul { text-decoration: none; }
.sp-identitas { margin: .6rem 0 0 1.6rem; }
.sp-identitas .surat-baris-label { grid-template-columns: 5.4rem .6rem 1fr; }

.sp-pelanggaran { width: 100%; border-collapse: collapse; margin: .5rem 0 .8rem; }
.sp-pelanggaran td {
  border: 1px solid #222; padding: .3rem .5rem; text-align: left; white-space: normal;
  background: #fff; color: #111; position: static; font-size: inherit;
  text-transform: none; letter-spacing: 0; vertical-align: top;
}
.sp-pelanggaran td:nth-child(1) { width: 32%; }
.sp-pelanggaran td:nth-child(2) { width: 3%; text-align: center; }

.sp-ayat { margin: .4rem 0 .6rem 0; padding-left: 2.1rem; }
.sp-ayat li { margin-bottom: .3rem; text-align: justify; }
/* Angka ayat ditulis dalam kurung seperti surat aslinya, bukan "1." */
.sp-ayat { counter-reset: ayat; list-style: none; padding-left: 0; }
.sp-ayat li { position: relative; padding-left: 2.1rem; counter-increment: ayat; }
.sp-ayat li::before { content: '(' counter(ayat) ')'; position: absolute; left: 0; }
.sp-ayat .kosong-ayat { color: #888; }

.sp-ttd {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem;
  text-align: center; margin-top: .8rem;
}
.sp-ttd .ruang, .sp-terima .ruang { height: 3.4rem; }
.sp-terima { text-align: center; margin-top: 1.2rem; }
.garis-nama { text-decoration: underline; }

@media print {
  .sp-pelanggaran tr, .sp-ayat li, .sp-ttd, .sp-terima {
    break-inside: avoid; page-break-inside: avoid;
  }
}

/* Cetakan SP dirapatkan supaya muat satu lembar, sama seperti berkas Word dan
   sama seperti delapan SP yang sudah terbit. Hanya berlaku saat mencetak;
   di layar hurufnya tetap seukuran surat lain supaya nyaman dibaca. */
@media print {
  body.cetak-surat .surat-sp { font-size: .82rem; line-height: 1.36; }
  body.cetak-surat .surat-sp .surat-paragraf { margin: .18rem 0; }
  body.cetak-surat .surat-sp .surat-kop { margin-bottom: .5cm; }
  body.cetak-surat .surat-sp .sp-identitas { margin-top: .35rem; }
  body.cetak-surat .surat-sp .sp-pelanggaran { margin: .35rem 0 .5rem; }
  body.cetak-surat .surat-sp .sp-pelanggaran td { padding: .2rem .4rem; }
  body.cetak-surat .surat-sp .sp-ayat li { margin-bottom: .18rem; }
  body.cetak-surat .surat-sp .sp-ttd .ruang,
  body.cetak-surat .surat-sp .sp-terima .ruang { height: 2.6rem; }
  body.cetak-surat .surat-sp .sp-terima { margin-top: .7rem; }
}

/* Formulir di dalam modal. Sebelumnya kelas .form tidak punya aturan sama
   sekali, sehingga keterangan kecil di bawah isian tetap sebaris dan label
   berikutnya ikut menempel di sampingnya. */
.form label { display: block; margin-bottom: .75rem; font-size: .82rem; font-weight: 550; }
.form label > span.small { display: block; font-weight: 400; margin-top: .25rem; }
.form label > input, .form label > select, .form label > textarea { width: 100%; margin-top: .25rem; }
.form label.pilihan { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.form label.pilihan > input { width: 1.05rem; margin-top: 0; }
.form label.pilihan > span.small { display: inline; margin-top: 0; }

/* KPI: diagram rekap. Garis putus-putus menandai batas 80%. */
.k-bar .bar-track { height: 14px; position: relative; overflow: visible; }
.k-bar .bar-fill { border-radius: 99px; }
.k-bar .bar-fill.k-ok { background: var(--ok); }
.k-bar .bar-fill.k-rendah { background: var(--danger); }
.k-bar[data-id] { cursor: pointer; }
.k-bar[data-id]:hover .nm { color: var(--accent); }
.k-batas { position: absolute; left: 80%; top: -2px; bottom: -2px; border-left: 2px dashed var(--ink-2); opacity: .75; }
.k-teks-ok { color: var(--ok); }
.k-teks-rendah { color: var(--danger); }
.k-kotak { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; vertical-align: -1px; margin-right: .3rem; }
.k-kotak.k-ok { background: var(--ok); }
.k-kotak.k-rendah { background: var(--danger); }
.k-bar { margin-bottom: .8rem; }

/* Absensi wajah: bingkai kamera. Video dicerminkan supaya terasa seperti bercermin. */
.ab-kamera { position: relative; background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; max-height: 62vh; width: 100%; }
.ab-kamera video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.ab-kamera::after { content: ""; position: absolute; inset: 10% 24%; border: 3px dashed rgba(255, 255, 255, .55); border-radius: 50%; pointer-events: none; }
.ab-status { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .7rem; background: rgba(0, 0, 0, .65); color: #fff; font-size: .88rem; text-align: center; }