:root{
//	--sb-w:240px; --sb-w-c:60px; --tap:44px; 
	}

html{
//-webkit-text-size-adjust:100%; } img,video{ max-width:100%; height:auto; display:block; 
}

/* липкая шапка */
.topbar{ 
//position:sticky; top:0; z-index:1000; backdrop-filter:saturate(120%) blur(6px); 
}




/* бургер (мобилки) */
.burger{ display:none; width:var(--tap); height:var(--tap); border:none; background:transparent; padding:8px; border-radius:10px; }
.burger span{ display:block; height:2px; background:currentColor; margin:5px 0; width:24px; transition:transform .25s ease, opacity .2s; }
@media (max-width:991.98px){ .burger{ display:inline-flex; align-items:center; justify-content:center; } }




/* десктопная логика сайдбара */
#sidebar{ width:var(--sb-w); transition:width .25s ease, transform .25s ease; overflow:hidden; will-change:width,transform; }

.content{ margin-left:var(--sb-w); transition:margin-left .25s ease; }

#sidebar.collapsed{ width:var(--sb-w-c); } 
body.sidebar-collapsed .content{ margin-left:var(--sb-w-c); }

/* мобилки: off-canvas */
@media (max-width:991.98px){
  #sidebar{
	  position:fixed; top:0; bottom:0; left:0; z-index:1000; width:var(--sb-w); max-width:85vw; transform:translateX(-100%); box-shadow:0 10px 30px rgba(0,0,0,.2); 
	  }
  body.sidebar-open #sidebar{ transform:translateX(0); }
  .content{ margin-left:0; }
}

/* бэкдроп */
.sidebar-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:opacity .2s; z-index:999; }
body.sidebar-open .sidebar-backdrop{ opacity:1; pointer-events:auto; }
body.sidebar-open .sidebar-backdrop[hidden]{ display:block; }
body.theme-dark .sidebar-backdrop{ background:rgba(0,0,0,.5); }

/* удобные тапы и адаптивные сетки */
#sidebar .menu-link{ min-height:var(--tap); display:flex; align-items:center; }

.kpis{ display:grid; gap:14px; grid-template-columns:repeat(4,minmax(220px,1fr)); }
@media (max-width:1200px){ .kpis{ grid-template-columns:repeat(2,minmax(220px,1fr)); } }
@media (max-width:640px){ .kpis{ grid-template-columns:1fr; } }

.charts{ display:grid; gap:20px; grid-template-columns:repeat(2,minmax(280px,1fr)); }
@media (max-width:991.98px){ .charts{ grid-template-columns:1fr; } }

/* таблицы */
.responsive-table{ overflow:auto; -webkit-overflow-scrolling:touch; }
.responsive-table table{ min-width:640px; }

/* узкие экраны */
@media (max-width:480px){
  .btn{ min-height:var(--tap); padding:.6rem .9rem; }
  input,select{ min-height:var(--tap); }
}

/* уважение предпочтений */
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }


/* SAFETY: заставляем меню быть видимым на мобилках, поверх всего */
@media (max-width: 991.98px){
  #sidebar{
    display:block !important;
    background: var(--sidebar-bg, #fff);
    z-index: 11100 !important;      /* выше шапки */
    transform: translateX(-100%);  /* по умолчанию спрятан слева */
  }
  body.sidebar-open #sidebar{
    transform: translateX(0) !important; /* открытое состояние */
  }
  .sidebar-backdrop{
    z-index: 1090 !important;
  }
}


/* ===== FIX: контент на всю ширину ===== */

/* на десктопе: учитываем ширину сайдбара для #content (а не .content) */
#content{ margin-left: var(--sb-w); }
body.sidebar-collapsed #content{ margin-left: var(--sb-w-c); }

/* страница и вложенные контейнеры растягиваются */
#content, #page{
//  display:block;
//  width:100%;
//  max-width:100%;
//  box-sizing:border-box;
}

/* общие "контейнеры" без фиксированных ограничений на мобилке */
@media (max-width: 991.98px){
  /* off-canvas: контент не смещаем, ширина 100% */
  #content{ margin-left:0; padding-left:16px; padding-right:16px; }

  /* обнуляем "жёсткие" ширины из базовой темы */
  .container, .wrapper, .page, .main, .inner,
  [class*="container"], [class*="wrap"]{
//    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box;
  }

  /* таблицы/блоки, у которых стоял min/max-width */
  table, .grid, .cards, .kpis, .charts{
	  max-width:100%;
  }
}




















/* ==== FIX: контент не вылезает вправо из-за margin-left + width:100% ==== */

/* Десктоп/планшет: ширина = 100% минус ширина сайдбара */
#content{
  margin-left: var(--sb-w);
  width: calc(100% - var(--sb-w));
  box-sizing: border-box;
}

/* Когда сайдбар сжат до иконок */
body.sidebar-collapsed #content{
  margin-left: var(--sb-w-c);
  width: calc(100% - var(--sb-w-c));
}

/* Мобилка: off-canvas — контент без смещения, на всю ширину */
@media (max-width: 991.98px){
  #content{
    margin-left: 0 !important;
    width: 100% !important;
    padding-left: 16px;  /* опционально, можно убрать/изменить */
    padding-right: 16px; /* опционально */
  }
}

/* Если где-то в теме есть .content с margin-left — гасим на мобилке для верности */
@media (max-width: 991.98px){
  .content{ margin-left: 0 !important; }
}

/* Страница и вложенные контейнеры: не задаём им 100% **и** margin одновременно */
#page{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* чтобы не появлялся горизонтальный скролл от «вылезших» элементов */
/*
html, body{ overflow-x:hidden; }
*/
/* 1. Заставляем страницу видеть всю высоту экрана */
html, body {
    height: 100%;
    margin: 0;
}

/* 2. Делаем body гибким контейнером */
body {
    display: flex;
    flex-direction: column;
}

/* 3. Оживляем контентную область */
#content {
    flex: 1 0 auto; /* Заставляет контент растягиваться и толкать низ страницы */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Гарантирует, что дно страницы всегда доступно */
}