/* ===== RENTAL CRM — мобильный слой (подключается последним) ===== */
@media (max-width: 820px){

  /* контейнеры на всю ширину */
  .wrap{ max-width:100%!important; margin:12px auto!important; padding:0 14px!important; }

  /* заголовки */
  .head{ flex-direction:column!important; align-items:flex-start!important; gap:6px!important; }
  .head h1{ font-size:20px!important; }

  /* KPI: 2 в ряд */
  .kpis{ grid-template-columns:repeat(2,1fr)!important; gap:10px!important; }
  .kpi .v{ font-size:20px!important; }

  /* двухколоночные блоки -> один столбец */
  .cols{ grid-template-columns:1fr!important; gap:12px!important; }
  .panel{ padding:14px!important; }

  /* сетки-карточки: не уже экрана */
  .reqs{ grid-template-columns:1fr 1fr!important; }
  .totals{ grid-template-columns:1fr 1fr!important; }

  /* радар-полоса 14 дней -> 7 */
  .radar-strip{ grid-template-columns:repeat(7,1fr)!important; }

  /* ТАБЛИЦЫ: горизонтальный скролл вместо разрушения страницы */
  table{ display:block!important; overflow-x:auto!important; white-space:nowrap!important;
         -webkit-overflow-scrolling:touch; width:100%!important; }
  .blk{ overflow-x:auto!important; }

  /* поля ввода: 16px чтобы iOS не зумил, тач-таргет */
  input, select, textarea, button{ font-size:16px!important; }
  button, .btn, a.btn{ min-height:44px!important; }

  /* тяжёлые инлайновые ширины инпутов в таблицах ужимаем разумно */
  td input.ed{ min-width:120px; }

  /* модалки/выпадашки в край экрана */
  .results{ left:8px!important; right:8px!important; }

  /* убрать случайные горизонтальные переполнения */
  html, body{ overflow-x:hidden; }
  img{ max-width:100%; height:auto; }
}

/* совсем узкие телефоны */
@media (max-width: 380px){
  .kpis{ grid-template-columns:1fr 1fr!important; }
  .reqs, .totals{ grid-template-columns:1fr!important; }
}

/* общие правила для PWA на всех размерах */
html{ -webkit-text-size-adjust:100%; }
body{ overscroll-behavior-y:none; }

/* ===== двухпанельные страницы (Контрагенты и пр.) ===== */
@media (max-width: 820px){
  /* .wrap, который сам является гридом (список + детали) -> один столбец */
  .wrap{ display:block!important; grid-template-columns:1fr!important; }
  /* внутренние списки/карточки контрагентов */
  .list{ width:100%!important; margin-bottom:14px; }
  .list .top{ flex-wrap:wrap; }
  /* внутренний .grid 1fr 1fr -> один столбец на узких */
  .grid{ grid-template-columns:1fr!important; }
}


/* ===== формы: пары полей строго в один столбец на телефоне ===== */
@media (max-width: 820px){
  .grid{ grid-template-columns:1fr!important; }
  .grid > *{ min-width:0!important; }
  input, select, textarea{ max-width:100%!important; box-sizing:border-box!important; }
  /* кнопки внизу формы — не растягивать в строку, перенос */
  .actions, .form-actions, .btns{ flex-wrap:wrap!important; gap:8px!important; }
}


/* ===== мобильный слой v2: райдер, субаренда, поповеры (сессия зон/субаренды) ===== */
@media (max-width: 820px){

  /* --- Модалка разбора райдера (в проекте) --- */
  #riderModal > div{ max-width:100%!important; width:100%!important; margin-top:0!important;
                     border-radius:0!important; min-height:100vh; padding:16px!important; }
  #riderModal table{ font-size:12px!important; }
  /* переключатель режимов по зонам/всё — в столбик, крупные таргеты */
  #riderModal [name="riderMode"], [name="mode"]{ transform:scale(1.2); margin-right:6px; }

  /* плашка итога райдера -> в столбик */
  #riderTotal, #total{ flex-direction:column!important; align-items:flex-start!important; gap:4px!important; }

  /* поля кол-ва/ставки в строках разбора — не разбухают, но кликабельны */
  #riderRows input[type=number], #rows input[type=number]{ min-width:54px!important; width:54px!important; }

  /* --- Поповеры поиска (замена позиции, выбор подрядчика, каталог в смете) --- */
  /* фиксируем по центру снизу, во всю ширину, чтобы не вылезали за экран */
  div[style*="position:fixed"][style*="z-index:9999"],
  div[style*="position:fixed"][style*="z-index:10001"]{
    left:8px!important; right:8px!important; width:auto!important;
    max-width:none!important; top:auto!important; bottom:12px!important;
    max-height:55vh!important;
  }

  /* выпадающий выбор подрядчика в строке субаренды — на всю ширину ячейки */
  #riderRows select, #rows select{ max-width:100%!important; white-space:normal!important; }

  /* --- Отдельная страница "Райдер" --- */
  /* строка выбора проекта/файла/кнопки -> в столбик */
  .wrap .row{ flex-direction:column!important; align-items:stretch!important; gap:10px!important; }
  .wrap .row > *{ width:100%!important; }

  /* --- Каталог партнёра (страница прайса) --- */
  /* блок процента + поиск -> в столбик, на всю ширину */
  #currentPriceCard > div[style*="flex"]{ flex-direction:column!important; align-items:stretch!important; }
  #pctEdit, #priceSearch{ width:100%!important; box-sizing:border-box; }
  /* кнопки загрузки прайса -> перенос, крупные */
  .bar{ flex-wrap:wrap!important; gap:8px!important; }
  .bar > *{ flex:1 1 auto; }
  /* поле добавления позиции -> столбик */
  #currentPriceCard input{ box-sizing:border-box; }

  /* --- Аллокации субаренды в смете --- */
  .allocbox{ overflow-x:auto!important; }
  .allocrow{ flex-wrap:wrap!important; gap:6px!important; }
  .allocrow input{ min-width:64px!important; }

  /* кнопка "каталог"/"Заменить" в строках — не обрезается */
  .estrepl-btn, .hint-chip, .hint-btn{ white-space:normal!important; }
}

/* совсем узкие — таблицы разбора ещё компактнее */
@media (max-width: 380px){
  #riderModal table, #rows, #curRows{ font-size:11px!important; }
  #riderModal{ }
}