/* ============================================================
User Organizations — Page-specific Styles
Styles not covered by DS components.
Uses Design Tokens exclusively (css/tokens.css).

The native [hidden] attribute (reset.css: display: none !important)
overrides any display set on the base class, so the flex layouts are
guaranteed by :not([hidden]) rules below.
============================================================ */

/* ── Sections ── */
.user-organizations__section {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.user-organizations__section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.user-organizations__request {
  margin-top: var(--space-8);
}

.user-organizations__subtitle {
  font-size: var(--font-title-medium);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  margin: var(--space-6) 0 var(--space-2);
}

/* ── Current organization ── */
.user-organizations__current:not(:empty) {
  margin-top: var(--space-3);
}

.user-organizations__org-loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-body-medium);
}

/* ── Switcher ── */
.user-organizations__switch {
  margin-top: var(--space-4);
}

/* ── Membership list ── */
.user-organizations__list {
  margin-top: var(--space-2);
}

/* ── Pending access requests (request-access page) ── */
.user-organizations__pending {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.user-organizations__pending .datatable__actions .button {
  white-space: nowrap;
}

/* ── Org logo (leading visual in list rows and current-org details) ──
   Same footprint as the searchable-list icon; the club logo replaces the
   Material Symbols icon when organizations/{orgId}.logoUrl is set. */
.user-organizations__logo {
  flex-shrink: 0;
  font-size: var(--font-headline-medium);
  color: var(--color-primary);
  width: var(--space-10);
  height: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-container);
  border-radius: var(--radius-medium);
}

.user-organizations__logo--img {
  object-fit: contain;
}

.user-organizations__org-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Badges in the membership/status table cells ── */
.user-organizations__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

/* ── Search section ── */
.user-organizations__search {
  margin-bottom: var(--space-4);
}

/* ── Results area ── */
.user-organizations__results {
  margin-bottom: var(--space-4);
}

/* ── Selected org panel ── */
.user-organizations__selected {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.user-organizations__selected-title {
  font-size: var(--font-title-medium);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  margin: 0;
}

.user-organizations__selected-title strong {
  color: var(--color-primary);
}

/* ── Message textarea spacing ── */
.user-organizations__message {
  margin-bottom: var(--space-4);
}

/* ── Unregistered club section ── */
.user-organizations__unregistered {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.user-organizations__unregistered .form-field__hint {
  margin: 0;
  margin-bottom: var(--space-2);
}

/* ── Submit button wrap ── */
.user-organizations__actions {
  display: flex;
  justify-content: flex-end;
}

/* ── Error summary: flex layout when visible ── */
.error-summary:not([hidden]) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

/* ── Empty state: flex layout when visible ── */
.searchable-list__empty:not([hidden]),
.searchable-list__no-match:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-secondary);
}

.searchable-list__empty-icon,
.searchable-list__no-match-icon {
  font-size: var(--font-display-large);
  opacity: 0.5;
}

.searchable-list__empty-text,
.searchable-list__no-match-text {
  font-size: var(--font-body-large);
  margin: 0;
}

/* ── Responsive: mobile full-width button ── */
@media (max-width: 599px) {
  .user-organizations__actions {
    justify-content: stretch;
  }
  .user-organizations__actions .button {
    width: 100%;
  }
}