/* Панель управления Cibo — минимальный стиль, без внешних зависимостей. */
/* Значения переменных согласованы с client/cabinet (та же тёмная палитра: bg/surface/border/
   accent), только имена оставлены прежними (--panel/--panel2/--line/--ok/--warn/--bad), чтобы не
   трогать все места использования — меняется лишь то, КАК это выглядит (фон, акцент, границы). */
/* Фирменный шрифт TT Positive (локально, WOFF2; те же файлы, что у client/cabinet). Пути
   относительные — фронтенд смонтирован под /review. Пока подключён только на экране входа
   (через --login-font в :root), чтобы он совпадал с client/cabinet. */
@font-face { font-family: "TT Positive"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/TT_Positive_Regular.woff2") format("woff2"); }
@font-face { font-family: "TT Positive"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/TT_Positive_Medium.woff2") format("woff2"); }
@font-face { font-family: "TT Positive"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/TT_Positive_DemiBold.woff2") format("woff2"); }
@font-face { font-family: "TT Positive"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/TT_Positive_Bold.woff2") format("woff2"); }
@font-face { font-family: "TT Positive"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/TT_Positive_ExtraBold.woff2") format("woff2"); }
:root {
  /* Шрифт экрана входа (общий блок .login-*): фирменный, как у client/cabinet. */
  --login-font: "TT Positive", -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  --bg: #08090b;
  --panel: #121419;
  --panel2: #1d222a;
  --line: #2a2f38;
  --text: #f4f5f8;
  --muted: #a4a8b8;
  --accent: #2f6fff;
  --accent-2: #7ea7ff;
  --ok: #6cbf2c;
  --warn: #ff9f1a;
  --bad: #ff364f;
  /* Тона плиток иконок рейки — БУКВАЛЬНО как client/cabinet (`--surface-2`/`--border-2`), чтобы
     боковая панель выглядела одинаково во всех трёх сервисах (spacing/цвета совпадают). */
  --surface-2: #171a21;
  --surface-3: #1d222a;
  --border-2: #343b46;
  --muted-2: #767c8c;
  --radius: 12px;
  /* Фон страниц-«листов» (заголовок+фильтры+таблица единым тонированным полотном, БЕЗ отдельной
     рамки-«карточки» вокруг таблицы) — то же значение и тот же приём, что в cabinet/client. */
  --sheet-bg: #1a1c23;
  /* Длительность анимации открытия/закрытия дропдауна/мультиселекта — синхронно с DROPDOWN_ANIM_MS
     в app.js (см. dropdownAnimateOpen/Close), как в cabinet/client. */
  --dd-anim: .16s;
  --scrollbar-size: 6px;
  --scrollbar-thumb: rgba(120,150,190,.25);
  --scrollbar-thumb-hover: rgba(120,150,190,.5);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}
/* Единый тонкий тёмный скролл (как в кабинете/на витрине) — WebKit/Chrome по умолчанию рисует
   толстый скроллбар со светлым (белым) фоном на тёмной странице, что выбивается из дизайна. */
html { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
*::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb); border-radius: var(--scrollbar-size);
  border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
*::-webkit-scrollbar-track { background: transparent; }
a { color: var(--accent); }
h1, h2, h3 { font-weight: 600; }
button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  border-radius: 6px;
  padding: 7px 14px;
}
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.danger { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 600; }
button.ghost { background: transparent; }
button:disabled { opacity: .5; cursor: default; }
input, textarea, select {
  font: inherit;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  width: 100%;
}
label { display: block; margin: 10px 0 4px; color: var(--muted); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
}

/* --- Вход: ЕДИНЫЙ вид во всех трёх сервисах ---
   Блок правил .login-* повторён ДОСЛОВНО в трёх файлах: client/frontend/css/styles.css,
   cabinet/frontend/css/styles.css и server/frontend/css/styles.css. Общего CSS у фронтендов
   нет (у каждого свой origin), поэтому правка здесь = правка во всех трёх. Палитра — свои
   переменные блока (ниже, с префиксом --login-*): имена остальных переменных :root у server
   другие. Объявлены на :root, а не на .login-wrap — `.login-error` используется и вне экрана
   входа (окно смены пароля кабинета). */
:root {
  --login-card-bg: #121419;              /* фон карточки */
  --login-card-border: #2a2f38;          /* рамка карточки */
  --login-input-bg: #171a21;             /* фон поля */
  --login-input-border: #343b46;         /* рамка поля */
  --login-accent: #2f6fff;               /* кнопка, рамка поля в фокусе */
  --login-accent-hover: #3f7bff;         /* кнопка под курсором */
  --login-on-accent: #ffffff;            /* текст на кнопке */
  --login-invalid: #ff364f;              /* рамка поля с ошибкой (.field-invalid) */
  --login-error: #ff97a6;                /* текст ошибки */
  --login-notice: #6cbf2c;               /* текст успеха */
  --login-shadow: 0 18px 50px rgba(0,0,0,.45);
  /* Шрифт экрана входа — НЕ здесь: --login-font задаёт каждый styles.css рядом со своим
     @font-face (у инсталляций разные фирменные шрифты). */
}
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: var(--bg);
  font-family: var(--login-font);
  line-height: 1.45;
}
.login-form {
  width: 360px; max-width: 100%; background: var(--login-card-bg);
  border: 1px solid var(--login-card-border); border-radius: 16px; padding: 34px 30px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: var(--login-shadow);
}
.login-logo-img { display: block; margin: 0 auto 4px; border-radius: 11px; }
.login-title { margin: 0; text-align: center; font-size: 28px; font-weight: 800; line-height: 1.2; color: var(--text); }
.login-sub { margin: 0 0 8px; text-align: center; color: var(--muted); font-size: 14px; }
.login-form input {
  width: 100%; margin: 0; background: var(--login-input-bg);
  border: 1px solid var(--login-input-border); border-radius: 10px; padding: 11px 13px;
  font: inherit; font-size: 14px; color: var(--text); outline: none;
}
.login-form input::placeholder { color: var(--muted); }
.login-form input:focus { border-color: var(--login-accent); }
/* Поле, отклонённое сервером (applyFieldErrors) — селектор сильнее базового правила поля. */
.login-form input.field-invalid { border-color: var(--login-invalid); }
.login-submit {
  width: 100%; margin-top: 8px; padding: 12px; border: none; border-radius: 10px;
  background: var(--login-accent); color: var(--login-on-accent); font: inherit;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.login-submit:hover { background: var(--login-accent-hover); }
.login-submit:disabled { opacity: .6; cursor: default; }
/* Ошибка и успех («пароль установлен — войдите»): видимость задаёт ТОЛЬКО текст —
   пустой блок места не занимает. */
.login-error { color: var(--login-error); font-size: 13px; }
.login-notice { color: var(--login-notice); font-size: 13px; }
.login-error:empty, .login-notice:empty { display: none; }
/* --- конец общего блока входа --- */

/* ===== Компоненты в стиле витрины: «лист» с фильтрами, плотная data-table с растягиваемыми
   столбцами, модальные окна. Классы/геометрия зеркалят client/frontend. ===== */

/* Строка заголовка раздела: «Название N» + кнопка справа. `margin-bottom` — ОБЯЗАТЕЛЬН (не только
   отступ от фильтров ниже): на страницах без строки фильтров (напр. «Масштабные НС») это была
   единственная страховка от заголовка/кнопки, прилипающих вплотную к таблице — как в cabinet. */
.sheet-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 15px; }
.sheet-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sheet-heading { margin: 0; font-size: 27px; font-weight: 700; color: #c5c7d3; letter-spacing: .01em; display: flex; align-items: baseline; }
.sheet-heading .sheet-count { margin-left: 10px; color: #8b93ad; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
/* Ряд фильтров-«таблеток» — с отступом сверху (от заголовка) и снизу (до таблицы). */
.sheet-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 16px; }
.filter {
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 11px;
  padding: 10px 14px; color: var(--text); font-size: 14px; font-weight: 500; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.filter:hover { border-color: var(--muted-2); }
.filter:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,111,255,.18); }
select.filter { cursor: pointer; min-width: 160px; -webkit-appearance: none; appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23a4a8b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px; }
select.filter option { background: var(--surface-2); color: var(--text); }
.search-wrap { position: relative; flex: 0 0 auto; }
.search-wrap input.filter { padding-left: 38px; min-width: 240px; }
.search-wrap input.filter.filter-wide { min-width: 460px; }
.search-wrap::before {
  content: ""; position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; pointer-events: none;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23767c8c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.4 10.4 L14 14'/%3E%3C/svg%3E");
}
/* Глобальное `input,textarea,select{width:100%}` заставляло фильтры занимать всю строку и падать
   в столбик — в ряду фильтров ширина по контенту (остаются горизонтально). */
.sheet-filters .filter { width: auto; }
/* Кнопка «Сбросить фильтры» — приглушённая текстовая «таблетка», акцент на наведении. */
.filter-reset { font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  background: transparent; border: 1px solid var(--border-2); border-radius: 10px;
  padding: 9px 14px; color: var(--muted); transition: color .15s, border-color .15s; white-space: nowrap; }
.filter-reset:hover { color: var(--accent); border-color: var(--accent); }

/* --- Мультиселект (множественный фильтр с поиском, A.multiselect) — фильтры регион/отрасль.
   ТОТ ЖЕ компонент/классы/геометрия, что в cabinet/client (js/multiselect.js портирован как есть,
   под конвенцию A.el этого файла) — было расхождение: одиночный дропдаун без мультивыбора,
   слишком узкая панель (значения обрезались), к тому же не закрывался при открытии другого
   фильтра (см. exclusiveDropdownOpen в app.js). --- */
.ms { position: relative; display: inline-block; }
.ms-button {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  min-width: 160px; max-width: 240px; font: inherit; font-size: 14px; font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 11px;
  padding: 10px 14px; color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.ms.open .ms-button, .ms-button.has-sel { border-color: var(--accent); }
.ms.open .ms-button { box-shadow: 0 0 0 3px rgba(47,111,255,.18); }
.ms-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.ms-button.has-sel .ms-label { color: var(--accent-2); font-weight: 600; }
.ms-caret { color: var(--muted-2); font-size: 12px; }
/* Панель СУЩЕСТВЕННО шире кнопки (не min-width:100% узкой кнопки) — иначе длинные названия
   регионов/отраслей обрезаются эллипсисом настолько, что значение не разобрать (была жалоба). */
.ms-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 280px; max-width: 380px;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45); padding: 8px; overflow: hidden;
}
.ms-panel--right { left: auto; right: 0; }
.ms-search-wrap { margin-bottom: 6px; }
.ms-search {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 11px; color: var(--text);
}
.ms-search:focus { outline: none; border-color: var(--accent); }
.ms-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.ms-opt { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 8px 9px; border-radius: 8px; font-size: 14px; color: var(--text); }
.ms-opt:hover, .ms-opt:focus { background: var(--surface-2); outline: none; }
.ms-opt.sel { background: rgba(47,111,255,.12); }
.ms-opt-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-check {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff;
}
.ms-check.on { background: var(--accent); border-color: var(--accent); }
.ms-empty { padding: 10px; color: var(--muted); font-size: 13px; text-align: center; }
/* Внутри строки фильтров — плоская приглушённая «таблетка» (как на витрине/в кабинете), а не
   заметная плашка с собственной рамкой поверх и без того тонированного `.sheet-filters` фона. */
.sheet-filters .ms-button {
  min-width: 0; max-width: none; padding: 9px 16px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border-2); color: var(--muted);
  font-weight: 500; box-shadow: none;
}
.sheet-filters .ms-button:hover { color: var(--text); border-color: var(--muted-2); background: rgba(255,255,255,.06); }
.sheet-filters .ms.open .ms-button, .sheet-filters .ms-button.has-sel {
  color: var(--accent-2); border-color: var(--accent); background: rgba(47,111,255,.12);
}
.sheet-filters .ms-button.has-sel .ms-label { color: var(--accent-2); }
.sheet-filters .ms-caret { display: none; }

/* Анимация открытия/закрытия панели мультиселекта (A.dropdownAnimateOpen/Close). */
@keyframes dd-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes dd-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-6px) scale(.98); }
}
/* Панель фильтра в заголовке таблицы вынесена в body (position:fixed), иначе её обрезает
   прокрутка .table-box. z-index выше липкой шапки таблицы и ниже модального окна. */
.ms-panel--float { position: fixed; z-index: 1500; }
.ms-panel { transform-origin: top center; }
.ms-panel.dd-opening, .acct-menu.dd-opening { animation: dd-in var(--dd-anim) cubic-bezier(.4,0,.2,1); }
.ms-panel.dd-closing, .acct-menu.dd-closing { animation: dd-out var(--dd-anim) cubic-bezier(.4,0,.2,1) both; }
@media (prefers-reduced-motion: reduce) {
  .ms-panel.dd-opening, .ms-panel.dd-closing,
  .acct-menu.dd-opening, .acct-menu.dd-closing { animation-duration: .001s; }
}

/* Плотная тёмная таблица данных — БЕЗ рамки-«карточки» вокруг: лаконично встроена в тонированный
   фон страницы (`.content{background:var(--sheet-bg)}`), ТОЧНО как `.table-host`/`.grid` в
   cabinet/client (там ни одна таблица не сидит в отдельно окантованном/затенённом боксе — было
   расхождение дизайна: у admin таблица выглядела отдельной всплывающей карточкой). */
.table-box { overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th {
  text-align: left; padding: 10px 16px; color: var(--muted); font-weight: 700;
  border-bottom: 1px solid var(--border-2); position: sticky; top: 0; z-index: 1;
  background: var(--sheet-bg); white-space: nowrap; text-transform: none;
  font-size: 12px; letter-spacing: 0;
}
.data-table td { padding: 8px 16px; border-bottom: 1px solid #1d212a; white-space: nowrap; color: var(--text); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { cursor: pointer; transition: background .12s; }
.data-table tbody tr:hover { background: rgba(47,111,255,.10); box-shadow: inset 3px 0 0 var(--accent); }
.data-table .col-company { font-weight: 700; }
.data-table td.col-actions, .data-table th.col-actions { white-space: nowrap; }
.data-table td.mono, .data-table td .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.data-table td.muted { color: var(--muted); }
.data-table td.center, .data-table th.center { text-align: center; }
/* Длинные контакты и сведения — одна строка с многоточием, полный текст в подсказке. */
.data-table td.col-clip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
/* Фильтр — клик по заголовку столбца, а не отдельная кнопка над таблицей. */
.data-table th.th-filter { padding: 0; }
.data-table th.th-filter .ms { display: block; }
.data-table th.th-filter .ms-button {
  width: 100%; min-width: 0; max-width: none; justify-content: flex-start;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: 10px 16px; color: var(--muted); font-size: 12px; font-weight: 700; gap: 6px;
}
.data-table th.th-filter .ms-label { font-weight: 700; }
.data-table th.th-filter .ms-button:hover { color: var(--text); }
.data-table th.th-filter .ms.open .ms-button,
.data-table th.th-filter .ms-button.has-sel {
  color: var(--accent-2); background: transparent; border: 0; box-shadow: none;
}
.data-table th.th-filter .ms-button.has-sel .ms-label { color: var(--accent-2); }
.data-table th.th-filter.col-resizable .ms-button { padding-right: 8px; }
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--text); }
.data-table th.sorted { color: var(--accent-2); }
.data-table th .sort-arrow { margin-left: 4px; font-size: 10px; opacity: .55; }
.data-table th.sorted .sort-arrow,
.data-table .th-sort.is-sorted .sort-arrow { opacity: 1; }
.th-sort { background: transparent; border: 0; padding: 0 0 0 2px; margin: 0;
  color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; }
.th-filter-row { display: flex; align-items: center; min-width: 0; }
.th-filter-row .ms { flex: 1; min-width: 0; }
.th-filter-row .th-sort { flex-shrink: 0; padding-right: 10px; }
.data-table th.col-resizable .th-filter-row .th-sort { padding-right: 16px; }
.data-table th .sort-pri:empty { display: none; }
.data-table th .sort-pri { margin-left: 4px; display: inline-flex; align-items: center;
  justify-content: center; min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; }
.data-table tr.is-placeholder { cursor: default; }
.data-table tr.is-placeholder:hover { background: none; box-shadow: none; }
.kv .pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.company-full-name { margin: -6px 0 14px; }
/* Растягиваемые (перемещаемые) столбцы. `th` уже `position:sticky` → служит контекстом для
   абсолютной ручки-ресайзера (отдельный `position:relative` не нужен и сломал бы липкость). */
.data-table th.col-resizable { padding-right: 20px; }
.col-resizer { position: absolute; top: 0; right: 0; width: 9px; height: 100%;
  cursor: col-resize; user-select: none; touch-action: none; z-index: 3; }
.col-resizer::before { content: ""; position: absolute; top: 22%; bottom: 22%; right: 3px;
  width: 2px; border-radius: 2px; background: rgba(255,255,255,.14); transition: background .12s; }
.col-resizer:hover::before, .col-resizer.is-dragging::before { background: var(--accent); }
.data-table--resizable th, .data-table--resizable td { overflow: hidden; text-overflow: ellipsis; }
/* Компактная кнопка действия в строке таблицы. */
.data-table .btn-row { padding: 4px 10px; font-size: 12.5px; border-radius: 7px; }
.data-table .btn-row + .btn-row { margin-left: 6px; }
/* Пустое состояние/подгрузка. */
.sheet-empty { padding: 28px 18px; text-align: center; color: var(--muted); }

/* --- Модальные окна --- */
.modal-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(4,7,13,.62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal-card { width: 460px; max-width: 100%; max-height: 88vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 24px 20px; box-shadow: 0 24px 64px rgba(0,0,0,.55); }
.modal-card--wide { width: 640px; }
/* Форма масштабного НС (заголовок/описание + НЕСКОЛЬКО векторов-групп компаний, у клиента их
   бывают десятки) — 640px было тесно: чипы компаний и поиск давки жались в один узкий столбец,
   форма выглядела «нерабочей». Шире, чем `--wide`, но той же схемы модалки (без нового каркаса). */
.modal-card--xwide { width: 860px; }
.modal-title { margin: 0 0 14px; font-size: 19px; font-weight: 700; color: var(--text); }
.modal-text { margin: 0 0 6px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

header.bar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--panel);
}
header.bar h1 { font-size: 16px; margin: 0; }
header.bar .spacer { flex: 1; }
.tabs { display: flex; gap: 6px; }
.tab { padding: 6px 14px; border-radius: 6px; color: var(--muted); cursor: pointer; border: 1px solid transparent; }
.tab.active { color: var(--text); background: var(--panel2); border-color: var(--line); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 20px; }

.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
/* Соседние кнопки в ячейке таблицы (напр. «Изменить»/«Удалить» — companies.js/company_detail.js)
   сидят голыми siblings без своего wrapper'а — иначе прилипают друг к другу вплотную. Тот же
   зазор, что у `.row-actions`, одним правилом на все такие места разом. */
td button + button { margin-left: 8px; }
th { color: var(--muted); font-weight: 500; }
tr.row { cursor: pointer; }
tr.row:hover td { background: var(--panel2); }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); }
.badge.pending { color: var(--warn); border-color: var(--warn); }
.badge.approved { color: var(--ok); border-color: var(--ok); }
.badge.rejected { color: var(--bad); border-color: var(--bad); }
.badge.kind { color: var(--accent); border-color: var(--accent); }

.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.secret { background: var(--panel2); padding: 8px 10px; border-radius: 6px; word-break: break-all; }

/* Одноразовая ссылка (создание/сброс пароля) и токен загрузчика: целиком видны в боксе —
   переносятся по любому символу (`word-break: break-all` от `.secret`; в URL/токене нет
   пробелов), БЕЗ горизонтального скролла; кликабельны — копируются по клику (перенос в буфер
   не попадает). */
.copy-field { display: flex; flex-direction: column; gap: 5px; margin-top: 2px; min-width: 0; }
.secret--link {
  cursor: pointer;
  border: 1px solid var(--border-2); font-size: 13px; line-height: 1.5;
  transition: border-color .15s, background .15s;
}
.secret--link:hover, .secret--link:focus-visible { border-color: var(--accent); outline: none; }
.secret--link.is-copied { border-color: var(--ok); }
.copy-hint { font-size: 12px; color: var(--muted); }
.secret--link.is-copied + .copy-hint { color: var(--ok); }

/* Наглядная плашка выбранной компании в форме создания аккаунта: до выбора — приглушённая
   подсказка, после — выделенный «чип» с названием и ИНН. */
.picked-company { margin-top: 6px; font-size: 13px; color: var(--muted); }
.picked-company.is-set {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px; border-radius: 10px; color: var(--text);
  background: rgba(47,111,255,.10); border: 1px solid var(--accent);
}
.picked-company-name { font-size: 14px; font-weight: 700; }
.picked-company-inn { font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.item { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 10px; background: var(--panel2); }
.item h4 { margin: 0 0 6px; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 2px 12px; }
.kv .k { color: var(--muted); }
.evt { border-left: 2px solid var(--accent); padding-left: 10px; margin: 8px 0; }
.notice { padding: 10px 12px; border-radius: 6px; margin-bottom: 12px; }
.notice.err { background: rgba(248,81,73,.12); border: 1px solid var(--bad); color: #ffb4ae; }
.notice.ok { background: rgba(63,185,80,.12); border: 1px solid var(--ok); color: #9be8a8; }
.row-actions { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.back { margin-bottom: 12px; }

/* --- Каркас админ-консоли: СВОРАЧИВАЕМАЯ рейка со «жидким стеклом» — размеры/отступы/механика
   ПОРТИРОВАНЫ 1:1 из рейки кабинета/витрины (cabinet/frontend, client/frontend css
   `.sidebar`/`.app-shell`: те же 78px/272px, те же 46px-плитки иконок, те же gap/radius/font-size
   — сверено скриншотами обоих рядом). Список разделов у админки ДИНАМИЧЕСКИЙ (зависит от роли
   модератора), поэтому строится в JS (`renderShell`), а не статичным HTML, как у витрины — но
   классы/геометрия те же самые. «Свернуть» (`.nav-toggle`) позиционируется ТЕМ ЖЕ способом, что
   в кабинете — `margin-top:auto` (а не фиксированный отступ), поэтому оседает на то же место
   относительно списка разделов и подвала.
   Рейка ЗАФИКСИРОВАНА к вьюпорту (position:fixed, top/bottom:0 — высота ВСЕГДА ровно высота
   экрана): раньше рейка была обычным flex-элементом без ограничения высоты и при достаточном
   числе разделов уводила подвал (имя + «Выход») ниже видимой области — кнопка выхода становилась
   недостижима. У кабинета/витрины список разделов ФИКСИРОВАННЫЙ и короткий, переполнения не
   бывает — они полагаются только на `margin-top:auto`. Список разделов админки может расти
   (роли/новые разделы), поэтому здесь ДОПОЛНИТЕЛЬНО есть свой скролл на случай переполнения
   (`overflow-y:auto` на самой `.sidebar`, `overflow-x` отдельно — иначе конфликтовал бы с
   `overflow:hidden`, нужным для анимации сворачивания подписей) — подвал гарантированно
   ДОСТИЖИМ (докруткой) при любом числе разделов, даже если визуально не помещается сразу. */
.app-shell { --rail-w: 78px; }
.main { margin-left: var(--rail-w); min-height: 100vh; display: flex; flex-direction: column; }
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w); z-index: 1200;
  background: rgba(13,17,26,.34);
  -webkit-backdrop-filter: blur(13px) saturate(1.3);
  backdrop-filter: blur(13px) saturate(1.3);
  border-right: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; padding: 18px 8px;
  overflow-x: hidden; overflow-y: auto; white-space: nowrap;
  transition: width .24s cubic-bezier(.4,0,.2,1), box-shadow .24s;
}
.app-shell.nav-open .sidebar { width: 272px; box-shadow: 14px 0 40px rgba(0,0,0,.5); }
.nav-backdrop {
  position: fixed; inset: 0; background: rgba(4,7,13,.55); z-index: 1100;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.app-shell.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

.rail-brand { display: flex; align-items: center; gap: 11px; padding: 4px 8px 12px; font-weight: 800; font-size: 20px; }
.rail-logo { display: block; border-radius: 12px; flex: 0 0 auto; }
/* Бренд в ДВЕ строки («Cibo» / «Management»): «Management» не помещался в одну строку рядом с
   логотипом. max-width-анимация (сворачивание рейки) сохранена на контейнере. */
.brand-text { display: flex; flex-direction: column; line-height: 1.05; max-width: 0; opacity: 0; overflow: hidden; transition: max-width .24s, opacity .16s; }
.app-shell.nav-open .brand-text { max-width: 180px; opacity: 1; }
.brand-line { white-space: nowrap; }

.rail-nav { display: flex; flex-direction: column; gap: 8px; }
.nav-item {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px;
  padding: 6px 8px; border-radius: 14px; color: var(--muted); cursor: pointer;
  font-size: 15px; font-weight: 600; transition: background .15s, color .15s; position: relative;
}
/* Наведение на пункты рейки убрано намеренно (без hover-подсветки/сдвига). */
.nav-item.active { color: #fff; }
.app-shell.nav-open .nav-item.active { background: rgba(47,111,255,.10); }

.nav-ico {
  flex: 0 0 auto; width: 46px; height: 46px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 13px;
  background: var(--surface-2); border: 1px solid var(--border-2); color: var(--muted);
  transition: border-color .15s, color .15s, transform .15s, box-shadow .15s; position: relative;
}
.nav-ico svg { width: 24px; height: 24px; }
.nav-item.active .nav-ico {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--accent), #6c4bff);
  box-shadow: 0 5px 16px rgba(47,111,255,.45);
}

.nav-label { max-width: 0; opacity: 0; overflow: hidden; transition: max-width .24s, opacity .16s; }
.app-shell.nav-open .nav-label { max-width: 180px; opacity: 1; flex: 1 1 auto; }

.nav-toggle {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px;
  margin-top: auto; margin-bottom: 8px; padding: 6px 8px; border: none;
  background: transparent; cursor: pointer; color: var(--muted);
  font: inherit; font-size: 15px; font-weight: 600; text-align: left;
  opacity: 0; transition: opacity .2s, color .15s;
}
.sidebar:hover .nav-toggle, .nav-toggle:focus-visible { opacity: 1; outline: none; }
.nav-toggle:hover { color: var(--text); }
.nav-toggle-ico {
  flex: 0 0 auto; width: 46px; height: 46px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 13px;
  background: var(--surface-2); border: 1px solid var(--border-2);
  transition: border-color .15s, color .15s, background .15s;
}
/* Наведение на плитку иконки «Свернуть» убрано намеренно (без hover-подсветки иконок рейки). */
.nav-toggle-ico svg { width: 20px; height: 20px; transition: transform .26s cubic-bezier(.4,0,.2,1); }
.app-shell.nav-open .nav-toggle-ico svg { transform: rotate(180deg); }

.rail-foot {
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
/* --- Кнопка аккаунта внизу рейки (аватар-инициал + email/роль, открывает меню аккаунта) —
   тот же язык, что у .nav-item (46px-плитка слева, лейбл раскрывается вместе с рейкой), но
   плитка КРУГЛАЯ (аватар) с градиентом акцента. Порт из кабинета (cabinet styles.css). --- */
.acct-btn {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px; width: 100%;
  padding: 6px 8px; border: none; border-radius: 14px; background: transparent; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; text-align: left; color: var(--muted);
  transition: background .15s, color .15s;
}
.acct-btn:hover, .acct-btn[aria-expanded="true"] { background: rgba(255,255,255,.06); color: var(--text); }
.acct-avatar {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), #6c4bff); color: #fff;
  font-size: 17px; font-weight: 800; letter-spacing: .02em;
}
.acct-info { min-width: 0; max-width: 0; opacity: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 1px; transition: max-width .24s, opacity .16s; }
.app-shell.nav-open .acct-info { max-width: 176px; opacity: 1; flex: 1 1 auto; }
.acct-email { font-size: 13px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-role { font-size: 11.5px; color: var(--muted); }
.acct-caret { flex: 0 0 auto; max-width: 0; opacity: 0; overflow: hidden;
  color: var(--muted-2); font-size: 12px; transition: max-width .24s, opacity .16s; }
.app-shell.nav-open .acct-caret { max-width: 14px; opacity: 1; }

/* Меню аккаунта — портал в body, раскрывается ВВЕРХ от кнопки (transform-origin снизу). */
.acct-menu {
  position: fixed; z-index: 1300; min-width: 220px; max-width: 280px;
  background: var(--panel); border: 1px solid var(--border-2); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.5); padding: 8px; transform-origin: bottom left;
}
.acct-menu-head { padding: 8px 10px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.acct-menu-email { font-size: 13.5px; font-weight: 700; color: var(--text); word-break: break-all; }
.acct-menu-role { font-size: 12px; color: var(--muted); margin-top: 2px; }
.acct-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
  border: none; border-radius: 10px; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text); text-align: left;
}
.acct-menu-item:hover, .acct-menu-item:focus-visible { background: var(--surface-2); outline: none; }
.acct-menu-item--danger:hover { color: #ff6b6b; }
.acct-menu-ico { flex: 0 0 auto; width: 18px; height: 18px; display: inline-flex; color: var(--muted); }
.acct-menu-ico svg { width: 18px; height: 18px; }

/* Поля смены пароля — строго построчно (колонка), поля на всю ширину модалки. */
.pw-form { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 6px; }
.pw-form input { width: 100%; }

/* Единый тонированный фон страницы — ТОТ ЖЕ приём, что `.view-root--sheet`/`.view-root--tint` в
   cabinet/client: заголовок, фильтры и таблица читаются одним полотном, а не заголовком на голом
   фоне рейки над отдельной «карточкой»-таблицей (было расхождение дизайна с кабинетом). */
.content { flex: 1; min-width: 0; padding: 22px 26px; overflow-x: auto; background: var(--sheet-bg); }

.spacer { flex: 1; }
.fld { margin-bottom: 4px; }
.fld label { margin-top: 0; }
/* Подсветка поля с ошибкой валидации (сервер вернул 422 по конкретному полю формы). Не
   ограничена тегом input/select/textarea — составные контролы (например, регион компании)
   подсвечиваются по своей обёртке-div тем же классом. */
.field-invalid { border: 1px solid var(--bad); border-radius: 6px; }
.field-error-msg { color: #ffb4ae; font-size: 12px; margin: 2px 0 6px; }
.inline { display: flex; gap: 8px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.inline > input, .inline > select { width: auto; flex: 1 1 160px; }
.inline-head { display: flex; gap: 10px; align-items: center; }
.inline-head h4 { margin: 0; }
button.sm { padding: 4px 10px; font-size: 12px; }
.pager { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.chk { display: inline-flex; align-items: center; gap: 4px; color: var(--text); margin: 6px 12px 6px 0;
  padding: 2px 4px; border-radius: 6px; transition: background .12s ease; }
.chk input { width: auto; }
.reqs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; margin-top: 6px; }
/* Номер пункта методики (например «3.2») перед чекбоксом — см. company_detail.js tabParams. */
.kzi-req-num { flex: 0 0 auto; font-size: 10px; font-weight: 700; color: var(--muted-2);
  font-variant-numeric: tabular-nums; }
/* Пункт с полным описанием в методике — курсор-подсказка + мягкая подсветка строки по
   наведению (сам текст подсказки — в .kzi-tip-pop, портал в body, см. attachKziTip). */
.chk.has-tip { cursor: help; }
.chk.has-tip:hover, .chk.has-tip:focus-within { background: var(--panel2); }
/* Всплывающая подсказка с полным текстом пункта методики — ПОРТАЛИТСЯ в body и позиционируется
   fixed из JS (attachKziTip): всегда в foreground, не обрезается overflow'ом карточки/панели. */
.kzi-tip-pop { position: fixed; z-index: 1400; box-sizing: border-box;
  padding: 9px 12px; border-radius: 9px; background: rgba(16, 20, 30, .98);
  border: 1px solid var(--border-2); box-shadow: 0 16px 38px rgba(0, 0, 0, .6);
  font-size: 11.5px; line-height: 1.45; color: var(--text);
  opacity: 0; transform: translateY(-3px); pointer-events: none;
  transition: opacity .14s ease, transform .14s ease; }
.kzi-tip-pop.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .kzi-tip-pop { transition: opacity .14s ease; }
}

.badge.sev-low { color: var(--muted); border-color: var(--line); }
.badge.sev-medium { color: var(--accent); border-color: var(--accent); }
.badge.sev-high { color: var(--warn); border-color: var(--warn); }
.badge.sev-critical { color: var(--bad); border-color: var(--bad); }

.picker { position: relative; margin: 6px 0; }
.picker-res { border: 1px solid var(--line); border-radius: 6px; margin-top: 4px; max-height: 220px; overflow-y: auto; }
.picker-res:empty { display: none; }
.picker-item { padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--line); }
.picker-item:hover { background: var(--panel2); }

/* Комбобокс региона (поле с поиском + плавающий выпадающий список) — тот же вид/приём, что
   форма подрядчика кабинета (cabinet/frontend/js/app.js makeRegionField): `.combo-menu` —
   position:fixed, поэтому не обрезается overflow:auto модалки; z-index выше .modal-overlay (2000). */
.combo { position: relative; }
.combo-menu {
  position: fixed; z-index: 2100;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  max-height: 220px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.combo-opt { padding: 7px 10px; cursor: pointer; font-size: 13px; color: var(--text);
  border-bottom: 1px solid var(--line); }
.combo-opt:last-child { border-bottom: none; }
.combo-opt:hover { background: var(--surface-3); }
.combo-opt.is-sel { color: var(--accent); font-weight: 600; }
.combo-empty { padding: 7px 10px; font-size: 12px; color: var(--muted-2); }

/* --- Кастомный <select> (js/ui.js selectField) — вместо системного native, чей раскрытый список
   рисует ОС и не поддаётся стилизации. Кнопка + плавающее меню (portal, position:fixed). --- */
/* Ширина по контенту (как у native <select>): в инлайн-рядах не растягивает соседей, в модальной
   форме занимает столько, сколько нужно ярлыку. min-width — чтобы очень короткие значения не
   схлопывались; max-width — не вылезать за форму. */
.selc { position: relative; display: inline-block; width: auto; min-width: 110px; max-width: 100%; vertical-align: middle; }
.selc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 8px 10px; text-align: left; cursor: pointer;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; font-size: 13px;
}
.selc-btn:hover { border-color: var(--line-2, var(--accent-2)); }
.selc-open .selc-btn { border-color: var(--accent); }
.selc-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selc-label.selc-ph { color: var(--muted-2); }
.selc-caret { color: var(--muted); font-size: 11px; transition: transform .14s ease; }
.selc-open .selc-caret { transform: rotate(180deg); }
.selc-menu {
  position: fixed; z-index: 2100; box-sizing: border-box;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  max-height: 260px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  /* Плавное появление/скрытие — тумблер класса .dd-in (открытие) в selectField. */
  opacity: 0; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease;
}
.selc-menu.dd-in { opacity: 1; transform: none; }
.selc-opt {
  padding: 7px 10px; cursor: pointer; font-size: 13px; color: var(--text);
  border-bottom: 1px solid var(--line);
}
.selc-opt:last-child { border-bottom: none; }
.selc-opt:hover { background: var(--surface-3); }
.selc-opt.is-sel { color: var(--accent); font-weight: 600; }

/* --- Кастомная подсказка по наведению (js/ui.js attachTip) — вместо системного title. --- */
.ui-tip {
  position: fixed; z-index: 2300; display: none; pointer-events: none;
  padding: 6px 9px; border-radius: 7px; font-size: 12px; line-height: 1.4;
  background: var(--surface-3, #23262e); color: var(--text);
  border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  opacity: 0; transform: translateY(2px); transition: opacity .12s ease, transform .12s ease;
}
.ui-tip.ui-tip-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .selc-menu, .selc-caret, .ui-tip { transition: none; }
}

/* Список с потенциально большим числом строк (напр. «Мои компании» — всё замыкание клиента,
   до сотен записей) — своя ограниченная высота и скролл, а не бесконечно растянутая страница.
   Высота — до низа вьюпорта (100vh) за вычетом всего, что стоит НАД списком на этой странице:
   отступы `.content` сверху/снизу (22px+22px) + шапка `.toolbar` (~50px) + строка поиска
   `.search-bar` (~62px) — если открыта форма в `msg` между поиском и списком, страница
   дополнительно скроллится целиком (список при этом сохраняет свою прокрутку). */
.table-scroll { max-height: calc(100vh - 156px); overflow-y: auto; }

/* Строка поиска (списки с большим числом строк — «Мои компании» и т.п.) — просторнее тесного
   `.fld` (тот рассчитан на подпись поля формы) и с иконкой-лупой; заметный отступ снизу отделяет
   её от того, что откроется под ней (форма добавления/связей/доступа в кабинет). */
.search-bar { margin: 4px 0 20px; max-width: 380px; }
.search-bar input[type="search"] {
  padding: 9px 14px 9px 36px;
  background-repeat: no-repeat; background-position: 12px center; background-size: 15px 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='5' stroke='%238a99a8' stroke-width='1.5'/%3E%3Cpath d='M11 11L14.5 14.5' stroke='%238a99a8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.search-bar input[type="search"]:focus {
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='5' stroke='%234c9be8' stroke-width='1.5'/%3E%3Cpath d='M11 11L14.5 14.5' stroke='%234c9be8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px 6px 3px 12px; }
.chip-x { border: none; background: transparent; color: var(--muted); padding: 0 4px; }
.vector { border: 1px dashed var(--line); border-radius: 8px; padding: 10px; }

.sub { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--line); }
.ce { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.crit { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }

/* Группировка масштабных событий по клиенту (свёртываемые секции). */
.grp { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
.grp-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--panel2); cursor: pointer; font-weight: 600; }
.grp-head:hover { background: var(--line); }
.grp-name { flex: 1; }
.caret { color: var(--muted); width: 14px; }
.grp-count { color: var(--muted); font-weight: 500; border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; font-size: 12px; }
.grp-body { padding: 12px 14px; }
.grp-body .item:last-child { margin-bottom: 0; }
/* Панель фильтра (например по клиенту): select ограниченной ширины. */
.filterbar select { width: auto; min-width: 260px; max-width: 520px; }

/* --- Раздел «Заявки» (обработка заявок из кабинетов) --- */
.sm { font-size: 12px; }
/* Сегментированный переключатель фильтра статуса. */
.seg { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 4px 0 14px; }
.seg-btn { background: transparent; border: none; border-radius: 0; color: var(--muted); padding: 7px 16px; border-right: 1px solid var(--line); }
.seg-btn:last-child { border-right: none; }
.seg-btn.active { background: var(--panel2); color: var(--text); }
.sub-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; background: var(--panel); }
.sub-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.sub-kind { font-weight: 600; }
.sub-summary { margin: 2px 0 6px; }
.sub-meta { display: flex; flex-wrap: wrap; margin-bottom: 8px; }
.sub-kv { margin: 8px 0; }
.sub-note { margin-top: 8px; color: var(--text); }
.sub-actions { display: flex; gap: 8px; margin-top: 10px; }
.sub-reject { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
/* Статусные чипы заявки (текст без кнопки — симметричные отступы). */
.sub-head .chip { padding: 3px 12px; font-size: 12px; }
.chip.st-pending { color: var(--warn); border-color: var(--warn); }
.chip.st-ok { color: var(--ok); border-color: var(--ok); }
.chip.st-rej { color: var(--bad); border-color: var(--bad); }

/* Вложения заявок: ссылки на скачивание подтверждающих PDF-документов. */
.sub-atts { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sub-att {
  display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; padding: 2px 8px; border: 1px solid var(--border, #33405a);
  border-radius: 6px; font-size: 12px; text-decoration: none; color: var(--text, #e8ebf2);
}
.sub-att:hover { border-color: var(--accent, #4c8bf5); }

/* Наглядное описание заявки в очереди «Заявки». */
.sub-desc { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; }
.sub-desc-line { font-size: 13px; color: var(--text, #e8ebf2); }
.sub-desc-line.is-add { color: #57b894; }
.sub-desc-line.is-del { color: #ff8a8a; }

/* Карточка события внутри заявки event_change — нативный <details>, свёрнута по умолчанию
   (описание/критерии видны только по клику, иначе несколько событий с критериями превращают
   очередь заявок в нечитаемую простыню текста). */
.sub-desc-event { font-size: 13px; color: var(--text, #e8ebf2); }
.sub-desc-event > summary { cursor: pointer; }
/* Три явно различимых вида изменения — тот же цветовой язык, что у .sub-desc-line.is-add/is-del
   (добавление/удаление активов): зелёный = добавление, красный = удаление; правка — акцентный
   синий (ни то ни другое, но тоже требует внимания модератора). */
.sub-desc-event.is-add > summary { color: #57b894; }
.sub-desc-event.is-edit > summary { color: var(--accent, #4c8bf5); }
.sub-desc-event.is-remove > summary { color: #ff8a8a; }
.sub-desc-event-body {
  margin: 4px 0 2px 14px; padding-left: 8px; border-left: 2px solid var(--line);
}
.sub-desc-crit-list { margin: 4px 0 0; padding-left: 18px; font-size: 12px; color: var(--muted); }

/* --- Пакетная загрузка компаний из YAML (раздел «Импорт пакетом», company_import.js) --- */
.imp-textarea {
  width: 100%; min-height: 340px; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.55; tab-size: 2;
}
.imp-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.imp-toolbar .spacer { flex: 1 1 auto; }
.imp-summary { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0 10px; font-size: 14px; align-items: baseline; }
.imp-summary span { color: var(--muted); }
.imp-summary b { color: var(--text); font-variant-numeric: tabular-nums; }
.imp-summary .imp-s-err b { color: var(--bad); }
.imp-back { display: inline-block; margin-bottom: 6px; color: var(--accent-2); cursor: pointer; }
/* Красная подсветка невалидной строки — ошибки НЕ прячем, они видны сразу (см. память проекта). */
.imp-report .data-table tr.imp-row-error > td { background: rgba(255,54,79,.10); }
.imp-badge { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 12px; white-space: nowrap; border: 1px solid transparent; }
.imp-badge--create { color: var(--ok); border-color: var(--ok); }
.imp-badge--update { color: var(--accent-2); border-color: var(--accent-2); }
.imp-badge--error  { color: var(--bad); border-color: var(--bad); }
.imp-ctr { display: inline-block; margin: 1px 8px 1px 0; font-size: 12px; white-space: nowrap; }
.imp-ctr--ok { color: var(--accent-2); }
.imp-ctr--exists { color: var(--muted); }
.imp-ctr--error { color: var(--bad); }
.imp-err-list { margin: 0; padding-left: 16px; color: #ffb4ae; font-size: 12px; }
.imp-hint { color: var(--muted); font-size: 13px; margin: 6px 0; }
/* --- Импорт утечки (раздел «Импорт утечки», leak_import.js) --- */
.imp-fields { display: flex; gap: 12px; flex-wrap: wrap; margin: 10px 0; align-items: flex-start; }
.imp-field { display: flex; flex-direction: column; gap: 4px; }
.imp-field--cb { flex-direction: row; align-items: center; gap: 6px; }
.imp-field--cb .imp-field-label { white-space: nowrap; }  /* подпись флага — в одну строку */
.imp-field-stack { display: flex; flex-direction: column; gap: 6px; }
.imp-field-label { color: var(--muted); font-size: 12px; }
.imp-subhead { margin: 16px 0 6px; font-size: 14px; color: var(--text); }
/* Нестрогие (по поддомену/подсети) совпадения — приглушены, менее точны, чем прямое совпадение. */
.imp-sub { color: var(--muted); }
/* Выпадающая таблица совпадений компании: актив (в базе) — актив (в утечке) — строки (спойлер). */
.imp-loose > summary { cursor: pointer; list-style: none; }
.imp-loose > summary::-webkit-details-marker { display: none; }
.imp-loose > summary::before { content: "▸ "; color: var(--muted); }
.imp-loose[open] > summary::before { content: "▾ "; }
.imp-groups { margin: 6px 0 0; }
.imp-groups th, .imp-groups td { font-size: 12px; padding: 4px 8px; vertical-align: top; }
.imp-kind { color: var(--muted-2); font-size: 11px; }
/* Спойлер со строками данных одной группы (внутри таблицы совпадений). */
.imp-lines > summary { cursor: pointer; list-style: none; color: var(--accent-2); white-space: nowrap; }
.imp-lines > summary::-webkit-details-marker { display: none; }
.imp-lines > summary::before { content: "▸ "; }
.imp-lines[open] > summary::before { content: "▾ "; }
.imp-line { font-size: 12px; margin-top: 3px; word-break: break-all; }
.imp-reveal { margin: 8px 0; }
/* Предупреждение о дублях источника + чекбокс явного подтверждения повторной загрузки. */
.notice.warn { background: rgba(224,168,0,.12); border: 1px solid #e0a800; color: #ffd777; }
.imp-dup-confirm { display: flex; align-items: center; gap: 8px; margin-top: 8px; cursor: pointer; }
.imp-badge--dup { color: #e0a800; border-color: #e0a800; }
.imp-report .data-table tr.imp-row-sub > td { background: rgba(120, 150, 190, .07); }
/* Столбец «Текст находки» в отчёте: заголовок будущей находки + пометка правки + кнопка. */
.imp-textcell { display: flex; align-items: center; gap: 8px; }
.imp-title { color: var(--muted); font-size: 12px; max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-badge--edited { color: var(--accent-2); border-color: var(--accent-2); }
/* Форма правки текста находки (в модальном окне). */
.imp-field--wide { width: 100%; }
.imp-field--wide input { width: 100%; }
.imp-desc-edit { width: 100%; min-height: 260px; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; line-height: 1.5; }
.imp-edit-err { color: var(--bad); font-size: 12.5px; min-height: 16px; margin-top: 6px; }
/* Справка по форматам строк (details/summary). */
.imp-formats { margin: 8px 0; color: var(--muted); font-size: 12.5px; }
.imp-formats summary { cursor: pointer; color: var(--accent-2); }
.imp-formats-list { margin: 6px 0 0; padding-left: 18px; }
.imp-formats-list li { margin: 2px 0; }

/* --- Раздел «Методики» (js/methodologies.js): ПРОСМОТР структуры методики Кзи --- */
/* Показатели — в ОДНУ колонку: в строке кроме названия есть номер, вес и флаги авто-сброса,
   в половину ширины это разъезжается на несколько ярусов. */
.meth-reqs { grid-template-columns: 1fr; }
/* Показатель — две строки: короткая (номер, вес, название, флаги) и полная формулировка. */
.meth-req { padding: 6px 14px; border-top: 1px solid var(--line); }
/* Короткая строка показателя: при нехватке ширины переносится, а не расползается прокруткой. */
.req-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Полная формулировка из поставки: приглушена и с отступом под номер — она пояснение к
   названию, а не отдельный пункт. */
.meth-req-desc { color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: 3px;
  padding-left: 30px; }
/* Группа — свёртываемая секция на нативном <details>; штатный треугольник браузера убран,
   его роль играет каретка в заголовке (та же, что у групп масштабных событий). */
.meth-grp { margin-bottom: 10px; }
.meth-grp > summary { list-style: none; }
.meth-grp > summary::-webkit-details-marker { display: none; }
.meth-grp .caret::before { content: "▸"; }
.meth-grp[open] .caret::before { content: "▾"; }
.meth-grp .grp-body { padding: 0; }
/* Подсветка несведённой суммы весов: при ней Кзи при полном соответствии не равен 1. */
.err-text { color: var(--danger, #ff5469); }