/* ==========================================================================
   Skill Import — memakai kerangka Skill Stock (css/laporan-stok.css:
   .stok-drop, .stok-kartu, .stok-btn, .stok-d-tabel, .stok-restock-field)
   supaya kedua halaman "Skill" terlihat satu keluarga. Yang di sini hanya
   bagian yang khas halaman ini.
   ========================================================================== */
.skill-petunjuk h2 { font-size: 0.95rem; font-weight: 800; margin: 0 0 10px; }
.skill-petunjuk ol { margin: 0; padding-left: 20px; font-size: 0.84rem; line-height: 1.7; color: var(--ink-soft); }
.skill-petunjuk code { background: var(--bg); padding: 1px 6px; border-radius: 4px; font-size: 0.8rem; }

.skill-ringkas { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 12px; }

/* ---- Update harga dari berkas supplier (js/skill-harga.js) ---- */
/* Dua kotak unggah berdampingan, sama tinggi; di layar sempit bertumpuk. */
.skill-unggah-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; margin-bottom: 16px; }
.skill-unggah-dua > .section { margin: 0; display: flex; flex-direction: column; }
.skill-unggah-dua .stok-drop { flex: 1; }
.skill-unggah-dua .skill-harga-kotak { flex: 1; }
@media (max-width: 900px) { .skill-unggah-dua { grid-template-columns: 1fr; } }
/* Tiga kotak: berdampingan di layar lebar, dua kolom di layar sedang. */
/* minmax(0, ...) = lebar kolom TETAP mengikuti grid, bukan ikut melebar
   karena nama berkas yang panjang sesudah diunggah. */
.skill-unggah-tiga { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
.skill-unggah-dua > .section { min-width: 0; }
.skill-unggah-dua .full-kotak-daftar li span { min-width: 0; flex: 1; }
.skill-unggah-dua .full-kotak { min-width: 0; }
@media (max-width: 1200px) { .skill-unggah-tiga { grid-template-columns: 1fr 1fr; } .skill-unggah-tiga > .section:first-child { grid-column: 1 / -1; } }
@media (max-width: 900px) { .skill-unggah-tiga { grid-template-columns: 1fr; } .skill-unggah-tiga > .section:first-child { grid-column: auto; } }
.skill-unggah-dua .skill-terjual-kotak { flex: 1; }
.skill-terjual-sec { margin-top: -6px; }
.skill-terjual-kotak .full-kotak-huruf { font-size: 1.05rem; }
.skill-terjual-mode { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; font-size: 0.8rem; color: var(--ink-soft); }
.skill-terjual-mode label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.skill-terjual-mode input { margin-top: 3px; accent-color: var(--red); }
.skill-terjual-berubah td { background: #FFFBEB; }
.skill-terjual-tabel .skill-nama small { display: block; color: var(--muted); font-size: 0.7rem; }
.skill-terjual-tidak { margin: 10px 0; font-size: 0.78rem; color: var(--ink-soft); }
.skill-terjual-tidak summary { cursor: pointer; font-weight: 700; }
.skill-terjual-tidak ul { margin: 6px 0 0; padding-left: 18px; max-height: 220px; overflow-y: auto; }
.skill-terjual-tidak li { margin: 2px 0; }
.skill-harga-sec { margin-top: 0; }
.skill-harga-kotak { min-height: 0; }
.skill-harga-kotak .full-kotak-huruf { font-size: 1.05rem; }
.skill-harga-supplier { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); }
.skill-harga-supplier select {
  flex: 1; min-width: 0; max-width: 360px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: #fff; font-family: inherit; font-size: 0.82rem; font-weight: 700; color: var(--ink);
}
.skill-harga-input { width: 92px; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; font-family: inherit; font-size: 0.8rem; font-weight: 700; text-align: right; color: var(--ink); }
.skill-harga-input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(228, 33, 43, .12); }
.skill-harga-naik { color: #B91C1C; font-weight: 800; }
.skill-harga-turun { color: #047857; font-weight: 800; }
.skill-harga-sama { color: var(--muted); font-weight: 700; }
.skill-harga-dobel { color: #B45309; font-weight: 700; font-size: 0.68rem; }
.skill-harga-sukses { color: #166534; font-weight: 700; }
.skill-harga-aksi { justify-content: center; flex-wrap: wrap; }
/* Tombol Muat ulang di atas kotak unggah (kanan) */
.skill-mulai-ulang { margin: -6px 0 8px; text-align: right; font-size: 0.8rem; }
/* Preview ~3/4 layar (bukan layar penuh): tabel tanpa batas tinggi, kaki tetap terlihat */
.skill-harga-preview { display: flex; flex-direction: column; padding: 14px 16px 12px; width: 76vw !important; max-width: 1240px !important; height: calc(100vh - 48px); max-height: calc(100vh - 48px); }
@media (max-width: 900px) { .skill-harga-preview { width: calc(100vw - 16px); max-width: none; height: calc(100vh - 16px); max-height: calc(100vh - 16px); padding: 10px; } }
.skill-harga-preview-isi { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; }
.skill-harga-preview-isi .full-bungkus { max-height: none; }
.skill-harga-preview .full-preview-kaki { flex-shrink: 0; margin-top: 0; }
.skill-harga-hasil .full-tabel-c .skill-nama, .skill-harga-hasil .full-c-nama { min-width: 220px; }
.skill-ringkas .stok-kartu strong.skill-kecil { font-size: 1rem; color: var(--ink); }

/* Pengaturan (supplier & mode) - dua kolom di PC, satu di HP. */
.skill-atur { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin: 4px 0 8px; }
.skill-atur .stok-restock-field { margin-bottom: 10px; }
@media (max-width: 720px) { .skill-atur { grid-template-columns: 1fr; } }

/* Ceklis field per baris - mode "Perbarui Item"/"Tambah & Perbarui" (lihat
   bagianFieldChecklist di js/skill-import.js). Field yang dikosongkan
   tidak ikut dikirim: baris baru memakai bawaan kosong/0, baris yang sudah
   ada mempertahankan nilai yang tersimpan sekarang (tidak tertimpa). */
.restock-col-head { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 6px; }
.restock-col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px 10px; margin-bottom: 4px; }
.restock-col-item { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--ink); }
.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; }
@media (max-width: 640px) { .restock-col-grid { grid-template-columns: 1fr 1fr; } }

.skill-tabel-bungkus { max-height: 62vh; margin-top: 12px; }
.skill-gbr { width: 60px; text-align: center; padding: 4px 6px; }
.skill-gbr img { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; background: #fff; vertical-align: middle; }
.skill-gbr-kosong { display: inline-block; width: 48px; height: 48px; border-radius: 6px; background: #F4F4F6; vertical-align: middle; }
.skill-nama { white-space: normal; min-width: 260px; line-height: 1.35; }
.skill-varian { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #EEF2FF; color: #4F46E5; font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.stok-d-tabel .skill-angka { text-align: center; width: 64px; }

.stok-drop.seret { border-color: var(--red); background: #FFF5F5; }

/* ---- dialog konfirmasi import (menggantikan confirm() bawaan peramban) ---- */
.skill-konfirmasi { max-width: min(480px, 96vw); }
.skill-konfirmasi-kepala { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.skill-konfirmasi-kepala .dok-dialog-judul { margin: 0; font-size: 1.05rem; }
.skill-konfirmasi-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: #FFF0F0; color: var(--red);
}
.skill-konfirmasi-ikon svg { width: 20px; height: 20px; }
.skill-konfirmasi-rincian {
  margin: 0 0 12px; padding: 4px 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.skill-konfirmasi-rincian > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 2px; font-size: 0.86rem; }
.skill-konfirmasi-rincian > div + div { border-top: 1px dashed var(--border); }
.skill-konfirmasi-rincian dt { margin: 0; color: var(--muted); font-weight: 600; white-space: nowrap; }
.skill-konfirmasi-rincian dd { margin: 0; color: var(--ink); text-align: right; }
.skill-konfirmasi-rincian strong { color: var(--ink); font-weight: 800; }
.skill-konfirmasi-redup { color: var(--muted); font-weight: 500; font-size: 0.8rem; }
.skill-konfirmasi-ket { font-size: 0.78rem; margin-bottom: 14px; }

/* Catatan "Hasil tersimpan ..." di atas ringkasan saat membuka riwayat. */
.skill-riwayat-info { margin-bottom: 10px; }
.skill-field-all { font-size: 0.78rem; text-decoration: none; }