/* ==========================================================================
   Modul Restock — katalog SKU + pilih-untuk-restock + output Excel/PDF.
   Memakai ulang .month-tab, .impor-card, .btn-*, .confirm-modal, .free-print.
   ========================================================================== */

/* Label kecil di sebelah "SKU Emily 3 SKU" dst - cuma terisi teks kalau
   skuView BUKAN 'normal' (lihat renderSkuList), jadi kondisi awal
   (skuView='normal') tidak menampilkan apa-apa di sini sama sekali. */
.restock-view-label { font-size: 0.7rem; font-weight: 700; color: var(--red); background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: var(--radius-full); padding: 2px 9px; }
.restock-view-label:empty { display: none; }

/* ---- Pilihan supplier (tabs) --------------------------------------------- */
#supplier-tabs { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 4px 0; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
/* nowrap (bukan wrap) - dengan 3 elemen di baris ini sekarang (+, Lihat
   Semua, cari), membiarkan itu bebas wrap di layar sempit malah membuat
   cari jatuh ke baris sendiri (dilaporkan kejadian nyata di HP). Semuanya
   dibuat cukup kecil untuk selalu muat satu baris; search yang mengalah
   duluan (flex-shrink turun sampai min-width kecil) kalau ruangnya sempit. */
/* margin-bottom negatif - masih ada gap:12px section-nya (main.css) yang
   dulu 12px punya baris ini menumpuk jadi 24px, sudah dirapatkan sekali
   ke 14px tapi masih kelihatan renggang dari "Lihat Semua", jadi ditarik
   lagi sampai jaraknya cuma sisa beberapa px saja. */
.supplier-input-row { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; margin-bottom: -6px; }
.supplier-input-row .impor-input { flex: 1 1 auto; min-width: 160px; }
.supplier-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

/* "+" tambah supplier & Lihat Semua diperkecil dan dikunci tidak melebar
   (flex:0 0 auto) - skoped lewat id, bukan .month-tab-add/.btn-secondary
   langsung, karena keduanya dipakai di banyak halaman lain juga. id lebih
   spesifik dari class jadi ini otomatis menang atas aturan
   .supplier-input-row .btn-secondary di laporan-impor.css yang tadinya
   melebarkan tombol ini penuh di layar sempit. */
#btn-add-supplier { width: 28px; height: 28px; flex: 0 0 auto; }
#btn-add-supplier svg { width: 14px; height: 14px; }
#btn-see-all { padding: 6px 10px; font-size: 0.72rem; font-weight: 700; flex: 0 0 auto; white-space: nowrap; }

/* Cari SKU - mengisi sisa ruang di baris "+ Lihat Semua" (dulu kosong).
   Bentuknya sama seperti .appbar-search di header, tapi versi sendiri -
   .appbar-search disembunyikan di layar sempit (display:none di bawah
   860px), sedangkan pencarian di sini harus tetap ada di HP juga.
   min-width kecil (bukan 140px) supaya ini yang menyusut duluan dan
   baris tidak terpaksa wrap di HP yang sempit. */
.restock-sku-search {
  display: flex; align-items: center; gap: 6px; flex: 1 1 40px; min-width: 40px;
  background: var(--card); border: 2px solid #c3cad5; border-radius: var(--radius-full);
  padding: 6px 12px; color: var(--muted); overflow: hidden; cursor: text;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
/* Disorot kursor: garis menggelap & sedikit bayangan. Saat diketik (fokus):
   garis merah aksen + cincin lembut, ikon kaca pembesar ikut merah. */
.restock-sku-search:hover { border-color: #8e99aa; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10); }
.restock-sku-search:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(228, 33, 43, 0.14);
  color: var(--red);
}
.restock-sku-search svg { width: 14px; height: 14px; flex-shrink: 0; transition: color .18s ease; }
.restock-sku-search input { border: none; background: none; outline: none; width: 100%; min-width: 0; font: inherit; font-size: 0.78rem; color: var(--ink); }
/* Chip supplier: kursor default (tanda panah) sampai ditekan; tangan di-set via JS saat drag */
#supplier-tabs .month-tab { cursor: default; }
.month-tab.dragging { opacity: .5; }
.restock-no-supplier { font-size: 0.85rem; color: var(--muted); }

/* ---- Ringkasan pilihan ----------------------------------------------------- */
/* Section ini ditarik lebih rapat ke tetangganya (atas & bawah) lewat
   margin negatif - .content (main.css) memberi gap 28-36px rata ke SEMUA
   section langsung di bawahnya, jadi ini satu-satunya cara memampatkan
   baris tombol ini tanpa mengubah jarak section lain di seluruh aplikasi.
   -14px sebelumnya kelihatan terlalu rapat sampai mepet ke tab supplier
   di atasnya - dikendurkan ke -4px, jaraknya lebih longgar dan seimbang
   di kedua sisi tapi tetap lebih rapat dari 28-36px bawaan. */
.restock-toolbar-section { margin-top: -4px; margin-bottom: -4px; }
.restock-select-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 0.86rem; color: var(--ink-soft);
}
.restock-select-summary strong { color: var(--red); font-weight: 800; font-size: 1rem; }


/* ---- Kartu SKU ------------------------------------------------------------ */
/* Kartu SKU dibagi menyamping jadi 2 kolom: kolom kiri (.restock-card-main-col)
   memuat nama/gambar + chip harga + marketplace bertumpuk, kolom kanan
   (.restock-sku-right) memuat tombol aksi - jadi lebar kartu benar-benar
   terpakai (chip harga & marketplace ikut melebar ke kanan mengisi ruang),
   bukan cuma kolom kiri sempit dengan sisa kartu kosong. Histori Harga tetap
   di luar grid ini, selebar kartu penuh di bawah. Padding kiri/kanan/atas/
   bawah kartu sekarang satu sumber di .restock-card-grid, jadi
   .impor-card-main & .sku-row-head tidak lagi bawa padding sendiri (dulu
   dobel jadi salah satu sumber kenapa areanya berantakan). */
.restock-card-grid { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px; }
.restock-card-main-col { flex: 1 1 auto; min-width: 0; }
.restock-card-main-col .impor-card-main { padding: 0; }
.restock-card-main-col .sku-row-head { padding: 0; }

/* DIHAPUS di sini: .restock-sku-main / .restock-sku-left /
   .restock-sku-img (58px) / .restock-sku-info / .restock-sku-nama
   (0.92rem) / .restock-sku-sku / .restock-sku-meta - dulu dipakai oleh
   SALINAN markup kartu kedua yang cuma dipakai mode 'extend'. Salinan
   itu sudah dilebur: 'normal' & 'extend' sekarang memakai satu template
   yang sama persis (lihat renderSkuList di js/restock.js), jadi aturan
   ukuran tandingan ini tidak cuma mati - membiarkannya berarti
   menyediakan lagi jalan supaya ukuran gambar/font/tombol ikut berubah
   waktu ganti tampilan, persis keluhan yang baru saja diperbaiki. */
.restock-sku-noimg { color: var(--muted); font-weight: 800; }
/* Beda dari "?" (belum ada gambar sama sekali) - "!" oranye ini muncul
   kalau gambar SUDAH tersimpan tapi gagal dimuat (lihat restockImgError
   di restock.js). Title-nya berisi URL yang gagal, bisa dilihat lewat
   tekan-lama di HP. */
.restock-sku-noimg--broken { color: #D97706; }

.restock-terjual, .restock-stok { font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-full); white-space: nowrap; }
.restock-terjual { background: #ECFDF5; color: #059669; }
.restock-stok { background: var(--bg); color: var(--muted); }

.restock-sku-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.restock-sku-harga { font-size: 0.95rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.restock-sku-lama { font-size: 0.68rem; color: var(--muted); white-space: nowrap; }

.restock-sku-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.restock-qty-btn {
  border: 1px solid var(--border); background: var(--card); color: var(--ink-soft);
  font-size: 0.78rem; font-weight: 700; padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer;
}
.restock-qty-btn:hover { border-color: var(--red); color: var(--red); background: #FDEBEC; }
.restock-qty-input { max-width: 90px; }

/* ---- Riwayat order --------------------------------------------------------- */
.restock-order-date { font-size: 0.74rem; color: var(--muted); margin-left: 10px; }

.history-btn { position: relative; }
/* ---- Daftar isi restock bergaya "keranjang" (dipakai modal "Atur
   Jumlah" - openAturJumlah - di js/restock.js & js/restock-riwayat.js).
   "Atur Jumlah" (dipakai bareng js/restock.js & js/restock-riwayat.js,
   masing-masing salinannya sendiri per konvensi modul ini). Dulu satu
   baris rata mendatar per SKU (nama+SKU, kotak angka polos, harga
   satuan, subtotal, tombol x - berdesakan tanpa label, gampang
   membingungkan karena angka mana artinya apa cuma bisa ditebak dari
   posisi). Sekarang 2 baris per SKU: (1) nama + tombol keluarkan jelas
   di kanan atas, (2) stepper jumlah (tombol -/+, bukan cuma kotak angka
   polos - lebih gampang disentuh) berdampingan dengan "Harga satuan"/
   "Subtotal" yang masing-masing diberi label. */
/* Popup Atur Jumlah ~3/4 layar di PC; baris-barisnya disusun dua kolom
   kalau lebar, supaya ruangnya terpakai (bukan satu baris memanjang). */
.confirm-modal--cart { max-width: 76vw; width: 76vw; max-height: calc(100vh - 48px); }
.cart-list { display: grid; grid-template-columns: 1fr; gap: 8px; max-height: calc(100vh - 230px); overflow: auto; margin-bottom: 10px; align-content: start; }
@media (min-width: 900px) { .cart-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Foto barang di baris Atur Jumlah. */
.aj-row-img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--bg); border: 1px solid var(--border); }
.aj-row-img--kosong { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-weight: 700; }
.aj-row-top .aj-row-info { flex: 1; }
.cart-total { display: flex; justify-content: space-between; align-items: center; padding: 8px 2px; font-size: 0.9rem; color: var(--ink-soft); }
.cart-total strong { font-size: 1.1rem; color: var(--red); }

.aj-row { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 12px; }
.aj-row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.aj-row-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aj-row-name { font-size: 0.88rem; font-weight: 700; color: var(--ink); overflow-wrap: break-word; }
.aj-row-sku { font-size: 0.72rem; color: #3355A6; }
/* Tombol "keluarkan dari list" (bukan cuma set jumlah ke 0 - ada aksi
   eksplisit yang langsung membuang barisnya), selalu di pojok kanan
   atas baris supaya tidak bentrok dengan stepper jumlah di bawahnya. */
.aj-row-remove {
  border: 0; background: transparent; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer;
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
}
.aj-row-remove:hover { background: #FDEBEC; color: var(--red-dark); }
.aj-row-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Stepper -/angka/+ - satu kotak pil terbungkus, bukan input angka polos
   sendirian (dulu susah disentuh persis & tidak jelas ini kolom apa). */
.aj-qty-stepper { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-full); overflow: hidden; flex-shrink: 0; }
.aj-qty-btn {
  width: 34px; height: 34px; border: 0; background: var(--bg); color: var(--ink);
  font-size: 1.05rem; font-weight: 700; font-family: var(--sans); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.aj-qty-btn:hover { background: var(--border); }
.aj-qty-input {
  width: 44px; height: 34px; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  text-align: center; font-size: 0.9rem; font-weight: 700; color: var(--ink); font-family: var(--sans); -moz-appearance: textfield;
}
.aj-qty-input::-webkit-outer-spin-button, .aj-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Harga satuan & Subtotal - masing-masing diberi label eksplisit (dulu
   cuma angka telanjang), rata kanan supaya sejajar rapi satu sama lain. */
.aj-row-harga { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; text-align: right; }
.aj-row-harga-line { display: flex; gap: 8px; font-size: 0.76rem; color: var(--ink-soft); white-space: nowrap; }
.aj-row-harga-line span:first-child { color: var(--muted); }
.aj-row-subtotal { font-size: 0.88rem; }
.aj-row-subtotal strong { color: var(--red); font-size: 1rem; }
@media (max-width: 640px) {
  .confirm-modal--cart { max-width: 100%; width: 100%; max-height: 90dvh; overflow: auto; border-radius: 0; }
  .cart-list { max-height: calc(90dvh - 200px); }
}

/* ---- Kartu SKU: harga & marketplace (gaya Database Harga) ----------------- */
/* item-sku/pb-val/pb-orig/mp-val dulu pakai font-family: 'JetBrains Mono' -
   font itu tidak pernah dimuat (restock.html cuma memuat Plus Jakarta Sans
   dari Google Fonts), jadi browser diam-diam jatuh ke monospace generik
   bawaan OS, beda tampilan dari font normal aplikasi di tempat lain. Sudah
   dilepas semuanya supaya seragam pakai font normal aplikasi. */
.restock-sku-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
/* user-select:text ditulis tegas, tidak dibiarkan mewarisi: badge ini
   duduk di dalam kartu yang sebagian isinya memang dikunci dari seleksi,
   dan kode SKU justru salah satu yang paling sering disalin. */
.item-sku { font-size: 11px; color: #3355A6; font-weight: 700; background: #E8ECF5; padding: 3px 9px; border-radius: 6px; border: 1px solid #C7D0E5; letter-spacing: .3px; user-select: text; -webkit-user-select: text; cursor: text; }
/* Varian - beda barang dengan nama sama (mis. sama-sama "Display TFT 2.4",
   beda cuma varian Touch/non Touch) dibedakan lewat badge ini. Sengaja
   ditaruh di baris badge yang SELALU tampil (bukan di skuDetailHtml yang
   cuma muncul saat kartu di-expand) - user harus bisa membedakan dua SKU
   mirip tanpa perlu buka kartunya dulu. Warna ungu sengaja beda dari
   item-sku (biru) & restock-terjual (hijau) supaya langsung kebaca sebagai
   kategori info yang beda, bukan cuma variasi warna acak. Kosong (tidak
   diisi) = tidak render sama sekali, bukan badge kosong. */
.item-varian { font-size: 11px; color: #7C3AED; font-weight: 700; background: #F3E8FF; padding: 3px 9px; border-radius: 6px; border: 1px solid #DDD6FE; letter-spacing: .3px; }
/* .item-weight dihapus - badge "Berat: N g" ini dulu HANYA muncul di
   salinan markup mode 'extend' (tidak pernah di 'normal'/'ringkas'),
   salah satu bentuk ketidakkonsistenan yang diperbaiki. Beratnya sendiri
   tidak hilang: tetap tampil sebagai field "Berat" di dalam detail kartu
   (skuDetailHtml), yang di mode 'extend' memang selalu terbuka. */
/* Chip harga & angka marketplace disandingkan (bukan ditumpuk) lewat wrapper
   flex ini - keduanya sama-sama pendek, ditumpuk vertikal menyisakan area
   kosong lebar di sampingnya (persis yang ditandai panah oleh pengguna).
   border-left jadi pemisah visual karena marketplace tidak berbentuk chip
   berwarna seperti harga supplier/ongkir/total modal di sebelahnya. */
/* Chip harga tetap nempel kiri (tidak ikut geser); .restock-marketplace
   diberi flex:1 supaya memakai semua sisa ruang setelah chip harga, lalu
   justify-content:center di dalamnya sendiri membuat Partner/Tokopedia/
   Shopee mengambang di TENGAH sisa ruang itu - bukan mepet ke ujung kanan
   (kelihatan aneh, nempel dekat tombol) atau nempel ke chip harga (nyisa
   kosong lebar di kanan). */
.restock-price-marketplace { display: flex; align-items: stretch; gap: 20px; flex-wrap: wrap; margin-top: 10px; }
.restock-price-marketplace .restock-price-row { margin-top: 0; }
.restock-price-marketplace .restock-marketplace { flex: 1 1 240px; justify-content: center; margin-top: 0; padding: 2px 0 2px 18px; border-left: 1px solid var(--border); }
@media (max-width: 480px) {
  .restock-price-marketplace .restock-marketplace { border-left: none; padding-left: 2px; }
}
.restock-price-row { display: flex; gap: 8px; flex-wrap: wrap; }
/* Total Modal + Berat/Supplier(bebas) dibungkus SATU unit flex (lihat
   .restock-total-berat-group di markup, skuDetailHtml) - .restock-price-row
   di atas cuma melihat 3 "item" langsung (Supplier, Ongkir, grup ini),
   bukan 4 lagi. Dulu keempatnya lepas sendiri-sendiri: di layar sempit
   Supplier+Ongkir muat sebaris, tapi Total Modal (140px-an) tidak lagi
   cukup didampingi Berat+Supplier (200px-an) di sisa ruang baris kedua,
   jadi Berat+Supplier turun SENDIRIAN ke baris ketiga - menyisakan ruang
   kosong lebar di kanan Total Modal. Dengan dibungkus begini, keduanya
   selalu pindah baris BERSAMAAN sebagai satu kesatuan, tidak pernah
   terpisah lagi. min-width:0 supaya kotaknya boleh menyusut di layar
   sempit alih-alih memaksa induknya melebar/overflow. */
.restock-total-berat-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
/* Berat & Supplier(bebas) dikelompokkan jadi satu unit yang tidak boleh
   terpisah baris - sama seperti .restock-sku-id-group untuk SKU+Varian.
   .restock-price-row di atas tetap flex-wrap:wrap untuk grup ini sebagai
   SATU KESATUAN: kalau ruang kepepet, Berat & Supplier(bebas) turun
   bersama ke baris berikutnya, tidak ada yang tertinggal sendirian. */
.restock-berat-supplier-group { display: flex; gap: 8px; flex-wrap: nowrap; }
.price-badge { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 8px; min-width: 0; }
.price-badge.supplier { background: #EEECF5; border: 1px solid #DAD6EA; }
.price-badge.ongkir { background: #F5EFE4; border: 1px solid #E9DCC2; }
.price-badge.total { background: var(--bg); border: 1px solid var(--border); }
.pb-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.pb-label.s { color: #5B4E96; } .pb-label.o { color: #A5762E; } .pb-label.t { color: #565C64; }
.pb-val { font-size: 13px; font-weight: 700; white-space: nowrap; }
.pb-val.s { color: #5B4E96; } .pb-val.o { color: #A5762E; } .pb-val.t { color: var(--ink); }
/* Berat - teks polos di samping chip Total Modal, sengaja BUKAN kotak/kartu
   seperti .price-badge lainnya. Labelnya juga sengaja tidak di-uppercase/
   ditebalkan seperti .pb-label - cuma angkanya (bukan kata "Berat") yang
   ditulis merah. */
.restock-berat { display: flex; flex-direction: column; justify-content: center; padding: 8px 4px; min-width: 0; }
.restock-berat-label { font-size: 12px; font-weight: 400; color: var(--muted); margin-bottom: 4px; }
.restock-berat-val { font-size: 13px; font-weight: 700; color: var(--red); white-space: nowrap; }
/* Badge "Supplier" (field bebas per-SKU, dulu bernama Kategori) - sama
   seperti Berat (teks polos, tanpa kotak/kartu), tapi label MAUPUN
   angkanya sengaja huruf/font normal (tidak tebal, tidak merah). */
.restock-kategori { display: flex; flex-direction: column; justify-content: center; padding: 8px 4px; min-width: 0; }
.restock-kategori-label { font-size: 12px; font-weight: 400; color: var(--muted); margin-bottom: 4px; }
.restock-kategori-val { font-size: 13px; font-weight: 400; color: var(--ink); white-space: nowrap; }

/* Kolom kiri kartu (.restock-card-main-col, tempat .restock-price-row
   berada) ternyata TETAP sempit di HP - kolom tombol kanan (+Restock/
   Kelola/dst) tidak ikut turun ke bawah di lebar ini, cuma menyempit
   berdampingan (lihat .restock-card-grid, sengaja tetap flex row di
   semua lebar). Total Modal + Berat/Supplier sudah dibungkus satu unit
   (.restock-total-berat-group di atas) supaya pindah baris BERSAMAAN,
   tapi keduanya masih sedikit terlalu lebar untuk muat berdampingan di
   kolom sesempit itu - dipadatkan lagi di sini (padding & jarak lebih
   kecil, angka rupiah boleh membungkus alih-alih dipaksa nowrap) supaya
   benar-benar muat sebaris, bukan cuma "pindah baris bersama" tapi
   tetap jadi baris sendiri. */
@media (max-width: 640px) {
  .restock-total-berat-group { gap: 6px; }
  .restock-total-berat-group .price-badge.total { padding: 6px 8px; }
  .restock-total-berat-group .pb-val.t { white-space: normal; overflow-wrap: break-word; }
  .restock-berat-supplier-group { gap: 6px; }
  .restock-total-berat-group .restock-berat,
  .restock-total-berat-group .restock-kategori { padding: 6px 2px; }
}

/* Link pembelian - di kartu detail (mode "Ganti tampilan"), ikut di kolom
   kanan kartu, tepat di bawah tombol Edit Info/Update Harga/Hapus. Sempat
   ditaruh di baris Total Modal/Berat/Supplier(bebas), tapi di HP kolom
   kiri itu terlalu sempit sehingga "Link" selalu terdorong turun jadi
   baris sendiri; ruang kosong yang terlihat di kanannya sebenarnya milik
   kolom tombol ini, bukan kolom kiri, jadi tidak akan pernah bisa diisi
   dari sana. Yang tampil tetap hanya tulisan "Link" saja, bukan alamat
   panjangnya. */
.restock-beli { display: flex; justify-content: center; width: 100%; margin-top: 6px; }
.restock-beli-link { font-size: 13px; font-weight: 700; color: var(--red); text-decoration: underline; white-space: nowrap; }
.restock-beli-link:hover { color: var(--red-dark); }
/* Di kartu daftar (mode "list", tampilan default) Link ditaruh SEBARIS di
   sebelah kiri tombol "+ Restock", bukan di bawahnya - kartunya ramping
   (satu baris nama + badge), jadi "Link" nyempil sendirian di bawah
   tombol terlihat mengambang/terpisah. justify-content:flex-end supaya
   tombol +Restock tetap rata kanan persis seperti kartu yang tidak
   punya link (Link cuma nambah di sebelah kirinya, tidak menggeser
   posisi tombolnya). Override .restock-beli bawaan (lebar penuh &
   tengah) jadi selebar isinya saja, rata kanan mengikuti baris ini. */
.restock-sku-top-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.restock-sku-top-row .restock-beli { width: auto; justify-content: flex-end; margin-top: 0; }
/* flex:0 1 auto (bukan flex:1) - kolom cuma selebar isinya (angka rupiah
   pendek), jadi tidak menyisakan area kosong lebar sebelum kolom berikutnya
   seperti waktu ketiganya dipaksa sama rata 1/3 lebar baris. */
.restock-marketplace { display: flex; gap: 18px; flex-wrap: wrap; }
.mp-col { flex: 0 1 auto; min-width: 0; }
.mp-label { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.mp-val { font-size: 13px; font-weight: 700; color: var(--ink); }
@media (max-width: 480px) {
  /* Partner/Tokopedia/Shopee tetap satu baris di HP (hemat tempat) alih-alih
     Shopee jatuh ke baris kedua - gap & font sedikit dikecilkan supaya
     ketiganya muat berdampingan di layar sempit. white-space:normal (bukan
     ellipsis) di .mp-val jadi jaring pengaman - kalau ruangnya benar-benar
     tidak cukup, angkanya bungkus ke baris baru, tidak pernah terpotong
     "...". Angka Partner/Tokopedia/Shopee sendiri sudah dibuat tanpa
     prefiks "Rp" (lihat fmtNum di restock.js) supaya jarang perlu bungkus. */
  .restock-marketplace { flex-wrap: nowrap; gap: 10px; }
  .mp-col { flex: 1 1 0; min-width: 0; }
  .mp-label { font-size: 9px; }
  .mp-val { font-size: 11.5px; white-space: normal; overflow-wrap: break-word; }
}

/* Deskripsi bebas per SKU (diisi lewat Edit Info) - cuma dirender kalau
   memang diisi (lihat deskripsiHtml di skuDetailHtml). Tanpa garis
   pemisah (dulu border-top, diminta dihapus) - jarak dari
   Partner/Tokopedia/Shopee di atasnya cukup lewat margin-top saja,
   teksnya boleh berbaris banyak (\n dari textarea dijaga sebagai <br>,
   bukan dirapikan jadi satu baris seperti HTML biasa). */
.restock-deskripsi { margin-top: 10px; }
.restock-deskripsi-label { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.restock-deskripsi-val { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.5; overflow-wrap: break-word; }

/* ---- Kartu Restock Saya - pill sekecil tab supplier (.month-tab), bukan
   kartu besar lagi. Tanda aktifnya HIJAU (bukan merah seperti tab
   supplier) supaya tidak tertukar - keduanya saling eksklusif, cuma satu
   yang menentukan isi "Daftar SKU" di bawah (lihat toggleRestockCard di
   restock.js). Jumlah item dihapus dari kartu; klik kartu langsung
   menampilkan isinya inline di bawah, bukan lewat popup lagi. ---------- */
/* ---- Kolom tombol kanan kartu SKU: + Restock, Kelola, dan (saat kartu
   dibuka) Edit Info / Update Harga / Hapus - satu tumpukan tombol "3D"
   (gradasi + bayangan bawah yang "tertekan" saat diklik) supaya terasa
   seperti satu grup aksi, bukan tombol datar biasa. ------------------------ */
.restock-side-btn, .restock-sku-add {
  --btn-shadow: #2E3654;
  --btn-depth: 2px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  /* min-width & padding dikecilkan (dulu 106px / 8px 12px) - di mode
     "detail" (kartu penuh, skuView='detail'), tombol ini berdiri di
     kolom kanan yang sempit berdampingan dengan ikon pensil "Kelola"
     30x30px - ukuran lama terasa berat sebelah dibanding ikon sekecil
     itu. Masih lebih besar dari varian --inline di mode "list" di bawah
     (kartunya lebih ramping di sana, butuh lebih kecil lagi). */
  width: 100%; min-width: 84px; margin-top: 5px; padding: 6px 10px;
  border: none; border-radius: var(--radius-sm);
  font-size: 0.72rem; font-weight: 700; font-family: var(--sans);
  color: #fff; cursor: pointer; white-space: nowrap;
  background: linear-gradient(180deg, #6B7BA8 0%, #444F72 100%);
  box-shadow: 0 var(--btn-depth) 0 var(--btn-shadow), 0 4px 6px rgba(20, 20, 30, .16);
  transform: translateY(0);
  transition: transform .08s ease, box-shadow .08s ease, filter .12s ease;
}
.restock-side-btn:hover, .restock-sku-add:hover { filter: brightness(1.08); }
.restock-side-btn:active, .restock-sku-add:active {
  transform: translateY(var(--btn-depth));
  box-shadow: 0 0 0 var(--btn-shadow), 0 1px 2px rgba(20, 20, 30, .18);
}

.restock-side-btn--accent {
  --btn-shadow: #1E4180;
  background: linear-gradient(180deg, #4C86E0 0%, #2A5CB8 100%);
}

/* Duplikat - ungu, sengaja beda dari ketiga warna lain di kolom ini
   (netral=Edit Info, biru=Update Harga, hijau=+Restock, merah=Hapus)
   supaya tetap gampang dibedakan sekilas walau nambah jadi 4 tombol. */
.restock-side-btn--duplicate {
  --btn-shadow: #5B21B6;
  background: linear-gradient(180deg, #A78BFA 0%, #7C3AED 100%);
}

.restock-side-btn--danger {
  --btn-shadow: #8E1015;
  background: linear-gradient(180deg, #F0555F 0%, #C81E28 100%);
}

.restock-side-btn-row { display: flex; gap: 6px; width: 100%; margin-top: 5px; }

/* Baris 3 tombol sejajar (+Tambah SKU/Export/Import) di atas "SEMUA SKU" -
   pill outline seperti Debit(+)/Kredit(-) di Laporan Kas
   (.impor-add-order-btn: border berwarna + latar tint tipis + teks
   berwarna, radius penuh), bukan gaya "3D" gradien - supaya senada dengan
   submenu lain, bukan komponen sendiri. */
.restock-toolbar-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 8px; border-radius: var(--radius-full);
  font-size: 0.72rem; font-weight: 700; font-family: var(--sans);
  cursor: pointer; white-space: nowrap; border: 1.5px solid transparent;
  transition: background .12s ease;
}
.restock-toolbar-btn--green { border-color: #059669; background: #ECFDF5; color: #059669; }
.restock-toolbar-btn--green:hover { background: #D1FAE5; }
.restock-toolbar-btn--blue { border-color: #0284C7; background: #E0F2FE; color: #0284C7; }
.restock-toolbar-btn--blue:hover { background: #BAE6FD; }
.restock-toolbar-btn--slate { border-color: #64748B; background: #F1F5F9; color: #64748B; }
.restock-toolbar-btn--slate:hover { background: #E2E8F0; }

/* Tombol Restock per SKU - hijau (bukan lagi merah brand), tetap ikut
   format 3D yang sama supaya senada dengan tombol lain di kolom ini. */
.restock-sku-add {
  --btn-shadow: #065F46;
  background: linear-gradient(180deg, #34D399 0%, #059669 100%);
}
.restock-picker-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; margin-bottom: 10px; }
.restock-picker-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); font-size: 0.9rem; font-weight: 600; color: var(--ink); cursor: pointer; font-family: var(--sans); }
.restock-picker-row:hover { border-color: var(--red); background: #FEF2F2; }
.restock-picker-count { font-size: 0.72rem; color: var(--muted); }

/* ---- Tampilan 'normal' (skuView, js/restock.js): thumbnail kecil + nama,
   klik barisnya untuk membuka/menutup detail satu per satu. TIDAK ada
   hubungannya dengan tampilan 'ringkas' (beda lagi, murni nama+SKU tanpa
   gambar sama sekali) di bawah - namanya kebetulan mirip. -------------- */
.sku-row { padding: 0; }
.sku-row-head { display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; }
/* cursor:pointer + garis putus-putus samar saat hover - penanda tekan &
   tahan untuk menyalin (lihat listener .sku-row-name di renderSkuList,
   js/restock.js), bukan cuma teks biasa. user-select:none + touch-callout:
   none supaya menu "Salin/Pilih Teks" bawaan HP tidak ikut muncul dan
   berebut dengan tekan-tahan kita sendiri. */
/* Dulu namanya sengaja dibuat TIDAK bisa diblok (user-select:none) supaya
   tekan-tahan-untuk-menyalin tidak berebut dengan seleksi teks bawaan
   peramban. Harganya: menyalin SEBAGIAN nama jadi tidak mungkin sama
   sekali. Sekarang menyalin seluruhnya punya tombol sendiri (.salin-btn),
   jadi teksnya boleh kembali berlaku seperti teks biasa - diblok sebagian,
   diklik dua kali untuk satu kata, dan seterusnya. */
.sku-row-name {
  font-size: 0.86rem; font-weight: 700; color: var(--ink); white-space: normal; overflow-wrap: break-word;
  cursor: text; user-select: text; -webkit-user-select: text;
}
.sku-row.expanded { border-color: var(--red); }

.restock-row-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; max-width: 70%; }
.restock-row-img {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--bg); border: 1px solid var(--border); overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 0.7rem;
}
.restock-row-img img { width: 100%; height: 100%; object-fit: cover; }
.restock-row-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.restock-row-info .restock-sku-badges { margin-top: 1px; }

/* Tumpukan tombol di view ini lebih kecil - baris sudah ramping (thumbnail
   36px), tombol seukuran kartu detail terlihat kebesaran di sini. Cuma
   ukurannya yang mengecil (termasuk --btn-depth, dipakai lagi di :active
   di atas) - warna bayangan tiap tombol (--btn-shadow) tetap ikut variannya
   masing-masing. */
.restock-sku-right--inline .restock-side-btn,
.restock-sku-right--inline .restock-sku-add {
  --btn-depth: 2px;
  min-width: 72px; padding: 5px 8px; margin-top: 4px;
  font-size: 0.68rem; border-radius: 6px;
  box-shadow: 0 var(--btn-depth) 0 var(--btn-shadow), 0 3px 4px rgba(20, 20, 30, .14);
}

/* Duplikat & Hapus berdampingan satu baris (bukan dua tombol penuh
   ditumpuk) - pola yang sama dengan Link + "+ Restock" di atas kartu.
   DITARUH SETELAH aturan --inline di atas (bukan di dekat definisi warna
   --duplicate/--danger) supaya menang dasi spesifisitas yang sama
   persis (.restock-sku-right--inline .restock-side-btn) - kalau
   ditaruh sebelumnya, min-width:72px & margin-top:4px dari sana diam-
   diam menimpa balik override di sini karena datang belakangan di
   cascade. Warna & bayangan 3D tombolnya sendiri tidak disentuh sama
   sekali, cuma width/margin-top yang ditimpa supaya keduanya pas
   berdampingan. */
.restock-side-btn-row .restock-side-btn { width: auto; min-width: 0; flex: 1 1 0; margin-top: 0; padding-left: 6px; padding-right: 6px; }
.restock-sku-right--inline .restock-side-btn-row { margin-top: 4px; }

/* ---- Tampilan 'ringkas' (skuView, js/restock.js) - satu baris padat per
   SKU, cuma nama + badge SKU/Varian/Terjual. Sengaja TANPA gambar, Link,
   atau tombol "+ Restock" sama sekali (beda dari 'normal' di atas, yang
   masih membawa semua itu) - murni buat menyisir banyak SKU secepat
   mungkin, bukan untuk bertransaksi langsung dari sini.

   Nama & badge memakai kelas yang SAMA PERSIS dengan mode lain
   (.sku-row-name, .restock-sku-badges) - jangan diberi ukuran font
   sendiri di sini, itu justru sumber "ganti tampilan kok ikut ganti
   ukuran huruf" yang dulu dikeluhkan. */
.sku-ringkas { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 9px 14px; }

/* ---- Responsif HP ---------------------------------------------------------- */
@media (max-width: 640px) {
  .restock-sku-right { align-items: flex-start; }
  /* .restock-row-left (kartu daftar/list) sengaja dibatasi max-width:70%
     di lebar besar supaya tidak mepet kolom tombol kanan - tapi di HP,
     70% dari kolom kiri yang sudah sempit cuma menyisakan ~112px untuk
     badge SKU+Varian, keduanya (~74px + ~82px) tidak pernah muat sebaris
     dan Varian selalu terdorong ke baris sendiri di bawah SKU. Batasnya
     dilonggarkan ke 100% di sini - kolom tombol kanan tetap flex-shrink:0
     di level .restock-card-grid, jadi tidak akan pernah kepotong olehnya. */
  .restock-row-left { max-width: 100%; }
  /* SKU & Varian dikelompokkan jadi satu unit yang tidak boleh terpisah
     baris (nowrap) - badge Terjual di sebelahnya tetap boleh turun ke
     baris berikutnya sendiri kalau memang kepepet, tapi SKU dan Varian
     harus selalu sebaris berdua. */
  .restock-sku-id-group { display: inline-flex; gap: 6px; flex-wrap: nowrap; }
}

/* ---- Mode demo banner & toast (sama seperti modul Freelance, disalin di
   sini karena setiap modul membawa CSS-nya sendiri - bukan file bersama) --- */
.demo-banner {
  position: sticky; top: 0; z-index: 60;
  background: #FEF3C7; color: #92400E;
  border-bottom: 1px solid #FCD34D;
  padding: 10px 16px; font-size: 0.82rem; line-height: 1.4;
}
.demo-banner code { background: #FDE68A; padding: 1px 5px; border-radius: 4px; font-size: 0.78rem; }
.demo-toast {
  /* Muncul di ATAS, tepat di bawah appbar - bukan di kaki layar. Toast
     "N pcs masuk ke ..." datang persis sesudah tombol +Restock ditekan,
     dan mata sedang berada di daerah tombol itu, bukan di bawah; di
     layar panjang (257 SKU) toast di kaki layar gampang sama sekali
     tidak terlihat. 84px = tinggi appbar (~67px di HP, ~71px di desktop)
     plus jarak, dan --safe-top ikut ditambahkan supaya tidak tertimpa
     poni layar HP. Melayang di atas appbar dicegah, bukan dibiarkan
     menutupi kolom cari/avatar selama 2,2 detik. */
  position: fixed; left: 50%; top: calc(84px + var(--safe-top)); transform: translateX(-50%) translateY(-16px);
  /* Toast ini isinya nama restock yang bisa panjang - dibatasi lebarnya
     dan ditengahkan supaya tidak melebar sampai mepet tepi layar. */
  max-width: min(560px, calc(100vw - 32px)); text-align: center;
  /* Hijau, senada dengan tombol +Restock yang memicunya (.restock-sku-add
     berakhir di #059669) - toast ini memang selalu kabar "berhasil". */
  background: #059669; color: #fff; padding: 10px 16px; border-radius: var(--radius-md);
  font-size: 0.85rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  /* 210, bukan 200 - .confirm-overlay (termasuk varian fullscreen tempat
     preview PDF/Excel dibuka) sama-sama z-index:200. Kalau toast-nya
     kebetulan sudah ada lebih dulu di DOM (dibuat toast lain sebelumnya
     di sesi ini) sebelum overlay preview dibuka, urutan DOM saja tidak
     cukup - overlay yang menyusul tetap menang gambar di atasnya, jadi
     toast "PDF/Excel berhasil diunduh" tidak pernah kelihatan waktu
     diunduh dari dalam preview. Dibuat SELALU menang lewat z-index yang
     lebih tinggi, bukan digantungkan pada urutan penciptaan elemen. */
  z-index: 210; box-shadow: 0 8px 24px rgba(5,150,105,.28);
}
.demo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.confirm-modal--preview { max-width: 720px; }
.free-preview-scroll { max-height: 70vh; overflow: auto; }
/* Ukuran A4 SUNGGUHAN (bukan cuma tumbuh mengikuti isi seperti sebelumnya)
   - dua alasan sekaligus:
   1. "Tampilkan" sekarang benar-benar terlihat seperti print preview
      (lembar bertepi jelas, bukan kotak abu-abu tanpa bentuk).
   2. lukisKertas (pipeline PDF) menggambar kanvas persis seukuran kotak
      elemen ini, lalu susunPdf MEREGANGKAN kanvas itu penuh ke halaman
      A4 TANPA menjaga rasio aslinya (lihat komentar di susunPdf). Kalau
      kotak sumbernya bukan rasio A4 (dulu: lebar mengikuti modal, tinggi
      mengikuti banyaknya baris), hasilnya jadi gambar yang gepeng/molor -
      itulah sebabnya PDF yang diunduh terlihat berantakan. Dengan lembar
      ini SELALU berukuran A4 pas, regangan itu jadi regangan 1:1 (tidak
      mengubah apa-apa), jadi tidak ada lagi distorsi.
   overflow:visible (bukan hidden) supaya kalau perhitungan halaman di JS
   pernah meleset, akibatnya kelihatan jelas (baris meluber keluar lembar)
   alih-alih baris itu hilang senyap - jauh lebih gampang ketahuan lewat
   pengujian visual, dan tidak diam-diam menghilangkan data dari PDF. */
.free-preview-paper {
  position: relative;
  width: 210mm; height: 297mm; box-sizing: border-box;
  margin: 0 auto; background: #fff; padding: 24px; overflow: visible;
}
.free-preview-title { text-align: center; font-weight: 800; font-size: 1rem; margin-bottom: 14px; color: var(--ink); }
.free-preview-meta { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; font-size: 0.86rem; color: var(--ink-soft); }
.free-preview-meta strong { color: var(--ink); }
.free-preview-table { width: 100%; border-collapse: collapse; }
.free-preview-table th, .free-preview-table td { padding: 8px 10px; border: 1px solid var(--border); font-size: 0.86rem; color: var(--ink); text-align: left; }
.free-preview-table thead th { background: var(--bg); font-weight: 700; font-size: 0.78rem; color: var(--ink-soft); }
/* white-space:nowrap - tanpa ini, spasi di antara simbol mata uang
   dan angkanya (fmtSupplierRaw: "¥ 3.045") jadi titik patah yang sah,
   dan begitu kolom Subtotal sempit, simbolnya terpisah ke baris
   sendiri di atas angkanya. */
.free-preview-table tfoot td { font-weight: 800; border-top: 2px solid var(--ink); color: var(--red); white-space: nowrap; }

/* Perataan per KUNCI kolom (data-align, ditulis oleh selAlign() di
   js/restock.js), BUKAN lagi tebakan posisi lewat nth-child. nth-child
   cuma kebetulan benar kalau kolom yang ditampilkan persis urutan bawaan
   - begitu user menyembunyikan satu kolom lewat "Atur Konten" (mis.
   Gambar dimatikan), semua kolom sesudahnya bergeser satu posisi dan
   perataan nth-child ikut salah tempat (angka jadi rata kiri, dst). */
.restock-pdf-table th[data-align="tengah"], .restock-pdf-table td[data-align="tengah"] { text-align: center; }
.restock-pdf-table th[data-align="kanan"], .restock-pdf-table td[data-align="kanan"] { text-align: right; }
.free-preview-table tfoot td[data-align="kanan"] { text-align: right; }
.free-preview-table tfoot td[data-align="tengah"] { text-align: center; }

/* Nomor halaman - dipojok kanan bawah tiap lembar, cuma tampil kalau
   restock-nya lebih dari satu halaman (lihat opsi.dari di
   buildRestockPageHtml). */
.free-preview-nomor-halaman {
  position: absolute; right: 24px; bottom: 12px;
  font-size: 0.72rem; color: var(--muted);
}
/* Kolom "Gambar" - dulu fotonya cuma 40x40 di tengah sel selebar ~103px,
   jadi sisa ruang kosong kiri-kanannya justru lebih luas dari fotonya
   sendiri; itu yang bikin foto terlihat kecil padahal kotaknya lapang.
   Dua hal diperbaiki:

   1. padding sel dipangkas 8px 10px -> 3px, supaya jarak foto ke garis
      tabel tinggal tipis.
   2. width:1% + white-space:nowrap = trik "shrink to fit": kolom ini
      berhenti ikut pembagian lebar otomatis tabel (yang tadinya memberi
      103px padahal isinya cuma butuh 46px) dan menyusut pas seukuran
      fotonya saja. Jadi ukuran foto yang menentukan lebar kolom, bukan
      sebaliknya - lebar sisa kolomnya balik ke kolom Nama Item, dan
      tabel secara keseluruhan tidak melebar sama sekali.

   display:block + margin auto supaya foto benar-benar rapat & tetap di
   tengah (img itu inline, tanpa ini masih ada sisa ruang baris teks di
   bawahnya). object-fit:cover menjaga foto non-persegi terpotong rapi,
   bukan gepeng. */
.restock-pdf-table th[data-kolom="gambar"],
.restock-pdf-table td[data-kolom="gambar"] { width: 1%; white-space: nowrap; }
.restock-pdf-table td[data-kolom="gambar"] { padding: 3px; }
/* Kolom SKU (opsional, Atur Konten): sempit, tidak melipat, warna kode. */
.restock-pdf-table th[data-kolom="sku"], .restock-pdf-table td[data-kolom="sku"] { width: 1%; white-space: nowrap; }
.restock-pdf-sku { font-weight: 800; color: #4F46E5; font-size: 0.92em; }
.restock-pdf-img { display: block; width: 64px; height: 64px; object-fit: cover; border-radius: 4px; margin: 0 auto; }
/* Kolom angka kecil "Stok" & "Restock Pengiriman" (dua kolom opsional di
   Atur Konten) dibuat sesempit isinya - width:1% bikin tabel memberi
   ruang seperlunya saja, sisanya jatuh ke "Nama Item" yang memang butuh.
   Angkanya sendiri tidak pernah dipatahkan; judul "Restock Pengiriman"
   yang panjang boleh turun ke baris kedua di kepala tabel. */
.restock-pdf-table th[data-kolom="stok"],
.restock-pdf-table th[data-kolom="restock_pengiriman"],
.restock-pdf-table td[data-kolom="stok"],
.restock-pdf-table td[data-kolom="restock_pengiriman"] { width: 1%; }
.restock-pdf-table td[data-kolom="stok"],
.restock-pdf-table td[data-kolom="restock_pengiriman"] { white-space: nowrap; }
/* Varian ditempel di bawah nama (lihat selPdf kunci 'nama' di
   js/restock.js) - baris kecil & pudar supaya tetap kebaca sebagai
   keterangan tambahan, bukan bagian dari nama itu sendiri. */
.restock-pdf-varian { display: block; font-size: 0.78em; color: var(--muted); font-weight: 400; margin-top: 2px; }
/* word-break:break-all dulu perlu waktu tautan ini masih menuliskan
   alamat lengkapnya (panjang, harus bisa patah di mana saja) - sekarang
   isinya cuma kata "Link" (4 huruf), aturan yang sama malah memaksa
   kata sependek itu ikut dipatah huruf demi huruf ("Lin"+"k") begitu
   kolomnya sempit, alih-alih membiarkan kolomnya yang melebar. white-space:
   nowrap memastikan "Link" selalu utuh satu baris. */
.restock-pdf-link { color: var(--red); white-space: nowrap; }

/* ---- Kelola Supplier (modal daftar dengan edit/hapus) --------------------- */
.confirm-modal--list { max-width: 480px; }
.restock-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.restock-list-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 8px 6px 8px 12px;
}
.restock-list-name { font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.restock-list-actions { display: flex; gap: 4px; }
.restock-list-btn {
  border: 0; background: transparent; cursor: pointer; color: var(--muted);
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
}
.restock-list-btn svg { width: 16px; height: 16px; }
.restock-list-btn:hover { background: var(--bg); color: var(--ink); }
.restock-list-btn--danger { color: var(--red-dark); }
.restock-list-btn--danger:hover { background: #FDEBEC; }

/* ---- Pengaturan (Kurs & Multiplier) ------------------------------------ */
/* Gaya kotak PIN dicopot bersama gerbangnya - Pengaturan sudah tidak
   berpagar PIN sejak 9cfdf4e, dan Hapus SKU menyusul. */
.confirm-modal--settings { max-width: 560px; }
@media (max-width: 640px) {
  .confirm-modal--settings {
    position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%;
    border-radius: 0; padding: 16px; overflow-y: auto; z-index: 210;
  }
}

/* ---- Kartu SKU: Histori Harga (Edit Info/Update Harga/Hapus sekarang di
   kolom kanan kartu - lihat .restock-side-btn) ------------------------------ */
.restock-riwayat { margin-top: 4px; padding: 0 14px 12px; }
.restock-riwayat-title { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
/* Scroll ke samping di layar sempit, bukan tiap kolom diperas/menumpuk
   (tanggal pecah jadi 2 baris, dst) - kolom tetap selebar isinya
   (white-space:nowrap di bawah) supaya ada sesuatu yang benar-benar bisa
   discroll alih-alih ikut menyempit. */
.restock-riwayat-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.restock-riwayat-table { min-width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.restock-riwayat-table th, .restock-riwayat-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; color: var(--ink); white-space: nowrap; }
.restock-riwayat-table th { color: var(--muted); font-weight: 700; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .4px; }
.restock-riwayat-table td:nth-child(4), .restock-riwayat-table th:nth-child(4),
.restock-riwayat-table td:nth-child(5), .restock-riwayat-table th:nth-child(5) { text-align: right; }
.restock-riwayat-table td:nth-child(3), .restock-riwayat-table th:nth-child(3) { text-align: center; }
.restock-riwayat-del { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px 6px; border-radius: 6px; }
/* Baris harga TERBARU (No 1, paling atas - riwayat selalu diurutkan
   terbaru dulu) dicetak tebal, supaya langsung kelihatan mana harga yang
   berlaku sekarang dibanding baris-baris di bawahnya yang cuma riwayat. */
.restock-riwayat-terbaru td:not(:last-child) { font-weight: 800; color: var(--ink); }
.restock-riwayat-del:hover { background: #FDEBEC; color: var(--red-dark); }
.restock-riwayat-empty { font-size: 0.78rem; color: var(--muted); }

/* ---- Export & Import katalog SKU ------------------------------------------ */
.restock-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.restock-tab {
  border: 0; background: transparent; cursor: pointer; padding: 8px 4px; margin-bottom: -1px;
  font-size: 0.86rem; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent;
}
.restock-tab.active { color: var(--red); border-bottom-color: var(--red); }
.restock-tab-panel[hidden] { display: none; }
.restock-col-head { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 6px; }
.restock-col-actions { display: flex; gap: 10px; }
.restock-link-btn { border: 0; background: transparent; color: var(--red); font-size: 0.78rem; font-weight: 700; cursor: pointer; padding: 0; }
.restock-link-btn:hover { text-decoration: underline; }
.restock-col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 10px; margin-bottom: 14px; }
.restock-col-item { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--ink); }
.restock-wide-btn { width: 100%; justify-content: center; }
/* Status tegas di bawah dropdown "Import ke Supplier" (updateImportTarget
   di js/restock.js) - langsung bilang mau ke supplier mana, sebelum file
   dipilih sekalipun. */
.restock-import-target { font-size: 0.8rem; color: var(--ink-soft); margin-top: 6px; }
.restock-import-target strong { color: var(--red); }
.restock-import-modes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.restock-mode-item {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; font-size: 0.82rem; color: var(--ink-soft);
}
.restock-mode-item:has(input:checked) { border-color: var(--red); background: #FEF2F2; }
.restock-mode-item input { margin-top: 3px; accent-color: var(--red); }
.restock-mode-item strong { color: var(--ink); }
/* Ceklis field per baris - mode "Perbarui Item"/"Tambah & Perbarui" (lihat
   renderFieldChecklist di js/restock.js). Field yang dikosongkan tidak ikut
   dikirim: baris baru memakai bawaan kosong/0, baris yang sudah ada
   mempertahankan nilai yang tersimpan sekarang (tidak tertimpa). Memakai
   grid ceklis yang sama dengan "Pilih Kolom" di tab Export supaya terasa
   satu pola. */
.restock-field-cek { margin-bottom: 14px; }
.restock-field-cek-ket { font-size: 0.76rem; color: var(--muted); margin: 0 0 8px; line-height: 1.5; }

.restock-dropzone {
  border: 1.5px dashed var(--border); border-radius: var(--radius-md); padding: 22px; text-align: center;
  color: var(--muted); font-size: 0.86rem; cursor: pointer; margin-bottom: 10px; transition: border-color .12s, background .12s;
}
.restock-dropzone:hover, .restock-dropzone:focus-visible { border-color: var(--red); color: var(--red); }
.restock-dropzone.drag { border-color: var(--red); background: #FEF2F2; color: var(--red); }
/* Bilah progress 1%->100% saat file CSV sedang dibaca (lihat handleImportFile
   di js/restock.js) - lebar dianimasikan lewat transition, persentasenya
   sendiri ditulis di teks dropzone (bukan di dalam bilah ini). */
.restock-upload-progress { margin-top: 12px; height: 6px; border-radius: var(--radius-full); background: var(--bg); overflow: hidden; }
.restock-upload-progress-bar { height: 100%; width: 1%; background: var(--red); border-radius: var(--radius-full); transition: width .15s ease-out; }
.restock-import-hint { font-size: 0.74rem; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.restock-import-summary { font-size: 0.86rem; color: var(--ink); background: var(--bg); border-radius: var(--radius-md); padding: 10px 12px; }
.restock-import-summary strong { color: var(--red); }
.restock-import-error { color: var(--red-dark); background: #FDEBEC; }
/* Popup "Import Berhasil" (showImportSuccessModal) - lingkaran centang
   hijau di atas judul, beda warna dari merah/biru khas modal konfirmasi
   lain di aplikasi ini supaya langsung terbaca sebagai kabar baik, bukan
   permintaan konfirmasi. */
.restock-import-sukses { text-align: center; }
.restock-import-sukses-icon {
  width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
  background: #ECFDF5; color: #059669; display: flex; align-items: center; justify-content: center;
}
.restock-import-sukses-icon svg { width: 26px; height: 26px; }
.restock-import-sukses .confirm-modal-text { text-align: center; }
.restock-import-sukses-rincian { font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 18px; }
.restock-import-sukses-rincian strong { color: var(--red); }
/* Peringatan "supplier baru dibuat" - warna kuning (bukan hijau seperti
   sisa popup ini): bukan kegagalan, tapi perlu dilirik, karena sering
   berarti nama di file beda tipis dari supplier yang sudah ada. */
.restock-import-sukses-baru {
  font-size: 0.78rem; line-height: 1.5; text-align: left;
  color: #92400E; background: #FEF3C7; border-radius: var(--radius-md);
  padding: 10px 12px; margin-bottom: 18px;
}
@media (max-width: 640px) {
  .restock-col-grid { grid-template-columns: 1fr 1fr; }
}

/* Modal Export & Import Data: 480px bawaan --wide terlalu sempit sejak ada
   ceklis field (mode Perbarui/Tambah & Perbarui) dan grid "Pilih Kolom" -
   labelnya melipat dan terasa berdesakan. Dilebarkan seperti modal Hapus SKU
   di bawah, tetap dibatasi lebar layar di HP. */
.confirm-modal--export-import {
  width: min(680px, calc(100vw - 40px));
  max-width: 680px;
}

/* ---- Hapus SKU icon + modal ------------------------------------------------ */
.view-icon-btn--danger:hover { background: #FDEBEC; color: var(--red); }

/* Dialog hapus memiliki banyak pilihan, tetapi hanya daftar SKU yang perlu
   bergulir. Cangkang modal dibuat sedikit lebih lebar dan dikunci setinggi
   viewport; judul, mode, serta tombol aksi selalu terlihat. */
.confirm-modal--delete-sku {
  width: min(640px, calc(100vw - 40px));
  max-width: 640px;
  height: min(720px, calc(100dvh - 40px));
  max-height: calc(100dvh - 40px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.confirm-modal--delete-sku > .confirm-modal-text,
.confirm-modal--delete-sku > .restock-import-modes,
.confirm-modal--delete-sku > .confirm-modal-actions { flex: 0 0 auto; }

.confirm-modal--delete-sku #del-panel-pilihan,
.confirm-modal--delete-sku #del-panel-kategori,
.confirm-modal--delete-sku #del-panel-semua {
  flex: 1 1 auto;
  min-height: 0;
}

.confirm-modal--delete-sku #del-panel-pilihan {
  display: flex;
  flex-direction: column;
}

.confirm-modal--delete-sku #del-panel-pilihan[hidden],
.confirm-modal--delete-sku #del-panel-kategori[hidden],
.confirm-modal--delete-sku #del-panel-semua[hidden] { display: none; }

.confirm-modal--delete-sku .restock-del-list {
  flex: 1 1 auto;
  min-height: 100px;
  max-height: none;
  margin-bottom: 0;
}

.confirm-modal--delete-sku .confirm-modal-actions {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
  .confirm-modal--delete-sku {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    padding: 16px;
  }
}

/* Kepala pop-up Edit Info & Update Harga: judul di kiri, silang penutup
   di pojok kanan atas. Judulnya bisa sepanjang nama barang (Update Harga
   memakai nama lengkap SKU), jadi silangnya yang tidak boleh menyusut -
   flex-shrink:0 - dan align-items:flex-start menahannya tetap di baris
   pertama waktu judulnya membungkus jadi beberapa baris.
   margin-bottom pindah ke sini dari .confirm-modal-text supaya jarak ke
   isi form tidak berubah dari sebelumnya. */
.restock-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.restock-modal-head .confirm-modal-text { margin-bottom: 0; }

.restock-modal-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -4px -4px 0 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.restock-modal-close svg { width: 14px; height: 14px; }

.restock-modal-close:hover { background: #ECECEF; color: var(--ink); }

.restock-del-hint { font-size: 0.78rem; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }

.restock-del-search { margin-bottom: 10px; }

.restock-del-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 260px; overflow-y: auto; margin-bottom: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px;
}

.restock-del-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px;
  border-radius: var(--radius-sm, 6px); cursor: pointer; font-size: 0.82rem; color: var(--ink);
}
.restock-del-row:hover { background: var(--bg); }
.restock-del-row input { accent-color: var(--red); flex-shrink: 0; }

.restock-del-row-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.restock-del-row-nama { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.restock-del-row-supplier { flex-shrink: 0; font-size: 0.72rem; color: var(--muted); }

.restock-del-empty { font-size: 0.82rem; color: var(--muted); text-align: center; padding: 16px 0; }

.restock-del-warn {
  font-size: 0.82rem; color: var(--red-dark); background: #FDEBEC;
  border-radius: var(--radius-md); padding: 10px 12px; line-height: 1.5;
}

/* ---- Form Tambah/Edit Barang: pilih gambar via URL atau unggah langsung -- */
.restock-img-mode { display: flex; gap: 6px; margin-top: 4px; margin-bottom: 6px; }
.restock-img-mode-btn {
  padding: 4px 12px; border-radius: var(--radius-full); border: 1px solid var(--border);
  background: var(--bg); color: var(--muted); font-size: 0.72rem; font-weight: 700; cursor: pointer; font-family: var(--sans);
}
.restock-img-mode-btn.active { background: var(--red); border-color: var(--red); color: #fff; }
.restock-img-upload-status { display: inline-block; margin-left: 8px; font-size: 0.76rem; color: var(--muted); vertical-align: middle; }
.restock-img-preview { margin-top: 8px; }
.restock-img-preview img {
  max-width: 100%; max-height: 140px; border-radius: var(--radius-md); border: 1px solid var(--border); object-fit: contain; background: var(--bg);
}
/* Tombol kecil di dalam form (Tambah / Pilih Gambar). Sengaja BUKAN
   .btn-secondary: kelas itu cuma didefinisikan di css/components.css &
   css/laporan-freelance.css, dan restock.html tidak memuat keduanya -
   jadi tombol ber-.btn-secondary di halaman ini tampil polos tanpa
   kotak sama sekali (tombol "Pilih Gambar..." lama juga kena, sudah
   ikut dibetulkan dengan memakai kelas ini). */
.restock-btn-kecil {
  flex: 0 0 auto; white-space: nowrap; cursor: pointer; font-family: var(--sans);
  padding: 7px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--card); color: var(--ink-soft);
  font-size: 0.78rem; font-weight: 700;
}
.restock-btn-kecil:hover:not(:disabled) { border-color: var(--red); color: var(--red); background: #FDEBEC; }
.restock-btn-kecil:disabled { opacity: .55; cursor: not-allowed; }
/* Kotak URL + tombol "Tambah" sebaris - satu gambar ditambahkan per
   penekanan, bukan menimpa yang sudah ada seperti versi satu-foto dulu. */
.restock-img-tambah { display: flex; gap: 6px; align-items: center; }
.restock-img-tambah .impor-input { flex: 1 1 auto; min-width: 0; }
/* Daftar foto yang sudah terkumpul di form. Kisi otomatis supaya di HP
   ikut menyempit jadi 2-3 kolom, bukan memaksa satu baris panjang. */
.restock-img-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.restock-img-kosong { grid-column: 1 / -1; font-size: 0.78rem; color: var(--muted); padding: 10px 0; }
.restock-img-item {
  position: relative; border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; background: var(--bg); aspect-ratio: 1 / 1;
}
.restock-img-item.utama { border-color: var(--red); }
.restock-img-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Penanda foto utama - satu-satunya yang nanti tampil di kartu & PDF. */
.restock-img-tag {
  position: absolute; left: 4px; bottom: 4px; background: var(--red); color: #fff;
  font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-full); letter-spacing: .3px;
}
.restock-img-jadikan {
  position: absolute; left: 4px; right: 4px; bottom: 4px; border: none; cursor: pointer;
  background: rgba(15, 15, 20, .72); color: #fff; font-family: var(--sans);
  font-size: 9px; font-weight: 700; padding: 3px 4px; border-radius: var(--radius-full);
}
.restock-img-jadikan:hover { background: var(--red); }
.restock-img-hapus {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%;
  border: none; background: rgba(15, 15, 20, .72); color: #fff; font-size: 0.95rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.restock-img-hapus:hover { background: var(--red); }

/* ---- Link Pembelian (bisa lebih dari satu) di Tambah/Edit Barang ---------
   Baris teks (bukan thumbnail persegi seperti Gambar di atas) - .restock-
   img-tag/--jadikan/--hapus DIPAKAI ULANG apa adanya (warna & bentuknya
   sama), cuma posisinya ditimpa dari absolute (mengambang di atas foto)
   jadi static (elemen flex biasa sebaris dengan teks URL). ------------- */
.restock-link-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.restock-link-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg);
}
.restock-link-item.utama { border-color: var(--red); }
.restock-link-item-url {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.8rem; color: var(--ink); text-decoration: none;
}
.restock-link-item-url:hover { text-decoration: underline; }
.restock-link-item .restock-img-tag,
.restock-link-item .restock-img-jadikan,
.restock-link-item .restock-img-hapus { position: static; flex-shrink: 0; }
.restock-link-item .restock-img-jadikan { white-space: nowrap; }

/* Tombol "Link" di kartu SKU waktu ada 2+ link (linkBeliHtml, js/restock.js)
   - tetap tampil sebagai tautan merah bergaris bawah (.restock-beli-link
   dipakai ulang apa adanya berkat reset <button> global di css/main.css),
   cuma perlu cursor:pointer tegas karena elemennya sekarang <button>. */
.restock-beli-multi { cursor: pointer; }

/* ---- Pop-up "Pilih Link Pembelian" (showLinkPickerModal) - daftar link
   yang bisa langsung diklik, satu klik = buka link itu SEKALIGUS menutup
   pop-up (lihat listener di showLinkPickerModal, bukan tombol "Buka"
   terpisah per baris). ------------------------------------------------- */
.restock-linkpick-list { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; max-height: 50vh; overflow-y: auto; }
.restock-linkpick-row {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg);
  text-decoration: none; color: var(--ink);
}
.restock-linkpick-row:hover { border-color: var(--red); background: #FDEBEC; }
.restock-linkpick-url { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; }

/* ---- Tombol salin di sebelah nama & kode SKU ------------------------------
   Tersembunyi sampai kursor menyentuh barisnya, seperti daftar SKU di
   BigSeller: ikon yang selalu tampak di setiap baris akan jadi 278 ikon
   sekaligus di halaman ini dan menenggelamkan isinya sendiri.

   visibility, bukan display atau opacity: display:none akan membuat lebar
   barisnya melompat begitu ikonnya muncul, sedangkan opacity:0 menyisakan
   tombol tak terlihat yang masih bisa terpencet. visibility menahan
   tempatnya sekaligus mematikan klik. */
.salin-btn {
  visibility: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; margin-left: 4px;
  width: 20px; height: 20px; padding: 0; flex-shrink: 0;
  border: none; border-radius: 5px; background: transparent; color: var(--muted);
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.salin-btn svg { width: 13px; height: 13px; }
.salin-btn:hover { background: #E8ECF5; color: #3355A6; }
.salin-btn:active { transform: translateY(1px); }

.sku-row-name:hover .salin-btn,
.restock-sku-id-group:hover .salin-btn,
.impor-card:hover .salin-btn { visibility: visible; }

/* Berpindah ke sini dengan Tab harus memunculkannya juga - kalau tidak,
   fokus keyboard mendarat di tombol yang tidak kelihatan. */
.salin-btn:focus-visible { visibility: visible; outline: 2px solid var(--red); outline-offset: 1px; }

@media (hover: none) {
  /* Dicoba dulu memunculkannya terus-menerus di perangkat sentuh - dengan
     alasan di sana tidak ada "kursor di atasnya" sama sekali. Hasilnya di
     layar HP justru sesak: satu ikon per kartu berjajar puluhan, berdesakan
     dengan nama yang sudah membungkus beberapa baris.

     Jadi di sentuh ikonnya ditiadakan sepenuhnya, dan menyalin kembali
     lewat tekan-tahan (lihat [data-tahan-salin] di js/restock.js).
     display:none, bukan visibility:hidden - di sini tempatnya tidak perlu
     ditahan untuk apa pun. */
  .salin-btn { display: none; }
}

/* ---- Kotak isian di modal-modal Restock ---------------------------------
   Di halaman lain, setiap isian dibungkus .impor-input-group dan PEMBUNGKUS
   itulah yang menggambar kotaknya - .impor-input sendiri memang
   border:none;background:none (lihat css/laporan-impor.css). Modal-modal di
   halaman ini menulis isiannya langsung di dalam .impor-field tanpa
   pembungkus tersebut, jadi tidak ada yang menggambar kotaknya sama sekali:
   yang terlihat cuma label dan teks mengambang, tanpa petunjuk mana yang
   bisa diisi dan sampai mana batasnya.

   Aturan ini memberi mereka kotak yang SAMA PERSIS dengan yang digambar
   .impor-input-group - termasuk sorotan merah saat sedang diisi - supaya
   bentuknya seragam dengan isian di seluruh aplikasi, bukan gaya baru
   yang cuma ada di sini.

   Anak LANGSUNG (>), bukan keturunan: isian yang memang sudah punya
   pembungkus tidak boleh dapat kotak kedua di dalam kotak. */
.impor-field > .impor-input,
.restock-img-tambah > .impor-input {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 8px;
}

/* .impor-input mematikan outline bawaan peramban, jadi tanda "sedang diisi"
   harus digambar sendiri - kalau tidak, berpindah antar kolom dengan Tab
   jadi tidak kelihatan sama sekali. */
.impor-field > .impor-input:focus,
.restock-img-tambah > .impor-input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(228, 33, 43, .12);
}

/* Mata Uang & Supplier kini terlihat sebagai kotak sama seperti isian lain,
   jadi kursornya harus memberi tahu bahwa yang ini dipilih, bukan diketik. */
.impor-field > select.impor-input { cursor: pointer; }

/* ---- Thumbnail SKU: bisa diklik untuk lihat foto ukuran penuh ------------- */
.restock-img-clickable { cursor: zoom-in; }
/* Kartu tetap cuma menampilkan SATU foto (yang utama) - badge angka ini
   yang memberi tahu masih ada foto lain di baliknya, supaya user tahu
   thumbnail-nya layak diklik. Hanya dirender kalau fotonya >1. */
.restock-row-img { position: relative; }
.restock-img-jumlah {
  position: absolute; right: 2px; bottom: 2px; min-width: 15px; height: 15px; padding: 0 4px;
  background: rgba(15, 15, 20, .72); color: #fff; border-radius: var(--radius-full);
  font-size: 9px; font-weight: 700; line-height: 15px; text-align: center; pointer-events: none;
}

/* ---- Tampilan "Gambar Besar" (skuView === 'besar') ----------------------
   Membesarkan thumbnail-nya SAJA; sisa barisnya sengaja tidak diubah supaya
   nama, badge, dan tombol tetap berada di tempat yang sama seperti tampilan
   biasa - yang dicari di mode ini cuma rupanya barang.

   Ditulis .sku-row--besar .restock-row-img (0,2,0) supaya menang atas
   .restock-row-img (0,1,0) yang menetapkan 36px di atas - bukan dengan
   !important. */
.sku-row--besar .restock-row-img { width: 120px; height: 120px; }

/* contain, bukan cover. Pada 36px pemotongan tepi tidak terasa, tapi di
   ukuran besar justru bagian yang terpotong itu yang sedang dicari. */
.sku-row--besar .restock-row-img img { object-fit: contain; }

/* Badge jumlah foto ikut dibesarkan - 9px di sudut gambar 120px nyaris
   tidak terbaca. */
.sku-row--besar .restock-img-jumlah {
  right: 4px; bottom: 4px; min-width: 20px; height: 20px;
  font-size: 11px; line-height: 20px;
}

@media (max-width: 640px) {
  /* Di HP gambar 120px memakan hampir sepertiga lebar layar dan namanya
     tinggal sesobek kolom sempit; 92px masih jelas terlihat tanpa
     menggencet nama barangnya. */
  .sku-row--besar .restock-row-img { width: 92px; height: 92px; }
}

/* ---- Lightbox foto (klik thumbnail SKU) -----------------------------------
   Kalau fotonya lebih dari satu, di sinilah digesernya: usap kiri/kanan di
   HP, tombol panah (atau panah keyboard) di PC. */
.restock-lightbox-overlay.show { background: rgba(15, 15, 20, .8); }
.restock-lightbox { position: relative; max-width: min(92vw, 640px); max-height: 88vh; }
.restock-lightbox img {
  display: block; width: 100%; height: auto; max-height: 88vh; object-fit: contain;
  border-radius: var(--radius-md); background: #fff;
}
/* Tombol tutup & panah geser sekarang berisi ikon SVG (lihat
   LB_CLOSE_ICON/LB_PREV_ICON/LB_NEXT_ICON di restock.js), bukan lagi
   karakter teks - SVG dengan viewBox persegi otomatis pas di tengah
   tanpa perlu font-size/line-height sama sekali, dan tidak tergantung
   font OS/browser pemakai (glyph teks seperti × secara geometris memang
   sudah di tengah kotak tombolnya, tapi "tinta" hurufnya bisa terlihat
   sedikit naik/turun tergantung font yang dipakai). padding di sini
   yang menentukan ukuran ikonnya (svg mengisi penuh lewat width/height
   100% di bawah), BUKAN lebar/tinggi tombol - supaya proporsinya tetap
   sebanding kalau suatu saat ukurannya diubah. */
.restock-lightbox-close, .restock-lightbox-nav {
  border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.restock-lightbox-close svg, .restock-lightbox-nav svg { width: 100%; height: 100%; display: block; }
.restock-lightbox-close {
  position: absolute; top: -14px; right: -14px; width: 32px; height: 32px; border-radius: 50%;
  background: #fff; color: var(--ink); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); padding: 8px;
}
/* Panah geser - ditaruh MENUMPUK di tepi gambar (bukan di luarnya) supaya
   di HP yang lebar layarnya mepet tidak ikut mendorong gambar mengecil. */
.restock-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(15, 15, 20, .58); color: #fff; padding: 9px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.restock-lightbox-nav:hover { background: rgba(15, 15, 20, .85); }
.restock-lightbox-nav--prev { left: 8px; }
.restock-lightbox-nav--next { right: 8px; }
.restock-lightbox-hitung {
  position: absolute; top: 8px; left: 8px; padding: 3px 10px; border-radius: var(--radius-full);
  background: rgba(15, 15, 20, .62); color: #fff; font-size: 0.72rem; font-weight: 700;
}
.restock-lightbox-titik { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; }
.restock-lightbox-titik span {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .45);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.restock-lightbox-titik span.aktif { background: #fff; }
@media (max-width: 640px) {
  /* Di HP geser utamanya pakai usapan jari - panahnya dikecilkan supaya
     tidak menutupi gambar, tapi tetap ada (sebagian user lebih terbiasa
     menekan panah daripada mengusap). */
  .restock-lightbox-nav { width: 32px; height: 32px; padding: 7px; }
  .restock-lightbox-nav--prev { left: 4px; }
  .restock-lightbox-nav--next { right: 4px; }
}

/* ==========================================================================
   A. Area pilihan restock: Supplier -> Restock -> Tampilkan
   ========================================================================== */
/* align-items:center (bukan stretch) - dulu tombol Tampilkan/Buat Restock
   ikut memanjang setinggi kotak Supplier/Restock (dua baris: label+nilai),
   jadi kotaknya kelihatan besar padahal isinya cuma satu baris teks.
   Dengan center, tombolnya berhenti di tinggi alaminya sendiri dan
   ditengahkan sejajar dengan dua kotak dropdown itu. */
.rpick-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rpick {
  flex: 1 1 150px; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  position: relative; padding: 8px 30px 8px 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
  font-family: var(--sans); text-align: left; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.rpick:hover:not(:disabled) { border-color: #C3C9D1; }
.rpick[aria-expanded="true"] { border-color: var(--red); }
.rpick:disabled { opacity: .55; cursor: not-allowed; }
.rpick-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.rpick-val { font-size: 0.82rem; font-weight: 700; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpick-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--muted); }
.rpick-go {
  flex: 0 0 auto; padding: 8px 16px; border: none; border-radius: var(--radius-md);
  background: var(--red); color: #fff; font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.rpick-go:hover:not(:disabled) { background: var(--red-dark); }
.rpick-go:disabled { background: #C9CDD4; cursor: not-allowed; }
/* Keempat sejajar: Supplier-Restock-Tampilkan-Buat Restock. Judulnya cuma
   dikira "Lihat Semua"; yang paling sering dipakai dari halaman itu justru
   bikin restock baru, jadi warnanya hijau (bukan merah seperti Tampilkan)
   supaya beda maksud aksinya terlihat sekilas. */
.rpick-buat {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 16px; border-radius: var(--radius-md);
  background: #059669; color: #fff; font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.rpick-buat:hover { background: #047857; }

/* Kisi pilihan - ditata menyamping seperti kalender, bukan satu kolom
   panjang: daftar supplier sudah puluhan dan memindai kisi jauh lebih cepat
   daripada menggulung. position:fixed karena posisinya dihitung dari
   getBoundingClientRect tombolnya (lihat openGridPicker di restock.js). */
.rpick-pop {
  /* width (bukan max-width): popover ini menempel di body dan menyusut
     mengikuti isinya, sehingga grid auto-fill di dalamnya tidak punya
     ruang untuk melebar dan jatuh jadi satu kolom. Dengan lebar pasti,
     kisinya benar-benar tersusun menyamping seperti kalender. */
  position: fixed; z-index: 1200; width: min(460px, calc(100vw - 16px));
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .18); padding: 8px;
}
.rpick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px;
  max-height: min(320px, 55vh); overflow-y: auto;
}
.rpick-cell {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 8px 9px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); font-family: var(--sans); text-align: left; cursor: pointer; min-width: 0;
}
.rpick-cell:hover { border-color: var(--red); background: #FEF2F2; }
.rpick-cell.active { background: var(--red); border-color: var(--red); }
.rpick-cell.active .rpick-cell-nama, .rpick-cell.active .rpick-cell-sub { color: #fff; }
.rpick-cell-nama { font-size: 0.76rem; font-weight: 700; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpick-cell-sub { font-size: 0.66rem; color: var(--muted); }

/* ---- Popup jumlah dari tombol "+ Restock" -------------------------------- */
.rqty-tujuan { font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 8px; }
.rqty-tujuan strong { color: var(--red); }
.rqty-catatan { font-size: 0.74rem; color: #A5762E; background: #F5EFE4; border: 1px solid #E9DCC2; border-radius: 8px; padding: 7px 9px; margin-bottom: 8px; }
.rqty-kosong { font-size: 0.78rem; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 8px; line-height: 1.5; }

/* ---- Preview PDF + tombolnya --------------------------------------------
   Sekarang selalu tampil penuh layar (confirm-modal--fullscreen, kelas
   dari css/laporan-impor.css) supaya lembar A4-nya kelihatan sebesar
   mungkin, sama seperti print preview sungguhan. .rprev-modal sendiri
   sengaja TIDAK diberi lebar/tinggi lagi di sini - itu semua sudah
   ditentukan .confirm-modal--fullscreen, dan aturan lama di sini
   (max-width:780px) kalau dibiarkan bisa menimpanya balik (restock.css
   dimuat SETELAH laporan-impor.css, jadi selektor sama-spesifik yang
   lebih belakang menang). */
/* Modal ini sendiri butuh padding lebih tipis dari .confirm-modal dasar
   (20px semua sisi, wajar untuk dialog kecil) - di preview penuh layar,
   20px di ATAS judul + margin-bottom judul + padding bilah zoom menumpuk
   jadi celah kosong yang lumayan besar sebelum kertas A4-nya kelihatan.
   Kanan/kiri/bawah tetap dibiarkan wajar, cuma atas yang dipangkas. */
.rprev-modal.confirm-modal--fullscreen { padding-top: 10px; }
/* Judul + bilah zoom SEBARIS (dulu bertumpuk 2 baris terpisah) - gaya
   print-preview asli (mis. dialog cetak Chrome): nama dokumen di kiri,
   kendali zoom di kanan, satu baris tipis saja di atas kertas, bukan
   blok header lebar yang menyisakan banyak ruang kosong. */
.rprev-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding-bottom: 6px; flex-shrink: 0;
}
.rprev-header-title { margin: 0; font-size: 0.86rem; font-weight: 700; color: var(--ink); }
.rprev-scroll {
  overflow: auto; background: #55585F; border-radius: 8px; padding: 12px;
  touch-action: pan-x pan-y;
}
.confirm-modal--fullscreen .rprev-scroll { flex: 1; max-height: none; }
/* Bungkus semua lembar A4 (bisa lebih dari satu halaman) jadi satu blok -
   supaya zoom menyisir seluruhnya sekaligus sebagai satu kesatuan, bukan
   cuma lembar pertama membesar sementara sisanya diam di tempat. */
.rprev-lembar { display: flex; flex-direction: column; align-items: center; gap: 8mm; width: max-content; margin: 0 auto; }
/* Bilah zoom - gaya sama dengan .doc-zoom-* di css/invoice.css (modul lain,
   file CSS terpisah - restock.html tidak memuatnya, jadi disalin ulang di
   sini, bukan dipakai bersama). Padding vertikalnya sendiri sudah dilepas
   (0, bukan 6px 0 8px seperti dulu) - sekarang duduk di dalam .rprev-header
   yang mengatur jarak vertikalnya sendiri, dobel padding cuma menambah
   celah kosong lagi. */
.rprev-zoom-bar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0; flex-shrink: 0; }
.rprev-zoom-btn {
  display: flex; align-items: center; justify-content: center; min-width: 34px; height: 30px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--card); color: var(--ink);
  font-size: 0.9rem; font-weight: 700; line-height: 1; cursor: pointer; font-family: var(--sans);
}
.rprev-zoom-btn:hover { border-color: var(--red); color: var(--red); }
.rprev-zoom-btn--wide { font-size: 0.72rem; }
.rprev-zoom-level { min-width: 52px; color: var(--muted); font-size: 0.76rem; font-weight: 700; text-align: center; }
.rprev-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; flex-shrink: 0; }
/* Khusus popup "Bagikan sebagai apa?" (pilihFormatShare) - tombol
   PDF/Excel dulu terlalu rapat dengan Batal di bawahnya (cuma
   mengandalkan gap:8px bawaan flex-wrap punya .rprev-actions sendiri,
   tidak ada jarak SETELAH baris ini sebelum .confirm-modal-actions
   mulai). Diberi kelas terpisah (bukan mengubah .rprev-actions
   langsung) supaya bilah aksi utama di preview (Atur Jumlah/Atur
   Konten/PDF/Excel/Share, memakai kelas dasar yang sama) tidak ikut
   berubah. */
.rprev-actions--pilih { margin-bottom: 14px; }
.rprev-btn {
  flex: 1 1 120px; padding: 9px 10px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--card); color: var(--ink);
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.rprev-btn:hover:not(:disabled) { background: var(--bg); }
.rprev-btn:disabled { opacity: .6; cursor: progress; }
.rprev-btn--biru { background: #EFF6FF; border-color: #BFDBFE; color: #1D4ED8; }
.rprev-btn--merah { background: var(--red); border-color: var(--red); color: #fff; }
/* Tombol Excel - hijau, senada dengan tombol Export di toolbar katalog
   (.restock-toolbar-btn--green) supaya "berkas keluar" konsisten
   warnanya, dan jelas beda dari PDF (biru) di sebelahnya. */
.rprev-btn--hijau { background: #ECFDF5; border-color: #A7F3D0; color: #047857; }
.rprev-btn--hijau:hover:not(:disabled) { background: #D1FAE5; }
.rprev-btn--merah:hover:not(:disabled) { background: var(--red-dark); }

/* Update Harga: tampilan harga supplier dalam rupiah (bukan input). */
.uh-harga-idr { display: flex; align-items: center; background: var(--bg); color: var(--ink-soft); font-weight: 700; }

/* ---- Atur Konten -------------------------------------------------------- */
/* Dua kolom tetap (modal dilebarkan lewat confirm-modal--wide) - dengan
   auto-fill, scrollbar modal bisa memicu jatuh ke satu kolom. */
.ak-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; }
@media (max-width: 380px) { .ak-list { grid-template-columns: 1fr; } }
.ak-item { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 0.8rem; }
.ak-item > label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
.ak-item:has(input:checked) { border-color: var(--red); background: #FEF2F2; }
/* Tombol geser urutan kolom (◀ ▶) - kecil, di ujung kanan tiap kotak. */
.ak-geser { display: flex; gap: 2px; flex: none; }
.ak-geser button { width: 22px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--muted); font-size: 0.5rem; line-height: 1; cursor: pointer; }
.ak-geser button:hover { color: var(--ink); border-color: var(--ink-soft); }
.ak-list { margin-bottom: 10px; }

/* ---- Halaman "Semua Restock" (restock-riwayat.html) --------------------
   Dua tingkat: daftar SEMUA supplier dulu (.rriw-kat-*), klik satu masuk ke
   daftar restock milik supplier itu (.rriw-subhead + .rriw-list, dipakai
   ulang dari sebelumnya). Halaman sendiri (bukan panel/overlay), isinya
   langsung mengikuti .content seperti halaman lain. */
.rriw-cari-baris { display: flex; margin-bottom: 4px; }

/* Tingkat 1 - kisi/tabel (bukan daftar satu kolom ke bawah), SEMUA
   supplier sekaligus (bukan cuma yang sudah punya restock) supaya bisa
   langsung diklik untuk masuk ke daftarnya. Selnya memakai ulang
   .rpick-cell - komponen sama seperti kisi pilih Supplier di
   restock.html - diperbesar sedikit lewat aturan bertarget di bawah
   karena di sini jadi konten UTAMA halaman (bukan popover sempit),
   ruangnya lebih longgar. */
.rriw-kat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rriw-kat-grid .rpick-cell { padding: 14px 16px; border-radius: var(--radius-md); }
.rriw-kat-grid .rpick-cell-nama { font-size: 0.86rem; white-space: normal; overflow-wrap: break-word; }
.rriw-kat-grid .rpick-cell-sub { font-size: 0.72rem; }

/* Tingkat 2 - "< Semua Supplier" + "+ Buat Restock" (sudah tahu suppliernya,
   tidak perlu memilih lagi) sejajar di atas daftar restock supplier itu.
   Tombol Hapus (kalau ada restock) dikelompokkan BERSAMA "+ Buat
   Restock" lewat .rriw-subhead-kanan - .rriw-subhead sendiri cuma
   melihat 2 anak (tombol Kembali, grup kanan), justify-content:
   space-between tetap menaruh keduanya di ujung berlawanan walau
   grup kanan sekarang berisi 2 tombol, bukan 1. */
.rriw-subhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.rriw-subhead-kanan { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
/* Tombol kembali: blok hijau, panah putih - mudah terlihat. Saat disorot
   bloknya sedikit terangkat & panahnya bergeser ke kiri (menunjuk arah). */
.rriw-back {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px 0 12px; border: none; border-radius: var(--radius-md);
  background: #059669; color: #fff; font-family: var(--sans); font-size: 0.84rem; font-weight: 700;
  cursor: pointer; white-space: nowrap; box-shadow: 0 1px 2px rgba(5, 150, 105, .25);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.rriw-back svg { width: 20px; height: 20px; flex: none; transition: transform .2s; }
.rriw-back:hover { background: #047857; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(5, 150, 105, .35); }
.rriw-back:hover svg { transform: translateX(-4px); }
.rriw-back:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(5, 150, 105, .25); }
.rriw-back:focus-visible { outline: 3px solid #A7F3D0; outline-offset: 2px; }
.rriw-baru {
  flex: 0 0 auto; padding: 8px 16px; border: none; border-radius: var(--radius-md);
  background: #059669; color: #fff; font-family: var(--sans);
  font-size: 0.78rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.rriw-baru:hover { background: #047857; }

.rriw-grup-jml {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 1px 7px; color: var(--ink-soft);
}
.rriw-list { display: flex; flex-direction: column; gap: 6px; }
/* Kartunya sendiri di .rriw-baris - SELURUH baris bisa diklik untuk
   membuka preview (lihat wiring [data-baris] di js/restock-riwayat.js),
   kecuali tombol PDF/Excel yang masih punya aksinya sendiri - cursor
   pointer di sini menandakan itu. flex-wrap supaya di HP yang sempit
   kontrol-kontrolnya pecah ke baris berikutnya sendiri, bukan meluber ke
   samping atau memaksakan satu baris yang kepotong. */
.rriw-baris {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--card); cursor: pointer;
}
.rriw-baris:hover { border-color: var(--red); }
.rriw-nama-link { text-decoration: none; color: inherit; min-width: 0; flex: 0 1 auto; }
/* display:block PENTING - overflow/text-overflow tidak berlaku pada
   elemen inline, jadi selama ini ketiga properti di bawah diam-diam tidak
   melakukan apa-apa: judul yang panjang tidak dipotong dengan elipsis
   melainkan mendorong isi baris sampai keluar kartu (di HP sampai membuat
   halamannya bisa digeser ke samping). */
.rriw-nama { display: block; font-size: 0.86rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rriw-nama-link:hover .rriw-nama { color: var(--red); }
/* Pensil ubah judul - tersembunyi sampai barisnya disorot; di layar sentuh
   (tanpa hover) selalu tampil. */
.rriw-nama-link { display: flex; align-items: center; gap: 6px; }
.rriw-nama-edit {
  flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .12s, background .12s;
}
.rriw-nama-edit svg { width: 14px; height: 14px; }
.rriw-baris:hover .rriw-nama-edit, .rriw-nama-edit:focus-visible { opacity: 1; }
.rriw-nama-edit:hover { background: #ECECEF; color: var(--ink); }
@media (hover: none) { .rriw-nama-edit { opacity: 1; } }
/* Total harga sendiri di tengah - margin-left:auto DI SINI dan di
   .rriw-kanan-grup (dua-duanya) sengaja dipasang berpasangan: dua margin
   otomatis pada baris flex yang sama membagi rata sisa ruang di antara
   keduanya, jadi total "mengambang" di tengah ruang kosong antara judul
   dan grup kanan - bukan mepet ke judul, bukan pula ikut ke kanan. */
.rriw-total {
  flex: 0 0 auto; margin-left: auto; font-size: 0.76rem; font-weight: 700; color: var(--ink-soft);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 3px 10px; white-space: nowrap;
}
/* Jumlah item -> 4 tombol aksi -> hapus, satu grup di paling kanan (dulu
   jumlah item sendirian di ujung kanan, tombol aksi malah nempel ke
   judul) - jumlah item duluan/lebih ke kiri di dalam grup ini, tombol
   aksi di paling kanannya, hapus tetap paling ujung. */
.rriw-kanan-grup { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; margin-left: auto; }
.rriw-aksi-grup { display: flex; align-items: center; gap: 8px; }
.rriw-meta { flex: 0 0 auto; font-size: 0.7rem; color: var(--muted); }

/* Dua tombol aksi: Unggah PDF, Unggah Excel - lingkaran kecil netral
   sampai punya lampirannya sendiri (.punya, berubah warna). Dulu ada
   4 (ditambah Tampilkan & Tambah Item) - keduanya dihapus, klik baris
   ini sendiri (di luar dua tombol ini) sekarang langsung membuka
   preview, lihat .rriw-baris di atas. */
.rriw-act {
  flex: 0 0 auto; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--muted);
  cursor: pointer; text-decoration: none; transition: background .12s, color .12s, border-color .12s;
}
.rriw-act svg { width: 14px; height: 14px; }
.rriw-act:hover { background: #ECECEF; color: var(--ink); }
.rriw-act--pdf.punya { background: #FEF2F2; border-color: #F3B4B8; color: var(--red-dark); }
.rriw-act--excel.punya { background: #ECFDF5; border-color: #86E0B8; color: #047857; }
/* Tombol "Database" - lari ke restock.html?restock=ID (isi SKU-nya lewat
   halaman Database Barang). Beda dari PDF/Excel: bentuknya pil berlabel
   (bukan lingkaran ikon polos) karena diminta lebih jelas maksudnya,
   bukan cuma ikon "+" seperti dulu. */
/* Pil berlabel (Hubungkan / Tambah item) - sedikit lebih besar dari
   tombol bulat biasa supaya ikon & tulisannya jelas. */
.rriw-act--pil { width: auto; height: 32px; padding: 0 12px; border-radius: var(--radius-full); gap: 6px; font-size: 0.74rem; font-weight: 700; color: var(--ink-soft); }
.rriw-act--pil svg { width: 16px; height: 16px; }
.rriw-act--pil span { white-space: nowrap; }
/* "Tambah item" hijau - menuju restock.html?restock=ID (Database Barang). */
.rriw-act--db { background: #ECFDF5; border-color: #86E0B8; color: #047857; }
.rriw-act--db:hover { background: #D1FAE5; border-color: #6EE7B7; color: #065F46; }

/* Dropdown status restock: Proses (kuning) / Selesai (hijau) - warnanya
   ikut berubah lewat class rriw-status--<status> yang diperbarui di JS
   setiap kali dipilih. Diletakkan di .rriw-kanan-grup, terpisah dari
   .rriw-aksi-grup (itu khusus tombol PDF/Excel/Database) - klik di sini
   juga sengaja dikecualikan dari klik-baris-buka-preview, lihat wiring
   [data-status-select] di js/restock-riwayat.js. */
.rriw-status {
  flex: 0 0 auto; font-family: var(--sans); font-size: 0.68rem; font-weight: 700;
  border-radius: var(--radius-full); border: 1px solid transparent; padding: 4px 10px;
  cursor: pointer;
}
/* 3 kondisi (lihat sql/050): Sedang Dibuat (abu) -> Proses Pengiriman
   (kuning) -> Selesai (hijau). --proses adalah nama status versi lama yang
   masih mungkin tersisa di data sampai migrasinya jalan - dibiarkan
   berwarna sama dengan --dibuat, tempat ia dipetakan. */
.rriw-status--dibuat,
.rriw-status--proses { background: var(--bg); border-color: var(--border); color: var(--ink-soft); }
.rriw-status--pengiriman { background: #FFFBEB; border-color: #FDE68A; color: #B45309; }
.rriw-status--selesai { background: #ECFDF5; border-color: #86E0B8; color: #047857; }
/* Terkunci karena order impor yang terhubung sudah tiba - statusnya
   ditentukan server, bukan lagi pilihan di sini. */
.rriw-status:disabled { cursor: not-allowed; opacity: 0.85; }

/* Tombol rantai "Hubungkan ke Laporan Impor". Sudah terhubung = biru, sama
   pola dengan .rriw-act--pdf/.punya di atas. */
.rriw-act--link.punya { background: #EFF6FF; border-color: #BFDBFE; color: #1D4ED8; }
.rriw-act--link.punya:hover { background: #DBEAFE; color: #1E40AF; }

/* Pemilih order impor di modal Hubungkan. */
.rriw-hub-hint { font-size: 0.76rem; color: var(--muted); line-height: 1.5; margin: 0 0 10px; }
/* Kaki dialog Hubungkan: Batal | Buka Laporan Impor | + Buat Impor Baru
   (pola yang sama dengan "Hubungkan Invoice ke PO"). */
.rriw-hub-actions { justify-content: space-between; }
.rriw-hub-actions .rriw-hub-buka { text-decoration: none; text-align: center; background: #EEF2FF; color: #4338CA; }
.rriw-hub-actions .rriw-hub-buka:hover { background: #E0E7FF; }
@media (max-width: 600px) {
  .rriw-hub-actions { flex-wrap: wrap; }
  .rriw-hub-actions .confirm { order: -1; width: 100%; }
}
/* Formulir Buat Impor Baru (salinan gaya .poinv-create-form) */
.rriw-impor-modal { width: min(700px, calc(100vw - 24px)); }
.rriw-impor-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; margin-top: 12px; }
.rriw-impor-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--ink-soft); font-size: .74rem; font-weight: 700; }
.rriw-impor-field--wide { grid-column: 1 / -1; }
.rriw-impor-field input, .rriw-impor-field select {
  width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink); font-family: inherit; font-size: .82rem; font-weight: 600; outline: none;
}
.rriw-impor-field input:focus, .rriw-impor-field select:focus { border-color: var(--red); background: #fff; box-shadow: 0 0 0 3px rgba(228, 33, 43, .1); }
.rriw-impor-error { grid-column: 1 / -1; min-height: 1em; margin: 0; color: var(--red-dark); font-size: .76rem; font-weight: 700; }
.rriw-impor-actions { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 600px) {
  .rriw-impor-form { grid-template-columns: 1fr; }
  .rriw-impor-field--wide, .rriw-impor-error, .rriw-impor-actions { grid-column: auto; }
}

.rriw-hub-list {
  max-height: 44vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px; background: var(--bg);
}

.rriw-hub-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card);
  text-align: left; cursor: pointer; font: inherit;
}

.rriw-hub-item:hover { border-color: var(--red); }
.rriw-hub-item.aktif { border-color: #1D4ED8; background: #EFF6FF; }

.rriw-hub-teks { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rriw-hub-teks strong { font-size: 0.82rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rriw-hub-teks small { font-size: 0.68rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rriw-hub-kanan { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rriw-hub-tiba { font-size: 0.68rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.rriw-hub-tiba.sudah { color: #047857; }
.rriw-hub-dipakai { font-size: 0.62rem; color: #B45309; white-space: nowrap; }

/* Menu Lihat/Ganti/Hapus saat tombol PDF/Excel yang SUDAH ada isinya
   diklik (lihat openLampiranMenu di js/restock-riwayat.js). */
.rriw-lamp-nama { font-size: 0.82rem; color: var(--ink-soft); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; word-break: break-word; }

@media (max-width: 640px) {
  /* Sebaris (kiri Tampilkan, kanan Buat Restock), bukan dua baris penuh
     bertumpuk - .rpick-bar gap:8px, jadi masing-masing separuh dikurangi
     setengah gap supaya keduanya pas sejajar tanpa meluber. */
  .rpick-go, .rpick-buat { flex: 1 1 calc(50% - 4px); }
  .rprev-btn { flex: 1 1 calc(50% - 4px); }

  /* Baris restock di HP: judul (+ total) di baris atas, semua kontrolnya
     di baris bawah sendiri.
     .rriw-baris memang sudah flex-wrap dari dulu, TAPI .rriw-kanan-grup
     di dalamnya "flex: 0 0 auto" - tidak boleh menyusut DAN tidak boleh
     membungkus, jadi begitu isinya lebih lebar dari layar (bertambah satu
     tombol rantai "Hubungkan" membuatnya lewat), yang terjadi bukan pecah
     baris melainkan meluber keluar kartu sampai halamannya sendiri bisa
     digeser ke samping - judulnya jadi ikut kepotong di kiri. Di sini grup
     itu diberi baris penuh sendiri dan diizinkan membungkus. */
  .rriw-kanan-grup {
    flex: 1 1 100%;
    margin-left: 0;
    gap: 8px;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  /* Tombol-tombolnya menempel ke kanan baris itu, jumlah item & status
     tetap di kiri - tetap terbaca sebagai satu baris kontrol, bukan
     tumpukan acak. */
  .rriw-aksi-grup { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  /* Judul boleh menyusut & dipotong dengan elipsis kalau memang panjang,
     supaya total harga di sebelahnya tidak ikut terdorong keluar. */
  .rriw-nama-link { flex: 1 1 0; }
  .rriw-status { max-width: 100%; }
}

/* Field Nama di Edit Info/Tambah Barang - dulu <input> satu baris, nama
   panjang jadi bergeser ke kiri mengikuti kursor dan sebagian besarnya
   tersembunyi di luar kotak (cuma kelihatan potongan akhirnya). Sekarang
   <textarea> 2 baris yang MEMBUNGKUS teksnya, jadi nama selalu kelihatan
   utuh tanpa perlu digeser. resize:none - membesarkan kotak ini secara
   manual tidak berguna, field lain di grid yang sama tidak ikut membesar. */
#br-nama { resize: none; line-height: 1.4; }

/* ---- Sinkron Toko (header daftar SKU) ------------------------------------
   Tombol teks kecil sejajar ikon Hapus/Ganti tampilan. Saat berjalan, label
   berganti jadi progres ("3/9") dan tombolnya dimatikan. Badge .restock-stok
   di kartu (abu, di kiri Terjual) sudah ada di atas - dipakai sejak stok
   mengikuti toko. */
.restock-sinkron-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--card); color: var(--ink-soft);
  font-family: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer;
  white-space: nowrap;
}
.restock-sinkron-btn svg { width: 14px; height: 14px; }
.restock-sinkron-btn:hover { border-color: var(--red); color: var(--red); }
.restock-sinkron-btn:disabled { opacity: 0.6; cursor: progress; }
.restock-sinkron-btn:disabled svg { animation: restock-sinkron-putar 1s linear infinite; }
@keyframes restock-sinkron-putar { to { transform: rotate(360deg); } }
.restock-stok--habis { background: #FDEBEC; color: var(--red-dark); }
@media (max-width: 600px) { .restock-sinkron-btn span { display: none; } .restock-sinkron-btn { padding: 0 8px; } }

/* ---- Berat terverifikasi + packaging (kartu & Edit Info) -------------- */
.restock-berat-label { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.restock-berat-cek { width: 14px; height: 14px; flex: none; }
.restock-berat--ok .restock-berat-label { color: var(--ink-soft); }
.restock-berat-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.restock-berat-pilih {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); cursor: pointer;
}
.restock-berat-pilih input { accent-color: #1D9BF0; margin: 0; width: 13px; height: 13px; }
.restock-berat-pilih span { display: inline-flex; align-items: center; gap: 4px; }
.restock-berat-pilih .restock-berat-cek { width: 13px; height: 13px; }
/* Edit Info / Tambah Barang ~3/4 layar di PC. */
@media (min-width: 900px) { .confirm-modal--barang { max-width: 720px; width: 50vw; } }
/* Sel kecil di kartu (Supplier/Ongkir/Total Modal/Berat/Supplier) rata tengah. */
.price-badge, .restock-berat, .restock-kategori { text-align: center; align-items: center; }
.restock-berat-label { justify-content: center; }
.restock-berat-pilih:has(input:checked) { border-color: var(--ink-soft); background: #fff; color: var(--ink); }
.restock-berat-pilih--ok:has(input:checked) { border-color: #1D9BF0; background: #EFF8FF; color: #0B5CAD; }
.restock-berat-total { font-size: 0.76rem; color: var(--muted); margin-left: auto; }
.restock-toolbar-btn--amber { border-color: #D97706; background: #FFFBEB; color: #B45309; }
.restock-toolbar-btn--amber:hover { background: #FEF3C7; }
.restock-toolbar-btn--amber.aktif { background: #D97706; color: #fff; }

/* Kartu sedang mengambil Histori Harga sebelum dibuka. */
.sku-row--memuat { cursor: progress; opacity: .85; }

/* Daftar 1.400+ kartu: kartu di luar layar tidak ikut dihitung tata
   letaknya (content-visibility) - mengganti satu kartu tidak lagi memaksa
   browser menata ulang seluruh daftar, jadi buka/tutup kartu di tab
   "Semua" secepat di tab supplier. contain-intrinsic-size = tinggi
   perkiraan untuk kartu yang belum pernah dilukis (bilah gulir stabil). */
#restock-list > .impor-card { content-visibility: auto; contain-intrinsic-size: auto 92px; }
/* Hanya kartu yang HISTORI-nya terbuka yang dipaksa dilukis - di mode
   Extend semua kartu berstatus .expanded, dan kalau semuanya dipaksa
   visible, seluruh daftar ditata ulang lagi tiap klik (lambat). */
#restock-list > .impor-card.sku-row--histori { content-visibility: visible; }

/* Edit Info / Tambah Barang: tombol Batal & Simpan menempel di dasar pop-up
   saat isinya digulir (pop-up sendiri yang menggulir, padding 20px). */
.confirm-modal--barang > .confirm-modal-actions {
  position: sticky; bottom: -20px; z-index: 2; margin: 10px -20px 0; padding: 12px 20px 20px;
  background: var(--card); border-top: 1px solid var(--border);
}

/* ---- Jumlah di preview restock bisa diketik langsung (klik angkanya) ---- */
.rprev-scroll td[data-kolom="qty"] { cursor: text; }
.rprev-scroll td[data-kolom="qty"]:hover { outline: 2px dashed #F59E0B; outline-offset: -4px; }
.rprev-scroll td.rprev-qty-edit { position: relative; }
.rprev-qty-asli { visibility: hidden; }
.rprev-qty-input {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 60px; height: 30px; box-sizing: border-box; margin: 0; padding: 0 4px;
  border: 2px solid #F59E0B; border-radius: 6px; background: #FFFBEB; color: inherit;
  font: inherit; font-weight: 700; text-align: center; outline: none;
}

/* ---- Klik nama item di preview restock: menu Hapus / Pindah / Duplikat ---- */
.rprev-scroll td[data-kolom="nama"] { cursor: pointer; }
.rprev-scroll td[data-kolom="nama"]:hover { outline: 2px dashed #6366F1; outline-offset: -4px; }
.rprev-menu {
  position: fixed; z-index: 3000; min-width: 190px; max-width: 280px; max-height: 60vh; overflow: auto;
  padding: 6px; border-radius: 10px; background: #fff; border: 1px solid #E5E7EB;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18); display: flex; flex-direction: column; gap: 2px;
}
.rprev-menu-judul { margin: 2px 8px 6px; font-size: .72rem; font-weight: 700; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rprev-menu button {
  border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 7px;
  font: inherit; font-size: .86rem; font-weight: 600; color: #111114; cursor: pointer;
}
.rprev-menu button:hover:not(:disabled) { background: #F3F4F6; }
.rprev-menu button[data-aksi="hapus"] { color: #DC2626; }
.rprev-menu button:disabled { color: #9CA3AF; cursor: not-allowed; }
.rprev-menu .rprev-menu-baru { color: #4F46E5; border-top: 1px solid #F1F1F4; border-radius: 0 0 7px 7px; margin-top: 2px; }
.rprev-menu button.aktif { background: #EEF2FF; color: #4338CA; }
.rprev-menu button[data-aksi="pindah"]:not(:disabled)::after,
.rprev-menu button[data-aksi="duplikat"]::after { content: '›'; float: right; color: #9CA3AF; font-weight: 700; }
.rprev-menu button[data-aksi="hapus"] { border-top: 1px solid #F1F1F4; border-radius: 0 0 7px 7px; margin-top: 2px; }

/* ---- Klik SKU di preview -> Database Barang ---- */
.rprev-scroll td[data-kolom="sku"] { cursor: pointer; }
.rprev-scroll td[data-kolom="sku"]:hover .restock-pdf-sku { text-decoration: underline; }
.sku-row--sorot { animation: skuSorot 2.6s ease-out; }
@keyframes skuSorot {
  0%, 35% { box-shadow: 0 0 0 3px #6366F1, 0 6px 20px rgba(99, 102, 241, .25); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

/* ---- Klik Harga Terbaru di preview -> ketik harga baru ---- */
.rprev-scroll td[data-kolom="harga_terbaru"] { cursor: text; }
.rprev-scroll td[data-kolom="harga_terbaru"]:hover { outline: 2px dashed #10B981; outline-offset: -4px; }
.rprev-harga-input { width: 72px; border-color: #10B981; background: #ECFDF5; }

/* ---- Harga real di bawah harga rumus (kartu Database Barang) ---- */
.mp-real { margin-top: 2px; font-size: 13px; font-weight: 800; color: #DC2626; }
@media (max-width: 560px) { .mp-real { font-size: 11.5px; } }
.mp-real--web { color: #2563EB; }
.restock-saring-harga {
  height: 36px; padding: 0 30px 0 12px; border: 1px solid var(--border, #E5E7EB); border-radius: 999px;
  background: #fff; font: inherit; font-size: .82rem; font-weight: 600; color: var(--ink, #111114); cursor: pointer; max-width: 220px;
}
.restock-saring-harga.aktif { border-color: #DC2626; color: #DC2626; background: #FEF2F2; }

/* ---- Impor Harga Real (js/harga-real.js) - dipakai Database Barang & Skill Import ---- */
.harga-real-dialog { max-width: 760px; width: calc(100vw - 32px); }
.harga-real-centang { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 10px; font-size: .86rem; line-height: 1.4; cursor: pointer; }
.harga-real-centang input { margin-top: 3px; }
.harga-real-bungkus { max-height: 46vh; overflow: auto; }
.harga-real-angka { text-align: right; white-space: nowrap; }
.harga-real-baru { font-weight: 800; color: #DC2626; }
.harga-real-kosong { color: #9CA3AF; font-style: italic; }
.harga-real-tidakada { margin: 8px 0; font-size: .8rem; color: #6B7280; }
.harga-real-tidakada summary { cursor: pointer; font-weight: 700; }
.harga-real-tidakada p { margin: 6px 0 0; max-height: 120px; overflow: auto; word-break: break-word; }

/* ---- Barang DISCONTINUE (barang.aktif = 0) ---- */
.sku-row--disc { opacity: .55; filter: grayscale(.6); }
.sku-row--disc:hover { opacity: .8; }
.restock-disc-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px; background: #DC2626; color: #fff;
  font-size: .66rem; font-weight: 800; letter-spacing: .04em;
}
.restock-disc-cek { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed #FCA5A5; border-radius: 10px; background: #FEF2F2; cursor: pointer; font-size: .86rem; }
.restock-disc-cek input { width: 18px; height: 18px; accent-color: #DC2626; }

/* ---- Tanda PERLU REVISI (barang.perlu_revisi) ---- */
.restock-revisi-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px; background: #FFEDD5; color: #C2410C;
  border: 1px solid #FDBA74; font-size: .66rem; font-weight: 800; letter-spacing: .03em; white-space: nowrap;
}
.restock-revisi-cek { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px dashed #FDBA74; border-radius: 10px; background: #FFF7ED; }
.restock-revisi-cek > label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: .86rem; }
.restock-revisi-cek input[type="checkbox"] { width: 18px; height: 18px; accent-color: #EA580C; }
.restock-revisi-cek input[hidden] { display: none; }

/* ---- "Link Harga" (halaman edit harga BigSeller) di samping kolom Shopee ---- */
.mp-col--link { display: flex; align-items: center; }
.restock-link-harga {
  display: inline-block; padding: 6px 12px; border: 1px solid #FCA5A5; border-radius: 999px;
  color: #DC2626; font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; background: #fff;
}
.restock-link-harga:hover { background: #FEF2F2; text-decoration: underline; }

/* ---- Link Pintas (tombol rantai di kepala Database Barang) ---- */
.link-pintas-modal { max-width: 560px; width: calc(100vw - 32px); }
.link-pintas-daftar { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.link-pintas-item {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border, #E5E7EB);
  border-radius: 10px; text-decoration: none; color: var(--ink, #111114); background: #fff;
}
a.link-pintas-item:hover { border-color: #DC2626; background: #FEF2F2; }
.link-pintas-item span { font-weight: 700; font-size: .9rem; }
.link-pintas-item small { color: #6B7280; font-size: .74rem; }
.link-pintas-item--kosong { background: #F9FAFB; color: #9CA3AF; border-style: dashed; }
.link-pintas-atur { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.link-pintas-baris { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 6px; align-items: center; }
.link-pintas-hapus { width: 30px; height: 30px; border: 1px solid var(--border, #E5E7EB); border-radius: 8px; background: #fff; color: #DC2626; font-size: 1.1rem; cursor: pointer; }
.link-pintas-atur .restock-btn-kecil { align-self: flex-start; }
@media (max-width: 560px) { .link-pintas-baris { grid-template-columns: 1fr auto; } .link-pintas-baris [data-f="url"] { grid-column: 1; } }

/* ---- Ongkir otomatis 10% (ongkir belum diisi) ---- */
.price-badge.ongkir--auto .pb-val { opacity: .75; font-style: italic; }
.pb-auto { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: #FEF3C7; color: #92400E; font-size: 10px; font-weight: 700; letter-spacing: 0; vertical-align: 1px; }
.riwayat-ongkir-auto { color: #92400E; font-size: .75em; }

/* ---- Tab Restock: Sedang Dibuat | Semua Supplier (restock-riwayat.html) ---- */
.rriw-tabs { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.rriw-tabs[hidden] { display: none; }
.rriw-tab { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--border, #E5E7EB); border-radius: 999px; background: #fff; color: #374151; font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.rriw-tab:hover { background: #F9FAFB; }
.rriw-tab.aktif { background: #DC2626; border-color: #DC2626; color: #fff; }
.rriw-tab-jumlah { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #F3F4F6; color: #374151; font-size: .74rem; display: inline-flex; align-items: center; justify-content: center; }
.rriw-tab.aktif .rriw-tab-jumlah { background: rgba(255,255,255,.25); color: #fff; }
.rriw-sup { flex: none; margin-right: 8px; padding: 3px 10px; border: 0; border-radius: 999px; background: #EEF2FF; color: #3730A3; font: inherit; font-size: .74rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.rriw-sup:hover { background: #E0E7FF; }

/* ---- Daftar restock berkolom (tab Sedang Dibuat & daftar per supplier) ----
   Lebar kolom tetap supaya nama supplier, judul, total, dan grup kanan
   lurus dari baris ke baris (dulu total "mengambang" di tengah sisa ruang,
   posisinya beda-beda tiap baris). Kalau ruangnya kurang, grup kanan tetap
   turun ke baris bawah seperti sebelumnya (flex-wrap .rriw-baris). */
.rriw-list--kolom .rriw-sel-sup { flex: 0 0 170px; min-width: 0; display: flex; }
.rriw-list--kolom .rriw-sel-sup .rriw-sup { margin-right: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rriw-list--kolom .rriw-nama-link { flex: 1 1 0; min-width: 140px; }
.rriw-list--kolom .rriw-sel-total { flex: 0 0 120px; display: flex; justify-content: flex-end; }
.rriw-list--kolom .rriw-sel-total .rriw-total { margin-left: 0; }
.rriw-list--kolom .rriw-kanan-grup { margin-left: 24px; }
.rriw-list--kolom .rriw-meta { min-width: 52px; text-align: right; }
@media (max-width: 640px) {
  .rriw-list--kolom .rriw-sel-sup { flex: 0 0 auto; max-width: 45%; }
  .rriw-list--kolom .rriw-nama-link { min-width: 0; }
  .rriw-list--kolom .rriw-sel-total { flex: 0 0 auto; }
  .rriw-list--kolom .rriw-sel-total:empty { display: none; }
  .rriw-list--kolom .rriw-kanan-grup { margin-left: 0; }
  .rriw-list--kolom .rriw-meta { min-width: 0; text-align: left; }
}
/* Layar laptop (641-1399px): ruangnya tidak cukup untuk satu baris, jadi
   jumlah item + status + tombol pindah ke baris kedua - rata kanan, rapi
   bertumpuk, bukan menggantung acak. */
@media (min-width: 641px) and (max-width: 1399px) {
  .rriw-list--kolom .rriw-kanan-grup { flex: 1 1 100%; margin-left: 0; justify-content: flex-end; }
}

/* ---- Sidebar kiri pratinjau restock: restock lain dari supplier yang sama ---- */
.rprev-badan { flex: 1; min-height: 0; display: flex; gap: 10px; }
.confirm-modal--fullscreen .rprev-badan .rprev-scroll { flex: 1; min-width: 0; }
.rprev-samping { flex: 0 0 210px; overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.rprev-samping-judul { font-size: .72rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 4px 6px 6px; }
.rprev-samping-item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; font: inherit; cursor: pointer; }
.rprev-samping-item:hover { background: #F6F6F8; }
.rprev-samping-item.aktif { background: #FEF2F2; border-color: #FCA5A5; }
.rprev-samping-nama { font-size: .82rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rprev-samping-item.aktif .rprev-samping-nama { color: var(--red); }
.rprev-samping-sub { font-size: .7rem; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.rprev-titik { width: 7px; height: 7px; border-radius: 50%; flex: none; background: #9CA3AF; }
.rprev-titik--dibuat { background: #6B7280; }
.rprev-titik--pengiriman { background: #D97706; }
.rprev-titik--selesai { background: #059669; }
/* Pindah restock lewat sidebar: tampil langsung, tanpa animasi masuk. */
.confirm-overlay.rprev-langsung, .confirm-overlay.rprev-langsung .confirm-modal { transition: none !important; animation: none !important; }
@media (max-width: 760px) { .rprev-samping { display: none; } }

/* ---- Simpanan restock (salinan beku) ---- */
.rriw-simpanan { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; margin-left: 6px; border: 1px solid #C7D2FE; border-radius: 999px; background: #EEF2FF; color: #3730A3; font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; }
.rriw-simpanan svg { width: 14px; height: 14px; }
.rriw-simpanan:hover { background: #E0E7FF; }
.rsimp-catatan { font-size: .76rem; color: var(--muted); }

/* Kepala daftar SKU di HP: saringan + urutan + tombol turun ke baris
   sendiri dan dropdown-nya menyusut, supaya halaman tidak melebar. */
@media (max-width: 700px) {
  .restock-sku-head { flex-wrap: wrap; row-gap: 8px; }
  .restock-sku-head .section-head-right { flex: 1 1 100%; flex-wrap: wrap; }
  .restock-sku-head .restock-saring-harga { flex: 1 1 130px; min-width: 0; max-width: none; }
}

/* ---- Pilihan bahasa lembar restock (kepala pratinjau, kiri bilah zoom) ---- */
.rprev-bahasa { display: inline-flex; margin-left: auto; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: 999px; background: #F6F6F8; }
.rprev-bahasa button { height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.rprev-bahasa button:hover { color: var(--ink); background: #ECECEF; }
.rprev-bahasa button.aktif { background: #fff; color: var(--red); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }