/* ============================================================================
   redesign.css — слой редизайна МираПлюс под дизайн-систему НКО
   ----------------------------------------------------------------------------
   Грузится ПОСЛЕДНИМ (после bootstrap.css, style.css, inter.css, mira.css).
   Только ДОБАВЛЯЕТ/ПЕРЕОПРЕДЕЛЯЕТ вид. Ничего не переименовывает.
   НЕ трогает Bootstrap-раскладку (.row/.col/.container/.d-flex/утилиты).
   Источник значений — designFoundation.md / designScreens.md (дословно).

   Карта секций:
     1. ТОКЕНЫ (:root)
     2. БАЗА (body, шрифт)
     3. KEYFRAMES
     4. РЕ-СКИН СУЩЕСТВУЮЩИХ КЛАССОВ ПРИЛОЖЕНИЯ
        4.1 .btn-custom (брендовая кнопка)
        4.2 .card / .card-title
        4.3 .unite-header + кнопки/пилюли/бейджи
        4.4 .unite-section / поля / run-panel / log / layout / sidebar
        4.5 таблицы (.data-table / .vacancy-table*)
        4.6 .home-card*
        4.7 .te-card*
        4.8 .med-* (массовые мероприятия)
        4.9 .ref-* (ключевые)
        4.10 .adm-* (админ-панель)
        4.11 .ea-* (автоматизации)
        4.12 .cj-* (путь клиента)
        4.13 .aa-* (аналитика рекламы)
     5. МЯГКИЕ OVERRIDES BOOTSTRAP-ВИДА
        (form-control/select/label, nav-tabs/pills, badge, modal, table,
         progress, alert, dropdown-menu, form-switch/check, spinner)
     6. НОВЫЕ КОМПОНЕНТЫ ДЛЯ ФАЗ 2-4
        6.1 app-shell / header / main / container
        6.2 sidebar (rail + overlay + off-canvas)
        6.3 mobile-action-slot
        6.4 module-grid / module-card
        6.5 metric-card
        6.6 status-pill / badge-* статусы
        6.7 list-card / card-list
        6.8 bottom-sheet
        6.9 appmodal*
        6.10 toast
        6.11 tab-btn / view-switcher
        6.12 empty-state
        6.13 состояния: skel / spinner / progress-indeterminate / dropzone / offline-pill
        6.14 лог-панель (тёмная monospace)
        6.15 степпер
        6.16 мультиселект-теги
        6.17 pagination
     7. БРЕЙКПОИНТЫ И МОБИЛЬНЫЕ ПРАВИЛА
   ============================================================================ */


/* === 1. ТОКЕНЫ ============================================================ */
/* Префикс --nko-* чтобы не конфликтовать с существующими --theme-* (style.css)
   и не ломать темизацию data-theme. */
:root {
  --nko-font-family: 'Golos Text', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nko-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Акценты */
  --nko-primary:        #2E63B0;  /* заливки, кнопки, активные пункты, ссылки, активные табы */
  --nko-primary-dark:   #244F8F;  /* hover primary */
  --nko-primary-light:  #6CACE4;  /* акцентный бар активного пункта сайдбара */
  --nko-accent:         #2E63B0;  /* = primary, info-тосты */
  --nko-blue:           #6CACE4;

  /* Текст / фон / границы */
  --nko-dark-blue:      #122036;  /* H1, card-title, основной текст */
  --nko-text:           #122036;
  --nko-text-secondary: #5A6B82;  /* вторичный текст, подписи, secondary-кнопка */
  --nko-text-muted:     #8A98AB;  /* третичный: ИНН, мета, плейсхолдеры */
  --nko-bg:             #EEF2F7;  /* фон страницы */
  --nko-card-bg:        #FFFFFF;  /* карточки, шапка, модалки */
  --nko-border:         #E2E8F1;  /* бордер карточек/инпутов/таблиц */
  --nko-border-light:   #EAEEF4;  /* разделители ячеек, низ card-title */

  /* Сайдбар */
  --nko-sidebar-bg-top:    #0C2548;
  --nko-sidebar-bg-bottom: #0A1F3E;

  /* Статусы — семантические, при рескине НЕ трогать */
  --nko-success:  #198754;
  --nko-warning:  #FFC108;
  --nko-danger:   #ED006B;
  --nko-premises: #E0A800;

  /* Фокус-ринг / hover строк — ИСТОРИЧЕСКИ на старом primary #3A5DAE → rgba(58,93,174,…).
     Это НЕ опечатка: ринг и hover на rgba(58,93,174,…), заливки на #2E63B0. */
  --nko-focus-ring:  0 0 0 3px rgba(58,93,174,0.15);
  --nko-row-hover:   rgba(58,93,174,0.04);
  --nko-zebra:       rgba(0,0,0,0.015);

  /* Тени */
  --nko-shadow-sm: 0 1px 2px rgba(16,32,64,0.05);
  --nko-shadow:    0 1px 2px rgba(16,32,64,0.05);
  --nko-shadow-md: 0 4px 14px rgba(16,32,64,0.08);
  --nko-shadow-lg: 0 12px 36px rgba(11,34,68,0.18);
  --nko-shadow-modal: 0 30px 70px rgba(11,34,68,0.34);

  /* Радиусы */
  --nko-radius-sm: 6px;   /* квадратные бейджи, пагинация, чипы-коды */
  --nko-radius:    9px;   /* кнопки, инпуты, табы, nav-item */
  --nko-radius-md: 11px;  /* тост, мобильный инпут, metric-card */
  --nko-radius-lg: 14px;  /* .card, контейнеры */

  /* Layout */
  --nko-sidebar-width: 248px;
  --nko-rail-width:    72px;
  --nko-header-height: 64px;
  --nko-transition:    150ms ease;

  /* Ремап Bootstrap theme-color primary → НКО-синий: один рычаг для всех
     утилит .bg-primary/.text-primary/.border-primary/.btn-outline-primary,
     ссылок и фокус-колец Bootstrap. Тема --theme-* (style.css) не затрагивается. */
  --bs-primary:      #2E63B0;
  --bs-primary-rgb:  46, 99, 176;
  --bs-link-color:   #2E63B0;
  --bs-link-hover-color: #244F8F;
  /* остальные theme-colors → НКО (фиксит .bg-*/.text-*/.text-bg-*/.badge.bg-* разом) */
  --bs-danger:       #ED006B;  --bs-danger-rgb:    237, 0, 107;
  --bs-success:      #198754;  --bs-success-rgb:   25, 135, 84;
  --bs-info:         #2E63B0;  --bs-info-rgb:      46, 99, 176;   /* info = primary-синий НКО */
  --bs-secondary:    #5A6B82;  --bs-secondary-rgb: 90, 107, 130;
  --bs-dark:         #122036;  --bs-dark-rgb:      18, 32, 54;
}


/* === 2. БАЗА ============================================================== */
body {
  font-family: var(--nko-font-family);
  background: var(--nko-bg);
  color: var(--nko-text);
  -webkit-font-smoothing: antialiased;
}
/* существующий .bg-light-gray держит фон #f7f6f4 — переопределяем на НКО */
body.bg-light-gray { background: var(--nko-bg); }


/* === 3. KEYFRAMES ========================================================= */
@keyframes nkoShimmer  { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes nkoPulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes nkoSpin     { to { transform: rotate(360deg); } }
@keyframes nkoBarber   { from { background-position: 0 0; } to { background-position: 34px 0; } }
@keyframes nkoToastIn  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nkoToastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } }


/* ==========================================================================
   4. РЕ-СКИН СУЩЕСТВУЮЩИХ КЛАССОВ ПРИЛОЖЕНИЯ
   ========================================================================== */

/* --- 4.1 .btn-custom — брендовая primary-кнопка → НКО primary ------------- */
/* В mira.css .btn-custom задан с !important (определён дважды). Перебиваем
   такой же специфичностью + !important. */
.btn.btn-custom,
button.btn-custom,
a.btn-custom {
  background: var(--nko-primary) !important;
  border: 1px solid var(--nko-primary) !important;
  color: #fff !important;
  border-radius: var(--nko-radius) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background var(--nko-transition), border-color var(--nko-transition) !important;
}
.btn.btn-custom:hover:not(:disabled),
button.btn-custom:hover:not(:disabled),
a.btn-custom:hover {
  background: var(--nko-primary-dark) !important;
  border-color: var(--nko-primary-dark) !important;
  color: #fff !important;
}
.btn.btn-custom:focus,
button.btn-custom:focus {
  box-shadow: var(--nko-focus-ring) !important;
}
.btn.btn-custom:disabled { opacity: .6 !important; }
/* Размер брендовой кнопки контролирует редизайн (mira/style.css задают inherit/1.05rem).
   Не трогаем явные .btn-sm/.btn-lg, чтобы не сломать компактные кнопки. */
.btn.btn-custom:not(.btn-sm):not(.btn-lg),
button.btn-custom:not(.btn-sm):not(.btn-lg),
a.btn-custom:not(.btn-sm):not(.btn-lg) {
  font-size: .875rem !important;
  padding: .5rem 1rem !important;
}

/* Bootstrap .btn-primary (встречается в евентах-дашборде, admin) — на НКО */
.btn-primary {
  --bs-btn-bg: var(--nko-primary);
  --bs-btn-border-color: var(--nko-primary);
  --bs-btn-hover-bg: var(--nko-primary-dark);
  --bs-btn-hover-border-color: var(--nko-primary-dark);
  --bs-btn-active-bg: var(--nko-primary-dark);
  --bs-btn-active-border-color: var(--nko-primary-dark);
  --bs-btn-disabled-bg: var(--nko-primary);
  --bs-btn-disabled-border-color: var(--nko-primary);
}
.btn-success {
  --bs-btn-bg: var(--nko-success);
  --bs-btn-border-color: var(--nko-success);
  --bs-btn-hover-bg: #157347;
  --bs-btn-hover-border-color: #157347;
  --bs-btn-active-bg: #157347;
}
.btn-link { --bs-btn-color: var(--nko-primary); --bs-btn-hover-color: var(--nko-primary-dark); }
.btn { border-radius: var(--nko-radius); }
.btn:focus-visible { box-shadow: var(--nko-focus-ring); }

/* --- 4.2 .card / .card-title --------------------------------------------- */
.card {
  background: var(--nko-card-bg);
  border: 1px solid var(--nko-border);
  border-radius: var(--nko-radius-lg);
  box-shadow: var(--nko-shadow);
}
.card-title {
  color: var(--nko-dark-blue);
  font-weight: 600;
}
/* card-title как «заголовок секции» (если у него есть нижняя граница в разметке) */
.card > .card-title:first-child,
.card-body > .card-title:first-child {
  font-size: 1.125rem;
}

/* --- 4.3 .unite-header + кнопки/пилюли/бейджи ----------------------------- */
/* Тёмная градиентная шапка модуля → тёмно-синий НКО-градиент (как сайдбар). */
.unite-header {
  background: linear-gradient(135deg, var(--nko-sidebar-bg-top) 0%, var(--nko-primary) 140%) !important;
  border-radius: var(--nko-radius-lg);
  color: #fff;
}
.unite-header h4,
.unite-header .h4 { color: #fff; }
.unite-header-btn {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  transition: background var(--nko-transition);
}
.unite-header-btn:hover {
  background: rgba(255,255,255,0.22);
  color: #fff;
}
/* Селектор среды (PROD/PREPROD/DEV) и статус-бейдж Unite. После нейтрализации
   .unite-header и телепорта действий в светлый app-header — оформляем под СВЕТЛЫЙ
   фон (раньше тут был белый текст/фон для синего градиента → бело-на-белом). */
.unite-env-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--nko-bg);
  border: 1px solid var(--nko-border);
  border-radius: 999px;
  padding: 4px 6px 4px 13px;
}
.unite-env-pill label {
  margin: 0; font-size: 12px; font-weight: 600;
  color: var(--nko-text-secondary); white-space: nowrap;
}
.unite-env-pill select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--nko-border); border-radius: 999px;
  background: #fff;
  background-image: 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='%238A98AB' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  color: var(--nko-primary); font-size: 12.5px; font-weight: 700;
  padding: 4px 28px 4px 12px; cursor: pointer;
}
.unite-env-pill select:hover { border-color: var(--nko-primary); }
.unite-env-pill select:focus {
  outline: none; border-color: var(--nko-primary);
  box-shadow: 0 0 0 3px rgba(46,99,176,0.14);
}
.unite-status-badge { font-size: 12px; color: var(--nko-text-muted); }

/* --- 4.4 .unite-section / поля / run-panel / log / layout / sidebar ------- */
.unite-section {
  background: var(--nko-card-bg);
  border: 1px solid var(--nko-border);
  border-radius: var(--nko-radius-lg);
  box-shadow: var(--nko-shadow-sm);
}
.unite-section-label {
  color: var(--nko-text-secondary);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.unite-field label,
.unite-field .form-label { color: var(--nko-text-secondary); font-weight: 500; }

.unite-run-panel {
  background: var(--nko-card-bg);
  border: 1px solid var(--nko-border);
  border-radius: var(--nko-radius-lg);
}

/* Лог-панель Unite — тёмная monospace (как канон лог-панели §6.14) */
.unite-log {
  background: #0c2548;
  color: #9FB3CC;
  border-radius: 10px;
  font-family: var(--nko-font-mono);
  font-size: 12px;
  line-height: 1.7;
  border: 1px solid #11315c;
}

.unite-status {
  color: var(--nko-text-secondary);
  font-weight: 500;
}

/* Вторичный сайдбар Unite (флекс-навигация модуля) — лёгкий рескин акцентов */
.unite-layout { gap: 16px; }
.unite-sidebar { border-right: 1px solid var(--nko-border); }
.unite-sidebar .nav-link {
  color: var(--nko-text-secondary);
  border-radius: var(--nko-radius);
}
.unite-sidebar .nav-link:hover { background: var(--nko-bg); color: var(--nko-text); }
.unite-sidebar .nav-link.active {
  background: rgba(58,93,174,0.10);
  color: var(--nko-primary);
  font-weight: 600;
}
.unite-content { min-width: 0; }
.unite-ops .nav-link.active { color: var(--nko-primary); }

/* --- 4.5 Таблицы (.data-table / .vacancy-table*) ------------------------- */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.data-table th {
  text-align: left; padding: 0.75rem 1rem; font-weight: 600;
  color: var(--nko-text-secondary); font-size: 0.8125rem;
  text-transform: uppercase; letter-spacing: 0.025em;
  border-bottom: 2px solid var(--nko-border); white-space: nowrap;
}
.data-table td {
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--nko-border-light);
  vertical-align: middle;
}
.data-table tbody tr:hover { background: var(--nko-row-hover); }
.data-table tbody tr:nth-child(even) { background: var(--nko-zebra); }

/* Общесистемные таблицы vacancy (используются в vacancy, assessment, шаблоны) */
.vacancy-table { font-size: 0.875rem; }
.vacancy-table thead th {
  color: var(--nko-text-secondary);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border-bottom: 2px solid var(--nko-border);
  background: #F8FAFC;
}
.vacancy-table td { border-bottom: 1px solid var(--nko-border-light); }
.vacancy-table tbody tr:hover { background: var(--nko-row-hover); }
.vacancy-table-wrap {
  border: 1px solid var(--nko-border);
  border-radius: var(--nko-radius-lg);
  background: var(--nko-card-bg);
}
.vacancy-table-scroll { overflow-x: auto; }
/* шапка результатов и секций — акцентные градиенты НКО */
.vacancy-result-header {
  background: linear-gradient(135deg, var(--nko-success) 0%, #157347 100%);
  color: #fff;
  border-radius: var(--nko-radius-lg);
}
.vacancy-section-header {
  border-left: 3px solid var(--nko-primary);
  color: var(--nko-dark-blue);
}
/* строка «Итого» */
.vacancy-table tfoot td,
.vacancy-table tr.total td {
  border-top: 2px solid var(--nko-border);
  font-weight: 700;
  background: #F8FAFC;
}
/* числа — табличные цифры */
.vacancy-table td,
.data-table td { font-variant-numeric: tabular-nums; }

/* --- 4.6 .home-card* ----------------------------------------------------- */
.home-card {
  background: var(--nko-card-bg);
  border: 1px solid var(--nko-border);
  border-radius: var(--nko-radius-lg);
  box-shadow: var(--nko-shadow);
  transition: box-shadow var(--nko-transition), transform var(--nko-transition), border-color var(--nko-transition);
}
.home-card:hover {
  box-shadow: var(--nko-shadow-md);
  transform: translateY(-3px);
  border-color: #CFE0F7;
}
.home-card-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #EAF1FB, #D6E6FA);
  color: var(--nko-primary);
  font-size: 22px;
}
.home-card-title { color: var(--nko-dark-blue); font-weight: 700; }
.home-card-desc  { color: var(--nko-text-secondary); line-height: 1.45; }

/* --- 4.7 .te-card* (трудоустройство — кликабельные метрики-фильтры) ------- */
/* Белая карточка + цветная левая полоса 4px (семантика по типу). Левую сторону
   НЕ задаём шорткендом border (он бы затёр цвет) — цвет ставят варианты ниже. */
.te-card {
  background: var(--nko-card-bg);
  border: 1px solid var(--nko-border);
  border-left-width: 4px;
  border-radius: var(--nko-radius-md);
  cursor: pointer;
  transition: box-shadow var(--nko-transition), border-color var(--nko-transition);
}
/* hover — лёгкая тень, бордеры не трогаем (цветная полоса сохраняется) */
.te-card:hover { box-shadow: var(--nko-shadow-md); }
.te-card-label { color: var(--nko-text-secondary); font-size: 12px; }
.te-card-value { color: var(--nko-dark-blue); font-weight: 700; font-variant-numeric: tabular-nums; }

/* семантика по типу: левая полоса + цвет значения + кольцо активного */
.te-card-slate { border-left-color: var(--nko-text-secondary); }
.te-card-green { border-left-color: var(--nko-success); }
.te-card-blue  { border-left-color: var(--nko-primary); }
.te-card-red   { border-left-color: var(--nko-danger); }
.te-card-green .te-card-value { color: var(--nko-success); }
.te-card-blue  .te-card-value { color: var(--nko-primary); }
.te-card-red   .te-card-value { color: var(--nko-danger); }
.te-card-slate .te-card-value { color: var(--nko-text-secondary); }
.te-card-slate.active { border-color: var(--nko-text-secondary); box-shadow: 0 0 0 3px rgba(90,107,130,0.12); }
.te-card-green.active { border-color: var(--nko-success);        box-shadow: 0 0 0 3px rgba(25,135,84,0.12); }
.te-card-blue.active  { border-color: var(--nko-primary);        box-shadow: 0 0 0 3px rgba(46,99,176,0.12); }
.te-card-red.active   { border-color: var(--nko-danger);         box-shadow: 0 0 0 3px rgba(237,0,107,0.12); }

/* --- 4.8 .med-* (публичный дашборд массовых мероприятий) ----------------- */
.med-header {
  color: var(--nko-dark-blue);
}
.med-venues-table thead th {
  color: var(--nko-text-secondary);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border-bottom: 2px solid var(--nko-border);
}
.med-venues-table td { border-bottom: 1px solid var(--nko-border-light); }
.med-venues-table tbody tr:hover { background: var(--nko-row-hover); }
.med-legend { font-size: 12px; color: var(--nko-text-secondary); }
.med-chart-box {
  background: var(--nko-card-bg);
  border: 1px solid var(--nko-border);
  border-radius: var(--nko-radius-lg);
}
.med-hour-card {
  background: var(--nko-card-bg);
  border: 1px solid var(--nko-border);
  border-radius: var(--nko-radius-lg);
}

/* --- 4.10 .adm-* (админ-панель) ------------------------------------------ */
/* Разделы — вкладки .tab-btn; у каждого раздела карточка с шапкой (заголовок,
   описание, действия справа) и таблица .adm-table во всю ширину карточки. */
.adm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.card.adm-section { padding: 0 !important; overflow: hidden; }
/* Кнопки и поля админки — одной высоты (36px), фирменная кнопка без «героического» размера */
.adm .btn-custom {
  font-size: 0.875rem !important; font-weight: 600 !important;
  padding: 0 14px !important; height: 36px; display: inline-flex; align-items: center;
}
.adm .adm-section-actions .form-control,
.adm .adm-lookup-form .form-control,
.adm .adm-lookup-form .input-group-text { height: 36px; font-size: 0.875rem; }
.adm .view-switcher { height: 36px; align-items: center; }
.adm .view-switcher .tab-btn { height: 28px; }
.adm .btn-sm:not(.btn-custom) { font-size: 0.8125rem; padding: 0.3rem 0.7rem; }
.adm .form-select.adm-role-level.has-access { color: var(--nko-primary); font-weight: 600; background-color: #F6F9FE; border-color: #D5E1F3; }
.adm-section-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 20px 24px 16px;
}
.adm-section-title { font-size: 1.125rem; font-weight: 600; color: var(--nko-dark-blue); margin: 0 0 4px; }
.adm-section-desc { font-size: 0.8125rem; color: var(--nko-text-secondary); margin: 0; max-width: 78ch; line-height: 1.45; }
.adm-section-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-section-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 24px; border-top: 1px solid var(--nko-border-light);
  font-size: 0.8125rem; color: var(--nko-text-secondary); background: #FBFCFE;
}
.adm-search { position: relative; width: 240px; }
.adm-search .bi { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--nko-text-muted); font-size: 0.8125rem; }
.adm-search .form-control { padding-left: 30px; }

/* Таблица раздела: без внешней рамки (её даёт карточка), шапка — как у .data-table */
.adm-table-scroll { overflow-x: auto; border-top: 1px solid var(--nko-border-light); }
.adm-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.adm-table th {
  text-align: left; padding: 10px 16px; white-space: nowrap;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--nko-text-secondary); background: #F8FAFC; border-bottom: 1px solid var(--nko-border);
}
.adm-table td { padding: 12px 16px; border-bottom: 1px solid var(--nko-border-light); vertical-align: middle; }
.adm-table tbody tr:last-child td { border-bottom: none; }
.adm-table tbody tr:hover { background: var(--nko-row-hover); }
.adm-table th:first-child, .adm-table td:first-child { padding-left: 24px; }
.adm-table th:last-child, .adm-table td:last-child { padding-right: 24px; }
.adm-table .col-actions { width: 1%; white-space: nowrap; text-align: right; }
.adm-table tr.is-child td:first-child { padding-left: 44px; }
.adm-table tr.is-child .adm-name::before { content: '↳'; color: var(--nko-text-muted); margin-right: 6px; }

.adm-name { font-weight: 600; color: var(--nko-dark-blue); }
.adm-key { display: block; font-family: var(--nko-font-mono); font-size: 0.75rem; color: var(--nko-text-muted); margin-top: 2px; }
.adm-sub { display: block; font-size: 0.75rem; color: var(--nko-text-muted); margin-top: 2px; }
.adm-muted { color: var(--nko-text-muted); }
.adm-count { color: var(--nko-text-muted); font-size: 0.8125rem; white-space: nowrap; }

/* Чипы модулей/ролей — один вид во всей админке (как .ms-tag) */
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #ECF1FA; color: var(--nko-primary);
  font-size: 0.75rem; font-weight: 600; line-height: 1.3;
  padding: 3px 9px; border-radius: var(--nko-radius-sm); white-space: nowrap;
}
.adm-chip.is-neutral { background: #F1F4F8; color: var(--nko-text-secondary); }
.adm-chip-level {
  font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  padding: 1px 6px; border-radius: 4px; color: #997404; background: rgba(255,193,8,0.22);
}

/* Ступени модуля — «лесенка» из сегментов */
.adm-levels { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 0.75rem; }
.adm-level {
  display: inline-block; font-size: 0.75rem; line-height: 1.4;
  padding: 2px 8px; border-radius: 999px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--nko-border); color: var(--nko-text-secondary); background: #fff;
}
.adm-level.is-public { color: #198754; background: rgba(25,135,84,0.08); border-color: rgba(25,135,84,0.2); }
.adm-level.is-role   { color: var(--nko-primary); background: #ECF1FA; border-color: #D5E1F3; }
.adm-level.is-admin  { color: #997404; background: rgba(255,193,8,0.14); border-color: rgba(255,193,8,0.35); }
.adm-levels .sep { color: var(--nko-text-muted); font-size: 0.6875rem; }

/* Иконочные кнопки действий в строке */
.adm-icon-btn {
  width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--nko-border); border-radius: var(--nko-radius-sm); background: #fff;
  color: var(--nko-text-secondary); transition: all var(--nko-transition);
}
.adm-icon-btn:hover { color: var(--nko-primary); border-color: #CFE0F7; background: #F6F9FE; }
.adm-icon-btn.is-danger:hover { color: var(--nko-danger); border-color: rgba(237,0,107,0.3); background: rgba(237,0,107,0.05); }

.adm-empty { padding: 28px 24px; }

/* Проверка пользователя */
.adm-lookup-form { padding: 0 24px 20px; max-width: 560px; }
.adm-person {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 24px; border-top: 1px solid var(--nko-border-light); background: #FBFCFE;
}
.adm-avatar {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #EAF1FB, #D6E6FA); color: var(--nko-primary); font-weight: 700;
}
.adm-person-name { font-weight: 700; color: var(--nko-dark-blue); }
.adm-person-meta { font-size: 0.8125rem; color: var(--nko-text-muted); }
.adm-person-roles { margin-left: auto; }

/* Регламентные задачи */
.adm-cron-list { display: flex; flex-direction: column; }
.adm-cron { padding: 18px 24px; border-top: 1px solid var(--nko-border-light); }
.adm-cron-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.adm-cron-title { font-weight: 600; color: var(--nko-dark-blue); }
.adm-cron-desc { font-size: 0.8125rem; color: var(--nko-text-secondary); margin-top: 2px; max-width: 78ch; }
.adm-cron-meta {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 300px)); gap: 12px 32px;
  margin-top: 14px; font-size: 0.8125rem;
}
.adm-cron-meta .label { display: block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--nko-text-muted); margin-bottom: 3px; }
.adm-cron-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin-top: 14px; }
.adm-cron-controls .form-label { font-size: 0.75rem; color: var(--nko-text-secondary); margin-bottom: 4px; }
.adm-cron-controls .form-check { display: flex; align-items: center; gap: 8px; height: 31px; margin: 0; padding: 0; }
.adm-cron-controls .form-check .form-check-input { float: none; margin: 0; }
.adm-cron-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.adm-code { font-family: var(--nko-font-mono); font-size: 0.75rem; color: var(--nko-text); background: #F1F4F8; padding: 2px 6px; border-radius: 4px; }

/* Модалки админки: таблица-список с ровными строками */
.adm-modal-list { max-height: 55vh; overflow-y: auto; border: 1px solid var(--nko-border); border-radius: var(--nko-radius); }
.adm-modal-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--nko-border-light); }
.adm-modal-row:last-child { border-bottom: none; }
.adm-modal-row .form-select { width: 220px; flex: none; }
.adm-modal-row .grow { flex: 1; min-width: 0; }
.adm-pick-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 14px; border-bottom: 1px solid var(--nko-border-light); font-size: 0.875rem; }
.adm-pick-item:hover { background: #F6F9FE; }

@media (max-width: 767.98px) {
  .adm-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .adm-tabs .tab-btn { flex: none; }
  .adm-section-head, .adm-cron { padding-left: 16px; padding-right: 16px; }
  .adm-section-foot { padding-left: 16px; padding-right: 16px; }
  /* Строка таблицы → карточка: шапка скрыта, ячейки друг под другом */
  .adm-table thead { display: none; }
  .adm-table, .adm-table tbody, .adm-table tr, .adm-table td { display: block; width: 100% !important; }
  .adm-table tr { position: relative; padding: 12px 16px; border-bottom: 1px solid var(--nko-border-light); }
  .adm-table tbody tr:last-child { border-bottom: none; }
  .adm-table td, .adm-table td:first-child, .adm-table td:last-child { padding: 3px 0; border: none; }
  .adm-table tr.is-child td:first-child { padding-left: 16px; }
  .adm-table td.col-actions { position: absolute; top: 12px; right: 16px; width: auto !important; padding: 0; }
  .adm-table td:first-child { padding-right: 44px; }
  .adm-chip { white-space: normal; }
  .adm-lookup-form { padding-left: 16px; padding-right: 16px; }
  .adm-lookup-form .input-group-text { display: none; }
  .adm-search { width: 100%; }
  .adm-modal-row { flex-wrap: wrap; }
  .adm-modal-row .form-select { width: 100%; }
  .adm-person-roles { margin-left: 0; }
}

/* --- 4.11 .ea-* (автоматизации) ------------------------------------------ */
/* Страница повторяет каркас админки: общие .adm-* отвечают за секции и таблицы,
   здесь остаются только геометрия формы правила и шапка модуля. */
#view-event-automations.ea-view { display: none; }
.ea-page { display: flex; flex-direction: column; gap: 16px; }
.ea-header-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ea-header-switch { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; color: var(--nko-text-secondary); white-space: nowrap; }
.ea-header-switch .form-check-input { margin-top: 0; }
.ea-header-switch .form-check-label { min-width: 0; overflow-wrap: anywhere; }
#view-event-automations.ea-view .unite-header { min-width: 0; flex-wrap: wrap; }
.ea-rule-list { display: flex; flex-direction: column; }
.ea-rule { padding: 20px 24px; border-top: 1px solid var(--nko-border-light); }
.ea-rule:first-child { border-top: 0; }
.ea-rule-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ea-rule-title { margin: 0 0 4px; color: var(--nko-dark-blue); font-size: 1rem; font-weight: 600; }
.ea-rule-desc { margin: 0; color: var(--nko-text-secondary); font-size: .8125rem; line-height: 1.45; }
.ea-rule-statuses { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ea-rule-meta { margin-top: 14px; color: var(--nko-text-muted); font-size: .75rem; line-height: 1.45; }
.ea-switches { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 16px; }
.ea-switches .form-check { margin: 0; min-height: 0; }
.ea-switches .form-check-label { color: var(--nko-text); font-size: .8125rem; }
.ea-form-grid { display: grid; grid-template-columns: minmax(160px, 200px) minmax(160px, 200px) minmax(280px, 1fr); gap: 16px 20px; margin-top: 16px; align-items: start; }
.ea-field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.ea-field > .form-label, .ea-schedule-head .form-label { margin: 0; color: var(--nko-text-secondary); font-size: .75rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ea-field .form-control-sm, .ea-field .form-select-sm { height: 34px; }
.ea-source-field { grid-column: 1 / -1; }
.ea-source-warning { margin: 0; }
/* Выбор источников — Choices.js как в RegFormer: выбранные значения бейджами, поиск по списку */
.ea-source-field .choices { margin: 0; font-size: .8125rem; }
.ea-source-field .choices__inner { min-height: 38px; padding: 5px 8px 1px; border: 1px solid var(--nko-border); border-radius: var(--nko-radius); background: var(--nko-card-bg); }
.ea-source-field .choices.is-focused .choices__inner { border-color: var(--nko-primary); box-shadow: 0 0 0 .2rem rgba(46, 99, 176, .15); }
.ea-source-field .choices__input { background: transparent; font-size: .8125rem; margin-bottom: 4px; }
.ea-source-field .choices__list--multiple .choices__item { margin: 0 6px 4px 0; padding: 3px 8px; border: 1px solid var(--nko-border); border-radius: var(--nko-radius-sm); background: var(--nko-bg); color: var(--nko-primary); font-size: .8125rem; font-weight: 500; }
.ea-source-field .choices[data-type*="select-multiple"] .choices__button { margin: 0 -2px 0 6px; padding-left: 12px; border-left: 0; opacity: .6; filter: brightness(0) saturate(100%) invert(31%) sepia(60%) saturate(700%) hue-rotate(190deg); background-size: 7px; }
.ea-source-field .choices[data-type*="select-multiple"] .choices__button:hover { opacity: 1; }
.ea-source-field .choices__list--dropdown { z-index: 30; border-color: var(--nko-border); border-radius: 0 0 var(--nko-radius) var(--nko-radius); }
.ea-source-field .choices__list--dropdown .choices__item { font-size: .8125rem; padding: 7px 12px; }
.ea-source-field .choices__list--dropdown .choices__item--selectable.is-highlighted { background: var(--nko-bg); color: var(--nko-primary); }
.ea-source-field .choices__list--dropdown .choices__item--selectable::after { display: none; }
.ea-schedule { min-width: 0; }
.ea-schedule-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ea-schedule-head .form-check { margin: 0; min-height: 0; }
.ea-schedule-head .form-check-label { color: var(--nko-text-secondary); font-size: .75rem; }
.ea-schedule-row { display: flex; gap: 8px; }
.ea-schedule-row .form-select { flex: 1 1 200px; min-width: 0; }
.ea-schedule-row .ea-cron { flex: 0 1 140px; font-family: var(--nko-font-mono); }
.ea-schedule-info { color: var(--nko-text-muted); font-size: .75rem; }
.ea-rule-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ea-rule-actions .btn {
  height: 36px; min-height: 36px; padding: 0 14px !important;
  display: inline-flex; align-items: center; line-height: 1 !important;
  font-size: .8125rem !important;
}
.ea-items { border-top: 1px solid var(--nko-border-light); }
.ea-items-title { margin: 0; padding: 16px 24px 0; color: var(--nko-dark-blue); font-size: .9375rem; font-weight: 600; }
.ea-items .ea-table-scroll { border-top: 0; margin-top: 12px; }
.ea-table { width: 100%; table-layout: fixed; }
.ea-table th:nth-child(1), .ea-table td:nth-child(1) { width: 154px; }
.ea-table th:nth-child(2), .ea-table td:nth-child(2) { width: 260px; min-width: 260px; }
.ea-table th:nth-child(3), .ea-table td:nth-child(3) { width: 88px; }
.ea-table th:nth-child(4), .ea-table td:nth-child(4),
.ea-table th:nth-child(5), .ea-table td:nth-child(5),
.ea-table th:nth-child(6), .ea-table td:nth-child(6),
.ea-table th:nth-child(7), .ea-table td:nth-child(7),
.ea-table th:nth-child(8), .ea-table td:nth-child(8) { width: 96px; }
.ea-table th { white-space: nowrap; }
.ea-table th:nth-child(9), .ea-table td:nth-child(9) { width: 70px; }
.ea-table th.col-actions, .ea-table td.col-actions { width: 150px; padding-right: 24px; }
.ea-table td:nth-child(1), .ea-table td:nth-child(3), .ea-table td:nth-child(4),
.ea-table td:nth-child(5), .ea-table td:nth-child(6), .ea-table td:nth-child(7),
.ea-table td:nth-child(8), .ea-table td:nth-child(9) { white-space: nowrap; }
.ea-table th { white-space: normal; line-height: 1.2; font-size: .6875rem; letter-spacing: .02em; }
.ea-table th:nth-child(3), .ea-table th:nth-child(4), .ea-table th:nth-child(5),
.ea-table th:nth-child(6), .ea-table th:nth-child(7), .ea-table th:nth-child(8),
.ea-table th:nth-child(9) { padding-left: 8px; padding-right: 8px; }
.ea-table td:not(.col-actions) { overflow-wrap: anywhere; }
.ea-table td:nth-child(1) { overflow-wrap: normal; }
.ea-table td { font-variant-numeric: tabular-nums; }
.ea-date-link { color: var(--nko-primary); text-decoration: none; }
.ea-date-link:hover { color: var(--nko-primary-dark); text-decoration: underline; }

@media (max-width: 767.98px) {
  .ea-rule { padding: 16px; }
  .ea-rule-head { flex-direction: column; }
  .ea-rule-statuses { justify-content: flex-start; }
  .ea-form-grid { grid-template-columns: 1fr 1fr; }
  .ea-schedule { grid-column: 1 / -1; }
  .ea-items-title { padding-left: 16px; padding-right: 16px; }
  .ea-table td.col-actions { position: static; width: 100% !important; padding: 8px 0 0 !important; text-align: left; }
  .ea-table td[data-label]::before {
    content: attr(data-label); display: inline-block; width: 7rem; margin-right: 8px;
    color: var(--nko-text-muted); font-size: .6875rem; font-weight: 600;
    letter-spacing: .03em; text-transform: uppercase; vertical-align: top;
  }
}

@media (max-width: 599px) {
  /* The relocated module action gets a full row in the narrow application header. */
  #view-event-automations.ea-view .unite-header { justify-content: flex-start; row-gap: 6px; }
  #view-event-automations.ea-view .unite-header > .ea-header-actions { flex: 1 1 100%; width: 100%; max-width: 100%; }
  #view-event-automations.ea-view .unite-header .ea-header-switch { white-space: normal; }
  .app-shell.has-sidebar .app-header { width: 100%; max-width: 100vw; box-sizing: border-box; }
  .app-shell.has-sidebar .app-header-actions { flex: 1 1 100%; min-width: 0; margin-left: 0; justify-content: flex-start; }
  .app-shell.has-sidebar .app-header-actions .ea-header-actions { width: 100%; max-width: 100%; justify-content: flex-start; }
  .app-shell.has-sidebar .app-header-actions .ea-header-switch { white-space: normal; }
  .app-shell:not(.has-sidebar) .ea-header-actions { flex-basis: 100%; }
}

/* --- 4.12 .cj-* (путь клиента) -------------------------------------------- */
/* Каркас — .card.adm-section; здесь только раскладка ленты посещений. */
#view-customer-journey.cj-view { display: none; }
.cj-page { display: flex; flex-direction: column; gap: 16px; }
.cj-result { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cj-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 0 24px 20px; }
.cj-field { display: flex; flex-direction: column; gap: 6px; width: 260px; max-width: 100%; margin: 0; }
.cj-field > .form-label { margin: 0; color: var(--nko-text-secondary); font-size: .75rem; line-height: 1.25; }
.cj-field .form-control { height: 36px; font-size: .875rem; }
.cj-field-error { color: var(--nko-danger); font-size: .75rem; }
.cj-form .btn-custom {
  font-size: .875rem !important; font-weight: 600 !important; padding: 0 14px !important;
  height: 36px; display: inline-flex; align-items: center;
}
.cj-state { padding: 28px 24px; }
.cj-loading { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--nko-text-secondary); font-size: .875rem; }
.cj-state-error { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cj-alert { width: 100%; margin: 0; }
.cj-more { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cj-nowrap { white-space: nowrap; }
.cj-mono { font-family: var(--nko-font-mono); font-size: .8125rem; }
.cj-muted { color: var(--nko-text-muted); }
.cj-confidence { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.cj-confidence-why { color: var(--nko-text-secondary); }
.cj-outcome-error { color: var(--nko-danger); background: color-mix(in srgb, var(--nko-danger) 12%, transparent); }
.cj-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 24px; margin: 0; padding: 0 24px 16px; }
.cj-meta-item { min-width: 0; }
.cj-meta-item dt { margin: 0 0 2px; color: var(--nko-text-muted); font-size: .6875rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.cj-meta-item dd { margin: 0; color: var(--nko-text); font-size: .875rem; overflow-wrap: anywhere; }
.cj-events { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--nko-border-light); }
.cj-event {
  display: grid; grid-template-columns: 64px 28px minmax(0, 1fr); column-gap: 12px; align-items: start;
  padding: 10px 24px; border-bottom: 1px solid var(--nko-border-light);
}
.cj-event:last-child { border-bottom: 0; }
.cj-event-time { color: var(--nko-text-muted); font-family: var(--nko-font-mono); font-size: .75rem; line-height: 28px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cj-event-icon {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: var(--nko-radius-sm); background: var(--nko-bg); color: var(--nko-text-secondary); font-size: .875rem;
}
.cj-event-body { min-width: 0; padding-top: 4px; }
.cj-event-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.cj-event-title { color: var(--nko-dark-blue); font-size: .875rem; font-weight: 600; }
.cj-event-text { min-width: 0; color: var(--nko-text); font-size: .875rem; overflow-wrap: anywhere; }
.cj-event-sub { margin-top: 2px; color: var(--nko-text-muted); font-family: var(--nko-font-mono); font-size: .75rem; overflow-wrap: anywhere; }
.cj-event.is-conversion { background: var(--nko-bg); box-shadow: inset 3px 0 0 var(--nko-primary); }
.cj-event.is-conversion .cj-event-icon { background: var(--nko-primary); color: var(--nko-card-bg); }
.cj-event.is-conversion .cj-event-title { font-size: .9375rem; }
.cj-event-mirapolis { background: var(--nko-bg); box-shadow: inset 3px 0 0 var(--nko-secondary); }
.cj-event-mirapolis .cj-event-icon { background: var(--nko-secondary); color: var(--nko-card-bg); }
.cj-mira-label {
  display: inline-flex; padding: 2px 7px; border-radius: var(--nko-radius-sm);
  background: var(--nko-secondary); color: var(--nko-card-bg); font-size: .6875rem; font-weight: 700;
}
.cj-mira-status { color: var(--nko-text-secondary); font-size: .8125rem; }
.cj-mira-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--nko-text-muted); font-size: .8125rem; }
.cj-mira-notice.is-stale { color: var(--nko-danger); }
.cj-timeline-column { display: flex; flex-direction: column; gap: 16px; }
.cj-visit-continuation { box-shadow: inset 3px 0 0 var(--nko-primary); }
.cj-mira-section .cj-events { border-top: 0; }
.cj-details { margin-top: 4px; }
.cj-details > summary { display: inline-flex; align-items: center; gap: 4px; color: var(--nko-primary); font-size: .8125rem; font-weight: 600; cursor: pointer; list-style: none; }
.cj-details > summary::-webkit-details-marker { display: none; }
.cj-details > summary::before { content: '›'; display: inline-block; width: 12px; transition: transform var(--nko-transition); }
.cj-details[open] > summary::before { transform: rotate(90deg); }
.cj-details > summary:hover { color: var(--nko-primary-dark); }
.cj-details > summary:focus-visible { outline: 2px solid var(--nko-primary); outline-offset: 2px; border-radius: var(--nko-radius-sm); }
.cj-details .adm-table-scroll { margin-top: 8px; border: 1px solid var(--nko-border-light); border-radius: var(--nko-radius); }
.cj-details .adm-table th:first-child, .cj-details .adm-table td:first-child { padding-left: 12px; }
.cj-details .adm-table th:last-child, .cj-details .adm-table td:last-child { padding-right: 12px; }
.cj-details .adm-table td { padding-top: 8px; padding-bottom: 8px; vertical-align: top; }
.cj-field-name { font-family: var(--nko-font-mono); font-size: .8125rem; overflow-wrap: anywhere; }
.cj-field-value { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 767.98px) {
  .cj-form { padding: 0 16px 16px; }
  .cj-field { width: 100%; }
  .cj-form .btn-custom { width: 100%; justify-content: center; }
  .cj-state { padding: 20px 16px; }
  .cj-meta { padding: 0 16px 14px; }
  .cj-event { grid-template-columns: 28px minmax(0, 1fr); padding: 10px 16px; }
  .cj-event-icon { grid-column: 1; grid-row: 1 / span 2; }
  .cj-event-time { grid-column: 2; grid-row: 1; line-height: 1.2; }
  .cj-event-body { grid-column: 2; grid-row: 2; padding-top: 2px; }
  .cj-table td[data-label] { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 8px; }
  .cj-table td[data-label]::before {
    content: attr(data-label); color: var(--nko-text-muted); font-size: .6875rem; font-weight: 600;
    letter-spacing: .03em; text-transform: uppercase;
  }
  /* Вложенная таблица полей: подписи колонок лишние — имя поля над значением. */
  .cj-details .adm-table tr { padding: 8px 12px; }
  .cj-details .adm-table td, .cj-details .adm-table td:first-child, .cj-details .adm-table td:last-child { display: block; padding: 1px 0; }
  .cj-details .cj-table td[data-label]::before { display: none; }
  .cj-details .cj-field-name { color: var(--nko-text-secondary); }
}

/* --- 4.9 .ref-* (ключевые — редактор справочника оценки) ----------------- */
.ref-comp-card {
  background: var(--nko-card-bg);
  border: 1px solid var(--nko-border);
  border-radius: var(--nko-radius-lg);
  box-shadow: var(--nko-shadow-sm);
}
.ref-comp-title { color: var(--nko-dark-blue); font-weight: 600; }
.ref-wysiwyg-toolbar {
  background: var(--nko-bg);
  border: 1px solid var(--nko-border);
  border-radius: var(--nko-radius);
}
.ref-tb-btn {
  color: var(--nko-text-secondary);
  border-radius: 6px;
}
.ref-tb-btn:hover { background: #fff; color: var(--nko-primary); }
.ref-indicator-item {
  border: 1px solid var(--nko-border-light);
  border-radius: var(--nko-radius);
}
.ref-color-preview { border-radius: 5px; border: 1px solid var(--nko-border); }


/* ==========================================================================
   5. МЯГКИЕ OVERRIDES BOOTSTRAP-ВИДА
   ========================================================================== */

/* --- Поля ввода ---------------------------------------------------------- */
.form-control,
.form-select {
  border: 1px solid var(--nko-border);
  border-radius: var(--nko-radius);
  color: var(--nko-text);
  transition: border-color var(--nko-transition), box-shadow var(--nko-transition);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--nko-primary);
  box-shadow: var(--nko-focus-ring);
}
.form-control.is-invalid,
.form-select.is-invalid { border-color: var(--nko-danger); }
.form-control.is-invalid:focus,
.form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(237,0,107,0.15); }
.form-control::placeholder { color: #ADB5BD; }
.form-label { font-weight: 500; color: var(--nko-text-secondary); }

/* --- Табы Bootstrap ------------------------------------------------------ */
.nav-tabs {
  border-bottom: 1px solid var(--nko-border);
}
.nav-tabs .nav-link {
  border: none;
  color: var(--nko-text-secondary);
  font-weight: 500;
  border-radius: var(--nko-radius) var(--nko-radius) 0 0;
}
.nav-tabs .nav-link:hover { color: var(--nko-text); border-color: transparent; }
.nav-tabs .nav-link.active {
  color: var(--nko-primary);
  font-weight: 600;
  background: transparent;
  border-bottom: 2px solid var(--nko-primary);
}
.nav-pills .nav-link {
  color: var(--nko-text-secondary);
  border-radius: var(--nko-radius);
  font-weight: 500;
}
.nav-pills .nav-link.active {
  background: var(--nko-primary);
  color: #fff;
  font-weight: 600;
}

/* --- Бейджи -------------------------------------------------------------- */
.badge { font-weight: 600; }
.badge.bg-primary,
.badge.text-bg-primary { background-color: var(--nko-primary) !important; }
.badge.bg-success,
.badge.text-bg-success { background-color: var(--nko-success) !important; }
.badge.bg-danger,
.badge.text-bg-danger  { background-color: var(--nko-danger) !important; }
.badge.bg-warning,
.badge.text-bg-warning { background-color: var(--nko-warning) !important; color: #5A4500 !important; }
/* «мягкие» бейджи на opacity (admin использует bg-primary/bg-success bg-opacity-10) */
.badge.bg-primary.bg-opacity-10 { background-color: rgba(58,93,174,0.10) !important; color: var(--nko-primary) !important; }
.badge.bg-success.bg-opacity-10 { background-color: rgba(25,135,84,0.10) !important; color: var(--nko-success) !important; }

/* --- Модалки Bootstrap --------------------------------------------------- */
/* Bootstrap по умолчанию: .modal-backdrop 1050, .modal 1055 — НИЖЕ слоёв
   сайдбара (.sidebar 1200, .sidebar-blur-backdrop 1199, off-canvas 1300/1310).
   Из-за этого модалка, открытая при активном hover/off-canvas-состоянии
   сайдбара (например после перехода на вкладку кликом по подпункту), уходит
   ПОД полноэкранный backdrop сайдбара → «окно открывается пустым». Поднимаем
   модалку и её backdrop выше всего стека сайдбара (макс. 1310). .modal-backdrop
   Bootstrap рендерит прямым потомком <body> (вне .app-shell) — селектор
   обязан быть глобальным, без скоупа .app-shell. */
.modal { z-index: 1400; }
.modal-backdrop { z-index: 1390; }
.modal-content {
  border: 1px solid var(--nko-border);
  border-radius: 16px;
  box-shadow: var(--nko-shadow-modal);
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--nko-border-light);
  background: var(--nko-card-bg);
}
.modal-header .modal-title { color: var(--nko-dark-blue); font-weight: 700; }
.modal-footer {
  border-top: 1px solid var(--nko-border-light);
  background: #FBFCFE;
}

/* --- Таблицы Bootstrap (.table) ------------------------------------------ */
.table {
  --bs-table-hover-bg: var(--nko-row-hover);
  --bs-table-striped-bg: var(--nko-zebra);
  color: var(--nko-text);
}
.table > thead th {
  color: var(--nko-text-secondary);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border-bottom: 2px solid var(--nko-border);
  font-weight: 600;
}
.table > :not(caption) > * > * { border-bottom-color: var(--nko-border-light); }

/* --- Прогресс ------------------------------------------------------------ */
.progress {
  background: var(--nko-border);
  border-radius: 999px;
  height: 5px;
}
.progress-bar { background-color: var(--nko-primary); border-radius: 999px; }
.progress-bar.bg-success { background-color: var(--nko-success) !important; }

/* --- Алерты -------------------------------------------------------------- */
.alert { border-radius: var(--nko-radius-md); border-width: 1px; }
.alert-success { background: rgba(25,135,84,0.07); border-color: rgba(25,135,84,0.25); color: #145c39; }
.alert-danger  { background: rgba(237,0,107,0.08); border-color: rgba(237,0,107,0.30); color: #9c0046; }
.alert-warning { background: #FBF0DC; border-color: #F0DCA8; color: #9a5b00; }
.alert-info    { background: #F2F7FF; border-color: #CFE0F7; color: #1d456f; }

/* --- Дропдаун-меню -------------------------------------------------------- */
.dropdown-menu {
  border: 1px solid var(--nko-border);
  border-radius: var(--nko-radius-md);
  box-shadow: var(--nko-shadow-md);
  padding: 6px;
}
.dropdown-item {
  border-radius: 7px;
  color: var(--nko-text);
  font-size: 0.875rem;
}
.dropdown-item:hover,
.dropdown-item:focus { background: var(--nko-bg); color: var(--nko-text); }
.dropdown-item.active,
.dropdown-item:active { background: var(--nko-primary); color: #fff; }

/* --- Switch / Checkbox / Radio ------------------------------------------- */
.form-check-input:checked {
  background-color: var(--nko-primary);
  border-color: var(--nko-primary);
}
.form-check-input:focus {
  border-color: var(--nko-primary);
  box-shadow: var(--nko-focus-ring);
}
.form-switch .form-check-input:checked { background-color: var(--nko-primary); }

/* --- Спиннер ------------------------------------------------------------- */
.spinner-border { color: var(--nko-primary); }


/* ==========================================================================
   6. НОВЫЕ КОМПОНЕНТЫ ДЛЯ ФАЗ 2-4
   ========================================================================== */

/* --- 6.1 App-shell / header / main / container --------------------------- */
.app-shell { display: flex; min-height: 100vh; }
.main-content {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--nko-bg);
}
.app-header {
  height: var(--nko-header-height); flex: none;
  background: #fff; border-bottom: 1px solid var(--nko-border);
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
}
.app-header h1 {
  margin: 0; font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--nko-dark-blue);
}
.app-main { flex: 1; overflow: auto; padding: 26px 28px; }
.app-main--bare { padding: 0; }   /* экран входа (сплит) — на весь вьюпорт, без паддинга */
.page-content-wide { width: 100%; }
/* .container внутри app-shell — узкая контентная зона */
.app-main .container { max-width: 1200px; margin: 0 auto; }

/* топбар-примитивы (колокол, разделитель, аватар) */
.app-header .header-bell {
  position: relative; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; color: var(--nko-text-secondary);
  background: transparent; border: none; cursor: pointer;
}
.app-header .header-bell:hover { background: var(--nko-bg); }
.app-header .header-bell .dot {
  position: absolute; top: 7px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--nko-danger); border: 2px solid #fff;
}
.app-header .header-divider { width: 1px; height: 30px; background: var(--nko-border); }
.app-header .header-user { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.app-header .header-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--nko-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.app-header .header-user-name { font-size: 13.5px; font-weight: 600; color: var(--nko-text); line-height: 1.2; }
.app-header .header-user-role { font-size: 12px; color: var(--nko-text-muted); }

/* --- 6.2 Sidebar (rail + expanded + drawer + overlay) -------------------- */
.sidebar {
  background: linear-gradient(180deg, var(--nko-sidebar-bg-top) 0%, var(--nko-sidebar-bg-bottom) 100%);
  color: #fff;
  display: flex; flex-direction: column;
  width: var(--nko-sidebar-width); flex: none;
  overflow: hidden;
  transition: width var(--nko-transition);
}
.sidebar.rail { width: var(--nko-rail-width); }

/* Контент сайдбара ВСЕГДА выложен в ширину развёрнутого меню (248px); внешняя
   ширина .sidebar анимируется и клипует его (overflow:hidden). Поэтому подписи в
   2 строки разложены один раз и НЕ переверстываются при свёртке/раскрытии —
   пункты, аватар и кнопки стоят на одной вертикальной позиции в обоих состояниях
   (курсор над свёрнутым пунктом попадает в тот же пункт после раскрытия). Текст,
   который иначе «выглядывал» бы в видимые 72px рельсы, гасится opacity (высоту
   держит всегда-выложенный контент). */
.sidebar-head, .sidebar-nav, .sidebar-foot { width: var(--nko-sidebar-width); }
.nav-item-label, .nav-group-label,
.sidebar-head .brand-title, .sidebar-head .brand-sub,
.sidebar-user-meta, .sidebar-support,
.sidebar .nav-item .chevron,
.sidebar-foot .collapse-btn span { transition: opacity var(--nko-transition); }

.sidebar-head {
  height: var(--nko-header-height); flex: none;
  display: flex; align-items: center; gap: 11px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-head .brand-title { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.sidebar-head .brand-sub   { font-size: 10.5px; color: rgba(255,255,255,0.5); }
.sidebar.rail .brand-title,
.sidebar.rail .brand-sub { opacity: 0; }

.sidebar-nav {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 12px;
  display: flex; flex-direction: column; gap: 2px;
  scrollbar-width: thin;                                   /* Firefox */
  scrollbar-color: rgba(255,255,255,0.22) transparent;
}
/* Аккуратный фирменный скроллбар бокового меню (тонкий, на тёмном фоне);
   в рельсе он за пределами видимых 72px и клипуется .sidebar overflow:hidden. */
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.34); }
.nav-group-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.32);
  padding: 13px 12px 5px;
}
/* В рельсе заголовки групп гаснут, но СОХРАНЯЮТ высоту — резервируют место,
   чтобы при раскрытии по hover пункты не «прыгали». */
.sidebar.rail .nav-group-label { opacity: 0; }

.nav-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px;
  border-radius: var(--nko-radius);
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.72);
  cursor: pointer;
  transition: background var(--nko-transition), color var(--nko-transition);
}
.nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-item .icon { flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }

.nav-item.active {
  background: rgba(255,255,255,0.10);
  color: #fff; font-weight: 600;
}
.nav-item.active::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0;
  background: var(--nko-primary-light);
}

.nav-item.has-children.open {
  background: rgba(255,255,255,0.05);
  color: #fff; font-weight: 600;
}
.nav-item .chevron {
  margin-left: auto;
  stroke: rgba(255,255,255,0.45); stroke-width: 2.2;
  transition: transform var(--nko-transition);
}
.nav-item.open .chevron { transform: rotate(180deg); }

.nav-subnav {
  margin: 1px 0 1px 21px;
  border-left: 1px solid rgba(255,255,255,0.12);
  padding-left: 4px;
  display: flex; flex-direction: column; gap: 1px;
}
.nav-subitem {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; font-family: inherit;
  padding: 7px 12px; border-radius: 7px;
  font-size: 12.5px; cursor: pointer;
  color: rgba(255,255,255,0.6);
  transition: background var(--nko-transition), color var(--nko-transition);
}
.nav-subitem:hover  { color: #fff; background: rgba(255,255,255,0.06); }
.nav-subitem.active { color: #fff; font-weight: 600; background: rgba(108,172,228,0.16); }

.sidebar-foot {
  flex: none; padding: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.sidebar-foot .collapse-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--nko-radius);
  color: rgba(255,255,255,0.6); font-size: 13px; cursor: pointer;
  background: none; border: none; width: 100%; text-align: left;
}
/* Закреплено — акцентный цвет булавки и подписи (как .pinned в НКО) */
.sidebar-foot .collapse-btn.pinned { color: var(--nko-primary-light); }
.sidebar-foot .collapse-btn:hover { background: rgba(255,255,255,0.07); color: #fff; }
.sidebar.rail .sidebar-foot .collapse-btn span { opacity: 0; }

/* Рельса: геометрия пунктов НЕ меняется (иконки слева, та же высота — контент
   выложен в 248px и клипуется). Подпись и шеврон лишь гаснут (не display:none),
   высоту строки держит всегда-выложенная 2-строчная подпись. */
.sidebar.rail .nav-item-label,
.sidebar.rail .nav-item .chevron { opacity: 0; }

/* Подпункты активного модуля в рельсе: текст невидим (высота сохраняется), под
   осью иконок — схематичная засечка той же высоты, что текстовый подпункт при
   раскрытии → разделы ниже не сдвигаются при hover-раскрытии. */
.sidebar.rail .nav-subnav { margin-left: 0; padding-left: 0; border-left: none; }
.sidebar.rail .nav-subitem { color: transparent; position: relative; }
.sidebar.rail .nav-subitem::before {
  content: ""; position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.28);
}
.sidebar.rail .nav-subitem.active::before { width: 18px; height: 3px; background: var(--nko-primary-light); }
.sidebar.rail .nav-subitem:hover { background: none; }

.rail-divider {
  height: 1px; width: 40px;
  background: rgba(255,255,255,0.09);
  margin: 6px auto;
}

/* Размывающий бэкдроп под авто-раскрытой рельсой (desktop hover-expand) */
.sidebar-blur-backdrop {
  position: fixed; inset: 0;
  background: rgba(7,29,73,0.18); backdrop-filter: blur(2px);
  z-index: 90;
}

/* Off-canvas drawer (<900) */
.sidebar-overlay {
  position: fixed; inset: 0;
  background: rgba(7,29,73,0.45); backdrop-filter: blur(1px);
  z-index: 120;
}
/* --- 6.3 Слот действий модуля в мобильной шапке -------------------------- */
#mobile-action-slot { display: flex; align-items: center; gap: 8px; }
#mobile-action-slot .btn { height: 34px; padding: 0 0.6rem; font-size: 0.8125rem; }

/* --- 6.4 Module-grid / module-card --------------------------------------- */
.module-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.module-card {
  background: #fff; border: 1px solid var(--nko-border);
  border-radius: var(--nko-radius-lg); padding: 20px;
  box-shadow: var(--nko-shadow); cursor: pointer;
  transition: box-shadow var(--nko-transition), transform var(--nko-transition), border-color var(--nko-transition);
}
.module-card:hover {
  box-shadow: var(--nko-shadow-md);
  transform: translateY(-3px);
  border-color: #CFE0F7;
}
.module-card .icon {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 13px;
  background: linear-gradient(135deg, #EAF1FB, #D6E6FA);
  color: var(--nko-primary);
  display: flex; align-items: center; justify-content: center;
}
.module-card .title { font-size: 15px; font-weight: 700; color: var(--nko-dark-blue); margin-bottom: 5px; }
.module-card .desc  { font-size: 12.5px; line-height: 1.45; color: var(--nko-text-secondary); }

/* --- 6.5 Metric-card (кликабельная KPI-плитка) --------------------------- */
.metric-card {
  background: #fff; border: 1px solid var(--nko-border);
  border-radius: var(--nko-radius-md); padding: 12px 14px;
  cursor: pointer;
  transition: border-color var(--nko-transition), box-shadow var(--nko-transition);
}
.metric-card:hover { border-color: #CFE0F7; }
.metric-card.active {
  border-color: var(--nko-primary);
  box-shadow: 0 0 0 3px rgba(58,93,174,0.10);
}
.metric-card .label { font-size: 12px; color: var(--nko-text-secondary); }
.metric-card .value {
  font-size: 24px; font-weight: 700; color: var(--nko-dark-blue);
  margin-top: 2px; font-variant-numeric: tabular-nums;
}
.metric-card .value.is-success { color: var(--nko-success); }

/* --- 6.6 Status-pill / badge-* статусы ----------------------------------- */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }

/* Статусные триплеты (fg / bg / dot). Можно повесить и на .badge, и на .status-pill */
.badge-planned,
.status-pill.badge-planned     { color: #2A7AB5; background: rgba(108,172,228,0.15); }
.badge-planned .dot,
.status-pill.badge-planned .dot { background: #2A7AB5; }

.badge-in-progress,
.status-pill.badge-in-progress { color: #997404; background: rgba(255,193,8,0.15); }
.badge-in-progress .dot,
.status-pill.badge-in-progress .dot { background: #FFC108; }

.badge-completed,
.status-pill.badge-completed   { color: #198754; background: rgba(25,135,84,0.15); }
.badge-completed .dot,
.status-pill.badge-completed .dot { background: #198754; }

.badge-cancelled,
.status-pill.badge-cancelled   { color: #5A6B82; background: rgba(108,117,125,0.15); }
.badge-cancelled .dot,
.status-pill.badge-cancelled .dot { background: #8A98AB; }

/* --- 6.7 List-card / card-list (мобильные строки-карточки) --------------- */
.card-list { display: flex; flex-direction: column; gap: 10px; }
.list-card {
  background: var(--nko-card-bg);
  border: 1px solid var(--nko-border);
  border-radius: 13px; padding: 13px 15px;
  box-shadow: var(--nko-shadow-sm);
}
.list-card-title { font-size: 14px; font-weight: 700; color: var(--nko-dark-blue); }
.list-card-subtitle { font-size: 12px; color: var(--nko-text-muted); }
.list-card-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.list-card-label { color: var(--nko-text-muted); }
.list-card-value { color: var(--nko-text); text-align: right; }

/* --- 6.8 Bottom-sheet ---------------------------------------------------- */
.bottom-sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(7,29,73,0.45);
  z-index: 1200;
  display: flex; align-items: flex-end;
}
.bottom-sheet {
  width: 100%; max-height: 85vh;
  background: var(--nko-card-bg);
  border-radius: 20px 20px 0 0;
  padding: 12px 18px 18px;
  overflow-y: auto;
}
.bottom-sheet-handle {
  width: 38px; height: 4px; border-radius: 999px;
  background: #D6DEE9; margin: 0 auto 12px;
}
.bottom-sheet-title { font-size: 16px; font-weight: 700; color: var(--nko-dark-blue); }

/* --- 6.9 Appmodal* (собственная модалка дизайн-системы) ------------------ */
.appmodal-overlay {
  position: fixed; inset: 0;
  background: rgba(7,29,73,0.45); backdrop-filter: blur(2px);
  z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
}
.appmodal {
  width: 560px; max-width: 100%; max-height: 90vh;
  background: var(--nko-card-bg); border-radius: 16px;
  box-shadow: var(--nko-shadow-modal);
  display: flex; flex-direction: column; overflow: hidden;
}
.appmodal-sm { width: 440px; }
.appmodal-md { width: 560px; }
.appmodal-lg { width: 680px; }
.appmodal-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--nko-border-light);
  display: flex; align-items: flex-start; gap: 12px;
}
.appmodal-title { font-size: 17px; font-weight: 700; color: var(--nko-dark-blue); }
.appmodal-subtitle { font-size: 13px; color: var(--nko-text-muted); }
.appmodal-close {
  width: 34px; height: 34px; background: #F6F8FB; border: none;
  border-radius: 8px; color: var(--nko-text-secondary);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  margin-left: auto; flex: none;
}
.appmodal-body { padding: 22px 24px; overflow-y: auto; }
.appmodal-foot {
  padding: 16px 24px;
  border-top: 1px solid var(--nko-border-light);
  background: #FBFCFE;
  display: flex; gap: 9px; justify-content: flex-end;
}

/* --- 6.10 Toast ---------------------------------------------------------- */
.toast-stack {
  position: fixed; right: 20px; bottom: 20px;
  z-index: 1300; display: flex; flex-direction: column; gap: 10px;
}
.toast {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.875rem 1rem; border-radius: var(--nko-radius-md);
  background: var(--nko-card-bg); box-shadow: var(--nko-shadow-lg);
  border: 1px solid var(--nko-border-light);
  min-width: 280px;
  animation: nkoToastIn 180ms ease;
}
.toast.is-leaving { animation: nkoToastOut 180ms ease forwards; }
.toast-icon {
  width: 20px; height: 20px; border-radius: 50%;
  color: #fff; font-weight: 700; font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.toast-success .toast-icon { background: var(--nko-success); }
.toast-error   .toast-icon { background: var(--nko-danger); }
.toast-warning .toast-icon { background: var(--nko-warning); color: var(--nko-text); }
.toast-info    .toast-icon { background: var(--nko-primary); }
.toast-body { font-size: 0.875rem; color: var(--nko-text); }

/* --- 6.11 Tab-btn / view-switcher (segmented) ---------------------------- */
.tab-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0.5rem 1rem; border-radius: var(--nko-radius);
  font-size: 0.875rem; font-weight: 500;
  border: 1px solid var(--nko-border);
  background: var(--nko-card-bg); color: var(--nko-text-secondary);
  cursor: pointer; transition: all var(--nko-transition);
}
.tab-btn:hover { color: var(--nko-text); border-color: #CFE0F7; }
.tab-btn.active {
  background: var(--nko-primary); border-color: var(--nko-primary);
  color: #fff; font-weight: 600;
}
.tab-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  font-size: 0.75rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.tab-btn.active .tab-badge { background: rgba(255,255,255,0.25); color: #fff; }
.tab-btn:not(.active) .tab-badge { background: var(--nko-danger); color: #fff; }

.view-switcher {
  display: inline-flex; background: #fff;
  border: 1px solid var(--nko-border); border-radius: var(--nko-radius); padding: 3px;
}
.view-switcher .tab-btn {
  border: none; border-radius: 7px; height: 32px; padding: 0 14px;
  font-weight: 600; background: transparent; color: var(--nko-text-secondary);
}
.view-switcher .tab-btn.active { background: var(--nko-primary); color: #fff; }

/* --- 6.12 Empty-state ---------------------------------------------------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 14px 6px;
}
.empty-state .icon {
  width: 54px; height: 54px; border-radius: 15px; margin-bottom: 13px;
  background: linear-gradient(135deg, #EAF1FB, #D6E6FA);
  color: var(--nko-primary);
  display: flex; align-items: center; justify-content: center;
}
.empty-state .title { font-size: 14.5px; font-weight: 700; color: var(--nko-dark-blue); }
.empty-state .subtitle { font-size: 12.5px; color: var(--nko-text-muted); margin-top: 5px; line-height: 1.45; }

/* --- 6.13 Состояния: skel / spinner / progress-indeterminate / dropzone / offline */
.skel {
  background: linear-gradient(90deg, #eef2f7 25%, #e3e9f1 37%, #eef2f7 63%);
  background-size: 800px 100%;
  animation: nkoShimmer 1.4s infinite;
  border-radius: 6px;
}

.loading-spinner {
  border: 3px solid var(--nko-border);
  border-top-color: var(--nko-primary);
  border-radius: 50%;
  width: 36px; height: 36px;
  animation: nkoSpin .8s linear infinite;
}
.loading-spinner.sm { width: 14px; height: 14px; border-width: 2px; }

/* Индетерминированный полосатый прогресс (barber) */
.progress-indeterminate { height: 5px; background: var(--nko-border); border-radius: 999px; overflow: hidden; }
.progress-indeterminate > .bar {
  height: 100%; border-radius: 999px;
  background: repeating-linear-gradient(45deg, #2E63B0 0 9px, #4577c4 9px 18px);
  background-size: 34px 34px;
  animation: nkoBarber 1s linear infinite;
}

.dropzone {
  border: 2px dashed #B6C9E4; background: #F2F7FF;
  border-radius: 12px; padding: 26px 18px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; cursor: pointer;
  transition: border-color var(--nko-transition), background var(--nko-transition);
}
.dropzone:hover,
.dropzone.is-dragover { border-color: var(--nko-primary); background: #EAF1FB; }
.dropzone .icon {
  width: 48px; height: 48px; border-radius: 13px; background: #fff;
  color: var(--nko-primary); margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(16,32,64,0.06);
  display: flex; align-items: center; justify-content: center;
}

.offline-pill {
  background: #FBF0DC; color: #9a5b00;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #F0DCA8; border-radius: var(--nko-radius-md);
  padding: 12px 16px;
}
.offline-pill .dot {
  background: #d98a00; width: 6px; height: 6px; border-radius: 50%;
  animation: nkoPulseDot 1.5s infinite;
}

/* --- 6.14 Лог-панель (тёмная monospace, цветные уровни) ------------------ */
.log-panel {
  background: #0c2548; color: #9FB3CC;
  border-radius: 10px; padding: 13px 15px;
  font-family: var(--nko-font-mono); font-size: 12px; line-height: 1.7;
  overflow: auto;
}
.log-line { white-space: pre-wrap; word-break: break-word; }
.log-line.ok    { color: #5FD39A; }
.log-line.warn  { color: #FFD75E; }
.log-line.err   { color: #FF7BB0; }
.log-line.skip  { color: #9FB3CC; }
.log-line.info  { color: #7FB5EB; }
.log-line.head  { color: #7FB5EB; }

/* --- 6.15 Степпер (горизонтальный с галочками + номерные шаги) ----------- */
.stepper {
  display: flex; align-items: center; gap: 0;
}
.stepper .step {
  display: flex; align-items: center; gap: 8px;
  color: var(--nko-text-muted); font-size: 13px; font-weight: 500;
}
.stepper .step-num {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1.5px solid var(--nko-border);
  font-size: 12px; font-weight: 700; color: var(--nko-text-muted);
}
.stepper .step.current .step-num { background: var(--nko-primary); border-color: var(--nko-primary); color: #fff; }
.stepper .step.current { color: var(--nko-dark-blue); font-weight: 600; }
.stepper .step.done .step-num { background: var(--nko-success); border-color: var(--nko-success); color: #fff; }
.stepper .step.done { color: var(--nko-text-secondary); }
#assessStepper .step { cursor: pointer; }
#assessStepper .step.disabled { cursor: default; opacity: .55; }
.stepper .step-connector { flex: 1; height: 2px; background: var(--nko-border); min-width: 24px; margin: 0 6px; }
.stepper .step.done + .step-connector,
.stepper .step-connector.done { background: var(--nko-success); }

/* Вертикальный номерной степпер (модалка-справка трудоустройства).
   Самодостаточен: коробку и флекс задаём здесь же — селекторы .stepper .step(-num)
   на класс .stepper-vertical НЕ распространяются, иначе бейджи схлопываются до цифры. */
.stepper-vertical { display: flex; flex-direction: column; gap: 14px; }
.stepper-vertical .step { display: flex; align-items: flex-start; gap: 12px; }
.stepper-vertical .step-num {
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.stepper-vertical .step-num.s-blue   { background: var(--nko-primary); border-color: var(--nko-primary); color: #fff; }
.stepper-vertical .step-num.s-warning { background: var(--nko-warning); border-color: var(--nko-warning); color: var(--nko-text); }
.stepper-vertical .step-num.s-muted  { background: var(--nko-text-muted); border-color: var(--nko-text-muted); color: #fff; }

/* --- 6.16 Мультиселект-теги ---------------------------------------------- */
.multiselect {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  border: 1px solid var(--nko-border); border-radius: var(--nko-radius);
  padding: 6px 8px; background: #fff; min-height: 40px;
}
.multiselect.is-focused {
  border-color: var(--nko-primary);
  box-shadow: 0 0 0 3px rgba(58,93,174,0.12);
}
.ms-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: #ECF1FA; color: var(--nko-primary);
  font-size: 12px; font-weight: 600;
  padding: 3px 6px 3px 9px; border-radius: 6px;
}
.ms-tag .ms-tag-x { cursor: pointer; display: inline-flex; opacity: .75; }
.ms-tag .ms-tag-x:hover { opacity: 1; }
.ms-option {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px; border-radius: 7px; cursor: pointer;
}
.ms-option:hover { background: #F6F8FB; }
.ms-checkbox {
  width: 17px; height: 17px; border-radius: 5px; flex: none;
  border: 1.5px solid #CFD8E5; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.ms-option.checked .ms-checkbox { border-color: var(--nko-primary); background: var(--nko-primary); }

/* --- 6.17 Pagination ----------------------------------------------------- */
.pagination-nko {
  display: flex; align-items: center; gap: 0.25rem;
  margin-top: 1rem; justify-content: center;
}
.pagination-btn {
  min-width: 2rem; height: 2rem; padding: 0 0.5rem;
  border: 1px solid var(--nko-border); border-radius: var(--nko-radius-sm);
  background: #fff; color: var(--nko-text); font-size: 0.8125rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pagination-btn:hover:not(:disabled):not(.active) {
  background: var(--nko-bg); border-color: var(--nko-primary); color: var(--nko-primary);
}
.pagination-btn.active { background: var(--nko-primary); border-color: var(--nko-primary); color: #fff; }
.pagination-btn:disabled { opacity: .5; cursor: not-allowed; }
.pagination-info { font-size: 0.8125rem; color: var(--nko-text-muted); margin-left: 1rem; }


/* ==========================================================================
   7. БРЕЙКПОИНТЫ И МОБИЛЬНЫЕ ПРАВИЛА
   Телефон ≤599, планшет 600-899, десктоп ≥900. Десктоп — основной.
   ========================================================================== */

/* --- Планшет: 600-899 (off-canvas, таблицы остаются со скроллом) --------- */
@media (max-width: 899px) {
  .module-grid { grid-template-columns: repeat(2, 1fr); }
  .app-main { padding: 18px 16px; }
  /* сайдбар в потоке не показываем — он становится off-canvas (см. <900) */
  .sidebar { display: none; }
}

/* --- Телефон: ≤599 ------------------------------------------------------- */
@media (max-width: 599px) {
  .module-grid { grid-template-columns: 1fr; }

  /* Модалка → fullscreen (и собственная appmodal, и Bootstrap-модалка) */
  .appmodal {
    width: 100%; max-width: 100%;
    height: 100dvh; max-height: none; border-radius: 0;
  }
  .appmodal-foot .btn { flex: 1; }
  .appmodal-overlay { padding: 0; }

  .modal-dialog:not(.modal-dialog-scrollable) {
    margin: 0; max-width: 100%; min-height: 100dvh;
  }
  .modal-content { border-radius: 0; min-height: 100dvh; }

  /* Тач-таргеты инпутов */
  .form-control, .form-select { min-height: 44px; border-radius: var(--nko-radius-md); }
  .btn { min-height: 40px; }

  /* segmented чуть выше */
  .view-switcher .tab-btn { height: 34px; }

  /* Прогресс чуть толще */
  .progress, .progress-indeterminate { height: 6px; }

  /* Тосты — снизу во всю ширину */
  .toast-stack { left: 12px; right: 12px; bottom: 12px; }
  .toast { min-width: 0; width: 100%; }

  /* Bottom-sheet ограничение высоты как в макете */
  .bottom-sheet { max-height: 78%; }

  /* Лента фильтр-чипов — горизонтальный скролл */
  .chip-scroll { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .chip-scroll > * { flex: none; white-space: nowrap; }
}


/* ==========================================================================
   7. КАРКАС — фиксированный сайдбар, app-header, off-canvas drawer
   Загружается последним → переопределяет нужное из секции 6 и @media выше.
   ========================================================================== */

/* --- Раскладка: фиксированный сайдбар + сдвиг контента ------------------- */
.app-shell.has-sidebar .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 1200; }
.app-shell.has-sidebar .main-content { margin-left: var(--nko-sidebar-width); transition: margin-left var(--nko-transition); }
.app-shell.has-sidebar.rail .main-content { margin-left: var(--nko-rail-width); }
.app-shell:not(.has-sidebar) .main-content { margin-left: 0; }

.sidebar-logo { width: 30px; height: 30px; flex: none; object-fit: contain; }

/* --- app-header: правый блок (колокол + юзер) --------------------------- */
/* Шапка модуля стоит НИЖЕ оверлейной системы: hover-раскрытие рельсы (сайдбар
   1200 + blur-backdrop 1199) накрывает и затемняет шапку, а Bootstrap-модалки
   (1055 / backdrop 1050) выводятся поверх неё. z-index:1 (с position:relative)
   только поднимает шапку над обычным контентом app-main, не над оверлеями. */
.app-shell.has-sidebar .app-header { position: relative; z-index: 1; }
.app-header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
/* Действия разных модулей телепортируются сюда с разными историческими классами.
   Слот задаёт единый размер, чтобы primary/outline/ghost не меняли высоту шапки. */
.app-header-actions .btn {
  height: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: .8125rem !important;
  line-height: 1 !important;
  white-space: nowrap;
}
.app-header .header-user-meta { display: flex; flex-direction: column; }
.app-header .header-user-chev { color: var(--nko-text-muted); flex: none; }
.app-hamburger { display: none; background: none; border: none; color: #3a4a60; padding: 6px; margin-left: -6px; cursor: pointer; }
.app-footer { padding: 14px 24px; border-top: 1px solid var(--nko-border); }

/* --- Подпункты: показываем у раскрытого (active) модуля в ОБОИХ состояниях --
   (в рельсе — схематично засечками, см. секцию рельсы), чтобы при hover-раскрытии
   список разделов ниже не сдвигался. */
.nav-subnav { display: none; }
.nav-item.has-children.open + .nav-subnav { display: flex; flex-direction: column; }
/* Подпись и шеврон has-children в рельсе гасит общее правило .sidebar.rail
   .nav-item-label / .chevron (см. секцию рельсы); иконка остаётся слева. */
.sidebar-blur-backdrop { position: fixed; inset: 0; z-index: 1199; background: rgba(7,29,73,0.12); backdrop-filter: blur(1px); }

/* --- Off-canvas drawer на <900 (одноэлементный сайдбар) ----------------- */
@media (max-width: 899px) {
  .app-shell.has-sidebar .main-content { margin-left: 0; }
  .sidebar { display: flex; }   /* отменяем display:none из секции «Планшет» */
  .app-shell.has-sidebar .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: var(--nko-sidebar-width);
    transform: translateX(-100%); transition: transform var(--nko-transition);
    z-index: 1310; box-shadow: none;
  }
  .app-shell.has-sidebar .sidebar:not(.open) { box-shadow: none !important; }
  .app-shell.has-sidebar .sidebar.open { transform: none; box-shadow: 8px 0 30px rgba(0,0,0,0.35); }
  .app-hamburger { display: inline-flex; align-items: center; }
  .sidebar-overlay { z-index: 1300; }
  .sidebar-blur-backdrop { display: none; }

  /* В мобильном drawer рельса не действует — всегда полный сайдбар: всё, что в
     рельсе гасилось/схематизировалось, возвращаем в видимый вид. */
  .app-shell.has-sidebar.rail .main-content { margin-left: 0; }
  .sidebar.rail { width: var(--nko-sidebar-width); }
  .sidebar.rail .nav-item-label,
  .sidebar.rail .nav-item .chevron,
  .sidebar.rail .sidebar-user-meta,
  .sidebar.rail .sidebar-support,
  .sidebar.rail .brand-title,
  .sidebar.rail .brand-sub,
  .sidebar.rail .nav-group-label,
  .sidebar.rail .sidebar-login-label,
  .sidebar.rail .sidebar-foot .collapse-btn span { opacity: 1 !important; }
  .sidebar.rail .nav-subitem { color: rgba(255,255,255,0.6) !important; }
  .sidebar.rail .nav-subitem.active { color: #fff !important; }
  .sidebar.rail .nav-subitem::before { display: none !important; }
  .sidebar.rail .nav-item.has-children.open + .nav-subnav { display: flex; }
}


/* ==========================================================================
   8. ФАЗА 3 — оверрайды модуль-специфичных классов (по аудиту).
   Грузится последним → перебивает mira.css при равной специфичности.
   Чинит цвета классов, которых фундамент ещё не покрывал.
   ========================================================================== */

/* --- Bootstrap-утилиты текста, которые НЕ покрываются ремапом --bs-*-rgb --- */
.text-warning { color: #997404 !important; }                 /* жёлтый текст нечитаем → тёмно-жёлтый НКО */
.text-muted   { color: var(--nko-text-secondary) !important; }

/* --- Bootstrap outline-кнопки (пресеты, фильтры) → нейтраль + синий hover --- */
.btn-outline-secondary {
  --bs-btn-color: var(--nko-text-secondary);
  --bs-btn-border-color: var(--nko-border);
  --bs-btn-hover-bg: var(--nko-bg);
  --bs-btn-hover-color: var(--nko-primary);
  --bs-btn-hover-border-color: var(--nko-primary);
  --bs-btn-active-bg: var(--nko-bg);
  --bs-btn-active-color: var(--nko-primary);
  --bs-btn-active-border-color: var(--nko-primary);
}
.btn-outline-danger {
  --bs-btn-color: var(--nko-danger);
  --bs-btn-border-color: var(--nko-danger);
  --bs-btn-hover-bg: var(--nko-danger);
  --bs-btn-hover-border-color: var(--nko-danger);
  --bs-btn-active-bg: #D10060;
}

/* --- Чип роли (admin) + дропдаун выбора ролей -------------------------------- */
.role-chip { border-radius: 10px; padding: .2rem .6rem; font-size: .78rem; font-weight: 500; }
.adm-roles-drop {
  background: #fff; border: 1px solid var(--nko-border);
  border-radius: var(--nko-radius-md); box-shadow: var(--nko-shadow-md);
}
/* Дропдаун ролей абсолютный — overflow модалки не должен его обрезать */
.adm-modal-body { overflow: visible !important; }
.adm-modal-body ~ .modal-footer,
.modal-content:has(.adm-modal-body) { overflow: visible; }

/* === Оценка 360 (mira.css классы) ========================================= */
/* Светофор зон оценки — в тональности НКО (danger розовый, warning #FFC108) */
.assess-score-red    { background: rgba(237,0,107,.12);  color: #ED006B; }
.assess-score-orange { background: rgba(224,168,0,.15);  color: #9A6E00; }
.assess-score-yellow { background: rgba(255,193,8,.15);  color: #997404; }
.assess-score-lime   { background: rgba(120,180,40,.15); color: #5B7A1E; }
.assess-score-green  { background: rgba(25,135,84,.15);  color: #198754; }
.assess-dept-row td  { background: #F2F7FF; }
.assess-data-row.assess-expanded { background: var(--nko-row-hover); }
.procedure-card { background: var(--nko-card-bg); border: 1px solid var(--nko-border); }
.procedure-card:has(input:checked) { border-color: var(--nko-primary); box-shadow: var(--nko-focus-ring); }
.btn-icon:hover { background: var(--nko-bg); }
.btn-icon.text-danger:hover { background: rgba(237,0,107,.12); }
.ref-indicator-num { color: var(--nko-text-muted); }
.ref-indicator-item:hover { border-color: var(--nko-primary); }
.ref-comp-card .accordion-button:not(.collapsed) { color: var(--nko-primary); }

/* === Отклики на вакансии (mira.css классы) ================================ */
.vacancy-pct-bar { background: var(--nko-border); }
.vacancy-pct-fill.pct-low  { background: var(--nko-danger); }
.vacancy-pct-fill.pct-mid  { background: var(--nko-warning); }
.vacancy-pct-fill.pct-high { background: var(--nko-success); }
.vacancy-count-badge { background: rgba(58,93,174,.10); color: var(--nko-text-secondary); }
.vacancy-table .row-num { color: var(--nko-text-muted); }
.vacancy-detail-row td { background: var(--nko-bg); }
.vacancy-detail-panel .table th { color: var(--nko-text-secondary); }

/* --- Заголовок раздела — только в app-header. Внутренний .unite-header больше
   не дублирует заголовок: синяя плашка убрана, текст h4 скрыт, действия
   (сброс кеша / справка / env / бар представлений) прижаты вправо тонким тулбаром. */
/* Только в авторизованном каркасе (.has-sidebar) — там заголовок даёт app-header.
   В публичной раскладке (без сайдбара/app-header) .unite-header остаётся заголовком. */
.app-shell.has-sidebar .unite-header {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 4px !important;
  min-height: 0 !important;
  display: flex;
  justify-content: flex-end;
}
.app-shell.has-sidebar .unite-header > h4 { display: none !important; }
/* действия (второй ребёнок .unite-header) — даём им воздух, если они есть */
.app-shell.has-sidebar .unite-header > *:not(h4) { margin-bottom: 8px; }

/* --- Result-баннер (готово/ошибка с иконкой-файлом) — teachbase/events/участники --- */
.result-banner { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--nko-radius-lg); border: 1px solid; }
.result-banner.success { background: rgba(25,135,84,.07);  border-color: rgba(25,135,84,.25); }
.result-banner.error   { background: rgba(237,0,107,.07);  border-color: rgba(237,0,107,.25); }
.result-banner .rb-icon { width: 46px; height: 46px; flex: none; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--nko-shadow-sm); font-size: 22px; }
.result-banner.success .rb-icon { color: var(--nko-success); }
.result-banner.error   .rb-icon { color: var(--nko-danger); }
.result-banner .rb-body { flex: 1; min-width: 0; }
.result-banner .rb-title { font-weight: 700; color: var(--nko-dark-blue); }
.result-banner .rb-sub { font-size: 12.5px; color: var(--nko-text-secondary); }
.result-banner .rb-action { flex: none; }

/* --- Чеклист этапов (выгрузка участников) ------------------------------- */
.stage-list { display: flex; flex-direction: column; gap: 9px; }
.stage-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--nko-text-muted); }
.stage-row .stage-mark { width: 20px; height: 20px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--nko-border); color: var(--nko-text-muted); font-size: 11px; }
.stage-row.done { color: var(--nko-text); }
.stage-row.done .stage-mark { background: var(--nko-success); border-color: var(--nko-success); color: #fff; }
.stage-row.current { color: var(--nko-dark-blue); font-weight: 600; }
.stage-row.current .stage-mark { border-color: var(--nko-primary); color: var(--nko-primary); }


/* ==========================================================================
   9. Сайдбар: ссылки без подчёркивания + учётка пользователя в футере (как NKO)
   ========================================================================== */
.sidebar a,
.sidebar .nav-item,
.sidebar .nav-subitem,
.sidebar .nav-item-main { text-decoration: none; }
.sidebar a:hover, .sidebar .nav-item:hover { text-decoration: none; }

/* Учётка в футере сайдбара (NKO-паттерн): аватар + имя/роль + выход */
.sidebar-foot { display: flex; flex-direction: column; gap: 8px; }
/* padding-left:5px → центр аватара (34px) ложится на ось иконок разделов (центр
   на 34px от левого края), одинаково в рельсе и раскрытом — без скачка. */
.sidebar-user { display: flex; align-items: center; gap: 0.5rem; padding-left: 5px; }
.sidebar-user .sidebar-avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: var(--nko-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.sidebar-user-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sidebar-user-name { font-weight: 600; font-size: 0.8125rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-role { font-size: 0.6875rem; color: rgba(255,255,255,0.5); line-height: 1.3; }
.sidebar-logout {
  flex: none; width: 32px; height: 32px; border: none;
  background: rgba(255,255,255,0.06); border-radius: 8px;
  color: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.sidebar-logout:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* В свёрнутой рельсе виден только аватар (слева, на оси иконок); мета гаснет
   (высота сохраняется), logout клипуется краем. Футер не меняет геометрию. */
.sidebar.rail .sidebar-user-meta { opacity: 0; }

/* Кнопка «Войти» в подвале сайдбара (аноним на публичном модуле) — на месте учётки.
   Геометрия как у пунктов: иконка слева, текст гаснет в рельсе. */
.sidebar-login {
  display: flex; align-items: center; gap: 12px;
  width: 100%; border: none; cursor: pointer; font-family: inherit;
  padding: 9px 12px; border-radius: var(--nko-radius);
  background: var(--nko-primary); color: #fff;
  font-size: 13.5px; font-weight: 600; text-align: left;
  transition: background var(--nko-transition);
}
.sidebar-login:hover { background: var(--nko-primary-dark); color: #fff; }
.sidebar-login .icon { flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.sidebar-login-label { transition: opacity var(--nko-transition); }
.sidebar.rail .sidebar-login-label { opacity: 0; }


/* ==========================================================================
   10. Точечные правки: выравнивание пунктов, бар представлений, support
   ========================================================================== */

/* Иконка и подпись на одном уровне (особенно у модулей с подпунктами —
   .nav-item-main был инлайн-спаном, иконка/текст уезжали по базовой линии). */
.nav-item-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
/* Подписи показываются ЦЕЛИКОМ, переносом на нужное число строк (двухстрочность —
   норма, но длинные названия не обрезаются). Контент сайдбара выложен в 248px
   (см. .sidebar overflow:hidden), поэтому раскладка строк не зависит от анимации
   ширины — текст не «скачет» ни во время, ни после раскрытия. В рельсе подпись лишь
   гаснет (opacity), высоту строки держит всегда-выложенный текст. */
.nav-item-label {
  flex: 1; min-width: 0;
  white-space: normal; line-height: 1.25; overflow-wrap: break-word;
}

/* Бар представлений дашборда жил в синей шапке (белый текст) — после
   нейтрализации .unite-header он оказался «белым на белом». Делаем тёмным. */
.app-shell.has-sidebar .unite-header,
.app-shell.has-sidebar .unite-header label,
.app-shell.has-sidebar .unite-header .text-muted { color: var(--nko-text-secondary) !important; }
.app-shell.has-sidebar .unite-header .btn-outline-secondary {
  --bs-btn-color: var(--nko-text-secondary); --bs-btn-border-color: var(--nko-border);
  --bs-btn-hover-color: var(--nko-primary); --bs-btn-hover-bg: var(--nko-bg); --bs-btn-hover-border-color: var(--nko-primary);
}
.app-shell.has-sidebar .unite-header .btn-outline-primary {
  --bs-btn-color: var(--nko-primary); --bs-btn-border-color: var(--nko-primary);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--nko-primary); --bs-btn-hover-border-color: var(--nko-primary);
}
.app-shell.has-sidebar .unite-header .btn-outline-danger {
  --bs-btn-color: var(--nko-danger); --bs-btn-border-color: var(--nko-danger);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--nko-danger); --bs-btn-hover-border-color: var(--nko-danger);
}
/* Круглые icon-кнопки шапки (сброс кеша/справка) — на светлом фоне */
.app-shell.has-sidebar .unite-header-btn {
  border-color: var(--nko-border) !important; color: var(--nko-text-secondary) !important; background: #fff !important;
}
.app-shell.has-sidebar .unite-header-btn:hover {
  background: var(--nko-bg) !important; border-color: var(--nko-primary) !important; color: var(--nko-primary) !important;
}
/* select/инпуты бара представлений — фирменный вид (на случай белого текста) */
.app-shell.has-sidebar .unite-header .form-select,
.app-shell.has-sidebar .unite-header .form-control { color: var(--nko-text); }

/* Контакт техподдержки — в футере сайдбара, не отдельной строкой контента */
.sidebar-support { padding: 0 4px 4px; font-size: 11px; line-height: 1.4; color: rgba(255,255,255,0.4); border-bottom: 1px solid rgba(255,255,255,0.08); }
.sidebar-support a { color: rgba(255,255,255,0.68); text-decoration: none; word-break: break-all; }
.sidebar-support a:hover { color: #fff; }
.sidebar.rail .sidebar-support { opacity: 0; }

/* Свёрнутая рельса, раскрытая по наведению (JS снимает .rail, ставит .rail-hover):
   полноценный сайдбар поверх контента. .app-shell.rail держит сдвиг контента (72px),
   так что раскрытый сайдбар наезжает оверлеем, не двигая страницу. */
.sidebar.rail-hover { z-index: 1300; box-shadow: 8px 0 30px rgba(0,0,0,0.28); }

/* ==========================================================================
   11. Кнопки управления модулем — в шапке модуля (app-header), как в НКО.
   router.js телепортирует действия из .unite-header в #appHeaderActions. Шапка
   может стать выше и перенести широкий набор (бар представлений) на 2-ю строку.
   ========================================================================== */
.app-shell.has-sidebar .app-header { flex-wrap: wrap; min-height: var(--nko-header-height); height: auto; row-gap: 6px; padding-top: 8px; padding-bottom: 8px; }
.app-header-actions { flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
/* контролы бара представлений в app-header (светлый фон) — читаемые */
.app-header-actions label { color: var(--nko-text-secondary); margin: 0; }
.app-header-actions .form-select, .app-header-actions .form-control { color: var(--nko-text); }

/* ==========================================================================
   12. Зелёный success-баннер результата (Отклики): контент читаем на зелёном.
   Был синий текст статистики (ремап .text-muted) и тёмная кнопка «Заново».
   ========================================================================== */
.vacancy-result-header .text-muted { color: rgba(255,255,255,0.85) !important; }
.vacancy-result-header .btn-outline-secondary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255,255,255,0.6);
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: rgba(255,255,255,0.15);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-bg: rgba(255,255,255,0.2);
  --bs-btn-active-color: #fff;
  --bs-btn-active-border-color: #fff;
}

/* ==========================================================================
   13. Экран входа (auth.js) — сплит-экран НКО: слева брендовая панель (тёмный
   градиент + декор), справа OTP-форма. На login верхняя шапка/сайдбар скрыты
   (setLayout('public')), app-main без паддинга (.app-main--bare) → сплит на весь
   вьюпорт. На ≤860px брендовая панель скрывается, остаётся форма.
   ========================================================================== */
.auth-split { min-height: 100dvh; display: grid; grid-template-columns: 1.05fr 1fr; }

.auth-brand-panel {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 120% at 18% 12%, #163a72 0%, #0c2548 55%, #071d49 100%);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 56px 64px;
}
.auth-brand-pattern {
  position: absolute; inset: 0; opacity: 0.10;
  background-image: linear-gradient(135deg, #fff 1px, transparent 1px), linear-gradient(225deg, #fff 1px, transparent 1px);
  background-size: 46px 46px;
}
.auth-brand-ring { position: absolute; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; }
.auth-brand-ring-1 { width: 520px; height: 520px; right: -160px; top: -140px; }
.auth-brand-ring-2 { width: 360px; height: 360px; right: -60px; top: -40px; border-color: rgba(255,255,255,0.10); }
.auth-brand-top { position: relative; display: flex; align-items: center; gap: 14px; }
.auth-brand-mark { height: 44px; width: auto; }
.auth-brand-divider { height: 30px; width: 1px; background: rgba(255,255,255,0.28); }
.auth-brand-org { font-size: 13px; line-height: 1.35; color: rgba(255,255,255,0.8); }
.auth-brand-mid { position: relative; max-width: 460px; }
.auth-brand-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nko-primary-light); margin-bottom: 18px; }
.auth-brand-title { font-size: 40px; line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; }
.auth-brand-text { margin-top: 20px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.72); }
.auth-brand-foot { position: relative; font-size: 12.5px; color: rgba(255,255,255,0.45); }

.auth-form-panel { display: flex; align-items: center; justify-content: center; padding: 40px; background: #fff; }
.auth-form-inner { width: 100%; max-width: 380px; }
.auth-title { font-size: 1.5rem; font-weight: 700; color: var(--nko-dark-blue); letter-spacing: -0.01em; margin: 0 0 6px; }
.auth-sub { font-size: 0.875rem; color: var(--nko-text-secondary); margin: 0 0 18px; line-height: 1.45; }
.auth-form-inner .form-label { font-size: 0.8125rem; font-weight: 600; color: var(--nko-text-secondary); margin-bottom: 6px; }
.auth-code {
  text-align: center; font-family: var(--nko-font-mono);
  font-size: 30px; font-weight: 600; letter-spacing: 0.3em; height: 60px; padding-left: 0.3em;
}
.auth-code::placeholder { letter-spacing: 0.3em; color: var(--nko-text-muted); }
.auth-form-inner .btn-link { color: var(--nko-text-secondary); text-decoration: none; font-size: 0.875rem; }
.auth-form-inner .btn-link:hover { color: var(--nko-primary); }
.auth-support {
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--nko-border-light);
  font-size: 0.8125rem; color: var(--nko-text-muted); text-align: center;
}
.auth-support a { color: var(--nko-primary); text-decoration: none; white-space: nowrap; }
.auth-support a:hover { color: var(--nko-primary-dark); }

@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-brand-panel { display: none; }
  .auth-form-panel { padding: 28px 20px; min-height: 100dvh; }
}

/* ==========================================================================
   14. QR-генератор — SPA-вью #qr-generator (перенесён со standalone-страницы,
   стили заскоплены под вью, чтобы .pill/.seg-btn не конфликтовали в будущем).
   ========================================================================== */
#view-qr-generator .qr-input-group .input-group-text { background: #fff; color: var(--nko-text-muted); }
#view-qr-generator .qr-preview-area {
  background: #fff; border: 1px solid var(--nko-border); border-radius: var(--nko-radius-lg);
  min-height: 300px; display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
#view-qr-generator .qr-preview-area #qr-preview { max-width: 320px; width: 100%; }
#view-qr-generator .qr-preview-area img { width: 100%; height: auto; display: block; }
#view-qr-generator .qr-opt-label {
  font-size: .78rem; font-weight: 600; color: var(--nko-text-secondary);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: .45rem;
}
#view-qr-generator .qr-opt-row { margin-bottom: 1rem; }
#view-qr-generator .segmented,
#view-qr-generator .pill-group { display: flex; flex-wrap: wrap; gap: .4rem; }
#view-qr-generator .seg-btn,
#view-qr-generator .pill {
  border: 1px solid var(--nko-border); background: #fff; color: var(--nko-text-secondary);
  border-radius: var(--nko-radius); padding: .4rem .85rem; font-size: .875rem; font-weight: 500;
  cursor: pointer; transition: all var(--nko-transition); display: inline-flex; align-items: center; line-height: 1.2;
}
#view-qr-generator .seg-btn:hover,
#view-qr-generator .pill:hover { border-color: var(--nko-primary); color: var(--nko-primary); }
#view-qr-generator .seg-btn.active,
#view-qr-generator .pill.active { background: var(--nko-primary); border-color: var(--nko-primary); color: #fff; }
#view-qr-generator .qr-theme-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; margin-right: .45rem; }
#view-qr-generator .seg-btn.active .qr-theme-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
#view-qr-generator .qr-api-url {
  padding: .5rem .75rem; background: var(--nko-bg); border-radius: var(--nko-radius); font-size: .74rem;
  color: var(--nko-text-secondary); word-break: break-all; font-family: var(--nko-font-mono); cursor: pointer;
  transition: background var(--nko-transition); min-height: 1.9rem;
}
#view-qr-generator .qr-api-url:hover { background: #e7edf3; }
#view-qr-generator .qr-api-url.copied { background: rgba(25,135,84,0.12); color: var(--nko-success); }
/* ИИ-сервисы СЗН: внешний FastAPI-модуль в оболочке Мира+ */
.app-main.app-main--ai-services {
    min-height: 0;
    overflow: hidden;
    padding: 0;
    background: #eef2f7;
}

.app-main--ai-services #mainContent,
.app-main--ai-services #view-ai-services,
#view-ai-services .ai-services-frame-wrap {
    width: 100%;
    height: 100%;
    min-height: 0;
}

#view-ai-services .ai-services-frame-wrap {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #eef2f7;
    box-shadow: none;
}

#view-ai-services iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: #eef2f7;
}

#view-ai-services .ai-services-status {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    place-items: center;
    color: #667085;
    background: #fff;
}

#view-ai-services .ai-services-status.is-error {
    color: #b42318;
}

/* ==========================================================================
   4.12 .fb-* — «Обратная связь»: карточки и пространства (MIR-47).
   Модульные цвета берутся из токенов --nko-*.
   ========================================================================== */

/* --- Сетка: карточка шире (min 330 → 350 px), 3 колонки на 1400, 2 на 1024 --- */
#view-feedback .fb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 16px;
}

/* --- Карточка --------------------------------------------------------------- */
#view-feedback .fb-card {
  position: relative;
  min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 18px 12px;
  background: var(--nko-card-bg);
  border: 1px solid var(--nko-border);
  border-radius: var(--nko-radius-lg);
  box-shadow: var(--nko-shadow-sm);
  transition: box-shadow var(--nko-transition), border-color var(--nko-transition);
}
#view-feedback .fb-card:hover { box-shadow: var(--nko-shadow-md); }
/* выключенная: не гасим opacity всю карточку (гасился и переключатель) —
   приглушаем только содержимое, статус говорит пилюля */
#view-feedback .fb-card--off { opacity: 1; background: var(--nko-bg); }
#view-feedback .fb-card--off .fb-card-name { color: var(--nko-text-secondary); }
#view-feedback .fb-card--off .fb-card-url { background: var(--nko-card-bg); }

/* внешний опрос: акцентная кромка слева + мягкая подложка */
#view-feedback .fb-card--ext {
  border-left: 4px solid var(--nko-primary-light);
  padding-left: 15px;
  background: color-mix(in srgb, var(--nko-primary-light) 6%, var(--nko-card-bg));
}

#view-feedback .fb-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
#view-feedback .fb-badges { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
#view-feedback .fb-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--nko-radius-sm);
  font-size: 11.5px; font-weight: 700; line-height: 1.35; white-space: nowrap;
  color: var(--nko-dark-blue); background: var(--nko-bg); border: 1px solid var(--nko-border);
}
#view-feedback .fb-badge i { font-size: 11px; }
#view-feedback .fb-badge--anon { color: var(--nko-text-secondary); font-weight: 600; }
#view-feedback .fb-badge--key {
  color: var(--nko-primary); font-weight: 600;
  background: color-mix(in srgb, var(--nko-primary) 8%, var(--nko-card-bg));
  border-color: color-mix(in srgb, var(--nko-primary) 25%, var(--nko-card-bg));
}
#view-feedback .fb-badge--ext { color: var(--nko-card-bg); background: var(--nko-primary); border-color: var(--nko-primary); }

#view-feedback .fb-card-name {
  font-size: 16px; font-weight: 700; line-height: 1.35;
  color: var(--nko-dark-blue);
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
#view-feedback .fb-card-url {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 7px 10px; border-radius: var(--nko-radius-sm);
  font-size: 12.5px; color: var(--nko-primary); background: var(--nko-bg); cursor: pointer;
}
#view-feedback .fb-card-url span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-feedback .fb-card-url .fb-copy-ic { margin-left: auto; color: var(--nko-text-muted); }
#view-feedback .fb-card-meta { font-size: 12.5px; color: var(--nko-text-muted); }
#view-feedback .fb-card-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--nko-text-secondary); }
#view-feedback .fb-card-stats i { margin-right: 5px; color: var(--nko-text-muted); }

/* --- Ряд действий: иконка 36×34 + подпись 10.5 px под ней ----------------- */
#view-feedback .fb-card-actions {
  display: flex; align-items: flex-start; gap: 5px;
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--nko-border-light);
}
#view-feedback .fb-act-spacer { flex: 1 1 auto; min-width: 0; }
#view-feedback .fb-act,
#view-feedback .fb-toggle {
  flex: none;
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 40px; width: auto; height: auto;
  padding: 0; margin: 0;
  border: 0; border-radius: 0; background: none;
  color: var(--nko-text-secondary); cursor: pointer;
  font-family: inherit;
}
#view-feedback .fb-act-ic {
  width: 36px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
  border: 1px solid var(--nko-border); border-radius: var(--nko-radius);
  background: var(--nko-card-bg); color: var(--nko-text-secondary);
  transition: border-color var(--nko-transition), color var(--nko-transition), background var(--nko-transition);
}
#view-feedback .fb-act-lbl {
  font-size: 10.5px; line-height: 1.2; font-weight: 500;
  white-space: nowrap; color: var(--nko-text-secondary);
}
#view-feedback .fb-act:hover .fb-act-ic,
#view-feedback .fb-act:focus-visible .fb-act-ic,
#view-feedback .fb-act[aria-expanded="true"] .fb-act-ic {
  border-color: var(--nko-primary); color: var(--nko-primary);
  background: color-mix(in srgb, var(--nko-primary) 6%, var(--nko-card-bg));
}
#view-feedback .fb-act:hover .fb-act-lbl,
#view-feedback .fb-act[aria-expanded="true"] .fb-act-lbl { color: var(--nko-primary); }
#view-feedback .fb-act:focus-visible { outline: none; }
#view-feedback .fb-act:focus-visible .fb-act-ic { box-shadow: var(--nko-focus-ring); }
/* «Ключ» — функция анкеты, подсвечен акцентом */
#view-feedback .fb-act--key .fb-act-ic { color: var(--nko-primary); border-color: color-mix(in srgb, var(--nko-primary) 35%, var(--nko-card-bg)); }

/* переключатель статуса — в той же сетке: коробка 34 px по высоте иконок, подпись ниже */
#view-feedback .fb-toggle-box { height: 34px; display: flex; align-items: center; }
#view-feedback .fb-switch {
  width: 40px; height: 22px; border-radius: 999px; flex: none;
  position: relative; display: inline-block;
  background: var(--nko-border); transition: background var(--nko-transition);
}
#view-feedback .fb-switch.on { background: var(--nko-success); }
#view-feedback .fb-switch-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--nko-card-bg); box-shadow: var(--nko-shadow-md); transition: left var(--nko-transition);
}
#view-feedback .fb-switch.on .fb-switch-knob { left: 20px; }
#view-feedback .fb-toggle .fb-act-lbl { color: var(--nko-text-muted); }
#view-feedback .fb-toggle.on .fb-act-lbl { color: var(--nko-success); font-weight: 600; }

/* --- Меню «Ещё» (Bootstrap .dropdown-menu) -------------------------------- */
#view-feedback .fb-more { position: relative; flex: none; }
#view-feedback .fb-more-menu {
  position: absolute; right: 0; top: calc(100% + 6px); left: auto;
  z-index: 20; min-width: 232px; margin: 0; padding: 6px;
  border: 1px solid var(--nko-border); border-radius: var(--nko-radius-md);
  background: var(--nko-card-bg); box-shadow: var(--nko-shadow-lg);
}
#view-feedback .fb-more-menu .dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--nko-radius-sm);
  font-size: 13px; color: var(--nko-text);
}
#view-feedback .fb-more-menu .dropdown-item i { width: 18px; text-align: center; font-size: 15px; color: var(--nko-text-secondary); }
#view-feedback .fb-more-menu .dropdown-item:hover { background: var(--nko-bg); }
#view-feedback .fb-more-menu .dropdown-item.fb-danger,
#view-feedback .fb-more-menu .dropdown-item.fb-danger i { color: var(--nko-danger); }
#view-feedback .fb-more-menu .dropdown-divider { margin: 4px 0; border-top-color: var(--nko-border-light); }
#view-feedback .fb-more-menu .fb-more-hint { margin-left: auto; font-size: 11px; color: var(--nko-text-muted); }

/* --- Шапка пространства: только в скоупе «пространство» ------------------ */
#view-feedback .fb-space-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px;
  margin-bottom: 14px; padding: 14px 18px;
  background: var(--nko-card-bg); border: 1px solid var(--nko-border);
  border-radius: var(--nko-radius-lg); box-shadow: var(--nko-shadow-sm);
}
#view-feedback .fb-space-ic {
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--nko-radius-md); font-size: 18px;
  color: var(--nko-primary); background: color-mix(in srgb, var(--nko-primary) 10%, var(--nko-card-bg));
}
#view-feedback .fb-space-info { flex: 1 1 220px; min-width: 0; }
#view-feedback .fb-space-title { font-size: 15px; font-weight: 700; color: var(--nko-dark-blue); overflow-wrap: anywhere; }
#view-feedback .fb-space-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12.5px; color: var(--nko-text-muted); }
#view-feedback .fb-space-sub i { margin-right: 4px; }
#view-feedback .fb-space-owner { color: var(--nko-text-secondary); font-weight: 600; }
#view-feedback .fb-space-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#view-feedback .fb-space-actions .btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; white-space: nowrap; }

@media (max-width: 767.98px) {
  #view-feedback .fb-grid { grid-template-columns: minmax(0, 1fr); }
  #view-feedback .fb-card { padding: 16px 14px 12px; }
  #view-feedback .fb-card--ext { padding-left: 11px; }
  #view-feedback .fb-card-actions { gap: 4px; }
  #view-feedback .fb-space-actions { flex: 1 1 100%; }
}

/* --- Пустое пространство: .card + общий .empty-state ---------------------- */
#view-feedback .fb-empty-card { padding: 40px 20px; }
#view-feedback .fb-empty-card .empty-state .icon { font-size: 24px; display: flex; align-items: center; justify-content: center; }
#view-feedback .fb-empty-card .empty-state .subtitle { max-width: 440px; }
#fbSpacesModal .fb-space-new-name { max-width: 320px; }
#fbSpacesModal .fb-space-member-email { font-size: .75rem; }
#fbSpacesModal .fb-space-invite-email { max-width: 280px; }

/* --- 4.13 .aa-* (аналитика рекламы) --------------------------------------- */
/* Каркас — .card.adm-section; здесь вкладки экранов, фильтры, таблица воронки, настройки. */
#view-ad-analytics.aa-view { display: none; }
.aa-page { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.aa-lead { margin: 0 0 12px; color: var(--nko-text-secondary); font-size: .875rem; max-width: 80ch; }
.aa-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.aa-card { min-width: 0; }
.aa-card-body { padding: 0 24px 20px; min-width: 0; }
.aa-hint { color: var(--nko-text-secondary); font-size: .8125rem; line-height: 1.4; }
.aa-warn { color: var(--nko-premises); }
.aa-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aa-mono { font-family: var(--nko-font-mono); font-size: .8125rem; }
.aa-subtitle { font-size: 1rem; font-weight: 600; color: var(--nko-dark-blue); margin: 20px 0 4px; }

/* вкладки экранов */
.aa-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--nko-border); }
.aa-tab {
  display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; border: 0; background: none;
  color: var(--nko-text-secondary); font-weight: 600; font-size: .9375rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
  border-radius: var(--nko-radius) var(--nko-radius) 0 0;
}
.aa-tab:hover { color: var(--nko-primary); }
.aa-tab.active { color: var(--nko-primary); border-bottom-color: var(--nko-primary); }
.aa-tab:focus-visible, .aa-pill:focus-visible, .aa-seg button:focus-visible, .aa-seg input:focus-visible + span,
.aa-tg:focus-visible, .aa-num-link:focus-visible, .aa-null:focus-visible, .aa-table-wrap:focus-visible {
  outline: 2px solid var(--nko-primary); outline-offset: 2px;
}
.aa-dirty-dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--nko-premises); }

/* переключатели-сегменты */
.aa-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--nko-border); border-radius: var(--nko-radius); background: var(--nko-card-bg); overflow: hidden; }
.aa-seg label, .aa-seg button { margin: 0; position: relative; display: inline-flex; border: 0; background: none; cursor: pointer; }
.aa-seg label + label, .aa-seg button + button { border-left: 1px solid var(--nko-border); }
.aa-seg label > span, .aa-seg button {
  padding: 7px 12px; font-size: .8125rem; font-weight: 600; color: var(--nko-text-secondary); display: inline-flex; align-items: center;
}
.aa-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.aa-seg input:checked + span, .aa-seg button.active { background: var(--nko-primary); color: var(--nko-card-bg); }

/* фильтры */
.aa-filters-card { padding: 16px 24px; margin-bottom: 16px; }
.aa-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; }
.aa-filter-wide { grid-column: 1 / -1; min-width: 0; }
.aa-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aa-field > .form-label, .aa-filters .form-label { margin: 0 0 4px; color: var(--nko-text-secondary); font-size: .75rem; line-height: 1.25; }
.aa-custom-range { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
.aa-touch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.aa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

/* состояния */
.aa-state { padding: 28px 24px; text-align: center; background: var(--nko-card-bg); border: 1px solid var(--nko-border); border-radius: var(--nko-radius-lg); }
.aa-state-icon { font-size: 1.75rem; color: var(--nko-text-muted); }
.aa-state-title { font-size: 1rem; font-weight: 600; margin: 8px 0 4px; color: var(--nko-dark-blue); }
.aa-state-text { color: var(--nko-text-secondary); font-size: .875rem; margin: 0 auto 12px; max-width: 60ch; }
.aa-state-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.aa-loading { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--nko-text-secondary); font-size: .875rem; }
.aa-skeleton { height: 28px; border-radius: var(--nko-radius-sm); background: linear-gradient(90deg, var(--nko-border-light), var(--nko-bg), var(--nko-border-light)); background-size: 200% 100%; animation: aa-shimmer 1.4s linear infinite; }
@keyframes aa-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .aa-skeleton { animation: none; } }
.aa-error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.aa-error-icon { font-size: 1.5rem; }
.aa-error-text { flex: 1 1 200px; }
.aa-loss { display: flex; align-items: flex-start; margin: 0; }
.aa-readonly-note { display: flex; align-items: center; }

/* KPI */
.aa-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.aa-kpi { background: var(--nko-card-bg); border: 1px solid var(--nko-border); border-radius: var(--nko-radius-lg); padding: 12px 14px; min-width: 0; }
.aa-kpi-label { font-size: .75rem; color: var(--nko-text-secondary); }
.aa-kpi-value { font-size: 1.375rem; font-weight: 700; color: var(--nko-dark-blue); line-height: 1.3; overflow-wrap: anywhere; }
.aa-kpi-sub { font-size: .75rem; color: var(--nko-text-muted); line-height: 1.3; }

/* «—» с причиной */
.aa-null { cursor: help; color: var(--nko-text-muted); border-bottom: 1px dotted var(--nko-text-muted); }
.aa-reason-inline { display: block; color: var(--nko-text-secondary); font-size: .75rem; text-align: right; margin-top: 2px; }
.aa-reasons { margin: 0 0 8px; padding-left: 0; list-style: none; }

/* связь с кандидатом */
.aa-qbar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; background: var(--nko-border-light); }
.aa-q { flex-basis: 0; min-width: 4px; }
.aa-qdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 5px; }
.aa-q-linked { background: var(--nko-success); }
.aa-q-ambiguous { background: var(--nko-premises); }
.aa-q-not_found { background: var(--nko-text-muted); }
.aa-q-no_application { background: var(--nko-border); }
.aa-q-pending { background: var(--nko-primary-light); }
.aa-q-no_contacts { background: var(--nko-danger); }
.aa-q-none { background: var(--nko-text-secondary); }
.aa-qlegend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 20px; }
.aa-qitem { display: flex; gap: 8px; font-size: .875rem; }
.aa-qitem small { display: block; color: var(--nko-text-secondary); font-size: .75rem; }

/* заголовок основной карточки */
.aa-main-head { align-items: center; }

/* таблица воронки */
.aa-table-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.aa-col-toggles { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: .8125rem; color: var(--nko-text-secondary); }
.aa-col-toggles label { margin: 0; display: inline-flex; align-items: center; gap: 4px; }
.aa-table-expand { display: flex; flex-wrap: wrap; gap: 8px; }
.aa-table-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--nko-border); border-radius: var(--nko-radius); background: var(--nko-card-bg); }
.aa-table { margin: 0; width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8125rem; }
.aa-table th, .aa-table td { padding: 8px 10px; border-bottom: 1px solid var(--nko-border-light); vertical-align: middle; white-space: nowrap; background: var(--nko-card-bg); }
.aa-table thead th { background: #F8FAFC; color: var(--nko-text-secondary); font-weight: 600; text-align: right; vertical-align: bottom; }
.aa-table thead .aa-grp th { text-align: center; text-transform: uppercase; letter-spacing: .03em; font-size: .6875rem; border-left: 1px solid var(--nko-border-light); }
.aa-table thead .aa-grp th[rowspan] { text-align: left; vertical-align: bottom; text-transform: none; letter-spacing: 0; font-size: .8125rem; border-left: 0; }
.aa-table thead .aa-hdr th { white-space: normal; min-width: 96px; max-width: 150px; line-height: 1.25; }
.aa-table .aa-c-first { position: sticky; left: 0; z-index: 2; min-width: 250px; max-width: 320px; text-align: left; white-space: normal; box-shadow: 1px 0 0 var(--nko-border-light); }
.aa-table thead .aa-c-first { background: #F8FAFC; z-index: 3; }
.aa-table thead th, .aa-table tbody th { text-transform: none; letter-spacing: 0; font-size: .8125rem; }
.aa-table thead .aa-grp th:not([rowspan]) { text-transform: uppercase; letter-spacing: .03em; font-size: .6875rem; }
.aa-table .aa-c-text { min-width: 110px; text-align: left; }
.aa-table thead .aa-c-text { text-align: left; }
.aa-src { display: block; font-size: .625rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--nko-text-muted); }
.aa-src-manual { color: var(--nko-premises); }
.aa-src-site { color: var(--nko-primary); }
.aa-src-mira { color: var(--nko-success); }
.aa-num { text-align: right; font-variant-numeric: tabular-nums; }
.aa-num.aa-manual { color: var(--nko-text-secondary); }
.aa-null-sm { padding: 0 2px; }
.aa-lv-campaign th, .aa-lv-campaign td { font-weight: 700; background: color-mix(in srgb, var(--nko-primary) 5%, var(--nko-card-bg)); }
.aa-lv-source th, .aa-lv-source td { font-weight: 600; }
.aa-lv-type th, .aa-lv-type td, .aa-lv-leaf th, .aa-lv-leaf td { font-weight: 400; }
.aa-tot th, .aa-tot td { font-weight: 700; background: #F8FAFC; border-top: 2px solid var(--nko-border); }
.aa-lab { display: flex; align-items: flex-start; gap: 6px; }
.aa-pad { width: 24px; flex: none; }
.aa-tg { width: 24px; height: 24px; flex: none; border: 0; background: none; color: var(--nko-text-secondary); border-radius: var(--nko-radius-sm); display: inline-flex; align-items: center; justify-content: center; }
.aa-tg .bi { transition: transform var(--nko-transition); }
.aa-tg.open .bi { transform: rotate(90deg); }
.aa-txt { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.aa-name { font-weight: inherit; }
.aa-code { font-family: var(--nko-font-mono); font-size: .6875rem; color: var(--nko-text-muted); font-weight: 400; }
.aa-chip { align-self: flex-start; margin-top: 4px; padding: 1px 8px; border-radius: var(--nko-radius-sm); background: var(--nko-bg); color: var(--nko-text-secondary); font-size: .6875rem; font-weight: 600; }
.aa-chip-warn { background: color-mix(in srgb, var(--nko-premises) 18%, var(--nko-card-bg)); color: var(--nko-text); }
.aa-num-link { border: 0; background: none; padding: 0; color: var(--nko-primary); text-decoration: underline; text-underline-offset: 2px; font: inherit; }
.aa-notes { margin-top: 10px; }
.aa-notes p { margin: 0 0 6px; }
.aa-details { margin-top: 8px; font-size: .8125rem; }
.aa-details summary { cursor: pointer; color: var(--nko-primary); font-weight: 600; }
.aa-formulas { display: grid; grid-template-columns: max-content 1fr; gap: 2px 16px; margin: 8px 0 0; }
.aa-formulas dt { font-weight: 600; }
.aa-formulas dd { margin: 0; color: var(--nko-text-secondary); }

/* графики и простые таблицы */
.aa-chart { width: 100%; }
.aa-simple { margin: 0; font-size: .875rem; }
.aa-simple tbody th { text-transform: none; letter-spacing: 0; font-size: .875rem; }
.aa-simple th, .aa-simple td { padding: 8px 12px; border-bottom: 1px solid var(--nko-border-light); }
.aa-simple thead th { background: #F8FAFC; color: var(--nko-text-secondary); font-weight: 600; font-size: .75rem; }
.aa-steps { margin-top: 12px; }
.aa-insite-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 0; }
.aa-insite-item { border: 1px solid var(--nko-border); border-radius: var(--nko-radius); padding: 8px 12px; }
.aa-insite-item dt { font-size: .75rem; color: var(--nko-text-secondary); font-weight: 600; }
.aa-insite-item dd { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--nko-dark-blue); }
.aa-offcanvas { width: min(720px, 100vw) !important; }

/* настройки */
.aa-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.aa-pill { display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--nko-border); border-radius: 999px; background: var(--nko-card-bg); color: var(--nko-text-secondary); font-weight: 600; font-size: .875rem; }
.aa-pill.active { background: var(--nko-primary); border-color: var(--nko-primary); color: var(--nko-card-bg); }
.aa-stack { display: flex; flex-direction: column; gap: 16px; }
.aa-rules { list-style: none; margin: 0; padding: 0; }
.aa-rule { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--nko-border-light); }
.aa-rule-fixed { flex-direction: row; align-items: center; gap: 12px; background: var(--nko-bg); padding: 12px; border: 0; border-radius: var(--nko-radius); margin-top: 8px; }
.aa-rule-title { font-weight: 600; }
.aa-lock { color: var(--nko-text-muted); }
.aa-rule-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.aa-rule-num { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--nko-bg); color: var(--nko-text-secondary); font-weight: 700; font-size: .8125rem; display: inline-flex; align-items: center; justify-content: center; }
.aa-rule-channel { flex: 1 1 200px; min-width: 0; max-width: 360px; }
.aa-enabled { margin: 0; font-size: .8125rem; color: var(--nko-text-secondary); display: inline-flex; align-items: center; gap: 4px; }
.aa-rule-tools { display: flex; gap: 4px; margin-left: auto; }
.aa-icon-btn { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.aa-match { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .8125rem; color: var(--nko-text-secondary); padding-left: 40px; }
.aa-match-select { width: auto; }
.aa-cond { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(120px, 160px) minmax(160px, 2fr) auto; gap: 8px; padding-left: 40px; align-items: center; }
.aa-rule > .btn { align-self: flex-start; margin-left: 40px; }
.aa-rule > .aa-hint, .aa-rule > .aa-field-err { padding-left: 40px; }
.aa-field-err { color: var(--nko-danger); font-size: .75rem; margin-top: 2px; }
.aa-field-err[hidden] { display: none; }
.aa-unassigned { margin-bottom: 12px; }
.aa-empty-line { color: var(--nko-text-secondary); font-size: .875rem; margin: 0; }
.aa-check { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.aa-check-result { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--nko-border); border-radius: var(--nko-radius); background: var(--nko-bg); }
.aa-edit { margin: 0; font-size: .875rem; }
.aa-edit th { font-size: .75rem; color: var(--nko-text-secondary); background: #F8FAFC; font-weight: 600; white-space: nowrap; }
.aa-edit td { vertical-align: top; min-width: 130px; }
.aa-edit td:last-child { min-width: 52px; }
.aa-budget td { min-width: 104px; padding-left: 6px; padding-right: 6px; }
.aa-budget td:nth-child(-n+4) { min-width: 120px; }
.aa-budget td:nth-child(5), .aa-budget td:nth-child(6) { min-width: 138px; }
.aa-budget td:nth-child(9) { min-width: 128px; }
.aa-budget th { padding-left: 6px; padding-right: 6px; white-space: normal; }

/* панель несохранённых изменений */
.aa-savebar {
  position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px;
  margin-top: 16px; padding: 12px 16px; background: var(--nko-card-bg); border: 1px solid var(--nko-border); border-radius: var(--nko-radius-lg); box-shadow: var(--nko-shadow-md);
}
.aa-savebar[hidden] { display: none; }
.aa-savebar-msg { flex: 1 1 240px; font-size: .875rem; font-weight: 600; color: var(--nko-dark-blue); }

@media (max-width: 991.98px) {
  .aa-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aa-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .aa-card-body { padding: 0 16px 16px; }
  .aa-filters-card { padding: 14px 16px; }
  .aa-filters { grid-template-columns: minmax(0, 1fr); }
  .aa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aa-kpi-value { font-size: 1.125rem; }
  .aa-cond { grid-template-columns: minmax(0, 1fr) auto; padding-left: 0; }
  .aa-cond > :nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  .aa-cond > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .aa-cond > :nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  .aa-cond > :nth-child(4) { grid-column: 2; grid-row: 2; }
  .aa-rule-channel { flex: 1 1 calc(100% - 48px); max-width: none; }
  .aa-rule-tools { margin-left: 0; }
  .aa-match, .aa-rule > .aa-hint, .aa-rule > .aa-field-err { padding-left: 0; }
  .aa-rule > .btn { margin-left: 0; }
  .aa-check { grid-template-columns: minmax(0, 1fr); }
  .aa-table .aa-c-first { min-width: 190px; max-width: 220px; }
  .aa-seg { max-width: 100%; }
  .aa-main-head .aa-viewseg { width: 100%; }
  .aa-main-head .aa-viewseg button { flex: 1 1 0; justify-content: center; padding-left: 6px; padding-right: 6px; }
}