/* Konstruksi — lapisan aplikasi di atas ds.css (sistem desain "Modernist").
   ds.css memegang token & komponen dasar; berkas ini HANYA boleh memakai var(--…),
   tidak menulis hex/px mentah kecuali di blok :root di bawah (satu-satunya tempat
   nilai baru boleh lahir). Datar, tanpa sudut membulat, garis 2px, rata kiri. */

:root {
  /* ── Aksen disetel ulang ke oranye merek logo (#EC8F09).
     ds.css dikirim dengan aksen merah #ec3013; menukar hex begitu saja merusak
     keterbacaan karena oranye merek di atas ground terang hanya 2,2:1 — di bawah
     ambang 3:1 untuk elemen antarmuka. Maka: oranye dipakai sebagai BIDANG ISI,
     dan teks beraksen memakai langkah gelap (--color-accent-700, 5,9:1). */
  --color-accent:     #EC8F09;
  --color-accent-100: #FFF6E8;
  --color-accent-200: #FDE8C2;
  --color-accent-300: #F9D189;
  --color-accent-400: #F4B347;
  --color-accent-500: #EC8F09;
  --color-accent-600: #C87700;
  --color-accent-700: #8A4E00;
  --color-accent-800: #603600;
  --color-accent-900: #3D2400;
  --color-accent-2:   #848484;   /* abu-abu logo */

  /* ── Semantik keuangan. ds.css tidak menyertakannya; ditambah seminimal mungkin.
     Warna TIDAK PERNAH jadi satu-satunya penanda — angka bertanda selalu membawa
     +/− dan status selalu punya label teks. Laporan sering dicetak hitam-putih. */
  --pos: #1B7A3E;       /* laba, lunas, dalam anggaran   4,8:1 */
  --neg: #AE1800;       /* rugi, jatuh tempo, over budget 6,4:1 */
  --warn: #C87700;      /* mendekati jatuh tempo — bidang isi + teks tinta */
  --muted: color-mix(in srgb, var(--color-text) 55%, transparent);
  --line: var(--color-divider);
  --line-thin: color-mix(in srgb, var(--color-text) 18%, transparent);

  --sidebar-w: 236px;
  --isi-max: 1600px;
}

/* `hidden` harus benar-benar menyembunyikan. Aturan penulis seperti
   `.sheet-bg { display:flex }` mengalahkan aturan UA `[hidden]{display:none}`,
   jadi tanpa baris ini SETIAP lembar bawah tampil sekaligus saat halaman dimuat. */
[hidden] { display: none !important; }

/* Angka uang wajib rata kolom di mana pun */
body { -webkit-text-size-adjust: 100%; }
.num, td.num, th.num, .tile-val, .kv-val, .kartu-val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.num, td.num, th.num { text-align: right; }

/* ══════════════════════════════════════════════════════════════════════════
   Kerangka halaman
   ══════════════════════════════════════════════════════════════════════════ */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); flex: none;
  background: var(--color-neutral-900); color: var(--color-neutral-200);
  border-right: 2px solid var(--color-divider);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .brand {
  padding: var(--space-4);
  border-bottom: 2px solid color-mix(in srgb, var(--color-neutral-100) 22%, transparent);
}
.sidebar .brand img { width: 100%; max-width: 168px; }

/* Wordmark teks — pengganti logo saat identitas pemilik disembunyikan. Memakai
   huruf judul supaya bobotnya setara logo, bukan terlihat seperti gambar gagal muat. */
.wordmark {
  display: block; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--color-neutral-100); text-transform: uppercase;
}
.wordmark.gelap { color: var(--color-text); font-size: 15px; }
.wordmark.besar { font-size: 30px; }
.sidebar .brand a { text-decoration: none; }
/* .wordmark memakai display:block dan dideklarasikan setelah .topbar-logo, jadi
   aturan sembunyi/tampilnya harus dikualifikasi elemen agar tetap menang. */
span.topbar-logo { display: none; }
.sidebar nav { display: flex; flex-direction: column; padding: var(--space-2) 0; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--space-4); font-size: 14px; text-decoration: none;
  color: var(--color-neutral-300); border-left: 3px solid transparent;
}
.sidebar nav a svg { width: 17px; height: 17px; flex: none; }
.sidebar nav a:hover { background: color-mix(in srgb, var(--color-neutral-100) 8%, transparent); color: #fff; }
.sidebar nav a.on {
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  color: #fff; border-left-color: var(--color-accent);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
}
.sidebar .grup {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-neutral-100) 45%, transparent);
  padding: var(--space-4) var(--space-4) var(--space-1);
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-divider);
  background: var(--color-bg); position: sticky; top: 0; z-index: 30;
}
.topbar .spacer { flex: 1; }
.topbar .who { font-size: 13px; text-decoration: none; color: inherit; }
.topbar .who b { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.topbar .peran {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--color-accent-200); color: var(--color-accent-800); padding: 2px 7px;
}
.hamb, .topbar-logo { display: none; }

.content { padding: var(--space-6) var(--space-4) 96px; width: 100%; max-width: var(--isi-max); }

.page-head { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--muted); font-size: 13px; margin: 0; }
.page-head .aksi { margin-left: auto; display: flex; gap: var(--space-2); flex-wrap: wrap; }

.flash { padding: 10px var(--space-3); margin-bottom: var(--space-3); border-left: 4px solid var(--color-text); background: var(--color-surface); font-size: 14px; }
.flash.ok { border-left-color: var(--pos); }
.flash.err { border-left-color: var(--neg); }
.flash.warn { border-left-color: var(--warn); }

/* ══════════════════════════════════════════════════════════════════════════
   Kartu ringkasan (4 tile)
   ══════════════════════════════════════════════════════════════════════════ */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--color-divider); border: 2px solid var(--color-divider); margin-bottom: var(--space-4); }
.tile { background: var(--color-bg); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.tile:hover { background: var(--color-surface); }
.tile-lbl { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.tile-val { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 28px; line-height: 1.1; }
.tile-val.pos { color: var(--pos); } .tile-val.neg { color: var(--neg); }
.tile-note { font-size: 11px; color: var(--muted); }
.tiles-2 { grid-template-columns: repeat(3, 1fr); }

/* ══════════════════════════════════════════════════════════════════════════
   Kartu proyek
   ══════════════════════════════════════════════════════════════════════════ */
.grid-proyek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 1600px) { .grid-proyek { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.kartu { background: var(--color-surface); border: 2px solid var(--color-divider); display: flex; flex-direction: column; }

/* Header gelap: identitas proyek terbaca lebih dulu daripada angkanya, dan batas
   antar-kartu jadi tegas tanpa menambah garis.
   TINGGINYA DIPATOK — tiap baris punya tinggi tetap dan nama dipotong dua baris.
   Tanpa itu, kartu dengan nama panjang atau berlencana tumbuh lebih tinggi dan
   seluruh baris angka di kartu sebelahnya ikut turun. */
.kartu-head {
  padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1);
  background: var(--color-neutral-900); color: var(--color-neutral-100);
}
.kartu-kode { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-300); display: flex; align-items: center; gap: 6px; min-height: 14px; }
.kartu-kode .st { margin-left: auto; color: var(--color-neutral-400); }
.kartu h3 {
  font-size: 17px; margin: 0; line-height: 1.25;
  min-height: calc(2 * 1.25em);            /* selalu setinggi dua baris */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.kartu h3 a { color: var(--color-neutral-100); text-decoration: none; }
.kartu h3 a:hover { color: var(--color-accent-300); text-decoration: underline; }
/* height, bukan min-height: lencana lebih tinggi dari teks klien, dan dengan
   min-height ia tetap menambah 1–2px sehingga header antar-kartu tidak persis sama. */
.kartu-sub { display: flex; align-items: center; gap: var(--space-2); height: 22px; }
.kartu-klien { font-size: 12px; color: var(--color-neutral-400); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kartu-sub .lencana { flex: none; padding: 2px 7px; line-height: 1.4; }

/* Baris peringatan piutang selalu ada (boleh kosong) supaya blok Keuntungan di
   semua kartu mulai pada garis yang sama. */
/* height + line-height tetap: kotak kosong tidak punya line box, jadi dengan
   min-height saja ia 0,6px lebih pendek daripada yang berisi teks — cukup untuk
   membuat blok Keuntungan antar-kartu tidak persis sejajar. */
.kartu-warn { font-size: 12px; height: 18px; line-height: 18px; overflow: hidden; color: var(--neg); }

.kartu-kv { padding: var(--space-3); border-top: 2px solid var(--color-divider); display: flex; flex-direction: column; gap: 5px; }
/* Blok kedua (Keuntungan & Margin) menyerap sisa tinggi kartu. Isinya tetap rata
   atas, jadi angkanya tetap sejajar antar-kartu, sementara catatan dan baris tombol
   terdorong menempel di dasar setiap kartu — berapa pun panjang isinya. */
.kartu-kv + .kartu-kv { flex: 1; }
.kv { display: flex; align-items: baseline; gap: var(--space-2); font-size: 13px; }
.kv-lbl { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); flex: 1; }
.kv-val { font-weight: 600; }
.kv-val.big { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
.kv-val.pos { color: var(--pos); } .kv-val.neg { color: var(--neg); }
.bar { height: 4px; background: var(--color-neutral-300); margin-top: 2px; }
.bar > i { display: block; height: 100%; background: var(--color-accent); }

.kartu-note { padding: 8px var(--space-3); border-top: 1px solid var(--line-thin); font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: baseline; }
.kartu-note .txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kartu-note .dot { width: 7px; height: 7px; flex: none; background: var(--pos); }
.kartu-note .dot.perhatian { background: var(--warn); }
.kartu-note .dot.terlambat { background: var(--neg); }

.kartu-aksi { display: flex; border-top: 2px solid var(--color-divider); }
.kartu-aksi > * { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px 4px; font-size: 12px; font-family: var(--font-heading); font-weight: var(--font-heading-weight); background: transparent; border: 0; border-right: 1px solid var(--line-thin); cursor: pointer; color: inherit; text-decoration: none; }
.kartu-aksi > *:last-child { border-right: 0; flex: 0 0 46px; }
.kartu-aksi > *:hover { background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.kartu-aksi svg { width: 14px; height: 14px; }

/* ══════════════════════════════════════════════════════════════════════════
   Kontrol: sort, filter, date range
   ══════════════════════════════════════════════════════════════════════════ */
.bar-kontrol { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.seg-scroll { display: flex; overflow-x: auto; border: 1px solid var(--color-divider); }
.seg-scroll a { padding: 7px 12px; font-size: 13px; text-decoration: none; color: inherit; white-space: nowrap; border-right: 1px solid var(--color-divider); }
.seg-scroll a:last-child { border-right: 0; }
.seg-scroll a.on { background: var(--color-accent); color: var(--color-text); font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.seg-scroll a:not(.on):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

.daterange { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex-wrap: wrap; }
.daterange .input, .daterange select { min-height: 34px; }
.periode-tag { font-size: 11px; color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════════════
   Tabel — di HP berubah jadi daftar kartu, tidak pernah geser horizontal
   ══════════════════════════════════════════════════════════════════════════ */
.tabel-wrap { overflow-x: auto; border: 2px solid var(--color-divider); background: var(--color-bg); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th { text-align: left; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 10px var(--space-2); border-bottom: 2px solid var(--color-divider); white-space: nowrap; background: var(--color-surface); }
table.tbl td { padding: 9px var(--space-2); border-bottom: 1px solid var(--line-thin); vertical-align: top; }
table.tbl tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
table.tbl tfoot td { border-top: 2px solid var(--color-divider); font-family: var(--font-heading); font-weight: var(--font-heading-weight); background: var(--color-surface); }
table.tbl a { color: var(--color-accent-700); }

.pos { color: var(--pos); } .neg { color: var(--neg); }

.lencana { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; letter-spacing: 0.04em; padding: 3px 8px; text-transform: uppercase; }
.lencana.ok { background: color-mix(in srgb, var(--pos) 15%, transparent); color: var(--pos); }
.lencana.bahaya { background: color-mix(in srgb, var(--neg) 13%, transparent); color: var(--neg); }
.lencana.tunggu { background: var(--color-accent-200); color: var(--color-accent-800); }
.lencana.netral { background: var(--color-neutral-200); color: var(--color-neutral-800); }

/* ══════════════════════════════════════════════════════════════════════════
   Form
   ══════════════════════════════════════════════════════════════════════════ */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.form-grid .lebar { grid-column: 1 / -1; }
.field > label { display: block; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; color: var(--muted); }
.field .bantu { font-size: 11px; color: var(--muted); margin-top: 3px; }
select.input { appearance: auto; }
.input:disabled { opacity: .5; }
.wajib::after { content: " *"; color: var(--neg); }

/* Panel selisih hidup */
.selisih { border: 2px solid var(--color-divider); padding: var(--space-3); background: var(--color-bg); margin-top: var(--space-3); }
.selisih .rumus { font-size: 12px; color: var(--muted); }
.selisih .hasil { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; margin-top: 4px; }
.selisih.piutang { border-color: var(--warn); } .selisih.piutang .hasil { color: var(--warn); }
.selisih.hutang { border-color: var(--neg); } .selisih.hutang .hasil { color: var(--neg); }
.selisih.muka { border-color: var(--pos); } .selisih.muka .hasil { color: var(--pos); }
.selisih.lunas { border-color: var(--pos); } .selisih.lunas .hasil { color: var(--pos); }

.catatan-form { font-size: 12px; color: var(--muted); border-left: 3px solid var(--color-accent); padding-left: 10px; margin-top: var(--space-3); }

/* ══════════════════════════════════════════════════════════════════════════
   Dialog / lembar bawah
   ══════════════════════════════════════════════════════════════════════════ */
.sheet-bg { position: fixed; inset: 0; background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent); z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.sheet { background: var(--color-bg); border: 2px solid var(--color-text); width: min(620px, 100%); max-height: 92vh; display: flex; flex-direction: column; }
.sheet-head { padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-divider); display: flex; align-items: center; gap: var(--space-3); }
.sheet-head h2 { margin: 0; font-size: 20px; }
.sheet-head .tutup { margin-left: auto; background: none; border: 0; font-size: 22px; cursor: pointer; line-height: 1; }
.sheet-body { padding: var(--space-4); overflow-y: auto; }
.sheet-foot { padding: var(--space-3) var(--space-4); border-top: 2px solid var(--color-divider); display: flex; gap: var(--space-2); justify-content: flex-end; background: var(--color-surface); }

/* ══════════════════════════════════════════════════════════════════════════
   Lain-lain
   ══════════════════════════════════════════════════════════════════════════ */
.kosong { border: 2px dashed var(--color-divider); padding: var(--space-8) var(--space-4); text-align: left; }
.kosong h3 { margin: 0 0 var(--space-1); }
.kosong p { color: var(--muted); font-size: 14px; max-width: 52ch; }

.panel { border: 2px solid var(--color-divider); background: var(--color-bg); margin-bottom: var(--space-4); }
.panel > h2, .panel > .panel-head { margin: 0; padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-divider); font-size: 17px; font-family: var(--font-heading); font-weight: var(--font-heading-weight); display: flex; align-items: center; gap: var(--space-3); }
.panel-head .aksi { margin-left: auto; display: flex; gap: var(--space-2); }
.panel-isi { padding: var(--space-4); }
.panel-isi.rapat { padding: 0; }

.kolom-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.kolom-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }

.rasio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 2px; background: var(--color-divider); border: 2px solid var(--color-divider); }
.rasio { background: var(--color-bg); padding: var(--space-3); }
.rasio-nama { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rasio-val { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; font-variant-numeric: tabular-nums; }
.rasio-rumus { font-size: 11px; color: var(--muted); margin-top: 3px; }
.rasio-seg { font-size: 10px; background: var(--color-neutral-200); color: var(--color-neutral-800); padding: 1px 6px; }

.lini { list-style: none; padding: 0; margin: 0; }
.lini li { border-left: 2px solid var(--color-divider); padding: 0 0 var(--space-3) var(--space-4); position: relative; }
.lini li::before { content: ""; position: absolute; left: -5px; top: 5px; width: 8px; height: 8px; background: var(--color-accent); }
.lini .kapan { font-size: 11px; color: var(--muted); }

.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--color-divider); overflow-x: auto; margin-bottom: var(--space-4); }
.tabs a { padding: 9px var(--space-3); font-size: 13px; text-decoration: none; color: inherit; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs a.on { border-bottom-color: var(--color-accent); font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.chip-hak { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 4px 9px; border: 1px solid var(--color-divider); }

/* ══════════════════════════════════════════════════════════════════════════
   Input Transaksi
   ══════════════════════════════════════════════════════════════════════════ */
/* Aksi utama aplikasi. Isi oranye dengan teks TINTA (6,7:1) — bukan putih, yang
   hanya 2,5:1 di atas oranye merek.
   Ada dua penempatan: blok di puncak sidebar (dipakai di layar lebar) dan tombol di
   bilah atas (dipakai saat sidebar jadi laci tersembunyi). Sengaja tidak pernah
   tampil berdua sekaligus — dua tombol oranye identik di satu layar justru
   melemahkan hierarki yang mau ditegaskan. */
.btn-input {
  display: none;                       /* di layar lebar, sidebar yang memegangnya */
  background: var(--color-accent); color: var(--color-text);
  border: 2px solid var(--color-text); gap: 7px;
  min-height: 40px; padding: 0 var(--space-4);
  font-size: 13px; letter-spacing: 0.04em;
  box-shadow: var(--shadow-sm);
}
.btn-input:hover { background: var(--color-accent-600); }
.btn-input:active { background: var(--color-accent-700); color: var(--color-bg); }
.btn-input.on { background: var(--color-accent-600); }

/* Blok di sidebar: lebih tinggi, lebih tebal, dan berjarak dari menu di bawahnya. */
.sidebar nav a.side-input {
  margin: var(--space-3) var(--space-3) var(--space-4);
  padding: 13px var(--space-3);
  background: var(--color-accent); color: var(--color-text);
  border-left: 0; border: 2px solid var(--color-neutral-900);
  outline: 2px solid color-mix(in srgb, var(--color-neutral-100) 22%, transparent);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 13px; letter-spacing: 0.05em; gap: 9px;
  box-shadow: var(--shadow-md);
  position: relative;
}
/* Garis pemisah: menegaskan yang di atas adalah aksi, yang di bawah navigasi. */
.sidebar nav a.side-input::after {
  content: ""; position: absolute; left: calc(var(--space-3) * -1); right: calc(var(--space-3) * -1);
  bottom: calc(var(--space-4) * -1 + -2px); height: 2px;
  background: color-mix(in srgb, var(--color-neutral-100) 22%, transparent);
}
.sidebar nav a.side-input svg { width: 19px; height: 19px; opacity: 1; }
.sidebar nav a.side-input:hover { background: var(--color-accent-400); color: var(--color-text); }
.sidebar nav a.side-input.on { background: var(--color-accent-600); border-left: 0; }

.trx-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--space-4); align-items: start; }
.trx-samping .panel { position: sticky; top: 76px; margin-bottom: 0; }
.trx-form { margin-bottom: 0; }
.trx-kirim { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 2px solid var(--color-divider); flex-wrap: wrap; }

/* Kelompok pajak: sengaja dibungkus supaya jelas ini bagian opsional, bukan
   field wajib yang kebetulan boleh dikosongkan. */
.pjk-grup { border: 2px solid var(--color-divider); background: var(--color-surface); padding: var(--space-3); margin-top: var(--space-4); }
.pjk-judul { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-2); display: flex; gap: var(--space-2); align-items: baseline; }
.pjk-judul .kecil { text-transform: none; letter-spacing: 0; }
.pjk { border-top: 1px solid var(--line-thin); padding: var(--space-2) 0; }
.pjk:first-of-type { border-top: 0; }
.pjk-sakelar { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.pjk-sakelar input { width: 17px; height: 17px; accent-color: var(--color-accent); flex: none; }
.pjk-isi { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0 0 25px; }
.pjk-isi .input { max-width: 190px; }
.pjk-bantu { font-size: 11px; color: var(--muted); flex: 1; min-width: 0; }

/* Panel dampak: satu baris per akun yang tersentuh. */
.dampak { margin-top: var(--space-3); border-top: 2px solid var(--color-divider); }
.dampak-baris { display: flex; align-items: baseline; gap: var(--space-2); padding: 6px 0; border-bottom: 1px solid var(--line-thin); font-size: 12px; }
.dampak-akun { flex: 1; min-width: 0; }
.dampak-nilai { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.dampak-kosong { padding: var(--space-3) 0; }

@media (max-width: 1100px) {
  .trx-layout { grid-template-columns: 1fr; }
  .trx-samping .panel { position: static; }
}
@media (max-width: 860px) {
  /* Sidebar jadi laci tersembunyi, jadi aksi utama pindah ke bilah atas. */
  .btn-input { display: inline-flex; padding: 0 var(--space-3); min-height: 38px; }
  .btn-input span { font-size: 12px; }
  .pjk-isi { margin-left: 0; flex-wrap: wrap; }
  .pjk-isi .input { max-width: none; }
}
@media (max-width: 560px) {
  /* Di layar tersempit, label tombol utama dilepas tapi ikonnya tetap besar. */
  .btn-input span { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Tagihan — piutang & hutang dalam satu daftar
   ══════════════════════════════════════════════════════════════════════════ */
.tiles-4 { grid-template-columns: repeat(4, 1fr); }

/* Lencana jenis: hijau untuk uang yang masuk ke kita, merah untuk yang keluar.
   Diisi penuh (bukan tint) supaya hierarkinya terbaca duluan sebelum angkanya. */
.lencana.jenis-piutang { background: var(--pos); color: var(--color-neutral-100); font-weight: 600; }
.lencana.jenis-hutang { background: var(--neg); color: var(--color-neutral-100); font-weight: 600; }

/* Tombol jenis memakai warna yang sama dengan lencananya saat aktif, jadi mata
   langsung menghubungkan saringan dengan baris yang muncul. */
.seg-jenis a.j-piutang.on { background: var(--pos); color: var(--color-neutral-100); }
.seg-jenis a.j-hutang.on { background: var(--neg); color: var(--color-neutral-100); }

.tbl-tagihan td[data-l="No Invoice"] { white-space: nowrap; }
.tbl-tagihan td[data-l="No Invoice"] .lencana { margin-right: 6px; }
.tbl-tagihan td[data-l="Keterangan"] { max-width: 26ch; }
.tbl-tagihan tr.baris-lewat td { background: color-mix(in srgb, var(--neg) 6%, transparent); }
.tempo-hari { font-size: 11px; display: block; }
.warn { color: var(--warn); }

@media (max-width: 1400px) {
  /* Kolom keterangan yang paling dulu boleh menyempit; angka tidak boleh terpotong. */
  .tbl-tagihan td[data-l="Keterangan"] { max-width: 18ch; }
}
@media (max-width: 860px) {
  .tiles-4 { grid-template-columns: repeat(2, 1fr); }
  .tbl-tagihan td[data-l="No Invoice"],
  .tbl-tagihan td[data-l="Keterangan"] { white-space: normal; max-width: none; }
  .tempo-hari { display: inline; margin-left: 4px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Panduan
   ══════════════════════════════════════════════════════════════════════════ */
.btn-panduan { gap: 6px; min-height: 34px; }
.btn-panduan.on { background: var(--color-accent); border-color: var(--color-accent); }

.pandu-layout { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.pandu-toc { position: sticky; top: 76px; border: 2px solid var(--color-divider); background: var(--color-bg); }
.pandu-toc-judul { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: var(--space-3) var(--space-3) var(--space-2); }
.pandu-toc a { display: flex; align-items: center; gap: 8px; padding: 8px var(--space-3); font-size: 13px; text-decoration: none; color: inherit; border-left: 3px solid transparent; }
.pandu-toc a svg { flex: none; opacity: .6; }
.pandu-toc a:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); border-left-color: var(--color-accent); }

.pandu-sec { border: 2px solid var(--color-divider); background: var(--color-bg); padding: var(--space-4); margin-bottom: var(--space-4); scroll-margin-top: 84px; }
.pandu-sec > h2 { display: flex; align-items: center; gap: var(--space-2); font-size: 24px; margin: 0 0 var(--space-2); }
.pandu-sec > h2 svg { color: var(--color-accent-700); flex: none; }
.pandu-sec h3 { font-size: 16px; margin: var(--space-6) 0 var(--space-2); padding-top: var(--space-3); border-top: 2px solid var(--color-divider); }
.pandu-sec h3:first-of-type { margin-top: var(--space-4); }
.pandu-ringkas { color: var(--muted); font-size: 14px; max-width: 72ch; }
.pandu-isi p { max-width: 78ch; }

/* Rantai alur: kotak dan panah, tanpa gambar. Menggeser sendiri di layar sempit
   supaya tidak memaksa badan halaman ikut menggeser. */
.alur { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-3) 0 var(--space-4); }
.alur-kotak { border: 2px solid var(--color-text); background: var(--color-surface); padding: 8px var(--space-3); font-size: 13px; font-family: var(--font-heading); font-weight: var(--font-heading-weight); }
.alur-kotak.nada-kuning { border-color: var(--warn); color: var(--warn); }
.alur-kotak.nada-hijau { border-color: var(--pos); color: var(--pos); }
.alur-kotak.nada-merah { border-color: var(--neg); color: var(--neg); }
.alur-kotak.nada-abu { border-color: var(--color-neutral-500); color: var(--color-neutral-700); }
.alur-panah { color: var(--color-accent); font-size: 17px; line-height: 1; }

ol.langkah { counter-reset: l; list-style: none; padding: 0; margin: var(--space-3) 0; max-width: 78ch; }
ol.langkah > li { counter-increment: l; position: relative; padding: 0 0 var(--space-3) 38px; font-size: 14px; }
ol.langkah > li::before { content: counter(l); position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center; background: var(--color-accent); color: var(--color-text); font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 12px; }

ul.pandu-poin { padding-left: var(--space-4); margin: var(--space-3) 0; max-width: 78ch; }
ul.pandu-poin li { font-size: 14px; margin-bottom: var(--space-2); }

.pandu-info { border-left: 4px solid var(--color-accent); background: var(--color-accent-100); padding: var(--space-3); font-size: 13px; margin: var(--space-4) 0; max-width: 78ch; }

.pandu-banding { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--color-divider); border: 2px solid var(--color-divider); margin: var(--space-3) 0; }
.pandu-kol { background: var(--color-bg); padding: var(--space-3); }
.pandu-kol-judul { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; color: var(--color-accent-700); margin-bottom: var(--space-2); }
.pandu-kol p { font-size: 13px; margin-bottom: var(--space-2); }

@media (max-width: 1000px) {
  .pandu-layout { grid-template-columns: 1fr; }
  .pandu-toc { position: static; display: flex; flex-wrap: wrap; }
  .pandu-toc-judul { width: 100%; }
  .pandu-toc a { border-left: 0; border-bottom: 3px solid transparent; }
  .pandu-banding { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .btn-panduan span { display: none; }
  .btn-panduan { padding-inline: var(--space-2); }
}

.mono { font-family: ui-monospace, "Cascadia Mono", Menlo, monospace; font-size: 12px; }
.nowrap { white-space: nowrap; }
.muted { color: var(--muted); }
.kecil { font-size: 12px; }
.tengah { text-align: center; }

.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-kiri { background: var(--color-neutral-900); color: var(--color-neutral-200); padding: var(--space-8); display: flex; flex-direction: column; justify-content: space-between; }
.login-kiri img { max-width: 260px; }
.login-kiri h1 { color: #fff; font-size: 38px; }
.login-kiri p { color: var(--color-neutral-400); max-width: 40ch; }
.login-kanan { display: flex; align-items: center; padding: var(--space-8); }
.login-kanan form { width: min(360px, 100%); }

.bottom-nav { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   HP — tabel jadi kartu, navigasi jadi laci + bilah bawah
   ══════════════════════════════════════════════════════════════════════════ */
/* Ambang 1140px, bukan 1100px: lebar minimum satu kartu proyek ditentukan baris
   .kartu-aksi (tiga tombol berlabel + tombol menu). Pada 1101–1135px tiga kolom
   tidak muat dan halaman menggeser ke samping. minmax(0,1fr) mencegah kolom grid
   melebar mengikuti isinya. */
@media (max-width: 1140px) {
  .grid-proyek { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kolom-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  h1 { font-size: 30px; } h2 { font-size: 24px; } h3 { font-size: 20px; }

  /* Laci digeser dengan `left`, bukan `transform`. Pasangan
     translateX(-100%) / translateX(0) sempat gagal terpakai di perangkat uji
     meski aturannya cocok dan spesifisitasnya menang; `left` tidak punya
     seluk-beluk interpolasi dan hasilnya bisa dibaca langsung dari
     getBoundingClientRect saat diperiksa. Untuk panel selebar 236px,
     bedanya dengan transform tidak terasa. */
  .sidebar { position: fixed; z-index: 60; left: calc(var(--sidebar-w) * -1); top: 0;
             transition: left .18s ease-out; }
  body.nav-open .sidebar { left: 0; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); z-index: 55; }
  .hamb { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--color-divider); background: transparent; font-size: 17px; cursor: pointer; }
  .topbar-logo { display: block; height: 26px; }
  span.topbar-logo { display: block; height: auto; }
  .topbar .who b { display: none; }

  .content { padding: var(--space-4) var(--space-3) 84px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tiles-2 { grid-template-columns: repeat(2, 1fr); }
  .tile-val { font-size: 22px; }
  .grid-proyek { grid-template-columns: 1fr; }
  .kolom-2, .kolom-3 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .page-head .aksi { margin-left: 0; width: 100%; }
  .daterange { margin-left: 0; width: 100%; }

  /* Tabel bertanda .tbl--kartu berubah jadi daftar kartu berlabel. Label diambil
     dari atribut data-l pada tiap sel, ditulis sekali di template. */
  table.tbl--kartu, table.tbl--kartu tbody, table.tbl--kartu tr, table.tbl--kartu td { display: block; width: 100%; }
  table.tbl--kartu thead { display: none; }
  table.tbl--kartu tr { border: 2px solid var(--color-divider); margin-bottom: var(--space-2); background: var(--color-bg); padding: var(--space-1) 0; }
  table.tbl--kartu td { border: 0; border-bottom: 1px solid var(--line-thin); display: flex; gap: var(--space-3); padding: 7px var(--space-3); text-align: left !important; }
  table.tbl--kartu td:last-child { border-bottom: 0; }
  table.tbl--kartu td::before { content: attr(data-l); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); flex: 0 0 40%; padding-top: 2px; }
  table.tbl--kartu td.num { justify-content: space-between; }
  table.tbl--kartu td:empty { display: none; }
  .tabel-wrap:has(table.tbl--kartu) { border: 0; overflow: visible; }
  table.tbl--kartu tfoot { display: block; }
  table.tbl--kartu tfoot td { border: 0; }

  /* Lembar bawah menggantikan dialog tengah */
  .sheet-bg { align-items: flex-end; padding: 0; }
  .sheet { width: 100%; max-height: 94vh; border-width: 2px 0 0; }
  .sheet-foot { position: sticky; bottom: 0; }
  .sheet-foot .btn { flex: 1; justify-content: center; }

  .kartu-aksi > * { flex-direction: column; gap: 3px; font-size: 11px; padding: 9px 2px; min-height: 52px; }

  .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--color-neutral-900); border-top: 2px solid var(--color-accent); }
  .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; font-size: 10px; color: var(--color-neutral-300); text-decoration: none; min-height: 52px; justify-content: center; }
  .bottom-nav a.on { color: var(--color-accent); }
  .bottom-nav svg { width: 19px; height: 19px; }

  .login-wrap { grid-template-columns: 1fr; }
  .login-kiri { padding: var(--space-6) var(--space-4); }
  .login-kiri h1 { font-size: 28px; }
  .login-kanan { padding: var(--space-6) var(--space-4); }

  /* Sasaran sentuh minimal 44px. .chip-hak ikut: halaman izin peran berisi
     puluhan kotak centang yang mustahil ditekan kalau setinggi teks. */
  .btn, .seg-scroll a, .tabs a, .chip-hak { min-height: 40px; }
  .chip-hak { padding: var(--space-2) var(--space-3); }
  .input, select.input { min-height: 42px; font-size: 16px; }  /* 16px = iOS tidak auto-zoom */
}

@media print {
  .sidebar, .topbar, .bottom-nav, .kartu-aksi, .bar-kontrol, .page-head .aksi { display: none !important; }
  .content { padding: 0; max-width: none; }
  .panel, .tabel-wrap { border-color: #000; }
  body { background: #fff; }
}