/* Сброс, типографика и оболочка SCADA: шапка с фото, боковое меню 64 px, сетка 12 колонок, заголовок страницы. */

/* ---------- сброс и типографика ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;overflow-x:hidden;background:var(--c-primary-50);color:var(--c-primary-500);font:500 14px/20px var(--font)} /* Типографика/14 Средний */
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button:not(:disabled){cursor:pointer}
h1,h2,h3,h4,p{margin:0}
img{max-width:100%}
[hidden]{display:none}
:focus-visible{outline:var(--focus);outline-offset:2px}
h1[tabindex="-1"]:focus{outline:none} /* программный фокус заголовка после перехода — без рамки */
svg.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-weight:400}
.muted{color:var(--c-gray-600)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:var(--s-16);top:-60px;z-index:var(--z-toast);padding:var(--s-8) var(--s-16);border-radius:var(--r-8);background:var(--c-white);border:1px solid var(--c-gray-200);font:700 14px/20px var(--font);color:var(--c-primary-500);text-decoration:none}
.skip:focus{top:var(--s-16)}

/* ---------- шапка «Filters Bar» (Figma 1255:14980): 84, отступы 20 / 32 / 20 / 104, фото + градиент #3587EB→#ABD5FC 25 %;
   справа «Filters Container» — пилюли с зазором 12 ---------- */
.band{position:relative;z-index:1;height:84px;background:var(--band-tint),url(../img/header.jpg) center/cover no-repeat var(--band-bg)}
.hdr{height:84px;display:flex;align-items:center;justify-content:space-between;gap:var(--s-20);padding:var(--s-20) max(var(--mr),env(safe-area-inset-right,0px)) var(--s-20) max(var(--ml),env(safe-area-inset-left,0px))}
.hdr-l,.hdr-r{display:flex;align-items:center;gap:var(--s-12);min-width:0}
/* пилюля «Search Dropdown» (Figma 1255:14716): высота 44 (как в шапке), отступы 4/12, зазор 12, радиус 24, Прозрачные/Белый 24 + стекло 8;
   текст 16 Средний и иконки 20 — Основной/500; иконка+текст через 4 */
.pill-g{height:44px;min-width:44px;padding:var(--s-4) var(--s-12);border:0;border-radius:var(--r-24);background:var(--glass);-webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%);color:var(--c-primary-500);display:inline-flex;align-items:center;justify-content:center;gap:var(--s-12);font:500 16px/24px var(--font);white-space:nowrap;flex:none}
.pill-g .pc{display:inline-flex;align-items:center;gap:var(--s-4)}
.pill-ic{width:44px;padding:0}
.pill-srch{width:314px;justify-content:space-between} /* «Search Bar» в шапке: 314 */
.burger{display:none}

/* ---------- боковое меню «Боковой блок» (Figma 1250:223): 64, над шапкой (x 20, y 20), радиус 12, Основной/Белый, без тени;
   отступы 10, верх и низ разнесены, логотип → пункты 16, пункты через 12 ---------- */
.side{position:fixed;z-index:var(--z-side);left:var(--s-20);top:var(--s-20);bottom:var(--s-20);width:64px;background:var(--c-white);border-radius:var(--r-12)}
.side-in{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:var(--s-16);padding:var(--s-10)}
.side-top{display:flex;flex-direction:column;align-items:center;gap:var(--s-16);min-height:0}
/* «Logo» Size=L: 56×56, отступы 4, зазор 4, радиус 8, иконка 24 Основной/500. Подпись в Figma 12 Жирный — здесь 14 (правило ДС: на вебе ≥ 14) */
.logo{width:56px;height:56px;padding:var(--s-4);border-radius:var(--r-8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-4);font:700 14px/16px var(--font);color:var(--c-primary-500);flex:none}
.logo svg.i{width:24px;height:24px}
.navl{display:flex;flex-direction:column;align-items:center;gap:var(--s-12);min-height:0;overflow:auto;scrollbar-width:none}
.side-bot{display:flex;flex-direction:column;align-items:center;gap:var(--s-12);flex:none}
/* пункт — «Icon button» Size=Md: 32×32, радиус 6, иконка 20 Серый/400, наведение Серый/50; активный — заливка Основной/500, иконка белая */
.sb{width:32px;height:32px;flex:none;padding:0;border:0;border-radius:var(--r-6);background:var(--c-white);color:var(--c-gray-400);display:grid;place-items:center}
.sb svg.i{width:20px;height:20px}
.sb:hover{background:var(--c-gray-50)}
.sb.on,.sb.on:hover{background:var(--c-primary-500);color:var(--c-white)}
.ava{width:40px;height:40px;border-radius:50%;background:var(--c-gray-100);display:grid;place-items:center;font:700 14px/20px var(--font);color:var(--c-primary-500);flex:none}
.navov{display:none}
.sb-l,.side-who{display:none} /* подпись пункта и строка профиля — только в шторке на телефоне */

/* ---------- контент: 12 колонок, зазор 16 ---------- */
.main{min-width:0}
.content{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);align-content:start;padding:var(--s-20) max(var(--mr),env(safe-area-inset-right,0px)) var(--s-40) max(var(--ml),env(safe-area-inset-left,0px))}
#page{display:contents}
.content>*,#page>*{grid-column:1/-1;min-width:0}

/* ---------- заголовок страницы «Page header» (Figma 3941:70925): строка 56, заголовок / действия 12;
   H1 24 Жирный Основной/500, в строке с бейджем через 12; описание через 4 — 14 Обычный Серый/300; кнопки через 8 ---------- */
.ph{display:flex;align-items:center;justify-content:space-between;gap:var(--s-12);flex-wrap:wrap;min-height:56px}
.ph-t{flex:1 1 320px;min-width:0;display:flex;align-items:flex-start;gap:var(--s-8)}
.ph-tt{min-width:0}
.ph h1{font:700 24px/32px var(--font);color:var(--c-primary-500);display:flex;align-items:center;gap:var(--s-12);flex-wrap:wrap}
.ph-d{font:400 14px/20px var(--font);color:var(--c-gray-500);margin-top:var(--s-4)}
.ph-a{display:flex;gap:var(--s-8);align-items:center;flex-wrap:wrap}
.ph-dk{display:contents} /* второстепенные действия: на компьютере — кнопками */
.ph-mo{display:none}     /* на телефоне — меню ⋮ справа от заголовка */
/* панель под вкладками модуля (tabBar): фильтры слева, кнопки вкладки справа; кнопки не помещаются — переходят на следующую строку, тоже справа */
.tb{display:flex;align-items:center;justify-content:space-between;gap:var(--s-8) var(--s-12);flex-wrap:wrap;min-width:0}
.tb>.fbar{flex:0 1 auto}
.tb-a{display:flex;gap:var(--s-8);align-items:center;flex-wrap:wrap;margin-left:auto}
/* ссылка «← Назад к …» над заголовком вложенной страницы (как в продукте): строка 20, до заголовка 20 (зазор сетки 16 + 4) */
.ph-bk{display:flex;margin-bottom:var(--s-4)}

/* ---------- планшет: меню — выезжающая панель ---------- */
@media (max-width:1023px){
  .content{grid-template-columns:repeat(8,minmax(0,1fr))}
  .side{display:none}
  .burger{display:inline-flex}
  .pill-srch{width:200px}
  .app.navopen .side{display:block;z-index:860;left:max(var(--s-16),env(safe-area-inset-left,0px));top:var(--s-16);bottom:var(--s-16)}
  .app.navopen .navov{display:block;position:fixed;inset:0;z-index:850;background:var(--overlay-panel)}
}
/* ---------- телефон ---------- */
@media (max-width:767px){
  /* контент (Figma «Devices List — Mobile» 3253:51373): сверху 12, по бокам 16, зазор 12 (--gut) */
  .content{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:var(--s-12)}
  /* шапка «Header / Mobile» (Figma 3363:30760): 72, отступы 0 / 12, зазор 8; пилюли 44×44 (в Figma 40 — зона нажатия 44), иконка бургера 24;
     поиск растягивается между бургером и правыми кнопками (в Figma 192×40): отступы 0 / 12, зазор 8, иконка 20, 14 Полужирный */
  .band,.hdr{height:72px}
  .hdr{padding:0 max(var(--s-12),env(safe-area-inset-right,0px)) 0 max(var(--s-12),env(safe-area-inset-left,0px))}
  .hdr,.hdr-l,.hdr-r{gap:var(--s-8)}
  .hdr-l{flex:1 1 auto}
  .pill-g{height:var(--hit);min-width:var(--hit)}
  .pill-ic{width:var(--hit)}
  .burger svg.i{width:24px;height:24px}
  .pill-srch{flex:1 1 auto;width:auto;min-width:0;padding:0 var(--s-12);justify-content:flex-start;font:600 14px/20px var(--font)}
  .pill-srch .pc{gap:var(--s-8);min-width:0;overflow:hidden}
  .pill-srch>svg.i{display:none} /* в Figma у поиска нет шеврона */
  /* меню — шторка слева «Аналитика — Меню · Mobile» (Figma 4660:98567): панель 312 белая, справа видна подложка;
     логотип 64 (отступы 24/16/16/16, зазор 10, 16 Жирный); список — отступы 12, зазор 2; пункт 30, отступы 0/12, зазор 8, радиус 8,
     иконка 16 (в Figma 17), 14 Жирный Основной/500; активный — Основной/500, текст белый;
     низ «User footer»: рамка сверху Серый/200, отступы 16/16/20/16 — иконка user 20 + имя 14 Жирный + роль 14 Обычный Серый/500 */
  .app.navopen .side{left:0;top:0;bottom:0;width:312px;max-width:calc(100vw - var(--s-40));border-radius:0}
  .app.navopen~.tip{display:none} /* подпись пункта уже видна — подсказки в шторке не нужны */
  .side-in{align-items:stretch;gap:0;padding:0}
  .side-top{align-items:stretch;gap:0}
  .logo{width:auto;height:64px;flex-direction:row;justify-content:flex-start;gap:var(--s-10);padding:var(--s-24) var(--s-16) var(--s-16);border-radius:0;font:700 16px/24px var(--font)}
  .navl{align-items:stretch;gap:var(--s-2);padding:var(--s-12)}
  .navl>span.sb,.side-bot>.sb,.side-bot>.ava{display:none} /* значки без раздела и аватар — только на рельсе 64 */
  .sb{width:auto;height:30px;padding:0 var(--s-12);display:flex;align-items:center;justify-content:flex-start;gap:var(--s-8);border-radius:var(--r-8);color:var(--c-primary-500);font:700 14px/20px var(--font)}
  .sb svg.i{width:16px;height:16px}
  .sb-l{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .side-bot{align-items:stretch;border-top:1px solid var(--c-gray-200);padding:var(--s-16) var(--s-16) var(--s-20)}
  .side-who{display:flex;align-items:center;gap:var(--s-8);min-width:0;font:400 14px/20px var(--font);color:var(--c-gray-500)}
  .side-who b{font-weight:700;color:var(--c-primary-500);white-space:nowrap}
  .side-who span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* заголовок (Figma «Аналитика · Mobile»): H1 18/24 Жирный; главная кнопка — Md 36 во всю ширину */
  .ph{position:relative;min-height:0}
  .ph h1{font:700 18px/24px var(--font)}
  .ph-a{width:100%}
  .ph-a>.btn{flex:1 1 auto}
  /* меню ⋮ экрана (32) — справа от заголовка, по центру строки 24, а не отдельной строкой под кнопками */
  .ph:has(>.ph-a>.ib) .ph-t{padding-right:var(--s-40)}
  .ph:has(>.ph-a>.btn):has(>.ph-a>.ib) .ph-t{min-height:var(--s-40)} /* кнопки под заголовком не заходят под ⋮ */
  .ph-a>.ib{position:absolute;top:calc(var(--s-4) * -1);right:0}
  .ph-a:has(>.ib:only-child){position:absolute;top:calc(var(--s-4) * -1);right:0;width:auto}
  .ph-a:has(>.ib:only-child)>.ib{top:0}
  /* панель под вкладками: фильтры, ниже кнопки во всю ширину (как кнопки шапки), без горизонтальной прокрутки */
  .tb{display:grid;grid-template-columns:minmax(0,1fr)}
  .tb-a{width:100%;margin-left:0}
  .tb-a>.btn{flex:1 1 auto}
  .ph-dk{display:none}
  .ph-mo{display:block;position:absolute;top:calc(var(--s-4) * -1);right:0}
  .ph:has(.ph-mo) .ph-t{padding-right:var(--s-40)}
}