/* ============================================================
   Własny komponent <select> (ewselect.js)
   Wspólny dla panelu (admin.css) i strony (site.css). Kolory z tokenów
   --line / --ink / --blue-600 / --muted, więc dziedziczy motyw kontekstu.
   Skórka listy zgodna z comboboxem katalogu (.combo__list).
   ============================================================ */

.ewselect { position: relative; display: block; width: 100%; }

/* Natywny select zostaje w formularzu, ale jest niewidoczny.
   Nie używamy display:none, żeby wartość dalej się wysyłała i był dostępny dla JS. */
.ewselect__native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- przycisk (trigger) — wygląd jak pole formularza --- */
.ewselect__btn {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  width: 100%; margin: 0; font: inherit; font-size: .98rem; text-align: left;
  padding: 10px 12px; color: var(--ink, #16233a);
  background: var(--card, #fff); border: 1.5px solid var(--line, #e2e8f0); border-radius: 6px;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease;
}
.ewselect__btn:hover { border-color: var(--blue-600, #3f6fa0); }
.ewselect__btn:focus-visible,
.ewselect__btn:focus {
  outline: none; border-color: var(--blue-600, #3f6fa0);
  box-shadow: 0 0 0 3px var(--accent-ring, rgba(90, 136, 184, .16));
}
.ewselect__value {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ewselect__value.is-placeholder { color: var(--muted, #5c6b85); }
.ewselect__arrow {
  flex: none; color: var(--muted, #5c6b85);
  transition: transform .15s ease, color .15s ease;
}
.ewselect.is-open .ewselect__arrow { transform: rotate(180deg); color: var(--blue-600, #3f6fa0); }

/* stan disabled */
.ewselect.is-disabled { opacity: .6; }
.ewselect__btn:disabled { cursor: not-allowed; background: var(--raised, #f5f7fa); }

/* --- panel rozwijany --- */
.ewselect__panel {
  position: absolute; z-index: 1000; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--card, #fff); border: 1.5px solid var(--line, #e2e8f0); border-radius: 8px;
  box-shadow: 0 12px 28px var(--shadow-color, rgba(20, 40, 60, .16)); padding: 4px;
  transform-origin: top center;
}
.ewselect.opens-up .ewselect__panel {
  top: auto; bottom: calc(100% + 6px); transform-origin: bottom center;
}
.ewselect.is-open .ewselect__panel { animation: ewsIn .12s ease; }
@keyframes ewsIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* --- wyszukiwarka w panelu --- */
.ewselect__search { padding: 4px 4px 6px; }
.ewselect__searchinput {
  width: 100%; font: inherit; font-size: .95rem; padding: 8px 10px;
  color: var(--ink, #16233a); background: var(--card, #fff);
  border: 1.5px solid var(--line, #e2e8f0); border-radius: 6px;
}
.ewselect__searchinput:focus {
  outline: none; border-color: var(--blue-600, #3f6fa0); box-shadow: 0 0 0 3px var(--accent-ring, rgba(90, 136, 184, .16));
}

/* --- lista opcji (skórka jak .combo__list) --- */
.ewselect__list {
  list-style: none; margin: 0; padding: 0;
  max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
}
.ewselect__opt {
  display: block; padding: 8px 10px; border-radius: 6px; cursor: pointer;
  color: var(--ink, #16233a); font-size: .96rem; line-height: 1.35;
  white-space: normal;
}
.ewselect__opt.is-active { background: var(--accent-soft-strong, rgba(90, 136, 184, .18)); }
.ewselect__opt.is-selected { font-weight: 600; background: var(--accent-soft, rgba(90, 136, 184, .10)); }
.ewselect__opt.is-selected.is-active { background: var(--accent-soft-strong, rgba(90, 136, 184, .22)); }
.ewselect__opt--placeholder { color: var(--muted, #5c6b85); }
.ewselect__opt.is-disabled { color: var(--muted, #5c6b85); opacity: .55; cursor: not-allowed; }
.ewselect__empty { padding: 10px 12px; font-size: .88rem; color: var(--muted, #5c6b85); }

/* Komunikat tylko dla czytników ekranu (aria-live) — niewidoczny wizualnie. */
.ewselect__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Dopasowanie szerokości/gęstości do kontekstów (selektory istnieją
   tylko w danym kontekście, więc reguły są tam bezpieczne).
   ============================================================ */

/* Panel: małe selecty pasków narzędzi */
.catbar__per .ewselect { width: auto; min-width: 78px; }
.catbar__per .ewselect__btn { padding: 8px 10px; font-size: .95rem; }
.bulkbar__group .ewselect { width: auto; min-width: 150px; }
.bulkbar__group .ewselect__btn { padding: 8px 10px; font-size: .92rem; }

/* Panel: select w rzędzie (miesiąc + rok) */
.field-inline .ewselect { flex: 1 1 auto; min-width: 0; }

/* Panel: selecty w tabeli pozycji wyceny */
table.qlines .ewselect { width: 100%; }
table.qlines .ewselect__btn { padding: 8px 9px; font-size: .95rem; }

/* Strona publiczna: pola formularza (.form) — promień IDZIE ZA MOTYWEM przez --field-radius
   (miekki=12px → bez zmian; grafit=4px → select ostry jak natywne pola). Fallback 12px = dawna wartość. */
.form .ewselect__btn { padding: 12px 14px; font-size: 1rem; border-radius: var(--field-radius, 12px); }
/* Front motywu z ostrymi rogami: panel/wyszukiwarka/opcje też idą za promieniem pola.
   Zakres tylko body.theme-grafit → miekki (8/6px) nietknięty. */
body.theme-grafit .ewselect__panel { border-radius: var(--field-radius, 8px); }
body.theme-grafit .ewselect__searchinput { border-radius: var(--field-radius, 6px); }
body.theme-grafit .ewselect__opt,
body.theme-grafit .combo__opt { border-radius: max(2px, calc(var(--field-radius, 6px) - 1px)); }
body.theme-grafit .combo__list { border-radius: var(--field-radius, 8px); }
/* Panel NIE ładuje themes.css — jego pola .form mają promień/padding jak natywne pola
   panelu (admin.css: 6px / 10px 12px / .98rem). Cofamy tu publiczne 12px, żeby selecty
   w formularzach panelu były spójne z resztą pól (i selectów w .catbar/.bulkbar). */
.admin .form .ewselect__btn { padding: 10px 12px; font-size: .98rem; border-radius: 6px; }

/* ============================================================
   Ujednolicenie istniejącego comboboxu katalogu (.combo) — ten sam
   wygląd panelu i opcji co komponent, żeby "selecty z wyszukiwarką"
   wyglądały spójnie. Logika comboboxu bez zmian (quotes.js).
   ============================================================ */
.combo__list { padding: 4px; border-radius: 8px; box-shadow: 0 12px 28px var(--shadow-color, rgba(20, 40, 60, .16)); }
.combo__opt { border-radius: 6px; }
.combo__opt:hover,
.combo__opt.is-active { background: var(--accent-soft-strong, rgba(90, 136, 184, .18)); }

/* ============================================================
   Tryb ikon (data-icons) — grafika ikony obok etykiety w opcjach i w przycisku.
   Kreska/wypełnienie dziedziczone przez <use> ze sprite'u (#ewi-*).
   ============================================================ */
.ewselect__ic {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.ewselect--icons .ewselect__opt { display: flex; align-items: center; gap: 10px; }
.ewselect--icons .ewselect__value { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ewselect--icons .ewselect__optlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }