/* =========================================================================
   Sidebar (Desktop) — collapsed + hover expands with layout shift
   Version: 3.8 | Fonts: Montserrat for sidebar only
   =======================================================================*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap');

#wrapper { display:flex; align-items:flex-start; }

/* ---------- Sidebar base ---------- */
#sidebarMenu{
  width:var(--sidebar-width);
  background:var(--component-bg);
  color:var(--text-color);
  border-right:1px solid var(--border-color);
  position:sticky; top:var(--navbar-height);
  height:calc(100vh - var(--navbar-height));
  z-index:1020;
  transition:width var(--transition-duration) var(--transition-easing);
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  font-feature-settings:"liga","kern";
}
#sidebarMenu .sidebar-sticky{ position:relative; height:100%; overflow-y:auto; display:flex; flex-direction:column; }
#sidebarMenu .sidebar-sticky::-webkit-scrollbar{ width:8px; }
#sidebarMenu .sidebar-sticky::-webkit-scrollbar-track{ background:transparent; }
#sidebarMenu .sidebar-sticky::-webkit-scrollbar-thumb{ background:var(--border-color); border-radius:6px; }

/* ---------- Sections & links ---------- */
#sidebarMenu .sidebar-section{ padding:.88rem 1.1rem; }
#sidebarMenu .sidebar-section + .sidebar-section{ padding-top:.6rem; }

/* Заголовки секций — отчётливо отличаются от пунктов меню */
#sidebarMenu .sidebar-section-title{
  display:block;
  font-size:.84rem;
  line-height:1.25;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--text-color-muted);
  margin:.3rem 0 .45rem;
  font-weight:700;
  transition:max-width .15s ease, opacity .15s ease;
}

#sidebarMenu .nav{ list-style:none; margin:0; padding:0; }

/* Пункты меню — крупнее и плотнее */
#sidebarMenu .nav-link{
  display:flex; align-items:center; gap:1rem;
  padding:.85rem 1.1rem;
  border-radius:var(--border-radius);
  color:var(--text-color-secondary); background:transparent;
  margin-bottom:.4rem; white-space:nowrap;
  transition:all var(--transition-duration) var(--transition-easing);
  font-weight:500;
  font-size:1.02rem;          /* было .95rem */
  line-height:1.25;
  letter-spacing:.01em;
}
#sidebarMenu .nav-link .nav-link-icon{
  font-size:1.15rem;          /* было 1.05rem */
  width:26px;                 /* было 24px */
  text-align:center; flex-shrink:0;
  color:var(--text-color-secondary);
  transition:color .2s ease;
}
#sidebarMenu .nav-link:hover{ background:var(--hover-bg); color:var(--text-color); }
#sidebarMenu .nav-link.active{
  background:var(--primary-light-bg);
  color:var(--primary-color);
  font-weight:600;
}
#sidebarMenu .nav-link.active .nav-link-icon{ color:var(--primary-color); }

#sidebarMenu .sidebar-footer{
  margin-top:auto; padding:.9rem 1.1rem; border-top:1px solid var(--border-color);
}

/* ---- Badge "Скоро" ---- */
#sidebarMenu .menu-badge{
  margin-left:auto;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:600; line-height:1;
  padding:.28rem .5rem; border-radius:999px;
  background:var(--primary-light-bg); color:var(--primary-color);
  opacity:.95; user-select:none;
}
#sidebarMenu .nav-link.active .menu-badge{ background:var(--primary-color); color:#fff; opacity:1; }

/* ---------- Content base width (desktop) ---------- */
@media (min-width:992px){
  #page-content-wrapper{
    flex-grow:1; min-width:0;
    width:calc(100% - var(--sidebar-width));
    transition:width var(--transition-duration) var(--transition-easing);
  }
}

/* ========================================================================
   DESKTOP COLLAPSED + HOVER (контент сдвигается при раскрытии)
   ======================================================================== */
@media (min-width:992px){
  /* 1) Схлопнутый режим (ширины из переменных — не меняем) */
  #wrapper.lg-toggled #sidebarMenu{ width:var(--sidebar-collapsed-width); }
  #wrapper.lg-toggled #page-content-wrapper{ width:calc(100% - var(--sidebar-collapsed-width)); }

  /* Иконки одной колонной; текст/бейдж скрыты */
  #wrapper.lg-toggled #sidebarMenu .nav-link{
    justify-content:center; gap:0; padding-left:0; padding-right:0; text-align:center;
  }
  #wrapper.lg-toggled #sidebarMenu .sidebar-section,
  #wrapper.lg-toggled #sidebarMenu .sidebar-footer{
    padding-left:.6rem; padding-right:.6rem;
  }
  #wrapper.lg-toggled #sidebarMenu .nav-link-text,
  #wrapper.lg-toggled #sidebarMenu .sidebar-section-title{
    max-width:0; opacity:0; margin:0; padding:0; overflow:hidden;
  }
  #wrapper.lg-toggled #sidebarMenu .menu-badge{ display:none; }

  /* 2) Hover — меню расширяется и КОНТЕНТ СДВИГАЕТСЯ */
  #wrapper.lg-toggled #sidebarMenu:hover{ width:var(--sidebar-width); }
  #wrapper.lg-toggled #sidebarMenu:hover ~ #page-content-wrapper{
    width:calc(100% - var(--sidebar-width));
  }

  /* При расширении показываем текст/бейдж и нормальные отступы */
  #wrapper.lg-toggled #sidebarMenu:hover .nav-link{
    justify-content:flex-start; gap:1rem; padding:.85rem 1.1rem; text-align:left;
  }
  #wrapper.lg-toggled #sidebarMenu:hover .sidebar-section,
  #wrapper.lg-toggled #sidebarMenu:hover .sidebar-footer{
    padding-left:1.1rem; padding-right:1.1rem;
  }
  #wrapper.lg-toggled #sidebarMenu:hover .nav-link-text,
  #wrapper.lg-toggled #sidebarMenu:hover .sidebar-section-title{
    max-width:16rem;            /* было 14rem — больше пространства для текста */
    opacity:1;
  }
  #wrapper.lg-toggled #sidebarMenu:hover .menu-badge{ display:inline-flex; }
}

/* ---------- Dark theme ---------- */
[data-bs-theme="dark"] #sidebarMenu{ background:var(--component-bg); }
[data-bs-theme="dark"] #sidebarMenu .sidebar-section-title{ color:rgba(255,255,255,.50); }
[data-bs-theme="dark"] #sidebarMenu .nav-link{ color:rgba(255,255,255,.72); }
[data-bs-theme="dark"] #sidebarMenu .nav-link .nav-link-icon{ color:rgba(255,255,255,.62); }
[data-bs-theme="dark"] #sidebarMenu .nav-link:hover,
[data-bs-theme="dark"] #sidebarMenu .nav-link:hover .nav-link-text{ color:#fff; }
[data-bs-theme="dark"] #sidebarMenu .nav-link.active .nav-link-icon,
[data-bs-theme="dark"] #sidebarMenu .nav-link:hover .nav-link-icon{ color:var(--primary-color); }
[data-bs-theme="dark"] #sidebarMenu .sidebar-footer{ border-top-color:rgba(255,255,255,.08); }
[data-bs-theme="dark"] #sidebarMenu .menu-badge{ background:rgba(137,99,255,.18); color:var(--primary-color); }