/* Club admin area. Uses the Hey Footy theme tokens and Campfire utilities. */

.admin {
  --panel-width: 88ch;
}

.admin__header {
  align-items: start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--block-space);
  justify-content: space-between;
  margin-block-end: var(--block-space);

  h1 { margin: 0; }
}

.admin__lede {
  color: oklch(var(--fu-muted));
  margin-block: 0.25em 0;

  @media (prefers-color-scheme: dark) { color: oklch(var(--fu-night-muted)); }
}

.admin__status {
  background-color: oklch(var(--lch-blue-light));
  border-radius: 0.6em;
  margin-block-end: var(--block-space);
  padding: 0.6em 1em;
}

.admin__status--alert {
  background-color: oklch(var(--fu-warning) / 0.12);
  color: oklch(var(--fu-warning));

  @media (prefers-color-scheme: dark) { color: oklch(92% 0.05 50); }
}

/* Team cards */
.admin-grid {
  display: grid;
  gap: var(--block-space);
  grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
}

.admin-card {
  background-color: oklch(var(--lch-white));
  border: 1px solid oklch(var(--lch-gray-darker));
  border-radius: 0.8em;
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  padding: 1em 1.1em;

  h2 { margin: 0; font-size: 1.15em; }
}

.admin-card__counts {
  color: oklch(var(--fu-muted));
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1em;
  font-size: 0.9em;
  margin: 0;

  @media (prefers-color-scheme: dark) { color: oklch(var(--fu-night-muted)); }

  strong { color: oklch(var(--lch-black)); }
}

.admin-card__footer {
  display: flex;
  gap: 0.5em;
  justify-content: space-between;
  margin-block-start: auto;
}

/* Tool list */
.admin-tools {
  display: grid;
  gap: 0.5em;
  grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;

  .btn { inline-size: 100%; justify-content: start; }
}

/* Tabs */
.admin-tabs {
  border-block-end: 1px solid oklch(var(--lch-gray-darker));
  display: flex;
  gap: 0.25em;
  margin-block-end: var(--block-space);
  overflow-x: auto;
}

.admin-tab {
  border-block-end: 3px solid transparent;
  color: oklch(var(--fu-muted));
  font-weight: 500;
  padding: 0.6em 0.9em;
  text-decoration: none;
  white-space: nowrap;

  @media (prefers-color-scheme: dark) { color: oklch(var(--fu-night-muted)); }

  &:hover { color: oklch(var(--lch-black)); }
}

.admin-tab--current {
  border-block-end-color: oklch(var(--fu-cyan));
  color: oklch(var(--lch-black));
}

/* People rows */
.admin-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0 0 var(--block-space);
  padding: 0;
}

.admin-row {
  align-items: center;
  border-block-end: 1px solid oklch(var(--lch-gray-dark));
  display: flex;
  gap: 0.8em;
  padding-block: 0.6em;

  &:last-child { border-block-end: none; }
}

.admin-row__main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.admin-row__name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-row__meta {
  color: oklch(var(--fu-muted));
  font-size: 0.85em;
  overflow-wrap: anywhere;

  @media (prefers-color-scheme: dark) { color: oklch(var(--fu-night-muted)); }
}

.admin-row__actions {
  display: flex;
  flex-shrink: 0;
  gap: 0.4em;

  .btn { --btn-padding: 0.35em 0.8em; font-size: 0.85em; }
}

.initials-avatar {
  align-items: center;
  background-color: var(--avatar-bg, oklch(var(--fu-deep)));
  border-radius: 50%;
  block-size: 2.4em;
  color: white;
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.95em;
  font-weight: 600;
  inline-size: 2.4em;
  justify-content: center;
}

/* Chips */
.chip {
  border-radius: 999px;
  display: inline-block;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1.6;
  padding: 0 0.7em;
  white-space: nowrap;
}

.chip--age { background-color: oklch(var(--fu-cyan)); color: oklch(var(--fu-ink)); }
.chip--count { background-color: oklch(var(--lch-gray-dark)); color: oklch(var(--lch-black)); }
.chip--ok { background-color: oklch(var(--fu-pale)); color: oklch(var(--fu-night)); }
.chip--wait { background-color: oklch(var(--fu-warning) / 0.14); color: oklch(var(--fu-warning)); @media (prefers-color-scheme: dark) { color: oklch(92% 0.05 50); } }

/* Forms */
.admin-form {
  background-color: oklch(var(--lch-gray));
  border-radius: 0.8em;
  margin-block: var(--block-space);
  padding: 1em 1.1em;

  h3 { margin-block: 0 0.3em; font-size: 1em; }
  summary { cursor: pointer; font-weight: 600; }
}

.admin-form__grid {
  display: grid;
  gap: 0.6em 0.8em;
  grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
  margin-block: 0.6em;

  label { display: flex; flex-direction: column; gap: 0.25em; font-size: 0.9em; }
  .input { inline-size: 100%; }
}

.admin-link {
  background-color: oklch(var(--lch-gray));
  border-radius: 0.5em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75em;
  overflow-wrap: anywhere;
  padding: 0.4em 0.6em;
}

.admin-empty {
  color: oklch(var(--fu-muted));
  padding-block: 1em;
  text-align: center;

  @media (prefers-color-scheme: dark) { color: oklch(var(--fu-night-muted)); }
}