/* Боковое меню портала Прайм-Авто — ОБЩИЙ файл для двух приложений.

   Портал (FastAPI + Jinja2) и раздел «Вопросы покупателей» (Next.js) — разные
   приложения на одном домене. Разметку меню каждое собирает своим шаблонизатором,
   но стили обязаны быть одни: иначе разделы разъедутся внешне при первой же
   правке. Раздел /qa подключает этот файл абсолютной ссылкой /static/portal-nav.css —
   Caddy отдаёт всё, кроме /qa, порталу, поэтому запрос доезжает сюда.

   Классы, которые обязаны совпадать в обеих разметках, перечислены в RULES.md.
   Правки — только здесь; локальных копий этих правил быть не должно.

   Состояние (свёрнуто меню / свёрнуты группы) хранится в localStorage и общее
   для обоих приложений: домен один. */

:root {
  /* ЕДИНЫЙ ИСТОЧНИК ЦВЕТА обеих половин портала.
     
     Значения держим тройками HSL без обёртки `hsl()`: раздел /qa собран на
     Tailwind, а его токены обязаны быть именно тройками — иначе не работают
     утилиты вида `bg-primary/10`, которые дописывают прозрачность. Портал
     пользуется готовыми переменными ниже и hex-литералов больше не заводит.
     
     До 04.09.2026 каждая половина держала свои значения: рамка #e0e3e8 против
     #e1e7ef, текст #1a1d21 против #0f1729, приглушённый #5b6472 против #607085.
     На глаз разница неуловима, но шов между половинами человек видит как «две
     разные программы», и следующая правка цвета разводила их снова. Канон —
     портальные значения: они темнее и потому контрастнее (приглушённый
     #5b6472 даёт 5,9:1 на белом против 5,2:1 у прежнего раздельного). */
  --nav-accent-hsl: 218.6 100% 50%;   /* #005bff — фирменный синий */
  --nav-border-hsl: 217.5 14.8% 89.4%; /* #e0e3e8 — рамки и разделители */
  --nav-text-hsl: 214.3 11.9% 11.6%;  /* #1a1d21 — основной текст */
  --nav-muted-hsl: 216.5 11.2% 40.2%; /* #5b6472 — приглушённый текст */
  /* Пункт меню темнее приглушённого, но светлее основного текста: так список
     не спорит с содержимым страницы. Литералами он стоял в трёх правилах. */
  --nav-link-hsl: 0 0% 26.7%;         /* #444 — пункт меню */
  --nav-link-hover-hsl: 218 15% 21.8%; /* #2f3540 — он же под курсором */

  --nav-accent: hsl(var(--nav-accent-hsl));
  --nav-border: hsl(var(--nav-border-hsl));
  --nav-text: hsl(var(--nav-text-hsl));
  --nav-muted: hsl(var(--nav-muted-hsl));
  --nav-link: hsl(var(--nav-link-hsl));
  --nav-link-hover: hsl(var(--nav-link-hover-hsl));

  --nav-w: 224px;
  --nav-w-collapsed: 56px;
  /* Фон страницы: он тоже общий, иначе раздел /qa выглядел бы белым листом
     рядом с серым порталом */
  --nav-bg: #f5f6f8;
}

/* ===== Боковое меню =====
   Разделов стало больше, чем помещается в строку, поэтому меню слева:
   вертикальный список растёт вниз без ограничений. Свёрнутое состояние
   (иконки без подписей) хранится в localStorage — переживает переходы
   между страницами и перезагрузку. */
.layout { display: flex; align-items: flex-start; min-height: 100vh; background: var(--nav-bg); }
.sidebar { width: var(--nav-w); flex: 0 0 var(--nav-w); background: #fff;
  border-right: 1px solid var(--nav-border); position: sticky; top: 0;
  height: 100vh; display: flex; flex-direction: column; transition: width .15s, flex-basis .15s; }
.nav-collapsed .sidebar { width: var(--nav-w-collapsed); flex-basis: var(--nav-w-collapsed); }

.sidebar-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px;
  border-bottom: 1px solid var(--nav-border); }
.brand-mark { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 6px;
  background: var(--nav-accent); color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.brand-text { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; }
.nav-toggle { margin-left: auto; background: transparent; color: var(--nav-muted); border: 0;
  padding: 4px 6px; cursor: pointer; font-size: 16px; line-height: 1; border-radius: 6px; }
.nav-toggle:hover { background: #f1f3f5; color: var(--nav-link-hover); }
.nav-collapsed .brand-text { display: none; }
.nav-collapsed .sidebar-head { flex-direction: column; gap: 6px; padding: 10px 6px; }
.nav-collapsed .nav-toggle { margin-left: 0; }

.sidebar nav { display: flex; flex-direction: column; gap: 2px; padding: 8px 8px 16px;
  overflow-y: auto; flex: 1; }
.sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  text-decoration: none; color: var(--nav-link); border-radius: 6px; font-size: 14px; white-space: nowrap; }
.sidebar nav a:hover { background: #f1f3f5; color: var(--nav-accent); }
.sidebar nav a.active { background: #eaf1ff; color: var(--nav-accent); font-weight: 600; }
.nav-ico { flex: 0 0 20px; text-align: center; font-size: 15px; line-height: 1; }
.nav-label { overflow: hidden; text-overflow: ellipsis; }
.nav-collapsed .nav-label { display: none; }
.nav-collapsed .sidebar nav a { justify-content: center; padding: 9px 0; }
/* Заголовок группы — кнопка: клик сворачивает её пункты. Состояние живёт
   в атрибуте data-nav-groups на <html> (список ключей через пробел),
   поэтому применяется ещё до отрисовки и не моргает при переходах. */
.nav-group { display: flex; align-items: center; gap: 6px; width: 100%;
  background: transparent; border: 0; cursor: pointer; text-align: left;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  /* Заголовки групп меню давали 2.61:1 — хуже всех на портале, при том что
     это опора навигации. #5b6472 — 5.9:1 на белом фоне меню. */
  color: var(--nav-muted); padding: 12px 10px 4px; }
.nav-group:hover { color: var(--nav-link-hover); }
.nav-group .nav-chevron { font-size: 9px; transition: transform .15s; }
.nav-items { display: flex; flex-direction: column; gap: 2px; }
/* Свёрнутая группа: пункты скрыты, стрелка повёрнута */
/* Ключи групп перечислены поимённо: CSS не умеет «спрятать группу, чей ключ
   есть в списке» обобщённо, а без списка на <html> состояние применялось бы
   скриптом уже после отрисовки — то есть с морганием при каждом переходе.
   ЗАВЁЛ НОВУЮ ГРУППУ — допиши её ключ в ОБА списка ниже; синхронность стережёт
   тест test_kluchi_grupp_menyu_est_v_obshchem_css (забыл ключ — группа молча
   перестаёт сворачиваться, никакой ошибки при этом нет).

   Живых групп две: ozon и mp. Их рисуют ОБА приложения — портал
   (web/templates/base.html) и раздел «Вопросы покупателей» (mp-qa/lib/nav.ts):
   меню сквозное, его состав одинаков на всех страницах, и настроечные пункты
   в нём не разворачиваются (решение владельца 24.08.2026 — см. RULES.md).

   ОТПРАВЛЕННЫЙ НА ПОКОЙ КЛЮЧ ПОВТОРНО НЕ ИСПОЛЬЗОВАТЬ: у тех, кто сворачивал
   прежнюю группу, он навсегда остался в localStorage, и новая группа с тем же
   именем открылась бы свёрнутой без причины. Выведены из обращения 24.08.2026:
   refs («Справочники и служебное»), qa и admin (были группами настроек),
   set-ozon и set-mkt (прожили один вечер). Правил для них здесь больше нет —
   этот список существует как ЗАПРЕТ, а не как рабочая часть файла. */
html[data-nav-groups~="ozon"] .nav-items[data-group="ozon"],
html[data-nav-groups~="mp"] .nav-items[data-group="mp"] { display: none; }
html[data-nav-groups~="ozon"] .nav-group[data-group="ozon"] .nav-chevron,
html[data-nav-groups~="mp"] .nav-group[data-group="mp"] .nav-chevron { transform: rotate(-90deg); }
/* Меню свёрнуто до иконок — заголовков групп не видно, поэтому пункты
   показываем все: иначе до части разделов было бы не добраться */
html.nav-collapsed .sidebar .nav-items[data-group] { display: flex; }
.nav-collapsed .nav-group { display: none; }
/* Вид разделителя описан ОДИН раз, видимость переключается отдельно: раньше
   те же три свойства стояли и здесь, и в медиазапросе узкого экрана. */
.nav-sep { display: none; height: 1px; background: var(--nav-border); margin: 8px 6px; }
.nav-collapsed .nav-sep { display: block; }

/* Поверхность страницы для экранов БЕЗ каркаса меню: «пропуск истёк» и падение
   раздела /qa рисуются на голом фоне, и он обязан совпадать с фоном портала —
   иначе человек, вылетевший из ленты, видит третью, ни на что не похожую
   программу. Класс общий, поэтому живёт здесь, а не в globals.css раздела. */
.portal-surface { background-color: var(--nav-bg); }

.sidebar-foot { border-top: 1px solid var(--nav-border); padding: 10px; }
.sidebar-foot .who { font-size: 12px; color: var(--nav-muted); margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-foot button { width: 100%; }
.nav-collapsed .sidebar-foot .who { display: none; }
.nav-collapsed .sidebar-foot button { padding: 8px 0; }

/* Возврат в оглавление настроек — единственный путь к соседней настройке:
   подразделов в боковом меню нет намеренно, оно одинаково на всех страницах.
   Правило в ОБЩЕМ файле: ссылку рисуют оба приложения, и выглядеть она обязана
   одинаково по обе стороны шва. */
.back-link { display: inline-block; margin: 16px 0 -4px; font-size: 14px;
  color: var(--nav-accent); text-decoration: none; border-radius: 4px; }
.back-link:hover { text-decoration: underline; }
/* Видимый фокус: с клавиатуры это единственный выход со страницы настроек */
.back-link:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 2px; }

/* Ссылка «к содержимому»: до основного текста на каждой странице стоит
   полтора десятка ссылок меню, и с клавиатуры их приходилось проходить
   насквозь на КАЖДОЙ странице. Видна только при фокусе. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: var(--nav-accent); border: 2px solid var(--nav-accent);
  border-radius: 0 0 6px 0; padding: 10px 16px; font-size: 14px; text-decoration: none; }
.skip-link:focus { left: 0; }

.content { flex: 1; min-width: 0; }
main { max-width: 1400px; margin: 24px auto; padding: 0 24px; }

/* Узкий экран: меню всегда в свёрнутом виде, чтобы не съедать ширину */
@media (max-width: 900px) {
  .sidebar { width: var(--nav-w-collapsed); flex-basis: var(--nav-w-collapsed); }
  .brand-text, .nav-label, .nav-group, .sidebar-foot .who { display: none; }
  /* Заголовков групп не видно — свернуть их обратно нечем, поэтому
     пункты показываем все */
  html .sidebar .nav-items[data-group] { display: flex; }
  /* ...а раз заголовков нет, группы обязаны держаться на разделителях: без них
     меню на узком экране — сплошной столбик иконок, и пункт ищется перебором.
     Ровно то, ради чего меню сокращали с 19 пунктов до 7. Правило то же, что у
     свёрнутого меню на широком экране (.nav-collapsed .nav-sep выше). */
  .nav-sep { display: block; }
  .sidebar nav a { justify-content: center; padding: 9px 0; }
  main { padding: 0 12px; }
}