/* admin area: styles specific to these pages. Shared blocks live in ui-components.css. */

.admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-16); }
.admin-page { display: flex; flex-direction: column; gap: var(--space-20); min-width: 0; }
.admin-detail { display: flex; flex-direction: column; gap: var(--space-24); }
.admin-detail.layout-split { display: grid; }

/* ---------- Toolbar: filters on the left, search on the right ---------- */
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12) var(--space-16);
}

.admin-toolbar .tabs { flex: 0 1 auto; }

.admin-search {
  display: flex;
  flex: 1 1 300px;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-8);
  max-width: 420px;
  margin: 0;
}

.admin-search .input { flex: 1 1 220px; }
.admin-search__field { position: relative; flex: 1; min-width: 0; }
.admin-search__field .input { min-height: 46px; padding-left: var(--space-40); background: var(--white); }
.admin-search__icon { position: absolute; left: 14px; top: 50%; color: var(--text-muted); transform: translateY(-50%); pointer-events: none; }
.admin-search .btn { min-height: 46px; }

@media (max-width: 719px) {
  .admin-search { max-width: none; flex-basis: 100%; }
}

/* ---------- Table cells (the table itself is in ui-components.css) ---------- */
.admin-table-scroll { overflow-x: auto; }

.admin-cell { display: flex; align-items: center; gap: var(--space-12); min-width: 200px; }
.admin-cell__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.admin-cell__title { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
a.admin-cell__title:hover { color: var(--purple); }
.admin-cell__meta { font-size: var(--text-sm); color: var(--text-muted); }
.admin-cell__email { overflow-wrap: anywhere; }
.admin-cell__inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.admin-cell__inline:empty { display: none; }
.admin-cell--wide { min-width: 220px; max-width: 360px; color: var(--text-muted); }
.admin-code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); background: var(--canvas); padding: var(--space-2) var(--space-6); border-radius: var(--radius-2xs); }

.admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.admin-actions form { margin: 0; }
.admin-actions--end { justify-content: flex-end; flex-wrap: nowrap; }

.admin-note { font-size: var(--text-md); }
.admin-small { font-size: var(--text-md); line-height: var(--leading-normal); }

/* ---------- Page header meta (status, country, …) ---------- */
.admin-meta { display: inline-flex; align-items: center; gap: var(--space-4); font-size: var(--text-md); color: var(--text-muted); }
.admin-meta .icon { color: var(--status-inactive); }

/* ---------- Pending club callout ---------- */
.admin-callout { flex-direction: row; align-items: flex-start; gap: var(--space-14); }
.admin-callout .stat__icon { flex: none; margin: 0; }
.admin-callout__text { display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; }
.admin-callout__body { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink); }

/* ---------- Forms in cards ---------- */
.admin-form-actions { display: flex; flex-wrap: wrap; gap: var(--space-10); padding-top: var(--space-4); }
.admin-subform { padding: var(--space-20); border-top: 1px solid var(--line-fine); background: var(--hover-tint); }
.admin-flush-empty { padding: var(--space-16) var(--space-20); font-size: var(--text-base); }
.admin-surface-head { flex-direction: column; align-items: flex-start; }
.admin-file { width: 100%; padding: var(--space-12); font-size: var(--text-md); background: var(--canvas); border: 1.5px dashed var(--line-lilac); border-radius: var(--radius-md); }
.admin-file::file-selector-button { margin-right: var(--space-12); padding: var(--space-8) var(--space-14); font: inherit; font-weight: 600; color: var(--purple-deep); background: var(--white); border: 1px solid var(--line-lilac); border-radius: var(--radius-sm); cursor: pointer; }

.admin-quote {
  margin: 0;
  padding: var(--space-14) var(--space-16);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink);
  background: var(--lilac);
  border-left: 3px solid var(--purple);
  border-radius: var(--radius-sm);
}

/* ---------- Lead contact log ---------- */
.admin-timeline {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-4) 0 0;
  list-style: none;
}

.admin-timeline__item { position: relative; display: flex; gap: var(--space-14); padding-bottom: var(--space-16); }
.admin-timeline__item:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: var(--line-lilac); }

.admin-timeline__dot {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--purple);
  background: var(--white);
  border: 1.5px solid var(--line-lilac);
  border-radius: 50%;
}

.admin-timeline__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
  padding: var(--space-12) var(--space-16);
  background: var(--white);
  border: 1px solid var(--line-fine);
  border-radius: var(--radius-md);
}

.admin-timeline__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); }
.admin-timeline__time { font-size: var(--text-md); font-weight: 600; color: var(--ink); }
.admin-timeline__note { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }

.admin-contact { display: flex; flex-direction: column; gap: var(--space-10); margin: 0; padding: 0; list-style: none; }
.admin-contact li { display: flex; align-items: center; gap: var(--space-10); font-size: var(--text-base); overflow-wrap: anywhere; }
.admin-contact .icon { flex: none; color: var(--purple); }

.page-header__meta:has(.admin-meta) { column-gap: var(--space-14); }