/* ==========================================================================
   category-threshold.css — wybór progu goli (O/U)
   Wymaga: variables.css, category-controls.css
   ========================================================================== */

.category-threshold-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-20);
  width: 100%;
}

.category-threshold {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-10);
  width: max-content;
  max-width: 100%;
}

.category-threshold .category-controls__label {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--fg);
}

.category-threshold__list {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.category-threshold__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 41px;
  height: 41px;
  padding: 0 var(--space-5);
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-500);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  transition:
    background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out);
}

html[data-theme="dark"] .category-threshold__btn {
  background: #1f1f1f;
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
}

.category-threshold__btn:hover:not(.category-threshold__btn--active) {
  background: var(--category-date-control-hover-bg, #33333313);
  border-color: var(--category-date-control-hover-border, #33333313);
  color: var(--category-date-control-hover-color, #333333);
}

.category-threshold__btn--active {
  background: #333;
  border-color: #333;
  color: #fff;
}

html[data-theme="dark"] .category-threshold__btn--active {
  background: #fff;
  border-color: #fff;
  color: #333;
}

.category-threshold__btn:focus-visible {
  outline: none;
}

.category-threshold-side {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
}

.category-threshold-side__list {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.category-threshold-side__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 40px;
  padding: 0 var(--space-14);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-600);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  transition:
    background-color var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out);
}

html[data-theme="dark"] .category-threshold-side__btn {
  background: #1f1f1f;
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.88);
}

.category-threshold-side__btn:hover:not(.category-threshold-side__btn--active) {
  background: var(--category-date-control-hover-bg, #33333313);
  border-color: var(--category-date-control-hover-border, #33333313);
  color: var(--category-date-control-hover-color, #333333);
}

.category-threshold-side__btn--active {
  background: #333;
  border-color: #333;
  color: #fff;
}

html[data-theme="dark"] .category-threshold-side__btn--active {
  background: #fff;
  border-color: #fff;
  color: #333;
}

.category-threshold-side__btn:focus-visible {
  outline: none;
}

.category-threshold__btn--variant {
  font-size: var(--fs-13);
  font-weight: var(--fw-600);
}

/* HT/FT — toggle P/W + W/P (wspólny pill-track, jak na mockupie) */
.category-threshold__list--variants {
  flex-wrap: wrap;
  gap: var(--space-8);
  max-width: 100%;
}

.category-threshold__variant-pair {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 2px;
  padding: 3px;
  border: none;
  border-radius: 999px;
  background: #ebebeb;
}

html[data-theme="dark"] .category-threshold__variant-pair {
  background: #2a2a2a;
}

/* Nieaktywny — light: białe kółko, dark: tekst na tracku */
.category-threshold__variant-pair .category-threshold__btn--variant {
  background: #fff;
  border-color: transparent;
  color: #333;
  box-shadow: none;
}

html[data-theme="dark"] .category-threshold__variant-pair .category-threshold__btn--variant {
  background: transparent;
  border-color: transparent;
  color: rgba(255, 255, 255, 0.9);
}

.category-threshold__variant-pair .category-threshold__btn--variant:hover:not(.category-threshold__btn--active) {
  background: #fff;
  border-color: transparent;
  color: #333;
}

html[data-theme="dark"] .category-threshold__variant-pair .category-threshold__btn--variant:hover:not(.category-threshold__btn--active) {
  background: rgba(255, 255, 255, 0.06);
  border-color: transparent;
  color: rgba(255, 255, 255, 0.9);
}

/* Aktywny — light: ciemne kółko, dark: białe kółko */
.category-threshold__variant-pair .category-threshold__btn--variant.category-threshold__btn--active {
  background: #333;
  border-color: #333;
  color: #fff;
}

html[data-theme="dark"] .category-threshold__variant-pair .category-threshold__btn--variant.category-threshold__btn--active {
  background: #fff;
  border-color: #fff;
  color: #333;
}