:root {
  --admin-brand: #0e3c70;
  --admin-brand-soft: #1c6bef;
  --admin-ink: #0f172a;
  --admin-muted: #6b7280;
  --admin-border: #e2e5ea;
  --admin-bg: #f4f6fb;
  --admin-surface: #ffffff;
  --admin-danger: #b42318;
  --admin-paid: #0f7a3d;
  --admin-unpaid: #b45309;
}

* { box-sizing: border-box; }

body.admin-body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--admin-bg);
  color: var(--admin-ink);
}

body.admin-body--center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ── Branded header bar (dashboard only) ─────────────────────────────────── */
.admin-header {
  background: var(--admin-brand);
  color: #fff;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .2px;
}
.admin-header__brand img { height: 26px; width: 26px; display: block; }

.admin-main {
  padding: 28px 24px 48px;
  max-width: 1120px;
  margin: 0 auto;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.admin-card {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
}

.admin-login { width: 340px; text-align: center; }
.admin-login__logo { height: 42px; width: 42px; margin: 0 auto 14px; display: block; }
.admin-login h1 { margin: 0 0 20px; font-size: 18px; color: var(--admin-brand); }
.admin-login .admin-field { text-align: left; }
.admin-login .admin-btn { width: 100%; }

.admin-back-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--admin-muted);
  font-size: 13px;
  text-decoration: none;
}
.admin-back-link:hover { color: var(--admin-brand-soft); text-decoration: underline; }

/* ── Form fields ──────────────────────────────────────────────────────────── */
.admin-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.admin-field label { font-size: 13px; font-weight: 600; color: var(--admin-ink); }
.admin-field input {
  padding: 10px 12px;
  border: 1.5px solid var(--admin-border);
  border-radius: 6px;
  font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.admin-field input:focus {
  outline: none;
  border-color: var(--admin-brand-soft);
  box-shadow: 0 0 0 3px rgba(28, 107, 239, .12);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.admin-btn {
  display: inline-block;
  background: var(--admin-brand-soft);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, transform .05s ease;
}
.admin-btn:hover { background: #144fb8; }
.admin-btn:active { transform: translateY(1px); }

.admin-btn--small { padding: 6px 10px; font-size: 13px; }

.admin-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .5);
}
.admin-btn--ghost:hover { background: rgba(255, 255, 255, .12); }

.admin-table .admin-btn--ghost {
  color: var(--admin-ink);
  border-color: var(--admin-border);
}
.admin-table .admin-btn--ghost:hover { background: var(--admin-bg); }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.admin-alert {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  margin: 0 0 16px;
}
.admin-alert--error { background: #fef2f2; border-color: #fecaca; color: var(--admin-danger); }

/* ── Table ────────────────────────────────────────────────────────────────── */
.admin-table-wrap {
  background: var(--admin-surface);
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  overflow-x: auto;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 900px; }
.admin-table th, .admin-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--admin-border);
  vertical-align: top;
}
.admin-table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--admin-muted);
  background: #f9fafb;
}
.admin-table tbody tr:nth-child(even) { background: #fbfcfe; }
.admin-table tbody tr:hover { background: #eef4ff; }
.admin-table tbody tr:last-child td { border-bottom: none; }

.admin-address { max-width: 240px; white-space: pre-wrap; }
.admin-empty { text-align: center; color: var(--admin-muted); padding: 32px; }
.admin-muted { color: var(--admin-muted); font-size: 12px; }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.admin-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.admin-badge--paid { background: #ecfdf3; color: var(--admin-paid); }
.admin-badge--unpaid { background: #fffbeb; color: var(--admin-unpaid); }