/*
 * The club admin's own screens — the Dashboard, the Troph-e History Log,
 * the Club Profile, and Billing and Credits.
 *
 * Layout only. Every colour, size, radius and duration is a token; this file
 * introduces no new visual language and authors no component. Where a screen
 * needs a control it renders one from app/components/ui/.
 */

/* A paragraph of explanation inside a club admin card or page (D170). It
   replaces the sign-in screen's `auth-prose`, which admin pages had borrowed
   along with that screen's phone column; the look is the same, the class is
   the admin's own so the sign-in layout can change without moving these. */
.admin-prose {
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

/* A create form's stack of fields inside its card, with its Cancel and submit
   row at the foot (D170). The sign-in screen's `auth-stack`, which these forms
   had borrowed, is the same stack; this is the admin's own. */
.admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-form > .ui-actions { margin-top: var(--space-2); }

/* ---------------------------------------------------------------------------
 * Troph-e History Log
 * ------------------------------------------------------------------------- */

/* From and to (D197). On a phone the pair and its words are wider than the
   screen, so "to" and the second date wrap to a line of their own rather than
   running off the edge. Each input shrinks no further than a whole date
   beside the platform's calendar icon. */
.history__dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
}

.history__dates-end {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.history__dates .ui-input {
  flex: 0 1 var(--history-date-width);
  width: var(--history-date-width);
  min-width: var(--history-date-min-width);
}

.history__dates-label,
.history__dates-to {
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------------
 * Dashboard
 * ------------------------------------------------------------------------- */

/* styleguide.md §4: card grids are 3 × 296px or 2 × 452px with 16px gaps. Both
   rows are `auto-fit` rather than a fixed count so the three-card row folds to
   two and then one as the window narrows, instead of overflowing — the mocks
   draw one width and say nothing about any other. `min(…, 100%)` lets a
   column narrower than one card (a phone, D181) hold one card at its width
   rather than overflowing sideways. */
.dashboard__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dashboard-card-min), 100%), 1fr));
  gap: var(--space-4);
}

.dashboard__row--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dashboard-card-wide-min), 100%), 1fr));
}

/* The Dashboard's sections (D178): a heading over its rows, as the Overview's
   "Latest Studio troph-es" is, with no card around them. */
.dashboard__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* On a phone (D181) the five figures sit two to a row rather than one, so the
   balance and what is waiting still fit on the first screen. */
@media (max-width: 767px) {
  .ui-stat-tiles.dashboard__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .dashboard__tiles .ui-stat-tile { padding: var(--space-3) var(--space-4); }
}

/* Engagement Overview holds two groups side by side, Top Troph-e and Stats,
   folding to one column as the window narrows. */
.dashboard__nested {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dashboard-nested-min), 100%), 1fr));
  gap: var(--space-5);
}

.dashboard__group-heading { margin-bottom: var(--space-3); }

/* A row with no count — "Finish setting up your club" — holds the count's
   column with an icon, so its words line up with the rows that have one. */
.overview__look .icon.overview__look-icon {
  margin-left: 0;
  min-width: var(--count-min-width);
  color: var(--gold-300);
}

/* The donut centres itself in its half of the nested grid. */
.dashboard__donut {
  display: flex;
  justify-content: center;
}

/* The line under a figure that says what it counts. Tertiary, because it is the
   caption and the number is the content. */
.dashboard__note {
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  margin-top: var(--space-3);
}

/* ---------------------------------------------------------------------------
 * Club Profile
 * ------------------------------------------------------------------------- */

/* The form's cards, stacked. The page's narrow column is what caps its width
   now (D170), so the form itself no longer does. */
.club-profile__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* The stack of fields inside a card. Its own class rather than reusing
   `__form`, which carries the max-width the whole column is capped at — applying
   that a second time inside an already-capped card is a width nobody asked for
   waiting to be inherited by the next field added here. */
.club-profile__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Suburb and state side by side (D214); stacked on a phone. */
.club-profile__place {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 767px) {
  .club-profile__place { grid-template-columns: 1fr; }
}

/* Retired categories (D153): read-only chips under the chooser, wrapping like
   it does, with their note on its own line. */
.club-profile__retired {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.club-profile__retired .dashboard__note { flex-basis: 100%; }

/* The two colour controls sit side by side — they are chosen against each
   other, not one after the other, so putting them on separate rows would hide
   half the decision. */
.club-profile__colours {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--club-profile-colour-min), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* The club's logo (D185): the picture on a neutral plate, with Remove beside
   it. The plate is a nested wash, never the club's colours (D32), so a dark logo
   and a light one both read. `contain` keeps the logo whole at any aspect. */
.club-logo__current {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.club-logo__plate {
  display: grid;
  place-items: center;
  inline-size: var(--club-logo-preview-size);
  block-size: var(--club-logo-preview-size);
  padding: var(--space-3);
  background: var(--surface-2);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
}

.club-logo__image {
  max-inline-size: 100%;
  max-block-size: 100%;
  object-fit: contain;
}

/* "Awaiting your Accept" beside a draft's award in the History Log (D151). */
.history__status { margin-left: var(--space-2); vertical-align: middle; }

/* ---------------------------------------------------------------------------
 * Billing and Credits (D160)
 * ------------------------------------------------------------------------- */

/* The two disabled controls under the current plan, side by side, with the
   card's own gap above them as the Dashboard's Top Up has. */
.billing__actions {
  margin-top: var(--space-4);
}

/* The three plans, nested one wash level up inside the Plans card, side by
   side in three equal columns at the drawn 960 (D170). They had sat in the
   Dashboard's auto-fit grid, which inside a card's padding fitted two and left
   Pro orphaned on a row of its own. They fold to one column only when the
   window is phone-narrow. Each card stacks its lines with the stat list's gap. */
.billing__plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 767px) {
  .billing__plans { grid-template-columns: minmax(0, 1fr); }
}

.billing__plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* The annual price is the figure a treasurer compares, so it takes the h3
   step and the gold value colour the stat list gives an emphasised figure. */
.billing__price {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-leading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-gold);
}

.billing__terms {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

/* Generations' attempts slice sits on its own line above their table (D177). */
.generations__slice { align-self: flex-start; }

/* --- The platform admin's Overview (D178) -------------------------------- */
.overview__split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--dashboard-card-wide-min), 100%), 1fr));
  gap: var(--space-4);
  align-items: start;
}

.overview__looks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.overview__look {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--table-row-height-dense);
  padding: 0 var(--space-2);
  border-bottom: var(--border-width) solid var(--divider);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
}

.overview__looks li:last-child .overview__look { border-bottom: 0; }
.overview__look .icon { margin-left: auto; color: var(--text-tertiary); }
.overview__look:hover { background: var(--surface-hover-row); color: var(--text-primary); }
.overview__look:focus-visible {
  outline: var(--focus-ring-outline);
  outline-offset: var(--focus-ring-offset);
  outline-color: var(--focus-colour-neutral);
}

.overview__look-count {
  min-width: var(--count-min-width);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.overview__draws { display: flex; flex-direction: column; gap: var(--space-4); }

/* --- Settings sections (D180) ---------------------------------------------
 * A settings page is one column of sections under eyebrow headings, each set
 * off by a rule, not a stack of cards: a card per field gave a one-line note
 * the weight of a form. */
.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--divider);
}

.settings-section:first-of-type { padding-top: 0; border-top: 0; }

.settings-section__title {
  margin: 0;
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-leading);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
}

.settings-roles { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }

.settings-roles__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--table-row-height-dense);
  border-bottom: var(--border-width) solid var(--divider);
}

.settings-roles__row:last-child { border-bottom: 0; }
.settings-roles__name { color: var(--text-primary); font-weight: var(--font-weight-semibold); }