/* ═══ ПЛАНШЕТ (601px – 980px) ═══ */
@media (max-width: 980px) and (min-width: 601px) {
  .grid2{ grid-template-columns: 1fr 1fr !important; }
  .grid3{ grid-template-columns: 1fr 1fr !important; }
  .kpi .box{ min-width: 140px; }
  .dash-main-grid{ grid-template-columns: 1fr !important; }
}

/* ═══ ТЕЛЕФОН (≤768px) — ОСНОВНОЙ МОБИЛЬНЫЙ БЛОК ═══ */
@media (max-width: 768px) {

  /* ── 1. БАЗОВЫЕ СТИЛИ ── */
  html, body {
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: none;
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  *, *::before, *::after {
    max-width: 100vw;
  }
  .app, .main, .content, #appRoot {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* Hide columns/elements on mobile */
  .hide-mobile{ display:none !important; }

  /* ── GLOBAL MOBILE SCROLL FIX ── */
  /* Main container: allow natural document flow instead of locked viewport */
  .main:not(.pos-mode){ height:auto !important; overflow:visible !important; }
  /* Regular content pages: allow scroll */
  .content:not(.page-list){ overflow:visible !important; padding:8px !important; }
  .content.page-list{ padding:8px !important; }
  /* page-list pages: allow scroll on mobile.
     touch-action: manipulation (= pan-x + pan-y + pinch-zoom) вместо pan-y —
     иначе intersection с предками блокирует горизонтальный свайп у .tabs
     (свайп статусов "Все/Новый/В работе/Отложен..." не работал). */
  .content.page-list{ overflow-y:auto !important; -webkit-overflow-scrolling:touch; touch-action:manipulation !important; }
  .content.page-list > .list-scroll{ overflow:visible !important; flex:none !important; touch-action:manipulation !important; }
  .content.page-list > .card:last-of-type{ overflow:visible !important; flex:none !important; }
  .content.page-list *[onclick]{ touch-action:manipulation !important; }
  .mob-cards tr, .mob-cards td{ touch-action:manipulation !important; }

  /* Kill ALL inline height:100% + overflow:hidden containers in content area */
  .content > div[style*="height:100%"][style*="overflow:hidden"],
  .content > div[style*="height: 100%"][style*="overflow: hidden"],
  .content > div > div[style*="height:100%"][style*="overflow:hidden"]{
    height:auto !important; overflow:visible !important;
  }

  /* page-list mode: allow scroll for mob-cards */
  .content.page-list > .list-scroll.mob-cards,
  .content.page-list > .card.mob-cards{
    overflow:visible !important;
    overflow-y:visible !important;
  }
  .content.page-list:has(.mob-cards){
    overflow-y:auto !important;
  }

  /* iOS: предотвращаем зум при фокусе на input (16px минимум) */
  input, select, textarea, .input, .searchbox input, .pos-search input, .pp-input {
    font-size: 16px !important;
    box-sizing: border-box !important;
  }

  /* Тач-удобные инпуты */
  .input, select {
    min-height: 36px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-right: 10px !important;
  }
  /* padding-left не трогаем — инпуты с иконками имеют свой inline padding-left */
  select{ padding-left: 10px !important; padding-right: 10px !important; }
  textarea { min-height: 50px !important; padding: 8px 10px !important; }

  /* Кнопки: тач-удобные */
  .btn {
    min-height: 44px;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  .btn2{
    min-height: 36px;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  .btn2.mini{
    min-height: 30px;
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  .action-btn, .icon-btn {
    min-height: 44px;
    min-width: 44px;
  }
  /* Только основные CTA кнопки — 44px. Мелкие (tabs, segbtn, mini) — меньше */
  .tab, .segbtn {
    min-height: 32px !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
  }

  /* ── Mobile Back button ── */
  .mob-back-btn{
    display:inline-flex !important; align-items:center; justify-content:center;
    width:34px; height:34px; min-width:34px; min-height:34px;
    border:1px solid var(--border); border-radius:10px;
    background:#fff; color:var(--text); font-size:18px;
    cursor:pointer; padding:0 !important;
    -webkit-tap-highlight-color:transparent;
  }
  .mob-back-btn:active{ background:var(--bg); }

  /* ── 2. ШАПКА (Topbar) ── */
  .topbar-inner {
    padding: 8px 10px !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center !important;
  }
  .burger{ width:38px; height:38px; min-width:38px; font-size:20px; }
  .crumb{ min-width:0; overflow:hidden; }
  .crumb b{ font-size: 13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .crumb span{ font-size: 10px; }
  /* Search: show as icon on mobile, expand on click */
  .search {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: 1 1 auto;
  }
  .searchbox{ width:100%; }
  .searchbox input{ font-size:15px !important; padding:8px 10px !important; }
  .locpill {
    margin-left: auto !important;
    font-size: 11px;
    padding: 4px 8px !important;
    max-width: 160px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .cashpill{ display:none !important; }
  /* Hide shop bell badge overlap */
  #shopBell{ padding:4px 8px !important; font-size:14px !important; }

  /* ── 3. КОНТЕНТ И КАРТОЧКИ ── */
  .content { padding: 8px !important; }
  .card {
    padding: 10px !important;
    border-radius: 12px !important;
    margin-bottom: 8px;
  }
  .card h3 { font-size: 13px !important; }

  /* Гриды → 1 колонка на телефонах */
  .grid2, .grid3, .grid4 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* KPI → 2 в ряд */
  .kpi { gap: 6px; }
  .kpi .box {
    min-width: calc(50% - 4px) !important;
    flex: 1 1 calc(50% - 4px);
    padding: 8px !important;
  }
  .kpi .box b { font-size: 15px; }
  .kpi .box .small { font-size: 10px; }

  /* Дашборд */
  .dash-kpi{ grid-template-columns: 1fr 1fr !important; gap: 6px; }
  .dash-kpi-card{ padding: 8px; }
  .dash-kpi-value{ font-size: 15px; }
  .dash-kpi-icon{ width: 30px; height: 30px; font-size: 14px; }
  .dash-main-grid{ grid-template-columns: 1fr !important; gap:8px !important; }
  .dash-greet-hello{ font-size: 15px; }
  .dash-pipeline{ flex-wrap: wrap; min-height: auto; }
  .dash-pipe-seg{ min-width: calc(33% - 2px); padding: 8px 4px; }
  .dash-fin-grid{ grid-template-columns: 1fr 1fr; }
  /* Dashboard: все карточки компактные */
  .dash-wrap .card{ padding:10px !important; margin-bottom:8px !important; }
  .dash-wrap h3{ font-size:14px !important; margin:0 0 6px !important; }
  /* Финансы-таблица на дашборде */
  .dash-fin-table th, .dash-fin-table td{ padding:4px 6px !important; font-size:11px !important; }
  /* Локации */
  .dash-locations{ gap:6px !important; }
  .dash-locations .card{ padding:8px 10px !important; }

  /* Селектор складов (Запчасти/Аксессуары/...): полная ширина + горизонтальный
     скролл, чтобы кнопки не стакались вертикальной "лесенкой" справа от заголовка.
     На десктопе правила не применяются — селектор остаётся обычным flex-рядом. */
  .wh-selector{
    flex: 1 1 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x !important;
  }
  .wh-selector::-webkit-scrollbar{ display:none; }
  .wh-selector > button{ touch-action: manipulation !important; }

  /* Таблицы внутри inline overflow-x:auto обёрток (inventory analytics,
     некоторые таблицы кассы/отчётов и т.п.) — не схлопывать в 100% ширины
     карточки, позволить horizontal scroll. */
  .card > div[style*="overflow-x:auto"]:not(.mob-cards),
  .card > div[style*="overflow-x: auto"]:not(.mob-cards){
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y !important;
  }
  .card > div[style*="overflow-x:auto"]:not(.mob-cards) > table:not(.sch-table),
  .card > div[style*="overflow-x: auto"]:not(.mob-cards) > table:not(.sch-table){
    min-width: max-content !important;
    width: auto !important;
  }
  .card > div[style*="overflow-x:auto"]:not(.mob-cards) > table:not(.sch-table) th,
  .card > div[style*="overflow-x:auto"]:not(.mob-cards) > table:not(.sch-table) td,
  .card > div[style*="overflow-x: auto"]:not(.mob-cards) > table:not(.sch-table) th,
  .card > div[style*="overflow-x: auto"]:not(.mob-cards) > table:not(.sch-table) td{
    white-space: nowrap !important;
    word-break: normal !important;
  }

  /* ── 4. ТАБЛИЦЫ (всё вмещается в ширину экрана) ── */
  .card{ overflow-x: hidden !important; }
  table:not(.sch-table){ min-width:0 !important; width:100% !important; table-layout:auto !important; }
  th, td {
    white-space: normal !important;
    padding: 6px 4px !important;
    font-size: 12px !important;
    word-break: break-word;
  }

  /* ── 5. МОДАЛЬНЫЕ ОКНА ── */
  .modal-box {
    width: 96vw !important;
    max-width: 96vw !important;
    max-height: 92dvh !important;
    border-radius: 14px !important;
    padding: 14px !important;
  }
  .modal-box.modal-wide {
    max-width: 96vw !important;
  }
  .modal-box h3 { font-size: 15px !important; }
  .modal-box .grid2 {
    grid-template-columns: 1fr !important;
  }
  .modal-scroll {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }

  /* Боковые панели → полная ширина */
  .pos-drawer, .order-drawer {
    width: 100% !important;
    max-width: 100% !important;
  }
  .staff-slide {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* ── 6. POS МОБИЛЬНЫЙ ── */
  .main.pos-mode{ overflow:auto !important; height:auto !important; }
  .main.pos-mode .content{ overflow:visible !important; display:block !important; padding:8px !important; padding-bottom:0 !important; }
  .pos-container{
    display:flex !important; flex-direction:column !important;
    height:auto !important; gap:0 !important;
  }
  /* Товары: занимают всё пространство */
  .pos-products{
    flex:1 1 auto !important; max-height:none !important;
    overflow:visible !important;
    border-radius:12px; margin-bottom:0;
  }
  .pos-search{ padding:6px !important; position:sticky; top:0; z-index:2; background:var(--card); }
  .pos-search input{ font-size:16px !important; padding:10px 12px !important; }
  .pos-products-list{ max-height:none !important; overflow:visible !important; }
  .pos-products-list .pp-row{ min-height:44px; padding:6px 10px !important; }
  /* Чек: компактный фиксированный footer внизу */
  .pos-cart{
    position:fixed !important; bottom:0; left:0; right:0;
    height:auto !important; min-height:0 !important; max-height:60vh !important;
    border-radius:16px 16px 0 0 !important;
    box-shadow:0 -4px 20px rgba(0,0,0,.15) !important;
    z-index:100; overflow:hidden !important;
    display:flex !important; flex-direction:column !important;
  }
  .pos-cart-header{
    padding:8px 14px !important;
    cursor:pointer;
  }
  /* Корзина: скролл для товаров в чеке.
     flex:0 1 auto — не растягиваемся при пустой корзине (иначе inline height:100%
     у empty-state растягивает на 30vh и пол экрана пустого места). */
  .pos-cart-items{
    flex:0 1 auto !important;
    max-height:30vh; overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    padding-bottom:0 !important;
  }
  /* Пустая корзина (2 кнопки "История продаж" + "Смена") — сжимаем в ряд. */
  .pos-cart-items > div[style*="height:100%"]{
    height:auto !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:8px !important;
    padding:10px !important;
  }
  .pos-cart-items > div[style*="height:100%"] > button{
    width:auto !important;
    flex:1 1 auto !important;
    min-height:40px !important;
  }
  /* Итого и кнопка — всегда видны */
  .pos-cart-footer, .pos-cart-total{
    position:relative !important; bottom:auto !important;
    background:var(--card); padding:8px 14px !important;
    border-top:1px solid var(--border);
  }
  .pos-checkout-btn{
    padding:12px !important; font-size:15px !important;
    min-height:48px; border-radius:10px !important; width:100%;
  }
  .pos-cart-qty button{ min-width:36px; min-height:36px; }
  .sidebar a[onclick*="openMobilePOS"]{ display:none !important; }
  /* Отступ под фиксированный чек */
  .pos-products{ padding-bottom:160px !important; }

  /* ── 6.5 ОКНО ПРОДАЖ (мобильно) ── */
  /* Top bar: hide CSV/Print on mobile, keep "Назад" + title + "+ Новая" */
  .page-sales > .row .btn2.mini[title="Экспорт CSV"],
  .page-sales > .row .btn2.mini[title="Печать"]{ display:none !important; }
  .page-sales > .row{ gap:6px !important; padding:0 4px; }
  .page-sales > .row h2{ font-size:18px !important; }
  .page-sales > .row .btn{ padding:8px 12px !important; font-size:13px !important; min-height:40px; }

  /* Filter card: tighter on mobile */
  .page-sales .card:has(input[type="date"]){
    padding:8px 10px !important; margin-bottom:6px !important;
  }
  /* Period chip row stays single line, scrolls horizontally */
  .page-sales .card > div:first-child{
    flex-wrap:nowrap !important; overflow-x:auto; -webkit-overflow-scrolling:touch;
    margin-bottom:6px !important; padding-bottom:2px;
  }
  .page-sales .card > div:first-child > div{
    flex-wrap:nowrap !important; flex:0 0 auto;
  }
  .page-sales .card > div:first-child .btn2.mini{
    min-height:36px !important; padding:6px 12px !important; font-size:12px !important;
    flex:0 0 auto; white-space:nowrap;
  }
  /* Date inputs: stack to second row, smaller */
  .page-sales .card > div:first-child > div:last-child{
    margin-left:0 !important; flex-basis:100%; justify-content:center;
  }
  /* Filter row 2 (selects + search): wrap nicely */
  .page-sales .card > div:nth-child(2){
    flex-wrap:wrap !important; gap:6px !important;
  }
  .page-sales .card > div:nth-child(2) select{
    flex:1 1 calc(50% - 4px) !important; min-width:0 !important; min-height:36px !important;
    font-size:13px !important;
  }
  .page-sales .card > div:nth-child(2) > div:has(input[type="text"]){
    flex:1 1 100% !important; max-width:none !important; min-width:0 !important;
  }
  .page-sales .card > div:nth-child(2) input[type="text"]{
    min-height:40px !important; font-size:14px !important;
  }

  /* Stats: 2-col grid, compact */
  .page-sales #salesStatsContainer{
    display:grid !important; grid-template-columns:1fr 1fr; gap:6px !important;
    margin-bottom:6px !important;
  }
  .page-sales #salesStatsContainer .card{
    min-width:0 !important; padding:8px 10px !important;
  }

  /* Sales list cards (mobile-only) */
  .sales-mob-list{ padding:0 !important; }
  .sales-mob-card{
    background:var(--card); border:1px solid var(--border); border-radius:10px;
    padding:10px 12px; margin-bottom:8px; cursor:pointer;
    box-shadow:0 1px 2px rgba(0,0,0,.03);
  }
  .sales-mob-card:active{ background:rgba(0,0,0,.03); }
  .sales-mob-card-row1{
    display:flex; justify-content:space-between; align-items:center; gap:8px;
    margin-bottom:4px;
  }
  .sales-mob-card-num{ display:flex; align-items:center; gap:6px; min-width:0; }
  .sales-mob-card-num b{ font-size:15px; color:var(--accent); }
  .sales-mob-card-amt{ font-size:16px; white-space:nowrap; }
  .sales-mob-card-row2{
    display:flex; justify-content:space-between; align-items:center; gap:8px;
    font-size:12px; color:var(--text); margin-bottom:6px;
  }
  .sales-mob-card-cust{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;
    font-weight:500;
  }
  .sales-mob-card-date{ color:var(--muted); font-size:11px; flex-shrink:0; }
  .sales-mob-card-row3{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    font-size:11px; color:var(--muted);
  }
  .sales-mob-card-row3 > span{ display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
  .sales-mob-card .pay-badge{
    font-size:11px !important; padding:3px 8px !important;
    border-radius:99px; border:1px solid var(--border);
    font-weight:600;
  }
  .sales-mob-card .pay-badge.pay-cash{ background:#d1fae5; color:#065f46; border-color:#a7f3d0; }
  .sales-mob-card .pay-badge.pay-card{ background:#dbeafe; color:#1e40af; border-color:#bfdbfe; }
  .sales-mob-card .pay-badge.pay-debt{ background:#fee2e2; color:#991b1b; border-color:#fecaca; }
  .sales-mob-card .pay-badge.pay-pending{ background:#fef3c7; color:#92400e; border-color:#fde68a; }
  .sales-mob-card .pay-badge.pay-mixed{ background:#e9d5ff; color:#6b21a8; border-color:#d8b4fe; }
  .sales-mob-card .sales-mob-tag{
    font-size:9px; padding:1px 5px; border-radius:4px; font-weight:600;
  }
  .sales-mob-card-profit{ font-weight:600; margin-left:auto; }

  /* ── 7. ЗАКАЗ (Редактирование) ── */
  .order-edit-compact{
    font-size:13px;
  }
  /* Header: order number + status compact */
  .order-edit-compact > div:first-child{
    gap:6px !important;
    margin-bottom:4px !important;
  }
  .order-edit-compact > div:first-child span[style*="font-size:22px"]{
    font-size:17px !important;
  }
  /* Timer block compact */
  .order-edit-compact > div:first-child > div[style*="background:var(--bg)"]{
    padding:3px 6px !important;
    gap:4px !important;
  }
  .order-edit-compact > div:first-child > div[style*="background:var(--bg)"] span[style*="font-size:15px"]{
    font-size:13px !important;
  }
  /* Tabs */
  .oe-tabs-bar{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .oe-tab{ font-size:12px !important; padding:6px 10px !important; flex-shrink:0; }
  /* Grid: single column */
  .order-edit-grid{ grid-template-columns: 1fr !important; gap:8px !important; }
  /* Cards inside order edit */
  .order-edit-compact .card{ padding:8px !important; }
  .order-edit-compact .ls-card-title{ font-size:12px !important; }
  /* Key-value grid compact */
  .order-edit-compact .ls-kv{ gap:2px 6px !important; }
  .order-edit-compact .ls-kv .k{ font-size:10px !important; }
  .order-edit-compact .ls-kv .v{ font-size:12px !important; }
  .order-edit-compact .ls-kv .v .input,
  .order-edit-compact .ls-kv .v select{
    font-size:13px !important; padding:5px 8px !important; min-height:32px !important;
  }
  /* Two-card rows: stack */
  .oe-row{ grid-template-columns:1fr !important; gap:6px !important; }
  /* Works/parts table compact */
  .oe-tbl th, .oe-tbl td{ padding:4px 4px !important; font-size:12px !important; }
  .oe-tbl-del{ font-size:11px !important; }
  /* History panel */
  .order-edit-history {
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 8px !important;
    margin-bottom: 70px !important;
  }
  .order-edit-history .hist-body{ overflow: visible !important; max-height: none !important; }
  .order-edit-history .hist-title{ font-size:13px !important; }
  /* Footer bar — sticky at bottom */
  .order-footer-bar {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    background: var(--card) !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,.12) !important;
    z-index: 9999 !important;
    border-radius: 14px 14px 0 0 !important;
  }
  /* Когда открыт sidebar или модалка — фиксированные нижние панели
     (order-footer, POS cart, FAB) не должны торчать поверх оверлеев. */
  body.mobile-nav-open .order-footer-bar,
  body.mobile-nav-open .pos-cart,
  body.mobile-nav-open .mob-fab,
  body.modal-open .order-footer-bar,
  body.modal-open .pos-cart,
  body.modal-open .mob-fab{
    display: none !important;
  }
  .order-footer-inner {
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .order-footer-inner .btn,
  .order-footer-inner .btn2{
    padding:6px 10px !important;
    font-size:12px !important;
    min-height:34px !important;
    flex:1 1 auto;
  }
  .order-edit-main { padding-bottom: 80px !important; }

  /* ── 8. НАСТРОЙКИ ── */
  .settings-layout{ grid-template-columns: 1fr !important; height: auto !important; gap:0; overflow: visible !important; }
  #settingsPane{ max-height: none !important; overflow-y: visible !important; overflow-x: hidden; }
  .settings-menu-card{
    position: relative !important; top: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    overflow-x: hidden !important;
    gap: 4px;
    max-height: none;
    padding: 6px !important;
    margin-bottom: 8px;
  }
  .settings-menu-card::-webkit-scrollbar{ display:none; }
  .st-nav-group{ display: none; }
  .st-nav-btn{
    font-size: 9px; padding: 6px 2px;
    text-align:center;
    border-radius:8px;
    display:flex; flex-direction:column; align-items:center; gap:1px;
    min-height:0; justify-content:center;
    overflow:hidden;
  }
  .st-nav-btn > span:last-child{
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    display:block;
  }
  .st-nav-ico{ position:static; transform:none; width:auto; font-size:16px; }
  .st-row, .st-row-3{ grid-template-columns: 1fr !important; }
  .st-form-grid{ gap:6px; }
  .st-form-row{ grid-template-columns:1fr !important; gap:2px; }
  .st-form-label{ padding-top:0; font-size:12px; }

  /* ── 9. Б/У УСТРОЙСТВА ── */
  /* Карточка устройства: информация в 1 колонку */
  /* Кнопки действий враппятся */

  /* ── 10. Z-INDEX: всё поверх фиксированного футера (9999) ── */
  .modal{ z-index:10000 !important; }
  .modal-box{ z-index:10001 !important; }
  #scrollTopBtn{ z-index:10000 !important; bottom:80px !important; }
  .pp-dd{ z-index:10000 !important; }
  #prodBulkBar{ z-index:10000 !important; bottom:0 !important; }
}

/* ═══ МАЛЕНЬКИЙ ТЕЛЕФОН (≤420px) ═══ */
@media (max-width: 420px) {
  .sidebar{ width: 92vw !important; max-width: 360px !important; }
  .topbar-inner{ padding: 6px 8px !important; }
  .kpi .box{ min-width: 100% !important; flex: 1 1 100%; }
  .dash-kpi{ grid-template-columns: 1fr !important; }
  .btn, .btn2 { font-size: 12px !important; padding: 8px 10px !important; }
  .card { padding: 8px !important; }
  table:not(.sch-table){ min-width:0 !important; width:100% !important; }
  /* Modals: bottom-sheet style on small screens.
     svh/dvh учитывают системную навигацию Android (85vh не учитывает,
     из-за чего кнопка внизу модалки уезжает под гестурный бар).
     padding-bottom на backdrop выталкивает модалку выше safe-area.
     Внутри модалки — минимум 40px снизу, чтобы последняя кнопка
     ("Редактировать", "Сохранить" и т.п.) была физически удобно нажимаемой. */
  .modal{
    align-items:flex-end !important; z-index:10000 !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
  }
  .modal-box {
    width: 100vw !important; height: auto !important;
    max-width: 100vw !important;
    max-height: 80svh !important;   /* fallback: small viewport */
    max-height: 80dvh !important;   /* preferred: dynamic viewport */
    border-radius: 16px 16px 0 0 !important; margin: 0 !important;
    /* padding-bottom:0 — его возьмёт на себя sticky-footer из последнего ряда кнопок */
    padding: 14px 14px 0 !important;
    z-index: 10001 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .modal-body, .modal-scroll {
    max-height: calc(65dvh) !important;
  }
  /* Последний ряд с кнопками в модалке — sticky внизу, чтобы при длинном
     контенте основная CTA ("Редактировать", "Сохранить" и т.п.) всегда
     была видна без скролла. Содержит собственный safe-area padding. */
  .modal-box > div:last-child:has(> .btn),
  .modal-box > div:last-child:has(> .btn2),
  .modal-box > .row:last-child:has(> .btn),
  .modal-box > .row:last-child:has(> .btn2){
    position: sticky;
    bottom: 0;
    margin: 12px -14px 0;
    padding: 12px 14px max(calc(14px + env(safe-area-inset-bottom, 0px)), 24px);
    background: var(--card);
    border-top: 1px solid var(--border);
    z-index: 3;
    box-shadow: 0 -6px 16px rgba(0,0,0,.08);
  }
  /* Фолбэк для браузеров без :has() — всё равно видимо через padding-bottom
     на модалке (применяется если :has() не сработал). */
  @supports not selector(:has(*)) {
    .modal-box{
      padding: 14px 14px max(calc(24px + env(safe-area-inset-bottom, 0px)), 40px) !important;
    }
  }
}

/* ═══ IPHONE SE / ОЧЕНЬ УЗКИЙ (≤380px) ═══ */
@media (max-width: 380px) {
  .input, select, textarea { font-size: 16px !important; }
  th, td { padding: 6px 4px !important; font-size: 11px !important; }
  table:not(.sch-table){ min-width:0 !important; width:100% !important; }
}

/* ═══ SAFE AREA (НОТЧ) ═══ */
@supports (padding: env(safe-area-inset-top)){
  @media (max-width: 768px){
    .topbar{ padding-top: env(safe-area-inset-top); }
    .order-footer-bar{ padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; }
    .sidebar{ padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
    .mob-bottomnav{ padding-bottom: env(safe-area-inset-bottom); }
  }
}

/* ═══ 📱 MOBILE BOTTOM NAVIGATION BAR ═══ */
.mob-bottomnav{
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  background:var(--card);
  border-top:1px solid var(--border);
  box-shadow:0 -2px 16px rgba(0,0,0,.08);
  padding:4px 0 6px;
}
@media(max-width:768px){
  /* Bottom nav HIDDEN — user navigates via sidebar */
  .mob-bottomnav{ display:none !important; }
  .content{ padding-bottom:12px !important; }
  .main.pos-mode .content{ padding-bottom:12px !important; }
  .order-footer-bar{ bottom:0 !important; }
  .msg{ bottom:80px !important; z-index:99999 !important; right:12px !important; left:12px !important; }
  .bulk-bar{ bottom:0 !important; }
}
.mob-bottomnav-btn{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px;
  padding:4px 2px;
  border:none; background:none;
  color:var(--muted);
  font-size:10px; font-weight:600;
  cursor:pointer;
  transition:color .15s;
  position:relative;
  -webkit-tap-highlight-color:transparent;
  min-height:48px;
}
.mob-bottomnav-btn .mob-bn-ico{
  font-size:20px;
  line-height:1;
  transition:transform .15s;
}
.mob-bottomnav-btn.active{
  color:var(--accent);
}
.mob-bottomnav-btn.active .mob-bn-ico{
  transform:scale(1.12);
}
.mob-bottomnav-btn .mob-bn-badge{
  position:absolute;
  top:2px; right:calc(50% - 18px);
  min-width:16px; height:16px;
  border-radius:8px;
  background:#ef4444; color:#fff;
  font-size:9px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  padding:0 4px;
  line-height:1;
}
html.theme-dark .mob-bottomnav{
  background:var(--card);
  border-top-color:rgba(255,255,255,.08);
}

/* ═══ MOBILE QUICK ACTIONS FAB ═══ */
.mob-fab{
  display:none;
  position:fixed; bottom:72px; right:14px; z-index:190;
  width:50px; height:50px;
  border-radius:14px;
  background:var(--accent); color:#fff;
  border:none;
  font-size:24px; font-weight:700;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(16,185,129,.35);
  align-items:center; justify-content:center;
  transition:transform .2s, box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.mob-fab:active{ transform:scale(.92); }
@media(max-width:768px){
  .mob-fab{ display:none !important; }
}

/* ═══ MOBILE CARD LIST MODE ═══ */
@media(max-width:768px){
  /* Improved card table mode - show as cards on mobile */
  .mob-cards table thead{ display:none; }
  .mob-cards table, .mob-cards table tbody, .mob-cards table tr, .mob-cards table td{
    display:block !important; width:100% !important; min-width:0 !important;
  }
  .mob-cards table tr{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px 12px;
    margin-bottom:8px;
    position:relative;
  }
  .mob-cards table td{
    padding:2px 0 !important;
    border:none !important;
    white-space:normal !important;
    font-size:13px !important;
  }
  .mob-cards table td:empty{ display:none !important; }
  .mob-cards table td.hide-mobile,
  .mob-cards table th.hide-mobile{ display:none !important; }
  .mob-cards table td[data-label]::before{
    content:attr(data-label);
    font-size:10px;
    color:var(--muted);
    font-weight:700;
    text-transform:uppercase;
    display:inline-block;
    min-width:80px;
    margin-right:6px;
  }
  .mob-cards table td:not([data-label])::before{ display:none; }
  .mob-cards .card{ overflow:visible !important; border:none; box-shadow:none; padding:0 !important; background:transparent; }

  /* ── Filter bars: wrap on mobile ── */
  .card > div[style*="display:flex"],
  .card > div[style*="display: flex"]{
    flex-wrap:wrap !important;
  }
  .card > div[style*="display:flex"] > select,
  .card > div[style*="display:flex"] > input[type="date"]{
    min-width:0 !important;
    flex:1 1 auto !important;
    max-width:100% !important;
  }

  /* ── Inventory: group rows span full width in mob-cards ── */
  .mob-cards table tr.groupRow td{ padding:8px 0 4px !important; font-size:13px; }

  /* ── Inventory: hide bulk bar checkbox column ── */
  .mob-cards .chk-col{ display:none !important; }

  /* ── Reports: bar chart responsive ── */
  .rp-bar{ flex-wrap:wrap; gap:4px !important; }
  .rp-bar .rp-bar-label{ width:auto !important; flex:1 1 100% !important; font-weight:600; }
  .rp-bar .rp-bar-val{ width:auto !important; }

  /* ── Reports: tables inside cards ── */
  .card table:not(.sch-table){ font-size:12px !important; }
  .card table:not(.sch-table) th, .card table:not(.sch-table) td{ padding:4px 6px !important; }

  /* ── Schedule: horizontal scroll in wrapper, week view fits screen ── */
  .sch-scroll-wrap{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  .sch-scroll-wrap .card{ overflow:visible !important; }
  .sch-table{ min-width:max-content !important; width:max-content !important; }
  /* Week view: wider columns to fill screen */
  .sch-day-col-week{ min-width:45px !important; width:auto !important; }
  .sch-day-cell-week{ padding:4px 2px !important; }
  .sch-cell-tag{ font-size:10px !important; min-width:32px !important; padding:3px 4px !important; }
  /* Hours column: hide on mobile week view to save space */
  .sch-hours-col, .sch-hours-cell, .sch-hours-sticky{ display:none !important; }

  /* ── Reports: 2-col grids → 1 col ── */
  .card > div[style*="grid-template-columns:1fr 1fr"],
  .card > div[style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns:1fr !important; }

  /* ── Modals: 2-col grids → 1 col ── */
  .modal-box div[style*="grid-template-columns:1fr 1fr"],
  .modal-box div[style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns:1fr !important; }

  /* ── View pages: stat cards min-width override ── */
  div[style*="min-width:150px"],
  div[style*="min-width: 150px"]{ min-width:calc(50% - 8px) !important; }

  /* ── View pages: tables inside cards need scroll ── */
  .card > table,
  .card > div > table{ min-width:0 !important; }
  /* Kill ALL overflow-x:auto except schedule scroll wrapper */
  div[style*="overflow-x:auto"]:not(.sch-scroll-wrap),
  div[style*="overflow-x: auto"]:not(.sch-scroll-wrap),
  div[style*="overflow:auto"]:not(.sch-scroll-wrap):not(.modal-scroll):not(.pos-cart-items){
    overflow-x:hidden !important;
  }

  /* ── Postings: header & actions layout ── */
  .pe-header{ justify-content:space-between !important; }
  .pe-fields{ flex-direction:column !important; align-items:stretch !important; gap:4px !important; }
  .pe-fields > div{ width:100% !important; min-width:0 !important; }
  .pe-actions textarea{ width:100% !important; min-width:0 !important; flex:none !important; }
  /* ── Postings: product table ── */
  .pp-table{ font-size:12px !important; border-collapse:collapse !important; }
  .pp-table thead{ display:none !important; }
  .pp-table td{ padding:0 !important; border:none !important; }
  /* Posting edit: unlock scroll on mobile */
  #mainContent > div[style*="overflow:hidden"]{ overflow:visible !important; height:auto !important; }
  #mainContent .card[style*="flex:1;min-height:0"]{ flex:none !important; min-height:auto !important; overflow:visible !important; }

  /* ── Settings: 4-col grids → 2-col ── */
  #settingsPane div[style*="repeat(4,1fr)"],
  #settingsPane div[style*="1fr 1fr 1fr 1fr"]{ grid-template-columns:1fr 1fr !important; }

  /* ── Settings: 3-col grids → 1-col ── */
  #settingsPane div[style*="repeat(3,1fr)"],
  #settingsPane div[style*="1fr 1fr 1fr;"]{ grid-template-columns:1fr !important; }

  /* ── Settings: st-row-3 (currency, form editor) → stack ── */
  .st-row-3{ grid-template-columns:1fr !important; }

  /* ── Settings: staff table → card layout on mobile ── */
  #settingsPane table thead{ display:none !important; }
  #settingsPane table,
  #settingsPane table tbody,
  #settingsPane table tr,
  #settingsPane table td{
    display:block !important; width:100% !important; min-width:0 !important;
  }
  #settingsPane table tr{
    border:1px solid var(--border); border-radius:10px;
    padding:8px 10px; margin-bottom:8px; background:var(--card);
  }
  #settingsPane table td{
    display:inline-block !important; width:auto !important;
    padding:2px 4px !important; border:none !important;
    white-space:normal !important; word-break:normal !important;
    font-size:12px !important; vertical-align:middle;
  }
  #settingsPane table td:first-child{
    display:block !important; width:100% !important;
    font-weight:700; font-size:14px !important; margin-bottom:4px;
  }
  /* Group header rows */
  #settingsPane table tr[style*="background"]{
    border:none; padding:6px 0; margin:12px 0 4px;
    background:transparent !important;
  }

  /* ── Inventory: compact filters on mobile ── */
  #invQ{ width:100% !important; flex:1 1 100% !important; font-size:14px !important; padding:8px 10px !important; }
  .content > .card > .row > .row > select.input{
    flex:1 1 calc(50% - 4px) !important; min-width:0 !important;
    font-size:13px !important; padding:6px 8px !important;
  }
  .content > .card > .row > .row > label.row{
    font-size:11px !important;
  }
  /* Action buttons: скрыть на мобильном, показывать через гамбургер */
  .content > .card > .row > .row:last-child{
    display:none !important;
  }
  /* Warehouse type tabs: компактнее */
  .content > div[style*="margin-bottom:6px"]{ gap:3px !important; }
  .content > div[style*="margin-bottom:6px"] > .btn2{
    font-size:11px !important; padding:5px 8px !important;
  }
  /* Sub-tabs: компактнее */
  .content > .card > div[style*="overflow-x:auto"] .segbtn{
    font-size:12px !important; padding:6px 10px !important;
  }
  /* Inventory card: меньше padding */
  .content > .card[style*="padding:12px"]{ padding:8px !important; }

  /* ── Dashboard: greeting + stats ── */
  .dash-header-greet{ white-space:normal !important; }
  .dash-header-stats{ flex-wrap:wrap !important; }
  .dash-greet-actions{ width:100%; }

  /* ── Dashboard: allow full scroll on mobile ── */
  .dash-wrap{ overflow:visible !important; height:auto !important; }

  /* ── Warehouse type selector: compact buttons ── */
  .content > div[style*="margin-bottom:6px"] > .btn2{
    font-size:11px !important; padding:5px 8px !important;
  }
}

/* ═══ DATA-TABLE → CARD LAYOUT ON SMALL PHONES ═══ */
@media(max-width:600px){
  table.data-table thead{ display:none; }
  table.data-table tr{
    display:block; margin-bottom:12px;
    border:1px solid var(--border); border-radius:8px; padding:12px;
  }
  table.data-table td{
    display:flex; justify-content:space-between; padding:6px 0; border:none;
  }
  table.data-table td::before{
    content:attr(data-label); font-weight:600; color:var(--muted); margin-right:8px;
  }
}

/* ═══ КАССА — МОБИЛЬНАЯ АДАПТАЦИЯ ═══ */
@media (max-width: 768px){

  /* Навигационные кнопки */
  .cash-nav-btn{
    min-height:44px !important; font-size:13px !important; padding:10px 14px !important;
  }

  /* Счета — вертикальный стек */
  .cash-accounts{
    display:flex !important; flex-direction:column !important;
    overflow-x:hidden !important; gap:8px !important;
  }
  .cash-accounts > .card{
    flex:none !important; width:100% !important; max-width:100% !important;
  }

  /* Кнопки действий в карточках счетов */
  .cash-act-btn{
    font-size:13px !important; padding:10px 14px !important;
    min-height:44px !important; min-width:44px; flex:1;
  }

  /* KPI 4 колонки → 2x2 */
  .cash-kpi{
    grid-template-columns:1fr 1fr !important; gap:8px !important;
  }

  /* Транзакции — карточный вид: доп. стили */
  .mob-cards .tx-table tr{
    display:grid !important; grid-template-columns:1fr 1fr; gap:2px 8px;
  }
  .mob-cards .tx-table td[data-label="Сумма"]{
    grid-column:1 / -1; font-size:15px !important; padding-top:4px !important;
  }
  .mob-cards .tx-table td[data-label="Дата"]{
    font-size:12px !important; opacity:.7;
  }

  /* Фильтры — сворачиваемые */
  .tx-filter-toggle{
    display:flex !important; align-items:center; gap:8px; padding:6px 0;
    font-size:14px; font-weight:600; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .tx-filter-card .tx-filter-body{ display:none !important; }
  .tx-filter-card.tx-filter-open .tx-filter-body{
    display:flex !important; flex-direction:column; gap:8px !important;
    padding-top:10px; border-top:1px solid var(--border); margin-top:8px;
  }
  .tx-filter-open .tx-filter-body .input,
  .tx-filter-open .tx-filter-body select,
  .tx-filter-open .tx-filter-body input[type="date"]{
    width:100% !important; min-width:100% !important; max-width:100% !important;
  }
  .tx-filter-open .tx-filter-body > div{ width:100%; max-width:100% !important; min-width:100% !important; }
}

/* Фильтры — скрыть toggle на десктопе */
.tx-filter-toggle{ display:none; }

/* ═══ POS — МОБИЛЬНАЯ АДАПТАЦИЯ ═══ */
@media (max-width: 768px){

  /* Табы категорий — горизонтальный скролл */
  .pos-products .tabs{
    flex-wrap:nowrap !important; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; gap:6px; padding-bottom:4px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .pos-products .tabs::-webkit-scrollbar{ display:none; }
  .pos-products .tabs .tab{
    flex:0 0 auto; scroll-snap-align:start; white-space:nowrap;
  }

  /* Поиск + локация — стекинг */
  .pos-search{
    flex-wrap:wrap !important;
    max-width:100% !important; box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .pos-search input[type="text"]{
    flex:1 1 100% !important; order:-1;
  }
  .pos-search select.input{
    flex:1 1 calc(50% - 4px) !important; min-width:0 !important; width:auto !important;
    max-width:calc(50% - 4px) !important; overflow:hidden !important; text-overflow:ellipsis !important;
  }
  /* Основной селект локации дублирует topbar .locpill — прячем на мобиле.
     Кросс-локация ("Продажа от имени другой локации") остаётся — отдельная фича. */
  .pos-search select[title="Локация продажи"]{ display:none !important; }

  /* Корзина: кнопки +/- и удаление — крупнее */
  .pos-cart-qty button{
    min-width:44px !important; min-height:44px !important;
    font-size:18px !important; border-radius:10px !important;
  }
  .pos-cart-remove{
    min-width:44px !important; min-height:44px !important;
    font-size:16px !important; border-radius:10px !important;
  }

  /* Checkout модал — крупные поля */
  .modal-box #posPaymentMethod{
    min-height:48px !important; font-size:16px !important;
  }
  .modal-box #posReceived,
  .modal-box #posMixedCash,
  .modal-box #posMixedCard{
    min-height:48px !important; font-size:18px !important; font-weight:700;
  }
  .modal-box #posCompleteBtn{
    min-height:52px !important; font-size:17px !important;
  }

  /* Модалы — sticky footer */
  .modal-footer{
    padding:12px 14px !important; background:var(--card);
    position:sticky; bottom:0; z-index:5;
    box-shadow:0 -2px 8px rgba(0,0,0,.08);
  }
  .modal-footer .btn,
  .modal-footer .btn2{
    min-height:48px !important; font-size:15px !important;
  }
}

/* ═══ ПЛАНШЕТ POS (769-1100px) ═══ */
@media (min-width: 769px) and (max-width: 1100px){
  .pos-container{ grid-template-columns: 1fr 320px !important; }
}

/* ======================================
   Schedule MOBILE — Card view (vertical list)
======================================= */
.sch-mob-card{
  border:1px solid var(--border); border-radius:12px;
  margin-bottom:10px; background:var(--card); overflow:hidden;
}
.sch-mob-header{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; background:var(--bg);
  border-bottom:1px solid var(--border);
}
.sch-mob-avatar{
  width:32px; height:32px; border-radius:50%;
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; flex-shrink:0;
}
.sch-mob-info{ flex:1; min-width:0; }
.sch-mob-fullname{ font-weight:700; font-size:14px; }
.sch-mob-role{ font-size:10px; color:var(--muted); }
.sch-mob-hours{ font-size:18px; font-weight:800; color:var(--accent); white-space:nowrap; }
.sch-mob-hours small{ font-size:11px; font-weight:400; opacity:.6; }
.sch-mob-days{ padding:0; }
.sch-mob-row{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-bottom:1px solid var(--border);
  cursor:pointer; font-size:13px;
}
.sch-mob-row:last-child{ border-bottom:none; }
.sch-mob-row:active{ background:rgba(59,130,246,.06); }
.sch-mob-rowday{
  font-weight:700; font-size:12px; color:var(--muted);
  min-width:42px; flex-shrink:0;
}
.sch-mob-loctag{
  font-size:10px; font-weight:600; padding:1px 6px;
  border-radius:6px; white-space:nowrap; margin-left:auto;
}
.sch-mob-typebadge{
  font-size:11px; font-weight:700; padding:2px 8px;
  border-radius:6px;
}
.sch-mob-weekend{ background:rgba(148,163,184,.04); }
.sch-mob-today{ background:#fff; border:2px solid #dc2626; border-radius:8px; font-weight:700; }
.sch-mob-dim{ opacity:.25; }

/* ======================================
   Schedule (Расписание сотрудников)
======================================= */
.sch-table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0}
.sch-table th,.sch-table td{padding:0;border-bottom:1px solid #f0f0f0;border-right:1px solid #f0f0f0}
.sch-table th{font-size:12px;font-weight:600;padding:8px 4px;text-align:center;background:#fafbfc;white-space:nowrap}
.sch-name-col{min-width:160px;max-width:200px;text-align:left!important;padding-left:12px!important}
.sch-hours-col{min-width:60px;text-align:center!important}
.sch-day-col{min-width:52px;width:52px}
.sch-day-num{font-size:14px;font-weight:700;line-height:1.2}
.sch-day-dow{font-size:10px;opacity:.5;text-transform:uppercase}
.sch-name-cell{padding:8px 12px!important}
.sch-hours-cell{text-align:center!important;padding:8px 6px!important}
.sch-day-cell{text-align:center;padding:3px 2px!important;cursor:pointer;transition:background .12s;vertical-align:middle;height:48px}
.sch-day-cell:hover{background:rgba(59,130,246,.06)}
.sch-weekend{background:rgba(148,163,184,.04)}
.sch-today{background:rgba(239,68,68,.08)!important}
th.sch-today{border-bottom:2px solid #ef4444}
.sch-cell-tag{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;padding:3px 6px;border-radius:6px;min-width:38px;min-height:32px;line-height:1.15}
.sch-day-col-week{min-width:120px;width:14%}
.sch-day-cell-week{text-align:center;padding:6px 4px!important;cursor:pointer;transition:background .12s;vertical-align:middle;height:56px}
.sch-day-cell-week:hover{background:rgba(59,130,246,.06)}

/* ═══ SMOOTH TOUCH SCROLLING ═══ */
.scrollable, .modal-body, .modal-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* ═══ SAFE AREA INSETS ═══ */
@media(max-width:768px){
  body {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}