/* =====================================================================
   AkseleraSync — Modul Penggajian dan Slip Gaji
   ---------------------------------------------------------------------
   Berpasangan dengan assets/js/portal-payroll.js.

   ATURAN YANG DIPEGANG BERKAS INI
   - Seluruh spacing, radius, tipografi, elevasi, dan target sentuh
     diambil dari tokens.css lewat var(). Tidak ada nilai mentah untuk
     hal-hal tersebut.
   - Tidak ada font-size di bawah --fs-caption (12px). Slip gaji penuh
     angka; mengecilkan teks di layar seperti ini justru yang membuat
     bendahara salah membaca.
   - Semua angka uang memakai font-variant-numeric: tabular-nums supaya
     kolom nominal benar-benar sejajar.
   - Status tidak pernah dibedakan hanya lewat warna: setiap chip dan
     setiap langkah membawa penanda karakter dan teks.
   - Padding komponen memakai token kepadatan (--d-card-pad, --d-row-pad,
     --d-page-pad, --d-section-gap), bukan angka tetap, sehingga modul
     ikut menyesuaikan diri saat dipasang di portal mana pun.

   Warna brand dituliskan dengan fallback (mis. var(--indigo, #243B72))
   agar berkas ini tetap benar saat dipratinjau di luar index.html.
   ===================================================================== */

.pay-shell {
  --pay-indigo: var(--indigo, #243B72);
  --pay-indigo-dark: var(--indigo-dark, #15244A);
  --pay-indigo-soft: var(--indigo-soft, #E9EDF6);
  --pay-emerald: var(--emerald, #087A60);
  --pay-emerald-dark: var(--emerald-dark, #075B49);
  --pay-emerald-soft: var(--emerald-soft, #E7F3EF);
  --pay-gold: var(--gold, #D7A52E);
  --pay-gold-dark: var(--gold-dark, #9A7314);
  --pay-gold-soft: var(--gold-soft, #FBF3DE);
  --pay-terracotta: var(--terracotta, #C6613B);
  --pay-terracotta-dark: var(--terracotta-dark, #9C4529);
  --pay-terracotta-soft: var(--terracotta-soft, #FBEFE9);
  --pay-ink: var(--ink, #15244A);
  --pay-text: var(--text, #3C4A6B);
  --pay-muted: var(--muted, #64718A);
  --pay-line: var(--line, #E7E3D9);
  --pay-sand: var(--sand, #F3F0E8);
  --pay-canvas: var(--canvas, #FCFBF7);
  --pay-white: var(--white, #FFFFFF);

  display: block;
  position: relative;
  color: var(--pay-ink);
  background: var(--pay-canvas);
  font-size: var(--d-body-size, var(--fs-body));
  line-height: var(--lh-normal);
}

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

/* Angka uang selalu sejajar. Diterapkan pada setiap tempat angka
   berbaris, bukan hanya pada tabel. */
.pay-tile-value,
.pay-line-value,
.pay-emp-nilai,
.pay-unit-nilai,
.pay-total-value,
.pay-slip-terima-value,
.pay-slip-id-value,
.pay-slip-verif-kode,
.pay-chart-value,
.pay-audit-waktu {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------
   Kepala halaman
   ------------------------------------------------------------------- */
.pay-head {
  display: block;
  padding: var(--d-page-pad) var(--d-page-pad) var(--sp-4);
  color: var(--white, #fff);
  background: linear-gradient(150deg, var(--pay-indigo-dark), var(--pay-indigo));
}
/* Chip status berbagi baris dengan nama sekolah. Keduanya berukuran
   caption, jadi label status sepanjang apa pun tidak pernah menekan
   judul halaman menjadi beberapa baris. */
.pay-head-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: var(--sp-6);
}
.pay-head-eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, .74);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
/* Chip status di kepala halaman -> judul "Penggajian". Chip adalah
   permukaan, judul hanya huruf, jadi ambangnya "kartu/chips ke teks":
   minimum 12px terlihat. 8px -> 12px (terlihat 11). */
.pay-head-title {
  margin: var(--sp-3) 0 0;
  color: var(--white, #fff);
  font-size: var(--fs-title);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.pay-head-sub {
  margin: var(--sp-1) 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}
.pay-head .pay-chip {
  flex: none;
  color: var(--white, #fff);
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .28);
}

/* ---------------------------------------------------------------------
   Tab bagian
   ------------------------------------------------------------------- */
/* Tab dibiarkan turun baris, bukan digeser. Strip yang harus digeser
   menyembunyikan tab terakhir di tepi layar sempit, dan tab yang
   setengah terpotong terbaca sebagai cacat, bukan sebagai isyarat
   bahwa masih ada isi di sebelah kanan. */
.pay-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--d-page-pad);
  background: var(--pay-white);
  border-bottom: 1px solid var(--pay-line);
}
.pay-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-3);
  color: var(--pay-text);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  background: var(--pay-sand);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease);
}
.pay-tab.is-aktif {
  color: var(--white, #fff);
  background: var(--pay-indigo);
  border-color: var(--pay-indigo);
}
.pay-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sp-5);
  padding: 0 var(--sp-1);
  color: var(--white, #fff);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  background: var(--pay-terracotta);
  border-radius: var(--r-pill);
}
.pay-tab.is-aktif .pay-tab-badge { color: var(--pay-indigo-dark); background: var(--gold, #D7A52E); }

/* ---------------------------------------------------------------------
   Badan halaman dan seksi
   ------------------------------------------------------------------- */
.pay-body { padding: var(--d-page-pad); }
.pay-sec { margin-bottom: var(--d-section-gap); }
.pay-sec:last-child { margin-bottom: 0; }

.pay-sec-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  /* Blok judul -> konten 12px dari token ritme section, bukan angka
     lokal, supaya rasionya terhadap jarak antar section (40 atau 32)
     tetap minimal 3:1 (RITME SECTION OPSI B). */
  margin-bottom: var(--sec-head-gap, var(--sp-3));
}
.pay-sec-main { min-width: 0; }
.pay-sec-title {
  margin: 0;
  color: var(--pay-ink);
  font-size: var(--fs-heading);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
  letter-spacing: -.012em;
}
.pay-sec-sub {
  margin: var(--sp-1) 0 0;
  color: var(--pay-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}

/* ---------------------------------------------------------------------
   Anatomi header section — bar aksen + kicker (RITME SECTION OPSI B)
   Bar aksen 14x3 pill menandai awal section, warnanya warna kicker
   (default var(--kick-indigo) dari tokens.css, dengan fallback untuk
   pratinjau berdiri sendiri). Tanpa kicker bar berdiri di atas judul;
   bila kicker hadir bar pindah ke kiri kicker dan bar judul dilepas.
   ::before pada .pay-sec-title dan .pay-sec-kicker belum terpakai di
   mana pun — sudah diperiksa lewat grep. Hanya head anak langsung
   .pay-sec yang diberi bar; judulSeksi yang dipakai DI DALAM kartu
   keputusan (.pay-keputusan) tidak ikut.
   ------------------------------------------------------------------- */
.pay-sec > .pay-sec-head .pay-sec-title::before {
  content: "";
  display: block;
  width: 14px;
  height: 3px;
  margin-bottom: var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--kick-indigo, #243B72);
}
.pay-sec-kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-1);
  color: var(--kick-indigo, #243B72);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-label);
  line-height: 1.35;
  text-transform: uppercase;
}
.pay-sec-kicker::before {
  content: "";
  flex: none;
  width: 14px;
  height: 3px;
  border-radius: var(--r-pill);
  background: currentColor;
}
.pay-sec > .pay-sec-head .pay-sec-kicker + .pay-sec-title::before {
  content: none;
}
/* Warna kicker per domain — --gold mentah dilarang untuk teks kicker,
   pakai turunan gelap dari tokens.css yang lolos kontras teks 12px. */
.pay-sec-kicker--gold { color: var(--kick-gold, #8A6A14); }
.pay-sec-kicker--emerald { color: var(--kick-emerald, #087A60); }
.pay-sec-kicker--terra { color: var(--kick-terra, #9C4529); }

/* ---------------------------------------------------------------------
   Divider bermerek antar section — SoT 7.2.5
   Hanya DI ANTARA section level halaman (.pay-sec bertetangga di dalam
   .pay-body); tidak pernah di dalam kartu, sheet, atau antar item
   daftar. Digambar absolut di TENGAH gap oleh pseudo pada section
   KEDUA sehingga tidak menambah tinggi layout. ::before dan ::after
   pada .pay-sec belum terpakai di mana pun — sudah diperiksa lewat
   grep. position: relative tanpa z-index tidak membuat stacking
   context baru.

   Garis dibuat transparan selebar piring di tengah supaya terputus
   rapi: piring mark ikut opacity .55, dan piring semi transparan tidak
   bisa menutup garis di belakangnya dengan bersih. */
.pay-sec + .pay-sec { position: relative; }
.pay-sec + .pay-sec::before {
  content: "";
  position: absolute;
  top: calc(-.5 * var(--d-section-gap));
  right: 8%;
  left: 8%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    var(--pay-line) 22%,
    var(--pay-line) calc(50% - 13px),
    transparent calc(50% - 12px),
    transparent calc(50% + 12px),
    var(--pay-line) calc(50% + 13px),
    var(--pay-line) 78%,
    transparent);
}
.pay-sec + .pay-sec::after {
  content: "";
  position: absolute;
  top: calc(-.5 * var(--d-section-gap) - 10px);
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: var(--r-pill);
  background: var(--pay-canvas) url("/presentasi/storage/brand/akselerasync-mark-1x1.webp") center / 13px 13px no-repeat;
  filter: grayscale(1);
  opacity: .55;
}

.pay-card {
  background: var(--pay-white);
  border: 1px solid var(--pay-line);
  border-radius: var(--d-card-radius);
  box-shadow: var(--elev-1);
  overflow: hidden;
}
.pay-card + .pay-card { margin-top: var(--d-card-gap); }
.pay-card--pad { padding: var(--d-card-pad); }
.pay-card--list { padding: 0; }
.pay-card--kosong {
  padding: var(--sp-6) var(--d-card-pad);
  text-align: center;
  background: var(--pay-white);
  border-style: dashed;
  box-shadow: none;
}
.pay-kosong-title {
  margin: 0;
  color: var(--pay-ink);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-bold);
}
.pay-kosong-body {
  margin: var(--sp-2) auto 0;
  max-width: 34ch;
  color: var(--pay-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}

/* ---------------------------------------------------------------------
   Chip status — selalu berpasangan penanda + teks, tidak hanya warna
   ------------------------------------------------------------------- */
.pay-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
}
/* Penanda kini berupa SVG, bukan huruf. Kotaknya disamakan supaya tinggi
   chip tidak berubah dan gambarnya duduk tepat di tengah baris teks. */
.pay-chip-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 14px;
  height: 14px;
}
.pay-chip-mark svg,
.pay-step-mark svg { display: block; }
.pay-chip--baik { color: var(--pay-emerald-dark); background: var(--pay-emerald-soft); border-color: rgba(8, 122, 96, .22); }
.pay-chip--emas { color: var(--pay-gold-dark); background: var(--pay-gold-soft); border-color: rgba(215, 165, 46, .34); }
.pay-chip--hangat { color: var(--pay-terracotta-dark); background: var(--pay-terracotta-soft); border-color: rgba(198, 97, 59, .26); }
.pay-chip--info { color: var(--pay-indigo); background: var(--pay-indigo-soft); border-color: rgba(36, 59, 114, .18); }
.pay-chip--netral { color: var(--pay-muted); background: var(--pay-sand); border-color: var(--pay-line); }

/* Penanda sumber nilai konfigurasi (BPJS, PPh 21). Jujur, tidak menakuti. */
.pay-src {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: var(--sp-2);
  padding: 0 var(--sp-2) 0 var(--sp-1);
  color: var(--pay-indigo);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  background: var(--pay-indigo-soft);
  border-radius: var(--r-pill);
}
.pay-src-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-4);
  height: var(--sp-4);
  color: var(--white, #fff);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  font-style: italic;
  background: var(--pay-indigo);
  border-radius: var(--r-pill);
}

/* Penanda pratinjau modul. Pita tipis di antara kepala halaman dan tab,
   terbaca sebelum angka mana pun tanpa merebut panggung dari isi layar.
   Warna indigo lembut plus ikon: status tidak dibedakan warna saja.
   Pita ini permukaan tersendiri, bukan bagian kepala halaman maupun tab,
   jadi ia butuh napas --sp-2 ke keduanya — tiga permukaan bertumpuk
   rapat 0px terbaca sebagai satu blok yang salah cetak. */
.pay-pratinjau {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: var(--sp-2) 0;
  padding: var(--sp-2) var(--d-page-pad);
  color: var(--pay-indigo);
  background: var(--pay-indigo-soft);
  border-bottom: 1px solid rgba(36, 59, 114, .16);
}
.pay-pratinjau-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
}
.pay-pratinjau-mark svg { display: block; }
.pay-pratinjau-text {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.pay-pratinjau-text strong { font-weight: var(--fw-bold); }

/* ---------------------------------------------------------------------
   Kartu angka ringkas
   ------------------------------------------------------------------- */
.pay-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--d-card-gap);
}
.pay-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--d-card-pad);
  background: var(--pay-white);
  border: 1px solid var(--pay-line);
  border-radius: var(--d-card-radius);
  box-shadow: var(--elev-1);
}
/* Jumlah kartu ganjil: pada wadah sempit kartu terakhir merapat penuh
   supaya tidak meninggalkan lubang di kanan grid. Aturannya ada di
   bagian wadah-sebagai-acuan di akhir berkas, karena harus dibatalkan
   lagi saat wadah cukup lebar untuk menampung ketiganya berjajar. */
.pay-tile--tekan {
  background: var(--pay-terracotta-soft);
  border-color: rgba(198, 97, 59, .3);
}
.pay-tile-label {
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.pay-tile-value {
  color: var(--pay-ink);
  font-size: var(--fs-metric-md);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  overflow-wrap: anywhere;
}
/* Nominal rupiah penuh turun satu tingkat ukuran agar tetap utuh dalam
   satu baris. Angka uang yang patah menjadi dua baris jauh lebih sulit
   dibaca daripada angka uang yang sedikit lebih kecil. */
.pay-tile-value--panjang { font-size: var(--fs-heading); }
.pay-tile--tekan .pay-tile-value { color: var(--pay-terracotta-dark); }
.pay-tile-note {
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}

/* ---------------------------------------------------------------------
   Baris nominal — tulang punggung slip gaji
   ------------------------------------------------------------------- */
.pay-rincian > .pay-line + .pay-line { border-top: 1px solid var(--pay-line); }
.pay-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--d-row-pad) 0;
}
.pay-line-main { min-width: 0; flex: 1 1 auto; }
.pay-line-label {
  display: block;
  color: var(--pay-ink);
  font-size: var(--d-body-size, var(--fs-body));
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.pay-line-note {
  display: block;
  margin-top: var(--sp-1);
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.pay-line-note .pay-src { margin: 0 var(--sp-2) 0 0; }
.pay-line-value {
  flex: none;
  color: var(--pay-ink);
  font-size: var(--d-body-size, var(--fs-body));
  font-weight: var(--fw-bold);
  text-align: right;
  white-space: nowrap;
}
.pay-line--kosong .pay-line-label { color: var(--pay-muted); font-weight: var(--fw-medium); }
.pay-line--kosong .pay-line-value { color: var(--pay-muted); font-weight: var(--fw-semibold); }
.pay-line--kuat {
  margin-top: var(--sp-1);
  border-top: 2px solid var(--pay-indigo-soft) !important;
}
/* Baris total yang kebetulan berada di urutan pertama tidak boleh
   menggambar garis mengambang di atas kartu. */
.pay-rincian > .pay-line--kuat:first-child,
.pay-slip-blok > .pay-line--kuat:first-child {
  margin-top: 0;
  border-top: 0 !important;
}
.pay-line--kuat .pay-line-label { font-weight: var(--fw-heavy); }
.pay-line--kuat .pay-line-value {
  color: var(--pay-indigo);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-heavy);
}

/* ---------------------------------------------------------------------
   Tombol
   ------------------------------------------------------------------- */
.pay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.pay-actions--kolom { flex-direction: column; }
.pay-actions--kembali { margin-top: 0; margin-bottom: var(--sp-3); }
.pay-actions > .pay-btn { flex: 1 1 180px; }
.pay-actions--kolom > .pay-btn { flex: 1 1 auto; }
.pay-actions--kembali > .pay-btn { flex: 0 1 auto; }

.pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: var(--sp-3) var(--sp-4);
  color: var(--pay-ink);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-align: center;
  background: var(--pay-white);
  border: 1px solid var(--pay-line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease);
}
.pay-btn:active { transform: scale(.985); }
.pay-btn:focus-visible { outline: 2px solid var(--pay-indigo); outline-offset: 2px; }
.pay-btn--utama {
  color: var(--white, #fff);
  background: var(--pay-emerald);
  border-color: var(--pay-emerald);
  box-shadow: 0 8px 18px rgba(8, 122, 96, .20);
}
.pay-btn--kedua {
  color: var(--pay-indigo);
  background: var(--pay-indigo-soft);
  border-color: rgba(36, 59, 114, .18);
}
.pay-btn--netral { color: var(--pay-text); background: var(--pay-white); }
/* Tombol yang sengaja terkunci karena aturan pemisahan tugas. Tetap
   dapat ditekan supaya alasannya terbaca, bukan diam tanpa penjelasan. */
.pay-btn--kunci {
  color: var(--pay-muted);
  background: repeating-linear-gradient(135deg, var(--pay-sand), var(--pay-sand) 6px, rgba(255, 255, 255, .7) 6px, rgba(255, 255, 255, .7) 12px);
  border-color: var(--pay-line);
  border-style: dashed;
  box-shadow: none;
}
.pay-btn:disabled { opacity: .58; cursor: not-allowed; }
/* Tombol aksi -> keterangan di bawahnya. Tepi keras tombol mendarat di
   badan huruf. 8px -> 12px (terlihat 13). */
.pay-actions-note {
  margin: var(--sp-3) 0 0;
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
}

/* ---------------------------------------------------------------------
   Langkah payroll run
   ------------------------------------------------------------------- */
.pay-steps { margin: 0; padding: 0; list-style: none; }
.pay-step {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--d-row-pad) var(--d-card-pad);
  border-bottom: 1px solid var(--pay-line);
}
.pay-step:last-child { border-bottom: 0; }
.pay-step-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--sp-6);
  height: var(--sp-6);
  color: var(--pay-muted);
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
  background: var(--pay-sand);
  border: 1px solid var(--pay-line);
  border-radius: var(--r-pill);
}
.pay-step.is-selesai .pay-step-mark {
  color: var(--white, #fff);
  background: var(--pay-emerald);
  border-color: var(--pay-emerald);
}
.pay-step.is-berjalan .pay-step-mark {
  color: var(--pay-indigo-dark);
  background: var(--pay-gold-soft);
  border-color: var(--pay-gold);
}
.pay-step-main { flex: 1 1 auto; min-width: 0; }
.pay-step-title {
  display: block;
  color: var(--pay-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.pay-step-note {
  display: block;
  margin-top: 2px;
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.pay-step-state {
  flex: none;
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}
.pay-step.is-selesai .pay-step-state { color: var(--pay-emerald-dark); }
.pay-step.is-berjalan .pay-step-state { color: var(--pay-gold-dark); }

/* ---------------------------------------------------------------------
   Catatan penjelas
   ------------------------------------------------------------------- */
.pay-note {
  padding: var(--d-card-pad);
  border-radius: var(--d-card-radius);
  border: 1px solid transparent;
}
.pay-note + .pay-sec,
.pay-sec + .pay-note { margin-top: var(--d-section-gap); }
.pay-note--konfig { background: var(--pay-indigo-soft); border-color: rgba(36, 59, 114, .16); }
.pay-note--info { background: var(--pay-indigo-soft); border-color: rgba(36, 59, 114, .16); }
.pay-note--hangat { background: var(--pay-terracotta-soft); border-color: rgba(198, 97, 59, .26); margin-top: var(--d-card-gap); }
.pay-note--privasi { background: var(--pay-emerald-soft); border-color: rgba(8, 122, 96, .2); }
.pay-note-title {
  margin: 0;
  color: var(--pay-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.pay-note-body {
  margin: var(--sp-2) 0 0;
  color: var(--pay-text);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}
.pay-note-meta {
  margin: var(--sp-2) 0 0;
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.pay-privasi {
  margin: var(--sp-3) 0 0;
  padding-left: var(--sp-3);
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  border-left: 3px solid var(--pay-emerald);
}
.pay-opsional {
  margin: 0;
  color: var(--pay-text);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}

/* ---------------------------------------------------------------------
   Baris pegawai (hanya pada layar berwenang)
   ------------------------------------------------------------------- */
.pay-emp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--d-row-pad) var(--d-card-pad);
  color: inherit;
  font-family: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--pay-line);
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease);
}
.pay-emp:last-child { border-bottom: 0; }
.pay-emp:hover { background: var(--pay-sand); }
.pay-emp:focus-visible { outline: 2px solid var(--pay-indigo); outline-offset: -2px; }
.pay-emp-main { min-width: 0; flex: 1 1 auto; }
.pay-emp-nama {
  display: block;
  color: var(--pay-ink);
  font-size: var(--d-body-size, var(--fs-body));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
.pay-emp-meta {
  display: block;
  margin-top: 2px;
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
/* Nama pegawai -> label peran. Label adalah chip berlatar, jadi
   pasangannya "teks ke kartu": minimum 12px. 4px -> 12px (terlihat 12.8). */
.pay-emp-tag {
  display: inline-block;
  margin-top: var(--sp-3);
  padding: 2px var(--sp-2);
  color: var(--pay-indigo);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  background: var(--pay-indigo-soft);
  border-radius: var(--r-xs);
}
/* Nominal gaji -> chip status di kolom kanan. Nominal memakai
   line-height ketat sehingga tintanya turun ~1px di bawah kotaknya:
   pada gap 4px jaraknya terlihat hanya 3px. 4px -> 12px (terlihat 11). */
.pay-emp-side {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
}
.pay-emp-nilai {
  color: var(--pay-ink);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  white-space: nowrap;
}
.pay-emp-sub {
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  text-align: right;
}

/* ---------------------------------------------------------------------
   Anomali
   ------------------------------------------------------------------- */
.pay-anom + .pay-anom { margin-top: var(--d-card-gap); }
.pay-anom-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.pay-anom-jenis {
  color: var(--pay-terracotta-dark);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.pay-anom-nama {
  margin: var(--sp-3) 0 0;
  color: var(--pay-ink);
  font-size: var(--fs-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.pay-anom-ringkas {
  margin: var(--sp-1) 0 0;
  color: var(--pay-text);
  font-size: var(--d-body-size, var(--fs-body));
  line-height: var(--lh-snug);
}
.pay-anom-kenapa {
  margin: var(--sp-2) 0 0;
  color: var(--pay-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}
.pay-anom-nilai {
  margin-top: var(--sp-2);
  padding: 0 var(--sp-3);
  background: var(--pay-sand);
  border-radius: var(--r-sm);
}
.pay-anom-nilai .pay-line--kuat { margin-top: 0; border-top: 0 !important; }

.pay-selesai-list > .pay-selesai + .pay-selesai {
  margin-top: var(--d-card-gap);
  padding-top: var(--d-card-gap);
  border-top: 1px solid var(--pay-line);
}
.pay-selesai-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.pay-selesai-jenis {
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}
.pay-selesai-nama {
  margin: var(--sp-2) 0 0;
  color: var(--pay-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}
.pay-selesai-catatan {
  margin: var(--sp-1) 0 0;
  color: var(--pay-text);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}
.pay-selesai-meta {
  margin: var(--sp-1) 0 0;
  color: var(--pay-muted);
  font-size: var(--fs-caption);
}

/* ---------------------------------------------------------------------
   Struktur gaji — profil dan total
   ------------------------------------------------------------------- */
.pay-profil-nama {
  margin: 0;
  color: var(--pay-ink);
  font-size: var(--fs-heading);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
}
.pay-profil-meta {
  margin: var(--sp-1) 0 0;
  color: var(--pay-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}
.pay-total {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  color: var(--white, #fff);
  background: linear-gradient(140deg, var(--pay-emerald-dark), var(--pay-emerald));
  border-color: transparent;
}
.pay-total-label {
  color: rgba(255, 255, 255, .84);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.pay-total-value {
  color: var(--white, #fff);
  font-size: var(--fs-display);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.pay-total-note {
  color: rgba(255, 255, 255, .84);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}

.pay-usul + .pay-usul {
  margin-top: var(--d-card-gap);
  padding-top: var(--d-card-gap);
  border-top: 1px solid var(--pay-line);
}
.pay-usul-nama {
  margin: var(--sp-2) 0 0;
  color: var(--pay-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}
.pay-usul-detail {
  margin: var(--sp-1) 0 0;
  color: var(--pay-text);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}
.pay-usul-meta {
  margin: var(--sp-1) 0 0;
  color: var(--pay-muted);
  font-size: var(--fs-caption);
}

/* ---------------------------------------------------------------------
   Jejak audit
   ------------------------------------------------------------------- */
.pay-audit {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--pay-white);
  border: 1px solid var(--pay-line);
  border-radius: var(--d-card-radius);
  box-shadow: var(--elev-1);
  overflow: hidden;
}
.pay-audit-item {
  display: flex;
  gap: var(--sp-3);
  padding: var(--d-row-pad) var(--d-card-pad);
  border-bottom: 1px solid var(--pay-line);
}
.pay-audit-item:last-child { border-bottom: 0; }
.pay-audit-waktu {
  flex: none;
  width: 8.5em;
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
.pay-audit-main { min-width: 0; flex: 1 1 auto; }
.pay-audit-aksi {
  display: block;
  color: var(--pay-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.pay-audit-detail {
  display: block;
  margin-top: 2px;
  color: var(--pay-text);
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
  overflow-wrap: anywhere;
}
.pay-audit-oleh {
  display: block;
  margin-top: var(--sp-1);
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

/* ---------------------------------------------------------------------
   Slip gaji
   ------------------------------------------------------------------- */
.pay-slip {
  background: var(--pay-white);
  border: 1px solid var(--pay-line);
  border-radius: var(--d-card-radius);
  box-shadow: var(--elev-2);
  overflow: hidden;
}
.pay-slip-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--d-card-pad);
  color: var(--white, #fff);
  background: linear-gradient(140deg, var(--pay-indigo-dark), var(--pay-indigo));
}
.pay-slip-head .pay-chip {
  color: var(--pay-indigo-dark);
  background: var(--gold, #D7A52E);
  border-color: transparent;
}
.pay-slip-sekolah {
  margin: 0;
  color: var(--white, #fff);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
}
.pay-slip-unit {
  margin: var(--sp-1) 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-caption);
}
.pay-slip-id {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
  padding: var(--d-card-pad);
  background: var(--pay-sand);
  border-bottom: 1px solid var(--pay-line);
}
.pay-slip-id-label {
  display: block;
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.pay-slip-id-value {
  display: block;
  margin-top: var(--sp-1);
  color: var(--pay-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
  overflow-wrap: anywhere;
}
.pay-slip-orang {
  padding: var(--d-card-pad);
  border-bottom: 1px solid var(--pay-line);
}
.pay-slip-nama {
  margin: 0;
  color: var(--pay-ink);
  font-size: var(--fs-heading);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
}
.pay-slip-meta {
  margin: var(--sp-1) 0 0;
  color: var(--pay-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}
.pay-slip-blok {
  padding: var(--d-card-pad);
  border-bottom: 1px solid var(--pay-line);
}
.pay-slip-blok-judul {
  margin: 0 0 var(--sp-1);
  color: var(--pay-indigo);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.pay-slip-blok > .pay-line + .pay-line { border-top: 1px solid var(--pay-line); }
.pay-slip-terima {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--d-card-pad);
  color: var(--white, #fff);
  background: linear-gradient(140deg, var(--pay-emerald-dark), var(--pay-emerald));
}
.pay-slip-terima-label {
  color: rgba(255, 255, 255, .84);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.pay-slip-terima-value {
  color: var(--white, #fff);
  font-size: var(--fs-display);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.pay-slip-terima-note {
  color: rgba(255, 255, 255, .86);
  font-size: var(--fs-caption);
}
.pay-slip-verif { padding: var(--d-card-pad); background: var(--pay-canvas); }
.pay-slip-verif-judul {
  margin: 0;
  color: var(--pay-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}
.pay-slip-verif-kode {
  margin: var(--sp-2) 0 0;
  color: var(--pay-indigo);
  font-size: var(--fs-heading);
  font-weight: var(--fw-heavy);
  letter-spacing: .08em;
}
.pay-slip-verif-tautan {
  margin: var(--sp-1) 0 0;
  color: var(--pay-text);
  font-size: var(--fs-small);
  overflow-wrap: anywhere;
}
.pay-slip-verif-note {
  margin: var(--sp-2) 0 0;
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
}

/* ---------------------------------------------------------------------
   Pimpinan — unit, keputusan, tren
   ------------------------------------------------------------------- */
.pay-unit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--d-row-pad) var(--d-card-pad);
  border-bottom: 1px solid var(--pay-line);
}
.pay-unit:last-child { border-bottom: 0; }
.pay-unit-main { min-width: 0; }
.pay-unit-nama {
  display: block;
  color: var(--pay-ink);
  font-size: var(--d-body-size, var(--fs-body));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.pay-unit-meta {
  display: block;
  margin-top: 2px;
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.pay-unit-nilai {
  flex: none;
  color: var(--pay-ink);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-heavy);
  white-space: nowrap;
}

.pay-keputusan .pay-sec-head { margin-bottom: var(--sp-2); }
.pay-peran {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  background: var(--pay-sand);
  border-radius: var(--r-sm);
}
.pay-peran-label {
  display: block;
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.pay-peran-nama {
  display: block;
  margin-top: 2px;
  color: var(--pay-ink);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

.pay-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
}
.pay-chart-col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.pay-chart-value {
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}
/* Batang memakai tinggi persentase, jadi jalurnya wajib punya tinggi
   pasti. Tanpa jalur ini persentase tidak punya acuan dan seluruh
   batang menciut menjadi garis tipis. */
.pay-chart-track {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: calc(var(--sp-9) * 2.2);
}
.pay-chart-bar {
  width: 100%;
  height: var(--tinggi, 50%);
  min-height: var(--sp-2);
  background: linear-gradient(180deg, var(--pay-indigo), var(--pay-indigo-dark));
  border-radius: var(--r-xs) var(--r-xs) 0 0;
}
.pay-chart-col.is-kini .pay-chart-value { color: var(--pay-emerald-dark); }
.pay-chart-col.is-kini .pay-chart-bar {
  background: linear-gradient(180deg, var(--pay-emerald), var(--pay-emerald-dark));
  box-shadow: inset 0 0 0 2px var(--pay-gold);
}
.pay-chart-label {
  color: var(--pay-text);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}
.pay-chart-legend { margin-top: var(--sp-3); }
.pay-chart-note {
  margin: 0;
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
}
.pay-chart-note + .pay-chart-note { margin-top: var(--sp-2); }

/* ---------------------------------------------------------------------
   Pesan sesaat
   ------------------------------------------------------------------- */
.pay-toast {
  position: fixed;
  left: 50%;
  bottom: var(--sp-6);
  z-index: 40;
  max-width: min(88vw, 34rem);
  margin: 0;
  padding: var(--sp-3) var(--sp-5);
  color: var(--white, #fff);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-align: center;
  background: var(--pay-indigo-dark);
  border-radius: var(--r-pill);
  box-shadow: var(--elev-3);
  opacity: 0;
  transform: translate(-50%, var(--sp-3));
  pointer-events: none;
  transition: opacity var(--motion-base) var(--motion-ease), transform var(--motion-base) var(--motion-ease);
}
.pay-toast.is-tampil { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------------
   Catatan lebar layar
   ---------------------------------------------------------------------
   Modul ini tidak memakai media query lebar viewport. Bingkai portal
   dibatasi 480px pada index.html, sehingga aturan berbasis viewport
   akan menyala pada layar lebar padahal wadahnya tetap sempit — persis
   jenis kesalahan yang membuat tata letak terasa meleset.

   Sebagai gantinya seluruh susunan bersifat intrinsik: grid memakai
   repeat(auto-fit, minmax(...)) dan baris memakai flex-wrap, sehingga
   modul menyesuaikan diri pada lebar berapa pun yang diberikan portal,
   termasuk saat portal melebar menjadi 760px di layar besar.
   ------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   Baris menuju halaman lain
   ---------------------------------------------------------------------
   Sebelumnya dua tombol bergaya netral. Di atas kanvas terang, bidang
   putih dan garis tipisnya nyaris tidak terlihat, sehingga aksi utama
   kartu ini terbaca sebagai teks berwarna di tengah halaman. Sekarang
   berupa baris penuh dengan keterangan dan tanda arah, sehingga jelas
   dapat ditekan tanpa perlu menebak.
   ------------------------------------------------------------------- */
.pay-tuju {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--d-row-pad) var(--d-card-pad);
  color: inherit;
  font-family: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--pay-line);
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease);
}
.pay-tuju:last-child { border-bottom: 0; }
.pay-tuju:hover { background: var(--pay-sand); }
.pay-tuju:focus-visible { outline: 2px solid var(--pay-indigo); outline-offset: -2px; }
.pay-tuju-main { min-width: 0; flex: 1 1 auto; }
.pay-tuju-title {
  display: block;
  color: var(--pay-ink);
  font-size: var(--d-body-size, var(--fs-body));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.pay-tuju-note {
  display: block;
  margin-top: 2px;
  color: var(--pay-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.pay-tuju-arah {
  flex: none;
  width: var(--sp-6);
  height: var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--pay-indigo-soft);
  position: relative;
}
.pay-tuju-arah::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--sp-2);
  height: var(--sp-2);
  border-top: 2px solid var(--pay-indigo);
  border-right: 2px solid var(--pay-indigo);
  transform: translateX(-2px) rotate(45deg);
}

/* ---------------------------------------------------------------------
   Wadah sebagai acuan lebar
   ---------------------------------------------------------------------
   Portal Staf membingkai isinya pada 480px sedangkan Portal Pimpinan
   memberi lebih dari 1000px. Acuan yang benar karena itu adalah lebar
   wadah, bukan lebar viewport.
   ------------------------------------------------------------------- */
.pay-shell {
  container-type: inline-size;
  container-name: pay;
}

/* Kartu angka terakhir hanya melebar penuh saat wadahnya memang sempit.
   Pada wadah lebar, tiga kartu berjajar rapi dan kartu ketiga tidak
   boleh direntangkan menjadi bidang kosong selebar halaman. */
.pay-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
@container pay (min-width: 620px) {
  .pay-tile:last-child:nth-child(odd) { grid-column: auto; }
  .pay-body { padding: var(--d-page-pad) var(--sp-7); }
  .pay-head { padding-inline: var(--sp-7); }
  .pay-tabs { padding-inline: var(--sp-7); }
}

/* Catatan penutup halaman adalah penutup, bukan bagian berikutnya.
   Jaraknya mengikuti token ritme section (40 atau 32 sesuai portal),
   bukan angka 32px lama: margin ini runtuh (collapse) dengan
   margin-bottom .pay-sec di atasnya, jadi nilai yang lebih kecil dari
   token hanya menjadi aturan mati. */
.pay-body > .pay-note:last-child { margin-top: var(--d-section-gap); }