/* Мобильная презентация CRM. Десктоп не трогаем: правки только тут (app.css не трогать).
   Цвета — ТОЛЬКО токенами из app.css (:root + тёмный блок). Своих :root и
   @media (prefers-color-scheme: dark) здесь не заводим: токены наследуются. */

/* десктоп: таб-бар и шит спрятаны всегда (вне media — media ниже по каскаду её перебивает на мобиле) */
.tabbar,.moresheet{display:none}

/* PWA: разовая iOS-подсказка «на экран Домой» (показывается только в iOS-Safari-вкладке) */
.ios-a2hs{display:none}
@media (max-width:640px){
  .ios-a2hs{display:flex;align-items:center;gap:10px;position:fixed;left:8px;right:8px;
    bottom:calc(62px + env(safe-area-inset-bottom));z-index:60;background:var(--bar);color:var(--on-accent);
    border-radius:12px;padding:11px 14px;font-size:13.5px;line-height:1.35;
    box-shadow:0 6px 20px var(--shadow-md)}
  .ios-a2hs .ios-a2hs-x{margin-left:auto;flex:0 0 auto;opacity:.7;font-size:15px;padding:0 2px}
}

@media (max-width:640px){
  /* базовый отступ снизу под нижний таб-бар (высота ~58px + safe-area) */
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  /* защита от горизонтального оверфлоу на узких экранах */
  html,body{overflow-x:hidden;max-width:100%}

  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;
    background:var(--surface);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -1px 6px var(--shadow)}
  .tabbar .tb-i{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;min-height:54px;font-size:10.5px;color:var(--ink-2);text-decoration:none;position:relative}
  .tabbar .tb-i.active{color:var(--blue)}
  .tabbar .tb-ic{font-size:20px;line-height:1}
  .tabbar .tb-b{position:absolute;top:5px;left:calc(50% + 6px);min-width:16px;height:16px;padding:0 4px;
    box-sizing:border-box;border-radius:8px;background:var(--err-fill);color:var(--on-accent);font-size:10px;font-weight:700;
    line-height:16px;text-align:center}
  .moresheet{position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom));z-index:51;
    background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 20px var(--shadow-md);
    padding:6px;display:none}
  .moresheet.open{display:block}
  .moresheet .profitem{font-size:15px;padding:12px 14px}

  /* компактная шапка: [С] [🔎-кнопка] [аватар], сегмент-навигация уехала в таб-бар */
  header{gap:8px;padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top))}
  header .seg{display:none}                         /* сегмент-навигация уезжает в таб-бар */
  header .hsrch{display:none}                        /* поиск скрыт до раскрытия */
  header.searchopen .hsrch{display:flex;position:absolute;left:0;right:0;top:0;z-index:60;
    background:var(--surface);padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top));margin:0;
    border-bottom:1px solid var(--line)}
  .srchbtn{background:var(--btn);border:1px solid var(--line);border-radius:8px;width:38px;height:38px;
    font-size:16px;cursor:pointer;margin-left:auto}
  header .brand::before{content:"С";font-weight:800;font-size:18px;color:var(--blue)}
  header .brand .bt,header .brand .ver{display:none}
}
.srchbtn{display:none}                               /* десктоп: кнопки поиска нет */
@media (max-width:640px){.srchbtn{display:inline-flex;align-items:center;justify-content:center}}

/* Фаза 2: экранный переключатель вида — по умолчанию (десктоп) скрыт */
.viewswitch{display:none}

@media (max-width:640px){
  /* переключатель Канбан/Список над списком (те же ссылки, что у десктопного сегмента) */
  .viewswitch{display:flex;gap:6px;margin:10px 12px 0}
  .viewswitch a{flex:1;text-align:center;padding:8px 0;font-size:13px;font-weight:600;
    text-decoration:none;color:var(--ink-2);background:var(--btn);border:1px solid var(--line);border-radius:9px}
  .viewswitch a.active{color:var(--on-accent);background:var(--blue-fill);border-color:var(--blue-fill)}

  /* Список → вертикальные карточки: всю таблицу переводим в блочную раскладку
     (иначе display:table растягивает карточку по широкому контенту → оверфлоу),
     каждая строка = карточка, ячейка = «Подпись : значение» (подпись из data-l).
     min-width:0!important перебивает инлайновый style="min-width:560px" на
     вторичных таблицах дел (инлайн иначе не перебить). */
  table.lst{min-width:0!important;width:100%;box-shadow:none;background:transparent;display:block}
  table.lst thead{display:none}
  table.lst tbody{display:block;width:100%}
  table.lst tbody tr{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;
    margin:0 0 10px;padding:10px 12px;box-shadow:0 1px 3px var(--shadow)}
  /* ячейка: подпись слева, значение справа; при нехватке места значение переносится
     на след. строку (flex-wrap) — карточка НИКОГДА не шире экрана */
  table.lst tbody td{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
    gap:2px 10px;padding:5px 0;border:0;width:auto}
  table.lst tbody td::before{content:attr(data-l);font-size:11px;color:var(--mut);font-weight:600;
    text-transform:uppercase;letter-spacing:.3px;flex:0 0 auto}
  table.lst tbody td:not([data-l])::before{display:none}   /* ячейка-действие без подписи не рисует пустой лейбл */
  table.lst tbody td>*{min-width:0;max-width:100%}        /* контролы/дивы могут сжиматься */
  table.lst .stsel,table.lst .asel{max-width:100%}         /* селекты стадии/ответственного не рвут ширину */
  table.lst .nm,table.lst .cl{overflow-wrap:anywhere}      /* длинные названия/клиенты переносятся */
  table.lst .num{font-size:16px}
  .board.lview.active{padding:12px 10px 20px;overflow-x:hidden}

  /* ГЛАВНЫЙ список заказов/дел (.board.lview): подписи полей НЕ нужны — значения
     самоочевидны. Компактная карточка, пустые поля («—») скрыты. Вторичные таблицы
     дел (.sdwrap) подписи СОХРАНЯЮТ (там они помогают). */
  .board.lview table.lst tbody td::before{display:none}
  .board.lview table.lst tbody td{justify-content:flex-start;padding:2px 0}
  .board.lview table.lst tbody td.mt-empty{display:none}
  .board.lview table.lst tbody td.num{font-size:12.5px;font-weight:800;color:var(--mut);letter-spacing:.3px}
  .board.lview table.lst tbody td.nm{font-weight:700;font-size:15.5px;padding-bottom:3px}
  .board.lview table.lst tbody td.cl{color:var(--ink-2)}
  .board.lview table.lst tbody td.sum{font-weight:700;color:var(--ok-ink);font-size:15px}
  .board.lview table.lst tbody td.stg,
  .board.lview table.lst tbody td[data-l="Ответственный"]{padding:5px 0 2px}
  .board.lview table.lst tbody td.stg .stsel,
  .board.lview table.lst tbody td[data-l="Ответственный"] .asel{width:100%;max-width:100%;min-height:38px}
  .board.lview table.lst tbody td.dl{color:var(--ink-2);font-size:13px}

  /* Канбан на мобиле: колонки во всю ширину, вертикальный стек (когда открыт через .viewswitch) */
  .board.active:not(.lview){flex-direction:column;overflow-x:visible}
  .board.active:not(.lview) .col{min-width:0;max-width:none;max-height:none;width:100%;margin-bottom:12px}
}

/* Task 5: карточка сделки (.dealcard = обёртка из render/deal.py, есть и в модалке,
   и на полной странице). Реальный контейнер колонок = .grid из app.css (2 кол.).
   Панель действий .dealactions скрыта на десктопе. */
.dealactions{display:none}

@media (max-width:640px){
  /* инфо-сетки секций (управление/клиент/заказ) 2 колонки → одна */
  .dealcard .grid{grid-template-columns:1fr}
  /* денежная полоса: даём переноситься, чтобы карточки суммы не сжимались в кашу */
  .dealcard .stats{flex-wrap:wrap}
  .dealcard .stats .st{flex:1 1 45%}
  /* На мобиле НЕ используем липкую панель действий (она «приклеивалась» к экрану и
     перекрывала контент — форму коммента и т.п.). Действия остаются в теле карточки
     (стадия/ответственный/оплата/дела/комменты) в одну колонку, обычный скролл.
     .dealactions остаётся скрытым (дефолт `.dealactions{display:none}` вне media). */

  /* карточка НЕ должна ездить вправо-влево: гасим любой горизонтальный оверфлоу */
  .dealcard{overflow-x:hidden;max-width:100%}
  /* таблица товаров → карточки под палец: название на всю ширину сверху, под ним
     «Кол-во × Цена = Сумма  ✕». Десктопные <col> (80/92/96px) на мобиле душили
     колонку «Позиция» до ~58px — вместо фикс-таблицы блочная раскладка. */
  .dealcard .pe{display:block;width:100%}
  .dealcard .pe colgroup,.dealcard .pe thead{display:none}
  .dealcard .pe tbody,.dealcard .pe tfoot{display:block;width:100%}
  .dealcard .pe tr.pr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
    background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:0 0 8px}
  .dealcard .pe tr.pr td{display:flex;align-items:center;padding:0;border:0}
  .dealcard .pe tr.pr td:nth-child(1){flex:1 1 100%}          /* Позиция — вся ширина */
  .dealcard .pe tr.pr td:nth-child(1) input{width:100%;box-sizing:border-box;min-width:0;
    font-size:15px;padding:7px 9px}
  .dealcard .pe tr.pr td:nth-child(2) input,
  .dealcard .pe tr.pr td:nth-child(3) input{box-sizing:border-box;min-width:0;
    text-align:center;font-size:15px;padding:7px 4px}
  .dealcard .pe tr.pr td:nth-child(2) input{width:56px}       /* Кол-во */
  .dealcard .pe tr.pr td:nth-child(3) input{width:88px}       /* Цена */
  .dealcard .pe tr.pr td.psum{flex:1 1 auto;justify-content:flex-end;
    font-weight:700;font-size:15px;color:var(--ok-ink)}
  .dealcard .pe tr.pr td:nth-child(5){flex:0 0 auto;margin-left:2px}
  .dealcard .pe tr.pr td:nth-child(5) .del{font-size:18px;padding:4px}
  /* визуальные разделители «×» и «=» (в разметке их нет — рисуем только на мобиле) */
  .dealcard .pe tr.pr td:nth-child(3)::before{content:"×";margin-right:6px;color:var(--mut)}
  .dealcard .pe tr.pr td.psum::before{content:"=";margin-right:6px;color:var(--mut);font-weight:400}
  /* подвал: «+ добавить строку» крупной кнопкой, «Итого» — справа */
  .dealcard .pe tfoot tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:4px 2px}
  .dealcard .pe tfoot td{display:flex;padding:0;border:0}
  .dealcard .pe tfoot td:empty{display:none}
  .dealcard .pe tfoot td .plus{font-size:22px;line-height:1;padding:2px 10px}
  .dealcard .pe tfoot td.r:not(.ptot){margin-left:auto;font-weight:600}
  .dealcard .pe tfoot td.ptot{font-weight:700;font-size:16px;color:var(--ok-ink)}
  /* строка расчёта: ссылка «⚡ Расчёт» — крупный тап-таргет во всю ширину (первой строкой),
     сумма/автор/дата/кнопки переносятся под неё. Иначе на мобиле палец не попадал по ссылке. */
  .dealcard .snrow{flex-wrap:wrap;gap:2px 8px;padding:8px 0}
  .dealcard .snrow>a{flex:1 1 100%;min-height:38px;display:flex;align-items:center;font-size:15px}

  /* формы «поставить дело» / «написать коммент» (.acts .ar): на десктопе один ряд
     (app.css .ar=nowrap + инлайн-ширины 128/128px) — на телефоне 4 контрола ужимались
     до 73–96px (плейсхолдеры обрезаны, неюзабельно). Переносим и делаем крупные тач-цели:
     «что сделать»/коммент — на всю ширину; «когда»+«ответственный» делят ряд; кнопка — во всю ширину. */
  .dealcard .acts .ar{flex-wrap:wrap;gap:8px}
  .dealcard .acts .ar>input,.dealcard .acts .ar>select,.dealcard .acts .ar>.b{
    min-height:42px;font-size:15px;box-sizing:border-box}
  .dealcard #taskin,.dealcard #cmtin{flex:1 1 100%!important;min-width:0}
  /* 140px, а не 120: справа в поле теперь фоновая иконка календаря (padding-right:32px),
     и «25.06.2026» на телефонном 15px шрифте в прежнюю ширину не влезало. */
  .dealcard #taskdate{flex:0 0 auto;width:140px!important;min-width:0}
  .dealcard #taskresp{flex:1 1 auto;width:auto!important;min-width:0}
  .dealcard .acts .ar>.b{flex:1 1 100%;font-weight:600}
}

/* Task 6: раздел Авито — одна панель (список ↔ полноэкранный диалог).
   Десктоп (двух-панельный) не трогаем: всё внутри media, кроме дефолтного скрытия кнопки «назад». */
.av-back{display:none}                               /* десктоп: кнопка «‹ назад» в DOM есть, но скрыта */

@media (max-width:640px){
  /* ЛИСТ (по умолчанию, без .av-open): список на всю ширину, скроллится страницей;
     пустую правую панель (.av-empty) прячем. Тянущийся flex/height десктопа снимаем. */
  /* avito_head (десктоп: .av-wrap flex, .av-list width:340) инлайнится ПОСЛЕ mobile.css,
     поэтому перебиваем ПОВЫШЕННОЙ специфичностью: `body .av-wrap` / `.av-wrap .av-list`. */
  body .av-wrap{display:block;height:auto;overflow:visible}
  .av-wrap .av-list{width:100%;min-width:0;border-right:none;display:block;height:auto}
  .av-wrap .av-items{overflow:visible;flex:none}
  .av-wrap .av-main{display:none}
  /* строка поиска списка не вылезает */
  .av-wrap .av-search{flex-wrap:wrap}
  .av-wrap .av-search-in{flex:1 1 100%}

  /* ДИАЛОГ ОТКРЫТ (.av-open): список скрыт, диалог — на весь экран поверх таб-бара */
  .av-wrap.av-open .av-list{display:none}
  .av-wrap.av-open .av-main{display:flex;flex-direction:column;position:fixed;inset:0;z-index:70;background:var(--surface)}
  .av-wrap.av-open .av-conv{height:100%;min-height:0}
  /* порядок на мобиле: шапка → лента → суфлёр(свёрнут) → поле ввода у самого низа */
  .av-wrap.av-open .av-chead{order:0;flex-wrap:wrap;gap:6px 8px;align-items:center;
    padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top))}
  .av-wrap.av-open .av-chead-l{flex:1 1 auto;min-width:0}
  /* правый блок (ответственный/прочитано/пнуть/заказ) — на всю ширину следующей строкой,
     его контролы переносятся, ничего не разъезжается за экран */
  .av-wrap.av-open .av-orderbar{flex:1 1 100%;flex-wrap:wrap;gap:6px;justify-content:flex-start}
  .av-wrap.av-open .av-orderbar .av-assignee{flex:1 1 100%}
  .av-wrap.av-open .av-orderbar .av-assignee select{flex:1;min-width:0}
  .av-wrap.av-open .av-orderbar select{max-width:100%}
  .av-wrap.av-open .av-thread{order:1;min-height:0;padding:12px}   /* лента сжимается, а не выдавливает ввод */
  /* пузыри не шире экрана; длинные url/текст переносятся */
  .av-wrap.av-open .av-msg{max-width:90%}
  .av-wrap.av-open .av-bubble{overflow-wrap:anywhere}
  .av-wrap.av-open .avsug{order:2}
  .av-wrap.av-open .av-composer{order:3;flex-wrap:wrap;gap:8px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  /* поле ввода на всю ширину сверху, кнопки (фото/⚡/📎/Отправить) — строкой под ним */
  .av-wrap.av-open .av-composer textarea{flex:1 1 100%;order:-1;min-width:0}

  /* кнопка «‹ назад» — видна только на мобиле */
  .av-back{display:inline-flex;align-items:center;font-size:24px;line-height:1;flex:none;
    color:var(--blue);text-decoration:none;padding:2px 10px 2px 0}

  /* суфлёр = раскрывашка на всю ширину; summary снова кликабелен (десктоп его гасит) */
  .av-wrap.av-open .avsug{margin:0;border-left:none;border-right:none;border-radius:0}
  .avsug>summary{pointer-events:auto;cursor:pointer}
  /* аффорданс раскрытия (только мобила): каретка справа в хедере суфлёра, поворот при [open] */
  /* каретка берёт цвет заголовка суфлёра (он же меняется в режиме «расчёт») */
  .avsug>summary.avsug-h::after{content:"▾";margin-left:6px;font-size:12px;color:inherit;
    transition:transform .15s;display:inline-block}
  .avsug[open]>summary.avsug-h::after{transform:rotate(180deg)}
}

/* Task 7: Склад под палец + липкий итог калькулятора.
   ВАЖНО: стили склада (stock_head) инлайнятся в <head> ПОСЛЕ mobile.css, поэтому
   для перебивки нужна БОЛЬШАЯ специфичность — селекторы префиксуем `.stk-wrap`.
   У склада НЕТ таблицы-строк материалов (это плиточная сетка .stk-grid) и нет
   отдельной кнопки «Списать»: списание = «Выбрать заказ» + кол-во + тап по плитке.
   Поэтому «строки → карточки» применяем к ЕДИНСТВЕННОЙ таблице — публичному журналу
   (table.stk), а тач-цель списания (плитки + пикер + поле кол-ва) делаем крупнее. */
@media (max-width:640px){
  /* две колонки (материалы/журнал) складываются в одну (flex-wrap уже есть, фиксируем базис) */
  .stk-wrap .stk-cols{gap:14px}
  .stk-wrap .stk-left,.stk-wrap .stk-right{flex:1 1 100%}

  /* плитки материалов — крупнее под палец (тап по плитке = списать) */
  .stk-wrap .stk-tile{width:calc(33.333% - 6px);min-height:60px;padding:9px 5px 10px}
  .stk-wrap .stk-tq{font-size:21px}

  /* рабочая панель списания: пикер заказа и поле кол-ва — крупные тач-цели */
  .stk-wrap .stk-pickbtn{min-height:42px;padding:9px 14px;font-size:14px}
  .stk-wrap .stk-wbqty{min-height:42px;font-size:15px}
  .stk-wrap .stk-recv{min-height:42px}

  /* журнал (table.stk): строки → вертикальные карточки, ячейка = «Подпись : значение» */
  .stk-wrap table.stk thead{display:none}
  .stk-wrap table.stk tbody tr{display:block;background:var(--surface);border:1px solid var(--line);
    border-radius:12px;margin:0 0 10px;padding:10px 12px;box-shadow:0 1px 3px var(--shadow)}
  .stk-wrap table.stk tbody td{display:flex;justify-content:space-between;align-items:center;
    gap:10px;width:auto;padding:5px 0;border:0;text-align:right}
  .stk-wrap table.stk tbody td::before{content:attr(data-l);font-size:11px;color:var(--mut);
    font-weight:600;text-transform:uppercase;letter-spacing:.3px;flex:0 0 auto;text-align:left}
  /* пустая ячейка-действие (без data-l) не занимает отдельную «строку»-заглушку */
  .stk-wrap table.stk tbody td.stk-lact:empty{display:none}
  .stk-wrap table.stk tbody td.stk-lact{justify-content:flex-end}

  /* вкладки настроек (Представление/Telegram/Пользователи/Автопилот — 4 шт) влезают
     в ширину: равные колонки, мельче шрифт, длинные слова переносятся (иначе
     «Представление»/«Пользователи» одним словом не помещались и налезали друг на друга) */
  .stabs{gap:0;overflow-x:hidden}
  .stab{flex:1 1 0;min-width:0;padding:9px 3px;font-size:11px;text-align:center;
    line-height:1.15;overflow-wrap:anywhere;white-space:normal}

  /* калькулятор: НЕ делаем итог липким на мобиле — липкая полоса (z-index) перекрывала
     нижние контролы/кнопки сметы («на расчёт нельзя кликнуть»). Полоса остаётся в потоке
     сверху сметы (перебиваем sticky;left из app.css на static). */
  .qgrandbar{position:static}
  .cwrap{padding:10px 8px}
}