/* ==========================================================================
   Inventaris — aset/inventaris kantor (komputer, meja, kendaraan, alat
   kerja), terpisah dari Database Barang yang mencatat barang dagang.

   Memakai kerangka yang sudah ada (css/main.css + css/laporan-impor.css
   untuk .section, .section-head, .confirm-overlay, .impor-empty,
   .view-icon-btn); yang di sini hanya bagian yang khas Inventaris: kotak
   ringkasan, chip filter kategori, dan kartu per aset.
   ========================================================================== */

/* ---- banner mode demo ----------------------------------------------------
   Halaman ini tidak memuat css/restock.css atau css/laporan-freelance.css,
   satu-satunya dua berkas yang kebetulan sudah menata .demo-banner - jadi
   ditata ulang di sini juga (persis sama), supaya tidak tampil sebagai div
   polos tanpa gaya kalau modul ini jatuh ke mode demo. */
.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; }

/* ---- ringkasan ---------------------------------------------------------- */
.inv-ringkasan {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

/* Dua kartu, jadi 2 kolom di semua lebar - tidak ada lagi kolom ketiga
   yang perlu dilipat di layar sempit. */

.inv-ringkasan-kartu {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
}

.inv-ringkasan-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.inv-ringkasan-nilai { font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.inv-ringkasan-nilai--rusak { color: var(--red); }

/* ---- toolbar & filter kategori ------------------------------------------ */
.inv-toolbar { display: flex; gap: 8px; margin-bottom: 14px; }

.inv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.inv-btn svg { width: 15px; height: 15px; }
.inv-btn--green { background: #E7F6EE; color: #1B7F4B; }
.inv-btn--slate { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.inv-btn--danger { background: #FDEBEC; color: var(--red); }


/* ---- kartu aset ----------------------------------------------------------- */
/* ---- kartu aset -----------------------------------------------------------
   Satu baris padat: foto | kode+nama+ringkasan | kondisi & tombol ikon.
   Dulu tiga tingkat (kepala, kisi detail berlabel, lalu tiga tombol berteks
   selebar kartu) - tinggi sekali untuk empat keterangan saja. */
.inv-kartu {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.inv-kartu--nonaktif { opacity: 0.6; }

.inv-kartu-foto {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: zoom-in;
}

.inv-kartu-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inv-kartu-foto:hover { border-color: #059669; }

/* Aset tanpa foto tetap memesan kotak yang sama besar - kalau tidak, baris
   yang berfoto dan yang tidak jadi tidak sejajar sepanjang daftar. */
.inv-kartu-foto--kosong { color: var(--border); cursor: default; }
.inv-kartu-foto--kosong svg { width: 22px; height: 22px; }
.inv-kartu-foto--kosong:hover { border-color: var(--border); }

/* "+2" di sudut: penanda bahwa masih ada foto lain di balik yang tampil. */
.inv-kartu-foto-lebih {
  position: absolute;
  right: 2px;
  bottom: 2px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(17, 17, 17, .72);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1.5;
}

.inv-kartu-teks { flex: 1; min-width: 0; }

.inv-kartu-kode {
  display: block;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.inv-kartu-nama {
  margin: 1px 0 0;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inv-kartu-meta { margin: 2px 0 0; font-size: 0.76rem; color: var(--muted); }

/* Di layar HP kolom teksnya tinggal ~140px - "10 Mar 2025 · Rp9.500.000"
   pecah jadi dua baris hanya karena selisih beberapa piksel. Sedikit
   dikecilkan supaya tetap satu baris; nominal yang benar-benar panjang
   masih boleh turun, dan itu tetap terbaca. */
@media (max-width: 480px) {
  .inv-kartu-meta { font-size: 0.7rem; }
}

.inv-kartu-catatan {
  margin: 4px 0 0;
  font-size: 0.74rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

.inv-kartu-kanan {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

/* Kondisi: hijau/kuning/merah, sama logika warna dengan status di modul
   lain - hijau = aman, jangan dipikirkan; merah = perlu tindakan segera. */
.inv-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}

.inv-badge--baik { background: #E7F6EE; color: #1B7F4B; }
.inv-badge--rusak_ringan { background: #FFF7E6; color: #92600A; }
.inv-badge--rusak_berat { background: #FDEBEC; color: var(--red); }
.inv-badge--nonaktif { background: var(--bg); color: var(--muted); }

/* Tiga tombol ikon menggantikan tiga tombol berteks selebar kartu. Judulnya
   pindah ke title/aria-label - tetap terbaca pembaca layar dan tetap muncul
   saat kursor berhenti di atasnya. */
.inv-kartu-aksi { display: flex; gap: 4px; }

.inv-aksi-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}

.inv-aksi-btn svg { width: 15px; height: 15px; }
.inv-aksi-btn:hover { border-color: #1E3A8A; color: #1E3A8A; }
.inv-aksi-btn--danger:hover { border-color: var(--red); color: var(--red); background: #FDEBEC; }
/* ---- pengunggah di dalam form ---- */
.inv-unggah {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inv-unggah-item {
  position: relative;
  width: 68px;
  height: 68px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg);
}

.inv-unggah-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Yang masih mengantre dibuat jelas BELUM terkirim - garis putus-putus dan
   sedikit pudar. Kalau Batal ditekan, gambar-gambar ini memang tidak pernah
   sampai ke server, dan itu harus terlihat sebelum ditekan. */
.inv-unggah-item--antre {
  border-style: dashed;
  border-color: #059669;
}

.inv-unggah-item--antre img { opacity: 0.72; }

.inv-unggah-x {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(17, 17, 17, .62);
  color: #fff;
  cursor: pointer;
}

.inv-unggah-x svg { width: 11px; height: 11px; }
.inv-unggah-x:hover { background: var(--red); }

.inv-unggah-tambah {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 68px;
  height: 68px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  cursor: pointer;
}

.inv-unggah-tambah svg { width: 16px; height: 16px; }
.inv-unggah-tambah:hover { border-color: #059669; color: #059669; }

/* ---- penampil gambar besar ---- */
.inv-lightbox { padding: 16px; }

.inv-lightbox-isi {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
}

.inv-lightbox-isi img {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: #fff;
}

/* Tombol geser antar-foto - hanya digambar kalau fotonya memang lebih dari
   satu (lihat bukaGambarBesar). */
.inv-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0 0 3px;
  border: none;
  border-radius: 50%;
  background: rgba(17, 17, 17, .62);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.inv-lightbox-nav--prev { left: 8px; }
.inv-lightbox-nav--next { right: 8px; }
.inv-lightbox-nav:hover { background: rgba(17, 17, 17, .82); }

.inv-lightbox-hitung {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(17, 17, 17, .62);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.inv-lightbox-tutup {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(17, 17, 17, .62);
  color: #fff;
  cursor: pointer;
}

.inv-lightbox-tutup svg { width: 15px; height: 15px; }

.inv-kartu-catatan {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--muted);
  white-space: pre-wrap;
}

/* ---- form (Tambah/Edit) -------------------------------------------------- */
.inv-form { display: grid; gap: 10px; margin-bottom: 14px; }
.inv-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

@media (max-width: 480px) {
  .inv-form-grid { grid-template-columns: 1fr; }
}

.inv-field-label { display: block; font-size: 0.74rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; }

.inv-kondisi-pilih { display: flex; gap: 6px; }

.inv-kondisi-btn {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  padding: 9px 6px;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}

.inv-kondisi-btn.active[data-kondisi="baik"] { background: #E7F6EE; border-color: #1B7F4B; color: #1B7F4B; }
.inv-kondisi-btn.active[data-kondisi="rusak_ringan"] { background: #FFF7E6; border-color: #92600A; color: #92600A; }
.inv-kondisi-btn.active[data-kondisi="rusak_berat"] { background: #FDEBEC; border-color: var(--red); color: var(--red); }

/* ---- kepala modal + silang penutup (pola sama dengan Restock/Gajian) --- */
.inv-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.inv-modal-head-isi { flex: 1; min-width: 0; }

.inv-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;
}

.inv-modal-close svg { width: 14px; height: 14px; }
.inv-modal-close:hover { background: #ECECEF; color: var(--ink); }

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

.inv-toast.show { opacity: 1; transform: translate(-50%, 0); }