/* /connect/admin/views/invites.css — Admin Invites v1
 *
 * View-local skin for invites.js. All rules are scoped under `.inv-view`
 * (or the modal classes it renders) so nothing global is restyled. Layers
 * on top of admin-shell.css / admin-views.css and uses only --bcc-* tokens.
 * ─────────────────────────────────────────────────────────────────── */

.inv-view { position: relative; }

.inv-view .adm-header-actions {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  flex-wrap:   wrap;
}

/* ================================================================
   CHURCH CODE CARD
=============================================================== */
.inv-view .inv-code-card {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--bcc-s4);
  flex-wrap:       wrap;
  margin-bottom:   var(--bcc-s5);
}

.inv-view .inv-code-label {
  font-size:      var(--bcc-t-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--bcc-ink-3);
  margin-bottom:  var(--bcc-s1);
}

.inv-view .inv-code-value {
  font-family:    var(--bcc-font-display);
  font-size:      var(--bcc-t-2xl);
  font-weight:    700;
  letter-spacing: .14em;
  color:          var(--bcc-ink);
  line-height:    1.1;
}

.inv-view .inv-code-hint { margin-top: var(--bcc-s1); }

.inv-view .inv-code-actions {
  display:   flex;
  gap:       var(--bcc-s2);
  flex-wrap: wrap;
}

/* ================================================================
   FORM CARDS
=============================================================== */
.inv-view .inv-form-card {
  margin-bottom: var(--bcc-s5);
}

.inv-view .inv-card-title {
  margin:      0 0 var(--bcc-s4);
  font-size:   var(--bcc-t-lg);
  font-weight: 600;
  color:       var(--bcc-ink);
}

.inv-view .inv-form-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:                   var(--bcc-s4);
}

.inv-view .inv-form-grid .bcc-field {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s1);
  min-width:      0;
}

.inv-view .inv-form-grid .bcc-field--full { grid-column: 1 / -1; }

.inv-view .inv-custom-input { margin-top: var(--bcc-s1); }

.inv-view .inv-form-actions {
  display:         flex;
  justify-content: flex-end;
  gap:             var(--bcc-s2);
  margin-top:      var(--bcc-s4);
}

/* ================================================================
   RESULT CARD
=============================================================== */
.inv-view .inv-result {
  margin-top:    var(--bcc-s4);
  padding:       var(--bcc-s3) var(--bcc-s4);
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
}

.inv-view .inv-result-head {
  font-weight:   600;
  font-size:     var(--bcc-t-sm);
  color:         var(--bcc-ink);
  margin-bottom: var(--bcc-s2);
}

.inv-view .inv-result-link {
  padding:       var(--bcc-s2) var(--bcc-s3);
  background:    var(--bcc-surface-1);
  border:        1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-r-sm);
  overflow-wrap: anywhere;
}

.inv-view .inv-result-link code {
  font-size: var(--bcc-t-xs);
  color:     var(--bcc-ink-2);
}

.inv-view .inv-result-actions {
  display:    flex;
  gap:        var(--bcc-s2);
  margin-top: var(--bcc-s3);
  flex-wrap:  wrap;
}

.inv-view .inv-result-list {
  margin:      0;
  padding:     0;
  list-style:  none;
  display:     flex;
  flex-direction: column;
  gap:         var(--bcc-s1);
}

.inv-view .inv-result-list li {
  font-size: var(--bcc-t-sm);
  color:     var(--bcc-ink-2);
}

.inv-view .inv-result-list li.is-ok::before  { content: "\2713"; color: var(--bcc-success); margin-right: var(--bcc-s2); }
.inv-view .inv-result-list li.is-err::before { content: "\2715"; color: var(--bcc-danger);  margin-right: var(--bcc-s2); }

/* ================================================================
   TABLE + FILTER BAR
=============================================================== */
.inv-view .inv-table-card { padding-bottom: var(--bcc-s3); }

.inv-view .inv-filter-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--bcc-s3);
  flex-wrap:       wrap;
  margin-bottom:   var(--bcc-s3);
}

.inv-view .inv-filter-tabs {
  display:   flex;
  gap:       var(--bcc-s1);
  flex-wrap: wrap;
}

.inv-view .inv-search {
  max-width: 260px;
  flex:      1 1 200px;
}

.inv-view .inv-table { width: 100%; }

.inv-view .inv-recipient { display: block; }

.inv-view .inv-recipient-note { display: block; margin-top: 2px; }

.inv-view .inv-cell-actions { white-space: nowrap; }

.inv-view .inv-actions {
  display:   flex;
  gap:       var(--bcc-s1);
  flex-wrap: wrap;
}

/* ================================================================
   RECIPIENT CHIPS (group / domain)
=============================================================== */
.inv-view .inv-chip-row {
  display:   flex;
  gap:       var(--bcc-s1);
  flex-wrap: wrap;
  margin-top: var(--bcc-s1);
}

.inv-view .inv-chip {
  display:       inline-flex;
  align-items:   center;
  padding:       1px var(--bcc-s2);
  font-size:     var(--bcc-t-xs);
  line-height:   1.5;
  color:         var(--bcc-ink-2);
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-pill, 999px);
  white-space:   nowrap;
}

/* ================================================================
   SSO CARD
=============================================================== */
.inv-view .inv-sso-card {
  margin-bottom: var(--bcc-s5);
}

.inv-view .inv-card-sub {
  margin:      calc(-1 * var(--bcc-s2)) 0 var(--bcc-s4);
  line-height: 1.5;
}

.inv-view .inv-sso-note {
  margin:        0 0 var(--bcc-s3);
  padding:       var(--bcc-s2) var(--bcc-s3);
  background:    var(--bcc-surface-2);
  border:        1px solid var(--bcc-border);
  border-radius: var(--bcc-r-sm);
  line-height:   1.5;
}

.inv-view .inv-sso-empty {
  margin: 0 0 var(--bcc-s3);
}

.inv-view .inv-sso-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s2);
  margin-bottom:  var(--bcc-s4);
}

.inv-view .inv-sso-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--bcc-s3);
  flex-wrap:       wrap;
  padding:         var(--bcc-s2) var(--bcc-s3);
  background:      var(--bcc-surface-2);
  border:          1px solid var(--bcc-border);
  border-radius:   var(--bcc-r-md);
}

.inv-view .inv-sso-main {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  min-width:      0;
}

.inv-view .inv-sso-domain {
  display:     flex;
  align-items: center;
  gap:         var(--bcc-s2);
  font-weight: 600;
  color:       var(--bcc-ink);
}

.inv-view .inv-sso-meta {
  overflow-wrap: anywhere;
}

.inv-view .inv-sso-actions {
  display:   flex;
  gap:       var(--bcc-s2);
  flex-wrap: wrap;
}

.inv-view .inv-sso-form {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:                   var(--bcc-s4);
  align-items:           end;
}

.inv-view .inv-sso-form .bcc-field {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s1);
  min-width:      0;
}

.inv-view .inv-sso-form-actions {
  display:         flex;
  justify-content: flex-end;
  grid-column:     1 / -1;
}

/* ================================================================
   MODALS
=============================================================== */
.inv-qr-body {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--bcc-s3);
  padding:        var(--bcc-s4);
}

.inv-qr-img {
  display:      block;
  border-radius: var(--bcc-r-md);
  background:   #fff;
}

.inv-qr-link {
  text-align:    center;
  overflow-wrap: anywhere;
}

.inv-modal-body {
  display:        flex;
  flex-direction: column;
  gap:            var(--bcc-s2);
  padding:        var(--bcc-s4);
}

/* ================================================================
   RESPONSIVE
=============================================================== */
@media (max-width: 767px) {
  .inv-view .inv-code-card { flex-direction: column; align-items: flex-start; }
  .inv-view .inv-code-actions { width: 100%; }
  .inv-view .inv-filter-bar { align-items: stretch; }
  .inv-view .inv-search { max-width: none; width: 100%; }

  .inv-view .inv-sso-row { align-items: flex-start; }
  .inv-view .inv-sso-actions { width: 100%; }

  /* iOS: keep in-page form controls at 16px so focus does not zoom the page. */
  .inv-view input,
  .inv-view select,
  .inv-view textarea { font-size: 16px; }

  /* Horizontal scroll instead of squashing the wide table. */
  .inv-view .inv-table { min-width: 760px; }
}