/* ==========================================================================
   Datasheet (js/datasheet.js). Memakai .section, .confirm-overlay,
   .impor-field/.impor-input dari laporan-impor.css dan .toko-toast dari
   toko.css.
   ========================================================================== */
.ds-info { margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; background: #F1F5F9; color: #334155; font-size: .88rem; line-height: 1.55; }
.ds-info a { color: #DC2626; font-weight: 700; word-break: break-all; }
.ds-info code { background: #fff; padding: 1px 6px; border-radius: 6px; font-size: .85em; }
.ds-info--ok { background: #ECFDF5; color: #065F46; }
.ds-info--warn { background: #FEF3C7; color: #78350F; }

.ds-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.ds-cari { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 1px solid var(--border, #E5E7EB); border-radius: 12px; background: #fff; }
.ds-cari svg { width: 18px; height: 18px; color: #9CA3AF; flex: none; }
.ds-cari input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: .92rem; min-width: 0; }

.ds-btn { display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 12px; border: 1px solid var(--border, #E5E7EB); border-radius: 9px; background: #fff; color: #111827; font: inherit; font-size: .8rem; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; }
.ds-btn:hover { background: #F9FAFB; }
.ds-btn--merah { height: 42px; padding: 0 16px; border-color: #DC2626; background: #DC2626; color: #fff; font-size: .88rem; }
.ds-btn--merah:hover { background: #B91C1C; }
.ds-btn--hapus { color: #DC2626; border-color: #FECACA; }
.ds-btn--hapus:hover { background: #FEF2F2; }

.ds-jumlah { font-size: .78rem; color: #6B7280; margin: 0 0 8px; }
.ds-daftar { display: flex; flex-direction: column; gap: 10px; }
.ds-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border, #E5E7EB); border-radius: 14px; background: #fff; }
.ds-ikon { flex: none; width: 42px; height: 50px; border-radius: 8px; background: #FEE2E2; color: #DC2626; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.ds-isi { flex: 1; min-width: 0; }
.ds-judul { font-weight: 700; font-size: .95rem; line-height: 1.35; word-break: break-word; }
.ds-meta { font-size: .76rem; color: #6B7280; margin: 2px 0 8px; word-break: break-all; }
.ds-skus { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-sku { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; border: 1px solid; cursor: default; }
.ds-sku--web { color: #047857; border-color: #A7F3D0; background: #ECFDF5; }
.ds-sku--erp { color: #92400E; border-color: #FDE68A; background: #FFFBEB; }
.ds-sku--asing { color: #6B7280; border-color: #E5E7EB; background: #F9FAFB; text-decoration: line-through; }
.ds-sku-kosong { font-size: .76rem; color: #9CA3AF; font-style: italic; }
.ds-aksi { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 330px; }

.ds-modal { max-width: 560px; width: calc(100vw - 32px); }
.ds-modal .impor-field { margin-bottom: 10px; }
.ds-f-sku { resize: vertical; min-height: 56px; font-family: inherit; }
.ds-f-cek { display: flex; flex-direction: column; gap: 4px; margin: 0 0 6px; font-size: .8rem; color: #374151; }
.ds-f-cek-baris { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ds-f-cek em { color: #9CA3AF; }
.ds-hapus-judul { font-weight: 700; margin: 4px 0 6px; word-break: break-word; }
.ds-hapus-catatan { font-size: .84rem; color: #6B7280; margin: 0 0 6px; }

@media (max-width: 700px) {
  .ds-item { flex-wrap: wrap; }
  .ds-aksi { max-width: none; width: 100%; justify-content: flex-start; padding-left: 56px; }
}

/* ---- Unggah banyak berkas sekaligus ---- */
.ds-pilih { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1.5px dashed #CBD5E1; border-radius: 12px; background: #F8FAFC; cursor: pointer; }
.ds-pilih:hover { border-color: #DC2626; background: #FEF2F2; }
.ds-pilih input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ds-pilih span { font-weight: 800; color: #DC2626; font-size: .9rem; }
.ds-pilih small { color: #6B7280; font-size: .74rem; }
.ds-f-daftar { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; margin: 0 0 10px; }
.ds-f-daftar:empty { display: none; }
.ds-f-baris { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border, #E5E7EB); border-radius: 10px; background: #fff; }
.ds-f-baris--ok { background: #ECFDF5; border-color: #A7F3D0; }
.ds-f-baris--galat { background: #FEF2F2; border-color: #FECACA; }
.ds-f-baris--galat small b { color: #B91C1C; }
.ds-f-baris--ok small b { color: #047857; }
.ds-f-ext { flex: none; width: 42px; height: 30px; border-radius: 6px; background: #FEE2E2; color: #DC2626; font-size: .66rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ds-f-isi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ds-f-isi .impor-input { height: 34px; }
.ds-f-isi small { color: #6B7280; font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-f-buang { flex: none; width: 30px; height: 30px; border: 1px solid var(--border, #E5E7EB); border-radius: 8px; background: #fff; color: #DC2626; font-size: 1.1rem; cursor: pointer; }
.ds-f-status { font-size: .8rem; color: #374151; margin: 0 0 6px; }
.ds-f-status:empty { display: none; }

/* ---- Folder ---- */
.ds-grup { margin-bottom: 18px; }
.ds-grup-kepala { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.ds-grup-kepala svg { width: 22px; height: 22px; color: #F59E0B; flex: none; }
.ds-grup-kepala--tanpa svg { color: #9CA3AF; }
.ds-grup-kepala b { font-size: .95rem; }
.ds-grup-kepala small { color: #6B7280; font-size: .76rem; }
.ds-centang { flex: none; display: flex; align-items: center; padding-top: 14px; cursor: pointer; }
.ds-centang input { width: 18px; height: 18px; accent-color: #DC2626; cursor: pointer; }
.ds-item--pilih { border-color: #FCA5A5; background: #FFF7F7; }
.ds-folder-pilih { display: flex; flex-direction: column; gap: 6px; }
.ds-folder-pilih [hidden] { display: none; }
.ds-bilah-pilih {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 900;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: calc(100vw - 32px);
  padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid #FCA5A5;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); font-size: .86rem;
}
.ds-bilah-pilih .ds-folder-pilih { flex-direction: row; }
.ds-bilah-pilih .impor-input { height: 36px; min-width: 200px; }
@media (max-width: 700px) {
  .ds-bilah-pilih { left: 16px; right: 16px; transform: none; bottom: 76px; }
  .ds-bilah-pilih .ds-folder-pilih { flex-direction: column; width: 100%; }
  .ds-bilah-pilih .impor-input { min-width: 0; width: 100%; }
}

/* ---- Daftar ERP: kotak folder dulu, klik untuk membuka (sama dengan web) ---- */
.ds-folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ds-folder {
  display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px;
  border: 1px solid var(--border, #E5E7EB); border-radius: 14px; background: #fff; color: #111827;
  font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ds-folder:hover { border-color: #DC2626; box-shadow: 0 6px 18px rgba(220, 38, 38, .12); transform: translateY(-1px); }
.ds-folder svg { width: 38px; height: 38px; flex: none; color: #F59E0B; }
.ds-folder--tanpa svg { color: #9CA3AF; }
.ds-folder b { display: block; font-size: .92rem; line-height: 1.3; word-break: break-word; }
.ds-folder small { display: block; color: #6B7280; font-size: .74rem; margin-top: 2px; }
.ds-jalur { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.ds-kembali {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 0;
  border-radius: 10px; background: #059669; color: #fff; font: inherit; font-size: .84rem; font-weight: 700;
  cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s;
}
.ds-kembali svg { width: 20px; height: 20px; transition: transform .2s; }
.ds-kembali:hover { background: #047857; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(5, 150, 105, .35); }
.ds-kembali:hover svg { transform: translateX(-4px); }
.ds-jalur-nama { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.05rem; word-break: break-word; }
.ds-jalur-nama svg { width: 24px; height: 24px; color: #F59E0B; flex: none; }
.ds-jalur-nama--tanpa svg { color: #9CA3AF; }
.ds-jalur-nama small { font-weight: 500; font-size: .76rem; color: #6B7280; }
.ds-letak { display: none; align-items: center; gap: 5px; font-size: .74rem; color: #B45309; margin: 2px 0 2px; }
.ds-letak svg { width: 14px; height: 14px; color: #F59E0B; }
.ds-daftar--cari .ds-letak { display: flex; }
@media (max-width: 600px) { .ds-folders { grid-template-columns: 1fr; } }