:root {
  --scm-accent: #4f46e5;
  /* Poles 2026-07-23 (permintaan owner): sidebar diramping 15.5rem → 14rem +
     item/ikon/header dipadatkan, meniru kepadatan sidebar legacy. Lebar 14rem
     = batas aman label terpanjang ("Monitoring Transaksi (Beta)") tanpa wrap. */
  --scm-sidebar-w: 14rem;
}

html, body.scm-body {
  height: 100%;
}
body.scm-body {
  background: #f1f5f9;
  color: #1e293b;
  overflow: hidden; /* halaman tak ikut scroll; sidebar & konten scroll sendiri */
}

/* Tinggi tetap = viewport, jadi <nav> sidebar & <main> yang overflow-y-auto
   masing-masing scroll SENDIRI (perbaikan: dulu min-h-screen bikin body
   tumbuh & seluruh isi ikut ter-scroll). dvh mengikuti URL-bar HP. */
#app.scm-app {
  height: 100vh;
  height: 100dvh;
}

/* Picker tenant-outlet: ringkas di layar kecil, melebar di layar besar. */
.scm-ctx-select {
  /* Mobile: kedua picker di baris sendiri (flex-1) → biar bagi rata, jangan
     dibatasi lebar; min-width:0 supaya bisa menyusut & truncate. */
  min-width: 0;
}
@media (min-width: 640px) {
  .scm-ctx-select { max-width: 14rem; }
}
.scm-ctx-select optgroup {
  font-weight: 600;
  color: #4f46e5;
}

.panel-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}

.scm-sidebar {
  width: var(--scm-sidebar-w);
  background: #fff;
  border-right: 1px solid #e2e8f0;
}

.scm-nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #4b5563;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
  margin-bottom: 1px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  text-decoration: none;
}

.scm-nav-link:hover {
  background: #f3f4f6;
  color: #1f2937;
}

.scm-nav-link.active {
  background: color-mix(in srgb, var(--scm-accent) 14%, white);
  color: color-mix(in srgb, var(--scm-accent) 72%, #1e1b4b);
  font-weight: 600;
}

.scm-nav-link .nav-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.3rem;
  font-size: 0.65rem;
}

.scm-nav-link.active .nav-icon {
  background: color-mix(in srgb, var(--scm-accent) 28%, white);
  color: var(--scm-accent);
}

/* Titik berwarna: menandai menu yang datanya jadi sumber di Monitoring Transaksi
   Sumber, diwarnai per ARAH transaksi (hijau=pemasukan, merah=pengeluaran,
   kuning=mutasi). Didorong ke ujung kanan baris menu (margin-left:auto). */
.scm-nav-link .scm-nav-dot {
  margin-left: auto;
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
}
.scm-nav-dot-pemasukan {
  background: #22c55e; /* green-500 */
  box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent);
}
.scm-nav-dot-pengeluaran {
  background: #ef4444; /* red-500 */
  box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 22%, transparent);
}
.scm-nav-dot-mutasi {
  background: #eab308; /* yellow-500 */
  box-shadow: 0 0 0 3px color-mix(in srgb, #eab308 22%, transparent);
}

/* Section akordeon: header bisa diklik buka/tutup, chevron menandai status. */
.scm-nav-group {
  margin-top: 0.25rem;
}

/* Logo header sidebar ringkas (dulu w-10/40px lewat kelas tailwind). */
.scm-brand-logo {
  width: 2rem;
  height: 2rem;
}

.scm-nav-section-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.3rem 0.65rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  border-radius: 0.5rem;
  transition: background-color 150ms, color 150ms;
}

.scm-nav-section-btn:hover {
  background: #f3f4f6;
  color: #64748b;
}

.scm-nav-section-btn.is-open {
  color: #64748b;
}

.scm-nav-section-btn i {
  font-size: 0.6rem;
  transition: transform 150ms;
}

.scm-nav-items {
  display: flex;
  flex-direction: column;
  padding: 0.1rem 0 0.15rem;
}

.scm-nav-items.hidden {
  display: none;
}

/* Tombol "Pasang App" menempel ke ujung kanan baris judul (mobile & desktop).
   Pakai margin-left:auto (kelas ml-auto tak ada di tailwind precompiled). */
#pwa-install-btn {
  margin-left: auto;
}

/* Jebakan urutan CSS yang sama dgn .btn-secondary.hidden di bawah: md:hidden
   (tailwind, dimuat duluan) kalah dari display:inline-flex .btn-secondary,
   jadi hamburger ikut tampil di desktop. Paksa sembunyi di ≥768px. */
@media (min-width: 768px) {
  #btn-menu {
    display: none;
  }
}

/* .btn-secondary set display:inline-flex (di app.css, dimuat SETELAH tailwind),
   jadi kelas .hidden bawaan tailwind kalah urutan & tak menyembunyikan. Selector
   gabungan ini menang lewat specificity — dipakai tombol "Pasang App" (PWA) yg
   default tersembunyi sampai pwa-install.js memutuskan menampilkannya. */
.btn-secondary.hidden {
  display: none;
}

/* Jebakan sama utk .btn-primary (display:inline-flex) — tanpa ini tombol
   "Coba lagi" di layar "Gagal memuat SCM" langsung tampil walau ber-.hidden,
   padahal harus tersembunyi sampai koneksi pulih (permintaan owner 2026-07-23). */
.btn-primary.hidden {
  display: none;
}

.data-table {
  width: 100%;
  font-size: 0.8125rem;
  border-collapse: collapse;
}

.data-table thead th {
  text-align: left;
  color: #64748b;
  font-weight: 600;
  border-bottom: 1px solid #e2e8f0;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
}

.data-table tbody td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}

.data-table tbody tr:hover {
  background: #f8fafc;
}

/* Poles tabel /products (2026-07-29): header lengket saat scroll + baris zebra +
   hover indigo lebih jelas. Scoped ke .products-table agar tak mengubah tabel lain. */
.products-table thead th, .prodout-table thead th, .raw-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #f8fafc;
  box-shadow: inset 0 -1px 0 #e2e8f0;
}
.products-table tbody tr:nth-child(even), .prodout-table tbody tr:nth-child(even), .raw-table tbody tr:nth-child(even) { background: #fcfcfd; }
.products-table tbody tr:hover, .prodout-table tbody tr:hover, .raw-table tbody tr:hover { background: #eef2ff; }

/* Lebar kolom (restrukturisasi 2026-07-29): Stok memuat angka + tombol Stok/Analisa
   → beri ruang; Urutan cuma input kecil → sempit. Resep memuat chip + tombol. */
.products-table td.col-stok, .prodout-table td.col-stok { min-width: 8rem; }
.raw-table td.col-stok { min-width: 11rem; }
.products-table td.col-urutan { width: 3.25rem; }
.products-table td.col-resep, .prodout-table td.col-resep { min-width: 7rem; }
/* Kolom "Tampil / Penanda" memuat grid 2 kolom berisi 6 ceklis berlabel.
   Aturan lebarnya dulu HANYA ada di @media (max-width:640px), jadi di desktop
   kolomnya terjepit dan label-labelnya terpotong jadi satu huruf. */
.products-table td.col-storefront { min-width: 12.5rem; }
.products-table td.col-stokmin { white-space: nowrap; }

/* Kolom Aksi: tombol di dalam flex, BUKAN space-x + nowrap di <td>.
   nowrap di sel terakhir tabel width:100% membuat isi melebihi kotak sel,
   sementara scrollWidth tabel tak ikut — di HP sisa tombol terpotong. */
.aksi-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}
.aksi-btns > .btn-primary,
.aksi-btns > .btn-secondary,
.aksi-btns > .btn-danger,
.aksi-btns > a {
  flex: 0 0 auto;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  background: var(--scm-accent);
  color: #fff;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  filter: brightness(1.05);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
  cursor: pointer;
}

.btn-secondary:hover {
  background: #f9fafb;
}

/* Preset periode yang sedang aktif (Hari Ini / Kemarin / Bulan Ini). Kelas ini
   sudah dipakai transfers.js sejak lama TAPI tak pernah punya aturan CSS di mana
   pun, jadi sorotan preset aktif tak pernah muncul — di halaman itu pun. Dipakai
   bersama /partner-orders. */
.btn-secondary.is-active-preset {
  background: #eef2ff;
  border-color: #a5b4fc;
  color: #4338ca;
  font-weight: 600;
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  cursor: pointer;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.6875rem;
  font-weight: 600;
}

.status-pending { background: #fef3c7; color: #b45309; }
.status-process { background: #e0f2fe; color: #0369a1; }
.status-finish { background: #e0e7ff; color: #4338ca; }
.status-approved { background: #d1fae5; color: #047857; }
.status-rejected { background: #fee2e2; color: #b91c1c; }
.status-received { background: #dbeafe; color: #1d4ed8; }

.field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.25rem;
}

.field-input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  padding: 0.45rem 0.65rem;
  font-size: 0.8125rem;
  outline: none;
}

.field-input:focus {
  border-color: var(--scm-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--scm-accent) 20%, transparent);
}

/* Isian NOMINAL UANG di modal. <input type="number"> menampilkan nilai mentah
   ("95392,00") sehingga tak kebaca sebagai uang. Penggantinya: kotak teks dgn
   awalan "Rp" menempel di dalam kotak + angka tabular. Kelasnya ditulis di sini
   (bukan utility Tailwind) karena tailwind.css SCM cuma subset pra-kompilasi —
   utility posisi seperti pl-9 / -translate-y-1/2 tidak tersedia di sana. */
.money-field {
  position: relative;
}

.money-field > .money-prefix {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: #9ca3af;
  pointer-events: none;
}

.money-field > .field-input {
  padding-left: 2.1rem;
  font-variant-numeric: tabular-nums;
}

/* JEBAKAN (jangan hapus jatah padding-left di atas): aturan kepadatan di
   @media bawah memakai shorthand `padding` dgn selektor 3-kelas (mis.
   `.modal-backdrop.modal-dense .field-input`), jadi ia menang atas
   `.money-field > .field-input` (2 kelas) DAN mereset padding-left — "Rp" yang
   absolut di left:.65rem lalu duduk DI ATAS angkanya. Terukur di iPhone:
   tumpang tindih 19,2px (owner, 2026-08-15, /production-outputs).
   Padanan `unitField()` selamat dari gejala serupa semata-mata karena ia
   memakai inline style (`padding-right:2.8rem`), bukan kelas.
   Penawarnya ada di @media (max-width:640px) — cari "jatah prefiks Rp". */

/* ===== Upload foto item (modal Tambah/Edit) ===== */
/* Ganti input file telanjang → kotak klik ber-preview + placeholder. */
.photo-upload {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 7rem;
  padding: 0.5rem;
  border: 1.5px dashed #cbd5e1;
  border-radius: 0.6rem;
  background: #f8fafc;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.photo-upload:hover {
  border-color: #6366f1;
  background: #f1f5f9;
}
.photo-upload-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.photo-upload-preview {
  max-height: 6.5rem;
  max-width: 100%;
  object-fit: contain;
  border-radius: 0.4rem;
}
.photo-upload-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  color: #94a3b8;
  font-size: 0.8rem;
  text-align: center;
  pointer-events: none;
}
.photo-upload-empty > i {
  font-size: 1.6rem;
  color: #cbd5e1;
}
.photo-upload-sub {
  font-size: 0.68rem;
  color: #cbd5e1;
}
/* Specificity 2-kelas → menang atas .photo-upload-empty{display:flex} (urutan
   cascade sama dgn jebakan .btn-secondary.hidden), jadi .hidden benar2 sembunyi. */
.photo-upload-empty.hidden,
.photo-upload-preview.hidden {
  display: none;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-panel {
  background: #fff;
  border-radius: 0.875rem;
  width: 100%;
  max-width: 32rem;
  /* max-height: 100% — BUKAN 90vh. Di iOS Safari `vh` mengacu ke viewport
     BESAR (seolah toolbar tersembunyi), sementara .modal-backdrop yang
     position:fixed;inset:0 mengikuti area yang BENAR-BENAR terlihat. Selisihnya
     = tinggi toolbar bawah Safari, dan panel setinggi 90–96vh jadi menjulur ke
     bawah area terlihat sampai .modal-footer (tombol Batal/Simpan) tertutup
     toolbar — dilaporkan owner 2026-08-15 dari iPhone di halaman
     /production-outputs. Persen mengacu ke kotak-isi backdrop, jadi ia otomatis
     benar di semua peramban tanpa perlu menebak-nebak unit viewport. */
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-panel.lg {
  /* Modal konten-banyak → FULL LAYAR (permintaan owner 2026-07-23): lebar
     mengisi penuh layar (width:100% dari base, minus margin 1rem backdrop —
     aman di mobile) tanpa batas max-width. Tinggi ikut max-height:100% dari
     base (dulu 94vh — lihat catatan iOS di atas). */
  max-width: none;
}

.modal-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.modal-body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.stat-card {
  padding: 1rem;
}

/* Kartu ringkasan 5 kolom (Total/Tersedia/Menipis/Habis/Nilai) — md:grid-cols-5
   TAK ADA di subset tailwind.css (cek dulu sebelum pakai kelas Tailwind baru,
   lihat scm-tailwind-subset-gotcha), jadi aturannya ditaruh di sini. */
@media (min-width: 768px) {
  .stat-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.stat-card .stat-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 0.25rem;
}

.stat-card .stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
}

/* Kartu ringkasan yang bisa DIKLIK untuk menyaring tabel (Bahan Baku): kartu
   aktif = status yang sedang ditampilkan. Ditulis di sini, bukan pakai kelas
   Tailwind, karena subset tailwind.css tak punya ring-*/hover:border-* (lihat
   scm-tailwind-subset-gotcha). */
.stat-card-clickable {
  cursor: pointer;
  user-select: none;
  transition: border-color 150ms, box-shadow 150ms, background-color 150ms;
}

.stat-card-clickable:hover {
  border-color: #a5b4fc;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.stat-card-clickable:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

.stat-card-active {
  border-color: #6366f1;
  background: #eef2ff;
  box-shadow: inset 0 0 0 1px #6366f1;
}

.empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: #94a3b8;
  font-size: 0.875rem;
}

.table-loading {
  text-align: center;
  padding: 1.75rem 0.75rem;
  color: #64748b;
  font-size: 0.8125rem;
}
.table-loading i {
  margin-right: 0.45rem;
  color: #7c3aed;
}
.table-loading-row td { border-bottom: none; }

@media (max-width: 767.98px) {
  .scm-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    /* 100dvh (bukan 100vh/min-h-screen): tinggi mengikuti viewport terlihat
       saat URL-bar HP tampil, supaya item paling bawah bisa di-scroll masuk. */
    height: 100dvh;
    min-height: 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 200ms;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .scm-sidebar.open {
    transform: translateX(0);
  }

  .scm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 35;
  }
}

/* ── Gerbang "Pilih Outlet" (#ctx-gate-card, dibuat ctxGate() di app.js) ───────
   BUG (ditemukan 2026-08-18): kartunya diberi kelas `max-h-[80vh]`, tapi kelas
   itu TIDAK ADA di subset tailwind.css (yang ter-generate cuma max-h-56/72/96
   dan max-h-[70vh]) — lihat komentar "Utility Tailwind yang HILANG" di bawah.
   Tanpa batas tinggi, `overflow-y-auto` di kartu tak pernah aktif; dan karena
   body.scm-body dikunci `overflow:hidden`, TIDAK ADA yang bisa di-scroll. Di HP
   dengan outlet banyak, tombol outlet paling bawah jadi mustahil dijangkau —
   user terkunci di gerbang dan tak pernah masuk SCM sama sekali.
   Ditulis tangan di sini (bukan kelas Tailwind baru) mengikuti preseden berkas
   ini. dvh menyusul URL-bar HP, sama seperti .scm-sidebar di atas. */
#ctx-gate-card {
  max-height: 80vh;
  max-height: 80dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ═══ Poles mobile: panel Inventory (Hasil Produksi/Produk/Bahan Baku) & modal
       Resep ══════════════════════════════════════════════════════════════════
   Keluhan owner 2026-07-28: di HP font kebesaran sehingga teks terpotong. Diukur
   di viewport 390px (Chromium headless):
     - modal Resep: tabel 569px di dalam panel 318px → 251px (44%) di luar layar,
       kolom Konversi/Biaya/Hapus tak terjangkau; dropdown bahan cuma sisa 92px
       sehingga hanya terbaca "— pilih" (Qty malah kebagian 112px).
     - kartu ringkasan: "Rp 12.480.500" pecah 2 baris di stat-value 20px.
     - tombol aksi baris pakai .btn-secondary 13px (kelas text-xs/py-1 KALAH
       urutan cascade dari .btn-secondary di app.css) → kolom Aksi melar.
   Perubahan kepadatan sengaja OPT-IN lewat pembungkus .scm-dense (panel
   inventory) dan .modal-dense (dipasang openRecipeModal) supaya panel/modal lain
   tak ikut berubah sebelum ditinjau. */

/* ── Utility Tailwind yang HILANG dari subset pra-kompilasi ────────────────────
   tailwind.css SCM di-generate sekali (tak ada build step di repo), jadi kelas
   yang tak ikut ter-generate diam-diam tak bergaya. Yang di bawah dipakai panel
   inventory dan terbukti kosong saat diperiksa di browser:
     - gap-x-2 / gap-y-0.5  : chip BB/HP di sel BOM menempel tanpa jarak.
     - max-w-[15rem]        : sel BOM tak punya batas → kolom melar, tabel lebar.
     - max-w-[11rem]/[14rem]: pasangan `truncate` di sel Catatan & Riwayat tak
                              pernah aktif, jadi catatan panjang ikut melebarkan
                              tabel (penyumbang utama lebar 1767px di mobile).
     - w-5/h-5/leading-none : tombol "×" hapus foto di modal item.
   Nilai mengikuti skala Tailwind bawaan. Beberapa (mis. bg-violet-100) mungkin
   sudah ditambahkan di blok utility lain — deklarasi kembar tak masalah. */
.gap-x-2 { column-gap: 0.5rem; }
.gap-y-0\.5 { row-gap: 0.125rem; }
.ml-0\.5 { margin-left: 0.125rem; }
.leading-4 { line-height: 1rem; }
.leading-none { line-height: 1; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.text-rose-500 { color: #f43f5e; }
.bg-violet-100 { background-color: #ede9fe; }
.max-w-\[11rem\] { max-width: 11rem; }
.max-w-\[14rem\] { max-width: 14rem; }
.max-w-\[15rem\] { max-width: 15rem; }
.max-w-\[16rem\] { max-width: 16rem; }
/* mr-3: jarak antar-toggle Storefront di halaman Produk (tanpa ini kelima
   label "Aplikasi/Web Order/Rekomendasi/Wajib/Terlaris" menempel jadi satu).
   pt-3: jarak atas pemisah antar-seksi di form Tambah/Edit item. */
.mr-3 { margin-right: 0.75rem; }
.pt-3 { padding-top: 0.75rem; }

/* ═══ Riwayat Perubahan halaman Pengaturan (panels/pengaturan.js) ════════════
   Ditulis tangan di sini, BUKAN kelas Tailwind: subset pra-kompilasi SCM tak
   punya varian breakpoint yang dibutuhkan (`sm:table-cell`, `sm:hidden`,
   `md:table-cell` semuanya TIDAK ter-generate — lihat "Utility Tailwind yang
   HILANG" di atas), padahal justru di HP-lah bentuknya harus berubah.

   Blok ini semula tabel 5 kolom (Waktu|Pelaku|Setelan|Dari|Jadi). Diukur di
   viewport 390px: kolom "Dari" dan "Jadi" — satu-satunya yang menjawab
   "berubah JADI apa" — jatuh SELURUHNYA di luar layar, dan label setelan
   mengurai jadi menara 6 baris. Pengelompokan "satu kali Simpan" pun cuma
   ditandai panah ↳ kecil di kolom Waktu yang kosong, tak terbaca sebagai satu
   tindakan.

   Sekarang SATU markup melayani keduanya: tiap penyimpanan jadi satu kartu
   berkepala (waktu · pelaku · jumlah setelan), isinya grid dua kolom di layar
   >=640px dan menumpuk di bawah itu. Tak ada gulir mendatar di lebar mana pun. */
.rwp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; }

.rwp-event {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}

.rwp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  padding: 0.4rem 0.7rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.75rem;
  color: #64748b;
}
.rwp-head .rwp-ikon { color: #a5b4fc; font-size: 0.6875rem; }
/* tabular-nums: deretan jam sejajar rapi walau angkanya beda lebar */
.rwp-when { font-weight: 600; color: #334155; font-variant-numeric: tabular-nums; }
.rwp-rel { color: #94a3b8; }
.rwp-who { color: #4f46e5; font-weight: 600; }
/* Jumlah setelan didorong ke kanan di layar lebar; di HP ia ikut membungkus
   ke baris berikut, jadi margin-left:auto sengaja hanya dipasang >=640px. */
.rwp-count {
  background: #eef2ff; color: #4338ca; border-radius: 999px;
  padding: 0.05rem 0.5rem; font-size: 0.6875rem; font-weight: 600;
}

.rwp-change {
  display: grid;
  gap: 0.2rem 1rem;
  padding: 0.5rem 0.7rem;
  border-top: 1px solid #f1f5f9;
}
.rwp-change:first-child { border-top: 0; }
.rwp-label { display: block; font-size: 0.8125rem; color: #1e293b; line-height: 1.35; }
.rwp-cat { display: block; font-size: 0.6875rem; color: #94a3b8; margin-top: 0.05rem; }

.rwp-move { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem; font-size: 0.75rem; min-width: 0; }
.rwp-from { color: #94a3b8; }
.rwp-to { color: #1e293b; font-weight: 600; }
/* Panah lewat ::before, bukan <i> Font Awesome, karena dua alasan: ia MELEKAT
   pada nilai baru sehingga saat nilainya panjang dan `rwp-move` membungkus,
   panahnya ikut turun memimpin baris kedua ("→ Foto Kirim + Foto Terima")
   alih-alih menggantung di ujung baris pertama; dan karakter teks tak bisa
   gagal muat seperti ikon font — "Aktif Nonaktif" tanpa panah kehilangan arah
   perubahannya, justru bagian yang paling penting di sini. */
.rwp-to::before { content: "\2192"; color: #cbd5e1; font-weight: 400; margin-right: 0.3rem; }
/* Setelan hidup/mati paling sering diubah dan paling cepat dibaca sebagai
   warna, bukan kata — chip dipakai HANYA untuk tipe bool (lihat _nilaiHtml). */
.rwp-chip { border-radius: 0.25rem; padding: 0.05rem 0.4rem; font-weight: 600; }
.rwp-chip.on { background: #d1fae5; color: #047857; }
.rwp-chip.off { background: #f1f5f9; color: #64748b; }
.rwp-from .rwp-chip { opacity: 0.7; font-weight: 500; }

@media (min-width: 640px) {
  .rwp-count { margin-left: auto; }
  /* Dua kolom: apa yang diubah | jadi apa. `baseline` menyejajarkan label
     setelan dengan nilainya walau labelnya membungkus dua baris. */
  .rwp-change { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: baseline; }
}

/* Utang Piutang (daftar + detail): kelas yang belum ikut tercetak di subset.
   - h-24/w-24 & cursor-zoom-in : kartu bukti foto yang bisa diperbesar.
   - border-amber-300           : pembeda tegas bukti PEMBERIAN pinjaman (amber)
                                  dari bukti PEMBAYARAN (emerald) — dua hal yang
                                  gampang tertukar dan berbeda arti kasnya.
   - whitespace-pre-wrap        : catatan multi-baris apa adanya.
   - btn:disabled               : tombol "Simpan" rekonsiliasi tampak mati saat
                                  belum ada perubahan (tanpa ini tetap pekat). */
.h-24 { height: 6rem; }
.w-24 { width: 6rem; }
.cursor-zoom-in { cursor: zoom-in; }
.border-amber-300 { border-color: #fcd34d; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.btn-primary:disabled,
.btn-secondary:disabled { opacity: 0.45; cursor: default; }

/* ── Susulan sapu-bersih 2026-08-18 (audit kelas vs subset, lihat catatan di atas)
   Diaudit dengan mengekstrak SEMUA token class="…" dari index.html + 77 berkas JS
   lalu mencocokkannya ke tailwind.css + app.css (dengan escape CSS). Yang di bawah
   terbukti TIDAK punya aturan di mana pun — jadi selama ini diam-diam tak bergaya.
   Nilainya = nilai baku Tailwind, jadi menambahkannya hanya MEWUJUDKAN maksud
   markup yang sudah ada; tak ada tampilan yang berubah dari kondisi "benar".
     - h-8            : <img> avatar di performa-karyawan.js:158 & transfer-add.js:536
                        pakai `w-8 h-8`. w-8 ADA tapi h-8 TIDAK → foto melar tinggi
                        aslinya (32px lebar × ratusan px tinggi). Ini bug HP nyata.
     - object-contain : logo sidebar index.html:41 & foto lokasi bahan baku →
                        gambar teregang, bukan proporsional.
     - h-14 / w-14    : lingkaran ikon layar "Tidak Punya Akses" (app.js:314) kempis.
     - border-2       : preflight Tailwind menyetel border-width:0, jadi kotak unggah
                        foto bergaris putus-putus selama ini TANPA BINGKAI sama sekali.
     - sisanya        : ikon/badge kecil & tabel detail yang ukurannya tak terkendali. */
.h-4 { height: 1rem; }
.w-4 { width: 1rem; }
.h-6 { height: 1.5rem; }
.w-6 { width: 1.5rem; }
.h-8 { height: 2rem; }
.h-14 { height: 3.5rem; }
.w-14 { width: 3.5rem; }
.w-1\.5 { width: 0.375rem; }
.object-contain { object-fit: contain; }
.max-h-40 { max-height: 10rem; }
.max-h-44 { max-height: 11rem; }
.max-h-48 { max-height: 12rem; }
.top-0\.5 { top: 0.125rem; }
.right-0\.5 { right: 0.125rem; }
.border-2 { border-width: 2px; }
.align-middle { vertical-align: middle; }
.border-collapse { border-collapse: collapse; }

/* Dua kelas RESPONSIF yang dipakai tapi tak pernah ter-generate ke subset. Karena
   varian `sm:` hanya berlaku ≥640px, keduanya tak berpengaruh di HP — tapi di
   tablet/desktop efeknya nyata: baris filter /finance-requests terkunci 2 kolom
   (mestinya 5), dan tombol "Muat semua" di /source-monitoring meregang setinggi
   kotak peringatan karena align-self default flex = stretch. */
.self-start { align-self: flex-start; }
@media (min-width: 640px) {
  .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sm\:self-auto { align-self: auto; }
}

/* SKU itu identitas — tak pernah pantas dipenggal. Di HP kolomnya diperas
   auto-layout sampai 42px sehingga "PRD-RSC-001" pecah jadi 3 baris dan tinggi
   barisnya membengkak ke 105px. */
.data-table td.col-sku { white-space: nowrap; }

/* ── Modal Resep: lebar field (dulu inline style di inventory.js) ──────────────
   Dipindah ke CSS supaya bisa dibatalkan di breakpoint HP — inline style hanya
   bisa dikalahkan !important, dan itu bikin aturan mobile rapuh. */
/* ═══ Modal Resep — kartu per bahan ═══════════════════════════════════════════
   Dulu <table> 6 kolom (Bahan / Qty / Satuan / Konversi / Biaya / hapus) yang
   di HP disulap jadi kartu lewat CSS. Owner melaporkan modalnya sulit dibaca
   orang awam, dan memang: memahami SATU bahan menuntut mata melompat antar
   empat kolom, "Konversi" tak berarti apa-apa tanpa penjelasan, dan singkatan
   BB/HP hanya terbaca oleh yang sudah hafal.

   Sekarang tiap bahan adalah satu kartu yang bisa dibaca berurutan ke bawah,
   ditutup kalimat hasil ("Memotong 0,18 kg dari stok"). Kotak konversi hanya
   muncul saat satuannya memang beda jenis — lihat perluKonversi() di
   panels/inventory.js. */

.rcp-intro { font-size: 0.8125rem; line-height: 1.5; color: #374151; margin-bottom: 0.75rem; }
.rcp-warn {
  border: 1px solid #fcd34d; background: #fffbeb; color: #92400e;
  border-radius: 0.5rem; padding: 0.5rem 0.625rem;
  font-size: 0.6875rem; line-height: 1.5; margin-bottom: 0.75rem;
}
.rcp-lines { display: flex; flex-direction: column; gap: 0.5rem; }

.rcp-line { border: 1px solid #e5e7eb; border-radius: 0.625rem; padding: 0.625rem; background: #fff; }
.rcp-line-top { display: flex; align-items: flex-start; gap: 0.5rem; }
.rcp-line-ing { flex: 1 1 auto; min-width: 0; }
.rcp-del {
  flex: 0 0 auto; border-radius: 0.375rem; padding: 0.3125rem 0.4375rem;
  color: #9ca3af; background: transparent; line-height: 1;
}
.rcp-del:hover { color: #b91c1c; background: #fef2f2; }

/* Dua isian angka berdampingan — cukup lebar untuk dibaca, tak lebih. */
.rcp-line-num { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); gap: 0.5rem; margin-top: 0.5rem; }
.rcp-mini { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.rcp-mini > span { font-size: 0.6875rem; font-weight: 600; color: #6b7280; }
.rcp-mini .field-input { padding: 0.3125rem 0.5rem; font-size: 0.8125rem; width: 100%; max-width: none; }

/* Kalimat hasil: menerjemahkan angka jadi akibat nyata di stok. */
.rcp-hasil {
  margin-top: 0.5rem; border-radius: 0.375rem; background: #f8fafc;
  padding: 0.3125rem 0.5rem; font-size: 0.75rem; line-height: 1.4; color: #475569;
}
.rcp-hasil:empty { display: none; }
.rcp-hasil-konv { color: #94a3b8; }
.rcp-hasil-perlu { background: #fffbeb; color: #92400e; }

/* Modal Resep /products — FORMAT TABEL (2026-07-29). Kartu .rcp-line masih dipakai
   modal resep Hasil Produksi (inventory.js), jadi ini aturan TAMBAHAN saja. Baris
   memakai .rcp-row (bukan .rcp-line) supaya tak kena gaya kartu. */
.rcp-table-wrap { overflow-x: auto; margin-bottom: 0.5rem; }
.rcp-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.rcp-table thead th {
  text-align: left; color: #64748b; font-weight: 600; font-size: 0.625rem;
  text-transform: uppercase; letter-spacing: 0.03em; padding: 0.4rem 0.5rem;
  border-bottom: 1px solid #e2e8f0; white-space: nowrap; background: #f8fafc;
}
.rcp-table td { padding: 0.45rem 0.5rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
.rcp-table .rcp-takaran { display: flex; gap: 0.25rem; align-items: center; }
.rcp-table .rcp-qty { width: 4.25rem; }
.rcp-table .rcp-uom { width: 6.5rem; }
.rcp-table .rcp-konvin { width: 5rem; }
.rcp-table .rcp-konv-lbl { font-size: 0.625rem; color: #94a3b8; margin-bottom: 0.15rem; }
.rcp-table .rcp-konv-hint { font-size: 0.625rem; color: #94a3b8; margin-top: 0.15rem; max-width: 13rem; line-height: 1.25; }
.rcp-table .rcp-c-ing { min-width: 11rem; }
.rcp-table .rcp-c-terpakai { min-width: 9rem; }
.rcp-table .rcp-c-del { text-align: center; }
/* Kolom Aktif: centang untuk pakai baris resep, hilangkan untuk mengabaikannya. */
.rcp-table .rcp-c-aktif { text-align: center; white-space: nowrap; }
.rcp-aktif { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.6875rem; font-weight: 600; color: #6b7280; cursor: pointer; user-select: none; }
.rcp-aktif input { cursor: pointer; margin: 0; }
/* Baris resep non-aktif: diredupkan (kecuali kolom Aktif & Hapus yang tetap bisa
   dipakai) + coretan pada bahan supaya jelas "diabaikan dari perhitungan". */
.rcp-table tr.rcp-inactive td:not(.rcp-c-aktif):not(.rcp-c-wajib):not(.rcp-c-del) { opacity: 0.4; }
/* Kolom Wajib: centang = bahan menahan stok produk (default). Tanpa centang,
   bahan boleh habis & produknya tetap bisa dipesan — ditandai kuning supaya
   pengecualian itu kelihatan sekilas, bukan tersembunyi di antara centang. */
.rcp-table .rcp-c-wajib { text-align: center; white-space: nowrap; }
.rcp-table .rcp-c-wajib .rcp-aktif:has(input:not(:checked)) { color: #b45309; }
.rcp-table tr.rcp-inactive .ing-combo-label { text-decoration: line-through; }
.rcp-table tr.rcp-inactive .rcp-aktif { color: #b91c1c; }
/* .rcp-hasil di dalam tabel: tak perlu margin/background kotak (biar rapat di sel). */
.rcp-table .rcp-hasil { margin-top: 0; background: transparent; padding: 0; }
.rcp-table .rcp-hasil-perlu { background: #fffbeb; padding: 0.15rem 0.35rem; border-radius: 0.25rem; }
.rcp-table .rcp-biaya { font-weight: 600; }

/* ── Buat Transfer Stok: kini wizard 4-langkah (owner 2026-08-15), memakai
   ULANG kelas .pb-* dari Buat Pembelian (purchase-add.js) apa adanya supaya
   gayanya identik tanpa duplikasi CSS. Sisa kelas transfer-spesifik: foto
   PER BARIS (belum ada padanannya di purchase-add — .fotoPath di sana masih
   scaffolding tanpa UI), jadi ditulis di sini. ── */
.pb-file-sm { padding: 0.35rem 0.55rem; font-size: 0.6875rem; border-radius: 0.5rem; gap: 0.375rem; }
.pb-file-sm i { font-size: 0.8125rem; }
.trfadd-foto-ok { display: inline-flex; align-items: center; gap: 0.375rem; }

/* Dropdown filter toolbar (mis. "Semua kategori") — batasi lebar di DESKTOP supaya
   nama kategori panjang tak melebarkan dropdown. (Mobile sudah dibatasi 9.5rem di
   media query .scm-dense.) */
select.toolbar-field { max-width: 12rem; }

/* Toggle switch (Pengaturan SCM 2026-07-29) — pengganti checkbox polos, lebih jelas
   on/off untuk management. */
.scm-switch { position: relative; display: inline-block; width: 2.4rem; height: 1.35rem; }
.scm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.scm-switch-slider {
  position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px;
  transition: background .18s ease; cursor: pointer;
}
.scm-switch-slider::before {
  content: ""; position: absolute; height: 1.05rem; width: 1.05rem; left: 0.15rem; top: 0.15rem;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .18s ease;
}
.scm-switch input:checked + .scm-switch-slider { background: #4f46e5; }
.scm-switch input:checked + .scm-switch-slider::before { transform: translateX(1.05rem); }
.scm-switch input:focus-visible + .scm-switch-slider { outline: 2px solid #a5b4fc; outline-offset: 2px; }

/* Kotak konversi — hanya tampil bila satuannya memang beda jenis. */
.rcp-konv { margin-top: 0.5rem; border-top: 1px dashed #e5e7eb; padding-top: 0.5rem; }
.rcp-konv-hint { margin-top: 0.25rem; font-size: 0.6875rem; line-height: 1.45; color: #9ca3af; }
.rcp-perlu { color: #b45309; }

.rcp-line-bot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; }
.rcp-linkbtn { background: none; padding: 0; font-size: 0.6875rem; font-weight: 600; color: #4f46e5; text-decoration: underline; }
.rcp-linkbtn:hover { color: #3730a3; }
.rcp-biaya { margin-left: auto; font-size: 0.9375rem; font-weight: 700; color: #111827; }
.rcp-biaya-kosong { color: #d1d5db; font-weight: 400; }

/* Jenis bahan ditulis UTUH di dalam kartu; singkatan BB/HP hanya di daftar
   picker yang padat. */
.rcp-kind {
  flex: 0 0 auto; border-radius: 0.25rem; padding: 0.0625rem 0.3125rem;
  font-size: 0.5625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
}
.rcp-kind-bb { background: #e0f2fe; color: #0369a1; }
.rcp-kind-hp { background: #ede9fe; color: #6d28d9; }

.rcp-add {
  margin-top: 0.625rem; width: 100%; border: 1px dashed #c7d2fe; background: #eef2ff;
  color: #4338ca; border-radius: 0.5rem; padding: 0.5rem; font-size: 0.8125rem; font-weight: 600;
}
.rcp-add:hover { background: #e0e7ff; }
/* "Kosongkan resep" — varian MERAH dari .rcp-add supaya jelas ini tindakan
   merusak, dan tak tertukar dgn "Tambah bahan" yang warnanya indigo. Ditulis
   eksplisit di sini (bukan kelas Tailwind) karena subset pra-kompilasi. */
.rcp-clear { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.rcp-clear:hover { background: #fee2e2; }

.rcp-total { margin-top: 0.875rem; border: 1px solid #e5e7eb; border-radius: 0.625rem; padding: 0.75rem; background: #fafafa; }
.rcp-total-utama { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.rcp-total-utama > span { font-size: 0.8125rem; font-weight: 600; color: #374151; }
.rcp-total-utama > b { font-size: 1.125rem; font-weight: 700; color: #4338ca; }
.rcp-total-lain {
  display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 0.375rem;
  border-top: 1px solid #eef2f7; padding-top: 0.375rem; font-size: 0.75rem; color: #6b7280;
}
.rcp-total-catatan { margin-top: 0.5rem; font-size: 0.6875rem; line-height: 1.5; color: #9ca3af; }

/* Bahan yang tercatat lebih dari sekali — ditandai pada kartunya, bukan cuma
   diberi tahu di kotak peringatan atas. */
.recipe-line-dup { background: #fffbeb; box-shadow: inset 3px 0 0 #f59e0b; }

/* Nama bahan panjang dibiarkan membungkus: di kartu ada ruang vertikal, jadi
   memotongnya dengan "…" hanya menyembunyikan pembeda antar-varian. */
.rcp-line .ing-combo-btn { align-items: flex-start; height: auto; min-height: 2.25rem; }
.rcp-line .ing-combo-label { flex-wrap: wrap; }
.rcp-line .ing-combo-label .ing-name {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
}

@media (min-width: 640px) {
  .rcp-line-num { grid-template-columns: minmax(0, 8rem) minmax(0, 16rem); }
}


/* Penanda bahan di kolom BOM. Merah = stoknya habis sehingga produk tak bisa
   dibuat; kuning = bahan yang paling membatasi jumlah yang bisa dibuat.
   Warna DAN ikon dipakai bersama supaya tetap terbaca oleh yang sulit
   membedakan warna. */
.bom-habis {
  color: #b91c1c;
  font-weight: 600;
  background: #fef2f2;
  border-radius: 0.25rem;
  padding: 0 0.25rem;
}
.bom-pembatas {
  color: #92400e;
  background: #fffbeb;
  border-radius: 0.25rem;
  padding: 0 0.25rem;
}

/* Isian terkunci (SKU): tampil jelas tapi tak bisa diubah sampai ikon pensil
   diklik — mencegah SKU berubah karena kelewat mengetik, padahal ia dipakai
   mencocokkan item antar-outlet saat transfer & salin. */
.lock-field { position: relative; }
.lock-field .field-input { padding-right: 2.3rem; }
.lock-field .field-input[readonly] {
  background: #f1f5f9;
  color: #64748b;
  cursor: default;
}
.lock-btn {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border: none;
  border-radius: 0.35rem;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  font-size: 0.75rem;
}
.lock-btn:hover { background: #e2e8f0; color: #475569; }
.lock-btn:focus-visible { outline: 2px solid var(--scm-accent); outline-offset: 1px; }
.lock-btn.is-open { color: var(--scm-accent); background: #eef2ff; }
.lock-hint {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: #92400e;
  margin-top: 0.3rem;
}
.lock-hint.hidden { display: none; }

/* ── Picker bahan ber-pencarian (buatIngPicker di inventory.js) ────────────── */
.ing-combo { position: relative; }
.ing-combo-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  text-align: left;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
}
.ing-combo-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow: hidden;
}
.ing-combo-label .ing-name,
.ing-pop-item .ing-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ing-pop-item .ing-name { flex: 1; }
.ing-combo-label .ing-sku,
.ing-pop-item .ing-sku {
  color: #94a3b8;
  font-size: 0.6875rem;
  flex-shrink: 0;
}
.ing-combo-label .ing-ph { color: #9ca3af; }
/* Penanda bahan milik OUTLET LAIN. Bahan boleh diambil lintas-outlet, tapi harus
   kelihatan — nama bahan banyak yang kembar antar-outlet, dan stok yang dipotong
   saat produksi mengikuti outlet si bahan. */
.ing-combo-label .ing-outlet,
.ing-pop-item .ing-outlet {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.05rem 0.3rem;
  border-radius: 0.25rem;
  background: #fef3c7;
  color: #92400e;
  white-space: nowrap;
}
.ing-combo-caret { color: #9ca3af; font-size: 0.7rem; flex-shrink: 0; }

.ing-pop {
  position: fixed;
  /* di atas .modal-backdrop (z-index 50) */
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.6rem;
  box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.35);
}
/* Jebakan urutan CSS yang sama dgn .btn-secondary.hidden di atas: .hidden dari
   tailwind.css (dimuat duluan) kalah dari display:flex di sini. */
.ing-pop.hidden { display: none; }
.ing-pop-head { padding: 0.5rem; border-bottom: 1px solid #f1f5f9; }
.ing-pop-luar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  font-size: 0.6875rem;
  color: #64748b;
  cursor: pointer;
}
.ing-pop-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem;
  overflow-y: auto;
  max-height: 15rem;
  -webkit-overflow-scrolling: touch;
}
.ing-pop-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.4rem;
  cursor: pointer;
  font-size: 0.8125rem;
}
.ing-pop-item.is-hi,
.ing-pop-item:hover { background: #eef2ff; }
.ing-pop-note {
  padding: 0.55rem;
  text-align: center;
  color: #94a3b8;
  font-size: 0.6875rem;
  border-top: 1px solid #f1f5f9;
}
.ing-pop-note.hidden { display: none; }

@media (max-width: 640px) {
  /* Kepadatan panel inventory. Angka dipilih supaya "Rp 12.480.500" muat satu
     baris di kartu ringkasan 2-kolom dan kolom Aksi tak lagi mendominasi. */
  .scm-dense h2 { font-size: 0.8125rem; }

  .scm-dense .panel-card { padding: 0.6rem; }
  .scm-dense .stat-card { padding: 0.5rem 0.6rem; }
  .scm-dense .stat-card .stat-label { font-size: 0.5625rem; letter-spacing: 0.02em; margin-bottom: 0.1rem; }
  .scm-dense .stat-card .stat-value { font-size: 0.9375rem; }

  .scm-dense .data-table { font-size: 0.6875rem; }
  .scm-dense .data-table thead th { padding: 0.3rem 0.4rem; font-size: 0.625rem; }
  .scm-dense .data-table tbody td { padding: 0.35rem 0.4rem; }
  /* Tanpa ini kolom Nama menyempit sampai satu kata per baris ("Roti / Sobek /
     Coklat / Premium") karena tabel auto-layout memerasnya. Kolom teks sempit
     lain kena gejala sama di halaman Produk (15 kolom): Outlet "Houssi Central
     Kitchen" pecah 3 baris, dan sel Storefront berisi 5 toggle diperas ke 91px.
     Lebar minimum ini menambah lebar tabel sedikit, tapi tinggi baris turun jauh
     — tabelnya toh memang di-scroll horizontal. */
  .scm-dense .data-table td.col-nama { min-width: 8.5rem; }
  .scm-dense .data-table td.col-outlet { min-width: 6.5rem; }
  .scm-dense .data-table td.col-kategori { min-width: 5rem; }
  .scm-dense .data-table td.col-supplier { min-width: 6.5rem; }
  /* 13rem = titik optimal hasil ukur: sel Storefront (5 toggle) yang menentukan
     tinggi baris halaman Produk. 8rem→105px, 10.5rem→86px, 13rem→68px,
     16rem→66px. Ambil 13rem: tinggi baris turun 21% cuma dgn +40px lebar tabel;
     melebar lagi nyaris tak menambah apa-apa. */
  .scm-dense .data-table td.col-storefront { min-width: 13rem; }

  /* Kolom Aksi Bahan Baku & Hasil Produksi: di HP lengket di tepi kanan supaya
     Edit/Resep/Salin/Arsipkan/Riwayat (dan tombol senada di Hasil Produksi)
     selalu kelihatan, ditumpuk vertikal. nowrap 5 tombol dulu terpotong. */
  .scm-dense .data-table th.col-aksi,
  .scm-dense .data-table td.col-aksi {
    position: sticky;
    right: 0;
    z-index: 4;
    min-width: 5.75rem;
    width: 5.75rem;
    white-space: normal;
    background: #fff;
    box-shadow: -6px 0 10px -6px rgba(15, 23, 42, 0.22);
    vertical-align: top;
  }
  .scm-dense .data-table thead th.col-aksi {
    z-index: 6;
    background: #f8fafc;
  }
  .scm-dense .data-table tbody tr:nth-child(even) td.col-aksi { background: #fcfcfd; }
  .scm-dense .data-table tbody tr:hover td.col-aksi { background: #eef2ff; }
  .scm-dense .aksi-btns {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.2rem;
  }
  .scm-dense .aksi-btns > .btn-primary,
  .scm-dense .aksi-btns > .btn-secondary,
  .scm-dense .aksi-btns > a {
    width: 100%;
    justify-content: center;
    padding: 0.28rem 0.35rem;
    font-size: 0.625rem;
  }

  .scm-dense .btn-primary,
  .scm-dense .btn-secondary,
  .scm-dense .btn-danger { font-size: 0.6875rem; padding: 0.3rem 0.5rem; gap: 0.25rem; border-radius: 0.4rem; }
  /* 16px, BUKAN 0.75rem — lihat blok "Zoom paksa iOS" di bawah. Padding
     dipangkas supaya tinggi kotaknya tetap sepadat sebelumnya walau fontnya
     naik. */
  .scm-dense .field-input { font-size: 16px; padding: 0.25rem 0.5rem; }
  .scm-dense .status-badge { font-size: 0.5625rem; padding: 0.1rem 0.4rem; }
  /* Kotak Cari penuh selebar toolbar di HP. Dulu ini khusus halaman Produk
     (kelas .prod-search, permintaan owner 2026-08-12) sementara panel lain
     dicap 9.5rem supaya Cari + filter muat sebaris. Cap itu tak lagi bisa
     dipertahankan setelah isian naik ke 16px (lihat "Zoom paksa iOS"): pada
     9.5–11.5rem placeholder terpotong jadi "Cari SKU / na…". Karena alasan
     owner memilih Cari-penuh di Produk berlaku sama persis di sini, aturannya
     dilepas dari .prod-search agar berlaku utk semua panel inventory.
     CATATAN: aturan ini hanya BERBUNYI kalau baris toolbarnya ber-flex-wrap —
     tanpa itu flex-basis:100% langsung diciutkan lagi oleh flex-shrink. Produk
     sudah wrap (panelToolbar), Hasil Produksi baru diberi flex-wrap bersama
     perubahan ini. Bahan Baku toolbarnya BELUM wrap, jadi utk sekarang ia tak
     terpengaruh — bukan kelalaian, sengaja di luar lingkup.
     Aturan .prod-search yg lama DILEBUR ke sini; kelasnya masih dipancarkan
     products.js tapi kini inert — membuangnya perkara rapi-rapi tersendiri. */
  .scm-dense input[type="search"].field-input { max-width: none; flex: 1 1 100%; }
  /* Filter tetap dicap supaya beberapa filter muat sebaris; 11.5rem (dulu
     9.5rem) karena teks 16px butuh ruang lebih — pada 9.5rem opsi "Semua
     kategori" terpotong. */
  .scm-dense select.toolbar-field { max-width: 11.5rem; }

  /* Pemilih outlet/tenant di HEADER berada DI LUAR #panel-root, jadi tak ikut
     terjangkau .scm-dense (fix 2026-08-18). Padahal ini kontrol yang paling
     sering disentuh di tiap halaman — dengan font 13px iOS Safari mem-zoom
     halaman tiap kali dibuka dan tak pernah zoom balik. Dua kelas dipakai
     bersama supaya menang atas .text-xs bawaan Tailwind. */
  .scm-ctx-select.field-input { font-size: 16px; }

  /* ── Modal padat (.modal-dense dipasang ke .modal-backdrop) ───────────────── */
  .modal-backdrop.modal-dense { padding: 0.5rem; }
  /* max-height diwarisi dari base (100%) — dulu 96vh, lihat catatan iOS di
     .modal-panel: `vh` di iOS Safari melampaui area terlihat & menyembunyikan
     tombol Batal/Simpan di balik toolbar bawah. */
  .modal-backdrop.modal-dense .modal-panel { border-radius: 0.75rem; }
  .modal-backdrop.modal-dense .modal-header { padding: 0.7rem 0.85rem; }
  .modal-backdrop.modal-dense .modal-header h3 { font-size: 0.875rem; line-height: 1.3; }
  .modal-backdrop.modal-dense .modal-body { padding: 0.85rem; }
  .modal-backdrop.modal-dense .modal-footer { padding: 0.7rem 0.85rem; }
  .modal-backdrop.modal-dense .btn-primary,
  .modal-backdrop.modal-dense .btn-secondary { font-size: 0.75rem; padding: 0.4rem 0.7rem; }
  /* Form isian panjang (Tambah/Edit item ±12 field): label & isian dipadatkan
     dan jarak antar-field 1rem → 0.65rem, supaya tak perlu scroll sejauh itu.
     Nilai field-input disamakan dgn blok .recipe-line di bawah agar tak saling
     menimpa (specificity-nya lebih tinggi). */
  .modal-backdrop.modal-dense .field-label { font-size: 0.6875rem; margin-bottom: 0.15rem; }
  .modal-backdrop.modal-dense .field-input { font-size: 16px; padding: 0.25rem 0.45rem; }
  .modal-backdrop.modal-dense .modal-body > .grid { gap: 0.65rem; }

  /* ── Zoom paksa iOS ────────────────────────────────────────────────────────
     iOS Safari MEN-ZOOM halaman begitu isian ber-font <16px disentuh, dan tak
     pernah mengembalikan zoom-nya. Di modal Edit Hasil Produksi (11 isian
     @12px) tiap pindah field = satu lompatan zoom, lalu pengguna harus mencubit
     balik — inilah "masalah saat pakai iPhone" yg dilaporkan owner 2026-08-15.
     Viewport kita `width=device-width, initial-scale=1` TANPA maximum-scale,
     dan itu memang disengaja: `maximum-scale=1`/`user-scalable=no` mematikan
     cubit-zoom & melanggar aksesibilitas. Jadi obatnya di sisi CSS: isian yang
     BISA DIFOKUS wajib ≥16px. Padding dipangkas sbg ganti rugi tinggi.
     Yang TIDAK ikut naik: label, tombol, badge, sel tabel — semuanya tak bisa
     difokus untuk mengetik, jadi tak memicu zoom & kepadatannya tetap.
     Penerapannya di dua aturan .field-input di atas; input, select, DAN textarea
     semuanya memakai kelas itu, jadi tak perlu aturan per-elemen. */

  /* Jatah prefiks Rp — penawar jebakan shorthand `padding` di atas (lihat
     catatan di .money-field). WAJIB berada SETELAH aturan kepadatan agar menang
     pada spesifisitas yang sama. 1.9rem (bukan 2.1rem) karena padding kiri
     dasar di modal padat memang lebih rapat. */
  .scm-dense .money-field > .field-input,
  .modal-backdrop.modal-dense .money-field > .field-input { padding-left: 1.9rem; }

  /* Home indicator iPhone: .modal-footer menempel di dasar panel, dan panel kini
     boleh setinggi backdrop — tanpa ini tombol Batal/Simpan bisa bersinggungan
     dgn garis home. env() aman di peramban lain (fallback 0.7rem). */
  .modal-backdrop.modal-dense .modal-footer {
    padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
  }
}



/* Popup picker di HP: disematkan di atas layar (lihat tempatkan() di
   inventory.js), daftarnya boleh lebih tinggi karena tak menempel tombol. */
@media (max-width: 640px) {
  .ing-pop-luar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  font-size: 0.6875rem;
  color: #64748b;
  cursor: pointer;
}
.ing-pop-list { max-height: 50vh; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Buat Pembelian — wizard 4 langkah (panels/purchase-add.js)

   Kelas sendiri, bukan utilitas Tailwind: berkas tailwind.css di sini adalah
   SUBSET yang sudah dicetak, jadi kelas yang belum pernah dipakai diam-diam
   tak berefek. Tata letak sepenting ini tak boleh bergantung pada itu.
   ═══════════════════════════════════════════════════════════════════════════ */

.pb-wrap { max-width: 56rem; margin: 0 auto; padding-bottom: 1rem; }
.pb-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.pb-title { font-size: 1.125rem; font-weight: 700; color: #111827; line-height: 1.2; }
.pb-sub { font-size: 0.75rem; color: #6b7280; margin-top: 0.125rem; }
.pb-keluar { flex: 0 0 auto; }

/* Rel langkah — selalu terlihat supaya orang tahu ada di mana dan sisa berapa */
.pb-steps { display: flex; gap: 0.25rem; margin-bottom: 1rem; }
.pb-stepitem {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  min-width: 0; padding: 0.5rem 0.125rem; border-radius: 0.5rem; text-align: center;
  border-top: 3px solid #e5e7eb; color: #9ca3af;
}
.pb-stepitem[data-st="1"] { border-top-color: #4f46e5; color: #4338ca; background: #eef2ff; }
.pb-stepitem[data-st="2"] { border-top-color: #34d399; color: #047857; cursor: pointer; }
.pb-stepitem[data-st="2"]:hover { background: #ecfdf5; }
.pb-stepnum {
  display: flex; align-items: center; justify-content: center;
  height: 1.75rem; width: 1.75rem; border-radius: 9999px;
  background: #f3f4f6; font-size: 0.75rem;
}
.pb-stepitem[data-st="1"] .pb-stepnum { background: #4f46e5; color: #fff; }
.pb-stepitem[data-st="2"] .pb-stepnum { background: #34d399; color: #fff; }
.pb-steptext { display: block; min-width: 0; font-size: 0.6875rem; line-height: 1.15; }
.pb-steptext b { display: block; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.75; }
@media (max-width: 380px) { .pb-steptext { display: none; } }

/* Satu langkah = satu layar */
.pb-pane { background: #fff; border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 1rem; }
.pb-h { font-size: 1rem; font-weight: 700; color: #111827; }
.pb-help { margin-top: 0.125rem; margin-bottom: 1rem; font-size: 0.8125rem; color: #6b7280; line-height: 1.4; }
.pb-field { margin-bottom: 1rem; }
.pb-label { display: block; margin-bottom: 0.25rem; font-size: 0.8125rem; font-weight: 600; color: #374151; }
.pb-hint { margin-top: 0.25rem; font-size: 0.6875rem; line-height: 1.45; color: #9ca3af; }
.pb-linkbtn { background: none; padding: 0; font-size: 0.6875rem; font-weight: 600; color: #4f46e5; text-decoration: underline; }
.pb-linkbtn:hover { color: #3730a3; }
.pb-a { display: inline-block; margin-top: 0.25rem; font-weight: 600; color: #0369a1; text-decoration: underline; }

/* Pilihan berbentuk kartu, bukan dropdown — lebih terbaca bagi yang jarang
   memakai komputer, dan pilihannya terlihat semua sekaligus. */
.pb-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.pb-choices-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) { .pb-choices { grid-template-columns: 1fr; } }
.pb-choice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem;
  border: 2px solid #e5e7eb; border-radius: 0.625rem; background: #fff;
  padding: 0.625rem 0.75rem; text-align: left; min-width: 0;
}
.pb-choice i { font-size: 1rem; color: #9ca3af; margin-bottom: 0.125rem; }
.pb-choice b { font-size: 0.8125rem; font-weight: 700; color: #374151; }
.pb-choice span { font-size: 0.6875rem; color: #9ca3af; line-height: 1.3; }
.pb-choice[data-act="1"] { border-color: #4f46e5; background: #eef2ff; }
.pb-choice[data-act="1"] i, .pb-choice[data-act="1"] b { color: #4338ca; }
.pb-choice[data-act="1"] span { color: #6366f1; }
/* Varian sumber pembelian: SELALU 3 kolom sebaris (termasuk mobile) — override
   aturan .pb-choices yang menumpuk jadi 1 kolom di ≤480px. Di layar sempit
   kartu dipadatkan & diketengahkan supaya 3 tetap muat rapi. */
.pb-choices-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 480px) {
  .pb-choices-3 { gap: 0.375rem; }
  .pb-choices-3 .pb-choice { align-items: center; text-align: center; padding: 0.5rem 0.35rem; }
  .pb-choices-3 .pb-choice i { font-size: 0.95rem; }
  .pb-choices-3 .pb-choice b { font-size: 0.72rem; line-height: 1.15; }
  .pb-choices-3 .pb-choice span { font-size: 0.6rem; line-height: 1.25; }
}

.pb-note { display: flex; gap: 0.5rem; border-radius: 0.5rem; padding: 0.625rem 0.75rem; font-size: 0.75rem; line-height: 1.5; margin-bottom: 1rem; }
.pb-note i { flex: 0 0 auto; margin-top: 0.125rem; }
.pb-note-info { border: 1px solid #bae6fd; background: #f0f9ff; color: #0c4a6e; }
.pb-note-warn { border: 1px solid #fcd34d; background: #fffbeb; color: #92400e; }

/* Supplier */
.pb-sup { position: relative; }
.pb-sup-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60; margin-top: 0.25rem;
  max-height: 15rem; overflow-y: auto; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 0.5rem; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}
.pb-sup-row { display: block; width: 100%; text-align: left; padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.pb-sup-row:hover { background: #eef2ff; }
.pb-picked {
  display: flex; align-items: center; gap: 0.5rem; margin-top: 0.375rem;
  border: 1px solid #a7f3d0; background: #ecfdf5; border-radius: 0.5rem;
  padding: 0.4375rem 0.625rem; font-size: 0.8125rem; color: #065f46;
}
.pb-picked i { color: #059669; }

/* Isian rupiah: prefiks "Rp" menempel supaya tak ada yang mengetik "Rp" lagi */
.pb-rp { display: flex; align-items: stretch; }
.pb-rp > span {
  display: flex; align-items: center; padding: 0 0.625rem;
  border: 1px solid #e5e7eb; border-right: 0; border-radius: 0.5rem 0 0 0.5rem;
  background: #f9fafb; font-size: 0.8125rem; font-weight: 600; color: #6b7280;
}
.pb-rp > .field-input { border-radius: 0 0.5rem 0.5rem 0; flex: 1 1 auto; min-width: 0; }
.pb-rp-sm > span { padding: 0 0.4375rem; font-size: 0.75rem; }
.pb-rp-sm > .field-input { padding: 0.3125rem 0.5rem; font-size: 0.8125rem; }

/* Tombol unggah foto — dulu garis putus-putus tipis (kurang jelas sbg tombol).
   Kini terisi indigo muda + border solid + ikon kamera → jelas bisa diketuk. */
.pb-file {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  border: 1.5px solid #c7d2fe; background: #eef2ff; border-radius: 0.625rem;
  padding: 0.7rem 0.85rem; font-size: 0.8125rem; font-weight: 600; color: #4338ca;
}
.pb-file i { font-size: 1rem; }
.pb-file:hover { background: #e0e7ff; border-color: #a5b4fc; }
.pb-file:active { background: #c7d2fe; }
.pb-file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Langkah 2: katalog + keranjang */
.pb-two { display: flex; flex-direction: column; gap: 1rem; }
.pb-col { min-width: 0; }
.pb-collabel { display: flex; align-items: center; gap: 0.375rem; margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 700; color: #374151; }
.pb-badge {
  display: inline-block; min-width: 1.25rem; border-radius: 9999px;
  background: #4f46e5; color: #fff; padding: 0 0.375rem;
  font-size: 0.6875rem; font-weight: 700; text-align: center;
}
.pb-tabs { display: flex; gap: 0.375rem; overflow-x: auto; }
.pb-tabs::-webkit-scrollbar { display: none; }
.pb-tab {
  flex: 0 0 auto; border: 1px solid #e5e7eb; background: #fff; color: #6b7280;
  border-radius: 9999px; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 600;
}
.pb-tab[data-act="1"] { border-color: #4f46e5; background: #4f46e5; color: #fff; }
.pb-katalog { max-height: 26rem; overflow-y: auto; border: 1px solid #f1f5f9; border-radius: 0.5rem; padding: 0.5rem; background: #f9fafb; }
.pb-kosongtxt { padding: 1.25rem 0.5rem; text-align: center; font-size: 0.75rem; color: #6b7280; line-height: 1.5; }
.pb-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 640px) { .pb-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pb-card {
  position: relative; display: flex; flex-direction: column; gap: 0.25rem; text-align: left;
  border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #fff; padding: 0.5rem; min-width: 0;
}
.pb-card:hover { border-color: #a5b4fc; box-shadow: 0 1px 6px rgba(79, 70, 229, 0.12); }
.pb-card-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0.375rem; background: #f3f4f6; }
.pb-card-noimg { display: flex; align-items: center; justify-content: center; color: #d1d5db; font-size: 1.25rem; }
.pb-card-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 0.75rem; font-weight: 600; line-height: 1.25; color: #1f2937;
}
.pb-card-meta { font-size: 0.625rem; color: #9ca3af; }
.pb-card-cost { font-size: 0.6875rem; font-weight: 700; color: #4338ca; }
.pb-card-per { font-weight: 400; color: #9ca3af; }
/* Harga per satuan DASAR sebagai pembanding di bawah harga per kemasan.
   Sengaja block + lebih kecil: yang dipakai bertransaksi adalah harga per
   kemasan, ini cuma rujukan agar konversinya tetap terbaca. */
.pb-card-per2 {
  display: block; font-weight: 400; color: #9ca3af;
  font-size: 0.625rem; line-height: 1.3; margin-top: 0.0625rem;
}
.pb-card-qty {
  position: absolute; top: 0.375rem; right: 0.375rem; min-width: 1.375rem;
  border-radius: 9999px; background: #4f46e5; color: #fff;
  padding: 0.0625rem 0.375rem; font-size: 0.6875rem; font-weight: 700; text-align: center;
}
.pb-empty {
  display: flex; flex-direction: column; align-items: center; gap: 0.375rem;
  border: 1px dashed #e5e7eb; border-radius: 0.5rem; padding: 1.5rem 1rem;
  text-align: center; font-size: 0.75rem; line-height: 1.5; color: #9ca3af;
}
.pb-empty i { font-size: 1.5rem; opacity: 0.6; }

/* Baris keranjang */
.pb-line { border: 1px solid #e5e7eb; border-radius: 0.625rem; padding: 0.625rem; background: #fff; }
.pb-line-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.pb-line-name { font-size: 0.8125rem; font-weight: 600; color: #1f2937; line-height: 1.3; min-width: 0; }
.pb-line-del { flex: 0 0 auto; border-radius: 0.375rem; padding: 0.1875rem 0.375rem; color: #9ca3af; }
.pb-line-del:hover { color: #b91c1c; background: #fef2f2; }
.pb-line-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.pb-line-lab { flex: 0 0 5rem; font-size: 0.6875rem; color: #6b7280; }
.pb-line-uom { flex: 1 1 0; min-width: 0; padding: 0.3125rem 0.5rem; font-size: 0.75rem; }
.pb-line-uom-txt { font-size: 0.75rem; color: #6b7280; }
.pb-line-per { font-size: 0.6875rem; color: #9ca3af; white-space: nowrap; }
.pb-line-kalimat {
  margin-top: 0.5rem; border-radius: 0.375rem; background: #f8fafc;
  padding: 0.3125rem 0.5rem; font-size: 0.6875rem; line-height: 1.4; color: #475569;
}
.pb-line-satuan1 { color: #b45309; }
.pb-line-bot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; }
.pb-line-total { font-size: 0.9375rem; font-weight: 700; color: #111827; }
.pb-line-koreksi { margin-top: 0.5rem; border-top: 1px dashed #e5e7eb; padding-top: 0.5rem; }

/* Penambah/pengurang jumlah — mengetik angka di HP itu paling sering salah */
.pb-step { display: flex; align-items: stretch; }
.pb-step-b {
  width: 2rem; border: 1px solid #e5e7eb; background: #f9fafb;
  font-size: 1rem; font-weight: 700; color: #4b5563; line-height: 1;
}
.pb-step-b:first-child { border-radius: 0.5rem 0 0 0.5rem; }
.pb-step-b:last-child { border-radius: 0 0.5rem 0.5rem 0; }
.pb-step-b:hover { background: #eef2ff; color: #4338ca; }
.pb-step-i {
  width: 3.25rem; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;
  border-left: 0; border-right: 0; text-align: center;
  font-size: 0.875rem; font-weight: 600; color: #111827; padding: 0.3125rem 0;
}

/* Langkah 4: rekap seperti struk */
.pb-rk { border: 1px solid #e5e7eb; border-radius: 0.625rem; padding: 0.75rem; margin-bottom: 0.625rem; }
.pb-rk-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin-bottom: 0.5rem; padding-bottom: 0.375rem; border-bottom: 1px solid #f1f5f9;
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: #6b7280;
}
.pb-rk-row { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.8125rem; padding: 0.1875rem 0; }
.pb-rk-row > span:first-child { color: #6b7280; flex: 0 0 auto; }
.pb-rk-row > span:last-child { text-align: right; min-width: 0; color: #1f2937; }
.pb-rk-item { display: grid; grid-template-columns: 1fr auto; gap: 0 0.5rem; padding: 0.375rem 0; border-bottom: 1px dashed #f1f5f9; }
.pb-rk-item:last-child { border-bottom: 0; }
.pb-rk-item-n { grid-column: 1; grid-row: 1; font-size: 0.8125rem; font-weight: 600; color: #1f2937; min-width: 0; }
.pb-rk-item-q { grid-column: 1; grid-row: 2; font-size: 0.6875rem; color: #6b7280; }
/* Kolom & barisnya WAJIB disebut eksplisit. Tanpa itu penempatan otomatis grid
   menaruh nilai (yang membentang 2 baris) di kolom 1, sehingga harga tampil di
   kiri dan nama barang terlempar ke kanan. */
.pb-rk-item-t { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font-size: 0.8125rem; font-weight: 700; color: #111827; white-space: nowrap; }
.pb-rk-konv { color: #9ca3af; }
.pb-rk-total {
  display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 0.375rem;
  border-top: 1px solid #e5e7eb; padding-top: 0.375rem; font-size: 0.9375rem; font-weight: 700; color: #111827;
}

/* Kaki lengket: total + alasan + navigasi selalu terlihat */
.pb-foot {
  position: sticky; bottom: 0; z-index: 20; margin-top: 0.75rem;
  border-top: 1px solid #e5e7eb; background: rgba(255, 255, 255, 0.97);
  padding: 0.625rem 0 max(0.625rem, env(safe-area-inset-bottom, 0px));
  backdrop-filter: blur(4px);
}
.pb-totalbar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem;
  margin-bottom: 0.5rem; border-radius: 0.5rem; background: #eef2ff; padding: 0.4375rem 0.75rem;
}
.pb-totalbar-l { font-size: 0.75rem; font-weight: 600; color: #4338ca; }
.pb-totalbar-v { font-size: 1rem; font-weight: 700; color: #3730a3; }
.pb-alasan {
  margin-bottom: 0.5rem; border-radius: 0.5rem; border: 1px solid #fcd34d; background: #fffbeb;
  padding: 0.4375rem 0.625rem; font-size: 0.75rem; line-height: 1.4; color: #92400e;
}
.pb-nav { display: flex; gap: 0.5rem; }
.pb-nav-back { flex: 0 0 auto; }
.pb-nav-next { flex: 1 1 auto; font-weight: 700; }
.pb-nav-next:disabled { opacity: 0.45; cursor: default; }

/* PENTING — app.css dimuat SETELAH tailwind.css, jadi `display:flex` pada
   .pb-note / .pb-empty / .pb-totalbar mengalahkan `.hidden` milik Tailwind yang
   kespesifikannya sama tapi urutannya lebih dulu. Akibatnya kotak yang
   di-`classList.add("hidden")` tetap terlihat (kotak "outlet mitra" muncul
   padahal sumbernya Supplier). Satu aturan berkespesifikan lebih tinggi,
   dilingkupi .pb-wrap supaya tak menyentuh halaman lain. */
.pb-wrap .hidden { display: none; }

/* Layar lebar: langkah 2 jadi dua kolom (katalog | keranjang) */
@media (min-width: 900px) {
  .pb-two { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
  .pb-katalog { max-height: 30rem; }
  .pb-pane { padding: 1.25rem; }
}


/* Utilitas yang dipakai halaman Buat Pembelian tapi belum ikut tercetak di
   subset tailwind.css. Tanpa ini kelasnya diam-diam tak berefek — `lg:hidden`
   khususnya: tombol langkah 1-2-3 (khusus HP) akan ikut muncul di layar lebar
   padahal ketiga panelnya sudah tampil berdampingan. */
.leading-relaxed { line-height: 1.625; }
.border-sky-200 { border-color: #bae6fd; }
.text-sky-900 { color: #0c4a6e; }
.flex-\[1\.4\] { flex: 1.4 1 0%; }
@media (min-width: 1024px) { .lg\:hidden { display: none; } }

/* Thumbnail foto per-baris di /purchase-detail. Kelas Tailwind h-14/w-14 TAK ada
   di subset pra-kompilasi → dulu <img> tak terbatasi & render seukuran aslinya
   (foto kamera jadi raksasa). Dikunci di sini (bukan Tailwind) supaya pasti. */
.pd-thumb { width: 3.5rem; height: 3.5rem; flex: 0 0 auto; }
img.pd-thumb { object-fit: cover; }

/* Utilitas yang DIPAKAI halaman-halaman detail tapi TAK ADA di subset Tailwind
   pra-kompilasi (ketahuan saat penyelarasan 2026-08-01). Akibatnya selama ini:
   label baris info tanpa jarak kanan (pr-4), body menempel tepi (pb-6), tombol
   salin tanpa garis (border-indigo-100), tombol ringkasan sempit (!px-2.5). */
.pb-6 { padding-bottom: 1.5rem; }
.pr-4 { padding-right: 1rem; }
.border-indigo-100 { border-color: #e0e7ff; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.\!px-2\.5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
.\!py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.\!py-1\.5 { padding-top: 0.375rem !important; padding-bottom: 0.375rem !important; }

/* Overlay perbesar foto: `max-w-full`/`max-h-full`/`shadow-2xl` juga TAK ADA di
   subset, sehingga foto beresolusi tinggi MELIMPAH keluar layar saat diperbesar
   di /purchase-detail, /transfer-detail, /partner-order-detail. */
.max-w-full { max-width: 100%; }
.max-h-full { max-height: 100%; }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

/* ── Picker Outlet PWA (baris sendiri di bawah header) ──────────────────────
   Owner 2026-08-02: di HP tombol outlet yang menumpang di header terlalu sempit.
   Dibuat baris penuh, ikut sticky menempel di bawah header, dan cukup besar
   untuk disentuh. Ditulis eksplisit (bukan kelas Tailwind) karena subset
   pra-kompilasi tak memuat semua utilitas yang dibutuhkan. */
.beli-outletbar {
  /* Menempel TEPAT di bawah header. Tinggi header = padding-atas
     max(10px, safe-area) + logo 34px + padding-bawah 10px + border 1px,
     jadi offsetnya ikut safe-area (ponsel berponi) — bukan angka tetap. */
  position: sticky; top: calc(45px + max(10px, env(safe-area-inset-top, 0px))); z-index: 25;
  background: #fff; border-bottom: 1px solid #e5e7eb;
  padding: 8px 12px;
}
.beli-outlet-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 10px 12px; cursor: pointer; text-align: left; color: #1f2937;
  font-size: 13.5px; font-weight: 600; min-height: 42px;
}
.beli-outlet-btn:hover { background: #f1f5f9; }
.beli-outlet-btn > .fa-store { color: #4f46e5; flex: 0 0 auto; }
.beli-outlet-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beli-outlet-caret { color: #94a3b8; flex: 0 0 auto; font-size: 12px; }
@media (min-width: 640px) { .beli-outletbar { padding: 10px 18px; } }

/* ── Tooltip "sumber data" ──────────────────────────────────────────────────
   Dipakai untuk angka TURUNAN (dihitung ulang tiap render, tak ada di DB),
   mis. "Harga/satuan beli" di Bahan Baku. Kotaknya ditempel ke <body> dengan
   position:fixed supaya tak terpotong wadah tabel yang overflow-x:auto.
   Kelasnya ditulis di sini, BUKAN utilitas Tailwind — build Tailwind SCM
   memakai subset pra-kompilasi, kelas baru diam-diam tak bergaya. */
.src-tip-anchor {
  border-bottom: 1px dotted #9ca3af;
  cursor: help;
}
.src-tip-anchor:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; border-radius: 3px; }
.src-tip {
  position: fixed; left: 0; top: 0; z-index: 3000;
  max-width: 310px; width: max-content;
  background: #111827; color: #e5e7eb;
  font-size: 11.5px; line-height: 1.55; font-weight: 400;
  text-align: left; white-space: normal;
  padding: 9px 11px; border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease;
}
.src-tip-on { opacity: 1; visibility: visible; }
.src-tip b { color: #fff; font-weight: 700; }
.src-tip-h {
  display: block; color: #fff; font-weight: 700;
  font-size: 11.5px; margin-bottom: 6px;
}
.src-tip-r { display: flex; justify-content: space-between; gap: 14px; }
.src-tip-n { color: #9ca3af; flex: 0 1 auto; }
.src-tip-sep { display: block; border-top: 1px solid #374151; margin: 6px 0; }
.src-tip-note {
  display: block; margin-top: 7px; color: #9ca3af;
  font-size: 10.5px; line-height: 1.5;
}
/* Baris pendukung di dalam tooltip: keterangan kecil di bawah sebuah nilai,
   dan peringatan bila dua sumber angka saling bertentangan. */
.src-tip-sub {
  display: block; color: #9ca3af; font-size: 10px;
  line-height: 1.45; margin: 1px 0 5px; padding-left: 2px;
}
.src-tip-warn {
  display: block; margin-top: 7px; padding: 6px 8px;
  background: rgba(180, 83, 9, .22); border-left: 2px solid #f59e0b;
  border-radius: 0 5px 5px 0; color: #fde68a;
  font-size: 10.5px; line-height: 1.5;
}
.src-tip-warn i { margin-right: 4px; }

/* ── Kanban Dashboard Operasional ───────────────────────────────────────────
   Tiga kolom (Pembelian / Transfer / Pesanan mitra). Di HP kolomnya lebih
   lebar dari layar supaya bisa di-swipe menyamping (scroll-snap); di desktop
   ketiga kolom muat berdampingan. Tinggi kolom diikat ke viewport supaya
   tumpukan kartu di dalam kolom yang scroll, bukan halaman. */
.ops-kanban {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.ops-kanban-col {
  scroll-snap-align: start;
  flex: 1 0 min(85vw, 20rem);
  min-width: min(85vw, 20rem);
  max-width: 24rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-top-width: 4px;
  border-radius: 1rem;
  padding: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100dvh - 11rem);
}
.ops-kanban-col .ops-kanban-cards {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-right: 0.125rem;
}
.ops-kanban-card {
  display: block;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.75rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ops-kanban-card:hover {
  border-color: #a5b4fc;
  box-shadow: 0 1px 4px rgba(99, 102, 241, 0.12);
}
@media (min-width: 900px) {
  .ops-kanban {
    scroll-snap-type: none;
  }
  .ops-kanban-col {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
}

/* Opname operasional — lembar kerja hitung fisik (blind count) */
.opn-wrap { max-width: 40rem; margin: 0 auto; padding-bottom: 1.5rem; }
.opn-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.opn-title { font-size: 1.125rem; font-weight: 700; color: #111827; line-height: 1.2; }
.opn-sub { font-size: 0.8125rem; color: #6b7280; margin-top: 0.25rem; line-height: 1.4; }
.opn-tabs { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; background: #f3f4f6; border-radius: 0.625rem; padding: 0.25rem; }
.opn-tab {
  flex: 1 1 0; border: 0; background: transparent; border-radius: 0.5rem;
  padding: 0.5rem 0.75rem; font-size: 0.8125rem; font-weight: 600; color: #6b7280;
}
.opn-tab[aria-selected="true"] { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.opn-search-row { display: flex; gap: 0.5rem; align-items: stretch; }
.opn-search { width: 100%; }
.opn-scan-btn { flex: 0 0 auto; min-width: 2.75rem; }
.opn-kind {
  display: inline-block; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.04em;
  border-radius: 0.25rem; padding: 0.05rem 0.35rem; vertical-align: middle; margin-right: 0.25rem;
}
.opn-kind-bb { background: #e0f2fe; color: #0369a7; }
.opn-kind-hp { background: #ede9fe; color: #6d28d9; }
.opn-kind-pr { background: #fef3c7; color: #92400e; }  /* Produk — halaman Penyesuaian Stok */
.opn-scan-overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(17, 24, 39, 0.8);
  display: flex; align-items: stretch; justify-content: center; padding: 0;
}
.opn-scan-box {
  width: min(28rem, 100%); margin: auto; background: #111827; color: #fff; border-radius: 0.75rem;
  padding: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem;
}
.opn-scan-title { font-size: 0.9375rem; font-weight: 600; text-align: center; }
.opn-scan-hint { font-size: 0.75rem; color: #9ca3af; text-align: center; margin: 0; }
.opn-scan-foto { display: block; text-align: center; cursor: pointer; }
.opn-scan-reader { width: 100%; min-height: 14rem; overflow: hidden; border-radius: 0.5rem; background: #000; }
.opn-scan-reader video { width: 100% !important; height: auto !important; object-fit: cover; }
.opn-scan-lock { overflow: hidden; }
@media (max-width: 640px) {
  .opn-scan-overlay { padding: 0; }
  .opn-scan-box {
    width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0;
    padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
  }
  .opn-scan-reader { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; }
}
.opn-filters { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.75rem; }
.opn-chip {
  border: 1px solid #e5e7eb; background: #fff; border-radius: 9999px;
  padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 600; color: #4b5563;
}
.opn-chip.is-on { border-color: #4f46e5; background: #eef2ff; color: #3730a3; }
.opn-list { display: flex; flex-direction: column; gap: 0.5rem; }
.opn-card {
  display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 0.625rem; align-items: center;
  border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 0.625rem; background: #fff;
}
.opn-card-done { border-color: #a7f3d0; background: #f0fdf4; }
.opn-card-img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 0.5rem; background: #f3f4f6; }
.opn-card-noimg { display: flex; align-items: center; justify-content: center; color: #d1d5db; }
.opn-card-name { font-size: 0.875rem; font-weight: 600; color: #111827; line-height: 1.3; }
.opn-card-meta { font-size: 0.6875rem; color: #9ca3af; margin-top: 0.125rem; }
.opn-card-hasil { font-size: 0.6875rem; font-weight: 600; margin-top: 0.25rem; line-height: 1.35; }
.opn-card-btn { flex: 0 0 auto; font-size: 0.75rem; padding: 0.5rem 0.75rem; white-space: nowrap; }
.opn-badge {
  display: inline-block; margin-top: 0.25rem; margin-right: 0.25rem;
  font-size: 0.625rem; font-weight: 700; border-radius: 9999px;
  padding: 0.125rem 0.5rem; background: #f3f4f6; color: #6b7280;
}
.opn-badge-telat { background: #fef3c7; color: #92400e; }
.opn-badge-aman { background: #ecfdf5; color: #047857; }
.opn-empty {
  text-align: center; padding: 2rem 1rem; color: #6b7280; font-size: 0.875rem; line-height: 1.45;
}
.opn-empty i { display: block; font-size: 1.5rem; color: #d1d5db; margin-bottom: 0.5rem; }
.opn-blind-note {
  font-size: 0.75rem; line-height: 1.45; color: #3730a3;
  background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 0.5rem; padding: 0.625rem 0.75rem;
}
.opn-blind-img { width: 100%; max-height: 8rem; object-fit: contain; border-radius: 0.5rem; background: #f9fafb; margin: 0.5rem 0; }
.opn-blind-sku { font-size: 0.75rem; color: #6b7280; margin: 0.25rem 0 0.75rem; }
.opn-hint { font-size: 0.6875rem; color: #9ca3af; margin-top: 0.25rem; line-height: 1.4; }
.opn-stepper { display: flex; align-items: stretch; gap: 0.5rem; }
.opn-step {
  flex: 0 0 3rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #f9fafb;
  font-size: 1.5rem; font-weight: 600; color: #374151;
}
.opn-qty { flex: 1 1 0; text-align: center; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; height: 3.25rem; }
.opn-hasil-nama { font-size: 1rem; font-weight: 700; color: #111827; margin-bottom: 0.75rem; }
.opn-hasil-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 0.75rem; }
.opn-hasil-grid-sm { margin: 0.5rem 0; }
.opn-hasil-grid dt { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.04em; color: #9ca3af; }
.opn-hasil-grid dd { font-size: 0.9375rem; font-weight: 700; color: #111827; }
.opn-diff-min { color: #b91c1c !important; }
.opn-diff-plus { color: #047857 !important; }
.opn-diff-ok { color: #6b7280 !important; }
.opn-hist { display: flex; flex-direction: column; gap: 0.5rem; }
.opn-hist-card { border: 1px solid #e5e7eb; border-radius: 0.75rem; padding: 0.75rem; background: #fff; }
.opn-hist-top { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; font-size: 0.8125rem; }
.opn-hist-top span { font-size: 0.6875rem; color: #9ca3af; white-space: nowrap; }
.opn-hist-who { font-size: 0.6875rem; color: #6b7280; margin-top: 0.125rem; }
.opn-hist-note { font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem; }
.opn-hist-foto { color: #4f46e5; font-weight: 600; }
@media (max-width: 480px) {
  .opn-card { grid-template-columns: 2.75rem 1fr auto; gap: 0.5rem; padding: 0.5rem; }
  .opn-card-img { width: 2.75rem; height: 2.75rem; }
  .opn-card-btn { font-size: 0.6875rem; padding: 0.4375rem 0.625rem; }
}

/* ── Pengeluaran Rutin (2026-08-23) ────────────────────────────────────────
   Ditulis sebagai KOMPONEN, bukan rangkaian utilitas Tailwind: `tailwind.css`
   di sini adalah SUBSET, dan utilitas yang dibutuhkan lencana/tab ini
   (-top-1, -right-1, min-w-[1.1rem], border-b-2, border-indigo-600,
   border-transparent, bg-rose-600) TIDAK ADA di dalamnya — memakainya berarti
   gaya hilang diam-diam tanpa galat apa pun. Nama ber-awalan scm- supaya tak
   bertabrakan dengan utilitas mana pun. */
.scm-jt-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background: #e11d48;          /* rose-600 */
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
}
/* Lencana kuning bila belum ada yang telat — mendesak, tapi belum merah. */
.scm-jt-badge.scm-jt-akan { background: #d97706; }  /* amber-600 */

.scm-tab {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  border-bottom: 2px solid transparent;
  background: none;
}
.scm-tab-aktif { color: #4338ca; border-bottom-color: #4f46e5; }
.scm-nonaktif { opacity: 0.5; }

/* Angka yang bisa diklik pada tabel Dashboard Gudang (2026-08-24).
   Komponen, bukan rangkaian utilitas: `underline`, `decoration-dotted`,
   `underline-offset-2`, dan `hover:opacity-70` tak ada di subset tailwind.css
   yang di-build — memakainya berarti angkanya terlihat biasa saja dan pengguna
   tak pernah tahu itu bisa diklik. Warna diwarisi dari sel supaya kode warna
   status (hijau/kuning/merah) tetap terbaca. */
.scm-drill {
  color: inherit;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-bottom: 1px dotted currentColor;
}
.scm-drill:hover { opacity: 0.65; }

/* Ceklis outlet pada tabel Dashboard Gudang (2026-08-24). Ditaruh DI DALAM sel
   Outlet, bukan sebagai kolom baru: kolom pertama itu sticky left-0, dan
   menyisipkan kolom di depannya menggeser offset lengketnya. */
.scm-cek {
  vertical-align: baseline;
  margin-right: 0.4rem;
  cursor: pointer;
  accent-color: #4f46e5;
}

/* Pita kartu KPI Dashboard Supply Chain (2026-08-27).
   Ditulis di sini, BUKAN mengandalkan Tailwind: `tailwind.css` adalah subset
   pra-kompilasi tanpa build step, dan tak ada aturan apa pun yang menyasar
   641–767px — zona mati antara batas `.scm-dense` (640px) dan prefix `md:`
   (768px). Tanpa aturan ini, di lebar tablet kecil kartu tetap 2 kolom
   sementara tipografi & padding sudah kembali ke ukuran desktop. */
@media (min-width: 641px) and (max-width: 767.98px) {
  .scm-kpi-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Strip "Sumber data" per halaman — dipindahkan dari modul CRM
   (2026-08-27). Struktur & kelasnya sengaja sama supaya kedua modul
   terbaca sebagai satu produk; hanya warna dasarnya digeser dari ungu CRM
   ke indigo SCM. Berbeda dari .src-tip* di atas: itu tooltip per ANGKA,
   ini keterangan per HALAMAN. */
.src-note {
  background: #f5f7ff;
  border: 1px solid #e0e7ff;
  border-radius: 0.625rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.src-note-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.7rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #5b21b6;
}

.src-note-head:hover {
  background: #f5f0ff;
}

.src-note-icon {
  flex: 0 0 auto;
  color: #7c3aed;
}

.src-note-ringkas {
  flex: 1 1 auto;
  min-width: 0;
  color: #4c1d95;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.src-note-lead {
  font-weight: 600;
}

.src-note-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
  color: #7c3aed;
  white-space: nowrap;
}

.src-note-toggle .fa-chevron-down {
  transition: transform 0.15s ease;
  font-size: 0.65rem;
}

.src-note-head[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}

.src-note-body {
  background: #fff;
  border-top: 1px solid #e0e7ff;
  padding: 0.55rem 0.7rem 0.65rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #334155;
}

.src-note-row {
  display: flex;
  gap: 0.75rem;
  padding: 0.28rem 0;
}

.src-note-row + .src-note-row {
  border-top: 1px dashed #f1f5f9;
}

.src-note-label {
  flex: 0 0 9.5rem;
  font-weight: 600;
  color: #6d28d9;
}

.src-note-value {
  flex: 1 1 auto;
  min-width: 0;
}

.src-note-value p {
  margin: 0;
}

/* Tailwind preflight menghapus bullet & indentasi bawaan <ul> — dikembalikan
   di sini supaya daftar "dari mana asalnya" tetap terbaca sebagai daftar. */
.src-note-list {
  margin: 0;
  padding-left: 1.05rem;
  list-style: disc;
}

.src-note-list li {
  margin: 0.12rem 0;
}

@media (max-width: 640px) {
  .src-note-row {
    flex-direction: column;
    gap: 0.15rem;
  }
  .src-note-label {
    flex: none;
  }
}

/* Sparkline batang Dashboard Supply Chain (2026-08-27).
   CSS murni, bukan Chart.js: satu grafik kecil di halaman PENDARATAN tak
   sepadan dengan ongkos memuat pustaka grafik saat tampilan pertama. Pola sama
   dengan bar Payment Mix di Dashboard Kasir. */
.scm-spark {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 22px;
  margin: 0.25rem 0 0.35rem;
}
.scm-spark-b {
  flex: 1 1 0;
  min-width: 1px;
  background: #c7d2fe;
  border-radius: 1px 1px 0 0;
  transition: background 0.12s;
}
.scm-spark-b:hover { background: var(--scm-accent); }

/* Pemilih rentang di toolbar Dashboard Supply Chain. `dateRangeField` dibuat
   untuk baris filter selebar halaman (isinya flex-1), jadi di toolbar yang
   padat ia melebar dan mendorong tombol Muat ke baris sendiri. Dikurung di
   sini, bukan diubah di helper-nya — helper itu dipakai belasan panel lain
   yang justru mengandalkan perilaku melebar. */
.scm-dash-range { display: inline-flex; width: 11.5rem; flex: none; }
.scm-dash-range > .field-input { width: 100%; }

/* Halaman Penyesuaian Stok. Sisanya (kartu, pencarian, overlay scan) memang
   sengaja memakai kelas .opn-* milik Opname — dua layar ini kembar bentuknya.
   Prefiks .pys-* dipakai HANYA untuk yang khas halaman ini: .opn-card-done
   sudah terpakai Opname (kartu hijau "sudah dihitung"), jadi nama itu tak boleh
   dipinjam ulang dengan arti lain. */
.pys-done {
  font-size: 0.75rem; color: #4b5563; background: #f9fafb;
  border: 1px solid #e5e7eb; border-radius: 0.375rem;
  padding: 0.375rem 0.5rem; margin-bottom: 0.25rem;
}
.pys-head { margin-bottom: 0.5rem; }