/*
 * Admin layout (/admin dashboard and the 403 forbidden page).
 *
 * Uses shared primitives from _page_hero.css (.page-hero,
 * .page-eyebrow, .page-hero-title, .page-hero-lead, .breadcrumb),
 * _cards.css (.card, .card-body), _buttons.css (.btn, .btn-primary,
 * .btn-secondary), and _badges.css (.badge, .badge-forest).
 *
 * Everything in this file is admin-page-specific: the section
 * framing, the stat-card grid, and the deferred-slot styling.
 *
 * No literal colour, spacing, or font values — everything routes
 * through var() tokens from _tokens.css.
 */

.admin-section {
  padding-block: 3rem;
  background: var(--stone);
}

@media (min-width: 48rem) {
  .admin-section {
    padding-block: 3.5rem;
  }
}

.admin-section-deferred {
  background: var(--cream);
}

.admin-section-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1rem;
}

.admin-section-lead {
  font-size: var(--fs-base);
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 1.5rem;
  max-width: 48rem;
}

/* ---- Stat grid (works for both real stats and deferred slots) ----- */

.admin-stat-grid {
  display: grid;
  /* Auto-fit each card to a >=18rem column so the grid grows from 1
   * column on mobile → 2 at ~38rem viewport → 3 at ~58rem → 4 at
   * ~76rem. The card count varies across admin sections (overview has
   * 3, deferred has 4), so a fixed column count would force an
   * asymmetric last-row card. minmax with auto-fit lets every card
   * fill the row regardless of count. */
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1.25rem;
}

.admin-stat-card {
  height: 100%;
}

.admin-stat-title {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .75rem;
}

.admin-stat-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--forest);
}

.admin-stat-link:hover,
.admin-stat-link:focus {
  color: var(--forest);
  border-bottom-style: solid;
}

.admin-stat-figure {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--forest);
  line-height: 1;
  margin-block: .25rem 1rem;
}

.admin-stat-breakdown {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  margin: 0;
  padding: 0;
}

.admin-stat-breakdown > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: .35rem;
  border-bottom: 1px solid var(--sand);
}

.admin-stat-breakdown > div:last-child {
  border-bottom: 0;
}

.admin-stat-breakdown dt {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0;
}

.admin-stat-breakdown dd {
  font-size: var(--fs-base);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* ---- Committee list ----------------------------------------------- */

.admin-committee-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .65rem;
}

.admin-committee-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  padding-block: .35rem;
  border-bottom: 1px solid var(--sand);
}

.admin-committee-list li:last-child {
  border-bottom: 0;
}

.admin-committee-name {
  font-size: var(--fs-base);
  color: var(--ink);
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
}

.admin-committee-count {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Deferred-slot card (greyed-out placeholder) ------------------ */

.admin-deferred-card {
  background: var(--stone);
  border: 1px dashed var(--sand);
}

.admin-deferred-status {
  display: inline-block;
  font-size: var(--fs-xs);
  color: var(--muted);
  background: var(--sand);
  border-radius: var(--r);
  padding: .2rem .55rem;
  margin-bottom: .65rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.admin-deferred-note {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* ---- Forbidden / 403 page ----------------------------------------- */

.admin-section .container > .admin-forbidden-card {
  max-width: 40rem;
  margin-inline: auto;
}

.admin-card-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 1rem;
}

.admin-card-lead {
  font-size: var(--fs-base);
  color: var(--ink);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.admin-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}

/* ---- Dashboard committee row link (clickable rows) ---------------- */

.admin-committee-row-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .25rem .35rem;
  margin: -.25rem -.35rem;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r);
}

.admin-committee-row-link:hover,
.admin-committee-row-link:focus {
  background: var(--stone);
  color: var(--forest);
}

/* ---- Committees index + show ------------------------------------- */

.admin-section .container > .admin-committees-table-card,
.admin-section .container > .admin-committee-detail,
.admin-section .container > .admin-members-table-card,
.admin-section .container > .admin-members-detail-card {
  max-width: 64rem;
  margin-inline: auto;
  margin-block-end: 1.5rem;
}

.admin-section .container > .admin-members-detail-card:last-child {
  margin-block-end: 0;
}

.admin-committees-table-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.admin-committees-name-link,
.admin-committees-link {
  color: var(--forest);
  text-decoration: none;
  font-weight: 600;
}

.admin-committees-name-link:hover,
.admin-committees-name-link:focus,
.admin-committees-link:hover,
.admin-committees-link:focus {
  text-decoration: underline;
}

.admin-committees-meta {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.admin-committee-empty {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--muted);
  font-style: italic;
}

.admin-seats-member-number {
  display: inline-block;
  margin-left: .35rem;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.admin-seats-meta {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.admin-seats-actions {
  text-align: right;
}

/* Ended-seats collapsible. The summary inherits .admin-section-title
 * styling but needs cursor + outline tweaks so it reads as
 * interactive rather than as a plain heading. */
.admin-ended-seats > summary {
  cursor: pointer;
  list-style: revert;
  user-select: none;
}

.admin-ended-seats > summary:hover,
.admin-ended-seats > summary:focus {
  color: var(--forest);
}

.admin-seats-table-ended {
  margin-top: 1rem;
  opacity: .85;
}

.admin-committee-detail-ended {
  background: var(--cream);
}

/* ---- Add-seat form (embedded on Admin::CommitteesController#show) - */

.admin-add-seat {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sand);
}

.admin-add-seat-title {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 .5rem;
}

.admin-add-seat-lead {
  margin: 0 0 1rem;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.55;
}

.admin-add-seat-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 32rem;
}

@media (min-width: 48rem) {
  .admin-add-seat-form {
    grid-template-columns: 2fr 1fr;
    align-items: end;
  }

  .admin-add-seat-form .form-errors,
  .admin-add-seat-form .admin-card-actions {
    grid-column: 1 / -1;
  }
}

/* Per-row "end seat" button — compact so it fits inside the data
 * table without forcing extra row height. Inherits .btn .btn-ghost
 * but overrides padding + font-size for the inline context. */
.admin-seats-end-button {
  padding: .35rem .85rem;
  font-size: var(--fs-xs);
}

/* button_to wraps the submit in a <form> that adds default block
 * margins; collapse them so the button sits flush in the cell. */
.admin-seats-actions form {
  margin: 0;
}

/* ---- Members index + show ---------------------------------------- */

.admin-members-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 64rem;
  margin-inline: auto;
  margin-block-end: 1.5rem;
}

@media (min-width: 48rem) {
  .admin-members-filters {
    grid-template-columns: 2fr 1fr 1fr auto;
    align-items: end;
  }
}

.admin-members-filters .form-group {
  margin: 0;
  max-width: none;
}

.admin-members-filter-search {
  /* Search input gets the widest column on desktop; let it stretch. */
}

.admin-members-filter-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.admin-members-name-link,
.admin-members-link {
  color: var(--forest);
  text-decoration: none;
  font-weight: 600;
}

.admin-members-name-link:hover,
.admin-members-name-link:focus,
.admin-members-link:hover,
.admin-members-link:focus {
  text-decoration: underline;
}

.admin-members-meta {
  color: var(--muted);
  font-size: var(--fs-sm);
}

.admin-members-empty {
  margin: 0;
  color: var(--muted);
  font-style: italic;
}

.admin-members-iban {
  font-family: var(--font-mono);
  word-break: break-all;
}

.admin-members-meta-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin: 0;
}

@media (min-width: 48rem) {
  .admin-members-meta-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }
}

.admin-members-meta-list > div {
  display: grid;
  gap: .25rem;
}

.admin-members-meta-list dt {
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.admin-members-meta-list dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-base);
}

.admin-members-subsection-title {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink);
  margin: 1rem 0 .5rem;
}

.admin-members-committees-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .5rem;
}

.admin-members-committees-list li {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: baseline;
}

.admin-members-committees-list-ended li {
  color: var(--muted);
}

.admin-members-committees-role {
  font-weight: 600;
  text-transform: capitalize;
}

.admin-members-committees-committee {
  color: var(--ink);
}

.admin-members-committees-list-ended .admin-members-committees-committee {
  color: var(--muted);
}

.admin-members-committees-ended {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-style: italic;
}

.admin-members-notes {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--fs-base);
  color: var(--ink);
  margin: 0;
  padding: .75rem 1rem;
  background: var(--cream);
  border-radius: .5rem;
  border: 1px solid var(--sand);
}

/* ---- Members new/edit form -------------------------------------- */

.admin-section .container > .admin-members-form-card {
  max-width: 56rem;
  margin-inline: auto;
}

.admin-members-form {
  display: grid;
  gap: 1.5rem;
}

.admin-members-form-fieldset {
  /* min-width: 0 disables the browser-default min-width: min-content on
   * <fieldset> so the 3-column Naam row can compress to fit the card
   * rather than forcing the card to grow. Same fix as
   * .members-profile-fieldset — see that rule for the audit context. */
  min-width: 0;
  border: 1px solid var(--sand);
  border-radius: .5rem;
  padding: 1rem 1.25rem 1.25rem;
  margin: 0;
  display: grid;
  gap: 1rem;
}

.admin-members-form-fieldset legend {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--forest);
  padding: 0 .5rem;
  margin-left: -.5rem;
}

.admin-members-form-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .admin-members-form-row {
    grid-template-columns: 1.4fr .8fr 1.4fr;
  }

  .admin-members-form-row-address {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 64rem) {
  .admin-members-form-row-address {
    grid-template-columns: 3fr 1fr;
  }
}

.admin-members-form-prefix .form-input {
  /* Tussenvoegsel is usually short ("van", "de", "van den") — narrower. */
  max-width: 12rem;
}

.admin-members-form-iban {
  font-family: var(--font-mono);
  letter-spacing: .04em;
}

.admin-members-form-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  padding-top: .5rem;
  border-top: 1px solid var(--sand);
}

.admin-members-form-hint {
  margin: .25rem 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  font-style: italic;
}

/* The "Lidmaatschap opzeggen" link on the member show — ghost button
 * dressed up with err-ink hover so the destructive nature is visible
 * without screaming "danger" alongside the routine "Bewerken" button. */
.admin-members-danger-link {
  color: var(--err-ink);
  border-color: var(--err-border);
}

.admin-members-danger-link:hover,
.admin-members-danger-link:focus {
  background: var(--err-bg);
  border-color: var(--err-ink);
}

/* ---- Cancellation confirmation page ----------------------------- */

.admin-section .container > .admin-cancellation-card {
  max-width: 40rem;
  margin-inline: auto;
}

.admin-cancellation-warning {
  background: var(--err-bg);
  color: var(--err-ink);
  border: 1px solid var(--err-border);
  border-radius: .5rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.admin-cancellation-warning strong {
  display: block;
  margin-bottom: .25rem;
}

.admin-cancellation-warning p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.admin-cancellation-form {
  display: grid;
  gap: 1.25rem;
}

.admin-cancellation-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

/* ---- Broadcasts -------------------------------------------------- */
/* M7 U7. Reuses the existing admin-section + card primitives.       */

.admin-section .container > .admin-broadcasts-table-card,
.admin-section .container > .admin-broadcasts-form-card {
  max-width: 64rem;
  margin-inline: auto;
}

.admin-broadcasts-table {
  width: 100%;
}

.admin-broadcasts-subject-link {
  font-weight: 600;
}

.admin-broadcasts-empty {
  margin: 0;
  color: var(--muted);
  font-style: italic;
}

.admin-broadcasts-meta {
  color: var(--muted);
}

.admin-broadcasts-form {
  display: grid;
  gap: 1.5rem;
}

.admin-broadcasts-form-fieldset {
  /* See .admin-members-form-fieldset for the min-width: 0 rationale. */
  min-width: 0;
  border: 1px solid var(--sand);
  border-radius: .5rem;
  padding: 1rem 1.25rem 1.25rem;
  margin: 0;
  display: grid;
  gap: 1rem;
}

.admin-broadcasts-form-fieldset legend {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--forest);
  padding: 0 .5rem;
  margin-left: -.5rem;
}

.admin-broadcasts-form-body lexxy-editor {
  min-height: 14rem;
}

.admin-broadcasts-form-recipient-picker {
  width: 100%;
}

.admin-broadcasts-form-hint {
  margin: .25rem 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  font-style: italic;
}

.admin-broadcasts-form-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  padding-top: .5rem;
  border-top: 1px solid var(--sand);
}

/* Show page */

.admin-broadcasts-show-body {
  padding: 1rem 0;
}

.admin-broadcasts-show-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.5rem;
  margin: 0;
}

@media (min-width: 48rem) {
  .admin-broadcasts-show-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.admin-broadcasts-show-stats-grid dt {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0;
}

.admin-broadcasts-show-stats-grid dd {
  margin: .25rem 0 0;
  font-weight: 600;
}

.admin-broadcasts-show-retry {
  margin-top: 1rem;
}

/* ---- Reservations ------------------------------------------------ */
/* M3 U9. Reuses the admin-section + card + data-table primitives and  */
/* the members filter-grid layout.                                     */

.admin-reservations-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 64rem;
  margin-inline: auto;
  margin-block-end: 1.5rem;
}

@media (min-width: 48rem) {
  .admin-reservations-filters {
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
  }
}

.admin-reservations-filters .form-group {
  margin: 0;
  max-width: none;
}

.admin-reservations-filter-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.admin-section .container > .admin-reservations-table-card,
.admin-section .container > .admin-reservations-show-card,
.admin-section .container > .admin-reservations-actions-card {
  max-width: 64rem;
  margin-inline: auto;
}

.admin-reservations-table {
  width: 100%;
}

.admin-reservations-link {
  color: var(--forest);
  text-decoration: none;
  font-weight: 600;
}

.admin-reservations-link:hover,
.admin-reservations-link:focus {
  text-decoration: underline;
}

.admin-reservations-empty,
.admin-reservations-actions-none {
  margin: 0;
  color: var(--muted);
  font-style: italic;
}

.admin-reservations-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
}

@media (min-width: 48rem) {
  .admin-reservations-detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.admin-reservations-detail-grid dt {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0;
}

.admin-reservations-detail-grid dd {
  margin: .25rem 0 0;
  font-weight: 600;
}

.admin-reservations-detail-notes {
  grid-column: 1 / -1;
}

.admin-reservations-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.admin-reservations-actions form {
  margin: 0;
}

/* ---- Posts (news CMS) -------------------------------------------- */
/* M2 U5. Reuses the admin-section + card + data-table primitives.    */

.admin-section .container > .admin-posts-table-card,
.admin-section .container > .admin-posts-form-card,
.admin-section .container > .admin-posts-actions-card,
.admin-section .container > .admin-posts-preview-card {
  max-width: 64rem;
  margin-inline: auto;
  margin-block-end: 1.5rem;
}

.admin-posts-table {
  width: 100%;
}

.admin-posts-link {
  color: var(--forest);
  text-decoration: none;
  font-weight: 600;
}

.admin-posts-link:hover,
.admin-posts-link:focus {
  text-decoration: underline;
}

.admin-posts-meta {
  color: var(--muted);
}

.admin-posts-empty {
  margin: 0;
  color: var(--muted);
  font-style: italic;
}

.admin-posts-form {
  display: grid;
  gap: 1.5rem;
}

.admin-posts-form-body lexxy-editor {
  min-height: 18rem;
}

.admin-posts-form-hint {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0 0 .35rem;
}

.admin-posts-form-actions {
  display: flex;
  gap: .5rem;
}

.admin-posts-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.admin-posts-actions form {
  margin: 0;
}

.admin-posts-preview-hero {
  margin: 0 0 1.25rem;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.admin-posts-preview-hero img {
  width: 100%;
  height: auto;
  display: block;
}

.admin-posts-preview-excerpt {
  color: var(--muted);
  font-size: var(--fs-lg);
  margin-bottom: 1rem;
}

/* ---- Membership applications (review inbox) ---------------------- */
/* M-membership U3. Reuses admin-section + card + data-table + the     */
/* members filter-grid layout.                                         */

.admin-applications-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 64rem;
  margin-inline: auto;
  margin-block-end: 1.5rem;
}

@media (min-width: 48rem) {
  .admin-applications-filters {
    grid-template-columns: 2fr 1fr auto;
    align-items: end;
  }
}

.admin-applications-filters .form-group {
  margin: 0;
  max-width: none;
}

.admin-applications-filter-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.admin-section .container > .admin-applications-table-card,
.admin-section .container > .admin-applications-actions-card,
.admin-section .container > .admin-applications-detail-card,
.admin-section .container > .admin-applications-timeline-card {
  max-width: 64rem;
  margin-inline: auto;
  margin-block-end: 1.5rem;
}

.admin-applications-table {
  width: 100%;
}

.admin-applications-link {
  color: var(--forest);
  text-decoration: none;
  font-weight: 600;
}

.admin-applications-link:hover,
.admin-applications-link:focus {
  text-decoration: underline;
}

.admin-applications-empty,
.admin-applications-actions-none {
  margin: 0;
  color: var(--muted);
  font-style: italic;
}

.admin-applications-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block-end: 1rem;
}

.admin-applications-actions form {
  margin: 0;
}

.admin-applications-reject {
  border-top: 1px solid var(--sand);
  padding-top: 1rem;
}

.admin-applications-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
}

@media (min-width: 48rem) {
  .admin-applications-detail-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.admin-applications-detail-grid dt {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin: 0;
}

.admin-applications-detail-grid dd {
  margin: .25rem 0 0;
  font-weight: 600;
}

.admin-applications-detail-notes {
  grid-column: 1 / -1;
}