/* LEVEL-ONE calendar layer */

.club-calendar-shell,
.calendar-page,
.reservation-page,
.calendar-admin-page {
  min-width: 0;
  overflow-x: clip;
}

.club-calendar-toolbar,
.calendar-week-toolbar,
.calendar-admin-toolbar,
.reservation-toolbar {
  display: grid;
  gap: var(--lo-grid-gap);
  align-items: center;
}

.club-calendar-toolbar {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.calendar-week-toolbar,
.calendar-admin-toolbar,
.reservation-toolbar.reservation-toolbar-card {
  grid-template-columns: minmax(0, 1fr) auto;
}

.club-calendar-today {
  justify-self: start;
}

.club-calendar-month-switch,
.calendar-week-nav,
.calendar-admin-action-row,
.reservation-page .booking-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.club-calendar-month-switch {
  justify-content: center;
}

.club-calendar-month-title,
.calendar-week-title,
.calendar-item-title,
.calendar-item-detail,
.reservation-item,
.reservation-chip,
.booking-field,
.booking-form-note {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

.club-calendar-grid,
.calendar-week-grid,
.calendar-admin-grid,
.reservation-grid,
.booking-form-grid,
.booking-form-grid-wide,
.calendar-admin-form .booking-form-grid {
  display: grid;
  gap: var(--lo-grid-gap);
}

.club-calendar-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-week-grid,
.calendar-admin-grid,
.reservation-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.booking-form-grid,
.booking-form-grid-wide,
.calendar-admin-form .booking-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.club-calendar-day,
.calendar-week-day,
.calendar-item,
.calendar-admin-card,
.reservation-item,
.reservation-chip,
.reservation-toolbar-card {
  min-width: 0;
  border-radius: var(--lo-radius-md);
}

.calendar-item,
.calendar-admin-card,
.reservation-item,
.reservation-toolbar-card {
  padding: var(--lo-card-padding);
}

.reservation-chip {
  display: grid;
  gap: 0.28rem;
  align-items: start;
  padding: 0.55rem 0.66rem;
}

/* Calendar color system: identical in month and day/week views. */
:is(.club-calendar-grid .club-calendar-item, .calendar-week-grid .calendar-item).kind-event {
  border-color: rgba(var(--theme-primary-rgb), 0.42);
  background: rgba(var(--theme-primary-rgb), 0.10);
}

:is(.club-calendar-grid .club-calendar-item, .calendar-week-grid .calendar-item).kind-reservation {
  border-color: rgba(125, 183, 255, 0.42);
  background: rgba(125, 183, 255, 0.10);
}

:is(.club-calendar-grid .club-calendar-item, .calendar-week-grid .calendar-item).is-tournament {
  border-color: rgba(255, 206, 86, 0.48);
  background: rgba(255, 206, 86, 0.11);
}

:is(.club-calendar-grid .club-calendar-item, .calendar-week-grid .calendar-item).is-private {
  border-color: rgba(184, 148, 255, 0.42);
  background: rgba(184, 148, 255, 0.09);
}

:is(.club-calendar-grid .club-calendar-item, .calendar-week-grid .calendar-item).is-admin-only {
  border-color: rgba(255, 140, 105, 0.42);
  background: rgba(255, 140, 105, 0.09);
}

:is(.club-calendar-grid .club-calendar-item, .calendar-week-grid .calendar-item).is-past {
  opacity: 0.72;
}

@media (max-width: 920px) {
  .club-calendar-toolbar,
  .calendar-week-toolbar,
  .calendar-admin-toolbar,
  .reservation-toolbar.reservation-toolbar-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .club-calendar-today,
  .club-calendar-month-switch,
  .calendar-week-nav,
  .calendar-admin-action-row {
    justify-self: start;
  }

  .calendar-week-nav,
  .calendar-admin-action-row,
  .reservation-page .booking-modal-actions {
    width: 100%;
  }

  .calendar-week-grid,
  .calendar-admin-grid,
  .reservation-grid,
  .booking-form-grid,
  .booking-form-grid-wide,
  .calendar-admin-form .booking-form-grid {
    grid-template-columns: 1fr;
  }
}

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

  .calendar-item,
  .calendar-admin-card,
  .reservation-item,
  .reservation-toolbar-card {
    padding: 0.82rem;
    border-radius: var(--lo-radius-md);
  }

  .reservation-page .booking-modal-actions > :is(.primary-button, .secondary-button, .ghost-button),
  .calendar-admin-action-row > :is(a, button) {
    width: 100%;
  }
}

/* Extracted reservation toolbar block from legacy site.css. */
/* Reservation toolbar must be stacked like one large card, not split into two columns. */
.reservation-toolbar.reservation-toolbar-card {
  display: block;
}

.reservation-toolbar.reservation-toolbar-card .section-heading {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
}

.reservation-toolbar.reservation-toolbar-card .central-booking-form {
  margin-top: 0;
}

/* ==========================================================================
   Teilnehmerstruktur-Karten (Kalender-Quick-Create, Inkrement 5 – Schritt A)
   ========================================================================== */
.participant-structure-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lo-grid-gap, 0.75rem);
  margin: 0 0 1rem;
}
.participant-structure-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
  text-align: left;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md, 12px);
  background: var(--theme-surface);
  color: var(--theme-text);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  min-height: 44px;
}
.participant-structure-card:hover {
  border-color: var(--theme-primary);
  background: var(--theme-primary-soft);
}
.participant-structure-card:focus-visible {
  outline: none;
  box-shadow: var(--theme-focus-ring, 0 0 0 3px rgba(var(--theme-primary-rgb), 0.4));
}
.participant-structure-card.is-active {
  border-color: var(--theme-primary);
  background: var(--theme-primary-soft);
  box-shadow: 0 0 0 1px var(--theme-primary) inset;
}
.participant-structure-card__icon { font-size: 1.35rem; line-height: 1; }
.participant-structure-card__title { font-weight: 600; }
.participant-structure-card__hint {
  font-size: 0.8rem;
  color: var(--theme-text-muted, var(--muted));
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .participant-structure-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .participant-structure-cards { grid-template-columns: 1fr; }
}

/* Teilnehmer-Erfassungsblöcke je participant_structure (Inkrement 5 – Schritt B) */
.participant-capture { margin-top: 1rem; }
.participant-capture-block { margin-top: 0.5rem; }
.participant-capture-block[hidden] { display: none; }
.participant-capture-title { margin: 0 0 0.5rem; font-size: 1rem; }
.participant-capture-field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.5rem; }
.participant-capture-field > span { font-size: 0.85rem; color: var(--theme-text-muted, var(--muted)); }
.participant-capture-rows { display: flex; flex-direction: column; gap: 0.25rem; }
.participant-capture-team {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lo-grid-gap, 0.75rem);
}
.participant-capture-flag { font-weight: 600; margin: 0.25rem 0; }
.participant-capture-flag.is-warning { color: var(--accent-yellow, #b8860b); }
.participant-capture-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.participant-capture-actions .secondary-button,
.participant-capture-actions .ghost-button { min-height: 44px; }
@media (max-width: 640px) {
  .participant-capture-team { grid-template-columns: 1fr; }
  .participant-capture-actions .secondary-button,
  .participant-capture-actions .ghost-button { flex: 1 1 100%; }
}

/* Mitgliedersuche + Chips + Gastformular (Inkrement 5 – Schritt C) */
.participant-capture-search { position: relative; }
.participant-capture-results {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-sm, 8px);
  background: var(--theme-surface-strong, var(--theme-surface));
  max-height: 220px;
  overflow-y: auto;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.participant-capture-results[hidden] { display: none; }
.participant-capture-result {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.6rem;
  min-height: 40px;
  border: none;
  background: transparent;
  color: var(--theme-text);
  cursor: pointer;
  border-radius: var(--radius-sm, 8px);
}
.participant-capture-result:hover,
.participant-capture-result:focus-visible { background: var(--theme-primary-soft); outline: none; }
.participant-capture-chips { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.participant-capture-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--theme-border);
  border-radius: 999px;
  background: var(--theme-surface);
  overflow-wrap: anywhere;
}
.participant-capture-chip button { min-height: 32px; min-width: 32px; padding: 0 0.4rem; }
.participant-capture-guest[hidden] { display: none; }
.participant-capture-guest { margin-top: 0.5rem; padding: 0.6rem; border: 1px dashed var(--theme-border); border-radius: var(--radius-sm, 8px); }
@media (max-width: 640px) {
  .participant-capture-results { max-height: 160px; }
}

/* Doppel-Slots (Spieler 1 + Partner) – Inkrement 5 Schritt C2 */
.participant-capture-slot { display: flex; flex-direction: column; gap: 0.35rem; }
.participant-capture-slot__label { font-size: 0.85rem; color: var(--theme-text-muted, var(--muted)); font-weight: 600; }
.participant-capture-slot__chip { margin: 0.25rem 0 0; }
@media (max-width: 640px) {
  .participant-capture-slot { width: 100%; }
}

/* Named-Team-Blöcke (Inkrement 5 Schritt C3) */
.participant-capture-team-block {
  margin: 0.5rem 0;
  padding: 0.7rem;
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md, 12px);
  background: var(--theme-surface);
}
.participant-capture-team-block + .participant-capture-team-block { margin-top: 0.75rem; }