/* Gaya visual ERP Pablo Burrito — token & aturan: docs/gaya-visual.md.
   Dilarang hardcode warna di template; selalu lewat variabel di sini. */

:root {
  --latar: #F4F5F3;
  --kartu: #FFFFFF;
  --teks: #1A2B4A;
  --teks-redup: #5A6B85;
  --hijau: #0F4A2E;
  --kuning: #F2C811;
  --merah: #C62828;
  --hijau-muda: #E3EFE8;
  --kuning-muda: #FBF3D5;
  --kuning-teks: #7A5C00;   /* teks di atas kuning-muda, kontras cukup */
  --merah-muda: #FBE4E4;
  --garis: #E2E5E1;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--latar);
  color: var(--teks);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;                 /* aturan: font isi minimal 16px */
  line-height: 1.5;
}

/* Layar staf: satu kolom sempit, acuan 360x640 */
.wadah { max-width: 430px; margin: 0 auto; min-height: 100vh;
  display: flex; flex-direction: column; }

/* ============================================================
   BACK OFFICE — kerangka ERP: sidebar navy + area konten terang.
   Dipakai admin/owner di komputer (acuan 1280x800). Berbeda tegas
   dari layar staf (HP) supaya tidak terasa "mobile dipaksakan".
   ============================================================ */
:root { --sidebar: #16233A; --sidebar-teks: #C7D2E3; --sidebar-redup: #8695AE; }

body.bo { display: flex; min-height: 100vh; background: var(--latar); }

/* --- Sidebar --- */
.sidebar { width: 244px; flex-shrink: 0; background: var(--sidebar);
  color: var(--sidebar-teks); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; }
.sb-brand { display: block; text-decoration: none; color: #fff; padding: 20px 20px 18px;
  font-weight: 800; letter-spacing: .05em; font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,.08); }
.sb-brand span { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 400;
  letter-spacing: .02em; color: var(--sidebar-redup); }
.sb-nav { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 2px; }
.sb-grup { font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--sidebar-redup); font-weight: 700; padding: 14px 12px 6px; }
.sb-grup:first-child { padding-top: 4px; }
.sb-nav a { display: block; padding: 10px 14px; border-radius: 9px; text-decoration: none;
  color: var(--sidebar-teks); font-size: 15px; font-weight: 600;
  border-left: 3px solid transparent; }
.sb-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.sb-nav a.on { background: rgba(76,175,125,.16); color: #fff; border-left-color: #4CAF7D; }
.sb-bawah { border-top: 1px solid rgba(255,255,255,.08); padding: 12px; }
.sb-bantuan { display: block; text-decoration: none; color: var(--sidebar-teks);
  font-size: 15px; font-weight: 600; padding: 10px 14px; border-radius: 9px; }
.sb-bantuan:hover, .sb-bantuan.on { background: rgba(255,255,255,.06); color: #fff; }
.sb-user { display: flex; align-items: center; gap: 10px; margin-top: 8px;
  padding: 10px 12px 4px; }
.sb-user-info { flex: 1; min-width: 0; line-height: 1.3; }
.sb-user-info b { display: block; color: #fff; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-user-info span { font-size: 12px; color: var(--sidebar-redup); }
.sb-user form { margin: 0; }
.sb-keluar { min-height: 40px; padding: 0 14px; border-radius: 8px;
  background: transparent; border: 1px solid rgba(255,255,255,.22);
  color: var(--sidebar-teks); font-size: 14px; font-weight: 600; cursor: pointer; }
.sb-keluar:hover { background: rgba(255,255,255,.1); color: #fff; }

/* --- Area konten --- */
.bo-konten { flex: 1; max-width: none; min-height: 100vh; display: block; }
.bo-konten > .isi { max-width: 1160px; margin: 0 auto; padding: 30px 34px; gap: 22px; }
.bo-konten h1 { font-size: 25px; }

/* Susunan dua kolom untuk halaman pengaturan */
.kolom-dua { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 960px) {
  .kolom-dua { grid-template-columns: 1.7fr 1fr; align-items: start; }
  .kolom-dua > .lengket { position: sticky; top: 30px; }
}

/* Kepala halaman (judul + subjudul + aksi) — pola konsisten ERP */
.kepala-halaman { display: flex; flex-wrap: wrap; gap: 6px 16px;
  align-items: center; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 1px solid var(--garis); margin-bottom: 2px; }
.kepala-halaman .btn { width: auto; padding: 0 18px; min-height: 44px; }
.kepala-halaman .redup { flex-basis: 100%; }

/* Breadcrumb (pengganti tombol "‹ Beranda" ala mobile) */
.remah { display: flex; align-items: center; gap: 8px; font-size: 14px;
  color: var(--teks-redup); margin-bottom: 4px; }
.remah a { color: var(--hijau); text-decoration: none; font-weight: 600; }
.remah a:hover { text-decoration: underline; }
.remah .pisah { color: var(--garis); }

/* Kartu di back office: bayangan tipis */
body.bo .kartu { box-shadow: 0 1px 2px rgba(16,32,20,.04); }

/* Tabel back office */
.tabel-bungkus { overflow-x: auto; border-radius: 12px; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th, table.data td { text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--garis); vertical-align: middle; }
table.data th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--teks-redup); font-weight: 700; white-space: nowrap;
  background: #F7F8F7; }
table.data tbody tr:hover { background: #FAFBFA; }
table.data tr:last-child td { border-bottom: none; }
table.data td.angka-kolom, table.data th.angka-kolom {
  text-align: right; font-variant-numeric: tabular-nums; }
table.data input { min-height: 42px; font-size: 15px; }

/* Sidebar jadi bar atas di layar sempit (tablet) */
@media (max-width: 900px) {
  body.bo { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static;
    flex-direction: row; align-items: center; flex-wrap: wrap; }
  .sb-brand { border-bottom: none; padding: 14px 16px; flex: 1; }
  .sb-nav { flex-direction: row; flex-wrap: wrap; overflow-x: auto;
    padding: 8px 12px; order: 3; flex-basis: 100%; }
  .sb-grup { display: none; }
  .sb-nav a { border-left: none; }
  .sb-nav a.on { border-left: none; }
  .sb-bawah { border-top: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
  .sb-user { margin: 0; padding: 0; }
  .sb-bantuan { padding: 8px 12px; }
  .bo-konten > .isi { padding: 22px 18px; }
}

.kepala { background: var(--hijau); color: #fff; padding: 16px; }
.kepala .brand { font-weight: 800; letter-spacing: .03em; font-size: 15px; }
.kepala .sub { font-size: 14px; opacity: .85; margin-top: 2px; }

.isi { padding: 16px; display: flex; flex-direction: column; gap: 14px; flex: 1; }

h1 { font-size: 21px; font-weight: 800; margin: 0; text-wrap: balance; }

.kartu { background: var(--kartu); border: 1px solid var(--garis);
  border-radius: 14px; padding: 16px; }
.kartu.sukses { background: var(--hijau-muda); border-color: #BCD8C8; color: var(--hijau); font-weight: 600; }
.kartu.perhatian { background: var(--kuning-muda); border-color: #E8D89A; }

.label { font-size: 13px; color: var(--teks-redup); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 700; display: block; margin-bottom: 6px; }
.redup { color: var(--teks-redup); }
.angka { font-variant-numeric: tabular-nums; }

/* Input: tinggi 56px, font besar, angka rata tengah (aturan Learning Curve) */
input[type="text"], input[type="password"] {
  width: 100%; min-height: 56px; border: 2px solid var(--garis);
  border-radius: 13px; font-size: 20px; padding: 0 14px; text-align: center;
  background: var(--kartu); color: var(--teks);
  font-variant-numeric: tabular-nums;
}
input:focus { border-color: var(--hijau); outline: none; }
input.salah { border-color: var(--merah); }

/* Tombol: target sentuh >= 52px, satu aksi utama per layar */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; border-radius: 13px; font-size: 17px;
  font-weight: 700; cursor: pointer; border: none; }
.btn-utama { background: var(--hijau); color: #fff; }
.btn-utama:disabled { background: #B9C2BC; }
.btn-garis { background: transparent; color: var(--hijau);
  border: 2px solid var(--hijau); }

.btn:focus-visible, input:focus-visible { outline: 3px solid var(--kuning); outline-offset: 2px; }

/* Pesan yang menuntun — menempel dekat sumber masalah */
.galat { color: var(--merah); background: var(--merah-muda);
  border-radius: 10px; padding: 12px; font-size: 16px; }
.info { background: var(--hijau-muda); border-radius: 10px; padding: 12px; font-size: 16px; }

form { display: flex; flex-direction: column; gap: 14px; margin: 0; }

/* Baris daftar — target sentuh >= 52px, satu baris satu bahan */
.baris { display: flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 10px 0; border-bottom: 1px solid var(--garis); }
.baris:last-child { border-bottom: none; }
.baris-teks { flex: 1; }
.baris-teks .redup { font-size: 15px; }

.judul-kartu { font-size: 17px; font-weight: 700; margin: 0 0 12px; }

/* Isian yang perlu rata kiri (teks bebas), beda dari kolom angka */
input.rata-kiri { text-align: left; font-size: 17px; }
.input-kecil { max-width: 110px; min-height: 52px; font-size: 18px; }

select { width: 100%; min-height: 52px; border: 2px solid var(--garis);
  border-radius: 13px; font-size: 17px; padding: 0 12px;
  background: var(--kartu); color: var(--teks); }
select:focus { border-color: var(--hijau); outline: none; }

.btn-baris { min-height: 48px; padding: 0 16px; border-radius: 11px;
  border: 2px solid var(--merah); background: transparent; color: var(--merah);
  font-size: 16px; font-weight: 700; cursor: pointer; }

.pilihan-centang { display: flex; align-items: center; gap: 12px;
  min-height: 52px; font-size: 17px; cursor: pointer; }
.pilihan-centang input { width: 26px; height: 26px; }

.tanda-perhatian { display: inline-block; background: var(--kuning-muda);
  border: 1px solid #E8D89A; border-radius: 999px; padding: 2px 10px;
  font-size: 14px; font-weight: 600; color: var(--teks); }

a.btn { text-decoration: none; }

/* Layar Hitung Stok */
.cek { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--garis); color: transparent; font-size: 16px; }
.cek.ok { background: var(--hijau-muda); color: var(--hijau); }

/* Target sentuh >= 48px: diketuk dengan jempol, sambil berdiri, tangan kotor.
   Sebelumnya tinggi efektifnya ~24px dan ketukan sering meleset ke baris lain. */
a.baris-isi { display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; min-height: 48px; min-width: 64px; padding: 0 14px;
  border-radius: 11px; border: 2px solid var(--hijau); color: var(--hijau);
  font-weight: 700; flex-shrink: 0; }

/* Kolom teks panjang (catatan). Font >= 16px wajib: di bawah itu peramban HP
   memperbesar layar sendiri saat kolom disentuh, dan staf kehilangan konteks. */
textarea { width: 100%; min-height: 96px; border: 2px solid var(--garis);
  border-radius: 13px; font-size: 17px; padding: 12px 14px; font-family: inherit;
  background: var(--kartu); color: var(--teks); box-sizing: border-box; }
textarea:focus { border-color: var(--hijau); outline: none; }

.stepper { display: flex; align-items: center; gap: 10px; }
.stepper input { flex: 1; }
.stepper-btn { width: 60px; height: 60px; border-radius: 13px; flex-shrink: 0;
  border: 2px solid var(--hijau); background: var(--kartu); color: var(--hijau);
  font-size: 28px; font-weight: 700; cursor: pointer; }

.btn-terkunci { background: #B9C2BC; color: #fff; }

/* Foto bukti: kamera langsung, kotak berkas asli disembunyikan */
.foto-kotak { border: 2px dashed var(--garis); border-radius: 13px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; align-items: center; }
.input-foto { position: absolute; width: 1px; height: 1px; opacity: 0;
  overflow: hidden; }
.foto-kotak label.btn { max-width: 320px; }
.foto-bukti, .contoh-kotak img { max-width: 100%; border-radius: 10px; }
.contoh-kotak { display: flex; flex-direction: column; gap: 10px;
  align-items: center; padding-top: 12px; }
.tautan-contoh { background: none; border: none; color: var(--hijau);
  font-size: 16px; font-weight: 600; min-height: 48px; display: flex;
  align-items: center; cursor: pointer; text-decoration: none; }
summary.tautan-contoh { list-style: none; }
summary.tautan-contoh::-webkit-details-marker { display: none; }

a.pilihan-baris { display: flex; align-items: center; min-height: 52px;
  border-bottom: 1px solid var(--garis); text-decoration: none;
  color: var(--teks); font-size: 17px; font-weight: 600; }
a.pilihan-baris:last-child { border-bottom: none; }

.tengah-layar { display: flex; flex-direction: column; gap: 16px;
  align-items: center; text-align: center; justify-content: center; flex: 1; }
.ikon-besar { font-size: 56px; }

/* Autofill anti-bahan-dobel di back office */
.saran { border: 1px solid var(--garis); border-radius: 10px;
  background: var(--kuning-muda); padding: 10px 12px; margin-top: 8px; }
.saran-judul { font-size: 13px; font-weight: 700; color: var(--teks-redup);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.saran-baris { padding: 4px 0; font-size: 16px; }

/* Rekap pagi */
.pindah-hari { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pindah-hari .btn { width: auto; padding: 0 16px; min-height: 44px; font-size: 15px; }
.tgl-besar { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
tr.baris-kurang td { background: var(--merah-muda); color: var(--merah); }

.rapat-atas { margin-top: 10px; }
.rapat-atas-kecil { margin-top: 6px; }
.renggang-atas { margin-top: 14px; }

/* Halaman Bantuan / panduan */
.panduan { background: var(--kartu); border: 1px solid var(--garis);
  border-radius: 14px; padding: 20px; line-height: 1.6; }
.panduan h1 { font-size: 22px; margin: 0 0 12px; }
.panduan h2 { font-size: 19px; margin: 22px 0 8px; }
.panduan h3 { font-size: 17px; margin: 18px 0 6px; }
.panduan p, .panduan li { font-size: 16px; }
.panduan ul, .panduan ol { padding-left: 22px; }
.panduan li { margin: 4px 0; }
.panduan table { width: 100%; border-collapse: collapse; margin: 12px 0;
  display: block; overflow-x: auto; }
.panduan th, .panduan td { border: 1px solid var(--garis); padding: 8px 10px;
  text-align: left; font-size: 15px; vertical-align: top; }
.panduan th { background: var(--latar); }
.panduan code { background: var(--latar); padding: 1px 5px; border-radius: 5px;
  font-size: 14px; }

.aksi-baris { display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.aksi-baris .tautan-contoh { min-height: 40px; }

/* Login & layar sederhana: pusatkan di layar besar, tetap enak di HP */
.wadah.tengah { justify-content: center; }
@media (min-width: 640px) {
  .wadah.tengah { padding: 24px; }
  .wadah.tengah .kepala { border-radius: 14px 14px 0 0; }
  .wadah.tengah .isi { background: var(--kartu); border: 1px solid var(--garis);
    border-top: none; border-radius: 0 0 14px 14px; flex: 0 0 auto; }
}


/* ===== Dashboard back office ===== */
.stat-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; }
.stat { background: var(--kartu); border: 1px solid var(--garis); border-radius: 14px;
  padding: 18px 20px; box-shadow: 0 1px 2px rgba(16,32,20,.04); }
.stat-angka { font-size: 34px; font-weight: 800; color: var(--teks);
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat-dari { font-size: 20px; font-weight: 600; color: var(--teks-redup); margin-left: 4px; }
.stat-label { font-size: 14px; color: var(--teks-redup); margin-top: 4px; }
.stat.kritis { border-color: #EFC2C2; background: var(--merah-muda); }
.stat.kritis .stat-angka { color: var(--merah); }
.stat.baik .stat-angka { color: var(--hijau); }

/* Pil status (chip) */
.pil { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
  padding: 4px 11px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.pil-ok { background: var(--hijau-muda); color: var(--hijau); }
.pil-tunggu { background: var(--kuning-muda); color: #8a6d00; border: 1px solid #E8D89A; }
.teks-kritis { color: var(--merah); }

/* ===== Kontrol back office ===== */
/* Form pemilih ringkas (pilih cabang di kepala halaman / dalam tabel) */
.pilih-inline { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
.pilih-inline .label { margin: 0; }
.pilih-inline select { width: auto; min-width: 190px; min-height: 44px; font-size: 15px; }

/* Baris info relasi antar-entitas (mis. template asal cabang) */
.baris-info { font-size: 14px; color: var(--teks-redup); }

/* Select ringkas di dalam tabel data (jadwal, cabang, pengguna) */
table.data select { min-height: 40px; font-size: 15px; }
table.data td .pilih-inline select { min-width: 160px; }

/* Tombol Simpan back office: lebar wajar & rata kiri (bukan selebar layar ala HP) */
.btn-simpan-lebar { width: auto; align-self: flex-start; padding: 0 34px;
  min-height: 46px; font-size: 16px; }

/* Ubah pengguna inline: panel kecil di dalam sel aksi */
.aksi-pengguna { align-items: flex-start; }
.ubah-baris > summary { min-height: 40px; }
.form-ubah { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--garis);
  border-radius: 10px; background: var(--latar); width: 250px; gap: 8px; }
.form-ubah .label { margin: 4px 0 0; }
.form-ubah select, .form-ubah input.rata-kiri { min-height: 40px; font-size: 15px; }
.form-ubah input.rata-kiri { min-height: 40px; }
.form-ubah .pilihan-centang { min-height: 36px; font-size: 15px; }
.form-ubah .pilihan-centang input { width: 20px; height: 20px; }
.form-ubah .btn { min-height: 42px; font-size: 15px; margin-top: 6px; }
.form-ubah-lebar { width: 300px; }

/* ===== Bantuan back office: mini-sidebar bagian + satu bagian tampil ===== */
.bantuan-desktop { display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: start; }
.bantuan-nav { position: sticky; top: 30px; display: flex; flex-direction: column; gap: 2px;
  background: var(--kartu); border: 1px solid var(--garis); border-radius: 12px; padding: 10px;
  max-height: calc(100vh - 60px); overflow-y: auto; }
.bantuan-nav a { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none;
  color: var(--teks); font-size: 14px; font-weight: 600; cursor: pointer;
  border-left: 3px solid transparent; }
.bantuan-nav a:hover { background: var(--latar); }
.bantuan-nav a.on { background: var(--hijau-muda); color: var(--hijau); border-left-color: var(--hijau); }
.bantuan-desktop .panduan { margin: 0; }
@media (max-width: 900px) {
  .bantuan-desktop { grid-template-columns: 1fr; }
  .bantuan-nav { position: static; flex-direction: row; flex-wrap: wrap; max-height: none; }
}

/* ============ Terima Barang — back office (docs/gaya-desktop.md) ============
   Warna hanya lewat variabel; dilarang hardcode (aturan 11). */

/* Lencana status kiriman. Statusnya dihitung dari angka, bukan disimpan —
   lihat service.status_kiriman(). */
.lencana { display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 700; white-space: nowrap; }
.lencana-cocok { background: var(--hijau-muda); color: var(--hijau); }
.lencana-menunggu, .lencana-dikerjakan { background: var(--kuning-muda); color: var(--kuning-teks); }
.lencana-selisih, .lencana-macam_tidak_cocok, .lencana-ada_komplain {
  background: var(--merah-muda); color: var(--merah); }
.lencana-dibatalkan { background: var(--garis); color: var(--teks-redup); }

/* Baris tabel yang menuntut ditindak — sorotan, bukan sekadar warna teks:
   admin harus bisa memindai satu kolom dan langsung tahu mana yang perlu. */
tr.baris-perhatian > td { background: var(--merah-muda); }
/* Belum diterima lewat batas BUKAN kesalahan — kiriman siang yang wajar belum
   dibuka tidak boleh mewarnai papan merah, karena merah jadi tumpul artinya. */
tr.baris-tunggu > td { background: var(--kuning-muda); }

/* Isian di dalam sel tabel: sempit, tidak merenggangkan kolom. */
.isian-angka { width: 96px; text-align: right; }
.isian-pendek { width: 120px; }
.isian-angka, .isian-pendek { min-height: 40px; font-size: 16px; padding: 6px 10px; }

/* Form desktop: beberapa isian sebaris (boleh >5 isian, aturan 8). */
.baris-form { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.baris-form > div { min-width: 200px; }
.baris-form .tumbuh { flex: 1; }

/* Aksi utama form desktop di kanan bawah — TIDAK selebar layar (aturan 3). */
.aksi-bawah { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.btn-kecil { width: auto; padding: 0 20px; min-height: 44px; }

/* Layar kosong menuntun, versi back office (aturan 9 tetap berlaku). */
.kosong { padding: 28px 8px; text-align: center; color: var(--teks-redup);
  line-height: 1.6; }