:root {
  --ink: #1d2b36;
  --latar: #e9edf0;
  --kad: #ffffff;
  --garis: #cdd5db;
  --teks: #1d2b36;
  --pudar: #5d6d79;
  --kuning: #ffc531;
  --kuning-teks: #1d2b36;
  --kecemasan: #c8312b;
  --segera: #c96f00;
  --biasa: #4f6f84;
  --sedang: #1f6fb2;
  --siap: #2e7d4f;
  --lembut: #f3f5f7;
  --fon-tajuk: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --fon: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --latar: #121a20;
    --kad: #1b252d;
    --garis: #2e3c47;
    --teks: #e6ecef;
    --pudar: #9aabb7;
    --lembut: #222e37;
    --biasa: #7f9cb0;
    --segera: #e8901f;
    --kecemasan: #ef5a50;
    --sedang: #5aa2e0;
    --siap: #4caf7a;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--fon);
  font-size: 16px;
  line-height: 1.45;
  background: var(--latar);
  color: var(--teks);
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--kuning); outline-offset: 2px; }
svg { width: 18px; height: 18px; flex: none; }

/* ---------- Rangka ---------- */
.atas {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px;
  background: var(--ink); color: #fff;
}
.jenama {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--fon-tajuk); font-weight: 700; font-size: 22px; letter-spacing: .01em;
}
.jenama .logo svg { width: 22px; height: 22px; color: var(--kuning); fill: var(--kuning); stroke: none; }
.atas .saya { font-size: 14px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }

.utama {
  max-width: 720px; margin: 0 auto;
  padding: 14px 14px calc(env(safe-area-inset-bottom, 0px) + 96px);
}

.bawah {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  background: var(--kad); border-top: 1px solid var(--garis);
  padding: 6px 4px calc(env(safe-area-inset-bottom, 0px) + 6px);
}
.bawah a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; font-size: 12px; color: var(--pudar); padding: 4px 0; font-weight: 500;
}
.bawah a svg { width: 24px; height: 24px; }
.bawah a.aktif { color: var(--teks); }
.bawah a.aktif svg { color: var(--sedang); }
.bawah .nav-baru svg {
  width: 48px; height: 48px; padding: 12px; border-radius: 16px;
  background: var(--kuning); color: var(--kuning-teks); margin-top: -22px;
  box-shadow: 0 3px 0 #c99a12;
}
.bawah .nav-baru.aktif svg { color: var(--kuning-teks); }

/* ---------- Tajuk halaman ---------- */
.tajuk-hal { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; flex-wrap: wrap; }
.tajuk-hal h1 {
  font-family: var(--fon-tajuk); font-weight: 700; font-size: 30px; line-height: 1.05;
  margin: 0; flex: 1; min-width: 0;
}
.kembali {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--kad); border: 1px solid var(--garis); text-decoration: none;
}
.kembali svg { width: 22px; height: 22px; }
h2 { font-family: var(--fon-tajuk); font-weight: 700; font-size: 21px; margin: 0 0 8px; }
h3 { font-size: 15px; font-weight: 600; margin: 0; }

/* ---------- Togol & tab ---------- */
.togol { display: inline-flex; background: var(--kad); border: 1px solid var(--garis); border-radius: 10px; padding: 3px; }
.togol button {
  border: 0; background: none; padding: 6px 12px; border-radius: 8px; font-size: 14px; font-weight: 600;
  color: var(--pudar); cursor: pointer;
}
.togol button.aktif { background: var(--ink); color: #fff; }
@media (prefers-color-scheme: dark) { .togol button.aktif { background: var(--teks); color: var(--latar); } }

.tab-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 8px 10px 9px; border-radius: 10px; cursor: pointer; text-align: left;
  background: var(--kad); border: 1px solid var(--garis); border-bottom: 4px solid var(--garis);
  font-size: 13px; font-weight: 600; color: var(--pudar);
}
.tab .bil { font-family: var(--fon-tajuk); font-size: 28px; line-height: 1; color: var(--teks); }
.tab.perlu.aktif  { border-bottom-color: var(--biasa); color: var(--teks); }
.tab.sedang.aktif { border-bottom-color: var(--sedang); color: var(--teks); }
.tab.siap.aktif   { border-bottom-color: var(--siap); color: var(--teks); }
.tab.aktif { box-shadow: 0 0 0 2px var(--teks) inset; }

/* ---------- Kad kerja ---------- */
.senarai { display: grid; gap: 10px; }
.kad {
  display: block; position: relative; text-decoration: none;
  background: var(--kad); border: 1px solid var(--garis); border-radius: 12px;
  padding: 12px 14px 12px 20px; overflow: hidden;
}
.kad::before {  /* jalur warna keutamaan, seperti sarung kabel */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--biasa);
}
.kad.u-kecemasan::before { background: var(--kecemasan); }
.kad.u-segera::before { background: var(--segera); }
.kad.u-biasa::before { background: var(--biasa); }
.kad.tanpa-jalur { padding-left: 14px; }
.kad.tanpa-jalur::before { display: none; }

.kad-atas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kad-atas .no {
  margin-left: auto; font-family: var(--fon-tajuk); font-weight: 700; font-size: 20px; color: var(--pudar);
}
.kad-tajuk { font-weight: 600; font-size: 17px; margin: 4px 0 2px; line-height: 1.3; }
.kad-baris { display: flex; align-items: center; gap: 6px; color: var(--pudar); font-size: 14px; }
.kad-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 13.5px; color: var(--pudar); }
.kad-meta span { display: inline-flex; align-items: center; gap: 5px; }
.kad-meta svg, .kad-baris svg { width: 15px; height: 15px; }
.lewat { color: var(--kecemasan) !important; font-weight: 600; }

.lencana {
  display: inline-block; font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
  background: var(--lembut); color: var(--pudar);
}
.lencana.kecemasan { background: var(--kecemasan); color: #fff; }
.lencana.segera { background: var(--segera); color: #fff; }
.lencana.biasa { background: var(--lembut); color: var(--teks); }
.lencana.st-perlu { background: var(--biasa); color: #fff; }
.lencana.st-sedang { background: var(--sedang); color: #fff; }
.lencana.st-siap, .lencana.disahkan { background: var(--siap); color: #fff; }
.lencana.menunggu { background: transparent; border: 1px dashed var(--siap); color: var(--siap); }
.kat { font-size: 13px; color: var(--pudar); font-weight: 500; }

/* ---------- Blok ---------- */
.blok { background: var(--kad); border: 1px solid var(--garis); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.blok-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.blok-kepala h2, .blok-kepala h3 { margin: 0; }
.tajuk-besar { font-family: var(--fon); font-weight: 600; font-size: 21px; line-height: 1.3; margin: 8px 0 6px; }
.keterangan { margin: 6px 0 0; white-space: pre-wrap; }
.pudar { color: var(--pudar); }
.kecil { font-size: 13.5px; }
.nota { background: var(--lembut); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 0 0 12px; }

.pautan-premis { display: block; text-decoration: none; padding: 8px 0; }
.pautan-premis strong { display: block; font-size: 17px; }

.cip-papar { display: flex; flex-wrap: wrap; gap: 6px; }
.cip-papar span { background: var(--lembut); border-radius: 20px; padding: 4px 10px; font-size: 14px; font-weight: 500; }

/* ---------- Borang ---------- */
.borang label:not(.pil):not(.semak):not(.btn) { display: block; font-size: 14px; font-weight: 600; margin: 12px 0 5px; }
.borang .blok > label:first-of-type { margin-top: 0; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--garis);
  background: var(--kad); font-size: 16px;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--sedang); outline-offset: 0; border-color: transparent; }
.petua { font-size: 13px; color: var(--pudar); margin: 6px 0 0; }
.dua { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.baris-premis { display: flex; gap: 8px; }
.baris-premis select { flex: 1; }

.cip { display: flex; flex-wrap: wrap; gap: 6px; }
.pil { position: relative; cursor: pointer; }
.pil input { position: absolute; opacity: 0; pointer-events: none; }
.pil span {
  display: inline-block; padding: 8px 13px; border-radius: 20px; border: 1px solid var(--garis);
  font-size: 14.5px; font-weight: 500; background: var(--kad);
}
.pil input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (prefers-color-scheme: dark) { .pil input:checked + span { background: var(--teks); border-color: var(--teks); color: var(--latar); } }
.pil input:focus-visible + span { outline: 3px solid var(--kuning); outline-offset: 2px; }
.cip.keutamaan .pil input[value=kecemasan]:checked + span { background: var(--kecemasan); border-color: var(--kecemasan); color: #fff; }
.cip.keutamaan .pil input[value=segera]:checked + span { background: var(--segera); border-color: var(--segera); color: #fff; }
.semak { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 500; }
.semak input { width: 20px; height: 20px; }

.baris-barang { display: grid; grid-template-columns: 1fr 100px 40px; gap: 6px; margin-bottom: 6px; }
.buang {
  border: 1px solid var(--garis); background: var(--kad); border-radius: 10px; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--pudar);
}

/* ---------- Butang ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 16px; border-radius: 10px; border: 1px solid transparent;
  font-weight: 600; font-size: 15.5px; cursor: pointer; text-decoration: none;
  background: var(--lembut); color: var(--teks);
}
.btn:disabled { opacity: .6; cursor: progress; }
.btn.utama { background: var(--kuning); color: var(--kuning-teks); box-shadow: 0 2px 0 #c99a12; }
.btn.gelap { background: var(--ink); color: #fff; }
.btn.hijau { background: var(--siap); color: #fff; }
.btn.biru { background: var(--sedang); color: #fff; }
.btn.garis { background: var(--kad); border-color: var(--garis); }
.btn.bahaya { background: var(--kecemasan); color: #fff; }
.btn.bahaya-garis { background: transparent; border-color: var(--kecemasan); color: var(--kecemasan); }
.btn.kecil { padding: 6px 11px; font-size: 14px; }
.btn.penuh { width: 100%; }
.btn.besar { padding: 15px 18px; font-size: 17px; }
.butang-baris { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.butang-baris .btn { flex: 1 1 auto; }
.tindakan { display: grid; gap: 8px; }
.tindakan p { margin: 0; }

/* ---------- Barang ---------- */
.senarai-barang { list-style: none; margin: 0; padding: 0; }
.senarai-barang li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--garis); padding: 4px 0; }
.senarai-barang li:last-child { border-bottom: 0; }
.senarai-barang label { flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.senarai-barang input { width: 22px; height: 22px; accent-color: var(--siap); flex: none; }
.senarai-barang .sedia span { text-decoration: line-through; color: var(--pudar); }
.senarai-barang em { font-style: normal; color: var(--pudar); font-size: 14px; margin-left: auto; }
.senarai-barang .buang { width: 34px; height: 34px; font-size: 18px; }
.tambah-barang { display: grid; grid-template-columns: 1fr 90px auto; gap: 6px; margin-top: 10px; }

/* ---------- Gambar ---------- */
.kumpulan-gambar + .kumpulan-gambar { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--garis); }
.grid-gambar { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.grid-gambar .gambar, .grid-gambar .pra {
  position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 0; padding: 0;
  background: var(--lembut); cursor: pointer;
}
.grid-gambar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pra .buang { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; font-size: 16px; }
.paparan-gambar img { width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px; background: #000; }

/* ---------- Jadual ---------- */
.hari { margin-bottom: 16px; }
.hari-kepala { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.hari-kepala h2 { margin: 0; }
.hari-kepala .tarikh { color: var(--pudar); font-size: 14px; }
.hari.kosong-hari { margin-bottom: 6px; }
.hari.kosong-hari .hari-kepala h2 { font-size: 17px; color: var(--pudar); }
.siapa { background: var(--kad); border: 1px solid var(--garis); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; font-size: 14.5px; }
.siapa div { display: flex; gap: 8px; padding: 3px 0; }
.siapa strong { min-width: 110px; }
.siapa .bebas { color: var(--pudar); }

/* ---------- Premis & pengguna ---------- */
.cari { margin-bottom: 12px; }
.baris-pengguna { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--garis); }
.baris-pengguna:last-child { border-bottom: 0; }
.baris-pengguna .maklumat-p { flex: 1; min-width: 0; }
.baris-pengguna .maklumat-p strong { display: block; }
.tidak-aktif { opacity: .55; }
.ringkas-kat { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ---------- Log masuk ---------- */
.skrin-masuk {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 24px) 20px calc(env(safe-area-inset-bottom, 0px) + 24px);
  background: var(--ink); color: #fff;
}
.skrin-masuk .isi { max-width: 400px; width: 100%; margin: 0 auto; }
.skrin-masuk .lambang svg { width: 54px; height: 54px; fill: var(--kuning); stroke: none; }
.skrin-masuk h1 { font-family: var(--fon-tajuk); font-size: 44px; line-height: 1; margin: 12px 0 6px; }
.skrin-masuk p.sub { margin: 0 0 22px; opacity: .8; }
.skrin-masuk .borang { background: var(--kad); color: var(--teks); border-radius: 16px; padding: 18px; }
.skrin-masuk .borang label:first-child { margin-top: 0; }
.input-pin { letter-spacing: .4em; font-size: 22px !important; text-align: center; }

/* ---------- Modal, toast, memuat ---------- */
.lapik {
  position: fixed; inset: 0; z-index: 50; background: rgba(10, 18, 24, .55);
  display: flex; align-items: flex-end; justify-content: center;
}
.modal {
  width: 100%; max-width: 560px; max-height: 92vh; overflow: auto;
  background: var(--kad); border-radius: 18px 18px 0 0;
  padding: 18px 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
  animation: naik .18s ease-out;
}
@media (min-width: 640px) { .lapik { align-items: center; } .modal { border-radius: 16px; } }
@keyframes naik { from { transform: translateY(24px); opacity: 0; } }
.modal h2 { margin-bottom: 4px; }

.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); z-index: 60;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: #fff; padding: 11px 16px; border-radius: 10px; font-size: 15px;
  max-width: calc(100% - 32px); transition: opacity .2s, transform .2s;
}
.toast.tunjuk { opacity: 1; transform: translate(-50%, 0); }
.toast.ralat { background: var(--kecemasan); }
.toast.ok { background: var(--siap); }

.memuat-awal { min-height: 60vh; display: grid; place-items: center; }
.memuat { display: grid; place-items: center; padding: 48px 0; }
.pusing {
  display: inline-block; width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--garis); border-top-color: var(--sedang); animation: pusing .8s linear infinite;
}
.btn .pusing { width: 16px; height: 16px; border-width: 2px; }
@keyframes pusing { to { transform: rotate(360deg); } }

.kosong { text-align: center; padding: 32px 16px; color: var(--pudar); }
.kosong p { margin: 0 0 12px; }
.versi { text-align: center; color: var(--pudar); font-size: 13px; margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}