/* Admin Panel - Reuses existing app styles (table.css, badge.css, button.css, etc.) */

/* Admin badge in header - uses existing badge--secondary */
.badge--warning {
  --badge-background: var(--color-yellow-200, #fef3c7);
  --badge-color: var(--color-yellow-900, #78350f);
  --badge-border-color: var(--color-yellow-300, #fde047);
}

.key-metrics--grid {
  /* mobile */
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;

  /* tablet */
  @media (min-width: 800px) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
}

.key-metrics--card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-elevated);
}

.user-information--grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;

  /* tablet */
  @media (min-width: 800px) {
    grid-template-columns: repeat(2, 1fr);
  }
}