/* PayVault — Shared Design System (powered by brand.css tokens)
   Import brand.css BEFORE this file.
   <link rel="stylesheet" href="/admin/brand.css">
   <link rel="stylesheet" href="/admin/common.css">
*/

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--pv-font-sans);
  background: var(--pv-bg-app);
  color: var(--pv-ink);
  font-size: var(--pv-text-body-sm);
  line-height: var(--pv-leading-normal);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* ── Page layout ──────────────────────────────────────────────────────────── */
.page { max-width: var(--pv-container-app); margin: 0 auto; padding: var(--pv-s-6) var(--pv-s-6) var(--pv-s-16); }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--pv-s-5); flex-wrap: wrap; gap: var(--pv-s-3); }
.page-title { font-family: var(--pv-font-heading); font-size: var(--pv-text-h3); font-weight: var(--pv-weight-bold); color: var(--pv-ink); letter-spacing: -0.025em; }
.page-sub { font-size: var(--pv-text-xs); color: var(--pv-muted); margin-top: var(--pv-s-1); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  padding: var(--pv-btn-md-py) var(--pv-btn-md-px);
  border-radius: var(--pv-btn-radius);
  font-size: var(--pv-btn-md-font);
  font-weight: var(--pv-btn-font-weight);
  font-family: var(--pv-btn-font-family);
  cursor: pointer; border: var(--pv-btn-border) solid transparent;
  display: inline-flex; align-items: center; gap: var(--pv-s-2);
  transition: all var(--pv-duration-fast) var(--pv-ease);
  line-height: 1;
}
.btn-primary { background: var(--pv-ink-2); color: var(--pv-ink-fg); border-color: var(--pv-ink-2); }
.btn-primary:hover { background: var(--pv-ink-3); border-color: var(--pv-ink-3); }
.btn-secondary { background: var(--pv-card-bg); color: var(--pv-ink); border-color: var(--pv-ink); }
.btn-secondary:hover { background: var(--pv-paper-2); }
.btn-danger { background: var(--pv-danger-soft); color: var(--pv-danger); border-color: var(--pv-danger); }
.btn-danger:hover { background: var(--pv-danger); color: var(--pv-danger-fg); }
.btn-ghost { background: transparent; color: var(--pv-ink-2); border: none; padding: var(--pv-s-1) var(--pv-s-2); font-size: var(--pv-text-xs); font-weight: var(--pv-weight-semibold); border-radius: var(--pv-radius-app); }
.btn-ghost:hover { background: var(--pv-paper-2); }
.btn-sm { padding: var(--pv-btn-sm-py) var(--pv-btn-sm-px); font-size: var(--pv-btn-sm-font); }
.btn-lg { padding: var(--pv-btn-lg-py) var(--pv-btn-lg-px); font-size: var(--pv-btn-lg-font); }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--pv-card-bg);
  border: var(--pv-card-border) solid var(--pv-ink);
  border-radius: var(--pv-card-radius);
  overflow: hidden;
  box-shadow: var(--pv-card-shadow);
}
.card-header {
  padding: var(--pv-s-4) var(--pv-s-5);
  border-bottom: 1px solid var(--pv-line);
  display: flex; align-items: center; justify-content: space-between;
}
.card-title { font-size: var(--pv-text-body-sm); font-weight: var(--pv-weight-bold); }
.card-body { padding: var(--pv-card-padding); }

/* ── Stat cards ───────────────────────────────────────────────────────────── */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pv-s-3); margin-bottom: var(--pv-s-4); }
.stat-card {
  background: var(--pv-card-bg);
  border: var(--pv-card-border) solid var(--pv-ink);
  border-radius: var(--pv-radius-app);
  padding: var(--pv-stat-padding);
}
.stat-label {
  font-family: var(--pv-font-mono);
  font-size: var(--pv-stat-label-size);
  color: var(--pv-muted);
  font-weight: var(--pv-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--pv-track-eyebrow);
  margin-bottom: var(--pv-stat-gap);
}
.stat-value {
  font-family: var(--pv-font-heading);
  font-size: var(--pv-stat-value-size);
  font-weight: var(--pv-stat-value-weight);
  color: var(--pv-ink);
  line-height: 1;
  letter-spacing: -0.025em;
}
.stat-sub { font-size: var(--pv-text-xs); color: var(--pv-muted); margin-top: var(--pv-s-1); }

/* ── Tables ───────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  padding: var(--pv-table-row-py) var(--pv-table-row-px);
  font-family: var(--pv-font-mono);
  font-size: var(--pv-table-header-font);
  font-weight: var(--pv-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--pv-table-header-tracking);
  color: var(--pv-table-header-color);
  background: var(--pv-table-header-bg);
  border-bottom: var(--pv-table-header-border) solid var(--pv-ink);
}
td {
  padding: var(--pv-table-row-py) var(--pv-table-row-px);
  border-bottom: var(--pv-table-row-border);
  font-size: var(--pv-text-body-sm);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--pv-table-row-hover-bg); }

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: var(--pv-badge-py) var(--pv-badge-px);
  border-radius: var(--pv-badge-radius);
  font-size: var(--pv-badge-font);
  font-weight: var(--pv-badge-font-weight);
  letter-spacing: var(--pv-badge-tracking);
}
.badge-green  { background: var(--pv-success-soft); color: var(--pv-accent-strong); }
.badge-blue   { background: var(--pv-info-soft); color: var(--pv-info-strong); }
.badge-orange { background: var(--pv-warn-soft); color: var(--pv-warn-strong); }
.badge-red    { background: var(--pv-danger-soft); color: var(--pv-danger-strong); }
.badge-gray   { background: var(--pv-paper-3); color: var(--pv-muted); }

/* ── Forms ────────────────────────────────────────────────────────────────── */
label {
  display: block;
  font-family: var(--pv-font-mono);
  font-size: var(--pv-text-xs);
  font-weight: var(--pv-weight-semibold);
  color: var(--pv-ink);
  text-transform: uppercase;
  letter-spacing: var(--pv-track-eyebrow);
  margin-bottom: var(--pv-input-label-gap);
}
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="tel"], input[type="url"],
select, textarea {
  width: 100%;
  border: var(--pv-input-border) solid var(--pv-input-border-color);
  border-radius: var(--pv-input-radius);
  padding: var(--pv-input-py) var(--pv-input-px);
  font-size: var(--pv-input-font);
  font-family: var(--pv-font-sans);
  outline: none;
  color: var(--pv-input-fg);
  background: var(--pv-input-bg);
  transition: border-color var(--pv-duration-fast) var(--pv-ease), box-shadow var(--pv-duration-fast) var(--pv-ease);
}
input::placeholder, textarea::placeholder { color: var(--pv-input-placeholder); }
input:focus, select:focus, textarea:focus {
  border-color: var(--pv-input-border-focus);
  box-shadow: var(--pv-input-focus-ring);
}
.form-group { margin-bottom: var(--pv-s-4); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pv-s-3); }

/* ── Modals ───────────────────────────────────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: var(--pv-modal-overlay);
  z-index: var(--pv-z-modal);
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--pv-modal-bg);
  border: var(--pv-modal-border);
  border-radius: var(--pv-modal-radius);
  width: min(var(--pv-modal-max-width), 96vw);
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: var(--pv-modal-shadow);
}
.modal-header { padding: var(--pv-s-5) var(--pv-s-6) var(--pv-s-4); border-bottom: 1px solid var(--pv-line); display: flex; justify-content: space-between; align-items: center; }
.modal-title { font-size: var(--pv-text-body); font-weight: var(--pv-weight-bold); }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--pv-muted); line-height: 1; }
.modal-body { flex: 1; overflow-y: auto; padding: var(--pv-s-5) var(--pv-s-6); }
.modal-footer { padding: var(--pv-s-4) var(--pv-s-6); border-top: 1px solid var(--pv-line); display: flex; justify-content: flex-end; gap: var(--pv-s-3); }

/* ── Drawers ──────────────────────────────────────────────────────────────── */
.drawer-backdrop { position: fixed; inset: 0; background: var(--pv-modal-overlay); z-index: var(--pv-z-overlay); display: none; }
.drawer-backdrop.open { display: block; }
.drawer { position: fixed; right: 0; top: 0; bottom: 0; width: 560px; max-width: 100%; background: var(--pv-card-bg); border-left: var(--pv-card-border) solid var(--pv-ink); z-index: calc(var(--pv-z-overlay) + 1); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--pv-duration-slow) var(--pv-ease-emphasized); }
.drawer-backdrop.open .drawer { transform: translateX(0); }

/* ── Toast ────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: var(--pv-s-6); right: var(--pv-s-6);
  background: var(--pv-dark-1); color: var(--pv-dark-fg);
  padding: var(--pv-s-3) var(--pv-s-5);
  border: var(--pv-border-default) solid var(--pv-ink);
  border-radius: var(--pv-radius-app);
  font-size: var(--pv-text-body-sm); font-weight: var(--pv-weight-medium);
  z-index: var(--pv-z-toast);
  opacity: 0; transform: translateY(8px);
  transition: all var(--pv-duration-base) var(--pv-ease);
  pointer-events: none; max-width: 360px;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* ── Empty states ─────────────────────────────────────────────────────────── */
.empty-state { padding: var(--pv-empty-padding) var(--pv-s-8); text-align: center; }
.empty-state-title { font-size: var(--pv-empty-title-size); font-weight: var(--pv-weight-bold); color: var(--pv-ink); margin-bottom: var(--pv-s-2); }
.empty-state-desc { font-size: var(--pv-empty-body-size); color: var(--pv-muted); margin-bottom: var(--pv-s-5); max-width: 320px; margin-left: auto; margin-right: auto; line-height: var(--pv-leading-relaxed); }

/* ── Toolbar / filter bars ────────────────────────────────────────────────── */
.toolbar { display: flex; gap: var(--pv-s-3); margin-bottom: var(--pv-s-4); flex-wrap: wrap; align-items: center; }
.search-input {
  border: var(--pv-input-border) solid var(--pv-ink);
  border-radius: var(--pv-radius-app);
  padding: var(--pv-s-2) var(--pv-s-3);
  font-size: var(--pv-text-body-sm);
  outline: none; background: var(--pv-input-bg);
  font-family: var(--pv-font-sans);
}
.search-input:focus { border-color: var(--pv-input-border-focus); box-shadow: var(--pv-input-focus-ring); }
.filter-btn {
  padding: var(--pv-btn-sm-py) var(--pv-btn-sm-px);
  border-radius: var(--pv-radius-app);
  border: var(--pv-border-default) solid var(--pv-ink);
  background: var(--pv-card-bg);
  font-size: var(--pv-btn-sm-font);
  font-weight: var(--pv-weight-medium);
  cursor: pointer;
  font-family: var(--pv-font-sans);
}
.filter-btn.active { background: var(--pv-ink-2); color: var(--pv-ink-fg); border-color: var(--pv-ink-2); }

/* ── Section labels ───────────────────────────────────────────────────────── */
.section-label {
  font-family: var(--pv-font-mono);
  font-size: var(--pv-text-eyebrow);
  font-weight: var(--pv-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--pv-track-eyebrow);
  color: var(--pv-muted);
  margin: var(--pv-s-5) 0 var(--pv-s-3);
  padding-bottom: var(--pv-s-2);
  border-bottom: 1px solid var(--pv-line);
}

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert { border-radius: var(--pv-radius-app); padding: var(--pv-s-3) var(--pv-s-4); font-size: var(--pv-text-body-sm); margin-bottom: var(--pv-s-4); border: var(--pv-border-default) solid; }
.alert-success { background: var(--pv-success-soft); border-color: var(--pv-success); color: var(--pv-accent-strong); }
.alert-error { background: var(--pv-danger-soft); border-color: var(--pv-danger); color: var(--pv-danger-strong); }
.alert-warning { background: var(--pv-warn-soft); border-color: var(--pv-warn); color: var(--pv-warn-strong); }
.alert-info { background: var(--pv-info-soft); border-color: var(--pv-info); color: var(--pv-info-strong); }

/* ── Monetary values ──────────────────────────────────────────────────────── */
.money { font-family: var(--pv-font-mono); font-variant-numeric: tabular-nums; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page { padding: var(--pv-s-4) var(--pv-s-3) var(--pv-s-16); }
  .page-header { flex-direction: column; gap: var(--pv-s-2); }
  .stats-row { grid-template-columns: 1fr 1fr !important; gap: var(--pv-s-2); }
  .card { overflow-x: auto; }
  table { min-width: 480px; }
  .form-row { grid-template-columns: 1fr !important; }
  .drawer { width: 100% !important; }
  .modal { width: 100% !important; border-radius: var(--pv-radius-app) var(--pv-radius-app) 0 0; position: fixed; bottom: 0; max-height: 90vh; }
  .modal-overlay.open { align-items: flex-end; }
}
@media (max-width: 420px) {
  .stats-row { grid-template-columns: 1fr !important; }
}