/* pages/admin.css — SuperAdmin: users and security.
   Every colour is a token (tokens.css); lint_css.js reads this file. 2026-09-26: it carried 26 colour literals behind
   fallbacks to variables this app never defines (--text-muted, --bg-surface, --border-subtle), so every rule rendered
   its fallback. Text colours meet 4.5:1 (WCAG 2.2 AA). */
.admin-wrap {
  padding: var(--sp-6);
  max-width: 1400px;
  margin: 0 auto;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.admin-title-area h2 {
  margin: 0 0 4px 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.admin-title-area p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
}

.admin-actions {
  display: flex;
  gap: var(--sp-3);
}

.admin-tabs {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-2);
}

.admin-tab-btn {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--dur-fast) ease;
}

.admin-tab-btn:focus-visible {
  outline: 2px solid var(--info-strong);
  outline-offset: 2px;
}

.admin-tab-btn.active {
  background: var(--surface);
  color: var(--info);
  box-shadow: var(--sh-1);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}

.admin-table th {padding: var(--sp-3) 14px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line);
}

.admin-table td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.admin-user-cell {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.admin-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--info-strong) 0%, var(--brand-deep) 100%);
  color: var(--on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.admin-user-details {
  display: flex;
  flex-direction: column;
}

.admin-user-name {
  font-weight: 600;
  color: inherit;
}

.admin-user-email {
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}

.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.badge-status.active {
  background: var(--ok-soft);
  color: var(--ok);
}

.badge-status.inactive {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.admin-row-actions {
  display: flex;
  gap: var(--sp-2);
}

.btn-admin-sm {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: all var(--dur-fast) ease;
}

.btn-admin-sm:hover,
.btn-admin-sm:focus-visible {
  border-color: var(--info-strong);
  color: var(--info);
}

.btn-admin-sm.danger:hover,
.btn-admin-sm.danger:focus-visible {
  border-color: var(--danger-vivid);
  color: var(--danger);
}

/* Modal for user creation */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(var(--ink-rgb), 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.admin-modal-box {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 28px;
  width: 100%;
  max-width: 520px;
  box-shadow: var(--sh-3);
}

.admin-store-checkboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  max-height: 160px;
  overflow-y: auto;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

.admin-store-checkboxes label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  cursor: pointer;
}

/* Stage 2 (2026-09-27): sessions, the audit check, and the dialogs. Tokens only. */
.admin-denied { text-align: center; padding: var(--sp-7); }
.admin-empty, .admin-foot { padding: var(--sp-4); }
.admin-audit-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 14px; flex-wrap: wrap; }
.admin-modal-actions { margin-top: var(--sp-5); display: flex; justify-content: flex-end; gap: var(--sp-3); }
.admin-shops { border: none; padding: 0; margin: 0 0 var(--sp-4); }
.admin-shops legend {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.admin-all { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); margin-bottom: var(--sp-1); }
.admin-table .dt { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* filters on the accounts and the audit trail (Stage 3a, 2026-09-27) */
.admin-filter{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.admin-count{font-size:12px;margin-left:auto;align-self:center}

/* Trusted browsers under "Signed in now" (2026-09-28) */
.admin-sub { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-md); color: var(--brand); }

/* One person: name, role, shops and permissions (2026-09-28). The dialog is wider and scrolls on a small screen. */
.admin-modal-box.admin-modal-wide { max-width: 860px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.admin-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
.admin-perms td { vertical-align: middle; }
.admin-perms tr.is-off td { color: var(--ink-faint); }
.admin-perms .finput { min-width: 150px; }
.admin-preview { margin: var(--sp-2) 0 var(--sp-3); padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2);
  border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink); }
.admin-devices { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.admin-devices li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--fs-sm); }
.btn-admin-sm.primary { border-color: var(--line-strong); font-weight: 650; }
@media (max-width: 640px) { .admin-modal-box.admin-modal-wide { padding: 18px; } }