/* ==========================================================================
   Компоненты интерфейса — HR_KIT (Untitled UI)
   Только семантические токены из design/tokens.css.
   Ни одного hex, rgb или «магического» px вне шкал --spacing-* / --radius-*.
   Партия 2a: формы.
   ========================================================================== */

/* ==========================================================================
   Кнопки
   ========================================================================== */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ui-btn:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 0;
  box-shadow: var(--focus-ring);
}
.ui-btn[disabled],
.ui-btn[aria-disabled="true"] { cursor: not-allowed; }
.ui-btn .ui-icon { width: 20px; height: 20px; flex: none; }

/* ── Размеры (высоты из кита) ── */
.ui-btn--sm { height: 36px; padding: 0 var(--spacing-lg); }
.ui-btn--md { height: 40px; padding: 0 var(--spacing-xl); }
.ui-btn--lg {
  height: 44px; padding: 0 var(--spacing-xl);
  font-size: var(--text-md-size); line-height: var(--text-md-line);
}
.ui-btn--xl {
  height: 48px; padding: 0 var(--spacing-2xl);
  font-size: var(--text-md-size); line-height: var(--text-md-line);
}
.ui-btn--block { width: 100%; }

/* ── Основная ── */
.ui-btn--primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-fg);
  box-shadow: var(--shadow-xs-skeuomorphic);
}
.ui-btn--primary:hover:not([disabled]) { background: var(--button-primary-bg-hover); }
.ui-btn--primary:focus-visible { box-shadow: var(--focus-ring-shadow-xs-skeuomorphic); }
.ui-btn--primary[disabled] {
  background: var(--bg-disabled); color: var(--text-disabled);
  border-color: var(--border-disabled-subtle); box-shadow: none;
}

/* ── Вторичная ── */
.ui-btn--secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-fg);
  border-color: var(--button-secondary-border);
  box-shadow: var(--shadow-xs-skeuomorphic);
}
.ui-btn--secondary:hover:not([disabled]) {
  background: var(--button-secondary-bg-hover);
  color: var(--button-secondary-fg-hover);
}
.ui-btn--secondary:focus-visible { box-shadow: var(--focus-ring-shadow-xs-skeuomorphic); }
.ui-btn--secondary[disabled] {
  background: var(--bg-primary); color: var(--text-disabled);
  border-color: var(--border-disabled-subtle); box-shadow: none;
}

/* ── Вторичная акцентная ── */
.ui-btn--secondary-color {
  background: var(--button-secondary-color-bg);
  color: var(--button-secondary-color-fg);
  border-color: var(--button-secondary-color-border);
  box-shadow: var(--shadow-xs-skeuomorphic);
}
.ui-btn--secondary-color:hover:not([disabled]) {
  background: var(--button-secondary-color-bg-hover);
  color: var(--button-secondary-color-fg-hover);
}

/* ── Третичная (без рамки) ── */
.ui-btn--tertiary { background: transparent; color: var(--button-tertiary-fg); }
.ui-btn--tertiary:hover:not([disabled]) {
  background: var(--button-tertiary-bg-hover);
  color: var(--button-tertiary-fg-hover);
}
.ui-btn--tertiary[disabled] { color: var(--text-disabled); }

/* ── Опасное действие ── */
.ui-btn--destructive {
  background: var(--button-primary-error-bg);
  color: var(--button-primary-error-fg);
  box-shadow: var(--shadow-xs-skeuomorphic);
}
.ui-btn--destructive:hover:not([disabled]) { background: var(--button-primary-error-bg-hover); }
.ui-btn--destructive:focus-visible { box-shadow: var(--focus-ring-error), var(--shadow-xs-skeuomorphic); }
.ui-btn--destructive[disabled] {
  background: var(--bg-disabled); color: var(--text-disabled); box-shadow: none;
}

.ui-btn--destructive-secondary {
  background: var(--button-secondary-error-bg);
  color: var(--button-secondary-error-fg);
  border-color: var(--button-secondary-error-border);
  box-shadow: var(--shadow-xs-skeuomorphic);
}
.ui-btn--destructive-secondary:hover:not([disabled]) {
  background: var(--button-secondary-error-bg-hover);
  color: var(--button-secondary-error-fg-hover);
}

/* ── Ссылка ── */
.ui-btn--link {
  background: transparent; border: none; box-shadow: none;
  color: var(--button-tertiary-color-fg); height: auto; padding: 0;
}
.ui-btn--link:hover:not([disabled]) { color: var(--button-tertiary-color-fg-hover); text-decoration: underline; }

/* ── Только иконка ── */
.ui-btn--icon.ui-btn--sm { width: 36px; padding: 0; }
.ui-btn--icon.ui-btn--md { width: 40px; padding: 0; }
.ui-btn--icon.ui-btn--lg { width: 44px; padding: 0; }
.ui-btn--icon.ui-btn--xl { width: 48px; padding: 0; }

/* ── Утилитарная кнопка: иконка в строке таблицы ── */
.ui-btn-utility {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--fg-quaternary); cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.ui-btn-utility:hover:not([disabled]) { background: var(--bg-primary-hover); color: var(--fg-quaternary-hover); }
.ui-btn-utility:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.ui-btn-utility[disabled] { color: var(--fg-disabled); cursor: not-allowed; }
.ui-btn-utility--destructive { color: var(--fg-error-secondary); }
.ui-btn-utility--destructive:hover:not([disabled]) { background: var(--bg-error-primary); color: var(--fg-error-primary); }
.ui-btn-utility .ui-icon { width: 20px; height: 20px; }

/* ── Крестик закрытия ── */
.ui-btn-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: transparent; border: none; border-radius: var(--radius-md);
  color: var(--fg-quinary); cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.ui-btn-close:hover { background: var(--bg-primary-hover); color: var(--fg-quinary-hover); }
.ui-btn-close:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.ui-btn-close .ui-icon { width: 20px; height: 20px; }

/* ==========================================================================
   Поля ввода
   ========================================================================== */
.ui-field { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.ui-label {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}
.ui-label__required { color: var(--text-brand-tertiary); }
.ui-hint {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--text-tertiary);
}
.ui-error-text {
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--text-error-primary);
}

.ui-input,
.ui-textarea,
.ui-select {
  width: 100%;
  font-family: var(--font-family-body);
  font-size: var(--text-md-size);
  line-height: var(--text-md-line);
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.ui-input,
.ui-select { height: 44px; padding: 0 var(--spacing-lg); }
.ui-textarea { padding: var(--spacing-lg); min-height: 96px; resize: vertical; }

.ui-input::placeholder,
.ui-textarea::placeholder { color: var(--text-placeholder); }

.ui-input:focus,
.ui-textarea:focus,
.ui-select:focus {
  outline: none;
  border-color: var(--border-brand);
  box-shadow: var(--focus-ring-shadow-xs);
}

.ui-input[disabled],
.ui-textarea[disabled],
.ui-select[disabled] {
  background: var(--bg-disabled-subtle);
  color: var(--text-disabled);
  border-color: var(--border-disabled);
  cursor: not-allowed;
}

.ui-input--error,
.ui-textarea--error,
.ui-select--error { border-color: var(--border-error); }
.ui-input--error:focus,
.ui-textarea--error:focus,
.ui-select--error:focus { box-shadow: var(--focus-ring-error-shadow-xs); }

/* Поле с иконкой слева */
.ui-input-wrap { position: relative; display: block; }
.ui-input-wrap .ui-input { padding-left: var(--spacing-5xl); }
.ui-input-wrap__icon {
  position: absolute; left: var(--spacing-lg); top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--fg-quaternary); pointer-events: none;
}

/* Select — своя стрелка вместо системной */
.ui-select {
  appearance: none;
  padding-right: var(--spacing-5xl);
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-quaternary) 50%),
                    linear-gradient(135deg, var(--fg-quaternary) 50%, transparent 50%);
  background-position: calc(100% - var(--spacing-xl)) center, calc(100% - var(--spacing-lg)) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Дата — нативный инпут в оформлении кита */
.ui-input[type="date"],
.ui-input[type="time"],
.ui-input[type="datetime-local"] { padding-right: var(--spacing-lg); }

/* ==========================================================================
   Чекбокс
   ========================================================================== */
.ui-checkbox { display: inline-flex; align-items: flex-start; gap: var(--spacing-md); cursor: pointer; }
.ui-checkbox__box {
  appearance: none;
  flex: none;
  width: 20px; height: 20px; margin: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}
.ui-checkbox__box:checked {
  background-color: var(--bg-brand-solid);
  border-color: var(--bg-brand-solid);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5'/%3E%3C/svg%3E");
  background-size: 14px 14px; background-position: center; background-repeat: no-repeat;
}
.ui-checkbox__box:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.ui-checkbox__box[disabled] { background: var(--bg-disabled); border-color: var(--border-disabled); cursor: not-allowed; }
.ui-checkbox__text { display: flex; flex-direction: column; gap: var(--spacing-xxs); }
.ui-checkbox__label {
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  font-weight: var(--font-weight-medium); color: var(--text-secondary);
}
.ui-checkbox__hint { font-size: var(--text-sm-size); line-height: var(--text-sm-line); color: var(--text-tertiary); }

/* ==========================================================================
   Переключатель
   ========================================================================== */
.ui-toggle { display: inline-flex; align-items: center; gap: var(--spacing-md); cursor: pointer; }
.ui-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-toggle__track {
  position: relative; flex: none;
  width: 36px; height: 20px;
  background: var(--bg-quaternary);
  border-radius: var(--radius-full);
  transition: background-color .12s ease;
}
.ui-toggle__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--bg-primary);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease;
}
.ui-toggle__input:checked + .ui-toggle__track { background: var(--bg-brand-solid); }
.ui-toggle__input:checked + .ui-toggle__track::after { transform: translateX(16px); }
.ui-toggle__input:focus-visible + .ui-toggle__track { box-shadow: var(--focus-ring); }
.ui-toggle__input[disabled] + .ui-toggle__track { background: var(--bg-disabled); cursor: not-allowed; }
.ui-toggle__label {
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  font-weight: var(--font-weight-medium); color: var(--text-secondary);
}

/* ==========================================================================
   Выпадающее меню
   ========================================================================== */
.ui-dropdown { position: relative; display: inline-block; }
.ui-dropdown__menu {
  position: absolute; z-index: 60; min-width: 240px;
  margin-top: var(--spacing-md);
  padding: var(--spacing-xs) 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
.ui-dropdown__menu[hidden] { display: none; }
.ui-dropdown__item {
  display: flex; align-items: center; gap: var(--spacing-md);
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  background: transparent; border: none; text-align: left;
  font-family: var(--font-family-body);
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
}
.ui-dropdown__item:hover { background: var(--bg-active); }
.ui-dropdown__item:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.ui-dropdown__item .ui-icon { width: 20px; height: 20px; color: var(--fg-quaternary); flex: none; }
.ui-dropdown__item--destructive { color: var(--text-error-primary); }
.ui-dropdown__item--destructive .ui-icon { color: var(--fg-error-secondary); }
.ui-dropdown__divider { height: 1px; margin: var(--spacing-xs) 0; background: var(--border-secondary); }

/* ==========================================================================
   Партия 2b: отображение
   ========================================================================== */

/* ==========================================================================
   Бейдж
   ========================================================================== */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.ui-badge--sm { padding: var(--spacing-xxs) var(--spacing-md); font-size: var(--text-xs-size); line-height: var(--text-xs-line); }
.ui-badge--md { padding: var(--spacing-xxs) var(--spacing-lg); font-size: var(--text-sm-size); line-height: var(--text-sm-line); }
.ui-badge--lg { padding: var(--spacing-xs) var(--spacing-lg); font-size: var(--text-sm-size); line-height: var(--text-sm-line); }
.ui-badge--square { border-radius: var(--radius-sm); }
.ui-badge .ui-icon { width: 12px; height: 12px; flex: none; }
.ui-badge__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex: none; }

/* Статусные тона */
.ui-badge--gray    { background: var(--bg-secondary);        color: var(--text-secondary);        border-color: var(--border-secondary); }
.ui-badge--brand   { background: var(--bg-brand-primary);    color: var(--text-brand-secondary);  border-color: var(--color-brand-200); }
.ui-badge--success { background: var(--bg-success-primary);  color: var(--color-success-700);     border-color: var(--color-success-200); }
.ui-badge--warning { background: var(--bg-warning-primary);  color: var(--color-warning-700);     border-color: var(--color-warning-200); }
.ui-badge--error   { background: var(--bg-error-primary);    color: var(--color-error-700);       border-color: var(--color-error-200); }

/* Utility-тона: отделы и типы отсутствий */
.ui-badge--blue       { background: var(--color-blue-50);       color: var(--color-blue-700);       border-color: var(--color-blue-200); }
.ui-badge--blue-light { background: var(--color-blue-light-50); color: var(--color-blue-light-700); border-color: var(--color-blue-light-200); }
.ui-badge--indigo     { background: var(--color-indigo-50);     color: var(--color-indigo-700);     border-color: var(--color-indigo-200); }
.ui-badge--purple     { background: var(--color-purple-50);     color: var(--color-purple-700);     border-color: var(--color-purple-200); }
.ui-badge--pink       { background: var(--color-pink-50);       color: var(--color-pink-700);       border-color: var(--color-pink-200); }
.ui-badge--orange     { background: var(--color-orange-50);     color: var(--color-orange-700);     border-color: var(--color-orange-200); }
.ui-badge--gray-blue  { background: var(--color-gray-blue-50);  color: var(--color-gray-blue-700);  border-color: var(--color-gray-blue-200); }

.ui-badge__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; margin-left: var(--spacing-xxs);
  background: none; border: none; border-radius: var(--radius-full);
  color: currentColor; opacity: .7; cursor: pointer;
}
.ui-badge__close:hover { opacity: 1; }
.ui-badge__close:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* ==========================================================================
   Аватар
   ========================================================================== */
.ui-avatar {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-semibold);
  overflow: visible;
  box-shadow: inset 0 0 0 1px var(--border-secondary);
}
.ui-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-full); display: block; }
.ui-avatar--xs  { width: 24px; height: 24px; font-size: var(--text-xs-size); }
.ui-avatar--sm  { width: 32px; height: 32px; font-size: var(--text-xs-size); }
.ui-avatar--md  { width: 40px; height: 40px; font-size: var(--text-sm-size); }
.ui-avatar--lg  { width: 48px; height: 48px; font-size: var(--text-md-size); }
.ui-avatar--xl  { width: 56px; height: 56px; font-size: var(--text-lg-size); }
.ui-avatar--2xl { width: 64px; height: 64px; font-size: var(--text-xl-size); }
.ui-avatar--brand { background: var(--bg-brand-primary); color: var(--text-brand-secondary); }

.ui-avatar__status {
  position: absolute; right: 0; bottom: 0;
  width: 25%; height: 25%; min-width: 8px; min-height: 8px;
  border-radius: var(--radius-full);
  background: var(--bg-success-solid);
  box-shadow: 0 0 0 1.5px var(--bg-primary);
}
.ui-avatar__status--offline { background: var(--fg-disabled); }

/* Аватар с подписью */
.ui-avatar-label { display: inline-flex; align-items: center; gap: var(--spacing-lg); min-width: 0; }
.ui-avatar-label__text { display: flex; flex-direction: column; min-width: 0; }
.ui-avatar-label__title {
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  font-weight: var(--font-weight-semibold); color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-avatar-label__sub {
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Группа аватаров */
.ui-avatar-group { display: inline-flex; align-items: center; }
.ui-avatar-group .ui-avatar { box-shadow: 0 0 0 2px var(--bg-primary); }
.ui-avatar-group .ui-avatar + .ui-avatar { margin-left: calc(var(--spacing-md) * -1); }
.ui-avatar-group__more {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: calc(var(--spacing-md) * -1);
  background: var(--bg-secondary); color: var(--text-secondary);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 2px var(--bg-primary);
}

/* ==========================================================================
   Тултип
   ========================================================================== */
.ui-tooltip { position: relative; display: inline-flex; }
.ui-tooltip__bubble {
  position: absolute; bottom: calc(100% + var(--spacing-md)); left: 50%; transform: translateX(-50%);
  z-index: 70;
  max-width: 320px; width: max-content;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-primary-solid);
  color: var(--text-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-xs-size); line-height: var(--text-xs-line);
  font-weight: var(--font-weight-medium);
  opacity: 0; visibility: hidden;
  transition: opacity .12s ease, visibility .12s ease;
  pointer-events: none;
}
.ui-tooltip__bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--bg-primary-solid);
}
.ui-tooltip:hover .ui-tooltip__bubble,
.ui-tooltip:focus-within .ui-tooltip__bubble { opacity: 1; visibility: visible; }
.ui-tooltip__sub { display: block; margin-top: var(--spacing-xxs); color: var(--text-secondary-on-brand); font-weight: var(--font-weight-regular); }

.ui-help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0;
  background: none; border: none; color: var(--fg-quinary); cursor: help;
}
.ui-help-icon:hover { color: var(--fg-quaternary); }
.ui-help-icon .ui-icon { width: 16px; height: 16px; }

/* ==========================================================================
   Вкладки
   ========================================================================== */
.ui-tabs { display: flex; align-items: center; gap: var(--spacing-xs); border-bottom: 1px solid var(--border-secondary); }
.ui-tabs__item {
  display: inline-flex; align-items: center; gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-lg);
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-family-body);
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  font-weight: var(--font-weight-semibold);
  color: var(--text-quaternary);
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.ui-tabs__item:hover { color: var(--text-secondary); }
.ui-tabs__item:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.ui-tabs__item--active { color: var(--text-brand-secondary); border-bottom-color: var(--border-brand-alt); }
.ui-tabs__item .ui-badge { margin-left: var(--spacing-xxs); }

/* Кнопочные вкладки */
.ui-tabs--pills { border-bottom: none; gap: var(--spacing-xs); background: var(--bg-secondary); padding: var(--spacing-xs); border-radius: var(--radius-md); display: inline-flex; }
.ui-tabs--pills .ui-tabs__item { border: none; margin: 0; border-radius: var(--radius-sm); padding: var(--spacing-md) var(--spacing-lg); }
.ui-tabs--pills .ui-tabs__item--active { background: var(--bg-primary); color: var(--text-secondary); box-shadow: var(--shadow-xs); }

/* Вертикальные вкладки */
.ui-tabs--vertical { flex-direction: column; align-items: stretch; border-bottom: none; gap: var(--spacing-xxs); }
.ui-tabs--vertical .ui-tabs__item {
  justify-content: flex-start; border-bottom: none; margin: 0;
  border-radius: var(--radius-sm); padding: var(--spacing-md) var(--spacing-lg);
}
.ui-tabs--vertical .ui-tabs__item--active { background: var(--bg-active); color: var(--text-secondary); }

/* ==========================================================================
   Прогресс
   ========================================================================== */
.ui-progress { display: flex; align-items: center; gap: var(--spacing-lg); }
.ui-progress__track { flex: 1; height: 8px; background: var(--bg-quaternary); border-radius: var(--radius-full); overflow: hidden; }
.ui-progress__fill { height: 100%; background: var(--bg-brand-solid); border-radius: var(--radius-full); transition: width .3s ease; }
.ui-progress__fill--success { background: var(--bg-success-solid); }
.ui-progress__value {
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  font-weight: var(--font-weight-medium); color: var(--text-secondary);
  min-width: 40px; text-align: right;
}

/* ==========================================================================
   Пустое состояние
   ========================================================================== */
.ui-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--spacing-6xl) var(--spacing-3xl); }
.ui-featured-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-lg);
  color: var(--fg-quaternary);
  margin-bottom: var(--spacing-xl);
}
.ui-featured-icon .ui-icon { width: 24px; height: 24px; }
.ui-featured-icon--brand { background: var(--bg-brand-primary); border-color: var(--color-brand-200); color: var(--fg-brand-primary); }
.ui-featured-icon--circle { border-radius: var(--radius-full); }
.ui-empty__title {
  font-size: var(--text-md-size); line-height: var(--text-md-line);
  font-weight: var(--font-weight-semibold); color: var(--text-primary);
}
.ui-empty__text {
  margin-top: var(--spacing-xs);
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  color: var(--text-tertiary); max-width: var(--paragraph-max-width);
}
.ui-empty__actions { display: flex; gap: var(--spacing-lg); margin-top: var(--spacing-3xl); }

/* ==========================================================================
   Алерт (инлайн-сообщение)
   ========================================================================== */
.ui-alert {
  display: flex; align-items: flex-start; gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xl);
  background: var(--bg-primary);
  box-shadow: var(--shadow-xs);
}
.ui-alert__icon { flex: none; width: 20px; height: 20px; color: var(--fg-quaternary); margin-top: var(--spacing-xxs); }
.ui-alert__body { flex: 1; min-width: 0; }
.ui-alert__title {
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  font-weight: var(--font-weight-semibold); color: var(--text-primary);
}
.ui-alert__text {
  margin-top: var(--spacing-xs);
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  color: var(--text-secondary);
}
.ui-alert__actions { display: flex; gap: var(--spacing-lg); margin-top: var(--spacing-lg); }
.ui-alert--brand   { background: var(--bg-brand-primary);   border-color: var(--color-brand-200); }
.ui-alert--brand   .ui-alert__icon { color: var(--fg-brand-primary); }
.ui-alert--success { background: var(--bg-success-primary); border-color: var(--color-success-200); }
.ui-alert--success .ui-alert__icon { color: var(--fg-success-primary); }
.ui-alert--warning { background: var(--bg-warning-primary); border-color: var(--color-warning-200); }
.ui-alert--warning .ui-alert__icon { color: var(--fg-warning-primary); }
.ui-alert--error   { background: var(--bg-error-primary);   border-color: var(--color-error-200); }
.ui-alert--error   .ui-alert__icon { color: var(--fg-error-primary); }

/* ==========================================================================
   Тост
   ========================================================================== */
.ui-toasts {
  position: fixed; top: var(--spacing-3xl); right: var(--spacing-3xl);
  z-index: 90; display: flex; flex-direction: column; gap: var(--spacing-lg);
  max-width: 400px;
}
.ui-toast {
  display: flex; align-items: flex-start; gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  animation: ui-toast-in .18s ease-out;
}
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(calc(var(--spacing-md) * -1)); } to { opacity: 1; transform: none; } }
.ui-toast--closing { opacity: 0; transition: opacity .15s ease; }

/* ==========================================================================
   Партия 2c: таблицы, пагинация, модалки, загрузка файлов
   ========================================================================== */

/* ==========================================================================
   Таблица
   ========================================================================== */
.ui-table-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

/* Шапка над таблицей: заголовок, счётчик, описание, действия */
.ui-table-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--spacing-xl);
  padding: var(--spacing-2xl) var(--spacing-3xl);
  border-bottom: 1px solid var(--border-secondary);
}
.ui-table-header__titles { min-width: 0; }
.ui-table-header__title {
  display: flex; align-items: center; gap: var(--spacing-md);
  font-size: var(--text-lg-size); line-height: var(--text-lg-line);
  font-weight: var(--font-weight-semibold); color: var(--text-primary);
}
.ui-table-header__desc {
  margin-top: var(--spacing-xs);
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  color: var(--text-tertiary);
}
.ui-table-header__actions { display: flex; align-items: center; gap: var(--spacing-lg); flex: none; }

.ui-table-scroll { overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; }

.ui-table thead th {
  padding: var(--spacing-lg) var(--spacing-3xl);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-secondary);
  font-size: var(--text-xs-size); line-height: var(--text-xs-line);
  font-weight: var(--font-weight-semibold);
  color: var(--text-quaternary);
  text-align: left;
  white-space: nowrap;
}
.ui-table thead th.ui-table__th--sortable { cursor: pointer; user-select: none; }
.ui-table thead th.ui-table__th--sortable:hover { color: var(--text-tertiary); }
.ui-table__sort { display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.ui-table__sort .ui-icon { width: 16px; height: 16px; color: var(--fg-quinary); }

.ui-table tbody td {
  padding: var(--spacing-xl) var(--spacing-3xl);
  border-bottom: 1px solid var(--border-secondary);
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  color: var(--text-secondary);
  vertical-align: middle;
}
.ui-table tbody tr:last-child td { border-bottom: none; }
.ui-table tbody tr:hover td { background: var(--bg-primary-hover); }
.ui-table tbody tr.ui-table__row--clickable { cursor: pointer; }
.ui-table__cell--primary { color: var(--text-primary); font-weight: var(--font-weight-medium); }
.ui-table__cell--right { text-align: right; }
.ui-table__cell--center { text-align: center; }
.ui-table__cell--actions { width: 1%; white-space: nowrap; text-align: right; }
.ui-table__cell--check { width: 1%; padding-right: 0; }

.ui-table__footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--spacing-xl);
  padding: var(--spacing-lg) var(--spacing-3xl);
  border-top: 1px solid var(--border-secondary);
}

/* ==========================================================================
   Пагинация
   ========================================================================== */
.ui-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-xl); width: 100%; }
.ui-pagination__info {
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  font-weight: var(--font-weight-medium); color: var(--text-secondary);
}
.ui-pagination__pages { display: flex; align-items: center; gap: var(--spacing-xxs); }
.ui-pagination__page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 var(--spacing-md);
  background: transparent; border: none; border-radius: var(--radius-md);
  font-family: var(--font-family-body);
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
  cursor: pointer;
}
.ui-pagination__page:hover:not([disabled]) { background: var(--bg-primary-hover); color: var(--text-secondary); }
.ui-pagination__page:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.ui-pagination__page--active { background: var(--bg-active); color: var(--text-secondary); }
.ui-pagination__page[disabled] { color: var(--text-disabled); cursor: not-allowed; }
.ui-pagination__dots { padding: 0 var(--spacing-md); color: var(--text-tertiary); }

/* ==========================================================================
   Модальное окно
   ========================================================================== */
.ui-modal {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: var(--spacing-xl);
  background: color-mix(in srgb, var(--bg-overlay) 70%, transparent);
}
.ui-modal[hidden] { display: none; }
.ui-modal__dialog {
  width: 100%; max-width: 480px;
  max-height: calc(100vh - var(--spacing-6xl));
  display: flex; flex-direction: column;
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.ui-modal__dialog--md { max-width: 600px; }
.ui-modal__dialog--lg { max-width: 800px; }
.ui-modal__header {
  display: flex; align-items: flex-start; gap: var(--spacing-xl);
  padding: var(--spacing-3xl) var(--spacing-3xl) var(--spacing-xl);
}
.ui-modal__header .ui-featured-icon { margin-bottom: 0; }
.ui-modal__titles { flex: 1; min-width: 0; }
.ui-modal__title {
  font-size: var(--text-lg-size); line-height: var(--text-lg-line);
  font-weight: var(--font-weight-semibold); color: var(--text-primary);
}
.ui-modal__text {
  margin-top: var(--spacing-xs);
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  color: var(--text-tertiary);
}
.ui-modal__body {
  padding: 0 var(--spacing-3xl) var(--spacing-xl);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--spacing-xl);
}
.ui-modal__footer {
  display: flex; gap: var(--spacing-lg);
  padding: var(--spacing-3xl);
  border-top: 1px solid var(--border-secondary);
}
.ui-modal__footer .ui-btn { flex: 1; }
.ui-modal__footer--end { justify-content: flex-end; }
.ui-modal__footer--end .ui-btn { flex: none; }

/* ==========================================================================
   Загрузка файлов
   ========================================================================== */
.ui-upload {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl) var(--spacing-3xl);
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.ui-upload:hover { border-color: var(--border-brand); background: var(--bg-primary-hover); }
.ui-upload--dragover { border-color: var(--border-brand); background: var(--bg-brand-primary); }
.ui-upload:focus-within { box-shadow: var(--focus-ring); }
.ui-upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ui-upload__text {
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  color: var(--text-tertiary);
}
.ui-upload__action { color: var(--text-brand-secondary); font-weight: var(--font-weight-semibold); }
.ui-upload__hint { font-size: var(--text-xs-size); line-height: var(--text-xs-line); color: var(--text-tertiary); }

.ui-file {
  display: flex; align-items: flex-start; gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xl);
}
.ui-file--active { border-color: var(--border-brand); background: var(--bg-brand-primary); }
.ui-file__icon { flex: none; color: var(--fg-brand-primary); }
.ui-file__icon .ui-icon { width: 32px; height: 32px; }
.ui-file__body { flex: 1; min-width: 0; }
.ui-file__name {
  font-size: var(--text-sm-size); line-height: var(--text-sm-line);
  font-weight: var(--font-weight-medium); color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-file__meta { font-size: var(--text-sm-size); line-height: var(--text-sm-line); color: var(--text-tertiary); }
.ui-file__progress { margin-top: var(--spacing-md); }

/* Компактное пустое состояние — для небольших виджетов */
.ui-empty--compact { padding: var(--spacing-3xl) var(--spacing-xl); }
.ui-empty--compact .ui-featured-icon { width: 40px; height: 40px; margin-bottom: var(--spacing-lg); }
.ui-empty--compact .ui-featured-icon .ui-icon { width: 20px; height: 20px; }
.ui-empty--compact .ui-empty__title { font-size: var(--text-sm-size); line-height: var(--text-sm-line); }

/* ==========================================================================
   Метрика — число с подписью. Используется в балансах и аналитике.
   Классы .stat-card / .stat-val / .stat-lbl оставлены как синонимы:
   в портале они применялись 41 раз, но нигде не были описаны.
   ========================================================================== */
.ui-metric,
.stat-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  padding: var(--spacing-xl);
}
.ui-metric__value,
.stat-val {
  font-size: var(--display-xs-size);
  line-height: var(--display-xs-line);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.ui-metric__label,
.stat-lbl {
  margin-top: var(--spacing-xs);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}
.ui-metric__sub {
  margin-top: var(--spacing-xs);
  font-size: var(--text-sm-size);
  line-height: var(--text-sm-line);
  color: var(--text-tertiary);
}
.ui-metric--success .ui-metric__value { color: var(--fg-success-primary); }
.ui-metric--warning .ui-metric__value { color: var(--fg-warning-primary); }
.ui-metric--error   .ui-metric__value { color: var(--fg-error-primary); }
.ui-metric--brand   .ui-metric__value { color: var(--fg-brand-primary); }
.ui-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--spacing-lg); }