/* ==========================================================================
   Riset Produk - tab kategori (drag-reorder), tabel produk, formulir.
   Palet: biru netral khas ERP (bukan merah - ini bukan menu berisiko/
   peringatan, cukup katalog kerja biasa).
   ========================================================================== */

#riset-root { --r-biru-bg: #EBF3FE; --r-biru-ink: #2278CE; --r-biru-garis: #C8DFF9; }
#riset-root > .section { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
#riset-root > .section + .section { margin-top: 18px; }

/* ---- tab kategori ---- */
.riset-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.riset-tab {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px;
  background: var(--card); color: var(--ink-soft); font-weight: 700; font-size: .8rem; font-family: inherit; cursor: pointer;
}
.riset-tab:hover { background: var(--bg); }
.riset-tab.active { background: var(--r-biru-bg); border-color: var(--r-biru-garis); color: var(--r-biru-ink); }
.riset-tab-jumlah {
  min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--bg); color: var(--muted);
  font-size: .7rem; font-weight: 800; text-align: center; line-height: 18px;
}
.riset-tab.active .riset-tab-jumlah { background: #fff; color: var(--r-biru-ink); }
.riset-tab[data-kategori] { padding-right: 8px; }
.riset-tab-kelola { display: none; align-items: center; gap: 2px; margin-left: 2px; }
.riset-tab:hover .riset-tab-kelola { display: inline-flex; }
.riset-tab-ikon {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer;
}
.riset-tab-ikon:hover { background: var(--border); color: var(--ink); }
.riset-tab-ikon svg { width: 12px; height: 12px; }
.riset-tab.dragging { opacity: .4; }
.riset-tab--tambah { border-style: dashed; color: var(--muted); }
.riset-tab--tambah:hover { color: var(--ink); }
.riset-tab--arsip { margin-left: auto; }
.riset-tab--arsip svg { width: 14px; height: 14px; }

/* ---- toolbar ---- */
.riset-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.riset-input {
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px;
  background: var(--bg); color: var(--ink); font-weight: 400; font-size: .8rem; font-family: inherit; min-width: 150px;
}
#riset-cari { flex: 1; min-width: 200px; }
.riset-jumlah { color: var(--muted); font-size: .76rem; }
.riset-btn {
  border: 1px solid var(--border); border-radius: 8px; padding: 9px 13px;
  background: var(--card); color: var(--ink-soft); font-weight: 700; font-size: .78rem; font-family: inherit; cursor: pointer;
}
.riset-btn:hover { background: var(--bg); }
.riset-btn--tambah { background: var(--red); color: #fff; border-color: var(--red); margin-left: auto; }
.riset-btn--tambah:hover { background: var(--red-dark); border-color: var(--red-dark); }
.riset-btn-hapus { color: var(--red-dark); }

/* ---- tabel ---- */
.riset-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 10px; }
.riset-tabel { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 620px; font-size: .82rem; }
.riset-tabel th {
  position: sticky; top: 0; z-index: 1; background: #F5F5F7; color: var(--ink-soft);
  text-align: left; font-size: .72rem; font-weight: 800; letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap; padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.riset-tabel td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.riset-tabel tbody tr:last-child td { border-bottom: 0; }
.riset-tabel tbody tr:hover td { background: var(--bg); }
.riset-td-no { width: 34px; color: var(--muted); font-weight: 700; }
.riset-td-gambar { width: 52px; }
.riset-td-gambar img { display: block; width: 42px; height: 42px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); }
.riset-gambar-kosong {
  display: flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 8px; background: var(--bg); color: var(--muted); border: 1px dashed var(--border);
}
.riset-gambar-kosong svg { width: 18px; height: 18px; }
.riset-td-nama { min-width: 180px; max-width: 320px; }
.riset-nama-btn {
  display: block; border: 0; background: transparent; padding: 0; margin: 0;
  color: var(--ink); font-weight: 700; font-size: .86rem; font-family: inherit; text-align: left; cursor: pointer; white-space: normal;
}
.riset-nama-btn:hover { text-decoration: underline; }
.riset-td-kategori { display: inline-block; margin-top: 3px; padding: 2px 8px; border-radius: 999px; background: var(--r-biru-bg); color: var(--r-biru-ink); font-size: .68rem; font-weight: 700; }
.riset-td-link a.riset-link-btn { display: inline-flex; align-items: center; gap: 5px; color: var(--r-biru-ink); font-weight: 700; text-decoration: none; }
.riset-link-btn svg { width: 14px; height: 14px; }
.riset-td-link a.riset-link-btn:hover { text-decoration: underline; }
.riset-td-harga { white-space: nowrap; font-weight: 700; }
.riset-td-kosong { color: var(--muted); }
.riset-th-aksi, .riset-td-aksi { position: sticky; right: 0; white-space: nowrap; box-shadow: -8px 0 10px -8px rgba(20, 20, 26, .18); }
.riset-td-aksi { background: var(--card); z-index: 1; }
.riset-th-aksi { z-index: 2; }
.riset-tabel tbody tr:hover td.riset-td-aksi { background: var(--bg); }
.riset-aksi-ikon { display: flex; gap: 6px; }
.riset-ikon {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink-soft); cursor: pointer;
}
.riset-ikon svg { width: 16px; height: 16px; }
.riset-ikon:hover { background: var(--bg); color: var(--ink); }
.riset-ikon--arsip { color: var(--r-biru-ink); border-color: var(--r-biru-garis); background: var(--r-biru-bg); }
.riset-ikon--hapus { color: var(--red-dark); }
.riset-ikon--hapus:hover { background: #FDECEC; }

/* ---- modal ---- */
.riset-modal { max-width: 640px; width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; }
.riset-modal-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.riset-modal-close { border: 0; background: transparent; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.riset-modal-isi { flex: 1; min-height: 0; overflow: auto; margin-top: 12px; }
.riset-modal-aksi { position: sticky; bottom: -20px; background: var(--card); padding-top: 14px; }
.riset-konfirmasi { font-size: .86rem; color: var(--ink-soft); }
.riset-modal-aksi .confirm-modal-btn:not(.cancel):not(.confirm) { border: 1px solid var(--border); background: var(--card); color: var(--ink); }
.riset-modal-aksi .confirm-modal-btn:not(.cancel):not(.confirm):hover { background: var(--bg); }

/* ---- formulir ---- */
.riset-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.riset-field { display: flex; flex-direction: column; gap: 5px; font-size: .74rem; font-weight: 700; color: var(--ink-soft); }
.riset-field--wide { grid-column: 1 / -1; }
.riset-field input, .riset-field select, .riset-field textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px;
  background: var(--bg); color: var(--ink); font-weight: 400; font-size: .82rem; font-family: inherit;
}
.riset-field textarea { resize: vertical; }

/* ---- foto di formulir ---- */
.riset-foto-field { gap: 8px; }
.riset-foto-area { display: flex; }
.riset-foto-area img { width: 120px; height: 120px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); }
.riset-foto-kosong {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 120px; height: 120px; border-radius: 10px; border: 1px dashed var(--border); background: var(--bg); color: var(--muted);
}
.riset-foto-kosong svg { width: 26px; height: 26px; }
.riset-foto-kosong small { font-size: .68rem; font-weight: 600; }
.riset-foto-tombol { display: flex; gap: 8px; }
.riset-foto-progres { height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; }
.riset-foto-progres div { height: 100%; width: 0; background: var(--r-biru-ink); transition: width .15s; }

/* ---- toast ---- */
.riset-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px);
  background: #1F2937; color: #fff; padding: 10px 16px; border-radius: 10px;
  font-size: .8rem; font-weight: 600; opacity: 0; pointer-events: none; transition: .18s; z-index: 120;
}
.riset-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  #riset-root > .section { padding: 14px; }
}
@media (max-width: 600px) {
  .riset-form { grid-template-columns: 1fr; }
  .riset-field--wide { grid-column: auto; }
  .riset-btn--tambah { margin-left: 0; width: 100%; }
}

.riset-td-gambar img, #rf-foto-area img { cursor: zoom-in; }
.riset-image-viewer { position:fixed; inset:0; margin:auto; padding:48px 16px 16px; width:fit-content; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); box-sizing:border-box; border:0; border-radius:16px; background:#fff; overflow:auto; }
.riset-image-viewer::backdrop { background:rgba(0,0,0,.78); }
.riset-image-viewer>img { display:block; max-width:100%; max-height:calc(100dvh - 100px); width:auto; height:auto; object-fit:contain; margin:auto; }
.riset-image-close { position:absolute; top:8px; right:10px; width:36px; height:36px; border:0; border-radius:50%; font-size:28px; cursor:pointer; background:#f0f1f4; color:#202334; }