/* catalogs_v3.css — page-CSS спільний для 4 каталожних сторінок
   (stocks_catalog_v3 / funds_list_v3 / institutions_list_v3 / insiders_list_v3).

   Реєстр: services/portal/design-system/UI-KIT.md — усе, що там ЗНАЧИТЬСЯ
   готовим, СЮДИ НЕ дублюється. Сторінки підключають ПОРУЧ:
   ticker_v3.css (ss-table/tv3-note/exp/ss-tag*/collapse-патерн) і
   news_v3.css (nv3-filterbar/nv3-field/nv3-input/nv3-select/nv3-btn-*/
   nv3-pagenav/nv3-pagelink/nv3-crumb — ВЖЕ готові з фази новин/наративів,
   1:1 переюзані тут БЕЗ дублю: select/text-input фільтри, breadcrumb,
   prev/next-пагінація через portal/includes/_pagination_v3.html, тепер
   з режимом B — `pagination` dict-параметр для каталогів з ?sort=&dir=
   querystring, що має пережити пагінацію).

   Тут — ЛИШЕ те, чого в жодному з трьох джерел вище нема:
   - .cc-chip / .cc-chiprow — пігулка-ФІЛЬТР як СПРАВЖНІЙ <a href> (сектор/
     індустрія SEO-хмара, asset-class/window presets) — .ss-seg той самий
     візуал дає лише для <button aria-pressed> (JS-toggle), news_v3 чіпів
     не має (сесійні фільтри там — select+Apply, не toggle-пігулки).
   - .cc-sort-th — клікабельний заголовок таблиці (сортування колонок) —
     ні ticker_v3 (таблиці там несортовні), ні news_v3 (картки, не
     таблиця) цього не мають.
   - .cc-drawer — bottom-sheet розширених фільтрів (mcap/P-E/ROE) для
     stocks_catalog_v3 — змодельовано 1:1 з .ss-toc-sheet (design-system.css,
     Закон 1: instant display, БЕЗ transition на opacity/transform).
   - .cc-dot / .cc-status — лічильник активних фільтрів + AJAX-статус-рядок
     "X of Y loaded" (infinite scroll, специфічно для stocks_catalog_v3).
   Кожен клас нижче, переюзаний ≥2 каталогами — кандидат у
   design-components.css (UI-KIT.md "Борг"), позначено коментарем.
   Префікс cc- (catalog) — сторінко-локальний неймспейс, як tv3-/nv3-. */

/* ---------- кандидат у design-components: пігулка-посилання (фільтр-чіп) ----------
   Той самий візуал, що .ss-seg button[aria-pressed], для СПРАВЖНІХ <a href>
   (сервер-сайд перезавантаження/SEO-краулинг, не JS-toggle). */
.cc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06); color: var(--text-3);
  box-shadow: inset 1px 1px 0 rgba(214, 248, 255, .14);
  transition: background var(--react), color var(--react);
  white-space: nowrap;
}
.cc-chip:hover { color: var(--text); }
.cc-chip.is-active { background: var(--petrol-600); color: var(--text); }
.cc-chip em { font-style: normal; opacity: .65; font-size: 10px; margin-inline-start: 1px; }
.cc-chiprow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- кандидат у design-components: сортовний заголовок таблиці ----------
   .ss-table th вже дає базову типографіку — тут лише клікабельна обгортка
   +стрілка напрямку. Два носії свідомо: `<button>` — коли сортування суто
   клієнтське (stocks_catalog_v3 AJAX, JS-дія без навігації, a11y — button
   фокусується клавіатурою за замовчуванням); `<a href>` — коли сортування
   сервер-сайд перезавантаження (funds/institutions/insiders_v3, СПРАВЖНЯ
   навігація на ?sort=&dir=, той самий SEO-інваріант, що старі шаблони).
   Активна колонка отримує колір петролю (той самий принцип, що
   .ss-table th[data-hot="true"] у design-system.css). */
.cc-sort-th button, .cc-sort-th a {
  display: inline-flex; align-items: center; gap: 4px; color: inherit;
  border: 0; background: transparent; padding: 0; font: inherit;
  text-transform: inherit; letter-spacing: inherit; cursor: pointer; text-decoration: none;
}
.cc-sort-th button:hover, .cc-sort-th a:hover { color: var(--text); }
.cc-sort-th button.is-active, .cc-sort-th a.is-active { color: var(--petrol-100); }
.cc-sort-th button i, .cc-sort-th a i { font-style: normal; font-size: 8px; }

/* ---------- Drawer (розширені фільтри stocks_catalog_v3: mcap/P-E/ROE) ----------
   Закон 1 (laws.html): змодельовано 1:1 з .ss-toc-sheet (design-system.css)
   — instant display toggle через атрибут, БЕЗ transition на opacity/
   transform. Мобільна bottom-sheet і десктопна right-panel — ОДНА розмітка
   (.cc-drawer), геометрія панелі відрізняється лише медіа-запитом. */
.cc-drawer { position: fixed; inset: 0; z-index: 55; display: none; }
.cc-drawer[data-open="true"] { display: block; }
.cc-drawer .veil { position: absolute; inset: 0; background: rgba(2, 10, 15, .72); }
.cc-drawer .panel {
  position: absolute; inset-inline: 0; inset-block-end: 0; max-height: 82vh; overflow-y: auto;
  padding: 20px 20px 26px; border-start-start-radius: 24px; border-start-end-radius: 24px;
  background: linear-gradient(180deg, rgba(13, 70, 88, .97), rgba(6, 26, 34, .98));
  box-shadow: 0 -30px 70px -20px rgba(0, 0, 0, .95), inset 0 1.5px 0 rgba(214, 248, 255, .3);
}
@media (min-width: 900px) {
  .cc-drawer .panel {
    inset-inline: auto 0; inset-block: 0; width: 340px; max-height: none;
    border-start-start-radius: 24px; border-end-start-radius: 24px; border-start-end-radius: 0;
  }
}

/* ---------- Активний фільтр-індикатор (крапка на кнопці "Filters") ---------- */
.cc-dot {
  display: inline-flex; align-items: center; justify-content: center;
  position: absolute; inset-block-start: -5px; inset-inline-end: -5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--petrol-200); color: var(--scene-4);
  font-family: var(--mono); font-size: 9px; font-weight: 700;
}

/* ---------- Каталожна головна плитка (h1 + filters-тригер) ---------- */
.cc-headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ---------- AJAX-статус-рядок (X of Y loaded / back-to-top) — stocks_catalog_v3 ---------- */
.cc-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--text-faint); }
.cc-status button {
  border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: var(--r-pill); font-size: 11px; color: var(--text-2);
  background: rgba(255, 255, 255, .06); box-shadow: inset 1px 1px 0 rgba(214, 248, 255, .14);
  transition: background var(--react), color var(--react);
}
.cc-status button:hover { color: var(--text); background: rgba(255, 255, 255, .1); }

/* ---------- Пронумерований пейджер (ЛИШЕ stocks_catalog_v3) ----------
   funds/institutions/insiders_v3 переюзують portal/includes/_pagination_v3.html
   (prev/next+"Page X of Y", .nv3-pagenav/.nv3-pagelink) — ТОЙ САМИЙ контракт,
   що news_list_v3/narratives_list_v3. stocks_catalog_v3 — ІНШИЙ контракт
   зі старого view (pagination.pages — повний список сторінок, не лише
   prev/next), тому ОКРЕМИЙ пейджер: той самий .nv3-pagelink-візуал,
   розширений під нумеровані кнопки. Кандидат у design-components, коли
   з'явиться другий споживач нумерованої пагінації. */
.cc-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.cc-pager a, .cc-pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding-inline: 10px; border-radius: var(--r-pill);
  font-family: var(--mono); font-size: 12px; color: var(--text-2);
  background: rgba(255, 255, 255, .06); box-shadow: inset 1px 1px 0 rgba(214, 248, 255, .14);
  transition: background var(--react), color var(--react);
}
.cc-pager a:hover { color: var(--text); background: rgba(255, 255, 255, .11); }
.cc-pager span[aria-current="page"] { background: var(--petrol-600); color: var(--text); font-weight: 700; }
.cc-pager span.is-disabled { opacity: .32; }

@media (max-width: 519px) {
  .cc-pager a, .cc-pager span { min-width: 30px; height: 30px; font-size: 11px; padding-inline: 7px; }
}