/*************************************************************
 * form.css — replika formulir
 *   FRM.HR.09.01  Permintaan Promosi/ Mutasi/ Demosi Karyawan
 *   FRM.HR.09.02  Rekapitulasi Nilai Promosi Karyawan
 *
 * Ukuran memakai satuan mm agar hasil cetak & PDF persis A4
 * landscape seperti formulir Excel aslinya.
 *************************************************************/

.lembar-wrap {
  background: #6E6153;
  padding: 18px;
  overflow-x: auto;
  border-radius: var(--radius, 10px);
}

/* Satu halaman A4 landscape */
.lembar {
  width: 297mm;
  min-height: 210mm;
  padding: 4mm 6mm;
  margin: 0 auto;
  background: #fff;
  color: #000;
  font-family: Calibri, "Segoe UI", Arial, sans-serif;
  font-size: 9.2pt;
  line-height: 1.25;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}

.lembar * { box-sizing: border-box; }

/* Isian yang bisa diketik langsung di atas formulir */
.lembar .isi {
  border: 0;
  border-bottom: 1px dotted #999;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  color: #000;
  width: 100%;
  padding: 1px 2px;
}
.lembar .isi:focus { outline: none; background: #FFF8E6; }
.lembar .isi.polos { border-bottom: 0; }
.lembar input[type="date"]::-webkit-calendar-picker-indicator { opacity: .3; cursor: pointer; }
.lembar input[type="date"] { min-width: 0; }
.lembar textarea.isi { resize: none; overflow: hidden; line-height: 1.3; }

/* ============ KOP / HEADER FORMULIR ============ */

.kop {
  border: 2.4pt solid #000;
  padding: 0.8mm;
  margin-bottom: 1.2mm;
}
.kop-dalam {
  border: 0.8pt solid #000;
  display: flex;
  align-items: stretch;
  min-height: 11.5mm;
}
.kop-logo {
  width: 62mm;
  flex: none;
  border-right: 0.8pt solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8mm 3mm;
}
.kop-logo img { max-width: 100%; max-height: 10mm; }
.kop-judul {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-size: 11.5pt;
  padding: 0.8mm 4mm;
  letter-spacing: .01em;
}
.kop-kode {
  width: 58mm;
  flex: none;
  border-left: 0.8pt solid #000;
  padding: 1mm 3mm;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.28;
}
.kop-kode .form-besar {
  font-family: "Times New Roman", Times, serif;
  font-size: 14pt;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.4mm;
}
.kop-kode .baris { font-size: 7pt; font-weight: 700; }
.kop-kode .kode { font-size: 8.6pt; font-weight: 700; margin-top: .4mm; }

/* ============ BARIS IDENTITAS ATAS ============ */

.identitas {
  border: 0.9pt solid #000;
  border-bottom: 0;
  padding: 0.7mm 2mm;
}
.identitas .baris { display: flex; align-items: center; gap: 2mm; margin-bottom: 0.6mm; }
.identitas .baris:last-child { margin-bottom: 0; }
.identitas .lb { width: 48mm; flex: none; }
.identitas .lb::after { content: ":"; float: right; padding-right: 3mm; }
.identitas .val { flex: 1; max-width: 90mm; }
.identitas .nomor {
  margin-left: auto;
  font-weight: 700;
  text-align: right;
}

/* ============ TABEL UTAMA (FRM.HR.09.01) ============ */

table.f-tbl {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
table.f-tbl th, table.f-tbl td {
  border: 0.9pt solid #000;
  padding: 0.5mm 1.2mm;
  vertical-align: top;
  font-size: 8.4pt;
  word-wrap: break-word;
}
table.f-tbl th {
  text-align: center;
  font-weight: 700;
  vertical-align: middle;
  background: #fff;
  font-size: 8.8pt;
}
table.f-tbl td.mid { vertical-align: middle; }
table.f-tbl td.ctr { text-align: center; }

/* Lebar kolom lembar FRM.HR.09.01. Sejak v1.11.0 ada dua kolom baru
   (APPROVAL), jadi seluruh pembagiannya disusun ulang — jumlahnya harus
   tepat 100%, kalau tidak lebar kolom ditentukan isi selnya dan letak
   cetakannya bergeser dari halaman ke halaman.
   3.4 + 12 + 9 + 8.6 + 12.5 + 12.5 + 10.5 + 10.5 + 8.5 + 12.5 = 100 */
.k-no      { width: 3.4%; }
.k-nama    { width: 12%; }
.k-nip     { width: 9%; }
.k-jenis   { width: 8.6%; }
.k-seb     { width: 12.5%; }
.k-jadi    { width: 12.5%; }
.k-atasan  { width: 10.5%; }
.k-superior{ width: 10.5%; }
.k-untuk   { width: 8.5%; }
.k-alasan  { width: 12.5%; }

/* Kolom jabatan & departemen: teks panjang tetap terbaca utuh,
   membungkus ke baris berikutnya alih-alih terpotong. */
/* Huruf kapital disamakan: "Jabatan Sebelumnya" berasal dari Master
   Karyawan yang memang huruf besar semua, jadi kolom "Menjadi" ikut
   ditampilkan begitu agar satu baris tidak bercampur dua gaya. */
.sel-jabatan .isi,
.sel-jabatan .teks-otomatis {
  display: block;
  width: 100%;
  font-size: 8.4pt;
  line-height: 1.3;
  text-transform: uppercase;
}
.sel-jabatan .isi.dep,
.sel-jabatan .teks-otomatis.dep { margin-top: 1.4mm; }
.sel-jabatan .teks-otomatis {
  min-height: 3.6mm;
  padding: 1px 2px;
  border-bottom: 1px dotted #999;
  white-space: normal;
  overflow-wrap: anywhere;
}
.sel-jabatan .teks-otomatis.dep { color: #333; font-size: 8pt; }

/* Nomor surat yang masih berupa pratinjau — tampil sama seperti nomor
   final, tanpa keterangan tambahan yang ikut tercetak. Penjelasan
   "belum dikunci" cukup ada di panel Pengaturan Pengajuan. */
.nomor-sementara { color: inherit; }

/* Kotak centang ala formulir */
.cbx {
  display: inline-block;
  width: 3.1mm;
  height: 3.1mm;
  border: 0.9pt solid #000;
  vertical-align: -0.4mm;
  margin-right: 1.6mm;
  position: relative;
  background: #fff;
  flex: none;
}
.cbx.on::after {
  content: "✓";
  position: absolute;
  left: 0.15mm; top: -1.1mm;
  font-size: 9.5pt;
  font-weight: 700;
  line-height: 1;
}
/* Jarak dirapatkan agar 5 baris karyawan tetap muat satu halaman A4 */
.pilihan { display: flex; align-items: center; margin: 0.5mm 0; font-size: 8.2pt; }
.pilihan:first-child { margin-top: 0; }
.pilihan:last-child { margin-bottom: 0; }
.pilihan.klik { cursor: pointer; }
.pilihan.klik:hover .cbx { box-shadow: 0 0 0 1.5pt #C9A063; }

/* ============ REKOMENDASI HRD ============ */

.rekomendasi {
  border: 0.9pt solid #000;
  border-top: 0;
  background: #D9D9D9;
  padding: 0.8mm 3mm;
  display: flex;
  align-items: center;
  gap: 8mm;
  font-size: 10pt;
}
.rekomendasi .jdl { font-weight: 400; }
.rekomendasi .pilihan { margin: 0; }

/* ============ BLOK GAJI + CATATAN ============ */

.blok-bawah {
  display: flex;
  gap: 4mm;
  margin-top: 1mm;
  align-items: flex-start;
}
.blok-gaji { width: 57%; flex: none; }
.blok-catatan { flex: 1; }

table.g-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.g-tbl th, table.g-tbl td {
  border: 0.9pt solid #000;
  padding: 0.2mm 1.3mm;
  font-size: 7.2pt;
  line-height: 1.15;
}
table.g-tbl th { text-align: center; font-weight: 700; background: #D9D9D9; }
table.g-tbl td.lbl-gaji { font-weight: 700; }
table.g-tbl td.sub { padding-left: 6mm; font-weight: 400; }
table.g-tbl td.rp { text-align: left; white-space: nowrap; }
table.g-tbl tr.total td { font-weight: 700; background: #D9D9D9; }
table.g-tbl .kol-lbl { width: 40%; }
.rp-wrap { display: flex; align-items: baseline; gap: 1mm; }
.rp-wrap span { flex: none; }
.rp-wrap .isi { text-align: right; }

/* Sel gaji untuk pengguna yang tidak berhak melihat nilainya.
   Memakai garis titik selebar selnya, bukan deretan titik berpanjang
   tetap — dengan begitu lebar kolom tidak berubah-ubah dan tabelnya
   tetap lurus, sama seperti yang dilihat HRD. */
.rp-wrap .isi-tertutup {
  flex: 1;
  min-width: 0;
  border-bottom: 1px dotted #666;
  height: 3.2mm;
  display: block;
}

/* Kotak catatan disamakan tingginya dengan tabel gaji di sebelahnya,
   sehingga kedua kotak rata atas dan rata bawah. */
.blok-bawah { align-items: stretch; }
.blok-catatan { display: flex; }
.kotak-catatan {
  border: 0.9pt solid #000;
  padding: 1mm 1.8mm;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.kotak-catatan .jdl { font-weight: 700; margin-bottom: 1.2mm; flex: none; }
/* min-height sengaja kecil: tinggi kotak catatan ditentukan oleh tabel
   gaji di sebelahnya (lewat align-items: stretch), bukan sebaliknya —
   supaya kedua kotak persis sama tinggi. */
.kotak-catatan textarea.isi { flex: 1; min-height: 6mm; border-bottom: 0; }

/* Baris "Berlaku mulai tanggal" menempel di dasar kotak Catatan.
   Tanggalnya DIPILIH sendiri — sengaja tidak diisi tanggal hari ini,
   karena mulai berlakunya kerap berbeda dari tanggal suratnya. */
.kotak-catatan .baris-berlaku {
  display: flex;
  align-items: baseline;
  gap: 2mm;
  flex: none;
  margin-top: 1mm;
  padding-top: 1mm;
  border-top: 0.5pt dotted #999;
}
.kotak-catatan .lb-berlaku { flex: none; font-weight: 700; }
.kotak-catatan .tgl-berlaku,
.kotak-catatan .isi-berlaku-beku {
  flex: 1;
  min-width: 0;
  border-bottom: 1px dotted #999;
  font-family: inherit;
  font-size: inherit;
  color: #000;
  background: transparent;
  padding: 0 2px;
}
.kotak-catatan .tgl-berlaku { border-top: 0; border-left: 0; border-right: 0; }
.kotak-catatan .tgl-berlaku:focus { outline: none; background: #FFF8E6; }

/* Keterangan hak akses: di luar blok gaji supaya tidak memanjangkan
   kotak Catatan di sebelahnya. */
.ket-hak-akses {
  margin: 1mm 0 0;
  font-size: 7.6pt;
  font-style: italic;
}

/* ============ BLOK TANDA TANGAN ============ */

.ttd-baris { display: flex; margin-top: 1.2mm; }
.ttd-kotak {
  flex: 1;
  border: 0.9pt solid #000;
  border-right: 0;
  padding: 1mm 2mm;
  min-height: 16mm;
  display: flex;
  flex-direction: column;
  font-size: 8.4pt;
}
.ttd-kotak:last-child { border-right: 0.9pt solid #000; }
.ttd-kotak .peran { margin-bottom: auto; }

/* Tinggi setiap bagian dikunci supaya garis titik-titik pengesahan
   berada pada ketinggian yang SAMA di kelima kotak — cap persetujuan
   yang hanya muncul di sebagian kotak tidak lagi menggeser garisnya. */
/* Ruang tanda tangan basah: kira-kira tiga baris kosong di atas garis,
   supaya masih ada tempat membubuhkan tanda tangan dan cap. */
.ttd-kotak .slot-cap {
  height: 12mm;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 0.5mm;
  overflow: hidden;
}
.ttd-kotak .garis {
  border-bottom: 1px dotted #000;
  height: 0;
  margin-bottom: 1mm;
}
/* Tinggi baris nama DISAMAKAN untuk kelima kotak, termasuk "Mengetahui"
   yang tidak punya kotak pilihan — kalau tidak, garis tanda tangannya
   tidak lagi sejajar di layar. Saat dicetak semuanya kembali 3,7mm. */
.ttd-kotak .nama {
  font-weight: 600;
  height: 4.6mm;
  line-height: 4.6mm;
  overflow: hidden;
}

/* Kotak pilihan nama penanda tangan — tampil di layar, tidak ikut tercetak.
   Dibuat menyatu dengan formulir: tanpa bingkai, hanya garis titik tipis,
   supaya lembar di layar tetap terbaca seperti hasil cetaknya. */
.ttd-kotak .nama.dapat-pilih { line-height: 1.2; overflow: visible; }
.ttd-kotak .nama.dapat-pilih .teks-nama { display: none; }

.ttd-kotak .pilih-nama {
  width: 100%;
  border: 0;
  border-bottom: 1px dotted #999;
  background: #FFFDF7;
  font-family: inherit;
  font-weight: 600;
  font-size: 8.2pt;
  color: #000;
  padding: 0.2mm 0.4mm;
  border-radius: 0;
  cursor: pointer;
}
.ttd-kotak .pilih-nama:focus { outline: none; background: #FFF8E6; }
.ttd-kotak .pilih-nama[hidden] { display: none; }
.ttd-kotak .ketik-nama { cursor: text; }

/* Salinan yang dipakai membuat PDF — dirender sebagai layar, jadi aturan
   @media print tidak berlaku dan harus ditiru di sini. */
.lembar.siap-cetak .pilih-nama { display: none !important; }
.lembar.siap-cetak .no-print { display: none !important; }
/* Penanda "wajib diisi" tidak pernah ikut tercetak, termasuk lewat jalur
   salinan PDF ini — garis merahnya petunjuk pengisian, bukan isi surat. */
.lembar.siap-cetak .isi-wajib { outline: 0 !important; background: none !important; }
.lembar.siap-cetak .ttd-kotak .nama { height: 3.7mm; line-height: 3.7mm; overflow: hidden; }
.lembar.siap-cetak .nama.dapat-pilih .teks-nama { display: inline !important; }
.ttd-kotak .jab {
  font-size: 7.6pt;
  height: 3.3mm;
  line-height: 3.3mm;
  overflow: hidden;
}
.ttd-kotak .stempel {
  display: inline-block;
  align-self: flex-start;
  border: 1.2pt solid #1F7A4D;
  color: #1F7A4D;
  border-radius: 2mm;
  padding: 0.6mm 2mm;
  font-size: 7.4pt;
  font-weight: 700;
  transform: rotate(-4deg);
  margin-bottom: 1.4mm;
}
.ttd-kotak .stempel.tolak { border-color: #B3261E; color: #B3261E; }


/* ============ FRM.HR.09.02 — REKAP NILAI ============ */

table.r-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.r-tbl th, table.r-tbl td {
  border: 0.9pt solid #000;
  padding: 0.9mm 1.2mm;
  font-size: 8.6pt;
  text-align: center;
  vertical-align: middle;
}
table.r-tbl th { font-weight: 700; }
table.r-tbl td.kiri { text-align: left; }
table.r-tbl tr.baris-kosong td { height: 6.2mm; }
table.r-tbl .lulus { color: #1F7A4D; font-weight: 700; }
table.r-tbl .tidak-lulus { color: #B3261E; font-weight: 700; }
.r-no { width: 3.2%; }
.r-nama { width: 14%; }
.r-dep { width: 8.5%; }
.r-jab { width: 8.5%; }
.r-tgl { width: 7%; }
.r-mk { width: 3.2%; }
.r-nil { width: 4.9%; }
.r-akhir { width: 7%; }
/* Kolom KETERANGAN di kanan Nilai Akhir (revisi 23 Sep). */
.r-ket { width: 6.8%; }
table.r-tbl .ket-cancel { color: #6B6257; font-weight: 700; }
/* Tombol hapus baris hanya di layar, tidak ikut tercetak. */
table.r-tbl .hapus-baris {
  display: inline-block; margin-left: 3px; border: 0; background: none; padding: 0;
  color: #B3261E; cursor: pointer; font-size: 10px; line-height: 1;
}
@media print { table.r-tbl .hapus-baris { display: none !important; } }
.lembar.siap-cetak table.r-tbl .hapus-baris { display: none !important; }

.ket-lulus {
  border: 0.9pt solid #000;
  display: inline-block;
  margin-top: 3mm;
  font-size: 8.6pt;
}
.ket-lulus table { border-collapse: collapse; }
.ket-lulus td { border: 0.9pt solid #000; padding: 0.8mm 2.5mm; }

/* Teks pengganti kotak isian saat mencetak / membuat PDF.
   Mewarisi kelas aslinya (.isi, .polos, .dep, ...) sehingga ukuran
   huruf dan garis bawahnya persis sama, tanpa perlu membaca gaya
   satu per satu — inilah yang membuat pratinjau cetak jadi cepat. */
.lembar .isi-beku {
  display: block;
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3.6mm;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.3;
  padding: 1px 2px;
}
.lembar textarea.isi-beku,
.lembar .isi-beku.polos { border-bottom: 0; }
.rp-wrap .isi-beku { text-align: right; }

/* ============ TOOLBAR CETAK ============ */

.bar-cetak {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* ============ ATURAN CETAK ============ */

@media print {
  @page { size: A4 landscape; margin: 5mm; }

  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; }

  /* Saat tombol Cetak ditekan, formulir dipindahkan sementara ke
     #area-cetak sehingga hanya formulir itu yang masuk ke kertas. */
  html.sedang-cetak body > *:not(#area-cetak) { display: none !important; }
  #area-cetak { display: block; }

  .lembar {
    width: 100%;
    min-height: auto;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
  .lembar-wrap { background: none; padding: 0; overflow: visible; border-radius: 0; }
  .lembar .isi { border-bottom: 1px dotted #666; background: transparent !important; }
  .lembar input[type="date"]::-webkit-calendar-picker-indicator { display: none !important; }
  .lembar table { page-break-inside: auto; }
  .lembar tr { page-break-inside: avoid; }
  .lembar thead { display: table-header-group; }
  .ttd-baris, .blok-bawah, .kop { page-break-inside: avoid; }

  /* Yang tercetak adalah NAMA-nya, bukan kotak pilihannya. Aturan ini juga
     menyembunyikan salinan beku yang dibuat saat menyiapkan cetakan,
     karena salinan itu mewarisi kelas .pilih-nama. */
  .pilih-nama { display: none !important; }
  .ttd-kotak .nama { height: 3.7mm; line-height: 3.7mm; overflow: hidden; }
  .ttd-kotak .nama.dapat-pilih .teks-nama { display: inline !important; }

  .no-print, .bar-cetak, .sidebar, .topbar, .card.no-print { display: none !important; }
  .isi-wajib { outline: 0 !important; background: none !important; }
  .lembar + .lembar { page-break-before: always; }
}

/* ============================================================
 * Kolom JENIS: kotak pilihan di layar, kotak centang di kertas
 *
 * FRM.HR.09.01 aslinya memakai tiga kotak centang bertumpuk. Di layar
 * itu memakan tinggi dan terlihat berantakan, jadi yang tampil adalah
 * satu kotak pilihan — tapi keduanya membaca nilai yang sama, dan yang
 * tercetak tetap kotak centang seperti formulir aslinya.
 * ========================================================== */
.sel-jenis .pilih-jenis-baris {
  width: 100%;
  border: 1px solid #C9BCA6;
  border-radius: 4px;
  padding: 2px 3px;
  font-family: inherit;
  font-size: 8.2pt;
  background: #fff;
  color: #000;
}
.sel-jenis .pilih-jenis-baris:focus { outline: none; background: #FFF8E6; border-color: #B08430; }

/* selama kotak pilihannya tampil, kotak centangnya disembunyikan.
   Dipakai kelas penanda, bukan :has(), supaya tidak bergantung pada
   dukungan pemilih yang baru di peramban lama. */
.sel-jenis.ringkas .pilihan { display: none; }

/* ...dan muncul kembali saat dicetak atau saat dibekukan jadi PDF */
.lembar.siap-cetak .sel-jenis .pilihan { display: flex !important; }
.lembar.siap-cetak .sel-jenis .pilih-jenis-baris { display: none !important; }

@media print {
  .sel-jenis .pilihan { display: flex !important; }
  .sel-jenis .pilih-jenis-baris { display: none !important; }
}

/* ============================================================
 * Kartu "Rincian Tambahan" (kolom berkas HRGA)
 *
 * Di LUAR .lembar, supaya lembar formulir tetap setinggi satu halaman
 * A4 baik di layar maupun saat dicetak.
 * ========================================================== */
#kartu-tambahan { margin-top: 16px; }
#kartu-tambahan > summary.ringkas-tambahan {
  cursor: pointer;
  padding: 13px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--coklat, #5A4A36);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
}
#kartu-tambahan > summary.ringkas-tambahan::before {
  content: "\25B8";
  font-size: 11px;
  transition: transform .15s;
}
#kartu-tambahan[open] > summary.ringkas-tambahan::before { transform: rotate(90deg); }
#kartu-tambahan > summary.ringkas-tambahan::-webkit-details-marker { display: none; }
#kartu-tambahan > summary.ringkas-tambahan:hover { color: var(--emas-2, #B08430); }
#kartu-tambahan .tbl-tambahan th {
  font-size: 10.5px;
  line-height: 1.25;
  white-space: normal;
  min-width: 92px;
}
#kartu-tambahan .tbl-tambahan td { padding: 5px 7px; }
#kartu-tambahan .tbl-tambahan .isi {
  border: 1px solid var(--garis, #E3DACB);
  border-radius: 5px;
  padding: 5px 7px;
  font-size: 11.5px;
  background: #fff;
  width: 100%;
  min-width: 88px;
}
#kartu-tambahan .tbl-tambahan .isi:focus {
  outline: none;
  border-color: var(--emas-2, #B08430);
  background: #FFFDF7;
}
#kartu-tambahan .nama-cermin { font-weight: 600; }

@media print {
  #kartu-tambahan { display: none !important; }
}

/* "Berlaku sampai": pemilih tanggal berdampingan dengan pilihan
   SETERUSNYA — kebanyakan mutasi memang tidak punya tanggal berakhir. */
#kartu-tambahan .sel-sampai { display: flex; flex-direction: column; gap: 3px; }
#kartu-tambahan .sel-sampai .cek { font-size: 10px; gap: 5px; }
#kartu-tambahan .sel-sampai input[type="date"]:disabled {
  background: #F2EDE4;
  color: #A2967F;
}
#kartu-tambahan input[type="date"].isi { min-width: 118px; }

/* -------------------------------------------------------------
 * "Berlaku mulai tanggal" — kolom WAJIB sejak v1.9.4
 *
 * Tandanya hanya di layar. Formulir yang tercetak tidak boleh memuat
 * bintang atau garis merah: itu petunjuk pengisian, bukan bagian dari
 * surat resmi FRM.HR.09.01.
 * ------------------------------------------------------------- */
.tanda-wajib { color: var(--merah); margin-left: 3px; font-weight: 700; }
.isi-wajib {
  outline: 2px solid var(--merah);
  outline-offset: 1px;
  background: var(--merah-bg) !important;
}

/* --- Kepala tabel dua tingkat pada Rincian Tambahan (v1.11.0) ---
   Tambahan & Potongan masing-masing punya tiga kolom periode. Tanpa
   garis pemisah yang tegas, deretan "Periode 1 / Periode 2 / 1 Bulan"
   muncul dua kali berturut-turut dan pembacanya kehilangan jejak mana
   yang tambahan dan mana yang potongan. */
#kartu-tambahan .tbl-tambahan th.grup-kolom {
  background: var(--krem-2, #F6F1E7);
  border-bottom: 1px solid var(--garis, #E3DACB);
  font-size: 11px;
  letter-spacing: .3px;
}
#kartu-tambahan .tbl-tambahan thead tr:first-child th + th.grup-kolom,
#kartu-tambahan .tbl-tambahan thead tr:first-child th.grup-kolom + th {
  border-left: 2px solid var(--garis, #E3DACB);
}
#kartu-tambahan .tbl-tambahan th[rowspan="2"] { vertical-align: bottom; }
#kartu-tambahan .tbl-tambahan .ctr { text-align: center; }

/* --- Gaji & Tunjangan berdampingan dengan Tambahan (v1.11.0) ---
   Tabel Tambahan punya 18 kolom dan harus boleh digulung mendatar;
   tabel gaji lebarnya tetap. `min-width:0` pada kolom kanan itulah yang
   membuat gulungannya bekerja — tanpa itu flex memberi kolom kanan
   lebar isinya dan seluruh halaman yang melar. */
#kartu-tambahan .baris-rincian {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}
#kartu-tambahan .kol-gaji { flex: 0 0 430px; max-width: 100%; }
#kartu-tambahan .kol-tambahan { flex: 1 1 520px; min-width: 0; }
#kartu-tambahan .jdl-kolom {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .3px;
  margin-bottom: 7px;
  color: var(--tinta-2, #6B6257);
}
#kartu-tambahan .baris-jdl-tambahan {
  display: flex;
  align-items: center;
  gap: 10px;
}
#kartu-tambahan .baris-jdl-tambahan .jdl-kolom { margin-bottom: 7px; }
#kartu-tambahan .aksi-rincian { margin-left: auto; margin-bottom: 7px; }

/* Tabel gaji di dalam kartu: ukurannya mengikuti layar, bukan lembar
   cetak — di lembar ia memakai satuan pt agar pas di A4. */
#kartu-tambahan .g-tbl { width: 100%; font-size: 11.5px; table-layout: fixed; }
#kartu-tambahan .g-tbl th,
#kartu-tambahan .g-tbl td { padding: 3px 5px; }
/* Di lembar cetak lebar kotak isian ditentukan satuan pt milik kertas;
   di kartu ini tidak ada yang membatasinya, jadi kotaknya melar
   melewati selnya dan menabrak tabel di sebelahnya. `min-width:0`
   wajib — tanpa itu flex menolak menyusutkan kotak di bawah lebar
   bawaan <input> dan tabelnya tetap tumpah. */
#kartu-tambahan .g-tbl .rp-wrap { width: 100%; }
#kartu-tambahan .g-tbl input.gaji {
  font-size: 11.5px;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 1px solid var(--garis, #E3DACB);
  border-radius: 4px;
  padding: 2px 5px;
  background: #fff;
}
#kartu-tambahan .g-tbl input.gaji:focus {
  outline: none;
  border-color: var(--emas-2, #B08430);
  background: #FFFDF7;
}

/* Angka gaji pada LEMBAR kini hanya pantulan, bukan kotak isian.
   Dibuat setinggi dan serata bekas kotaknya supaya letak barisnya di
   kertas tidak bergeser sedikit pun dari cetakan sebelumnya. */
.lembar .g-tbl .nilai-gaji {
  flex: 1;
  text-align: right;
  min-height: 1.15em;
}

@media (max-width: 1100px) {
  #kartu-tambahan .kol-gaji { flex: 1 1 100%; }
}

/* --- Kolom APPROVAL pada lembar (v1.11.0) ---
   Bentuknya disamakan dengan kolom Jabatan & Departemen: nama di atas,
   jabatan di bawahnya dengan huruf lebih kecil. */
.f-tbl td.sel-atasan { vertical-align: top; }
/* Kotak nama & jabatan berupa <textarea> agar isinya membungkus dan
   tidak terpotong saat dicetak. Digulung dimatikan: yang muncul di
   kertas harus seluruhnya, bukan sepotong yang kebetulan terlihat.

   Ukurannya dibuat serapat kolom Jabatan & Departemen di sebelahnya.
   Sebelum dirapatkan, dua kotak ini menambah 41 mm pada tinggi lembar
   dan cetakannya tumpah ke halaman kedua — sementara di layar tidak
   ada yang tampak salah. Tinggi barisnya tetap ditentukan kolom
   ALASAN (tiga baris) dan PERUNTUKAN (tiga pilihan), jadi kolom ini
   TIDAK boleh melebihi keduanya. */
.f-tbl td.sel-atasan .kotak-orang,
.f-tbl td.sel-atasan .kotak-jab {
  display: block;
  width: 100%;
  resize: none;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 8.4pt;
  line-height: 1.25;
  height: auto;
  min-height: 0;
  padding: 0 2px;
  margin: 0;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
}
.f-tbl td.sel-atasan .kotak-orang { border-bottom: 1px dotted #999; }
.f-tbl td.sel-atasan .kotak-jab {
  font-size: 8pt;
  color: #333;
  margin-top: 1.4mm;
  border-bottom: 1px dotted #999;
}

/* --- Daftar saran nama karyawan (v1.11.0) ---
   Ditempel ke <body> dengan `position:fixed`, jadi z-index-nya harus di
   atas kartu dan bilah mana pun; kotak sumbernya sering berada di dalam
   tabel yang digulung mendatar. */
.saran-orang {
  z-index: 9999;
  background: #fff;
  border: 1px solid var(--garis, #E3DACB);
  border-radius: 7px;
  box-shadow: 0 6px 22px rgba(0,0,0,.16);
  max-height: 260px;
  overflow: auto;
  padding: 4px;
}
.saran-orang .saran-baris {
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.25;
}
.saran-orang .saran-baris.sorot,
.saran-orang .saran-baris:hover { background: var(--krem-2, #F6F1E7); }
.saran-orang .saran-nama { font-size: 12px; font-weight: 600; color: var(--tinta, #2F2A24); }
.saran-orang .saran-jab { font-size: 10.5px; color: var(--tinta-2, #6B6257); }
@media print { .saran-orang { display: none !important; } }

/* --- Tabel Gaji Pokok, Tambahan & Potongan (v1.11.0) ---
   Tambahan dan Potongan dibaca sebagai dua tabel dengan format sama:
   judul utama berwarna lembut, garis pemisah tegas di antaranya, dan
   angka rata kanan seperti di slip gaji. */
#kartu-tambahan .tbl-uang th.grup-kolom { font-size: 11.5px; }
#kartu-tambahan .tbl-uang td.sel-tambahan { background: #F3F8F1; }
#kartu-tambahan .tbl-uang td.sel-potongan { background: #FBF3F1; }
#kartu-tambahan .tbl-uang thead tr:first-child th.grup-kolom:nth-last-child(1),
#kartu-tambahan .tbl-uang td.sel-potongan:nth-child(7) {
  border-left: 2px solid var(--garis, #E3DACB);
}
#kartu-tambahan .tbl-uang td.sel-tambahan:nth-child(4) {
  border-left: 2px solid var(--garis, #E3DACB);
}
#kartu-tambahan .tbl-uang .isi { text-align: right; min-width: 92px; }
#kartu-tambahan .jdl-kolom + .tabel-scroll { margin-bottom: 4px; }
#kartu-tambahan .tbl-uang th, #kartu-tambahan .tbl-uang td { min-width: 0; padding-left: 5px; padding-right: 5px; }
#kartu-tambahan .tbl-uang .isi { min-width: 78px; }
#kartu-tambahan .tbl-uang th:nth-child(2) { width: 120px !important; }

/* --- Persetujuan rincian per baris (v1.11.1) --- */
#kartu-tambahan .kol-setuju-rincian {
  min-width: 118px;
  border-left: 2px solid var(--garis, #E3DACB);
  background: #FAFBF7;
  vertical-align: middle;
}
#kartu-tambahan thead .kol-setuju-rincian { font-size: 10.5px; line-height: 1.2; }
.btn-tautan {
  background: none; border: 0; padding: 0; margin-top: 2px;
  color: var(--merah, #B03A2E); text-decoration: underline; cursor: pointer;
}

/* Kotak nama berperilaku dropdown (revisi 23 Sep): panah kecil di kanan
   memberi tahu bahwa daftarnya bisa dibuka — hanya di layar. */
.kotak-dropdown {
  background-image: linear-gradient(45deg, transparent 50%, #8A7A66 50%),
                    linear-gradient(135deg, #8A7A66 50%, transparent 50%);
  background-position: calc(100% - 9px) 55%, calc(100% - 5px) 55%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  padding-right: 16px !important;
}
@media print { .kotak-dropdown { background-image: none !important; } }
.lembar.siap-cetak .kotak-dropdown { background-image: none !important; }
.saran-orang .saran-kosong { padding: 8px 10px; }

/* Judul lembar tanda tangan di panel + tombol sembunyi (revisi 22 Sep) */
.judul-ttd-panel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.saran-orang .saran-jumlah { padding: 4px 8px 6px; border-bottom: 1px solid var(--garis, #E3DACB); margin-bottom: 3px; position: sticky; top: -4px; background: #fff; }