/* app/assets/stylesheets/layouts/admin_invitations.css
   ─────────────────────────────────────────────────────────────────────────────
   Invitation index, new form, and associated components.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Invitation sections ─────────────────────────────────────────────────── */

.invitation-section {
  margin-bottom: var(--space-10);
}

.invitation-section:last-child {
  margin-bottom: 0;
}

/* ── Invitation list ─────────────────────────────────────────────────────── */

.invitation-list {
  display:        flex;
  flex-direction: column;
  gap:            1px;
  background:     var(--border-color);
  border:         1px solid var(--border-color);
}

.invitation-row {
  background:      var(--bg-surface);
  padding:         var(--space-4) var(--space-5);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  transition:      background var(--transition-fast);
}

.invitation-row:hover {
  background: var(--bg-sunken);
}

.invitation-row--muted {
  background: var(--bg-sunken);
}

.invitation-row--muted:hover {
  background: var(--color-gray-200);
}

.invitation-row__main {
  flex:           1;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.invitation-row__identity {
  display:     flex;
  align-items: baseline;
  gap:         var(--space-3);
  flex-wrap:   wrap;
}

.invitation-row__name {
  font-family:  var(--font-serif);
  font-size:    var(--text-md);
  font-weight:  700;
  color:        var(--color-black);
  letter-spacing: var(--tracking-tight);
}

.invitation-row__email {
  font-family: var(--font-mono);
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
}

.invitation-row__meta {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-wrap:   wrap;
}

.invitation-row__actions {
  flex-shrink: 0;
}

/* ── New invitation two-column layout ────────────────────────────────────── */

.invitation-form-wrap {
  display:               grid;
  grid-template-columns: 1fr 280px;
  gap:                   var(--space-8);
  align-items:           start;
}

.invitation-form-wrap__form  { min-width: 0; }
.invitation-form-wrap__help  { min-width: 0; }

/* ── Help card ───────────────────────────────────────────────────────────── */

.help-card {
  background:    var(--bg-surface);
  border:        1px solid var(--border-color);
  border-left:   3px solid var(--color-blue-600);
  padding:       var(--space-5);
  margin-bottom: var(--space-4);
}

.help-card--note {
  border-left-color: var(--color-amber-500);
}

.help-card__title {
  font-family:    var(--font-serif);
  font-size:      var(--text-md);
  font-weight:    700;
  letter-spacing: var(--tracking-tight);
  color:          var(--color-black);
  margin-bottom:  var(--space-3);
}

.help-card__steps {
  list-style:     decimal;
  padding-left:   var(--space-5);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.help-card__steps li {
  font-family:  var(--font-sans);
  font-size:    var(--text-sm);
  color:        var(--text-secondary);
  line-height:  var(--leading-normal);
}

.help-card__body {
  font-family:   var(--font-sans);
  font-size:     var(--text-sm);
  color:         var(--text-secondary);
  line-height:   var(--leading-normal);
  margin-bottom: var(--space-3);
}

.help-card__code {
  display:       block;
  font-family:   var(--font-mono);
  font-size:     var(--text-xs);
  background:    var(--bg-sunken);
  border:        1px solid var(--border-color);
  padding:       var(--space-2) var(--space-3);
  color:         var(--color-blue-700);
  border-radius: var(--radius-sm);
  word-break:    break-all;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .invitation-form-wrap {
    grid-template-columns: 1fr;
  }

  .invitation-form-wrap__help {
    order: -1;
  }
}

@media (max-width: 560px) {
  .invitation-row {
    flex-direction: column;
    align-items:    flex-start;
  }

  .invitation-row__identity {
    flex-direction: column;
    gap:            var(--space-1);
  }
}