/* ===================== Мобильная версия (телефон, приложение на экране «Домой») =====================
   Как в мобильных CRM (amoCRM, Битрикс24, HubSpot): нижняя панель вкладок, «+» для быстрого создания, карточки вместо таблиц,
   звонок/WhatsApp в один тап, окна снизу («шторки»), обновление жестом вниз, крупные зоны нажатия (≥ 40 px), шрифт полей 16 px (iOS не зумит). */

/* — общее для всех размеров — */
.qacts{display:flex;gap:8px;overflow-x:auto;margin:6px 0 16px;padding-bottom:2px;scrollbar-width:none}
.qacts::-webkit-scrollbar{display:none}
.qa{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:74px;padding:10px 8px;border-radius:16px;background:var(--panel);border:1px solid var(--line);box-shadow:var(--sh);font-size:20px;color:var(--ink);text-decoration:none;flex-shrink:0}
.qa span{font-size:11.5px;font-weight:650;color:var(--ink2)}
.qa:active{transform:scale(.96)}
.doc-row{display:flex;gap:12px;align-items:center;padding:10px 10px;border-radius:12px;cursor:pointer}
.doc-row+.doc-row{border-top:1px solid var(--line)}
.doc-row:hover{background:var(--hover)}
.doc-ic{width:40px;height:40px;border-radius:12px;background:var(--accent-s);display:grid;place-items:center;font-size:20px;flex-shrink:0}
.ell{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tabbar,.tb-plus,.tb-back,.ptr{display:none}

@media (max-width:860px){
  html,body{font-size:15px;-webkit-tap-highlight-color:transparent}
  body{overscroll-behavior-y:contain}
  html,body{overflow-x:clip;max-width:100%}
  #app{grid-template-columns:minmax(0,1fr)!important}
  main{min-width:0;max-width:100vw}
  main .grid,main .g2,main .g3{min-width:0}
  main .grid>*,main .g2>*,main .g3>*{min-width:0}
  /* верхняя панель */
  .topbar{padding:calc(env(safe-area-inset-top) + 8px) 10px 8px;gap:6px;min-height:52px}
  .topbar>.btn:first-child{display:none}
  .topbar #topTitle{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:17px;font-weight:800;text-align:center}
  .topbar .tbi{width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:var(--ink);display:grid;place-items:center;flex-shrink:0;cursor:pointer}
  .topbar .tbi:active{background:rgba(118,118,128,.15)}
  .topbar .tbi svg.i{width:22px;height:22px}
  .tb-back.on{display:grid} .tb-back:not(.on){visibility:hidden;display:grid}
  .tb-plus{display:grid}
  /* нижние вкладки */
  #tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--side);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);border-top:1px solid var(--line);padding:6px 4px calc(env(safe-area-inset-bottom) + 6px)}
  #tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:650;color:var(--muted);text-decoration:none;padding:4px 0;border-radius:12px}
  #tabbar a svg.i{width:24px;height:24px}
  #tabbar a.on{color:var(--accent-d)}
  #tabbar a:active{background:rgba(118,118,128,.12)}
  main{padding:14px 12px calc(96px + env(safe-area-inset-bottom))}
  /* заголовки и кнопки: заголовок крупно, действия — лентой с прокруткой */
  h1{font-size:24px;margin-bottom:4px}
  h1 .sp{display:none}
  .h1act{display:flex;gap:8px;overflow-x:auto;margin:2px -12px 12px;padding:2px 12px 4px;scrollbar-width:none}
  .h1act::-webkit-scrollbar{display:none}
  .h1act>*{flex-shrink:0}
  .hint{font-size:12.5px;margin:0 0 10px}
  .btn{min-height:40px;padding:8px 15px;font-size:14px}
  .btn.sm{min-height:34px;padding:5px 12px;font-size:13px}
  .btn:hover,.pc:hover,.card:hover{transform:none}
  input,select,textarea{font-size:16px!important;min-height:42px}
  input[type=checkbox],input[type=radio]{min-height:0;width:20px;height:20px}
  .tbar{gap:8px;margin-bottom:12px}
  .tbar input,.tbar select{flex:1 1 100%;width:100%!important}
  .seg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex-shrink:0;white-space:nowrap}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .card{padding:15px;border-radius:16px;margin-bottom:12px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
  .kpi{padding:12px 13px} .kpi .v{font-size:19px} .kpi .l{font-size:11.5px}
  .list-row{gap:10px;flex-wrap:wrap}
  .list-row>.muted[style*="width:130px"]{width:auto!important;flex-basis:100%;font-size:12px;margin-bottom:-6px}
  /* таблицы: прокрутка вбок, первая колонка закреплена */
  .tw{border-radius:14px;-webkit-overflow-scrolling:touch}
  .tw table th,.tw table td{padding:9px 10px;font-size:13.5px}
  .tw:not(.mcards) table td:first-child,.tw:not(.mcards) table th:first-child{position:sticky;left:0;background:var(--panel);z-index:1}
  /* таблицы-списки → карточки */
  .tw.mcards{background:transparent;border:0;box-shadow:none;overflow:visible}
  .tw.mcards table,.tw.mcards tbody,.tw.mcards tfoot{display:block}
  .tw.mcards thead{display:none}
  .tw.mcards tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:10px;box-shadow:var(--sh)}
  .tw.mcards tr.click:active{transform:scale(.99)}
  .tw.mcards td{display:block;padding:0!important;border:0!important;font-size:13.5px;text-align:left!important;min-width:0}
  .tw.mcards td:first-child{grid-column:1/-1;font-size:15.5px;margin-bottom:4px}
  .tw.mcards td:not(:first-child)::before{content:attr(data-l);display:block;font-size:11px;font-weight:650;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
  .tw.mcards td:empty,.tw.mcards td.mc-empty{display:none}
  .tw.mcards tfoot tr{background:var(--accent-s)}
  /* модальные окна → шторка снизу на весь экран */
  .modal-bg{padding:0!important;align-items:flex-end}
  .modal,.modal.wide{width:100%;max-width:100%;border-radius:22px 22px 0 0;max-height:94vh;display:flex;flex-direction:column;animation:sheet .32s var(--ease)}
  @keyframes sheet{from{transform:translateY(40%);opacity:.4}}
  .mh{padding:14px 16px 8px;font-size:17px;position:relative}
  .mh::before{content:'';position:absolute;left:50%;top:6px;width:38px;height:5px;border-radius:3px;background:var(--line2);transform:translateX(-50%)}
  .mb{padding:6px 16px 16px;overflow:auto;flex:1}
  .mf{position:sticky;bottom:0;padding:10px 16px calc(env(safe-area-inset-bottom) + 10px);border-radius:0}
  .mf .btn{flex:1}
  .mf .sp{display:none}
  /* канбан проектов: колонки листаются пальцем */
  .kanban{scroll-snap-type:x mandatory;margin:0 -12px;padding:0 12px 14px;gap:10px}
  .col{min-width:84vw;width:84vw;scroll-snap-align:start;border-radius:18px}
  /* калькуляторы: сайдбары под основной частью */
  .grid.g2[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  [style*="position:sticky"]{position:static!important}
  .totbar{bottom:calc(env(safe-area-inset-bottom) + 70px)!important}
  /* «потяните вниз» */
  .ptr{display:flex;position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 58px);transform:translate(-50%,-60px);z-index:50;background:var(--panel);border-radius:20px;padding:6px 14px;box-shadow:var(--sh-h);font-size:13px;font-weight:650;transition:transform .2s}
  .ptr.show{transform:translate(-50%,0)}
  /* меню «Ещё» (боковое) — на весь рост, с отступом под вырез */
  aside{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .plusmenu{position:fixed;right:10px;top:calc(env(safe-area-inset-top) + 56px);z-index:70;background:var(--panel);border-radius:16px;box-shadow:var(--sh2);padding:6px;min-width:210px;animation:pop .2s var(--spring)}
  .plusmenu a{display:flex;gap:10px;align-items:center;padding:12px 12px;border-radius:12px;color:var(--ink);font-weight:600}
  .plusmenu a:active{background:rgba(118,118,128,.12)}
}
@media (display-mode:standalone) and (max-width:860px){ .hint{display:none} }