/* Консоль платформы (Р-59, O2) в виде CRM: каркас и компоненты — shell.css,
 * ui.css, auth.css и тёплая тема warm.css (body.crm-warm.admin-console,
 * layouts/admin). Здесь только дополнения консоли:
 *   1. верхняя панель — видна на любой ширине (признак консоли: плашки,
 *      подтверждение sudo); бургер — только в компактном режиме;
 *   2. экраны входа, кода, пароля и sudo — карточка auth.css в тёплой теме;
 *   3. мелкие блоки экранов консоли, которых нет в ui.css: формы в панели,
 *      строки списков с действием, выбор радиокнопкой, подсказки, страницы;
 *   4. прежние классы admin-* (экраны до перехода на компоненты CRM) — в
 *      том же виде, что компоненты CRM: новые экраны пишутся на ui.css.
 * Цвета — токены tokens.css и warm.css; inline-стилей нет (CSP).
 * admin.css подключается раньше ui.css и shell.css — правила поверх них
 * начинаются с .admin-console. Точки перелома — 1180 и 768, как у каркаса. */

/* ============================================================
 * 1. Каркас: верхняя панель консоли
 * ============================================================ */

.admin-console .admin-topbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding: 0 var(--space-6) 0 22px;
}

.admin-topbar__brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  color: var(--text);
  text-decoration: none;
}

.admin-topbar__brand:hover {
  color: var(--text);
  text-decoration: none;
}

.admin-topbar__brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.admin-topbar__name {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: 600;
}

.admin-topbar__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1-5);
  min-width: 0;
}

/* Подтверждение sudo — справа, 12 вторичным */
.admin-topbar__sudo {
  margin-left: auto;
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Подвал меню: роли сотрудника переносятся, а не обрезаются */
.admin-sidebar__roles {
  overflow-wrap: anywhere;
}

/* Подтверждение sudo в подвале меню — только на телефоне (ниже) */
.admin-sidebar__sudo {
  display: none;
}

/* Десктоп: меню в потоке под верхней панелью — бургер и знак в меню не
 * нужны (знак уже в панели); в выезжающем меню знак остаётся */
@media (min-width: 1180px) {
  .admin-console .admin-topbar .app-burger,
  .admin-console .admin-sidebar__brand {
    display: none;
  }
}

/* Прежние экраны-карточки (.admin-card прямо в .app-main) прокручиваются
 * областью содержимого; экраны на компонентах CRM прокручивают .app-scroll */
@media (min-width: 768px) {
  .admin-console .app-main {
    overflow-y: auto;
  }
}

/* Телефон: панель растёт в высоту, если плашки не влезли в строку */
@media (max-width: 767px) {
  .admin-console .admin-topbar {
    height: auto;
    min-height: calc(56px + env(safe-area-inset-top, 0px));
    padding-top: max(var(--space-2), env(safe-area-inset-top, 0px));
    padding-bottom: var(--space-2);
  }

  .admin-topbar__name {
    display: none;
  }

  /* Плашки — рядом со знаком, переносятся внутри своей колонки */
  .admin-topbar__badges {
    flex: 1 1 0;
  }

  /* Подтверждение sudo на телефоне — в подвале меню, не в липкой панели */
  .admin-topbar__sudo {
    display: none;
  }

  .admin-sidebar__sudo {
    display: block;
  }
}

/* ============================================================
 * 2. Вход, код, пароль, sudo — карточка auth.css в тёплой теме
 * ============================================================ */

.admin-console .auth-card {
  border-radius: 20px;
  box-shadow: var(--warm-shadow);
}

a.auth-brand,
a.auth-brand:hover {
  color: var(--text);
  text-decoration: none;
}

.admin-auth__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
}

.admin-auth__footer {
  display: flex;
  justify-content: center;
}

/* ============================================================
 * 3. Блоки экранов консоли
 * ============================================================ */

/* Форма или сообщение — узкая панель, а не на всю ширину */
.admin-narrow {
  max-width: 640px;
}

/* Форма в панели: поля столбиком, кнопки — по своей ширине */
.admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.admin-form > .btn {
  align-self: flex-start;
}

.admin-form .field + .field,
.admin-form .admin-fieldset + .field {
  margin-top: var(--space-1);
}

/* Тело панели из нескольких абзацев и форм */
.admin-panel-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.admin-panel-stack > p {
  margin: 0;
}

/* Несколько решений по заявке — формы через разделитель */
.admin-decisions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-decisions > form + form {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
}

/* Группа радиокнопок с подписью: fieldset без рамки браузера */
.admin-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.admin-fieldset > legend {
  margin-bottom: var(--space-1-5);
  padding: 0;
}

.admin-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  cursor: pointer;
}

.admin-choice input {
  flex: none;
  margin: 3px 0 0;
  accent-color: var(--warm-ink, var(--accent));
}

/* Подсказка под формой или в панели — 13 вторичным; «почему недоступно» —
 * красным */
.admin-hint {
  margin: 0;
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--text-secondary);
}

.admin-hint--warning {
  color: var(--danger);
}

/* Строка из полей и кнопки: причина + «Отозвать», «Отключить» */
.admin-inline-form,
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.admin-inline-form .field__input {
  flex: 1 1 200px;
  width: auto;
  min-width: 0;
}

.admin-inline-form .field__input:has(~ .btn--small) {
  height: var(--control-height-sm);
}

/* Форма в строке списка — справа, поле и кнопка в одну строку; форма
 * отдельной строкой панели — не шире 560 */
.admin-list__item > .admin-inline-form,
.admin-sessions__item > .admin-inline-form {
  flex: 0 1 400px;
}

.admin-panel-stack > .admin-inline-form {
  max-width: 560px;
}

/* Фильтры реестра: поле или выбор по своей ширине; длинные подписи
 * выбора не растягивают строку */
.filters .admin-filter {
  width: auto;
  min-width: 160px;
}

.filters select.admin-filter {
  max-width: 280px;
}

/* Страницы реестра: «Назад», «страница N из M», «Дальше» */
.admin-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.admin-pages__meta {
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--text-secondary);
}

/* Таблица в стопке экрана — поля уже даёт .app-scroll */
.admin-console .stack > .table-scroll {
  padding: 0;
}

/* Таблица внутри панели — без своей тени и скругления тёплой темы */
.admin-console .panel .table-panel {
  border-radius: 0;
  box-shadow: none;
}

.admin-console .panel > .table-scroll:last-child .table-panel {
  border-radius: 0 0 20px 20px;
}

/* Подвал панели в тёплой теме — по радиусу панели */
.admin-console .panel__footer {
  border-radius: 0 0 20px 20px;
}

/* Имена классов и пути в коде — переносятся в любом месте */
.admin-console .table td.admin-cell--code {
  overflow-wrap: anywhere;
}

/* «Подпись — значение» с длинными значениями (причина, документ):
 * подпись колонкой, значение слева */
.admin-kv .kv-list__row {
  display: grid;
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
}

.admin-kv .kv-list__value {
  text-align: left;
}

@media (max-width: 479px) {
  .admin-kv .kv-list__row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}

/* Строки списка в панели: сотрудники, роли, сессии, приглашения
 * поддержки — основное слева, метки или действие справа */
.admin-list,
.admin-sessions {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-list__item,
.admin-sessions__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2-5) 0;
  border-bottom: 1px solid var(--border-soft);
}

.admin-console .panel .admin-list__item,
.admin-console .panel .admin-sessions__item {
  padding: var(--space-3) var(--space-5);
}

.admin-list__item:last-child,
.admin-sessions__item:last-child {
  border-bottom: 0;
}

.admin-list__main,
.admin-sessions__main {
  display: flex;
  flex: 1 1 280px;
  flex-direction: column;
  gap: var(--space-0-5);
  min-width: 0;
}

.admin-list__name {
  font-weight: 600;
}

.admin-list__meta,
.admin-sessions__meta {
  font-size: var(--font-size-hint);
  line-height: var(--line-height-hint);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.admin-list__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1-5);
}

/* Ключ TOTP, otpauth-ссылка, детали события журнала — моноширинным на
 * подложке */
.admin-secret {
  display: block;
  padding: var(--space-2) var(--space-2-5);
  border-radius: var(--radius);
  background: var(--surface-subtle);
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-cell);
  line-height: var(--line-height-secondary);
  overflow-wrap: anywhere;
}

.admin-secret--uri {
  font-size: var(--font-size-hint);
}

/* Раскрывашка «Нет доступа к приложению», «детали» */
.admin-details > summary {
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-secondary);
  color: var(--text-secondary);
  cursor: pointer;
}

.admin-details[open] > summary {
  margin-bottom: var(--space-2);
}

/* Коды восстановления — две колонки моноширинным */
.admin-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-1-5);
  margin: 0 0 var(--space-5);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--surface-subtle);
  list-style: none;
}

@media (max-width: 767px) {
  .admin-console .panel .admin-list__item,
  .admin-console .panel .admin-sessions__item {
    padding: var(--space-3) var(--space-4);
  }

  .filters .admin-filter,
  .filters select.admin-filter {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }

  .admin-form > .btn {
    align-self: stretch;
  }
}

/* ============================================================
 * 4. Прежние классы admin-* — в виде компонентов CRM. Новые экраны
 *    пишутся на ui.css (page_header, panel, table, field, btn)
 * ============================================================ */

/* Карточка экрана — белая панель тёплой темы с полями страницы */
.admin-card {
  max-width: 640px;
  padding: var(--space-6);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--warm-shadow, none);
}

.admin-card--wide {
  max-width: none;
}

.admin-console .app-main > .admin-card {
  flex: none;
  margin: var(--space-6) var(--page-gutter) 0;
}

.admin-console .app-main > .admin-card:last-child {
  margin-bottom: var(--space-12);
}

.admin-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-4);
}

.admin-card__title {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  font-weight: 600;
  letter-spacing: var(--letter-spacing-h1);
}

.admin-card__head > .admin-card__title {
  margin: 0;
}

.admin-card__subtitle {
  margin: var(--space-6) 0 var(--space-2-5);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  font-weight: 600;
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
  min-width: 0;
  margin: 0 0 var(--space-4);
  padding: 0;
  border: 0;
}

.admin-label {
  font-size: var(--font-size-field-label);
  line-height: var(--line-height-secondary);
  font-weight: 500;
  color: var(--text);
}

.admin-input {
  width: 100%;
  min-width: 0;
  height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--border-control);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--font-size-base);
}

.admin-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.admin-input--mono {
  font-family: var(--font-mono);
  font-size: var(--font-size-mono-cell);
}

/* Главная кнопка — чёрная «пилюля» тёплой темы */
.admin-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: var(--space-1) var(--space-3-5);
  border: 1px solid var(--warm-ink, var(--accent));
  border-radius: var(--radius-pill);
  background: var(--warm-ink, var(--accent));
  color: var(--surface);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.admin-submit:hover {
  color: var(--surface);
  text-decoration: none;
  opacity: .9;
}

/* Вторичное действие в строке — белая «пилюля» 32 */
.admin-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height-sm);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--font-size-secondary);
  font-weight: 500;
  cursor: pointer;
}

.admin-link-button:hover {
  background: var(--surface-subtle);
}

.admin-submit:focus-visible,
.admin-link-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.admin-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.admin-card .admin-actions {
  margin-top: var(--space-4);
}

.admin-filters .admin-input,
.admin-inline-form .admin-input {
  flex: 1 1 180px;
  width: auto;
  min-width: 160px;
}

/* Таблица — как .table ui.css: шапка 12·500 вторичным, строки через
 * --border-soft; ячейки переносят длинные значения */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.admin-table th {
  padding: var(--table-head-pad-y) var(--table-cell-pad-x);
  border-bottom: 1px solid var(--border-panel);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
}

.admin-table td {
  padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-table tbody tr:hover {
  background: var(--row-hover);
}

/* Вкладки — как .tabs ui.css */
.admin-tabs {
  display: flex;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  overflow-x: auto;
  box-shadow: inset 0 -1px 0 var(--border-panel);
}

.admin-tabs__item {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  min-height: var(--tab-height);
  padding: 0 var(--space-3);
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}

.admin-tabs__item:hover {
  color: var(--text);
  text-decoration: none;
}

.admin-tabs__item--current,
.admin-tabs__item--current:hover {
  border-bottom-color: var(--accent);
  color: var(--text);
  font-weight: 600;
}

/* Пары «подпись — значение» — как .kv-list ui.css */
.admin-facts,
.admin-props {
  display: grid;
  grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
  margin: 0 0 var(--space-4);
}

.admin-facts dt,
.admin-props dt,
.admin-facts dd,
.admin-props dd {
  margin: 0;
  padding: var(--kv-row-pad-y) 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-base);
}

.admin-facts dt,
.admin-props dt {
  padding-right: var(--space-4);
  color: var(--text-secondary);
}

@media (max-width: 1179px) {
  .admin-console .app-main > .admin-card {
    margin-left: var(--page-gutter-tablet);
    margin-right: var(--page-gutter-tablet);
  }
}

@media (max-width: 767px) {
  .admin-console .app-main > .admin-card {
    margin: var(--space-4) var(--page-gutter-phone) 0;
    padding: var(--space-4);
  }

  .admin-console .app-main > .admin-card:last-child {
    margin-bottom: var(--space-8);
  }

  .admin-card__title {
    font-size: var(--font-size-h1-phone);
    line-height: var(--line-height-h1-phone);
  }

  .admin-input {
    font-size: var(--font-size-field-phone);
  }

  .admin-table {
    display: block;
    overflow-x: auto;
  }
}