/* unified-header.css — меню слева.
 *
 * Было двухрядной шапкой сверху; 02.09.2026 переведено в вертикальную колонку,
 * как в taxiCRM: разделы слева, содержимое справа. Сделано стилями, а не
 * правкой девятнадцати страниц — разметка шапки у них общая, и любая новая
 * страница получает то же меню бесплатно.
 *
 * 17.09.2026 колонка переведена в лавандовую тему: светлая панель со
 * скруглением, пункты-пилюли, активный раздел — фиолетовой заливкой. Цвета
 * берутся из vnk-ui.css, своих значений здесь нет намеренно: иначе панель
 * однажды разойдётся с содержимым, как разошлась тёмная.
 *
 * На телефоне колонка уезжает вниз и становится панелью под большой палец:
 * спрятанное меню означает, что из раздела некуда уйти, а 230 пикселей слева
 * съели бы половину экрана.
 */
:root { --fl-side: 224px; }

/* Отступ под колонку — только когда колонка есть. На входе и смене пароля
   меню не строится, и безусловный отступ уводил карточку из центра экрана. */
body.fl-has-menu { padding-left: calc(var(--fl-side) + 14px); }
body:has(> .fl-hdr) { padding-left: calc(var(--fl-side) + 14px); }

/* Страница внутри оболочки: панель рисует оболочка, сдвигать нечего.
   Свою шапку страница может иметь прямо в разметке — прячем её, иначе внутри
   окна получается вторая колонка рядом с настоящей панелью. */
body.fl-embed { padding-left: 0; }
body.fl-embed .fl-hdr,
body.fl-embed .fl-header { display: none !important; }

.fl-hdr {
  position: fixed; left: 12px; top: 12px; bottom: 12px; width: var(--fl-side); z-index: 9000;
  background: linear-gradient(180deg, var(--side, #FAF9FE) 0%, var(--side-2, #EDE9FB) 100%);
  border-radius: var(--r-xl, 28px);
  box-shadow: var(--sh-2, 0 2px 6px rgba(82,70,150,.05), 0 14px 34px rgba(82,70,150,.07));
  font-family: var(--font, 'Golos Text', system-ui, sans-serif);
  color: var(--ink, #16172B);
  display: flex; flex-direction: column;
  align-items: stretch;
  padding: 20px 12px 14px;
  gap: 6px;
  overflow-y: auto;
}
.fl-hdr::-webkit-scrollbar { width: 0; }

.fl-logo {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-decoration: none; color: inherit;
  padding: 0 8px 16px;
}
.fl-logo-ico {
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--accent, #6B5BD2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff; flex-shrink: 0;
}
.fl-logo-name { font-weight: 800; font-size: 16px; line-height: 1; letter-spacing: 2px; }
.fl-logo-img { height: 30px; width: auto; display: block; flex-shrink: 0; }
/* Панель светлая — нужен тёмный вариант логотипа. */
.fl-logo-img.lg-dark { display: none; }
.fl-logo-img.lg-light { display: block; }
body.theme-light .fl-logo-img.lg-dark { display: none; }
body.theme-light .fl-logo-img.lg-light { display: block; }

.fl-meta {
  font-size: 8.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted, #7C8397);
  padding: 0 8px 10px;
  text-align: center;
  line-height: 1.5;
}
.fl-meta:empty { padding: 0; }

/* Профиль и выход — внизу колонки. */
.fl-right {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 12px 6px 0;
  margin-top: auto;
  border-top: 1px solid var(--line, #ECEAF5);
}

.fl-nav {
  display: flex; flex-direction: column;
  gap: 2px;
  margin: 0; padding: 2px 0;
  align-items: stretch;
}
.fl-nav::-webkit-scrollbar { height: 0; display: none; }

/* ── Пункты меню ────────────────────────────────────────────────────────────
   Пилюли, как кнопки: по ним нажимают чаще всего за день, и нажатие должно
   быть видно. */

.fl-nav a,
.fl-nav .fl-lnk {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px; min-height: 40px; border-radius: var(--pill, 999px);
  color: var(--ink-2, #4A4F66); text-decoration: none;
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  background: none; border: none; width: 100%; text-align: left;
  font-family: inherit; cursor: pointer;
  transition: background var(--t-card, 190ms) var(--ease, ease),
              color var(--t-card, 190ms) var(--ease, ease),
              transform var(--t-press, 110ms) var(--ease, ease);
  position: relative; overflow: hidden;
}
.fl-nav a:hover,
.fl-nav .fl-lnk:hover {
  background: rgba(107, 91, 210, .10); color: var(--ink, #16172B);
  transform: translateX(2px);
}
/* Нажатие видно как на настоящей клавише: пункт проседает и уходит внутрь,
   потом отскакивает. Раньше выбор раздела ничем не отличался от наведения, и
   человек нажимал второй раз, думая, что не попал. */
.fl-nav a:active,
.fl-nav .fl-lnk:active {
  transform: scale(.94) translateX(0);
  background: var(--accent-soft, #E6E2F8);
  transition-duration: 60ms;
}
.fl-nav a.active,
.fl-nav .fl-lnk.active {
  background: var(--accent-soft, #E6E2F8); color: var(--accent, #6B5BD2);
  transform: translateX(3px);
  box-shadow: var(--sh-1, 0 1px 3px rgba(82, 70, 150, .05));
  animation: navPick 340ms var(--ease, cubic-bezier(.22, 1, .36, 1));
}
/* Выбранный пункт коротко «клюёт» — видно, что переключение случилось. */
@keyframes navPick {
  0%   { transform: scale(.94) translateX(0); }
  55%  { transform: scale(1.03) translateX(4px); }
  100% { transform: scale(1) translateX(3px); }
}
/* Полоска слева у выбранного: с одного взгляда видно, где ты находишься. */
.fl-nav a.active::before,
.fl-nav .fl-lnk.active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0;
  background: var(--accent, #6B5BD2);
}

.fl-ic {
  width: 20px; text-align: center; flex: none; font-size: 14px; opacity: .75;
  display: inline-block;
  transition: transform var(--t-card, 190ms) var(--ease, ease), opacity var(--t-card, 190ms) var(--ease, ease);
}
/* Значок растёт под курсором — видно, на какую кнопку целишься, ещё до
   нажатия. На телефоне то же даёт палец при касании. */
.fl-nav a:hover .fl-ic,
.fl-nav .fl-lnk:hover .fl-ic,
.fl-slnk:hover .fl-ic { transform: scale(1.28); opacity: 1; }
.fl-nav a:active .fl-ic,
.fl-nav .fl-lnk:active .fl-ic,
.fl-slnk:active .fl-ic { transform: scale(1.05); }
.fl-nav a.active .fl-ic,
.fl-nav .fl-lnk.active .fl-ic,
.fl-slnk.active .fl-ic { opacity: 1; transform: scale(1.18); }

.fl-caret { margin-left: auto; transition: transform var(--t-card, 190ms) var(--ease, ease); opacity: .5; }
.fl-grp.open > .fl-head .fl-caret { transform: rotate(90deg); }

/* Вложенные пункты держат тот же вертикальный ритм, что и верхние: те же
   отступы, тот же зазор между значком и словом, та же высота строки. Раньше
   они были простыми блоками — значок липнул к тексту, строки шли теснее
   соседних, и раздел выглядел сжатым по сравнению с остальным меню. */
.fl-sub { display: none; padding: 2px 0 6px 10px; }
.fl-grp.open .fl-sub { display: grid; gap: 2px; }

.fl-slnk {
  display: flex; align-items: center; gap: 11px; min-height: 38px;
  padding: 9px 14px 9px 20px; border-radius: var(--pill, 999px);
  color: var(--muted, #7C8397); text-decoration: none; font-size: 12.5px; font-weight: 500;
  line-height: 1.25; letter-spacing: 0; text-transform: none;
  transition: background var(--t-card, 190ms) var(--ease, ease), color var(--t-card, 190ms) var(--ease, ease);
}
.fl-slnk { position: relative; overflow: hidden;
  transition: background var(--t-card, 190ms) var(--ease, ease), color var(--t-card, 190ms) var(--ease, ease),
              transform var(--t-press, 110ms) var(--ease, ease); }
.fl-slnk:hover { color: var(--ink, #16172B); background: rgba(107, 91, 210, .08); transform: translateX(2px); }
.fl-slnk:active { transform: scale(.95); background: var(--accent-soft, #E6E2F8); transition-duration: 60ms; }
.fl-slnk.active {
  color: var(--accent, #6B5BD2); background: var(--accent-soft, #E6E2F8); font-weight: 600;
  transform: translateX(3px);
  animation: navPick 340ms var(--ease, cubic-bezier(.22, 1, .36, 1));
}

/* Значок подпункта — мельче, чем у раздела: подпунктов много, и крупные
   картинки превратили бы колонку в рябь. */
/* Значок вложенного пункта занимает ту же колонку, что и у верхних: тогда
   слова в обоих уровнях начинаются по одной линии, и меню читается столбцом,
   а не лесенкой. Отступ между значком и словом даёт `gap` строки. */
.fl-ic--sub { width: 20px; font-size: 13px; opacity: .7; }
.fl-slnk.active .fl-ic--sub { opacity: 1; }

/* ── Кнопки в подвале колонки ───────────────────────────────────────────── */
.fl-btn {
  padding: 8px 13px; border-radius: var(--pill, 999px);
  border: none; background: var(--soft, #F4F2FC);
  color: var(--ink-2, #4A4F66); font-size: 11px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  line-height: 1; display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--t-card, 190ms) var(--ease, ease),
              color var(--t-card, 190ms) var(--ease, ease),
              transform var(--t-press, 110ms) var(--ease, ease);
}
.fl-btn:hover { background: var(--accent-soft, #E6E2F8); color: var(--accent, #6B5BD2); }
.fl-btn:active { transform: scale(.95); }
.fl-btn.primary { background: var(--accent-soft, #E6E2F8); color: var(--accent, #6B5BD2); }
.fl-btn.danger { background: var(--crit-soft, #FBEAE8); color: var(--crit, #D8453B); }
.fl-btn.danger:hover { background: #F7DAD7; color: var(--crit, #D8453B); }
.fl-info { font-size: 11px; color: var(--muted, #7C8397); padding: 0 6px; white-space: nowrap; }

/* Перебиваем фикс-стиль role-badge, чтобы он шёл inline в .fl-right */
.fl-right #role-badge,
#role-badge {
  position: static !important;
  top: auto !important; left: auto !important;
  z-index: auto !important;
  backdrop-filter: none !important;
  margin-right: 4px;
}
.fl-hdr ~ #role-badge { display: none !important; }

/* Под-нав на mechanic */
.fl-subnav {
  background: var(--card, #fff); border-radius: var(--r-lg, 20px);
  box-shadow: var(--sh-1, 0 1px 3px rgba(82,70,150,.05));
  display: flex; gap: 8px; padding: 10px 16px; margin: 0 0 14px;
  overflow-x: auto;
}
.fl-subnav .fl-btn { font-size: 11px; padding: 7px 13px; }

.fl-right .bell-wrap { padding: 4px 6px; }

/* ── Телефон ────────────────────────────────────────────────────────────────
   Колонка превращается в нижнюю панель, а не прячется: значки под большой
   палец, подписи остаются, чтобы не гадать по картинке. */

@media (max-width: 900px) {
  body.fl-has-menu, body:has(> .fl-hdr) { padding-left: 0; padding-bottom: 86px; }
  .fl-hdr {
    position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto;
    width: auto; height: auto;
    flex-direction: row; align-items: center;
    border-radius: 22px; padding: 7px; gap: 3px;
    box-shadow: var(--sh-3, 0 4px 12px rgba(82,70,150,.09), 0 24px 56px rgba(82,70,150,.11));
    overflow-x: auto; overflow-y: hidden;
  }
  .fl-logo, .fl-meta { display: none; }
  .fl-nav { flex-direction: row; gap: 3px; padding: 0; }
  .fl-nav a, .fl-nav .fl-lnk {
    flex-direction: column; gap: 4px; padding: 8px 11px;
    font-size: 8.5px; letter-spacing: .2px; border-radius: 16px; white-space: nowrap; width: auto;
  }
  .fl-ic { font-size: 17px; width: auto; }
  /* Раскрытые подпункты заняли бы весь экран — разделы лентой, подпункты
     открываются на самой странице. */
  .fl-sub { display: none !important; }
  .fl-caret { display: none; }
  .fl-right { margin-top: 0; border-top: none; padding: 0 4px; flex-wrap: nowrap; }
  .fl-btn { font-size: 10px; padding: 7px 10px; }
}

/* Старая горизонтальная шапка (.fl-header) осталась на дашборде от московской
   версии. Пока меню жило наверху, она была уместна; с колонкой слева получалось
   два логотипа подряд. Прячем: логотип, подпись и выход теперь в колонке. */
.fl-header { display: none !important; }