/* s133. МОБИЛЬНАЯ ВЕРСИЯ «КАК ПРИЛОЖЕНИЕ» — прототип 02.10.2026.
   Всё здесь действует только при классе body.m2 (его ставит mobile.js на
   экране до 860 px). Откат — убрать строки mobile.css / mobile.js из
   index.html: старый вид остаётся в коде нетронутым. */

/* ---------- Нижняя панель разделов ---------- */
#m2tabs{display:none}
body.m2 #m2tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9000;
  padding-bottom:env(safe-area-inset-bottom,0px);background:var(--bg-app,#1c1d1f);
  border-top:1px solid var(--border,#2e3134);box-shadow:0 -6px 18px rgba(0,0,0,.18)}
body.m2 #m2tabs .m2-tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
  min-height:56px;padding:7px 2px 6px;background:none;border:0;color:var(--text-muted,#8d949b);
  font:500 11px/1.1 inherit;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.m2 #m2tabs .m2-tab span.m2-l{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.m2 #m2tabs .m2-tab.on{color:var(--accent,#02AEEB)}
body.m2 #m2tabs .m2-tab svg{width:24px;height:24px}
body.m2 #m2tabs .m2-badge{position:absolute;top:3px;left:calc(50% + 5px);min-width:18px;height:18px;border-radius:9px;
  background:var(--critical,#d03b3b);color:#fff;font:700 11px/18px inherit;text-align:center;padding:0 5px;box-sizing:border-box}

/* старое меню на телефоне не нужно — его заменяет панель */
body.m2 #sidebar{display:none!important}
body.m2 #content{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))!important}

/* ---------- Шапка тоньше ---------- */
body.m2 .topbar{min-height:0!important;padding-top:max(6px,env(safe-area-inset-top))!important;padding-bottom:6px!important}
body.m2 .topbar .brand-logo{height:22px!important;width:auto!important}
body.m2 .topbar .person-picker{display:none!important}
body.m2 .topbar .role-tabs{display:none!important}

/* ---------- «Ещё»: шторка снизу ---------- */
#m2more{display:none}
body.m2 #m2more.open{display:block;position:fixed;inset:0;z-index:9500}
#m2more .m2-dim{position:absolute;inset:0;background:rgba(0,0,0,.5)}
#m2more .m2-sheet{position:absolute;left:0;right:0;bottom:0;max-height:82vh;overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--bg-app,#1f2123);border-radius:20px 20px 0 0;border-top:1px solid var(--border,#34373b);
  padding:8px 0 calc(16px + env(safe-area-inset-bottom,0px))}
#m2more .m2-grab{width:40px;height:5px;border-radius:3px;background:var(--border-strong,#4a4e53);margin:0 auto 10px}
#m2more .m2-who{display:flex;align-items:center;gap:10px;padding:4px 16px 12px;border-bottom:1px solid var(--border,#2e3134)}
#m2more .m2-who b{flex:1;min-width:0;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#m2more .m2-x{width:40px;height:40px;border-radius:20px;border:0;background:var(--surface-2,#2c2f32);color:var(--text,#f1f2f3);font-size:16px;flex:none}
#m2more .m2-gt{padding:14px 16px 4px;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted,#8d949b)}
#m2more .m2-item{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 16px;background:none;border:0;
  color:var(--text,#f1f2f3);font:500 15px inherit;text-align:left;cursor:pointer}
#m2more .m2-item.on{color:var(--accent,#02AEEB);font-weight:700}
#m2more .m2-item .m2-n{margin-left:auto;min-width:20px;height:20px;border-radius:10px;background:var(--critical,#d03b3b);color:#fff;font:700 11.5px/20px inherit;text-align:center;padding:0 6px}
#m2more .m2-foot{display:flex;gap:8px;padding:14px 16px 0;border-top:1px solid var(--border,#2e3134);margin-top:8px}
#m2more .m2-foot button{flex:1;min-height:44px;border-radius:12px;border:1px solid var(--border-strong,#3a3d41);background:transparent;color:var(--text,#f1f2f3);font:600 14px inherit}

/* ---------- Карточка дела: «Назад» всегда сверху ---------- */
body.m2 .detail-page>.modal-head,body.m2 .detail-page .modal-head:first-child{position:sticky;top:0;z-index:30;
  background:var(--bg,#161718);margin:-16px -14px 10px!important;padding:8px 10px!important;border-bottom:1px solid var(--border,#26292c)}
body.m2 #detailBackBtn{border:0!important;background:none!important;color:var(--accent,#02AEEB)!important;font-size:16px!important;font-weight:600!important;min-height:44px;padding:0 6px!important}

/* ---------- Поля ввода: 16 px, чтобы iPhone не увеличивал страницу ---------- */
body.m2 input,body.m2 select,body.m2 textarea{font-size:16px!important}

/* ---------- Дашборд: платежи строкой, а не карточкой ---------- */
body.m2 .dash-pay table tr{display:grid!important;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;
  align-items:center;padding:10px 12px!important;margin-bottom:6px!important}
body.m2 .dash-pay table td{padding:0!important;border:0!important}
body.m2 .dash-pay table td[data-label]::before{display:none!important}
body.m2 .dash-pay table td[data-label="Клиент"]{grid-column:1;grid-row:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.m2 .dash-pay table td[data-label="Срок"]{grid-column:1;grid-row:2;font-size:12.5px;color:var(--text-muted,#9aa0a6)}
body.m2 .dash-pay table td[data-label="Сумма"]{grid-column:2;grid-row:1;text-align:right;font-weight:700;white-space:nowrap}
body.m2 .dash-pay table td.dash-pay-cell,body.m2 .dash-pay table td:last-child:not([data-label]){grid-column:2;grid-row:2;justify-content:flex-end;text-align:right}
body.m2 .dash-pay table td.dash-pay-cell .mini-btn{min-height:32px!important;padding:4px 12px!important;font-size:12.5px}
body.m2 .dash-pay table tr[data-dash-pay-open]{grid-template-columns:1fr}
body.m2 .dash-pay table tr[data-dash-pay-open] td{grid-column:1!important;grid-row:auto!important}
body.m2 .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
body.m2 .stat-tile{padding:12px!important}
body.m2 .stat-tile .stat-value{font-size:19px!important}

/* ---------- Главная кнопка внизу экрана под палец ---------- */
body.m2 .tpl-actions{bottom:calc(64px + env(safe-area-inset-bottom,0px))!important}

/* ---------- Плашка «новая версия» — над панелью ---------- */
body.m2 #crmUpdateBar{bottom:calc(70px + env(safe-area-inset-bottom,0px))!important}

/* ---------- Кабинет клиента: загрузка только PDF ---------- */
.m2-pdf-how{margin:10px 0 4px;padding:12px 14px;border-radius:12px;background:var(--tint-1,rgba(255,255,255,.03));
  border:1px solid var(--border,#2e3134);font-size:13.5px;line-height:1.5}
.m2-pdf-how b{display:block;margin-bottom:4px}
.m2-pdf-how span{display:block}
.m2-pdf-err{display:block;margin-top:6px;padding:8px 10px;border-radius:10px;font-size:13px;line-height:1.45;
  color:var(--critical,#d03b3b);background:var(--critical-soft,rgba(208,59,59,.08));border:1px solid var(--critical-line,rgba(208,59,59,.35))}