/* /connect/family.css — Shared Family module styles v1
 * Prefix: famx-   (Bible Connect family linking / temporary children)
 * Mobile-first. Reuses the --bcc-* design tokens from connect-tokens.css.
 *
 * Layout guarantees:
 *   - Member rows collapse 3 -> 2 -> 1 via auto-fill grid.
 *   - Long names wrap (no nowrap/ellipsis on names, no horizontal overflow).
 *   - Touch targets >= 44px at <= 767px; inputs 16px at <= 767px (no iOS zoom).
 *   - Modal content wraps down to 320px.
 */

/* ================================================================
   SECTION SHELL
   ================================================================ */
.famx-section {
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s3);
  min-width: 0;
  max-width: 100%;
}

.famx-status {
  font-size: var(--bcc-t-sm);
  color: var(--bcc-ink-2);
  min-height: 0;
}
.famx-status:empty { display: none; }

/* ================================================================
   LOADING / ERROR / EMPTY STATES
   ================================================================ */
.famx-loading {
  display: flex;
  align-items: center;
  gap: var(--bcc-s3);
  padding: var(--bcc-s4);
  color: var(--bcc-ink-3);
  font-size: var(--bcc-t-sm);
}
.famx-spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--bcc-border-strong);
  border-top-color: var(--bcc-primary);
  animation: famx-spin .7s linear infinite;
}
@keyframes famx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .famx-spinner { animation: none; } }

.famx-error {
  padding: var(--bcc-s3) var(--bcc-s4);
  border-radius: var(--bcc-r-md);
  background: var(--bcc-danger-soft);
  color: var(--bcc-danger);
  font-size: var(--bcc-t-sm);
  border: 1px solid rgba(var(--bcc-danger-rgb), .3);
}

.famx-empty {
  text-align: center;
  padding: var(--bcc-s6) var(--bcc-s4);
  border: 1px dashed var(--bcc-border-strong);
  border-radius: var(--bcc-r-lg);
  background: var(--bcc-surface-1);
}
.famx-empty-title {
  margin: 0 0 var(--bcc-s1);
  font-size: var(--bcc-t-md);
  font-weight: 600;
  color: var(--bcc-ink);
}
.famx-empty-text {
  margin: 0;
  font-size: var(--bcc-t-sm);
  color: var(--bcc-ink-3);
  line-height: 1.5;
}

/* ================================================================
   BLOCKS / SECTION HEADERS
   ================================================================ */
.famx-block {
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s2);
  min-width: 0;
}
.famx-block-title {
  display: flex;
  align-items: center;
  gap: var(--bcc-s2);
  margin: 0;
  font-size: var(--bcc-t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bcc-ink-3);
}
.famx-block-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--bcc-r-pill);
  background: var(--bcc-surface-3);
  color: var(--bcc-ink-2);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: 0;
}
.famx-block-empty {
  margin: 0;
  font-size: var(--bcc-t-sm);
  color: var(--bcc-ink-3);
}

/* Adult vs minor child groups (family links vs Sunday School eligibility) */
.famx-block-group {
  padding-inline-start: var(--bcc-s3);
  border-inline-start: 3px solid var(--bcc-border-strong);
}
.famx-block-minors { border-inline-start-color: var(--bcc-success); }
.famx-block-adults { border-inline-start-color: var(--bcc-border-strong); }
.famx-block-minors .famx-block-title { color: var(--bcc-success); }
.famx-block-adults .famx-block-title { color: var(--bcc-ink-2); }

/* ================================================================
   MEMBER LIST + ROWS  (3 -> 2 -> 1)
   ================================================================ */
.famx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--bcc-s2);
  min-width: 0;
}

.famx-row {
  display: flex;
  align-items: flex-start;
  gap: var(--bcc-s3);
  padding: var(--bcc-s3);
  background: var(--bcc-surface-1);
  border: 1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.famx-row-temp {
  border-style: dashed;
  border-color: var(--bcc-border-strong);
  background: var(--bcc-surface-2);
}

.famx-row-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  width: 36px;
  height: 36px;
}
.famx-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bcc-primary-soft);
  color: var(--bcc-primary);
  font-weight: 700;
}

.famx-row-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.famx-row-name {
  font-size: var(--bcc-t-sm);
  font-weight: 600;
  color: var(--bcc-ink);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.famx-row-meta {
  font-size: var(--bcc-t-xs);
  color: var(--bcc-ink-3);
  line-height: 1.4;
}

.famx-row-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bcc-s1);
  align-items: center;
  justify-content: flex-end;
}
.famx-row-actions .famx-btn { white-space: nowrap; }
.famx-row-actions .famx-btn-enroll {
  white-space: normal;
  text-align: center;
}
.famx-row-actions .famx-btn-set-dob {
  white-space: normal;
  text-align: center;
}

/* ================================================================
   BADGES + PENDING PILLS
   ================================================================ */
.famx-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px var(--bcc-s2);
  border-radius: var(--bcc-r-pill);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.6;
  vertical-align: middle;
  white-space: nowrap;
}
.famx-badge-temp {
  background: var(--bcc-warning-soft);
  color: var(--bcc-warning);
  border: 1px solid rgba(var(--bcc-warning-rgb), .35);
}
.famx-badge-family {
  background: var(--bcc-primary-soft);
  color: var(--bcc-primary);
}
.famx-badge-pickup {
  background: var(--bcc-success-soft);
  color: var(--bcc-success);
}
.famx-badge-private {
  background: var(--bcc-surface-3);
  color: var(--bcc-ink-2);
  border: 1px solid var(--bcc-border-strong);
}

/* Date-of-birth status: Adult (18+) / Minor / Add date of birth */
.famx-badge-dob { border: 1px solid transparent; }
.famx-badge-dob-adult {
  background: var(--bcc-primary-soft);
  color: var(--bcc-primary);
  border-color: rgba(var(--bcc-primary-rgb), .3);
}
.famx-badge-dob-minor {
  background: var(--bcc-success-soft);
  color: var(--bcc-success);
  border-color: rgba(var(--bcc-success-rgb), .3);
}
.famx-badge-dob-unknown {
  background: var(--bcc-warning-soft);
  color: var(--bcc-warning);
  border: 1px dashed rgba(var(--bcc-warning-rgb), .65);
}

.famx-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--bcc-s2);
  border-radius: var(--bcc-r-pill);
  font-size: .65rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.famx-pill-pending {
  background: var(--bcc-warning-soft);
  color: var(--bcc-warning);
}
.famx-pill-enrolled {
  background: var(--bcc-success-soft);
  color: var(--bcc-success);
}
.famx-pill-none {
  background: var(--bcc-surface-3);
  color: var(--bcc-ink-3);
}
.famx-pill-eligible {
  background: var(--bcc-success-soft);
  color: var(--bcc-success);
}
.famx-pill-not-eligible {
  background: var(--bcc-surface-3);
  color: var(--bcc-ink-2);
  border: 1px solid var(--bcc-border-strong);
}
.famx-pill-incomplete {
  background: var(--bcc-warning-soft);
  color: var(--bcc-warning);
  border: 1px dashed rgba(var(--bcc-warning-rgb), .55);
}

/* Enrollment / withdraw / set-DOB row actions */
.famx-btn-enroll {
  border-color: var(--bcc-primary);
  color: var(--bcc-primary);
}
.famx-btn-withdraw { color: var(--bcc-danger); }
.famx-btn-set-dob {
  border-color: var(--bcc-warning);
  color: var(--bcc-warning);
}

/* Missing-DOB emphasis */
.famx-row-missing-dob {
  border-color: rgba(var(--bcc-warning-rgb), .55);
  box-shadow: inset 3px 0 0 var(--bcc-warning);
}
.famx-row-missing-dob .famx-row-meta { color: var(--bcc-warning); }


/* ================================================================
   NOTES / INLINE STATUS
   ================================================================ */
.famx-note { color: var(--bcc-ink-3); }
.famx-note-ok { color: var(--bcc-success); }
.famx-note-pending { color: var(--bcc-warning); }
.famx-note-error { color: var(--bcc-danger); }

/* ================================================================
   SECTION ACTIONS
   ================================================================ */
.famx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bcc-s2);
  padding-top: var(--bcc-s2);
  border-top: 1px solid var(--bcc-border);
}
.famx-action-btn { flex: 0 1 auto; }

/* ================================================================
   MODALS
   ================================================================ */
.famx-modal-hint {
  margin: 0 0 var(--bcc-s3);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.famx-modal-search { margin-bottom: var(--bcc-s2); }
.famx-search { width: 100%; }

.famx-modal-list {
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s1);
  max-height: 40vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  padding: var(--bcc-s1);
  margin-bottom: var(--bcc-s3);
  background: var(--bcc-surface-1);
}
.famx-modal-empty {
  padding: var(--bcc-s4);
  text-align: center;
  color: var(--bcc-ink-3);
  font-size: var(--bcc-t-sm);
}
.famx-modal-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: var(--bcc-s2) var(--bcc-s3);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--bcc-r-sm);
  color: var(--bcc-ink);
  font-family: inherit;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.famx-modal-row:hover { background: var(--bcc-surface-3); }
.famx-modal-row:focus-visible {
  outline: none;
  box-shadow: var(--bcc-focus);
}
.famx-modal-row-selected {
  background: var(--bcc-primary-tint);
  border-color: var(--bcc-primary);
}
.famx-modal-row-name {
  font-size: var(--bcc-t-sm);
  font-weight: 600;
}
.famx-modal-row-meta {
  font-size: var(--bcc-t-xs);
  color: var(--bcc-ink-3);
}

/* Class picker (enroll modal) */
.famx-class-list {
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s1);
  max-height: 40vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  padding: var(--bcc-s1);
  background: var(--bcc-surface-1);
}
.famx-class-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: var(--bcc-s2) var(--bcc-s3);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--bcc-r-sm);
  color: var(--bcc-ink);
  font-family: inherit;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.famx-class-row:hover { background: var(--bcc-surface-3); }
.famx-class-row:focus-visible {
  outline: none;
  box-shadow: var(--bcc-focus);
}
.famx-class-row-selected {
  background: var(--bcc-primary-tint);
  border-color: var(--bcc-primary);
}
.famx-class-name {
  font-size: var(--bcc-t-sm);
  font-weight: 600;
}
.famx-class-meta {
  font-size: var(--bcc-t-xs);
  color: var(--bcc-ink-3);
}

.famx-modal-fields {
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s3);
}
.famx-dob-input {
  width: 100%;
  min-height: 44px;
}
.famx-dob-help {
  margin: var(--bcc-s1) 0 0;
  font-size: var(--bcc-t-xs);
  color: var(--bcc-ink-3);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.famx-modal-person {
  margin-bottom: var(--bcc-s3);
}
.famx-modal-person-name {
  font-size: var(--bcc-t-md);
  font-weight: 600;
  color: var(--bcc-ink);
  overflow-wrap: anywhere;
}

.famx-check {
  display: flex;
  align-items: center;
  gap: var(--bcc-s2);
  min-height: 44px;
  font-size: var(--bcc-t-sm);
  color: var(--bcc-ink-2);
  cursor: pointer;
}
.famx-check input { width: 20px; height: 20px; flex: 0 0 auto; }

.famx-btn-decline { color: var(--bcc-danger); }

/* ================================================================
   RESPONSIVE — tablet collapse 3 -> 2
   ================================================================ */
@media (max-width: 1024px) {
  .famx-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* ================================================================
   RESPONSIVE — phone: single column, 44px targets, 16px inputs
   ================================================================ */
@media (max-width: 767px) {
  .famx-list { grid-template-columns: 1fr; }

  .famx-row {
    flex-wrap: wrap;
    align-items: center;
  }
  .famx-row-info { flex: 1 1 140px; }
  .famx-row-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  .famx-btn,
  .famx-action-btn,
  .famx-row-actions .bcc-btn {
    min-height: 44px;
    height: auto;
    padding-inline: var(--bcc-s4);
  }
  .famx-action-btn { flex: 1 1 auto; }
  .famx-actions { flex-direction: column; }

  .famx-search,
  .famx-modal-fields .bcc-input,
  .famx-modal-fields .bcc-textarea,
  .famx-modal-fields .bcc-select,
  #famx-rel,
  #famx-promote-status,
  #famx-temp-first,
  #famx-temp-last,
  #famx-temp-birth,
  #famx-temp-notes,
  #famx-child-first,
  #famx-child-last,
  #famx-child-birth,
  #famx-child-notes,
  #famx-setdob-date,
  #famx-enroll-notes {
    font-size: 16px;
  }

  .famx-modal-list { max-height: 45vh; }
  .famx-class-list { max-height: 45vh; }
}

/* ================================================================
   RESPONSIVE — very small (320px): keep content inside the viewport
   ================================================================ */
@media (max-width: 360px) {
  .famx-row { padding: var(--bcc-s2); gap: var(--bcc-s2); }
  .famx-badge,
  .famx-pill { font-size: .6rem; }
  .famx-block-group { padding-inline-start: var(--bcc-s2); }
  .famx-modal-row { padding: var(--bcc-s2); }
}