/* ══════════════════════════════════════════════════════════════════════════════
   МОБИЛЬНАЯ ВЁРСТКА кабинета (телефон / PWA, ширина ≤ 767px). Подключён после styles.css и
   theme-v2.css, работает и в старом, и в новом дизайне. На десктопе не влияет ни на что.
   Правила с !important перебивают inline-стили из JS-разметки (иначе их не переопределить).
   Нижняя панель и заголовок в шапке — public/js/mobile.js.
   ══════════════════════════════════════════════════════════════════════════════ */

#mnav,.mtitle{display:none;}

@media (max-width:767px){
  html,body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent;}
  /* 100vh на телефоне включает область под адресной строкой — низ экрана обрезался */
  #screen-dashboard,.main-area{height:100vh;height:100dvh;}

  /* ───── Боковое меню: целиком прокручивается (раньше нижний блок съедал почти всю высоту) ───── */
  .sidebar{width:min(290px,86vw);left:-110%;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
  .sidebar.open{left:0;}
  .sidebar-nav{flex:none;overflow:visible;}
  .sidebar-item,.sidebar-group-header{padding-top:13px;padding-bottom:13px;font-size:14.5px;}
  .sidebar-item.sub{font-size:14px;}
  .sidebar-footer{padding-bottom:calc(10px + env(safe-area-inset-bottom));}
  .sidebar-brand{padding-top:calc(16px + env(safe-area-inset-top));}

  /* ───── Шапка ───── */
  .topbar{padding:8px 10px!important;gap:6px 8px;flex-wrap:wrap;position:relative;z-index:50;}   /* wrap: в «Вопросах»/«Чатах» кнопки не помещаются в одну строку */
  .tb-left{flex:1 1 auto;min-width:0;gap:8px;}
  .tb-right{gap:4px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;}
  html body .tb-right .icon-btn,html body .tb-right .upd-btn{width:36px;height:36px;border-radius:12px;flex:none;}
  .hamburger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:12px;font-size:22px;background:var(--white);border:1px solid var(--s2);}
  .mtitle{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:800;letter-spacing:-.2px;color:var(--text);}
  .notif-dropdown{left:10px!important;right:10px!important;width:auto!important;max-width:none!important;}

  /* ───── Нижняя панель навигации ───── */
  #mnav{display:flex;flex-shrink:0;gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--white);border-top:1px solid var(--s2);position:relative;z-index:60;}
  #mnav button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px 0 4px;border:0;background:none;color:var(--muted);font:600 10.5px var(--font-body);cursor:pointer;}
  #mnav .mnav-ic{display:flex;align-items:center;justify-content:center;width:52px;height:30px;border-radius:15px;transition:background .15s,color .15s;}
  #mnav .mnav-ic svg{width:21px;height:21px;}
  #mnav button.on{color:var(--red);}
  #mnav button.on .mnav-ic{background:var(--red-dim);}
  #mnav button:active .mnav-ic{background:var(--s2);}
  body.kbd #mnav{display:none;}
  .toast{bottom:calc(86px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);white-space:normal;text-align:center;}

  /* ───── Поля страниц: 16px по бокам — это 8% ширины экрана ───── */
  [id^="section-"]>div[style*="padding:16px"]{padding:10px 10px 6px!important;}
  #section-products .supplies-tabs{margin-bottom:8px!important;}

  /* ───── Панель фильтров: одна строка с горизонтальным скроллом вместо 4–6 строк кнопок ───── */
  .pf-card{flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;gap:8px;margin-bottom:8px;padding:8px 10px!important;border-radius:14px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .pf-card::-webkit-scrollbar{display:none;}
  .pf-card>*{flex:0 0 auto!important;}
  .pf-filters{flex-wrap:nowrap!important;}
  .pf-actions{margin-left:0;}
  .pf-btn,.pf-search input,html.ui-v2 .pf-btn,html.ui-v2 .pf-search input{height:38px;}
  .pf-search input{width:190px;}
  .pf-card .pf-actions>.pf-note:first-child{display:none;}   /* длинная подпись РНП — в строку не помещается */
  .pf-note{white-space:nowrap!important;}
  /* Выпадашки не должны обрезаться прокручиваемой строкой: открываются «листом» над нижней панелью */
  .pf-panel,.dp-popup{position:fixed!important;left:8px!important;right:8px!important;top:auto!important;bottom:calc(72px + env(safe-area-inset-bottom))!important;width:auto!important;max-width:none!important;max-height:min(68vh,520px);overflow-y:auto;z-index:10000;box-shadow:0 -8px 40px rgba(8,14,30,.28);}
  body.kbd .pf-panel,body.kbd .dp-popup{bottom:8px!important;}

  /* ───── Таблицы: прокрутка и фото ───── */
  #rnp-scroll button[onclick*="ProductDetail"]{padding:3px 8px!important;}
  #rnp-scroll button[onclick*="ProductDetail"]::after{margin-left:3px!important;}
  #rnp-scroll,.prod-scroll,.supplies-table-wrap{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
  .prod-table td img[style*="width:45px"],.prod-table td span[style*="width:45px"]{width:36px!important;height:44px!important;}
  .prod-table .prod-td.left button{margin-top:5px!important;}

  /* «Разбивка по дням» шире экрана в разы — дата остаётся на месте при прокрутке вбок */
  .analytics-daily-table th:first-child,.analytics-daily-table td:first-child{position:sticky;left:0;z-index:2;background:var(--white)!important;box-shadow:3px 0 6px -4px rgba(0,0,0,.16);}
  .analytics-daily-table th:first-child{z-index:4;}

  /* ───── «Аналитика»: карточки итогов по две в ряд ───── */
  html.ui-v2 #analytics-content{gap:10px;}
  html.ui-v2 #analytics-summary-cards>.q-card{grid-column:span 6;min-height:0;padding:12px!important;}
  html.ui-v2 #analytics-summary-cards>.q-card .card-big-val{font-size:20px!important;letter-spacing:-.4px;margin-top:4px;}
  html.ui-v2 #analytics-summary-cards>.q-card>div:first-child{font-size:10px!important;letter-spacing:.3px!important;gap:7px;}
  html.ui-v2 #analytics-summary-cards>.q-card>div:first-child::before{width:24px;height:24px;border-radius:8px;background-size:13px,auto;}
  html.ui-v2 #analytics-summary-cards>.q-card:last-child{grid-column:1/-1;padding:18px 18px!important;}
  html.ui-v2 #analytics-summary-cards>.q-card:last-child .card-big-val{font-size:34px!important;letter-spacing:-1px;margin:8px 0 6px;}
  html.ui-v2 #analytics-content>#ui2-dyn{padding:14px 12px 10px!important;}
}

@media (max-width:359px){
  html body .tb-right .icon-btn,html body .tb-right .upd-btn{width:32px;height:32px;}
  .tb-left{gap:6px;}
  .hamburger{width:36px;height:36px;}
}

/* ───── Окно «Подробнее» по товару (analytics.js:showProductDetail) ───── */
@media (max-width:767px){
  #pd-detail-overlay{padding-top:env(safe-area-inset-top);}
  #pd-detail-overlay .modal-head{padding:10px 12px!important;gap:8px;align-items:flex-start;}
  #pd-detail-overlay .modal-head>div:first-child{display:block!important;flex:1;min-width:0;}   /* фото обтекается названием, строка кнопок — на всю ширину */
  #pd-detail-img{float:left;width:42px!important;height:42px!important;margin-right:10px;border-radius:8px!important;}
  #pd-detail-overlay .modal-title{font-size:15px;line-height:1.25;}
  #pd-detail-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  #pd-detail-sub{font-size:11.5px!important;line-height:1.45;overflow:hidden;}
  .pd-tools{clear:both;flex-wrap:nowrap!important;overflow-x:auto;gap:8px!important;margin:10px -12px 0!important;padding:0 12px 2px;scrollbar-width:none;}
  .pd-tools::-webkit-scrollbar{display:none;}
  .pd-tools>*{flex:0 0 auto;}
  .pd-tools .pd-hint{display:none;}
  .pd-tools button{height:34px;}
  /* вертикально листается сама таблица (а не окно) — тогда липкие заголовок и «Итого» остаются на месте */
  #pd-detail-body{display:flex!important;flex-direction:column;overflow:hidden!important;}
  #pd-detail-body>.prod-scroll{flex:1;min-height:0;}
  #pd-growth-panel{padding:10px 12px!important;max-height:45vh;overflow-y:auto;}
  .pd-table td.pd-promo,.pd-table th:nth-child(2){max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}