/* ============================================================================
 * Genesis — единые дизайн-токены семейства (Suite-CDN, раскатка на все продукты).
 * Подключение в любом продукте (как suite-switcher.js):
 *   <link rel="stylesheet" href="https://suite.gdw.kz/suite-theme.css">
 * Зеркалит словарь токенов G-Tools (`shared/themes/m365/m365.css`): нейтральная
 * палитра + НАШ брендовый indigo #4f46e5. Источник правды по бренду — G-Suite
 * (process owner). Продукты мапят свои компоненты на эти переменные (--ge-color-*),
 * HTML-разметку не навязываем. Тёмную тему добавим как [data-theme="dark"] позже.
 *
 * Иконки/фавикон (family-стандарт, см. docs/BRAND-KIT.md): скруглённая плитка
 * indigo-градиента + белый глиф (буква продукта). Радиус — var(--ge-radius-lg).
 * ========================================================================== */
:root {
  /* Макет — единый канон ширины левого сайдбара портала (один источник правды для
     ВСЕХ модулей: admin-shell .admin-nav и кастомные сайдбары продуктов ссылаются сюда). */
  --ge-side-w: 420px;

  /* Бренд */
  --ge-color-brand:         #4f46e5;   /* indigo — бренд Genesis */
  --ge-color-brand-hover:   #4338ca;
  --ge-color-brand-soft:    #eef0fb;   /* фон активного пункта/выделения */
  --ge-color-brand-2:       #7c6cf0;   /* доп. для градиентов плиток/иконок */

  /* Текст */
  --ge-color-text:          #201f1e;
  --ge-color-text-mute:     #605e5c;
  --ge-color-text-faint:    #726f6d;

  /* Поверхности */
  --ge-color-bg:            #faf9f8;   /* холст */
  --ge-color-surface:       #ffffff;   /* карточка */
  --ge-color-border:        #edebe9;
  --ge-color-border-strong: #d2d0ce;
  --ge-color-hover:         #f3f2f1;

  /* Семантика */
  --ge-color-accent-blue:   #0078d4;
  --ge-color-ok:            #15803d;
  --ge-color-warn:          #b45309;
  --ge-color-err:           #b91c1c;
  /* Семантические ФОНЫ статус-плашек (.err/.pill/.quota-warn и т.п.). Раньше их не было —
     продукты хардкодили светлые hex (#fde7e9/#dafbe1/#fef3c7), из-за чего в тёмной теме
     получался светлый фон со светлым (перевёрнутым) текстом = нечитаемо. Теперь токен:
     light здесь, dark — в themes/dark/dark.css. Ссылка `var(--ge-color-err-bg, #fde7e9)`
     в продуктах автоматически становится корректной в обеих темах. */
  --ge-color-err-bg:        #fde7e9;
  --ge-color-ok-bg:         #dafbe1;
  --ge-color-warn-bg:       #fef3c7;

  /* Типографика */
  --ge-font-family: 'Segoe UI', system-ui, -apple-system, 'SF Pro Text', sans-serif;
  --ge-font-mono:   'Cascadia Mono', 'SF Mono', Consolas, monospace;
  --ge-font-size-xs: 11px;
  --ge-font-size-sm: 12.5px;
  --ge-font-size-md: 13.5px;
  --ge-font-size-lg: 16px;
  --ge-font-size-h2: 21px;
  --ge-font-size-h1: 28px;
  --ge-line-height:  1.43;

  /* Форма / отступы / тени */
  --ge-radius-sm: 3px;
  --ge-radius-md: 4px;
  --ge-radius-lg: 8px;
  --ge-radius-pill: 999px;
  --ge-space-1: 4px;
  --ge-space-2: 8px;
  --ge-space-3: 12px;
  --ge-space-4: 16px;
  --ge-space-5: 24px;
  --ge-shadow-card:   0 1.6px 3.6px rgba(0,0,0,.13), 0 .3px .9px rgba(0,0,0,.11);
  --ge-shadow-drawer: -8px 0 28px rgba(0,0,0,.16);
  --ge-shadow-pop:    0 8px 28px rgba(0,0,0,.18);

  /* Каркас (для общих shell-паттернов G-Tools) */
  --ge-header-h:    48px;
  --ge-shell-side-w:260px;
  --ge-drawer-w:    440px;

  /* Градиент бренда (иконки/плитки/акценты) */
  --ge-brand-gradient: linear-gradient(135deg, var(--ge-color-brand), var(--ge-color-brand-2));

  /* Токены-алиасы (семейная совместимость имён; см. docs/THEMES.md) */
  --ge-color-text-secondary: var(--ge-color-text-mute);
  --ge-color-danger:         var(--ge-color-err);
  --ge-color-primary:        var(--ge-color-brand);
}

/* Базовые семейные хелперы (опционально; продукт может игнорировать) */
.ge-brand-mark {
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: var(--ge-radius-lg); color: #fff; font-weight: 800;
  background: var(--ge-brand-gradient);
}
.ge-btn-brand {
  background: var(--ge-color-brand); color: #fff; border: none;
  border-radius: var(--ge-radius-md); padding: var(--ge-space-2) var(--ge-space-4);
  font: 600 var(--ge-font-size-md)/1 var(--ge-font-family); cursor: pointer;
}
.ge-btn-brand:hover { background: var(--ge-color-brand-hover); }
.ge-badge { border-radius: var(--ge-radius-pill); padding: 2px 10px; font-size: var(--ge-font-size-xs); }

/* ============================================================================
 * ЕДИНЫЙ ВИД ЛЕВОГО САЙДБАРА (interim-унификация геометрии, 2026-06-14).
 * Канон: ПЛОСКАЯ панель (не плавающая карточка), пункт-«пилюля» с одинаковыми
 * отступами/скруглением/высотой; активный пункт — ЗАЛИВКА цветом-акцентом продукта
 * (var(--ge-accent…)) БЕЗ рамки. Цвет-акцент остаётся per-product (настраивается
 * в админке «Продукты семейства»). `!important` — временный приём, чтобы перебить
 * локальные правила каждого модуля одним центральным файлом; перевод на общий
 * компонент без !important — отдельная веха «довести до совершенства».
 * Продукты грузят этот файл с suite-домена ⇒ правка раскатывается на все сразу.
 * ============================================================================ */
:root {
  --ge-nav-item-pad: 9px 12px;
  --ge-nav-item-radius: 8px;
  --ge-nav-item-gap: 10px;
  --ge-nav-item-mb: 2px;
  --ge-nav-active-bg: var(--ge-accent-soft, var(--ge-color-brand-soft, #eef0fb));
  --ge-nav-active-fg: var(--ge-accent, var(--ge-color-brand, #4f46e5));
  --ge-nav-hover-bg: var(--ge-color-hover, #f3f2f1);
}
/* — Пункт навигации: единая геометрия (перечислены классы всех модулей) — */
.sidebar .nav-item, .dcc-nav-item, .om-tab,
.hr-nav-item, .fin-nav-item, .gm-nav-item, .svc-nav-item, .lg-nav-item,
.own-nav-item, .flw-nav-item, .admin-nav-item, .admin-nav .nav-item {
  padding: var(--ge-nav-item-pad) !important;
  border-radius: var(--ge-nav-item-radius) !important;
  border: 1px solid transparent !important;
  gap: var(--ge-nav-item-gap) !important;
  margin-bottom: var(--ge-nav-item-mb) !important;
  font-size: var(--ge-font-size-md, 13.5px) !important;
  font-weight: 500 !important;
}
/* — Hover: единый приглушённый фон — */
.sidebar .nav-item:hover, .dcc-nav-item:hover, .om-tab:hover,
.hr-nav-item:hover, .fin-nav-item:hover, .gm-nav-item:hover, .svc-nav-item:hover,
.lg-nav-item:hover, .own-nav-item:hover, .flw-nav-item:hover,
.admin-nav-item:hover, .admin-nav .nav-item:hover {
  background: var(--ge-nav-hover-bg) !important;
}
/* — Активный пункт: ЗАЛИВКА акцентом, БЕЗ рамки (убираем «обведённый» вид) — */
.sidebar .nav-item.active, .dcc-nav-item.active, .om-tab-on,
.hr-nav-item.active, .fin-nav-item.on, .gm-nav-item.active, .svc-nav-item.on,
.lg-nav-item.on, .own-nav-item.on, .flw-nav-item.on,
.admin-nav-item.active, .admin-nav .nav-item.active {
  background: var(--ge-nav-active-bg) !important;
  color: var(--ge-nav-active-fg) !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}
/* — Списки проектов (G-Vault `.proj`, G-PM `.projects li`) — активную строку к общему виду
     (заливка-акцент вместо разнобойной левой полоски); геометрию списка не трогаем. — */
.proj.active, .side .proj.active, .projects li.active {
  background: var(--ge-nav-active-bg) !important;
  color: var(--ge-nav-active-fg) !important;
  border-left-color: transparent !important;
  font-weight: 600 !important;
}
/* — Контейнеры-КАРТОЧКИ → ПЛОСКАЯ панель (DCC/HR/Management/OM): убираем
     скруглённую рамку и «короткую» высоту, оставляем правую границу-разделитель — */
.dcc-sidebar, .hr-sidebar, .gm-sidebar, .om-side {
  box-sizing: border-box !important;   /* padding входит в 420px (иначе G-OM был 445) */
  border: 0 !important;
  border-right: 1px solid var(--ge-color-border, #edebe9) !important;
  border-radius: 0 !important;
  align-self: stretch !important;
  padding: 14px 12px !important;
  overflow-x: hidden !important;
}
/* — Фикс горизонтального скроллбара в сайдбарах (текст обрезается, не растягивает) — */
.dcc-nav-item .nm, .nav-item .nm, .om-tab .nm,
.hr-nav-item .nm, .fin-nav-item .nm, .gm-nav-item .nm, .svc-nav-item .nm,
.lg-nav-item .nm, .own-nav-item .nm, .flw-nav-item .nm {
  min-width: 0 !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* — Заголовок группы пунктов: единый стиль — */
.nav-group-label {
  font-size: 11px !important; text-transform: uppercase !important;
  letter-spacing: 1px !important; font-weight: 700 !important;
  color: var(--ge-color-text-faint, #726f6d) !important; margin: 14px 10px 6px !important;
}
/* — ПРАВИЛО (Пользователь 2026-06-14): НИ В ОДНОМ сайдбаре НЕ должно быть горизонтальной прокрутки.
     overflow-x:hidden на все контейнеры сайдбаров семейства (вкл. .admin-nav/#nav портала G-Dev). — */
.sidebar, .admin-sidebar, .admin-nav, .pnav, #pnav, #nav, #sideNav, #adminNav,
.dcc-sidebar, .hr-sidebar, .fin-sidebar, .gm-sidebar, .svc-sidebar,
.lg-sidebar, .own-sidebar, .flw-sidebar, .om-side, .side {
  overflow-x: hidden !important;
}
/* Пункты тоже не распирают контейнер (длинный текст — обрезкой, не скроллом). */
.admin-nav-item, .nav-item, .dcc-nav-item, .om-tab, .hr-nav-item, .fin-nav-item,
.gm-nav-item, .svc-nav-item, .lg-nav-item, .own-nav-item, .flw-nav-item {
  min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important;
}

/* ── a11y baseline (WCAG 2.1): видимый клавиатурный фокус, skip-link, sr-only, reduced-motion ──
   Семейный baseline (грузится всеми продуктами). Полный WCAG-аудит компонентов — отдельно. */
:focus-visible {
  outline: 2px solid var(--ge-color-brand, #4f46e5);
  outline-offset: 2px;
  border-radius: 3px;
}
.ge-skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 2147483600;
  background: var(--ge-color-brand, #4f46e5); color: #fff;
  padding: 8px 14px; border-radius: 8px; text-decoration: none; font: 600 13px system-ui;
  transition: top .15s;
}
.ge-skip-link:focus { top: 8px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}