/* ============================================================
   CBS BPR — app.css
   Design system: sidebar + topbar shell, kartu, tabel, badge,
   tombol, form. Font Ubuntu self-hosted (patuh CSP 'self').
   Acuan: mockup core-banking (brand biru #1e40af, slate).
   ============================================================ */

/* ---------- Font (self-hosted, subset latin) ---------- */
@font-face {
  font-family: "Ubuntu"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/ubuntu-400.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/ubuntu-500.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/ubuntu-700.woff2") format("woff2");
}

/* ---------- Token ---------- */
:root {
  --brand-50:#eff6ff; --brand-100:#dbeafe; --brand-200:#bfdbfe; --brand-500:#3b82f6;
  --brand-600:#2563eb; --brand-700:#1d4ed8; --brand-800:#1e40af; --brand-900:#1e3a8a;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a;
  --radius:12px; --radius-md:8px; --radius-sm:6px;
  --shadow-card:0 1px 2px 0 rgb(15 23 42 / .04), 0 1px 3px 0 rgb(15 23 42 / .06);
  --sidebar-w:256px;
  font-family:"Ubuntu", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  font-family:"Ubuntu", ui-sans-serif, system-ui, sans-serif;
  background:var(--slate-50); color:var(--slate-800);
  -webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5;
}
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { margin:0; color:var(--slate-900); }

/* ============================================================
   Shell: sidebar + main
   ============================================================ */
.app { min-height:100vh; }

.sidebar {
  position:fixed; inset:0 auto 0 0; z-index:40; width:var(--sidebar-w);
  display:flex; flex-direction:column; background:#fff;
  border-right:1px solid var(--slate-200); transition:transform .2s ease;
}
.sidebar-brand {
  display:flex; align-items:center; gap:.75rem; height:64px; flex-shrink:0;
  padding:0 1.25rem; border-bottom:1px solid var(--slate-200);
}
.sidebar-brand .logo {
  display:grid; place-items:center; height:36px; width:36px; border-radius:var(--radius-md);
  background:var(--brand-800); color:#fff; flex-shrink:0;
}
.sidebar-brand .logo svg { height:20px; width:20px; }
.sidebar-brand .name { display:block; font-size:.875rem; font-weight:700; color:var(--slate-900); line-height:1.1; }
.sidebar-brand .sub { display:block; font-size:.6875rem; font-weight:500; color:var(--slate-400); }

.sidebar-nav { flex:1; overflow-y:auto; padding:1rem .75rem; }
.nav-group { margin-bottom:.25rem; }
.nav-group > .nav-grouphead {
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:.5rem .75rem; border:0; background:none; cursor:pointer;
  font:inherit; font-size:.6875rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--slate-400);
}
.nav-group > .nav-grouphead:hover { color:var(--slate-600); }
.nav-grouphead .gh-left { display:flex; align-items:center; gap:.625rem; }
.nav-grouphead svg { height:14px; width:14px; }
.nav-grouphead .chev { transition:transform .2s ease; }
.nav-group.collapsed .nav-grouphead .chev { transform:rotate(-90deg); }
.nav-group.collapsed .nav-groupbody { display:none; }

.nav-groupbody { display:flex; flex-direction:column; gap:2px; }
.nav-link {
  display:flex; align-items:center; gap:.75rem; padding:.5rem .75rem;
  border-radius:var(--radius-sm); font-size:.875rem; color:var(--slate-600);
  transition:background .12s, color .12s;
}
.nav-link svg { height:16px; width:16px; color:var(--slate-400); flex-shrink:0; }
.nav-link:hover { background:var(--slate-100); color:var(--slate-900); }
.nav-link:hover svg { color:var(--slate-600); }
.nav-link.active { background:var(--brand-800); color:#fff; font-weight:500; box-shadow:var(--shadow-card); }
.nav-link.active svg { color:#fff; }

.sidebar-foot { border-top:1px solid var(--slate-200); padding:.75rem; }
.sidebar-foot .nav-link { color:var(--slate-500); }

.sidebar-overlay {
  position:fixed; inset:0; z-index:30; background:rgb(15 23 42 / .4); display:none;
}

.app-main { display:flex; flex-direction:column; min-height:100vh; padding-left:var(--sidebar-w); }

.topbar {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:.75rem;
  height:64px; padding:0 1.5rem; background:rgb(255 255 255 / .95);
  border-bottom:1px solid var(--slate-200); backdrop-filter:blur(6px);
}
.topbar .menu-btn {
  display:none; place-items:center; height:36px; width:36px; border:0; background:none;
  border-radius:var(--radius-sm); color:var(--slate-500); cursor:pointer;
}
.topbar .menu-btn:hover { background:var(--slate-100); }
.topbar .bank { line-height:1.2; }
.topbar .bank .b1 { font-size:.875rem; font-weight:600; color:var(--slate-900); white-space:nowrap; }
.topbar .bank .b2 { font-size:.75rem; color:var(--slate-400); white-space:nowrap; }
.topbar .spacer { margin-left:auto; }
.topbar .divider { height:32px; width:1px; background:var(--slate-200); }
.topbar .user { display:flex; align-items:center; gap:.625rem; }
.topbar .avatar {
  display:grid; place-items:center; height:36px; width:36px; border-radius:9999px;
  background:var(--brand-100); color:var(--brand-800); font-size:.8125rem; font-weight:700;
}
.topbar .user .u1 { font-size:.875rem; font-weight:600; color:var(--slate-800); line-height:1.1; }
.topbar .user .u2 { font-size:.75rem; color:var(--slate-400); }
.topbar .iconbtn {
  display:grid; place-items:center; height:36px; width:36px; border:0; background:none;
  border-radius:var(--radius-sm); color:var(--slate-500); cursor:pointer;
}
.topbar .iconbtn:hover { background:var(--slate-100); }

.content { flex:1; padding:1.5rem; }
.appfooter {
  border-top:1px solid var(--slate-200); padding:1rem 1.5rem; text-align:center;
  font-size:.75rem; color:var(--slate-400);
}

/* ============================================================
   Page header
   ============================================================ */
.page-header {
  display:flex; flex-wrap:wrap; gap:.75rem; align-items:flex-end; justify-content:space-between;
  margin-bottom:1.5rem;
}
.page-header h1 { font-size:1.5rem; font-weight:700; letter-spacing:-.01em; }
.page-header .sub { margin-top:.25rem; font-size:.875rem; color:var(--slate-500); }
.page-header .actions { display:flex; flex-wrap:wrap; gap:.5rem; }
/* halaman lama: h1 langsung di .content */
.content > h1 { font-size:1.5rem; font-weight:700; letter-spacing:-.01em; margin-bottom:1.25rem; }

/* ============================================================
   Kartu
   ============================================================ */
.card {
  background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius);
  box-shadow:var(--shadow-card); margin-bottom:1.25rem; overflow:hidden;
}
.card-body { padding:1.25rem; }
/* kompatibilitas: <h2> langsung di .card berperan sebagai header */
.card > h2 {
  font-size:.875rem; font-weight:600; color:var(--slate-800); margin:0;
  padding:.875rem 1.25rem; border-bottom:1px solid var(--slate-200);
}

/* KPI / statistik */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-bottom:1.25rem; }
.kpi {
  background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius);
  box-shadow:var(--shadow-card); padding:1.25rem;
}
.kpi .top { display:flex; align-items:flex-start; justify-content:space-between; }
.kpi .label { font-size:.875rem; font-weight:500; color:var(--slate-500); }
.kpi .chip { display:grid; place-items:center; height:36px; width:36px; border-radius:var(--radius-md); }
.kpi .chip svg { height:20px; width:20px; }
.kpi .value { margin-top:.75rem; font-size:1.5rem; font-weight:700; letter-spacing:-.01em; color:var(--slate-900); }
.kpi .foot { margin-top:.375rem; font-size:.75rem; color:var(--slate-400); }
.chip-brand { background:var(--brand-50); color:var(--brand-700); }
.chip-green { background:#ecfdf5; color:#047857; }
.chip-orange { background:#fff7ed; color:#c2410c; }
.chip-indigo { background:#eef2ff; color:#4338ca; }
.chip-slate { background:var(--slate-100); color:var(--slate-600); }

/* ============================================================
   Tabel
   ============================================================ */
table.data { width:100%; border-collapse:collapse; }
table.data thead tr { background:rgb(248 250 252 / .6); border-bottom:1px solid var(--slate-200); }
table.data th {
  text-align:left; padding:.625rem 1rem; font-size:.6875rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); white-space:nowrap;
}
table.data td {
  padding:.625rem 1rem; font-size:.875rem; color:var(--slate-600);
  border-bottom:1px solid var(--slate-100); white-space:nowrap;
}
table.data tbody tr { transition:background .12s; }
table.data tbody tr:hover { background:var(--slate-50); }
table.data tbody tr:last-child td { border-bottom:0; }
table.data th.num, table.data td.num { text-align:right; font-variant-numeric:tabular-nums; }
table.data tr.total td { font-weight:700; color:var(--slate-800); border-top:2px solid var(--slate-200); }
table.data td code, .mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.8125rem; color:var(--slate-500); }
table.data th[colspan], table.data td:first-child { color:var(--slate-700); }

/* ============================================================
   Badge
   ============================================================ */
.badge {
  display:inline-flex; align-items:center; gap:.375rem; padding:.125rem .5rem;
  border-radius:var(--radius-sm); font-size:.75rem; font-weight:600;
  background:var(--slate-100); color:var(--slate-700);
  box-shadow:inset 0 0 0 1px rgb(71 85 105 / .15);
}
.badge.warn { background:#fef2f2; color:#b91c1c; box-shadow:inset 0 0 0 1px rgb(220 38 38 / .2); }
.badge.ok { background:#ecfdf5; color:#047857; box-shadow:inset 0 0 0 1px rgb(5 150 105 / .2); }
/* Tone badge (ring-inset, acuan ui.js badge()) */
.badge-slate  { background:var(--slate-100); color:var(--slate-700); box-shadow:inset 0 0 0 1px rgb(71 85 105 / .15); }
.badge-blue   { background:#eff6ff; color:#1d4ed8; box-shadow:inset 0 0 0 1px rgb(29 78 216 / .2); }
.badge-brand  { background:var(--brand-50); color:var(--brand-700); box-shadow:inset 0 0 0 1px rgb(37 99 235 / .2); }
.badge-green  { background:#ecfdf5; color:#047857; box-shadow:inset 0 0 0 1px rgb(5 150 105 / .2); }
.badge-yellow { background:#fefce8; color:#854d0e; box-shadow:inset 0 0 0 1px rgb(202 138 4 / .3); }
.badge-orange { background:#fff7ed; color:#c2410c; box-shadow:inset 0 0 0 1px rgb(234 88 12 / .2); }
.badge-red    { background:#fef2f2; color:#b91c1c; box-shadow:inset 0 0 0 1px rgb(220 38 38 / .2); }
.badge-indigo { background:#eef2ff; color:#4338ca; box-shadow:inset 0 0 0 1px rgb(67 56 202 / .2); }
.badge .dot { height:6px; width:6px; border-radius:9999px; background:currentColor; opacity:.7; }

/* ============================================================
   Komponen halaman (acuan components.js)
   ============================================================ */
.page-header .actions .btn,
.page-header .actions button { box-shadow:var(--shadow-card); }

/* Card dengan header (judul + aksi) */
.card-head {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.875rem 1.25rem; border-bottom:1px solid var(--slate-200);
}
.card-head h2, .card-head h3 { font-size:.875rem; font-weight:600; color:var(--slate-800); padding:0; border:0; }
.card-head .actions { display:flex; align-items:center; gap:.5rem; }

/* Toolbar: search + filter + export */
.toolbar {
  display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;
  padding:1rem; border-bottom:1px solid var(--slate-200);
}
.toolbar .search { position:relative; flex:1 1 14rem; }
.toolbar .search svg { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); height:16px; width:16px; color:var(--slate-400); pointer-events:none; }
.toolbar .search input {
  width:100%; padding:.5rem .75rem .5rem 2.25rem; font:inherit; font-size:.875rem;
  border:1px solid var(--slate-300); border-radius:var(--radius-md); background:#fff;
}
.toolbar .search input:focus { outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgb(59 130 246 / .2); }
.toolbar select {
  padding:.5rem .75rem; font:inherit; font-size:.875rem; color:var(--slate-600);
  border:1px solid var(--slate-300); border-radius:var(--radius-md); background:#fff;
}
.toolbar .grow { flex:1; }

/* Sel tabel khas mockup */
.cell-id { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.75rem; font-weight:700; color:var(--brand-800); }
.cell-mono { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.75rem; color:var(--slate-500); }
.cell-name { display:flex; align-items:center; gap:.625rem; }
.cell-name .nm { font-weight:500; color:var(--slate-800); }
.cell-strong { font-weight:600; color:var(--slate-800); }
.cell-muted { color:var(--slate-500); }
.avatar-chip {
  display:grid; place-items:center; height:32px; width:32px; border-radius:9999px;
  background:var(--slate-100); color:var(--slate-500); font-size:.6875rem; font-weight:700; flex-shrink:0;
}
.row-actions { display:flex; align-items:center; justify-content:flex-end; gap:.25rem; }
.row-actions a, .row-actions button {
  display:grid; place-items:center; height:32px; width:32px; padding:0; border:0; background:none;
  border-radius:var(--radius-sm); color:var(--slate-400); box-shadow:none; cursor:pointer;
}
.row-actions a:hover, .row-actions button:hover { background:var(--slate-100); color:var(--slate-700); }
.row-actions svg { height:16px; width:16px; }
.rowform { display:flex; justify-content:flex-end; gap:.5rem; }
.rowform .btn { padding:.375rem .75rem; font-size:.8125rem; }

/* Pagination (kosmetik) */
.pagination {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.75rem 1rem; border-top:1px solid var(--slate-200);
}
.pagination .info { font-size:.875rem; color:var(--slate-500); }
.pagination .info b { color:var(--slate-700); font-weight:600; }
.pagination nav { display:flex; align-items:center; gap:.25rem; }
.pagination nav button {
  height:32px; min-width:32px; padding:0 .5rem; font:inherit; font-size:.875rem;
  border:1px solid var(--slate-200); border-radius:var(--radius-sm); background:#fff;
  color:var(--slate-600); box-shadow:none; cursor:pointer;
}
.pagination nav button.on { background:var(--brand-800); color:#fff; border-color:var(--brand-800); }
.pagination nav button[disabled] { color:var(--slate-300); cursor:default; }
.pagination nav svg { height:16px; width:16px; }
/* Kontrol paginasi sisi-server (link/span) */
.pagination nav .pg-link {
  display:inline-grid; place-items:center; height:32px; min-width:32px; padding:0 .5rem;
  font-size:.875rem; border:1px solid var(--slate-200); border-radius:var(--radius-sm);
  background:#fff; color:var(--slate-600); text-decoration:none;
}
.pagination nav a.pg-link:hover { border-color:var(--brand-500); color:var(--brand-800); }
.pagination nav .pg-link.on { background:var(--brand-800); color:#fff; border-color:var(--brand-800); }
.pagination nav .pg-link.off { color:var(--slate-300); cursor:default; }
/* Pastikan atribut `hidden` selalu menyembunyikan (mengalahkan display author). */
[hidden] { display:none !important; }

/* Tombol kecil + form sebaris (mis. aksi per-baris tabel). */
.btn-sm { height:auto; padding:.3rem .7rem; font-size:.8125rem; }
.inline-form { display:inline; margin:0; }

/* Edit parameter sebaris di dalam sel tabel. */
.param-edit { margin:0; }
.param-edit .param-val { width:100%; min-width:12rem; padding:.35rem .55rem; }

/* Definition list bergaya tabel berpadding (mis. /pengaturan). */
.dl.dl-rows { grid-template-columns:1fr; gap:0; }
.dl.dl-rows .dt, .dl.dl-rows .dd { padding:.625rem .25rem; border-bottom:1px solid var(--slate-100); }
.dl.dl-rows .dt { align-self:center; }
@media (min-width:640px) {
  .dl.dl-rows { grid-template-columns:14rem 1fr; }
  .dl.dl-rows .dd { margin-top:0; }
}

/* Blok keluaran perintah (mono, scrollable). */
.codeblock {
  margin:0; padding:.875rem 1rem; border-radius:var(--radius-md);
  background:var(--slate-900,#0f172a); color:#e2e8f0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8125rem;
  line-height:1.5; overflow:auto; max-height:24rem; white-space:pre-wrap; word-break:break-word;
}

/* ============================================================
   Pembatas ukuran ikon — wadah yang sebelumnya tak menyetel
   ukuran <svg> sehingga ikon membesar tak terkendali (audit ikon).
   ============================================================ */
.flash svg { height:18px; width:18px; flex-shrink:0; }
.detail-id .av svg { height:28px; width:28px; }
.seg-toggle .opt svg { height:16px; width:16px; }
.topbar .avatar svg { height:20px; width:20px; }

/* ============================================================
   Cetak (print) — sembunyikan kerangka, rapikan untuk kertas
   ============================================================ */
@media print {
  .sidebar, .sidebar-overlay, .topbar, .appfooter, .toolbar, .pagination,
  .page-header .actions, .nav-group, .menu-btn { display:none !important; }
  .app, .app-main { display:block; }
  .app-main { padding:0 !important; }
  .content { padding:0 !important; }
  body { background:#fff; }
  .card { box-shadow:none; border:1px solid #cbd5e1; break-inside:avoid; }
  table.data { font-size:11px; }
  /* tampilkan SEMUA baris meski pagination menyembunyikan sebagian */
  table.data tbody tr[hidden] { display:table-row !important; }
  a { color:inherit; text-decoration:none; }
  .kpi { break-inside:avoid; }
}

/* Form section (label/desc kiri, field kanan 2 kolom) */
.form-section {
  display:grid; grid-template-columns:1fr; gap:1.5rem;
  padding:1.5rem 0; border-bottom:1px solid var(--slate-200);
}
/* Saat form-section jadi anak langsung .card (tanpa .card-body, mis. /pengaturan):
   beri padding horizontal agar isi tidak menempel ke tepi kartu. */
.card > .form-section { padding:1.5rem; }
.card > .form-section:first-child { padding-top:1.5rem; }
.form-section:first-child { padding-top:0; }
.form-section:last-of-type { border-bottom:0; }
.form-section .fs-head h3 { font-size:.875rem; font-weight:600; color:var(--slate-800); }
.form-section .fs-head p { margin-top:.25rem; font-size:.875rem; color:var(--slate-500); }
.form-section .fs-body { display:grid; grid-template-columns:1fr; gap:1rem; }
.field { display:flex; flex-direction:column; gap:.375rem; }
.field.col2 { grid-column:1 / -1; }
/* Baris checkbox + label (mis. setelan keamanan), membentang penuh. */
.check { display:flex; align-items:center; gap:.5rem; grid-column:1 / -1; font-size:.875rem; color:var(--slate-700); padding:.2rem 0; cursor:pointer; }
.check input { width:auto; height:auto; margin:0; }
/* Sub-judul di dalam panel detail + pembatas atas + form unggah dokumen. */
.sub-head { font-size:.8125rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-500); margin:0 0 .75rem; }
.bordered-top { border-top:1px solid var(--slate-100); }
.upload-form { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.upload-form select, .upload-form input[type=file] { width:auto; }
.field label { font-size:.875rem; font-weight:500; color:var(--slate-700); }
.field input, .field select, .field textarea {
  width:100%; padding:.625rem .75rem; font:inherit; font-size:.875rem; color:var(--slate-700);
  background:#fff; border:1px solid var(--slate-300); border-radius:var(--radius-md);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgb(59 130 246 / .2);
}
.field select { appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .625rem center; padding-right:2rem; }
.field .help { font-size:.75rem; color:var(--slate-400); }
.form-actions { display:flex; align-items:center; justify-content:flex-end; gap:.75rem; padding-top:1.5rem; }
.form-grid { display:grid; grid-template-columns:1fr; gap:1rem; }
.form-grid .col2 { grid-column:1 / -1; }
@media (min-width:640px) { .form-grid { grid-template-columns:1fr 1fr; } }

/* Definition list (detail) */
.dl { display:grid; grid-template-columns:1fr; gap:.875rem 1.5rem; }
.dl .dt { font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-400); }
.dl .dd { font-size:.875rem; color:var(--slate-800); margin-top:.125rem; }

/* Helper warna teks angka */
.t-pos { color:#047857; } .t-neg { color:#b91c1c; }

/* Detail nasabah: header + stat strip + tabs */
.detail-head { display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center; justify-content:space-between; padding:1.5rem; }
.detail-id { display:flex; align-items:center; gap:1rem; }
.detail-id .av { display:grid; place-items:center; height:64px; width:64px; border-radius:1rem; background:var(--brand-800); color:#fff; font-size:1.25rem; font-weight:700; flex-shrink:0; }
.detail-id h2 { font-size:1.25rem; font-weight:700; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.detail-id .meta { margin-top:.375rem; font-size:.875rem; color:var(--slate-500); }
.stat-strip { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--slate-200); border-top:1px solid var(--slate-200); }
.stat-strip .cell { background:#fff; padding:1rem 1.5rem; }
.stat-strip .l { font-size:.75rem; color:var(--slate-400); }
.stat-strip .v { margin-top:.25rem; font-size:1.125rem; font-weight:700; color:var(--slate-900); }
@media (min-width:640px) { .stat-strip { grid-template-columns:repeat(4,1fr); } }
.tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--slate-200); overflow-x:auto; padding:0 .75rem; }
.tab-btn { border:0; background:none; padding:.875rem 1rem; font:inherit; font-size:.875rem; font-weight:500; color:var(--slate-500); border-bottom:2px solid transparent; cursor:pointer; box-shadow:none; border-radius:0; white-space:nowrap; }
.tab-btn:hover { color:var(--slate-800); background:none; }
.tab-btn.active { color:var(--brand-800); border-bottom-color:var(--brand-800); background:none; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.doc-row { display:flex; align-items:center; justify-content:space-between; padding:.875rem 1.25rem; border-bottom:1px solid var(--slate-100); }
.doc-row:last-child { border-bottom:0; }
.doc-info { display:flex; align-items:center; gap:.75rem; }
.doc-row .ic { display:grid; place-items:center; height:36px; width:36px; border-radius:.5rem; background:#fef2f2; color:#dc2626; flex-shrink:0; }
.doc-row .ic svg { height:18px; width:18px; }
.doc-row .nm { font-size:.875rem; font-weight:500; color:var(--slate-800); }
.doc-row .dmeta { font-size:.75rem; color:var(--slate-400); }

/* Header rekening (gradient brand) untuk detail tabungan/deposito */
.acct-head {
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  padding:1.5rem; color:#fff;
  background:linear-gradient(135deg, var(--brand-800), var(--brand-900));
}
.acct-head .lbl { font-size:.75rem; font-weight:500; color:var(--brand-200); }
.acct-head .no { margin-top:.25rem; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:1.5rem; font-weight:700; letter-spacing:.02em; }
.acct-head .sub { margin-top:.5rem; font-size:.875rem; color:var(--brand-100); }
.acct-head .sub a { color:#fff; text-decoration:underline; text-underline-offset:2px; }
.acct-head .right { text-align:right; }
.acct-head .saldo { margin-top:.25rem; font-size:1.875rem; font-weight:800; }
.acct-head .pill { margin-top:.5rem; display:inline-flex; align-items:center; gap:.375rem; padding:.125rem .5rem; border-radius:var(--radius-sm); background:rgb(255 255 255 / .15); font-size:.75rem; font-weight:600; }
.acct-head .pill .dot { height:6px; width:6px; border-radius:9999px; background:#86efac; }

/* Toggle setor/tarik & form transaksi */
.seg-toggle { display:flex; gap:.25rem; padding:.25rem; border-radius:var(--radius-md); background:var(--slate-100); margin-bottom:1.25rem; }
.seg-toggle label { flex:1; }
.seg-toggle input { position:absolute; opacity:0; pointer-events:none; }
.seg-toggle .opt { display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.625rem 1rem; border-radius:var(--radius-sm); font-size:.875rem; font-weight:600; color:var(--slate-500); cursor:pointer; }
.seg-toggle input:checked + .opt { background:#fff; color:var(--brand-800); box-shadow:var(--shadow-card); }
.acct-summary { border-radius:var(--radius-md); background:var(--slate-50); padding:.875rem 1rem; font-size:.875rem; }
.acct-summary .row { display:flex; justify-content:space-between; padding:.25rem 0; }
.acct-summary .row .v { font-weight:600; color:var(--slate-800); }

/* Transaksi tabungan: form + slip */
.tx-grid { display:grid; gap:1.5rem; }
@media (min-width:1024px) { .tx-grid { grid-template-columns:1fr 1fr; align-items:start; } }
.req { color:var(--red-600,#dc2626); }
.acct-search { display:flex; align-items:flex-end; gap:.75rem; margin-bottom:1.25rem; }
.acct-search .field { flex:1; margin:0; }
.input-icon { position:relative; }
.input-icon svg { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); height:16px; width:16px; color:var(--slate-400); pointer-events:none; }
.input-icon input { padding-left:2.25rem; }
.acct-box { border-radius:var(--radius-md); background:var(--slate-50); padding:.875rem 1rem; font-size:.875rem; margin-bottom:1.25rem; }
.acct-box .row { display:flex; justify-content:space-between; padding:.25rem 0; }
.acct-box .row .l { color:var(--slate-500); }
.acct-box .row .v { font-weight:600; color:var(--slate-800); }
.acct-box .row .v.saldo { color:var(--brand-800); font-weight:700; }
.terbilang { margin:.4rem 0 0; font-size:.8125rem; font-style:italic; color:var(--slate-500); }

.slip { border:1px solid var(--slate-200); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-card); padding:1.5rem; }
.slip-head { display:flex; align-items:flex-start; justify-content:space-between; border-bottom:1px dashed var(--slate-300); padding-bottom:1rem; }
.slip-head .brand { display:flex; align-items:center; gap:.625rem; }
.slip-head .logo { display:grid; place-items:center; height:36px; width:36px; border-radius:var(--radius-md); background:var(--brand-800); color:#fff; }
.slip-head .logo svg { height:20px; width:20px; }
.slip-head .nm { font-size:.875rem; font-weight:700; color:var(--slate-900); }
.slip-head .sub { font-size:.6875rem; color:var(--slate-400); }
.slip-head .jenis { text-align:right; }
.slip-head .jenis p:first-child { font-size:.875rem; font-weight:700; }
.slip-head .jenis .setor { color:#047857; }
.slip-head .jenis .tarik { color:#c2410c; }
.slip-rows { padding:1rem 0; display:grid; gap:.625rem; font-size:.875rem; }
.slip-rows .row { display:flex; justify-content:space-between; }
.slip-rows .row .l { color:var(--slate-500); }
.slip-rows .row .v { font-weight:500; color:var(--slate-800); }
.slip-amount { border-top:1px dashed var(--slate-300); border-bottom:1px dashed var(--slate-300); padding:1rem 0; }
.slip-amount .row { display:flex; align-items:flex-end; justify-content:space-between; }
.slip-amount .row .l { font-size:.875rem; color:var(--slate-500); }
.slip-amount .amt { font-size:1.5rem; font-weight:800; color:var(--slate-900); }
.slip-saldo { display:flex; justify-content:space-between; padding-top:1rem; font-size:.875rem; }
.slip-saldo .l { color:var(--slate-500); }
.slip-saldo .v { font-weight:700; color:var(--brand-800); }
.slip-sign { margin-top:2rem; display:grid; grid-template-columns:1fr 1fr; gap:2rem; text-align:center; font-size:.75rem; color:var(--slate-400); }
.slip-sign .line { display:block; height:2.5rem; border-bottom:1px solid var(--slate-300); margin-bottom:.25rem; }

/* Bilyet deposito */
.bilyet { position:relative; overflow:hidden; border:2px solid var(--brand-800); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-card); margin-bottom:1.25rem; }
.bilyet::before { content:""; position:absolute; inset:0; opacity:.03; pointer-events:none;
  background-image:repeating-linear-gradient(45deg, var(--brand-800) 0, var(--brand-800) 1px, transparent 1px, transparent 12px); }
.bilyet .b-top { position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1.25rem 2rem; background:var(--brand-50); border-bottom:2px dashed var(--brand-200); }
.bilyet .b-top .logo { display:grid; place-items:center; height:44px; width:44px; border-radius:var(--radius-md); background:var(--brand-800); color:#fff; }
.bilyet .b-top .bank { font-size:1rem; font-weight:800; color:var(--slate-900); }
.bilyet .b-top .kind { font-size:.75rem; color:var(--slate-500); }
.bilyet .b-top .no-l { font-size:.75rem; color:var(--slate-400); text-align:right; }
.bilyet .b-top .no-v { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:1.125rem; font-weight:700; color:var(--brand-800); }
.bilyet .b-body { position:relative; display:grid; grid-template-columns:1fr; gap:.75rem 2.5rem; padding:1.5rem 2rem; }
@media (min-width:640px) { .bilyet .b-body { grid-template-columns:1fr 1fr; } }
.bilyet .b-row { display:flex; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--slate-100); padding-bottom:.5rem; }
.bilyet .b-row .l { font-size:.875rem; color:var(--slate-500); }
.bilyet .b-row .v { font-size:.875rem; font-weight:600; color:var(--slate-800); }
.bilyet .b-nominal { position:relative; padding:1.5rem 2rem; background:var(--slate-50); border-top:2px dashed var(--brand-200); }
.bilyet .b-nominal .l { font-size:.75rem; color:var(--slate-400); }
.bilyet .b-nominal .v { margin-top:.25rem; font-size:1.875rem; font-weight:800; color:var(--brand-800); }
.bilyet .b-nominal .terbilang { margin-top:.5rem; font-size:.875rem; font-style:italic; color:var(--slate-600); }
.note { margin:.875rem 0 0; font-size:.8125rem; color:var(--slate-500); }

/* Progress bar (pelunasan kredit) — pakai <progress> agar tanpa inline style (CSP) */
.pbar { width:100%; height:10px; border:0; border-radius:9999px; appearance:none; -webkit-appearance:none; background:var(--slate-100); overflow:hidden; }
.pbar::-webkit-progress-bar { background:var(--slate-100); border-radius:9999px; }
.pbar::-webkit-progress-value { background:var(--brand-700); border-radius:9999px; }
.pbar::-moz-progress-bar { background:var(--brand-700); border-radius:9999px; }
.pbar-row { display:flex; justify-content:space-between; font-size:.75rem; margin-bottom:.375rem; }
.pbar-row .v { font-weight:600; color:var(--slate-700); }
.pbar-wrap { padding:1rem 1.5rem; border-top:1px solid var(--slate-200); }

/* Kartu kolektibilitas (grid 2/5) */
.kol-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:1.25rem; }
@media (min-width:1024px) { .kol-grid { grid-template-columns:repeat(4,1fr); } }
.kol-grid .card { margin-bottom:0; }
.kol-grid .card .card-body { padding:1rem 1.25rem; }
.kol-grid .v { margin-top:.625rem; font-size:1.125rem; font-weight:700; color:var(--slate-900); }
.kol-grid .c { margin-top:.125rem; font-size:.75rem; color:var(--slate-400); }

/* ============================================================
   Tombol
   ============================================================ */
button, .btn, .admin button, .form-inline button {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.5rem 1rem; border-radius:var(--radius-md); border:0; cursor:pointer;
  font:inherit; font-size:.875rem; font-weight:600; line-height:1.2;
  background:var(--brand-800); color:#fff; box-shadow:var(--shadow-card);
  transition:background .12s;
}
button:hover, .btn:hover, .admin button:hover, .form-inline button:hover { background:var(--brand-900); }
.btn-secondary {
  background:#fff; color:var(--slate-700); box-shadow:inset 0 0 0 1px var(--slate-300);
}
.btn-secondary:hover { background:var(--slate-50); }
.btn-ghost { background:none; color:var(--slate-600); box-shadow:none; }
.btn-ghost:hover { background:var(--slate-100); }
.btn-danger { background:#dc2626; }
.btn-danger:hover { background:#b91c1c; }
.btn svg, button svg { height:16px; width:16px; }

/* ============================================================
   Form
   ============================================================ */
.form-row { display:flex; flex-direction:column; gap:.375rem; margin:.75rem 0; max-width:30rem; }
.form-row label { font-size:.875rem; font-weight:500; color:var(--slate-700); }
.form-row input, .form-row select, .form-row textarea,
.form-inline input, .form-inline select {
  width:100%; padding:.625rem .75rem; font:inherit; font-size:.875rem; color:var(--slate-700);
  background:#fff; border:1px solid var(--slate-300); border-radius:var(--radius-md);
  transition:border-color .12s, box-shadow .12s;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus,
.form-inline input:focus, .form-inline select:focus, .auth input:focus, .auth select:focus {
  outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgb(59 130 246 / .2);
}
.form-row select, .form-inline select { appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .625rem center; padding-right:2rem;
}
.card form button, .form-row + button { margin-top:.25rem; }
.form-inline {
  display:flex; align-items:flex-end; gap:.625rem; flex-wrap:wrap; margin-bottom:1rem;
}
.form-inline label { font-size:.8125rem; color:var(--slate-600); }
.form-inline button { margin:0; }

/* ============================================================
   Flash
   ============================================================ */
.flash, .flash.error {
  display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem; margin-bottom:1.25rem;
  border-radius:var(--radius-md); font-size:.875rem;
}
.flash { background:#ecfdf5; color:#065f46; box-shadow:inset 0 0 0 1px rgb(5 150 105 / .2); }
.flash.error { background:#fef2f2; color:#991b1b; box-shadow:inset 0 0 0 1px rgb(220 38 38 / .2); }
.flash.warn { background:#fffbeb; color:#92400e; box-shadow:inset 0 0 0 1px rgb(217 119 6 / .25); }
.ojk-card .ojk-foot { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--slate-100); margin-top:1rem; padding-top:.75rem; font-size:.75rem; }
.ojk-card .ojk-foot .l { color:var(--slate-400); }
.ojk-card .ojk-foot .v { font-weight:600; color:var(--slate-700); }
.ojk-card .desc { margin:.75rem 0 0; font-size:.875rem; line-height:1.6; color:var(--slate-500); }

/* ============================================================
   Auth (login / ganti password / TOTP)
   ============================================================ */
.auth-split { display:grid; min-height:100vh; grid-template-columns:1fr; }
.auth-brand { display:none; }
.auth-form { display:flex; align-items:center; justify-content:center; padding:3rem 1.5rem; }
.auth-card { width:100%; max-width:24rem; }
.auth-card .mlogo {
  display:grid; place-items:center; height:48px; width:48px; border-radius:var(--radius);
  background:var(--brand-800); color:#fff; margin-bottom:2rem;
}
.auth-card .mlogo svg { height:24px; width:24px; }
.auth-card h1 { font-size:1.5rem; font-weight:700; letter-spacing:-.01em; }
.auth-card .lead { margin-top:.375rem; font-size:.875rem; color:var(--slate-500); }
.auth-card form { margin-top:2rem; display:flex; flex-direction:column; gap:1.25rem; }
.auth-card label { display:block; font-size:.875rem; font-weight:500; color:var(--slate-700); margin-bottom:.375rem; }
.auth-card input, .auth-card select {
  width:100%; padding:.625rem .75rem; font:inherit; font-size:.875rem; color:var(--slate-700);
  background:#fff; border:1px solid var(--slate-300); border-radius:var(--radius-md);
}
.auth-card button { width:100%; padding:.625rem; margin-top:.25rem; }
.auth-card .error, .auth .error { color:#b91c1c; font-size:.875rem; background:#fef2f2; padding:.625rem .75rem; border-radius:var(--radius-md); margin-top:1.25rem; }
.auth-card .mlogo svg { height:24px; width:24px; }
.auth-card .hint {
  margin-top:1.5rem; display:flex; gap:.5rem; padding:.75rem; border-radius:var(--radius-md);
  background:var(--slate-100); font-size:.75rem; color:var(--slate-500);
}

/* ---------- OTP segmented input ---------- */
.otp { display:flex; gap:.625rem; justify-content:center; margin:.25rem 0 .25rem; }
.otp-box {
  width:3rem; height:3.5rem; text-align:center; font-size:1.5rem; font-weight:700;
  color:var(--slate-800); background:#fff; border:1px solid var(--slate-300);
  border-radius:var(--radius-md); transition:border-color .12s, box-shadow .12s;
  -moz-appearance:textfield;
}
.otp-box::-webkit-outer-spin-button, .otp-box::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.otp-box:focus { outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgb(59 130 246 / .2); }
.otp-box.filled { border-color:var(--brand-500); background:var(--brand-50); }
.otp-form .hint { text-align:center; font-size:.8125rem; color:var(--slate-500); margin-top:.25rem; }
.qr { display:flex; justify-content:center; margin:1rem 0; }

/* Kartu verifikasi OTP (modern, terpusat) */
.auth-card.auth-otp { text-align:center; }
.auth-card.auth-otp .mlogo { margin-left:auto; margin-right:auto; }
.auth-card .mlogo.mlogo-shield { background:#ecfdf5; color:#047857; }
.auth-card.auth-otp .hint { justify-content:center; align-items:center; }
.auth-card .hint .hint-ic { height:14px; width:14px; flex-shrink:0; }
.auth-back { display:inline-flex; align-items:center; gap:.375rem; margin-top:1.5rem; font-size:.8125rem; color:var(--slate-500); text-decoration:none; }
.auth-back:hover { color:var(--brand-700); }
.auth-back svg { height:15px; width:15px; }
.qr svg { width:180px; height:180px; border:1px solid var(--slate-200); border-radius:var(--radius-md); padding:.5rem; background:#fff; }

/* fallback layout lama .auth tetap rapi */
.auth { max-width:24rem; margin:4rem auto; padding:2rem; }
.auth h1 { font-size:1.5rem; margin-bottom:1rem; }
.auth form { display:flex; flex-direction:column; gap:1rem; }
.auth label { display:flex; flex-direction:column; gap:.375rem; font-size:.875rem; color:var(--slate-700); }
.auth input, .auth select { padding:.625rem .75rem; border:1px solid var(--slate-300); border-radius:var(--radius-md); font:inherit; }

/* dashboard charts & grid */
.chart-box { position:relative; height:18rem; }
/* Dua chart berdampingan (mis. analitik nasabah); menumpuk di layar sempit. */
.chart-2 { display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:1rem; }
@media (min-width:1024px) { .chart-2 { grid-template-columns:1fr 1fr; } }
.dash-grid { display:grid; grid-template-columns:1fr; gap:1rem; margin-bottom:1rem; }
@media (min-width:1024px) { .dash-grid.c3 { grid-template-columns:2fr 1fr; } .dash-grid.c3b { grid-template-columns:1fr 2fr; } }

/* dashboard module grid (index) */
.mod-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.25rem; }
.mod-card { background:#fff; border:1px solid var(--slate-200); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:1.25rem; }
.mod-card h2 { display:flex; align-items:center; gap:.625rem; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--slate-700); margin-bottom:.75rem; }
.mod-card h2 .ic { display:grid; place-items:center; height:32px; width:32px; border-radius:var(--radius-md); }
.mod-card .lnk { display:flex; align-items:center; justify-content:space-between; padding:.5rem .625rem; border-radius:var(--radius-sm); }
.mod-card .lnk:hover { background:var(--slate-50); }
.mod-card .lnk .t { font-size:.875rem; font-weight:600; color:var(--slate-800); }
.mod-card .lnk:hover .t { color:var(--brand-800); }
.mod-card .lnk svg { height:16px; width:16px; color:var(--slate-300); }
.mod-card .lnk-soon { cursor:default; }
.mod-card .lnk-soon:hover { background:transparent; }
.mod-card .lnk-soon .t { color:var(--slate-400); }

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width:640px) {
  .form-section .fs-body { grid-template-columns:1fr 1fr; }
  .dl { grid-template-columns:auto 1fr; align-items:baseline; }
  .dl .dd { margin-top:0; }
}
@media (min-width:1024px) {
  .form-section { grid-template-columns:1fr 2fr; }
}

@media (max-width:1024px) {
  .app-main { padding-left:0; }
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .sidebar-overlay.show { display:block; }
  .topbar .menu-btn { display:grid; }
}
@media (min-width:1024px) {
  .auth-split { grid-template-columns:1fr 1fr; }
  .auth-brand {
    display:flex; flex-direction:column; justify-content:space-between; position:relative;
    overflow:hidden; padding:3rem; color:#fff;
    /* Foto BPR + overlay gradient biru brand (tetap on-brand & teks terbaca). */
    background:
      linear-gradient(140deg, rgb(30 58 138 / .88) 0%, rgb(30 64 175 / .80) 50%, rgb(23 37 84 / .92) 100%),
      url("/static/login-bg.jpg") center / cover no-repeat;
  }
  .auth-brand .blob { position:absolute; border-radius:9999px; pointer-events:none; mix-blend-mode:overlay; }
  .auth-brand .blob1 { right:-6rem; top:-6rem; height:20rem; width:20rem; background:rgb(59 130 246 / .35); }
  .auth-brand .blob2 { bottom:-8rem; left:-4rem; height:24rem; width:24rem; background:rgb(30 58 138 / .45); }
  .auth-brand .b-top { position:relative; display:flex; align-items:center; gap:.75rem; }
  .auth-brand .b-logo { display:grid; place-items:center; height:44px; width:44px; border-radius:var(--radius); background:rgb(255 255 255 / .15); box-shadow:inset 0 0 0 1px rgb(255 255 255 / .2); }
  .auth-brand .b-logo svg { height:24px; width:24px; }
  .auth-brand .bt-name { font-weight:700; }
  .auth-brand .bt-sub { font-size:.75rem; color:var(--brand-200); }
  .auth-brand .b-mid { position:relative; }
  .auth-brand .b-mid h2 { color:#fff; font-size:1.875rem; font-weight:700; line-height:1.2; max-width:28rem; }
  .auth-brand .b-mid p { margin-top:1rem; max-width:28rem; font-size:.875rem; color:var(--brand-100); }
  .auth-brand .b-foot { position:relative; font-size:.75rem; color:var(--brand-200); }
}