/* ЦУБ — общий мобильный слой (этап 1). Справочник классов и функций — в шапке mobile.js.
   Подключение на КАЖДОЙ странице сразу после её <style>:
     <link rel="stylesheet" href="mobile.css?v=3"><script src="mobile.js?v=3" defer></script>
   Главное правило файла: всё, что меняет вид существующих страниц, лежит внутри
   @media (max-width:640px) (или (hover:none)/(pointer:coarse)) — на компьютере страницы как раньше.
   Без условий — только оформление новых элементов, которые создаёт mobile.js по вызову страницы
   (тост, подсказка по тапу, лист .m-sheet, диалоги cubPrompt/cubConfirm/cubAlert), и скрытие
   телефонных классов (.m-only, .m-desktop-hint) на компьютере.
   <html class="m-shell"> — страница сама управляет высотой и прокруткой (оболочка index.html, вход
   login.html): к ней не применяются «прокручивается вся страница» и пальцевые размеры кнопок. */

/* ───────────── 1. Поля и цели для пальца ───────────── */
@media (max-width:640px){
 html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
 /* поля не мельче 16px — иначе iPhone увеличивает экран при вводе */
 input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px!important}
 /* кнопки и поля — 44px в высоту; специфичность как у селектора по тегу, поэтому правила
    страниц с классами (.seg button…) по-прежнему сильнее. Кнопки-ссылки внутри текста (button.lnk,
    .m-inline — например, название проекта в строке задачи) — без пальцевой высоты */
 :where(html:not(.m-shell)) button:where(:not(.lnk,.m-inline)),
 :where(html:not(.m-shell)) select,
 :where(html:not(.m-shell)) input:where(:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden])){min-height:44px}
 :where(html:not(.m-shell)) textarea{min-height:88px}
 /* галочки и переключатели — 22px (сильнее правил страниц вроде .chk input{width:auto}) */
 html:not(.m-shell) input:is([type=checkbox],[type=radio]){width:22px;height:22px;min-width:22px;min-height:0;flex:none}
 /* кнопки в таблицах, на карточках задач, в переключателях — не меньше 36–40px */
 html:not(.m-shell) td button:where(:not(.lnk,.m-inline)),html:not(.m-shell) td select,
 html:not(.m-shell) td input:not([type=checkbox]):not([type=radio]){min-height:36px}
 html:not(.m-shell) .seg button{min-height:40px}
 html:not(.m-shell) .tk .acts button{min-height:36px;padding:4px 12px;font-size:13px}
}

/* ───────────── 2. Шапка страницы .top, вкладки, фильтры ───────────── */
@media (max-width:640px){
 html:not(.m-shell) .top{flex-wrap:wrap;gap:6px 8px;padding:8px 12px}
 .top h1{font-size:16px;line-height:1.25;min-width:0;overflow-wrap:anywhere}
 /* отладочный бейдж «● LIVE» и префикс «ЦУБ · » в заголовке (его оборачивает mobile.js) */
 .top .live,.m-cub{display:none!important}
 /* вкладки и чипы месяцев — в одну строку с прокруткой вбок */
 .tabs,.mchips{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden;max-width:100%;min-width:0;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
 .tabs::-webkit-scrollbar,.mchips::-webkit-scrollbar{display:none}
 .tabs>*,.mchips>*{flex:none!important;white-space:nowrap}
 .tab,.mchip{min-height:40px;display:inline-flex;align-items:center}
 /* фильтры и панели — с переносом; поле поиска — на всю ширину */
 .filters,.bar,.bar2{flex-wrap:wrap!important}
 /* по 140px и шире, сколько влезет в строку. Основа 0, а не 140px: если страница выстроила .filters
    в колонку, основа идёт в высоту — 140px растягивали бы поле вниз; так высоту даёт min-height */
 .filters>input:not([type=checkbox]):not([type=radio]),.filters>select{min-width:min(140px,100%)!important;flex:1 1 0}
 .filters>input[type=search],.filters>input[type=text],.filters>input:not([type]){flex-basis:100%}
}

/* ───────────── 3. Сетки: формы в одну колонку, KPI в две ───────────── */
@media (max-width:640px){
 .fgrid,.grid2f,.g2,.fin,.kv{grid-template-columns:minmax(0,1fr)!important}
 .pr2{flex-direction:column;gap:0}
 .pr2>div{min-width:0}
 .kpis,.edash{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 .kpis>*,.edash>*{min-width:0!important;margin:0}
 .strip{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px!important}
 .strip>*{min-width:0}
 .kpi .v,.stat .v{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere}
 .kpi .v{font-size:18px}
}

/* ───────────── 4. Прокручивается сама страница, а не внутренний блок ───────────── */
@media (max-width:640px){
 html:not(.m-shell){height:auto!important;overflow-x:hidden!important;overflow-y:auto!important}
 html:not(.m-shell) body{height:auto!important;overflow:visible!important}
 /* .page/.jwrap растут по содержимому (вниз листается страница), а слишком широкое содержимое
    по-прежнему листается вбок внутри блока — ничего не обрезается */
 html:not(.m-shell) body>:is(.page,.jwrap){flex:none!important;min-height:0!important;overflow-x:auto!important;overflow-y:visible!important}
 html:not(.m-shell) body>.wrap{flex:none!important;min-height:0!important;overflow:visible!important}
 /* .wrap с широким отчётом (ДДС, ОПиУ) — прокрутка вбок внутри блока, не всей страницы */
 html:not(.m-shell) body>.wrap:has(>table){overflow-x:auto!important;-webkit-overflow-scrolling:touch}
}
@supports not selector(:has(a)){
 @media (max-width:640px){html:not(.m-shell) body>.wrap{overflow-x:auto!important}}
}
@media (max-width:640px){
 html:not(.m-shell) .tbox{flex:none!important;min-height:0!important;max-height:none!important;-webkit-overflow-scrolling:touch}
}

/* ───────────── 5. Сенсорный экран: без ручек ширины колонок ───────────── */
@media (pointer:coarse){
 .rz{display:none!important}
}

/* ───────────── 6. Таблица → карточки: <table class="stack"> ───────────── */
/* .acc/.accf («Бухгалтерия», live_myprojects.html) раскладывает строки сам — правила ниже их не трогают
   (:where — без прибавки специфичности остальным таблицам) */
@media (max-width:640px){
 table.stack:not(:where(.acc,.accf)){display:block;width:100%!important;min-width:0!important;max-width:none!important;border:none!important;background:none!important;font-size:13.5px}
 table.stack:not(:where(.acc,.accf))>thead{display:none}
 table.stack:not(:where(.acc,.accf))>tbody,table.stack:not(:where(.acc,.accf))>tfoot{display:block}
 table.stack:not(:where(.acc,.accf))>tbody>tr,table.stack:not(:where(.acc,.accf))>tfoot>tr{display:block;position:relative;background:var(--panel,#fff);border:1px solid var(--line,#e3e6ec);border-radius:12px;padding:8px 12px;margin:0 0 8px}
 table.stack:not(:where(.acc,.accf))>tfoot>tr{background:var(--panel2,#f0f2f5)}
 table.stack:not(:where(.acc,.accf))>*>tr>:is(td,th){display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:4px 0!important;
  border:none!important;text-align:right!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
  overflow-wrap:anywhere;position:static!important;left:auto!important;min-width:0!important;max-width:none!important;width:auto!important;font-weight:inherit}
 table.stack:not(:where(.acc,.accf))>*>tr>:is(td,th)::before{content:attr(data-l);flex:none;max-width:48%;color:var(--mut,#727b8c);font-size:12px;font-weight:500;text-align:left;white-space:normal}
 table.stack:not(:where(.acc,.accf))>*>tr>:is(td,th):is(:not([data-l]),[data-l=""]){justify-content:flex-start;text-align:left!important}
 table.stack:not(:where(.acc,.accf))>*>tr>:is(td,th):is(:not([data-l]),[data-l=""])::before{content:none}
 /* первая ячейка строки — заголовок карточки (отключить: table.stack:not(:where(.acc,.accf)).stack-plain); td.m-title — заголовок явно */
 table.stack:not(:where(.acc,.accf)):not(.stack-plain)>tbody>tr>:first-child,table.stack:not(:where(.acc,.accf))>*>tr>.m-title{display:block;font-weight:650;font-size:14.5px;text-align:left!important;padding:2px 0 6px!important}
 table.stack:not(:where(.acc,.accf)):not(.stack-plain)>tbody>tr>:first-child::before,table.stack:not(:where(.acc,.accf))>*>tr>.m-title::before{content:none}
 /* td.m-act — ряд кнопок внизу карточки; td.m-hide и пустые ячейки — не показывать */
 table.stack:not(:where(.acc,.accf))>*>tr>.m-act{justify-content:flex-end;flex-wrap:wrap;gap:6px;padding-top:8px!important}
 table.stack:not(:where(.acc,.accf))>*>tr>.m-act::before{content:none}
 table.stack:not(:where(.acc,.accf))>*>tr>.m-hide,table.stack:not(:where(.acc,.accf))>*>tr>td:empty{display:none!important}
 /* строка из одной ячейки на всю ширину (colspan) — подзаголовок группы, а не карточка */
 table.stack:not(:where(.acc,.accf))>tbody>tr:has(>td:only-child[colspan]){background:none;border:none;padding:10px 2px 4px;margin:0}
 table.stack:not(:where(.acc,.accf))>tbody>tr:has(>td:only-child[colspan])>td{font-weight:650;color:var(--mut,#727b8c)}
 /* у обёртки-рамки (.tbox) карточкам не нужны рамка и фон */
 .tbox:has(>table.stack:not(:where(.acc,.accf))){border:none!important;background:none!important;border-radius:0!important;overflow:visible!important}
}

/* ───────────── 7. Числовой отчёт: закреплённая первая колонка <table class="m-stick1"> ───────────── */
@media (max-width:640px){
 table.m-stick1 :is(th,td):first-child{position:sticky;left:0;z-index:2;width:140px;min-width:120px!important;max-width:160px!important;
  white-space:normal!important;overflow-wrap:anywhere;overflow:hidden;text-overflow:clip!important;box-shadow:1px 0 0 var(--line,#e3e6ec)}
 table.m-stick1 thead th:first-child{z-index:4}
 /* фон — с нулевой специфичностью: цветные строки страницы (итоги, группы) остаются своего цвета */
 :where(table.m-stick1) :where(tbody td:first-child,tfoot td:first-child){background:var(--panel,#fff)}
 :where(table.m-stick1) :where(thead th:first-child){background:var(--panel2,#f0f2f5)}
}

/* ───────────── 8. Окна → листы на весь экран ─────────────
   Четыре вида окон ЦУБ: .ov>.modal, .mov>.modal, .drawer, .modal>.mbox (и .modal>.box в воронке).
   Шапка (первый h2/h3 окна или .m-head) закреплена сверху, ряд из одних кнопок в конце окна
   (или .m-foot) — снизу. --m-kb — высота клавиатуры над окном (её ставит mobile.js). */
@media (max-width:640px){
 /* А. .ov>.modal (журнал, месяц, личные карты, проекты, заявки, задачи) и .mov>.modal (сотрудники, мои проекты) */
 .ov.on,.mov.on{padding:0!important;align-items:stretch!important;justify-content:stretch!important;overflow:hidden!important;bottom:var(--m-kb,0px)!important}
 :is(.ov,.mov)>.modal{width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;margin:0!important;
  border-radius:0!important;box-shadow:none!important;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:0 16px 16px!important}
 /* Б. .modal>.mbox (настройки) и .modal>.box (воронка): .modal здесь — само затемнение */
 :not(.ov):not(.mov)>.modal{padding:0!important;align-items:stretch!important;justify-content:stretch!important;bottom:var(--m-kb,0px)!important}
 :not(.ov):not(.mov)>.modal>:is(.mbox,.box){width:100%!important;max-width:none!important;height:100%!important;max-height:none!important;margin:0!important;
  border-radius:0!important;box-shadow:none!important;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:0 16px 16px!important}
 /* общие шапка и низ для А и Б */
 :is(:is(.ov,.mov)>.modal,:not(.ov):not(.mov)>.modal>:is(.mbox,.box))>:first-child:not(h2,h3,.m-head){margin-top:14px}
 :is(:is(.ov,.mov)>.modal,:not(.ov):not(.mov)>.modal>:is(.mbox,.box))>:is(h2:first-child,h3:first-child,.m-head){position:sticky;top:0;z-index:5;
  margin:0 -16px 10px!important;padding:12px 16px!important;background:var(--panel,#fff);border-bottom:1px solid var(--line,#e3e6ec);font-size:16px!important}
 :is(:is(.ov,.mov)>.modal,:not(.ov):not(.mov)>.modal>:is(.mbox,.box))>:is(.m-foot,.btns:last-child,div:last-child:has(>button):not(:has(>:not(button,.sp)))){position:sticky;bottom:0;z-index:5;
  display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin:12px -16px -16px!important;padding:10px 16px!important;
  background:var(--panel,#fff);border-top:1px solid var(--line,#e3e6ec)}
 /* В. .drawer (сотрудники, контроль, проекты, мои проекты) — на всю ширину, шапка закреплена */
 .drawer{width:100%!important;max-width:none!important;border-left:none!important;box-shadow:none!important;
  top:0!important;height:auto!important;bottom:var(--m-kb,0px)!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 .drawer:not(:has(>.dhead)){padding:0 14px 20px!important}
 .drawer:not(:has(>.dhead))>:first-child:not(.dbody){position:sticky;top:0;z-index:6;margin:0 -14px 10px!important;padding:12px 14px!important;
  background:var(--panel,#fff);border-bottom:1px solid var(--line,#e3e6ec)}
 .drawer>.dhead,.drawer>.m-head{position:sticky;top:0;z-index:6}
 .drawer>.m-foot{position:sticky;bottom:0;z-index:6;background:var(--panel,#fff);border-top:1px solid var(--line,#e3e6ec);padding:10px 14px;margin:12px -14px -20px}
}

/* ───────────── 9. Лист .m-sheet (cubSheet.make, cubPrompt, cubConfirm, cubAlert) ─────────────
   Новые элементы: на компьютере — окно по центру, на телефоне — на весь экран (.m-small — шторка снизу). */
.m-sheet{position:fixed;inset:0;z-index:2147483600;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(20,26,40,.45);
 font:14px/1.4 -apple-system,Segoe UI,Roboto,sans-serif;color:var(--txt,#1c2230)}
.m-sheet.on{display:flex}
.m-sheet *{box-sizing:border-box}
.m-sheet-box{background:var(--panel,#fff);border-radius:14px;width:100%;max-width:520px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden}
.m-sheet-h{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 16px;border-bottom:1px solid var(--line,#e3e6ec);flex:none;min-height:52px}
.m-sheet-t{flex:1;min-width:0;font-weight:650;font-size:16px;overflow-wrap:anywhere}
.m-sheet-x{flex:none;width:44px;height:44px;border:none;border-radius:10px;background:none;color:var(--mut,#727b8c);font-size:20px;line-height:1;cursor:pointer;padding:0}
.m-sheet-x:active{background:var(--panel2,#f0f2f5)}
.m-sheet-b{flex:1 1 auto;min-height:0;overflow:auto;padding:14px 16px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.m-sheet-f{flex:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding:10px 16px;border-top:1px solid var(--line,#e3e6ec)}
.m-sheet .m-txt{white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 10px}
.m-sheet .m-in{display:block;width:100%;border:1px solid var(--line,#e3e6ec);border-radius:10px;padding:10px 12px;font:inherit;color:inherit;background:var(--panel,#fff)}
.m-sheet textarea.m-in{min-height:96px;resize:vertical}
.m-sheet .m-in:focus{outline:none;border-color:var(--acc,#2f6bff)}
.m-sheet .m-err{color:var(--bad,#e0455f);font-size:12.5px;margin-top:6px}
.m-sheet .m-err:empty{display:none}
.m-btn{border:1px solid var(--line,#e3e6ec);border-radius:10px;background:var(--panel,#fff);color:var(--txt,#1c2230);font:inherit;font-weight:600;padding:9px 16px;min-height:40px;cursor:pointer}
.m-btn-pri{background:var(--acc,#2f6bff);border-color:var(--acc,#2f6bff);color:#fff}
.m-btn-danger{background:var(--bad,#e0455f);border-color:var(--bad,#e0455f);color:#fff}
.m-btn-ok{background:var(--good,#12a06a);border-color:var(--good,#12a06a);color:#fff}
.m-btn:disabled{opacity:.6;cursor:default}
@media (max-width:640px){
 /* формы в листах: подпись над полем, поле на всю ширину (<div class="fld"><label>…</label><input></div>).
    Специфичность низкая (:where) — свои правила страницы сильнее */
 .m-sheet .fld{margin-bottom:12px}
 .m-sheet .fld label{display:block;color:var(--mut,#727b8c);font-size:12.5px;margin-bottom:4px}
 .m-sheet .fld :where(input:not([type=checkbox]):not([type=radio]),select,textarea){width:100%;height:auto;border-radius:10px}
 .m-sheet .fld :where(textarea){display:block;border:1px solid var(--line,#e3e6ec);padding:10px 12px;font:inherit;
  color:var(--txt,#1c2230);background:var(--panel,#fff);resize:vertical}
 /* iPhone: поле даты не сжимается до ширины колонки и вылезает за неё — без родного вида сжимается */
 .m-sheet input:is([type=date],[type=month],[type=week],[type=time],[type=datetime-local]){-webkit-appearance:none;appearance:none;min-width:0}
 .m-sheet .fld input:is([type=date],[type=month],[type=week],[type=time],[type=datetime-local]){display:block;text-align:left}
 .m-sheet{padding:0;align-items:stretch;bottom:var(--m-kb,0px)}
 .m-sheet-box{max-width:none;max-height:none;height:100%;border-radius:0;box-shadow:none}
 .m-sheet.m-small{align-items:flex-end}
 .m-sheet.m-small .m-sheet-box{height:auto;max-height:92%;border-radius:16px 16px 0 0}
 .m-sheet-f{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
 .m-sheet-f .m-btn{flex:1 1 0;min-height:48px;font-size:16px}
}

/* выпадающие списки страниц с поиском (.cbx — лист месяца, журнал, проекты; #cbxbg — затемнение под ним):
   на телефоне поверх листов .m-sheet и окон на весь экран, иначе список из окна или листа уходит под него */
@media (max-width:640px){
 .cbx{z-index:2147483606!important}
 #cbxbg.on{z-index:2147483605!important}
}

/* ───────────── 10. Тост и подсказка по тапу (создаёт mobile.js) ───────────── */
.m-toast{position:fixed;left:50%;bottom:calc(16px + var(--m-kb,0px) + env(safe-area-inset-bottom,0px));z-index:2147483610;transform:translate(-50%,16px);opacity:0;
 max-width:min(92vw,480px);background:#1f2430;color:#fff;padding:11px 16px;border-radius:12px;font:14px/1.35 -apple-system,Segoe UI,Roboto,sans-serif;
 box-shadow:0 8px 30px rgba(0,0,0,.25);transition:opacity .2s,transform .2s;pointer-events:none;white-space:pre-wrap;overflow-wrap:anywhere;text-align:center}
.m-toast.on{opacity:1;transform:translate(-50%,0)}
.m-toast.ok{background:#0e7a50}
.m-toast.err{background:#b4243d}
.m-tip{position:fixed;z-index:2147483620;display:none;max-width:min(80vw,320px);background:#1f2430;color:#fff;padding:8px 11px;border-radius:9px;
 font:13px/1.35 -apple-system,Segoe UI,Roboto,sans-serif;box-shadow:0 6px 24px rgba(0,0,0,.25);pointer-events:none;white-space:pre-wrap;overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){.m-toast{transition:none}}

/* ───────────── 11. Помощники для страниц ───────────── */
@media (min-width:641px){
 .m-only,.m-desktop-hint{display:none!important}
}
@media (max-width:640px){
 .m-hide{display:none!important}
 /* «🖥 Полная таблица — на компьютере»: пустой элемент — текст по умолчанию */
 .m-desktop-hint{display:flex;gap:8px;align-items:center;margin:8px 0;padding:9px 12px;border:1px dashed var(--line,#e3e6ec);border-radius:10px;
  background:var(--panel2,#f0f2f5);color:var(--mut,#727b8c);font-size:12.5px;line-height:1.35}
 .m-desktop-hint::before{content:"🖥";font-size:15px;flex:none}
 .m-desktop-hint:empty::after{content:"Полная таблица — на компьютере"}
 /* круглая плавающая кнопка «＋» внизу справа */
 .m-fab{position:fixed;right:16px;bottom:calc(16px + var(--m-kb,0px));z-index:30;width:56px;height:56px;min-height:0;padding:0;border:none;border-radius:50%;
  background:var(--acc,#2f6bff);color:#fff;font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(47,107,255,.4);cursor:pointer}
 /* блок с прокруткой вбок (широкая таблица целиком) */
 .m-scroll-x{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
}