/* ==========================================================================
   Gajian — payroll bulanan & slip gaji.

   Memakai kerangka yang sudah ada (css/main.css + css/laporan-impor.css
   untuk .section, .section-head, .confirm-overlay, .impor-empty,
   .view-icon-btn); yang di sini hanya bagian yang khas Gajian: kartu per
   karyawan, kotak total, dan kertas slip gaji.
   ========================================================================== */

/* ---- navigasi bulan ---------------------------------------------------- */
/* Pemilih bulan memakai .month-tabs/.month-tab dari css/laporan-impor.css -
   komponen yang sama dengan Laporan Kas & Laporan Impor, jadi tidak ada
   gaya sendiri di sini. Sepasang panah maju-mundur beserta gayanya
   (.gaji-bulan-nav, .gaji-nav-sisi, .gaji-nav-btn, .gaji-bulan-label)
   dihapus - digantikan tab yang tinggal diklik atau digeser. */
#gaji-month-tabs {
  margin-bottom: 14px;
}
/* ---- kotak periode (kolam bonus & tanggal bayar) ----------------------- */
.gaji-periode-box {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
}

@media (min-width: 560px) {
  .gaji-periode-box { grid-template-columns: 1.4fr 1fr; }
}

/* ---- isian ------------------------------------------------------------- */
.gaji-field { min-width: 0; }

.gaji-field-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}

.gaji-field-label small { font-weight: 600; opacity: .75; }

.gaji-input-group {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  overflow: hidden;
}

.gaji-input-group:focus-within { border-color: var(--red); background: var(--card); }

.gaji-affix {
  flex-shrink: 0;
  padding: 0 9px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
}

.gaji-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  padding: 10px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  outline: none;
}

/* Di dalam .gaji-input-group bingkainya dipegang grup itu, bukan kotaknya. */
.gaji-input-group .gaji-input { border: 0; border-radius: 0; background: transparent; }

.gaji-input-group--kecil { width: 88px; }
.gaji-input-group--kecil .gaji-input { padding: 8px 6px; text-align: right; }

/* ---- filter komponen --------------------------------------------------- */
.gaji-filter {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 14px;
  -webkit-overflow-scrolling: touch;
}

.gaji-filter::-webkit-scrollbar { height: 0; }

.gaji-filter-chip {
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.gaji-filter-chip.active { background: var(--red); border-color: var(--red); color: #fff; }

/* ---- tampilan banding (satu kolom, semua karyawan) --------------------- */
.gaji-banding {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
}

.gaji-banding-judul {
  margin: 0 0 10px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.gaji-banding-baris {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.gaji-banding-baris + .gaji-banding-baris { border-top: 1px solid var(--border); }
.gaji-banding-nama { font-size: 0.8rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Batang pembanding: panjangnya relatif terhadap nilai TERBESAR bulan itu,
   bukan terhadap totalnya - yang dicari perbandingan antar orang, dan
   dengan pembagi total semua batang jadi pendek dan sulit dibedakan. */
.gaji-banding-bar {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}

.gaji-banding-bar i { display: block; height: 100%; border-radius: 999px; background: var(--red); opacity: .75; }
.gaji-banding-nilai { font-size: 0.82rem; font-weight: 800; color: var(--ink); white-space: nowrap; }

.gaji-banding-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 2px solid var(--border);
}

.gaji-banding-total span { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.gaji-banding-total strong { font-size: 0.95rem; font-weight: 800; color: var(--red); }

/* ---- kartu karyawan ---------------------------------------------------- */
.gaji-kartu {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 12px;
}

.gaji-kartu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.gaji-kartu-nama { margin: 0; font-size: 0.95rem; font-weight: 800; color: var(--ink); }
.gaji-kartu-jabatan { margin: 2px 0 0; font-size: 0.76rem; color: var(--muted); }

.gaji-persen-wrap { flex-shrink: 0; text-align: right; }
.gaji-persen-wrap .gaji-field-label { margin-bottom: 4px; }

.gaji-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 560px) {
  .gaji-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Pokok yang datang dari Form Freelance: sengaja BUKAN kotak isian - angka
   itu milik modul Freelance, dan kotak yang kelihatan bisa diketik tapi
   diam-diam ditimpa lagi setiap muat ulang lebih membingungkan daripada
   angka mati yang jelas asalnya. */
.gaji-freelance-box {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg);
  padding: 10px;
}

.gaji-freelance-box strong { font-size: 0.9rem; font-weight: 800; color: var(--ink); }
.gaji-freelance-box span { font-size: 0.68rem; font-weight: 700; color: var(--muted); }

.gaji-hasil {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.gaji-hasil > div { min-width: 0; }
.gaji-hasil span { display: block; font-size: 0.68rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.gaji-hasil strong { display: block; font-size: 0.86rem; font-weight: 800; color: var(--ink); margin-top: 2px; word-break: break-word; }
.gaji-hasil-utama strong { color: var(--red); }

.gaji-kartu-aksi { display: flex; gap: 8px; margin-top: 12px; }

/* ---- tombol ------------------------------------------------------------ */
.gaji-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.gaji-btn svg { width: 15px; height: 15px; }
.gaji-btn:disabled { opacity: .5; cursor: default; }
.gaji-btn--green { background: #E7F6EE; color: #1B7F4B; }
.gaji-btn--blue { background: #E8F1FD; color: #1B5FB0; }
.gaji-btn--slate { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.gaji-btn--danger { background: #FDEBEC; color: var(--red); }
.gaji-btn--blok { width: 100%; flex: none; }

.gaji-toolbar { display: flex; gap: 8px; margin-bottom: 14px; }

/* ---- kotak total ------------------------------------------------------- */
/* ---- tabel daftar gaji ---------------------------------------------------
   Menggantikan tumpukan kartu. Isian gaji memang dikerjakan seperti di
   Excel: satu baris per orang, angka sejenis berdiri di kolom yang sama.
   -------------------------------------------------------------------------- */

/* Tabelnya dibiarkan selebar isinya lalu digeser mendatar di dalam kotak ini,
   bukan dimampatkan sampai angkanya patah. Itu satu-satunya cara sepuluh
   kolom tetap terbaca di layar HP. */
.gaji-tabel-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
}

.gaji-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  white-space: nowrap;
}

.gaji-tabel th,
.gaji-tabel td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: right;
}

.gaji-tabel thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.gaji-tabel tbody tr:hover { background: var(--bg); }

/* Nomor di tengah, nama rata KIRI - keduanya keterangan, bukan angka yang
   dibandingkan, jadi tidak ikut aturan rata-kanan di atas.

   Ditulis ".gaji-tabel .gaji-td-nama", bukan ".gaji-td-nama" saja: aturan
   rata-kanan di atas memakai ".gaji-tabel td" (satu kelas + satu tag),
   yang bobotnya LEBIH TINGGI daripada satu kelas sendirian - jadi versi
   pendeknya kalah dan namanya tetap menempel ke kanan. */
.gaji-tabel .gaji-th-no,
.gaji-tabel .gaji-td-no { text-align: center; width: 34px; color: var(--muted); }
.gaji-tabel .gaji-th-nama,
.gaji-tabel .gaji-td-nama { text-align: left; }

/* Kolom nama dipakukan di tepi kiri: begitu tabelnya digeser ke kanan untuk
   mengisi kolom Bonus, tanpa ini tidak ada lagi petunjuk baris siapa yang
   sedang diketik. z-index dibedakan supaya sudut kiri-atas (nama + kepala
   tabel yang sama-sama lengket) tetap menang atas keduanya. */
.gaji-td-nama, .gaji-th-nama {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card);
  box-shadow: 1px 0 0 var(--border);
}

.gaji-tabel thead .gaji-th-nama { z-index: 3; background: var(--bg); }
.gaji-tabel tbody tr:hover .gaji-td-nama { background: var(--bg); }

/* Nama panjang ("Syahfi Alief Ismail") dibatasi lalu dipotong elipsis -
   kolom ini dipakukan di tepi kiri, jadi selebar apa pun ia melebar, segitu
   pula ruang layar HP yang hilang untuk kolom angkanya. Nama utuhnya tetap
   bisa dibaca lewat title. */
.gaji-td-nama-utama,
.gaji-td-nama-jabatan {
  display: block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gaji-td-nama-utama { font-weight: 700; color: var(--ink); }
.gaji-td-nama-jabatan { font-size: 0.7rem; color: var(--muted); }

/* Sel isian: kotak polos rata kanan, sengaja tanpa awalan "Rp" per sel -
   satuannya sudah disebut sekali di kepala kolom. */
.gaji-sel-input {
  width: 108px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  text-align: right;
}

.gaji-sel-input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(228, 33, 43, .12);
}

.gaji-sel-input--persen { width: 62px; }

/* Pokok yang datang dari Form Freelance tidak boleh diketik di sini - dibuat
   jelas berbeda dari sel isian di sebelahnya, bukan sekadar disabled. */
.gaji-sel-kunci {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-weight: 700;
  color: var(--ink);
}

.gaji-sel-kunci small { font-size: 0.62rem; font-weight: 700; color: #059669; }

.gaji-td-hasil { font-weight: 700; color: var(--ink); }
.gaji-td-hasil--utama { color: var(--red); }

.gaji-tabel tfoot td {
  background: var(--bg);
  font-weight: 800;
  border-top: 2px solid var(--border);
  border-bottom: none;
}

.gaji-tabel tfoot .gaji-td-nama { background: var(--bg); }
.gaji-tf-label { font-weight: 800; color: var(--ink); }

.gaji-th-aksi, .gaji-td-aksi { text-align: center; white-space: nowrap; }

.gaji-sel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}

.gaji-sel-btn + .gaji-sel-btn { margin-left: 4px; }
.gaji-sel-btn svg { width: 15px; height: 15px; }
.gaji-sel-btn:hover { border-color: #1E3A8A; color: #1E3A8A; }
.gaji-sel-btn--danger:hover { border-color: var(--red); color: var(--red); }

/* Judul kolom aksi ada demi pembaca layar, tapi tidak perlu terlihat. */
.gaji-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.gaji-total-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
}

.gaji-total-baris {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
}

.gaji-total-baris + .gaji-total-baris { border-top: 1px solid var(--border); }
.gaji-total-baris span { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.gaji-total-baris strong { font-size: 0.9rem; font-weight: 800; color: var(--ink); }
.gaji-total-baris--utama strong { color: var(--red); font-size: 1rem; }

/* Persentase seluruh karyawan idealnya pas 100% - kalau tidak, sebagian
   kolam bonus tidak terbagi (atau malah kelebihan). Ditandai supaya
   ketahuan sebelum slipnya terlanjur dicetak. */
.gaji-persen-info {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg);
  font-size: 0.74rem;
  color: var(--muted);
}

.gaji-persen-info--beda { background: #FFF7E6; color: #92600A; }

/* Ajakan mengisi dari Excel - cuma muncul waktu modulnya benar-benar masih
   kosong, jadi sengaja tidak dibuat sekecil catatan kaki. */
.gaji-impor-awal {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  text-align: left;
}

.gaji-impor-awal p { margin: 0 0 10px; font-size: 0.78rem; line-height: 1.5; color: var(--muted); }

/* ---- daftar pilihan di dalam modal ------------------------------------- */
.gaji-pilih-list, .gaji-master-list { display: grid; gap: 8px; margin-bottom: 14px; }

.gaji-pilih-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  padding: 10px 12px;
  font-family: inherit;
  cursor: pointer;
}

.gaji-pilih-item:hover { background: var(--bg); }
.gaji-pilih-item strong { display: block; font-size: 0.86rem; font-weight: 800; color: var(--ink); }
.gaji-pilih-item span { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 2px; }

.gaji-master-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.gaji-master-item strong { display: block; font-size: 0.86rem; font-weight: 800; color: var(--ink); }
.gaji-master-item span { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.gaji-master-aksi { display: flex; gap: 6px; flex-shrink: 0; }
.gaji-master-aksi .gaji-btn { flex: none; padding: 7px 10px; font-size: 0.74rem; }

.gaji-form { display: grid; gap: 10px; margin-bottom: 14px; }
.gaji-potongan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }

/* ---- kepala modal + silang penutup ------------------------------------- */
.gaji-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gaji-modal-head-isi { flex: 1; min-width: 0; }

.gaji-modal-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -4px -4px 0 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
}

.gaji-modal-close svg { width: 14px; height: 14px; }
.gaji-modal-close:hover { background: #ECECEF; color: var(--ink); }

/* ---- toast ------------------------------------------------------------- */
.gaji-toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translate(-50%, 12px);
  z-index: 1200;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .92);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.gaji-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Slip gaji — "kertas" yang dipratinjau di layar lalu dicetak jadi PDF.
   Ukurannya ditulis dalam pt/mm supaya hasil cetaknya tidak ikut berubah
   mengikuti lebar layar.
   ========================================================================== */

/* Di jendela penuh layar, lembarnya yang mengisi sisa tinggi - bukan tetap
   55vh dengan ruang kosong di bawahnya. Rantai flex-nya harus disebut
   sampai ke atas (modal > head > head-isi) karena kotak gulirnya bersarang
   di dalam blok judul, dan min-height:0 wajib di tiap tingkat: tanpa itu
   flex item tidak mau mengecil di bawah tinggi isinya, dan kotaknya justru
   meluber keluar layar alih-alih menggulir di dalam. */
/* align-items:stretch WAJIB di sini. .gaji-modal-head adalah flex BARIS, dan
   bawaannya align-items:flex-start - artinya blok judulnya setinggi isinya
   sendiri, bukan setinggi induknya. Selama itu, flex kolom di dalamnya tidak
   punya tinggi tetap untuk dibagi, jadi kotak gulirnya membengkak sampai
   meluber keluar layar alih-alih menggulir di dalam. */
.confirm-modal--fullscreen .gaji-modal-head { flex: 1; min-height: 0; align-items: stretch; }
.confirm-modal--fullscreen .gaji-modal-head-isi { display: flex; flex-direction: column; min-height: 0; }
.confirm-modal--fullscreen .doc-preview-scroll { flex: 1; min-height: 0; }

/* Lembarnya diskalakan lewat transform; wadah ini yang menahan ukuran
   aslinya supaya perhitungan skala di script tetap membaca lebar A4 yang
   sebenarnya, bukan lebar yang sudah dimampatkan flex. */
.doc-preview-scroll .doc-lembar { flex-shrink: 0; }

/* Kertas A4 sungguhan, seukuran & sepadan dengan lembar invoice - bukan
   kotak sebesar layar. Ukuran di layar jadi punya arti: yang terlihat
   memang seperti itulah yang nanti tercetak. Skalanya diatur script
   (pasangZoomKertas), jadi di HP pun tetap satu lembar utuh, hanya
   diperkecil. Padding-nya sama dengan .doc-paper di css/invoice.css. */
.gaji-slip-kertas {
  width: 210mm;
  min-height: 297mm;
  padding: 5mm 15mm 16mm;
  margin: 0 auto;
  background: #fff;
  color: #1a1a1a;
  font-size: 10pt;
  line-height: 1.45;
}



.gaji-slip-data { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.gaji-slip-data td { padding: 3px 6px; font-size: 10px; vertical-align: top; }
.gaji-slip-data td:nth-child(odd) { color: #666; width: 15%; }

.gaji-slip-sub { margin: 12px 0 5px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #E4212B; }

.gaji-slip-tabel { width: 100%; border-collapse: collapse; }
.gaji-slip-tabel th, .gaji-slip-tabel td { border: 1px solid #DDD; padding: 5px 7px; font-size: 10px; }
.gaji-slip-tabel th { background: #F5F5F7; font-weight: 700; text-align: left; }
.gaji-slip-tabel .num { text-align: right; white-space: nowrap; }
.gaji-slip-tabel th.num { text-align: right; }
.gaji-slip-tabel tfoot td { background: #FAFAFB; font-weight: 800; }
.gaji-slip-tabel .kosong { text-align: center; color: #999; }

.gaji-slip-bersih {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #FDEBEC;
  color: #B8151D;
}

.gaji-slip-bersih span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.gaji-slip-bersih strong { font-size: 15px; font-weight: 800; }

.gaji-slip-catatan { margin: 10px 0 0; font-size: 9.5px; color: #555; }

.gaji-slip-ttd { display: flex; justify-content: space-between; gap: 30px; margin-top: 26px; text-align: center; }
.gaji-slip-ttd > div { flex: 1; }
.gaji-slip-ttd span { font-size: 10px; color: #555; }
/* Tinggi ruang tanda tangan disamakan untuk KEDUA kolom - kalau berbeda,
   garis dan nama di kanan tidak lagi sebaris dengan yang di kiri. 16mm,
   ukuran yang sama dengan .doc-sign-space di invoice. Diberi position
   relative supaya gambar cap & tanda tangan bisa ditempatkan di dalamnya. */
.gaji-slip-ttd i { display: block; position: relative; height: 16mm; }
.gaji-slip-ttd strong { display: block; font-size: 10.5px; border-top: 1px solid #999; padding-top: 4px; }
.gaji-slip-ttd small { font-size: 9px; color: #777; }

.gaji-slip-footer { margin: 22px 0 0; text-align: center; font-size: 8.5px; color: #999; }

/* ---- kertas rekap sebulan (A4 mendatar) -------------------------------- */

.gaji-rekap-info { margin: 0 0 10px; text-align: center; font-size: 9.5px; color: #555; }
.gaji-rekap-kaki { margin: 8px 0 0; font-size: 8.5px; color: #777; }

/* Sepuluh kolom - hurufnya dikecilkan & jaraknya dirapatkan supaya muat
   selebar A4 mendatar tanpa perlu digulung. */
.gaji-rekap-tabel th, .gaji-rekap-tabel td { padding: 4px 6px; font-size: 9px; }
.gaji-rekap-tabel tbody td { white-space: nowrap; }

/* Rekap memakai A4 MENDATAR: sepuluh kolomnya tidak akan pernah muat di
   kertas tegak, dan itu juga yang terjadi kalau lembarnya benar dicetak.
   Di layar tidak perlu digulung sendiri - pratinjaunya yang memperkecil
   seluruh lembar sampai muat (lihat pasangZoomKertas). */
.gaji-rekap-kertas {
  width: 297mm;
  min-height: 210mm;
  padding: 8mm 12mm 12mm;
  margin: 0 auto;
  background: #fff;
  color: #1a1a1a;
  font-size: 9pt;
  line-height: 1.4;
}

/* ---- kop & tanda tangan pada slip / rekap ------------------------------- */

/* Gambar tanda tangan duduk DI ATAS garisnya, bukan menggantikan garis itu -
   lembar yang sama masih sering dicetak lalu ditandatangani manual. Tingginya
   dikunci supaya tinggi blok tanda tangan tidak berubah-ubah mengikuti ukuran
   berkas yang diunggah. */
/* Cap & tanda tangan bertumpuk persis seperti di invoice: cap agak ke kiri
   dan di belakang, tanda tangan agak ke kanan dan di depan.

   max-height sengaja 13mm di dalam ruang 16mm - bukan 16mm penuh. Gambar
   setinggi ruangnya sendiri akan menyentuh tulisan "Disetujui oleh," tepat
   di atasnya, dan itulah yang terlihat berantakan sebelum ini. */
.gaji-slip-ttd-gambar img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-height: 13mm;
  max-width: 38mm;
  width: auto;
  object-fit: contain;
}

.gaji-slip-ttd-gambar .doc-sign-cap { transform: translate(-72%, -50%); z-index: 0; }
.gaji-slip-ttd-gambar .doc-sign-ttd { transform: translate(-38%, -50%); z-index: 1; }
/* ---- pengaturan kop di jendela Data Karyawan --------------------------- */
.gaji-kop-pengaturan {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.gaji-kop-judul { margin: 0 0 2px; font-size: 0.86rem; font-weight: 800; color: var(--ink); }
.gaji-kop-catatan { margin: 0 0 10px; font-size: 0.72rem; line-height: 1.45; color: var(--muted); }

.gaji-kop-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px dashed var(--border);
}

.gaji-kop-kotak {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow: hidden;
}

.gaji-kop-kotak img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gaji-kop-kotak span { font-size: 0.68rem; color: var(--muted); }

.gaji-kop-isi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.gaji-kop-isi strong { font-size: 0.8rem; color: var(--ink); }
.gaji-kop-isi span { font-size: 0.7rem; color: var(--muted); }
.gaji-kop-pilih { margin-top: 4px; cursor: pointer; }

/* ---- cetak: hanya kertas slipnya yang tampil di kertas ----------------- */
.gaji-print-root { display: none; }

@media print {
  body > *:not(.gaji-print-root) { display: none !important; }
  .gaji-print-root { display: block !important; }
  /* Di atas kertas sungguhan, lembarnya mengikuti kertas cetak - ukuran mm
     yang dipakai di layar (210mm/297mm + margin sendiri) akan bertabrakan
     dengan margin @page dan membuat halaman kedua yang kosong. */
  .gaji-print-root .gaji-slip-kertas,
  .gaji-print-root .gaji-rekap-kertas {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
  }
  .gaji-print-root .gaji-rekap-kertas { font-size: 9pt; }
  @page { margin: 14mm; }
}

/* Bonus otomatis 0,5% x omset - keterangan & tombol kembali ke otomatis */
.gaji-bonus-info { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; color: var(--ink-soft); font-size: .78rem; }
.gaji-bonus-info small { font-size: .78rem; }
.gaji-bonus-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #E6F6EC; color: #1D8A47; font-size: .7rem; font-weight: 700; }
.gaji-bonus-tag--manual { background: #FFF3D6; color: #92660B; }
.gaji-bonus-reset { padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; }
.gaji-bonus-reset:hover { border-color: var(--red); color: var(--red); }
.gaji-bonus-reset:disabled { opacity: .5; cursor: wait; }

/* Tombol kirim slip per baris (js/gajian.js: tombolKirimHtml). Warnanya
   menandai status: abu = belum dikirim, oranye = terkirim tapi belum
   dibuka, hijau = sudah dibuka pemiliknya. */
.gaji-sel-btn--kirim:hover { border-color: var(--red); color: var(--red); }
.gaji-sel-btn--kirim[aria-disabled="true"] { opacity: .4; }
.gaji-kirim--kirim { color: #B45309; border-color: #F5D9A8; background: #FFF8EC; }
.gaji-kirim--lihat { color: #15803D; border-color: #BBE5CB; background: #F0FAF4; }
.gaji-sel-btn--proses { cursor: progress; animation: gaji-kedip 1s ease-in-out infinite; }
@keyframes gaji-kedip { 50% { opacity: .3; } }
.gaji-toolbar .gaji-btn svg { width: 15px; height: 15px; vertical-align: -3px; }
.gaji-btn-kirim-modal { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.gaji-btn-kirim-modal svg { width: 15px; height: 15px; }
.gaji-toolbar { flex-wrap: wrap; }

/* Tabel Potongan (di bawah daftar gaji) */
.gaji-td-hasil--potong { color: var(--red); }
.gaji-tabel--potongan .gaji-td-hasil--utama { color: #15803D; }
/* Slip sudah dikirim tapi angkanya berubah sesudahnya - perlu kirim ulang */
.gaji-kirim--usang { position: relative; color: var(--red); border-color: #F3B8BC; background: #FFF5F5; }
.gaji-kirim--usang::after { content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px #fff; }

/* Bukti transfer per baris (menggantikan tombol sampah per baris) */
.gaji-bukti--ada { color: #15803D; border-color: #BBE5CB; background: #F0FAF4; }
.gaji-sel-btn--bukti:hover { border-color: #15803D; color: #15803D; }
.gaji-th-aksi .gaji-sel-btn { width: 28px; height: 28px; }
.gaji-bukti-gambar { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: flex-start; justify-content: center; background: #F3F3F5; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; }
.gaji-bukti-gambar img { max-width: 100%; height: auto; border-radius: 6px; box-shadow: 0 4px 16px rgba(20,20,26,.12); }
.gaji-bukti-aksi .confirm-modal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
.gaji-bukti-aksi .confirm-modal-btn svg { width: 15px; height: 15px; }
.gaji-bukti-aksi [data-hapus-bukti] { color: var(--red); }

/* Pilih karyawan yang dikeluarkan dari bulan ini */
.gaji-pilih-daftar { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; margin-top: 14px; text-align: left; }
.gaji-pilih-baris { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background .15s; }
.gaji-pilih-baris:hover { border-color: #F3B8BC; }
.gaji-pilih-baris:has(input:checked) { border-color: var(--red); background: #FFF5F5; }
.gaji-pilih-baris input { width: 16px; height: 16px; accent-color: var(--red); flex: none; }
.gaji-pilih-baris span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.gaji-pilih-baris strong { font-size: .86rem; }
.gaji-pilih-baris small { font-size: .72rem; color: var(--muted); }
.gaji-pilih-baris em { font-style: normal; font-size: .8rem; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }

/* Judul kolom Lain-lain / Potongan Lain yang bisa diklik untuk mengisi
   keterangan dalam kurung di slip. Tampil seperti judul biasa, cuma diberi
   pensil kecil & garis putus-putus. */
.gaji-th-ket {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0; border: 0; background: none;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer; border-bottom: 1px dashed currentColor;
}
.gaji-th-ket svg { width: 11px; height: 11px; opacity: .55; }
.gaji-th-ket:hover { color: var(--red); }
.gaji-th-ket:hover svg { opacity: 1; }
.gaji-th-ket i { font-style: normal; font-size: .62rem; line-height: 1; padding: 2px 5px; border-radius: 99px; background: var(--red); color: #fff; }

.gaji-ket-dialog { max-width: 520px; }
.gaji-ket-daftar { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; margin-top: 14px; text-align: left; }
.gaji-ket-baris { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); align-items: center; gap: 10px; }
.gaji-ket-nama { display: flex; flex-direction: column; min-width: 0; }
.gaji-ket-nama strong { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gaji-ket-nama small { font-size: .72rem; color: var(--muted); }
.gaji-ket-baris--nol .gaji-ket-nama { opacity: .55; }
@media (max-width: 480px) { .gaji-ket-baris { grid-template-columns: 1fr; gap: 4px; } }
.gaji-ket-daftar { overflow-x: hidden; padding-right: 2px; }
.gaji-ket-baris .gaji-input { width: 100%; min-width: 0; box-sizing: border-box; }