/* ════════════════════════════════════════════════════════════
   RGM ADMIN — Shared design tokens & view-state components
   Single source of truth for index.html, scan.html, 404.html.
   Canonical token aliases per docs/UI_UX_STANDARD.md §1
   (mapped onto existing tokens — working code is not renamed).
   ════════════════════════════════════════════════════════════ */

:root {
  /* Brand tokens — RGM dark red theme */
  --bg:#0a0404; --surface:#110606; --surface2:#160808; --surface3:#1c0808;
  --border:rgba(255,255,255,.08); --border-subtle:rgba(255,255,255,.04);
  --text:#f1f5f9; --text-muted:#94a3b8; --text-faint:#475569;
  --blue:#dc2626; --blue-dim:#991b1b; --blue-light:#f87171;
  --green:#3fb950; --yellow:#d29922; --red:#f85149; --purple:#a371f7;
  --info:#2f81f7;
  --radius:8px; --radius-sm:5px; --radius-lg:14px; --radius-full:100px;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.25);
  --transition:.15s ease;

  /* Canonical aliases (UI_UX_STANDARD §1) — mapped, not renamed */
  --color-bg:var(--bg); --color-surface:var(--surface); --color-surface-2:var(--surface2);
  --color-border:var(--border); --color-text:var(--text); --color-text-muted:var(--text-muted);
  --color-primary:var(--blue); --color-primary-hover:var(--blue-dim);
  --color-success:var(--green); --color-warning:var(--yellow); --color-danger:var(--red);
  --radius-md:12px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:var(--shadow); --shadow-lg:0 8px 40px rgba(0,0,0,.55);
  --font-base:'Inter','Noto Sans Myanmar',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-myanmar:'Noto Sans Myanmar',sans-serif;
}

/* ── Light theme tokens ── */
[data-theme="light"] {
  --bg:#faf5f5; --surface:#ffffff; --surface2:#fef5f5; --surface3:#fde8e8;
  --border:rgba(0,0,0,.08); --border-subtle:rgba(0,0,0,.04);
  --text:#1a0808; --text-muted:#64748b; --text-faint:#94a3b8;
  --info:#1f6feb;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06);
  --shadow-sm:0 1px 2px rgba(0,0,0,.06); --shadow-lg:0 8px 40px rgba(0,0,0,.12);
}

/* ── Info badge (canonical "Verifying Payment" blue, §5) ── */
.badge-info{background:rgba(47,129,247,.15);color:var(--info)}

/* ── View states: empty / error (UI_UX_STANDARD §3) ── */
.state-block{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2.2rem 1rem;gap:.3rem}
.state-icon{font-size:1.9rem;color:var(--text-faint);opacity:.6;margin-bottom:.45rem}
.state-title{font-size:.88rem;font-weight:700;color:var(--text)}
.state-desc{font-size:.76rem;color:var(--text-muted);max-width:320px;line-height:1.5}
.state-block .btn{margin-top:.7rem}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2.2rem 1rem;color:var(--text-muted);font-size:.8rem;gap:.3rem}

/* ── Loading skeletons (UI_UX_STANDARD §3) ── */
.skel{display:block;height:11px;border-radius:6px;background:linear-gradient(90deg,var(--surface2) 25%,var(--surface3) 37%,var(--surface2) 63%);background-size:400% 100%;animation:skel 1.4s ease infinite}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skel-row td{padding:.85rem 1rem}

/* ── Offline banner (UI_UX_STANDARD §3.4) — hidden by default ── */
.offline-banner{
  position:fixed;top:0;left:0;right:0;z-index:1000;display:none;
  background:rgba(210,153,34,.14);border-bottom:1px solid rgba(210,153,34,.35);
  color:var(--yellow);font-size:.75rem;font-weight:600;text-align:center;
  padding:.4rem .75rem;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}