/*
 * Payroll Marmo — sistem visual.
 *
 * Mengikuti skill apple-design, diprioritaskan sesuai sifat halaman ini:
 * padat angka rupiah, bukan digerakkan gestur. Jadi urutannya tipografi dan
 * angka tabular dulu, lalu spasi & hierarki, lalu material, dan motion paling
 * akhir — seperlunya saja. Tabel gaji sengaja TIDAK dianimasikan.
 */

:root {
  /* Font sistem: sudah membawa optical sizing, tabel tracking, dan penyetelan
     legibilitas sendiri. Diganti hanya kalau ada alasan. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;

  --teks: #1c1c1e;
  --teks-lembut: #6c6c70;
  --teks-samar: #9a9aa0;

  --latar: #f2f2f7;
  --permukaan: #ffffff;
  --garis: rgba(60, 60, 67, 0.12);
  --garis-samar: rgba(60, 60, 67, 0.06);

  --aksen: #0a6cff;
  --positif: #1a7f37;
  --negatif: #c9372c;
  --perhatian: #9a6700;
  --perhatian-latar: #fff8e6;
  --diubah: #6f42c1;
  --diubah-latar: #f6f2ff;

  --radius: 12px;
  --radius-kecil: 8px;

  /* Satu skala spasi. Dalam rem supaya layout ikut membesar bersama setelan
     ukuran teks pengguna, bukan pecah. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;

  --bayang-rendah: 0 1px 2px rgba(0, 0, 0, 0.05);
  --bayang-tinggi: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root {
    --teks: #f2f2f7;
    --teks-lembut: #a1a1a6;
    --teks-samar: #7c7c80;
    --latar: #000000;
    --permukaan: #1c1c1e;
    --garis: rgba(235, 235, 245, 0.16);
    --garis-samar: rgba(235, 235, 245, 0.08);
    --aksen: #4d9bff;
    --positif: #4ade80;
    --negatif: #ff6b5e;
    --perhatian: #e3b341;
    --perhatian-latar: #2a2110;
    --diubah: #c9a6ff;
    --diubah-latar: #241a33;
    --bayang-tinggi: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

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

body {
  margin: 0;
  font-family: var(--font);
  /* Leading longgar untuk body; heading nanti diperketat. */
  font: 100%/1.5 var(--font);
  color: var(--teks);
  background: var(--latar);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Tipografi ----------
   Tracking bersifat spesifik-ukuran: teks besar butuh tracking NEGATIF karena
   hurufnya terbaca terlalu renggang saat membesar; teks kecil butuh sedikit
   positif. Satu nilai letter-spacing untuk semua ukuran pasti salah di salah
   satu ujungnya. */

h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.021em;
  font-weight: 640;
  margin: 0 0 var(--s2);
}

h2 {
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
  font-weight: 600;
  margin: 0 0 var(--s2);
}

.keterangan {
  color: var(--teks-lembut);
  font-size: 0.9375rem;
  line-height: 1.45;
  letter-spacing: 0;
  margin: 0 0 var(--s5);
  max-width: 62ch;
}

.mikro {
  font-size: 0.75rem;
  line-height: 1.3;
  /* Positif sedikit: ukuran kecil butuh ruang antarhuruf untuk tetap terbaca. */
  letter-spacing: 0.006em;
  color: var(--teks-lembut);
}

a { color: var(--aksen); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Kerangka ---------- */

.bingkai {
  max-width: 88rem;
  margin: 0 auto;
  padding: var(--s6) var(--s5) var(--s7);
}

/* Chrome translusen: konten bergulir DI BAWAHNYA, bukan di bawah strip opak. */
.bilah {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  background: color-mix(in srgb, var(--permukaan) 72%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  /* Tepi atas terang = cahaya tertangkap material, bukan garis pembatas. */
  border-bottom: 1px solid var(--garis-samar);
}

.bilah .merek {
  font-weight: 640;
  letter-spacing: -0.014em;
  color: var(--teks);
}

.bilah nav { display: flex; gap: var(--s4); margin-left: auto; align-items: center; }

/* ---------- Permukaan ---------- */

.kartu {
  background: var(--permukaan);
  border-radius: var(--radius);
  box-shadow: var(--bayang-rendah);
  border: 1px solid var(--garis-samar);
  overflow: hidden;
}

.kartu + .kartu { margin-top: var(--s5); }
.kartu-isi { padding: var(--s5); }

/* ---------- Tabel gaji ---------- */

.gulung { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

/* Tabel gaji punya 13 kolom. Tanpa ini browser memampatkan kolom Karyawan
   sampai namanya pecah per suku kata dan catatan kecilnya menumpuk jadi
   baris setinggi layar. Biarkan kolom selebar isinya dan wadahnya yang
   bergulir — itu gunanya .gulung. */
.gulung table { width: max-content; min-width: 100%; }
.gulung tbody td:first-child,
.gulung thead th:first-child,
.gulung tfoot td:first-child { min-width: 17rem; }
.gulung .mikro { white-space: normal; }

/* Cuma kolom Karyawan yang ditempelkan, di tepi kiri — supaya baris siapa
   tetap kelihatan sambil menggulir ke kanan. Kolom Total SENGAJA TIDAK
   ditempelkan di kanan (pernah dicoba, dicabut 2026-09-19): tabel ini lebih
   lebar dari kontainernya, jadi kolom kanan yang ditempelkan langsung
   "nempel" ke tepi kanan bahkan sebelum digulir sama sekali — hasilnya latar
   Total yang buram menimpa isi kolom Lebih/Kurang Jam persis di tengah teks
   (kepotong "LEBIH/KURANG JA[M]"), dan lima kolom di antaranya (Sub Total,
   Izin/Mangkir, Telat Pagi, Kasbon, Lain-lain) tersembunyi total di
   belakangnya tanpa ada tanda apa pun. Total sekarang kolom biasa — digulir
   seperti kolom lain, tanpa risiko menimpa apa-apa. */
.gulung tbody td:first-child,
.gulung thead th:first-child,
.gulung tfoot td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--permukaan);
}

.gulung thead th:first-child { z-index: 3; }

/* Sel yang menempel butuh latar buram sendiri — kalau ikut transparan, isi
   kolom yang lewat di bawahnya tembus dan angkanya jadi tumpang tindih. */
.gulung tr.perlu-ditinjau td:first-child {
  background: color-mix(in srgb, var(--perhatian-latar) 55%, var(--permukaan));
}

.gulung tfoot td:first-child { background: var(--permukaan); }

thead th {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--permukaan) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: left;
  font-weight: 560;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--teks-lembut);
  padding: var(--s3) var(--s3);
  white-space: nowrap;
}

tbody td {
  padding: var(--s3);
  /* Hierarki lewat garis paling samar, bukan kisi penuh. */
  border-top: 1px solid var(--garis-samar);
  vertical-align: baseline;
}

tbody tr:hover { background: var(--garis-samar); }

/* Angka rupiah WAJIB tabular: tanpa ini digit antar baris gak sejajar dan
   kolom uang jadi susah dipindai. */
.angka, td.angka, th.angka {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.total { font-weight: 640; letter-spacing: -0.008em; }
.sub-total { font-weight: 600; }
.nol { color: var(--teks-samar); }

/* Blok potongan diberi warna judul supaya arah angkanya kebaca sekilas —
   di slip aslinya angka potongan ditulis tinta merah. */
th.kurang { color: var(--negatif); }

/* Nilai negatif di kolom penambah (Lebih/Kurang Jam, Lain-lain) diberi warna
   supaya arahnya kebaca sekilas — di tabel selebar ini tanda minus saja
   gampang terlewat. */
.sel-tombol.kurang { color: var(--negatif); }

/* Pemisah tipis antara blok penambah, Sub Total, dan blok potongan. Garis
   vertikal tipis, bukan kolom kosong: tabelnya sudah selebar ini. */
.sekat { border-left: 1px solid var(--garis); }

.nama { font-weight: 560; letter-spacing: -0.005em; }
.pin { color: var(--teks-samar); font-variant-numeric: tabular-nums; }

/* ---------- Sel yang bisa diedit ---------- */

.sel { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; }

.sel-tombol {
  appearance: none;
  background: none;
  border: 0;
  padding: var(--s1) var(--s2);
  margin: calc(var(--s1) * -1) calc(var(--s2) * -1);
  border-radius: var(--radius-kecil);
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.sel-tombol:hover { background: var(--garis); }

/* Umpan balik pada PENEKANAN, bukan saat dilepas. */
.sel-tombol:active { transform: scale(0.97); background: var(--garis); }

.sel-tombol:focus-visible { outline: 2px solid var(--aksen); outline-offset: 1px; }

/* Angka hasil edit manusia gak boleh tampil seolah-olah hasil sistem. */
.diubah-nilai {
  color: var(--diubah);
  font-weight: 600;
  background: var(--diubah-latar);
}

.asal-hitungan { color: var(--teks-samar); font-size: 0.6875rem; letter-spacing: 0.006em; }

/* ---------- Penanda ---------- */

.tanda {
  display: inline-block;
  padding: 1px var(--s2);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 560;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.tanda-perhatian { background: var(--perhatian-latar); color: var(--perhatian); }
.tanda-diubah { background: var(--diubah-latar); color: var(--diubah); }

tr.perlu-ditinjau td { background: color-mix(in srgb, var(--perhatian-latar) 55%, transparent); }

/* ---------- Tombol ---------- */

.tombol {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  border-radius: var(--radius-kecil);
  border: 1px solid var(--garis);
  background: var(--permukaan);
  color: var(--teks);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 560;
  letter-spacing: -0.004em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 100ms ease-out, background 120ms ease-out;
}

.tombol:hover { background: var(--garis-samar); text-decoration: none; }
.tombol:active { transform: scale(0.97); }
.tombol:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }

.tombol-utama {
  background: var(--aksen);
  border-color: transparent;
  color: #fff;
}

.tombol-utama:hover { background: color-mix(in srgb, var(--aksen) 88%, black); }

.tombol-kecil { padding: var(--s1) var(--s3); font-size: 0.8125rem; }

.tombol-teks {
  border: 0;
  background: none;
  color: var(--aksen);
  padding: var(--s1) var(--s2);
}

.tombol-hancur { color: var(--negatif); }

/* ---------- Form ---------- */

label { display: block; font-size: 0.8125rem; font-weight: 560; color: var(--teks-lembut); margin-bottom: var(--s1); }

input[type="text"], input[type="number"], input[type="date"], input[type="email"], input[type="password"] {
  width: 100%;
  padding: var(--s2) var(--s3);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--teks);
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--radius-kecil);
}

input[type="number"] { font-variant-numeric: tabular-nums; text-align: right; }

input:focus { outline: 2px solid var(--aksen); outline-offset: -1px; border-color: transparent; }

.baris-form { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; }
.bidang { min-width: 9rem; }

/* Form edit sel: muncul sebagai material kecil yang berlabuh di selnya. */
/* Sengaja mengalir di dalam sel, bukan melayang absolut: tabelnya bisa
   digulung horizontal, dan popover absolut bakal terpotong overflow. Tinggi
   baris yang bertambah sebentar lebih baik daripada form yang terpotong. */
.sel-form {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  min-width: 12rem;
  max-width: 14rem;
  margin-left: auto;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--radius-kecil);
  box-shadow: var(--bayang-tinggi);
  text-align: left;
  transform-origin: top right;
  animation: muncul 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sel-form .aksi { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.sel-form label { margin-bottom: 2px; font-size: 0.6875rem; }
.sel-form input { padding: var(--s1) var(--s2); font-size: 0.875rem; }

/* ---------- Koreksi angka mentah absensi ---------- */

/* Angka mentah (berapa hari, berapa jam) yang bisa diklik buat dikoreksi,
   tampil INLINE di tengah kalimat rincian. Beda dari .sel-tombol yang berdiri
   sendiri di selnya: yang ini harus menyatu dengan teks di kiri-kanannya,
   jadi padding-nya tipis dan gak boleh menggeser baris. */
.koreksi-tombol {
  display: inline-block;
  padding: 0 3px;
  margin: 0 -1px;
  border-radius: var(--radius-kecil);
  color: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  /* Garis putus-putus: tanda "angka ini bisa disentuh" yang cukup pelan
     supaya rincian kecil ini gak jadi ramai — ada 4 per baris karyawan. */
  border-bottom: 1px dashed var(--garis);
  transition: background 120ms ease-out;
}

.koreksi-tombol:hover { background: var(--garis); text-decoration: none; }
.koreksi-tombol:active { background: var(--garis); }
.koreksi-tombol:focus-visible { outline: 2px solid var(--aksen); outline-offset: 1px; }

/* Angka yang sudah dikoreksi manusia gak boleh tampil seolah-olah angka
   mesin — sama alasannya dengan .diubah-nilai di sel rupiah. */
.koreksi-tombol.dikoreksi {
  color: var(--diubah);
  font-weight: 600;
  background: var(--diubah-latar);
  border-bottom-color: var(--diubah);
}

/* Form koreksi mengalir di dalam sel Karyawan yang sudah lebar, jadi dia
   berlabuh di KIRI — bukan kanan seperti .sel-form yang menempel ke kolom
   angka. */
.koreksi-form {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  margin: var(--s2) 0;
  max-width: 15rem;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--radius-kecil);
  box-shadow: var(--bayang-tinggi);
  text-align: left;
  white-space: normal;
  transform-origin: top left;
  animation: muncul 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.koreksi-form .petunjuk {
  display: block;
  margin-top: 2px;
  font-size: 0.625rem;
  color: var(--teks-samar);
}

.koreksi-form .aksi { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.koreksi-form label { display: block; margin-bottom: 2px; font-size: 0.6875rem; }
.koreksi-form input { width: 100%; padding: var(--s1) var(--s2); font-size: 0.875rem; }

/* Material datang, bukan sekadar memudar: blur + skala bergerak bersama. */
@keyframes muncul {
  from { opacity: 0; transform: scale(0.96) translateY(-2px); filter: blur(2px); }
  to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* ---------- Pesan ---------- */

.pesan {
  padding: var(--s3) var(--s4);
  border-radius: var(--radius-kecil);
  font-size: 0.9375rem;
  margin-bottom: var(--s4);
}

.pesan-baik { background: color-mix(in srgb, var(--positif) 12%, transparent); color: var(--positif); }
.pesan-buruk { background: color-mix(in srgb, var(--negatif) 12%, transparent); color: var(--negatif); }
.peringatan { background: var(--perhatian-latar); color: var(--perhatian); padding: var(--s3) var(--s4); border-radius: var(--radius-kecil); }

.kosong { text-align: center; padding: var(--s7) var(--s5); color: var(--teks-lembut); }

/* ---------- Rincian ---------- */

.rincian { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); font-size: 0.875rem; }
.rincian dt { color: var(--teks-lembut); }
.rincian dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ---------- Preferensi pengguna ----------
   Reduced motion bukan berarti tanpa umpan balik — hanya padanan yang lebih
   lembut dan tidak vestibular. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .sel-form { animation: none; }
  .tombol:active, .sel-tombol:active { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .bilah, thead th { background: var(--permukaan); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root { --garis: rgba(60, 60, 67, 0.5); --garis-samar: rgba(60, 60, 67, 0.28); --teks-lembut: #48484a; }
  .bilah, thead th { background: var(--permukaan); backdrop-filter: none; }
  .tombol { border-color: var(--teks); }
}