/* ═══════════════════════════════════════════════════════════════════════════
   Bar chart — горизонтальні/вертикальні стовпці на токенах.
   Кожен рядок — справжня <button> (клавіатурно доступна, без трюків з SVG-фокусом).
   Дані рендерить JS (bar-chart.js); тут — каркас + стани.
   ═══════════════════════════════════════════════════════════════════════════ */

.bar-chart__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--uris-spacing-2);
}

.bar-chart__row {
  display: grid;
  /* Фіксовані (не minmax/auto) 1-ша й 3-тя колонки — кожен .bar-chart__row це
     ОКРЕМИЙ grid (не спільна сітка списку), тож "auto" підлаштовувався б під
     довжину мітки/значення ОКРЕМО в кожному рядку → трек (.bar-chart__track,
     2-га колонка 1fr) починався й закінчувався на різному X у різних рядках.
     Фіксована ширина = однакова базова довжина "полоски" й спільний правий
     край в усіх рядках. 11rem (було 9rem) — ширше поле мітки, менше рядків
     упирається в еліпсис (напр. «Дніпропетровська область»); 5.5rem (було
     3rem) — стара ширина була вужчою за реальні суми з тисячними розрядами
     («1 275 470,2»), число виходило за межі колонки й «наїжджало» на сусідню
     (запит користувача, скріншот 2026-07-06). */
  grid-template-columns: 11rem 1fr 5.5rem;
  align-items: center;
  gap: var(--uris-spacing-3);
  width: 100%;
  padding: var(--uris-spacing-1) var(--uris-spacing-2);
  border: 0;
  border-radius: var(--uris-radius-md);
  background: none;
  font: inherit;
  text-align: left;
  color: var(--uris-color-semantic-text);
  cursor: pointer;
  transition: background var(--uris-duration-fast) var(--uris-ease-default),
              opacity var(--uris-duration-fast) var(--uris-ease-default);
}

.bar-chart__row:hover { background: var(--uris-color-semantic-surface-hover); }
/* focus-visible: глобальне кільце фокуса — _shared/utilities.css */

.bar-chart__item.is-active .bar-chart__row {
  background: var(--uris-color-semantic-surface-active);
  font-weight: var(--uris-font-weight-medium);
}

.bar-chart--has-active .bar-chart__item:not(.is-active) .bar-chart__row { opacity: .55; }

.bar-chart__label {
  font-size: var(--uris-text-sm-size);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-chart__track {
  position: relative;
  height: var(--uris-spacing-5);
  background: var(--uris-color-semantic-surface-muted);
  border-radius: var(--uris-radius-sm);
  overflow: hidden;
}

.bar-chart__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--bar-value, 0%);
  background: var(--bar-color, var(--uris-color-semantic-accent));
  border-radius: inherit;
  transition: width var(--uris-duration-normal) var(--uris-ease-default);
}

.bar-chart__value {
  font-variant-numeric: tabular-nums;
  font-size: var(--uris-text-sm-size);
  color: var(--uris-color-semantic-text-muted);
  min-width: 2.75em;
  text-align: end;
  /* Числа з розрядними пробілами («15 564») не переносити на два рядки —
     помічено на дашборді «Фахові видання», де значення сягають 5 цифр. */
  white-space: nowrap;
}

/* ── Підказка на наведення (запит користувача 2026-07-06: мітка обрізається
   еліпсисом при вужчому екрані/довшій назві — підказка показує повну назву
   й значення). Той самий рецепт, що Donut chart (position:fixed — рядок
   вузький, relative-clamp у його межах притискав би підказку в кут
   незалежно від курсора; JS показує/ховає й позиціює біля курсора). ── */
.bar-chart__tooltip {
  position: fixed;
  z-index: var(--uris-component-tooltip-z-index);
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: var(--uris-component-tooltip-max-width);
  padding: var(--uris-spacing-1) var(--uris-spacing-3);
  border-radius: var(--uris-radius-sm);
  background-color: var(--uris-color-semantic-text);
  color: var(--uris-color-semantic-surface);
  font-size: var(--uris-component-tooltip-font-size);
  line-height: var(--uris-text-xs-line);
  white-space: normal;
  pointer-events: none;
}
.bar-chart__tooltip[hidden] { display: none; }
.bar-chart__tooltip-title { font-weight: var(--uris-font-weight-medium); }
.bar-chart__tooltip-row { font-variant-numeric: tabular-nums; }

/* ── Вертикальні стовпці ─────────────────────────────────────────────────── */
.bar-chart--vertical .bar-chart__list {
  flex-direction: row;
  align-items: flex-end;
  gap: var(--uris-spacing-4);
  height: 12rem;
  padding-block-start: var(--uris-spacing-6); /* місце для значення над стовпцем */
}

.bar-chart--vertical .bar-chart__item {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
}

.bar-chart--vertical .bar-chart__row {
  grid-template-columns: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--uris-spacing-2);
  height: 100%;
  padding-block: 0;
}

.bar-chart--vertical .bar-chart__value { order: 1; min-width: 0; }
.bar-chart--vertical .bar-chart__track { order: 2; width: var(--uris-spacing-8); flex: 1 1 auto; height: auto; }
.bar-chart--vertical .bar-chart__label {
  order: 3;
  max-width: 100%;
  font-size: var(--uris-text-xs-size);
  color: var(--uris-color-semantic-text-muted);
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

.bar-chart--vertical .bar-chart__fill {
  inset-block-start: auto;
  inset-block-end: 0;
  inset-inline: 0;
  width: 100%;
  height: var(--bar-value, 0%);
}

/* ── Порожньо ────────────────────────────────────────────────────────────── */
/* Клас-модифікатор, не [hidden]: .empty{display:flex} (empty-state.css) переважає
   атрибут [hidden] у каскаді (авторський display б'є UA-стиль незалежно від
   специфічності) — перемикаємо видимість через 2-класовий селектор. */
.bar-chart__empty { flex: 1 1 auto; }
.bar-chart:not(.bar-chart--empty) .bar-chart__empty { display: none; }
.bar-chart--empty .bar-chart__list { display: none; }

@media (prefers-reduced-motion: reduce) {
  .bar-chart__row,
  .bar-chart__fill { transition: none; }
}