:root {
  color-scheme: light; /* v2 §0: selalu terang, tidak ada mode gelap */
  --merah-jnd: #9E1F21;
  --merah-jnd-10: #9E1F211A;
  --latar: #F4F8FC;
  --panel: #FFFFFF;
  --sidebar: #E6F0F9;
  --garis: #DCE6F0;
  --teks: #1D2733;
  --teks-2: #5B6B7C;
  --aksen: #2B7BC9;
  --aksen-tombol: #2877BC;
  --aksen-hover: #236AAE;
  --aksen-lembut: #E3EFFA;
  --aksen-lembut-teks: #1F5F9E;
  --hijau: #1E8E3E;
  --biru: #0A66C2;
  --kuning: #B26A00;
  --merah: #C62828;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--latar);
  color: var(--teks);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}

.layar-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 16px;
}

.kartu-login {
  background: var(--panel);
  border: 1px solid var(--garis);
  border-radius: 12px;
  padding: 32px;
  width: 100%;
  max-width: 360px;
}

.kartu-login h1 {
  font-size: 20px;
  margin: 0 0 4px;
}

.kartu-login p.sub {
  color: var(--teks-2);
  font-size: 13px;
  margin: 0 0 24px;
}

label {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--teks-2);
}

input[type="text"], input[type="password"], input[type="number"], input[type="tel"],
input[type="date"], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--garis);
  border-radius: 8px;
  background: var(--panel);
  color: var(--teks);
  font-size: 15px;
  font-family: inherit;
}

@media (min-width: 768px) {
  input[type="text"], input[type="password"], input[type="number"], input[type="tel"],
  input[type="date"], select, textarea {
    min-height: 32px;
  }
}

input[type="text"], input[type="password"] {
  margin-bottom: 16px;
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: middle;
}

.pesan-salah {
  color: var(--merah);
  font-size: 13px;
  margin: -8px 0 16px;
}

.tombol-utama {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 8px;
  background: var(--aksen-tombol);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.tombol-utama:hover { opacity: 0.92; }

.tombol-ada-perubahan {
  position: relative;
}

.tombol-ada-perubahan::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1.5px var(--aksen-tombol);
}

.tombol-utama:disabled {
  background: var(--teks-2);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ---------------------------------------------------------------------
   Kerangka 3 kolom: sidebar · daftar · rincian (lihat docs/desain-tampilan.md)
   --------------------------------------------------------------------- */

.ikon {
  width: 18px;
  height: 18px;
  flex: none;
}

.shell {
  display: grid;
  grid-template-columns: 220px 1fr 410px;
  min-height: 100vh;
}

.shell.rincian-tertutup {
  grid-template-columns: 220px 1fr 0px;
}

.shell.rincian-tertutup .rincian {
  display: none;
}

/* Sidebar ------------------------------------------------------------- */

.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--garis);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 20px;
}

.sidebar-atas {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
}

.sidebar-atas .logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.sidebar-atas .nama-app {
  font-size: 14px;
  font-weight: 600;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.menu-master {
  border-top: 1px solid var(--garis);
  padding-top: 12px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--teks);
  text-decoration: none;
  cursor: pointer;
}

a.menu-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.menu-item-aktif {
  background: var(--aksen-lembut);
  color: var(--aksen-lembut-teks);
  border-left: 3px solid var(--aksen);
  padding-left: 5px;
}

.menu-segera {
  color: var(--teks-2);
  cursor: default;
}

/* Cari global (R1) ------------------------------------------------------ */

.nav-cari {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--garis);
  border-radius: 6px;
  background: var(--panel);
  color: var(--teks-2);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.nav-cari .lbl { flex: 1; }

.nav-cari kbd {
  font-size: 11px;
  border: 1px solid var(--garis);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--teks-2);
}

.menu-angka {
  margin-left: auto;
  background: var(--aksen-lembut);
  color: var(--aksen-lembut-teks);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  min-width: 18px;
  text-align: center;
}

.menu-item { position: relative; }

.overlay-cari {
  position: fixed;
  inset: 0;
  background: rgba(16, 40, 70, 0.35);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  z-index: 100;
}

.overlay-cari:not([hidden]) {
  display: flex;
}

.kotak-cari {
  background: var(--panel);
  border-radius: 10px;
  width: 100%;
  max-width: 520px;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 24px rgba(16, 40, 70, 0.18);
  overflow: hidden;
}

.cari-input-baris {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--garis);
}

.cari-input-baris .ikon { color: var(--teks-2); }

#input-cari-global {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  background: transparent;
  color: var(--teks);
}

#tutup-cari {
  border: none;
  background: transparent;
  color: var(--teks-2);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}

.cari-hasil {
  overflow-y: auto;
  padding: 8px;
}

.cari-kosong {
  color: var(--teks-2);
  font-size: 13px;
  padding: 16px;
  margin: 0;
}

.cari-judul-kelompok {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--teks-2);
  margin: 10px 8px 4px;
}

.cari-baris {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--teks);
  font-size: 13px;
}

.cari-baris:hover { background: var(--aksen-lembut); }

.cari-sub { color: var(--teks-2); }

/* Kerangka halaman penuh (Beranda, R1) ---------------------------------- */

.shell-penuh {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

.main-penuh {
  padding: 24px 32px;
}

.judul-halaman {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.salam { font-size: 20px; margin: 0 0 4px; }

.muted { color: var(--teks-2); font-size: 13px; margin: 0 0 20px; }

.btn-utama-kecil {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--aksen-tombol);
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.btn-utama-kecil:hover { background: var(--aksen-hover); }

.kartu-tugas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.kartu-tugas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--garis);
  border-radius: 10px;
  padding: 16px;
  text-align: left;
  text-decoration: none;
  color: var(--teks);
  box-shadow: 0 1px 2px rgba(16, 40, 70, .06);
}

.kartu-tugas:hover { border-color: var(--aksen); }

.kartu-tugas-atas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}

.kartu-tugas-angka {
  font-size: 20px;
  font-weight: 700;
  color: var(--aksen);
}

.kartu-tugas-kalimat {
  color: var(--teks-2);
  font-size: 12px;
}

.kartu-tugas-daftar {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--teks-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (max-width: 480px) {
  .judul-halaman { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Halaman PO penuh (R4) -------------------------------------------------- */

.breadcrumb {
  font-size: 13px;
  color: var(--teks-2);
  margin: 0 0 12px;
}

.breadcrumb a { color: var(--teks-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--aksen); }
.breadcrumb span { color: var(--teks); font-weight: 500; }

.po-bar-atas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.bar-tahap {
  display: flex;
  gap: 6px;
}

.tahap-pil {
  height: 28px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--sidebar);
  color: var(--teks-2);
}

.tahap-pil.tahap-aktif { background: var(--aksen-lembut); color: var(--aksen-lembut-teks); font-weight: 600; }
.tahap-pil.tahap-selesai { color: var(--hijau); }

.po-tombol-tahap { margin: 0; }

.po-grid-utama {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}

.po-kepala-2kolom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  background: var(--panel);
  border: 1px solid var(--garis);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.po-kepala-2kolom .field-lebar-penuh { grid-column: 1 / -1; }

.tab-po-rincian {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--garis);
  margin-bottom: 16px;
}

.tab-po-rincian a {
  padding: 8px 4px;
  font-size: 13px;
  color: var(--teks-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-right: 16px;
}

.tab-po-rincian a.tab-aktif2 {
  color: var(--aksen);
  border-bottom-color: var(--aksen);
  font-weight: 600;
}

.ringkasan-resi {
  padding: 10px 0;
  border-bottom: 1px solid var(--garis);
  font-size: 13px;
}

.resi-po-judul {
  font-size: 13px;
  font-weight: 600;
  margin: 16px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kartu-resi-po {
  background: var(--panel);
  border: 1px solid var(--garis);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
}

.resi-po-header {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.resi-po-header .field-form { flex: 1; min-width: 140px; }

.chip-barang-wadah {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 14px;
}

.chip-barang {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--garis);
  font-size: 12px;
  cursor: pointer;
  color: var(--teks-2);
}

.chip-barang input { width: 12px; height: 12px; }

.chip-barang.chip-terpilih {
  background: var(--aksen-lembut);
  border-color: var(--aksen);
  color: var(--aksen-lembut-teks);
}

.daftar-box-po {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.baris-box-po {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px;
  background: var(--latar);
  border-radius: 8px;
}

.baris-box-po .field-form { margin-bottom: 0; }
.baris-box-po .field-form.field-kecil { width: 120px; }

.baris-box-po input {
  min-height: 34px;
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 6px;
}

.baris-box-po input:hover { border-color: var(--garis); }

.baris-box-po input:focus {
  border-color: var(--aksen);
  outline: none;
  background: var(--panel);
}

.box-po-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--teks-2);
}

/* Batch: susun keranjang + bagikan (R7) ----------------------------------- */

.keranjang-batch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.keranjang-judul {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.keranjang-kolom {
  background: var(--panel);
  border: 1px solid var(--garis);
  border-radius: 10px;
  padding: 12px;
  min-height: 80px;
}

.keranjang-baris {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--garis);
  font-size: 13px;
}

.keranjang-baris:last-child { border-bottom: none; }

.keranjang-baris input { margin-top: 3px; }

.keranjang-baris-nonaktif { color: var(--teks-2); opacity: .7; }

.keranjang-baris-isi strong { color: var(--aksen-lembut-teks); }

.layar-bagikan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.layar-bagikan .kotak-link { flex: 1; min-width: 220px; }

@media (max-width: 700px) {
  .keranjang-batch { grid-template-columns: 1fr; }
}

.po-aksi-bawah { margin-top: 16px; }

.po-form-hapus { margin-top: 8px; }

.log-panel {
  background: var(--panel);
  border: 1px solid var(--garis);
  border-radius: 10px;
  padding: 14px;
  font-size: 12px;
  position: sticky;
  top: 16px;
}

.log-panel-judul {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 10px;
}

.log-catatan-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.log-catatan-form textarea {
  border: 1px solid var(--garis);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: inherit;
  resize: vertical;
}

.log-tanggal {
  color: var(--teks-2);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .04em;
  margin: 14px 0 6px;
}

.log-baris {
  display: flex;
  gap: 8px;
  padding: 4px 0;
}

.log-waktu { color: var(--teks-2); flex: none; }

.log-isi { color: var(--teks); }

.log-oleh { color: var(--teks-2); }

/* Tabel Barang bisa diisi langsung (R5) ----------------------------------- */

.tabel-barang-isi {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 10px;
}

.tabel-barang-isi th {
  text-align: left;
  color: var(--teks-2);
  font-weight: 500;
  padding: 6px 4px;
  border-bottom: 1px solid var(--garis);
}

.tabel-barang-isi td {
  padding: 4px;
  border-bottom: 1px solid var(--garis);
  vertical-align: middle;
}

.tabel-barang-isi th.r, .tabel-barang-isi td.r { text-align: right; }

.tabel-barang-isi input,
.tabel-barang-isi select {
  min-height: 34px;
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 6px;
  margin: 0;
  border-radius: 6px;
}

.tabel-barang-isi input:hover,
.tabel-barang-isi select:hover {
  border-color: var(--garis);
}

.tabel-barang-isi input:focus,
.tabel-barang-isi select:focus {
  border-color: var(--aksen);
  outline: none;
  background: var(--panel);
}

.tabel-barang-isi .sel-jumlah input,
.tabel-barang-isi .sel-harga input { text-align: right; }

.tabel-barang-isi tfoot td {
  border-bottom: none;
  font-weight: 600;
  padding-top: 8px;
}

.sel-foto { width: 48px; }

.foto-kotak-tabel {
  width: 40px;
  height: 40px;
  border: 1px dashed var(--garis);
  border-radius: 6px;
  background: var(--sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.foto-kotak-tabel.kosong::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--kuning);
}

.foto-kotak-tabel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto-kotak-tabel .ikon { width: 18px; height: 18px; color: var(--teks-2); }

.hapus-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.tombol-hapus-baris-tabel {
  border: none;
  background: transparent;
  color: var(--teks-2);
  font-size: 16px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.tombol-hapus-baris-tabel:hover { background: var(--sidebar); color: var(--merah); }

.toast-urungkan {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: var(--teks);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 200;
}

.toast-urungkan button {
  background: transparent;
  border: none;
  color: #8ec2f0;
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .po-grid-utama { grid-template-columns: 1fr; }
  .log-panel { position: static; }
}

@media (max-width: 600px) {
  .po-kepala-2kolom { grid-template-columns: 1fr; }
}

/* Daftar Pembelian v2 (R3) -------------------------------------------- */

.sub-judul {
  font-size: 13px;
  font-weight: 400;
  color: var(--teks-2);
  margin-left: 10px;
}

.bar-tab {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--garis);
  margin-bottom: 12px;
  overflow-x: auto;
}

.bar-tab .tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--teks-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.bar-tab .tab-aktif2 {
  color: var(--aksen);
  border-bottom-color: var(--aksen);
  font-weight: 600;
}

.tab-angka {
  background: var(--sidebar);
  color: var(--teks-2);
  border-radius: 999px;
  font-size: 11px;
  padding: 1px 7px;
}

.bar-tab .tab-aktif2 .tab-angka {
  background: var(--aksen-lembut);
  color: var(--aksen-lembut-teks);
}

.cari-daftar {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--garis);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
  background: var(--panel);
  max-width: 420px;
}

.cari-daftar .ikon { color: var(--teks-2); flex: none; }

.cari-daftar input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 13px;
  background: transparent;
  color: var(--teks);
}

.tabel-po .r { text-align: right; }

.foto-mini {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.foto-mini img,
.foto-mini-kosong {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  object-fit: cover;
  flex: none;
}

.foto-mini-kosong {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sidebar);
  color: var(--teks-2);
}

.foto-mini-kosong .ikon { width: 14px; height: 14px; }

.foto-mini-lebih {
  font-size: 11px;
  color: var(--teks-2);
  margin-left: 2px;
}

.titik-tiba {
  display: inline-flex;
  gap: 3px;
}

.titik-tiba i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--garis);
  display: inline-block;
}

.titik-tiba i.on { background: var(--hijau); }

.pil {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.pil-draft { background: #E7EAEE; color: #5B6B7C; }
.pil-dibeli { background: var(--aksen-lembut); color: var(--aksen-lembut-teks); }
.pil-forward { background: #EDE9FE; color: #6E56CF; }
.pil-sebagian { background: #FEF3DB; color: #92650A; }
.pil-tiba { background: #DFF3E5; color: #1E8E3E; }

.daftar-po-hp { display: none; }

@media (max-width: 767px) {
  .tabel-po { display: none; }

  .daftar-po-hp {
    display: flex;
    flex-direction: column;
  }

  .baris-po-hp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--garis);
    cursor: pointer;
  }

  .baris-po-hp-kiri { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

  .baris-po-hp-nomor { font-size: 13px; font-weight: 600; }

  .baris-po-hp-sub {
    font-size: 12px;
    color: var(--teks-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .baris-po-hp-kanan {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: none;
  }

  .baris-po-hp-total { font-size: 12px; color: var(--teks-2); }
}

@media (max-width: 1023px) {
  .shell-penuh { grid-template-columns: 64px 1fr; }
}

@media (max-width: 767px) {
  .shell-penuh { display: block; }
  .shell-penuh .sidebar { display: none; }
  .main-penuh { padding: 16px; padding-bottom: 72px; }
}

.sidebar-bawah {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  font-size: 13px;
  border-top: 1px solid var(--garis);
}

.sidebar-bawah .pengguna {
  color: var(--teks);
  font-weight: 500;
}

.sidebar-bawah a {
  color: var(--teks-2);
  text-decoration: none;
}

/* Daftar (kolom tengah) ------------------------------------------------ */

.daftar {
  background: var(--panel);
  border-right: 1px solid var(--garis);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.daftar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--garis);
}

.daftar-header h1 {
  font-size: 20px;
  margin: 0;
}

.daftar-aksi .tombol-utama {
  width: auto;
  height: 32px;
  padding: 0 16px;
  font-size: 13px;
}

.tombol-utama-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.daftar-isi {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  font-size: 13px;
  color: var(--teks-2);
}

/* Rincian (kolom kanan) ------------------------------------------------ */

.rincian {
  background: var(--panel);
  padding: 16px 20px;
  position: relative;
  min-width: 0;
}

.tutup-rincian {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--teks-2);
  font-size: 18px;
  cursor: pointer;
  border-radius: 6px;
}

.tutup-rincian:hover {
  background: rgba(0, 0, 0, 0.06);
}

.rincian-kosong {
  color: var(--teks-2);
  font-size: 13px;
  margin-top: 24px;
}

/* Bar menu bawah untuk HP ---------------------------------------------- */

.bottom-nav {
  display: none;
}

/* Tablet (768-1023px): sidebar jadi ikon saja --------------------------- */

@media (max-width: 1023px) {
  .shell {
    grid-template-columns: 64px 1fr 380px;
  }

  .sidebar-atas .nama-app,
  .menu-item span:last-child,
  .sidebar-bawah .pengguna {
    display: none;
  }

  .sidebar {
    align-items: center;
  }

  .menu-item {
    justify-content: center;
  }
}

/* HP (<768px): menu jadi bar bawah, rincian jadi halaman penuh --------- */

@media (max-width: 767px) {
  .shell {
    display: block;
  }

  .sidebar {
    display: none;
  }

  .daftar {
    border-right: none;
    min-height: calc(100vh - 56px);
  }

  .rincian {
    position: fixed;
    inset: 0;
    z-index: 20;
    overflow-y: auto;
  }

  .shell:not(.rincian-terbuka) .rincian {
    display: none;
  }

  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--sidebar);
    border-top: 1px solid var(--garis);
    z-index: 10;
  }

  .bottom-nav a,
  .bottom-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 11px;
    color: var(--teks-2);
    text-decoration: none;
    min-height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
  }

  .bottom-nav a.aktif,
  .bottom-nav button.aktif {
    color: var(--aksen);
  }

  .lembar-lainnya {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 64px;
    background: var(--panel);
    border: 1px solid var(--garis);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(16, 40, 70, 0.12);
    display: none;
    flex-direction: column;
    z-index: 15;
    overflow: hidden;
  }

  .lembar-lainnya:not([hidden]) {
    display: flex;
  }

  .lembar-lainnya a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--teks);
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px solid var(--garis);
  }

  .lembar-lainnya a:last-child { border-bottom: none; }
}

/* ---------------------------------------------------------------------
   Master data: tabel daftar, form rincian, pesan, tab Pengaturan
   --------------------------------------------------------------------- */

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

.tabel-daftar th {
  text-align: left;
  color: var(--teks-2);
  font-weight: 500;
  padding: 8px 4px;
  border-bottom: 1px solid var(--garis);
}

.tabel-daftar td {
  padding: 9px 4px;
  border-bottom: 1px solid var(--garis);
  height: 36px;
}

.baris-klik {
  cursor: pointer;
}

.baris-klik:hover {
  background: rgba(0, 0, 0, 0.04);
}

.daftar-kosong {
  color: var(--teks-2);
}

.rincian-header h2 {
  font-size: 16px;
  margin: 0 0 16px;
}

.field-form {
  margin-bottom: 16px;
}

.field-form label {
  display: block;
  font-size: 13px;
  color: var(--teks-2);
  margin-bottom: 6px;
}

.field-checkbox {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: var(--teks);
}

.rincian-aksi {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.rincian-aksi .tombol-utama {
  width: auto;
  height: 36px;
  padding: 0 16px;
}

.tombol-bahaya {
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--garis);
  border-radius: 8px;
  background: var(--panel);
  color: var(--merah);
  font-size: 15px;
  cursor: pointer;
}

.tombol-bahaya:hover {
  background: rgba(198, 40, 40, 0.08);
}

.pesan-berhasil {
  color: var(--hijau);
  font-size: 13px;
}

.pesan-kuning {
  color: var(--kuning);
  font-size: 13px;
  margin: -8px 0 16px;
}

.tab-pengaturan {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--garis);
}

.tab-pengaturan a {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--teks-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.tab-pengaturan a.tab-aktif {
  color: var(--aksen);
  border-bottom-color: var(--aksen);
}

.catatan-pengaturan {
  color: var(--teks-2);
  font-size: 13px;
  margin-bottom: 16px;
}

.form-pengaturan {
  max-width: 360px;
}

.form-pengaturan .tombol-utama {
  width: auto;
  height: 36px;
  padding: 0 16px;
}

/* ---------------------------------------------------------------------
   PO + Barang (T5)
   --------------------------------------------------------------------- */

.subjudul {
  font-size: 14px;
  margin: 20px 0 10px;
  padding-top: 12px;
  border-top: 1px solid var(--garis);
}

.subjudul:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.catatan-total {
  font-size: 15px;
  font-weight: 600;
  margin: -8px 0 16px;
}

.tombol-sekunder {
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--garis);
  border-radius: 8px;
  background: var(--panel);
  color: var(--teks);
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 16px;
}

.tombol-sekunder:hover {
  background: rgba(0, 0, 0, 0.04);
}

.barang-baris {
  border: 1px solid var(--garis);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.barang-baris-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 16px;
}

@media (max-width: 480px) {
  .barang-baris-grid {
    grid-template-columns: 1fr;
  }
}

.barang-baris .field-form {
  margin-bottom: 10px;
}

.field-kecil input {
  max-width: 100px;
}

.galeri-foto-kecil {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.galeri-foto-kecil img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--garis);
}

.field-hapus-baris {
  color: var(--merah);
  font-size: 13px;
}

template {
  display: none;
}

#templat-baris-barang,
#templat-baris-box {
  display: none;
}

/* ---------------------------------------------------------------------
   Resi + box (T6)
   --------------------------------------------------------------------- */

.label-ukuran {
  font-size: 12px;
  color: var(--teks-2);
  margin: 4px 0;
}

.ukuran-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 8px;
  margin-bottom: 10px;
}

.catatan-volume {
  font-size: 13px;
  color: var(--teks-2);
  margin: 0 0 10px;
}

/* ---------------------------------------------------------------------
   Batch (T7)
   --------------------------------------------------------------------- */

.status-batch {
  font-size: 13px;
  color: var(--teks-2);
  margin: -8px 0 16px;
}

.pesan-kuning-inline {
  color: var(--kuning);
}

.pesan-berhasil-inline {
  color: var(--hijau);
}

.pesan-salah-inline {
  color: var(--merah);
}

.daftar-checklist-resi {
  margin-bottom: 16px;
}

.baris-checklist {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--garis);
  font-size: 13px;
}

.baris-checklist input {
  margin-top: 2px;
}

.baris-checklist-nonaktif {
  color: var(--teks-2);
}

.baris-checklist-nonaktif strong {
  color: var(--teks-2);
}

/* ---------------------------------------------------------------------
   Cetak batch & link forwarder (T8)
   --------------------------------------------------------------------- */

.catatan-link {
  font-size: 13px;
  color: var(--teks-2);
  margin-bottom: 4px;
}

.kotak-link {
  width: 100%;
  margin-bottom: 10px;
  font-size: 13px;
}

.halaman-cetak {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
  background: var(--panel);
  color: var(--teks);
  min-height: 100vh;
}

.aksi-cetak {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.aksi-cetak .tombol-utama {
  width: auto;
  height: 36px;
  padding: 0 16px;
}

.catatan-publik {
  color: var(--teks-2);
  font-size: 13px;
  margin: 0;
}

.kop-cetak {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 2px solid var(--merah-jnd);
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.logo-cetak {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.kop-cetak h1 {
  font-size: 16px;
  margin: 0 0 4px;
}

.kop-cetak p {
  font-size: 13px;
  color: var(--teks-2);
  margin: 0;
}

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

.tabel-cetak th, .tabel-cetak td {
  border: 1px solid var(--garis);
  padding: 6px 8px;
  text-align: left;
}

.foto-cetak {
  width: 25mm;
  height: 25mm;
  object-fit: cover;
}

@media print {
  .no-print, .sidebar, .bottom-nav {
    display: none !important;
  }

  @page {
    size: A4;
    margin: 15mm;
  }

  body, .halaman-cetak {
    background: #fff;
    color: #000;
  }

  .tabel-cetak th, .tabel-cetak td {
    border-color: #000;
  }
}

/* ---------------------------------------------------------------------
   Tiba di Medan (T9)
   --------------------------------------------------------------------- */

.kotak-cari-resi {
  height: 48px;
  font-size: 17px;
  margin-bottom: 16px;
  width: 100%;
  max-width: 480px;
}

.kartu-tiba-terpilih:empty { display: none; }

.kartu-resi-tiba {
  background: var(--panel);
  border: 1px solid var(--garis);
  border-radius: 10px;
  padding: 16px;
  margin-top: 16px;
  max-width: 560px;
}

.kartu-resi-tiba h2 { margin: 0 0 4px; font-size: 18px; }

.toast-urungkan-inline {
  background: var(--aksen-lembut);
  color: var(--aksen-lembut-teks);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  margin: 10px 0;
}

.form-urungkan-sebaris { display: inline; }

.form-urungkan-sebaris button {
  border: none;
  background: transparent;
  color: var(--aksen);
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
  padding: 0;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 2px;
}

.status-belum, .status-box-belum { background: var(--teks-2); }
.status-tiba, .status-box-tiba { background: var(--hijau); }
.status-tiba_sebagian { background: var(--kuning); }
.status-bermasalah, .status-box-hilang, .status-box-rusak { background: var(--merah); }

.daftar-resi-tiba {
  display: flex;
  flex-direction: column;
}

.baris-resi-tiba {
  padding: 12px 8px;
  border-bottom: 1px solid var(--garis);
}

.baris-resi-tiba strong {
  display: block;
  font-size: 15px;
}

.info-resi-tiba {
  font-size: 12px;
  color: var(--teks-2);
}

.box-baris-tiba {
  border: 1px solid var(--garis);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.box-baris-tiba-judul {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  margin-bottom: 4px;
}

.catatan-status-box {
  font-size: 12px;
  color: var(--teks-2);
  margin: 0 0 10px;
}

.tombol-tiba-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.tombol-tiba-besar {
  min-height: 48px;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.tombol-tiba-hijau { background: var(--hijau); }
.tombol-tiba-kuning { background: var(--kuning); }
.tombol-tiba-merah { background: var(--merah); }
.tombol-tiba-abu { background: var(--teks-2); }

.tombol-tiba-besar:hover {
  opacity: 0.9;
}