/* =============================================================================
   chr-filter.css — Styly pro ChR filtr a multi-select komponentu.

   Obsah:
     1. Multi-select / single-select komponenta — z ciselniky.js
     2. ChR filtr — sbalovatelná karta nahoře (sticky) + layout 4 bloků
   ============================================================================= */


/* =============================================================================
   1. KOMPONENTA — společné (oba módy)
   ============================================================================= */

.multiselect {
  position: relative;
  width: 100%;
}

/* Šipka ▾ vpravo — společná pro single i multi */
.multiselect-arrow {
  margin-left: auto;
  padding-left: 8px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
  pointer-events: none;
  transition: transform 150ms ease;
}
.multiselect.is-open .multiselect-arrow {
  transform: rotate(180deg);
}


/* =============================================================================
   1a. SINGLE-SELECT — vypadá jako nativní <select>
   ============================================================================= */

.multiselect-single .multiselect-display {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color 120ms ease;
  user-select: none;
  box-sizing: border-box;
}
.multiselect-single .multiselect-display:focus,
.multiselect-single.is-open .multiselect-display {
  border-color: var(--accent);
}

.multiselect-display-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.multiselect-display-text.is-placeholder {
  color: var(--ink-soft);
}


/* =============================================================================
   1b. MULTI-SELECT — chipy + placeholder + šipka
   ============================================================================= */

.multiselect-multi .multiselect-input {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 34px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  cursor: pointer;
  align-items: center;
  outline: none;
  transition: border-color 120ms ease;
  box-sizing: border-box;
}
.multiselect-multi .multiselect-input:focus,
.multiselect-multi.is-open .multiselect-input {
  border-color: var(--accent);
}

.multiselect-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 2px 6px 2px 8px;
  background: var(--pill-bg);
  border-radius: 3px;
  color: var(--ink);
}
.multiselect-chip .remove {
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.multiselect-chip .remove:hover {
  color: var(--accent);
}

.multiselect-placeholder {
  font-size: 13px;
  color: var(--ink-soft);
  padding: 2px 0;
  flex: 1;
  min-width: 80px;
}


/* =============================================================================
   1c. OVERLAY DROPDOWN — společný pro single i multi
   ============================================================================= */

.multiselect-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  max-height: 340px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 50;
}

/* Hlavička overlay — 🔍 ikona + search input */
.multiselect-dropdown-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg);
  flex-shrink: 0;
}
.multiselect-search-icon {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1;
}
.multiselect-search {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  padding: 0;
  min-width: 0;
}
.multiselect-search::placeholder {
  color: var(--ink-soft);
}

/* Seznam položek — scrollovatelný */
.multiselect-dropdown-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* Položka — společný základ */
.multiselect-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
  user-select: none;
}
.multiselect-option:last-child { border-bottom: none; }
.multiselect-option:hover {
  background: var(--bg);
  color: var(--accent);
}
.multiselect-option .kod {
  font-family: monospace;
  font-size: 11px;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.multiselect-option:hover .kod {
  color: var(--accent);
}

/* Zvýraznění vybrané v single-modu */
.multiselect-option.is-selected {
  background: var(--pill-bg, #f0f4fa);
  color: var(--accent);
  font-weight: 500;
}

/* Checkbox vlevo (jen u multi-select option) */
.multiselect-check {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  flex-shrink: 0;
  position: relative;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.multiselect-option:hover .multiselect-check {
  border-color: var(--accent);
}
.multiselect-check.is-checked {
  background: var(--accent);
  border-color: var(--accent);
}
.multiselect-check.is-checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.multiselect-option.is-checked {
  /* Volitelné jemné odlišení zaškrtnutých řádků — držíme to civilní,
     aby seznam zůstal přehledný (vybrané chipy uživatel beztak vidí v poli). */
}

/* Hierarchická hlavička sekce v single-modu (chr-hlavni-nace).
   Neklikatelná — uživatel přes ni proletí pohledem, klikne na položku pod ní. */
.multiselect-header {
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  cursor: default;
  user-select: none;
}

.multiselect-empty {
  padding: 14px 10px;
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
  text-align: center;
}

.hidden {
  display: none !important;
}


/* =============================================================================
   2. CHR FILTR — sticky karta nahoře
   ============================================================================= */

/* Kontejner — sticky pod topbarem, vždy viditelný */
.chr-filter {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(26, 26, 26, 0.04);
}


/* ====== HLAVIČKA (klikací lišta s šipkou) ====== */

.chr-filter-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease;
}
.chr-filter-header:hover {
  background: var(--bg);
}

.chr-filter-toggle {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.chr-filter-toggle::before {
  content: "▲";
  font-size: 10px;
  color: var(--ink-soft);
  transition: transform 150ms ease;
}
.chr-filter.collapsed .chr-filter-toggle::before {
  content: "▼";
}

.chr-filter-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-soft);
}
.chr-filter-count.has-results {
  color: var(--accent);
  font-weight: 500;
}


/* ====== TĚLO (jen v rozbaleném stavu) ====== */

.chr-filter-body {
  padding: 8px 18px 18px;
  border-top: 1px solid var(--line-soft);
}
.chr-filter.collapsed .chr-filter-body {
  display: none;
}


/* ====== BLOKY (4 logické skupiny polí) ======
   Mezi bloky je tenká čára (border-top) + drobný extra padding navíc.

   Blok 1 (Základní)  → 5 polí: Jen aktivní | Co hledáme | Právní forma | Vznik od | Vznik do
   Blok 2 (Odvětví)   → 2 pole: Hlavní obor sekce | Konkrétní obor (CZ-NACE)
   Blok 3 (Velikost)  → 2 pole: Počet zaměstnanců | Kategorie obratu
   Blok 4 (Lokalita)  → 4 pole: Kraj sídla | Okres sídla | Město sídla | Kraj s nejv. pobočkami
*/

.chr-filter-block {
  display: grid;
  gap: 14px 18px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 1px solid var(--line-soft);
}
.chr-filter-block:first-child {
  border-top: none;
  padding-top: 6px;
}

.chr-filter-block-1 { grid-template-columns: repeat(5, 1fr); }
.chr-filter-block-2 { grid-template-columns: repeat(2, 1fr); }
.chr-filter-block-3 { grid-template-columns: repeat(2, 1fr); }
.chr-filter-block-4 { grid-template-columns: repeat(4, 1fr); }

.chr-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.chr-filter-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

.chr-filter-input,
.chr-filter-select {
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  outline: none;
  transition: border-color 120ms ease;
  width: 100%;
  box-sizing: border-box;
}
.chr-filter-input:focus,
.chr-filter-select:focus {
  border-color: var(--accent);
}

/* Checkbox row — vertikálně zarovnaná s ostatními poli v Bloku 1.
   Sousední pole mají label nahoře, takže checkbox používá &nbsp; label
   pro shodnou výšku. */
.chr-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  padding: 7px 0;
  min-height: 34px;
  box-sizing: border-box;
}
.chr-filter-checkbox input[type="checkbox"] {
  cursor: pointer;
}


/* ====== TLAČÍTKA ====== */

.chr-filter-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}


/* ====== LOADING / ERROR ====== */

.chr-filter-status {
  font-size: 12px;
  color: var(--ink-soft);
  margin-left: 12px;
}
.chr-filter-status.error {
  color: var(--red);
}


/* ====== RESPONZIVNÍ ÚPRAVY ====== */

@media (max-width: 1100px) {
  /* Blok 1 (5 polí) → 3 sloupce. Blok 4 (4 pole) → 2 sloupce. */
  .chr-filter-block-1 { grid-template-columns: repeat(3, 1fr); }
  .chr-filter-block-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .chr-filter-block-1,
  .chr-filter-block-2,
  .chr-filter-block-3,
  .chr-filter-block-4 {
    grid-template-columns: 1fr;
  }
  .chr-filter-header {
    padding: 10px 14px;
  }
  .chr-filter-body {
    padding: 6px 14px 14px;
  }
  .multiselect-dropdown {
    max-height: 60vh;
  }
}