/* /connect/admin/views/families.css — Admin Families view v1
 * Prefix: famad-   (scoped under .famad-view)
 * Mobile-first. Reuses the --bcc-* design tokens and the shared famx- badges
 * from /connect/family.css (loaded on the admin console).
 *
 * Layout guarantees:
 *   - Rows/cards wrap at <= 767px; action rows go full width.
 *   - Touch targets >= 44px at <= 767px; inputs 16px at <= 767px (no iOS zoom).
 *   - No horizontal overflow down to 320px.
 */

/* ================================================================
   VIEW SHELL
   ================================================================ */
.famad-view { position: relative; }

.famad-header-titles { min-width: 0; }
.famad-header-actions { flex-wrap: wrap; gap: var(--bcc-s2); }

.famad-noaccess { margin-top: var(--bcc-s6); }

/* ================================================================
   TABS
   ================================================================ */
.famad-tabs {
  display: flex;
  gap: var(--bcc-s1);
  margin-top: var(--bcc-s4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.famad-view .famad-tabs .bcc-tab {
  gap: var(--bcc-s2);
  height: 42px;
  padding-inline: var(--bcc-s3);
  white-space: nowrap;
  flex-shrink: 0;
}
.famad-view .famad-tabs .bcc-tab.active {
  color: var(--bcc-primary);
  border-bottom-color: var(--bcc-primary);
  background: var(--bcc-primary-tint);
}

.famad-content {
  margin-top: var(--bcc-s5);
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s5);
  outline: none;
  min-width: 0;
}

/* ================================================================
   PANELS + TOOLBARS
   ================================================================ */
.famad-panel {
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s3);
  min-width: 0;
}
.famad-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bcc-s2);
}

/* ================================================================
   LISTS + ROWS
   ================================================================ */
.famad-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s2);
  min-width: 0;
}

.famad-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;
}
.famad-row-temp {
  border-style: dashed;
  border-color: var(--bcc-border-strong);
  background: var(--bcc-surface-2);
}
.famad-row-missing {
  border-color: rgba(var(--bcc-warning-rgb), .55);
  box-shadow: inset 3px 0 0 var(--bcc-warning);
}
.famad-row-unaccompanied {
  box-shadow: inset 3px 0 0 var(--bcc-warning);
}

/* "No guardian (bus)" badge — shared famx-badge base, warning tone. */
.famad-view .famx-badge-unaccompanied {
  background: var(--bcc-warning-soft);
  color: var(--bcc-warning);
  border: 1px solid rgba(var(--bcc-warning-rgb), .5);
}

.famad-row-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  width: 36px;
  height: 36px;
}
.famad-row-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.famad-row-name {
  font-size: var(--bcc-t-sm);
  font-weight: 600;
  color: var(--bcc-ink);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.famad-row-meta {
  font-size: var(--bcc-t-xs);
  color: var(--bcc-ink-3);
  line-height: 1.4;
}
.famad-row-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bcc-s1);
}
.famad-row-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bcc-s1);
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}
.famad-row-actions .bcc-btn { white-space: nowrap; }
.famad-row-actions .famx-btn-set-dob { white-space: normal; text-align: center; }

/* Temporary-child guardian pills */
.famad-guard-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--bcc-s2);
  border-radius: var(--bcc-r-pill);
  background: var(--bcc-surface-3);
  color: var(--bcc-ink-2);
  font-size: .65rem;
  font-weight: 700;
}
.famad-guard-none {
  color: var(--bcc-ink-3);
  font-size: var(--bcc-t-xs);
}

/* ================================================================
   PENDING LINKS
   ================================================================ */
.famad-pending-row {
  display: flex;
  align-items: center;
  gap: var(--bcc-s3);
  flex-wrap: wrap;
  padding: var(--bcc-s3);
  background: var(--bcc-surface-1);
  border: 1px solid var(--bcc-border);
  border-radius: var(--bcc-r-md);
  min-width: 0;
}
.famad-pending-names {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bcc-s2);
  min-width: 0;
}
.famad-pending-side {
  display: inline-flex;
  align-items: center;
  gap: var(--bcc-s1);
  min-width: 0;
}
.famad-pending-name {
  font-size: var(--bcc-t-sm);
  font-weight: 600;
  color: var(--bcc-ink);
  overflow-wrap: anywhere;
}
.famad-pending-rel {
  font-size: var(--bcc-t-xs);
  color: var(--bcc-ink-3);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.famad-pending-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bcc-s1);
}

/* ================================================================
   FAMILY LINKS — search + detail
   ================================================================ */
.famad-search-wrap { margin-bottom: var(--bcc-s2); }
.famad-search { width: 100%; }

.famad-search-list {
  list-style: none;
  margin: 0 0 var(--bcc-s3);
  padding: var(--bcc-s1);
  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);
  background: var(--bcc-surface-1);
}
.famad-search-item {
  display: flex;
  align-items: center;
  gap: var(--bcc-s2);
  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: inherit;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.famad-search-item:hover { background: var(--bcc-surface-3); }
.famad-search-item:focus-visible {
  outline: none;
  box-shadow: var(--bcc-focus);
}
.famad-search-item--active {
  background: var(--bcc-primary-tint);
  border-color: var(--bcc-primary);
}
.famad-search-name { flex: 1 1 auto; min-width: 0; }

.famad-detail {
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s4);
  min-width: 0;
}
.famad-detail-empty {
  padding: var(--bcc-s4);
  border: 1px dashed var(--bcc-border-strong);
  border-radius: var(--bcc-r-md);
  background: var(--bcc-surface-1);
}
.famad-detail-person {
  display: flex;
  align-items: center;
  gap: var(--bcc-s3);
  flex-wrap: wrap;
  min-width: 0;
}
.famad-detail-avatar { flex: 0 0 auto; display: inline-flex; width: 36px; height: 36px; }
.famad-detail-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.famad-detail-name {
  font-size: var(--bcc-t-md);
  font-weight: 600;
  color: var(--bcc-ink);
  overflow-wrap: anywhere;
}
.famad-detail-meta {
  font-size: var(--bcc-t-xs);
  color: var(--bcc-ink-3);
}
.famad-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bcc-s1);
  margin-left: auto;
}

/* ================================================================
   PICKUP PERMISSIONS
   ================================================================ */
.famad-subtitle {
  margin: 0 0 var(--bcc-s2);
  font-size: var(--bcc-t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bcc-ink-3);
}
.famad-pickup {
  border-top: 1px solid var(--bcc-border);
  padding-top: var(--bcc-s3);
}
.famad-pickup-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bcc-s1);
}
.famad-pickup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bcc-s2);
  flex-wrap: wrap;
  padding: var(--bcc-s2) 0;
}
.famad-pickup-name {
  font-size: var(--bcc-t-sm);
  color: var(--bcc-ink);
  overflow-wrap: anywhere;
}

/* ================================================================
   STATE BLOCKS
   ================================================================ */
.famad-state {
  padding: var(--bcc-s6) var(--bcc-s4);
  text-align: center;
  color: var(--bcc-ink-3);
  font-size: var(--bcc-t-sm);
}
.famad-state-error { color: var(--bcc-danger); }
.famad-empty { margin: 0; }

/* ================================================================
   RESPONSIVE — phone: wrap, 44px targets, 16px inputs
   ================================================================ */
@media (max-width: 767px) {
  .famad-view .famad-tabs .bcc-tab { min-height: 44px; }
  .famad-view .bcc-btn { min-height: 44px; height: auto; }
  .famad-view .bcc-input,
  .famad-view .bcc-select,
  .famad-view .bcc-textarea { min-height: 44px; }

  .famad-search,
  .famad-view input,
  .famad-view select,
  .famad-view textarea { font-size: 16px; }

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

  .famad-pending-names { flex: 1 1 100%; }
  .famad-pending-actions { flex: 1 1 100%; }
  .famad-detail-badges { margin-left: 0; }

  .famad-view .famx-badge-unaccompanied { white-space: normal; }
  .famad-row-actions .famx-btn-link-guardian { white-space: normal; text-align: center; }

  .famad-search-list { max-height: 45vh; }
}

/* ================================================================
   RESPONSIVE — very small (320px): keep content inside the viewport
   ================================================================ */
@media (max-width: 360px) {
  .famad-row { padding: var(--bcc-s2); gap: var(--bcc-s2); }
  .famad-pending-row { padding: var(--bcc-s2); }
  .famad-view .famad-tabs .bcc-tab { padding-inline: var(--bcc-s2); }
  .famad-search-item { padding: var(--bcc-s2); }
}