/* ==========================================================================
   category-controls.css — layout paska controls (desktop)
   Wymaga: variables.css
   ========================================================================== */

:root {
  --category-controls-h: 40px;
}

.category-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-16);
  position: relative;
  z-index: 1;
}

/* Panel daty / podpowiedź trybu nad listą lig, ale pod headerem i category-nav (fixed). */
.category-controls:has(.category-date--open),
.category-controls:has(.category-mode--hint-open),
.category-controls:has(.wingman-team-search--open) {
  z-index: var(--z-category-popover);
}

.category-controls__group {
  display: flex;
  align-items: center;
  min-width: 0;
}

.category-controls__group--date {
  justify-content: flex-start;
}

.category-controls__group--view,
.category-controls__group--mode {
  flex-wrap: wrap;
  gap: var(--space-10);
}

.category-controls__group--view {
  justify-content: center;
  justify-self: center;
}

.category-controls__group--mode {
  justify-content: flex-end;
  justify-self: end;
  overflow: visible;
}

.category-controls--with-threshold {
  grid-template-rows: auto auto;
}

.category-controls__group--threshold {
  grid-column: 1 / -1;
  justify-content: flex-start;
  justify-self: start;
  width: 100%;
  padding-top: var(--space-4);
}

.category-controls__label {
  flex-shrink: 0;
  font-size: var(--fs-12);
  font-weight: var(--fw-600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.category-controls--date-only,
.category-controls--view-only,
.category-controls--mode-only {
  grid-template-columns: 1fr;
}

.category-controls--date-view,
.category-controls--date-draft-mode {
  grid-template-columns: minmax(0, 1fr) auto;
}

.category-controls--date-mode {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.category-controls--date-settings {
  grid-template-columns: minmax(0, 1fr) auto;
}

.category-controls--date-team-search {
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
}

.category-controls--date-wingman-settings {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.category-controls--date-wingman-settings .category-controls__group--settings {
  justify-self: end;
}

.category-controls--date-settings .category-controls__group--settings {
  justify-self: end;
}

.category-controls--date-team-search .category-controls__group--team-search {
  justify-self: end;
}

.category-controls__group--settings {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  position: relative;
  z-index: 1;
}

.category-controls__group--team-search {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 18rem;
}

.category-controls--view-mode {
  grid-template-columns: auto minmax(0, 1fr);
}

.category-controls--date-view .category-controls__group--view,
.category-controls--date-draft-mode .category-controls__group--draft-mode,
.category-controls--date-mode .category-controls__group--mode {
  justify-self: end;
}

/* Zwężenie: date / view / mode pod sobą zanim zaczną na siebie nachodzić */
@container category-top (max-width: 920px) {
  .category-controls,
  .category-controls.category-controls--date-view,
  .category-controls.category-controls--date-draft-mode,
  .category-controls.category-controls--date-mode,
  .category-controls.category-controls--date-team-search,
  .category-controls.category-controls--view-mode {
    grid-template-columns: 1fr;
    gap: var(--space-20);
    justify-items: center;
  }

  .category-controls__group--date,
  .category-controls__group--view,
  .category-controls__group--draft-mode,
  .category-controls__group--mode,
  .category-controls__group--settings,
  .category-controls__group--team-search {
    justify-self: center;
    width: auto;
    max-width: 100%;
    justify-content: center;
  }
}