/* ── Admin dashboard ─────────────────────────────── */

.admin {
  max-width: 60rem;
  margin-inline: auto;
  padding: var(--space-12) var(--container-padding) var(--space-16);
}

/* ── Top bar ─────────────────────────────────────── */

.admin__top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: var(--space-8);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-border);
}

.admin__nav {
  display: flex;
  gap: var(--space-1);
}

.admin__nav-link {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-foreground-muted);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;

  &:hover {
    color: var(--color-foreground);
    background: var(--color-background);
  }
}

.admin__nav-link--active {
  color: var(--color-primary);
  background: rgba(232, 123, 53, 0.08);
}

.admin__top-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Header ──────────────────────────────────────── */

.admin__header {
  margin-block-end: var(--space-10);
}

.admin__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  margin-block-end: var(--space-2);
}

.admin__subtitle {
  color: var(--color-foreground-muted);
}

.admin__btn-sign-out {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.8125rem;
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-foreground-muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;

  &:hover {
    color: var(--color-destructive);
    border-color: var(--color-destructive);
  }
}

.admin__card {
  background: var(--color-background-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-block-end: var(--space-8);
}

.admin__card-title {
  font-size: 1.125rem;
  font-weight: 700;
  padding: var(--space-5) var(--space-6);
  border-block-end: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.admin__stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: var(--space-4);
}

.admin__stat {
  text-align: center;
  padding: var(--space-4) var(--space-2);
  background: var(--color-background);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
}

.admin__stat--total {
  border-color: var(--color-primary);
  background: rgba(232, 123, 53, 0.05);
}

.admin__stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  margin-block-end: var(--space-1);
}

.admin__stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-foreground-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding-inline: var(--space-2);
  background: var(--color-background);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-foreground-muted);
}

.admin__table-wrap {
  overflow-x: auto;
}

.admin__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.admin__table th {
  text-align: start;
  padding: var(--space-3) var(--space-6);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-foreground-muted);
  background: var(--color-background);
}

.admin__table td {
  padding: var(--space-4) var(--space-6);
  border-block-start: 1px solid var(--color-border);
}

.admin__table tbody tr {
  transition: background 0.15s;

  &:hover {
    background: var(--color-background);
  }
}

.admin__muted {
  color: var(--color-foreground-muted);
  font-size: 0.875rem;
}

.admin__text-sm {
  font-size: 0.75rem;
}

.admin__badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: capitalize;
}

.admin__badge--admin {
  background: rgba(232, 123, 53, 0.12);
  color: var(--color-primary-dark);
}

.admin__badge--tester {
  background: rgba(74, 144, 217, 0.12);
  color: var(--color-blue);
}

.admin__badge--subscriber {
  background: rgba(67, 160, 71, 0.12);
  color: var(--color-green);
}

.admin__badge--pending {
  background: rgba(232, 123, 53, 0.12);
  color: var(--color-primary-dark);
}

.admin__badge--accepted {
  background: rgba(67, 160, 71, 0.12);
  color: var(--color-green);
}

.admin__badge--expired {
  background: rgba(158, 158, 158, 0.12);
  color: var(--color-foreground-muted);
}

.admin__badge--archived {
  background: rgba(158, 158, 158, 0.12);
  color: var(--color-foreground-muted);
}

.admin__search-row {
  padding: var(--space-4) var(--space-6);
  border-block-end: 1px solid var(--color-border);
}

.admin__search-form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.admin__input--search {
  flex: 1;
  max-width: 24rem;
}

.admin__input--select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  background: var(--color-background);
  flex: 0 1 auto;
  cursor: pointer;
}

/* ── Pagination ─────────────────────────────────── */

.admin__pagination {
  padding: var(--space-4) var(--space-6);
  border-block-start: 1px solid var(--color-border);
}

.admin__pagination .pagy nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
}

.admin__pagination .pagy nav a,
.admin__pagination .pagy nav span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding-inline: var(--space-2);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-foreground-muted);
  transition: background 0.15s, color 0.15s;
}

.admin__pagination .pagy nav a:hover {
  background: var(--color-background);
  color: var(--color-foreground);
}

.admin__pagination .pagy nav a.current,
.admin__pagination .pagy nav span.current {
  background: var(--gradient-warm);
  color: #fff;
}

.admin__pagination .pagy nav span.gap::before {
  content: "…";
}

/* ── Profile tags ─────────────────────────────────── */

.admin__profiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.admin__profile-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--color-background);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Add row ──────────────────────────────────────── */

.admin__add-row {
  padding: var(--space-4) var(--space-6);
  border-block-end: 1px solid var(--color-border);
}

.admin__add-fields {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}


/* ── Inline inputs ────────────────────────────────── */

.admin__input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  background: var(--color-background);
  flex: 1;
}

.admin__input--emoji {
  flex: 0 0 3.5rem;
  text-align: center;
}

/* ── Table cells for defaults ────────────────────── */

.admin__th--emoji {
  width: 4rem;
}

.admin__td--emoji {
  font-size: 1.25rem;
  width: 4rem;
}

.admin__td--actions {
  text-align: end;
  white-space: nowrap;
}

/* ── Row action buttons ──────────────────────────── */

.admin__row-btn {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-foreground-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  padding: var(--space-1) var(--space-2);

  &:hover {
    color: var(--color-primary);
  }
}

.admin__row-btn--delete {
  color: var(--color-foreground-muted);

  &:hover {
    color: var(--color-destructive);
  }
}

/* ── Edit row ────────────────────────────────────── */

.admin__edit-row[hidden] {
  display: none;
}

.admin__edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.admin__edit-fields {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.admin__edit-delete {
  border-block-start: 1px solid var(--color-border);
  padding-block-start: var(--space-3);
}

/* ── Settings toggle ─────────────────────────────── */

.admin__setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.admin__setting-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.admin__setting-label {
  font-weight: 700;
  font-size: 0.9375rem;
}

.admin__toggle-btn {
  position: relative;
  width: 3rem;
  height: 1.625rem;
  background: var(--color-border);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.2s;
  padding: 0;
  flex-shrink: 0;
}

.admin__toggle-btn--on {
  background: var(--color-green);
}

.admin__toggle-knob {
  position: absolute;
  inset-block-start: 0.1875rem;
  inset-inline-start: 0.1875rem;
  width: 1.25rem;
  height: 1.25rem;
  background: #fff;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s;
}

.admin__toggle-btn--on .admin__toggle-knob {
  transform: translateX(1.375rem);
}