/* ============================================================
   app-classic.css — адаптивный патч для КЛАССИЧЕСКОГО интерфейса
   (app.js: склад, помощник кассира, админ, старший продавец,
   бухгалтер + экран входа lg2).

   ОБЛАСТЬ ДЕЙСТВИЯ / ИЗОЛЯЦИЯ:
   - Классический UI рендерится в #root — все правила внутри
     страницы имеют префикс #root.
   - Модалки классика добавляются в body с классами
     .modal-bg/.modal-win и .dlg-bg/.dlg — эти классы НЕ
     используются другими модулями (seller-pos=#spHost,
     service-pc/phone=#spcRoot, service-head=#shdHost,
     manager=#mgrHost, buffet=#bufHost, acc-seller=#accSellerRoot,
     crm=#crmRoot, director=#dirHost и .dir .dlg / .modal),
     поэтому их можно стилизовать без утечек.
   - Экран входа .lg2 рендерится тоже в #root.
   - Десктоп (>1024px) не затрагивается: все правила только
     внутри @media. !important — потому что файл подключается
     ДО стилей, которые инжектит app.js, и должен перебивать
     inline-стили шаблонов.
   ============================================================ */

/* ============================================================
   ПЛАНШЕТЫ: 641–1024px
   ============================================================ */
@media (min-width:641px) and (max-width:1024px){

  /* Контент использует всю ширину рядом с сайдбаром */
  #root .content{
    max-width:100% !important;
    padding:16px !important;
  }

  /* Таблицы: базовый style.css даёт скролл только на <=760,
     а .dir-table имеет inline min-width:900px — на планшете
     таблицы должны прокручиваться, а не распирать страницу */
  #root table{
    display:block !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    max-width:100% !important;
  }
  #root table.dir-table{font-size:12.5px !important}

  /* Двухколоночные сетки (там, где база держит 4) */
  #root .dir-stat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  /* Герой журнала приёмок — компактнее */
  #root .jhero{padding:18px !important}
  #root .jhero-big{font-size:36px !important}
}

/* Компактный сайдбар — только 761–1024:
   на 641–760 базовый style.css уже прячет его в выезжающую
   панель (transform:-100%), там ширину не трогаем */
@media (min-width:761px) and (max-width:1024px){
  #root .sidebar{
    width:186px !important;
    padding:12px 8px !important;
  }
  #root .menu-item{
    padding:9px 9px !important;
    gap:8px !important;
    font-size:13px !important;
  }
  #root .side-brand .bn{font-size:13px !important}
  #root .side-user .un{font-size:12px !important}
}

/* ============================================================
   ТЕЛЕФОНЫ: <=640px
   (база style.css уже даёт на <=760: burger + выезжающий
   сайдбар, tiles/grid2 в 1 колонку, .card{overflow-x:auto},
   input 16px, .dlg bottom-sheet, перенос .pg-hd. Здесь —
   усиление и заполнение дыр.)
   ============================================================ */
@media (max-width:640px){

  /* --- Каркас: никакого горизонтального скролла --- */
  #root{max-width:100% !important;overflow-x:clip !important}
  #root .content{padding:12px 10px !important}

  /* Выезжающий сайдбар не шире экрана; кнопка «свернуть»
     в выезжающем меню не нужна */
  #root .sidebar{width:min(272px,84vw) !important}
  #root .side-toggle{display:none !important}

  /* Комфортные тап-цели в меню */
  #root .menu-item{
    min-height:46px !important;
    padding:12px !important;
    font-size:14px !important;
  }

  /* --- Топбар: не давать кнопкам вытолкнуть заголовок --- */
  #root .topbar{padding:8px 10px !important;gap:8px !important}
  #root .topbar-actions{gap:7px !important}
  #root .topbar .tt{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px !important;
  }
  /* у кнопки валюты inline-стили — ужимаем через !important */
  #root .ccy-toggle{
    padding:5px 7px !important;
    font-size:12px !important;
    margin-right:0 !important;
  }

  /* --- Таблицы: везде горизонтальная прокрутка ---
     (перебивает inline min-width:900px у .dir-table и таблицы
     без обёртки overflow-x:auto) */
  #root table,
  .modal-bg .modal-win table,
  .dlg-bg .dlg table{
    display:block !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    max-width:100% !important;
  }
  #root table.dir-table{font-size:12px !important}
  #root .dir-bar-row{
    grid-template-columns:44px minmax(0,1fr) 84px 48px !important;
    font-size:11px !important;
  }

  /* --- Сетки --- */
  #root .tiles{grid-template-columns:1fr !important}
  #root .grid2{grid-template-columns:1fr !important}
  #root .nh-tiles{grid-template-columns:1fr !important}
  #root .stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #root .pg-kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #root .dir-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}

  /* --- Сегменты-вкладки: горизонтальная прокрутка вместо
         сплющивания в столбик букв --- */
  #root .pg-segs{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-left:-2px;
    padding:2px !important;
  }
  #root .pg-segs::-webkit-scrollbar{display:none}
  #root .pg-seg{
    flex:1 0 auto !important;
    min-width:max-content !important;
    padding:10px 13px !important;
    white-space:nowrap;
  }

  /* --- Шапка раздела --- */
  #root .pg-hd{padding:12px !important}

  /* --- Кнопки: тап-цели --- */
  #root .btn{min-height:42px !important}
  #root .btn.sm{min-height:36px !important}

  /* --- Формы --- */
  /* инпуты БЕЗ атрибута type не попадают под базовое правило
     input[type="text"]{font-size:16px} — закрываем зум iOS */
  #root input:not([type]),
  .modal-bg .modal-win input:not([type]),
  .dlg-bg .dlg input:not([type]){font-size:16px !important}
  /* строка «псевдоним» в настройках — не давить в 0 */
  #root .alias-row{flex-wrap:wrap !important}
  #root .alias-row .alias-name{flex:1 1 100% !important;min-width:0 !important}
  #root .alias-row .alias-syns{flex:1 1 auto !important;min-width:0 !important}

  /* --- Модалки: нижний лист почти во весь экран ---
     (inline style="max-width:###px" у окон перебивается) */
  .modal-bg{
    padding:0 !important;
    align-items:flex-end !important;
  }
  .modal-bg .modal-win{
    width:100% !important;
    max-width:100% !important;
    max-height:94vh !important;
    border-radius:16px 16px 0 0 !important;
    padding:16px 14px calc(16px + env(safe-area-inset-bottom,0px)) !important;
  }
  .dlg-bg{padding:0 !important}
  .dlg-bg .dlg{
    width:100% !important;
    max-width:100% !important;
    max-height:94vh !important;
    border-radius:16px 16px 0 0 !important;
  }
  .dlg-bg .dlg-close{width:34px !important;height:34px !important}

  /* --- Журнал приёмок (герой-отчёт) --- */
  #root .jhero{padding:15px !important;border-radius:15px !important}
  #root .jhero-top{flex-wrap:wrap !important}
  #root .jhero-big{font-size:29px !important}
  #root .jhero-stats{flex-wrap:wrap !important}
  #root .jhstat{flex:1 1 44% !important}
  #root .jsearch{flex-wrap:wrap !important}
  #root .jsearch .jinput{flex:1 1 100% !important;min-width:0 !important}

  /* --- Кабинет помощника кассира: серый инжект-фон #pageBody
         съедает ширину — ужимаем поля (только страница кассы) --- */
  #root #pageBody:has(.cc-layout){
    padding:8px !important;
    border-radius:10px !important;
  }

  /* ==========================================================
     ЭКРАН ВХОДА (.lg2) на телефоне:
     база ставит панель с часами ПЕРВОЙ, а форму — второй,
     из-за чего логин уезжает под сгиб. Форма — наверх.
     ========================================================== */
  #root .lg2-left{
    order:1 !important;
    padding:64px 16px 8px !important; /* место под кнопку темы */
  }
  #root .lg2-right{
    order:2 !important;
    padding:8px 16px calc(22px + env(safe-area-inset-bottom,0px)) !important;
  }
  #root .lg2-card{
    max-width:420px !important;
    padding:22px 18px !important;
  }
  /* инпут логина без type — iOS зумит без явных 16px */
  #root .lg2-input{font-size:16px !important}
  #root .lg2-btn{height:48px !important}
  #root .lg2-clock{font-size:38px !important}
  #root .lg2-clockwrap{margin-bottom:14px !important}
  #root .lg2-quote-t{font-size:12.5px !important}
}

/* Совсем узкие телефоны */
@media (max-width:400px){
  #root .stats{grid-template-columns:1fr !important}
  #root .pg-kpis{grid-template-columns:1fr !important}
  #root .dir-stat-grid{grid-template-columns:1fr !important}
  #root .content{padding:10px 8px !important}
}
/* ════════════════════════════════════════════════════════════════════
   MAKON seller-pos.js — адаптивный CSS-патч (только media queries)
   Корневой селектор модуля: .sp  (host = #spHost.sp, стили модуля
   инжектятся JS в <style id="spStyle"> ПОСЛЕ этого файла → на всех
   переопределяемых свойствах стоит !important).
   Существующие брейкпоинты модуля: 1180px (узкая корзина) и 860px
   (мобнав .bnav + fab, корзина = нижний лист, rail скрыт) — этот файл
   их НЕ ломает, только уточняет: ≤640 (телефоны), 641–860 (планшет в
   мобильном режиме), 861–1024 (планшет в десктопном режиме).
   Десктоп >1024px не затронут. Таблиц (<table>) в модуле нет —
   списки построены на .row/.card, горизонтальный скролл не нужен.
   ════════════════════════════════════════════════════════════════════ */

/* ── ТЕЛЕФОНЫ ≤640px ─────────────────────────────────────────────────
   Мобильный режим модуля (860px) уже активен: rail скрыт, есть .bnav
   и корзина-лист — их не трогаем, только доводим тесные места. */
@media (max-width:640px){
  /* никакого горизонтального скролла страницы */
  .sp{overflow-x:hidden !important}

  /* шапка: имя не распирает строку, кнопки не уезжают */
  .sp .hbar{padding:8px 10px !important;gap:8px !important}
  .sp .hbar .sp2{display:none !important}
  .sp .who{flex:1 1 auto !important;min-width:0 !important}
  .sp .who b{display:block !important;font-size:14px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
  .sp .who span{display:block !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}

  /* выпадающие уведомления — почти во всю ширину */
  .sp .notif{left:10px !important;right:10px !important;width:auto !important;max-height:62vh !important}

  /* рабочая область: чуть плотнее, запас снизу под мобнав */
  .sp .stage{padding:12px 12px 104px !important}
  .sp .pg{padding:14px 12px 104px !important}
  .sp .pg-hd .t{font-size:18.5px !important}

  /* панель инструментов кассы: поиск во всю ширину,
     «Мой островок/Все» и «Быстрая продажа» — ровным вторым рядом */
  .sp .tools{gap:9px !important}
  .sp .search{flex:1 1 100% !important;min-width:0 !important}
  .sp .scope{flex:1 1 auto !important}
  .sp .scope b{flex:1 !important;justify-content:center !important;padding:10px 6px !important}
  .sp .quick{flex:1 1 auto !important;min-height:46px !important;justify-content:center !important;padding:0 14px !important}
  .sp .cat{padding:11px 16px !important}

  /* витрина: ровно 2 плитки в ряд (родной мобильный вид), без
     переполнения от длинных названий */
  .sp .grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important}
  .sp .tile .nm{overflow-wrap:anywhere !important}

  /* баннер «укажите цену»: кнопка переносится вниз во всю ширину */
  .sp .palert{flex-wrap:wrap !important}
  .sp .palert .pa-b{flex:1 1 100% !important;min-height:44px !important}

  /* всё контентное — в одну колонку: KPI становятся компактными
     строками «подпись слева — число справа», формы без 2 колонок */
  .sp .kpis{grid-template-columns:1fr !important;gap:9px !important;margin-bottom:13px !important}
  .sp .kpi{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:10px !important;padding:12px 16px !important}
  .sp .kpi .l{font-size:12px !important}
  .sp .kpi .v{margin-top:0 !important;font-size:19px !important}
  .sp .grid2{grid-template-columns:1fr !important;gap:0 !important} /* у .field свой margin-bottom */
  .sp .card{padding:16px 14px !important}
  .sp .row{flex-wrap:wrap !important;row-gap:8px !important}

  /* удобные цели нажатия */
  .sp .btn{min-height:44px !important}
  .sp .btn.sm{min-height:40px !important}
  .sp .seg button{min-height:44px !important}
  .sp .bontog{padding:9px 14px !important}
  .sp .ctab{padding:9px 14px !important}
  .sp .cl .x{font-size:20px !important;padding:6px 10px !important;margin:-6px -10px !important}

  /* поля ввода: ≥16px чтобы iOS не зумил, высота ≥48px */
  .sp .inp,.sp .selpay,.sp .search input,.sp .cliprow input,.sp .cl .pe input{font-size:16px !important}
  .sp .inp{min-height:48px !important}
  .sp .selpay{min-height:48px !important}
  .sp .cl .qe{font-size:16px !important;width:70px !important}
  .sp .cliprow{flex-wrap:wrap !important}
  .sp .cliprow input{flex:1 1 140px !important;min-width:0 !important}

  /* корзина-лист: итог и кнопка не под «бровью» телефона */
  .sp .foot{padding-bottom:calc(16px + env(safe-area-inset-bottom)) !important}
  .sp .tot .v{font-size:24px !important}

  /* модалки (быстрая продажа, настройки) → нижний лист почти
     во весь экран, в стиле родных .cart/.moresheet */
  .sp .ovl{align-items:flex-end !important;padding:0 !important}
  .sp .sheet{max-width:none !important;width:100% !important;max-height:94vh !important;border-radius:22px 22px 0 0 !important;padding:18px 16px calc(20px + env(safe-area-inset-bottom)) !important}

  /* тост не прячется за мобнавом (bnav 66px + safe-area) */
  .sp .toast{bottom:calc(84px + env(safe-area-inset-bottom)) !important;max-width:calc(100vw - 20px) !important;font-size:14px !important;padding:13px 18px !important}

  /* AI-чат: пузыри шире */
  .sp .msgbot,.sp .msgme{max-width:92% !important}
}

/* ── ПЛАНШЕТ 641–860px ───────────────────────────────────────────────
   Здесь действует родной мобильный режим (rail скрыт, мобнав,
   корзина-лист) — соглашаемся с ним, лишь используем ширину. */
@media (min-width:641px) and (max-width:860px){
  .sp{overflow-x:hidden !important}
  /* витрина: не 2 гигантские колонки (46%), а плотная сетка плиток */
  .sp .grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr)) !important}
  .sp .stage{padding:16px 18px 110px !important}
  .sp .pg{padding:18px 18px 110px !important}
  /* модалка по центру, но пошире */
  .sp .sheet{max-width:540px !important}
  /* сетка «Ещё» — 4 в ряд */
  .sp .msgrid{grid-template-columns:repeat(4,1fr) !important}
  /* тост выше мобнава */
  .sp .toast{bottom:calc(80px + env(safe-area-inset-bottom)) !important}
}

/* ── ПЛАНШЕТ 861–1024px ──────────────────────────────────────────────
   Десктопная компоновка (rail + витрина + корзина) в ~900–1024px:
   двухпанельный экран сохраняем, но всё сжимаем, чтобы витрине
   хватало места. */
@media (min-width:861px) and (max-width:1024px){
  /* компактный сайдбар: 78 → 64px */
  .sp .rail{width:64px !important}
  .sp .rail .lg{width:40px !important;height:40px !important;font-size:18px !important;border-radius:12px !important}
  .sp .ri{width:52px !important;height:52px !important;border-radius:14px !important}
  .sp .ri .tx{font-size:8px !important}
  .sp .ri.av{width:40px !important;height:40px !important;font-size:15px !important}

  /* шапка плотнее */
  .sp .hbar{padding:10px 14px !important;gap:10px !important}
  .sp .stat .s{min-width:64px !important;padding:6px 10px !important}

  /* корзина уже: 342 → 300px, внутренности ужаты */
  .sp .cart{width:300px !important}
  .sp .cart .ch{padding:14px 14px 12px !important}
  .sp .clines{padding:8px 14px !important}
  .sp .cliprow{padding:0 14px 12px !important}
  .sp .bonrow{padding:10px 14px 0 !important}
  .sp .pay{padding:12px 14px !important}
  .sp .foot{padding:14px !important}
  .sp .tot .v{font-size:23px !important}
  .sp .sell{padding:15px !important;font-size:15.5px !important}

  /* витрина и страницы */
  .sp .stage{padding:14px 16px !important}
  .sp .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;gap:11px !important}
  .sp .pg{padding:18px !important}
}
/* ============================================================
   service-head.css — responsive patch for service-head.js (SPA
   начальника сервис-центра). Root: #shdHost.shd (модалки ovl():
   body > .shd без id → .shd:not(#shdHost)).
   Файл грузится ДО инжектируемого <style id="shdStyle">, поэтому
   каждое переопределяемое свойство помечено !important.
   Desktop (>1024px) не трогаем — все правила внутри media.
   Инжектируемый @media(max-width:900px) (офф-канвас сайдбар +
   бургер) остаётся хозяином диапазона 641–900px; здесь мы его
   не переопределяем, а на ≤640px заменяем более специфичными
   селекторами (например .shd .tbtn.burger > .shd .burger).
   ============================================================ */

/* ------------------------------------------------------------
   ПЛАНШЕТ 641–1024px
   ------------------------------------------------------------ */

/* 2-колоночные KPI-сетки на всём планшетном диапазоне
   (перебивает и CSS-правило, и inline grid-template-columns) */
@media (min-width:641px) and (max-width:1024px){
  .shd .tiles{grid-template-columns:repeat(2,1fr) !important;}
  .shd .wrap{padding-left:20px !important;padding-right:20px !important;}
}

/* Компактный сайдбар (только иконки) — лишь там, где сайдбар
   ещё виден, т.е. 901–1024px; при ≤900px работает штатный
   офф-канвас из инжектированного CSS */
@media (min-width:901px) and (max-width:1024px){
  .shd .side{width:82px !important;padding:20px 10px !important;}
  /* прячем текстовые подписи — как в режиме .mini */
  .shd .side .bt,
  .shd .side .pt,
  .shd .side .nav .lb,
  .shd .side .logout .lb{display:none !important;}
  .shd .side .brand{justify-content:center !important;padding:4px 0 14px !important;}
  /* ручной тумблер сворачивания не нужен — ширина зафиксирована */
  .shd .side .collapse{display:none !important;}
  .shd .side .prof{justify-content:center !important;padding:11px !important;}
  .shd .side .nav button{justify-content:center !important;padding:12px 0 !important;}
  .shd .side .nav .pill{position:absolute !important;top:2px !important;right:6px !important;margin:0 !important;padding:0 5px !important;font-size:10px !important;}
  .shd .side .logout{justify-content:center !important;}
}

/* ------------------------------------------------------------
   ТЕЛЕФОН ≤640px
   ------------------------------------------------------------ */
@media (max-width:640px){

  /* --- Сайдбар → компактная нижняя навигация с гориз. скроллом.
         Перебиваем и базовые правила, и офф-канвас из
         @media(max-width:900px) (left:-290px / .open) --- */
  .shd .side{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:0 !important;
    width:100% !important;
    height:auto !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:4px !important;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom)) 8px !important;
    border-right:none !important;
    border-top:1px solid var(--line) !important;
    box-shadow:0 -8px 30px rgba(12,30,28,.14) !important;
    transition:none !important;
    z-index:40 !important;
  }
  /* .open из 900px-правила ставит left:0 — мы и так на left:0,
     противоречия нет */

  /* шапка бренда и карточка профиля в нижней панели не помещаются */
  .shd .side .brand,
  .shd .side .prof{display:none !important;}
  .shd .side .collapse{display:none !important;}

  /* режим .mini (если был включён на десктопе) не должен прятать
     подписи в нижней навигации */
  .shd .side .nav .lb{display:block !important;}

  /* --- Навигация: горизонтальная лента --- */
  .shd .side .nav{
    flex:1 1 auto !important;
    flex-direction:row !important;
    gap:4px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .shd .side .nav::-webkit-scrollbar{display:none;}
  .shd .side .nav button{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:66px;
    min-height:52px;                 /* тап-зона */
    flex-direction:column !important;
    justify-content:center !important;
    gap:3px !important;
    padding:7px 10px !important;
    font-size:10px !important;
    text-align:center !important;
    white-space:nowrap;
  }
  .shd .side .nav button .ic{font-size:19px !important;width:auto !important;}
  /* акцент активного пункта: была вертикальная полоска слева —
     становится горизонтальной сверху кнопки */
  .shd .side .nav button.on::before{
    left:10px !important;
    right:10px !important;
    top:0 !important;
    bottom:auto !important;
    width:auto !important;
    height:3px !important;
    border-radius:0 0 4px 4px !important;
  }
  /* бейджи-счётчики — в правый верхний угол кнопки */
  .shd .side .nav .pill{
    position:absolute !important;
    top:2px !important;
    right:4px !important;
    margin:0 !important;
    padding:0 5px !important;
    font-size:10px !important;
  }

  /* --- Выход: компактная иконка в конце панели --- */
  .shd .side .logout{
    flex:0 0 auto !important;
    margin:0 !important;
    padding:12px !important;
    justify-content:center !important;
  }
  .shd .side .logout .lb{display:none !important;}

  /* бургер не нужен — навигация всегда на экране; перебиваем
     инжектированное `.shd .burger{display:flex!important}`
     бОльшей специфичностью */
  .shd .tbtn.burger{display:none !important;}

  /* --- Контент: без горизонтального скролла, отступ под нижнюю
         навигацию --- */
  .shd .main{overflow-x:hidden !important;}
  .shd .wrap{
    padding:6px 14px calc(92px + env(safe-area-inset-bottom)) 14px !important;
    max-width:100% !important;
  }
  .shd .topbar{padding:12px 14px 10px !important;}
  .shd .topbar h1{font-size:17px !important;}

  /* --- KPI-сетки в одну колонку (перебивает inline
         grid-template-columns:repeat(auto-fit,...) на .tiles) --- */
  .shd .tiles{grid-template-columns:1fr !important;gap:10px !important;}
  .shd .tile .v{font-size:24px !important;}

  /* --- Карточки и таблицы --- */
  .shd .card{padding:14px !important;border-radius:15px !important;}
  /* таблица-матрица прав: горизонтальная прокрутка внутри карточки
     (столбцы n+4 по-прежнему прячет правило 900px — не спорим) */
  .shd .matrix{
    display:block !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
  }
  .shd .matrix th,
  .shd .matrix td{white-space:nowrap !important;}

  /* строки-списки могут переноситься, а не выталкивать экран вширь */
  .shd .row{flex-wrap:wrap !important;row-gap:6px !important;}
  .shd .card-h{flex-wrap:wrap !important;gap:6px !important;}

  /* --- Тап-френдли элементы управления --- */
  .shd .btn{min-height:44px !important;padding:12px 16px !important;font-size:14px !important;}
  .shd .btn.sm{min-height:38px !important;padding:9px 13px !important;}
  .shd .tbtn{width:44px !important;height:44px !important;}
  .shd .seg{max-width:100%;overflow-x:auto !important;scrollbar-width:none;}
  .shd .seg::-webkit-scrollbar{display:none;}
  .shd .seg button{padding:10px 15px !important;min-height:40px;white-space:nowrap;}
  .shd .tg{width:48px !important;height:28px !important;}
  .shd .tg::after{width:22px !important;height:22px !important;}
  .shd .tg.on::after{left:23px !important;}
  .pchk{width:34px !important;height:34px !important;}
  /* формы (в т.ч. inline-стили модалок): 16px убирает автозум iOS */
  .shd input,
  .shd select,
  .shd textarea{font-size:16px !important;min-height:44px;}

  /* --- Модалки ovl(): почти во весь экран ---
     оверлей = body > .shd без id, его единственный ребёнок — лист
     с inline-стилями (max-width:580px и т.д.) → бьём !important */
  .shd:not(#shdHost){align-items:flex-end !important;}
  .shd:not(#shdHost) > div{
    max-width:100% !important;
    width:100% !important;
    max-height:calc(100dvh - 28px) !important;
    border-radius:18px 18px 0 0 !important;
    padding:16px 14px calc(16px + env(safe-area-inset-bottom)) 14px !important;
  }

  /* тост поднимаем над нижней навигацией (элемент вне #shdHost,
     создаётся этим же модулем с id shdToast) */
  #shdToast{bottom:calc(84px + env(safe-area-inset-bottom)) !important;}
}
/* ════════════════════════════════════════════════════════════════════
   MAKON POS — responsive patch for service-pc.js (мастер ПК)
   Host/root: #spcRoot.spc  (all selectors scoped under .spc)

   This file loads BEFORE the module's JS-injected <style>, therefore
   every property that overrides an injected rule carries !important.

   Coordination with the module's own @media(max-width:880px) rule
   (off-canvas sidebar drawer + .mtop burger bar):
     • 881–1024px  — sidebar is visible: we only COMPACT it (icon rail),
                     mirroring the module's own ".side.mini" styles.
     • 641–880px   — the module's drawer behavior is kept untouched;
                     we only add 2-column grids here.
     • ≤640px      — drawer is replaced by a fixed bottom nav bar
                     (left:-280px / .open are overridden with !important;
                     the burger button is hidden, .mtop stays as title bar).
   Desktop (>1024px): no rules outside media queries — untouched.
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── TABLETS ───────────────────────────
   Whole tablet band: 2-column grids */
@media (min-width:641px) and (max-width:1024px){
  .spc .tiles{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

/* Upper tablet band only (above the module's 880px drawer breakpoint):
   compact icon-rail sidebar — mirrors the module's ".side.mini" look,
   so it does not fight the user's collapse toggle. */
@media (min-width:881px) and (max-width:1024px){
  .spc .side{
    width:84px !important;
    padding:18px 10px !important;
  }
  /* text labels off (same set the module hides for .side.mini) */
  .spc .side .bt,
  .spc .side .pt,
  .spc .side .nav .lb,
  .spc .side .logout .lb{
    display:none !important;
  }
  /* collapse toggle is meaningless while CSS forces the rail */
  .spc .side .collapse{
    display:none !important;
  }
  .spc .side .brand{
    justify-content:center !important;
    padding-bottom:14px !important;
  }
  .spc .side .prof{
    justify-content:center !important;
    padding:10px !important;
  }
  .spc .side .nav button{
    justify-content:center !important;
    padding:12px 0 !important;
  }
  .spc .side .nav button.on::before{
    left:-10px !important;
  }
  .spc .side .nav .pill{
    position:absolute !important;
    top:3px !important;
    right:9px !important;
    margin:0 !important;
    padding:0 5px !important;
    font-size:10px !important;
  }
  .spc .side .logout{
    justify-content:center !important;
  }
  .spc .wrap{
    padding:8px 22px 44px !important;
  }
}

/* ─────────────────────────── PHONES ≤640px ─────────────────────────── */
@media (max-width:640px){

  /* ---- no horizontal body scroll ---- */
  .spc{
    overflow-x:hidden !important;
  }
  .spc .main{
    overflow-x:hidden !important;
  }
  .spc .wrap{
    max-width:100% !important;
    /* bottom clearance for the fixed nav bar */
    padding:12px 12px calc(86px + env(safe-area-inset-bottom)) !important;
  }
  .spc .card{
    min-width:0;
  }

  /* ---- sidebar → fixed, horizontally-scrollable BOTTOM NAV BAR ----
     overrides the 880px drawer (position:fixed;left:-280px) */
  .spc .side{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    height:auto !important;
    flex-direction:row !important;
    align-items:stretch !important;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    border-right:none !important;
    border-top:1px solid var(--line) !important;
    box-shadow:0 -8px 28px rgba(16,30,54,.14) !important;
    z-index:600 !important;          /* above .mtop(100), below .ovl(9000) */
    transition:none !important;
  }
  /* drawer "open" state becomes a no-op — bar is always visible */
  .spc .side.open{
    left:0 !important;
  }
  /* brand + profile blocks don't fit a compact bar */
  .spc .side .brand,
  .spc .side .prof,
  .spc .side .collapse{
    display:none !important;
  }
  /* neutralize a persisted ".side.mini" (labels stay visible in the bar) */
  .spc .side .nav .lb,
  .spc .side .logout .lb{
    display:block !important;
  }

  /* nav strip: horizontal scroll, icon-over-label buttons */
  .spc .nav{
    flex:1 1 auto !important;
    flex-direction:row !important;
    gap:2px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .spc .nav::-webkit-scrollbar{
    display:none;
  }
  .spc .nav button{
    flex:0 0 auto !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    gap:3px !important;
    width:auto !important;
    min-width:62px;
    min-height:52px;
    padding:6px 9px !important;
    font-size:10px !important;
    text-align:center !important;
    border-radius:11px !important;
  }
  .spc .nav button .ic{
    font-size:20px !important;
    width:auto !important;
  }
  .spc .nav button .lb{
    white-space:nowrap;
  }
  /* active-item left stripe makes no sense in a horizontal bar */
  .spc .nav button.on::before{
    display:none !important;
  }
  /* counter pill → corner badge */
  .spc .nav .pill{
    position:absolute !important;
    top:1px !important;
    right:3px !important;
    margin:0 !important;
    padding:0 5px !important;
    font-size:9.5px !important;
  }
  /* logout becomes one more bar item */
  .spc .logout{
    flex:0 0 auto !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center;
    gap:3px !important;
    margin-top:0 !important;
    padding:6px 9px !important;
    font-size:10px !important;
  }
  /* burger is redundant — nav is always on screen (.mtop keeps the title) */
  .spc .mtop .mb{
    display:none !important;
  }

  /* ---- grids → single column ---- */
  .spc .tiles{
    grid-template-columns:1fr !important;
    gap:11px !important;
  }

  /* ---- wide rows scroll horizontally inside their own container ----
     (module has no <table>; these are its wide flex strips) */
  .spc .timeline .tl{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  .spc .bars{
    overflow-x:auto !important;
  }

  /* two big action buttons (Услуги / Ремонт) stack vertically */
  .spc .page > div:has(> .big-b){
    flex-wrap:wrap !important;
  }
  .spc .big-b{
    flex:1 1 100% !important;
  }

  /* paired form fields (Клиент/Телефон, пароли, серийник/продавец…)
     rendered as inline "display:flex" rows — stack them */
  .spc div:has(> .field + .field){
    flex-wrap:wrap !important;
  }
  .spc div:has(> .field + .field) > .field{
    flex:1 1 100% !important;
  }

  /* checklist row: label on top, verdict segments full-width below */
  .spc .chk-row{
    flex-wrap:wrap !important;
    gap:8px !important;
  }
  .spc .chk-row .nm{
    white-space:normal !important;
  }
  .spc .chk-row .seg{
    flex:1 1 100% !important;
    max-width:none !important;
  }

  /* ---- modals: near-fullscreen bottom sheets ---- */
  .spc .ovl{
    align-items:flex-end !important;
    padding:0 !important;
  }
  .spc .sheet{
    width:100% !important;
    max-width:100% !important;
    min-height:60vh;
    min-height:60dvh;
    max-height:calc(100vh - 10px) !important;
    max-height:calc(100dvh - 10px) !important;
    border-radius:18px 18px 0 0 !important;
    padding:16px 14px calc(18px + env(safe-area-inset-bottom)) !important;
  }

  /* ---- tap-friendly controls ---- */
  .spc .btn{
    min-height:46px;
    padding:12px 16px !important;
  }
  .spc .btn.sm{
    min-height:40px;
    padding:9px 13px !important;
    font-size:13px !important;
  }
  .spc .actbtns{
    gap:9px !important;
  }
  .spc .actbtns .btn{
    flex:1 1 auto;
  }
  .spc .inp{
    min-height:46px;
    font-size:16px !important;   /* ≥16px prevents iOS focus zoom */
  }
  .spc textarea.inp{
    min-height:84px !important;
  }
  .spc .chip{
    padding:10px 15px !important;
    min-height:40px;
  }
  .spc .seg button{
    min-height:42px;
  }
  .spc .tbtn{
    width:44px !important;
    height:44px !important;
  }
  .spc .range{
    height:26px !important;      /* fat slider hit area */
  }
}
/* ════════════════════════════════════════════════════════════════════
   MAKON — адаптивный CSS-патч для service-phone.js (мастер телефонов)
   Корень модуля: #spcRoot.spc  ( id стиля JS: #spcStyle)
   ⚠️ Тот же корень (.spc / #spcRoot) использует service-pc.js — модули
      взаимоисключающие в рантайме, патч валиден для обоих.
   ⚠️ Патч подключается ДО JS-инжектированных стилей → на перекрываемых
      свойствах обязателен !important.
   Десктоп (>1024px) не трогаем: все правила только внутри media queries.
   Координация с родным @media(max-width:880px) модуля:
     • 641–880px: сайдбар остаётся выездным drawer'ом (родное правило),
       мы добавляем только сетки/отступы;
     • ≤640px: сайдбар превращаем в нижний горизонтальный бар (наши
       left:0 / top:auto / bottom:0 перекрывают родные left:-280px и т.д.,
       .side.open{left:0} не противоречит — left и так 0).
   ════════════════════════════════════════════════════════════════════ */

/* ───────────────────────── ПЛАНШЕТЫ 641–1024px ───────────────────── */
@media (min-width:641px) and (max-width:1024px){
  /* KPI-плитки — строго 2 колонки */
  .spc .tiles{grid-template-columns:repeat(2,1fr) !important;gap:12px !important}
  /* чуть плотнее контентная зона */
  .spc .wrap{max-width:100% !important}
}

/* Компактный сайдбар — только там, где он ещё виден постоянно
   (881–1024px; ниже 881px работает родной drawer из правила 880px) */
@media (min-width:881px) and (max-width:1024px){
  .spc .side{width:84px !important;padding:16px 10px !important}
  .spc .side .bt,
  .spc .side .pt,
  .spc .side .nav .lb,
  .spc .side .logout .lb{display:none !important}
  .spc .side .brand{justify-content:center !important;padding:4px 0 14px !important}
  .spc .side .collapse{display:none !important} /* сворачивать нечего */
  .spc .side .prof{justify-content:center !important;padding:10px !important}
  .spc .side .nav button{justify-content:center !important;padding:12px 0 !important}
  .spc .side .nav .pill{position:absolute !important;top:3px !important;right:9px !important;margin:0 !important;padding:0 5px !important;font-size:10px !important}
  .spc .side .logout{justify-content:center !important}
  .spc .wrap{padding:8px 20px 44px !important}
}

/* ─────────────────────────── ТЕЛЕФОНЫ ≤640px ─────────────────────── */
@media (max-width:640px){

  /* — без горизонтального скролла страницы — */
  .spc{max-width:100vw !important;overflow-x:hidden !important}
  .spc .main{overflow-x:hidden !important}

  /* ═══ НАВИГАЦИЯ: нижний компактный горизонтально-скроллимый бар ═══
     Перекрывает родное 880px-правило (fixed drawer left:-280px). */
  .spc .side{
    position:fixed !important;
    left:0 !important;right:0 !important;
    top:auto !important;bottom:0 !important;
    width:auto !important;height:auto !important;
    flex-direction:row !important;align-items:center !important;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    border-right:none !important;border-top:1px solid var(--line) !important;
    box-shadow:0 -8px 28px rgba(16,30,54,.14) !important;
    z-index:500 !important;
  }
  /* шапка/профиль/сворачивание в баре не нужны */
  .spc .side .brand{display:none !important}
  .spc .side .prof{display:none !important}
  .spc .side .collapse{display:none !important}

  /* лента кнопок: горизонтальный скролл, иконка сверху, мелкая подпись */
  .spc .nav{
    flex-direction:row !important;gap:2px !important;
    overflow-x:auto !important;overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .spc .nav::-webkit-scrollbar{display:none}
  .spc .nav button{
    flex:0 0 auto !important;width:auto !important;min-width:66px;
    flex-direction:column !important;justify-content:center !important;
    gap:3px !important;padding:7px 9px !important;
    font-size:10.5px !important;text-align:center !important;
    white-space:nowrap;border-radius:11px !important;
  }
  .spc .nav button .ic{font-size:20px !important;width:auto !important}
  /* активная вкладка: полоска-индикатор снизу вместо боковой */
  .spc .nav button.on::before{
    left:12px !important;right:12px !important;
    top:auto !important;bottom:1px !important;
    width:auto !important;height:3px !important;
    border-radius:3px !important;
  }
  /* бейдж-счётчик — в правый верхний угол кнопки */
  .spc .nav .pill{
    position:absolute !important;top:0 !important;right:4px !important;
    margin:0 !important;padding:0 5px !important;font-size:10px !important;
  }
  /* выход — компактная иконка в конце бара */
  .spc .logout{
    flex:0 0 auto !important;margin-top:0 !important;
    padding:10px !important;gap:0 !important;
  }
  .spc .logout .lb{display:none !important}

  /* верхняя мобильная панель остаётся (заголовок), бургер не нужен */
  .spc .mtop .mb{display:none !important}

  /* контент: место под нижний бар */
  .spc .wrap{padding:12px 12px calc(92px + env(safe-area-inset-bottom)) !important}

  /* ═══ СЕТКИ И ФОРМЫ — в колонку ═══ */
  /* KPI-плитки: 2 компактные колонки (1 колонка чрезмерно растягивает страницу) */
  .spc .tiles{grid-template-columns:repeat(2,1fr) !important;gap:10px !important;margin-bottom:14px !important}
  .spc .tile{padding:14px !important;border-radius:15px !important}
  .spc .tile .v{font-size:22px !important}

  /* большие кнопки «Услуги / Ремонт» (дашборд и Ремонты) — в столбик */
  .spc .page > div[style*="display:flex;gap:13px"]{flex-direction:column !important;gap:10px !important}

  /* приёмка в ремонт: пары полей (пароли, клиент+телефон) — в столбик */
  .spc .page .card div[style*="display:flex;gap:12px"]{flex-direction:column !important;gap:0 !important}

  /* модалки: пары полей клиента (приёмка Б/У, услуга) — в столбик */
  .spc .sheet div[style*="display:flex;gap:10px"]{flex-direction:column !important;gap:10px !important}

  /* герой-статистика журнала (4 ячейки) — 2×2 */
  .spc .page div[style*="gap:9px;margin-top:17px"]{flex-wrap:wrap !important}
  .spc .page div[style*="gap:9px;margin-top:17px"] > div{flex:1 1 42% !important;min-width:130px}

  /* чек-лист оценки Б/У: название сверху, сегменты на всю ширину */
  .spc .chk-row{flex-wrap:wrap !important;gap:8px !important}
  .spc .chk-row .seg{flex:1 1 100% !important;max-width:100% !important}

  /* карточки чуть плотнее */
  .spc .card{padding:14px !important;border-radius:15px !important;margin-bottom:12px !important}

  /* ═══ МОДАЛКИ (.ovl → .sheet, монтируются в #spcRoot) — почти фуллскрин ═══ */
  .spc .ovl{align-items:flex-end !important}
  .spc .sheet{
    width:100% !important;max-width:100% !important;
    max-height:96vh !important;               /* фолбэк */
    max-height:calc(100dvh - 12px) !important;
    border-radius:20px 20px 0 0 !important;
    padding:16px 13px calc(18px + env(safe-area-inset-bottom)) !important;
  }

  /* ═══ УДОБНЫЕ ТАЧ-КОНТРОЛЫ ═══ */
  .spc .btn{min-height:46px !important;padding:12px 16px !important}
  .spc .btn.sm{min-height:38px !important;padding:8px 13px !important}
  .spc .inp{min-height:48px !important;font-size:16px !important} /* 16px = без авто-зума iOS */
  .spc select.inp{font-size:16px !important}
  .spc textarea.inp{min-height:84px !important}
  .spc .seg button{min-height:42px !important;font-size:13px !important}
  .spc .chip{padding:10px 15px !important;font-size:13.5px !important}
  .spc .tbtn{width:44px !important;height:44px !important}
  .spc .actbtns{gap:9px !important}
  .spc .actbtns .btn{flex:1 1 auto !important}
}
/* ============================================================
   Responsive patch for manager.js (профиль управляющего)
   Root: #mgrHost.mgr  (toast .mgrtoast lives on <body>, scoped by
   its own module-unique class). CSS-only, loads BEFORE the JS-
   injected <style id="mgrStyle">, hence !important on every
   overridden property. Desktop (>1024px) untouched.

   Coordination with injected @media(max-width:860px) rule:
   that rule collapses .side to a 74px icon rail and hides text
   labels (.brand b/span, .prof .pt, nav label spans, .sec,
   .logout span:last-child). Tablet block below EXTENDS the same
   look up to 1024px (identical declarations, no contradiction).
   Phone block below REPLACES the rail with a horizontal top bar:
   it overrides only layout (width/direction); the label-hiding
   from the injected rule still applies and is reused as-is.
   ============================================================ */

/* ---------------- TABLETS: 641–1024px ---------------- */
@media (min-width:641px) and (max-width:1024px){

  /* Compact icon-rail sidebar (mirrors the injected 860px rule,
     extended to 1024px; inside 641–860px both rules agree). */
  .mgr .side{
    width:74px !important;
    padding:14px 10px !important;
  }
  .mgr .brand{justify-content:center !important;padding:4px 0 14px !important;gap:0 !important}
  .mgr .brand b{display:none !important}
  .mgr .brand span{display:none !important}
  .mgr .prof{justify-content:center !important;padding:10px !important}
  .mgr .prof .pt{display:none !important}
  .mgr .nav .sec{display:none !important}
  .mgr .nav button{justify-content:center !important;padding:11px 8px !important;gap:0 !important}
  .mgr .nav button span:not(.ic):not(.pill){display:none !important}
  .mgr .nav .pill{
    margin-left:0 !important;
    position:absolute !important;
    top:4px !important;right:4px !important;
    padding:0 6px !important;font-size:10px !important;line-height:16px !important;
  }
  .mgr .logout{justify-content:center !important;gap:0 !important}
  .mgr .logout span:last-child{display:none !important}

  /* 2-column grids */
  .mgr .kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important}
  .mgr .grid2{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:14px !important}

  /* Tighter chrome, no wasted width */
  .mgr .top{padding:14px 18px !important}
  .mgr .wrap{padding:18px 18px 44px !important;max-width:none !important}

  /* Wide tables (Команда: 6 columns) scroll inside their card */
  .mgr .card{overflow-x:auto !important;-webkit-overflow-scrolling:touch}
  .mgr table{min-width:520px !important}
  .mgr th{white-space:nowrap !important}
}

/* ---------------- PHONES: ≤640px ---------------- */
@media (max-width:640px){

  /* No horizontal body scroll, real mobile viewport height */
  .mgr{overflow-x:hidden !important}
  .mgr .app{
    flex-direction:column !important;
    height:100dvh !important;
  }

  /* Sidebar -> compact horizontally-scrollable top bar.
     Text labels are already hidden by the injected 860px rule
     (icon-only buttons); here we only re-lay-out the bar. */
  .mgr .side{
    width:100% !important;
    flex-direction:row !important;
    align-items:center !important;
    flex-shrink:0 !important;
    border-right:none !important;
    border-bottom:1px solid var(--line) !important;
    padding:8px 10px !important;
    gap:8px !important;
  }
  .mgr .brand{padding:0 !important;gap:0 !important;flex-shrink:0}
  .mgr .brand .lg{width:38px !important;height:38px !important;font-size:17px !important;border-radius:11px !important}
  .mgr .prof{display:none !important}          /* name shown in .top h1 area chrome; bar space is precious */
  .mgr .nav{
    flex:1 1 auto !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:4px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .mgr .nav .sec{display:none !important}      /* reasserts injected rule */
  .mgr .nav button{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:46px !important;
    min-height:44px !important;                /* tap target */
    justify-content:center !important;
    padding:10px !important;
    gap:0 !important;
  }
  .mgr .nav button.on::before{display:none !important} /* left-edge marker makes no sense horizontally */
  .mgr .nav .pill{
    margin-left:0 !important;
    position:absolute !important;
    top:2px !important;right:2px !important;
    padding:0 5px !important;font-size:10px !important;line-height:15px !important;
  }
  .mgr .logout{
    margin-top:0 !important;
    flex-shrink:0 !important;
    min-height:44px !important;
    padding:10px !important;
    gap:0 !important;
    justify-content:center !important;
  }
  .mgr .logout span:last-child{display:none !important} /* reasserts injected rule */

  /* Header */
  .mgr .top{padding:10px 14px !important;gap:8px !important}
  .mgr .top h1{font-size:18px !important}
  .mgr .top .sub{font-size:11px !important}
  .mgr .chip{padding:7px 10px !important;font-size:12px !important;flex-shrink:0}

  /* Content column */
  .mgr .wrap{padding:14px 12px 60px !important;max-width:none !important}

  /* Single-column grids; KPI tiles become compact rows so a
     4-KPI block stays short even at one per line */
  .mgr .kpis{grid-template-columns:minmax(0,1fr) !important;gap:10px !important;margin-bottom:16px !important}
  .mgr .kpi{
    display:flex !important;
    align-items:center !important;
    gap:13px !important;
    padding:12px 14px !important;
  }
  .mgr .kpi .ki{width:40px !important;height:40px !important;font-size:20px !important;margin-bottom:0 !important;flex-shrink:0}
  .mgr .kpi .kv{font-size:22px !important}
  .mgr .kpi .kl{margin-top:2px !important}
  .mgr .grid2{grid-template-columns:minmax(0,1fr) !important;gap:12px !important}

  /* Cards */
  .mgr .card{padding:14px !important;margin-bottom:12px !important;border-radius:15px !important}
  .mgr .card-t a{padding:6px 4px !important;margin:-6px -4px !important} /* bigger tap area, same visual spot */

  /* Tables scroll horizontally inside their card, page never scrolls sideways */
  .mgr .card{overflow-x:auto !important;-webkit-overflow-scrolling:touch}
  .mgr table{min-width:540px !important}
  .mgr th{white-space:nowrap !important}
  .mgr td{white-space:nowrap !important;padding:10px 8px !important}

  /* Hero (Журнал приёмок) */
  .mgr .hero{padding:16px !important;border-radius:16px !important}
  .mgr .hstat{padding:9px 3px !important}

  /* Buttons / inputs — tap friendly */
  .mgr .btn{min-height:44px !important;padding:11px 16px !important}
  .mgr .inp{font-size:16px !important}         /* prevents iOS zoom-on-focus */

  /* Modal bottom sheet -> near-fullscreen */
  .mgr .mgrovl{padding:0 !important}
  .mgr .mgrsheet{
    max-width:100% !important;
    max-height:96dvh !important;
    border-radius:18px 18px 0 0 !important;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom)) !important;
  }

  /* Toast (appended to <body>, module-unique class) */
  .mgrtoast{
    max-width:calc(100vw - 24px) !important;
    width:max-content !important;
    text-align:center !important;
    bottom:14px !important;
    padding:12px 18px !important;
    font-size:13px !important;
  }
}
/* ============================================================
   director.css — responsive patch for the NEW director cabinet
   (orig/director.js, root: <div id="dirHost" class="dir">).
   CSS-only. Loaded BEFORE the JS-injected #dirStyle, therefore
   every overridden property carries !important.
   Desktop (>1024px) is untouched: all rules live in media queries.
   Coordinates with the module's own breakpoints:
     - 1000px: bento 4->2 cols, grid2 -> 1 col
     - 820px : sidebar -> off-canvas drawer + burger, bento -> 1 col
     - 680px : attendance table 4 -> 3 cols
   ============================================================ */

/* ------------------------------------------------------------
   TABLETS: 641px..1024px
   Compact sidebar only where the sidebar is still docked
   (>820px, the JS turns it into a drawer at <=820px).
   ------------------------------------------------------------ */
@media (min-width:821px) and (max-width:1024px){
 /* compact docked sidebar */
 .dir .app{grid-template-columns:212px 1fr !important}
 .dir .side{padding:12px 8px 24px !important}
 .dir .slogo{gap:9px !important;padding:6px 8px 12px !important}
 .dir .slogo .ic{width:34px !important;height:34px !important;font-size:15px !important;border-radius:10px !important}
 .dir .slogo b{font-size:14px !important}
 .dir .sgt{padding:9px 10px 5px !important;font-size:10px !important;letter-spacing:.8px !important}
 .dir .snav{padding:8px 10px !important;gap:9px !important;font-size:13px !important;border-radius:9px !important}
 .dir .snav .si{font-size:15px !important;width:18px !important}
 /* slightly tighter workspace */
 .dir .topbar{padding:12px 18px !important}
 .dir .content{padding:20px 18px 60px !important}
 /* extend the module's own 1000px bento rule up to 1024px:
    2-column bento, big/wide span both columns */
 .dir .bento{grid-template-columns:repeat(2,1fr) !important}
 .dir .big,.dir .wide{grid-column:span 2 !important}
 .dir .tall{grid-row:span 1 !important}
}

/* Whole tablet band: 2-column card/kpi grids (safe at 641-820 too,
   the JS defines no rules for these there). */
@media (min-width:641px) and (max-width:1024px){
 .dir .cardgrid{grid-template-columns:repeat(2,1fr) !important}
 .dir .kpirow{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;gap:12px !important}
 .dir .atstats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) !important;gap:12px !important}
 .dir .dlg{max-width:480px !important}
}

/* ------------------------------------------------------------
   PHONES: <=640px
   (the JS drawer/burger/scrim from its 820px rule is already
   active here — we only refine it, never fight it)
   ------------------------------------------------------------ */
@media (max-width:640px){

 /* --- no horizontal body scroll --- */
 .dir{overflow-x:hidden !important}
 .dir .main{max-width:100vw !important}
 .dir .content{padding:14px 12px 84px !important;max-width:100% !important}

 /* --- nav: off-canvas drawer sized for a phone, bigger touch targets --- */
 .dir .side{width:min(82vw,300px) !important;padding:14px 10px 34px !important;box-shadow:0 0 60px rgba(0,0,0,.35) !important}
 .dir .snav{padding:12px 12px !important;font-size:14px !important}
 .dir .snav .si{font-size:17px !important}
 .dir .sgt{padding:12px 12px 6px !important}
 .dir .sgitems{max-height:640px}
 .dir .scrim.on{z-index:15}

 /* --- compact topbar: drop the clock, tighten spacing --- */
 .dir .topbar{padding:10px 12px !important;gap:10px !important}
 .dir .clock{display:none !important}
 .dir .ptitle b{font-size:15px !important}
 .dir .ptitle span{font-size:11px !important}
 .dir .tright{gap:8px !important}
 .dir .avatar{width:34px !important;height:34px !important}
 .dir .burger,.dir .tbtn{width:36px !important;height:36px !important}
 .dir .logout{height:36px !important;padding:0 10px !important;font-size:12px !important}

 /* --- page header stacks; action buttons full row --- */
 .dir .phead{flex-direction:column !important;align-items:stretch !important;gap:10px !important;margin-bottom:14px !important}
 .dir .pht{font-size:18px !important}
 .dir .pha{margin-left:0 !important}

 /* --- grids: single column (bento already 1-col via JS 820px rule);
        neutralize inline grid-column:span N on bento panels --- */
 .dir .grid2{grid-template-columns:1fr !important;gap:12px !important}
 .dir .cardgrid{grid-template-columns:1fr !important}
 .dir .bento{grid-template-columns:1fr !important;gap:12px !important}
 .dir .bento .panel{grid-column:auto !important;grid-row:auto !important}
 .dir .big,.dir .wide,.dir .tall{grid-column:auto !important;grid-row:auto !important}

 /* --- KPI / stat cards: 2-up, readable --- */
 .dir .kpirow{grid-template-columns:repeat(2,1fr) !important;gap:10px !important;margin-bottom:14px !important}
 .dir .tile{padding:13px !important;border-radius:14px !important}
 .dir .tile .tl{font-size:10.5px !important;letter-spacing:.3px !important}
 .dir .tile .tv{font-size:21px !important;margin-top:6px !important}
 .dir .atstats{grid-template-columns:repeat(2,1fr) !important;gap:10px !important;margin-bottom:14px !important}
 .dir .atstat{padding:13px 14px !important;border-radius:14px !important}
 .dir .atstat .sv{font-size:21px !important}
 .dir .panel{padding:14px !important;border-radius:15px !important}
 .dir .amount{font-size:34px !important;letter-spacing:-1px !important}
 .dir .cur{font-size:16px !important}
 .dir .mval{font-size:26px !important}
 .dir .hsplit{gap:14px !important;margin-top:14px !important}

 /* --- tables: horizontal scroll inside their own wrapper --- */
 .dir .tblwrap{overflow-x:auto !important;-webkit-overflow-scrolling:touch;max-width:100% !important}
 .dir table.tbl{min-width:480px !important;font-size:12.5px !important}
 .dir .tbl th{padding:10px 10px !important;font-size:10px !important}
 .dir .tbl td{padding:10px 10px !important}

 /* --- charts --- */
 .dir .bars{gap:4px !important;padding-top:14px !important}
 .dir .bar-lbl{font-size:9px !important}
 .dir .bar-val{font-size:9.5px !important}
 .dir .donutwrap{flex-direction:column !important;align-items:center !important;gap:14px !important}
 .dir .legend{width:100% !important}

 /* --- attendance page (JS 680px rule already trims columns) --- */
 .dir .attabs{width:100% !important;max-width:100% !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch}
 .dir .attabs button{flex:none !important;white-space:nowrap !important}
 .dir .athead,.dir .atrow{gap:7px !important;padding-left:8px !important;padding-right:8px !important}

 /* --- lists / misc rows --- */
 .dir .qrow{gap:7px !important;margin-bottom:12px !important}
 .dir .qbtn{padding:8px 11px !important;font-size:12.5px !important}
 .dir .chiprow{gap:7px !important}
 .dir .drow{gap:8px !important}
 .dir .dsum{font-size:12px !important}
 .dir .ev2{gap:8px !important}
 .dir .teamstats{gap:12px !important}
 .dir .pulse-row{margin:12px 0 8px !important}
 .dir .alert{padding:10px 11px !important}
 .dir .emp{padding:13px !important}
 .dir .btn{padding:10px 13px !important}
 .dir .soonbox{padding:38px 14px !important}

 /* --- modals: bottom-sheet, near-fullscreen --- */
 .dir .modal{padding:0 !important;align-items:flex-end !important;justify-content:stretch !important}
 .dir #dDlg{width:100% !important;max-width:100% !important}
 .dir .dlg{max-width:100% !important;width:100% !important;max-height:92vh !important;border-radius:18px 18px 0 0 !important;padding:20px 16px calc(18px + env(safe-area-inset-bottom)) !important;border-left:0 !important;border-right:0 !important;border-bottom:0 !important}
 .dir .dlg h3{font-size:17px !important;padding-right:28px !important}
 .dir .dlg .fields{gap:9px !important;margin-top:14px !important}
 /* 16px inputs prevent iOS auto-zoom on focus */
 .dir .dlg input,.dir .dlg select,.dir .dlg textarea{font-size:16px !important;padding:12px 13px !important}
 .dir .dlg .row{margin-top:14px !important}

 /* --- toast --- */
 .dir .toast{bottom:16px !important;max-width:94vw !important;font-size:13px !important}
}
/* ============================================================
   buffet.css — responsive patch for the buffet cashier profile
   Module: public/buffet.js (root: #bufHost.buf, injected <style id="bufStyle">)
   This file loads BEFORE the JS-injected styles, therefore every
   property that overrides a base rule carries !important.
   Desktop (>1024px) is untouched: all rules live inside media queries.
   Coordinates with the module's own @media(max-width:820px)
   { .cart{width:290px} .side{width:78px} } — never contradicts it:
   below 640px we replace that layout entirely (stacked), between
   641–820px we leave .cart width to the module's rule.
   Note: .buftoast is appended to <body> outside .buf and cannot be
   scoped under the root, so it is deliberately not restyled here.
   ============================================================ */

/* ---------------- TABLETS: 641–1024px ---------------- */
@media (min-width: 641px) and (max-width: 1024px) {

  /* compact vertical nav rail */
  .buf .side { width: 72px !important; padding: 12px 6px !important; gap: 4px !important; }
  .buf .logo { width: 44px !important; height: 44px !important; font-size: 22px !important; border-radius: 14px !important; margin-bottom: 8px !important; }
  .buf .nav { gap: 4px !important; }
  .buf .nav button { padding: 10px 4px !important; font-size: 10px !important; border-radius: 13px !important; min-height: 56px; }
  .buf .nav button .ic { font-size: 20px !important; }
  .buf .nav .badge { right: 8px !important; }
  .buf .logout { padding: 8px 6px !important; font-size: 10px !important; }

  /* compact header */
  .buf .top { padding: 12px 16px !important; }
  .buf .top h1 { font-size: 19px !important; }
  .buf .chip-time { padding: 7px 11px !important; font-size: 12px !important; }

  /* menu grid: fixed 3 columns (4 from 900px, below) */
  .buf .grid { grid-template-columns: repeat(3, 1fr) !important; gap: 11px !important; }
  .buf .pos-left { padding: 12px 14px !important; }
  .buf .tile { padding: 13px 11px !important; }

  .buf .wrap { padding: 16px 18px !important; }
  .buf .kpis { gap: 11px !important; }
}

/* wider tablets: 4 menu columns, slightly slimmer cart
   (821px+ only, so the module's own 820px cart rule stays authoritative) */
@media (min-width: 900px) and (max-width: 1024px) {
  .buf .grid { grid-template-columns: repeat(4, 1fr) !important; }
  .buf .cart { width: 310px !important; }
}

/* ---------------- PHONES: <=640px ---------------- */
@media (max-width: 640px) {

  /* no horizontal scroll anywhere */
  .buf { overflow-x: hidden !important; max-width: 100vw; }

  /* app becomes a column: content on top, nav rail -> bottom tab bar */
  .buf .app { flex-direction: column !important; height: 100dvh !important; max-width: 100vw; }
  .buf .main { order: 0; min-height: 0; }
  .buf .side {
    order: 1;
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    gap: 6px !important;
    border-right: none !important;
    border-top: 1px solid var(--line);
  }
  .buf .logo { display: none !important; }
  .buf .nav {
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 4px !important;
    align-items: stretch;
  }
  /* big tap targets in the tab bar */
  .buf .nav button { flex: 0 0 auto; min-width: 62px; min-height: 54px; padding: 7px 9px !important; font-size: 10px !important; border-radius: 12px !important; justify-content: center; }
  .buf .nav button .ic { font-size: 21px !important; }
  .buf .nav button.on::before { display: none !important; } /* left rail indicator is meaningless horizontally */
  .buf .nav .badge { top: 2px !important; right: 4px !important; }
  .buf .logout { flex-shrink: 0; padding: 8px !important; font-size: 10px !important; }

  /* compact header */
  .buf .top { padding: 9px 12px !important; gap: 8px; }
  .buf .top h1 { font-size: 17px !important; }
  .buf .top .sub { display: none !important; }
  .buf .chip-time { padding: 6px 9px !important; font-size: 11px !important; border-radius: 10px !important; }
  .buf .prof { gap: 0 !important; }
  .buf .prof > div:last-child { display: none; } /* name/role text; avatar stays */
  .buf .ava { width: 34px !important; height: 34px !important; border-radius: 10px !important; }

  /* ---- POS (Касса): grid on top, cart docks as a bottom sheet ---- */
  .buf .pos { flex-direction: column !important; }
  .buf .pos-left { padding: 10px 12px 0 !important; min-height: 0; }
  .buf .cats { padding-bottom: 10px !important; gap: 8px !important; }
  .buf .cat { padding: 12px 16px !important; font-size: 13.5px !important; } /* ~46px tall tap chip */

  /* 2 columns of big tappable tiles */
  .buf .grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 2px 2px 14px !important; }
  .buf .tile { min-height: 116px !important; padding: 13px 12px !important; border-radius: 16px !important; }
  .buf .tile:hover { transform: none !important; } /* no hover-lift jitter on touch */
  .buf .tile .emo { font-size: 31px !important; }
  .buf .tile .nm { font-size: 13.5px !important; }

  /* cart: full-width sheet docked to the bottom of the screen */
  .buf .cart {
    width: 100% !important;
    max-height: 46dvh;
    flex-shrink: 0;
    border-left: none !important;
    border-top: 1.5px solid var(--line);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 30px rgba(60, 40, 20, .12);
  }
  .buf .cart-h { padding: 10px 16px 8px !important; }
  .buf .cart-h .clr { padding: 8px 12px !important; } /* bigger "Очистить" target */
  .buf .cart-list { padding: 4px 14px !important; }
  .buf .ci { padding: 8px 0 !important; }
  .buf .qb { width: 38px !important; height: 38px !important; border-radius: 11px !important; font-size: 19px !important; }
  /* empty state must not steal screen from the menu grid */
  .buf .cart-empty { flex: 0 0 auto !important; padding: 8px 0 12px; font-size: 12.5px !important; gap: 4px !important; }
  .buf .cart-empty .e { font-size: 26px !important; }
  .buf .cart-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) !important; }
  .buf .tot { margin-bottom: 10px !important; }
  .buf .tot .v { font-size: 22px !important; }
  .buf .pay { min-height: 60px !important; border-radius: 13px !important; }

  /* ---- content pages (меню/заказы/долги/склад/ревизия/отчёт) ---- */
  .buf .wrap { padding: 12px 12px 16px !important; }
  .buf .kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-bottom: 14px !important; }
  .buf .kpi { padding: 13px 14px !important; border-radius: 15px !important; }
  .buf .kpi .ki { width: 36px !important; height: 36px !important; font-size: 18px !important; margin-bottom: 8px !important; }
  .buf .kpi .kv { font-size: 19px !important; }
  .buf .kpi .kl { font-size: 11.5px !important; }
  .buf .card { padding: 13px 14px !important; border-radius: 15px !important; margin-bottom: 12px !important; }
  .buf .card-t { flex-wrap: wrap; }

  /* list rows (this module has no <table>: lists are flex rows) —
     let action buttons wrap to a second line instead of overflowing */
  .buf .row { flex-wrap: wrap; gap: 9px !important; padding: 10px 0 !important; }
  .buf .row .rico { width: 38px !important; height: 38px !important; font-size: 18px !important; border-radius: 11px !important; }
  .buf .row .rb { flex: 1 1 150px !important; }
  .buf .row .rn { font-size: 13.5px !important; }

  /* big tap targets on all action buttons */
  .buf .btn { min-height: 44px; padding: 10px 14px !important; }
  .buf .tag { padding: 8px 11px !important; }

  /* ---- modal sheet: near-fullscreen ---- */
  .buf .bufovl { align-items: flex-end !important; }
  .buf .bufsheet {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 55dvh;
    max-height: 96dvh !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 18px 16px calc(22px + env(safe-area-inset-bottom)) !important;
  }
  .buf .bufsheet h3 { font-size: 17px !important; }
  .buf .inp { min-height: 52px !important; } /* keeps 16px font: no iOS zoom */
}
/* ════════════════════════════════════════════════════════════════════
   MAKON — адаптивный CSS-патч для профиля ПРОДАВЦА АКСЕССУАРОВ
   Модуль: acc-seller.js  ·  корень: #accSellerRoot.accs
   Стили модуля инжектятся JS ПОЗЖЕ этого файла (<style id="accSellerStyle">),
   поэтому каждое переопределяемое свойство помечено !important.
   Десктоп (>1024px) НЕ затронут — все правила только внутри media queries.
   Координация со встроенными брейкпоинтами модуля:
     • 980px (иконки-сайдбар, корзина 330px) — расширяем до 1024px;
     • 680px (телефонный режим: mtop/tabs/bottom-sheet) — НЕ противоречим,
       структурные правила планшета заперты в диапазон 681–1024px.
   ════════════════════════════════════════════════════════════════════ */

/* ── ПЛАНШЕТЫ 641–1024px: безопасные для всего диапазона правки ─────
   (в срезе 641–680px активны телефонные правила модуля @680 —
    здесь только то, что им не противоречит) */
@media (min-width:641px) and (max-width:1024px){
  /* компактные фильтры-чипсы и клиентские чипы */
  .accs .chips{gap:7px !important;margin-bottom:13px !important}
  .accs .chip{padding:8px 13px !important;font-size:13px !important}
  .accs .cl-chip{padding:9px 12px !important;font-size:13px !important}
  /* чуть плотнее карточки чеков: 2 колонки на планшете */
  .accs .rcpt-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr)) !important;gap:9px !important}
  .accs .rcpt{padding:12px !important}
  /* удобная кнопка «+» в тайле товара */
  .accs .prod .add{width:40px !important;height:40px !important}
}

/* ── ПЛАНШЕТЫ 681–1024px: структура (вне телефонной зоны модуля @680) ── */
@media (min-width:681px) and (max-width:1024px){
  /* компактная навигация: иконки-рейка на ВЕСЬ планшетный диапазон
     (модуль включает её только ≤980 — продлеваем до 1024) */
  .accs .side{width:74px !important;padding:18px 10px !important}
  .accs .brand b,.accs .prof .w,.accs .navbtn span,.accs .logout span{display:none !important}
  .accs .brand{justify-content:center !important;padding:0 0 16px !important}
  .accs .prof{justify-content:center !important;padding:9px !important}
  .accs .navbtn{justify-content:center !important;padding:13px !important}
  .accs .navbtn .pill{display:none !important}
  .accs .logout{justify-content:center !important}
  /* раскладка продажи: товары + корзина 330px (как в модуле @980) */
  .accs .sell-layout{grid-template-columns:1fr 330px !important;gap:14px !important}
  .accs .cartpanel{padding:14px !important}
  /* 2–3 колонки тайлов товара (у модуля minmax 250px → часто 1 колонка
     рядом с корзиной; 205px даёт 2 колонки уже от ~760px ширины окна) */
  .accs .prod-grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr)) !important;gap:10px !important}
  .accs .scroll{padding:18px 16px !important}
  .accs .ptitle{font-size:19px !important;margin-bottom:13px !important}
}

/* ── ТЕЛЕФОНЫ ≤640px ─────────────────────────────────────────────────
   Дополняет телефонный режим модуля @680 (sidebar скрыт, .mtop, .tabs,
   корзина = bottom-sheet, сетки 1 колонка) — не противоречит ему. */
@media (max-width:640px){
  /* никакого горизонтального скролла страницы */
  .accs{overflow-x:hidden !important}
  .accs .app{max-width:100vw !important;overflow-x:hidden !important}
  .accs .main{max-width:100vw !important;overflow-x:hidden !important}
  .accs .scroll{overflow-x:hidden !important;
    padding:14px 12px calc(96px + env(safe-area-inset-bottom,0px)) !important}
  .accs .wrap{max-width:100% !important}

  /* сетки: одна колонка (как у модуля), плотнее */
  .accs .prod-grid{grid-template-columns:1fr !important;gap:9px !important}
  .accs .rcpt-grid{grid-template-columns:1fr !important;gap:9px !important}
  .accs .sell-layout{grid-template-columns:1fr !important;gap:12px !important}

  /* горизонтальные ленты скроллятся внутри себя, не тянут страницу */
  .accs .clients{overflow-x:auto !important;-webkit-overflow-scrolling:touch !important}

  /* тач-мишени ≥40–44px */
  .accs .search{font-size:16px !important;padding:13px 14px !important} /* 16px = без авто-зума iOS */
  .accs .chip{padding:10px 16px !important;font-size:14px !important}
  .accs .cl-chip{padding:11px 13px !important;min-height:44px !important}
  .accs .cl-chip .cl-x{width:28px !important;height:28px !important;font-size:15px !important}
  .accs .prod{padding:12px !important}
  .accs .prod .add{width:44px !important;height:44px !important;border-radius:12px !important}
  .accs .stp{gap:10px !important}
  .accs .stp button{width:38px !important;height:38px !important;border-radius:10px !important;font-size:18px !important}
  .accs .stp b{font-size:15px !important;min-width:20px !important}
  .accs .cp-item .rm{padding:6px 8px !important;font-size:18px !important}
  .accs .cp-head .cls{padding:6px 10px !important;font-size:20px !important}

  /* корзина (bottom-sheet) — почти на весь экран, элементы в столбик */
  .accs .cartpanel{max-height:92vh !important;
    padding:16px 14px calc(16px + env(safe-area-inset-bottom,0px)) !important}
  .accs .cp-items{max-height:56vh !important}
  .accs .cp-item{padding:11px !important}
  .accs .cp-item .bot{flex-wrap:wrap !important;row-gap:9px !important}
  .accs .price-in{padding:8px 10px !important}
  .accs .price-in input{width:96px !important;font-size:16px !important}
  .accs .minhint{font-size:11px !important}
  .accs .cp-pay{padding:16px !important;font-size:16px !important}
  .accs .cp-tot b{font-size:20px !important}

  /* лента «Готовые комплекты»: скролл внутри, карточки уже
     (инлайн-стили модуля min-width:210px перебиваются !important) */
  .accs #accBundles > div{overflow-x:auto !important;-webkit-overflow-scrolling:touch !important;max-width:100% !important}
  .accs #accBundles > div > div{min-width:178px !important;max-width:198px !important;padding:11px !important}

  /* фиксированные бары с учётом безопасной зоны (вырез/жест-бар) */
  .accs .tabs{height:calc(72px + env(safe-area-inset-bottom,0px)) !important;
    padding-bottom:env(safe-area-inset-bottom,0px) !important}
  .accs .cartbar{bottom:calc(86px + env(safe-area-inset-bottom,0px)) !important;
    padding:13px 16px !important}
  .accs .cartbar b{font-size:15.5px !important}
  .accs .toast{bottom:calc(160px + env(safe-area-inset-bottom,0px)) !important;
    font-size:13.5px !important}

  /* мобильная шапка: учёт выреза сверху */
  .accs .mtop{padding:calc(14px + env(safe-area-inset-top,0px)) 14px 14px !important}
  .accs .sec-h{flex-wrap:wrap !important;gap:6px !important}
}
/* ============================================================================
   MAKON CRM (crm.js, роль acc_manager/acc_seller) — адаптивный CSS-патч.
   Корень модуля: #crmRoot (весь UI внутри), плюс #bundleOvl — модалка
   «Готовые комплекты», которую crm.js вешает прямо на <body>.
   Патч грузится ДО инжектируемого <style id="crmStyle">, поэтому все
   перекрывающие свойства помечены !important.
   Десктоп (>1024px) не затрагивается: все правила только внутри media.
   Координация со встроенными брейкпоинтами crm.js:
     - @media(min-width:980px): сайдбар фиксирован, .main{margin-left:248px}
     - @media(max-width:1100px): color-grid/quick-actions -> 2 колонки
     - @media(max-width:700px):  grid-2/grid-3c/grid-3eq/branch-grid/form-row -> 1 колонка
   Мы не противоречим им: планшетные сеточные правки идут в 701–1024px,
   телефонные — в <=640px (усиливают, а не отменяют правило 700px).
   ========================================================================= */

/* ============================== ПЛАНШЕТ =================================== */

/* 980–1024px: у crm.js сайдбар уже раскрыт и фиксирован — ужимаем его */
@media (min-width: 980px) and (max-width: 1024px) {
  #crmRoot .sidebar {
    width: 200px !important;
  }
  #crmRoot .main {
    margin-left: 200px !important;
  }
  #crmRoot .nav-item {
    padding: 8px 8px !important;
    margin: 1px 6px !important;
    font-size: 12px !important;
    gap: 8px !important;
  }
  #crmRoot .nav-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
  }
  #crmRoot .sb-branch {
    margin: 8px 8px !important;
    padding: 8px 9px !important;
  }
  #crmRoot .content {
    padding: 14px !important;
  }
}

/* 641–979px: сайдбар остаётся выезжающим (drawer) — лишь слегка компактнее */
@media (min-width: 641px) and (max-width: 979px) {
  #crmRoot .sidebar {
    width: 232px !important;
  }
  #crmRoot .nav-item {
    padding: 8px 10px !important;
  }
}

/* 701–1024px: 2-колоночные сетки (ниже 701px действует родное правило "1fr",
   не противоречим ему) */
@media (min-width: 701px) and (max-width: 1024px) {
  #crmRoot .branch-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #crmRoot .grid-3eq {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #crmRoot .grid-3c {
    grid-template-columns: 1fr 1fr !important;
  }
  #crmRoot .color-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #crmRoot .quick-actions {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================== ТЕЛЕФОН ==================================== */

@media (max-width: 640px) {

  /* --- запрет горизонтального скролла страницы --- */
  #crmRoot {
    overflow-x: hidden !important;
  }
  #crmRoot .main {
    max-width: 100vw !important;
    /* место под нижнюю навигационную панель */
    padding-bottom: 78px !important;
  }
  #crmRoot .content {
    padding: 10px !important;
    max-width: 100% !important;
  }

  /* --- НАВИГАЦИЯ: вместо drawer — компактная нижняя панель с
         горизонтальной прокруткой (всегда видима) --- */
  #crmRoot .sidebar {
    transform: none !important;          /* перебивает translateX(-100%) и .open */
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    border-right: none !important;
    border-top: 1px solid var(--border) !important;
    box-shadow: 0 -4px 16px rgba(16, 24, 40, 0.08) !important;
    padding: 0 2px !important;
  }
  /* бургер и затемнение больше не нужны (display:none!important сильнее .show) */
  #crmRoot .sb-toggle {
    display: none !important;
  }
  #crmRoot .sb-overlay {
    display: none !important;
  }
  /* лого и блок пользователя в панель не влезают */
  #crmRoot .sb-logo {
    display: none !important;
  }
  #crmRoot .sb-user {
    display: none !important;
  }
  /* переключатель филиала — компактная «таблетка» слева в панели */
  #crmRoot .sb-branch {
    margin: 6px 4px !important;
    padding: 6px 8px !important;
    flex: 0 0 auto !important;
    max-width: 126px !important;
  }
  #crmRoot .sb-bname {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* сама лента пунктов */
  #crmRoot .sidebar nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px 2px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #crmRoot .sidebar nav::-webkit-scrollbar {
    display: none !important;
  }
  #crmRoot .nav-sec {
    display: none !important;
  }
  #crmRoot .nav-item {
    flex: 0 0 auto !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 5px 9px !important;
    margin: 0 1px !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    position: relative !important;
  }
  #crmRoot .nav-icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 13px !important;
  }
  #crmRoot .nav-badge {
    position: absolute !important;
    top: 0 !important;
    right: 2px !important;
    margin-left: 0 !important;
    padding: 1px 5px !important;
    font-size: 8px !important;
  }

  /* --- ШАПКА --- */
  #crmRoot .topbar {
    padding: 8px 10px !important;
    gap: 6px !important;
    min-height: 50px !important;
  }
  #crmRoot .page-title {
    font-size: 14px !important;
  }
  #crmRoot .page-date {
    font-size: 10px !important;
  }
  #crmRoot .search-box {
    width: 110px !important;
    padding: 7px 9px !important;
  }
  #crmRoot .search-box:focus {
    width: 140px !important;
  }
  #crmRoot .btn-back {
    padding: 7px 9px !important;
    font-size: 11px !important;
  }

  /* --- КАРТОЧКИ И СЕТКИ: одна колонка --- */
  #crmRoot .color-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #crmRoot .grid-2,
  #crmRoot .grid-3c,
  #crmRoot .grid-3eq,
  #crmRoot .branch-grid {
    grid-template-columns: 1fr !important;
  }
  #crmRoot .quick-actions {
    grid-template-columns: 1fr 1fr !important; /* мелкие кнопки — парой */
    gap: 8px !important;
  }
  #crmRoot .qa-btn {
    padding: 11px 8px !important;
    font-size: 11px !important;
  }
  #crmRoot .cc {
    flex-direction: row !important;      /* стат-карточка в одну строку */
    align-items: center !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  #crmRoot .cc-icon {
    margin-bottom: 0 !important;
  }
  #crmRoot .cc-val {
    font-size: 19px !important;
  }
  #crmRoot .card-header {
    flex-wrap: wrap !important;
    padding: 11px 12px !important;
  }
  #crmRoot .card-body {
    padding: 12px !important;
  }
  #crmRoot .bc-metrics {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
  #crmRoot .tag-filter {
    flex-wrap: nowrap !important;        /* фильтры — прокручиваемая лента */
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch;
  }
  #crmRoot .tag {
    flex: 0 0 auto !important;
  }

  /* --- ТАБЛИЦЫ: горизонтальная прокрутка внутри карточки --- */
  #crmRoot .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  #crmRoot .table-wrap table {
    min-width: 600px !important;         /* колонки не схлопываются, скроллим */
  }
  #crmRoot th {
    padding: 8px 10px !important;
  }
  #crmRoot td {
    padding: 9px 10px !important;
  }

  /* --- МОДАЛКИ: почти во весь экран (нижний лист) --- */
  #crmRoot .modal-overlay,
  #bundleOvl.modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  #crmRoot .modal,
  #bundleOvl .modal {
    width: 100% !important;
    max-width: 100% !important;          /* перебивает inline max-width 300/520px */
    max-height: 94vh !important;
    border-radius: 16px 16px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }
  #crmRoot .modal-header,
  #bundleOvl .modal-header {
    position: sticky !important;
    top: 0 !important;
    background: var(--white, #fff) !important;
    z-index: 2 !important;
    padding: 13px 14px !important;
  }
  #crmRoot .modal-body,
  #bundleOvl .modal-body {
    padding: 14px !important;
  }
  #crmRoot .modal-footer,
  #bundleOvl .modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    background: var(--white, #fff) !important;
    flex-wrap: wrap !important;
    padding: 11px 14px !important;
  }
  #crmRoot .modal-footer .btn,
  #bundleOvl .modal-footer .btn {
    flex: 1 1 auto !important;
    min-height: 42px !important;
  }

  /* --- ФОРМЫ --- */
  #crmRoot .form-row {
    grid-template-columns: 1fr !important;
  }
  #crmRoot .form-input,
  #crmRoot .form-select,
  #bundleOvl .form-input,
  #bundleOvl .form-select {
    font-size: 16px !important;          /* iOS: без автозума при фокусе */
    padding: 10px 11px !important;
  }

  /* --- ТОСТ: выше нижней навигации, на всю ширину --- */
  #crmRoot .toast {
    bottom: 82px !important;
    left: 12px !important;
    right: 12px !important;
    max-width: none !important;
  }
}
/* extras: тосты модулей живут в body вне корней — на телефоне поднимаем над нижней навигацией */
@media (max-width:640px){
  .buftoast{bottom:calc(78px + env(safe-area-inset-bottom)) !important}
  #spcToast{bottom:calc(84px + env(safe-area-inset-bottom)) !important}
  .mgrtoast{bottom:calc(84px + env(safe-area-inset-bottom)) !important}
}

/* extras: шапка выдвижного сайдбара на телефоне — логотип+название компактно, в одну строку */
@media (max-width:760px){
  /* классический интерфейс */
  #root .side-brand{gap:8px !important;padding:2px 4px 10px !important;align-items:center !important}
  #root .side-logo{width:28px !important;height:28px !important;font-size:14px !important;flex:0 0 28px !important}
  #root .side-brand-tx{min-width:0 !important;overflow:hidden !important}
  #root .side-brand .bn{font-size:12.5px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
  #root .side-brand .bs{font-size:8px !important;letter-spacing:.4px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
  #root .side-toggle{display:none !important} /* сворачивание не нужно на телефоне */
}
@media (max-width:820px){
  /* директор: шапка drawer-сайдбара */
  .dir .slogo{gap:9px !important;align-items:center !important;overflow:hidden !important}
  .dir .slogo .ic{width:30px !important;height:30px !important;font-size:15px !important;flex:0 0 30px !important}
  .dir .slogo b{font-size:14px !important;white-space:nowrap !important}
  .dir .slogo span{font-size:10px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;display:block !important}
  .dir .side{padding-top:max(14px, env(safe-area-inset-top)) !important}
}
@media (min-width:641px) and (max-width:900px){
  /* сервисные drawer-сайдбары (планшет/узкий экран): убрать кнопку сворачивания, ужать бренд */
  .spc .side .brand .collapse,.shd .side .brand .collapse{display:none !important}
  .spc .side .brand .bt b,.shd .side .brand .bt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}