/* =========================================================
   Aset Jatmika — tampilan dasar (mobile-first)
   Claude Code boleh memperluas; jangan mengganti variabel
   warna tanpa alasan supaya serasi dengan SERASA.
========================================================= */
:root {
  --biru: #1f3a5f;
  --biru-muda: #e8eef7;
  --aksen: #e0a100;
  --hijau: #1e8e4a;
  --merah: #c62828;
  --kuning: #b26a00;
  --teks: #1b1f24;
  --redup: #6b7280;
  --garis: #e5e7eb;
  --latar: #f4f6f9;
  --putih: #ffffff;
  --radius: 12px;
  --bayang: 0 1px 3px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--latar); color: var(--teks);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 .75rem; }
.redup { color: var(--redup); }
code { background: var(--biru-muda); padding: 0 .3em; border-radius: 4px; font-size: .9em; }

/* Layar: hanya satu yang .aktif */
.layar { display: none; min-height: 100dvh; }
.layar.aktif { display: block; }

/* Login */
#layar-login.aktif { display: flex; align-items: center; justify-content: center; padding: 24px; }
.kartu-login { max-width: 360px; width: 100%; text-align: center; }
.logo { width: 96px; height: auto; margin-bottom: 12px; }
.logo-kecil { width: 32px; height: 32px; object-fit: contain; }

/* Kartu */
.kartu { background: var(--putih); border-radius: var(--radius); box-shadow: var(--bayang);
  padding: 20px; margin: 0 0 12px; }

/* Tombol */
.btn { border: 0; border-radius: 10px; padding: 12px 16px; font-size: 1rem; font-weight: 600;
  cursor: pointer; background: var(--biru-muda); color: var(--biru); min-height: 44px; }
.btn:active { transform: translateY(1px); }
.btn-utama { background: var(--biru); color: var(--putih); }
.btn-bahaya { background: var(--merah); color: var(--putih); }
.btn-sukses { background: var(--hijau); color: var(--putih); }
.btn-lebar { width: 100%; }
.btn-kecil { padding: 8px 12px; font-size: .9rem; min-height: 36px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Bar atas & bawah */
.bar-atas { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--putih); border-bottom: 1px solid var(--garis); }
.bar-judul { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
#isi { padding: 16px; padding-bottom: 88px; max-width: 920px; margin: 0 auto; }
.bar-bawah { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: var(--putih);
  border-top: 1px solid var(--garis); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.bar-bawah:empty { display: none; }
.bar-bawah button { flex: 1; background: none; border: 0; padding: 6px 2px; font-size: .72rem;
  color: var(--redup); display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; }
.bar-bawah button.aktif { color: var(--biru); font-weight: 700; }

/* Form */
label { display: block; font-size: .85rem; font-weight: 600; margin: 10px 0 4px; }
input, select, textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--garis);
  border-radius: 10px; font-size: 1rem; background: var(--putih); min-height: 44px; }
textarea { min-height: 88px; }

/* Badge status */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.badge-tersedia { background: #e3f4ea; color: var(--hijau); }
.badge-dipegang { background: var(--biru-muda); color: var(--biru); }
.badge-servis { background: #fff4d6; color: var(--kuning); }
.badge-rusak { background: #fff4d6; color: var(--kuning); }
.badge-hilang { background: #fde8e8; color: var(--merah); }
.badge-dihapus { background: #eee; color: var(--redup); }

.badge-menunggu_konfirmasi, .badge-menunggu_approval { background: #fff4d6; color: var(--kuning); }
.badge-aktif, .badge-disetujui { background: #e3f4ea; color: var(--hijau); }
.badge-selesai, .badge-dibatalkan, .badge-ditolak { background: #eee; color: var(--redup); }
.badge-baru { background: #fde8e8; color: var(--merah); }
.badge-diproses { background: var(--biru-muda); color: var(--biru); }

/* Panel di dalam aplikasi: hanya satu yang .aktif */
.panel { display: none; }
.panel.aktif { display: block; }
.judul-baris { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.judul-baris h2 { margin: 0; }
.btn-kembali { margin-bottom: 10px; }
.baris-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.baris-2 > div { min-width: 0; }
.kecil { font-size: .8rem; }
.saring { padding: 12px; }
.saring select, .saring input { margin-top: 8px; }
.saring input:first-child { margin-top: 0; }
.saring .baris-2 select { margin-top: 8px; }

/* Baris daftar (aset, karyawan, kartu) */
.item { display: flex; gap: 12px; align-items: center; background: var(--putih); border-radius: var(--radius);
  box-shadow: var(--bayang); padding: 12px; margin-bottom: 8px; cursor: pointer; text-align: left;
  width: 100%; border: 0; font: inherit; color: inherit; }
.item.statis { cursor: default; }
.item .tengah { flex: 1; min-width: 0; }
.item .tengah strong, .item .tengah small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .tengah small { color: var(--redup); }
.item .kanan { text-align: right; }
.thumb { width: 52px; height: 52px; border-radius: 10px; background: var(--biru-muda); object-fit: cover; flex: none;
  display: flex; align-items: center; justify-content: center; color: var(--biru); font-weight: 700; }
.foto-lihat { display: block; max-width: 100%; max-height: 260px; border-radius: var(--radius); margin: 8px 0; }
.foto-besar { width: 100%; max-height: 300px; object-fit: contain; background: var(--biru-muda); border-radius: var(--radius); margin-bottom: 10px; }
.sel-tombol { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sel-tombol .btn { flex: 1 1 140px; }
.rincian { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; font-size: .92rem; margin: 10px 0; }
.rincian dt { color: var(--redup); } .rincian dd { margin: 0; word-break: break-word; }
.tab { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; }
.tab button { flex: none; border: 0; background: var(--putih); border-radius: 999px; padding: 8px 14px; font-weight: 600;
  color: var(--redup); box-shadow: var(--bayang); min-height: 38px; }
.tab button.aktif { background: var(--biru); color: var(--putih); }
.kosong { text-align: center; color: var(--redup); padding: 24px 8px; }
.baris-tarik { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.baris-tarik select { flex: 1; }

/* Pesan & toast */
.pesan { margin-top: 12px; font-size: .9rem; color: var(--merah); }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); background: var(--teks);
  color: var(--putih); padding: 10px 16px; border-radius: 10px; font-size: .9rem; z-index: 20; max-width: 90vw; }

/* Tabel ringkas */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--garis); vertical-align: top; }
th { font-size: .78rem; color: var(--redup); text-transform: uppercase; letter-spacing: .02em; }

@media (min-width: 720px) {
  .bar-bawah { justify-content: center; }
  .bar-bawah button { max-width: 160px; }
}
/* Cetak QR & import */
.grup-tombol { display: flex; gap: 6px; }
input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; flex: none; }
.gulir { overflow-x: auto; background: var(--putih); border-radius: var(--radius); box-shadow: var(--bayang); margin-bottom: 12px; }
.gulir table { min-width: 560px; }
.salah { color: var(--merah); } .awas { color: var(--kuning); } .benar { color: var(--hijau); }
#cet-daftar .item { cursor: pointer; }

#area-cetak { margin-top: 14px; }
.etiket { width: 30mm; height: 20mm; display: flex; align-items: center; gap: 1mm; padding: 1mm; box-sizing: border-box;
  background: #fff; color: #000; overflow: hidden; }
.etiket .qr { width: 14mm; height: 14mm; flex: none; }
.etiket .qr img, .etiket .qr canvas { width: 100% !important; height: 100% !important; display: block; }
.etiket .teks { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4mm; font: 5pt/1.15 Arial, sans-serif; word-break: break-all; }
.etiket .teks b { font-size: 5.5pt; }
.etiket .teks span { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.susun-roll .etiket { border: 1px dashed #bbb; margin-bottom: 8px; }
.susun-a4 { display: flex; flex-wrap: wrap; }
.susun-a4 .etiket { border: .2mm dotted #999; }

@media print {
  .bar-atas, .bar-bawah, .btn { display: none !important; }
  body { background: #fff; }
  /* Mode cetak label: hanya #area-cetak yang tersisa di kertas */
  body.mode-cetak #layar-login, body.mode-cetak .toast,
  body.mode-cetak .panel:not(#p-cetak),
  body.mode-cetak #p-cetak > :not(#area-cetak) { display: none !important; }
  body.mode-cetak #isi { padding: 0; max-width: none; margin: 0; }
  body.mode-cetak #area-cetak { margin: 0; }
  body.mode-cetak .susun-roll .etiket { border: 0; margin: 0; break-after: page; page-break-after: always; }
  body.mode-cetak .susun-roll .etiket:last-child { break-after: auto; page-break-after: auto; }
}