/* =====================================================================
   TEMPU-TRACE PWA — Stylesheet
   Hybrid: minimalis utility (workflow) + earth accent (header/identity)
   ===================================================================== */

:root {
  /* Layer 1 — workflow palette (modern slate) */
  --bg-base: #FFFFFF;
  --bg-soft: #F8FAFC;
  --bg-subtle: #F1F5F9;
  --bg-muted: #E2E8F0;
  --border: #E5E9F0;
  --text-primary: #0F172A;
  --text-secondary: #5B6675;
  --accent: #0F766E;
  --accent-strong: #0B5B55;
  --accent-soft: #CCFBF1;
  --accent-ring: rgba(15, 118, 110, 0.20);
  --success: #16A34A;
  --warning: #CA8A04;
  --danger: #DC2626;
  --info: #0284C7;

  /* Layer 2 — brand accent (earth-tone tradisional) */
  --brand-coconut: #5D3A1F;
  --brand-coconut-soft: #A47551;
  --brand-leaf: #3F6F40;
  --brand-gold: #C8A664;
  --brand-cream: #F4ECD8;

  /* Bayangan berlapis (lebih modern & lembut) */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px -4px rgba(15, 23, 42, 0.12), 0 2px 6px -3px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 16px 40px -12px rgba(15, 23, 42, 0.22);
  --radius-sm: 8px;
  --radius: 11px;
  --radius-lg: 16px;
}

/* ----- Kotak bantuan (penjelasan fungsi halaman) ----- */
.help-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--brand-cream);
  border: 1px solid var(--brand-gold);
  border-left: 4px solid var(--brand-gold);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: #5a4424;
}
.help-box__icon { font-size: 20px; line-height: 1.2; flex-shrink: 0; }
.help-box__text { flex: 1; }
.help-box__text strong { color: var(--brand-coconut); }
.help-box__close {
  background: none; border: none; color: var(--brand-coconut);
  font-size: 18px; font-weight: 700; line-height: 1; padding: 2px 6px; flex-shrink: 0;
  cursor: pointer;
}
.help-box__close:hover { color: #000; }

/* ----- Tooltip ikon info (sentuh/ketuk untuk penjelasan) ----- */
.tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--info);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  margin-left: 5px;
  user-select: none;
}
.tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%; top: 150%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  width: max-content;
  max-width: 240px;
  white-space: normal;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms;
  z-index: 200;
}
.tip:hover::after, .tip.tip--open::after { opacity: 1; }

/* ----- Mode Simpel: app bar (sticky) + bottom tab bar ----- */
.simple-top {
  background: linear-gradient(135deg, var(--brand-coconut), var(--brand-coconut-soft));
  color: var(--brand-cream);
  padding: 10px 16px;
  position: sticky; top: 0; z-index: 30;
  box-shadow: var(--shadow-md);
}
/* isi app bar disejajarkan dengan lebar konten halaman → Keluar rata kanan konten */
.simple-top__inner {
  max-width: none; margin: 0 auto; width: 100%; position: relative;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 28px;   /* ruang utk indikator koneksi di bawah bar */
}
.simple-top__brand { font-weight: 700; }
.simple-top nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.simple-top nav a {
  color: var(--brand-cream); text-decoration: none; font-size: 14px;
  padding: 6px 14px; border-radius: 999px; transition: background .15s ease, color .15s ease;
}
.simple-top nav a:hover { background: rgba(244,236,216,0.22); text-decoration: none; }
/* item aktif: pil emas yang jelas → mudah terlihat berpindah antar halaman */
.simple-top nav a.active { background: var(--brand-gold); color: var(--brand-coconut); font-weight: 700; }
/* tombol Keluar selalu rata kanan (termasuk di HP saat tautan nav disembunyikan) */
.simple-top .btn-back { margin-left: auto; }
/* Lebar konten mengikuti layar (adaptif) — penuh dgn padding, tak dibatasi tengah. */
.simple-wrap { max-width: none; margin: 0 auto; padding: 20px; }
/* Layar login (semua peran) seragam — tanpa ruang bawah tab bar. */
.simple-wrap--login, .has-bottom-nav .simple-wrap--login { padding-bottom: 24px; }
/* Footer copyright pada layar login rapat ke bawah (abaikan ruang tab bar),
   agar header & footer login loket/pedagang sama persis dgn login admin. */
body:has(.simple-wrap--login) .app-copyright { margin-bottom: 24px !important; }

/* Tabel responsif: bisa digeser horizontal tanpa merusak layout */
.tbl-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); }
.tbl-wrap .tbl { box-shadow: none; }
.tbl th.dt-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.tbl th.dt-sort:hover { color: var(--text-primary); }

/* Bottom tab bar (gaya Android) */
.tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--bg-base); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.10);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tabbar--always { display: flex; }   /* selalu tampil (pedagang & loket) */
.tabbar__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; font-size: 11px; color: var(--text-secondary);
  text-decoration: none; min-width: 0;
}
.tabbar__item.active { color: var(--accent); font-weight: 600; }
.tabbar__item:active { background: var(--bg-soft); }
.tabbar__icon { font-size: 21px; line-height: 1; }
/* Tombol tengah menonjol (Scan QR) ala mobile banking */
.tabbar__item--center {
  justify-content: flex-end; overflow: visible; gap: 0;
  color: var(--primary, #5D3A1F); font-weight: 700;
}
.tabbar__fab {
  position: relative; top: -22px; margin-bottom: -18px;
  width: 60px; height: 60px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(140deg, var(--primary, #5D3A1F), var(--brand-coconut-soft, #A47551));
  border: 4px solid var(--bg-base);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.tabbar__item--center:active .tabbar__fab { transform: scale(0.94); }
.tabbar__fab svg { width: 28px; height: 28px; }
.tabbar__fablabel { font-size: 11px; }
/* Ikon SVG di dalam tab biasa */
.tabbar__icon svg { width: 22px; height: 22px; display: block; }
/* Halaman dengan bottom nav permanen: beri ruang bawah agar tak tertutup */
.has-bottom-nav .simple-wrap, .has-bottom-nav .view-vendor { padding-bottom: 90px; }
/* Bar bawah admin selalu tampil → beri ruang agar konten tak tertutup (desktop & HP) */
body:has(.tabbar--always) .simple-wrap { padding-bottom: 96px; }

/* ====== Penyesuaian mobile (HP) ====== */
@media (max-width: 767px) {
  .simple-top .simple-top__links { display: none; }
  .tabbar { display: flex; }                    /* pengelola: tab bar muncul di HP */
  .simple-wrap { padding: 14px 14px 90px; }
  .view-vendor { padding: 14px 14px 90px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .toolbar .btn, .toolbar .field { width: auto; }
  .card { padding: 16px; }
  h1 { font-size: 22px; }
  h2 { font-size: 18px; }
  .report-total { display: block; margin: 4px 0; }
}

/* ----- Scan beruntun (pedagang) ----- */
.viewfinder { position: relative; }
.scan-tally {
  background: var(--brand-cream);
  border: 1px solid var(--brand-gold);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin: 0 0 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-coconut);
}
.scan-toast {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  min-width: 70%;
  max-width: 92%;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  z-index: 5;
}
.scan-toast--ok  { background: rgba(22,163,74,0.95); }
.scan-toast--err { background: rgba(220,38,38,0.95); }
.scan-toast--info { background: rgba(2,132,199,0.95); }
.scan-toast small { display: block; font-weight: 400; font-size: 12px; margin-top: 2px; opacity: 0.95; }

/* ----- Laporan / cetak (halaman pedagang) ----- */
.report-total {
  display: inline-block;
  background: var(--bg-soft);
  border: 1px solid var(--bg-muted);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin: 4px 8px 4px 0;
  font-size: 14px;
}
.report-total strong { font-size: 18px; display: block; }
.print-only { display: none; }
@media print {
  .app-header, .no-print, .help-box, .menu-list, .scan-btn { display: none !important; }
  body { background: #fff; }
  .print-only { display: block; }
  @page { margin: 12mm; }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Roboto", "Noto Sans", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-primary);
  background: var(--bg-subtle);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { letter-spacing: -0.015em; line-height: 1.25; }
h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-soft); }

/* App shell */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.app-shell main { flex: 1; }

/* ----- Header (earth accent) ----- */
.app-header--brand {
  background: linear-gradient(135deg, var(--brand-coconut) 0%, var(--brand-coconut-soft) 100%);
  border-bottom: 2px solid var(--brand-gold);
  color: var(--brand-cream);
  position: relative;
  overflow: hidden;
}
.app-header--brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(244, 236, 216, 0.08) 0, transparent 25%),
    radial-gradient(circle at 80% 70%, rgba(244, 236, 216, 0.08) 0, transparent 25%);
  pointer-events: none;
}
.app-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 30px;   /* ruang bawah utk indikator koneksi */
  max-width: none;
  margin: 0 auto;
  position: relative;
}
.app-logo { font-weight: 700; font-size: 18px; letter-spacing: 0.02em; }
/* Versi diletakkan di bawah teks "TEMPU TRACER" */
.app-logo--stack { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; gap: 1px; }
.app-logo--stack .hdr-ver { margin-left: 0; margin-top: 3px; }
.app-tag { font-size: 12px; opacity: 0.85; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  font-weight: 600;
  background: var(--bg-base);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--bg-soft); border-color: var(--bg-muted); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn--danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn--danger:hover { background: #B91C1C; border-color: #B91C1C; }
.btn--block { width: 100%; }
.btn--lg { min-height: 58px; font-size: 17px; border-radius: var(--radius-lg); }
.btn--ghost {
  background: transparent;
  border-color: var(--bg-muted);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--bg-soft); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: var(--shadow-sm); }

/* ----- Forms ----- */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--bg-muted);
  border-radius: var(--radius);
  background: var(--bg-base);
  color: var(--text-primary);
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.field input::placeholder, .field textarea::placeholder { color: #94A3B8; }

/* Tampilan nominal (read-only) — mis. Uang diterima di loket */
.amount-display {
  font-size: 30px; font-weight: 800; letter-spacing: -0.02em;
  color: #0F8A4F;
  background: rgba(16,138,79,0.10);
  border: 1px solid rgba(16,138,79,0.30);
  border-radius: var(--radius);
  padding: 12px 16px; text-align: center; line-height: 1.1;
}
.theme-dark .amount-display { color: #4ADE80; background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.30); }

/* Penanda "Edited" untuk transaksi yang pernah diedit — di baris terpisah agar rapi */
.edited-line { display: block; margin-top: 3px; }
.badge-edited {
  display: inline-block; vertical-align: middle;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #B45309; background: rgba(245,158,11,0.16); border: 1px solid rgba(245,158,11,0.45);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
.theme-dark .badge-edited { color: #FBBF24; background: rgba(245,158,11,0.18); border-color: rgba(245,158,11,0.5); }

/* ----- Cards / Panel ----- */
.card {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-md);
}
.card--brand {
  background: linear-gradient(135deg, var(--brand-cream), #FFF8E6);
  border-color: var(--brand-gold);
}

/* ----- Misc ----- */
.muted { color: var(--text-secondary); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.center { text-align: center; }
.stack > * + * { margin-top: 12px; }

/* ----- Status pill ----- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-muted);
}
.pill::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.pill--ok { color: var(--success); background: #DCFCE7; }
.pill--warn { color: var(--warning); background: #FEF3C7; }
.pill--err { color: var(--danger); background: #FEE2E2; }
.pill--info { color: var(--info); background: #DBEAFE; }

/* ====================================================================
   Role Picker (index)
   ==================================================================== */
.role-picker {
  max-width: none;        /* menyesuaikan lebar layar (adaptif) */
  margin: 0 auto;
  padding: 32px 16px;
}
/* Latar foto "Pasar Kamu" di belakang kartu pilih peran — responsif + gradien semi-transparan */
.role-picker__photo {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(245,238,222,0.80) 0%, rgba(245,238,222,0.80) 100%),
    url("../icons/bg-pasarkamu.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
.theme-dark .role-picker__photo {
  background-image:
    linear-gradient(180deg, rgba(20,15,10,0.90) 0%, rgba(20,15,10,0.90) 100%),
    url("../icons/bg-pasarkamu.jpg");
}
.role-picker__title { margin: 0 0 4px; font-size: 28px; }
.role-picker__sub { margin: 0 0 24px; color: var(--text-secondary); }
.role-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
/* 3 kartu peran: 1 kolom di HP, langsung 3 kolom saat cukup lebar
   (hindari 2 kolom yang menyisakan 1 kartu menggantung). */
@media (min-width: 760px) {
  .role-grid { grid-template-columns: repeat(3, 1fr); }
}
.role-card {
  display: block;
  padding: 22px;
  min-height: 158px;
  border-radius: var(--radius-lg);
  border: none;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(38, 22, 10, 0.18);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(135deg, var(--brand-coconut), var(--brand-coconut-soft));
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.role-card--vendor    { background: linear-gradient(140deg, #1E7A46 0%, #43A35F 55%, #7CC57E 100%); }
.role-card--loket     { background: linear-gradient(140deg, #A85423 0%, #D2802F 55%, #ECB64C 100%); }
.role-card--pengelola { background: linear-gradient(140deg, #0E6E6E 0%, #2E9E8F 55%, #67C3A9 100%); }
/* Ilustrasi pedesaan di SISI KANAN kartu — memudar (pekat → transparan) ke kiri */
.role-card__bg {
  position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: 60%;
  color: #fff; opacity: 0.5; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 20%, transparent 90%);
  mask-image: linear-gradient(to left, #000 20%, transparent 90%);
}
.role-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(38, 22, 10, 0.28);
  text-decoration: none;
}
.role-card:hover .role-card__bg { opacity: 0.62; transition: opacity 160ms ease; }
.role-card__title { position: relative; z-index: 1; max-width: 66%; font-size: 26px; font-weight: 800; margin: 2px 0 8px; color: #fff; letter-spacing: -0.01em; }
.role-card__desc { position: relative; z-index: 1; max-width: 64%; font-size: 13.5px; color: rgba(255, 255, 255, 0.94); line-height: 1.45; }
.role-picker__footer { text-align: center; margin-top: 32px; font-size: 12px; }

/* ====================================================================
   Pedagang screens
   ==================================================================== */
.view-vendor {
  max-width: none;           /* adaptif — mengikuti lebar layar */
  margin: 0 auto;
  padding: 20px;
}
.view-vendor h1 { font-size: 22px; margin: 0 0 16px; }
/* Kolom scan tetap ringkas & terpusat di dalam halaman lebar (mirip kartu form loket) */
.vendor-narrow { max-width: none; margin: 0 auto; }
/* Kotak kamera tetap proporsional walau halaman mengikuti lebar layar. */
.vendor-narrow .viewfinder { max-width: 520px; margin-left: auto; margin-right: auto; }
/* Saat layar login pedagang: samakan persis dengan login petugas (pakai .simple-wrap di dalamnya) */
.view-vendor.as-staff { max-width: none; margin: 0; padding: 0; }

/* Saldo display */
.saldo-card {
  background: linear-gradient(135deg, var(--brand-cream) 0%, #FFF8E1 100%);
  border: 1px solid var(--brand-gold);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  margin-bottom: 16px;
}
.saldo-label {
  font-size: 14px;
  color: var(--brand-coconut);
  font-weight: 500;
  margin-bottom: 4px;
}
.saldo-amount {
  font-size: 44px;
  font-weight: 700;
  color: var(--brand-coconut);
  line-height: 1.1;
}
.saldo-meta {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 6px;
}

/* Scan button */
.scan-btn {
  width: 100%;
  min-height: 104px;
  background: linear-gradient(135deg, #12a093, var(--accent));
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -8px rgba(15, 118, 110, 0.6);
  transition: transform .12s ease, box-shadow .15s ease;
}
.scan-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(15, 118, 110, 0.7); }
.scan-btn:active { transform: translateY(0); }
.scan-btn__icon { font-size: 28px; }
.scan-btn__hint { font-size: 13px; font-weight: 400; opacity: 0.85; }

/* Menu list */
.menu-list { margin-top: 16px; }
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--bg-muted);
  color: inherit;
  text-decoration: none;
}
.menu-item:hover { background: var(--bg-soft); text-decoration: none; }
.menu-item__chev { color: var(--text-secondary); }

/* Status banner */
.banner {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  margin-bottom: 12px;
}
.banner--warn { background: #FEF3C7; color: #78350F; border: 1px solid #FCD34D; }
.banner--err { background: #FEE2E2; color: #7F1D1D; border: 1px solid #FCA5A5; }
.banner--info { background: #DBEAFE; color: #1E3A8A; border: 1px solid #93C5FD; }

/* Scan result */
.scan-result {
  text-align: center;
  padding: 32px 16px;
}
.scan-result__icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin-bottom: 16px;
}
.scan-result__icon--ok { background: #DCFCE7; color: var(--success); }
.scan-result__icon--err { background: #FEE2E2; color: var(--danger); }
.scan-result__title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.scan-result__amount { font-size: 36px; font-weight: 700; color: var(--success); margin: 8px 0; }

/* Camera viewfinder */
.viewfinder {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
}
.viewfinder video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.viewfinder__frame {
  position: absolute;
  inset: 18%;
  border: 3px solid var(--brand-gold);
  border-radius: var(--radius);
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.4);
}

/* Loader */
.spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2px solid var(--bg-muted);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Header for inner pages */
.app-header--inner .app-header__inner { padding: 10px 16px 30px; }
.btn-back {
  background: rgba(244, 236, 216, 0.15);
  border-color: rgba(244, 236, 216, 0.35);
  color: var(--brand-cream);
  min-height: 36px;
  padding: 6px 14px;
  font-size: 14px;
  border-radius: 999px;   /* pill — seragam dengan tautan navigasi & tombol ✕ */
  font-weight: 600;
  white-space: nowrap;
}
.btn-back:hover { background: rgba(244, 236, 216, 0.28); }

/* ====================================================================
   Dark mode — otomatis mengikuti setelan perangkat
   ==================================================================== */
/* ===== Mode gelap (manual via .theme-dark di <html>) ===== */
.theme-dark {
  --bg-base: #1F242C; --bg-soft: #262C35; --bg-subtle: #14181E; --bg-muted: #39424E;
  --border: #2E3742; --text-primary: #E8EDF3; --text-secondary: #A2AEBB;
  --accent-soft: #0C3B37; --accent-ring: rgba(20, 184, 166, 0.28);
  --surface-2: #222A34; --primary-container: #0C3B37;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.5), 0 10px 28px -8px rgba(0,0,0,0.6);
  --shadow-lg: 0 18px 48px -12px rgba(0,0,0,0.7);
}
.theme-dark .help-box { background: #2A2517; border-color: #5A4A24; color: #E8E0CF; }
.theme-dark .help-box__text strong, .theme-dark .help-box__close { color: #E9C97A; }
.theme-dark .scan-tally { background: #2A2517; border-color: #5A4A24; color: #E9C97A; }
.theme-dark .saldo-card { background: linear-gradient(135deg, #2A2517, #332B18); border-color: #5A4A24; }
.theme-dark .saldo-label, .theme-dark .saldo-amount { color: #E9C97A; }
.theme-dark .field input::placeholder, .theme-dark .field textarea::placeholder { color: #6B7785; }
.theme-dark .pill--ok { background: #0F3D23; } .theme-dark .pill--warn { background: #3D3410; }
.theme-dark .pill--err { background: #3D1717; } .theme-dark .pill--info { background: #10314D; }
.theme-dark .banner--warn { background: #3A320F; color: #F5E6B0; border-color: #6B5A16; }
.theme-dark .banner--err { background: #3A1414; color: #F7C7C7; border-color: #7A2A2A; }
.theme-dark .banner--info { background: #10283F; color: #BCD9F5; border-color: #1D4A73; }
.theme-dark .tip::after { background: #0B0F14; }

/* ====================================================================
   Polish mobile — kesan aplikasi Android
   ==================================================================== */
.btn:active { transform: translateY(1px) scale(0.99); }
@media (max-width: 767px) {
  /* Input nyaman disentuh & cegah zoom otomatis iOS (font 16px) */
  .field input, .field select, .field textarea { font-size: 16px; padding: 13px 14px; }
  .field label { font-size: 13px; }
  .btn { min-height: 48px; }
  .btn--lg { min-height: 56px; font-size: 16px; }
  .toolbar { gap: 8px; }
  .toolbar .grow { flex: 1 1 100%; }
  .simple-wrap > h1 { font-size: 20px; margin: 4px 0 12px; }
  .staff-main h1, .view-vendor h1 { font-size: 20px; }
  .stat-card { padding: 14px; }
  .stat-card__value { font-size: 21px; }
  .card { padding: 16px; margin-bottom: 12px; }

  /* Modal jadi "bottom sheet" (muncul dari bawah) */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal { width: 100%; max-width: none; border-radius: 18px 18px 0 0; max-height: 92vh; animation: sheetUp .2s cubic-bezier(0.2,0.8,0.3,1); }
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }

/* ----- Tanda terima (cetak ulang) ----- */
.receipt-doc { font-size: 14px; line-height: 1.6; }
.receipt-doc p { margin: 4px 0; }
@media print {
  /* Saat modal tanda terima terbuka: cetak HANYA tanda terimanya */
  body.has-receipt > *:not(.modal-backdrop) { display: none !important; }
  body.has-receipt .modal-backdrop { position: static; background: none; padding: 0; display: block;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.has-receipt .modal { box-shadow: none; max-width: none; width: auto; border-radius: 0; animation: none; max-height: none; }
  body.has-receipt .modal__head, body.has-receipt .modal__foot { display: none !important; }
}
/* Toolbar lebih rapi di HP: field tanggal berbagi baris */
@media (max-width: 767px) {
  .toolbar .field { flex: 1 1 45%; }
}

/* ====================================================================
   Tema Material You (Android) — penyegaran tampilan
   ==================================================================== */
:root {
  --primary: #0F766E;
  --on-primary: #FFFFFF;
  --primary-container: var(--accent-soft);
  --surface-2: #EEF2F7;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.10);
  --shadow-md: 0 2px 6px rgba(15,23,42,0.08), 0 10px 28px -8px rgba(15,23,42,0.18);
  --shadow-lg: 0 18px 48px -12px rgba(15,23,42,0.30);
}
/* Tombol: filled, sudut Material; CTA besar = pill */
.btn { border-radius: var(--radius); }
.btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn--lg { border-radius: 26px; }
/* Kartu: elevasi tanpa garis */
.card { border: none; box-shadow: var(--shadow-md); border-radius: var(--radius-lg); }
/* Field: gaya "filled" Material */
.field input, .field select, .field textarea { background: var(--surface-2); border: 1px solid transparent; border-radius: 12px; }
.field input:focus, .field select:focus, .field textarea:focus { background: var(--bg-base); border-color: var(--primary); box-shadow: 0 0 0 3px var(--accent-ring); }
/* Kartu statistik: tonal + elevasi */
.stat-card { border: none; box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); }
/* Chip ringkasan jadi pil tonal */
.report-total { border: none; background: var(--surface-2); border-radius: 999px; padding: 8px 14px; }
/* Header tabel tonal */
.tbl th { background: var(--surface-2); }
.tbl, .tbl-wrap { border-radius: var(--radius-lg); }
/* Bottom nav (Material 3): indikator pil pada item aktif */
.tabbar { padding-top: 6px; }
.tabbar__icon { display: inline-flex; align-items: center; justify-content: center; padding: 4px 18px; border-radius: 999px; transition: background .16s ease, color .16s ease; }
.tabbar__item.active { color: var(--primary); }
.tabbar__item.active .tabbar__icon { background: var(--primary-container); color: var(--primary); }
/* App bar: elevasi lembut (warna brand dipertahankan) */
.simple-top, .app-header--brand { box-shadow: var(--shadow-md); }

/* Dark mode untuk token Material (harus terakhir agar menang di mode gelap) */
.theme-dark .tabbar__item.active, .theme-dark .tabbar__item.active .tabbar__icon { color: #5EEAD4; }

/* ----- Tabel data: pencarian bulat + paging ringkas ----- */
.dt-search { margin-bottom: 10px; }
.dt-search .dt-q { width: 100%; padding: 11px 15px; border: 1px solid transparent; background: var(--surface-2); border-radius: 999px; font-size: 15px; outline: none; }
.dt-search .dt-q:focus { background: var(--bg-base); border-color: var(--primary); box-shadow: 0 0 0 3px var(--accent-ring); }
.dt-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.dt-total { font-size: 12px; }
.dt-pager { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.dt-pager button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-base); color: var(--text-primary); font-size: 20px; line-height: 1; box-shadow: var(--shadow-sm); cursor: pointer; }
.dt-pager button:disabled { opacity: .4; cursor: not-allowed; }
.dt-pageinfo { font-size: 14px; color: var(--text-secondary); min-width: 46px; text-align: center; }
/* Tabel lebih rapi & padat di HP */
@media (max-width: 767px) {
  .tbl th, .tbl td { padding: 9px 10px; font-size: 13px; }
}

/* ----- Filter bar (rentang tanggal + pedagang) — rapi & Material ----- */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: var(--surface-2); border-radius: var(--radius-lg); padding: 10px 14px; margin-bottom: 12px; }
.filterbar__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filterbar__lbl { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text-secondary); }
.filterbar__sep { color: var(--text-secondary); }
.filterbar__inp { padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-base); color: var(--text-primary); font-size: 14px; outline: none; }
.filterbar__inp:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--accent-ring); }
.filterbar__actions { display: flex; gap: 8px; margin-left: auto; }
.filterbar__actions .btn { min-height: 40px; }
@media (max-width: 767px) {
  .filterbar { gap: 8px; padding: 10px; }
  .filterbar__group { flex: 1 1 100%; }
  .filterbar__group .filterbar__inp { flex: 1; min-width: 0; }
  .filterbar__actions { flex: 1 1 100%; margin-left: 0; }
  .filterbar__actions .btn { flex: 1; }
}

/* ----- Tombol & susunan: rapi menyeluruh ----- */
@media (max-width: 767px) {
  .toolbar > .btn { flex: 1 1 auto; }   /* tombol aksi berbagi lebar → baris rapi */
  .modal__foot { gap: 8px; }
  .modal__foot .btn { flex: 1; }        /* tombol modal lega & seragam */
}

/* ----- Panel: tiap bagian tersusun dalam kartu ----- */
.panel { background: var(--bg-base); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 16px; margin: 0 0 14px; }
.panel__title { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--text-primary); }
.panel > .stat-grid { margin-bottom: 0; }
.panel .stat-card { box-shadow: none; border: 1px solid var(--border, rgba(0,0,0,.08)); }
.panel .dt-search { margin-top: 0; }
.panel .dt-foot { margin-bottom: 0; }
.panel .report-total { margin: 4px 6px 4px 0; }
@media (max-width: 767px) { .panel { padding: 14px 12px; } }

/* ====================================================================
   Varian warna semantik untuk panel & kartu — estetik & informatif
   ==================================================================== */
/* Judul panel: bar warna kecil di kiri sebagai penanda bagian */
.panel__title { display: flex; align-items: center; gap: 9px; }
.panel__title::before { content: ""; width: 6px; height: 18px; border-radius: 3px; background: var(--panel-accent, var(--primary)); flex: none; }
.panel--brand   { --panel-accent: #C8A664; }
.panel--info    { --panel-accent: #0EA5B5; }
.panel--success { --panel-accent: #22C55E; }
.panel--gold    { --panel-accent: #D9A441; }
.panel--warn    { --panel-accent: #F59E0B; }
.panel--danger  { --panel-accent: #EF4444; }
.panel--violet  { --panel-accent: #8B5CF6; }

/* Kartu statistik berwarna: tint lembut + aksen tepi + nilai berwarna */
.stat-card { position: relative; overflow: hidden; }
/* Kartu berwarna = gaya Metro (gradien penuh + teks putih, kontras jelas) */
.stat-card[class*="stat-card--"] { color: #fff; border: none !important; padding-left: 18px; }
.stat-card[class*="stat-card--"]::before { display: none; }
.stat-card[class*="stat-card--"] .stat-card__label { color: rgba(255,255,255,.92); }
.stat-card[class*="stat-card--"] .stat-card__value { color: #fff; }
.stat-card[class*="stat-card--"] .stat-card__sub { color: rgba(255,255,255,.85); }
.stat-card--brand   { background: var(--grad-brand); }
.stat-card--info    { background: var(--grad-info); }
.stat-card--success { background: var(--grad-success); }
.stat-card--gold    { background: var(--grad-gold); }
.stat-card--warn    { background: var(--grad-warn); }
.stat-card--danger  { background: var(--grad-danger); }
.stat-card--violet  { background: var(--grad-violet); }

/* Mode gelap: tint digelapkan, nilai dicerahkan agar tetap kontras */
/* kartu berwarna kini bergaya gradien (sama di mode terang & gelap) — lihat bagian Tema */

/* ----- Badge status (aktif/nonaktif) ----- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; }
.badge--ok  { background: #DCFCE7; color: #15803D; }
.badge--off { background: #FEE2E2; color: #B91C1C; }
.theme-dark .badge--ok  { background: #12351F; color: #6EE7A0; }
.theme-dark .badge--off { background: #3A1A1A; color: #FCA5A5; }

/* ----- Kelola kategori & jenis (modal taksonomi) ----- */
.tax-cat { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; background: var(--bg-soft); }
.tax-cat__head { display: flex; align-items: center; gap: 8px; }
.tax-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tax-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
.tax-chip small { color: var(--text-secondary); }
.tax-chip__x { cursor: pointer; color: var(--danger); font-weight: 700; }
.tax-chip__x:hover { opacity: .7; }

/* ====================================================================
   Garis tipis (boundary) berwarna pada kartu & panel — senada aksen
   ==================================================================== */
.card { border: 1px solid var(--border); }
.stat-card { border: 1px solid var(--sc-border, var(--border)); }
.panel { border: 1px solid var(--panel-border, var(--border)); }
/* di dalam panel: tetap pakai garis berwarna (menang atas aturan lama) */
.panel .stat-card { border: 1px solid var(--sc-border, var(--border)); }
.panel .stat-card[class*="stat-card--"] { border-color: var(--sc-border); }

/* warna garis per varian (tint lembut dari aksen) */
.stat-card--brand   { --sc-border:#E6D2AE; } .panel--brand   { --panel-border:#E6D2AE; }
.stat-card--info    { --sc-border:#A7E0E6; } .panel--info    { --panel-border:#A7E0E6; }
.stat-card--success { --sc-border:#B5EAC4; } .panel--success { --panel-border:#B5EAC4; }
.stat-card--gold    { --sc-border:#ECD9A1; } .panel--gold    { --panel-border:#ECD9A1; }
.stat-card--warn    { --sc-border:#F6E0A3; } .panel--warn    { --panel-border:#F6E0A3; }
.stat-card--danger  { --sc-border:#F4C4C4; } .panel--danger  { --panel-border:#F4C4C4; }
.stat-card--violet  { --sc-border:#D8CEF6; } .panel--violet  { --panel-border:#D8CEF6; }

/* mode gelap: garis digelapkan agar lembut & tetap terlihat */
.theme-dark .card { border-color: #2B3440; }
.theme-dark .panel { --panel-border: #2B3440; }
.theme-dark .panel--brand   { --panel-border: #4A3A22; }
.theme-dark .panel--info    { --panel-border: #1C4146; }
.theme-dark .panel--success { --panel-border: #1E4530; }
.theme-dark .panel--gold    { --panel-border: #473C1B; }
.theme-dark .panel--warn    { --panel-border: #473C1B; }
.theme-dark .panel--danger  { --panel-border: #4A2424; }
.theme-dark .panel--violet  { --panel-border: #322A4D; }

/* ====================================================================
   Logo & branding (ikon tempu + institusi)
   ==================================================================== */
.brand-ico { height: 28px; width: 28px; object-fit: contain; vertical-align: middle; margin-right: 8px; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.simple-top__brand, .app-logo { display: inline-flex; align-items: center; }
/* Logo besar di layar login */
.login-brand { text-align: center; }
.login-brand__logo { width: 92px; height: 92px; object-fit: contain; }
/* Hero di halaman pilih peran */
.role-picker__hero { display: block; width: 128px; height: 128px; object-fit: contain; margin: 2px auto 12px; }
/* Baris logo institusi + hak cipta */
.org-footer { margin-top: 22px; text-align: center; }
.org-footer__logos { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.org-footer__logos img { height: 54px; width: auto; object-fit: contain; }
.org-footer__txt { margin: 9px 0 0; font-size: 12px; color: var(--text-secondary); }
.theme-dark .org-footer__logos img { background: rgba(255,255,255,.92); border-radius: 8px; padding: 4px; }

/* ----- Footer hak cipta global (setiap halaman) ----- */
.app-copyright { text-align: center; font-size: 11px; color: var(--text-secondary); padding: 16px 12px 22px; margin-top: 12px; border-top: 1px solid var(--border); }
@media (max-width: 767px) { .app-copyright { margin-bottom: 82px; } }   /* beri ruang dari tab bar HP */
.has-bottom-nav .app-copyright { margin-bottom: 82px; }                  /* pedagang & loket: tab bar selalu tampil */

/* Logo kecil pada struk cetak */
.receipt-logo { display: block; width: 64px; height: 64px; object-fit: contain; margin: 0 auto 6px; }

/* ----- Banner sukses ----- */
.banner--ok { background: #DCFCE7; color: #14532D; border: 1px solid #86EFAC; }
.theme-dark .banner--ok { background: #12351F; color: #BBF7D0; border-color: #1E5631; }

/* ----- Sub-header halaman (tombol kembali + judul) ----- */
.subhead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }

/* ----- Kartu Metro (menu laporan) ----- */
.metro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 10px; }
.metro-tile { display: flex; flex-direction: column; gap: 6px; padding: 18px 16px; border-radius: var(--radius-lg);
  color: #fff; text-decoration: none; min-height: 132px; box-shadow: var(--shadow-md);
  transition: transform .12s ease, box-shadow .15s ease; }
.metro-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; color: #fff; }
.metro-tile:active { transform: translateY(0); }
.metro-tile__icon { font-size: 30px; line-height: 1; }
.metro-tile__title { font-size: 17px; font-weight: 700; }
.metro-tile__desc { font-size: 12px; opacity: .93; line-height: 1.35; }
.metro-tile--info    { background: linear-gradient(135deg, #0EA5B5, #0E7490); }
.metro-tile--success { background: linear-gradient(135deg, #22C55E, #15803D); }
.metro-tile--gold    { background: linear-gradient(135deg, #E0A52E, #A9740F); }
.metro-tile--violet  { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.metro-tile--brand   { background: linear-gradient(135deg, #A47551, #5D3A1F); }
.metro-tile--warn    { background: linear-gradient(135deg, #F59E0B, #B45309); }

/* ====================================================================
   Tema: token gradien, warna aksen (data-accent), kontrol tampilan
   ==================================================================== */
:root {
  --grad-info:    linear-gradient(135deg, #0E7490, #155E75);
  --grad-success: linear-gradient(135deg, #15803D, #14532D);
  --grad-gold:    linear-gradient(135deg, #A16207, #713F12);
  --grad-violet:  linear-gradient(135deg, #6D28D9, #4C1D95);
  --grad-brand:   linear-gradient(135deg, #6B4423, #4A2E15);
  --grad-warn:    linear-gradient(135deg, #C2410C, #9A3412);
  --grad-danger:  linear-gradient(135deg, #B91C1C, #7F1D1D);
}
/* Kartu Metro memakai token (ikut berubah saat ganti warna tema) */
.metro-tile--info    { background: var(--grad-info); }
.metro-tile--success { background: var(--grad-success); }
.metro-tile--gold    { background: var(--grad-gold); }
.metro-tile--violet  { background: var(--grad-violet); }
.metro-tile--brand   { background: var(--grad-brand); }
.metro-tile--warn    { background: var(--grad-warn); }

/* Preset warna tema aplikasi (mengubah identitas brand + tombol utama) */
:root[data-accent="blue"]   { --brand-coconut:#1E3A8A; --brand-coconut-soft:#1D4ED8; --brand-gold:#BFDBFE; --primary:#2563EB; --accent:#2563EB; --accent-strong:#1D4ED8; --accent-soft:#DBEAFE; --accent-ring:rgba(37,99,235,.25); --grad-brand:linear-gradient(135deg,#1D4ED8,#1E3A8A); }
:root[data-accent="green"]  { --brand-coconut:#14532D; --brand-coconut-soft:#15803D; --brand-gold:#BBF7D0; --primary:#15803D; --accent:#15803D; --accent-strong:#166534; --accent-soft:#DCFCE7; --accent-ring:rgba(21,128,61,.25); --grad-brand:linear-gradient(135deg,#15803D,#14532D); }
:root[data-accent="violet"] { --brand-coconut:#4C1D95; --brand-coconut-soft:#6D28D9; --brand-gold:#DDD6FE; --primary:#7C3AED; --accent:#7C3AED; --accent-strong:#6D28D9; --accent-soft:#EDE9FE; --accent-ring:rgba(124,58,237,.25); --grad-brand:linear-gradient(135deg,#6D28D9,#4C1D95); }
:root[data-accent="teal"]   { --brand-coconut:#134E4A; --brand-coconut-soft:#0F766E; --brand-gold:#99F6E4; --primary:#0F766E; --accent:#0F766E; --accent-strong:#115E59; --accent-soft:#CCFBF1; --accent-ring:rgba(15,118,110,.25); --grad-brand:linear-gradient(135deg,#0F766E,#134E4A); }

/* Panel di belakang kartu Metro (menu laporan) */
.metro-hub { background: var(--bg-base); }
.panel > .metro-grid { margin-top: 4px; }

/* Kontrol tampilan: segmented (mode) + swatch (warna) */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.seg__btn { border: none; background: transparent; padding: 8px 16px; font-size: 14px; color: var(--text-secondary); cursor: pointer; }
.seg__btn.active { background: var(--primary); color: #fff; font-weight: 600; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; }
.swatch.active { border-color: var(--text-primary); box-shadow: 0 0 0 3px var(--accent-ring); }
/* Tombol toggle cepat di app bar */
.theme-toggle { cursor: pointer; }

/* ----- Perbaikan responsif & tema (lanjutan) ----- */
/* Toolbar selalu membungkus → tombol tak keluar dari panel */
.toolbar { flex-wrap: wrap; }
.panel .toolbar > .btn { flex: 1 1 auto; min-width: 0; }
.panel > .toolbar { row-gap: 8px; }

/* Semua kartu = gaya Metro: kartu tanpa varian pun dapat gradien netral */
.stat-card:not([class*="stat-card--"]) { background: linear-gradient(135deg, #475569, #334155); color: #fff; border: none !important; }
.stat-card:not([class*="stat-card--"]) .stat-card__label { color: rgba(255,255,255,.9); }
.stat-card:not([class*="stat-card--"]) .stat-card__value,
.stat-card:not([class*="stat-card--"]) .stat-card__sub { color: #fff; }

/* Tombol app bar lebih kecil & rapi */
.btn-back--sm { min-height: 32px; padding: 5px 11px; font-size: 14px; }
.simple-top .theme-toggle { margin-left: auto; }
.simple-top .theme-toggle + .btn-back { margin-left: 6px; }

/* Popover kontrol tema (di sebelah tombol keluar) */
.theme-pop { position: fixed; top: 56px; right: 12px; z-index: 60; width: calc(100% - 24px); max-width: 320px; }
.theme-pop .panel { box-shadow: var(--shadow-lg); margin: 0; }

/* ----- Anti-overflow: isi panel tidak keluar kotak ----- */
.panel { overflow-wrap: anywhere; }
.filterbar { max-width: 100%; }
.filterbar__actions { flex-wrap: wrap; }
.filterbar__inp { min-width: 0; max-width: 100%; }
.filterbar__group { min-width: 0; }
.toolbar { max-width: 100%; }
.toolbar > .btn, .toolbar > .field, .filterbar__actions > .btn { min-width: 0; }
.tbl-wrap { max-width: 100%; }
/* tombol app bar kecil tetap rapi (ikon + teks) */
.btn-back--sm { white-space: nowrap; }

/* ====================================================================
   FIX: kartu berwarna harus menang atas .stat-card bawaan staff.css
   (staff.css dimuat setelah main.css → naikkan kekhususan selektor)
   ==================================================================== */
.stat-card.stat-card--brand   { background: var(--grad-brand); color: #fff; }
.stat-card.stat-card--info    { background: var(--grad-info); color: #fff; }
.stat-card.stat-card--success { background: var(--grad-success); color: #fff; }
.stat-card.stat-card--gold    { background: var(--grad-gold); color: #fff; }
.stat-card.stat-card--warn    { background: var(--grad-warn); color: #fff; }
.stat-card.stat-card--danger  { background: var(--grad-danger); color: #fff; }
.stat-card.stat-card--violet  { background: var(--grad-violet); color: #fff; }
.stat-card[class*="stat-card--"] .stat-card__label { color: rgba(255,255,255,.92) !important; }
.stat-card[class*="stat-card--"] .stat-card__value { color: #fff !important; }
.stat-card[class*="stat-card--"] .stat-card__sub   { color: rgba(255,255,255,.85) !important; }

/* Filter rapi & responsif (menyusun ke bawah sesuai lebar panel) */
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 10px; }
.filter-grid .field { margin: 0; }
.filter-grid .field label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }

/* Tombol khusus ikon (logout, aksi tabel) — rapat & rata tengah */
.btn-ico { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.btn-ico svg { display: block; }
.simple-top .btn-back--sm.btn-ico { padding: 6px 9px; }

/* Header tabel rapi: satu baris, rata tengah vertikal (menang atas staff.css) */
.tbl thead th { white-space: nowrap; vertical-align: middle; }
.tbl td { vertical-align: middle; }

/* Halaman pedagang: riwayat butuh lebih lebar (tabel), scan/login tetap ramping */
.view-vendor.view-wide { max-width: none; }
/* Paksa konten pedagang (scan & riwayat) mengikuti lebar layar penuh —
   mengalahkan aturan/cache lama yang mungkin masih membatasi lebar. */
.app-shell > main.view-vendor,
main.view-vendor.view-wide { max-width: none !important; width: 100% !important; margin: 0 !important; }
.view-vendor > .panel,
.view-vendor .stat-grid { max-width: none !important; width: auto !important; }

/* ====================================================================
   Tabel responsif di HP: tiap baris jadi kartu (label : nilai)
   ==================================================================== */
@media (max-width: 600px) {
  .tbl.dt-responsive { border: none; box-shadow: none; }
  .tbl.dt-responsive thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl.dt-responsive tbody, .tbl.dt-responsive tr, .tbl.dt-responsive td { display: block; width: 100%; }
  .tbl.dt-responsive tr {
    border: 1px solid var(--border); border-radius: 12px; margin: 0 0 10px;
    padding: 4px 6px; background: var(--bg-base); box-shadow: var(--shadow-sm);
  }
  .tbl.dt-responsive td {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    border: none; border-bottom: 1px solid var(--bg-subtle); padding: 8px 8px;
    text-align: right; font-size: 14px;
  }
  .tbl.dt-responsive td:last-child { border-bottom: none; }
  .tbl.dt-responsive td::before {
    content: attr(data-label); flex: 0 0 40%; text-align: left;
    font-weight: 600; font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .3px;
  }
  .tbl.dt-responsive .tbl-actions { justify-content: flex-end; flex-wrap: wrap; }
  .tbl.dt-responsive td[data-label=""]::before { content: none; }
}

/* ====================================================================
   FIX kontras input di mode gelap/otomatis:
   - color-scheme agar kontrol native (date, select, scrollbar) ikut gelap
   - paksa warna teks input mengikuti tema
   ==================================================================== */
:root { color-scheme: light; }
.theme-dark { color-scheme: dark; }
.field input, .field select, .field textarea,
.filterbar__inp, .dt-search .dt-q,
input, select, textarea { color: var(--text-primary); }
.theme-dark .field input, .theme-dark .field select, .theme-dark .field textarea,
.theme-dark .filterbar__inp, .theme-dark .dt-search .dt-q { color: var(--text-primary); background: var(--surface-2); }
.theme-dark .field input:focus, .theme-dark .field select:focus, .theme-dark .field textarea:focus { background: var(--bg-base); }

/* ====================================================================
   FIX urutan: blok :root Material (di atas) sempat menimpa --surface-2
   & --primary-container versi gelap. Tegaskan ulang di paling akhir.
   ==================================================================== */
.theme-dark {
  --surface-2: #222A34;
  --primary-container: #0C3B37;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.5), 0 10px 28px -8px rgba(0,0,0,0.6);
  --shadow-lg: 0 18px 48px -12px rgba(0,0,0,0.7);
}

/* ----- Menu aksi baris (dropdown: ikon + label) ----- */
.row-menu { position: fixed; z-index: 80; background: var(--bg-base); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; min-width: 184px; }
.row-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: none; padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--text-primary); cursor: pointer; text-align: left; }
.row-menu__item:hover { background: var(--surface-2); }
.row-menu__item--danger { color: var(--danger); }
.row-menu__ico { width: 18px; text-align: center; flex: none; }
.btn-action { padding: 5px 12px; min-height: 32px; font-size: 13px; white-space: nowrap; }

/* ====================================================================
   Cetak struk THERMAL 58mm (mode body.thermal saat simpleUI.printReceipt)
   ==================================================================== */
@media print {
  body.thermal { background: #fff; }
  body.thermal .receipt-doc { width: 100%; max-width: 54mm; margin: 0 auto; font-size: 12px; line-height: 1.45; color: #000; }
  body.thermal .receipt-doc h2 { font-size: 15px; margin: 0 0 2px; }
  body.thermal .receipt-doc p { margin: 2px 0; }
  body.thermal .receipt-doc hr { border: none; border-top: 1px dashed #000; margin: 5px 0; }
  body.thermal .receipt-logo { width: 44px; height: 44px; }
  /* struk berbasis halaman (mis. tarik): kartu jadi penuh & polos */
  body.thermal .card { max-width: 100% !important; box-shadow: none !important; border: none !important; margin: 0 !important; padding: 0 !important; }
  body.thermal .simple-wrap { max-width: none; padding: 0; }
}

/* Struk 80mm (lebih lebar) */
@media print {
  body.thermal.paper-80 .receipt-doc { max-width: 74mm; }
}

/* Status koneksi printer (popover Cetak) */
.pstat { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.pstat--ok { color: var(--success); font-weight: 600; }

/* ===================== Logo institusi di dalam header (UNDHAR · Kampus Berdampak · Pasar Kamu) ===================== */
.hdr-logos { display: flex; align-items: center; gap: 8px; }
.hdr-logo {
  height: 34px; width: auto; object-fit: contain;
  background: #fff; border-radius: 8px; padding: 3px 5px;
}
@media (max-width: 480px) { .hdr-logo { height: 28px; padding: 2px 4px; } }
.app-header__inner { flex-wrap: wrap; gap: 8px; }
.hdr-ver { font-size: 11px; font-weight: 600; opacity: 0.9; background: rgba(255,255,255,0.18); padding: 1px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }

/* ===================== Tombol login: 3 warna berbeda (Masuk / Panduan / Kembali) ===================== */
.btn--guide { background: #3B5BDB; color: #fff; border: none; }
.btn--guide:hover { background: #2F49B0; color: #fff; text-decoration: none; }
.btn--backrole { background: #64748B; color: #fff; border: none; }
.btn--backrole:hover { background: #4D5869; color: #fff; text-decoration: none; }

/* ===================== Login semua peran SERAGAM dgn login admin (pengelola) ===================== */
.login--vendor    .btn--primary,
.login--loket     .btn--primary,
.login--pengelola .btn--primary { background: linear-gradient(135deg, #0E6E6E 0%, #2E9E8F 100%); border: none; }
.login--vendor    .login-brand h1,
.login--loket     .login-brand h1,
.login--pengelola .login-brand h1 { color: #0E6E6E; }
.theme-dark .login--vendor .login-brand h1,
.theme-dark .login--loket .login-brand h1,
.theme-dark .login--pengelola .login-brand h1 { color: #5FBDA6; }

/* ===================== Halaman Panduan (3 halaman per-peran) ===================== */
.guide { max-width: 820px; }
.guide-hero {
  text-align: center; color: #fff; border-radius: 20px; padding: 26px 18px 22px;
  background: linear-gradient(140deg, #5D3A1F 0%, #A47551 60%, #C8A664 100%);
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden; margin-bottom: 18px;
}
.guide-hero::after { content:""; position:absolute; right:-30px; bottom:-30px; width:160px; height:160px;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%); }
.guide-hero img { width: 76px; height: 76px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.3)); }
.guide-hero h1 { margin: 8px 0 2px; font-size: 25px; color: #fff; }
.guide-hero p { margin: 0; opacity: .92; font-size: 13px; }
.guide section {
  background: var(--bg-base); border: 1px solid var(--border); border-left: 5px solid var(--brand-gold);
  border-radius: 16px; padding: 16px 18px; margin: 14px 0; box-shadow: var(--shadow-sm); scroll-margin-top: 72px;
}
.guide section h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 20px; color: var(--brand-coconut); }
.theme-dark .guide section h2 { color: var(--brand-gold); }
.guide h3 { margin: 16px 0 6px; color: var(--brand-coconut); font-size: 16px; }
.theme-dark .guide h3 { color: #E9C97A; }
.guide ol, .guide ul { padding-left: 22px; line-height: 1.65; margin: 6px 0; }
.guide li { margin: 3px 0; }
.guide kbd { background: var(--bg-muted); color: var(--text-primary); border-radius: 5px; padding: 1px 7px; font-family: monospace; font-size: 13px; }
.cycle-wrap { display: flex; justify-content: center; }
.cycle { width: 100%; max-width: 320px; height: auto; margin: 6px auto 4px; }
.guide-note { background: var(--brand-cream); border: 1px solid var(--brand-gold); border-radius: 12px; padding: 12px 14px; color: #5a4424; margin: 10px 0; }
.theme-dark .guide-note { background: #2A2517; border-color: #5A4A24; color: #E8E0CF; }
.guide-warn { background: #FEF2F2; border: 1px solid #FCA5A5; border-radius: 12px; padding: 12px 14px; color: #991B1B; margin: 10px 0; }
.theme-dark .guide-warn { background: #3D1717; border-color: #7F2A2A; color: #FCA5A5; }
@media print {
  /* PAKSA latar putih ikut tercetak (hapus warna coklat di tepi/margin kertas).
     print-color-adjust:exact wajib agar putih benar-benar dilukis menutup
     warna dasar WebView; tanpa ini area kosong memakai warna dasar (coklat). */
  html, body, .app-shell, .simple-wrap, .guide {
    background: #fff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* Hero TETAP coklat saat dicetak */
  .guide-hero { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .guide section { break-inside: avoid; box-shadow: none; border-left-color: #A47551; }
  .guide h2 { break-after: avoid; }
  @page { margin: 10mm; }
}

/* ============================================================
   Penyesuaian TABLET (≥768px) — manfaatkan lebar layar.
   Aditif: tidak mengubah tampilan HP (≤767px) yang sudah ada.
   ============================================================ */
@media (min-width: 768px) {
  /* Konten & header mengikuti lebar layar (adaptif) — lihat aturan dasar.
     Hanya padding yang ditambah agar lega di tablet. */
  .simple-wrap { padding: 26px 32px 104px; }
  .view-vendor { padding: 26px 32px; }

  /* Statistik & menu tile mengisi lebar (jumlah kolom mengikuti ruang) */
  .stat-grid  { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
  .metro-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }

  /* Tile menu sedikit lebih besar agar nyaman disentuh di tablet */
  .metro-tile { padding: 22px 20px; }
  .metro-tile__icon  { font-size: 34px; }
  .metro-tile__title { font-size: 18px; }
  .metro-tile__desc  { font-size: 13px; }

  /* Bottom nav tetap muncul di tablet (termasuk Pengelola yang
     sebelumnya kehilangan navigasi di layar >767px), tapi item
     dikelompokkan di tengah — tidak melebar penuh selebar layar. */
  .tabbar { display: flex; justify-content: center; gap: 8px; }
  .tabbar__item { flex: 0 1 150px; }
}

/* ============================================================
   Indikator status koneksi (lampu kecil) — di header tiap halaman.
   Dipasang otomatis oleh theme-init.js. pointer-events:none agar
   tidak pernah menghalangi tombol di header (mis. ⚙️).
   ============================================================ */
.net-dot {
  position: fixed; z-index: 60; pointer-events: none;
  top: calc(60px + env(safe-area-inset-top, 0px));
  left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; line-height: 1;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  background: rgba(0,0,0,.06); color: #475569;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
/* Bilah sinyal (seperti sinyal HP) — warnanya = currentColor (mengikuti level). */
.net-sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.net-sig i { width: 3px; border-radius: 1px; background: currentColor; opacity: .26; transition: opacity .2s ease; }
.net-sig i:nth-child(1) { height: 5px; }
.net-sig i:nth-child(2) { height: 8px; }
.net-sig i:nth-child(3) { height: 12px; }
/* Lampu lalu-lintas berdasarkan latensi: hijau bagus, kuning kurang, merah buruk */
.net-dot.lvl-good { color: #16A34A; }
.net-dot.lvl-mid  { color: #D97706; }
.net-dot.lvl-poor, .net-dot.lvl-off { color: #DC2626; }
.net-dot.lvl-good .net-sig i { opacity: 1; }
.net-dot.lvl-mid  .net-sig i:nth-child(-n+2) { opacity: 1; }
.net-dot.lvl-poor .net-sig i:nth-child(1) { opacity: 1; }
.net-dot.lvl-off  .net-sig i:nth-child(1) { opacity: 1; animation: netPulse 1s ease-in-out infinite; }
@keyframes netPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
/* Di dalam header coklat gelap → pil terang; warna bilah/teks tetap dari level (versi lebih cerah). */
.net-dot--inflow {
  position: absolute; top: auto; bottom: 6px; left: 16px; right: auto;
  z-index: 5; box-shadow: none;
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3);
}
.net-dot--inflow.lvl-good { color: #4ADE80; }
.net-dot--inflow.lvl-mid  { color: #FBBF24; }
.net-dot--inflow.lvl-poor, .net-dot--inflow.lvl-off { color: #FCA5A5; }
.theme-dark .net-dot { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }

/* ============================================================
   Sticky footer — footer selalu rata di dasar halaman walau
   konten pendek. Hanya untuk layar (cetak tidak terpengaruh).
   ============================================================ */
@media screen {
  html { min-height: 100%; }
  body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
  body > #app,
  body > .app-shell { flex: 1 0 auto; }
  .app-shell { flex: 1 0 auto; }
  /* Front page: dorong baris footer ke dasar kolom */
  .role-picker { display: flex; flex-direction: column; }
  .role-picker .org-footer { margin-top: auto; }
}

/* ============================================================
   Kartu statistik gaya metro: ikon SVG samar di sudut kanan-bawah.
   Sprite ikon dipasang oleh simple-ui.js (#statSprite).
   ============================================================ */
.stat-card__bg {
  position: absolute; right: -6px; bottom: -10px;
  width: 72px; height: 72px; opacity: .16; color: #fff;
  pointer-events: none;
}
.stat-card__label, .stat-card__value, .stat-card__sub { position: relative; z-index: 1; }

/* Kartu pengaturan di indeks (Tampilan · Muat Ulang · Cek Pembaruan) disusun
   dalam satu panel memakai .role-grid — sama seperti kartu Pilih Peran. */
.set-card { display: flex; flex-direction: column; }
.set-card__title { font-weight: 700; font-size: 15px; margin: 0 0 12px; color: var(--text-primary); }
.set-card .field:last-child { margin-bottom: 0; }
.set-card .btn { margin-top: auto; }   /* tombol rata bawah → kartu tampak seragam */