/* =====================================================================
   DRW Property — gaya dasar.
   Satu berkas, tanpa framework: SPA ini dilayani lewat awalan berversi
   sehingga CSS ikut ter-bust tiap deploy.
   ===================================================================== */

:root {
  --brand-900: #16233f;
  --brand-800: #1e3160;
  --brand-700: #26407d;
  --brand-600: #2f52a0;
  --brand-500: #3e6ac4;
  --brand-100: #e5edfb;
  --brand-050: #f2f6fe;

  --accent: #f59e0b;
  --accent-600: #d97706;

  --ok: #15803d;
  --ok-bg: #dcfce7;
  --warn: #b45309;
  --warn-bg: #fef3c7;
  --bad: #b91c1c;
  --bad-bg: #fee2e2;
  --info: #1d4ed8;
  --info-bg: #dbeafe;

  --ink: #131a2a;
  --ink-2: #40506b;
  --ink-3: #6b7a94;
  --line: #dde4ef;
  --line-2: #eef2f8;
  --bg: #f5f7fb;
  --card: #ffffff;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(19, 26, 42, .06), 0 8px 24px rgba(19, 26, 42, .06);
  --shadow-lg: 0 12px 40px rgba(19, 26, 42, .16);

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Plus Jakarta Sans', var(--font);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; line-height: 1.25; letter-spacing: -.01em; }
a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ── Layar boot & login ─────────────────────────────────────────── */
.boot, .boot-fallback {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 24px;
}
.boot-logo { width: 72px; height: 72px; border-radius: 20px; }
.boot-name { font-family: var(--font-head); font-weight: 800; letter-spacing: .04em; color: var(--brand-800); }
.boot-bar { width: 160px; height: 4px; border-radius: 4px; background: var(--brand-100); overflow: hidden; }
.boot-bar i { display: block; width: 40%; height: 100%; background: var(--brand-600); border-radius: 4px; animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.boot-fallback { max-width: 620px; margin: 0 auto; text-align: left; align-items: flex-start; }

/*  Halaman masuk dibagi dua: panel kiri menjelaskan APA aplikasi ini dan
    SIAPA pemiliknya, panel kanan hanya berisi tombol masuk. Pembagian itu
    bukan sekadar hiasan — halaman login tanpa identitas pemilik yang jelas
    adalah salah satu sinyal yang dipakai pemindai phishing otomatis, dan
    riwayat domain lain di server ini sudah membuktikannya. */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--bg); }

.masuk-kiri {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(150deg, #2b4a8f 0%, #1c2e59 55%, #121c33 100%);
  padding: 52px 46px; display: flex; flex-direction: column; justify-content: center; gap: 26px;
}
/* Cincin konsentris: isyarat "berputar 360°" tanpa gambar tambahan. */
.masuk-kiri::before {
  content: ''; position: absolute; right: -170px; top: 50%; width: 460px; height: 460px;
  transform: translateY(-50%); border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 0 0 58px rgba(255, 255, 255, .035), 0 0 0 132px rgba(255, 255, 255, .022);
}
.masuk-kiri > * { position: relative; }
.masuk-merek { display: flex; align-items: center; gap: 13px; }
.masuk-merek img { width: 52px; height: 52px; border-radius: 15px; }
.masuk-merek .nm { font-family: var(--font-head); font-weight: 800; font-size: 19px; letter-spacing: .01em; }
.masuk-merek .sub { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #9fb4dd; }
.masuk-kiri h1 { font-size: 30px; line-height: 1.2; max-width: 15ch; }
.masuk-kiri .ringkas { color: #c3d2ec; font-size: 14.5px; max-width: 46ch; }

.masuk-fitur { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; max-width: 44ch; }
.masuk-fitur li { display: flex; gap: 13px; align-items: flex-start; }
.masuk-fitur .ic {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center;
  background: rgba(255, 255, 255, .13); color: #fff; font-size: 14px;
}
.masuk-fitur .jd { font-weight: 600; font-size: 14px; }
.masuk-fitur .kt { font-size: 12.5px; color: #a9bcdd; }
.masuk-org { margin-top: 6px; font-size: 12px; color: #9fb4dd; line-height: 1.6; }
.masuk-org strong { color: #dbe5f7; }
.masuk-org a { color: #bcd0f2; }

.masuk-kanan {
  display: grid; place-items: center; padding: 40px 24px;
  background:
    radial-gradient(900px 480px at 80% -10%, #dfe8fb 0%, transparent 62%),
    radial-gradient(700px 420px at 0% 100%, #fdeccd 0%, transparent 58%), var(--bg);
}
.login-card { width: min(392px, 100%); background: var(--card); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 30px 28px; }
.login-card h2 { font-size: 20px; }
.login-card p { color: var(--ink-2); }
.login-aman {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 16px;
  padding: 11px 13px; border-radius: 12px; background: var(--brand-050); border: 1px solid var(--brand-100);
  font-size: 12px; color: var(--ink-2); line-height: 1.5;
}
.login-aman i { color: var(--brand-600); margin-top: 2px; }
.login-kaki { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--ink-3); text-align: center; }

@media (max-width: 900px) {
  .login-wrap { grid-template-columns: 1fr; }
  .masuk-kiri { padding: 26px 20px 30px; gap: 18px; }
  .masuk-kiri::before { display: none; }
  .masuk-kiri h1 { font-size: 21px; max-width: none; }
  /*  Di ponsel panel perkenalan harus ringkas: tombol masuk adalah alasan
      orang membuka halaman ini, dan sebelumnya ia baru terlihat setelah
      menggulir satu layar penuh. Paragraf dan keterangan fitur dibuang;
      judul fiturnya saja sudah menyampaikan maksudnya. */
  .masuk-kiri .ringkas { display: none; }
  .masuk-fitur { gap: 11px; }
  .masuk-fitur .kt { display: none; }
  .masuk-fitur .ic { width: 28px; height: 28px; border-radius: 9px; font-size: 12px; }
  .masuk-merek img { width: 44px; height: 44px; border-radius: 13px; }
  .masuk-kanan { padding: 22px 16px 34px; }
  .login-card { box-shadow: var(--shadow); }
}

/* ── Kerangka aplikasi ──────────────────────────────────────────── */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px; height: 58px;
  background: var(--brand-900); color: #fff;
}
.topbar .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; letter-spacing: .02em; color: #fff; }
.topbar .brand img { display: block; width: 30px; height: 30px; border-radius: 8px; }
.topbar .brand:hover { text-decoration: none; }
.topbar .brand small { display: block; font-weight: 500; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #93a8cf; }
.topnav { display: flex; gap: 2px; margin-left: 10px; overflow-x: auto; scrollbar-width: none; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a {
  color: #c3d1ea; padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  font-weight: 500; font-size: 13px;
  display: inline-flex; align-items: center; gap: 7px;
}
.topnav a i { font-size: 13px; opacity: .85; }
.topnav .lbl-pendek { display: none; }
.topnav a:hover { background: rgba(255, 255, 255, .09); color: #fff; text-decoration: none; }
.topnav a.on { background: var(--brand-600); color: #fff; }
.topbar .spacer { flex: 1; }
.userchip { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 4px 6px 4px 4px; border-radius: 999px; }
.userchip:hover { background: rgba(255, 255, 255, .1); }
.userchip img, .avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--brand-600); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; }
.userchip .nm { font-size: 12.5px; line-height: 1.2; }
.userchip .rl { font-size: 11px; color: #93a8cf; }

.main { flex: 1; width: min(1280px, 100%); margin: 0 auto; padding: 22px 18px 60px; }
.page-head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { font-size: 22px; }
.page-head .sub { color: var(--ink-3); font-size: 13px; }
.page-head .spacer { flex: 1; }

.footer { text-align: center; color: var(--ink-3); font-size: 12px; padding: 18px; }

/* ── Kartu & grid ───────────────────────────────────────────────── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.card-head h2 { font-size: 15px; }
.card-head .spacer { flex: 1; }
.card-body { padding: 16px; }
.card-body.tight { padding: 0; }

.grid { display: grid; gap: 14px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 900px) { .grid.c3, .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/*  ⚠️ `1fr` berarti `minmax(auto, 1fr)`, dan `auto` di sini adalah UKURAN
    MIN-CONTENT isinya — jadi kolom menolak menyusut di bawah lebar tabel
    terlebar di dalamnya, dan seluruh halaman jadi bisa digeser ke samping
    di layar sempit. `minmax(0, 1fr)` melepas batas bawah itu. */
@media (max-width: 620px) {
  .grid.c2, .grid.c3 { grid-template-columns: minmax(0, 1fr); }
  /*  Kartu ringkasan tetap dua kolom di ponsel: isinya cuma satu angka
      dan satu baris keterangan, jadi menumpuknya satu per baris hanya
      membuat dashboard panjang tanpa menambah keterbacaan. */
  .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 15px; box-shadow: var(--shadow); }
.stat .atas { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.stat .ikon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 14px;
  background: var(--brand-100); color: var(--brand-600);
}
.stat.warn .ikon { background: var(--warn-bg); color: var(--warn); }
.stat.bad .ikon { background: var(--bad-bg); color: var(--bad); }
.stat.ok .ikon { background: var(--ok-bg); color: var(--ok); }
.stat .lbl { flex: 1; min-width: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; line-height: 1.25; }
.stat .val { font-family: var(--font-head); font-size: 27px; font-weight: 800; line-height: 1.05; }
.stat .hint { font-size: 12px; color: var(--ink-3); margin-top: 3px; }

/* ── Baris progres proyek ───────────────────────────────────────── */
.prog-row { padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.prog-row:first-child { padding-top: 0; }
.prog-row:last-child { border-bottom: 0; padding-bottom: 0; }
.prog-row .atas { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.prog-row .nm { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Daftar dokumentasi terbaru ─────────────────────────────────── */
/*  Dulu berupa tabel: di layar sempit kolom tanggal, judul, status, dan
    dua tombol aksi berdesakan sampai tombolnya saling menempel. Bentuk
    daftar memberi tiap bagian ruangnya sendiri di lebar berapa pun. */
.doc-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); }
.doc-row:last-child { border-bottom: 0; }
.doc-row:hover { background: var(--brand-050); }
.doc-main { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; color: inherit; }
.doc-main:hover { text-decoration: none; color: inherit; }
.doc-tgl {
  width: 46px; flex-shrink: 0; text-align: center; padding: 5px 0;
  background: var(--brand-050); border: 1px solid var(--line); border-radius: 10px;
}
.doc-tgl .d { display: block; font-family: var(--font-head); font-weight: 800; font-size: 17px; line-height: 1; color: var(--brand-800); }
.doc-tgl .m { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.doc-isi { min-width: 0; flex: 1; }
.doc-isi .jd { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-isi .kt { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Kartu proyek ───────────────────────────────────────────────── */
.proj { display: flex; flex-direction: column; overflow: hidden; }
.proj .cover { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--brand-700), var(--brand-500)); display: grid; place-items: center; color: #ffffff5c; font-size: 34px; overflow: hidden; }
.proj .cover img { width: 100%; height: 100%; object-fit: cover; }
.proj .body { padding: 14px 15px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.proj h3 { font-size: 15px; }
.proj .meta { font-size: 12px; color: var(--ink-3); }

/* ── Bar progres ────────────────────────────────────────────────── */
.bar { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-600), var(--brand-500)); }
.bar.ok i { background: linear-gradient(90deg, #16a34a, #22c55e); }
.bar.warn i { background: linear-gradient(90deg, var(--accent-600), var(--accent)); }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-row .bar { flex: 1; }
.bar-row .pct { font-family: var(--font-head); font-weight: 700; font-size: 13px; min-width: 48px; text-align: right; }
.belum-terukur { color: var(--ink-3); font-style: italic; font-size: 12.5px; }

/* ── Tabel ──────────────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th, table.tbl td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.tbl th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; background: #fafbfe; white-space: nowrap; }
table.tbl tbody tr:hover { background: var(--brand-050); }
table.tbl td.num, table.tbl th.num { text-align: right; }
table.tbl .aksi { text-align: right; white-space: nowrap; }

.empty { padding: 40px 20px; text-align: center; color: var(--ink-3); }
.empty i { font-size: 30px; opacity: .35; display: block; margin-bottom: 10px; }
.empty h3 { font-size: 15px; color: var(--ink-2); margin-bottom: 4px; }

/* ── Tombol ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: #fff; color: var(--ink); font: inherit; font-weight: 600; font-size: 13px;
  cursor: pointer; transition: .12s ease; white-space: nowrap;
}
.btn:hover { border-color: var(--brand-500); color: var(--brand-700); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.btn.primary:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.btn.accent { background: var(--accent-600); border-color: var(--accent-600); color: #fff; }
.btn.accent:hover { background: #b45309; color: #fff; }
.btn.danger { color: var(--bad); border-color: #f2c9c9; }
.btn.danger:hover { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--line-2); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn.icon { padding: 7px 9px; }
.btn-group { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Badge & chip ───────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--line-2); color: var(--ink-2); }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.info { background: var(--info-bg); color: var(--info); }
.badge.draft { background: #ede9fe; color: #6d28d9; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Deret filter yang tetap satu baris dan bisa digeser — membungkus jadi
   dua baris di ponsel membuat daftar di bawahnya terdorong turun. */
.chips.gulir { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chips.gulir::-webkit-scrollbar { display: none; }
.chips.gulir .chip { flex-shrink: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 12px; cursor: pointer; }
.chip.on { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

/* ── Formulir ───────────────────────────────────────────────────── */
.field { margin-bottom: 13px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.field .hint { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
input[type=text], input[type=number], input[type=date], input[type=search], input[type=email], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; font-size: 13.5px; color: var(--ink); background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-100); border-color: var(--brand-500); }
textarea { min-height: 80px; resize: vertical; }
.row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 620px) { .row, .row.c3 { grid-template-columns: minmax(0, 1fr); } }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; }
.check input { margin-top: 3px; }

/* ── Modal ──────────────────────────────────────────────────────── */
.modal-bg { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px); z-index: 60; display: grid; place-items: center; padding: 18px; }
.modal { width: min(640px, 100%); max-height: 88vh; overflow: auto; background: var(--card); border-radius: 16px; box-shadow: var(--shadow-lg); }
.modal.wide { width: min(900px, 100%); }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line-2); position: sticky; top: 0; background: var(--card); z-index: 2; }
.modal-head h2 { font-size: 16px; flex: 1; }
.modal-body { padding: 18px; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--line-2); position: sticky; bottom: 0; background: var(--card); }

/* ── Toast ──────────────────────────────────────────────────────── */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--ink); color: #fff; padding: 11px 15px; border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 13px; max-width: 380px; animation: pop .18s ease; }
.toast.ok { background: #14532d; }
.toast.err { background: #7f1d1d; }
@keyframes pop { from { transform: translateY(8px); opacity: 0; } }

/* ── Tab ────────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
/* Batang guliran bawaan mengganggu di bawah bilah tab; tab aktif sudah
   digeser sendiri ke dalam pandangan oleh views.js. */
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 9px 14px; font-weight: 600; font-size: 13px; color: var(--ink-3); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--brand-700); text-decoration: none; }
.tabs a.on { color: var(--brand-700); border-bottom-color: var(--brand-600); }

/* ── Pohon struktur ─────────────────────────────────────────────── */
.tree { font-size: 13.5px; }
.tree .node { padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; display: flex; align-items: center; gap: 10px; }
.tree .node > .isi { flex: 1; min-width: 0; }
.tree .node .nm { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree .node .ct { display: block; font-size: 11.5px; color: var(--ink-3); }
.tree .node .aksi { display: flex; gap: 4px; flex-shrink: 0; }
.tree .lvl-b { margin-bottom: 10px; }
.tree .lvl-f { margin: 8px 0 8px 20px; }
.tree .lvl-a { margin: 6px 0 6px 40px; background: #fbfcfe; }

/* ── Daftar baris (dokumentasi, pekerjaan, temuan) ──────────────── */
/*  Ketiganya dulu berupa tabel. Di layar ponsel tabelnya butuh 500–680 px
    di dalam kotak selebar 367 px, jadi isinya tergencet dan harus digulir
    ke samping. Bentuk daftar membiarkan tiap bagian melipat ke barisnya
    sendiri saat ruang menyempit, tanpa perlu markup terpisah per ukuran. */
.lst-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.lst-row:last-child { border-bottom: 0; }
.lst-row:hover { background: var(--brand-050); }
.lst-utama { flex: 1 1 220px; min-width: 0; }
.lst-utama .jd { font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.lst-utama .kt { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.lst-meta { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.lst-meta .bar-row { min-width: 148px; }
.lst-aksi { display: flex; gap: 6px; flex-shrink: 0; }

@media (max-width: 720px) {
  .lst-row { flex-wrap: wrap; row-gap: 9px; padding: 11px 12px; }
  .lst-utama { flex-basis: 100%; }
  .lst-meta { flex: 1 1 auto; }
  .lst-meta .bar-row { min-width: 120px; }
  .lst-aksi { margin-left: auto; }
}

/* ── Bilah paginasi ─────────────────────────────────────────────── */
.paginasi { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--line-2); }
.paginasi .ket { font-size: 12px; color: var(--ink-3); }
.paginasi .btn { padding: 5px 9px; }
@media (max-width: 720px) {
  .paginasi { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; }
  .paginasi .ket:first-child { flex-basis: 100%; }
  .paginasi .spacer { display: none; }
}

/* ── Kisi panorama ──────────────────────────────────────────────── */
.pano-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.pano-card { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #fff; cursor: pointer; transition: .12s; }
.pano-card:hover { border-color: var(--brand-500); box-shadow: var(--shadow); transform: translateY(-1px); }
.pano-card .th { aspect-ratio: 2/1; background: #dde4ef center/cover no-repeat; display: grid; place-items: center; color: var(--ink-3); }
.pano-card { position: relative; }
.pano-aksi { position: absolute; top: 6px; right: 6px; display: flex; gap: 5px; z-index: 2; }
.pano-aksi .btn {
  background: rgba(255, 255, 255, .93); border-color: rgba(19, 26, 42, .12);
  padding: 6px 9px; backdrop-filter: blur(4px);
}
.pano-aksi .btn:hover { background: #fff; }
.pano-card .in { padding: 9px 11px; }
.pano-card .kd { font-family: var(--font-head); font-weight: 700; font-size: 12px; color: var(--brand-700); }
.pano-card .nm { font-size: 13px; }
.pano-card .mt { font-size: 11.5px; color: var(--ink-3); display: flex; gap: 9px; margin-top: 3px; }
.pano-card.tanpa-posisi { border-style: dashed; border-color: var(--accent); }

/* ── Denah: gambar mini & pratinjau ─────────────────────────────── */
.denah-mini {
  padding: 0; border: 1px solid var(--line); border-radius: 6px; background: #fff;
  width: 46px; height: 34px; overflow: hidden; cursor: pointer; flex-shrink: 0;
}
.denah-mini:hover { border-color: var(--brand-500); }
.denah-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Editor denah ───────────────────────────────────────────────── */
.denah-edit { position: relative; display: inline-block; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #fff; }
.denah-edit img { display: block; max-width: 100%; }
.denah-edit .dot { box-shadow: 0 1px 5px rgba(19, 26, 42, .45); }
.denah-edit.pilih { cursor: crosshair; }
.dot {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: var(--brand-600); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  cursor: pointer; display: grid; place-items: center; color: #fff; font-size: 9px; font-weight: 700;
}
.dot.on { background: var(--accent-600); width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 3; }
.dot .cone {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none;
  border-left: 13px solid transparent; border-right: 13px solid transparent;
  border-bottom: 30px solid rgba(47, 82, 160, .32);
  transform-origin: 50% 100%;
}
.dot.on .cone { border-bottom-color: rgba(217, 119, 6, .45); }

/* ── Viewer 360 ─────────────────────────────────────────────────── */
.tur { position: fixed; inset: 0; background: #0b1020; z-index: 40; display: flex; flex-direction: column; }
.tur-canvas { position: absolute; inset: 0; }
.pnlm-container { background: #0b1020 !important; }
.tur-bar {
  position: relative; z-index: 5; display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; color: #fff;
  background: linear-gradient(180deg, rgba(11, 16, 32, .92), rgba(11, 16, 32, 0));
  pointer-events: none;
}
.tur-bar > * { pointer-events: auto; }
.tur-bar .spacer { flex: 1; }
.tur-bar .judul { min-width: 0; flex: 1 1 auto; }
.tur-bar .tt { font-family: var(--font-head); font-weight: 700; font-size: 15px; line-height: 1.2; }
.tur-bar .st { font-size: 11.5px; color: #9fb0d0; }
/*  Tanpa pemotongan ini, nama proyek yang panjang mendorong tombol keluar
    layar — di ponsel judulnya justru menindih tombol Editor. */
.tur-bar .tt, .tur-bar .st { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tur-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .16);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; backdrop-filter: blur(6px);
}
.tur-btn:hover { background: rgba(255, 255, 255, .22); text-decoration: none; color: #fff; }
.tur-btn.on { background: var(--accent-600); border-color: var(--accent-600); }
.tur-btn.sm { padding: 5px 10px; font-size: 11.5px; }

.tur-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: flex-end; gap: 12px; padding: 14px;
  pointer-events: none;
}
.tur-foot > * { pointer-events: auto; }

.minimap {
  width: min(340px, 44vw); background: rgba(12, 18, 36, .82); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px; overflow: hidden; backdrop-filter: blur(8px);
}
.minimap .mm-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; color: #cbd6ea; font-size: 11.5px; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .1); cursor: pointer; user-select: none; }
.minimap .mm-head:hover { color: #fff; }
.minimap.kecil .mm-head { border-bottom: none; }
.minimap .mm-head .spacer { flex: 1; }
.minimap .mm-head .jdl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minimap .mm-body { display: flex; justify-content: center; }
/*  Titik panorama diposisikan dengan persen terhadap .mm-peta, jadi kotak
    ini HARUS persis sebesar gambar denah yang tampil. Karena itu gambar
    dibatasi tingginya (bukan lebarnya) dan .mm-peta menyusut mengikutinya —
    kalau pembatas dipasang di .mm-body, gambar jadi lebih kecil daripada
    kotak acuannya dan semua titik melenceng. */
.minimap .mm-peta { position: relative; display: inline-block; line-height: 0; }
.minimap img { display: block; max-width: 100%; max-height: 38vh; width: auto; height: auto; }
.minimap .kosong { padding: 22px 12px; text-align: center; color: #8b9bbb; font-size: 12px; }
.minimap.kecil .mm-body { display: none; }

.timeline {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 999px;
  background: rgba(12, 18, 36, .82); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(8px);
  overflow-x: auto; max-width: min(520px, 90vw);
}
.timeline .tl { padding: 5px 11px; border-radius: 999px; color: #cbd6ea; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer; border: 1px solid transparent; background: none; font-family: inherit; }
.timeline .tl:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.timeline .tl.on { background: #fff; color: var(--brand-900); }

/* Panel samping viewer (daftar temuan / editor) */
.tur-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(390px, 92vw); z-index: 8;
  background: rgba(12, 18, 36, .95); border-left: 1px solid rgba(255, 255, 255, .12);
  color: #e6ecf8; display: flex; flex-direction: column; backdrop-filter: blur(10px);
}
.tur-panel .ph { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.tur-panel .ph h3 { font-size: 14px; flex: 1; }
.tur-panel .pb { flex: 1; overflow: auto; padding: 14px 15px; }
.tur-panel .pf { padding: 12px 15px; border-top: 1px solid rgba(255, 255, 255, .1); }
.tur-panel label { color: #a9b8d6; }
.tur-panel input, .tur-panel select, .tur-panel textarea { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); color: #fff; }
.tur-panel .item { padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; margin-bottom: 9px; cursor: pointer; }
.tur-panel .item:hover { background: rgba(255, 255, 255, .07); }
.tur-panel .item .jd { font-weight: 600; font-size: 13px; }
.tur-panel .item .kt { font-size: 12px; color: #a9b8d6; }

/* Penanda di dalam panorama */
.hs-arrow {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: var(--brand-800); font-size: 17px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .45); cursor: pointer; transition: transform .12s;
}
.hs-arrow:hover { transform: scale(1.12); background: #fff; }
.hs-label { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); white-space: nowrap;
  background: rgba(12, 18, 36, .85); color: #fff; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.hs-pin {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-600); color: #fff; font-size: 13px; border: 2px solid #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .45); cursor: pointer;
}
.hs-pin.issue-terbuka { background: var(--bad); }
.hs-pin.issue-proses { background: var(--accent-600); }
.hs-pin.issue-selesai { background: var(--ok); }
.hs-pin.info { background: var(--brand-600); }

.tur-load { position: absolute; inset: 0; display: grid; place-items: center; color: #9fb0d0; z-index: 6; pointer-events: none; }

@media (max-width: 720px) {
  /*  Di ponsel denah dulu dibuat selebar layar tanpa batas tinggi; denah
      yang rasionya mendekati persegi lalu memakan hampir seluruh layar dan
      menutupi panoramanya. Sekarang lebarnya mengikuti isi, tingginya
      dipatok, dan panorama tetap jadi bagian terbesar. */
  .tur-foot { flex-direction: column-reverse; align-items: center; gap: 8px; padding: 10px; }
  /* Pendorong antar-panel hanya masuk akal saat bilah bawah menyamping. */
  .tur-foot .spacer { display: none; }
  .minimap { width: auto; max-width: 100%; }
  .minimap img { max-height: 30vh; }
  .tur-bar { gap: 8px; padding: 8px 10px; }
  .timeline { max-width: 100%; }
  /*  Bilah atas ponsel dibuat sesederhana mungkin: satu baris berisi nama
      aplikasi dan avatar. Menu turun ke bawah layar — pola yang sudah
      dikenal di ponsel, dan satu-satunya cara empat butir menu muat tanpa
      mendorong nama pengguna keluar layar. */
  .topbar { padding: 0 12px; gap: 10px; height: 52px; }
  .topbar .brand { font-size: 15px; white-space: nowrap; flex-shrink: 0; }
  .topbar .brand small { display: none; }
  .userchip { padding: 2px; }
  .userchip .nm, .userchip .rl { display: none; }

  .topnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
    margin: 0; display: flex; overflow: visible;
    background: var(--brand-900); border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .topnav a {
    flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px;
    padding: 6px 2px; border-radius: 10px; font-size: 10.5px;
  }
  .topnav a i { font-size: 17px; opacity: 1; }
  .topnav a.on { background: transparent; color: #fff; }
  .topnav a.on i { color: var(--accent); }
  .topnav .lbl-panjang { display: none; }
  .topnav .lbl-pendek { display: inline; }

  .stat { padding: 11px 12px; }
  .stat .atas { gap: 7px; margin-bottom: 5px; }
  .stat .ikon { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
  .stat .lbl { font-size: 9.5px; letter-spacing: .04em; }
  .stat .val { font-size: 22px; }
  .stat .hint { font-size: 11px; }
  /*  Di layar sempit tombol aksi turun ke barisnya sendiri. Sebelumnya
      nama lantai, jumlah ruangan, gambar denah, dan empat tombol berebut
      satu baris — namanya pecah jadi tiga baris dan tombol terakhir
      terdorong keluar layar. */
  .tree .node { flex-wrap: wrap; row-gap: 8px; }
  .tree .node .aksi { flex-basis: 100%; justify-content: flex-end; border-top: 1px solid var(--line-2); padding-top: 8px; }
  .tree .lvl-f { margin-left: 12px; }
  .tree .lvl-a { margin-left: 24px; }
  /*  Baris ruangan hanya punya dua tombol ikon; menurunkannya ke baris
      sendiri membuat daftar ruangan dua kali lebih panjang tanpa guna. */
  .tree .lvl-a .node { flex-wrap: nowrap; }
  .tree .lvl-a .node .aksi { flex-basis: auto; border-top: 0; padding-top: 0; }

  .doc-row { padding: 9px 12px; gap: 8px; }
  .doc-tgl { width: 42px; }

  /* Kepala halaman ikut dirampingkan; tombol aksi memenuhi lebar agar
     tidak menggantung setengah baris. */
  .page-head { gap: 10px; margin-bottom: 14px; }
  .page-head h1 { font-size: 19px; }
  /*  Dulu SEMUA tombol dipaksa melar sama rata (`flex: 1 1 auto`), sehingga
      tombol berikon saja — hapus, ubah — jadi selebar tombol bertulisan dan
      barisnya terlihat acak. Sekarang hanya aksi utama yang melar; sisanya
      selebar isinya sendiri dan membungkus dengan rapi. */
  .page-head .btn-group { width: 100%; }
  .page-head .btn-group .btn { flex: 0 1 auto; justify-content: center; }
  .page-head .btn-group .btn.primary, .page-head .btn-group .btn.accent { flex: 1 1 auto; }

  /*  Keterangan di kepala kartu turun ke barisnya sendiri; berdesakan di
      samping judul membuat keduanya terbaca seperti saling menabrak. */
  .card-head { flex-wrap: wrap; }
  .card-head .spacer { display: none; }
  .card-head > .small { flex-basis: 100%; margin-top: 2px; }

  /* Ruang agar isi terakhir tidak tertutup bilah menu bawah. */
  .app { padding-bottom: 66px; }
  .main { padding: 16px 12px 24px; }
  .footer { padding: 12px; }
}

/* Utilitas */
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.nowrap { white-space: nowrap; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mb8 { margin-bottom: 8px; } .mb16 { margin-bottom: 16px; }
.flex { display: flex; align-items: center; gap: 10px; }
.flex.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.hide { display: none !important; }

/* ── Keuangan & jadwal (v1.0.25) ────────────────────────────────── */
.bar.bad i { background: linear-gradient(90deg, #b91c1c, #ef4444); }
button.chip { font: inherit; font-size: 12px; color: inherit; }
button.chip.on { color: #fff; }
/*  Kepala kelompok di dalam daftar (kategori RAB, jumlah transaksi). */
.grp-head { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: #fafbfe;
  border-bottom: 1px solid var(--line-2); font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-2); }
.grp-head .spacer { flex: 1; }
details.card > summary { cursor: pointer; list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary h2::after { content: ' ▸'; color: var(--ink-3); }
details.card[open] > summary h2::after { content: ' ▾'; }

/*  Legenda: warna dibawa kotak kecil di samping teks, teks tetap tinta biasa. */
.legenda { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }
.legenda span, .ks-tip div { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }

/*  Kurva S — satu sumbu, garis 2px, grid tipis, titik berbingkai putih. */
.kurva-s { position: relative; }
.kurva-s svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.ks-grid { stroke: var(--line-2); stroke-width: 1; }
.ks-ax { fill: var(--ink-3); font-size: 11px; font-family: var(--font); }
.ks-kini { stroke: var(--ink-3); stroke-width: 1; }
.ks-rencana { fill: none; stroke: var(--brand-600); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ks-real { fill: none; stroke: var(--accent-600); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ks-titik, .ks-bidik-a { fill: var(--accent-600); stroke: #fff; stroke-width: 2; }
.ks-bidik-r { fill: var(--brand-600); stroke: #fff; stroke-width: 2; }
.ks-bidik { stroke: var(--ink-3); stroke-width: 1; }
.ks-tip { position: absolute; top: 8px; pointer-events: none; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 8px 10px; font-size: 12px; min-width: 150px; }
.ks-tip div { display: flex; }
.ks-tip b { margin-left: auto; padding-left: 10px; font-family: var(--font-head); }

/*  Gantt: kolom nama tetap, lini waktu memakai posisi persen. Di layar
    sempit seluruh bagan menggulir mendatar di dalam kotaknya sendiri,
    bukan membuat halaman meluber. */
.gantt-wrap { overflow-x: auto; }
.gantt { min-width: 640px; }
.g-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 56px; align-items: center;
  border-bottom: 1px solid var(--line-2); min-height: 46px; }
.g-row:last-child { border-bottom: 0; }
.g-head { min-height: 32px; background: #fafbfe; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.g-nama { padding: 6px 12px; min-width: 0; }
.g-nama .jd { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-nama .kt { font-size: 11.5px; color: var(--ink-3); }
.g-waktu { position: relative; align-self: stretch; min-height: 32px; }
.g-bln { position: absolute; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.g-grid { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line-2); }
.g-kini { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--bad); z-index: 1; }
.g-bar { position: absolute; top: 50%; transform: translateY(-50%); height: 14px; border-radius: 4px;
  background: var(--brand-100); overflow: hidden; outline-offset: 2px; }
.g-bar i { display: block; height: 100%; background: var(--brand-600); }
.g-bar.beres i { background: var(--ok); }
.g-bar.telat { background: var(--bad-bg); }
.g-bar.telat i { background: var(--bad); }
.g-pct { font-family: var(--font-head); font-weight: 700; font-size: 12px; text-align: right; padding-right: 12px; }