/* =========================================================================
   Design token m-banking BPR - identik dengan token Flutter (app_colors.dart)
   Dipakai di web/Demo Console CI4 agar tampilan konsisten lintas platform.
   ========================================================================= */
:root {
  /* Warna */
  --primary-900:#04352C; --primary-700:#0A5A4B; --primary-500:#10897A;
  --primary-300:#5FBCA9; --primary-100:#DCF0EB;
  --accent-500:#E8A33D; --accent-100:#FCEFD6;
  --ink-900:#0E1A24; --ink-700:#33424E; --ink-500:#6B7A87; --ink-300:#AEB9C2;
  --line:#E6EAEE; --surface:#FFFFFF; --bg:#F5F7F9;
  --success:#1E9E6A; --danger:#E0503A; --warning:#E8A33D; --info:#2F80ED;

  /* Radius & bayangan */
  --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:28px;
  --shadow-card:0 4px 16px rgba(14,26,36,.06);
  --shadow-brand:0 12px 30px rgba(10,90,75,.28);

  /* Override variabel Bootstrap 5 */
  --bs-primary:#10897A;
  --bs-body-color:#33424E;
  --bs-body-bg:#F5F7F9;
  --bs-body-font-family:'Inter',system-ui,sans-serif;
  --bs-border-color:#E6EAEE;
  --bs-border-radius:12px;
}

body { background:var(--bg); color:var(--ink-700); }

h1,h2,h3,h4,.h-display {
  font-family:'Plus Jakarta Sans',sans-serif;
  color:var(--ink-900); font-weight:700; letter-spacing:-.01em;
}

.num { font-variant-numeric:tabular-nums; }
.text-muted-2 { color:var(--ink-500) !important; }
.label-micro { font-size:.7rem; font-weight:600; letter-spacing:.4px;
  text-transform:uppercase; color:var(--ink-500); }

/* Tombol utama - selaras mobile */
.btn-primary {
  --bs-btn-bg:var(--primary-500); --bs-btn-border-color:var(--primary-500);
  --bs-btn-hover-bg:var(--primary-700); --bs-btn-hover-border-color:var(--primary-700);
  --bs-btn-active-bg:var(--primary-900);
  border-radius:var(--r-lg); font-weight:600; padding:.7rem 1.25rem;
  transition:transform .15s cubic-bezier(.2,.8,.2,1), background .22s ease;
}
.btn-primary:active { transform:scale(.98); }

.btn-accent {
  background:var(--accent-500); color:#3a2a06; border:none;
  border-radius:var(--r-lg); font-weight:600; padding:.7rem 1.25rem;
}
.btn-accent:hover { background:#d9942f; color:#3a2a06; }

.btn-outline-brand {
  border:1px solid var(--line); color:var(--primary-700); background:var(--surface);
  border-radius:var(--r-lg); font-weight:600; padding:.6rem 1.1rem;
}
.btn-outline-brand:hover { border-color:var(--primary-300); color:var(--primary-700); }

/* Kartu umum */
.card-soft {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--shadow-card);
}

/* Kartu saldo - signature, sama seperti mobile */
.card-balance {
  background:linear-gradient(135deg,#0A5A4B 0%,#10897A 55%,#063D33 100%);
  color:#fff; border-radius:var(--r-2xl); box-shadow:var(--shadow-brand);
  padding:1.5rem 1.5rem 1.25rem;
}
.card-balance .amount {
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;
  font-size:2rem; font-variant-numeric:tabular-nums;
}
.card-balance .label { color:rgba(255,255,255,.75); font-size:.8rem; }

/* Chip / badge */
.chip {
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--primary-100); color:var(--primary-700);
  border-radius:999px; padding:.25rem .7rem; font-size:.78rem; font-weight:600;
}
.chip-accent { background:var(--accent-100); color:#8a5a12; }

/* Baris transaksi */
.tx-row { display:flex; align-items:center; gap:.85rem; padding:.85rem 0; border-bottom:1px solid var(--line); }
.tx-row:last-child { border-bottom:none; }
.tx-ico { width:42px; height:42px; border-radius:12px; background:var(--primary-100);
  color:var(--primary-700); display:grid; place-items:center; flex:0 0 auto; }
.tx-meta { flex:1 1 auto; min-width:0; }
.tx-title { font-weight:600; color:var(--ink-900); }
.tx-sub { font-size:.8rem; color:var(--ink-500); }
.tx-amount.credit { color:var(--success); font-weight:600; white-space:nowrap; }
.tx-amount.debit  { color:var(--danger);  font-weight:600; white-space:nowrap; }

/* Input */
.form-control, .form-select {
  border-radius:var(--r-md); border-color:var(--line); padding:.7rem .9rem;
}
.form-control:focus, .form-select:focus {
  border-color:var(--primary-300);
  box-shadow:0 0 0 3px rgba(16,137,122,.15);
}

/* Topbar demo */
.demo-topbar { background:var(--primary-700); color:#fff; }
.demo-topbar .brand { font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; }
.demo-badge { background:rgba(255,255,255,.14); color:#fff; border-radius:999px;
  padding:.2rem .65rem; font-size:.72rem; font-weight:600; letter-spacing:.3px; }

.code-inline { background:#0e1a24; color:#dcf0eb; border-radius:8px;
  padding:.15rem .45rem; font-size:.82rem; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}