/* Портал на телефоне — каркас и общие элементы (макет принят 13.10.2026).
   Файл подключается только до 760px (`media` у <link> в base.html), поэтому
   компьютер его не видит вовсе. Правила экранов — в CSS-файле своего
   раздела, под тем же порогом. */

/* --- каркас: левой колонки нет, шапка сверху, вкладки снизу ---
   Экраны с классом `cp` (обзоры, разговоры, клиенты) задают поля и сетку
   через `.cp .content` — правило сильнее `.content`, поэтому повторено. */
.app,.cp .app{display:block;min-height:100vh}
.cp .content{padding:14px 16px 24px;max-width:none}
.rail{display:none}
.main{min-height:100vh}
.top{position:sticky;top:0;z-index:20;min-height:52px;padding:6px 16px;gap:8px 10px;flex-wrap:wrap}
.top-nav{flex:1 1 auto;min-width:0;gap:8px}
.btn-back{min-height:40px;padding:0 8px 0 4px;font-size:15px;color:var(--accent);background:none;border:0}
.btn-back span{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crumbs{min-width:0;font-size:15px}
.crumbs>span,.crumbs>a{display:none}
.crumbs>.psw-chip{display:inline-flex}
.crumbs>b{display:block;font-family:var(--font-head);font-size:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-tools{flex:1 0 100%;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 4px}
.top-tools::-webkit-scrollbar{display:none}
.content{padding:14px 16px 24px;gap:16px}
body:has(.tabbar) .content{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.imp-bar{flex-wrap:wrap;gap:8px;padding:8px 16px;font-size:13px}
.imp-bar form{margin-left:0}

/* --- нижние вкладки --- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  background:var(--surface);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;
  color:var(--muted);font-size:11px;line-height:1.2;text-decoration:none;text-align:center}
.tabbar .tab svg{width:24px;height:24px;max-width:none;max-height:none}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--accent);font-weight:600}
.tab-cnt{position:absolute;top:3px;left:50%;margin-left:6px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;
  border-radius:9px;background:var(--crit);color:#fff;font-size:11px;font-style:normal;font-weight:600;line-height:18px;text-align:center}
.tab-cnt.note{background:var(--accent)}

/* --- период: переключатель листается вбок, без полосы прокрутки --- */
.seg{flex:none}
.seg a{min-height:36px;display:inline-flex;align-items:center}
.pager{flex:none}
.pager .btn{min-width:40px;min-height:36px}
.dates{flex-wrap:wrap}

/* --- шапка экрана: заголовок, пояснение и кнопки — столбиком --- */
.top-bar,.cc-head{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:12px}
.page-title,.content h1{font-size:24px;line-height:1.2;text-wrap:balance}
.page-title-row{gap:6px 10px}
.page-sub{font-size:13.5px;line-height:1.45}
.cc-tools{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.cc-tools::-webkit-scrollbar{display:none}
.cc-tools>*{flex:none;white-space:nowrap}

/* --- период: одна строка, листается вбок; свои даты — под ней --- */
.head-bar{padding:8px 0;margin-bottom:12px;gap:8px}
.period-control,.head-bar .period-control{flex-wrap:wrap;gap:8px;width:100%}
.segmented-control{max-width:100%;overflow-x:auto;scrollbar-width:none;flex:none}
.segmented-control::-webkit-scrollbar{display:none}
.period-nav{flex:none}
.seg-btn{white-space:nowrap}
.period-label span{white-space:nowrap}
form.dates{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
form.dates label{display:flex;align-items:center;gap:6px;min-width:0}
form.dates input{min-width:0;width:100%}
form.dates button{grid-column:1/-1;min-height:44px}

/* --- списки разговоров: строка таблицы → карточка в две-три строки --- */
.mc-head{display:none}
.mc-row.mc-grid{grid-template-columns:48px minmax(0,1fr) 14px;gap:3px 12px;align-items:start;padding:12px 14px}
.mc-row.mc-grid>:nth-child(1){grid-column:1;grid-row:1/span 3;align-self:center}
.mc-row.mc-grid>:nth-child(4){grid-column:2;grid-row:1}
.mc-row.mc-grid>:nth-child(2){grid-column:2;grid-row:2;justify-self:start}
.mc-row.mc-grid>:nth-child(3){grid-column:2;grid-row:2;justify-self:end;text-align:right}
.mc-row.mc-grid>:nth-child(5){grid-column:2;grid-row:3;font-size:12.5px}
.mc-row.mc-grid>:nth-child(6){grid-column:3;grid-row:1/span 3;align-self:center}
.mc-row.mc-grid .mc-when br{display:none}
.mc-row.mc-grid.with-who>:nth-child(1),.mc-row.mc-grid.with-who>:nth-child(6){grid-row:1/span 4}
.mc-row.mc-grid.with-who>:nth-child(3){grid-row:3;justify-self:start}
.mc-row.mc-grid.with-who>:nth-child(5){grid-row:4}
.mc-row.mc-grid.with-who .mc-when .mc-dur{margin-left:6px}
.mc-who{font-size:12.5px;color:var(--text-muted);display:flex;align-items:center;gap:6px;min-width:0}
.mc-name{font-size:15px}
.mc-score{width:44px;height:34px}
.mc-parts .mc-part{grid-template-columns:minmax(0,1fr) auto}
.mc-bar{gap:10px;padding:10px 0}
.mc-tabs,.mc-kind{max-width:100%;overflow-x:auto;scrollbar-width:none}
.mc-tabs::-webkit-scrollbar,.mc-kind::-webkit-scrollbar{display:none}
.mc-tab{white-space:nowrap;min-height:36px;display:inline-flex;align-items:center}
.mc-pager{flex-wrap:wrap}

/* --- звонки в кабинете оператора: та же карточка (ширины колонок стоят в style) --- */
.oc-calls .lhead{display:none}
.oc-calls .lrow{grid-template-columns:48px minmax(0,1fr) !important;gap:3px 12px;align-items:start;padding:12px 14px}
.oc-calls .lrow>:nth-child(1){grid-column:1;grid-row:1/span 3;align-self:center}
.oc-calls .lrow>:nth-child(4){grid-column:2;grid-row:1}
.oc-calls .lrow>:nth-child(2){grid-column:2;grid-row:2;justify-self:start}
.oc-calls .lrow>:nth-child(3){grid-column:2;grid-row:2;justify-self:end}
.oc-calls .lrow>:nth-child(5){grid-column:2;grid-row:3}

/* --- строки «где теряете»: подпись и процент сверху, полоса и пояснение под ними --- */
.funnel-row{grid-template-columns:minmax(0,1fr) auto !important;gap:4px 12px}
.funnel-row>.f-count{order:2}
.funnel-row>.f-bar-track{order:3;grid-column:1/-1}
.funnel-row>.lsub:last-child{order:4;grid-column:1/-1}

/* --- таблицы людей (операторы, менеджеры, планёрка): строка → карточка --- */
.ro-tw{overflow:visible}
.ro-tbl,.ro-tbl tbody,.ro-tbl td{display:block}
.ro-tbl thead{display:none}
.ro-tbl tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.ro-tbl tr:last-child{border-bottom:0}
.ro-tbl td{padding:0;border:0;text-align:left}
.ro-tbl td:first-child{grid-column:1;grid-row:1}
.ro-tbl td.ro-top{grid-column:2;grid-row:1;align-self:center;text-align:right}
.ro-tbl td:not(:first-child):not(.ro-top){grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px}
.ro-tbl td:not(:first-child):not(.ro-top){justify-content:flex-start;flex-wrap:wrap;gap:0;text-align:right}
/* Длинное значение («Презентация УТП · пропущен в 35 %…») уходит под подпись, вправо. */
.ro-tbl td:not(:first-child):not(.ro-top)>*{margin-left:auto;max-width:100%}
.ro-tbl td[data-l]::before{content:attr(data-l);color:var(--text-faint);flex:none;margin-right:auto;padding-right:12px;text-align:left}
.ro-tbl td[data-l]>*{text-align:right}

/* --- заголовок блока: название строкой, пояснение и ссылка под ним --- */
.ro-h{flex-wrap:wrap;gap:4px 12px;padding:14px 16px}
.ro-h h2{flex:1 1 100%}
.ro-h small{display:block;margin:4px 0 0;line-height:1.4}

/* --- полоса итогов (КЦ, ОП, клиенты): плитки списком — число слева,
   подпись и пояснение справа. Две узкие колонки вытягивали пояснения
   на полэкрана (живой телефон, 13.10.2026). --- */
.hstrip{flex-direction:column}
.hstrip .hcell,.hstrip.many .hcell{flex:none;display:grid;grid-template-columns:64px minmax(0,1fr);gap:2px 12px;
  padding:12px 14px 0;border-left:0;border-top:1px solid var(--border-light)}
.hstrip .hcell:first-child{border-top:0}
.hstrip .hcell:not(:has(>.hu)){padding-bottom:12px}
.hstrip .hcell>.hn{grid-column:1;grid-row:1/span 2;font-size:24px}
.hstrip .hcell>:not(.hn):not(.hu){grid-column:2}
.hstrip .hcell>.hh{margin:2px 0 0}
.hstrip .hcell>.hu{grid-column:1/-1;margin-top:10px}
.hstrip .hgap{flex:0 0 8px;border:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* --- панели и колонки: одна колонка, поля меньше --- */
.cc-cols{grid-template-columns:minmax(0,1fr);padding:14px}
.cc-side{padding-left:0;border-left:0;padding-top:16px}

/* --- широкое листается внутри своего блока, а не всей страницей --- */
.content>*,.card,section{min-width:0;max-width:100%}
.tbl{overflow-x:auto;max-width:100%}
table.adm-tbl,.card>table,.tbl-wrap>table{display:block;overflow-x:auto;max-width:100%}

/* --- общие элементы --- */
.card{padding:16px}
.portal-search-top{display:none}
.portal-search{margin-bottom:0;max-width:none}
.portal-search-controls .input{min-height:44px;font-size:16px}
.btn{min-height:40px}
audio{width:100%;max-width:100%}
/* Меньше 16 px — Safari на iPhone приближает страницу при касании поля.
   Разделы задают полям свой размер сильными селекторами, отсюда !important. */
input,select,textarea{font-size:16px!important}
.head{flex-wrap:wrap;gap:10px}

/* --- экран «Ещё» --- */
.more{display:flex;flex-direction:column;gap:18px}
.more-h{margin:0 2px 8px;font-size:13px;font-weight:500;color:var(--muted)}
.more-card{background:var(--surface);border-radius:14px}
.more-me{display:flex;align-items:center;gap:12px;padding:14px 16px}
.more-me b{display:block;font-weight:600}
.more-me small{display:block;font-size:13px;color:var(--muted)}
.more-ava{width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;
  font-family:var(--font-head);font-weight:600;font-size:17px;flex:none}
.more-list{overflow:hidden}
.more-row{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line)}
.more-row:last-child{border-bottom:0}
.more-row svg{width:20px;height:20px;color:var(--muted);flex:none}
.more-row-t{flex:1;min-width:0}
.more-row-t small{display:block;font-size:12px;color:var(--muted)}
.more-row.on{font-weight:600}
.more-tick{color:var(--accent);font-weight:700}
.more-cnt{min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;border-radius:10px;background:var(--crit);color:#fff;
  font-size:12px;font-weight:600;line-height:20px;text-align:center}
.more-cnt.note{background:var(--accent)}
.more-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.more-acts .btn,.more-acts form,.more-acts button{width:100%;min-height:48px;justify-content:center}
.more-out{color:var(--crit)}

/* --- вход и смена пароля: заставка — короткой шапкой, форма сразу под ней --- */
.login{grid-template-rows:auto 1fr}
.login .side{padding:24px 20px;gap:14px}
.login .side h1{font-size:26px;max-width:none}
.login .side p{font-size:14px}
.login .form{justify-content:flex-start;padding:28px 20px 40px}
.login .form .input,.login .form input{min-height:48px}