/* ============================================================
   Slip Gaji — antarmuka administrasi payroll
   Bahasa visual: dokumen kerja pabrik. Kertas, garis mistar,
   angka mesin ketik, dan stempel status.
   ============================================================ */

:root {
  --tinta:      #14181d;
  --rel:        #1c242e;
  --rel-garis:  #2c3742;
  --kertas:     #eceee9;
  --permukaan:  #ffffff;
  --mistar:     #d3d8d0;
  --redup:      #5c6670;
  --aksen:      #23304a;
  --aksen-muda: #e7ebf2;
  --sah:        #2e6b4f;
  --tunggu:     #9a6b12;
  --stempel:    #a93226;

  --r: 3px;
  --bayang: 0 1px 0 rgba(20,24,29,.04), 0 10px 24px -18px rgba(20,24,29,.5);
  --ui: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --angka: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--kertas);
}

a { color: var(--aksen); }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 20px; }
h2 { font-size: 15px; }

.lewati {
  position: absolute; left: -9999px; top: 0;
  background: var(--tinta); color: #fff; padding: 10px 16px; z-index: 99;
}
.lewati:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------- kerangka */

.kerangka { display: grid; grid-template-columns: 254px 1fr; min-height: 100vh; }

.rel {
  background: var(--rel);
  color: #cfd6dd;
  display: flex; flex-direction: column;
  padding: 22px 18px;
  position: sticky; top: 0; height: 100vh;
}

.merek { display: flex; gap: 11px; align-items: center; margin-bottom: 28px; }
.merek-tanda {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: #fff; color: var(--rel);
  font-family: var(--angka); font-weight: 600; font-size: 13px;
  border-radius: 2px;
}
.merek strong { display: block; color: #fff; font-size: 15px; }
.merek small { display: block; color: #8895a2; font-size: 11px; letter-spacing: .02em; }

.alur { display: grid; gap: 2px; }
.langkah {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 10px; border-radius: var(--r);
  color: #b8c2cc; text-decoration: none;
  border-left: 2px solid transparent;
}
.langkah:hover { background: var(--rel-garis); color: #fff; }
.langkah.on { background: var(--rel-garis); color: #fff; border-left-color: #fff; }
.langkah .angka {
  font-family: var(--angka); font-size: 11px;
  width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px;
  display: grid; place-items: center;
  border: 1px solid #43505d; border-radius: 50%;
}
.langkah.on .angka { background: #fff; color: var(--rel); border-color: #fff; }
.langkah .teks strong { display: block; font-size: 13px; font-weight: 500; }
.langkah .teks small { display: block; font-size: 11px; color: #7d8b98; }

.lain {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rel-garis);
  display: grid; gap: 1px;
}
.lain a {
  color: #98a5b1; text-decoration: none; font-size: 13px;
  padding: 7px 10px; border-radius: var(--r);
}
.lain a:hover, .lain a.on { color: #fff; background: var(--rel-garis); }

.kaki-rel { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--rel-garis); font-size: 12px; }
.kaki-rel .pengguna { color: #fff; }
.kaki-rel a { color: #8895a2; }

main {
  padding: 26px 30px 60px;
  max-width: 1180px;
  width: 100%;
}

.kepala {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 2px solid var(--tinta);
}

.pilih-periode { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--redup); }

/* ---------------------------------------------------- komponen */

.kartu {
  background: var(--permukaan);
  border: 1px solid var(--mistar);
  border-radius: var(--r);
  box-shadow: var(--bayang);
  padding: 18px 20px;
  margin-bottom: 18px;
}
.kartu > h2 { margin-bottom: 4px; }
.kartu .ket { color: var(--redup); font-size: 12.5px; margin: 0 0 14px; }

.kisi { display: grid; gap: 16px; }
.kisi-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kisi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kisi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.angka-besar {
  font-family: var(--angka); font-size: 26px; font-weight: 500;
  letter-spacing: -.02em; display: block;
}
.label-kecil {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--redup); display: block; margin-bottom: 6px;
}

.metrik { background: var(--permukaan); border: 1px solid var(--mistar); border-radius: var(--r); padding: 14px 16px; }
.metrik.tegas { background: var(--aksen); border-color: var(--aksen); color: #fff; }
.metrik.tegas .label-kecil { color: #b9c4d6; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--redup); font-weight: 600;
  padding: 0 10px 8px; border-bottom: 1px solid var(--mistar);
}
td { padding: 9px 10px; border-bottom: 1px solid #eceee9; vertical-align: middle; }
tr:hover td { background: #fafbf9; }
.kanan { text-align: right; }
.mono { font-family: var(--angka); font-size: 12.5px; }
.tabel-bungkus { overflow-x: auto; }

.pil {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 2px;
  border: 1px solid currentColor;
}
.pil.terkirim   { color: var(--sah); background: #edf5f1; }
.pil.gagal      { color: var(--stempel); background: #fbeeed; }
.pil.antre      { color: var(--tunggu); background: #fbf4e6; }
.pil.siap       { color: var(--aksen); background: var(--aksen-muda); }
.pil\.tanpa-email, .pil.tanpa-email { color: var(--redup); background: #f1f2f0; }
.pil.gaji       { color: var(--tinta); background: #eef0ec; }
.pil.uang_saku  { color: #7a4a12; background: #fbeee0; }

.tombol {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ui); font-size: 13px; font-weight: 500;
  padding: 9px 16px; border-radius: var(--r); cursor: pointer;
  border: 1px solid var(--tinta); background: var(--tinta); color: #fff;
  text-decoration: none;
}
.tombol:hover { background: #000; }
.tombol:disabled { opacity: .45; cursor: not-allowed; }
.tombol.garis { background: transparent; color: var(--tinta); }
.tombol.garis:hover { background: #f1f2f0; }
.tombol.kecil { padding: 6px 11px; font-size: 12px; }

label.bidang { display: block; margin-bottom: 14px; }
label.bidang > span {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--redup); margin-bottom: 5px;
}
input[type=text], input[type=password], input[type=email], input[type=number], input[type=file], select, textarea {
  width: 100%; font: inherit; font-size: 13px;
  padding: 9px 11px; border: 1px solid var(--mistar); border-radius: var(--r);
  background: #fff; color: var(--tinta);
}
textarea { font-family: var(--angka); font-size: 12px; line-height: 1.5; min-height: 150px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--aksen); outline-offset: 1px; border-color: var(--aksen); }
.bantuan { font-size: 11.5px; color: var(--redup); margin-top: 4px; }

.notif {
  padding: 11px 14px; border-radius: var(--r); font-size: 13px;
  margin-bottom: 14px; border-left: 3px solid;
}
.notif-sukses { background: #edf5f1; border-color: var(--sah); }
.notif-gagal  { background: #fbeeed; border-color: var(--stempel); }
.notif-info   { background: var(--aksen-muda); border-color: var(--aksen); }

.kosong { text-align: center; padding: 40px 20px; color: var(--redup); }
.kosong strong { display: block; color: var(--tinta); margin-bottom: 6px; font-size: 15px; }

.baris-aksi { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pencarian { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.pencarian input[type=text] { max-width: 280px; }
.pencarian select { max-width: 180px; }

/* ------------------------------------------- masuk */

.layar-masuk {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(20,24,29,.045) 39px 40px),
    var(--kertas);
}
.kotak-masuk { width: 100%; max-width: 380px; }
.kotak-masuk .kartu { padding: 28px; }
.kotak-masuk .judul { font-size: 22px; font-weight: 700; margin-bottom: 2px; }
.kotak-masuk .sub { color: var(--redup); font-size: 12.5px; margin-bottom: 22px; }

/* ------------------------------------------- slip karbon (elemen khas) */

.karbon {
  position: relative;
  background: #fffdf7;
  border: 1px solid var(--mistar);
  border-left: none;
  box-shadow: var(--bayang);
  padding: 26px 30px 30px 34px;
  font-family: var(--angka);
  font-size: 12px;
  overflow: hidden;
}
.karbon::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
  background:
    radial-gradient(circle at 7px 7px, var(--kertas) 3px, transparent 3.4px) 0 0/14px 14px,
    #fffdf7;
  border-right: 1px dashed var(--mistar);
}
.karbon-kepala { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid var(--tinta); padding-bottom: 10px; }
.karbon-kepala .kiri .tajuk { font-family: var(--ui); font-size: 19px; font-weight: 700; letter-spacing: .02em; }
.karbon-kepala .kiri .periode { font-size: 11.5px; }
.karbon-kepala .kanan { text-align: right; }
.karbon-kepala .kanan .nm { font-family: var(--ui); font-weight: 700; font-size: 14px; }
.karbon-kepala .kanan .al { font-size: 10.5px; color: var(--redup); max-width: 240px; }

.karbon-isi { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; margin-top: 14px; }
.karbon-isi .seksi { border-top: 1px solid var(--mistar); padding: 5px 0 2px; font-family: var(--ui); font-size: 11.5px; font-weight: 600; }
.baris-slip { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 2.5px 0; }
.baris-slip.total { font-weight: 600; border-top: 1px solid var(--mistar); padding-top: 4px; margin-top: 2px; }
.baris-slip .nilai { font-variant-numeric: tabular-nums; }
.baris-slip .label { color: #2b3138; }
.baris-slip.identitas .label { color: var(--redup); }
.karbon-thp {
  margin-top: 14px; border-top: 2px solid var(--tinta); padding-top: 9px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--ui); font-weight: 700; font-size: 15px;
}
.karbon-thp .rp { font-family: var(--angka); font-size: 17px; }

.stempel {
  position: absolute; right: 26px; bottom: 26px;
  transform: rotate(-11deg);
  border: 2.5px solid currentColor; border-radius: 4px;
  padding: 5px 12px; font-family: var(--ui); font-weight: 700;
  font-size: 15px; letter-spacing: .16em; text-transform: uppercase;
  opacity: .72; pointer-events: none;
}
.stempel.terkirim { color: var(--sah); }
.stempel.gagal { color: var(--stempel); }
.stempel.antre, .stempel.siap { color: var(--redup); }

/* ------------------------------------------- panel kirim */

.pengukur {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--mistar); border: 1px solid var(--mistar); border-radius: var(--r);
  overflow: hidden; margin-bottom: 16px;
}
.pengukur div { background: #fff; padding: 13px 14px; }
.pengukur .n { font-family: var(--angka); font-size: 22px; font-weight: 500; }
.pengukur .terkirim .n { color: var(--sah); }
.pengukur .gagal .n { color: var(--stempel); }
.pengukur .antre .n { color: var(--tunggu); }

.bar { height: 8px; background: #e3e6e1; border-radius: 20px; overflow: hidden; margin: 6px 0 4px; }
.bar span { display: block; height: 100%; width: 0; background: var(--aksen); transition: width .35s ease; }

.jurnal {
  font-family: var(--angka); font-size: 12px; background: #12161b; color: #c8d2dc;
  border-radius: var(--r); padding: 12px 14px; max-height: 260px; overflow-y: auto;
}
.jurnal div { padding: 1.5px 0; }
.jurnal .ok::before { content: "✓ "; color: #63c39a; }
.jurnal .no::before { content: "✕ "; color: #e08078; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media (max-width: 900px) {
  .kerangka { grid-template-columns: 1fr; }
  .rel { position: static; height: auto; }
  .alur { grid-template-columns: repeat(2, 1fr); display: grid; }
  main { padding: 20px 16px 48px; }
  .kisi-2, .kisi-3, .kisi-4 { grid-template-columns: 1fr; }
  .karbon-isi { grid-template-columns: 1fr; gap: 0; }
  .pengukur { grid-template-columns: repeat(2, 1fr); }
}

@media print {
  .rel, .kepala, .baris-aksi, .notif { display: none !important; }
  .kerangka { grid-template-columns: 1fr; }
  .karbon { border: none; box-shadow: none; }
}

/* ------------------------------------------- grafik tren sederhana */

.tren { display: flex; gap: 8px; align-items: flex-end; height: 190px; margin-top: 6px; }
.tren .batang {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; height: 100%; position: relative;
}
.tren .batang .isi {
  width: 100%; background: #ccd4e0; border-radius: 2px 2px 0 0;
  transition: height .4s ease;
}
.tren .batang.kini .isi { background: var(--aksen); }
.tren .batang .nilai {
  font-family: var(--angka); font-size: 10px; color: var(--redup);
  margin-bottom: 5px; white-space: nowrap;
}
.tren .batang .kaki {
  font-size: 10.5px; color: var(--redup); text-align: center;
  margin-top: 7px; line-height: 1.25;
}
.tren .batang.kini .kaki { color: var(--tinta); font-weight: 600; }

.delta { font-family: var(--ui); font-size: 12px; font-weight: 600; margin-left: 4px; }
.metrik .bantuan { margin-top: 5px; }
.metrik.tegas .bantuan { color: #b9c4d6; }


/* ------------------------------------------- panel hasil tes koneksi */

.hasil-tes {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--r);
  font-size: 13px; border-left: 3px solid var(--redup); background: #f4f5f3;
}
.hasil-tes.ok { background: #edf5f1; border-left-color: var(--sah); }
.hasil-tes.no { background: #fbeeed; border-left-color: var(--stempel); }
.hasil-tes .judul { font-weight: 600; margin-bottom: 6px; }
.hasil-tes .baris {
  font-family: var(--angka); font-size: 11.5px; color: var(--redup);
  padding: 1px 0; word-break: break-word;
}