/* ==========================================================================
   Laporan Stock — kotak unggah, tabel hasil, dan riwayat.

   Memakai kerangka yang sudah ada (css/main.css + css/laporan-impor.css
   untuk .section, .section-head, .impor-empty); di sini hanya bagian yang
   khas menu ini.
   ========================================================================== */

/* ---- kotak unggah -------------------------------------------------------- */
.stok-unggah-sec { padding-top: 18px; }

.stok-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 34px 20px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  text-align: center;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.stok-drop:hover { border-color: #C7C7D1; }
.stok-drop.masuk { border-color: var(--red); background: #FFF5F5; }
.stok-drop svg { width: 34px; height: 34px; color: var(--muted); }
.stok-drop-judul { margin: 4px 0 0; font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.stok-drop-ket { margin: 0; font-size: 0.78rem; color: var(--muted); line-height: 1.5; }

.stok-tautan {
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: var(--red);
  cursor: pointer;
  text-decoration: underline;
}

.stok-sibuk { margin: 12px 0 0; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }

/* ---- ringkasan angka ----------------------------------------------------- */
.stok-sub { margin: 2px 0 0; font-size: 0.82rem; color: var(--muted); }

/* flex, bukan grid kolom-mengisi: kartunya cukup selebar isinya sendiri.
   Sebagai grid 1 kolom ia melar selebar halaman dan jadi kotak panjang
   yang hampir seluruhnya kosong. justify-content:center - dengan cuma
   satu kartu, barisnya dipusatkan secara horizontal alih-alih menempel
   di kiri seperti flex normal. */
.stok-ringkas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 16px;
}
.stok-kartu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  text-align: center;
}
.stok-kartu span { font-size: 0.72rem; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .03em; }
.stok-kartu strong { font-size: 1.5rem; font-weight: 800; color: var(--red); }

.stok-catatan {
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* ---- baris aksi ---------------------------------------------------------- */
.stok-aksi {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.stok-tanggal {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.stok-tanggal input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.stok-aksi-tombol { display: flex; gap: 8px; flex-wrap: wrap; }

.stok-btn {
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.stok-btn:hover { background: var(--bg); }
.stok-btn:disabled { opacity: .55; cursor: default; }
.stok-btn--utama { background: var(--red); border-color: var(--red); color: #fff; }
.stok-btn--utama:hover { background: var(--red-dark); }
.stok-btn--utama:disabled { background: #94A3B8; border-color: #94A3B8; }

/* ---- menu kecil pilihan format (PNG/PDF) --------------------------------
   Muncul menempel di bawah tombol Share/Download (lihat bukaMenuFormat di
   js/laporan-stok.js). Sama gayanya dengan .dok-menu di css/dokumen.css. */
.stok-format-menu {
  position: fixed;
  z-index: 1300;
  min-width: 160px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(20, 20, 30, .18);
}
.stok-format-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.stok-format-menu button svg { width: 16px; height: 16px; color: var(--ink-soft); flex-shrink: 0; }
.stok-format-menu button:hover { background: var(--bg); }

/* ---- tabel hasil --------------------------------------------------------- */
/* Sengaja polos, mengikuti permintaan: tanpa hiasan, cuma tiga kolom yang
   terbaca jelas. Lebar kolom No & angka dikunci supaya nama kategori yang
   panjang tidak menggeser angkanya. */
.stok-tabel-bungkus { overflow-x: auto; }

.stok-tabel {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.stok-tabel th, .stok-tabel td { padding: 10px 12px; text-align: left; }
.stok-tabel thead th {
  background: #111114;
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
}
.stok-tabel thead th:first-child { border-radius: 8px 0 0 8px; }
.stok-tabel thead th:last-child { border-radius: 0 8px 8px 0; }
.stok-tabel tbody tr { border-bottom: 1px solid var(--border); }
.stok-tabel tbody tr:nth-child(even) { background: #FAFAFB; }
.stok-tabel .stok-no { width: 64px; text-align: center; color: var(--muted); }
.stok-tabel .stok-angka { width: 170px; text-align: center; font-weight: 700; }
.stok-tabel tbody tr.stok-sorot { background: #FDF0DC; }
.stok-tabel tbody tr.stok-sorot td { color: #8A5A12; font-weight: 700; }
.stok-tabel tfoot td {
  background: #111114;
  color: #fff;
  font-weight: 800;
  font-size: 0.88rem;
}
.stok-tabel tfoot td:first-child { border-radius: 8px 0 0 8px; }
.stok-tabel tfoot td:last-child { border-radius: 0 8px 8px 0; }

/* Baris kategori bisa ditekan untuk melihat daftar barangnya. Tanpa label
   apa pun - tabelnya tetap sepolos yang diminta; petunjuknya cukup dari
   kursor & sorotan saat disentuh/disorot. */
.stok-tabel tbody tr.stok-bisa-klik { cursor: pointer; }
.stok-tabel tbody tr.stok-bisa-klik:hover { background: #EEF2FF; }
.stok-tabel tbody tr.stok-bisa-klik:active { background: #E0E7FF; }
.stok-tabel tbody tr.stok-bisa-klik:focus-visible { outline: 2px solid #4F46E5; outline-offset: -2px; }

/* ---- dialog daftar barang per kategori ----------------------------------
   Selebar mungkin (dialog biasa 340px terlalu sempit untuk judul barang),
   dengan tabel yang digeser mendatar sendiri kalau judulnya panjang. */
.stok-dialog {
  width: 100%;
  /* Selebar mungkin di PC: judul marketplace panjang, dan gambarnya harus
     cukup besar untuk dikenali tanpa diperbesar satu-satu. */
  max-width: min(1400px, 96vw);
}

.stok-cari-barang {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  margin-bottom: 10px;
}
.stok-cari-barang:focus { border-color: var(--red); background: #fff; box-shadow: 0 0 0 3px rgba(228, 33, 43, .12); }

/* Digulung dua arah: ke bawah untuk barisnya, ke kanan-kiri untuk judul
   barang yang panjang - jadi judulnya tidak dipaksa melipat jadi tiga baris
   dan daftarnya tetap enak dipindai. */
.stok-d-bungkus {
  max-height: 72vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  -webkit-overflow-scrolling: touch;
  /* Sampai di ujung daftar, gulirannya BERHENTI di sini - tidak diteruskan
     ke halaman di belakangnya (scroll chaining). Pasangan dari
     kunciGulirHalaman() di js/laporan-stok.js: yang itu mencegah roda mouse
     menggulir halaman, yang ini mencegah momentum geseran jari lompat ke
     sana begitu daftarnya mentok. */
  overscroll-behavior: contain;
}

.stok-d-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  white-space: nowrap;
}
.stok-d-tabel th, .stok-d-tabel td { padding: 6px 10px; text-align: left; }
/* Kepala tabel ikut tergulung ke bawah tapi tetap menempel di atas, supaya
   masih jelas kolom mana yang mana sesudah menggulir jauh. */
.stok-d-tabel thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.stok-d-tabel tbody tr { border-bottom: 1px solid var(--border); }
.stok-d-tabel tbody tr:last-child { border-bottom: 0; }
.stok-d-tabel tbody tr:nth-child(even) { background: #FAFAFB; }
.stok-d-tabel tbody tr[hidden] { display: none; }

.stok-d-tabel .stok-d-no { width: 38px; text-align: right; color: var(--muted); font-weight: 600; }
.stok-d-tabel .stok-d-sku { font-weight: 800; color: #4F46E5; letter-spacing: .01em; }
.stok-d-tabel .stok-d-judul { color: var(--ink); }
/* ---- riwayat ------------------------------------------------------------- */
/* Tiap laporan tersimpan = kartu timbul (putih, bayangan, garis merah di
   kiri, ikon berkas) - dulu cuma baris teks bergaris tipis yang nyaris
   tenggelam di latar halaman. Dipakai Skill Stock DAN Skill Full. */
.stok-riwayat-daftar { display: flex; flex-direction: column; gap: 10px; }

.stok-riwayat-baris {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 5px solid var(--red);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .05);
  transition: box-shadow .15s ease, transform .15s ease;
}
.stok-riwayat-baris:hover {
  box-shadow: 0 8px 20px rgba(15, 23, 42, .13), 0 2px 4px rgba(15, 23, 42, .06);
  transform: translateY(-1px);
}

.stok-riwayat-buka {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 3px;
  align-items: center;
  padding: 12px 10px 12px 12px;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 0 11px 11px 0;
}
.stok-riwayat-buka:hover { background: #FFF6F6; }
.stok-riwayat-buka::before {
  content: '';
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: #FDEBEC;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E4212B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h6'/%3E%3C/svg%3E");
}
.stok-riwayat-tgl { font-size: 0.9rem; font-weight: 800; color: var(--ink); }
.stok-riwayat-ket { font-size: 0.76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.stok-riwayat-hapus {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.stok-riwayat-hapus:hover { background: #FDEBEC; color: var(--red); }

@media (max-width: 860px) {
  .stok-riwayat-buka { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; padding: 10px 8px 10px 10px; }
  .stok-riwayat-buka::before { width: 34px; height: 34px; background-size: 19px 19px; border-radius: 9px; }
  .stok-riwayat-tgl { font-size: 0.86rem; }
}

/* ---- toast --------------------------------------------------------------- */
.stok-toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translate(-50%, 12px);
  z-index: 1200;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .92);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.stok-toast.tampil { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 860px) { .stok-toast { bottom: 24px; } }

/* Judul kolom jumlah punya dua versi (lihat js/laporan-stok.js): yang
   panjang untuk layar lebar, yang pendek untuk HP. */
.stok-th-sempit { display: none; }

@media (max-width: 560px) {
  .stok-drop { padding: 26px 14px; }
  .stok-aksi { align-items: stretch; }
  .stok-aksi-tombol { width: 100%; }
  .stok-aksi-tombol .stok-btn { flex: 1; text-align: center; }

  /* Tabelnya HARUS muat selebar layar. Sebelumnya min-width 420px memaksa
     gulir mendatar, sehingga kolom jumlah - isi terpenting laporan ini -
     baru terlihat setelah digeser. min-width dilepas, judul kolomnya
     dipendekkan jadi "Kosong", dan kolom No/angka dipersempit supaya nama
     kategori tetap kebagian ruang. */
  .stok-tabel { font-size: 0.78rem; min-width: 0; }
  .stok-tabel th, .stok-tabel td { padding: 9px 6px; }
  .stok-th-lebar { display: none; }
  .stok-th-sempit { display: inline; }
  .stok-tabel .stok-angka { width: 62px; }
  .stok-tabel .stok-no { width: 30px; }
  /* Nama kategori yang panjang melipat, bukan melebarkan tabel. */
  .stok-tabel tbody td:nth-child(2) { white-space: normal; word-break: break-word; line-height: 1.35; }

  .stok-d-tabel { font-size: 0.74rem; }
  .stok-d-tabel th, .stok-d-tabel td { padding: 6px 8px; }
}

/* ---- gambar di daftar per kategori ---- */
.stok-d-tabel .stok-d-gbr { width: 108px; text-align: center; padding: 5px 8px; }
.stok-d-gambar {
  display: inline-block;
  width: 96px;
  height: 96px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  cursor: zoom-in;
  vertical-align: middle;
}
.stok-d-gambar--kosong { cursor: default; background: #F4F4F6; }
/* Empat tombol (Tutup, Salin, Excel, PDF) - boleh membungkus di layar sempit. */
.stok-d-aksi { flex-wrap: wrap; }

/* Lightbox: gambar diperbesar di atas dialognya. z-index di atas
   .confirm-overlay; ditutup dengan ketukan di mana saja atau Esc. */
.stok-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 16px;
  background: rgba(10, 10, 14, .9);
  cursor: zoom-out;
}
.stok-lightbox img {
  max-width: min(92vw, 900px);
  max-height: 78vh;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
}
.stok-lightbox-ket {
  margin: 0;
  max-width: 92vw;
  color: #E5E7EB;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.4;
}
.stok-lightbox-tutup {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
@media (max-width: 860px) {
  .stok-d-tabel .stok-d-gbr { width: 50px; padding: 3px 4px; }
  .stok-d-gambar { width: 42px; height: 42px; }
}

/* ---- dialog per kategori: tombol bawah selalu terlihat, dua tabel berdampingan ----
   .confirm-modal bawaan menggulung SELURUH isinya (overflow-y: auto) begitu
   lebih tinggi dari layar - tombol bawahnya ikut tergulung keluar layar.
   Di sini yang boleh menggulung hanya daftarnya (.stok-d-bungkus); judul,
   kotak cari, dan tombol menempel di tempatnya. */
.stok-dialog {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  overflow: hidden;
  padding: 14px 18px 12px;
}
.stok-dialog .dok-dialog-judul { font-size: 0.92rem; margin: 0 0 8px; flex-shrink: 0; }
.stok-dialog .stok-cari-barang { padding: 6px 12px; font-size: 0.8rem; margin-bottom: 8px; flex-shrink: 0; }
.stok-dialog .stok-d-bungkus { flex: 1 1 auto; min-height: 0; max-height: none; margin-bottom: 10px; }
.stok-dialog .stok-d-aksi { flex-shrink: 0; gap: 8px; }
.stok-dialog .stok-d-aksi .confirm-modal-btn { flex: 0 0 auto; min-width: 96px; padding: 7px 16px; font-size: 0.78rem; }
.stok-dialog .stok-d-aksi [data-tutup] { margin-right: auto; }

/* Dua tabel berdampingan; judul barang boleh melipat - tinggi barisnya
   sudah ditentukan gambarnya (96px), jadi tiga baris teks pun muat. */
@media (min-width: 1101px) {
  .stok-d-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: start; }
  .stok-d-dua .stok-d-tabel { table-layout: fixed; white-space: normal; }
  .stok-d-dua .stok-d-tabel .stok-d-no { width: 30px; }
  .stok-d-dua .stok-d-tabel .stok-d-sku { width: 128px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stok-d-dua .stok-d-tabel .stok-d-judul { line-height: 1.35; word-break: break-word; }
  .stok-d-dua .stok-d-tabel + .stok-d-tabel { border-left: 1px solid var(--border); }
}
/* Layar sempit: kedua tabel ditumpuk jadi satu kolom seperti semula
   (nowrap + geser mendatar), kepala tabel kedua disembunyikan supaya
   terlihat sebagai satu daftar yang bersambung. */
@media (max-width: 1100px) {
  .stok-d-dua .stok-d-tabel + .stok-d-tabel thead { display: none; }
}

/* ---- Buat Restock dari daftar per supplier ---- */
.stok-dialog .stok-d-aksi { justify-content: flex-end; }
.stok-dialog .stok-d-aksi [data-tutup] { margin-right: 0; }
.stok-restock-dialog { max-width: min(560px, 96vw); width: 100%; }
.stok-restock-ringkas { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; margin: 0 0 12px; }
.stok-restock-ringkas strong { color: var(--ink); }
.stok-restock-hilang { color: var(--red); font-weight: 700; }
.stok-restock-daftar-hilang {
  max-height: 150px;
  overflow: auto;
  padding: 8px 10px;
  margin: 0 0 12px;
  border: 1px solid #F5C2C7;
  border-radius: var(--radius-sm);
  background: #FFF5F5;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.stok-restock-daftar-hilang p { margin: 0 0 4px; font-weight: 600; color: #8A1C1C; }
.stok-restock-daftar-hilang ul { margin: 0; padding-left: 18px; }
.stok-restock-daftar-hilang b { color: var(--ink); }
.stok-restock-field { display: block; margin: 0 0 10px; }
.stok-restock-field[hidden] { display: none; }
.stok-restock-field span { display: block; font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.stok-restock-field select, .stok-restock-field input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  outline: none;
}
.stok-restock-field select:focus, .stok-restock-field input:focus { border-color: var(--red); background: #fff; }
.stok-restock-sukses { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.stok-restock-sukses svg { width: 34px; height: 34px; color: #059669; flex-shrink: 0; }
.stok-restock-sukses .dok-dialog-judul { margin: 0; font-size: 1.05rem; }
.stok-restock-buka { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* PC: tabelnya cuma tiga kolom - dibiarkan selebar layar, kategori di kiri
   dan angkanya jauh di kanan dengan kekosongan di tengah. Dibatasi lebarnya
   dan dipusatkan supaya kategori dan angkanya berdekatan. */
@media (min-width: 861px) {
  .stok-tabel-bungkus { display: flex; justify-content: center; }
  .stok-tabel { width: 100%; max-width: 620px; }
  .stok-tabel .stok-angka { width: 180px; }
}

/* ---- berkas sumber laporan (js/skill-berkas.js; Skill Stock/Import/Full) ---- */
.skill-berkas { margin: 4px 0 14px; }
.skill-berkas-judul { display: block; font-size: 0.74rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 6px; }
.skill-berkas-judul small { font-weight: 600; text-transform: none; letter-spacing: 0; }
.skill-berkas-daftar { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-berkas-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); font-family: inherit; font-size: 0.78rem; font-weight: 600; color: var(--ink); cursor: pointer;
}
.skill-berkas-chip:hover { border-color: var(--red); background: #FFF5F5; }
.skill-berkas-chip svg { width: 15px; height: 15px; flex-shrink: 0; }
.skill-berkas-chip--pdf svg { color: #DC2626; }
.skill-berkas-chip--xls svg { color: #059669; }
.skill-berkas-nama { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.skill-berkas-nama b { color: var(--red); margin-right: 2px; }
.skill-berkas-chip small { color: var(--muted); font-weight: 600; flex-shrink: 0; }
/* ---- Riwayat bersama (js/skill-riwayat.js): tombol pojok kanan atas,
   pop-up semua riwayat, bagian "Riwayat Hari Ini" di bawah. ---- */
.greeting.skill-greeting { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.skill-riwayat-tombol {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border: 1.5px solid var(--border); border-radius: 999px; background: var(--card);
  font-family: inherit; font-size: 0.82rem; font-weight: 800; color: var(--ink); cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.skill-riwayat-tombol svg { width: 16px; height: 16px; color: var(--red); }
.skill-riwayat-tombol:hover { border-color: var(--red); color: var(--red); }
.skill-riwayat-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 0.7rem; font-weight: 800; }
.skill-riwayat-semua { font-size: 0.78rem; font-weight: 700; }
.skill-riwayat-dialog { max-width: min(760px, calc(100vw - 40px)); width: 100%; display: flex; flex-direction: column; max-height: min(84vh, 760px); }
.skill-riwayat-kepala { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.skill-riwayat-kepala .dok-dialog-judul { margin: 0; font-size: 0.98rem; font-weight: 800; }
.skill-riwayat-jumlah { font-weight: 700; color: var(--muted); }
.skill-riwayat-x { position: static; width: 32px; height: 32px; background: rgba(15, 23, 42, .08); color: var(--ink); font-size: 1.3rem; }
.skill-riwayat-x:hover { background: rgba(15, 23, 42, .16); }
.skill-riwayat-ket { font-size: 0.76rem; color: var(--muted); margin: 4px 0 10px; }
.skill-riwayat-cari {
  width: 100%; box-sizing: border-box; padding: 11px 12px; margin-bottom: 10px;
  border: 1.5px solid #CBD0D8; border-radius: var(--radius-sm); background: var(--bg);
  font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--ink); outline: none;
}
.skill-riwayat-cari:focus { border-color: var(--red); background: #fff; box-shadow: 0 0 0 3px rgba(228, 33, 43, .12); }
.skill-riwayat-isi { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px; }
.skill-riwayat-isi .stok-riwayat-daftar { gap: 8px; }
@media (max-width: 600px) {
  .skill-riwayat-tombol { padding: 7px 11px; font-size: 0.78rem; }
  .skill-riwayat-dialog { max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); }
}
.stok-riwayat-berkas { display: inline-flex; align-items: center; gap: 3px; color: var(--ink-soft); font-weight: 700; }
.stok-riwayat-berkas svg { width: 12px; height: 12px; }

/* penampil */
.skill-berkas-overlay { padding: 10px; }
.skill-berkas-viewer {
  max-width: min(1100px, 100%); width: 100%;
  height: calc(100dvh - 20px); max-height: calc(100dvh - 20px);
  display: flex; flex-direction: column; padding: 10px 12px 12px; overflow: hidden; background: #EEF0F3;
}
.skill-berkas-kepala { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; margin-bottom: 8px; }
.skill-berkas-viewer-nama { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.86rem; font-weight: 800; color: var(--ink); }
.skill-berkas-viewer-nama svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-soft); }
.skill-berkas-viewer-nama span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skill-berkas-viewer-nama small { color: var(--muted); font-weight: 600; flex-shrink: 0; }
.skill-berkas-kepala-aksi { display: flex; gap: 6px; flex-shrink: 0; }
.skill-berkas-btn {
  display: inline-flex; align-items: center; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: #fff; font-family: inherit; font-size: 0.78rem; font-weight: 700; color: var(--ink); text-decoration: none; cursor: pointer;
}
.skill-berkas-btn:hover { background: var(--bg); }
.skill-berkas-tutup { font-size: 1.2rem; line-height: 1; padding: 4px 11px; }
.skill-berkas-isi { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-md); overflow: hidden; }
.skill-berkas-pdf { flex: 1; width: 100%; border: 0; }
.skill-berkas-tab { display: flex; gap: 4px; padding: 8px 8px 0; border-bottom: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; }
.skill-berkas-tab-btn { padding: 6px 12px; border: 1px solid var(--border); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--bg); font-family: inherit; font-size: 0.76rem; font-weight: 700; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.skill-berkas-tab-btn.active { background: #fff; color: var(--red); border-color: var(--red); }
.skill-berkas-lembar { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.skill-berkas-tabel-bungkus { flex: 1; min-height: 0; overflow: auto; }
.skill-berkas-tabel { border-collapse: collapse; font-size: 0.76rem; }
.skill-berkas-tabel th, .skill-berkas-tabel td { border: 1px solid #E5E7EB; padding: 4px 8px; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.skill-berkas-tabel th { background: #F3F4F6; color: var(--ink-soft); font-weight: 700; position: sticky; top: 0; z-index: 1; }
.skill-berkas-tabel tbody th { position: static; text-align: right; min-width: 32px; }
.skill-berkas-tabel tbody tr:first-child td { font-weight: 700; background: #FAFAFB; }
.skill-berkas-isi .stok-catatan { margin: 6px 10px; flex-shrink: 0; }
@media (max-width: 600px) {
  .skill-berkas-nama { max-width: 200px; }
  .skill-berkas-viewer { padding: 8px; }
}

/* ---- Stok menipis (berkas "stok peringatan"): kartu, kolom & label ---- */
.stok-kartu--kosong strong { color: var(--red); }
.stok-kartu--menipis strong { color: #B45309; }
.stok-kartu:first-child:not(:only-child) strong { color: var(--ink); }
.stok-tabel .stok-angka--kosong,
.stok-tabel .stok-angka--menipis,
.stok-tabel .stok-angka--total { width: 110px; }
.stok-tabel tbody .stok-angka--kosong { color: var(--red); }
.stok-tabel tbody .stok-angka--menipis { color: #B45309; }
.stok-d-status {
  display: table; margin-top: 4px; padding: 1px 8px; border-radius: 99px;
  font-size: .68rem; font-weight: 700; white-space: nowrap; vertical-align: middle;
}
.stok-d-status--kosong { background: #FDEBEC; color: #B91C1C; }
.stok-d-status--menipis { background: #FEF3C7; color: #92400E; }
@media (max-width: 560px) {
  .stok-tabel .stok-angka--kosong,
  .stok-tabel .stok-angka--menipis,
  .stok-tabel .stok-angka--total { width: 58px; }
}

/* ---- Buat Restock: qty = % dari penjualan + pratinjau (js/skill-restock.js) ---- */
.stok-restock-qty { display: flex; gap: 8px; }
.stok-restock-qty select { flex: 1 1 auto; min-width: 0; }
.stok-restock-qty input[type="number"] { flex: 0 0 96px; }
.stok-restock-qty input[hidden] { display: none; }
.stok-restock-ket { display: block; margin-top: 4px; font-size: .74rem; color: var(--muted); line-height: 1.4; text-transform: none; letter-spacing: 0; font-weight: 500; }
.stok-restock-pratinjau { max-height: 170px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm, 8px); margin: 2px 0 12px; }
.stok-restock-pratinjau:empty { display: none; }
.stok-restock-tabel { width: 100%; border-collapse: collapse; font-size: .78rem; }
.stok-restock-tabel th { position: sticky; top: 0; background: #F4F4F6; text-align: left; padding: 6px 10px; font-weight: 700; color: var(--ink-soft); }
.stok-restock-tabel td { padding: 5px 10px; border-top: 1px solid var(--border); }
.stok-restock-tabel th:nth-child(n+2), .stok-restock-tabel td:nth-child(n+2) { text-align: center; width: 70px; }
.stok-restock-tabel td:last-child { font-weight: 800; }

/* ---- 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; }