/* ============================================================
   SPBN-NEW - Tema terang "Modern Light SaaS" (Opsi A)
   Berkas: public/assets/style.css
   Pembaruan desain: 22 Agustus 2026.
   Kontrak class & peubah CSS sama dengan tema gelap sebelumnya
   (--bg, --panel, --line, --txt, --mut, --acc, --acc2, --warn,
   --bad, --vio, --sisi, --lengkung, --sela) sehingga seluruh
   halaman dan grafik inline ikut berganti tema tanpa diubah.
   ============================================================ */

:root {
  /* Memaksa peramban memakai kontrol formulir, scrollbar, dan
     isian otomatis versi terang meskipun os/peramban BOS di-
     setel ke gelap. Tanpa ini, peramban memaksa elemen-elemen
     itu ke gelap, yang tidak cocok dengan tema aplikasi. */
  color-scheme: light;

  --bg:    #f4f6fa;
  --panel: #ffffff;
  --line:  #e5e9f0;
  --txt:   #1a2433;
  --mut:   #66748c;
  --acc:   #4f46e5;   /* indigo — aksen utama */
  --acc2:  #0284c7;   /* sky — aksen kedua & tautan */
  --warn:  #b45309;
  --bad:   #dc2626;
  --vio:   #7c3aed;
  --pos:   #16a34a;   /* hijau positif khusus tema terang */

  --sisi: 250px;
  --lengkung: 14px;
  --sela: 18px;

  /* Satu keluarga font untuk teks dan angka (Inter),
     dimuat dari Google Fonts; perangkat tanpa internet jatuh ke
     Segoe UI/Roboto bawaan sistem. Angka tetap tabular agar
     kolom nominal lurus. */
  --angka: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Latar jejak batang dan isian lembar. Sengaja dibuat peubah,
     bukan warna mentah, supaya komponen yang memakainya ikut
     berpindah tema tanpa perlu disunting satu-satu. */
  --jejak: #eef1f7;
  --lembar: #f8fafc;

  /* ---- Skala tipografi ----
     Sebelumnya tiap halaman memakai ukuran yang beda-beda untuk
     maksud yang sama (9, 9.5, 10, 10.5, 11, 11.5, 12, 13px), jadi
     tampilan terasa tidak satu suara. Enam tingkatan ini dipakai
     menurut MAKSUDNYA, bukan angka yang kebetulan enak dilihat:
       --teks-mini   sel kalender, lencana, label grafik
       --teks-kecil  keterangan, satuan, teks bantu
       --teks-normal isi panel
       --teks-nilai  angka nilai di dalam kartu
       --teks-angka  angka penting yang perlu ditonjolkan
       --nilai-kpi   angka kartu ikhtisar paling atas
     Jangan menambah ukuran baru di komponen; pakai salah satu ini. */
  --teks-mini:   10px;
  --teks-kecil:  11px;
  --teks-normal: 12.5px;
  --teks-nilai:  15px;
  --teks-angka:  18px;
  --nilai-kpi:   clamp(17px, 1.55vw, 25px);

  /* ---- Lengkung sudut ----
     Hanya tiga tingkat, dipakai konsisten: kartu/panel pakai
     --lengkung (14px), kotak kecil di dalam kartu pakai
     --lengkung-kecil, dan lencana/penanda pakai --lengkung-pil. */
  --lengkung-kecil: 8px;
  --lengkung-mini:  4px;
  --lengkung-pil:   99px;

  /* ---- Warna lembut (latar) ----
     Warna mentah yang tadinya ditulis langsung di dalam halaman dan
     berisiko tidak ikut berubah saat tema berganti. */
  --acc-samar:   rgba(79, 70, 229, 0.08);
  --acc-lembut:  #eef2ff;
  --pos-lembut:  #e7f7ee;
  --warn-lembut: #fef3c7;
  --bad-lembut:  #fdecec;
  --bad-lembut2: #fef2f2;
  --bad-garis:   #fca5a5;
  --acc3:        #0f766e;   /* teal — garis grafik arus kas */

  /* Warna status "lampu lalu lintas" (capai / bahaya / kejar).
     Hijau dan merahnya sudah sama dengan --pos dan --bad. Oranye
     dipisah karena lebih terang daripada --warn, dan tetap
     dipertahankan persis supaya tampilan tidak berubah. */
  --warn-terang: #d97706;
  --acc-terang:  #6366f1;
  --acc-garis:   #a5b4fc;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
}

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

/* ---------- Kerangka ---------- */

.rangka { display: flex; min-height: 100vh; }

.sisi {
  width: var(--sisi);
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.merek { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; padding: 0 6px; }
.merek .lambang {
  width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(135deg, var(--acc), var(--vio));
  display: grid; place-items: center;
  font-weight: 800; font-size: 10.5px; letter-spacing: .5px; color: #fff;
}
.merek .nama { font-weight: 700; letter-spacing: .3px; font-size: 15px; }
.merek .sub { font-size: 11px; color: var(--mut); }

.kelompok { margin-bottom: 16px; }
.kelompok > .judul {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.1px;
  color: #94a3b8; padding: 0 10px; margin-bottom: 6px; font-weight: 700;
}

.menu {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 10px; border-radius: 10px;
  color: #334155; font-size: 13.5px; font-weight: 500;
  transition: all .14s ease;
}
.menu:hover { background: #f1f5f9; color: #0f172a; text-decoration: none; }
.menu.aktif {
  background: #eef2ff;
  color: #4338ca; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.15);
}
.menu .ikon {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; flex: none;
  transition: transform .14s ease, box-shadow .14s ease;
}
.menu:hover .ikon { transform: scale(1.08); }
.menu.aktif .ikon { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.menu .ikon svg { stroke: currentColor; stroke-width: 2.2; width: 16px; height: 16px; }

/* Warna-warni Tematik Ikon Sidebar (Pastel Squircle Badges) */
.menu .ikon.ikon-dashboard          { background: rgba(79, 70, 229, 0.13) !important; color: #4f46e5 !important; }
.menu .ikon.ikon-input              { background: rgba(16, 185, 129, 0.16) !important; color: #059669 !important; }
.menu .ikon.ikon-pengeluaran-harian { background: rgba(244, 63, 94, 0.16) !important; color: #e11d48 !important; }
.menu .ikon.ikon-stok               { background: rgba(245, 158, 11, 0.18) !important; color: #d97706 !important; }
.menu .ikon.ikon-data               { background: rgba(2, 132, 199, 0.15) !important; color: #0284c7 !important; }
.menu .ikon.ikon-laporan            { background: rgba(124, 58, 237, 0.15) !important; color: #7c3aed !important; }
.menu .ikon.ikon-keuangan           { background: rgba(13, 148, 136, 0.16) !important; color: #0d9488 !important; }
.menu .ikon.ikon-cicilan-bulanan    { background: rgba(99, 102, 241, 0.16) !important; color: #4f46e5 !important; }
.menu .ikon.ikon-rekom-spbn         { background: rgba(37, 99, 235, 0.16) !important; color: #2563eb !important; }
.menu .ikon.ikon-rekom-input        { background: rgba(8, 145, 178, 0.17) !important; color: #0891b2 !important; }
.menu .ikon.ikon-rekom-tracking     { background: rgba(219, 39, 119, 0.16) !important; color: #db2777 !important; }
.menu .ikon.ikon-nozzle             { background: rgba(234, 88, 12, 0.16) !important; color: #ea580c !important; }
.menu .ikon.ikon-tarif              { background: rgba(100, 116, 139, 0.16) !important; color: #475569 !important; }
.menu .ikon.ikon-pengguna           { background: rgba(147, 51, 234, 0.16) !important; color: #9333ea !important; }
.menu .ikon.ikon-keluar             { background: rgba(239, 68, 68, 0.14) !important; color: #dc2626 !important; }

.isi {
  flex: 1; padding: 22px 28px 60px; min-width: 0;
  /* Di monitor lebar, konten dibatasi supaya tabel dan kartu tidak
     melar sampai ujung layar; pada layar biasa tidak ada efek. */
  max-width: 1560px;
  margin-inline: auto;
}

.kepala {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 20px;
}
.kepala h1 { font-size: 21px; font-weight: 700; letter-spacing: -.3px; }
.kepala .cap { color: var(--mut); font-size: 12.5px; }

/* ---------- Kartu ---------- */

.baris { display: grid; gap: var(--sela); }
.kolom-4 { grid-template-columns: repeat(4, 1fr); }
.kolom-5 { grid-template-columns: repeat(5, 1fr); }
.kolom-6 { grid-template-columns: repeat(6, 1fr); }
.kolom-3 { grid-template-columns: repeat(3, 1fr); }
.kolom-2 { grid-template-columns: repeat(2, 1fr); }
.kolom-2-1 { grid-template-columns: 1.6fr 1fr; }
.baris + .baris { margin-top: var(--sela); }

.kartu {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--lengkung);
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.kartu:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16, 24, 40, .08); }
.kartu .label {
  color: var(--mut); font-size: 12.5px; font-weight: 600; margin-bottom: 6px;
}
.kartu .nilai {
  font-family: var(--angka);
  font-size: 29px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.3px;
}
/* Angka netral diberi gradasi tinta halus supaya berdimensi,
   angka berwarna (baik/buruk/warn) tetap polos agar maknanya menonjol. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kartu .nilai:not(.baik):not(.buruk):not(.netral):not(.warn) {
    background: linear-gradient(175deg, #0f172a 25%, #46536e 95%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.kartu .kaki { font-size: 12.5px; color: var(--mut); margin-top: 6px; }

/* Titik identitas kecil sebelum label kartu */
.kartu .label::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px; border-radius: 999px;
  margin-right: 7px; vertical-align: 1px;
  background: #94a3b8;
}
.kartu.aksen  .label::before { background: var(--acc); }
.kartu.aksen2 .label::before { background: var(--acc2); }
.kartu.ungu   .label::before { background: var(--vio); }
.kartu.kuning .label::before { background: #d97706; }

.baik   { color: var(--pos); }
.buruk  { color: var(--bad); }
.netral { color: var(--mut); }
.info   { color: var(--acc2); }
.warn   { color: var(--warn); }

/* ---------- Panel & tabel ---------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--lengkung);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.panel > .kepala-panel {
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.panel > .kepala-panel h2 { font-size: 14px; font-weight: 700; letter-spacing: .2px; }
.panel > .kepala-panel h2::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px; border-radius: 3px;
  background: var(--acc); margin-right: 9px; vertical-align: 0;
}
.panel > .badan { padding: 16px 18px; }

/* ---------- Panel yang bisa dilipat ----------
   Dipakai untuk bagian yang jarang dibuka (mis. sejarah arsip di
   dashboard) memakai <details> bawaan peramban, jadi tetap bisa
   dipakai tanpa JavaScript dan terbaca pembaca layar. Penanda
   panah digambar dengan CSS supaya tidak perlu ikon tambahan. */
.panel > summary.kepala-panel {
  cursor: pointer; user-select: none; list-style: none;
}
.panel > summary.kepala-panel::-webkit-details-marker { display: none; }
.panel > summary.kepala-panel::before { display: none; }
.panel > summary.kepala-panel:hover { background: var(--jejak); }
.panel > summary.kepala-panel:focus-visible {
  outline: 2px solid var(--acc); outline-offset: -2px;
}
.panel > summary.kepala-panel::after {
  content: ""; flex: none; margin-left: 4px;
  width: 8px; height: 8px; margin-top: -4px;
  border-right: 2px solid var(--mut); border-bottom: 2px solid var(--mut);
  transform: rotate(45deg); transition: transform .18s ease;
}
.panel[open] > summary.kepala-panel::after {
  transform: rotate(-135deg); margin-top: 3px;
}
/* Saat tertutup tidak ada isi di bawahnya, jadi garis pemisahnya
   ikut disembunyikan supaya tidak menggantung tanpa alasan. */
.panel:not([open]) > summary.kepala-panel { border-bottom: 0; }

.tabel-bungkus { overflow-x: auto; }
table.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tabel th {
  text-align: left; font-weight: 700; color: #94a3b8;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
  background: #f8fafc; position: sticky; top: 0;
}
table.tabel td { padding: 11px 16px; border-bottom: 1px solid #f1f5f9; }
table.tabel tbody tr { transition: background .12s ease; }
table.tabel tbody tr:hover { background: #f8fafc; }
table.tabel tbody tr:last-child td { border-bottom: none; }
table.tabel .kanan {
  text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--angka); font-weight: 500;
}
table.tabel tfoot td {
  font-weight: 650; border-top: 1px solid var(--line);
  background: #f8fafc;
}

.tanda {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; border: 1px solid currentColor;
  background: var(--panel);
}

/* ---------- Formulir ---------- */

.form-baris { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.bidang { display: flex; flex-direction: column; gap: 6px; }
.bidang label { font-size: 12px; color: var(--mut); font-weight: 600; }
.bidang .bantu { font-size: 11px; color: var(--mut); }
.bantu { font-size: 13px; color: var(--mut); }

input[type="text"], input[type="number"], input[type="date"],
input[type="month"], input[type="search"], input[type="password"],
select, textarea {
  background: #fff; color: var(--txt);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 11px; font-size: 13.5px; font-family: inherit; width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .13);
}
input[readonly], input:disabled { color: var(--mut); background: #f8fafc; }

.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--acc); color: #fff;
  border: none; border-radius: 9px;
  padding: 9px 16px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: filter .12s ease, transform .05s ease, background .12s ease;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
}
.tombol:hover { filter: brightness(.93); }
.tombol:active { transform: translateY(1px); }
.tombol.samar {
  background: var(--panel); color: #334155;
  border: 1px solid var(--line); box-shadow: none;
}
.tombol.samar:hover { background: #f1f5f9; filter: none; }
.tombol.bahaya { background: var(--bad); }
.tombol:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Pesan ---------- */

.pesan {
  border-radius: 10px; padding: 12px 14px; font-size: 13px;
  border: 1px solid var(--line); background: #f8fafc;
  color: var(--txt); margin-bottom: 16px;
}
.pesan.baik  { border-color: #bbf7d0; background: #f0fdf4; color: #15803d; }
.pesan.buruk { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.pesan.warn  { border-color: #fde68a; background: #fffbeb; color: var(--warn); }

.kosong {
  text-align: center; color: var(--mut); padding: 30px 16px 26px; font-size: 13px;
  border: 1px dashed #cbd5e1; border-radius: var(--lengkung);
  background: #fbfcfe;
}
/* Ikon kotak masuk kecil supaya halaman tanpa data terlihat
   "belum terisi", bukan seperti rusak. */
.kosong::before {
  content: "";
  display: block; width: 38px; height: 38px; margin: 0 auto 10px;
  background: no-repeat center / contain
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-6l-2 3h-4l-2-3H2'/><path d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/></svg>");
}
.kosong .tombol { margin-top: 12px; }

/* ---------- Agenda & tindakan harian ---------- */

.agenda {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--lengkung);
  padding: 13px 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  margin-bottom: var(--sela);
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
}
.agenda-judul {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .9px; color: #94a3b8; flex: none;
  padding-right: 18px; border-right: 1px solid var(--line);
}
.agenda-isi { display: flex; gap: 24px; flex-wrap: wrap; flex: 1; align-items: center; }
.agenda-item { display: flex; gap: 10px; align-items: flex-start; min-width: 170px; }
.agenda-item .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none; }
.agenda-item.ok .dot   { background: var(--pos); }
.agenda-item.warn .dot { background: #d97706; }
.agenda-item.bad .dot  { background: var(--bad); }
.agenda-item b { font-size: 13px; display: block; }
.agenda-item span { font-size: 12px; color: var(--mut); }
.agenda-item.warn b { color: #b45309; }
.agenda-item.bad b  { color: var(--bad); }
.agenda-item a { font-weight: 600; }

@media (max-width: 900px) {
  .agenda { flex-direction: column; align-items: stretch; gap: 12px; }
  .agenda-judul { border-right: none; padding-right: 0; }
}

/* ---------- Ikon kartu KPI ---------- */

.kartu { position: relative; }
.ikon-kpi {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center;
}
.kartu.aksen  .ikon-kpi { background: #eef2ff; color: var(--acc); }
.kartu.aksen2 .ikon-kpi { background: #e0f2fe; color: var(--acc2); }
.kartu.kuning .ikon-kpi { background: #fef3c7; color: #b45309; }
.kartu.ungu   .ikon-kpi { background: #f3e8ff; color: var(--vio); }

/* ---------- Sapaan & navigasi periode ---------- */

.sapaan { font-size: 17px; font-weight: 750; letter-spacing: -.2px; }
.periode-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tombol.panah { padding: 9px 14px; font-size: 16px; line-height: 1; }

/* Pemilih periode: panah kiri, kotak bulan, dan panah kanan dibuat satu
   kesatuan berlatar putih, supaya mata membacanya sebagai satu alat
   "pindah bulan", bukan tiga tombol yang berdiri sendiri-sendiri.
   Tombol "Lihat" tidak diperlukan lagi karena bulan yang dipilih
   langsung dimuat saat berubah. */
.pilih-periode {
  display: inline-flex; align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--lengkung-pil);
  overflow: hidden;
}
.pilih-periode form { display: flex; align-items: center; }
.pilih-periode .tombol.panah {
  border: 0; border-radius: 0; background: transparent;
  padding: 9px 13px; color: var(--mut);
}
.pilih-periode .tombol.panah:hover { background: var(--jejak); color: var(--txt); }
.pilih-periode input[type="month"] {
  width: auto; border: 0; background: transparent;
  padding: 8px 4px; font-size: var(--teks-normal); font-weight: 700;
  color: var(--txt); cursor: pointer;
}
.pilih-periode input[type="month"]:focus { outline: 2px solid var(--acc); outline-offset: -4px; }

/* ---------- Animasi masuk ---------- */
/* Sengaja TANPA @media prefers-reduced-motion: browser IAB/WebView
   melaporkan "reduce" walau pengguna tidak memintanya, sehingga
   animasi tidak pernah jalan di sana. */

@keyframes tumbuh { from { transform: scaleY(0); } }
@keyframes muncul { from { opacity: 0; transform: translateY(7px); } }

.bt { animation: tumbuh .45s cubic-bezier(.2, .7, .3, 1) backwards; }
.bt.bawah { transform-origin: bottom; }
.bt.atas  { transform-origin: top; }

.kartu, .agenda, .panel { animation: muncul .35s ease-out backwards; }
.kolom-4 .kartu:nth-child(2), .kolom-3 .kartu:nth-child(2), .kolom-5 .kartu:nth-child(2), .kolom-6 .kartu:nth-child(2) { animation-delay: .05s; }
.kolom-4 .kartu:nth-child(3), .kolom-3 .kartu:nth-child(3), .kolom-5 .kartu:nth-child(3), .kolom-6 .kartu:nth-child(3) { animation-delay: .1s; }
.kolom-4 .kartu:nth-child(4), .kolom-5 .kartu:nth-child(4), .kolom-6 .kartu:nth-child(4) { animation-delay: .15s; }
.kolom-5 .kartu:nth-child(5), .kolom-6 .kartu:nth-child(5) { animation-delay: .2s; }
.kolom-6 .kartu:nth-child(6) { animation-delay: .25s; }

.donat circle { transition: stroke-dasharray .9s cubic-bezier(.2, .7, .3, 1); }

/* ---------- Tooltip grafik ---------- */

.tip-grafik {
  position: fixed; z-index: 60; pointer-events: none;
  background: #0f172a; color: #fff;
  padding: 7px 11px; border-radius: 8px;
  font-size: 12px; line-height: 1.5; max-width: 235px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .35);
  opacity: 0; transition: opacity .12s ease;
}
.tip-grafik.aktif { opacity: 1; }

/* ---------- Layar masuk ---------- */

.layar-masuk {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(79, 70, 229, .13), transparent 62%),
    radial-gradient(760px 460px at 108% 108%, rgba(2, 132, 199, .11), transparent 60%),
    var(--bg);
}
.masuk-kartu {
  width: 100%; max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 30px 24px;
  box-shadow: 0 12px 36px rgba(16, 24, 40, .10);
  animation: muncul .4s ease-out backwards;
}
.masuk-kartu .merek { justify-content: center; margin-bottom: 4px; }
.masuk-kartu .lambang { width: 46px; height: 46px; border-radius: 13px; font-size: 12.5px; }
.masuk-judul { text-align: center; font-size: 18px; font-weight: 750; letter-spacing: -.2px; margin-top: 16px; }
.masuk-sub { text-align: center; font-size: 12.5px; color: var(--mut); margin: 3px 0 22px; }
.masuk-kartu form .bidang { margin-bottom: 13px; }
.masuk-kartu .tombol {
  width: 100%; justify-content: center; padding: 11px 16px; margin-top: 8px;
}
.masuk-kaki { text-align: center; font-size: 11.5px; color: #94a3b8; margin-top: 20px; }

/* ---------- Elemen grafis dashboard (Opsi A) ---------- */

/* Donat persentase (serapan alokasi) */
.donat { position: relative; width: 92px; height: 92px; flex: none; }
.donat svg { display: block; }
.donat .donat-tengah {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donat .donat-tengah b { font-family: var(--angka); font-size: 17px; font-weight: 700; letter-spacing: .2px; }
.donat .donat-tengah small { font-size: 10px; color: var(--mut); font-weight: 700; letter-spacing: .5px; }

/* Bilah progres tipis (serapan liter) */
.bilah { height: 7px; border-radius: 99px; background: #e9edf5; overflow: hidden; margin-top: 10px; }
.bilah i { display: block; height: 100%; border-radius: 99px; background: var(--acc); }

/* Batang bagi hasil (BKU / BSP) */
.belah { display: flex; height: 20px; border-radius: 99px; overflow: hidden; margin-top: 10px; }
.belah i { display: block; height: 100%; }

/* Sparkline mini di kartu KPI */
.kilau { margin-top: 10px; display: block; width: 100%; height: 30px; }

/* ---------- Grafik: batang merespons kursor ---------- */

.panel .badan div[style*="border-radius"] { transition: opacity .12s ease; }
.panel .badan div[style*="border-radius"]:hover { opacity: .75; }

/* ---------- Gulir & seleksi ---------- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: rgba(79, 70, 229, .18); }

/* ---------- Fokus keyboard ---------- */

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Layar kecil, titik putus 900px ---------- */

.tombol-menu { display: none; }

@media (max-width: 900px) {
  .rangka { flex-direction: column; }

  .sisi {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 50;
    transform: translateX(-100%); transition: transform .2s ease;
    height: 100vh; box-shadow: 0 0 40px rgba(15, 23, 42, .18);
  }
  .sisi.buka { transform: translateX(0); }

  .tirai {
    display: none; position: fixed; inset: 0; z-index: 40;
    background: rgba(15, 23, 42, .45);
  }
  .tirai.buka { display: block; }

  .tombol-menu {
    display: inline-grid; place-items: center;
    width: 38px; height: 38px; border-radius: 9px;
    background: var(--panel); border: 1px solid var(--line);
    color: var(--txt); cursor: pointer; font-size: 17px;
  }

  .isi { padding: 16px 14px 50px; }
  .kolom-2-1, .kolom-6, .kolom-5, .kolom-4, .kolom-3, .kolom-2 { grid-template-columns: 1fr; }
  .form-baris { grid-template-columns: 1fr; }
  .kartu .nilai { font-size: 24px; }
  table.tabel { font-size: 13px; }
  table.tabel th, table.tabel td { padding: 9px 11px; }
}

/* ---------- Ronde UI 2026-08-23: tabel menggulir & hitung langsung ---------- */

/* Kotak tabel tinggi terbatas: kepala tabel menempel di atas dan
   kaki total menempel di bawah selama menggulir. Dipakai untuk
   daftar panjang (konsumen, data, hutang, tracking jatah).
   Catatan: th sudah position:sticky sejak awal, tetapi tidak pernah
   bekerja karena .panel overflow:hidden memutus konteks sticky;
   menggulir di dalam kotak inilah yang membuatnya hidup. */
.tabel-bungkus.gulir { max-height: 68vh; overflow: auto; }
.tabel-bungkus.gulir table.tabel th { z-index: 2; }
.tabel-bungkus.gulir table.tabel tfoot th,
.tabel-bungkus.gulir table.tabel tfoot td {
  position: sticky; bottom: 0; z-index: 2;
}

/* Hasil hitung meter & tarif yang muncul sambil mengetik */
.meter-hasil { min-height: 16px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.meter-hasil.salah { color: var(--bad); font-weight: 600; }
.ringkas-meter, .pratinjau-tarif {
  font-variant-numeric: tabular-nums;
  color: #334155;
}
.ringkas-meter:empty, .pratinjau-tarif:empty, .meter-hasil:empty { display: none; }

@media print {
  .tabel-bungkus.gulir { max-height: none; overflow: visible; }
  .meter-hasil, .ringkas-meter, .pratinjau-tarif { display: none !important; }
}

@media print {
  @page { margin: 12mm; }

  .sisi, .tombol, .tombol-menu, .tirai, .tip-grafik { display: none !important; }

  body { background: #fff; color: #000; }
  .rangka { display: block; }
  .isi { max-width: none; padding: 0; }

  .panel, .kartu, .agenda {
    border-color: #bbb; background: #fff; box-shadow: none;
    break-inside: avoid;
  }
  /* Angka KPI memakai gradasi teks; tanpa ini cetakan bisa kosong. */
  .kartu .nilai {
    background: none !important;
    -webkit-text-fill-color: currentColor;
  }
  .kepala h1 { font-size: 17px; }
  .kepala .cap { color: #555; }

  table.tabel { font-size: 11px; }
  table.tabel th, table.tabel td { padding: 6px 9px; border-color: #ccc; }
  table.tabel th { background: #f2f2f2 !important; color: #000; }
  table.tabel .kanan { font-weight: 600; }

  a { color: #000; text-decoration: none; }
  .bt, .kartu, .agenda, .panel { animation: none; }

  /* ---- 3D — tambahan khusus dashboard (30 Agu 2026) ---- */
  /* Bilah sisi sudah disembunyikan di atas; sekarang bersihkan
     sisa kerangka dashboard yang tidak berguna di atas kertas. */
  .qbar, .periode-nav, #btnDashCsv { display: none !important; }

  /* Kepala dashboard memakai position:sticky lewat gaya sebaris.
     Di atas kertas ia akan menempel di setiap halaman kalau tidak
     dikembalikan ke posisi biasa. */
  .kepala { position: static !important; background: #fff !important; }

  /* Panel grafik memakai tinggi tetap; biarkan menyusut agar tidak
     memakan satu halaman penuh sendiri. */
  .grafik-liter, .grafik-kas { height: 120px !important; }

  /* Panel baru jangan terpotong di tengah. */
  .laba-akhir, .arsip-baris, .pos-baris { break-inside: avoid; }

  /* Batang berwarna sering hilang di printer hitam-putih.
     Beri batas tipis supaya bentuknya tetap terbaca. */
  .pos-balok i, .laba-balok i, .arsip-balok i { border: 1px solid #999; }
}

/* ============================================================
   Ronde UI 2026-08-25 — poles visual tema terang (tetap putih)
   Hanya presentasi: kontrak class & logika tidak tersentuh.
   Blok ini paling akhir sehingga aman mengganti perilaku lama.
   ============================================================ */

/* ---------- Grafik harian & arus kas: garis bantu skala ---------- */
/* Ritme 44 px memberi ±4 garis pada tinggi grafik sekarang;
   warna sengaja nyaris tak terlihat agar batang tetap protagonis. */
.grafik-liter, .grafik-kas {
  background-image: repeating-linear-gradient(
    to top, #edf1f7 0 1px, transparent 1px 44px);
  border-bottom: 1px solid var(--line);
}

/* ---------- Tabel: zebra halus + hover yang terasa ---------- */
table.tabel tbody tr:nth-child(even) { background: #fbfcfe; }
table.tabel tbody tr:hover { background: #f1f5f9; }

/* ---------- Agenda hari ini: pil berwarna lembut ---------- */
.agenda-item {
  padding: 8px 13px; border-radius: 11px;
  border: 1px solid transparent;
  align-items: center; min-width: 190px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.agenda-item:hover { transform: translateY(-1px); }
.agenda-item.ok   { background: #f0fdf4; border-color: #d3f8df; }
.agenda-item.warn { background: #fffbeb; border-color: #fde68a; }
.agenda-item.bad  { background: #fef2f2; border-color: #fecaca; }
.agenda-item .dot { margin-top: 0; box-shadow: 0 0 0 3px rgba(255,255,255,.7); }

/* ---------- Kartu KPI: bayangan mengikuti aksen masing-masing ---------- */
.kartu.aksen:hover  { box-shadow: 0 12px 28px rgba(79, 70, 229, .15); border-color: #c7d2fe; }
.kartu.aksen2:hover { box-shadow: 0 12px 28px rgba(2, 132, 199, .15); border-color: #bae6fd; }
.kartu.ungu:hover   { box-shadow: 0 12px 28px rgba(124, 58, 237, .14); border-color: #ddd6fe; }
.kartu.kuning:hover { box-shadow: 0 12px 28px rgba(217, 119, 6, .14); border-color: #fde68a; }

/* Ikon KPI menyapa saat kartunya disentuh */
.ikon-kpi { transition: transform .18s cubic-bezier(.34, 1.56, .64, 1); }
.kartu:hover .ikon-kpi { transform: scale(1.09) rotate(-5deg); }

/* ---------- Tombol: angkat halus, tetap flat untuk tombol samar --- */
.tombol:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(79, 70, 229, .24);
  filter: none;
}
.tombol.bahaya:not(:disabled):hover { box-shadow: 0 5px 14px rgba(220, 38, 38, .24); }
.tombol.samar:not(:disabled):hover {
  transform: none; box-shadow: none;
  background: #f5f7ff; border-color: #c7d2fe; color: var(--acc);
}

/* ---------- Batang grafik: respons kursor lebih halus ----------- */
.panel .badan div[style*="border-radius"] {
  transition: opacity .12s ease, filter .12s ease;
}
.panel .badan div[style*="border-radius"]:hover {
  opacity: .88;
  filter: saturate(1.18) brightness(.96);
}

/* ---------- Judul panel: kotak aksen jadi gradasi ---------------- */
.panel > .kepala-panel h2::before {
  background: linear-gradient(135deg, var(--acc), var(--vio));
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .10);
}

/* ---------- Bilah progres: ujung atas lebih bercahaya ------------ */
.bilah i { background: linear-gradient(90deg, var(--acc), #818cf8); }

/* ---------- Layar masuk: kartu dengan kilau berputar pelan ------- */
.masuk-kartu { position: relative; overflow: hidden; }
.masuk-kartu::before {
  content: ""; position: absolute; inset: -70% -25%;
  background: conic-gradient(from 0deg,
    transparent 0 335deg, rgba(79, 70, 229, .07) 350deg,
    rgba(2, 132, 199, .06) 356deg, transparent 360deg);
  animation: putar-kilau 10s linear infinite;
  pointer-events: none;
}
@keyframes putar-kilau { to { transform: rotate(360deg); } }
.masuk-kartu > * { position: relative; }
.merek .lambang { box-shadow: 0 8px 20px rgba(79, 70, 229, .28); }
.layar-masuk .masuk-kartu .merek .lambang { animation: apung-lembut 4.5s ease-in-out infinite; }
@keyframes apung-lembut { 50% { transform: translateY(-2.5px); } }

/* Penanda MODE UJI — hapus blok ini setelah sistem dipakai petugas */
.pita-uji{background:#FAEEDA;color:#633806;border-bottom:1px solid #BA7517;
  padding:9px 16px;font-size:13px;font-weight:500;text-align:center;line-height:1.5}

/* ============================================================
   Dashboard — 2E panel agenda · 3B tipografi angka · 3C ramah HP
   Ditambahkan 30 Agustus 2026. Sengaja diletakkan paling akhir
   sehingga aman mengganti perilaku lama.
   ============================================================ */

/* ---------- 2E — isi panel "Perlu perhatian" ---------- */
/* Kelas .agenda sudah tersedia sejak awal di berkas ini tetapi
   belum pernah dipakai; yang ditambahkan hanya penyesuaian kecil
   agar teks tidak melebar mendorong titik penandanya. */
.agenda-item > div { min-width: 0; }
.agenda-item > div > span { display: block; }

/* ---------- 3B — Angka tidak boleh "berdenyut" ---------- */
/* .kartu .nilai sudah tabular sejak awal. Yang ditambahkan di sini
   angka di luar kartu KPI: kotak ringkasan di bawah grafik liter
   dan judul pada panel agenda. */
.kotak-empat > div > div:last-child,
.agenda-item b {
  font-variant-numeric: tabular-nums;
  font-family: var(--angka);
}

/* ---------- 2D — Komposisi pengeluaran ---------- */
/* Batang CSS biasa, sengaja BUKAN Chart.js: menambah grafik Chart.js
   di dashboard berarti menambah satu lagi ketergantungan ke CDN luar,
   padahal pekerjaan 1D belum diputuskan. Batang CSS sudah rampung
   dengan sendirinya di layar kecil. */
.pos-baris { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.pos-nama  { flex: none; width: 130px; font-size: 12px;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-balok { flex: 1; height: 9px; background: var(--jejak); border-radius: 99px; overflow: hidden; }
.pos-balok i { display: block; height: 100%; background: var(--acc); border-radius: 99px; }
.pos-nilai { flex: none; width: 108px; text-align: right; font-size: 12px;
             font-variant-numeric: tabular-nums; font-family: var(--angka); }

/* ---------- 1B — Sejarah arsip ---------- */
.arsip-baris  { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.arsip-bln    { flex: none; width: 118px; font-size: 12px; }
.arsip-balok  { flex: 1; height: 9px; background: var(--jejak); border-radius: 99px; overflow: hidden; }
.arsip-balok i { display: block; height: 100%; background: var(--acc2); border-radius: 99px; }
.arsip-liter, .arsip-keluar {
  flex: none; text-align: right; font-size: 12px;
  font-variant-numeric: tabular-nums; font-family: var(--angka);
}
.arsip-liter  { width: 92px; }
.arsip-keluar { width: 104px; color: var(--mut); }

/* ---------- 2B — Air terjun laba ---------- */
.laba-baris { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.laba-nama  { flex: none; width: 132px; font-size: 12px; }
.laba-balok { flex: 1; height: 10px; background: var(--jejak); border-radius: 99px; overflow: hidden; }
.laba-balok i { display: block; height: 100%; border-radius: 99px; }
.laba-balok i.masuk  { background: var(--acc); }
.laba-balok i.keluar { background: #f87171; }
/* Corak miring menandai nilai yang belum terverifikasi — sengaja
   berbeda dari warna polos supaya tidak terbaca sebagai angka pasti. */
.laba-balok i.ragu {
  background: repeating-linear-gradient(45deg, #f59e0b, #f59e0b 5px, #fde68a 5px, #fde68a 10px);
}
.laba-nilai, .laba-sisa {
  flex: none; width: 104px; text-align: right; font-size: 12px;
  font-variant-numeric: tabular-nums; font-family: var(--angka);
}
.laba-sisa { color: var(--mut); }
/* Kepala kolom "Nilai / Sisa". Tanpa ini pembaca tidak tahu kolom
   kanan itu sisa sesudah langkah itu, bukan angka lain. */
.laba-head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.laba-head-nilai {
  flex: none; width: 104px; text-align: right;
  font-size: 11px; font-weight: 600; color: var(--mut);
}

/* ---------- 3A — Hierarki: satu angka utama ---------- */
/* Kartu KPI di dashboard selama ini semua sama beratnya, sehingga
   mata tidak tahu harus mendarat di mana. Blok ini menjadikan
   margin bersih angka yang paling besar dan paling kontras. */
.laba-akhir {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  margin-top: 12px; padding: 14px 16px;
  border: 1px solid var(--line); border-left: 4px solid var(--acc);
  border-radius: var(--lengkung); background: var(--lembar);
}
.laba-akhir-label { font-size: 12px; font-weight: 500; color: var(--mut); }
.laba-akhir-cap   { font-size: 11px; color: var(--mut); margin-top: 2px; }
.laba-akhir-nilai {
  font-size: clamp(20px, 2.4vw, 30px); font-weight: 700;
  font-family: var(--angka); font-variant-numeric: tabular-nums;
  letter-spacing: -.4px;
}

/* ---------- 3C — Dashboard ramah layar kecil ---------- */
/* !important diperlukan karena lawannya gaya sebaris (inline style)
   pada markup dashboard, yang menang atas aturan berkas ini. */
/* ============================================================
   3E — Mode gelap DINONAKTIFKAN 30 Agustus 2026.
   Hasil uji pada peramban BOS: banyak teks (label, tombol,
   nilai KPI) menjadi redup dan susah dibaca ketika tema
   peramban/os diaktifkan. Warna hardcoded di seluruh aplikasi
   yang tidak diikat ke peubah tidak ikut berpindah tema,
   sehingga mode gelap malah jadi setengah jadi dan
   mengorbankan keterbacaan.
   Karena tema terang adalah warna asli aplikasi dan tidak
   ditemukan kekurangan di dalamnya, blok mode gelap dicabut
   seluruhnya. color-scheme: light di :root memaksa peramban
   memakai kontrol formulir dan scrollbar versi terang meskipun
   os/peramban BOS disetel ke gelap.
   ============================================================ */

@media (max-width: 640px) {
  .kotak-empat { grid-template-columns: repeat(2, 1fr) !important; }
  .grafik-liter, .grafik-kas { gap: 2px !important; }
  .grafik-liter .cap { font-size: 9px !important; }
  .agenda { padding: 12px 14px; gap: 10px; }
  .agenda-isi { gap: 12px; }
  .agenda-item { min-width: 100%; }
  .pos-baris { gap: 7px; }
  .pos-nama  { width: 86px; font-size: 11px; }
  .pos-nilai { width: 90px; font-size: 11px; }
  .laba-baris { gap: 7px; }
  .laba-nama  { width: 82px; font-size: 11px; }
  .laba-nilai { width: 80px; font-size: 11px; }
  .laba-sisa  { width: 80px; font-size: 11px; }
  .laba-akhir { padding: 12px 13px; }
  .arsip-baris { gap: 7px; }
  .arsip-bln   { width: 74px; font-size: 11px; }
  .arsip-liter { width: 74px; font-size: 11px; }
  .arsip-keluar{ width: 84px; font-size: 11px; }
}

/* ============================================================
   Ronde UI 2026-09-01 — Optimasi Tablet & Dashboard Eksekutif
   ============================================================ */

/* ---------- Kontrol Formulir Ramah Sentuhan (Tablet & HP) ---------- */
input[type="text"], input[type="number"], input[type="date"],
input[type="month"], input[type="password"], select, textarea {
  min-height: 42px;
  font-size: 14px;
  border-radius: 9px;
  border: 1px solid #cbd5e1;
  background: var(--panel);
  color: var(--txt);
  padding: 8px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
  outline: none;
}

.tombol {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

/* ---------- Sticky Table Headers ---------- */
.tabel-bungkus {
  position: relative;
  border-radius: var(--lengkung);
  border: 1px solid var(--line);
  background: var(--panel);
}
.tabel-bungkus table.tabel {
  border: none;
  margin: 0;
}
.tabel-bungkus table.tabel thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  z-index: 10;
  box-shadow: 0 1px 0 var(--line);
}

/* ---------- Pil Status Pastel Modern ---------- */
.tanda {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
}
.tanda.baik { background: #dcfce7 !important; color: #15803d !important; border: 1px solid #bbf7d0 !important; }
.tanda.warn { background: #fef3c7 !important; color: #b45309 !important; border: 1px solid #fde68a !important; }
.tanda.buruk { background: #fee2e2 !important; color: #b91c1c !important; border: 1px solid #fecaca !important; }
.tanda.info { background: #e0f2fe !important; color: #0369a1 !important; border: 1px solid #bae6fd !important; }
.tanda.ungu { background: #f3e8ff !important; color: #7e22ce !important; border: 1px solid #e9d5ff !important; }

/* ---------- Executive Health & Alert Banner ---------- */
.banner-waspada {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--lengkung);
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 5px solid #f59e0b;
  margin-bottom: var(--sela);
  box-shadow: 0 1px 3px rgba(16,24,40,0.05);
  animation: muncul .3s ease-out;
}
.banner-waspada.bahaya {
  background: #fef2f2;
  border-color: #fecaca;
  border-left-color: #ef4444;
}
.banner-waspada.sukses {
  background: #f0fdf4;
  border-color: #bbf7d0;
  border-left-color: #22c55e;
}
.banner-waspada .ikon-alert {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.banner-waspada .konten-alert {
  flex: 1;
  font-size: 13.5px;
  color: #78350f;
}
.banner-waspada.bahaya .konten-alert { color: #991b1b; }
.banner-waspada.sukses .konten-alert { color: #166534; }
.banner-waspada .judul-alert {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- Visual Kalender Status Operasional ---------- */
.kalender-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.kalender-header {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--mut);
  padding: 6px 2px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.kalender-hari {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 7px;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all .15s ease;
  text-decoration: none !important;
  color: var(--txt);
  position: relative;
}
.kalender-hari:hover {
  border-color: var(--acc2);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.kalender-hari.tgl-kosong {
  background: #f8fafc;
  border-color: #f1f5f9;
  opacity: 0.45;
  cursor: default;
}
.kalender-hari.hari-ini {
  border: 2px solid var(--acc);
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
}
.kalender-hari.ada-jual {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.kalender-hari.ada-do {
  border-top: 3px solid #0284c7;
}
.kalender-hari.susut-buruk {
  background: #fef2f2;
  border-color: #fecaca;
}
.kalender-hari .tgl-angka {
  font-weight: 700;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kalender-hari .tgl-vol {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--angka);
  font-variant-numeric: tabular-nums;
  color: #166534;
  text-align: right;
}
.kalender-hari .tgl-badge-do {
  font-size: 9.5px;
  font-weight: 700;
  color: #0284c7;
  background: #e0f2fe;
  border-radius: 4px;
  padding: 1px 4px;
  display: inline-block;
  margin-top: 2px;
}

@media (max-width: 640px) {
  .kalender-grid { gap: 4px; }
  .kalender-hari { min-height: 52px; padding: 4px; }
  .kalender-hari .tgl-vol { font-size: 9.5px; }
}

/* ---------- Progress Bar Serapan Kuota DO ---------- */
.kuota-bar-wrapper {
  background: #e2e8f0;
  border-radius: 999px;
  height: 14px;
  width: 100%;
  overflow: hidden;
  margin: 10px 0 6px;
  position: relative;
}
.kuota-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .5s cubic-bezier(.2, .7, .3, 1);
}
.kuota-bar-fill.aman { background: linear-gradient(90deg, #22c55e, #16a34a); }
.kuota-bar-fill.waspada { background: linear-gradient(90deg, #eab308, #ca8a04); }
.kuota-bar-fill.bahaya { background: linear-gradient(90deg, #ef4444, #dc2626); }

/* ---------- Quick Tags untuk Input Pengeluaran ---------- */
.quick-tag-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.quick-tag {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  user-select: none;
  transition: all .12s ease;
}
.quick-tag:hover, .quick-tag:active {
  background: #e0f2fe;
  border-color: var(--acc2);
  color: var(--acc2);
  transform: translateY(-1px);
}

/* ---------- Input Live Search Box ---------- */
.kotak-cari-live {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.kotak-cari-live input {
  width: 100%;
  padding-left: 36px;
}
.kotak-cari-live .ikon-cari {
  position: absolute;
  left: 12px;
  color: var(--mut);
  pointer-events: none;
  display: grid;
  place-items: center;
}