/* Левая навигация «Транс-цем» — редизайн под макет 2026-09-17:
   раздел с названием + свёрнутые подразделы (аккордеон), суммируемый бейдж на разделе,
   режим «только иконки» (кнопка «). Роутинг НЕ трогаем — листья остаются .nav-item[data-screen].
   Класс .sbx на <aside class="sidebar sbx"> — перебивает старые правила .sidebar из styles.css. */
:root{
  --sb-accent:#6d5ef6;--sb-accent2:#8b5cf6;--sb-accent-soft:#efeaff;--sb-accent-line:#e4ddff;
  --sb-ink:#1e2540;--sb-muted:#8a93a6;--sb-muted2:#a7afbe;--sb-line:#eef1f6;--sb-bg:#ffffff;
  --sb-yellow-bg:#fdeec2;--sb-yellow-tx:#9a6b09;--sb-red-bg:#ffe1e0;--sb-red-tx:#d13b3b;
}
/* ── Контейнер ── */
.sidebar.sbx{
  width:300px;flex:0 0 300px;background:var(--sb-bg);border:1px solid var(--sb-line);border-radius:20px;
  margin:14px 0 14px 14px;display:flex;flex-direction:column;min-height:0;height:calc(100vh - 28px);
  position:sticky;top:14px;box-shadow:0 12px 34px rgba(30,37,64,.06);padding:0;overflow:hidden;
  transition:width .22s cubic-bezier(.4,0,.2,1),flex-basis .22s cubic-bezier(.4,0,.2,1);font-family:inherit;
}
.sidebar.sbx *{box-sizing:border-box}
.sidebar.sbx .sidebar-toggle{display:none}

/* ── Шапка (лого + свернуть) ── */
.sbx-head{display:flex;align-items:center;gap:11px;padding:18px 16px 14px;position:relative}
.sbx-logo{width:40px;height:40px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,#8a6bff,#6b4af5);color:#fff;box-shadow:0 8px 18px rgba(109,74,245,.32)}
.sbx-logo svg{width:22px;height:22px}
.sbx-brand-tx{min-width:0;flex:1;overflow:hidden}
.sbx-brand-tx b{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--sb-ink);line-height:1.1;white-space:nowrap}
.sbx-brand-tx small{display:block;font-size:12px;color:var(--sb-muted);white-space:nowrap;margin-top:2px}
.sbx-collapse{width:34px;height:34px;flex:0 0 auto;border-radius:10px;border:1px solid var(--sb-line);background:#fff;
  color:var(--sb-muted);cursor:pointer;display:grid;place-items:center;font-size:15px;line-height:1;transition:.14s}
.sbx-collapse:hover{border-color:var(--sb-accent-line);color:var(--sb-accent);background:var(--sb-accent-soft)}
.sbx-collapse svg{width:16px;height:16px}

/* ── Навигация ── */
.sbx-nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:4px 12px 12px;display:flex;flex-direction:column;gap:3px}
.sbx-nav::-webkit-scrollbar{width:7px}
.sbx-nav::-webkit-scrollbar-thumb{background:#e3e6ee;border-radius:8px}

/* Иконка раздела/листа */
.sbx-ic{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;color:var(--sb-muted);position:relative}
.sbx-ic svg{width:21px;height:21px;stroke-width:1.9}
.sbx-label{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--sb-ink);text-align:left}
/* Старые стили навигации задают nowrap!important. Показываем название целиком,
   даже если рядом с ним есть бейдж или доступная ширина уменьшилась. */
.sidebar.sbx:not(.is-mini) .sbx-label{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere;line-height:1.35}

/* Лист верхнего уровня (Главный экран) + заголовок раздела */
.sbx-item,.sbx-sec-head{
  display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:12px;border:0;background:transparent;
  cursor:pointer;text-decoration:none;font:inherit;position:relative;transition:background .14s;text-align:left;
}
.sbx-item:hover,.sbx-sec-head:hover{background:#f6f7fb}
.sbx-item.active,.sbx-sec-head.is-current{background:var(--sb-accent-soft)}
.sbx-item.active .sbx-ic,.sbx-item.active .sbx-label{color:var(--sb-accent)}
.sbx-item.active::before,.sbx-sub.active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:4px;height:22px;background:var(--sb-accent);border-radius:0 4px 4px 0}
.sbx-item{overflow:visible}

/* Раздел (аккордеон) */
.sbx-sec{display:flex;flex-direction:column}
.sbx-sec.access-hidden{display:none!important}
.sbx-chev{width:18px;height:18px;flex:0 0 auto;color:var(--sb-muted2);display:grid;place-items:center;transition:transform .2s}
.sbx-chev svg{width:15px;height:15px}
.sbx-sec.is-open>.sbx-sec-head .sbx-chev{transform:rotate(180deg)}
.sbx-sec.is-open>.sbx-sec-head .sbx-label{color:var(--sb-ink)}

/* Подразделы */
.sbx-subs{display:grid;grid-template-rows:0fr;transition:grid-template-rows .22s cubic-bezier(.4,0,.2,1);overflow:hidden}
.sbx-sec.is-open>.sbx-subs{grid-template-rows:1fr}
.sbx-subs>div{min-height:0;overflow:hidden;padding-left:20px;display:flex;flex-direction:column;gap:2px;margin:2px 0 4px}
.sbx-sub{display:flex;align-items:center;gap:11px;padding:9px 12px 9px 10px;border-radius:10px;text-decoration:none;position:relative;transition:background .14s}
.sbx-sub:hover{background:#f6f7fb}
.sbx-sub.active{background:var(--sb-accent-soft)}
.sbx-sub .sbx-ic{width:22px;height:22px}
.sbx-sub .sbx-ic svg{width:18px;height:18px}
.sbx-sub .sbx-label{font-size:13.5px;font-weight:600;color:#4a5468}
.sbx-sub.active .sbx-label,.sbx-sub.active .sbx-dot{color:var(--sb-accent)}
.sbx-sub.active .sbx-label{color:var(--sb-accent)}
.sbx-sub.active::before{left:-4px;height:18px}
.sbx-dot{width:22px;flex:0 0 auto;display:grid;place-items:center}
.sbx-dot::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--sb-accent)}

/* Бейджи (индивидуальные и суммарный) */
.sbx-badge{flex:0 0 auto;font-size:11.5px;font-weight:800;border-radius:999px;padding:1px 8px;line-height:1.5;min-width:22px;text-align:center}
.sbx-badge.y{background:var(--sb-yellow-bg);color:var(--sb-yellow-tx)}
.sbx-badge.r{background:var(--sb-red-bg);color:var(--sb-red-tx)}
.sbx-sum{margin-left:auto}
.sbx-sec.is-open>.sbx-sec-head .sbx-sum{display:none}   /* раскрыт → сумма прячется, видны бейджи подразделов */
.sbx-sec-head .sbx-chev{margin-left:6px}
.sbx-sec-head .sbx-sum + .sbx-chev{margin-left:6px}
.sbx-sec-head .sbx-label{flex:1}

/* ── Профиль ── */
.sbx .profile{display:flex;align-items:center;gap:11px;margin:4px 12px 14px;padding:10px 12px;border:1px solid var(--sb-line);
  border-radius:14px;cursor:pointer;background:#fff;transition:border-color .14s,background .14s}
.sbx .profile:hover{border-color:var(--sb-accent-line);background:#faf9ff}
.sbx .profile .avatar{width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;
  background:linear-gradient(135deg,#8a6bff,#6b4af5)}
.sbx .profile>div:not(.avatar){min-width:0;flex:1;overflow:hidden}
.sbx .profile strong{display:block;font-size:14px;font-weight:700;color:var(--sb-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.sbx .profile small{display:block;font-size:12px;color:var(--sb-muted)}
.sbx .profile i{color:var(--sb-muted2);font-style:normal;flex:0 0 auto}

/* ── Свёрнутый режим «только иконки» ── */
.sidebar.sbx.is-mini{width:76px;flex-basis:76px}
.sidebar.sbx.is-mini .sbx-brand-tx,
.sidebar.sbx.is-mini .sbx-label,
.sidebar.sbx.is-mini .sbx-chev,
.sidebar.sbx.is-mini .sbx-badge:not(.sbx-dotbadge),
.sidebar.sbx.is-mini .sbx-subs,
.sidebar.sbx.is-mini .profile>div:not(.avatar),
.sidebar.sbx.is-mini .profile i{display:none}
.sidebar.sbx.is-mini .sbx-head{justify-content:center;padding:18px 8px 14px}
.sidebar.sbx.is-mini .sbx-collapse{position:absolute;top:14px;right:-14px;background:#fff;box-shadow:0 4px 12px rgba(30,37,64,.14);z-index:2}
.sidebar.sbx.is-mini .sbx-collapse svg{transform:rotate(180deg)}
.sidebar.sbx.is-mini .sbx-item,
.sidebar.sbx.is-mini .sbx-sec-head{justify-content:center;gap:0;padding:11px 0}
.sidebar.sbx.is-mini .sbx-item>.sbx-ic,
.sidebar.sbx.is-mini .sbx-sec-head>.sbx-ic{margin-inline:auto}
.sidebar.sbx.is-mini .sbx-sec.is-open>.sbx-subs{grid-template-rows:0fr}   /* в мини аккордеон не раскрываем */
.sidebar.sbx.is-mini .profile{justify-content:center;padding:10px 0}
.sidebar.sbx.is-mini .sbx-item::before,.sidebar.sbx.is-mini .sbx-sub::before{display:none}
/* точка-бейдж на иконке в мини-режиме (есть уведомления) */
.sbx-dotbadge{display:none}
.sidebar.sbx.is-mini .sbx-ic .sbx-dotbadge{display:block;position:absolute;top:-1px;right:-1px;width:9px;height:9px;border-radius:50%;border:2px solid #fff}
.sidebar.sbx.is-mini .sbx-ic .sbx-dotbadge.y{background:#f5b60a}
.sidebar.sbx.is-mini .sbx-ic .sbx-dotbadge.r{background:#ff5a5f}
/* тултип в мини-режиме */
.sidebar.sbx.is-mini .sbx-item,.sidebar.sbx.is-mini .sbx-sec-head{position:relative}
.sidebar.sbx.is-mini .sbx-tip{position:absolute;left:64px;top:50%;transform:translateY(-50%);background:#1e2540;color:#fff;
  font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:9px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .12s;z-index:40;box-shadow:0 8px 20px rgba(0,0,0,.22)}
.sidebar.sbx.is-mini .sbx-item:hover .sbx-tip,.sidebar.sbx.is-mini .sbx-sec-head:hover .sbx-tip{opacity:1}
.sbx-tip{display:none}
.sidebar.sbx.is-mini .sbx-tip{display:block}

/* ── Адаптив ── */
@media(max-width:1100px){ .sidebar.sbx{width:250px;flex-basis:250px} }
/* Мобильный drawer: гамбургер + фон (создаются в sidebar-nav.js). На десктопе скрыты. */
.sbx-burger,.sbx-backdrop{display:none}
@media(max-width:820px){
  .sidebar.sbx{position:fixed;left:0;top:0;bottom:0;height:100vh;margin:0;border-radius:0 18px 18px 0;z-index:70;transform:translateX(-100%);transition:transform .24s;box-shadow:0 20px 60px rgba(0,0,0,.25)}
  .sidebar.sbx.is-open-mobile{transform:none}
  .sidebar.sbx.is-mini{width:284px;flex-basis:284px}   /* на мобиле — полноразмерный drawer, не иконки */
  .sidebar.sbx .sbx-collapse{display:none}
  .sbx-burger{display:grid;place-items:center;position:fixed;top:12px;left:12px;width:42px;height:42px;border-radius:12px;border:1px solid var(--sb-line);background:#fff;color:var(--sb-ink);z-index:50;box-shadow:0 6px 16px rgba(30,37,64,.12);cursor:pointer}
  .sbx-burger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
  .sbx-backdrop.is-on{display:block;position:fixed;inset:0;background:rgba(20,30,55,.4);z-index:65}
}
.hiring-section-picker{position:fixed;z-index:2147483000;width:180px;padding:7px;background:#fff;border:1px solid #dbe3f1;border-radius:14px;box-shadow:0 16px 44px rgba(15,23,42,.18)}
.hiring-section-picker button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:9px;background:#fff;color:#17254a;text-align:left;font-size:12px;font-weight:700;cursor:pointer}
.hiring-section-picker button:hover,.hiring-section-picker button:focus-visible{background:#edf2ff;color:#1648ce}