/* Компоненты egl-* (Components/Ui и общие Shared). Правила компонента появляются на ступени его
   первого потребителя (CMP-01). Только токены --egl-* (STY-04). */

/* ─── Моноширинные данные и числа (CMP-14; первые потребители — шапка и пагинация) ── */
.egl-mono {
  font-family: var(--egl-font-mono);
}
.egl-num {
  font-family: var(--egl-font-mono);
  font-size: calc(12px * var(--egl-font-scale));
  font-variant-numeric: tabular-nums;
}

/* ─── EmptyState (CMP-09) ────────────────────────────────────────────────── */
.egl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
  background: var(--egl-surface);
  border: 1px solid var(--egl-line);
  border-radius: var(--egl-radius-lg);
}
.egl-empty > .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--egl-radius-lg);
  background: var(--egl-head);
  border: 1px solid var(--egl-line);
  color: var(--egl-muted);
  font-size: calc(20px * var(--egl-font-scale));
}
.egl-empty__title {
  margin: 0;
  font-size: calc(15px * var(--egl-font-scale));
  font-weight: 600;
}
.egl-empty__hint {
  max-width: 480px;
  margin: 0;
  font-size: calc(13px * var(--egl-font-scale));
  color: var(--egl-muted);
}
.egl-empty__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
/* Абзац внутри Actions — на всю строку над кнопками (Denied, /error) */
.egl-empty__note {
  flex-basis: 100%;
  margin: 0;
  font-size: calc(13px * var(--egl-font-scale));
  color: var(--egl-muted);
}
.egl-empty--compact {
  gap: 6px;
  padding: 20px;
  background: transparent;
  border: 0;
}
.egl-empty--compact > .bi {
  width: 36px;
  height: 36px;
  font-size: calc(16px * var(--egl-font-scale));
}

/* ─── Alert (CMP-10), вид — .alert C-DesignSystem ───────────────────────── */
.egl-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--egl-radius-md);
  color: var(--egl-text);
  font-size: calc(13.5px * var(--egl-font-scale));
  line-height: 1.45;
}
.egl-alert__icon {
  flex: none;
  font-size: calc(18px * var(--egl-font-scale));
  line-height: 1;
}
.egl-alert__body {
  flex: 1 1 auto;
  min-width: 0;
}
.egl-alert__title {
  margin-right: 4px;
  font-weight: 600;
}
.egl-alert__actions {
  flex: none;
  display: flex;
  gap: 8px;
}
.egl-alert--ok { background: var(--egl-ok-soft); }
.egl-alert--ok .egl-alert__icon { color: var(--egl-ok); }
.egl-alert--info { background: var(--egl-info-soft); }
.egl-alert--info .egl-alert__icon { color: var(--egl-info); }
.egl-alert--warn { background: var(--egl-warn-soft); }
.egl-alert--warn .egl-alert__icon { color: var(--egl-warn); }
.egl-alert--danger { background: var(--egl-danger-soft); }
.egl-alert--danger .egl-alert__icon { color: var(--egl-danger); }
.egl-alert--neutral { background: var(--egl-neutral-soft); }
.egl-alert--neutral .egl-alert__icon { color: var(--egl-neutral); }

/* ─── Диалоги: общая основа Drawer и Modal (DLG-01, DLG-08) ─────────────── */
/* Фон под открытым диалогом не прокручивается */
html:has(dialog.egl-dialog[open]) {
  overflow: hidden;
}
/* У самого <dialog> нет отступов и фона: клик с target === dialog — только по подложке */
.egl-dialog {
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--egl-text);
}
.egl-dialog::backdrop {
  background: var(--egl-scrim);
}
.egl-dialog__panel {
  display: flex;
  flex-direction: column;
  background: var(--egl-surface);
}
.egl-dialog__body {
  overflow-y: auto;
}

/* ─── Modal (DLG-04): по центру, радиус 14, тень --egl-shadow ────────────── */
.egl-modal {
  width: 560px;
  max-width: calc(100vw - 32px);
}
.egl-modal--sm { width: 420px; }
.egl-modal--lg { width: 800px; }
.egl-modal--xl { width: 1140px; }
.egl-modal .egl-dialog__panel {
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border: 1px solid var(--egl-line);
  border-radius: var(--egl-radius-xl);
  box-shadow: var(--egl-shadow);
}
.egl-modal__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px 6px;
}
.egl-modal__title {
  flex: 1 1 auto;
  margin: 0;
  font-size: calc(16px * var(--egl-font-scale));
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}
.egl-modal .egl-dialog__body {
  padding: 8px 22px 16px;
}
.egl-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 22px 18px;
  border-top: 1px solid var(--egl-line);
}
/* Подтверждение: плитка-иконка слева, заголовок по центру плитки, текст под заголовком */
.egl-modal--alert .egl-modal__head {
  align-items: center;
}
.egl-modal--alert .egl-dialog__body {
  padding-left: 72px;
}
.egl-modal--alert .egl-modal__footer {
  border-top: 0;
  padding-top: 8px;
}

@keyframes egl-dialog-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.egl-modal[open] .egl-dialog__panel,
.egl-modal[open]::backdrop {
  animation: egl-dialog-fade-in .16s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .egl-dialog[open] .egl-dialog__panel,
  .egl-dialog[open]::backdrop {
    animation: none;
  }
}

/* ─── ConfirmDialog (DLG-05) ─────────────────────────────────────────────── */
.egl-confirm__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--egl-radius-md);
  font-size: calc(17px * var(--egl-font-scale));
}
.egl-confirm__icon--ok { background: var(--egl-ok-soft); color: var(--egl-ok); }
.egl-confirm__icon--info { background: var(--egl-info-soft); color: var(--egl-info); }
.egl-confirm__icon--warn { background: var(--egl-warn-soft); color: var(--egl-warn); }
.egl-confirm__icon--danger { background: var(--egl-danger-soft); color: var(--egl-danger); }
.egl-confirm__icon--neutral { background: var(--egl-neutral-soft); color: var(--egl-neutral); }
.egl-confirm__message {
  margin: 0;
  color: var(--egl-muted);
  line-height: 1.45;
}

/* ─── EglSwitch (CMP-13): 36×20, выкл. --egl-line-2, вкл. --egl-accent, ручка белая ── */
.egl-switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--egl-line);
  border-radius: var(--egl-radius-md);
  cursor: pointer;
}
.egl-switch-row--compact {
  display: inline-flex;
  gap: 8px;
  padding: 0;
  border: 0;
}
.egl-switch {
  position: relative;
  flex: none;
  display: inline-block;
  width: 36px;
  height: 20px;
}
.egl-switch__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.egl-switch__input:disabled {
  cursor: not-allowed;
}
.egl-switch__track {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: var(--egl-line-2);
  transition: background-color .15s;
}
.egl-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  transition: transform .15s;
}
.egl-switch__input:checked + .egl-switch__track {
  background: var(--egl-accent);
}
.egl-switch__input:checked + .egl-switch__track::after {
  transform: translateX(16px);
}
.egl-switch__input:disabled + .egl-switch__track {
  opacity: .45;
}
.egl-switch__input:focus-visible + .egl-switch__track {
  box-shadow: 0 0 0 3px var(--egl-accent-soft);
}
.egl-switch__text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.egl-switch__label {
  font-weight: 500;
}
.egl-switch__hint {
  font-size: calc(12px * var(--egl-font-scale));
  color: var(--egl-muted);
}
@media (prefers-reduced-motion: reduce) {
  .egl-switch__track,
  .egl-switch__track::after {
    transition: none;
  }
}

/* ─── Pagination (CMP-05): кнопки 32px ───────────────────────────────────── */
.egl-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.egl-pager__summary {
  font-size: calc(13px * var(--egl-font-scale));
  color: var(--egl-muted);
}
.egl-pager__summary .egl-num {
  color: var(--egl-text);
}
.egl-pager__pages {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.egl-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--egl-line-2);
  border-radius: var(--egl-radius);
  background: var(--egl-surface);
  color: var(--egl-text);
  font-family: var(--egl-font-mono);
  font-size: calc(13px * var(--egl-font-scale));
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.egl-pager__btn:hover:not(:disabled) {
  background: var(--egl-head);
}
.egl-pager__btn[aria-current="page"] {
  background: var(--egl-accent);
  border-color: var(--egl-accent);
  color: var(--egl-accent-text);
  font-weight: 600;
}
.egl-pager__btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.egl-pager__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--egl-accent-soft);
}
.egl-pager__gap {
  min-width: 24px;
  text-align: center;
  color: var(--egl-muted);
}

/* ─── PageHeader (CMP-02) ────────────────────────────────────────────────── */
/* Когда рядом с заголовком не остаётся 360 px (много действий на 1024 px — стрим logcat, сессия агента),
   блок действий переносится под заголовок целиком, а не наезжает на него */
.egl-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 16px;
}
.egl-page-header__main {
  flex: 1 1 360px;
  min-width: 0;
}
.egl-page-header__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.egl-page-title {
  margin: 0;
  font-size: calc(24px * var(--egl-font-scale));
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.egl-page-header__count {
  padding: 3px 9px;
  border-radius: 12px;
  background: var(--egl-accent-soft);
  color: var(--egl-accent);
  font-weight: 500;
}
.egl-page-header__meta {
  max-width: 880px;
  margin-top: 6px;
  font-size: calc(13px * var(--egl-font-scale));
  color: var(--egl-muted);
}
/* Действия не переносятся и не сжимаются: длинная подпись страницы уходит в Meta, а не под кнопку */
.egl-page-header__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* ─── Поля форм и фильтров (CMP-14) ─────────────────────────────────────── */
.egl-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: var(--egl-field-w, auto);
  min-width: 0;
}
.egl-field__label {
  margin: 0;
  font-size: calc(12px * var(--egl-font-scale));
  font-weight: 500;
  color: var(--egl-muted);
}
.egl-field__hint {
  font-size: calc(12px * var(--egl-font-scale));
  line-height: 1.4;
  color: var(--egl-muted);
}
.egl-field__range {
  display: flex;
  align-items: center;
  gap: 6px;
}
.egl-field__range .form-control {
  width: 150px;
}

/* ─── FilterBar (CMP-03) ─────────────────────────────────────────────────── */
.egl-filter-bar {
  margin-bottom: 16px;
  background: var(--egl-surface);
  border: 1px solid var(--egl-line);
  border-radius: var(--egl-radius-lg);
}
.egl-filter-bar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 14px 16px;
}
.egl-filter-bar__spacer {
  flex: 1 1 auto;
}
.egl-filter-bar__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(18px * var(--egl-font-scale));
  height: calc(18px * var(--egl-font-scale));
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--egl-accent);
  color: var(--egl-accent-text);
  font-size: calc(11px * var(--egl-font-scale));
  font-weight: 600;
}
.egl-filter-bar__chev {
  margin-left: 4px;
  font-size: calc(12px * var(--egl-font-scale));
}
.egl-filter-bar [aria-expanded="true"] .egl-filter-bar__chev {
  transform: rotate(180deg);
}
.egl-filter-bar__more {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px dashed var(--egl-line-2);
  border-radius: 0 0 var(--egl-radius-lg) var(--egl-radius-lg);
  background: var(--egl-head);
}
.egl-filter-bar__more[hidden] {
  display: none;
}

/* ─── TableCard (CMP-04) и скелетон ──────────────────────────────────────── */
.egl-table-card {
  overflow: hidden;
  background: var(--egl-surface);
  border: 1px solid var(--egl-line);
  border-radius: var(--egl-radius-lg);
}
.egl-table-card__scroll {
  overflow-x: auto;
}
.egl-table-card .table {
  margin-bottom: 0;
}
/* Заголовки колонок в одну строку: узкая колонка не ломает «Версия ПО» на две — таблица прокручивается */
.egl-table-card .table > thead th {
  white-space: nowrap;
}
.egl-table-card .table > :not(caption) > * > :first-child {
  padding-left: 16px;
}
.egl-table-card .table > tbody > tr:last-child > * {
  border-bottom-width: 0;
}
.egl-table-card__footer {
  padding: 12px 16px;
  background: var(--egl-head);
  border-top: 1px solid var(--egl-line);
}
.egl-table-card__skeleton {
  display: flex;
  flex-direction: column;
}
.egl-table-card__sk-row {
  display: flex;
  gap: 16px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--egl-line);
}
.egl-table-card__sk-row:last-child {
  border-bottom: 0;
}
.egl-table-card__sk-row .egl-sk {
  flex: 1 1 0;
  height: 12px;
}
.egl-sk {
  display: block;
  border-radius: var(--egl-radius-sm);
  background: var(--egl-skeleton);
}

/* ─── SegmentedControl (CMP-08), вид — .segs/.seg макетов ───────────────── */
.egl-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--egl-line);
  border-radius: var(--egl-radius);
  background: var(--egl-head);
}
.egl-seg--stretch {
  display: flex;
}
.egl-seg__option {
  flex: 0 0 auto;
  /* min-height, не height: при шрифте +25% строка текста (≈24px) не должна упираться в край сегмента */
  min-height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--egl-radius-sm);
  background: transparent;
  color: var(--egl-muted);
  font-size: calc(13px * var(--egl-font-scale));
  white-space: nowrap;
  cursor: pointer;
}
.egl-seg--stretch .egl-seg__option {
  flex: 1 1 0;
}
.egl-seg--sm .egl-seg__option {
  min-height: 26px;
  padding: 0 10px;
  font-size: calc(12.5px * var(--egl-font-scale));
}
.egl-seg__option:hover {
  color: var(--egl-text);
}
.egl-seg__option[aria-checked="true"] {
  background: var(--egl-surface);
  color: var(--egl-text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(var(--egl-text-rgb), .12);
}
.egl-seg__option:focus-visible {
  outline: 2px solid var(--egl-accent);
  outline-offset: 1px;
}

/* ─── StatusBadge (CMP-06), вид — .b C-DesignSystem ─────────────────────── */
.egl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: calc(22px * var(--egl-font-scale));
  padding: 0 8px;
  border-radius: var(--egl-radius-sm);
  font-size: calc(12px * var(--egl-font-scale));
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.egl-badge__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.egl-badge--ok { background: var(--egl-ok-soft); color: var(--egl-ok); }
.egl-badge--info { background: var(--egl-info-soft); color: var(--egl-info); }
.egl-badge--warn { background: var(--egl-warn-soft); color: var(--egl-warn); }
.egl-badge--danger { background: var(--egl-danger-soft); color: var(--egl-danger); }
.egl-badge--neutral { background: var(--egl-neutral-soft); color: var(--egl-neutral); }

/* ─── VinLink (CMP-12) ───────────────────────────────────────────────────── */
.egl-vin-link {
  font-size: calc(13px * var(--egl-font-scale));
  font-weight: 500;
  color: var(--egl-accent);
}
.egl-vin-link:hover {
  color: var(--egl-accent-hover);
  text-decoration: underline;
}

/* ─── Строки и ячейки списков ────────────────────────────────────────────── */
/* Строка-ссылка: клик по строке ведёт в карточку (ссылка VIN в первой ячейке — для клавиатуры) */
.egl-row-link {
  cursor: pointer;
}
.egl-cell-truncate {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Ячейке нужна специфичность выше цвета ячеек Bootstrap (.table > :not(caption) > * > *) */
.egl-cell-muted,
.table > :not(caption) > * > .egl-cell-muted {
  color: var(--egl-muted);
}
/* Колонка, по которой отсортирован список (aria-sort) */
.egl-table-card th[aria-sort] {
  color: var(--egl-accent);
}
.egl-field__dash {
  color: var(--egl-muted);
}

/* ─── Тег (CMP-14): чип «ПО 3.1.2», модель в списке ─────────────────────── */
.egl-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: calc(24px * var(--egl-font-scale));
  padding: 0 9px;
  border: 1px solid var(--egl-line);
  border-radius: var(--egl-radius-sm);
  background: var(--egl-head);
  color: var(--egl-text);
  font-size: calc(12.5px * var(--egl-font-scale));
  white-space: nowrap;
}
.egl-tag__label {
  color: var(--egl-muted);
}

/* ─── Точка давности связи (CMP-14, У-10): на связи / недавно / давно ────── */
.egl-dot {
  flex: none;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--egl-off);
}
.egl-dot--ok { background: var(--egl-ok); }
.egl-dot--warn { background: var(--egl-warn); }
.egl-dot--neutral { background: var(--egl-off); }

/* ─── Drawer (DLG-03, макет C-MarketDrawer): справа на всю высоту, Md 600 / Lg 800 ── */
.egl-drawer {
  inset: 0 0 0 auto;
  width: 600px;
  max-width: 100vw;
  height: 100vh;
  margin: 0;
}
.egl-drawer--lg {
  width: 800px;
}
.egl-drawer .egl-dialog__panel {
  height: 100%;
  box-shadow: var(--egl-shadow-drawer);
}
.egl-drawer__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--egl-line);
}
.egl-drawer__heading {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.egl-drawer__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.egl-drawer__title {
  margin: 0;
  font-size: calc(18px * var(--egl-font-scale));
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.3;
}
.egl-drawer__subtitle {
  margin: 0;
  font-size: calc(12px * var(--egl-font-scale));
  line-height: 1.4;
  color: var(--egl-muted);
}
.egl-drawer .egl-dialog__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
}
/* Форма в теле панели — столбец полей .egl-field с ровным шагом */
.egl-drawer__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.egl-drawer .egl-field__label {
  font-size: calc(12.5px * var(--egl-font-scale));
  font-weight: 600;
  color: var(--egl-text);
}
.egl-drawer__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--egl-line);
}
.egl-drawer__section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.egl-drawer__section-title {
  margin: 0;
  font-size: calc(12px * var(--egl-font-scale));
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--egl-muted);
}
.egl-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--egl-line);
  background: var(--egl-surface);
}
.egl-drawer__meta {
  margin-right: auto;
  font-size: calc(12px * var(--egl-font-scale));
  color: var(--egl-muted);
}

/* Появление — выезд справа 180 мс; анимации закрытия нет (DLG-08) */
@keyframes egl-drawer-in {
  from { transform: translateX(100%); }
  to { transform: none; }
}
.egl-drawer[open] .egl-dialog__panel {
  animation: egl-drawer-in .18s ease-out;
}
.egl-drawer[open]::backdrop {
  animation: egl-dialog-fade-in .18s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .egl-drawer[open] .egl-dialog__panel,
  .egl-drawer[open]::backdrop {
    animation: none;
  }
}

/* Сообщения валидации EditForm (классы Blazor: .validation-message у текста, .invalid у поля) */
.egl-drawer .validation-message {
  font-size: calc(12px * var(--egl-font-scale));
  color: var(--egl-danger);
}
.egl-drawer .form-control.invalid,
.egl-drawer .form-select.invalid {
  border-color: var(--egl-danger);
}

/* Сообщение страницы между шапкой и таблицей */
.egl-content > .egl-alert {
  margin-bottom: 16px;
}

/* ─── Врезка (CMP-14): раскрытая строка, вложенная форма, содержимое файла ── */
.egl-inset {
  padding: 14px;
  border: 1px solid var(--egl-line);
  border-radius: var(--egl-radius-md);
  background: var(--egl-inset);
}

/* Тумблеры-фильтры в ряду FilterBar — по нижней линии полей */
.egl-filter-bar__switches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  min-height: var(--egl-control-h);
}

/* ─── Тонировка строк (CMP-14) вместо table-warning / table-danger ─────── */
/* Селектор сильнее ячеек Bootstrap (.table > :not(caption) > * > *), иначе фон не перебить */
.table > tbody > tr.egl-row--warn > * {
  background-color: var(--egl-warn-soft);
}
.table > tbody > tr.egl-row--danger > * {
  background-color: var(--egl-danger-soft);
}
.egl-field__hint--error {
  color: var(--egl-danger);
}

/* Подтверждение под полем: «Новый файл: …» (ступень 3) */
.egl-field__hint--ok {
  color: var(--egl-ok);
}

.egl-cell-truncate--wide {
  max-width: 420px;
}

/* ─── LogFileModal (CMP-17) ──────────────────────────────────────────────── */
.egl-logfile__loading {
  display: flex;
  justify-content: center;
  padding: 24px;
}
.egl-logfile {
  margin: 0;
  font-size: calc(12.5px * var(--egl-font-scale));
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ─── SectionCard (CMP-11) ───────────────────────────────────────────────── */
.egl-section-card {
  overflow: hidden;
  background: var(--egl-surface);
  border: 1px solid var(--egl-line);
  border-radius: var(--egl-radius-lg);
}
/* Высота шапки не зависит от кнопки в Actions: соседние карточки выравниваются по линии */
.egl-section-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--egl-line);
}
.egl-section-card__title {
  margin: 0;
  font-size: calc(15px * var(--egl-font-scale));
  font-weight: 600;
  letter-spacing: 0;
}
.egl-section-card__count {
  color: var(--egl-muted);
}
.egl-section-card__hint {
  font-size: calc(13px * var(--egl-font-scale));
  color: var(--egl-muted);
}
.egl-section-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.egl-section-card__body {
  padding: 16px 18px;
}
.egl-section-card__body--flush {
  padding: 0;
}
.egl-section-card__pad {
  padding: 14px 18px;
}
.egl-section-card .table {
  margin-bottom: 0;
}
.egl-section-card .table > :not(caption) > * > :first-child {
  padding-left: 18px;
}
.egl-section-card .table > tbody > tr:last-child > * {
  border-bottom-width: 0;
}

/* ─── Список «параметр — значение» в две колонки (CMP-14, .dl C-DeviceDetail) ── */
.egl-dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}
.egl-dl > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--egl-line);
}
.egl-dl > div:nth-last-child(-n+2) {
  border-bottom: 0;
}
.egl-dl dt {
  font-size: calc(12px * var(--egl-font-scale));
  font-weight: 500;
  color: var(--egl-muted);
}
.egl-dl dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.egl-dl__inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.egl-dl__note {
  margin-left: 8px;
  font-size: calc(12px * var(--egl-font-scale));
  color: var(--egl-muted);
}

/* ─── Tabs (CMP-07): подчёркивание (C-DeviceDetail) и «таблетки» (C-Market) ── */
.egl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.egl-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--egl-muted);
  font-weight: 500;
  cursor: pointer;
}
.egl-tabs__tab:hover {
  color: var(--egl-text);
}
.egl-tabs__tab:focus-visible {
  outline: 2px solid var(--egl-accent);
  outline-offset: -2px;
}
.egl-tabs__count {
  padding: 1px 6px;
  border: 1px solid var(--egl-line);
  border-radius: 9px;
  background: var(--egl-head);
  color: var(--egl-muted);
  font-size: calc(11px * var(--egl-font-scale));
}
.egl-tabs--underline {
  margin-bottom: 18px;
  border-bottom: 1px solid var(--egl-line);
}
.egl-tabs--underline .egl-tabs__tab {
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.egl-tabs--underline .egl-tabs__tab[aria-selected="true"] {
  color: var(--egl-text);
  border-bottom-color: var(--egl-accent);
}
.egl-tabs--pills .egl-tabs__tab {
  padding: 7px 12px;
  border-radius: var(--egl-radius-btn-sm);
  font-size: calc(13.5px * var(--egl-font-scale));
}
.egl-tabs--pills .egl-tabs__tab[aria-selected="true"] {
  background: var(--egl-surface);
  color: var(--egl-text);
  box-shadow: inset 0 0 0 1px var(--egl-line);
}
.egl-tabs--pills .egl-tabs__count {
  padding: 0;
  border: 0;
  background: none;
}

/* ─── Точка «идёт сейчас» (CMP-14): без анимации — пульсирующих индикаторов нет (STY-13) ── */
.egl-live {
  flex: none;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--egl-ok);
  box-shadow: 0 0 0 4px var(--egl-ok-soft);
}

/* ─── SearchSelect: выпадающий список с вводом (CMP-01) ──────────────────────────────────────────
   Поле — тот же .form-select-sm (стрелка и фокус от моста bootstrap.css), список — слой над страницей. */
.egl-search-select {
  position: relative;
}
.egl-search-select__input {
  width: 100%;
  text-overflow: ellipsis;
}
.egl-search-select__popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 320px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  z-index: var(--egl-z-popover);
  background: var(--egl-surface);
  border: 1px solid var(--egl-line);
  border-radius: var(--egl-radius-md);
  box-shadow: var(--egl-shadow);
}
.egl-search-select__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.egl-search-select__option {
  padding: 5px 10px;
  border-radius: var(--egl-radius-sm);
  font-size: calc(13px * var(--egl-font-scale));
  line-height: 20px;
  color: var(--egl-text);
  cursor: pointer;
  overflow-wrap: anywhere;
}
.egl-search-select__option.is-active {
  background: var(--egl-hover);
}
.egl-search-select__option.is-selected {
  color: var(--egl-accent);
  font-weight: 600;
}
.egl-search-select__option.is-selected.is-active {
  background: var(--egl-accent-soft);
}
.egl-search-select__note {
  padding: 6px 10px;
  font-size: calc(12.5px * var(--egl-font-scale));
  color: var(--egl-muted);
}

/* ─── Страницы-карточки поддержки (ступень 2б): скелетон до первой загрузки, строки сведений шапки ── */
.egl-page-skeleton {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.egl-page-skeleton__title {
  width: 280px;
  height: 28px;
}
.egl-page-skeleton__block {
  height: 320px;
  border-radius: var(--egl-radius-lg);
}
/* Строка сведений в PageHeader.Meta и карточках: элементы разделены отступом, без точек — на узкой ширине строка
   переносится, и точка в начале новой строки выглядела бы ошибкой (найдено живым обходом на 1024 px) */
.egl-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
}
.egl-meta-row + .egl-meta-row {
  margin-top: 4px;
}
/* Встроенная форма в одну строку: поле растягивается, кнопки — по нижней линии поля */
.egl-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
}
.egl-inline-form__grow {
  flex: 1 1 320px;
}

/* ─── Консоль (CMP-14, SCR-11): тёмная в обеих темах, цвета строк — только --egl-console-* ── */
.egl-console {
  height: min(60vh, 720px);
  min-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--egl-console-line);
  border-radius: var(--egl-radius-lg);
  background: var(--egl-console-bg);
  color-scheme: dark;   /* полосы прокрутки — тёмные, как сама консоль, в обеих темах */
}
.egl-console__screen {
  margin: 0;
  padding: 12px 14px;
  font-family: var(--egl-font-mono);
  font-size: calc(13px * var(--egl-font-scale));
  line-height: 1.55;
  color: var(--egl-console-text);
  white-space: pre-wrap;
  word-break: break-all;
}
.egl-console__line--out { color: var(--egl-console-text); }
.egl-console__line--input { color: var(--egl-console-input); font-weight: 600; }
.egl-console__line--signal { color: var(--egl-console-warn); font-weight: 600; }
.egl-console__line--system { color: var(--egl-console-muted); font-style: italic; }

/* ─── Разделы страниц-настроек и формы в карточках (ступень 2б) ─────────── */
.egl-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.egl-stack--tight {
  gap: 12px;
}
.egl-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.egl-form-block {
  margin-top: 14px;
}
.egl-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
/* Текст с переводами строк (причины, ответы агента, вывод): переносы сохраняются, длинное слово не распирает */
.egl-prewrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Пояснение над таблицей в SectionCard Flush и подвал с пагинацией — как у TableCard */
.egl-section-card__note {
  margin: 0;
  border-bottom: 1px solid var(--egl-line);
  font-size: calc(13px * var(--egl-font-scale));
  color: var(--egl-muted);
}
.egl-section-card__footer {
  padding: 12px 18px;
  background: var(--egl-head);
  border-top: 1px solid var(--egl-line);
}

/* ─── Раскрывающийся блок <details> на странице (встроенные формы, журналы) ── */
.egl-disclosure {
  background: var(--egl-surface);
  border: 1px solid var(--egl-line);
  border-radius: var(--egl-radius-lg);
}
.egl-disclosure > summary {
  padding: 12px 18px;
  font-weight: 500;
  cursor: pointer;
}
.egl-disclosure[open] > summary {
  border-bottom: 1px solid var(--egl-line);
}
.egl-disclosure__list {
  margin: 0;
  padding: 12px 18px 12px 36px;
}
.egl-disclosure__item {
  padding: 10px 18px;
  border-bottom: 1px solid var(--egl-line);
  font-size: calc(13px * var(--egl-font-scale));
}
.egl-disclosure__item:last-child {
  border-bottom: 0;
}

/* ─── Команды L0 (MIG-07): отклонённый вызов, итог проверки ИИ, редактор шаблона ── */
.egl-denied-call {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-size: calc(13px * var(--egl-font-scale));
}
.egl-denied-call__argv {
  font-family: var(--egl-font-mono);
  color: var(--egl-text);
}
.egl-denied-call__reason {
  color: var(--egl-muted);
}
.egl-denied-call__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.egl-review {
  margin-top: 12px;
}
.egl-review__meta {
  margin-top: 4px;
  font-size: calc(12px * var(--egl-font-scale));
  color: var(--egl-muted);
}
.egl-template {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.egl-template__arg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--egl-line);
  border-radius: var(--egl-radius-md);
  background: var(--egl-inset);
}
.egl-template__arg-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.egl-template__index {
  flex: none;
  font-size: calc(12.5px * var(--egl-font-scale));
  color: var(--egl-muted);
}
.egl-template__kind {
  width: auto;
  min-width: 160px;
}
.egl-template__bounds {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.egl-template__bound {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: calc(12.5px * var(--egl-font-scale));
  color: var(--egl-muted);
}
.egl-template__bound .form-control {
  width: 140px;
}

/* Список «параметр — значение» строками (узкая колонка, карточки): подпись слева, значение справа */
.egl-dl--rows {
  grid-template-columns: minmax(0, 1fr);
}
.egl-dl--rows > div,
.egl-dl--rows > div:nth-last-child(-n+2) {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 2px 12px;
  padding: 4px 0;
  border-bottom: 0;
}

/* ─── Подтверждение L1 (MIG-06, макет C-AgentSession): ждущее решения — жёлтая шапка ── */
.egl-approval {
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--egl-surface);
  border: 1px solid var(--egl-line);
  border-radius: var(--egl-radius-lg);
}
.egl-approval--pending {
  border-color: color-mix(in oklab, var(--egl-warn) 45%, var(--egl-line));
}
.egl-approval__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--egl-line);
  background: var(--egl-head);
}
.egl-approval--pending .egl-approval__head {
  background: var(--egl-warn-soft);
  border-bottom-color: color-mix(in oklab, var(--egl-warn) 25%, var(--egl-line));
}
.egl-approval__icon {
  color: var(--egl-muted);
}
.egl-approval--pending .egl-approval__icon {
  color: var(--egl-warn);
}
/* Заголовок 15/600: прежний <strong> в шапке Bootstrap читался слишком жирным в тёмной теме */
.egl-approval__title {
  margin: 0;
  font-size: calc(15px * var(--egl-font-scale));
  font-weight: 600;
  letter-spacing: 0;
}
.egl-approval__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 18px;
  font-size: calc(13.5px * var(--egl-font-scale));
}
.egl-approval__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.egl-approval__label {
  font-size: calc(12px * var(--egl-font-scale));
  font-weight: 500;
  color: var(--egl-muted);
}
.egl-approval__commands {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.egl-approval__command {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--egl-line);
  border-radius: var(--egl-radius-md);
  background: var(--egl-inset);
}
.egl-approval__command-head {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: calc(12.5px * var(--egl-font-scale));
  color: var(--egl-muted);
}
/* argv — нумерованный с нуля список: каждый элемент отдельной строкой, границы аргументов видны (Р5) */
.egl-argv {
  margin: 0;
  padding-left: 32px;
  font-family: var(--egl-font-mono);
}
.egl-argv code {
  overflow-wrap: anywhere;
}
.egl-approval__hash {
  word-break: break-all;
}
.egl-approval__actions {
  display: flex;
  gap: 8px;
}
.egl-approval__actions .btn {
  flex: 1 1 0;
}

/* ─── Диагностика сессии агента: заполнение контекста и режим команд ─────── */
.egl-context {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.egl-meter {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--egl-line);
}
.egl-meter__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--egl-accent);
}
.egl-command-mode {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--egl-line);
}

/* ─── Чат с ИИ-агентом (MIG-05, макет C-AgentSession) ───────────────────── */
.egl-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--egl-surface);
  border: 1px solid var(--egl-line);
  border-radius: var(--egl-radius-lg);
}
.egl-chat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--egl-line);
}
.egl-chat__icon {
  color: var(--egl-muted);
}
.egl-chat__title {
  margin: 0;
  font-size: calc(15px * var(--egl-font-scale));
  font-weight: 600;
  letter-spacing: 0;
}
.egl-chat__status {
  margin-left: auto;
  font-size: calc(12.5px * var(--egl-font-scale));
  color: var(--egl-muted);
}
.egl-chat__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px;
}
.egl-chat__note {
  margin: 0;
  font-size: calc(12.5px * var(--egl-font-scale));
  color: var(--egl-muted);
}
.egl-chat__feed {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Карточки вызовов — под пузырём сообщения агента, по левому краю текста (аватар 30 + зазор 12) */
.egl-chat__tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: -8px 0 0 42px;
}
.egl-chat__composer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--egl-line);
}
.egl-chat-msg {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.egl-chat-msg__avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: calc(11px * var(--egl-font-scale));
  font-weight: 700;
}
.egl-chat-msg--agent .egl-chat-msg__avatar {
  background: var(--egl-accent);
  color: var(--egl-accent-text);
}
.egl-chat-msg--operator .egl-chat-msg__avatar {
  background: var(--egl-neutral-soft);
  color: var(--egl-neutral);
}
.egl-chat-msg__bubble {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  max-width: 720px;
}
.egl-chat-msg__who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: calc(12.5px * var(--egl-font-scale));
}
.egl-chat-msg__who b {
  font-weight: 600;
}
.egl-chat-msg__who .egl-num,
.egl-chat-msg__state {
  color: var(--egl-muted);
}
.egl-chat-msg__text {
  line-height: 1.5;
}
.egl-composer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.egl-composer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.egl-report {
  border: 1px solid var(--egl-line);
  border-left: 3px solid var(--egl-accent);
  border-radius: var(--egl-radius-md);
  background: var(--egl-surface);
}
.egl-report__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--egl-line);
  font-weight: 600;
}
.egl-report__icon {
  color: var(--egl-accent);
}
.egl-report__status {
  margin-left: auto;
  font-size: calc(12.5px * var(--egl-font-scale));
  font-weight: 500;
  color: var(--egl-muted);
}
.egl-report__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
}
.egl-report__section {
  margin: 8px 0 0;
  font-size: calc(13px * var(--egl-font-scale));
  font-weight: 600;
  letter-spacing: 0;
}

/* ─── Карточка вызова инструмента (CMP-14 .egl-tool): вывод — на консольных токенах ── */
.egl-tool {
  overflow: hidden;
  border: 1px solid var(--egl-line);
  border-radius: var(--egl-radius-md);
  background: var(--egl-head);
}
.egl-tool__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 9px 12px;
}
.egl-tool__icon {
  color: var(--egl-muted);
}
.egl-tool__name {
  font-size: calc(13px * var(--egl-font-scale));
  font-weight: 500;
}
.egl-tool__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.egl-tool__note {
  padding: 0 12px 8px;
  font-size: calc(12.5px * var(--egl-font-scale));
  color: var(--egl-muted);
  overflow-wrap: anywhere;
}
.egl-tool__actions {
  padding: 0 12px 10px;
}
.egl-tool__output > summary {
  padding: 7px 12px;
  border-top: 1px solid var(--egl-line);
  font-size: calc(12.5px * var(--egl-font-scale));
  color: var(--egl-muted);
  cursor: pointer;
}
.egl-tool__console {
  max-height: 320px;
  margin: 0;
  overflow: auto;
  padding: 10px 14px;
  background: var(--egl-console-bg);
  color-scheme: dark;
  color: var(--egl-console-text);
  font-family: var(--egl-font-mono);
  font-size: calc(12px * var(--egl-font-scale));
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ─── Чек-лист (CMP-14, .cl C-MarketDrawer): группы правила выдачи, категории, «Что нового» ── */
/* Длинный список прокручивается внутри рамки: секции формы под ним остаются на виду */
.egl-checklist {
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--egl-line-2);
  border-radius: var(--egl-radius-md);
  background: var(--egl-field);
}
.egl-checklist__item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 12px;
  border-bottom: 1px solid var(--egl-line);
  cursor: pointer;
}
.egl-checklist__item:last-child {
  border-bottom: 0;
}
.egl-checklist__item:hover {
  background: var(--egl-hover);
}
.egl-checklist__item .form-check-input {
  flex: none;
  margin: 0;
}
.egl-checklist__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.egl-checklist__meta {
  flex: none;
  font-size: calc(12px * var(--egl-font-scale));
  color: var(--egl-muted);
}

/* ─── Сортируемый заголовок колонки (ступень 3): кнопка с подписью и стрелкой; у колонки сортировки — aria-sort ── */
.egl-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.egl-sort:hover {
  color: var(--egl-text);
}
.egl-sort__icon {
  font-size: calc(11px * var(--egl-font-scale));
  opacity: .45;
}
th[aria-sort] .egl-sort__icon {
  opacity: 1;
}
th[aria-sort] .egl-sort {
  color: var(--egl-accent);
}

/* Пояснение строкой ниже в ячейке списка (причина паузы под статусом) — вместо small text-muted Bootstrap */
.egl-cell-note {
  margin-top: 4px;
  font-size: calc(12px * var(--egl-font-scale));
  line-height: 1.35;
  color: var(--egl-muted);
}