/* =====================================================================
   Gaya tampilan Kalkulator EVM
   Arah desain: "lembar kontrol lapangan" untuk proyek telekomunikasi —
   biru kabel + abu dingin, huruf IBM Plex Sans (nuansa engineering).
   Semua warna dikumpulkan di :root, plus mode gelap otomatis.
   ===================================================================== */
:root {
  --bg: #eef1f3;
  --panel: #ffffff;
  --panel-2: #f6f8f9;
  --teks: #16262e;
  --teks-lemah: #5a6b75;
  --garis: #d6dde2;
  --garis-kuat: #b9c4cb;
  --aksen: #0b5c8a;          /* biru kabel */
  --aksen-lembut: #e1edf5;
  --aksen-teks: #ffffff;

  /* warna status */
  --hijau: #1b7f47;   --hijau-bg: #e1f2e8;
  --kuning: #94650a;  --kuning-bg: #fbf0d2;
  --merah: #b8322a;   --merah-bg: #f9e2df;
  --null: #5a6b75;    --null-bg: #e6eaed;

  /* warna garis grafik */
  --pv: #0b5c8a;
  --ev: #1b7f47;
  --ac: #b8322a;

  --radius-besar: 14px;
  --radius: 8px;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-angka: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1a20;
    --panel: #16242c;
    --panel-2: #1b2b34;
    --teks: #e3eaee;
    --teks-lemah: #93a4ae;
    --garis: #273a45;
    --garis-kuat: #3a505d;
    --aksen: #5aaee0;
    --aksen-lembut: #17354a;
    --aksen-teks: #0b1820;
    --hijau: #4cc982;   --hijau-bg: #163628;
    --kuning: #e8b53d;  --kuning-bg: #3a2f12;
    --merah: #ff7b70;   --merah-bg: #42201d;
    --null: #93a4ae;    --null-bg: #24333c;
    --pv: #5aaee0;
    --ev: #4cc982;
    --ac: #ff7b70;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--teks);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* ---------- Header ---------- */
.header {
  background: var(--panel);
  border-bottom: 1px solid var(--garis);
}
.header .isi {
  max-width: 1160px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--teks);
  text-decoration: none;
}
/* ikon "bar sinyal" kecil: tiga batang naik, khas telekomunikasi */
.logo .sinyal { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.logo .sinyal i { display: block; width: 4px; background: var(--aksen); border-radius: 1px; }
.logo .sinyal i:nth-child(1) { height: 6px; }
.logo .sinyal i:nth-child(2) { height: 11px; }
.logo .sinyal i:nth-child(3) { height: 16px; }
.header .sub { color: var(--teks-lemah); font-size: 13px; }
.header .kanan { margin-left: auto; }

main {
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 16px 56px;
}

h1 { font-size: 26px; line-height: 1.2; margin: 0 0 6px; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 17px; margin: 0 0 12px; font-weight: 600; }
.lemah { color: var(--teks-lemah); }
.kecil { font-size: 13px; }
a { color: var(--aksen); }

:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }

/* ---------- Panel ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--garis);
  border-radius: var(--radius-besar);
  padding: 20px;
  margin-bottom: 18px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 18px;
  align-items: start;
}

/* ---------- Form ---------- */
form .baris { margin-bottom: 12px; }
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
input {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--garis-kuat);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--teks);
  font: inherit;
}
input:focus { outline: 2px solid var(--aksen); outline-offset: 1px; border-color: transparent; }
.bantuan { font-size: 12px; color: var(--teks-lemah); margin-top: 3px; min-height: 18px; }
.dua-kolom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

button {
  font: inherit;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--aksen);
  background: var(--aksen);
  color: var(--aksen-teks);
  cursor: pointer;
}
button.sekunder { background: transparent; color: var(--aksen); }
button:disabled { opacity: 0.55; cursor: wait; }

.pesan { font-size: 13px; margin-top: 10px; min-height: 20px; }
.pesan.error { color: var(--merah); }
.pesan.ok { color: var(--hijau); }

/* ---------- Tabel ---------- */
.tabel-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 9px 10px; border-bottom: 1px solid var(--garis); text-align: left; white-space: nowrap; }
th { font-size: 12.5px; color: var(--teks-lemah); font-weight: 600; }
td.angka, th.angka { text-align: right; }
tbody tr.bisa-klik { cursor: pointer; }
tbody tr.bisa-klik:hover { background: var(--panel-2); }
.kosong { text-align: center; color: var(--teks-lemah); padding: 24px; }

/* ---------- Badge status ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.hijau  { color: var(--hijau);  background: var(--hijau-bg); }
.badge.kuning { color: var(--kuning); background: var(--kuning-bg); }
.badge.merah  { color: var(--merah);  background: var(--merah-bg); }
.badge.null   { color: var(--null);   background: var(--null-bg); }
.badge.besar  { font-size: 14px; padding: 6px 14px; }

/* =====================================================================
   HALAMAN DEPAN
   ===================================================================== */

/* Bagian atas: ringkasan (kiri) + peta kuadran (kanan) */
.atas {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr);
  gap: 18px;
  margin-bottom: 18px;
}
.ringkasan { padding: 18px 20px; }
.ringkasan h1 { font-size: 24px; margin-bottom: 4px; }
.ringkasan .kalimat { color: var(--teks-lemah); margin: 0 0 12px; font-size: 14px; max-width: 52ch; }

/* filter status: sekaligus jumlah proyek per status */
.filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.filter button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  color: var(--teks);
  border: 1px solid var(--garis-kuat);
  font-weight: 500;
  padding: 4px 10px;
  font-size: 14px;
  border-radius: 999px;
}
.filter button b { font-family: var(--font-angka); font-size: 15px; }
.filter button .titik { width: 9px; height: 9px; border-radius: 50%; background: var(--teks-lemah); }
.filter button[data-status="hijau"] .titik { background: var(--hijau); }
.filter button[data-status="kuning"] .titik { background: var(--kuning); }
.filter button[data-status="merah"] .titik { background: var(--merah); }
.filter button[data-status="null"] .titik { background: var(--null); }
.filter button[aria-pressed="true"] { border-color: var(--aksen); background: var(--aksen-lembut); }

/* angka portofolio */
.label-angka { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--aksen); }
.angka-portofolio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--garis);
}
.angka-portofolio div { padding: 8px 0; border-bottom: 1px solid var(--garis); }
.angka-portofolio div:nth-child(odd) { padding-right: 12px; border-right: 1px solid var(--garis); }
.angka-portofolio div:nth-child(even) { padding-left: 14px; }
.angka-portofolio dt { font-size: 13px; color: var(--teks-lemah); }
.angka-portofolio dd { margin: 0; font-family: var(--font-angka); font-size: 20px; font-weight: 600; }
.angka-portofolio dd small { font-family: var(--font); font-size: 12px; font-weight: 400; color: var(--teks-lemah); display: block; }

/* Peta kuadran CPI–SPI */
.peta { padding: 18px 20px 12px; display: flex; flex-direction: column; }
.peta .kepala { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.peta .kepala h2 { margin-bottom: 2px; }
.peta .kepala p { margin: 0 0 6px; }
.peta-wrap { position: relative; flex: 1; min-height: 260px; max-height: 340px; }

/* Daftar proyek */
.daftar-kepala { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 4px; }
.daftar-kepala h2 { margin-bottom: 0; }
/* petunjuk klik di atas daftar proyek */
.petunjuk {
  margin: 8px 0 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--teks);
  background: var(--aksen-lembut);
  border-left: 3px solid var(--aksen);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.daftar { list-style: none; margin: 0; padding: 0; }
/* nama proyek tampil seperti tautan, supaya jelas bisa diklik */
.baris-proyek .nama { color: var(--aksen); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.baris-proyek .nama::after { content: " ›"; text-decoration: none; display: inline-block; margin-left: 2px; }
.daftar li { border-top: 1px solid var(--garis); }
.daftar li:first-child { border-top: none; }
.baris-proyek {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(220px, 1.6fr) repeat(3, minmax(70px, 0.5fr)) 130px;
  gap: 16px;
  align-items: center;
  padding: 14px 8px;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius);
}
.baris-proyek:hover { background: var(--panel-2); }
.baris-proyek .nama { font-weight: 600; }
.baris-proyek .meta { font-size: 12.5px; color: var(--teks-lemah); }
.baris-proyek .metrik { text-align: right; }
.baris-proyek .metrik span { display: block; font-size: 12px; color: var(--teks-lemah); }
.baris-proyek .metrik b { font-family: var(--font-angka); font-size: 17px; font-weight: 600; }
.baris-proyek .status { text-align: right; }

/* Progress bar ganda: isian = % aktual, garis tegak = % rencana */
.progres .label-progres { display: flex; justify-content: space-between; font-size: 12px; color: var(--teks-lemah); margin-bottom: 5px; }
.progres .label-progres b { color: var(--teks); font-weight: 600; }
.bar {
  position: relative;
  height: 10px;
  background: var(--panel-2);
  border: 1px solid var(--garis);
  border-radius: 999px;
}
.bar .isi { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--aksen); }
.bar .isi.hijau { background: var(--hijau); }
.bar .isi.kuning { background: var(--kuning); }
.bar .isi.merah { background: var(--merah); }
.bar .isi.null { background: var(--null); }
.bar .rencana {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 2px;
  margin-left: -1px;
  background: var(--teks);
}

/* Cara membaca status */
.legenda { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.legenda div { padding: 4px 18px; border-left: 1px solid var(--garis); }
.legenda div:first-child { padding-left: 0; border-left: none; }
.legenda p { margin: 6px 0 0; font-size: 13.5px; color: var(--teks-lemah); }

/* Dialog proyek baru */
dialog {
  width: min(460px, calc(100vw - 32px));
  border: 1px solid var(--garis);
  border-radius: var(--radius-besar);
  padding: 22px;
  background: var(--panel);
  color: var(--teks);
}
dialog::backdrop { background: rgba(10, 30, 40, 0.45); }
dialog .tombol { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }

/* Kondisi kosong */
.kosong-besar { text-align: center; padding: 40px 16px; }
.kosong-besar p { margin: 0 0 14px; color: var(--teks-lemah); }

/* =====================================================================
   HALAMAN DETAIL
   ===================================================================== */
.judul-proyek {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.kartu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.kartu {
  background: var(--panel);
  border: 1px solid var(--garis);
  border-top: 4px solid var(--null);
  border-radius: var(--radius-besar);
  padding: 14px 16px;
}
.kartu.hijau { border-top-color: var(--hijau); }
.kartu.kuning { border-top-color: var(--kuning); }
.kartu.merah { border-top-color: var(--merah); }
.kartu .label { font-size: 13px; font-weight: 600; color: var(--teks-lemah); }
.kartu .nilai { font-family: var(--font-angka); font-size: 28px; font-weight: 600; margin: 4px 0 2px; }
.kartu .ket { font-size: 12.5px; color: var(--teks-lemah); }
.rumus { font-size: 12px; color: var(--teks-lemah); margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--garis); }

.grafik-wrap { position: relative; height: 340px; }

.narasi {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--aksen-lembut);
  border-left: 3px solid var(--aksen);
  white-space: pre-wrap;
  line-height: 1.6;
  max-width: 85ch;
}
.narasi:empty { display: none; }

/* ---------- Responsif ---------- */
@media (max-width: 960px) {
  .atas { grid-template-columns: 1fr; }
  .baris-proyek { grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .baris-proyek .progres { grid-column: 1 / -1; order: 3; }
  .baris-proyek .status { order: 2; }
  .baris-proyek .metrik { order: 4; text-align: left; }
}
@media (max-width: 860px) {
  .grid-2 { grid-template-columns: 1fr; }
  .kartu-grid { grid-template-columns: repeat(2, 1fr); }
  .legenda { grid-template-columns: 1fr; }
  .legenda div { border-left: none; padding: 8px 0; border-top: 1px solid var(--garis); }
  .legenda div:first-child { border-top: none; }
}
@media (max-width: 520px) {
  .baris-proyek { grid-template-columns: repeat(3, 1fr); }
  .baris-proyek .nama-wrap, .baris-proyek .progres { grid-column: 1 / -1; }
  .baris-proyek .status { grid-column: 1 / -1; order: 1; text-align: left; }
  .peta-wrap { min-height: 240px; }
}
@media (max-width: 420px) {
  .dua-kolom { grid-template-columns: 1fr; }
  .kartu .nilai { font-size: 22px; }
  .header .sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}