/* Tukanggaji — komponen UI.
   RINTISAN (T0.1): baru memuat kerangka, menu, kartu, form, dan tombol —
   secukupnya agar login & beranda tampil benar.
   T0.3 memiliki file ini dan melengkapinya: tabel angka, chip status,
   panel peringatan, drawer kanan, fallback mobile (STANDARDS §4.2–4.3).
   Semua nilai HARUS mengacu ke var() dari tokens.css. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.lemah { color: var(--muted); }

/* ================= KERANGKA ================= */

.kerangka { display: flex; min-height: 100vh; }

.samping {
  width: 200px;
  flex: 0 0 200px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
}

.merek {
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-6);
}

/* Judul kelompok menu (Gajian / Master, 2026-08-17). Menu sebelumnya sembilan
   item datar tanpa hierarki — layar yang dipakai tiap bulan bercampur dengan
   master yang jarang disentuh. */
.menu-grup {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--sp-4) var(--sp-3) var(--sp-2);
}
.menu-grup:first-of-type { margin-top: 0; }

.menu { list-style: none; margin: 0; padding: 0; }
.menu:last-of-type { flex: 1; }
.menu li { margin-bottom: var(--sp-1); }
.menu a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-kecil);
  color: var(--muted);
  transition: background var(--transisi), color var(--transisi);
}
.menu a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.menu a.aktif { background: var(--surface-2); color: var(--ink); font-weight: 500; }

.samping-kaki {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: 13px;
}

.isi {
  flex: 1;
  min-width: 0;
  padding: var(--sp-7) var(--sp-6);
  max-width: 1200px;
}

.judul-halaman { margin-bottom: var(--sp-6); }
.judul-halaman h1 {
  margin: 0 0 var(--sp-1);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.judul-halaman p { margin: 0; }

/* ================= KARTU ================= */

.bento {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-4);
}

.kartu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  transition: box-shadow var(--transisi);
}
.kartu:hover { box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.kartu h2 {
  margin: 0 0 var(--sp-3);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.angka-besar {
  margin: 0;
  font-family: var(--font-angka);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  letter-spacing: -0.02em;
}

/* ================= KABAR ================= */

.kabar {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-kecil);
  margin-bottom: var(--sp-4);
  font-size: 13px;
}
.kabar-info  { background: var(--biru-bg);   color: var(--biru-ink); }
.kabar-galat { background: var(--merah-bg);  color: var(--merah-ink); }
.kabar-oke   { background: var(--hijau-bg);  color: var(--hijau-ink); }
.kabar-awas  { background: var(--kuning-bg); color: var(--kuning-ink); }

/* ================= FORM & TOMBOL ================= */

label { display: block; margin-bottom: var(--sp-4); font-size: 13px; color: var(--muted); }

input[type=text], input[type=password], input[type=number], select {
  display: block;
  width: 100%;
  margin-top: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-kecil);
  transition: border-color var(--transisi);
}
input:focus, select:focus { outline: none; border-color: var(--ink); }

.tombol {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  font-family: var(--font);
  font-size: 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-kecil);
  cursor: pointer;
  transition: background var(--transisi), transform var(--transisi);
}
.tombol:active { transform: scale(.98); }

.tombol-utama { background: var(--ink); color: #fff; }
.tombol-utama:hover { background: #333; }

/* Aksi berat (finalkan, hapus, buka kunci) sengaja TIDAK solid —
   tidak boleh terlihat seperti tombol bawaan (STANDARDS §4.1). */
.tombol-bahaya {
  background: transparent;
  color: var(--merah-ink);
  border-color: var(--merah-ink);
}
.tombol-bahaya:hover { background: var(--merah-bg); }

/* ================= LAYAR MASUK ================= */

.halaman-masuk {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--sp-4);
}

.kartu-masuk {
  width: 100%;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
}
.kartu-masuk .merek-besar {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.kartu-masuk > p.lemah { margin: 0 0 var(--sp-5); font-size: 13px; }
.kartu-masuk .tombol { width: 100%; }

/* ================= TOMBOL TAMBAHAN ================= */

.tombol-kecil {
  padding: var(--sp-1) var(--sp-3);
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-kecil);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--transisi), border-color var(--transisi);
}
.tombol-kecil:hover { background: var(--surface-2); }

.tombol-sekunder {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}
.tombol-sekunder:hover { background: var(--surface-2); }

/* ================= CHIP STATUS ================= */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.8;
  white-space: nowrap;
}
.chip-draft { background: var(--kuning-bg); color: var(--kuning-ink); }
.chip-final,
.chip-lunas { background: var(--hijau-bg); color: var(--hijau-ink); }

/* Chip selisih (Δ) — hanya dipakai bila |Δ| > 20% (STANDARDS §4.3);
   selebihnya delta ditampilkan polos, tanpa chip. */
.chip-delta { font-family: var(--font-angka); font-variant-numeric: tabular-nums; }
.chip-delta-naik  { background: var(--hijau-bg); color: var(--hijau-ink); }
.chip-delta-turun { background: var(--merah-bg); color: var(--merah-ink); }

/* ================= PANEL PERINGATAN ================= */

.panel-peringatan {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: var(--sp-5);
  overflow: hidden;
}
.panel-peringatan-judul {
  padding: var(--sp-3) var(--sp-4);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kuning-ink);
  background: var(--kuning-bg);
}
.panel-peringatan ul { list-style: none; margin: 0; padding: 0; }
.panel-peringatan li + li { border-top: 1px solid var(--border); }
.panel-peringatan button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--transisi);
}
.panel-peringatan button:hover { background: var(--surface-2); }
.panel-peringatan button .lemah { font-size: 12px; }

/* ================= HEADER STICKY PERIODE ================= */

.header-periode {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  margin: calc(var(--sp-7) * -1) calc(var(--sp-6) * -1) var(--sp-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.header-periode-judul { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.header-periode-judul h1 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.header-periode-total { display: flex; gap: var(--sp-6); }
.header-periode-total div { text-align: right; }
.header-periode-total .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 2px;
}
.header-periode-total .nilai {
  font-family: var(--font-angka);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 600;
}

@media (max-width: 900px) {
  .header-periode {
    position: static;
    margin: 0 0 var(--sp-5);
    border-radius: var(--radius);
    border: 1px solid var(--border);
  }
}

/* ================= TABEL ANGKA ================= */
/* Komponen inti aplikasi (STANDARDS §4.2) — dikerjakan paling serius.
   Wadah scroll horizontal terpisah dari halaman, supaya halaman sendiri
   tidak ikut geser saat tabel lebar. */

.tabel-wadah {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.tabel-angka {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

.tabel-angka th,
.tabel-angka td {
  padding: 0 var(--sp-3);
  height: 36px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.tabel-angka thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

.tabel-angka tbody tr:last-child td { border-bottom: none; }

/* Nominal: rata kanan, mono, sejajar lurus antar baris. */
.tabel-angka .num {
  text-align: right;
  font-family: var(--font-angka);
  font-variant-numeric: tabular-nums;
}

/* Nol tampil sebagai en-dash lewat rp()/angka() — kelas ini hanya
   memastikan warnanya --muted, bukan mewarnai ulang teks berisi. */
.tabel-angka .nol { color: var(--muted); }

/* Nilai negatif / potongan. */
.tabel-angka .minus { color: var(--merah-ink); }

/* Baris total — sedikit lebih tegas, tanpa jadi berat. */
.tabel-angka tfoot td,
.tabel-angka tr.total td {
  border-top: 1px solid var(--ink);
  border-bottom: none;
  font-weight: 600;
  background: var(--surface-2);
}

/* Baris yang disorot dari panel peringatan (klik item → sorot baris). */
.tabel-angka tr.disorot td { background: var(--kuning-bg); }

/* Sel yang bisa diedit: polos sampai difokus, tanpa tombol Simpan. */
.tabel-angka .sel-edit {
  display: block;
  width: 100%;
  min-width: 64px;
  padding: var(--sp-1) var(--sp-2);
  margin: 0;
  font-family: var(--font-angka);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  text-align: right;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-kecil);
  transition: border-color var(--transisi), background var(--transisi);
}
.tabel-angka .sel-edit:hover { background: var(--surface-2); }
.tabel-angka .sel-edit:focus { outline: none; border-color: var(--ink); background: var(--surface); }

/* Kolom Nama & Unit dibekukan saat tabel digeser ke kanan (masukan owner,
   2026-07-30 malam): tabel input/review punya banyak kolom, dan tanpa ini
   nama karyawan hilang dari pandangan begitu digeser — sel yang sedang
   diketik jadi tidak jelas milik siapa. Lebar kedua kolom DIPATOK (bukan
   cuma min-width) supaya offset `left` kolom kedua bisa dihitung pasti. */
.tabel-beku th:nth-child(1), .tabel-beku td:nth-child(1),
.tabel-beku th:nth-child(2), .tabel-beku td:nth-child(2) {
  position: sticky;
  z-index: 2;
  background: var(--surface);
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabel-beku thead th:nth-child(1), .tabel-beku thead th:nth-child(2) {
  z-index: 3;
  background: var(--surface-2);
}
.tabel-beku th:nth-child(1), .tabel-beku td:nth-child(1) {
  left: 0; width: 132px; min-width: 132px; max-width: 132px;
}
.tabel-beku th:nth-child(2), .tabel-beku td:nth-child(2) {
  /* 84px supaya "BATLAS" (unit terpanjang) muat tanpa terpotong. */
  left: 132px; width: 84px; min-width: 84px; max-width: 84px;
  border-right: 1px solid var(--border);
}
/* Baris disorot/total tetap terlihat di kolom beku juga, bukan cuma sisanya. */
.tabel-beku tr.disorot td:nth-child(1), .tabel-beku tr.disorot td:nth-child(2) { background: var(--kuning-bg); }
.tabel-beku tr.total td:nth-child(1), .tabel-beku tr.total td:nth-child(2),
.tabel-beku tfoot td:nth-child(1), .tabel-beku tfoot td:nth-child(2) { background: var(--surface-2); }

/* Varian satu-kolom-beku untuk tabel yang cuma punya satu kolom identitas
   (Kategori/Item/Penerima di layar Omset, bukan Nama+Unit) — owner,
   2026-07-30/31 malam: "judul primer kalau ada scroll jangan ikut scroll". */
.tabel-beku-1 th:nth-child(1), .tabel-beku-1 td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 132px; min-width: 132px; max-width: 132px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabel-beku-1 thead th:nth-child(1) { z-index: 3; background: var(--surface-2); }
.tabel-beku-1 tr.total td:nth-child(1) { background: var(--surface-2); }

/* Baris pemisah unit/cabang (masukan owner: kelompokkan baris per unit,
   seperti blok "Unit: X" di xlsx eksekusi). Bukan baris data — cuma label. */
.tabel-angka tr.grup-unit td {
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  height: 28px;
}
.tabel-beku tr.grup-unit td:nth-child(1), .tabel-beku tr.grup-unit td:nth-child(2) {
  background: var(--surface-2);
}

/* Pewarnaan kolom di layar Input (masukan owner, 2026-07-30 malam): kolom
   yang bisa diketik langsung dibedakan dari kolom hasil hitungan, dan di
   antara kolom yang bisa diketik, Bonus vs Bon dibedakan lagi — supaya mata
   langsung menangkap KATEGORI kolom sebelum membaca angkanya.
     kol-input → field masukan umum (masuk, lembur, telat, insentif)
     kol-bonus → bonus / ket bonus
     kol-bon   → bayar bon & total bon (dua sisi dari hutang yang sama) */
.tabel-angka th.kol-input,  .tabel-angka td.kol-input  { background: var(--biru-bg); }
.tabel-angka th.kol-bonus, .tabel-angka td.kol-bonus { background: var(--hijau-bg); }
.tabel-angka th.kol-bon,   .tabel-angka td.kol-bon   { background: var(--merah-bg); }
/* kol-kunci → layar Omset: persen Safari, bonus per ekor, porsi BASI. Ini
   ATURAN skema (memengaruhi periode berikutnya), bukan angka periode ini —
   kuning dipakai karena token itu sudah berarti "perlu perhatian" di seluruh
   aplikasi (STANDARDS §4.1: peringatan, draft). Ikon gembok di header
   memperjelas lagi (lihat .ikon-kunci di bawah). */
.tabel-angka th.kol-kunci, .tabel-angka td.kol-kunci { background: var(--kuning-bg); }
/* Kolom isian angka rupiah bisa 9 digit + titik ribuan ("8.889.890") — tanpa
   lebar minimum, tabel auto-layout kadang memberi kolom lebih sempit dari
   yang dibutuhkan input `width:100%`-nya, memotong tampilan angka SECARA
   DIAM-DIAM (mis. "900.000" tampil "900.00" — bisa terbaca salah, owner
   menyebutnya "bahaya"). Berlaku ke SEMUA kolom berwarna, bukan cuma dua —
   bug ini sempat lolos di kol-bon/kol-bonus karena hanya dua kelas pertama
   yang diberi lebar minimum. */
.tabel-angka td.kol-input, .tabel-angka td.kol-kunci,
.tabel-angka td.kol-bon, .tabel-angka td.kol-bonus { min-width: 132px; }
/* ...tapi tidak semua isian butuh selebar itu (owner, 2026-07-30 malam:
   "biru ini 4 digit aja isian nya maximal yg kuning itu 6 digit cukup...
   jangan kebesaran"). Qty/persen/tarif per item hanya beberapa digit — kotak
   isian selebar rupiah 9-digit di sebelahnya terlihat kosong dan longgar.
   Override lebih spesifik (2 kelas: kol-* + lebar-*) menang atas aturan
   lebar penuh di atas. */
/* width TETAP (bukan cuma min/max-width) supaya tabel auto-layout tidak
   melebarkan kolom ini memakai sisa ruang kosong saat kolom lain di tabel
   yang sama tidak butuh selebar itu — ditemukan 2026-07-31 di kolom qty OP:
   td tetap melebar sampai ~138px walau max-width 64px sudah dipasang. */
.tabel-angka td.lebar-kecil  { width: 64px; min-width: 64px; max-width: 64px; }
.tabel-angka td.lebar-sedang { width: 84px; min-width: 84px; max-width: 84px; }
/* Kolom per-penerima Safari (persen + bonus per ekor + total): sel yang sama
   kadang menampilkan persen kecil ("2,5 %"), kadang nominal penuh
   ("Rp 109.747") di baris lain — 84px kepotong untuk nominalnya. 112px pas
   untuk nominal 6-7 digit tanpa melebar tak perlu seperti sebelum diperbaiki
   (kolom ini sempat ~215px, TEMUAN 2026-07-31). */
.tabel-angka td.lebar-penerima { width: 112px; min-width: 112px; max-width: 112px; }
/* "besar" (rupiah panjang, mis. Omset isi & Target harian sampai 9 digit)
   HARUS punya width tetap juga — sebelumnya cuma min-width:132px (aturan di
   atas) tanpa max-width/width, jadi ikut melebar mengisi sisa ruang tabel
   sama seperti lebar-kecil/sedang sebelum diperbaiki (owner, 2026-07-31:
   masih banyak yang oversize sesudah perbaikan pertama). */
.tabel-angka td.lebar-besar { width: 132px; min-width: 132px; max-width: 132px; }
/* Sel yang sedang difokus tetap harus terlihat jelas di atas tint kolomnya. */
.tabel-angka td.kol-input .sel-edit:focus,
.tabel-angka td.kol-bonus .sel-edit:focus,
.tabel-angka td.kol-bon .sel-edit:focus,
.tabel-angka td.kol-kunci .sel-kunci:focus { background: var(--surface); }

/* Field kunci (aturan skema) tampil sebagai TEKS POLOS sampai diklik, baru
   berubah jadi kotak isian (masukan owner, 2026-07-30 malam) — perbedaan
   visual antara "sedang menyisir angka" dan "sedang mengubah aturan" harus
   kentara, bukan cuma warna kolom. `readonly` dilepas/dipasang lewat skrip
   kecil di admin/omset.php saat fokus/blur. */
.tabel-angka .sel-kunci:read-only {
  border-color: transparent;
  background: transparent;
  cursor: pointer;
}
.tabel-angka .sel-kunci:read-only:hover { background: var(--surface-2); }
.tabel-angka .sel-kunci:not(:read-only) {
  border-color: var(--kuning-ink);
  background: var(--surface);
  cursor: text;
}

/* Ikon gembok — menandai field yang mengubah ATURAN skema (persen/porsi/
   bonus per ekor), bukan angka periode yang sedang dibuka. SVG inline
   sederhana (STANDARDS §4.1 melarang emoji & ikon library). */
.ikon-kunci { width: 12px; height: 12px; vertical-align: -1px; margin-left: 2px; color: var(--kuning-ink); }

/* Tanda "%" di samping angka persen, bukan di baris sendiri di bawahnya
   (owner, 2026-07-30 malam: "rapikan % disamping nya lebih bagus"). */
.isian-persen { display: inline-flex; align-items: baseline; gap: 2px; justify-content: flex-end; width: 100%; }
/* width:auto pada <input> TANPA batas eksplisit membuat tabel auto-layout
   memakai lebar bawaan peramban (~170-200px, ukuran default sebuah <input>
   tanpa atribut size) saat menghitung lebar kolom — walau tampilannya kecil
   karena flex-shrink, KOLOMNYA sudah kadung dilebarkan sebelum menyusut.
   Ditemukan 2026-07-31: kolom Ari/Ima/Nanda melebar sampai ~215px padahal
   isinya cuma "2,5 %". width tetap (bukan auto) menghilangkan akar masalahnya,
   bukan menambal lebar kolomnya (owner: "cm butuh 2 digit aja"). */
/* 34px kepotong untuk nilai berkoma seperti "0,35" (kategori Hewan) — hanya
   cukup untuk 2 digit bulat (owner, 2026-07-31: "yg koma malah kurang size").
   42px masih kepotong 8px (diukur scrollWidth 48 vs clientWidth 40) — teks
   rata-kanan jadi memotong digit TERAKHIR tanpa terlihat ("0,35" tampil
   "0,3"). 50px pas untuk 4 karakter terpanjang yang benar-benar dipakai. */
.isian-persen .sel-edit { width: 50px; min-width: 50px; flex: 0 0 auto; text-align: right; }

/* Baris selang-seling / zebra (masukan owner, 2026-07-30 malam, supaya baris
   panjang gampang disisir). Ini MEMBALIK keputusan lama STANDARDS §4.2
   ("tanpa zebra") — didokumentasikan di sana, bukan diam-diam.
   Kolom netral pakai --bg (krem sangat pudar) di baris genap — tiga lapis
   yang sudah ada: surface(ganjil)/bg(genap)/surface-2(header, total, pemisah
   unit), tidak ada nilai mentah baru.
   Kolom yang sudah berwarna sendiri (kol-input/kol-bonus/kol-bon/kol-kunci)
   TETAP ikut zebra (owner, koreksi berikutnya: "bon zebra merah juga, bonus
   zebra hijau") — tapi nadanya digelapkan sedikit dari warna aslinya lewat
   `color-mix()`, BUKAN warna baru: token yang sama, cuma nada genapnya
   sedikit lebih gelap. Ini menjaga dua hal sekaligus: pola selang-seling
   tetap terlihat DAN kategori warna kolom tetap konsisten di semua baris. */
.tabel-angka tbody tr:nth-child(even):not(.grup-unit):not(.total) td {
  background: var(--bg);
}
.tabel-angka tbody tr:nth-child(even):not(.grup-unit):not(.total) td.kol-input {
  background: color-mix(in srgb, var(--biru-bg), black 6%);
}
.tabel-angka tbody tr:nth-child(even):not(.grup-unit):not(.total) td.kol-bonus {
  background: color-mix(in srgb, var(--hijau-bg), black 6%);
}
.tabel-angka tbody tr:nth-child(even):not(.grup-unit):not(.total) td.kol-bon {
  background: color-mix(in srgb, var(--merah-bg), black 6%);
}
.tabel-angka tbody tr:nth-child(even):not(.grup-unit):not(.total) td.kol-kunci {
  background: color-mix(in srgb, var(--kuning-bg), black 6%);
}

/* Indikator autosave per baris — muncul sesaat setelah blur, di kolom sendiri. */
.status-simpan { font-size: 12px; white-space: nowrap; }
.status-simpan-oke   { color: var(--hijau-ink); }
.status-simpan-galat { color: var(--merah-ink); }
.status-simpan-tunggu { color: var(--muted); }

/* ================= DRAWER / PANEL KANAN =================

   Drawer BISA DITUTUP dan default-nya TERTUTUP (keputusan owner
   2026-07-29): saat menyisir angka, tabel butuh lebar penuh — di layar
   1440px, drawer terbuka membuat kolom BON terdorong keluar dan harus
   di-scroll, padahal prinsipnya review tanpa klik (STANDARDS §1.2).
   Drawer dibuka hanya ketika satu orang mau diperiksa slipnya.

   Markup:
     <div class="dua-kolom" data-drawer="tutup">   ← atau "buka"
       <div class="kolom-tabel"> … </div>
       <aside class="drawer"> … </aside>
     </div>
   Tombol pemicu cukup mengubah atribut data-drawer pada .dua-kolom. */

.dua-kolom {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
}
.dua-kolom > .kolom-tabel { flex: 1; min-width: 0; }
.dua-kolom > .drawer { flex: 0 0 340px; }

.dua-kolom[data-drawer="tutup"] > .drawer { display: none; }
.dua-kolom[data-drawer="tutup"] { gap: 0; }

/* Tabel rincian slip di drawer: label ("Bonus Kinerja", keterangan bonus
   bebas panjang ketikan owner) HARUS boleh melipat baris — drawer cuma
   ~340px (100% di mobile). white-space:nowrap bawaan .tabel-angka (dibuat
   untuk tabel angka rapat) di sini malah membuat TABELNYA melebar melebihi
   drawer dan separuh teks kepotong tanpa scrollbar, tanpa terlihat error
   (owner, 2026-07-31: "Bonus Kinerj"/"Tambahan Ber..." kepotong). Kolom
   nominal dikunci sempit supaya label dapat ruang paling banyak. */
.tabel-rincian td:first-child { white-space: normal; word-break: break-word; }
.tabel-rincian td.num { width: 96px; min-width: 96px; white-space: nowrap; }

.drawer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  position: sticky;
  top: var(--sp-5);
}
.drawer h2 {
  margin: 0 0 var(--sp-4);
  font-size: 13px;
  font-weight: 600;
}
.drawer-kosong { color: var(--muted); font-size: 13px; }

/* Kepala drawer: judul + tombol tutup */
.drawer-kepala {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.drawer-kepala h2 { margin: 0; }

.drawer-tutup {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font);
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.drawer-tutup:hover { color: var(--ink); text-decoration: underline; }

/* Nama karyawan di tabel: pemicu drawer, tapi tetap terbaca sebagai teks
   biasa — tabel angka tidak boleh terlihat penuh tautan biru. */
.tautan-baris {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font);
  font-size: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.tautan-baris:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .dua-kolom { flex-direction: column; }
  .dua-kolom > .drawer { flex: none; width: 100%; position: static; }
}

/* ================= FORM LANJUTAN ================= */

.grup-field { margin-bottom: var(--sp-5); }
.grup-field:last-child { margin-bottom: 0; }

.bantuan {
  margin: var(--sp-1) 0 0;
  font-size: 12px;
  color: var(--muted);
}

.galat-field {
  margin: var(--sp-1) 0 0;
  font-size: 12px;
  color: var(--merah-ink);
}
.grup-field.ada-galat input,
.grup-field.ada-galat select { border-color: var(--merah-ink); }

.baris-cek {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.baris-cek label { margin: 0; color: var(--ink); font-size: 14px; }
.baris-cek input[type=checkbox],
.baris-cek input[type=radio] { width: auto; margin: 0; }

/* ================= KELENGKAPAN ================= */

kbd {
  display: inline-block;
  padding: 1px var(--sp-1);
  font-family: var(--font-angka);
  font-size: 11px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  line-height: 1.6;
}

.tab-daftar {
  display: flex;
  gap: var(--sp-5);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5);
}
.tab-daftar a {
  padding: var(--sp-2) 0;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-daftar a:hover { color: var(--ink); text-decoration: none; }
.tab-daftar a.aktif { color: var(--ink); border-color: var(--ink); font-weight: 500; }

/* Tombol "lanjut ke langkah berikutnya" di kaki layar periode (2026-08-17).
   Sebelumnya tiap selesai satu langkah owner harus balik ke menu samping. */
.lanjut-langkah { margin: var(--sp-6) 0 var(--sp-4); }

.remah {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: 13px;
  color: var(--muted);
  margin-bottom: var(--sp-4);
}
.remah a { color: var(--muted); }
.remah a:hover { color: var(--ink); }
.remah span.pemisah { color: var(--border); }

.kosong {
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.kosong strong { display: block; color: var(--ink); font-size: 14px; margin-bottom: var(--sp-1); font-weight: 500; }

/* ================= LAYAR SEMPIT ================= */

@media (max-width: 900px) {
  .kerangka { flex-direction: column; }
  .samping {
    width: auto;
    flex: none;
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
  }
  .merek { margin-bottom: 0; }
  /* Sidebar jadi bilah mendatar: judul kelompok (Gajian/Master) disembunyikan
     — di satu baris, label kelompok memakan tempat tanpa menambah kejelasan;
     urutannya sudah cukup memisahkan. */
  .menu-grup { display: none; }
  .menu { display: flex; gap: var(--sp-1); overflow-x: auto; }
  .menu:last-of-type { flex: none; }
  .menu li { margin-bottom: 0; }
  .menu a, .menu-belum { white-space: nowrap; }
  .samping-kaki { border-top: none; padding-top: 0; }
  .isi { padding: var(--sp-5) var(--sp-4); }
}

/* HP (2026-08-17). Sebelumnya breakpoint berhenti di 900px — padahal layar
   Kirim justru yang paling mungkin dibuka dari HP saat owner mentransfer
   sambil mengirim slip. */
@media (max-width: 600px) {
  /* Isian di bawah 16px memicu auto-zoom iOS setiap kali sel difokus, dan
     halaman tidak pernah kembali ke skala semula — bukan soal selera. */
  input, select, textarea, .sel-edit { font-size: 16px; }

  .isi { padding: var(--sp-4) var(--sp-3); }
  .judul-halaman h1 { font-size: 20px; }
  .bento { grid-template-columns: 1fr; }
  .header-periode { gap: var(--sp-2); }
  .header-periode-total { gap: var(--sp-4); }
  .tab-daftar { gap: var(--sp-4); overflow-x: auto; }
  .tab-daftar a { white-space: nowrap; }
  .lanjut-langkah .tombol { display: block; text-align: center; }
  .zona-bukti { min-width: 130px; }
}

/* Menu yang layarnya belum dibuat: tampak redup dan tidak bisa diklik.
   Lebih baik jelas belum ada daripada tautan yang membawa ke 404. */
.menu-belum {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  color: var(--border);
  cursor: not-allowed;
}

/* Zona tarik-lepas bukti transfer (owner, 2026-08-17: "aku suka nya drag
   and drop") — admin/cetak.php, seksi "Kirim ke pegawai". */
.zona-bukti { display: flex; flex-direction: column; gap: 2px; min-width: 160px; }
.zona-bukti-status { font-size: 13px; }
.zona-bukti-lepas {
  display: block;
  padding: var(--sp-2);
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-kecil);
  cursor: pointer;
  transition: border-color var(--transisi), background var(--transisi);
}
.zona-bukti-lepas:hover { background: var(--surface-2); }
.zona-bukti-klik { text-decoration: underline; }
.zona-bukti-hover .zona-bukti-lepas { border-color: var(--ink); background: var(--surface-2); }