/* ═══════════════════════════════════════════════════════════════
   Бічне меню в мові панелей старту «Люди»/«Відділення» (рішення власника 11.10).
   Лише токени теми (без нових кольорів): фон/межа/радіуси/типографіка — ті самі, що в .start-panel і .sp-row.
   Старт (#overview): меню напівпрозоре ПОВЕРХ мапи (мапа тягнеться під ним); інші екрани — суцільне.
   Брендування закладу перефарбовує меню далі: акцент (--accent) береться з тих самих токенів.
   Підключається ПІСЛЯ carbon.css, тож перебиває старі правила сайдбара.
   ═══════════════════════════════════════════════════════════════ */
:root{--sb-w:272px}
@media (max-width:900px){:root{--sb-w:220px}}
@media (max-width:720px){:root{--sb-w:72px}}
body:has(.sidebar.is-collapsed){--sb-w:76px}

/* Корпус меню */
html[data-theme] .sidebar{
  background:var(--bg-surface);color:var(--text-primary);
  border:0;border-right:1px solid color-mix(in srgb,var(--border-strong) 70%,transparent);
  box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;gap:var(--space-2)}
html[data-theme] .sidebar .brand{cursor:pointer;border-radius:var(--r-sm);transition:background 120ms ease}
html[data-theme] .sidebar .brand:hover{background:color-mix(in srgb,var(--bg-hover) 85%,transparent)}
html[data-theme] .sidebar .brand:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}

/* Група = заголовок панелі (як .sp-title) */
html[data-theme] .sidebar .nav-section{margin:var(--space-2) 0 0;padding-top:var(--space-2);border-top:1px solid color-mix(in srgb,var(--border-subtle) 85%,transparent)}
html[data-theme] .sidebar .nav-section:first-child{margin-top:0;padding-top:0;border-top:0}
html[data-theme] .sidebar .nav-section-title{padding:var(--space-2) var(--space-3) var(--space-1);color:var(--text-primary);
  font-size:var(--fs-title);font-weight:var(--fw-semibold);letter-spacing:0;text-transform:none}
html[data-theme] .sidebar .nav-section-items{gap:2px}

/* Пункт = рядок панелі (як .sp-row): прозорий, радіус r-sm, тихий › і підсвітка при наведенні */
html[data-theme] .sidebar .nav-item,
html[data-theme] .sidebar .nav-item[data-nav-accent]{
  position:relative;background:transparent;border:0;border-radius:var(--r-sm);box-shadow:none;
  color:var(--text-primary);font-weight:var(--fw-regular);
  min-height:0;transition:background 120ms ease}
html[data-theme] .sidebar:not(.is-collapsed) .nav-item{font-size:var(--fs-body);padding:var(--space-2) 26px var(--space-2) var(--space-3)}
html[data-theme] .sidebar .nav-item .ic{opacity:.85}
html[data-theme] .sidebar .nav-item:hover,
html[data-theme] .sidebar .nav-item[data-nav-accent]:hover{background:color-mix(in srgb,var(--bg-hover) 85%,transparent);color:var(--text-primary)}
html[data-theme] .sidebar .nav-item:focus-visible{outline:2px solid var(--border-focus);outline-offset:-2px}
html[data-theme] .sidebar:not(.is-collapsed) .nav-item::after{
  content:"\203A";position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);
  font-size:20px;line-height:1;color:var(--text-muted);opacity:.6;transition:opacity 120ms ease,color 120ms ease,transform 120ms ease}
html[data-theme] .sidebar:not(.is-collapsed) .nav-item:hover::after{opacity:1;color:var(--accent);transform:translate(2px,-50%)}
html[data-theme] .sidebar .nav-item.active,
html[data-theme] .sidebar .nav-item[data-nav-accent].active{
  background:color-mix(in srgb,var(--bg-hover) 100%,transparent);color:var(--text-primary);font-weight:var(--fw-semibold);
  box-shadow:inset 2px 0 0 var(--accent)}
html[data-theme] .sidebar .nav-item.active .ic{opacity:1;color:var(--accent)}

/* «Друк» — унизу, біля профілю й налаштувань */
.sidebar-bottom{margin-top:auto;padding-top:var(--space-2);border-top:1px solid color-mix(in srgb,var(--border-subtle) 85%,transparent)}
.sidebar-bottom .nav-item{display:flex;align-items:center;gap:var(--space-2)}
html[data-theme] .sidebar .sidebar-footer{margin-top:0;border-top:0}

/* Старт: меню — напівпрозора панель поверх мапи, мапа тягнеться під нею */
html[data-theme] body[data-route="overview"] .sidebar,
html[data-theme][data-theme] body[data-route="overview"] .sidebar{
  position:fixed;top:var(--space-3);left:var(--space-3);bottom:var(--space-3);height:auto;width:var(--sb-w);z-index:6;
  background:color-mix(in srgb,var(--bg-surface) 76%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid color-mix(in srgb,var(--border-strong) 70%,transparent);border-radius:var(--r-lg)}
@media (prefers-reduced-transparency:reduce){
  html[data-theme] body[data-route="overview"] .sidebar{background:var(--bg-surface);-webkit-backdrop-filter:none;backdrop-filter:none}}
/* панелі старту посуваються праворуч від меню */
body[data-route="overview"] .start-panel-left{left:calc(var(--sb-w) + var(--space-3) * 2)}
body[data-route="overview"] .map3d-site-section .map3d-toolbar{left:calc(var(--sb-w) + var(--sp-w) + var(--space-5) + var(--space-3))}
@media (max-width:1099px){
  body[data-route="overview"] .start-panels{inset:var(--sp-top) auto auto calc(var(--sb-w) + var(--space-3) * 2)}
  body[data-route="overview"] .map3d-site-section .map3d-toolbar{left:calc(var(--sb-w) + var(--space-3) * 2);right:var(--space-3)}
}