/* Mikode POS — UI/UX Fase 2: halaman Data Barang (barang.html) saja.
   Dimuat SETELAH css/mikode-theme.css dari barang.html. Semua warna,
   spasi, ukuran huruf & radius dari token design system. Selector
   dibatasi body.pg-barang agar halaman lain tidak terpengaruh. */
body.pg-barang{
  --brg-muted:var(--muted,var(--text-muted,#44596D));
  --brg-faint:var(--faint,var(--text-faint,#5A6E82));
}

/* ---------- Shell: harmonisasi pola .ui-side/.ui-topbar dengan CSS lama
   (dicerminkan dari css/dashboard-ui.css Fase 1) ---------- */
@media (min-width:768px) and (max-width:980px){
  body.pg-barang .ui-side{position:sticky;transform:none}
}
body.pg-barang .mobile-header.ui-topbar{
  background:var(--side-bg,#0A1F33);
  color:var(--side-ink,#fff);
  border-bottom:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  min-height:0;
}
@media (min-width:768px){
  body.pg-barang .mobile-header.ui-topbar{display:none}
}
body.pg-barang .ui-tenant-chip span:empty{display:none}
body.pg-barang .ui-tenant-chip:not(:has(span:not(:empty))){display:none}
body.pg-barang .btn-toggle-sidebar,
body.pg-barang .btn-close-sidebar{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2,8px);
}
body.pg-barang .btn-toggle-sidebar svg,
body.pg-barang .btn-close-sidebar svg{width:18px;height:18px;flex-shrink:0}
body.pg-barang .theme-toggle-btn svg{width:20px;height:20px;display:block}

/* Modal statis halaman ini dibuka JS lewat style.display inline (pola
   lama .modal), jadi override display:flex dari .ui-modal tema. */
body.pg-barang .modal.ui-modal{display:none}

/* ---------- Kepala halaman ---------- */
body.pg-barang .brg-page-title{font-size:var(--fs-20,20px)}

/* Form tambah menu: .form-row sudah mengatur jarak antarbaris, jadi
   margin bawah bawaan .ui-field di dalamnya dimatikan agar ritme lama
   (16px) tidak berlipat. */
body.pg-barang .form-row .ui-field{margin-bottom:0}

/* ---------- Tabel barang (.ui-table di dalam .ui-table-wrap) ---------- */
body.pg-barang .brg-table-wrap{margin-bottom:var(--sp-5,20px)}
body.pg-barang .brg-hpp{color:var(--brg-muted)}
body.pg-barang .brg-harga{font-weight:700;color:var(--success-text,var(--success,#17803D))}
body.pg-barang .brg-tak-dilacak{color:var(--brg-faint)}
body.pg-barang .brg-aksi-kosong{color:var(--brg-faint)}
body.pg-barang .brg-foto-klik{cursor:pointer}
body.pg-barang .brg-skel-line{display:block;width:100%;height:14px}
@media (max-width:640px){
  body.pg-barang .ui-table td:has(.ui-empty){display:block;text-align:center}
}

/* Tombol status Habis/Tersedia: ikon SVG (UI.ikon) + teks */
body.pg-barang .btn-toggle-habis{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-1,4px);
}
body.pg-barang .btn-toggle-habis svg{width:14px;height:14px;flex-shrink:0}

/* Tombol hapus foto (bulat kecil di sudut foto) & hapus kategori: ikon SVG */
body.pg-barang .btn-remove-photo svg{width:14px;height:14px;display:block}
body.pg-barang .kat-chip button svg{width:12px;height:12px;display:block}

/* Tombol Edit di baris tabel */
body.pg-barang .btn-edit-row-item svg{width:16px;height:16px}

/* ---------- Modal edit menu ---------- */
body.pg-barang .brg-modal-content{max-width:460px}
body.pg-barang .brg-modal-title{margin-top:0}
body.pg-barang .brg-modal-kode{
  margin:0 0 var(--sp-3,12px);
  color:var(--brg-muted);
  font-size:var(--fs-13,13px);
}
body.pg-barang .brg-form-error{
  color:var(--danger-text,var(--danger,#B42318));
  font-size:var(--fs-13,13px);
  margin:0;
}
body.pg-barang .brg-form-error[hidden]{display:none!important}
body.pg-barang .brg-modal-actions{
  margin-top:var(--sp-3,12px);
  justify-content:space-between;
}
body.pg-barang .brg-modal-actions-right{display:flex;gap:var(--sp-2,8px)}

/* ---------- Modernisasi v47: unggah foto, sakelar stok, chip kategori ---------- */
/* Input berkas menjadi area unggah putus-putus dengan tombol pilih bergaya. */
body.pg-barang input[type="file"].ui-input{
  padding:10px 12px;height:auto;min-height:52px;cursor:pointer;
  border:1.5px dashed var(--line-strong,rgba(10,31,51,.25));
  border-radius:var(--r-md,12px);background:var(--bg-tint,#F2F7FB);
  font-size:var(--fs-13,13px);color:var(--muted,var(--text-muted,#44596D));
}
body.pg-barang input[type="file"].ui-input::file-selector-button{
  margin-right:12px;padding:9px 16px;border:0;border-radius:9px;cursor:pointer;
  background:var(--brand,#144262);color:#fff;font:inherit;font-size:var(--fs-13,13px);font-weight:700;
}
body.pg-barang input[type="file"].ui-input:focus{
  border-color:var(--accent,#3E9BE6);outline:3px solid var(--accent-soft,rgba(62,155,230,.14));
}

/* Kotak centang "lacak stok" menjadi sakelar geser modern. */
body.pg-barang .ui-check input[type="checkbox"]{
  appearance:none;-webkit-appearance:none;flex:none;
  /* !important: gaya warisan di dalam @media mengunci ukuran kotak centang
     lama (16–22px) — sakelar harus menang agar tampil sebagai pil geser. */
  width:42px!important;height:24px!important;margin:0;border-radius:99px;cursor:pointer;position:relative;
  background:var(--surface-2,var(--surface,#EAF1F7));border:1px solid var(--line-strong,rgba(10,31,51,.18));
  transition:background .18s ease,border-color .18s ease;vertical-align:middle;
}
body.pg-barang .ui-check input[type="checkbox"]::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(10,31,51,.3);transition:left .18s ease;
}
body.pg-barang .ui-check input[type="checkbox"]:checked{
  background:var(--brand,#144262);border-color:var(--brand,#144262);
}
body.pg-barang .ui-check input[type="checkbox"]:checked::after{left:20px}
body.pg-barang .ui-check input[type="checkbox"]:focus-visible{
  outline:3px solid var(--accent-soft,rgba(62,155,230,.14));outline-offset:2px;
}

/* Kelola Kategori: chip rapat dengan tombol hapus hantu. */
body.pg-barang #daftarKategori{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
body.pg-barang .kat-chip{
  margin:0;padding:7px 8px 7px 14px;background:var(--surface,#EAF1F7);
  border-color:var(--line,rgba(10,31,51,.10));
}
body.pg-barang .kat-chip button{
  border:0;background:transparent;transition:background .15s ease;
}
body.pg-barang .kat-chip button:hover{background:var(--danger-soft,#FEE2E2)}