/* UndrAds Dynamic Smart-Card Platform — visual identity
   Matches undrads.com: near-white ground, UndrAds blue (#2563EB) accent,
   dark-gray body text, DM Sans throughout. IBM Plex Mono stays for card
   tokens/codes so the platform's own vernacular (card numbers, hex
   tokens, redirect URLs) reads as data, not prose. */

:root {
  --bg: #fffefb;
  --bg-grid: #fbfaf7;
  --surface: #ffffff;
  --surface-2: #f5f6f8;
  --surface-3: #eceef2;
  --border: #e4e6eb;
  --border-soft: #ececf0;
  --text: #313131;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;

  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.09);
  --accent-text: #2563eb;

  --good: #16a34a;
  --good-soft: rgba(22, 163, 74, 0.1);
  --warn: #d97706;
  --warn-soft: rgba(217, 119, 6, 0.1);
  --bad: #dc2626;
  --bad-soft: rgba(220, 38, 38, 0.09);
  --info: #2563eb;
  --info-soft: rgba(37, 99, 235, 0.09);

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-card: 0 20px 45px -24px rgba(15, 23, 42, 0.16);
  --font-display: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1100px 600px at 15% -10%, rgba(37, 99, 235, 0.05), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(37, 99, 235, 0.04), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--font-mono); }
::selection { background: var(--accent-soft); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* ---------- Public / recipient-facing shell ---------- */

.public-shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 20px 64px;
  gap: 28px;
}
.brandmark {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.02em;
}
.brandmark img { height: 22px; width: auto; display: block; }
.brandmark .suffix { padding-left: 10px; border-left: 1px solid var(--border); }

.panel {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 32px 30px 30px;
}
.panel.wide { max-width: 620px; }

.card-visual {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1.586 / 1;
  border-radius: 18px;
  position: relative;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(37,99,235,0.28), transparent 55%),
    linear-gradient(155deg, #171d29, #0d1119 70%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(255,255,255,0.02);
  color: #eef1f7;
}
.card-visual .top-row { display: flex; justify-content: space-between; align-items: flex-start; }
.card-visual .nfc-mark { width: 26px; height: 26px; opacity: 0.9; }
.card-visual .display-number { font-family: var(--font-mono); font-size: 19px; letter-spacing: 0.06em; }
.card-visual .footer-row { display: flex; justify-content: space-between; align-items: flex-end; }
.card-visual .status-pill { align-self: flex-start; }
.card-visual .eyebrow { color: #9fbcfb; }
.card-visual .subtitle { color: #b7bdc9; }

h1.page-title { font-size: 22px; margin-bottom: 4px; }
.subtitle { color: var(--text-muted); font-size: 14.5px; }

.stack { display: flex; flex-direction: column; gap: 16px; }
.stack.tight { gap: 10px; }
.row { display: flex; gap: 12px; }
.row.between { justify-content: space-between; align-items: center; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.01em; }
.field .hint { font-size: 12px; color: var(--text-faint); }
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="tel"], textarea, select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-family: var(--font-body);
  font-size: 14.5px;
  width: 100%;
}
input.mono-input { font-family: var(--font-mono); letter-spacing: 0.04em; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
textarea { resize: vertical; min-height: 80px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) center, calc(100% - 13px) center; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: filter 0.12s ease, transform 0.05s ease;
}
.btn:hover { filter: brightness(0.97); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); border-color: transparent; color: #ffffff; }
.btn-primary:hover { background: var(--accent-strong); filter: none; }
.btn-danger { background: var(--bad-soft); border-color: rgba(220,38,38,0.25); color: #b91c1c; }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--text-muted); }
.btn-sm { padding: 7px 12px; font-size: 13px; }
.btn-block { width: 100%; }
button.link-btn { background: none; border: none; padding: 0; color: var(--accent-text); cursor: pointer; font: inherit; }

.error-box { background: var(--bad-soft); border: 1px solid rgba(220,38,38,0.25); color: #b91c1c; border-radius: var(--radius-sm); padding: 11px 13px; font-size: 13.5px; }
.notice-box { background: var(--good-soft); border: 1px solid rgba(22,163,74,0.25); color: #15803d; border-radius: var(--radius-sm); padding: 11px 13px; font-size: 13.5px; }
.dev-box { background: var(--info-soft); border: 1px dashed rgba(37,99,235,0.35); color: #1e40af; border-radius: var(--radius-sm); padding: 13px 14px; font-size: 13px; }
.warning-box { background: var(--warn-soft); border: 1px solid rgba(217,119,6,0.3); color: #92400e; border-radius: var(--radius-sm); padding: 11px 13px; font-size: 13.5px; }
.dev-box .otp-code { font-family: var(--font-mono); font-size: 22px; letter-spacing: 0.14em; color: var(--text); margin-top: 4px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 100px; border: 1px solid transparent;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.badge-active { background: var(--good-soft); color: #15803d; } .badge-active .dot { background: var(--good); }
.badge-claimed { background: var(--warn-soft); color: #92400e; } .badge-claimed .dot { background: var(--warn); }
.badge-unassigned { background: rgba(107,114,128,0.1); color: var(--text-muted); } .badge-unassigned .dot { background: var(--text-muted); }
.badge-suspended { background: var(--bad-soft); color: #b91c1c; } .badge-suspended .dot { background: var(--bad); }
.badge-lost { background: var(--bad-soft); color: #b91c1c; } .badge-lost .dot { background: var(--bad); }
.badge-replaced { background: rgba(107,114,128,0.1); color: var(--text-muted); } .badge-replaced .dot { background: var(--text-faint); }

.divider { height: 1px; background: var(--border-soft); border: none; margin: 4px 0; }
.footer-note { color: var(--text-faint); font-size: 12px; text-align: center; max-width: 420px; }

/* ---------- Admin console shell ---------- */

.admin-shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.admin-nav {
  background: var(--surface); border-right: 1px solid var(--border-soft);
  padding: 22px 16px; display: flex; flex-direction: column; gap: 22px;
}
.admin-nav .nav-group { display: flex; flex-direction: column; gap: 2px; }
.admin-nav .nav-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); padding: 10px 10px 4px; }
.admin-nav a {
  color: var(--text-muted); font-size: 14px; font-weight: 500;
  padding: 8px 10px; border-radius: 8px; display: flex; align-items: center; gap: 9px;
}
.admin-nav a:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.admin-nav a.active { background: var(--accent-soft); color: var(--accent); }
.admin-nav a .dot-ic { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }

.admin-main { padding: 30px 38px 60px; max-width: 1280px; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; gap: 20px; flex-wrap: wrap; }
.admin-topbar h1 { font-size: 24px; }
.admin-topbar .subtitle { margin-top: 4px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 28px; }
.stat-tile {
  background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--shadow-card);
}
.stat-tile .stat-label { font-size: 12px; color: var(--text-muted); }
.stat-tile .stat-value { font-family: var(--font-display); font-size: 27px; font-variant-numeric: tabular-nums; }
.stat-tile .stat-sub { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.card-block { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 20px; box-shadow: var(--shadow-card); }
.card-block h2 { font-size: 16px; margin-bottom: 14px; }
.card-block .block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); padding: 0 12px 10px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; white-space: nowrap; }
tr:last-child td { border-bottom: none; }
td.wrap { white-space: normal; }
tbody tr:hover { background: var(--surface-2); }
.table-empty { padding: 26px; text-align: center; color: var(--text-faint); font-size: 13.5px; }

.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.filter-bar input, .filter-bar select { width: auto; min-width: 150px; }

.pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.action-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

.kv-grid { display: grid; grid-template-columns: 140px 1fr; row-gap: 10px; column-gap: 14px; font-size: 13.5px; }
.kv-grid dt { color: var(--text-muted); }
.kv-grid dd { margin: 0; }

.two-col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .two-col { grid-template-columns: 1fr; } .admin-shell { grid-template-columns: 1fr; } .admin-nav { display: none; } }

.mermaid-note { font-size: 12px; color: var(--text-faint); }

.bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding-top: 10px; }
.bar-chart .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.bar-chart .bar { width: 100%; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--accent), var(--accent-strong)); min-height: 3px; }
.bar-chart .bar.nfc { background: linear-gradient(180deg, #7aa2f7, #5c82e0); }
.bar-chart .bar-label { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }

.qr-tile { background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qr-tile canvas { border-radius: 6px; background: #fff; padding: 6px; }

.optin-card {
  background: linear-gradient(135deg, #2563eb, #7c3aed 60%, #db2777);
  color: #ffffff;
  border: none;
  box-shadow: 0 20px 45px -18px rgba(124, 58, 237, 0.55);
}
.optin-card h2 { color: #ffffff; font-size: 18px; }
.optin-card .subtitle { color: rgba(255,255,255,0.88); }
.optin-card .btn-primary { background: #ffffff; color: #7c3aed; }
.optin-card .btn-primary:hover { background: #f3f0ff; }
.optin-card .btn-ghost { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); color: #ffffff; }
.optin-card .btn-ghost:hover { background: rgba(255,255,255,0.2); }

@media (max-width: 640px) {
  .admin-main { padding: 20px 16px 48px; }
  .kv-grid { grid-template-columns: 110px 1fr; }
}