/* ====================================================================
   SPPG — GAYA TAMPILAN

   Tidak memakai huruf dari internet. Seluruhnya memakai huruf bawaan
   perangkat, sehingga aplikasi tetap tampil utuh saat sinyal buruk atau
   saat dibuka dari cache. Ini keputusan sadar untuk aplikasi lapangan.

   Warna diambil dari dunia programnya sendiri: hijau daun tua untuk
   kerangka, kuning jagung untuk penanda perhatian, merah bata untuk
   tindakan berisiko.
   ================================================================== */

:root {
  --daun-900: #16281f;
  --daun-700: #1f4433;
  --daun-500: #2f6b4f;
  --daun-100: #e4efe8;

  --jagung: #c98a12;
  --jagung-muda: #fdf3dd;
  --bata: #a33724;
  --bata-muda: #fbe9e5;

  --tinta: #1a1d1b;
  --abu-700: #4d5651;
  --abu-400: #8a938d;
  --abu-200: #d8ded9;
  --abu-50: #f4f6f4;
  --kertas: #ffffff;

  --sudut: 8px;
  --sisi-lebar: 236px;
  --bayang: 0 1px 2px rgba(22, 40, 31, .08), 0 4px 14px rgba(22, 40, 31, .06);

  --huruf: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --huruf-angka: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* WAJIB. Atribut hidden bekerja lewat aturan bawaan browser (display:none),
   yang kalah oleh display:grid pada .masuk dan .rangka di bawah. Tanpa
   baris ini, layar masuk tetap menutupi aplikasi meski login berhasil. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--huruf);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--abu-50);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }

:focus-visible {
  outline: 2px solid var(--daun-500);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ================= LAYAR MASUK ================= */

.masuk {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--daun-700) 0%, var(--daun-900) 70%);
}

.masuk__kartu {
  width: 100%;
  max-width: 380px;
  background: var(--kertas);
  border-radius: 14px;
  padding: 32px 28px 24px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}

.masuk__merek { text-align: center; margin-bottom: 26px; }

.masuk__tanda {
  display: inline-block;
  font-size: 26px;
  font-weight: 750;
  letter-spacing: .12em;
  color: var(--daun-700);
  border-bottom: 3px solid var(--jagung);
  padding-bottom: 3px;
}

.masuk__merek p {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--abu-700);
}

.masuk__galat {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--bata-muda);
  border: 1px solid #eccfc8;
  color: var(--bata);
  font-size: 13px;
  line-height: 1.4;
}

.masuk__catatan {
  margin: 18px 0 0;
  font-size: 12.5px;
  text-align: center;
  color: var(--abu-400);
}

/* ================= KERANGKA ================= */

.rangka {
  display: grid;
  grid-template-columns: var(--sisi-lebar) 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "sisi atas" "sisi halaman";
  height: 100%;
}

.atas {
  grid-area: atas;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  height: 56px;
  background: var(--kertas);
  border-bottom: 1px solid var(--abu-200);
  position: sticky;
  top: 0;
  z-index: 20;
}

.atas h1 { font-size: 17px; flex: 1; }

.atas__menu { display: none; flex-direction: column; gap: 4px; }
.atas__menu span {
  display: block; width: 18px; height: 2px;
  background: var(--tinta); border-radius: 2px;
}

/* ---- Penanda koneksi ---- */
.koneksi {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.koneksi::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
.koneksi--daring { background: var(--daun-100); color: var(--daun-700); }
.koneksi--daring::before { background: var(--daun-500); }
.koneksi--luring { background: var(--bata-muda); color: var(--bata); }
.koneksi--luring::before { background: var(--bata); }

/* ================= SISI ================= */

.sisi {
  grid-area: sisi;
  background: var(--daun-900);
  color: #cfdbd4;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sisi__merek {
  padding: 18px 20px;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: .1em;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.menu { flex: 1; padding: 12px 0; }

.menu__kelompok { margin-bottom: 14px; }
.menu__kelompok h3 {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #7d918a;
  padding: 6px 20px;
  font-weight: 650;
}

.menu__butir {
  display: block;
  padding: 9px 20px;
  color: #cfdbd4;
  text-decoration: none;
  font-size: 14px;
  border-left: 3px solid transparent;
}
.menu__butir:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.menu__butir--aktif {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border-left-color: var(--jagung);
  font-weight: 600;
}

.sisi__kaki {
  padding: 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.pengguna { margin-bottom: 10px; line-height: 1.35; }
.pengguna strong { display: block; color: #fff; font-size: 13.5px; }
.pengguna small { color: #8ba096; font-size: 11.5px; }

.tirai-sisi { display: none; }

/* ================= HALAMAN ================= */

.halaman {
  grid-area: halaman;
  padding: 20px;
  overflow-y: auto;
}

.bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.bar__saring { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.bar__saring input[type=search] { min-width: 230px; flex: 1; }

.cacah { margin: 0 0 10px; font-size: 12.5px; color: var(--abu-400); }

/* ================= TABEL ================= */

.tabel-gulir {
  overflow-x: auto;
  background: var(--kertas);
  border: 1px solid var(--abu-200);
  border-radius: var(--sudut);
  box-shadow: var(--bayang);
}

.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }

.tabel th {
  text-align: left;
  padding: 10px 14px;
  background: var(--abu-50);
  border-bottom: 1px solid var(--abu-200);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--abu-700);
  white-space: nowrap;
}

.tabel td { padding: 11px 14px; border-bottom: 1px solid var(--abu-200); vertical-align: top; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover { background: #fafbfa; }

.angka { font-family: var(--huruf-angka); font-size: 12.5px; }
.rata-kanan { text-align: right; }
.rata-tengah { text-align: center; }
.blok { display: block; }

.lencana {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
}
.lencana--hidup { background: var(--daun-100); color: var(--daun-700); }
.lencana--diam { background: var(--abu-200); color: var(--abu-700); }

/* ================= KENDALI ================= */

input, select, textarea {
  font: inherit;
  color: inherit;
  padding: 8px 10px;
  border: 1px solid var(--abu-200);
  border-radius: 6px;
  background: var(--kertas);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--daun-500);
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 107, 79, .14);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--abu-50); color: var(--abu-400);
}
textarea { resize: vertical; }

.tombol {
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 15px;
  border-radius: 6px;
  border: 1px solid var(--abu-200);
  background: var(--kertas);
  color: var(--tinta);
  cursor: pointer;
  white-space: nowrap;
}
.tombol:hover { background: var(--abu-50); }
.tombol:disabled { opacity: .55; cursor: not-allowed; }

.tombol--utama {
  background: var(--daun-700);
  border-color: var(--daun-700);
  color: #fff;
}
.tombol--utama:hover { background: var(--daun-500); }

.tombol--bahaya { background: var(--bata); border-color: var(--bata); color: #fff; }
.tombol--bahaya:hover { filter: brightness(1.1); }

.tombol--diam { background: transparent; }
.tombol--lebar { width: 100%; }

.ikon-tombol {
  background: none; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--abu-700);
  padding: 6px; border-radius: 6px;
}
.ikon-tombol:hover { background: var(--abu-50); }

.tautan {
  background: none; border: 0; padding: 0 8px 0 0;
  color: var(--daun-500); font: inherit; font-size: 13px;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.tautan:hover { color: var(--daun-700); }

/* ================= FORMULIR ================= */

.formulir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.grup { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.grup--penuh { grid-column: 1 / -1; }

.formulir__pemisah {
  grid-column: 1 / -1;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--abu-400);
  border-top: 1px solid var(--abu-200);
  padding-top: 12px;
  margin-top: 2px;
}

label { font-size: 13px; font-weight: 600; color: var(--abu-700); }
.bantuan { font-size: 12px; color: var(--abu-400); line-height: 1.35; }
.teks-lembut { color: var(--abu-700); }

/* ================= DIALOG ================= */

.tirai {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(22, 40, 31, .45);
  display: grid; place-items: center;
  padding: 16px;
  animation: masukLembut .15s ease;
}
@keyframes masukLembut { from { opacity: 0 } to { opacity: 1 } }

.dialog {
  background: var(--kertas);
  border-radius: 12px;
  width: 100%;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.dialog__kepala {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--abu-200);
}
.dialog__kepala h2 { font-size: 16px; }
.dialog__isi { padding: 20px; overflow-y: auto; }
.dialog__kaki {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 20px; border-top: 1px solid var(--abu-200);
  background: var(--abu-50);
  border-radius: 0 0 12px 12px;
}

/* ================= KEADAAN ================= */

.keadaan {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 52px 20px; text-align: center;
  background: var(--kertas);
  border: 1px solid var(--abu-200);
  border-radius: var(--sudut);
}
.keadaan h3 { font-size: 15px; }
.keadaan p { margin: 0; max-width: 42ch; font-size: 13.5px; }
.keadaan--galat { border-color: #eccfc8; background: var(--bata-muda); }
.keadaan--galat h3 { color: var(--bata); }

.pemuat {
  width: 26px; height: 26px;
  border: 2.5px solid var(--abu-200);
  border-top-color: var(--daun-500);
  border-radius: 50%;
  animation: putar .7s linear infinite;
}
@keyframes putar { to { transform: rotate(360deg) } }

/* ================= PEMBERITAHUAN ================= */

.kabar-wadah {
  position: fixed; z-index: 80;
  bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  width: min(440px, calc(100vw - 32px));
}

.kabar {
  padding: 11px 15px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: #fff;
  background: var(--tinta);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
  animation: naik .2s ease;
}
@keyframes naik { from { opacity: 0; transform: translateY(8px) } }
.kabar--pergi { opacity: 0; transition: opacity .25s; }
.kabar--berhasil { background: var(--daun-700); }
.kabar--galat { background: var(--bata); }
.kabar--peringatan { background: var(--jagung); color: #2a1d02; }

/* ================= PONSEL ================= */

@media (max-width: 820px) {
  .rangka {
    grid-template-columns: 1fr;
    grid-template-areas: "atas" "halaman";
  }
  .atas__menu { display: flex; }

  .sisi {
    position: fixed; inset: 0 auto 0 0;
    width: var(--sisi-lebar);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  .sisi--buka { transform: none; }
  .sisi--buka ~ .tirai-sisi,
  .sisi--buka + #tiraiSisi { display: block; }

  .tirai-sisi {
    position: fixed; inset: 0; z-index: 40;
    background: rgba(22, 40, 31, .4);
  }

  .halaman { padding: 14px; }
  .formulir { grid-template-columns: 1fr; }
  .bar__saring input[type=search] { min-width: 100%; }
  .bar__aksi, .bar__aksi .tombol { width: 100%; }
}

/* Layar sentuh: perbesar sasaran ketuk agar nyaman dipakai berdiri. */
@media (pointer: coarse) {
  .tombol { padding: 11px 16px; }
  .tautan { padding: 6px 10px 6px 0; }
  input, select, textarea { padding: 11px 12px; font-size: 16px; }
}