/* ═══════════════════════════════════════════════════════════════════════════
   Stat card — KPI-плитка для дашбордів
   Склад: __head (label + опц. __icon) · __value (+ опц. __unit) · __trend
   Варіанти тренду (модифікатори на __trend): --up · --down · --flat
   Базова плитка без __trend — лише значення.
   JS: відсутній · Нових токенів: 0 (semantic-шар покриває)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base block ─────────────────────────────────────────────────────────── */
/* Поверхня = картка (спільні токени з .card для візуальної консистентності),
   але власний компактний API. .card не чіпається (frozen). */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--uris-spacing-3);
  padding: var(--uris-spacing-6);
  background-color: var(--uris-color-semantic-surface);
  border: 1px solid var(--uris-color-semantic-border);
  border-radius: var(--uris-radius-lg);
  font-family: var(--uris-font-family-body);
  color: var(--uris-color-semantic-text);
  -webkit-font-smoothing: antialiased;
}

/* ── Head: підпис ліворуч, опційна іконка праворуч ──────────────────────── */
.stat-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--uris-spacing-3);
}

/* Підпис KPI — головний дескриптор плитки (secondary, не muted: читабельність) */
.stat-card__label {
  min-width: 0;
  margin: 0;
  font-size: var(--uris-text-sm-size);
  line-height: var(--uris-text-sm-line);
  /* тонкий підпис — контраст до важкого heading-числа (KPI-ієрархія) */
  font-weight: var(--uris-font-weight-light);
  color: var(--uris-color-semantic-secondary);
}

/* Іконка — декоративна (aria-hidden); нейтральний бокс, щоб єдиним кольоровим
   сигналом у сітці плиток лишався тренд */
.stat-card__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--uris-spacing-10);
  height: var(--uris-spacing-10);
  border-radius: var(--uris-radius-md);
  background-color: var(--uris-color-semantic-surface-muted);
  color: var(--uris-color-semantic-secondary);
}

.stat-card__icon svg {
  width: var(--uris-spacing-5);
  height: var(--uris-spacing-5);
}

/* ── Value: герой-число ─────────────────────────────────────────────────── */
.stat-card__value {
  margin: 0;
  font-family: var(--uris-font-family-heading);
  font-size: var(--uris-text-4xl-size);
  line-height: var(--uris-text-4xl-line);
  font-weight: var(--uris-font-weight-medium);
  color: var(--uris-color-semantic-text);
  /* цифри однакової ширини — значення в сітці й при оновленні не «стрибають» */
  font-variant-numeric: tabular-nums;
}

/* Одиниця/суфікс після числа (%, грн, тис.) — менша, приглушена,
   heading-шрифт як і значення: повне «98,2 %» лишається цілісним числом */
.stat-card__unit {
  margin-inline-start: var(--uris-spacing-1);
  font-family: var(--uris-font-family-heading);
  font-size: var(--uris-text-lg-size);
  font-weight: var(--uris-font-weight-regular);
  color: var(--uris-color-semantic-secondary);
}

/* ── Trend: напрям зміни ────────────────────────────────────────────────── */
/* Базовий колір = muted (нейтральний/flat); --up/--down перевизначають.
   Напрям передається ТРЬОМА каналами: колір + форма стрілки + текст для AT. */
.stat-card__trend {
  display: flex;
  align-items: center;
  /* у сітці рівних за висотою плиток (grid/flex stretch) тренд притискається
     до низу — чипи-«футери» вирівнюються, навіть коли підписи різної висоти
     (1 vs 2 рядки). В одиночній плитці вільного місця нема → ефекту нема. */
  margin: auto 0 0;
  font-size: var(--uris-text-sm-size);
  line-height: var(--uris-text-sm-line);
  font-weight: var(--uris-font-weight-medium);
  color: var(--uris-color-semantic-text-muted);
}

/* Видима група (стрілка + % + період) — для AT прихована (aria-hidden),
   натомість читається повне речення у .uris-visually-hidden */
.stat-card__trend-visual {
  display: inline-flex;
  align-items: center;
  gap: var(--uris-spacing-2);
}

.stat-card__trend-arrow {
  flex-shrink: 0;
  width: var(--uris-spacing-4);
  height: var(--uris-spacing-4);
}

/* Період порівняння («за рік») — завжди приглушений, незалежно від напряму,
   щоб кольоровим лишався лише сам показник зміни */
.stat-card__trend-note {
  font-weight: var(--uris-font-weight-light);
  color: var(--uris-color-semantic-text-muted);
}

/* Варіанти напряму */
.stat-card__trend--up   { color: var(--uris-color-semantic-success-text); }
.stat-card__trend--down { color: var(--uris-color-semantic-danger); }
.stat-card__trend--flat { color: var(--uris-color-semantic-text-muted); }