/* public/assets/app.css — pelengkap Tabler, bukan pengganti */

/* ── Palet dan proporsi mockup v0.4 ──────────────────────
   Menimpa variabel Tabler, bukan menggantikan berkasnya. Nilainya disalin
   dari docs/referensi/mockup-v0.4.html. */
:root,
[data-bs-theme='light'] {
  --tblr-font-sans-serif: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --tblr-body-line-height: 1.5;
  --tblr-font-size-h1: 1.25rem;   /* 20px */
  --tblr-font-size-h2: 1rem;
  --tblr-font-size-h3: .875rem;

  --tblr-body-bg: #f4f6f8;
  --tblr-bg-surface: #ffffff;
  --tblr-bg-surface-primary: #ffffff;
  --tblr-bg-surface-secondary: #fafbfc;
  --tblr-bg-surface-tertiary: #fafbfc;

  --tblr-body-color: #1c2733;
  --tblr-body-color-rgb: 28, 39, 51;
  --tblr-emphasis-color: #1c2733;
  --tblr-emphasis-color-rgb: 28, 39, 51;
  --tblr-secondary-color: #55616e;
  --tblr-secondary: #7c8894;
  --tblr-secondary-rgb: 124, 136, 148;
  --tblr-muted: #7c8894;
  --tblr-muted-rgb: 124, 136, 148;

  --tblr-border-color: #e1e6eb;
  --tblr-border-color-translucent: #e1e6eb;
  --tblr-border-color-active: #cfd6dd;
  --tblr-border-radius: 4px;
  --tblr-border-radius-sm: 3px;
  --tblr-border-radius-lg: 4px;

  --tblr-blue: #2a78d6;      --tblr-blue-rgb: 42, 120, 214;
  --tblr-primary: #2a78d6;   --tblr-primary-rgb: 42, 120, 214;
  --tblr-link-color: #1a5cab;--tblr-link-color-rgb: 26, 92, 171;
  --tblr-orange: #eb6834;    --tblr-orange-rgb: 235, 104, 52;
  --tblr-green: #0ca30c;     --tblr-green-rgb: 12, 163, 12;
  --tblr-success: #0ca30c;   --tblr-success-rgb: 12, 163, 12;
  --tblr-yellow: #fab219;    --tblr-yellow-rgb: 250, 178, 25;
  --tblr-warning: #fab219;   --tblr-warning-rgb: 250, 178, 25;
  --tblr-red: #d03b3b;       --tblr-red-rgb: 208, 59, 59;
  --tblr-danger: #d03b3b;    --tblr-danger-rgb: 208, 59, 59;

  /* Kartu mockup rata tanpa bayangan, kepala kartu seputih badannya */
  --tblr-card-box-shadow: none;
  --tblr-card-cap-bg: transparent;
  --tblr-card-cap-padding-x: 18px;
  --tblr-card-cap-padding-y: 13px;
  --tblr-card-spacer-x: 18px;
  --tblr-card-spacer-y: 18px;
}

/* Warna deret grafik, mengikuti palet mockup.
   Lolos uji keterbacaan buta warna — pasangan terlemah ΔE 21,9 (deuteranopia)
   dan 24,5 (protanopia). Jangan diganti tanpa uji ulang. */
:root {
  --seri-keuangan: var(--tblr-blue);      /* #2a78d6 */
  --seri-fisik:    var(--tblr-orange);    /* #eb6834 */
  --seri-rencana:  #8c99a6;

  /* Tujuh tahap status, terang → gelap mengikuti alur kerja */
}

/* Angka dashboard berjajar rapi antar baris */
body { font-variant-numeric: tabular-nums; }

/* ── Sidebar ─────────────────────────────────────────── */
.navbar-brand a {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tblr-body-color);
  line-height: 1.35;
  text-decoration: none;
}

/* Menu mengisi tinggi sidebar supaya Keluar bisa turun ke dasar. */
.navbar-vertical .navbar-collapse { align-items: stretch; }
.navbar-vertical .navbar-nav { flex-grow: 1; }

/* Keluar ikut bentuk nav-link biasa, didorong ke dasar sidebar */
.nav-pisah {
  margin-top: auto;
  padding-top: .5rem;
  border-top: 1px solid var(--tblr-border-color);
}
.nav-keluar {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  font: inherit;
}

/* Toast tengah-atas untuk fitur yang belum jadi */
.toast-melayang {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  margin: 0;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

/* ── Kepala halaman ──────────────────────────────────── */
.page-title { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.page-subtitle { font-size: 12.5px; color: var(--tblr-secondary); margin: 3px 0 0; }

/* Label huruf kecil-kapital, dipakai di KPI, penyaring, dan sudut kartu */
.label-kecil,
.card-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tblr-secondary);
}

/* flex-wrap supaya legenda turun ke barisnya sendiri saat kartu menyempit */
.card-header { min-height: 0; flex-wrap: wrap; gap: 8px 16px; }
.card-title { font-size: 14px; font-weight: 600; }

/* ── Toolbar penyaring ───────────────────────────────── */
/* .card memakai flex-direction: column, bilah harus dikembalikan ke baris */
.bilah {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 18px;
}
.bilah .field { display: flex; align-items: center; gap: 7px; }
.bilah-akhir { margin-left: auto; font-size: 12.5px; color: var(--tblr-secondary); }
.bilah-akhir b { color: var(--tblr-body-color); font-weight: 600; }

/* ── KPI ─────────────────────────────────────────────── */
.kpi { padding: 15px 17px 17px; }
.kpi-val {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin: 9px 0 4px;
}
.kpi-val small {
  font-size: 13px;
  font-weight: 400;
  color: var(--tblr-secondary-color);
  letter-spacing: 0;
}
.kpi-sub { font-size: 12px; color: var(--tblr-secondary); }

/* Batang ukur setinggi 8px dipakai di KPI, rekap jenis belanja, dan meter bidang */
.progress-gauge {
  height: 8px;
  border-radius: 2px;
  background: #edf0f3;
  margin: 11px 0 7px;
}
.progress-gauge .progress-bar { border-radius: 2px 1px 1px 2px; }

/* Kurva ditengahkan pada badan kartunya: di halaman detail tingginya mengikuti
   grid KPI di sebelahnya, jadi hampir selalu ada ruang sisa di atas-bawah. */
.badan-kurva { display: flex; align-items: center; }
.badan-kurva .kurva-wrap { flex: 1; }

/* ── Sepasang panel setinggi sama ────────────────────── */
/* Kurva S dan panel sampingnya dikunci pada tinggi yang sama supaya barisnya rata.
   Isi panel menggulung bila lebih panjang, kurva ditengahkan bila lebih pendek. */
@media (min-width: 992px) {
  .panel-sejajar { height: 32rem; }
  .panel-sejajar > .card-body { min-height: 0; overflow-y: auto; }
  .panel-sejajar > .badan-kurva {
    display: flex;
    align-items: center;
    overflow: visible;   /* tooltip kurva tidak boleh terpotong */
  }
  .panel-sejajar > .badan-kurva .kurva-wrap { flex: 1; }
}

/* ── Legenda grafik ──────────────────────────────────── */
.legenda { display: flex; gap: 16px; flex-wrap: wrap; }
.legenda span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--tblr-secondary-color);
  font-weight: 400;
  white-space: nowrap;
}
.swatch { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.swatch.dash { height: 0; border-top: 2px dashed var(--seri-rencana); }

/* ── Corong status ───────────────────────────────────── */
.funnel .fn-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.funnel .fn-name { font-size: 12.5px; font-weight: 500; }
.funnel .fn-name em {
  font-style: normal;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--tblr-secondary);
}
.funnel .fn-val { font-size: 12.5px; font-weight: 600; white-space: nowrap; }

/* ── Meter per subdirektorat ─────────────────────────── */
.meters { padding-top: 32px; }
.meter-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.meter-name { font-size: 13px; font-weight: 500; }
.meter-name span {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--tblr-secondary);
  margin-top: 1px;
}
.meter-val { font-size: 13px; font-weight: 600; white-space: nowrap; }
.meter-val em {
  font-style: normal;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--tblr-secondary);
}

/* ── Tabel paket ─────────────────────────────────────── */
.tabel-paket { font-size: 12.5px; }
.tabel-paket .kolom-nama { min-width: 230px; }

/* Seluruh baris membuka kegiatannya, jadi kursornya ikut memberi tahu. */
.tabel-paket .baris-buka { cursor: pointer; }

/* ── Grid realisasi bulanan ──────────────────────────── */
.tabel-realisasi { font-size: 12.5px; }
.tabel-realisasi .kolom-akun { min-width: 230px; }

/* Dua belas kolom bulan harus muat berdampingan tanpa memaksa tabel menggulung
   pada layar biasa; angkanya rata kanan dengan lebar digit tetap. */
.tabel-realisasi .kotak-bulan {
  min-width: 86px;
  font-variant-numeric: tabular-nums;
}

/* Baris akun belanja cuma judul kelompok: tidak ada isian, jadi dibedakan
   latar dan garis atasnya supaya batas antar akun terbaca sekali lihat. */
.tabel-realisasi .baris-akun > td {
  background: var(--tblr-bg-surface-secondary);
  border-top: 2px solid var(--tblr-border-color-active);
}

/* Tiga tingkat, meniru penanda POK klien: akun (tebal, latar), rincian ›,
   detail –. Hanging indent menjaga baris lanjutan nama panjang tetap menjorok,
   jadi tingkatnya terbaca meski teksnya membungkus. */
.tabel-realisasi .sel-rincian { padding-left: 1.6rem;  text-indent: -0.85rem; }
.tabel-realisasi .sel-detail  { padding-left: 2.75rem; text-indent: -0.85rem; font-size: 12px; }
.tabel-realisasi .penanda {
  display: inline-block;
  width: 0.85rem;
  text-indent: 0;
  color: var(--tblr-secondary);
  font-weight: 600;
}

/* Tautan detail per baris: cukup ditebalkan sedikit supaya tertangkap saat
   memindai, tanpa jadi tombol — dia muncul di tiap baris rincian. */
.tabel-realisasi .aksi-detail {
  font-weight: 500;
  white-space: nowrap;
}

/* Kotak uraian rincian tumbuh mengikuti panjang teksnya; peramban yang belum
   mendukung field-sizing mendapat dua baris tetap dari atribut rows. */
.uraian-rincian {
  field-sizing: content;
  min-height: 2.5rem;
  resize: vertical;
}

/* Baris yang punya detail: angkanya dihitung, bukan diketik. Dibedakan supaya
   tidak terlihat seperti kotak isian yang kebetulan tidak bisa diklik. */
.tabel-realisasi .baris-induk > td { background: var(--tblr-bg-surface-tertiary, #f6f8fa); }
.tabel-realisasi .kotak-hitung {
  padding: .25rem .5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--tblr-secondary);
}

/* Kolom bulan berjalan disorot: di situlah isian bulan ini dikerjakan. */
.tabel-realisasi th.bulan-kini,
.tabel-realisasi td.bulan-kini { background: rgba(32, 107, 196, .07); }
.tabel-realisasi th.bulan-kini { color: var(--tblr-blue); }

/* ── Kurva S ─────────────────────────────────────────── */
.kurva-wrap { position: relative; }
.kurva-wrap svg { display: block; width: 100%; height: auto; }
.kurva-wrap .tick-label { font-size: 10.5px; fill: var(--tblr-secondary); }
.kurva-wrap .end-label  { font-size: 11px; font-weight: 600; }

.kurva-tip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%);
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  padding: .5rem .65rem;
  min-width: 10rem;
  box-shadow: var(--tblr-box-shadow-dropdown);
  transition: opacity .1s linear;
  z-index: 5;
}

/* ── Penanda posisi rencana pada progress bar ────────── */
.progress-rencana { position: relative; overflow: visible; }
.progress-rencana .penanda {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--tblr-secondary);
}

/* ── Garis rencana melintang di daftar meter ─────────── */
.meter-list { position: relative; }
.meter-list .garis-rencana {
  position: absolute;
  top: 0; bottom: 0;
  width: 0;
  border-left: 1px dashed var(--tblr-secondary);
  pointer-events: none;
}
.meter-list .label-rencana {
  position: absolute;
  top: -1.25rem;
  transform: translateX(-50%);
  font-size: .7rem;
  color: var(--tblr-secondary);
  white-space: nowrap;
  background: var(--tblr-bg-surface);
  padding: 0 .35rem;
}

/* ── Cetak ───────────────────────────────────────────── */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { background: #fff; }
  .navbar, .navbar-vertical, .page-header .btn, .card-footer, .pagination, .bilah { display: none !important; }
  .page-wrapper { margin: 0 !important; padding: 0 !important; }
  .card { border-color: #bbb !important; box-shadow: none !important; break-inside: avoid; }
  table { font-size: 9.5px; }
  thead { display: table-header-group; }
  tbody tr { break-inside: avoid; }
}