/* Оболочка рабочего места сотрудника (shell.js): колонка разделов, вкладки подразделов, кнопки шапки, нижняя панель
   разделов, «Главная». Включается классом shell у <html>: его ставит shell.js учетной записи и входу по общему коду
   сотрудника. У дилера, клиента витрины, предпросмотра и кладовщика по личному коду класса нет и элементов sh-* на
   странице нет: правила этого файла на них не действуют. Компоненты - из ui.css (ui-tabs, ui-card, ui-btn, ui-badge).
   Раскладка по ширине окна: от 1500 px - колонка разделов и дерево товаров рядом; 1024-1499 - колонка разделов, дерево
   товаров выдвигается кнопкой; до 1023 - разделы панелью внизу, колонки нет. Пороги - от таблицы цен: с шестью видами
   цен ей нужно 880 px, а названию товара - больше 180 px из них. */
:root { --nav-w: 96px; --nav-b: 0px; }

/* ---------- каркас: колонка разделов слева от дерева товаров ---------- */
@media screen {
  .shell .app { grid-template-columns: var(--nav-w) var(--side-w) minmax(0, 1fr); grid-template-areas: "top top top" "nav side main"; }
  .shell .app.pnl { grid-template-columns: var(--nav-w) minmax(0, 1fr); grid-template-areas: "top top" "nav main"; }
}
.sh-nav { grid-area: nav; position: sticky; top: var(--top-h); height: calc(100dvh - var(--top-h)); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) var(--s-3) var(--s-8); background: var(--surface);
  border-right: 1px solid var(--line); scrollbar-width: none; }
.sh-nav::-webkit-scrollbar { display: none; }
.sh-nav-i { position: relative; flex: none; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 58px;
  padding: var(--s-3) var(--s-1); border-radius: var(--r-lg); color: var(--text-2); font: 600 var(--fs-2xs)/1.15 var(--font); text-align: center; }
.sh-nav-i span { max-width: 100%; overflow-wrap: anywhere; }
.sh-nav-i:hover { background: var(--hover); color: var(--text); }
.sh-nav-i:focus-visible, .sh-bottom button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sh-nav-i[aria-current="page"] { background: var(--accent-soft); color: var(--st-info); }
.sh-nav-i .ui-badge, .sh-bottom .ui-badge { position: absolute; top: 4px; left: calc(50% + 6px); }
.sh-bottom { display: none; }
.sh-bottom button { position: relative; padding: 0 var(--s-1); }
.sh-bottom span { white-space: normal; text-align: center; max-height: 2.3em; }

@media screen and (max-width: 1499px) {      /* дерево товаров - выдвижное, как у прежней страницы на узком экране */
  .shell .app { grid-template-columns: var(--nav-w) minmax(0, 1fr); grid-template-areas: "top top" "nav main"; }
  .shell .tree-btn { display: grid; }
  .shell .side { position: fixed; z-index: 50; top: 0; left: 0; bottom: 0; height: auto; width: min(340px, 88vw); transform: translateX(-102%);
    transition: transform .22s ease; box-shadow: var(--shadow); }
  .shell .side.open { transform: none; }
  .shell .side-close { display: grid; }
  .shell .scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(10, 14, 20, .38); }
  .shell .main { padding: 18px 20px 110px; }
}
@media screen and (max-width: 1023px) {      /* разделы - панель внизу; закрепленные внизу элементы страницы - над ней */
  :root.shell { --nav-b: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .shell .app, .shell .app.pnl { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .shell .sh-nav { display: none; }
  .shell .sh-bottom { display: flex; }
  .shell .main { padding-bottom: calc(110px + var(--nav-b)); }
  .shell .to-top { bottom: calc(22px + var(--nav-b)); }
  .shell .toast { bottom: calc(26px + var(--nav-b)); }
  .shell .ui-toasts { bottom: calc(var(--s-12) + var(--nav-b)); }
  .shell .ui-bar { bottom: calc(var(--s-6) + var(--nav-b)); }
}

/* ---------- шапка: быстрые действия и пользователь ---------- */
.shell .lvl { display: none; }                                                    /* роль - на кнопке пользователя */
/* объявление места для экранного диктора: на экране его нет */
.sh-live { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shell #menu [data-act="theme"], .shell #menu [data-act="exit"], .shell #menu hr { display: none; }   /* они в меню пользователя */
.sh-user { display: flex; align-items: center; gap: var(--s-4); flex: none; min-height: 38px; max-width: 230px; padding: 0 var(--s-5) 0 var(--s-2);
  border-radius: var(--r-md); color: var(--text); text-align: left; }
.sh-user:hover { background: var(--hover); }
.sh-user-a { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft);
  color: var(--st-info); font: 700 var(--fs-sm)/1 var(--font); text-transform: uppercase; }
.sh-user-t { display: grid; min-width: 0; }
.sh-user-t b { font-size: var(--fs-sm); font-weight: 650; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-user-t small { font-size: var(--fs-2xs); line-height: 1.2; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1180px) {
  .sh-user { padding: 0; min-width: 38px; justify-content: center; }
  .sh-user-t { display: none; }
}

/* ---------- вкладки подразделов ---------- */
.sh-subs { margin: -4px 0 var(--s-8); }
.sh-subs .ui-badge { margin-left: var(--s-1); }
.shell #shSubs:not([hidden]) { display: flex !important; }      /* в панели vitrina.css прячет все, кроме вкладок и панели */
.shell #views { display: none !important; }                     /* прежние вкладки заменены разделами и подразделами */

/* ---------- «Главная» и отказ в доступе ---------- */
.sh-home { max-width: 1180px; }
.sh-home h2 { margin: var(--s-12) 0 var(--s-5); font-size: var(--fs-xl); font-weight: 650; }
.sh-quick { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.sh-sec { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-8); }
.sh-sec-h { display: flex; align-items: center; gap: var(--s-5); min-height: var(--h-md); margin: calc(var(--s-3) * -1); padding: var(--s-3);
  border-radius: var(--r-md); color: var(--text); font: 650 var(--fs-xl)/1.25 var(--font); text-align: left; }
.sh-sec-h:hover { background: var(--hover); }
.sh-sec-h .ui-ico { color: var(--st-info); }
.sh-sec-l { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.sh-sec-l .ui-btn .ui-badge { margin-left: var(--s-1); }
.sh-more { display: grid; gap: var(--s-1); }
.sh-more .ui-nav-t:first-child { padding-top: 0; }

/* ---------- группы поиска каталога (этап 2.5): разделы и склады над выдачей ---------- */
.sgroups { display: grid; gap: var(--s-3); margin: calc(var(--s-3) * -1) 0 var(--s-6); }
.sg-g { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.sg-t { flex: none; min-width: 64px; font-size: var(--fs-sm); color: var(--text-3); }
.sg-l { flex: 1; display: flex; flex-wrap: wrap; gap: var(--s-3); min-width: 0; }
.sg-l .ui-btn { min-width: 0; max-width: 100%; }
.sg-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- телефон ---------- */
@media screen and (max-width: 760px) {
  .shell .main { padding: 14px 10px calc(110px + var(--nav-b)); }
  .shell .to-top { bottom: calc(16px + var(--nav-b)); }
  .shell .ed > .pn-head .pn-act { bottom: calc(10px + var(--nav-b)); }
  .shell .sh-quick-btn { display: none; }                       /* быстрые действия - на «Главной» и в листе «Еще» */
  .sh-user, .shell .top .icon-btn { min-width: 44px; min-height: 44px; }
  .sh-sec-l .ui-btn { flex: 1 1 140px; }
  .sg-l { flex-wrap: nowrap; overflow-x: auto; margin-right: -10px; padding-right: 10px; scrollbar-width: none; }      /* одна строка с прокруткой */
  .sg-l::-webkit-scrollbar { display: none; }
  .sg-l .ui-btn { flex: none; max-width: 78vw; }
}
@media print { .sh-nav, .sh-bottom, .sh-subs, .sh-user, .sh-quick-btn, .sgroups { display: none !important; } }