/* TBS Production System — gaya UI MVP.
   Tanpa CDN, tanpa framework: satu berkas, ramah HP (layout satu kolom,
   tabel bisa digeser mendatar), tetap terbaca saat dicetak. */

:root {
  --bg: #f5f6f2;
  --kartu: #ffffff;
  --teks: #1f2a24;
  --redup: #61705f;
  --garis: #d9ded6;
  --hijau: #2f6b45;
  --hijau-lembut: #e8f1ea;
  --merah: #a3322c;
  --merah-lembut: #fbeae8;
  --kuning-lembut: #fdf3dd;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  padding: 0 0 3rem;
  background: var(--bg);
  color: var(--teks);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.topbar {
  background: var(--hijau);
  color: #fff;
  padding: 0.85rem 1rem 0.75rem;
}
.topbar .merek { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.01em; }
.topbar .sub { font-size: 0.8rem; opacity: 0.9; }

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  background: #fff;
  border-bottom: 1px solid var(--garis);
  padding: 0.4rem 0.6rem;
  position: sticky;
  top: 0;
  z-index: 5;
}
.menu a {
  flex: 1 1 auto;
  text-align: center;
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  color: var(--teks);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}
.menu a.aktif { background: var(--hijau-lembut); color: var(--hijau); font-weight: 700; }

main { padding: 0.9rem 0.8rem 0; max-width: 1000px; margin: 0 auto; }

h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }

h3 { font-size: 0.95rem; margin: 1rem 0 0.4rem; }

.panel {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: 0.75rem;
  padding: 0.9rem;
  margin-bottom: 1rem;
}
.panel-hasil { border-left: 5px solid var(--hijau); }

.kartu-jaring {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  margin-bottom: 1rem;
}
.kartu {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: 0.75rem;
  padding: 0.75rem 0.9rem;
}
.kartu .label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--redup); }
.kartu .angka { font-size: 1.35rem; font-weight: 700; margin-top: 0.15rem; }
.kartu .catatan { font-size: 0.8rem; color: var(--redup); margin-top: 0.2rem; }

.dua-kolom { display: grid; grid-template-columns: 1fr; gap: 1rem; }

.kv { display: grid; grid-template-columns: 1fr; gap: 0.35rem; margin-bottom: 0.7rem; }
.kv > div { display: flex; justify-content: space-between; gap: 0.75rem; border-bottom: 1px dotted var(--garis); padding-bottom: 0.25rem; }
.kv span { color: var(--redup); font-size: 0.9rem; }

.tabel-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 900px) {
  table { min-width: 640px; }
  input, select, textarea, button { min-height: 44px; font-size: 16px; }
  .formulir label, .baris > label { flex: 1 1 100%; }
}

.tabel-bungkus td, .tabel-bungkus th { white-space: nowrap; }

@media print {
  .tabel-bungkus { overflow: visible; }
  table { min-width: 0; font-size: 10pt; }
}

table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
th, td { border-bottom: 1px solid var(--garis); padding: 0.4rem 0.5rem; text-align: left; vertical-align: top; }
th { background: #f0f2ee; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--redup); white-space: nowrap; }
td.kanan, th.kanan { text-align: right; white-space: nowrap; }
/* Kolom terakhir diberi jarak dari tepi kartu + boleh membungkus di tengah kata panjang. */
th:last-child, td:last-child { padding-right: 0.85rem; }
td:last-child { overflow-wrap: anywhere; }

.formulir { display: grid; gap: 0.7rem; }
.formulir label { display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--redup); font-weight: 600; }
.formulir .baris { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
/* Formulir sebaris: flex + wrap supaya input dan tombol TIDAK pernah bertumpuk di layar sempit. */
.formulir.form-inline { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end; }
.formulir.form-inline label { flex: 1 1 11rem; min-width: 7.5rem; }
.formulir.form-inline button { flex: 0 0 auto; max-width: 100%; }
input, select, button { font: inherit; min-width: 0; }
input[type="text"], input[type="date"], select {
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--garis);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--teks);
  font-weight: 400;
}
input:focus, select:focus { outline: 2px solid var(--hijau); outline-offset: 1px; }

button {
  padding: 0.6rem 0.9rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--hijau);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;          /* teks tombol tidak membungkus jadi dua baris */
  max-width: 100%;
}
button.sekunder { background: #7a8b78; }
button:hover { filter: brightness(1.07); }

.pesan { border-radius: 0.6rem; padding: 0.6rem 0.8rem; margin-bottom: 0.9rem; font-size: 0.9rem; }
.pesan-ok { background: var(--hijau-lembut); border: 1px solid #bcd9c4; color: #1d4a2e; }
.pesan-error, .peringatan {
  background: var(--merah-lembut);
  border: 1px solid #e7c3bf;
  color: var(--merah);
  border-radius: 0.6rem;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.9rem;
  font-size: 0.9rem;
}
.catatan { font-size: 0.82rem; color: var(--redup); margin: 0.35rem 0; }
.aman { color: var(--hijau); }
.tidak-aman { color: var(--merah); }

.menu-daftar { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; }
.menu-daftar li { margin-bottom: 0.35rem; }

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

code { font-size: 0.85em; background: #eef0ec; padding: 0.1rem 0.25rem; border-radius: 0.25rem; }

.kaki { max-width: 1000px; margin: 0 auto; padding: 1rem 0.8rem 0; font-size: 0.78rem; color: var(--redup); }

/* Layar sangat sempit (HP): baris dua kolom jadi satu kolom agar tidak berdesakan. */
@media (max-width: 460px) {
  .formulir .baris { grid-template-columns: 1fr; }
}

/* Layar lebih lebar: dua kolom untuk kartu ringkasan & tabel kunci-nilai. */
@media (min-width: 720px) {
  .kartu-jaring { grid-template-columns: repeat(2, 1fr); }
  .dua-kolom { grid-template-columns: 1fr 1fr; }
  .kv { grid-template-columns: repeat(2, 1fr); gap: 0.35rem 1.2rem; }
  .formulir.form-inline label { flex: 1 1 14rem; }
}

@media print {
  .menu, .formulir, button { display: none; }
  .panel, .kartu { border-color: #999; }
}

/* Fase 4B-1 — halaman masuk/pengaturan awal + indikator pengguna (tambahan di
   bagian bawah berkas sesuai brief; aturan di atas tidak diubah). */
.halaman-masuk {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0;
}
.kotak-masuk {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: 0.75rem;
  padding: 1.25rem;
  width: 100%;
  max-width: 22rem;
  display: grid;
  gap: 0.35rem;
}
.kotak-masuk h1 { font-size: 1.15rem; margin: 0 0 0.15rem; }
.kotak-masuk .sub { font-size: 0.85rem; color: var(--redup); margin: 0 0 0.5rem; }
.kotak-masuk label { font-size: 0.85rem; color: var(--redup); margin-top: 0.3rem; }
.kotak-masuk input {
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--garis);
  border-radius: 0.5rem;
  font-size: 1rem;
  background: #fff;
  color: var(--teks);
}
.kotak-masuk input:focus { outline: 2px solid var(--hijau); border-color: var(--hijau); }
.galat {
  background: var(--merah-lembut);
  color: var(--merah);
  border: 1px solid var(--merah);
  border-radius: 0.5rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
  margin: 0 0 0.25rem;
}
.tombol-besar {
  margin-top: 0.7rem;
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--hijau);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.tombol-besar:active { filter: brightness(0.92); }

.pengguna-info {
  margin-top: 0.3rem;
  font-size: 0.8rem;
  opacity: 0.92;
}

.form-logout { margin-left: auto; }
.tombol-logout {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--garis);
  border-radius: 0.5rem;
  background: #fff;
  color: var(--teks);
  font-size: 0.88rem;
  cursor: pointer;
  white-space: nowrap;
}
.tombol-logout:hover { border-color: var(--merah); color: var(--merah); }

/* ==== Fase 3 — cetak halaman /laporan (kartu t_1b971070) ==== */
@media print {
  .topbar, .menu, .form-logout, .aksi-cetak, .kaki, .tombol, .pesan { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  main { max-width: none !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; }
  .tabel-gulir { overflow: visible !important; max-height: none !important; }
  table { width: 100% !important; border-collapse: collapse !important; font-size: 9pt !important; }
  th, td { border: 1px solid #888 !important; padding: 2pt 4pt !important; }
  thead { display: table-header-group; }
  tr, .kartu { break-inside: avoid; }
}

/* ---------------------------------------------------------------------------
   Tata letak sidebar: menu vertikal di kiri (layar lebar), bisa dilipat di HP.
   Ditambahkan setelah permintaan Sanif 26 Sep 2026. Aturan lama tidak diubah —
   blok ini menimpa yang perlu saja (urutan berkas menentukan).
--------------------------------------------------------------------------- */
.tata-letak {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);   /* 15.5rem ≈ 248 px */
  gap: 1.1rem;
  align-items: start;
  padding: 0.9rem 0.9rem 0;
}
.tata-letak > main { padding: 0; max-width: none; margin: 0; min-width: 0; }

.menu {
  position: sticky;
  top: 0.9rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.12rem;
  width: 100%;
  background: var(--kartu, #fff);
  border: 1px solid var(--garis);
  border-radius: 0.75rem;
  padding: 0.65rem;
}
.menu-kepala {
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--redup); padding: 0.15rem 0.55rem 0.45rem;
}
.menu a {
  flex: 0 0 auto;
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  font-weight: 600;
}
.menu a:hover { background: #f1f4ef; }
.menu a.aktif { background: var(--hijau-lembut); color: #1d4a2e; font-weight: 700; }
.form-logout { margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid var(--garis); }
.tombol-logout { width: 100%; }
.nav-sakelar, .nav-tombol { display: none; }

/* HP & tablet kecil: satu kolom, menu tersembunyi di balik tombol ☰ */
@media (max-width: 900px) {
  .tata-letak { grid-template-columns: 1fr; padding: 0.75rem 0.7rem 0; gap: 0.6rem; }
  .nav-tombol {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 0.8rem; border: 1px solid var(--garis); border-radius: 0.55rem;
    background: var(--kartu, #fff); font-weight: 700; cursor: pointer;
  }
  .menu { position: static; display: none; }
  .nav-sakelar:checked ~ .menu { display: flex; }
}

/* Cetak: tidak ada menu, tidak ada tombol lipat. */
@media print {
  .menu, .nav-tombol, .nav-sakelar { display: none !important; }
  .tata-letak { display: block; padding: 0; }
}

/* --- Kenyamanan layar kecil (brief UI-HP-POLISH) --- */
.tabel-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 900px) {
  table { min-width: 640px; }
  input, select, textarea, button { min-height: 44px; font-size: 16px; }
  .formulir label, .baris > label { flex: 1 1 100%; }
}
.tabel-bungkus td, .tabel-bungkus th { white-space: nowrap; }
@media print {
  .tabel-bungkus { overflow: visible; }
  table { min-width: 0; font-size: 10pt; }
}