/* RAB Generator — sistem tampilan.
   Dokumen anggaran dibaca lama dan angkanya banyak, jadi yang diutamakan
   keterbacaan angka: rata kanan, lebar digit seragam, kontras cukup, dan
   jarak yang tidak membuat mata lelah. */

:root {
  --bg: #f4f6f8;
  --kartu: #fff;
  --garis: #e4e8ee;
  --garis-tegas: #ccd3dc;
  --teks: #16202b;
  --redup: #64748b;
  --sangat-redup: #94a3b8;

  --utama: #1d4ed8;
  --utama-gelap: #1e40af;
  --utama-lembut: #eef4ff;

  --hijau: #15803d;
  --hijau-lembut: #eaf7ef;
  --merah: #b42318;
  --merah-lembut: #fdeceb;
  --kuning: #a16207;
  --kuning-lembut: #fffbeb;

  --r: 12px;
  --r-kecil: 8px;
  --bayang: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --bayang-naik: 0 4px 12px rgba(16, 24, 40, .08);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", sans-serif;
  color: var(--teks);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--utama); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- kerangka */

header.atas {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--garis);
  padding: 0 28px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 30;
}
header.atas .merek {
  font-weight: 650; font-size: 14px; letter-spacing: -.01em;
}
header.atas .merek a { color: var(--teks); }
header.atas .remah { color: var(--redup); font-size: 13px; }
header.atas .remah a { color: var(--redup); }
header.atas .remah a:hover { color: var(--utama); }

main { max-width: 1220px; margin: 0 auto; padding: 26px 28px 80px; }

.kepala { margin-bottom: 18px; }
h1 { font-size: 24px; line-height: 1.25; margin: 0 0 6px;
     letter-spacing: -.02em; font-weight: 680; }
h2 { font-size: 15px; margin: 0 0 12px; font-weight: 650;
     letter-spacing: -.01em; }
h3 { font-size: 13px; margin: 16px 0 8px; font-weight: 650; }
.sub { color: var(--redup); margin: 0; font-size: 13.5px; }

/* --------------------------------------------------------------- kartu */

.kartu {
  background: var(--kartu);
  border: 1px solid var(--garis);
  border-radius: var(--r);
  padding: 20px 22px;
  margin-bottom: 18px;
  box-shadow: var(--bayang);
}
.kepala-kartu {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
/* Judul mendorong isi lain ke kanan. Memakai :last-child untuk itu keliru:
   kalau judulnya sendirian, dia sendiri yang terdorong ke kanan. */
.kepala-kartu h2 { margin: 0 auto 0 0; }

.baris { display: flex; gap: 16px; flex-wrap: wrap; }
.baris > * { flex: 1; min-width: 200px; }

/* ----------------------------------------------------------------- tab */

.tab {
  display: flex; gap: 2px; flex-wrap: wrap; margin: 0 0 20px;
  border-bottom: 1px solid var(--garis);
  position: sticky; top: 52px; z-index: 20;
  background: var(--bg); padding-top: 4px;
}
.tab a {
  padding: 9px 14px; color: var(--redup); font-size: 13.5px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  border-radius: var(--r-kecil) var(--r-kecil) 0 0; white-space: nowrap;
}
.tab a:hover { color: var(--teks); background: #fff; text-decoration: none; }
.tab a.aktif {
  color: var(--utama); font-weight: 620; border-bottom-color: var(--utama);
}

/* --------------------------------------------------------------- tabel */

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

/* Tabel lebar (daftar harga, analisa) menggulung di dalam kartunya sendiri.
   Tanpa ini kolom paling kanan — yang justru kolom isian — terpotong di
   layar sempit dan tidak ada tanda apa pun bahwa ada yang tersembunyi. */
.kartu > table,
.kartu > form > table { display: block; overflow-x: auto; }
.kartu > table > thead,
.kartu > table > tbody,
.kartu > form > table > thead,
.kartu > form > table > tbody { display: table; width: 100%; }

/* Akibat gulung di atas, thead dan tbody jadi dua tabel terpisah — dan dua
   tabel tidak pernah menghitung lebar kolom yang sama. Judul kolom
   melenceng dari isinya, dan angka di kolom kanan terbaca sebagai milik
   kolom sebelahnya. `table-layout: fixed` memaksa keduanya memakai lebar
   yang DIDEKLARASIKAN, jadi tiap kolom harus diberi lebar di <th>-nya.
   Dipasang per tabel, bukan menyeluruh: tabel lain masih mengandalkan
   lebar otomatis, dan memaksakannya akan menyempitkan kolom uraian
   panjang. */
table.rapi > thead,
table.rapi > tbody { table-layout: fixed; }
table.rapi td { overflow-wrap: anywhere; }
table.rapi td.angka { white-space: normal; }
th, td {
  padding: 10px 12px; border-bottom: 1px solid var(--garis);
  text-align: left; vertical-align: top;
}
th {
  font-weight: 600; color: var(--redup); font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em;
  background: #fafbfc; position: sticky; top: 96px; z-index: 5;
  border-bottom: 1px solid var(--garis-tegas);
}
td.angka, th.angka {
  text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
tbody tr:hover { background: #fbfcfd; }
tfoot td {
  font-weight: 650; border-top: 2px solid var(--garis-tegas);
  background: #fafbfc; position: relative;
}
tfoot tr:last-child td { font-size: 14.5px; }

tr.baris-bangunan td {
  background: var(--utama-lembut); font-weight: 650; font-size: 14px;
  border-top: 1px solid var(--garis-tegas);
}
tr.baris-kelompok td {
  background: #f2f5f9; font-weight: 620; padding-left: 20px;
}

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

label {
  display: block; font-size: 12px; color: var(--redup);
  margin-bottom: 5px; font-weight: 550;
}
input, select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--garis-tegas);
  border-radius: var(--r-kecil); font: inherit; background: #fff;
  color: var(--teks); transition: border-color .12s, box-shadow .12s;
}
input::placeholder { color: var(--sangat-redup); }
input:hover, select:hover { border-color: #b6bfcb; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--utama);
  box-shadow: 0 0 0 3px var(--utama-lembut);
}
input[readonly] { background: #f7f9fb; color: var(--redup); }
.medan { margin-bottom: 14px; }

button, .tombol {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--r-kecil);
  border: 1px solid var(--utama); background: var(--utama); color: #fff;
  font: inherit; font-weight: 560; cursor: pointer; white-space: nowrap;
  transition: background .12s, box-shadow .12s, border-color .12s;
}
button:hover, .tombol:hover {
  background: var(--utama-gelap); border-color: var(--utama-gelap);
  text-decoration: none; box-shadow: var(--bayang-naik);
}
.tombol.sekunder, button.sekunder {
  background: #fff; color: var(--teks); border-color: var(--garis-tegas);
}
.tombol.sekunder:hover, button.sekunder:hover {
  background: #f7f9fb; border-color: #b6bfcb;
}
.tombol.bahaya, button.bahaya {
  background: #fff; color: var(--merah); border-color: #f0c7c3;
}
.tombol.bahaya:hover, button.bahaya:hover { background: var(--merah-lembut); }
.tombol.kecil, button.kecil { padding: 5px 11px; font-size: 12.5px; }

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

.lencana {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 620; line-height: 1.6;
}
.lencana.hijau { background: var(--hijau-lembut); color: var(--hijau); }
.lencana.merah { background: var(--merah-lembut); color: var(--merah); }
.lencana.abu { background: #eef1f5; color: var(--redup); }
.lencana.kuning { background: var(--kuning-lembut); color: var(--kuning);
                  border: 1px solid #f3e4bd; }

/* Kesetaraan mutu beton f'c -> K. Sengaja tenang: ini keterangan, bukan
   peringatan, dan yang mengikat tetap f'c pada uraian AHSP. */
.lencana.mutu-k {
  font-weight: 560; letter-spacing: .01em; cursor: help;
  white-space: nowrap; vertical-align: baseline;
}

/* Tabel acuan f'c–K. Terlipat karena yang sudah hafal tidak perlu melihatnya
   tiap kali, tapi tetap ada di layar tempat mutunya dipilih. */
.tabel-mutu { margin-top: 14px; }
.tabel-mutu > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--utama);
  padding: 4px 0; list-style-position: inside;
}
.tabel-mutu > summary:hover { text-decoration: underline; }
.tabel-mutu table { margin: 8px 0; max-width: 520px; }
.tabel-mutu td, .tabel-mutu th { padding: 4px 10px; font-size: 12.5px; }
.tabel-mutu p { margin: 6px 0; max-width: 640px; }

/* -------------------------------------------------------------- catatan */

.catatan {
  border: 1px solid #f3e4bd; border-left: 3px solid var(--kuning);
  background: var(--kuning-lembut);
  padding: 12px 16px; border-radius: var(--r-kecil); margin: 0 0 18px;
  font-size: 13.5px;
}
.catatan.info {
  border-color: #cfe0ff; border-left-color: var(--utama);
  background: var(--utama-lembut);
}
.catatan.galat {
  border-color: #f3c9c5; border-left-color: var(--merah);
  background: var(--merah-lembut);
}

/* ------------------------------------------------------------- statistik */

.statistik { display: flex; gap: 34px; flex-wrap: wrap; }
.statistik > div { min-width: 130px; }
.statistik span {
  display: block; color: var(--redup); font-size: 11.5px; font-weight: 550;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px;
}
.angka-besar {
  font-size: 22px; font-weight: 680; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.angka-besar.kurang { color: var(--merah); }
.angka-besar.lebih { color: var(--hijau); }

dl.rincian {
  display: grid; grid-template-columns: minmax(140px, auto) 1fr;
  gap: 8px 20px; margin: 0; font-size: 13.5px;
}
dl.rincian dt { color: var(--redup); }
dl.rincian dd { margin: 0; }

/* ------------------------------------------------------------- bilah/kurva */

.bilah {
  background: #eef1f5; border-radius: 999px; height: 8px; overflow: hidden;
}
.bilah > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--utama), #3b82f6);
}

/* ------------------------------------------------------------ pencarian */

.hasil-cari {
  border: 1px solid var(--garis-tegas); border-radius: var(--r-kecil);
  max-height: 340px; overflow: auto; margin-top: 8px; background: #fff;
  box-shadow: var(--bayang-naik);
}
.hasil-cari div {
  padding: 9px 13px; border-bottom: 1px solid var(--garis); cursor: pointer;
  font-size: 13px;
}
.hasil-cari div:last-child { border-bottom: none; }
.hasil-cari div:hover { background: var(--utama-lembut); }
.hasil-cari .kode { font-weight: 650; margin-right: 8px; }
.hasil-cari .sat { color: var(--redup); }

/* --------------------------------------------------------------- lain-lain */

.kosong {
  color: var(--redup); padding: 34px 0; text-align: center; font-size: 13.5px;
}
.redup { color: var(--redup); }
.kecil { font-size: 12.5px; }
code {
  background: #eef1f5; padding: 1px 6px; border-radius: 5px; font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* -------------------------------------------------------------- tampilan RKS */

.rks-isi { line-height: 1.7; max-width: 78ch; }
.rks-isi h1 { font-size: 21px; margin: 0 0 8px; }
.rks-isi h2 {
  font-size: 16px; margin: 30px 0 10px; padding-top: 18px;
  border-top: 1px solid var(--garis);
}
.rks-isi h3 {
  font-size: 12px; margin: 18px 0 6px; color: var(--redup);
  text-transform: uppercase; letter-spacing: .05em;
}
.rks-isi table { margin: 12px 0; }
.rks-isi blockquote {
  margin: 10px 0; padding: 8px 16px; color: var(--redup);
  border-left: 3px solid var(--garis-tegas); background: #fafbfc;
  border-radius: 0 var(--r-kecil) var(--r-kecil) 0;
}
.rks-isi hr { border: none; border-top: 1px solid var(--garis); margin: 24px 0; }
.rks-isi ol, .rks-isi ul { padding-left: 22px; }

@media print {
  header.atas, .tab, .tombol, button, .catatan { display: none !important; }
  .kartu { border: none; padding: 0; box-shadow: none; }
  body { background: #fff; }
  main { max-width: none; padding: 0; }
}

@media (max-width: 720px) {
  main { padding: 18px 14px 60px; }
  .kartu { padding: 16px; }
  .statistik { gap: 20px; }
  th { position: static; }
  .tab { position: static; }
}

/* Kolom faktor konversi satuan — muncul hanya saat satuannya berbeda. */
.konversi {
  margin-top: 8px; padding: 8px 10px; border-radius: var(--r-kecil);
  background: var(--kuning-lembut); border: 1px solid #f3e4bd;
}
.konversi label { margin-bottom: 4px; }

/* ------------------------------------------------------------- dialog */
/* Borang yang jarang dipakai tidak perlu menempel di halaman daftar —
   ia hanya menambah gulungan dan mengalihkan perhatian dari isinya. */

.kepala-baris { display: flex; align-items: flex-start; gap: 16px; }
.kepala-baris > :first-child { margin-right: auto; }

dialog {
  border: none; border-radius: var(--r); padding: 0;
  width: min(760px, calc(100vw - 32px));
  box-shadow: 0 12px 40px rgba(16, 24, 40, .18);
  color: var(--teks);
}
dialog::backdrop { background: rgba(16, 24, 40, .42); }
dialog > form { padding: 20px 22px; }

.dialog-kepala {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--garis);
}
.dialog-kepala h2 { margin: 0 auto 0 0; font-size: 16px; }

.dialog-kaki {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--garis);
}

/* Rakitan volume */
.rakitan {
  border: 1px solid var(--garis); border-radius: var(--r-kecil);
  padding: 14px 16px; margin-bottom: 14px; background: #fcfdfe;
}

/* -------------------------------------------------------------- templat */

.kisi-templat {
  display: grid; gap: 12px; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.kartu-pilih {
  display: flex; flex-direction: column; gap: 5px; padding: 14px 16px;
  border: 1px solid var(--garis); border-radius: 10px; background: #fff;
  color: inherit; text-decoration: none;
}
.kartu-pilih:hover { border-color: var(--utama); background: var(--utama-lembut); }
.kartu-pilih strong { line-height: 1.35; }

label.pilihan {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
label.pilihan input { width: auto; margin: 0; }

.tinjau-templat select { width: 100%; }
.tinjau-templat td { vertical-align: top; }
.tinjau-templat .lencana { margin-top: 5px; display: inline-block; }

/* ---------------------------------------------------------- ukur gambar */

.baris-kirim {
  display: flex; gap: 6px; align-items: center; margin-bottom: 5px;
}
.baris-kirim select { flex: 1; min-width: 0; }

/* ------------------------------------------------------------ akun & masuk */

.akun-atas {
  margin-left: auto; display: flex; align-items: center; gap: 12px;
  font-size: 13px;
}
.akun-atas a { color: var(--utama); text-decoration: none; }
.akun-atas a:hover { text-decoration: underline; }

.layar-masuk {
  max-width: 380px; margin: 8vh auto 0;
}
.layar-masuk h1 { margin: 0 0 4px; }
.layar-masuk .medan { margin-bottom: 12px; }

/* ------------------------------------------ cari AHSP di tinjauan templat */

.cari-ahsp-baris { position: relative; margin-top: 5px; }
.cari-ahsp-baris input { width: 100%; }
.hasil-ahsp-templat {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  max-height: 260px; overflow-y: auto; background: #fff;
  border: 1px solid var(--garis); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
.hasil-ahsp-templat > div {
  padding: 7px 10px; font-size: 12px; cursor: pointer;
  border-bottom: 1px solid var(--garis-lembut, #eef1f5);
}
.hasil-ahsp-templat > div:last-child { border-bottom: 0; }
.hasil-ahsp-templat > div:hover { background: var(--utama-lembut); }
.hasil-ahsp-templat .kode {
  font-family: ui-monospace, monospace; margin-right: 6px; color: var(--utama);
}
.hasil-ahsp-templat .sat { color: var(--redup); }

/* -------------------------------------- pilih harga dari daftar proyek */

.hasil-harga-dasar {
  position: absolute; z-index: 30; left: 0; right: 0;
  max-height: 240px; overflow-y: auto; background: #fff;
  border: 1px solid var(--garis); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
.hasil-harga-dasar > div {
  padding: 7px 10px; font-size: 12px; cursor: pointer;
  border-bottom: 1px solid #eef1f5;
}
.hasil-harga-dasar > div:hover { background: var(--utama-lembut); }
.hasil-harga-dasar .sat { color: var(--redup); }
#dialog-item-manual .medan { position: relative; }

/* ------------------------------------------------------- tombol unduh */

.unduh-tiga { display: inline-flex; gap: 6px; align-items: center; }
.unduh-tiga .tombol { padding: 4px 10px; }

/* --------------------------------------------------- pemilih format RAB */

.pilih-format { border: 0; padding: 0; margin: 0 0 18px; }
.pilih-format legend {
  font-weight: 600; font-size: 15px; padding: 0; margin-bottom: 4px;
}
.kisi-format {
  display: grid; gap: 10px; margin: 10px 0;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.kartu-format { cursor: pointer; display: block; }
.kartu-format input { position: absolute; opacity: 0; width: 0; height: 0; }
.kartu-format .isi-format {
  display: flex; flex-direction: column; gap: 5px; height: 100%;
  padding: 12px 14px; border: 1.5px solid var(--garis); border-radius: 10px;
  background: #fff; transition: border-color .12s, background .12s;
}
.kartu-format:hover .isi-format { border-color: var(--utama); }
.kartu-format input:checked + .isi-format {
  border-color: var(--utama); background: var(--utama-lembut);
  box-shadow: 0 0 0 1px var(--utama);
}
.kartu-format input:focus-visible + .isi-format {
  outline: 2px solid var(--utama); outline-offset: 2px;
}
.kartu-format .lencana { align-self: flex-start; }

/* ---------------------------------------------------------- kurva S */

.kurva-batang {
  display: flex; gap: 3px; align-items: flex-end; height: 150px;
  margin-top: 16px; padding-top: 8px; border-bottom: 1px solid var(--garis);
}
.kurva-batang .batang {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; position: relative;
}
.kurva-batang .isi {
  background: var(--utama); border-radius: 3px 3px 0 0; min-height: 2px;
}
.kurva-batang span { text-align: center; color: var(--redup); }