/* ============================================================================
   EdgeShift · panel.css
   Дополняет components.css тем, чего в ките нет как класса: экран входа,
   две колонки, список действий с пояснениями, шаги установки, сворачиваемые
   блоки на <details>. Значения — только токены из tokens.css.
   ========================================================================== */

/* --- Каркас страницы ------------------------------------------------------- */
/* Контент занимает всю ширину окна: панель плотная, таблицы выигрывают от места.
   Ограничение --es-content-max осталось в токенах для отдельных блоков текста. */
.es-main-inner { max-width: none; }
.es-stack { display: grid; gap: var(--es-gap-card); }

/* Меню остаётся на экране вместе с переключателем темы и кнопкой «Выйти»:
   иначе на длинной странице подвал меню уезжает за нижний край документа. */
@media (min-width: 721px) {
  .es-rail { position: sticky; top: 0; align-self: flex-start; height: 100vh; }
}

/* Содержимое карточки должно уметь сжиматься: длинный ключ или команда внутри
   грид-колонки иначе распирают карточку (min-width у грид-элементов — auto). */
.es-card__body { min-width: 0; }
.es-card__body > * { min-width: 0; }

/* Правая колонка справочная: состояние слева, действия справа */
.es-two-col { display: grid; gap: var(--es-gap-card); grid-template-columns: 1.2fr 1fr; align-items: start; }
.es-two-col--wide { grid-template-columns: 1.45fr 1fr; }
@media (max-width: 1100px) { .es-two-col { grid-template-columns: 1fr; } }

.es-pills { display: flex; flex-wrap: wrap; gap: var(--es-space-2); }
.es-page-head__crumbs { font: var(--es-text-body); color: var(--es-text-3); }

/* --- Вход ------------------------------------------------------------------ */
.es-login {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--es-space-8); background: var(--es-bg);
}
.es-login__card { width: 100%; max-width: 340px; padding: var(--es-space-8); }
.es-login__brand {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-bottom: var(--es-space-8); font: var(--es-text-h2); letter-spacing: var(--es-tracking-tight);
}
.es-login__form { display: grid; gap: var(--es-gap-field); }

/* --- Список действий с пояснениями ----------------------------------------- */
.es-action-list { display: flex; flex-direction: column; }
.es-action {
  display: flex; align-items: flex-start; gap: var(--es-space-6);
  padding: var(--es-space-5) 0;
}
.es-action + .es-action { border-top: var(--es-border-width) solid var(--es-border); }
.es-action__body { flex: 1; min-width: 0; }
.es-action__title { font: var(--es-text-body-strong); }
.es-action__text { margin: 2px 0 0; font: var(--es-text-caption); color: var(--es-text-3); text-wrap: pretty; }
.es-action__btn { flex: none; }
@media (max-width: 720px) {
  .es-action { flex-direction: column; gap: var(--es-space-3); }
  .es-action__btn, .es-action__btn .es-btn { width: 100%; }
}

/* --- Шаги установки -------------------------------------------------------- */
.es-steps { margin: 0; padding-left: var(--es-space-8); display: grid; gap: var(--es-space-5); }
.es-steps li { font: var(--es-text-body); color: var(--es-text-2); }
.es-steps li::marker { color: var(--es-text-3); font-variant-numeric: var(--es-numeric); }
.es-steps strong { color: var(--es-text); }
.es-steps .es-copy { margin-top: var(--es-space-2); }

/* --- Сворачиваемые блоки на <details> -------------------------------------- */
.es-details { border-top: var(--es-border-width) solid var(--es-border); }
.es-details > summary {
  display: flex; align-items: center; gap: var(--es-space-4);
  padding: 11px var(--es-card-pad-x);
  font: var(--es-text-body-strong); color: var(--es-text); cursor: pointer; list-style: none;
}
.es-details > summary::-webkit-details-marker { display: none; }
.es-details > summary::before { content: '▸'; width: 9px; font-size: 11px; color: var(--es-text-3); }
.es-details[open] > summary::before { content: '▾'; }
.es-details > summary:hover { background: var(--es-surface-2); }
.es-details__body { padding: 0 var(--es-card-pad-x) var(--es-card-pad-y); display: grid; gap: var(--es-gap-field); }

/* --- Формы ----------------------------------------------------------------- */
.es-field--wide { grid-column: 1 / -1; }
.es-form-actions { grid-column: 1 / -1; display: flex; gap: var(--es-space-3); }
.es-checks { grid-column: 1 / -1; display: grid; gap: var(--es-space-3); }

/* --- Мелочи ---------------------------------------------------------------- */
.es-note { font: var(--es-text-caption); color: var(--es-text-3); text-wrap: pretty; margin: 0; }
.es-note code, .es-action__text code, .es-steps code { font: var(--es-text-mono); font-size: 11.5px; }
.es-block + .es-block { margin-top: var(--es-space-7); }
.es-block__title { font: var(--es-text-h3); margin: 0 0 var(--es-space-1); }
.es-clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es-ip-list { display: flex; flex-wrap: wrap; gap: var(--es-space-2); }
.es-proxied { display: inline-flex; align-items: center; gap: var(--es-space-2); color: var(--es-text-2); }
.es-proxied svg { width: 15px; height: 10px; fill: var(--es-text-3); }

/* Колонки с длинной командой внутри должны сжиматься: без minmax(0, …)
   грид считает минимальной шириной ширину неразрывной строки (правка кита). */
.es-mode { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.es-mode__option .es-copy { max-width: 100%; }

/* Действия — последняя колонка, прижаты вправо */
.es-table td:has(> .es-row-actions) { text-align: right; }

/* Ссылки-переключатели (фильтр журнала) выглядят как .es-seg__btn */
.es-seg__btn { text-decoration: none; display: inline-flex; align-items: center; }
.es-seg__btn:hover { text-decoration: none; color: var(--es-text); }
.es-seg__btn[aria-current='page'] {
  background: var(--es-surface); border-color: var(--es-border-2);
  color: var(--es-text); font-weight: 600; box-shadow: var(--es-shadow);
}

/* Подвал меню: строка с пользователем, под ней переключатель темы */
.es-rail__foot { flex-direction: column; align-items: stretch; gap: var(--es-space-3); }
.es-rail__user { display: flex; align-items: center; gap: var(--es-space-3); }
.es-rail__user form { margin-left: auto; }

/* Переключатель темы */
.es-theme { display: inline-flex; }
.es-theme .es-seg__btn { padding: 0 var(--es-space-3); }
/* В меню место узкое: кнопки равной доли и по одному знаку на кнопке */
.es-theme--rail { display: flex; }
.es-theme--rail .es-seg__btn { flex: 1; padding: 0; font-size: 12px; }

/* Модалка подтверждения скрыта, пока её не открыл app.js */
.es-modal-overlay[hidden] { display: none; }

/* --- Мобильное: имя и адрес в карточке-строке идут одной строкой ------------ */
@media (max-width: 720px) {
  .es-table--cards td[data-es-inline] { display: inline-block; margin-right: var(--es-space-3); }
  /* Действия в карточке-строке идут во всю ширину: каждое из них — отдельная
     форма, поэтому растягивать надо её, а не саму кнопку. */
  .es-table--cards .es-row-actions form { flex: 1; }
  .es-table--cards .es-row-actions .es-btn { width: 100%; }
  .es-table td:has(> .es-row-actions) { text-align: left; }
  /* На узком экране показателей пять: «Списано IP» уходит, он справочный. */
  .es-metrics [data-es-optional] { display: none; }
  .es-two-col, .es-main-inner { max-width: none; }
  .es-login__card { padding: var(--es-space-7); }
}