/* logos-ui-kit.css — классы .lk-* движка (server-rendered, без JS). Канон: UI-KIT-DESIGN §2. */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, sans-serif; background: var(--lk-bg); color: var(--lk-text); }
.lk-app { max-width: 1040px; margin: 0 auto; padding: 24px; }

.lk-page-header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.lk-page-title { font-size: 1.5rem; margin: 0; color: var(--lk-navy); }

/* Навигация окна (N-nav): «назад» (came-from) + хлебные крошки пути (сохранение последовательности окон). */
.lk-header-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--lk-gap); }
.lk-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.85rem; }
.lk-crumb { color: var(--lk-muted); text-decoration: none; }
.lk-crumb:hover { color: var(--lk-navy); text-decoration: underline; }
.lk-crumb-sep { color: var(--lk-border); }

.lk-btn { display: inline-block; padding: 8px 14px; border: 1px solid var(--lk-border); border-radius: var(--lk-radius);
  background: var(--lk-surface); color: var(--lk-text); text-decoration: none; cursor: pointer; font-size: 0.9rem; }
.lk-btn-back { background: transparent; }
.lk-action-edit { background: var(--lk-action-edit); color: #fff; border-color: transparent; }
.lk-action-mark { background: var(--lk-action-mark); color: #fff; border-color: transparent; }
.lk-action-delete { background: var(--lk-action-delete); color: #fff; border-color: transparent; }
.lk-action-create { background: var(--lk-action-create); color: #fff; border-color: transparent; }

.lk-toolbar { display: flex; flex-wrap: wrap; gap: var(--lk-gap); margin-bottom: 16px; }
.lk-action-form { display: inline-flex; margin: 0; }   /* workflow-команда: форма-обёртка не ломает flex-тулбар */
.lk-section { background: var(--lk-surface); border: 1px solid var(--lk-border); border-radius: var(--lk-radius);
  padding: 16px; margin-bottom: 16px; }
.lk-section-title { font-size: 1rem; margin: 0 0 12px; color: var(--lk-navy); }

.lk-fields { margin: 0; }
.lk-field { display: flex; gap: var(--lk-gap); padding: 6px 0; border-bottom: 1px solid var(--lk-border); }
.lk-field:last-child { border-bottom: 0; }
.lk-field-label { min-width: 220px; color: var(--lk-muted); }
.lk-field-value { color: var(--lk-text); }
.lk-masked { letter-spacing: 2px; color: var(--lk-muted); }

/* Бейдж статуса (F1): цвет-по-статусу из SSOT workflow.constants (Radix-палитра, soft-look). */
.lk-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.lk-badge-gray   { background: #e5e7eb; color: #374151; }
.lk-badge-amber  { background: #fef3c7; color: #92400e; }
.lk-badge-green  { background: #d1fae5; color: #065f46; }
.lk-badge-violet { background: #ede9fe; color: #5b21b6; }
.lk-badge-red    { background: #fee2e2; color: #991b1b; }
.lk-badge-orange { background: #ffedd5; color: #9a3412; }
.lk-badge-teal   { background: #ccfbf1; color: #115e57; }
.lk-badge-blue   { background: #dbeafe; color: #1e40af; }

.lk-table { width: 100%; border-collapse: collapse; background: var(--lk-surface);
  border: 1px solid var(--lk-border); border-radius: var(--lk-radius); overflow: hidden; }
.lk-th { text-align: left; padding: 10px 12px; background: var(--lk-navy); color: #fff; font-weight: 600; font-size: 0.85rem; }
.lk-td { padding: 10px 12px; border-top: 1px solid var(--lk-border); font-size: 0.9rem; }
.lk-tr:hover { background: #f0f2f6; }
.lk-link { color: var(--lk-action-edit); text-decoration: none; font-weight: 600; }
.lk-link:hover { text-decoration: underline; }
.lk-empty { color: var(--lk-muted); padding: 16px; }

/* Отчёт (СКД-композер): числа — right-align моно, итог/подытог — жирный фон. */
.lk-grid-num { text-align: right; font-variant-numeric: tabular-nums; }
.lk-grid-total { font-weight: 700; background: #f0f2f6; }
.lk-grid-total .lk-td { border-top: 2px solid var(--lk-border); }

.lk-form { background: var(--lk-surface); border: 1px solid var(--lk-border); border-radius: var(--lk-radius);
  padding: 16px; max-width: 540px; display: flex; flex-direction: column; gap: var(--lk-gap); }
.lk-input { width: 100%; padding: 8px 10px; border: 1px solid var(--lk-border); border-radius: 6px; font-size: 0.9rem; }

/* «Форма выбора» (1С-подбор): текущая метка + компактная «…»-кнопка открытия lookup. */
.lk-picker { display: inline-flex; align-items: center; gap: 8px; width: 100%; }
.lk-picker-label { flex: 1; padding: 8px 10px; border: 1px solid var(--lk-border); border-radius: 6px;
  background: var(--lk-surface); color: var(--lk-text); font-size: 0.9rem; min-height: 20px; }
.lk-picker-btn { padding: 8px 12px; font-weight: 700; }

/* Поиск + сортировка динсписка (P1b): поле поиска над таблицей + кликабельные заголовки (▲/▼). */
.lk-search { display: flex; gap: 8px; margin-bottom: 16px; max-width: 480px; }
.lk-search-input { flex: 1; }
.lk-th-sort { color: #fff; text-decoration: none; display: inline-block; white-space: nowrap; }
.lk-th-sort:hover { text-decoration: underline; }

/* Группировка динсписка (P2: «список = композер»): чипы осей → композер даёт count-подытоги. */
.lk-group-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.lk-group-label { color: var(--lk-muted); font-size: 0.85rem; }
.lk-group-chip { padding: 4px 12px; border: 1px solid var(--lk-border); border-radius: 999px;
  color: var(--lk-navy); text-decoration: none; font-size: 0.85rem; background: var(--lk-surface); }
.lk-group-chip:hover { border-color: var(--lk-navy); background: #f0f2f6; }

/* Сворачиваемый отчёт (P1c): ROLLUP-уровни через нативный <details> — сворачивание БЕЗ JS (item 3). */
.lk-grid-collapsible { background: var(--lk-surface); border: 1px solid var(--lk-border);
  border-radius: var(--lk-radius); overflow: hidden; }
.lk-gt-headers, .lk-gt-head { display: flex; align-items: baseline; gap: var(--lk-gap); }
.lk-gt-headers { padding: 10px 12px; background: var(--lk-navy); color: #fff; font-weight: 600; font-size: 0.85rem; }
.lk-gt-hlabel, .lk-gt-label { flex: 1; }
.lk-gt-hvals, .lk-gt-vals { display: inline-flex; gap: 18px; font-variant-numeric: tabular-nums; }
.lk-gt-hcol, .lk-gt-val { min-width: 90px; text-align: right; }
.lk-gt-sum { cursor: pointer; padding: 8px 12px; list-style: none; border-top: 1px solid var(--lk-border); }
.lk-gt-sum::-webkit-details-marker { display: none; }
.lk-gt-sum::before { content: "▸"; display: inline-block; width: 1em; color: var(--lk-muted); }
.lk-gt-node[open] > .lk-gt-sum::before { content: "▾"; }
.lk-gt-sum:hover { background: #f0f2f6; }
.lk-gt-children { margin-left: 18px; border-left: 2px solid var(--lk-border); }
.lk-gt-leaf { padding: 8px 12px 8px 24px; border-top: 1px solid var(--lk-border); }
.lk-grid-collapsible .lk-grid-total > .lk-gt-sum, .lk-grid-collapsible .lk-gt-leaf.lk-grid-total { font-weight: 700; }

/* Пагинация динсписка (P1a keyset): «дальше» по курсору — по центру под таблицей. */
.lk-list-more { display: flex; justify-content: center; margin-top: 16px; }

/* Период (DP): единый выбор — пресеты-чипы + произвольный диапазон (нативные date). Однотипно везде. */
.lk-period { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lk-gap);
  background: var(--lk-surface); border: 1px solid var(--lk-border); border-radius: var(--lk-radius);
  padding: 10px 12px; margin-bottom: 16px; }
.lk-period-presets { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.lk-period-preset { padding: 5px 12px; border: 1px solid var(--lk-border); border-radius: 999px;
  color: var(--lk-text); text-decoration: none; font-size: 0.85rem; background: var(--lk-bg); }
.lk-period-preset:hover { border-color: var(--lk-navy); }
.lk-period-active { background: var(--lk-navy); color: #fff; border-color: transparent; }
.lk-period-range { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.lk-period-date { width: auto; }
.lk-period-dash { color: var(--lk-muted); }

/* Дерево (T-tree): иерархич. справочник через нативный <details>/<summary> — сворачивание БЕЗ JS. */
.lk-tree { display: flex; flex-direction: column; gap: 2px; }
.lk-tree-node { border-left: 2px solid var(--lk-border); }
.lk-tree-node[open] > .lk-tree-sum { color: var(--lk-navy); }
.lk-tree-sum { cursor: pointer; padding: 8px 10px; list-style: none; border-radius: var(--lk-radius); }
.lk-tree-sum::-webkit-details-marker { display: none; }
.lk-tree-sum::before { content: "▸"; display: inline-block; width: 1em; color: var(--lk-muted); transition: none; }
.lk-tree-node[open] > .lk-tree-sum::before { content: "▾"; }
.lk-tree-sum:hover { background: #f0f2f6; }
.lk-tree-children { margin-left: 16px; display: flex; flex-direction: column; gap: 2px; }
.lk-tree-leaf { padding: 8px 10px 8px 26px; }   /* отступ под ширину маркера листа (выравнивание с узлами) */
.lk-tree-headline { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lk-tree-sec { color: var(--lk-muted); font-size: 0.85rem; }

/* Страницы ошибок (§5a): единый блок, дизайн-система; вертикальный стек заголовок/текст/«назад». */
.lk-error { display: flex; flex-direction: column; gap: var(--lk-gap); align-items: flex-start;
  background: var(--lk-surface); border: 1px solid var(--lk-border); border-radius: var(--lk-radius);
  padding: 24px; max-width: 540px; }

/* Рабочий стол: шапка + секции по виду + адаптивная сетка карточек (когнит. нагрузка/узнаваемость). */
.lk-home-head { margin-bottom: 20px; }
.lk-home-hint { color: var(--lk-muted); margin: 4px 0 0; }
.lk-nav-section { margin-bottom: 24px; }
.lk-nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--lk-gap); }
.lk-nav-card { display: block; padding: 14px 16px; background: var(--lk-surface);
  border: 1px solid var(--lk-border); border-radius: var(--lk-radius); color: var(--lk-navy);
  text-decoration: none; font-weight: 600; }
.lk-nav-card:hover { border-color: var(--lk-navy); background: #f0f2f6; }

/* Адаптивность: горизонтальный скролл таблицы на узких, поля стекаются, тулбар переносится. */
.lk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .lk-app { padding: 12px; }
  .lk-page-title { font-size: 1.2rem; }
  .lk-toolbar { flex-wrap: wrap; }
  .lk-field { flex-direction: column; gap: 2px; }
  .lk-field-label { min-width: 0; font-size: 0.8rem; }
}

/* §6 экспорт-бар (кнопки xlsx/csv/pdf при праве .export) */
.lk-export-bar { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.lk-export-label { color: var(--lk-muted); font-size: 0.85rem; }
.lk-export-link { padding: 4px 10px; font-size: 0.8rem; border-color: var(--lk-brand); color: var(--lk-brand); }

/* §7 server-SVG диаграмма (CSP-safe, без JS) */
.lk-chart-wrap { margin: 12px 0 4px; padding: 8px 4px; background: var(--lk-surface); border: 1px solid var(--lk-border); border-radius: var(--lk-radius); }
.lk-chart-title { display: block; font-size: 0.85rem; color: var(--lk-muted); margin: 0 0 4px 6px; }
.lk-chart { width: 100%; height: auto; max-height: 260px; display: block; }
.lk-chart-bar rect { transition: opacity .15s; }
.lk-chart-bar:hover rect { opacity: .82; }
.lk-chart-val { font-size: 10px; fill: var(--lk-text); font-weight: 600; }
.lk-chart-lbl { font-size: 10px; fill: var(--lk-muted); }

/* §7 кольцевая диаграмма (структура доли от Σ) + HTML-легенда (текст+процент, не только цвет — §5).
   Палитра .lk-cat-N: fill для SVG-секторов, background для swatch легенды — из --lk-cat-N (brand-слой).
   Инлайн-style НЕ используем (CSP style-src 'self') — цвет через класс. */
.lk-donut-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 4px 8px; }
.lk-donut { width: 200px; height: 200px; flex: 0 0 auto; }
.lk-seg { transition: opacity .15s; }
.lk-seg:hover { opacity: .82; }
.lk-donut-total { font-size: 18px; font-weight: 700; fill: var(--lk-brand); }
.lk-donut-legend { flex: 1 1 240px; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.lk-legend-item { display: grid; grid-template-columns: 14px 1fr auto auto; align-items: center; gap: 8px; font-size: 0.85rem; }
.lk-legend-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lk-legend-lbl { color: var(--lk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-legend-val { color: var(--lk-text); font-variant-numeric: tabular-nums; }
.lk-legend-pct { color: var(--lk-muted); font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right; }
.lk-cat-1 { fill: var(--lk-cat-1); background: var(--lk-cat-1); }
.lk-cat-2 { fill: var(--lk-cat-2); background: var(--lk-cat-2); }
.lk-cat-3 { fill: var(--lk-cat-3); background: var(--lk-cat-3); }
.lk-cat-4 { fill: var(--lk-cat-4); background: var(--lk-cat-4); }
.lk-cat-5 { fill: var(--lk-cat-5); background: var(--lk-cat-5); }
.lk-cat-6 { fill: var(--lk-cat-6); background: var(--lk-cat-6); }
.lk-cat-7 { fill: var(--lk-cat-7); background: var(--lk-cat-7); }
.lk-cat-8 { fill: var(--lk-cat-8); background: var(--lk-cat-8); }
.lk-cat-masked { fill: var(--lk-muted); background: var(--lk-muted); }   /* F-CHT1: k-anon сегмент приглушён */

/* §8 KPI-карточки (адаптивная сетка auto-fit — §5 адаптив без JS) + спарклайн */
.lk-kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 12px 0; }
.lk-kpi { position: relative; background: var(--lk-surface); border: 1px solid var(--lk-border); border-radius: var(--lk-radius); padding: 10px 12px; overflow: hidden; }
.lk-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--lk-brand); }
.lk-kpi-green::before { background: var(--lk-action-create); }
.lk-kpi-red::before { background: var(--lk-action-delete); }
.lk-kpi-gray::before { background: var(--lk-muted); }
.lk-kpi-label { display: block; font-size: 0.75rem; color: var(--lk-muted); text-transform: uppercase; letter-spacing: .03em; }
.lk-kpi-value { display: block; font-size: 1.6rem; font-weight: 700; color: var(--lk-brand); line-height: 1.2; }
.lk-kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.lk-kpi-sub { font-size: 0.75rem; color: var(--lk-muted); }
.lk-spark { width: 88px; height: 24px; }

/* self-service «мой аккаунт» (/me): сетка карточек + нотис результата смены пароля (§ Profile) */
.lk-profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--lk-gap); align-items: start; }
.lk-card { background: var(--lk-surface); border: 1px solid var(--lk-border); border-radius: var(--lk-radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.lk-notice { border-radius: var(--lk-radius); padding: 8px 12px; font-size: 0.9rem; border: 1px solid var(--lk-border); }
.lk-notice-ok { background: #e9f6ec; border-color: #b6ddc0; color: #1c6b34; }
.lk-notice-err { background: #fdecec; border-color: #f2c0c2; color: #a5282c; }
.lk-profile-name { font-size: 1.15rem; font-weight: 700; color: var(--lk-text); }
/* форма внутри карточки (смена пароля): поля стекаются — метка над полем, input во всю ширину */
.lk-profile .lk-form { max-width: none; }
.lk-profile .lk-form .lk-field { flex-direction: column; align-items: stretch; gap: 4px; padding: 4px 0; border-bottom: 0; }
.lk-profile .lk-form .lk-field-label { min-width: 0; }