/* ============================================================
   SF Filter Layout – Views exposed form pre /koncerty + /en/concerts
   ============================================================ */

#sf-rebuilt {
  font-family: inherit;
}

/* ---- Riadok 1: hlavné filtre v jednej línii ---- */
.sf-row-1 {
  display: flex;
  align-items: flex-end; /* inputy na jednej línii */
  gap: 16px;
  flex-wrap: wrap;
}

/* Každé pole: label hore, input dole */
.sf-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sf-label {
  font-size: 0.875rem; /* 14px – WCAG odporúčaná min. veľkosť */
  color: #555;
  margin-bottom: 4px;
  line-height: 1.3;
  white-space: nowrap;
}

.sf-label--empty {
  visibility: hidden; /* drží priestor bez viditeľného textu */
}

/* Šírky jednotlivých polí */
.sf-row-1 .sf-field:nth-child(1),
.sf-row-1 .sf-field:nth-child(2) { flex: 0 0 160px; } /* Dátumy */
.sf-row-1 .sf-field:nth-child(3) { flex: 0 0 180px; } /* Telesá */
.sf-row-1 .sf-field:nth-child(4) { flex: 0 0 210px; } /* Sezóna */
.sf-field--cykly                  { flex: 0 0 auto;  } /* Koncertné cykly */

/* ---- Datum input (fieldset je skrytý JS-om, input je priamo v .sf-field) ---- */
.sf-field input[type="date"] {
  height: 36px;
  width: 100%;
  box-sizing: border-box;
  display: block;
}

/* ---- Selecty ---- */
.js-form-item:has(#edit-telesa),
.js-form-item:has(#edit-sezona),
.js-form-item:has(#edit-typ-podujatia) {
  margin: 0 !important;
  padding: 0 !important;
}

#edit-telesa,
#edit-sezona,
#edit-typ-podujatia {
  height: 36px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
  display: block;
}

/* ---- Koncertné cykly – dropdown button ---- */
#edit-koncertne-cykly--wrapper {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative;
}

#edit-koncertne-cykly--wrapper legend {
  cursor: pointer;
  user-select: none;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
}

/* Skry pôvodnú šípku z témy */
#edit-koncertne-cykly--wrapper legend::after {
  display: none !important;
  content: none !important;
}

#edit-koncertne-cykly--wrapper .fieldset-legend {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #767676 !important;
  background: white;
  border-radius: 3px;
  font-size: 1rem;
  font-weight: normal;
  cursor: pointer;
  white-space: nowrap;
  color: #1a1a1a;
  box-sizing: border-box;
}

/* Aktívny stav – niečo je zaškrtnuté, button zmení farbu */
#edit-koncertne-cykly--wrapper.has-active .fieldset-legend {
  background: #6b5620 !important;
  color: white !important;
  border-color: #6b5620 !important;
}

#edit-koncertne-cykly--wrapper.has-active .fieldset-legend::after,
#edit-koncertne-cykly--wrapper.has-active.collapsed .fieldset-legend::after {
  color: white !important;
}
#edit-koncertne-cykly--wrapper .fieldset-legend::after {
  content: '▾' !important;
  font-size: 1.2em !important;
  color: #555 !important;
  display: inline !important;
}

#edit-koncertne-cykly--wrapper.collapsed .fieldset-legend::after {
  content: '▸' !important;
}

/* Dropdown panel */
#edit-koncertne-cykly--wrapper .fieldset-wrapper {
  display: block;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: auto;
  background: white;
  border: 1px solid #767676;
  border-radius: 4px;
  padding: 14px;
  z-index: 200;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 480px;
  max-width: 90vw;
}

#edit-koncertne-cykly--wrapper.collapsed .fieldset-wrapper {
  display: none;
}

/* ---- Pills (BEF checkboxes) – WCAG AA kontrast ---- */
/* Farba #6b5620 na bielej = 5.2:1 (AA vyžaduje 4.5:1) ✓ */
.bef-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
}

.bef-checkboxes .form-item {
  margin: 0;
  padding: 0;
}

/* Skryť checkbox vizuálne, zachovať pre screen readery */
.bef-checkboxes input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.bef-checkboxes label.option {
  display: inline-block;
  padding: 4px 13px;
  border: 2px solid #6b5620;
  border-radius: 20px;
  color: #6b5620;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  background: white;
  transition: background 0.1s;
}

.bef-checkboxes label.option:hover {
  background: #f0e8d5;
}

/* Focus viditeľný pre klávesnicu – WCAG 2.4.7 */
.bef-checkboxes input[type="checkbox"]:focus + label.option {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* Zaškrtnutý stav */
.bef-checkboxes input[type="checkbox"]:checked + label.option {
  background: #6b5620;
  color: white;
  border-color: #6b5620;
}

/* ---- Riadok 2: sekundárne filtre ---- */
.sf-row-2 {
  margin-top: 12px;
  display: flex;
  gap: 16px;
}

.sf-row-2 .sf-field {
  flex: 0 0 200px;
}

/* ---- Separator ---- */
.sf-sep {
  border: none;
  border-top: 1px solid #ddd;
  margin: 16px 0 0;
}

/* ---- Riadok 3: tlačidlo Zobraz/Show ---- */
.sf-row-3 {
  padding-top: 14px;
}

/* ============================================================
   MOBILE – max-width: 768px
   ============================================================ */
@media (max-width: 768px) {
  .sf-row-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  /* Všetky polia – full flex v gridu */
  .sf-row-1 .sf-field {
    flex: unset;
  }

  /* Koncertné cykly – celá šírka */
  .sf-field--cykly {
    grid-column: 1 / -1;
  }

  /* Dropdown sa otvára doľava aby neišiel mimo obrazovku */
  #edit-koncertne-cykly--wrapper .fieldset-wrapper {
    right: auto;
    left: 0;
    min-width: calc(100vw - 32px);
  }

  .sf-row-2 {
    flex-direction: column;
  }

  .sf-row-2 .sf-field {
    flex: 0 0 auto;
    width: 100%;
  }
}