/* ComDATA — фронт на дизайн-системе Dataforce (навык dataforce-design).
   Токены: foundations.md + figma-uikit-filter-components.md; каркас: COM-NAV-01 +
   «Подтверждённые размеры Navbar» (layout-navigation.md); реестр: TAB-04 / TAB-11;
   фильтры: FIL-06; выбор режима: CTL-01. Что помечено «гипотеза» — не правило
   Dataforce, а локальное решение ComDATA до подтверждения UX. */

:root{
  --surface-0:#ffffff; --surface-50:#f8fafc; --surface-100:#f1f5f9; --surface-200:#e2e8f0;
  --surface-300:#cbd5e1; --surface-400:#94a3b8; --surface-500:#64748b; --surface-600:#475569;
  --surface-700:#334155; --surface-800:#1e293b; --surface-900:#0f172a;
  --primary-50:#eff6ff; --primary-100:#dbeafe; --primary-500:#3b82f6; --primary-600:#2563eb; --primary-700:#1d4ed8;
  --success-50:#ecfdf5; --success-100:#dcfce7; --success-700:#15803d;
  --warn-50:#fffbeb; --warn-100:#fef3c7; --warn-700:#b45309;
  --danger-50:#fef2f2; --danger-100:#ffe4e6; --danger-600:#dc2626; --danger-700:#b91c1c;
  --radius-sm:4px; --radius:6px; --radius-md:8px; --radius-lg:12px; --radius-xxl:16px;
  --shadow-1:0 1px 2px 0 rgba(18,18,23,.05);
  --shadow-overlay:0 2px 4px -2px rgba(0,0,0,.1),0 4px 6px -1px rgba(0,0,0,.1);
  --shadow-dialog:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
  --nav-w:250px; --nav-w-collapsed:68px; --topbar-h:56px;
  /* совместимость со старыми классами шаблонов */
  --bg:var(--surface-100); --panel:var(--surface-0); --line:var(--surface-200);
  --text:var(--surface-700); --dim:var(--surface-500); --accent:var(--primary-600);
  --warn:var(--warn-700); --warn-bg:var(--warn-50); --stale:var(--danger-600);
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;background:var(--surface-100);color:var(--surface-700);
  font:400 14px/20px Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--primary-600);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,p{margin:0}
code{font:400 12.5px/18px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--surface-100);padding:1px 5px;border-radius:var(--radius-sm);overflow-wrap:anywhere}
.dim,.sub{color:var(--surface-500)}
.sub{font-size:13px;line-height:18px}
.nowrap{white-space:nowrap}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.stale{color:var(--danger-600);font-weight:500}
.hint{color:var(--surface-400);font-size:12px}
[hidden]{display:none!important}

/* ============ shell: navbar 250/68 + content (COM-NAV-01, реализован) ============ */
.app{display:flex;min-height:100vh}
.navbar{width:var(--nav-w);flex:0 0 var(--nav-w);position:sticky;top:0;height:100vh;overflow-y:auto;
  overflow-x:hidden;background:var(--surface-100);padding:8px 16px 20px;
  display:flex;flex-direction:column;gap:8px;transition:width .18s,flex-basis .18s,padding .18s}
.navbar .logo{height:36px;display:flex;align-items:center;padding:0 10px;flex:0 0 auto}
.navbar .logo img{display:block}
.navbar .logo .lockup{height:16px;width:auto}
.navbar .logo .mark{width:36px;height:36px;display:none}
.nav-groups{display:flex;flex-direction:column;gap:20px;margin-top:8px}
.nav-group{display:flex;flex-direction:column;gap:2px}
.nav-label{font:500 12px/16px Inter;color:var(--surface-400);padding:8px 10px;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap}
.nav-item{display:flex;align-items:center;gap:12px;min-height:36px;padding:10px;border-radius:var(--radius);
  font:400 14px/16px Inter;color:var(--surface-700);white-space:nowrap}
.nav-item:hover{background:var(--surface-50);text-decoration:none}
.nav-item.on{background:var(--primary-50);color:var(--primary-700);font-weight:500}
.nav-item .pi{font-size:16px;width:16px;height:16px;line-height:16px;color:var(--surface-500);flex:0 0 16px;text-align:center}
.nav-item.on .pi{color:var(--primary-600)}
.nav-item .count{margin-left:auto;background:var(--primary-600);color:#fff;font:500 11px/16px Inter;
  min-width:18px;padding:0 5px;border-radius:999px;text-align:center}
.nav-foot{margin-top:auto;padding-top:8px;display:flex;flex-direction:column;gap:2px}
.nav-foot .nav-item{background:transparent;border:0;width:100%;text-align:left;cursor:pointer;font-family:inherit;justify-content:flex-start;height:36px;padding:10px;color:var(--surface-700)}
.nav-foot .nav-item:hover{background:var(--surface-50)}
/* collapsed 68px: item 36×36 по центру, знак «C» вместо локапа */
.app.nav-collapsed .navbar{width:var(--nav-w-collapsed);flex-basis:var(--nav-w-collapsed);padding:8px 4px 20px;align-items:center}
/* VC-12: в свёрнутом меню полоса прокрутки сдвигала иконки на 8px от центра — прячем её */
.app.nav-collapsed .navbar{scrollbar-width:none}
.app.nav-collapsed .navbar::-webkit-scrollbar{width:0;height:0}
.app.nav-collapsed .navbar .logo{padding:0;width:36px;justify-content:center}
.app.nav-collapsed .navbar .logo .lockup{display:none}
.app.nav-collapsed .navbar .logo .mark{display:block}
.app.nav-collapsed .nav-groups,.app.nav-collapsed .nav-foot{align-self:stretch;align-items:center}
.app.nav-collapsed .nav-label{display:none}
.app.nav-collapsed .nav-item{width:36px;height:36px;padding:10px;justify-content:center;gap:0}
.app.nav-collapsed .nav-item .txt,.app.nav-collapsed .nav-item .count{display:none}
.app.nav-collapsed .nav-foot .nav-item{width:36px}
.app.nav-collapsed #collapseIcon{transform:rotate(180deg)}

.content{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--topbar-h);display:flex;align-items:center;gap:12px;padding:0 24px 0 24px;flex:0 0 auto}
.topbar .spacer{flex:1}
.btn-icon{width:32px;height:32px;border:1px solid var(--surface-200);border-radius:var(--radius);background:#fff;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--surface-600);padding:0;font-family:inherit}
.btn-icon:hover{background:var(--surface-50);color:var(--surface-900);text-decoration:none}
.btn-icon .pi{font-size:14px}
.menu-btn{display:none}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--primary-600);color:#fff;border:0;cursor:pointer;
  font:600 13px/32px Inter;text-align:center;padding:0;text-transform:uppercase}
.avatar:hover{background:var(--primary-700)}
.pop-wrap{position:relative}
.popover{position:absolute;right:0;top:40px;min-width:220px;background:#fff;border:1px solid var(--surface-200);
  border-radius:var(--radius);box-shadow:var(--shadow-overlay);padding:4px;z-index:60}
.popover .who{padding:8px 10px;border-bottom:1px solid var(--surface-100);margin-bottom:4px}
.popover .who b{display:block;color:var(--surface-900);font-weight:500}
.popover .who span{display:block;color:var(--surface-500);font-size:12px;line-height:16px;word-break:break-all}
.popover a,.popover button{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border-radius:var(--radius-md);
  color:var(--surface-700);background:none;border:0;font:inherit;cursor:pointer;text-align:left}
.popover a:hover,.popover button:hover{background:var(--surface-100);text-decoration:none}
.popover .pi{font-size:14px;color:var(--surface-500)}

/* глобальный поиск (Ctrl+K) — существующая функция ComDATA, в источниках UX не описана */
.gsearch{position:relative;width:min(420px,100%)}
.gsearch .input{width:100%;padding-left:32px;padding-right:64px}
.gsearch .pi-search{position:absolute;left:11px;top:9px;font-size:14px;color:var(--surface-500);pointer-events:none}
.gsearch .kbd{position:absolute;right:8px;top:7px;font:500 11px/16px Inter;color:var(--surface-400);
  border:1px solid var(--surface-200);border-radius:var(--radius-sm);padding:0 5px;background:#fff}
.gs-drop{position:absolute;left:0;right:0;top:38px;background:#fff;border:1px solid var(--surface-200);
  border-radius:var(--radius);box-shadow:var(--shadow-dialog);max-height:440px;overflow-y:auto;padding:4px;z-index:70}
.gs-h{font:500 12px/16px Inter;color:var(--surface-400);padding:8px 10px 4px}
.gs-drop a{display:block;padding:6px 10px;border-radius:var(--radius-md);color:var(--surface-700)}
.gs-drop a:hover{background:var(--surface-100);text-decoration:none}
.gs-sub{color:var(--surface-400);font-size:12px}
.gs-empty{padding:10px;color:var(--surface-500)}

.page{padding:4px 24px 32px;display:flex;flex-direction:column;gap:16px;max-width:1440px;width:100%}

/* ============ page header (TAB-04: белый блок 80px, заголовок слева, primary справа) ============ */
.page-header{background:#fff;border-radius:var(--radius-md);min-height:80px;padding:20px 28px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.page-header .titles{flex:1;min-width:240px}
.page-header h1{font:600 24px/28px Inter;color:var(--surface-900)}
.page-header .page-sub{margin-top:4px;color:var(--surface-500);font-size:13px;line-height:18px;max-width:80ch}
.page-header .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.page-header .back{display:inline-flex;align-items:center;gap:6px;color:var(--surface-500);font-size:13px;margin-bottom:6px}
.page-header .back .pi{font-size:12px}
/* подпись раздела в тултип у иконки info (VC-12: длинный абзац под заголовком
   сдвигал данные вниз на 16 экранах; подписи приходят из макроса page_header). */
.page-info{position:relative;display:inline-flex;align-items:center;margin-left:8px;vertical-align:middle;cursor:help}
.page-info>.pi{font-size:12px;line-height:1;color:var(--surface-400)}
.page-info:hover>.pi,.page-info:focus>.pi,.page-info:focus-within>.pi{color:var(--surface-700)}
.page-info .tip{position:absolute;left:0;top:calc(100% + 6px);width:max-content;max-width:350px;
  background:var(--surface-900);color:#fff;font:400 13px/18px Inter;padding:8px 10px;border-radius:var(--radius);
  box-shadow:var(--shadow-overlay);z-index:70;display:none;white-space:normal;text-align:left}
.page-info:hover .tip,.page-info:focus .tip,.page-info:focus-within .tip{display:block}

/* ============ карточки ============ */
.card{background:#fff;border-radius:var(--radius-md);padding:24px 28px}
.card>h2,.card-h2{font:600 16px/22px Inter;color:var(--surface-900);display:flex;align-items:center;gap:8px;margin-bottom:12px}
.card>h2 .pill{background:var(--surface-100);color:var(--surface-500);font:500 12px/20px Inter;padding:0 8px;border-radius:999px}
.card .sub{margin-bottom:10px}
.card .grid{margin:0 -28px;width:calc(100% + 56px)}
.card>.grid:last-child{margin-bottom:-24px}
.card.warn{border:1px solid var(--warn-100)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px}
.kpi{background:#fff;border-radius:var(--radius-md);padding:16px 20px}
.kpi .v{font:600 24px/28px Inter;color:var(--surface-900);font-variant-numeric:tabular-nums}
/* VC-12: дата/время в KPI — короче и одной строкой, иначе 24px рвёт её на 3 строки */
.kpi .v.when{font:600 18px/24px Inter;white-space:nowrap}
.kpi .l{color:var(--surface-500);font-size:13px;line-height:18px;margin-top:2px}
.kpi.warn .v{color:var(--danger-600)}

/* ============ реестр: единая карточка (TAB-04) с панелью действий (TAB-11) ============ */
.tcard{background:#fff;border-radius:var(--radius-md);display:flex;flex-direction:column;min-width:0}
.tcard-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:24px 28px;min-height:80px;
  border-bottom:1px solid var(--surface-200)}
.tcard-actions .grp{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tcard-actions .grp.filters{gap:8px}
.tcard-actions .right{margin-left:auto;display:flex;align-items:center;gap:8px;padding-left:12px;border-left:1px solid var(--surface-200)}
.tcard-actions .right.noborder{border:0;padding:0}
.tcard-actions .reset{font-size:13px;color:var(--surface-500);display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 6px}
.tcard-actions .reset .pi{font-size:12px}
.tcard-actions .count{color:var(--surface-500);font-size:13px}
.tcard-actions .bulk{display:flex;align-items:center;gap:8px}
/* VC-12: длинный список — своя прокрутка с закреплённой шапкой. Кадр ограничен
   по высоте, шапка таблицы залипает сверху (sticky thead ниже). Короткая таблица
   меньше max-height не скроллится и выглядит как раньше. */
.tscroll{overflow:auto;max-height:calc(100vh - 160px)}
.tscroll.tall{overflow-y:auto}
.card .tscroll{margin:0 -28px}
.card .tscroll>.grid{margin:0;width:100%}
.cols>*{min-width:0}
.tcard-bottom{height:56px;display:flex;align-items:center;justify-content:center;gap:16px;padding:0 28px;
  color:var(--surface-500);font-size:13px;border-top:1px solid var(--surface-100)}
.tcard-bottom.pager{height:auto;min-height:56px;flex-wrap:wrap;padding:12px 28px}
.pager .pages{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.pager .pages a,.pager .pages b{min-width:28px;height:28px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius);color:var(--surface-700);text-decoration:none}
.pager .pages a:hover{background:var(--surface-100)}
.pager .pages b{background:var(--surface-100);font-weight:600}
.pager .pages .gap{padding:0 4px}
.pager .sizes a{color:var(--surface-700)}
.tcard-note{padding:12px 28px 16px;color:var(--surface-500);font-size:13px;line-height:18px;border-top:1px solid var(--surface-100)}

table.grid{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.grid th{text-align:left;font:600 13px/18px Inter;color:var(--surface-500);padding:11px 14px;
  border-bottom:1px solid var(--surface-200);background:var(--surface-50);white-space:nowrap;vertical-align:bottom}
.grid th.num{text-align:right}
/* VC-12: шапка таблицы залипает при прокрутке кадра .tscroll. Разделитель —
   box-shadow, а не только border-bottom: при border-collapse рамка залипшей
   шапки местами пропадает. Фон у th уже непрозрачный (surface-50). */
.grid thead th{position:sticky;top:0;z-index:2;box-shadow:inset 0 -1px 0 var(--surface-200)}
.grid td{padding:14px;border-bottom:1px solid var(--surface-200);vertical-align:top;color:var(--surface-700);overflow-wrap:break-word}
/* break-word, а не anywhere: anywhere позволяет браузеру ужать колонку до одной буквы, и логины с почтами
   рассыпаются по вертикали; с break-word колонка не уже самого длинного слова, лишнее уходит в прокрутку .tscroll */
.grid td .btns{display:flex;flex-wrap:wrap;gap:6px}
.grid td .btns form{display:inline}
.grid th:first-child,.grid td:first-child{padding-left:28px}
.grid th:last-child,.grid td:last-child{padding-right:28px}
.grid tbody tr:hover td,.grid tr:hover td{background:var(--surface-50)}
.grid tr:last-child td{border-bottom:0}
.grid td a{color:var(--surface-900);font-weight:500}
.grid td a:hover{color:var(--primary-600);text-decoration:none}
.grid td .sub{margin-top:2px}
.grid td.summary,.summary{color:var(--surface-500);max-width:52ch;font-size:13px;line-height:18px}
.grid .sort{color:inherit;font-weight:inherit;display:inline-flex;align-items:center;gap:4px}
.grid .sort.on{color:var(--primary-600)}
.grid .sort .pi{font-size:11px}
.grid td.tiny,.grid th.tiny{width:44px;padding-right:0}
.grid td.empty{padding:40px 28px;text-align:center;color:var(--surface-500)}
.grid td.empty b{display:block;color:var(--surface-900);font-weight:600;margin-bottom:4px}
.grid td .pi.mini{font-size:12px;color:var(--surface-400)}
/* Созвоны: ширины колонок заданы, иначе таблица из семи колонок разъезжается
   и «Статус» уходит за правый край (жалоба 23.09.2026 — до неё её держал
   только горизонтальный скролл .tscroll). Длинное едет в две строки с
   многоточием, а не растягивает строку. */
table.grid.calls{table-layout:fixed}
.grid.calls .c-date{width:120px}
.grid.calls .c-dept{width:120px}
.grid.calls .c-kind{width:124px}
.grid.calls .c-company{width:140px}
.grid.calls .c-people{width:124px}
.grid.calls .c-status{width:124px}
/* в узких колонках метка переносится: у типов есть длинные названия
   («кадровое / управленческое»), и с nowrap они вылезали за колонку */
.grid.calls td.c-kind .tag,.grid.calls td.c-status .tag,.grid.calls td.c-status .badge{white-space:normal}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* узкий рабочий стол: отдел и участники уходят, иначе на название созвона
   не остаётся ширины — а строку узнают именно по названию. Ниже 900px
   таблица и так превращается в карточки, там видно всё. */
@media (min-width:901px) and (max-width:1320px){
  .grid.calls .c-dept,.grid.calls .c-people{display:none}
}

/* дельты в таблицах */
.up{color:var(--success-700)}.down{color:var(--danger-600)}

/* пустые состояния (TAB-04: first-use и no-results различаются) */
.empty-state{padding:48px 28px;text-align:center}
.empty-state b{display:block;font:600 16px/22px Inter;color:var(--surface-900);margin-bottom:4px}
.empty-state p{color:var(--surface-500);max-width:52ch;margin:0 auto 12px}
.empty{color:var(--surface-500);padding:12px 0}

/* ============ controls: 32px, radius 6 (UI-kit) ============ */
.input,input:not([type]),input[type=text],input[type=url],input[type=tel],input[type=number],input[type=search],input[type=email],input[type=password],input[type=date],input[type=file],select,textarea{
  height:32px;padding:5px 11px;border:1px solid var(--surface-300);border-radius:var(--radius);
  font:400 14px/20px Inter;color:var(--surface-700);background:#fff;max-width:100%}
input[type=search]{-webkit-appearance:none;appearance:none}
input::placeholder,textarea::placeholder{color:var(--surface-400)}
input:hover,select:hover,textarea:hover{border-color:var(--surface-400)}
input:focus,select:focus,textarea:focus,.input:focus{outline:none;border-color:var(--primary-600);box-shadow:0 0 0 1px var(--primary-600)}
input[type=file]{padding:4px 8px;height:auto;box-shadow:none;border-style:dashed;background:var(--surface-50)}
textarea{height:auto;min-height:72px;resize:vertical}
select{padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;-webkit-appearance:none;appearance:none}
input[type=checkbox],input[type=radio]{width:16px;height:16px;margin:0;accent-color:var(--primary-600);vertical-align:-3px;box-shadow:none;height:16px}
.search{width:300px;max-width:100%}
.ifield{position:relative;display:inline-block}
.ifield .pi{position:absolute;left:11px;top:9px;font-size:14px;color:var(--surface-500);pointer-events:none}
.ifield input{padding-left:32px;width:300px;max-width:100%}

button,.btn{height:32px;padding:6px 11px;border-radius:var(--radius);border:1px solid transparent;font:500 14px/18px Inter;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;background:var(--primary-600);color:#fff;white-space:nowrap}
button:hover,.btn:hover{background:var(--primary-700);text-decoration:none;color:#fff}
button.secondary,.btn.secondary,button.ghost{background:var(--surface-100);color:var(--surface-600)}
button.secondary:hover,.btn.secondary:hover,button.ghost:hover{background:var(--surface-200);color:var(--surface-700)}
button.outlined,.btn.outlined{background:#fff;color:var(--surface-700);border-color:var(--surface-200)}
button.outlined:hover,.btn.outlined:hover{background:var(--surface-50);color:var(--surface-900)}
button.danger,.btn.danger{background:#fff;color:var(--danger-600);border-color:var(--surface-200)}
button.danger:hover{background:var(--danger-50);color:var(--danger-700)}
button.link{background:none;color:var(--primary-600);padding:0;height:auto}
button.link:hover{background:none;text-decoration:underline;color:var(--primary-700)}
button:disabled{opacity:.5;cursor:default}
.btn .pi,button .pi{font-size:14px}

/* ============ filter select (FIL-06, утверждён; для чатов ComDATA — подтверждён 01.09) ============ */
.fsel{position:relative;display:inline-block}
.fsel-trigger{display:inline-flex;align-items:center;height:32px;padding:0 0 0 10px;border:1px solid var(--surface-300);
  border-radius:var(--radius);background:#fff;font:400 14px/20px Inter;color:var(--surface-500);cursor:pointer;max-width:320px;box-shadow:none}
.fsel-trigger:hover{border-color:var(--surface-400);background:#fff}
.fsel.open .fsel-trigger,.fsel-trigger:focus-visible{border-color:var(--primary-600);box-shadow:0 0 0 1px var(--primary-600);outline:none}
.fsel-trigger .lbl{color:var(--surface-500);white-space:nowrap}
.fsel-trigger .val{color:var(--surface-700);margin-left:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsel-trigger .clr{display:none;width:20px;height:30px;align-items:center;justify-content:center;color:var(--surface-400);font-size:14px;margin-left:6px}
.fsel-trigger .clr:hover{color:var(--surface-700)}
.fsel.has-value .fsel-trigger .clr{display:inline-flex}
.fsel.has-value .fsel-trigger .lbl::after{content:":"}
.fsel-trigger .chev{width:36px;height:30px;display:inline-flex;align-items:center;justify-content:center;color:var(--surface-500);font-size:14px}
.fsel-menu{display:none;position:absolute;left:0;top:calc(100% + 4px);min-width:100%;width:max-content;max-width:300px;z-index:50;
  background:#fff;border:1px solid var(--surface-200);border-radius:var(--radius);padding:4px;box-shadow:var(--shadow-overlay)}
.fsel.open .fsel-menu{display:block}
.fsel-menu .list{max-height:350px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.fsel-opt{display:flex;align-items:flex-start;gap:8px;min-height:32px;padding:6px 10px;border-radius:var(--radius-md);
  font:400 14px/20px Inter;color:var(--surface-700);cursor:pointer;margin:0}
.fsel-opt:hover{background:var(--surface-100)}
.fsel-opt.sel{background:var(--primary-50);color:var(--primary-700)}
.fsel-opt input{margin-top:2px;flex:0 0 16px}
.fsel-opt .n{margin-left:auto;color:var(--surface-400);font-size:12px;padding-left:8px}
.fsel-opt.sel .n{color:var(--primary-600)}
.fsel-menu .apply{display:flex;justify-content:flex-end;gap:8px;padding:6px 6px 2px;border-top:1px solid var(--surface-100);margin-top:4px}

/* SelectButton (CTL-01, утверждён для 2–4 опций) — вкладки области выборки */
.segbtn{display:inline-flex;background:var(--surface-100);border-radius:var(--radius-md);padding:3px;height:32px;gap:2px}
.segbtn a,.segbtn button{display:inline-flex;align-items:center;gap:6px;padding:0 10px;border-radius:var(--radius);border:0;
  background:transparent;font:500 14px/26px Inter;color:var(--surface-500);height:26px;cursor:pointer;white-space:nowrap}
.segbtn a:hover,.segbtn button:hover{color:var(--surface-700);text-decoration:none;background:transparent}
.segbtn a.on,.segbtn button.on{background:#fff;color:var(--surface-900);box-shadow:var(--shadow-1)}
.segbtn .pill{font:500 11px/16px Inter;background:var(--surface-200);color:var(--surface-600);padding:0 5px;border-radius:999px;min-width:18px;text-align:center}
.segbtn a.on .pill{background:var(--primary-50);color:var(--primary-700)}

/* вкладки локальной навигации (NAV-02, гипотеза) */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--surface-200);overflow-x:auto;overflow-y:hidden;
  margin:0 -28px;padding:0 28px;scrollbar-width:thin}
.tabs a,.tabs button{padding:12px 14px;font:500 14px/18px Inter;color:var(--surface-500);border:0;border-bottom:2px solid transparent;
  background:none;white-space:nowrap;margin-bottom:-1px;cursor:pointer;height:auto;border-radius:0;display:inline-flex;gap:6px;align-items:center}
.tabs a:hover,.tabs button:hover{color:var(--surface-700);text-decoration:none;background:none}
.tabs a.on,.tabs button.on{color:var(--primary-600);border-bottom-color:var(--primary-600)}
.tabs .pill{font:500 11px/16px Inter;background:var(--surface-100);color:var(--surface-500);padding:0 5px;border-radius:999px;min-width:18px;text-align:center}
.tabs a.on .pill,.tabs button.on .pill{background:var(--primary-50);color:var(--primary-700)}
.tabpanel{padding-top:16px}
/* VC-12: карточка компании — 12+ вкладок не помещались в одну строку и давали
   горизонтальную полосу прокрутки. .wrap разворачивает их на нужное число строк,
   видны все сразу; на остальных экранах вкладки по-прежнему в одну строку со скроллом. */
.tabs.wrap{flex-wrap:wrap;overflow:visible;row-gap:2px}

/* ============ теги и бейджи (PltTag) ============ */
.tag,.badge{display:inline-flex;align-items:center;gap:4px;min-height:22px;padding:1px 8px;border-radius:var(--radius);
  font:500 12px/18px Inter;background:var(--surface-100);color:var(--surface-600);vertical-align:middle;margin:0 4px 2px 0;white-space:nowrap}
.tag.success,.badge.pub,.badge.mark-ltv{background:var(--success-100);color:var(--success-700)}
.tag.info{background:var(--primary-50);color:var(--primary-700)}
.tag.warn,.badge.warn{background:var(--warn-100);color:var(--warn-700)}
.tag.danger,.badge.mark-otval{background:var(--danger-100);color:var(--danger-700)}
.badge.draft{background:transparent;border:1px dashed var(--surface-300);color:var(--surface-500)}
.badge.manual{background:transparent;border:1px dashed var(--surface-300);color:var(--surface-600)}
.badge.mark-sales{background:var(--surface-100);color:var(--surface-600)}
.rel{font-weight:500}
.rel-client{color:var(--success-700)}.rel-lead{color:var(--primary-600)}.rel-partner{color:#7c3aed}
.rel-vendor{color:var(--warn-700)}.rel-internal,.rel-personal,.rel-noise{color:var(--surface-500)}.rel-candidate{color:#0891b2}

/* ============ полоса «смотреть как» (владелец глазами участника) ============ */
.viewas{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 24px;background:var(--warn-100);color:var(--warn-700);
  border-bottom:1px solid var(--warn-100);font-size:13px;line-height:18px;flex:0 0 auto}
.viewas .pi{font-size:15px}
.viewas a{color:inherit;text-decoration:underline;font-weight:500;margin-left:auto;white-space:nowrap}

/* ============ сообщения (PltMessage) ============ */
.notice,.msg-box{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:var(--radius-md);
  background:var(--warn-50);color:var(--warn-700);border:1px solid var(--warn-100);font-size:14px;line-height:20px}
.notice .pi,.msg-box .pi{font-size:16px;margin-top:2px;flex:0 0 auto}
.notice a{color:inherit;text-decoration:underline;font-weight:500}
.notice.info,.notice.private{background:var(--primary-50);color:var(--primary-700);border-color:var(--primary-100)}
.notice.success{background:var(--success-50);color:var(--success-700);border-color:var(--success-100)}
.notice.danger{background:var(--danger-50);color:var(--danger-700);border-color:var(--danger-100)}

/* ============ формы ============ */
form.stack{display:flex;flex-direction:column;gap:14px;max-width:520px}
.field{display:flex;flex-direction:column;gap:6px}
.field>span,form label{font:500 13px/18px Inter;color:var(--surface-700)}
.field .help{font-weight:400;color:var(--surface-500);font-size:12.5px;line-height:17px}
form label{display:block;margin-bottom:12px}
form label input,form label select,form label textarea{display:block;margin-top:6px;width:100%;max-width:420px;font-weight:400}
label.chk{display:flex;gap:8px;align-items:flex-start;font-weight:400;color:var(--surface-700);max-width:640px;margin:0 0 8px}
label.chk input{flex:0 0 16px;margin-top:2px;width:16px}
fieldset{border:1px solid var(--surface-200);border-radius:var(--radius-md);margin:0 0 14px;padding:10px 14px 4px}
legend{font:500 12px/16px Inter;color:var(--surface-500);padding:0 4px}
form.inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
form.inline label{margin:0}
.dept-pick{position:relative}
.dept-pick>summary{list-style:none;cursor:pointer}
.dept-pick>summary::-webkit-details-marker{display:none}
.dept-pick-menu{position:absolute;z-index:20;left:0;top:calc(100% + 4px);min-width:16rem;padding:6px;background:#fff;border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,.12);border:1px solid var(--surface-200)}
.dept-pick-menu label{display:flex;align-items:center;gap:8px;margin:0;padding:6px 10px;border-radius:var(--radius);white-space:nowrap;font-weight:400;cursor:pointer}
.dept-pick-menu label:hover{background:var(--surface-100)}
.dept-pick-menu input{flex:0 0 16px}
form.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bulkbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bulkbar label{margin:0}
.tcard-actions .bulk label{white-space:nowrap}

/* ============ раскрывашки, цитаты, переписка ============ */
details.postmit>summary,details.report-peek>summary{cursor:pointer;color:var(--primary-600);list-style:none;display:flex;align-items:baseline;gap:8px}
details.trash{margin-top:16px}details.trash>summary{cursor:pointer;padding:12px 16px;color:var(--surface-600);font-weight:500}details.trash>.sub{padding:0 16px 8px}
details.postmit>summary::-webkit-details-marker,details.report-peek>summary::-webkit-details-marker{display:none}
details.postmit>summary::before,details.report-peek>summary::before{content:'\e901';font-family:primeicons;font-size:11px;color:var(--surface-400);transition:transform .15s}
details.postmit[open]>summary::before,details.report-peek[open]>summary::before{transform:rotate(90deg)}
details.postmit>summary:hover,details.report-peek>summary:hover{text-decoration:underline}
details.postmit>summary .hint,details.report-peek>summary .hint{text-decoration:none}
details.postmit pre{white-space:pre-wrap;font:inherit;font-size:13px;line-height:19px;margin:8px 0;color:var(--surface-700)}
blockquote{margin:0 0 12px;padding:12px 16px;border-left:3px solid var(--primary-600);background:var(--surface-50);border-radius:0 var(--radius-md) var(--radius-md) 0}
.next{margin:0 0 16px}
.thread{max-height:560px;overflow:auto;display:flex;flex-direction:column;gap:10px}
.msg{max-width:78%}
.msg.out{margin-left:auto}
.msg.anchor .body{outline:2px solid var(--primary-color,#2563eb);outline-offset:2px;border-radius:6px}
.msg .meta{font-size:11px;line-height:16px;color:var(--surface-500);margin-bottom:2px}
.msg .body{padding:8px 12px;border-radius:10px;background:var(--surface-100);white-space:pre-wrap;word-break:break-word}
.msg.out .body{background:var(--primary-600);color:#fff}
.msg.out .meta{text-align:right}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 24px}
.facts .f b{display:block;font:500 12px/16px Inter;color:var(--surface-500);text-transform:none}
.facts .f span{color:var(--surface-900)}
.prose p{margin:0 0 10px;max-width:80ch}
.prose ul,.prose ol{margin:0 0 10px;padding-left:20px}
.prose li{margin-bottom:4px}
.prose h2{font:600 16px/22px Inter;color:var(--surface-900);margin:18px 0 8px}
.prose h2:first-child{margin-top:0}

/* ============ вход (COM-AUTH-01/02) ============ */
body.auth{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}
.auth-card{background:#fff;border-radius:var(--radius-xxl);padding:40px;width:400px;max-width:100%;box-shadow:var(--shadow-1)}
.auth-card .lockup{display:block;width:80%;max-width:288px;height:auto;margin:0 0 28px}
.auth-card h1{font:600 20px/26px Inter;color:var(--surface-900);margin-bottom:4px}
.auth-card .sub{margin-bottom:20px}
.auth-card .field{margin-bottom:14px}
.auth-card input{width:100%}
.auth-card .pw{position:relative}
.auth-card .pw input{padding-right:36px}
.auth-card .pw .eye{position:absolute;right:0;top:0;width:36px;height:32px;background:none;border:0;color:var(--surface-500);cursor:pointer;padding:0}
.auth-card .pw .eye:hover{color:var(--surface-900);background:none}
.auth-card button.submit{width:100%;margin-top:6px}
.auth-card .helper{margin-top:18px;color:var(--surface-500);font-size:13px;line-height:18px}
.auth-card .error{background:var(--danger-50);color:var(--danger-700);border:1px solid var(--danger-100);border-radius:var(--radius);padding:8px 12px;margin-bottom:12px;font-size:13px}
.auth-card .ok{background:var(--success-50);color:var(--success-700);border:1px solid var(--success-100);border-radius:var(--radius);padding:10px 12px;font-size:14px;line-height:20px}
.hp{position:absolute;left:-9999px}

/* ============ мобильный viewport — гипотеза COM-MOB-01/02/03 ============ */
.scrim{position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:80;display:none}
.scrim.open{display:block}
@media (max-width:900px){
  .app{display:block}
  .navbar{position:fixed;left:0;top:0;bottom:0;height:100vh;z-index:90;width:280px;flex-basis:280px;background:#fff;
    transform:translateX(-105%);transition:transform .2s;padding:8px 16px 20px;box-shadow:var(--shadow-dialog)}
  .navbar.open{transform:none}
  .app.nav-collapsed .navbar{width:280px;padding:8px 16px 20px;align-items:stretch}
  .app.nav-collapsed .navbar .logo .lockup{display:block}
  .app.nav-collapsed .navbar .logo .mark{display:none}
  .app.nav-collapsed .nav-label{height:auto;padding:8px 10px}
  .app.nav-collapsed .nav-item{width:auto;height:auto;justify-content:flex-start;gap:12px}
  .app.nav-collapsed .nav-item .txt,.app.nav-collapsed .nav-item .count{display:inline}
  .nav-foot .collapse{display:none}
  .menu-btn{display:inline-flex}
  .topbar{position:sticky;top:0;z-index:40;background:var(--surface-100);padding:0 16px}
  .page{padding:4px 12px 24px}
  .page-header{padding:16px}
  .page-header h1{font-size:20px;line-height:26px}
  .card,.tcard-actions{padding:16px}
  .card .grid{margin:0 -16px;width:calc(100% + 32px)}
  .card .tscroll{margin:0 -16px}
  .card .tscroll>.grid{margin:0;width:100%}
  .tcard-actions .right{margin-left:0;padding-left:0;border:0}
  .segbtn{flex-wrap:wrap;height:auto;max-width:100%}
  .tcard-actions .bulk{flex-wrap:wrap}
  .tabs{margin:0 -16px;padding:0 16px}
  .grid th:first-child,.grid td:first-child{padding-left:16px}
  .grid th:last-child,.grid td:last-child{padding-right:16px}
  /* подписанные карточки строк вместо колонок (COM-MOB-02) — только где проставлены data-label */
  table.grid.cards thead{display:none}
  table.grid.cards,table.grid.cards tbody,table.grid.cards tr,table.grid.cards td{display:block;width:100%}
  table.grid.cards tr{border-bottom:1px solid var(--surface-200);padding:10px 16px}
  table.grid.cards tr:hover td{background:transparent}
  table.grid.cards td{border:0;padding:4px 0 4px 118px;text-align:left;position:relative;min-height:28px}
  table.grid.cards td.num{text-align:left;white-space:normal}
  table.grid.cards td.tiny{width:auto}
  table.grid.cards td[data-label]::before{content:attr(data-label);color:var(--surface-500);font-size:12px;line-height:20px;position:absolute;left:0;top:4px;width:110px}
  table.grid.cards td:not([data-label]){padding-left:0}
  table.grid.cards td.summary{max-width:none}
  /* карточки: колонок нет, ширины и обрезка сняты — иначе ширина колонки
     остаётся на блоке, и текст встаёт в столбик по букве */
  table.grid.calls{table-layout:auto}
  table.grid.cards td[class*="c-"]{width:100%}
  table.grid.cards .clamp2{display:block;overflow:visible}
  table.grid.cards td.empty{display:block;text-align:center}
  .search,.ifield input{width:100%}
  .fsel,.fsel-trigger{max-width:100%}
  .cols{grid-template-columns:1fr}
  .auth-card{padding:28px 20px}
}
/* --- готовые запросы к Клоду: вкладка на /skills и блок «Спросить у Клода» --- */
.prompts .pfind{flex:1;min-width:220px;padding:9px 12px;border:1px solid var(--surface-200);
  border-radius:var(--radius);font:400 14px/18px Inter;color:var(--surface-700);background:var(--surface-0)}
.prompts .pfind:focus{outline:none;border-color:var(--primary-600);box-shadow:0 0 0 3px var(--primary-50)}
.prow{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
  padding:11px 14px;border:1px solid var(--surface-200);border-radius:var(--radius-md);
  background:var(--surface-50);margin-bottom:7px}
.prow .ptext{font:400 14px/20px Inter;color:var(--surface-800,var(--surface-700))}
.prow .pwhy{display:block;margin-top:3px;font-size:12.5px}
.slot{font-weight:600;color:var(--primary-600)}
.btn-copy{flex:none;padding:5px 11px;border:1px solid var(--surface-200);border-radius:var(--radius);
  background:var(--surface-0);color:var(--surface-600);font:600 12.5px/16px Inter;cursor:pointer;white-space:nowrap}
.btn-copy:hover{border-color:var(--primary-600);color:var(--primary-600)}
.btn-copy.done{border-color:#15803d;color:#15803d;background:#e8f4ec}
.pblock{border:1px solid var(--surface-200);border-radius:var(--radius-md);background:var(--surface-0);margin:0 0 14px}
.pblock>summary{cursor:pointer;padding:11px 14px;font:600 14px/18px Inter;color:var(--surface-700);
  display:flex;align-items:center;gap:8px}
.pblock>summary::-webkit-details-marker{display:none}
.pblock[open]>summary{border-bottom:1px solid var(--surface-200)}
.pblock .pblock-body{padding:12px 14px}
@media (max-width:640px){.prow{flex-direction:column}.btn-copy{align-self:flex-start}}
@media print{.navbar,.topbar,.scrim{display:none}.page{padding:0}}

/* Колонка «Видно» на /reports: состояние публикации словом рядом с кнопкой.
   Раньше кнопка-глаз жила в колонке «Файлы» и плавала за списком форматов —
   по строке было не понять, открыт отчёт команде или нет (15.09.2026). */
/* VC-22: в колонке «Видно» глаз, корзина и карандаш складывались в одну nowrap-строку
   и при узкой колонке вылезали за правый край таблицы. flex-wrap даёт им перенестись
   на вторую строку внутри ячейки, space-between убран — иначе он растягивал группу. */
.vis{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vis-state{font-size:13px;line-height:18px;white-space:nowrap}
.vis-state.on{color:var(--success-700)}
.vis-state.off{color:var(--dim)}
.vis-form{display:inline-flex}
.vis-done{transition:background-color .2s;background:var(--success-100)}

/* Дашборды: сетка виджетов. Перетаскивания нет — поток и ширина half|full. */
.wgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.wgrid .widget{margin:0;min-width:0}
.wgrid .widget.wide{grid-column:1 / -1}
.widget h2{margin-top:0}
.w-err{color:var(--danger-600,#c81e1e)}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:14px}
@media (max-width:900px){.wgrid{grid-template-columns:1fr}}
/* страница карточки отчёта (17.09): файлы сверху, содержимое ниже */
.report-meta .tags{display:flex;flex-wrap:wrap;gap:6px}
.report-summary{margin:12px 0 0;color:var(--surface-700);line-height:22px}
.report-view{padding:0;overflow:hidden}
.report-view-bar{display:flex;justify-content:space-between;gap:12px;padding:10px 28px;border-bottom:1px solid var(--surface-100)}
.report-frame{display:block;width:100%;height:82vh;border:0;background:#fff}
.report-md summary{cursor:pointer;font:600 16px/22px Inter;color:var(--surface-900)}
.report-md[open] summary{margin-bottom:12px}
.md-body{max-width:860px;line-height:24px;color:var(--surface-700);overflow-wrap:break-word}
.md-body h1{font:600 22px/30px Inter;color:var(--surface-900);margin:0 0 12px}
.md-body h2{font:600 18px/26px Inter;color:var(--surface-900);margin:24px 0 8px}
.md-body h3,.md-body h4{font:600 15px/22px Inter;color:var(--surface-900);margin:18px 0 6px}
.md-body p,.md-body ul,.md-body ol,.md-body blockquote,.md-body pre,.md-body table{margin:0 0 12px}
.md-body ul,.md-body ol{padding-left:24px}
.md-body li{margin:2px 0}
.md-body blockquote{border-left:3px solid var(--surface-200);padding:2px 14px;color:var(--surface-500)}
.md-body pre{background:var(--surface-50);border-radius:var(--radius);padding:12px 14px;overflow:auto}
.md-body pre code{background:none;padding:0}
.md-body table{border-collapse:collapse;font-size:14px;display:block;overflow:auto;max-width:100%}
.md-body th,.md-body td{border:1px solid var(--surface-200);padding:6px 10px;text-align:left;vertical-align:top}
.md-body th{background:var(--surface-50);font-weight:600}
.md-body img{max-width:100%}
.md-body hr{border:0;border-top:1px solid var(--surface-200);margin:20px 0}
.md-raw{white-space:pre-wrap;font:inherit;margin:0}
@media (max-width:900px){.report-frame{height:70vh}.report-view-bar{padding:10px 16px}}

/* отчёт рамкой прямо в карточке клиента (22.09): вкладка «Отчёты» у /company/{id} */
.report-peek{margin:6px 0 0}
.report-peek-bar{display:flex;gap:16px;margin:6px 0 8px}
.report-peek-frame{display:block;width:100%;height:60vh;border:1px solid var(--surface-200);border-radius:var(--radius);background:#fff}
@media (max-width:900px){.report-peek-frame{height:52vh}}

/* замечания к навыкам (18.09.2026): счётчик открытых у навыка в каталоге и в заголовках групп на вкладке «Замечания» */
.card h3 .pill,a.pill.fb-open{display:inline-block;background:var(--warn-100);color:var(--warn-700);font:500 12px/20px Inter;padding:0 8px;border-radius:999px;text-decoration:none;vertical-align:middle}
a.pill.fb-open:hover{background:var(--warn-700);color:#fff}