/* Sistem Pemantauan Projek RKB — satu helaian gaya untuk seluruh sistem.
   Biru tua + teal, banyak ruang putih. Merah dikhaskan untuk amaran sahaja. */

:root {
  --navy: #0a2540;
  --navy-lembut: #14375e;
  --teal: #0f766e;
  --teal-gelap: #115e59;
  --teal-lembut: #ccfbf1;

  --teks: #0f172a;
  --teks-lembut: #64748b;
  --teks-samar: #94a3b8;
  --garis: #e2e8f0;
  --latar: #f6f8fa;
  --putih: #ffffff;

  --amaran: #dc2626;
  --amaran-lembut: #fef2f2;

  /* Warna status — sama di lencana, kad, pin peta dan carta. */
  --s-pembangunan: #2563eb;
  --s-lewat: #ea580c;
  --s-menunggu: #7c3aed;
  --s-selesai: #16a34a;
  --s-kelabu: #6b7280;

  --r: 12px;
  --r-kecil: 8px;
  --bayang: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--latar);
  color: var(--teks);
  font-family: Inter, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--teal-gelap); }

/* ------------------------------------------------------------- topbar */

.topbar {
  background: var(--navy);
  color: #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 40;
}

.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  white-space: nowrap;
}

.brand strong { font-weight: 700; }
.mark { width: 26px; height: 26px; flex: none; }

.nav-atas { display: flex; gap: 22px; flex: 1; }

.nav-atas a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.nav-atas a:hover { color: #fff; border-bottom-color: var(--teal); }

.keluar { margin-left: auto; }

.pautan {
  background: none;
  border: none;
  color: #cbd5e1;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}

.pautan:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------------- kandungan */

.kandungan {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 20px 96px;
}

.kandungan.lebar { max-width: 1440px; }

h1 { font-size: 24px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 17px; font-weight: 600; margin: 32px 0 12px; }
h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }

.sari { color: var(--teks-lembut); margin: 0 0 22px; }

/* -------------------------------------------------------------- kad */

.kad {
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: var(--bayang);
}

.grid { display: grid; gap: 16px; }
.grid.dua { grid-template-columns: repeat(2, 1fr); }
.grid.tiga { grid-template-columns: repeat(3, 1fr); }
.grid.empat { grid-template-columns: repeat(4, 1fr); }

/* Angka utama besar, label kecil dan lembut. */
.angka { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.angka.besar { font-size: 42px; }
.label { font-size: 12px; font-weight: 600; color: var(--teks-lembut); text-transform: uppercase; letter-spacing: .04em; }
.nota { font-size: 13px; color: var(--teks-lembut); margin: 4px 0 0; }

/* ----------------------------------------------------------- lencana */

.lencana {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}

.lencana.pembangunan { background: var(--s-pembangunan); }
.lencana.lewat       { background: var(--s-lewat); }
.lencana.menunggu_data { background: var(--s-menunggu); }
.lencana.selesai     { background: var(--s-selesai); }
.lencana.ditangguh,
.lencana.dibatalkan  { background: var(--s-kelabu); }

.cip {
  display: inline-block;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--teks-lembut);
  white-space: nowrap;
}

/* ------------------------------------------------------------ borang */

label { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px; }

input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=date], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--garis);
  border-radius: var(--r-kecil);
  font: inherit;
  background: var(--putih);
  color: var(--teks);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}

textarea { min-height: 96px; resize: vertical; }

.medan { margin: 0 0 16px; }
.medan .bantuan { font-size: 12px; color: var(--teks-lembut); margin: 6px 0 0; }

.butang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--teal);
  color: #fff;
  border: 1px solid var(--teal);
  border-radius: var(--r-kecil);
  padding: 10px 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.butang:hover { background: var(--teal-gelap); border-color: var(--teal-gelap); }
.butang.sekunder { background: var(--putih); color: var(--teks); border-color: var(--garis); }
.butang.sekunder:hover { background: #f8fafc; }
.butang.penuh { width: 100%; }

/* ------------------------------------------------------------ mesej */

.mesej {
  background: var(--teal-lembut);
  border: 1px solid #99f6e4;
  color: #115e59;
  border-radius: var(--r-kecil);
  padding: 12px 14px;
  margin: 0 0 20px;
  font-size: 14px;
}

.mesej.ralat {
  background: var(--amaran-lembut);
  border-color: #fecaca;
  color: #991b1b;
}

.kosong {
  background: var(--putih);
  border: 1px dashed var(--garis);
  border-radius: var(--r);
  padding: 40px 24px;
  text-align: center;
}

.kosong-tajuk { font-weight: 600; margin: 0 0 6px; }
.kosong-teks { color: var(--teks-lembut); margin: 0 0 16px; }

/* ------------------------------------------------------- log masuk */

.masuk-skrin {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1000px 500px at 50% -10%, #12406b 0%, var(--navy) 60%);
}

.masuk-kotak {
  width: 100%;
  max-width: 400px;
  background: var(--putih);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 20px 45px rgba(2, 16, 33, .35);
}

.masuk-kotak .mark { width: 34px; height: 34px; }
.masuk-kotak h1 { font-size: 20px; margin: 14px 0 4px; }
.masuk-kotak .sari { font-size: 14px; margin-bottom: 22px; }

/* ------------------------------------------------- navigasi telefon */

.nav-bawah { display: none; }
.ikon { width: 22px; height: 22px; }

@media (max-width: 760px) {
  .nav-atas { display: none; }
  .kandungan { padding: 20px 16px 88px; }
  .grid.dua, .grid.tiga, .grid.empat { grid-template-columns: 1fr; }

  .nav-bawah {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--putih);
    border-top: 1px solid var(--garis);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
    z-index: 50;
  }

  .nav-bawah a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--teks-lembut);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    padding: 4px 0;
  }

  .nav-bawah a:hover { color: var(--teal); }
}

@media print {
  .topbar, .nav-bawah, .butang { display: none !important; }
  body { background: #fff; }
  .kad { box-shadow: none; border-color: #cbd5e1; break-inside: avoid; }
}

/* ------------------------------------------------------- senarai projek */

.senarai-kad {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.kad-projek {
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: var(--r);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--bayang);
  display: flex;
  flex-direction: column;
  transition: transform .12s ease, box-shadow .12s ease;
}

.kad-projek:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(15, 23, 42, .10);
}

.kad-gambar {
  position: relative;
  height: 132px;
  background: linear-gradient(135deg, #0f766e 0%, #14375e 100%);
  display: grid;
  place-items: center;
}

/* Dipaparkan mutlak: sebagai item grid yang berpusat, gambar mengambil nisbah
   aslinya dan melimpah keluar daripada kotak 132px. */
.kad-gambar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kad-ikon { color: #fff; font-size: 38px; font-weight: 700; opacity: .85; }
.kad-gambar .lencana { position: absolute; top: 10px; right: 10px; }

.kad-isi { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.kad-nama { font-weight: 600; font-size: 15px; margin: 0; line-height: 1.35; }
.kad-agensi { font-size: 13px; color: var(--teks-lembut); margin: 0; }
.kad-meta { font-size: 12px; color: var(--teks-lembut); margin: 0; }
.kad-tempoh { font-size: 20px; font-weight: 700; margin: 6px 0 0; letter-spacing: -.01em; }
.kad-tempoh span { color: var(--teks-samar); }
.kad-tempoh strong { color: var(--s-selesai); }
.kad-jimat { font-size: 15px; font-weight: 600; margin: 2px 0 0; }
.kad-jimat span { font-size: 12px; font-weight: 400; color: var(--teks-lembut); }

/* ---------------------------------------------------------- bar progress */

.bar {
  height: 7px;
  background: #e8edf3;
  border-radius: 999px;
  overflow: hidden;
  margin: 2px 0;
}

.bar > span { display: block; height: 100%; background: var(--s-pembangunan); border-radius: 999px; }

/* --------------------------------------------------- indikator kelengkapan */

.langkah {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}

.langkah li a {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--putih);
  border: 1px solid var(--garis);
  border-radius: 999px;
  padding: 7px 14px 7px 8px;
  text-decoration: none;
  color: var(--teks-lembut);
  font-size: 13px;
  font-weight: 500;
}

.langkah .bulat {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eef2f6;
  color: var(--teks-lembut);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}

.langkah li.siap a { border-color: #99f6e4; color: var(--teal-gelap); }
.langkah li.siap .bulat { background: var(--teal); color: #fff; }
.langkah li.aktif a { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(15, 118, 110, .10); color: var(--teks); }

/* -------------------------------------------------------- halaman projek */

.breadcrumb { margin: 0 0 10px; font-size: 13px; }
.breadcrumb a { color: var(--teks-lembut); text-decoration: none; }
.breadcrumb a:hover { color: var(--teal-gelap); }

.projek-kepala {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.projek-kepala h1 { margin-bottom: 2px; }
.projek-kepala .sari { margin: 0; }

.borang-panjang { max-width: 820px; }
.nota-ai { max-width: 820px; margin-top: 16px; background: #f8fafc; }

/* ------------------------------------------------------------- jadual */

.jadual-bungkus { padding: 0; overflow-x: auto; }

.jadual { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }

.jadual th, .jadual td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--garis); }
.jadual thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--teks-lembut); }
.jadual tbody th { font-weight: 500; color: var(--teks-lembut); }
.jadual td { font-variant-numeric: tabular-nums; }
.jadual tbody tr:last-child td, .jadual tbody tr:last-child th { border-bottom: none; }
.jadual .baris-jumlah th, .jadual .baris-jumlah td { font-weight: 700; color: var(--teks); background: #f8fafc; }

/* --------------------------------------------------- senarai dan suapan */

.senarai-def { margin: 0; }
.senarai-def dt { font-size: 12px; font-weight: 600; color: var(--teks-lembut); text-transform: uppercase; letter-spacing: .04em; margin-top: 14px; }
.senarai-def dt:first-child { margin-top: 0; }
.senarai-def dd { margin: 4px 0 0; white-space: pre-wrap; }

.suapan { list-style: none; margin: 0; padding: 0; }
.suapan li { padding: 12px 0; border-bottom: 1px solid var(--garis); font-size: 14px; }
.suapan li:last-child { border-bottom: none; padding-bottom: 0; }
.suapan .nota { margin-top: 2px; }

.isu-baris { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }

.senarai-fail { list-style: none; margin: 0; padding: 0; }
.senarai-fail li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--garis); font-size: 14px; }
.senarai-fail li:last-child { border-bottom: none; }
.senarai-fail .nota { margin: 0; }
.sebaris { display: inline; margin-left: auto; }

.pautan-buang { background: none; border: none; color: var(--teks-samar); cursor: pointer; font-size: 14px; padding: 2px 6px; }
.pautan-buang:hover { color: var(--amaran); }

.gambar-pratonton { width: 100%; border-radius: var(--r-kecil); margin-top: 8px; }

.butang.kecil { padding: 6px 12px; font-size: 13px; }

/* -------------------------------------------------------------- komen */

.komen { list-style: none; margin: 0; padding: 0; }
.komen li { padding: 12px 0; border-bottom: 1px solid var(--garis); }
.komen li:last-child { border-bottom: none; }
.komen-kepala { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 14px; flex-wrap: wrap; }
.komen-kepala .nota { margin: 0; }
.komen-teks { margin: 0; white-space: pre-wrap; }

@media (max-width: 760px) {
  .projek-kepala { flex-direction: column; }
  .senarai-kad { grid-template-columns: 1fr; }
  .isu-baris { flex-direction: column; }
}

/* ------------------------------------------------------ dashboard operasi */

.tajuk-baris {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.togol {
  display: inline-flex;
  border: 1px solid var(--garis);
  border-radius: 999px;
  overflow: hidden;
  background: var(--putih);
}

.togol a {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--teks-lembut);
  text-decoration: none;
}

.togol a.aktif { background: var(--teal); color: #fff; }

.jadual-kaki {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-top: 1px solid var(--garis);
  background: #f8fafc;
}

.jadual-kaki .nota { margin: 0; }

/* Tanda sebab projek perlu tindakan. Merah hanya untuk yang benar-benar amaran. */
.cip.tanda { font-weight: 600; margin: 0 4px 4px 0; }
.cip.tanda.lewat        { background: #ffedd5; color: #9a3412; }
.cip.tanda.senyap       { background: #fee2e2; color: #991b1b; }
.cip.tanda.data_sebenar { background: #ede9fe; color: #5b21b6; }
.cip.tanda.data_asas    { background: #e0f2fe; color: #075985; }
.cip.tanda.luar_biasa   { background: #fef9c3; color: #854d0e; }
.cip.tanda.komen_baru   { background: #ccfbf1; color: #115e59; }

.senarai-kira { list-style: none; margin: 0; padding: 0; }

.senarai-kira li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--garis);
  font-size: 14px;
}

.senarai-kira li:last-child { border-bottom: none; }

input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--teal); }

@media print {
  .cetak-sembunyi { display: none !important; }
  .jadual { min-width: 0; font-size: 11px; }
  .jadual th, .jadual td { padding: 6px 8px; }
  .grid.empat { grid-template-columns: repeat(4, 1fr); }
  h2 { margin-top: 18px; }
}

/* ---------------------------------------------------- dashboard strategik */

.penapis {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 20px;
}

.penapis select { width: auto; min-width: 150px; }
.pautan-kosong { font-size: 13px; color: var(--teks-lembut); }

.ringkasan-atas {
  background: linear-gradient(180deg, #f0fdfa 0%, var(--putih) 100%);
  border-color: #99f6e4;
  margin-bottom: 18px;
}

.ringkasan-teks { font-size: 17px; line-height: 1.5; margin: 6px 0 0; max-width: 78ch; }

.kad.utama { border-color: #99f6e4; }
.samar { color: var(--teks-samar); }

/* --------------------------------------------------------------- carta */

.carta-legenda {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--teks-lembut);
  margin: 0 0 14px;
}

.carta-legenda span { display: inline-flex; align-items: center; gap: 6px; }

.petak { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.petak.sebenar { background: #0d9488; }

/* Anggaran bergaris, bukan sekadar warna lebih muda: teksturnya membawa makna
   "belum disahkan" walaupun dicetak hitam putih. */
.petak.anggaran {
  background: repeating-linear-gradient(45deg, #ccfbf1 0 3px, #0d9488 3px 5px);
  border: 1px solid #0d9488;
}

.carta { display: flex; flex-direction: column; gap: 12px; }

.carta-baris {
  display: grid;
  grid-template-columns: 120px 1fr 82px;
  align-items: center;
  gap: 12px;
}

.carta-label {
  font-size: 13px;
  color: var(--teks-lembut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carta-jalur { display: flex; flex-direction: column; gap: 2px; }

.carta-jalur .isi {
  height: 10px;
  border-radius: 0 4px 4px 0;
  min-width: 2px;
}

.carta-jalur .isi.sebenar { background: #0d9488; }

.carta-jalur .isi.anggaran {
  background: repeating-linear-gradient(45deg, #ccfbf1 0 4px, #5eead4 4px 7px);
  border: 1px solid #0d9488;
  border-left: none;
  height: 8px;
}

.carta-nilai { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------- ringkasan projek */

.ringkasan-kepala {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.ringkasan-gambar {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: var(--r);
  border: 1px solid var(--garis);
}

@media (max-width: 760px) {
  .carta-baris { grid-template-columns: 92px 1fr 70px; gap: 8px; }
  .ringkasan-kepala { flex-direction: column; }
}

/* ------------------------------------------------------------------ peta */

.peta-susun { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.peta-kotak { padding: 0; overflow: hidden; }
#peta { height: 560px; width: 100%; background: #e8edf3; }

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--garis);
  font-size: 12px;
  color: var(--teks-lembut);
  background: var(--putih);
}

.legenda span { display: inline-flex; align-items: center; gap: 6px; }

.bulat-legenda {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--garis);
}

.bulat-legenda.putus { background: #cbd5e1; border-style: dashed; border-color: var(--teks-lembut); }

.leaflet-popup-content { margin: 12px 14px; font-family: inherit; }
.leaflet-container { font-family: inherit; }

@media (max-width: 900px) {
  .peta-susun { grid-template-columns: 1fr; }
  #peta { height: 420px; }
}