/* SweetDeck Admin — admin.css
   Version tracked alongside ADMIN_APP_VERSION in admin.jsx.
   Tokens mirror the main App's App.css for visual coherence with
   <AlertBanner> rendering when the composer ships in PR 1.

   0.2.2 additions: composer block, .modal-btn--primary affirmative
   variant, .filter-bar__refresh--active toggle modifier, and the
   composer's preview banner (mirrors App.jsx's user-facing
   AlertBanner).

   0.3.0 additions: .tab-nav (top-level Alerts/Users/Tiers/Audit
   strip below topbar), .placeholder-view (stub for tabs not yet
   ported), .users-view + .users-table block (PR 2a admin panel
   migration).

   0.3.1 additions: .users-view__add-existing (callout for
   already-in-list match) and .users-table__row--highlighted
   (outline + tinted bg via box-shadow insets).

   0.3.2 additions: .tiers-view + .tiers-table block (PR 2b
   admin panel migration). Feature matrix layout.

   0.3.5 additions: .audit-view + suggest dropdown overrides
   (PR 2c admin panel migration). Search-source toggle, source
   badges, account card, entries timeline.

   0.4.0 additions: .alert-audit-view block (PR 3 — alert audit
   log viewer). Filter bar (action chips, admin typeahead,
   alert_id input, limit chips), entry-block wrapper for entry +
   optional JSON detail expander, alert-id pill, detail toggle
   button. Reuses .audit-view__entry family for the row layout
   itself so visual rhythm matches the per-user audit tab. */

:root {
  /* Surfaces (dark, matches main App) */
  --bg: #0b1020;
  --bg-secondary: #14192b;
  --card-bg: #181818;
  --card-bg-hover: #1f1f1f;
  --border: #1e273f;
  --border-strong: #2a3758;
  --hover-bg: rgba(255, 255, 255, 0.05);

  /* Text */
  --text-primary: #e6ecff;
  --text-secondary: #bbbbbb;
  --text-muted: #9bb0d8;
  --text-faded: #6b7896;
  --handle: #8fb4ff;

  /* Accents */
  --accent: #1d9bf0;
  --accent-hover: #1a87d3;
  --accent-text: #ffffff;
  --link: #60a5fa;

  /* Severity (matches App.css) */
  --info-bg: #2a3758;
  --info-text: #e6ecff;
  --warning-bg: #e09e30;
  --warning-text: #1a1408;
  --danger: #ef4444;
  --danger-bg: #ef4444;
  --danger-text: #ffffff;

  /* Status semantics (admin-specific) */
  --status-active: #22c55e;
  --status-active-bg: rgba(34, 197, 94, 0.12);
  --status-scheduled: #60a5fa;
  --status-scheduled-bg: rgba(96, 165, 250, 0.12);
  --status-expired: #6b7896;
  --status-expired-bg: rgba(107, 120, 150, 0.12);

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Spacing */
  --pad-xs: 4px;
  --pad-sm: 8px;
  --pad-md: 12px;
  --pad-lg: 16px;
  --pad-xl: 24px;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.6);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  min-height: 100vh;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  min-height: 100vh;
}

/* ─── Boot splash (visible before React mounts) ──────────────────── */
.boot-splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 1rem;
  color: var(--text-muted);
}
.boot-splash__pulse {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
.boot-splash__label {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Login screen ───────────────────────────────────────────────── */
.login-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--pad-xl);
}
.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--pad-xl);
  box-shadow: var(--shadow-card);
}
.login-card h1 {
  margin: 0 0 var(--pad-xs) 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.login-card .subtitle {
  margin: 0 0 var(--pad-xl) 0;
  font-size: 13px;
  color: var(--text-muted);
}
.login-card label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--pad-xs);
  margin-top: var(--pad-md);
}
.login-card input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: var(--pad-sm) var(--pad-md);
  font-family: var(--font-sans);
  font-size: 14px;
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.15s;
}
.login-card input:focus {
  border-color: var(--accent);
}
.login-card .login-btn {
  margin-top: var(--pad-xl);
  width: 100%;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  padding: var(--pad-md);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s;
}
.login-card .login-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}
.login-card .login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.login-card .login-error {
  margin-top: var(--pad-md);
  padding: var(--pad-sm) var(--pad-md);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  color: var(--danger);
  font-size: 13px;
}
.login-card .hint {
  margin-top: var(--pad-md);
  font-size: 12px;
  color: var(--text-faded);
  line-height: 1.5;
}
.login-card .hint code {
  font-family: var(--font-mono);
  background: var(--bg);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-muted);
}

/* ─── Top bar ────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--pad-md);
  padding: var(--pad-md) var(--pad-xl);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar__brand {
  display: flex;
  align-items: baseline;
  gap: var(--pad-sm);
}
.topbar__brand-name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.topbar__brand-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 500;
}
.topbar__version {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faded);
  margin-left: var(--pad-sm);
}
.topbar__spacer { flex: 1; }
.topbar__handle {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--handle);
}
.topbar__logout {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  padding: var(--pad-xs) var(--pad-md);
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.topbar__logout:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* ─── Filter bar ─────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pad-md);
  align-items: center;
  padding: var(--pad-md) var(--pad-xl);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.filter-group {
  display: flex;
  gap: var(--pad-xs);
  align-items: center;
}
.filter-group__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faded);
  margin-right: var(--pad-xs);
}
.filter-pill {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.filter-pill:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.filter-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.filter-search {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 6px var(--pad-md);
  font-family: var(--font-sans);
  font-size: 13px;
  border-radius: var(--radius-sm);
  outline: none;
}
.filter-search:focus {
  border-color: var(--accent);
}
.filter-bar__spacer { flex: 1; }
.filter-bar__refresh {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 6px var(--pad-md);
  font-size: 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.filter-bar__refresh:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.filter-bar__refresh:disabled {
  opacity: 0.5;
  cursor: wait;
}
.filter-bar__refresh--active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.filter-bar__refresh--active:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-text);
}
.filter-bar__count {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ─── Alert table ────────────────────────────────────────────────── */
.alerts-shell {
  padding: var(--pad-xl);
  max-width: 1600px;
  margin: 0 auto;
}
.alerts-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 13px;
}
.alerts-table thead th {
  text-align: left;
  padding: var(--pad-sm) var(--pad-md);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faded);
  font-weight: 600;
  white-space: nowrap;
}
.alerts-table tbody td {
  padding: var(--pad-md);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.alerts-table tbody tr:last-child td { border-bottom: none; }
.alerts-table tbody tr:hover { background: var(--hover-bg); }

.cell-tags {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  min-width: 92px;
}
.cell-scope { min-width: 140px; }
.cell-scope__kind {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faded);
  margin-bottom: 2px;
}
.cell-scope__detail {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  word-break: break-all;
}
.cell-message { min-width: 240px; max-width: 480px; }
.cell-message__text {
  color: var(--text-primary);
  line-height: 1.4;
  white-space: pre-wrap;
  cursor: text;
  padding: 4px 6px;
  margin: -4px -6px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.cell-message__text:hover {
  border-color: var(--border);
}
.cell-message__edit {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--accent);
  color: var(--text-primary);
  padding: 4px 6px;
  margin: -4px -6px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  border-radius: var(--radius-sm);
  outline: none;
  resize: vertical;
  min-height: 60px;
}
.cell-message__hint {
  font-size: 11px;
  color: var(--text-faded);
  margin-top: 4px;
}
.cell-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.cell-meta__line { display: block; line-height: 1.5; }
.cell-meta__label {
  color: var(--text-faded);
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cell-actions {
  white-space: nowrap;
  text-align: right;
}
.action-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-left: 4px;
  transition: all 0.12s;
  white-space: nowrap;
}
.action-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.action-btn--danger:hover {
  border-color: var(--danger);
  color: var(--danger);
}
.action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ─── Badges ─────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.badge--status-active {
  color: var(--status-active);
  background: var(--status-active-bg);
}
.badge--status-scheduled {
  color: var(--status-scheduled);
  background: var(--status-scheduled-bg);
}
.badge--status-expired {
  color: var(--status-expired);
  background: var(--status-expired-bg);
}
.badge--severity-info {
  color: var(--info-text);
  background: var(--info-bg);
}
.badge--severity-warning {
  color: var(--warning-text);
  background: var(--warning-bg);
}
.badge--severity-error {
  color: var(--danger-text);
  background: var(--danger-bg);
}
.flag-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.12s;
}
.flag-toggle:hover { border-color: var(--border-strong); color: var(--text-primary); }
.flag-toggle--on {
  color: var(--status-active);
  border-color: var(--status-active);
  background: var(--status-active-bg);
}
.flag-toggle--off {
  color: var(--text-faded);
  border-color: var(--border);
}

/* ─── Empty state ────────────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 80px var(--pad-xl);
  color: var(--text-muted);
}
.empty-state__icon {
  font-size: 32px;
  margin-bottom: var(--pad-md);
  opacity: 0.4;
}
.empty-state__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--pad-xs);
}
.empty-state__detail { font-size: 13px; }

/* ─── Not authorized ─────────────────────────────────────────────── */
.not-authorized {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--pad-xl);
}
.not-authorized__card {
  max-width: 460px;
  background: var(--card-bg);
  border: 1px solid var(--danger);
  border-radius: var(--radius-lg);
  padding: var(--pad-xl);
  text-align: center;
}
.not-authorized__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--danger);
  margin: 0 0 var(--pad-md) 0;
}
.not-authorized__detail {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: var(--pad-xl);
}
.not-authorized__handle {
  font-family: var(--font-mono);
  color: var(--handle);
}

/* ─── Confirm dialog ─────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--pad-xl);
}
.modal-card {
  width: 100%;
  max-width: 440px;
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--pad-xl);
  box-shadow: var(--shadow-modal);
}
.modal-card__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 var(--pad-sm) 0;
  color: var(--text-primary);
}
.modal-card__detail {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 var(--pad-xl) 0;
}
.modal-card__detail code {
  font-family: var(--font-mono);
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-muted);
}
.modal-card__buttons {
  display: flex;
  justify-content: flex-end;
  gap: var(--pad-sm);
}
.modal-btn {
  padding: var(--pad-sm) var(--pad-lg);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.modal-btn:hover:not(:disabled) { color: var(--text-primary); }
.modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.modal-btn--danger {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
}
.modal-btn--danger:hover:not(:disabled) { background: #dc2626; color: white; }
.modal-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.modal-btn--primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--accent-text);
}

/* ─── Toast notifications ────────────────────────────────────────── */
.toast-stack {
  position: fixed;
  top: 70px;
  right: var(--pad-xl);
  display: flex;
  flex-direction: column;
  gap: var(--pad-sm);
  z-index: 50;
  pointer-events: none;
}
.toast {
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--pad-sm) var(--pad-md);
  font-size: 13px;
  box-shadow: var(--shadow-card);
  pointer-events: auto;
  min-width: 240px;
  max-width: 380px;
  animation: slideIn 0.2s ease-out;
}
.toast--success { border-left: 3px solid var(--status-active); }
.toast--error { border-left: 3px solid var(--danger); }
.toast--info { border-left: 3px solid var(--accent); }
@keyframes slideIn {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ─── Loading state ──────────────────────────────────────────────── */
.loading-row {
  text-align: center;
  padding: 60px var(--pad-xl);
  color: var(--text-muted);
  font-size: 13px;
}

/* ─── Misc ───────────────────────────────────────────────────────── */
.error-banner {
  margin: var(--pad-md) var(--pad-xl);
  padding: var(--pad-md);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
  color: var(--danger);
  font-size: 13px;
}

/* ─── Composer (0.2.2) ───────────────────────────────────────────── */
/* Create-alert form, inserted between FilterBar and the alerts table
   when toggled open. Container styling mirrors the alerts table card
   for visual coherence. Field rows use stacked label-above-input
   layout; chips use the same .filter-pill grammar as FilterBar so
   selection mechanics feel identical across the surface. */
.composer {
  /* Edge buffer matches alerts-shell padding-xl. No max-width
     centering — composer is always operator-driven so it benefits
     from full available width for the form fields. On very wide
     viewports (>1600px) this is wider than the alerts-table card
     beneath it; acceptable for an admin tool. */
  margin: var(--pad-md) var(--pad-xl);
  padding: var(--pad-lg);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.composer__header {
  display: flex;
  align-items: center;
  margin-bottom: var(--pad-md);
}
.composer__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.composer__header-spacer { flex: 1; }
.composer__field {
  display: flex;
  flex-direction: column;
  gap: var(--pad-xs);
  margin-bottom: var(--pad-md);
}
.composer__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faded);
  display: block;
}
.composer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.composer__input,
.composer__textarea {
  background: var(--bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px var(--pad-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.composer__input { width: 100%; max-width: 360px; }
.composer__input--mono { font-family: var(--font-mono); }
.composer__textarea {
  width: 100%;
  resize: vertical;
  min-height: 56px;
}
.composer__input:focus,
.composer__textarea:focus { border-color: var(--accent); }
.composer__custom-time {
  background: var(--bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
}
.composer__custom-time:focus { border-color: var(--accent); }
.composer__hint {
  font-size: 11px;
  color: var(--text-faded);
}
.composer__hint--warn { color: var(--warning-bg); }
.composer__tier-counter {
  align-self: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-left: var(--pad-xs);
}
.composer__resolved {
  margin-top: var(--pad-xs);
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.composer__conflict {
  margin-top: 6px;
  font-size: 12px;
  color: var(--warning-bg);
}
.composer__conflict code {
  font-family: var(--font-mono);
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-secondary);
}
.composer__preview-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.composer__preview-meta code {
  font-family: var(--font-mono);
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-secondary);
}
.composer__buttons {
  display: flex;
  justify-content: flex-end;
  gap: var(--pad-sm);
  margin-top: var(--pad-sm);
}

/* ─── Suggest dropdown (HandleSearch + DedupeKeyInput) ───────────── */
/* Shared dropdown styling for the two combobox fields. Anchor the
   wrap to position:relative so the absolute-positioned panel snaps
   to the input below it. */
.composer__suggest-wrap {
  position: relative;
}
.composer__suggest {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-width: 360px;
  margin-top: 2px;
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  z-index: 20;
  max-height: 240px;
  overflow: auto;
  box-shadow: var(--shadow-card);
}
.composer__suggest-item {
  padding: 6px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.composer__suggest-item:last-child { border-bottom: none; }
.composer__suggest-item:hover { background: var(--hover-bg); }
.composer__suggest-primary {
  color: var(--text-primary);
}
.composer__suggest-secondary {
  color: var(--text-muted);
  font-size: 11px;
}
.composer__suggest-key {
  font-family: var(--font-mono);
  color: var(--text-primary);
}

/* ─── Composer preview banner ────────────────────────────────────── */
/* Mirrors the user-facing <AlertBanner> from App.jsx 1.7.299 — same
   palette derivation (severity → bg/fg), same dismiss-button geometry.
   Locked decision: tokens are identical to App.css's, so this banner
   is the visual truth of what users will see when the alert fires.
   The metadata strip (composer__preview-meta) provides the operator-
   only context (scope, timing, dedupe) that doesn't render in the
   user-facing banner. */
.composer__alert-banner {
  display: flex;
  align-items: center;
  gap: var(--pad-sm);
  padding: var(--pad-sm) var(--pad-md);
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.4;
}
.composer__alert-banner--info {
  background: var(--info-bg);
  color: var(--info-text);
}
.composer__alert-banner--warning {
  background: var(--warning-bg);
  color: var(--warning-text);
}
.composer__alert-banner--error {
  background: var(--danger-bg);
  color: var(--danger-text);
}
.composer__alert-banner-text {
  flex: 1;
  word-break: break-word;
}
.composer__alert-banner-placeholder {
  opacity: 0.55;
  font-style: italic;
}
.composer__alert-banner-dismiss {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  cursor: pointer;
}
.composer__alert-banner-dismiss[disabled] { cursor: default; }
/* Severity-driven dismiss button: bg=banner-fg, fg=banner-bg, so the
   X stays legible against any banner palette without introducing new
   tokens. Pattern lifted from App.jsx 1.7.299. */
.composer__alert-banner--info .composer__alert-banner-dismiss {
  background: var(--info-text);
  color: var(--info-bg);
}
.composer__alert-banner--warning .composer__alert-banner-dismiss {
  background: var(--warning-text);
  color: var(--warning-bg);
}
.composer__alert-banner--error .composer__alert-banner-dismiss {
  background: var(--danger-text);
  color: var(--danger-bg);
}

/* ─── Tab nav (0.3.0) ────────────────────────────────────────────── */
/* Top-level view switcher below topbar. Pill-style tabs that mirror
   the .filter-pill grammar in coloring but are slightly larger and
   left-aligned with the page content. */
.tab-nav {
  display: flex;
  gap: var(--pad-xs);
  align-items: center;
  padding: var(--pad-sm) var(--pad-xl);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}
.tab-nav__btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.tab-nav__btn:hover {
  color: var(--text-primary);
  background: var(--hover-bg);
}
.tab-nav__btn.active {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

/* ─── Placeholder view (0.3.0) ───────────────────────────────────── */
/* Shown for tabs whose port hasn't landed yet (Tiers, Audit during
   the 0.3.0/0.3.1/0.3.2 migration arc). Communicates the plan
   rather than rendering a broken-looking blank surface. */
.placeholder-view {
  text-align: center;
  padding: 100px var(--pad-xl);
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto;
}
.placeholder-view__icon {
  font-size: 36px;
  margin-bottom: var(--pad-md);
  opacity: 0.5;
}
.placeholder-view__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--pad-sm);
}
.placeholder-view__detail {
  font-size: 13px;
  line-height: 1.6;
}
.placeholder-view__detail code {
  font-family: var(--font-mono);
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-secondary);
}

/* ─── Users view (PR 2a / 0.3.0) ─────────────────────────────────── */
/* Mirrors the .alerts-shell + .alerts-table layout: outer shell with
   max-width centering, table with card styling. Add-user form sits
   above the table as its own card. */
.users-view {
  padding: var(--pad-md) var(--pad-xl) var(--pad-xl);
  max-width: 1600px;
  margin: 0 auto;
}
.users-view__header {
  display: flex;
  align-items: baseline;
  gap: var(--pad-md);
  margin-bottom: var(--pad-md);
}
.users-view__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}
.users-view__count {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.users-view__spacer { flex: 1; }

/* Add-user form — its own card so the visual separation between
   "create" and "manage existing" is clear. */
.users-view__add {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--pad-lg);
  margin-bottom: var(--pad-md);
  box-shadow: var(--shadow-card);
}
.users-view__add-title {
  margin: 0 0 var(--pad-md) 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.users-view__add-grid {
  display: grid;
  /* Handle gets the most width; the others share the rest. */
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: var(--pad-md);
  align-items: end;
}
@media (max-width: 900px) {
  .users-view__add-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.users-view__add-field {
  display: flex;
  flex-direction: column;
  gap: var(--pad-xs);
  min-width: 0;
}
.users-view__add-submit {
  display: flex;
  align-items: end;
}
.users-view__select,
.users-view__date-input {
  background: var(--bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px var(--pad-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
.users-view__select:focus,
.users-view__date-input:focus { border-color: var(--accent); }
.users-view__select:disabled,
.users-view__date-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.users-view__table-shell {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Users table — same skeleton as alerts-table but with users-specific
   cells. Shares the bg/border/radius via the table-shell wrapper. */
.users-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.users-table thead th {
  text-align: left;
  padding: var(--pad-sm) var(--pad-md);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faded);
  font-weight: 600;
  white-space: nowrap;
}
.users-table tbody td {
  padding: var(--pad-md);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.users-table tbody tr:last-child td { border-bottom: none; }
.users-table tbody tr:hover { background: var(--hover-bg); }

.users-table__handle-cell { min-width: 200px; }
.users-table__handle {
  color: var(--handle);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
}
.users-table__did {
  color: var(--text-faded);
  font-family: var(--font-mono);
  font-size: 11px;
  margin-top: 2px;
}
.users-table__source-na {
  color: var(--text-faded);
  font-style: italic;
}
.users-table__login {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: nowrap;
}
.users-table__expiry-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}
.users-table__expiry-input {
  background: var(--bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  font-family: var(--font-sans);
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s;
}
.users-table__expiry-input:focus { border-color: var(--accent); }
.users-table__expiry-input:disabled { opacity: 0.5; cursor: not-allowed; }
.users-table__expiry-clear {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: all 0.12s;
}
.users-table__expiry-clear:hover {
  background: var(--hover-bg);
  color: var(--danger);
}
.users-table__expiry-clear:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.users-table__expiry-never {
  color: var(--text-faded);
  font-style: italic;
  font-size: 12px;
}

/* ─── Users-view existing-user callout (0.3.1) ───────────────────── */
/* Shown below the add form when the resolved actor is already in
   the list. Soft accent tint to draw the eye without alarming —
   it's informational, not error. */
.users-view__add-existing {
  margin-top: var(--pad-md);
  padding: var(--pad-sm) var(--pad-md);
  background: var(--status-scheduled-bg);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.users-view__add-existing strong {
  font-family: var(--font-mono);
  color: var(--handle);
  font-weight: 500;
}
.users-view__add-existing code {
  font-family: var(--font-mono);
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--text-primary);
}

/* ─── Highlighted user row (0.3.1) ───────────────────────────────── */
/* Drawn via box-shadow insets on each cell rather than `outline:` on
   the <tr> — table layout doesn't render outline reliably across
   browsers. First/last cells render the side strokes; all cells
   render the top and bottom strokes. Tinted background adds visual
   weight beyond the outline alone.
   Persists until the highlight is cleared (operator picks a different
   actor, or clears the search field). */
.users-table tbody tr.users-table__row--highlighted td {
  background: var(--status-scheduled-bg);
  box-shadow:
    inset 0  2px 0 var(--accent),
    inset 0 -2px 0 var(--accent);
}
.users-table tbody tr.users-table__row--highlighted td:first-child {
  box-shadow:
    inset  2px 0 0 var(--accent),
    inset 0  2px 0 var(--accent),
    inset 0 -2px 0 var(--accent);
}
.users-table tbody tr.users-table__row--highlighted td:last-child {
  box-shadow:
    inset -2px 0 0 var(--accent),
    inset 0  2px 0 var(--accent),
    inset 0 -2px 0 var(--accent);
}

/* ─── Tiers view (PR 2b / 0.3.2) ─────────────────────────────────── */
/* Mirrors users-view positioning and header pattern. The matrix
   table sits inside a horizontally-scrollable wrap so wide feature
   sets don't break the layout on narrow viewports. */
.tiers-view {
  padding: var(--pad-md) var(--pad-xl) var(--pad-xl);
  max-width: 1600px;
  margin: 0 auto;
}
.tiers-view__header {
  display: flex;
  align-items: baseline;
  gap: var(--pad-md);
  margin-bottom: var(--pad-md);
}
.tiers-view__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}
.tiers-view__count {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.tiers-view__spacer { flex: 1; }
.tiers-view__table-shell {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tiers-table-wrap {
  overflow-x: auto;
}

.tiers-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.tiers-table thead th {
  padding: var(--pad-sm) var(--pad-md);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.tiers-table tbody td {
  padding: var(--pad-sm) var(--pad-md);
  border-bottom: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.tiers-table tbody tr:last-child td { border-bottom: none; }
.tiers-table tbody tr:hover td { background: var(--hover-bg); }
.tiers-table tbody tr.tiers-table__row--special td {
  background: var(--bg-secondary);
  font-weight: 500;
}
.tiers-table tbody tr.tiers-table__row--special:hover td {
  background: var(--bg-secondary);
}

/* Feature column: left-aligned, sticky to the left edge so the
   feature name stays visible when the matrix scrolls horizontally
   on narrow viewports. */
.tiers-table__feature-col {
  text-align: left !important;
  position: sticky;
  left: 0;
  background: var(--card-bg);
  z-index: 1;
  min-width: 180px;
  font-weight: 500;
  color: var(--text-primary);
}
.tiers-table thead th.tiers-table__feature-col {
  background: var(--bg-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faded);
  font-weight: 600;
  z-index: 2;
}
.tiers-table tbody tr.tiers-table__row--special td.tiers-table__feature-col {
  background: var(--bg-secondary);
}

.tiers-table__tier-col {
  min-width: 88px;
}
.tiers-table__tier-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.tiers-table__tier-count {
  font-size: 10px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-top: 2px;
}

.tiers-table__num-input {
  width: 56px;
  background: var(--bg);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: center;
  outline: none;
  transition: border-color 0.15s;
}
.tiers-table__num-input:focus { border-color: var(--accent); }
.tiers-table__num-input:disabled { opacity: 0.5; cursor: not-allowed; }

.tiers-table__checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}
.tiers-table__checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

/* ─── Audit view (PR 2c / 0.3.5) ─────────────────────────────────── */
.audit-view {
  padding: var(--pad-md) var(--pad-xl) var(--pad-xl);
  max-width: 1600px;
  margin: 0 auto;
}
.audit-view__header {
  display: flex;
  align-items: baseline;
  gap: var(--pad-md);
  margin-bottom: var(--pad-md);
}
.audit-view__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}
.audit-view__count {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.audit-view__spacer { flex: 1; }

/* Search row: input + toggle side-by-side. The input grows, the
   toggle is auto-width on the right. */
.audit-view__search-row {
  display: flex;
  align-items: center;
  gap: var(--pad-md);
  margin-bottom: var(--pad-lg);
  flex-wrap: wrap;
}
.audit-view__search-input {
  max-width: 480px !important;
}

.audit-view__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.audit-view__toggle input {
  cursor: pointer;
  accent-color: var(--accent);
}
.audit-view__toggle-help {
  color: var(--text-faded);
  cursor: help;
  font-size: 12px;
}

/* Suggest dropdown — extends composer__suggest with audit-specific
   layout for the source badge. */
.audit-view__suggest {
  max-width: 480px;
}
.audit-view__suggest--empty {
  cursor: default;
}
.audit-view__suggest-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--pad-sm) !important;
}
.audit-view__suggest-main {
  flex: 1;
  min-width: 0;
}
.audit-view__source-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}
.audit-view__source-badge--local {
  background: var(--status-active-bg, var(--bg));
  color: var(--accent);
  border: 1px solid var(--accent);
}
.audit-view__source-badge--bluesky {
  background: var(--bg);
  color: var(--text-faded);
  border: 1px solid var(--border);
}
.audit-view__no-results {
  padding: var(--pad-md);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  cursor: default;
}

/* Placeholder & results */
.audit-view__placeholder {
  text-align: center;
  padding: 60px var(--pad-xl);
  color: var(--text-muted);
  font-size: 13px;
}
.audit-view__results {
  display: flex;
  flex-direction: column;
  gap: var(--pad-md);
}

/* Account summary card */
.audit-view__account-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--pad-md) var(--pad-lg);
  box-shadow: var(--shadow-card);
}
.audit-view__account-handle {
  font-size: 15px;
  font-weight: 700;
  color: var(--handle);
  font-family: var(--font-mono);
}
.audit-view__account-did {
  font-size: 11px;
  color: var(--text-faded);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.audit-view__account-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pad-md);
  margin-top: var(--pad-sm);
  font-size: 13px;
  color: var(--text-secondary);
}
.audit-view__account-meta strong {
  color: var(--text-primary);
}
.audit-view__expiry-past { color: var(--danger); }
.audit-view__expiry-future { color: var(--text-muted); }
.audit-view__no-account {
  padding: var(--pad-md);
  color: var(--text-muted);
  font-style: italic;
  font-size: 13px;
}

/* Entries timeline */
.audit-view__entries {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.audit-view__entry {
  display: flex;
  align-items: center;
  gap: var(--pad-sm);
  padding: var(--pad-sm) var(--pad-md);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.audit-view__entry:last-child { border-bottom: none; }
.audit-view__entry:hover { background: var(--hover-bg); }
.audit-view__entry-icon {
  flex-shrink: 0;
  font-size: 14px;
}
.audit-view__entry-time {
  flex-shrink: 0;
  width: 150px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.audit-view__entry-action {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--text-primary);
  width: 130px;
}
.audit-view__entry-detail {
  flex: 1;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.audit-view__entry-admin {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-faded);
  font-family: var(--font-mono);
}

/* ─── Alert Audit view (PR 3 / 0.4.0) ─────────────────────────────── */
/* Per-alert audit log viewer. Reuses .audit-view (top-level shell
   + header pattern) and .audit-view__entry family (timeline row
   layout) so visual rhythm matches the per-user audit tab. New
   classes here cover: filter bar (action chips, admin typeahead,
   alert_id input, limit chips), the entry-block wrapper that owns
   the row border so the optional JSON detail panel sits flush
   against its entry, alert-id pill, detail toggle, and the
   pretty-printed detail panel itself. */

/* Filter bar — sits below the header, above the entries card. */
.alert-audit-view__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pad-lg);
  align-items: flex-end;
  padding: var(--pad-md) var(--pad-lg);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--pad-md);
  box-shadow: var(--shadow-card);
}
.alert-audit-view__filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--pad-xs);
  flex: 1 1 220px;
  min-width: 180px;
}
.alert-audit-view__filter-group--narrow {
  flex: 0 0 auto;
  min-width: 120px;
}
.alert-audit-view__filter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}

/* Chip group — used by Action filter and Limit filter. */
.alert-audit-view__chips {
  display: flex;
  gap: var(--pad-xs);
  flex-wrap: wrap;
}
.alert-audit-view__chip {
  padding: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  font-family: var(--font-sans);
}
.alert-audit-view__chip:hover {
  background: var(--hover-bg);
  border-color: var(--border-strong);
}
.alert-audit-view__chip--active,
.alert-audit-view__chip--active:hover {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

/* Admin typeahead — anchors the suggest dropdown plus the small
   clear-X that appears once a filter is locked in. */
.alert-audit-view__admin-picker {
  position: relative;
}
.alert-audit-view__clear-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.alert-audit-view__clear-btn:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

/* Entries container — reuses .audit-view__entries card; no extra
   rules needed at this level. */

/* Entry block — wraps the row + optional <pre> detail. Border
   moves up to the wrapper because the detail panel needs to sit
   flush below its entry; the existing .audit-view__entry rule's
   border-bottom is canceled inside the wrapper via the descendant
   selector below. */
.alert-audit-view__entry-block {
  border-bottom: 1px solid var(--border);
}
.alert-audit-view__entry-block:last-child {
  border-bottom: none;
}
.alert-audit-view__entry-block .audit-view__entry {
  border-bottom: none;
}

/* Alert-id pill — slot between the action verb and the admin
   handle, monospaced so id values line up vertically as the eye
   scans. */
.alert-audit-view__entry-alert-id {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* Detail toggle — pushed to the right edge via margin-left:auto.
   Compact button so it doesn't compete with the timestamp/admin
   columns for visual weight. */
.alert-audit-view__detail-toggle {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  font-family: var(--font-sans);
  white-space: nowrap;
}
.alert-audit-view__detail-toggle:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* Detail panel — pretty-printed JSON in a <pre>. Sits below its
   entry inside the same .alert-audit-view__entry-block, so the
   block's border-bottom visually closes the pair. */
.alert-audit-view__detail {
  margin: 0 var(--pad-md) var(--pad-md) calc(var(--pad-md) + 22px);
    /* left indent matches the entry-icon width so the detail
       panel aligns under the timestamp/action columns rather
       than the icon. Cosmetic; helps the eye trace structure. */
  padding: var(--pad-md);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow: auto;
  line-height: 1.5;
}