/* ═══════════════════════════════════════════════
   REALTRAC PROTOTYPE — DIRECTORY
   Справочники «Носители» и «Пользователи»: заголовок, дерево оргструктуры слева,
   таблица справа (фильтры, выбор строк, поля таблицы, страницы). Скругления — 0.
   Здесь же общие части страниц-справочников, которыми пользуются и другие разделы: хлебные крошки (.crumbs),
   заголовок (.dir-head), вкладки (.seg), таблица (.dt — datatable.js), дерево (.org-* — orgtree.js),
   страница во всю ширину (.page-wide), а в конце — стили разделов «События» (.ev-*) и «Настройки сервера» (.srv-*).
═══════════════════════════════════════════════ */

/* ── Заголовок страницы ──
   Хлебные крошки → заголовок акцидентным шрифтом и подзаголовок слева, кнопки действий справа (переносятся на узком) */
.crumbs { display: flex; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.crumbs a { color: var(--color-primary); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.dir-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); }
.dir-title { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); letter-spacing: .02em; line-height: 1.05; }
.dir-sub { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); }
.dir-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Вкладки «Все / Люди / Техника» (и «Все / Опасные / …» в событиях): сегментный переключатель с счётчиками;
   активная — заливка акцентом, счётчик на ней — полупрозрачный белый */
.seg { display: inline-flex; border: 1px solid var(--color-border); background: var(--color-surface); margin-bottom: var(--space-4); }
.seg-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); }
.seg-btn + .seg-btn { border-left: 1px solid var(--color-border); }
.seg-btn:hover { background: var(--color-primary-highlight); color: var(--color-primary); }
.seg-btn.active { background: var(--color-primary); color: #fff; }
.seg-count { min-width: 22px; padding: 0 var(--space-1); font-size: var(--text-xs); font-weight: 700; line-height: 20px; text-align: center; background: var(--color-surface-offset); color: var(--color-text-muted); }
.seg-btn.active .seg-count { background: rgba(255,255,255,.2); color: #fff; }

/* ── Раскладка: дерево + таблица ── фиксированная левая колонка, таблица занимает остальное (minmax 0 — не распирает) */
.dir-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-4); align-items: start; }

/* ── Дерево оргструктуры (orgtree.js) ──
   Карточка липкая при прокрутке; список ограничен высотой окна. Строка узла — кнопка во всю ширину,
   отступ вложенности задаёт JS через переменную --depth (18 px на уровень); выбранная — акцентная рамка слева */
.org-card { padding: var(--space-4); position: sticky; top: var(--space-4); }
.org-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.org-title { font-size: var(--text-base); font-weight: 600; }
.org-search { margin-bottom: var(--space-2); }
.org-links { display: flex; gap: var(--space-4); margin-bottom: var(--space-2); }
/* Кнопка-ссылка (текст акцентом, без рамки) — «Развернуть всё», «Таблица», «Сбросить» и т. п. */
.link-btn { padding: 0; font-size: var(--text-sm); color: var(--color-primary); }
.link-btn:hover { text-decoration: underline; }
.org-list { list-style: none; max-height: calc(100dvh - 300px); overflow-y: auto; }
.org-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-1) + var(--depth, 0) * 18px);
  font-size: var(--text-sm);
  text-align: left;
  border-left: 3px solid transparent;
}
.org-row:hover { background: var(--color-primary-highlight); }
.org-row.is-selected { background: var(--color-primary-highlight); color: var(--color-primary); font-weight: 600; border-left-color: var(--color-primary); }
.org-row > svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--color-text-muted); }
.org-row.is-selected > svg { color: var(--color-primary); }
.org-row.is-special { font-weight: 500; }
/* Стрелка раскрытия: поворачивается на 90° у раскрытого узла; у листьев место занято, но невидимо — текст ровный */
.org-toggle { display: flex; width: 16px; flex-shrink: 0; color: var(--color-text-faint); }
.org-toggle svg { width: 14px; height: 14px; transition: transform var(--transition); }
.org-toggle.is-open svg { transform: rotate(90deg); }
.org-toggle.is-leaf { visibility: hidden; }
.org-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-count { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ── Правая часть ──
   Шапка выбранного узла (название, путь), кнопки действий, строка «N записей · включая вложенные», фильтры, таблица */
.dir-main { padding: var(--space-5); }
.dir-main-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.dir-node-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); font-weight: 600; }
.dir-node-title svg { width: 20px; height: 20px; color: var(--color-text-muted); }
.dir-node-path { font-size: var(--text-sm); color: var(--color-text-muted); min-height: 1.4em; }
.dir-main-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.icon-btn-boxed { border: 1px solid var(--color-border); background: var(--color-surface); }
.dir-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-3) 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
/* Флажки — системные, перекрашены в акцент (accent-color), размер 16 px везде, включая таблицу и панель колонок */
.check { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); cursor: pointer; }
.check input, .dt input[type="checkbox"], .cols-item input { width: 16px; height: 16px; accent-color: var(--color-primary); }

/* Строка фильтров: поиск растягивается, выпадающие списки и «Сбросить» — рядом; на узком экране переносятся */
.dir-filters { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.dir-filters .search-wrap { flex: 1 1 260px; }
/* Выпадающий список в стиле прототипа: системная стрелка убрана (appearance: none), своя — SVG в фоне справа;
   в тёмной теме color-scheme: dark — чтобы раскрытый список браузера тоже был тёмным */
.select {
  min-width: 170px;
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6070' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--color-border);
  border-radius: 0;
  appearance: none;
  cursor: pointer;
}
.select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-highlight); }
[data-theme="dark"] .select { color-scheme: dark; }

/* ── Панель выбранных строк (datatable.js, selectable) ── появляется над таблицей, когда отмечены флажки */
.bulk-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); background: var(--color-primary-highlight); }
.bulk-count { font-weight: 600; font-size: var(--text-sm); margin-right: var(--space-2); }
.bulk-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); font-size: var(--text-sm); font-weight: 500; color: var(--color-primary); }
.bulk-btn:hover { background: var(--color-surface); }
.bulk-btn svg { width: 16px; height: 16px; }

/* ── Таблица (datatable.js) ──
   Горизонтальная прокрутка в обёртке; шапка на подложке, сортируемый заголовок — кнопка со стрелкой
   (активная сортировка — акцентом, aria-sort ставит JS); выбранная строка — подсветка акцентом */
.dt-scroll { overflow-x: auto; }
.dt { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.dt th { padding: var(--space-3) var(--space-2); text-align: left; font-weight: 600; color: var(--color-text); background: var(--color-surface-2); border-bottom: 1px solid var(--color-divider); white-space: nowrap; }
.dt td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); vertical-align: middle; }
.dt tbody tr:hover { background: var(--color-surface-2); }
.dt tbody tr.is-picked { background: var(--color-primary-highlight); }
.dt-check { width: 40px; }
.dt-menu { width: 48px; text-align: right; }
.dt-sort { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; }
.dt-sort-icon { width: 13px; height: 13px; color: var(--color-text-faint); }
th[aria-sort="ascending"] .dt-sort-icon, th[aria-sort="descending"] .dt-sort-icon { color: var(--color-primary); }
.dt-empty { padding: var(--space-10) var(--space-4) !important; text-align: center; color: var(--color-text-muted); }

/* Ячейки справочников: человек/техника с аватаром-значком (техника — тёмно-синий), двухстрочная ячейка,
   моноширинный идентификатор с кнопкой копирования, статусные «пилюли» */
.cell-person { display: flex; align-items: center; gap: var(--space-3); }
.avatar { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: #fff; font-size: var(--text-xs); font-weight: 700; }
.avatar svg { width: 18px; height: 18px; }
.avatar.is-vehicle { background: #1A3A5C; }
[data-theme="dark"] .avatar.is-vehicle { background: #2A4A6C; }
.cell-two { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.cell-strong { font-weight: 600; }
.cell-muted { font-size: var(--text-xs); color: var(--color-text-muted); }
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .92em; }
.cell-ident { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: var(--space-2); }
.cell-ident-label { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-text-muted); }
.copy-btn { display: flex; color: var(--color-primary); padding: 2px; }
.copy-btn:hover { background: var(--color-primary-highlight); }
.copy-btn svg { width: 15px; height: 15px; }

.pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 2px var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); background: var(--color-surface-offset); white-space: nowrap; }
.pill.is-ok { color: var(--color-success); background: var(--color-success-bg); }
.pill.is-warn { color: var(--color-warning); background: var(--color-warning-bg); }

/* Низ таблицы: подпись «n–m из N» слева, кнопки страниц справа (квадратные 36 px, активная — заливка акцентом) */
.dt-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.dt-pages { display: flex; align-items: center; gap: var(--space-1); }
.page-btn { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: var(--text-sm); }
.page-btn svg { width: 16px; height: 16px; }
.page-btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.page-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }
.page-gap { padding: 0 var(--space-1); }

/* «Поля таблицы» — всплывающая панель у шестерёнки (datatable.openColumns): живёт в body, позиционируется JS;
   locked-колонки показаны бледно с замком */
.cols-pop { position: absolute; z-index: 1300; width: 260px; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); }
.cols-title { font-weight: 600; margin-bottom: var(--space-2); }
.cols-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--text-sm); cursor: pointer; }
.cols-item.is-locked { color: var(--color-text-faint); cursor: default; }
.cols-item svg { width: 14px; height: 14px; margin-left: auto; color: var(--color-text-faint); }
.cols-pop .link-btn { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-divider); width: 100%; text-align: left; }
.cols-note { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }

/* Сообщение об ошибке загрузки (например, 403 от Keycloak в «Пользователях») — с подсказкой, что проверить */
.dir-error { display: flex; gap: var(--space-3); padding: var(--space-5); background: var(--color-error-bg); color: var(--color-text); font-size: var(--text-sm); }
.dir-error svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-error); }

/* ── Адаптив ── до 1100 px дерево над таблицей (не липкое, ниже), до 900 px — плотнее поля; от 1600 px дерево шире */
@media (max-width: 1100px) {
  .dir-grid { grid-template-columns: 1fr; }
  .org-card { position: static; }
  .org-list { max-height: 280px; }
}
@media (max-width: 900px) {
  .dir-main { padding: var(--space-4); }
  .select { flex: 1 1 140px; min-width: 0; }
}
/* Плотнее на средних экранах: идентификатор и заголовки — компактно */
.dt th:first-child, .dt td:first-child { padding-left: var(--space-3); }
.dt .avatar { width: 32px; height: 32px; }
.cell-person { gap: var(--space-2); }
.dt-menu .icon-btn { width: 32px; height: 32px; }

/* Страницы во всю ширину окна (справочники, события, панель, настройки, стартовый экран): без ограничения max-width */
.page.page-wide { max-width: none; padding: var(--space-6); }
@media (max-width: 900px) { .page.page-wide { padding: var(--space-4); } }

/* Подсказка об ошибке доступа */
.dir-error > div { display: flex; flex-direction: column; gap: var(--space-2); }
.dir-error code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .92em; padding: 0 3px; background: var(--color-surface); }
@media (min-width: 1600px) { .dir-grid { grid-template-columns: 340px minmax(0, 1fr); } }

/* ── СОБЫТИЯ (views/events.js) ── уровень — значок, цвет и подпись вместе.
   Вкладки уровней со значками в цвете уровня, строка фильтров (поиск ограничен по ширине, справа — подпись
   и шестерёнка), в таблице: уровень, время табличными цифрами, источник-ссылка на карту, «Принято» / «не принято» */
.ev-main { padding: var(--space-4) var(--space-5); }
.dir-tabs .seg-btn svg { width: 15px; height: 15px; }
.ev-tab-DANGER:not(.active) svg { color: var(--rt-red); }
.ev-tab-WARNING:not(.active) svg { color: var(--zone-notice); }
.ev-tab-NOTICE:not(.active) svg { color: var(--color-primary); }
.ev-filters .search-wrap { flex: 1 1 280px; max-width: 420px; }
.ev-spacer { flex: 1; }
.ev-shown { font-size: var(--text-xs); color: var(--color-text-muted); }
.ev-level { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 500; white-space: nowrap; }
/* Время и номера — основным шрифтом, цифры одинаковой ширины (столбец ровный, шрифт как у текста) */
.ev-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-level svg { width: 16px; height: 16px; }
.ev-level.is-DANGER { color: var(--color-error); }
.ev-level.is-DANGER svg { color: var(--rt-red); }
.ev-level.is-WARNING svg { color: var(--zone-notice); }
.ev-level.is-NOTICE { color: var(--color-text-muted); }
.ev-level.is-NOTICE svg { color: var(--color-primary); }
.ev-text { white-space: normal; }
.ev-source { color: var(--color-text); text-decoration: none; font-weight: 500; }
.ev-source:hover { color: var(--color-primary); text-decoration: underline; }
.ev-acc { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-1); font-size: var(--text-xs); white-space: nowrap; }
.ev-acc svg { width: 14px; height: 14px; color: var(--color-success); }
.ev-acc span { width: 100%; color: var(--color-text-muted); }
.ev-muted { font-size: var(--text-xs); color: var(--color-text-muted); }
.ev-actions { display: inline-flex; gap: var(--space-1); }
.ev-actions .icon-btn { width: 30px; height: 30px; }
.ev-pending { font-size: var(--text-xs); font-weight: 600; color: var(--color-error); }

/* ── НАСТРОЙКИ СЕРВЕРА (views/server.js) — группы слева, параметры карточками строк ──
   Плашка «иллюстрация» сверху; слева липкий список групп (точка — в группе есть правки, счётчик — параметров);
   строка параметра — grid «текст | поле», изменённая — оранжевая рамка слева и подкраска; поля: текст/число,
   переключатель (.srv-switch с бегунком), JSON в textarea; справа кнопка сброса к значению по умолчанию */
.srv-note { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-5); margin-bottom: var(--space-4); font-size: var(--text-sm); background: var(--color-primary-highlight); border-left: 3px solid var(--color-primary); }
.srv-note svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-primary); margin-top: 1px; }
.srv-save-count { font-variant-numeric: tabular-nums; }
.srv-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.srv-nav { position: sticky; top: var(--space-4); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.srv-only { font-size: var(--text-sm); }
.srv-groups { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--space-4)); border-top: 1px solid var(--color-divider); }
.srv-group { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); text-align: left; font-size: var(--text-sm); font-weight: 500; color: var(--color-text); background: none; border: 0; border-left: 3px solid transparent; cursor: pointer; }
.srv-group span:first-child { flex: 1; }
.srv-group:hover { background: var(--color-primary-highlight); }
.srv-group.active { border-left-color: var(--color-primary); background: var(--color-primary-highlight); color: var(--color-primary); }
.srv-group:disabled { opacity: .45; cursor: default; }
.srv-dot { width: 8px; height: 8px; background: var(--zone-notice); }
.srv-main { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.srv-empty { padding: var(--space-6); color: var(--color-text-muted); }
.srv-card-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-divider); }
.srv-card-head h2 { font-size: var(--text-base); font-weight: 600; }
.srv-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: var(--space-5); padding: var(--space-4) var(--space-5); border-left: 3px solid transparent; }
.srv-row + .srv-row { border-top: 1px solid var(--color-divider); }
.srv-row.is-edited { border-left-color: var(--zone-notice); background: color-mix(in srgb, var(--zone-notice) 7%, transparent); }
.srv-text h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.srv-text p { margin-top: var(--space-1); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); }
.srv-meta { display: block; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-faint); }
.srv-meta b { font-weight: 600; color: var(--color-text-muted); }
.srv-meta code { font-size: var(--text-xs); }
.srv-tag { padding: 0 6px; font-size: var(--text-xs); font-weight: 600; color: var(--color-primary); background: var(--color-primary-highlight); }
.srv-tag.is-edit { color: #5C3D00; background: #FFF1CC; }
[data-theme="dark"] .srv-tag.is-edit { color: #FFE7A3; background: #3A2F12; }
.srv-control { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); }
.srv-input { flex: 1; min-width: 0; padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); }
.srv-input:focus, .srv-json:focus { outline: 2px solid var(--color-primary-highlight); border-color: var(--color-primary); }
.srv-json { width: 100%; padding: var(--space-2) var(--space-3); font-family: ui-monospace, Consolas, monospace; font-size: var(--text-xs); color: var(--color-text); background: var(--color-surface-offset); border: 1px solid var(--color-border); resize: vertical; }
.srv-switch { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0; font-size: var(--text-sm); color: var(--color-text-muted); background: none; border: 0; cursor: pointer; }
.srv-knob { position: relative; width: 40px; height: 22px; background: var(--color-surface-offset); border: 1px solid var(--color-border); transition: background var(--transition); }
.srv-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--color-text-faint); transition: transform var(--transition), background var(--transition); }
.srv-switch.is-on { color: var(--color-text); }
.srv-switch.is-on .srv-knob { background: var(--color-primary); border-color: var(--color-primary); }
.srv-switch.is-on .srv-knob::after { transform: translateX(18px); background: #fff; }
.srv-reset { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.srv-reset .icon-btn:disabled { opacity: .3; cursor: default; }
@media (max-width: 1000px) {
  .srv-grid { grid-template-columns: 1fr; }
  .srv-nav { position: static; }
  .srv-row { grid-template-columns: 1fr; gap: var(--space-3); }
}
/* Поиск по настройкам — отдельной строкой над группами и списком (в левой колонке подсказка не помещалась) */
.srv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.srv-toolbar .srv-search { flex: 1 1 420px; max-width: 720px; }
.srv-nav { padding: 0; }
.srv-nav .srv-groups { margin: 0; border-top: 0; }
/* Поиск — отдельной карточкой, поле на белом фоне карточки заметно */
.srv-toolbar.card { padding: var(--space-4) var(--space-5); }
.srv-toolbar .search-input { background: var(--color-bg, var(--color-surface-offset)); }