/*
 * admin-web — page styles (поверх дизайн-системы tokens/components/icons).
 * Раньше жили инлайном в index.html; вынесены сюда при рефакторинге, чтобы
 * index.html остался тонким (только разметка + boot fail-safe), а стили
 * кэшировались отдельно. Семантику берём из токенов — без хардкода цветов.
 */

html, body { height: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg-surface3); color: var(--fg-default); }

/* ── Экран входа ──────────────────────────────────────────────────────────── */
body.is-login {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-8) var(--space-4);
  background:
    radial-gradient(60rem 60rem at 50% -25rem, var(--accent-container), transparent 70%),
    var(--bg-surface3);
}
/* Флекс-айтем центрирования — #root, а не .screen. Из-за процента в
   width:min(440px,100%) intrinsic-ширина #root считается по max-content текста
   (процент в min() «выпадает» при shrink-to-fit) → #root шире карточки, и она
   липнет к его левому краю: карточка входа заметно левее центра. Делаем #root
   прозрачным флекс-контейнером на всю ширину — .screen центрируется всегда. */
body.is-login #root { width: 100%; display: flex; justify-content: center; }
.screen {
  width: min(440px, 100%); background: var(--bg-surface1);
  border: 1px solid var(--border-default); border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-popover); padding: var(--space-8);
}
.brand { display: flex; align-items: center; gap: var(--space-3); font: var(--font-h6); color: var(--fg-default); }
.brand .mark {
  width: 28px; height: 28px; flex: none;
  background: var(--accent-primary);
  border-radius: var(--radius-lg);
}
.screen h1 { font: var(--font-h5); margin: var(--space-6) 0 var(--space-1); }
.screen .sub { font: var(--font-body2); color: var(--fg-muted); margin: 0 0 var(--space-6); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* ── Каркас приложения (нав-дровер + контент) ─────────────────────────────── */
.layout { display: flex; min-height: 100vh; }
.layout .nav { position: sticky; top: 0; height: 100vh; flex: none; }
.nav .ver { padding: 0 20px; margin-top: 8px; font: var(--font-caption); color: var(--fg-muted2); }
.nav button.item {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 24px);
  margin: 1px 12px; padding: 9px 12px; border-radius: var(--radius-lg);
  color: #dbe7f5; background: transparent; border: none;
  font: var(--font-subtitle2); font-weight: var(--fw-medium); text-align: left; cursor: pointer;
  transition: background .15s, color .15s;
}
.nav button.item .ico, .nav button.item svg { color: #aac6e6; }
.nav button.item:hover { background: rgba(255,255,255,.08); color: #ffffff; }
.nav button.item:hover .ico, .nav button.item:hover svg { color: #ffffff; }
.nav button.item[aria-current="page"] { background: rgba(255,255,255,.12); color: #ffffff; box-shadow: none; }
.nav button.item[aria-current="page"] .ico, .nav button.item[aria-current="page"] svg { color: #ffffff; }
.nav button.item .label { flex: 1; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-default);
  position: sticky; top: 0; z-index: 10;
}
.topbar h2 { font: var(--font-h6); margin: 0; }
.topbar .spacer { flex: 1; }
/* Контент — ЦЕНТРИРОВАННАЯ адаптивная колонка. История: был жёсткий
   max-width:1100px-кап с центрированием, потом кап убрали совсем (width:100%) —
   но тогда списки/таблицы и grid'ы с малым числом элементов липнут к ЛЕВОМУ краю,
   а справа на широких экранах пустота → «блоки не центруются». Правильный паттерн —
   широкий кап + margin-inline:auto: на больших экранах контент по центру (пустота
   симметрична), на узких — width:100% (clamp ужимает отступы). */
.content {
  padding: clamp(var(--space-5), 1.5vw + var(--space-3), var(--space-8))
           clamp(var(--space-5), 3vw, var(--space-8));
  width: 100%; max-width: 1320px; margin-inline: auto; box-sizing: border-box;
}
/* Текучий контент не растягивает одиночные поля формы на весь экран: таблицы/
   списки занимают всю ширину, текстовым контролам даём читаемую меру. */
.content .field > .input,
.content .field > .select,
.content .field > .input-group { max-width: min(100%, 560px); }
.toolbar { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.muted { color: var(--fg-muted); font: var(--font-body2); }

/* Поиск с иконкой (использует .input-group дизайн-системы). */
.search { width: 240px; }
.search .input { padding-left: 38px; }

/* ── Сводка по статусам ───────────────────────────────────────────────────── */
.stats { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
.stat {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-surface1); border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl); padding: 12px 16px; min-width: 116px; box-shadow: var(--shadow-card);
}
.stat .n { font: var(--font-h5); color: var(--fg-default); font-variant-numeric: tabular-nums; }
.stat .k { font: var(--font-caption); color: var(--fg-muted); }
.stat--accent .n { color: var(--accent-secondary); }

/* ── Таблица ──────────────────────────────────────────────────────────────── */
table.table { width: 100%; }
.row-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
td.actions { text-align: right; white-space: nowrap; }
tr.row--clickable { cursor: pointer; }
/* Клавиатурный фокус строки-тоггла (tabindex в app.js) — WCAG 2.4.7. */
tr.row--clickable:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
tr.row--open { background: var(--bg-row); }
.row-toggle { display: inline-flex; align-items: center; gap: 8px; }
.row-toggle .ico { color: var(--fg-muted2); transition: transform .15s; }
tr.row--open .row-toggle .ico { transform: rotate(90deg); }

/* Разворот строки компании — детали (число участников и т.п.). */
tr.detail-row > td { padding: 0; border-bottom: 1px solid var(--border-default); background: var(--bg-surface2); }
.detail { padding: var(--space-5) var(--space-6); }
.detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 24px; margin: 0; }
.detail dt { font: var(--font-subtitle2); color: var(--fg-muted); }
.detail dd { margin: 0; font: var(--font-body2); color: var(--fg-default); }

/* ── Фичефлаги компании (BP-14) ───────────────────────────────────────────── */
.flags { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-default); }
.flags__title { margin: 0 0 var(--space-3); font: var(--font-subtitle2); color: var(--fg-muted); }
.flag-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); cursor: pointer; }
.flag-text { display: flex; flex-direction: column; gap: 2px; }
.flag-text strong { font: var(--font-subtitle2); color: var(--fg-default); }
.flag-text .muted { font: var(--font-body2); }
.flag-hint { font: var(--font-caption); color: var(--fg-muted2); }
.flag-row .switch { flex: none; }

/* ── Спиннер: НЕ терминальный, заменяется данными или alert'ом. ───────────── */
.loading { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-6); color: var(--fg-muted); }
.spinner {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2px solid var(--border-default); border-top-color: var(--accent-primary);
  animation: spin 0.8s linear infinite;
}
.spinner--sm { width: 14px; height: 14px; border-width: 2px; }
.spinner--on-accent { border-color: rgba(255,255,255,.45); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Тосты результата действий ────────────────────────────────────────────── */
#toasts { position: fixed; right: var(--space-5); bottom: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); z-index: var(--z-snackbar); }
.toast { min-width: 240px; max-width: 360px; box-shadow: var(--shadow-card); }

/* ── Модалка (поверх .modal дизайн-системы) ───────────────────────────────── */
#modal-root:empty { display: none; }
.modal-scrim { position: fixed; inset: 0; z-index: var(--z-modal); }
.modal__body .muted { margin: 0; }

/* ── Адаптив ──────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .layout .nav { width: 100%; height: auto; min-height: 0; position: static; flex-direction: row; align-items: center; overflow-x: auto; padding: 8px; }
  .nav .brand, .nav .ver, .nav .spacer, .nav .account { display: none; }
  .nav button.item { width: auto; padding: 10px 14px; white-space: nowrap; }
  .nav button.item[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent-primary); }
  .content { padding: var(--space-4); }
  .topbar { padding: var(--space-3) var(--space-4); }
  .search { width: 160px; }
  /* Списки (компании/пользователи) — 5 колонок. На узких экранах не сжимаем их
     в нечитаемую кашу: держим min-width и даём таблице скроллиться по горизонтали
     ВНУТРИ карточки (.card#list — overflow:auto). Скруглённые углы клиппят край. */
  #list table.table { min-width: 560px; }
}