/* ═══════════════════════════════════════════════════════════════════════════
   TABLE-TOOLBAR (#31) — панель керування над таблицею. Композит над Table (#30).
   Перевикористовує: search (пошук), dropdown (фільтри-меню), badge (теги активних
   фільтрів — .badge + .badge__dismiss), button (дії), spinner (опц. індикатор).

   ВЛАСНИК класу `.table-toolbar`. У #30 це був мінімальний bulk-бар у table.css;
   тут узагальнено до повної панелі. Легасі-форму `.table-toolbar.is-active`
   (bulk-бар Table) збережено в кінці файлу — зворотна сумісність не порушена.

   Структура:
     .table-toolbar[data-table-toolbar]           — регіон (завжди видимий)
       > .table-toolbar__bar                        — рядок керування
           > .search.table-toolbar__search          — пошук (перевик. Search)
           > .table-toolbar__filters                — група фільтрів-dropdown
           > .table-toolbar__count[aria-live=polite]— лічильник результатів
           > .table-toolbar__actions                — первинні дії (праворуч)
       > .table-toolbar__active                     — теги активних фільтрів (--filtered)
           > .table-toolbar__active-label
           > .table-toolbar__tags > .badge … .badge__dismiss
           > button[data-table-toolbar-clear-filters]
       > .table-toolbar__selection                  — панель масових дій (--selecting)
           > .table-toolbar__count (N вибрано)
           > .table-toolbar__actions (масові дії)

   Стани регіону (керує JS; у демо — статично):
     (default)                  — лише .table-toolbar__bar
     .table-toolbar--filtered   — + рядок .table-toolbar__active
     .table-toolbar--selecting  — показати .table-toolbar__selection, сховати bar/active
       (контекстна панель: масові дії заміщують рядок керування)

   A11y: регіон — role="region" + aria-label; лічильник результатів — aria-live="polite";
   фільтри — WAI-ARIA Menu Button (Dropdown #22); dismiss-кнопки тегів — aria-label.
   ═══════════════════════════════════════════════════════════════════════════ */

.table-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--uris-spacing-3);
  margin-block-end: var(--uris-spacing-4);
  font-family: var(--uris-font-family-body);
  color: var(--uris-color-semantic-text);
}

/* ── Рядок керування ───────────────────────────────────────────────────────── */
.table-toolbar__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--uris-spacing-3);
}

/* Пошук — гнучка зона ліворуч, обмежена, щоб не «з'їдати» весь рядок */
.table-toolbar__search {
  flex: 1 1 240px;
  min-inline-size: 200px;
  max-inline-size: 380px;
}

/* Група фільтрів-dropdown */
.table-toolbar__filters {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--uris-spacing-2);
}

/* Лічильник результатів (aria-live) — спільний стиль для «N записів» і «N вибрано» */
.table-toolbar__count {
  font-size: var(--uris-text-sm-size);
  line-height: var(--uris-text-sm-line);
  color: var(--uris-color-semantic-text-muted);
  white-space: nowrap;
}
.table-toolbar__count b {
  font-weight: var(--uris-font-weight-medium);
  color: var(--uris-color-semantic-text);
}
/* На info-смузі вибору (`__selection` / легасі `.is-active`) muted-лічильник дає
   лише 3.71:1 проти info → піднімаємо мітку до secondary (5.00:1 ✓ AA). У барі
   (на surface) лічильник лишається muted (4.83:1 ✓). */
.table-toolbar__selection .table-toolbar__count,
.table-toolbar.is-active .table-toolbar__count {
  color: var(--uris-color-semantic-secondary);
}
/* У рядку керування лічильник несе auto-margin → він і наступні дії тиснуться
   праворуч одним кластером (один auto-margin, без розриву між count і actions). */
.table-toolbar__bar > .table-toolbar__count {
  margin-inline-start: auto;
}

/* Дії — група кнопок. Auto-margin лише там, де count їх не штовхає (selection/legacy). */
.table-toolbar__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-2);
}

/* ── Рядок активних фільтрів (показ у стані --filtered) ─────────────────────── */
.table-toolbar__active {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--uris-spacing-2);
}
.table-toolbar--filtered .table-toolbar__active {
  display: flex;
}
.table-toolbar__active-label {
  font-size: var(--uris-text-sm-size);
  line-height: var(--uris-text-sm-line);
  color: var(--uris-color-semantic-text-muted);
}
.table-toolbar__tags {
  display: contents;   /* теги — прямі флекс-елементи рядка (wrap працює природно) */
}
/* «Скинути всі» — притиснута до правого краю рядка */
.table-toolbar__active > [data-table-toolbar-clear-filters] {
  margin-inline-start: auto;
}

/* Тег-фільтр = .badge.badge-neutral з .badge__dismiss (перевик. Badge — без нових класів) */

/* ── Панель масових дій (показ у стані --selecting) ─────────────────────────── */
.table-toolbar__selection {
  display: none;
  align-items: center;
  gap: var(--uris-spacing-3);
  padding: var(--uris-spacing-2) var(--uris-spacing-3);
  background: var(--uris-color-semantic-info);
  border-radius: var(--uris-radius-md);
}
.table-toolbar--selecting .table-toolbar__selection {
  display: flex;
}
/* Контекстна панель: масові дії заміщують рядок керування й активні фільтри */
.table-toolbar--selecting .table-toolbar__bar,
.table-toolbar--selecting .table-toolbar__active {
  display: none;
}
/* У панелі вибору дії — праворуч */
.table-toolbar__selection > .table-toolbar__actions {
  margin-inline-start: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ЗВОРОТНА СУМІСНІСТЬ — Table #30 постачав мінімальний bulk-бар
   `<div class="table-toolbar">` (display:none) → `.is-active` (info-рядок) з
   прямими дітьми __count/__actions, БЕЗ __bar/__selection. Його замінено на
   `.table-toolbar__selection`, але легасі-форму лишаємо робочою:
     • активна (.is-active) → info-рядок як у #30;
     • неактивна (без __bar/__selection і без .is-active) → схована.
   Нова панель завжди має __bar → :has-guard її не зачіпає (лишається видимою).
   ═══════════════════════════════════════════════════════════════════════════ */
.table-toolbar.is-active {
  flex-direction: row;
  align-items: center;
  gap: var(--uris-spacing-3);
  padding: var(--uris-spacing-2) var(--uris-spacing-3);
  background: var(--uris-color-semantic-info);
  border-radius: var(--uris-radius-md);
}
.table-toolbar.is-active > .table-toolbar__actions {
  margin-inline-start: auto;
}
.table-toolbar:not(.is-active):not(:has(.table-toolbar__bar)):not(:has(.table-toolbar__selection)) {
  display: none;
}

/* ── Адаптив — на вузьких екранах пошук займає весь рядок ───────────────────── */
@media (max-width: 767px) {
  .table-toolbar__search {
    flex-basis: 100%;
    max-inline-size: none;
  }
}