/* =============================================================================
   a022_kit_variant — варианты комплектации
   =============================================================================
   В MPI стили обеих страниц жили инлайновыми `style=` внутри `view!`: сетка
   реквизитов, моноширинный артикул, ручная разметка таблицы состава вплоть до
   цвета чётных строк. Инлайн не переживает смену темы и не виден
   `UI_REGISTRY.md`, поэтому переехал сюда блоком `a022-kit`; таблица состава
   при этом собрана из системных классов и своих стилей не имеет вовсе.
   ========================================================================== */

/* --- Список ------------------------------------------------------------- */

.a022-kit__filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.a022-kit__search {
  flex: 1;
  min-width: 240px;
  max-width: 360px;
}

.a022-kit__filter-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-left: auto;
}

.a022-kit__message {
  margin: var(--spacing-sm) 0;
}

.a022-kit__table-shell {
  overflow-x: auto;
}

.a022-kit__sticky-head th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-surface);
}

/* --- Общее для списка и карточки ---------------------------------------- */

/* Артикул и идентификатор набираются и сверяются посимвольно. */
.a022-kit__code {
  font-family: var(--font-family-mono, monospace);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Номер строки и количество читаются столбцом сверху вниз. */
.a022-kit__number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- Карточка ------------------------------------------------------------ */

.a022-kit__fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--spacing-sm) var(--spacing-xl);
  align-items: baseline;
  margin: 0;
}

.a022-kit__fields dt {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.a022-kit__fields dd {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.a022-kit__owner {
  font-weight: var(--font-weight-medium, 500);
}

/* Состав занимает всю ширину сетки: строк в нём больше, чем реквизитов. */
.a022-kit__goods {
  grid-column: 1 / -1;
  overflow-x: auto;
}