:root {
  --latar: #f4f6f8;
  --kad: #ffffff;
  --teks: #111827;
  --senyap: #5b6472;
  --garis: #dfe3e8;
  --utama: #0f766e;
  --utama-teks: #ffffff;
  --bahaya: #b91c1c;
  --amaran: #b45309;
  --amaran-latar: #fef3c7;
  --ok: #15803d;
  --ok-latar: #dcfce7;
  --merah-latar: #fee2e2;
  --jejari: 12px;
  --tinggi-nav: 60px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --latar: #0e1317;
    --kad: #182027;
    --teks: #e8edf2;
    --senyap: #9aa6b2;
    --garis: #2a343d;
    --utama: #2dd4bf;
    --utama-teks: #04211e;
    --bahaya: #f87171;
    --amaran: #fbbf24;
    --amaran-latar: #3a2b07;
    --ok: #4ade80;
    --ok-latar: #0f2f1b;
    --merah-latar: #3b1414;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--latar); color: var(--teks);
  font: 16px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  padding-bottom: calc(var(--tinggi-nav) + env(safe-area-inset-bottom));
}
a { color: inherit; text-decoration: none; }
h1, h2 { margin: 0; line-height: 1.25; }
h1 { font-size: 1.15rem; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
h2 { font-size: 1.05rem; font-weight: 600; }
.memuatkan { padding: 2rem; text-align: center; color: var(--senyap); }
.tersembunyi { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
[hidden] { display: none !important; }
.senyap { color: var(--senyap); }
.kecil-teks { font-size: 0.85rem; }
.ikon { display: inline-flex; vertical-align: middle; flex: none; }

/* Kepala dan navigasi */
.kepala {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px; background: var(--kad); border-bottom: 1px solid var(--garis);
}
.tindakan { display: flex; gap: 4px; }
main { max-width: 720px; margin: 0 auto; padding: 14px 16px 90px; }
.nav-bawah {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; background: var(--kad);
  border-top: 1px solid var(--garis); padding-bottom: env(safe-area-inset-bottom);
}
.nav-bawah a {
  flex: 1; min-height: var(--tinggi-nav); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 0.75rem; color: var(--senyap); position: relative;
}
.nav-bawah a.aktif { color: var(--utama); font-weight: 600; }
.lencana {
  position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--bahaya); color: #fff; font-size: 0.7rem; line-height: 18px; text-align: center;
}

/* Butang */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--garis); border-radius: 10px; background: var(--kad); color: var(--teks); font: inherit; cursor: pointer;
}
.btn:active { filter: brightness(0.95); }
.btn:disabled { opacity: 0.6; }
.btn.utama { background: var(--utama); color: var(--utama-teks); border-color: var(--utama); font-weight: 600; }
.btn.bahaya { background: var(--bahaya); color: #fff; border-color: var(--bahaya); }
.btn.bahaya-teks { color: var(--bahaya); }
.btn.lebar { width: 100%; }
.btn.ikon-btn { min-width: 44px; padding: 8px; }
.baris-butang { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* Kad dan senarai */
.kad { background: var(--kad); border: 1px solid var(--garis); border-radius: var(--jejari); padding: 12px 14px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.kad-senarai { display: flex; flex-direction: column; }
.kad-barang { flex-direction: row; gap: 12px; align-items: flex-start; }
.kad-isi { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.kad-isi strong { overflow-wrap: anywhere; }
.kecil { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; flex: none; background: var(--garis); }
.tanpa-gambar { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem; font-weight: 600; }
.kad > .cip { align-self: flex-start; }
.cip-baris { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0; }
.cip { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 0.8rem; background: var(--garis); color: var(--teks); }
.cip[style*='--warna'] { background: color-mix(in srgb, var(--warna) 18%, transparent); border: 1px solid var(--warna); }
.cip.amaran { background: var(--amaran-latar); color: var(--amaran); }
.cip.amaran-merah { background: var(--merah-latar); color: var(--bahaya); }
.cip.ok { background: var(--ok-latar); color: var(--ok); }
.alat-tapis { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.dua-lajur { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ringkasan { margin: 4px 0 10px; font-size: 0.9rem; }
.kosong-besar { text-align: center; color: var(--senyap); padding: 40px 16px; }
.fab {
  position: fixed; right: 16px; bottom: calc(var(--tinggi-nav) + 16px + env(safe-area-inset-bottom)); z-index: 9; display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 18px; border-radius: 999px; background: var(--utama); color: var(--utama-teks); font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* Butiran */
.gambar-besar { width: 100%; max-height: 320px; object-fit: contain; background: var(--kad); border: 1px solid var(--garis); border-radius: var(--jejari); margin-bottom: 10px; cursor: zoom-in; }
.nama-barang { font-size: 1.25rem; overflow-wrap: anywhere; }
.maklumat-baris { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed var(--garis); }
.maklumat-baris > span:last-child { text-align: right; overflow-wrap: anywhere; }
.maklumat-baris:last-of-type { border-bottom: none; }
.bahagian { margin-top: 20px; }
.bahagian-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.aktiviti.terkini { border-color: var(--utama); }
.aktiviti .nota { white-space: pre-wrap; overflow-wrap: anywhere; }
.grid-lampiran { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.lampiran { margin: 0; position: relative; background: var(--kad); border: 1px solid var(--garis); border-radius: 10px; overflow: hidden; }
.lampiran img { width: 100%; height: 120px; object-fit: cover; display: block; cursor: zoom-in; }
.lampiran figcaption { padding: 6px 8px; font-size: 0.8rem; overflow-wrap: anywhere; }
.lampiran > .btn { position: absolute; top: 4px; right: 4px; min-height: 36px; background: var(--kad); }
.pdf-jubin { height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--merah-latar); color: var(--bahaya); font-weight: 600; }
.pdf-tindakan { margin: 0; padding: 0 8px 8px; }
.pdf-tindakan .btn { min-height: 36px; padding: 4px 10px; flex: 1; }
.peringatan.dibaca { opacity: 0.65; }
.peringatan { flex-direction: row; align-items: center; gap: 10px; }
.amaran-kad { background: var(--amaran-latar); }
.baris-kategori { flex-direction: row; align-items: center; gap: 10px; }
.titik { width: 18px; height: 18px; border-radius: 50%; flex: none; }
details > summary { cursor: pointer; padding: 8px 0; font-weight: 600; }

/* Borang */
.borang { display: flex; flex-direction: column; gap: 14px; }
.medan { display: flex; flex-direction: column; gap: 4px; }
.medan .label { font-weight: 600; font-size: 0.9rem; }
.medan small { color: var(--senyap); }
input[type='text'], input[type='number'], input[type='search'], input[type='time'], input[type='date'], select, textarea {
  width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--garis); border-radius: 10px; background: var(--kad); color: var(--teks); font: inherit;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--utama); outline-offset: 1px; }
.baris-input { display: flex; gap: 6px; align-items: center; position: relative; }
.harga-baris { grid-template-columns: 2fr 1fr; }
.ralat-medan, .ralat-borang { color: var(--bahaya); font-size: 0.9rem; }
.ralat-borang { background: var(--merah-latar); padding: 10px 12px; border-radius: 10px; }
.pratonton { width: 100%; max-height: 240px; object-fit: contain; border: 1px solid var(--garis); border-radius: var(--jejari); background: var(--kad); }
.pratonton.kosong { height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--senyap); }
.baris-peringatan { display: grid; grid-template-columns: 70px 1fr 1fr auto; gap: 6px; margin-bottom: 6px; align-items: center; }
.editor-peringatan { display: flex; flex-direction: column; gap: 6px; }
.editor-peringatan > .btn { align-self: flex-start; }
.warna-pilihan { display: flex; flex-wrap: wrap; gap: 10px; }
.warna { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.warna.dipilih { border-color: var(--teks); }

/* Dialog, toast, lightbox */
.dialog { border: 1px solid var(--garis); border-radius: 14px; background: var(--kad); color: var(--teks); padding: 18px; width: min(92vw, 420px); }
.dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.dialog h2 { margin-bottom: 8px; }
.dialog-butang { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
#toast { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tinggi-nav) + 12px + env(safe-area-inset-bottom)); z-index: 50; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
.toast { background: #1f2937; color: #fff; padding: 10px 14px; border-radius: 10px; max-width: 480px; pointer-events: auto; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
.toast.ok { background: #166534; }
.toast.ralat { background: #991b1b; }
.toast a { color: inherit; text-decoration: underline; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; padding: 12px; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox .btn { position: absolute; top: 12px; right: 12px; background: #fff; color: #111; }
.banner-kemas-kini { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px; background: var(--utama); color: var(--utama-teks); }
.banner-kemas-kini .btn { min-height: 36px; }

/* ---- v0.3.0: status, tag, ubah lampiran ---- */
.cip.tag-cip { background: transparent; border: 1px solid var(--garis); color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.cip.status-rosak { background: #fef3c7; color: #92400e; }
.cip.status-dijual, .cip.status-diarkib { background: #e0e7ff; color: #3730a3; }
.cip.status-hilang, .cip.status-dibuang { background: #fee2e2; color: #991b1b; }
.cip-buang { border: 0; background: none; color: inherit; font-size: 1.1rem; line-height: 1; padding: 0 2px; min-width: 24px; min-height: 24px; cursor: pointer; }
.editor-tag { display: flex; flex-direction: column; gap: 8px; }
.lampiran { position: relative; }
.lampiran > .ubah-lampiran { position: absolute; top: 4px; right: 48px; }
.maklumat-baris select { max-width: 60%; }
@media (prefers-color-scheme: dark) {
  .cip.status-rosak { background: #78350f; color: #fde68a; }
  .cip.status-dijual, .cip.status-diarkib { background: #312e81; color: #c7d2fe; }
  .cip.status-hilang, .cip.status-dibuang { background: #7f1d1d; color: #fecaca; }
}

/* ---- v0.4.0: gaya paparan tarikh dengan nama ---- */
.maklumat-baris > span:first-child { flex: none; }
.tarikh-nama .hari { white-space: nowrap; }
@media (max-width: 400px) {
  .maklumat-baris .tarikh-nama { display: block; text-align: right; }
  .maklumat-baris .tarikh-nama .hari { display: block; }
}
.maklumat-baris.baris-pilih { flex-direction: column; gap: 4px; }
.maklumat-baris.baris-pilih select { max-width: 100%; width: 100%; }

/* ---- v0.5.0: bar baki pada kad peringatan (menyusut, tetingkap 30 hari) ---- */
.peringatan.ada-bar { position: relative; overflow: hidden; padding-top: 18px; --tahap: #6b7280; --tahap-teks: #4b5563; }
.peringatan.ada-bar[data-tahap="tiba"] { --tahap: #dc2626; --tahap-teks: #b91c1c; }
.peringatan.ada-bar[data-tahap="segera"] { --tahap: #f97316; --tahap-teks: #c2410c; }
.peringatan.ada-bar[data-tahap="hampir"] { --tahap: #eab308; --tahap-teks: #a16207; }
.peringatan.ada-bar[data-tahap="jauh"] { --tahap: #9ca3af; --tahap-teks: #4b5563; }
.bar-baki { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--garis); }
.bar-baki > i { display: block; height: 100%; background: var(--tahap); transition: width 0.4s; }
.baris-baki { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.baki-teks { font-weight: 700; color: var(--tahap-teks); white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  .peringatan.ada-bar[data-tahap="tiba"] { --tahap-teks: #fca5a5; }
  .peringatan.ada-bar[data-tahap="segera"] { --tahap-teks: #fdba74; }
  .peringatan.ada-bar[data-tahap="hampir"] { --tahap-teks: #fde047; }
  .peringatan.ada-bar[data-tahap="jauh"] { --tahap-teks: #cbd5e1; }
}

/* ---- 0.6.0: suis peringatan aktiviti ---- */
.baris-suis { display: flex; align-items: center; gap: .6rem; font-weight: 600; min-height: 44px; cursor: pointer; }
.baris-suis input[type="checkbox"] { width: 1.3rem; height: 1.3rem; flex: none; }
.ruang-peringatan[hidden] { display: none; }

/* ---- 0.6.0: set semula tapisan, pautan kategori, mod pilih, Undo ---- */
.baris-ringkasan { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
.baris-ringkasan .ringkasan { flex: 1 1 8rem; margin: 0; }
.kecil-btn { min-height: 36px; padding: 4px 12px; }
.pautan-kategori { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; text-decoration: none; min-height: 44px; }
.bar-pilih { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 8px; background: var(--kad); border: 1px solid var(--utama); border-radius: var(--jejari); }
.bar-pilih .bil-pilih { flex: 1 1 6rem; }
.bar-pilih[hidden], .bar-tindakan[hidden] { display: none; }
.bar-tindakan { position: fixed; left: 0; right: 0; bottom: calc(var(--tinggi-nav) + env(safe-area-inset-bottom)); z-index: 30; display: flex; gap: 8px; padding: 8px 12px; background: var(--kad); border-top: 1px solid var(--garis); }
.bar-tindakan .btn { flex: 1; }
body.mod-pilih .fab { display: none; }
body.mod-pilih main { padding-bottom: 150px; }
.kad-barang .kotak-pilih { flex: none; width: 24px; height: 24px; border: 2px solid var(--garis); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: transparent; font-weight: 700; align-self: center; }
.kad-barang.dipilih { border-color: var(--utama); box-shadow: 0 0 0 2px var(--utama) inset; }
.kad-barang.dipilih .kotak-pilih { background: var(--utama); border-color: var(--utama); color: var(--utama-teks); }
.senarai-kotak { display: flex; flex-direction: column; }
.baris-suis.kecil { font-weight: 400; min-height: 40px; }
.toast.ada-tindakan { display: flex; align-items: center; gap: 12px; }
.toast .toast-teks { flex: 1; }
.toast .toast-butang { flex: none; min-height: 36px; padding: 4px 14px; border: 1px solid #fff; border-radius: 8px; background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }