/* web/static/company.css
 * Раздел «Компания» — конструктор по макету Claude Design, внешний вид —
 * по прототипу дизайнера 18.10.2026 (design/prototypes/login-variants,
 * company.css), значения сняты с отрисованной страницы прототипа.
 *
 * ⚠️ Только токены tokens.css: обе темы сразу. Карточка виджета — цвет
 * боковой панели (--bg-sidebar), кнопки и переключатели — --bg-card,
 * как в «Профиле» и «Помощи».
 */

.co-root {
    width: 100%;
    max-width: var(--settings-company-width);
    box-sizing: border-box;
    padding: 24px;
    color: var(--text);
    font-size: var(--font-label);
    line-height: 1.45;
}
.co-root [hidden] { display: none !important; }

.co-muted { font-size: var(--font-caption); color: var(--text-secondary); }
.co-warn { color: var(--warning-text); font-weight: 600; }
.co-ok { color: var(--success); }
.co-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.co-overline { font-size: var(--font-caption); font-weight: 700; color: var(--text-secondary); }
.co-state { padding: 24px 0; color: var(--text-secondary); }
.co-state.is-error { color: var(--error); }

/* --------------------------------------------------------------- кнопки */

.co-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3); min-height: var(--control-compact); box-sizing: border-box;
    border: 0; border-radius: var(--ui-radius);
    background: var(--bg-card); color: var(--text);
    font-family: inherit; font-size: var(--font-label); white-space: nowrap; cursor: pointer;
    transition: background var(--motion), color var(--motion);
}
.co-btn:hover:not(:disabled) { color: var(--primary); }
.co-btn:disabled { opacity: .5; cursor: default; }
.co-btn.is-primary { padding-inline: var(--space-4); background: var(--primary); color: var(--on-primary); font-weight: 600; }
.co-btn.is-primary:hover:not(:disabled) { background: var(--primary-light); color: var(--on-primary); }
.co-btn.is-outline { color: var(--primary); }
.co-btn.is-small { min-height: var(--row-compact); font-size: var(--font-caption); }
.co-btn.is-block { width: 100%; }
.co-btn:focus-visible, .co-icon-btn:focus-visible, .co-tab:focus-visible, .co-seg-btn:focus-visible,
.co-signal:focus-visible, .co-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.co-icon-btn {
    width: var(--control-compact); height: var(--control-compact); flex-shrink: 0;
    border: 0; border-radius: var(--ui-radius);
    background: transparent; color: var(--text-secondary); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.co-icon-btn:hover { background: var(--bg-card); color: var(--primary); }
.co-icon-btn[aria-pressed="true"] { background: var(--bg-card); color: var(--primary); }
.co-link {
    border: none; background: none; padding: 0; color: var(--primary);
    font-family: inherit; font-size: var(--font-caption); font-weight: 600; cursor: pointer;
}
.co-pro {
    margin-left: 6px; padding: 1px 6px; border-radius: var(--ui-radius-small);
    background: var(--bg-primary-light); color: var(--primary); font-size: var(--font-badge); font-weight: 700;
}

/* ---------------------------------------------------------------- шапка */

.co-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.co-head.is-editing {
    position: sticky; top: 0; z-index: 6;
    margin: -24px -24px var(--space-4);
    padding: var(--space-4) 24px var(--space-3);
    background: var(--bg-main); border-bottom: var(--hairline) solid var(--border);
}

.co-top { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.co-title { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1 1 auto; }
.co-h1 {
    margin: 0; min-width: 0; overflow-wrap: anywhere;
    font-family: var(--font-sans); font-size: var(--font-page); font-weight: 500; line-height: 1.06;
    color: var(--primary);
}
.co-top-tools { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex-shrink: 0; }

/* Название раздела — на месте заголовка (прототип): ✓ / Enter сохраняют, × / Escape отменяют. */
.co-rename { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1 1 auto; }
.co-rename input {
    min-width: 0; width: 100%; max-width: 520px; padding: 0 var(--space-2); box-sizing: border-box;
    border: 0; border-radius: var(--ui-radius-small); background: var(--bg-card);
    color: var(--primary); font: inherit; font-size: var(--font-page); font-weight: 500; line-height: 1.2;
}
.co-rename input:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.co-rename-error { margin: 0; font-size: var(--font-caption); color: var(--error); }

.co-edit-note { margin: 0; font-size: var(--font-caption); font-weight: 600; color: var(--text-secondary); }

/* Сверка двух баз (reconBody в company.js). */
/* «Шаг назад / вперёд» — одна ячейка; на телефоне только стрелки. */
.co-steps { display: inline-flex; gap: 4px; }
.co-step { display: inline-flex; align-items: center; gap: var(--space-1); }
.co-step-icon { font-size: var(--font-base); line-height: 1; }
@media (max-width: 768px) {
    .co-steps { display: flex; }
    .co-steps .co-step { flex: 1 1 0; justify-content: center; }
    .co-step-text { display: none; }
}

/* Основная система вкладки в панели шаблонов. */
.co-tpl-priority { display: flex; flex-direction: column; gap: var(--space-1); padding: 0 var(--space-4) var(--space-3); }
.co-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* «Все сигналы»: правило, состояние, действия. */
.co-rules { display: flex; flex-direction: column; }
.co-rule { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--hairline) solid var(--border); }
.co-rule-text { flex: 1 1 auto; min-width: 0; }
.co-rule-title { font-weight: 600; overflow-wrap: anywhere; }
.co-rule-prompt { margin-top: 2px; font-size: var(--font-caption); color: var(--text-secondary); overflow-wrap: anywhere; }
.co-rule-actions { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; gap: var(--space-1) var(--space-3); max-width: 45%; }
.co-link-danger { color: var(--error); }
@media (max-width: 768px) {
    .co-rule { flex-direction: column; gap: var(--space-2); }
    .co-rule-actions { max-width: none; justify-content: flex-start; }
}

/* «Продажи» по макету: текущий и прошлый период рядом, столбцы по дням. */
.co-sales-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.co-sales-prev { text-align: right; }
.co-sales-prev-value { font-size: var(--font-lead); font-weight: 500; color: var(--text-secondary); }
.co-sales-best { font-size: var(--font-caption); font-weight: 600; }
.co-bars-wrap { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 auto; min-height: 90px; }
.co-bars-legend { display: flex; gap: var(--space-3); font-size: var(--font-caption); color: var(--text-secondary); }
.co-legend::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 2px; vertical-align: middle; }
.co-legend.is-current::before { background: var(--primary); }
.co-legend.is-prev::before { background: var(--border-dark); }
.co-bars { display: flex; align-items: stretch; gap: 3px; flex: 1 1 auto; min-height: 70px; }
.co-bars-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.co-bars-pair { flex: 1 1 auto; display: flex; align-items: flex-end; gap: 1px; }
.co-bar { flex: 1 1 0; min-height: 1px; border-radius: 2px 2px 0 0; }
.co-bar.is-current { background: var(--primary); }
.co-bar.is-prev { background: var(--border-dark); }
.co-bars-x { height: 14px; font-size: var(--font-badge); color: var(--text-secondary); text-align: center; white-space: nowrap; }

/* Списки «подпись — сумма»: счета, контрагенты, лидеры, товары ниже минимума. */
.co-lines { display: flex; flex-direction: column; }
.co-lines-head { margin-bottom: 2px; font-size: var(--font-caption); font-weight: 700; }
.co-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: 4px 0; font-size: var(--font-caption); }
.co-line + .co-line { border-top: var(--hairline) solid var(--border); }
.co-line > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-line strong { flex-shrink: 0; }
.co-stock-name { display: flex; flex-direction: column; flex: 1 1 auto; }
.co-shortage { color: var(--error); min-width: 3ch; text-align: right; }

/* Файл отчёта по расписанию — карточкой с иконками. */
.co-feed-item.is-file { align-items: center; padding: var(--space-2); border-radius: var(--ui-radius-small); background: var(--bg-card); }
.co-feed-item.is-file + .co-feed-item { margin-top: var(--space-1); border-top: 0; }

/* Сводка «Поручений» и «Неотгруженных»: счётчики цветом смысла. */
.co-summary-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); }
.co-summary-part { font-size: var(--font-caption); font-weight: 700; }
.co-summary-part.is-error { color: var(--error); }
.co-summary-part.is-warn { color: var(--warning-text); }
/* Строка ленты, которая открывает задание. */
.co-feed-item.is-link {
    width: 100%; border: 0; border-radius: var(--ui-radius-small); background: transparent;
    color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.co-feed-item.is-link:hover { background: var(--bg-card); }
.co-feed-item.is-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.co-feed-item.is-link .co-feed-text { display: flex; flex-direction: column; min-width: 0; }

/* Лента расписаний: «Скачать» у строки и «Все файлы» под лентой. */
.co-feed-action { flex-shrink: 0; align-self: center; }
.co-feed-more { margin-top: var(--space-2); }
.co-files { display: flex; flex-direction: column; }
.co-file { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: var(--hairline) solid var(--border); }
.co-file-text { flex: 1 1 auto; min-width: 0; }
.co-file-name { overflow-wrap: anywhere; }

/* Каталог: фильтр систем галочками. */
.co-cat-systems { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0; }
.co-cat-system { margin-top: 0; font-size: var(--font-caption); }

.co-recon-title { font-weight: 600; }
.co-recon-pair { display: flex; align-items: center; gap: var(--space-2); }
.co-recon-select { min-width: 0; flex: 1 1 0; }
.co-recon-lead { font-size: var(--font-lead); font-weight: 700; }
.co-recon-lead.is-ok { color: var(--success); }
.co-recon-lead.is-warn { color: var(--warning-text); }
.co-recon-cell { display: flex; flex-direction: column; gap: 2px; white-space: normal; }

/* Панель настройки: правка сетки слева, Шаблоны / История справа. */
.co-edit-tools { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.co-edit-tools-group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.co-edit-tools .co-link { font-size: var(--font-label); padding: var(--space-2); }
.co-check { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); cursor: pointer; font-size: var(--font-label); }
.co-check input { accent-color: var(--primary); }
.co-history { display: flex; flex-direction: column; gap: var(--space-2); max-height: 60svh; overflow-y: auto; }
.co-history-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-2) var(--space-3); border-radius: var(--ui-radius); background: var(--bg-main); }
.co-history-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

@media (max-width: 768px) {
    /* Три действия помещаются компактно, без пустого ряда (решение 17.10.2026). */
    .co-edit-tools-group:first-child { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .co-edit-tools-group:first-child .co-btn { padding-inline: var(--space-2); font-size: var(--font-caption); white-space: normal; }
}
.co-counter { font-size: var(--font-caption); color: var(--text-secondary); }

/* --- Сигналы: полоса над вкладками --- */
.co-signals { padding-bottom: var(--space-3); border-bottom: var(--hairline) solid var(--border); }
.co-signals-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.co-signals-title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--font-base); font-weight: 600; }
.co-signals-head .co-link { margin-left: auto; white-space: nowrap; }
.co-signals-head .co-btn { margin-left: var(--space-2); white-space: nowrap; }
@media (max-width: 768px) { .co-hide-phone { display: none; } }

/* Счётчик — круг, заливка акцентом темы, цифра цветом фона (решение 17.10.2026). */
.co-count {
    display: inline-grid; place-items: center;
    min-width: var(--icon-size); height: var(--icon-size); padding: 0 5px; box-sizing: border-box;
    border-radius: var(--radius-pill); background: var(--primary); color: var(--bg-main);
    font-size: var(--font-caption); font-weight: 700;
}

.co-signal-list { display: flex; gap: var(--space-3); overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.co-signal {
    flex: 0 0 280px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
    padding: 4px var(--space-3); box-sizing: border-box;
    border: 0; border-left: 3px solid var(--error); border-radius: 0;
    background: transparent; color: var(--text); text-align: left;
    font: inherit; font-size: var(--font-label); cursor: pointer;
}
.co-signal { position: relative; cursor: default; }
.co-signal-open {
    display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 28px 0 0;
    border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.co-signal-open:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.co-signal-open:hover .co-signal-title { color: var(--primary); }
.co-signal-more { position: absolute; top: 0; right: 0; }
.co-signal-count { font-size: var(--font-caption); font-weight: 600; color: var(--text); }
/* Цвет — смысл события (ТЗ 10.9): проблема — error, хорошая новость —
   success, неизвестно (старое текстовое правило) — нейтральный. */
.co-signal.is-positive { border-left-color: var(--success); }
.co-signal.is-neutral { border-left-color: var(--border-dark); }
.co-signal.is-new .co-signal-title { font-weight: 700; }
.co-signal-title, .co-signal-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-signal-meta { font-size: var(--font-caption); color: var(--text-secondary); }
.co-signals-empty { margin: 0; font-size: var(--font-caption); color: var(--text-secondary); }

/* --- Вкладки дашбордов и период: одна строка, одинаковые переключатели --- */
.co-tabsrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.co-tabs {
    display: flex; gap: 0; padding: 4px; min-width: 0; max-width: 100%; box-sizing: border-box;
    border-radius: var(--ui-radius); background: var(--bg-card);
    overflow-x: auto; scrollbar-width: none;
}
.co-tabs::-webkit-scrollbar { display: none; }
.co-tab {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px;
    height: 36px; padding: var(--space-2) var(--space-3); box-sizing: border-box;
    border: 0; border-radius: var(--ui-radius);
    background: transparent; color: var(--text-secondary);
    font-family: inherit; font-size: var(--font-caption); white-space: nowrap; cursor: pointer;
    transition: background var(--motion), color var(--motion);
}
.co-tab:hover { color: var(--primary); }
.co-tab.is-active { background: var(--primary); color: var(--on-primary); }
.co-tab.is-edit { padding: 4px 6px 4px 10px; }
.co-tab.is-add { color: var(--primary); }
.co-tab.is-add.is-locked { color: var(--text-secondary); }
.co-tab-name { border: none; background: none; color: inherit; font: inherit; padding: 0 4px; cursor: pointer; }
.co-tab-mini {
    width: 26px; height: 26px; border: none; border-radius: 50%; background: transparent; color: inherit;
    font-family: inherit; font-size: var(--font-base); line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.co-tab-mini:hover { background: var(--bg-hover); color: var(--primary); }

.co-period { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.co-period-dates { font-size: var(--font-caption); color: var(--text-secondary); white-space: nowrap; }
.co-seg-cal { background: var(--bg-card); }
.co-seg-cal.is-active { background: var(--primary); color: var(--on-primary); }
/* Свой период: всплывающая форма у календаря. */
.co-menu.co-range { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); width: 340px; max-width: calc(100vw - 16px); box-sizing: border-box; }
.co-range-fields { display: flex; gap: var(--space-2); }
.co-range-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-width: 0; }
.co-range-field .co-input { width: 100%; box-sizing: border-box; }
.co-range-error { font-size: var(--font-caption); color: var(--error); }
.co-range-error:empty { display: none; }
.co-seg { display: flex; gap: 0; padding: 4px; border-radius: var(--ui-radius); background: var(--bg-card); }
.co-seg-btn {
    height: 36px; padding: var(--space-2) var(--space-3); border: none; border-radius: var(--ui-radius);
    background: transparent; color: var(--text-secondary);
    font-family: inherit; font-size: var(--font-caption); cursor: pointer;
    transition: background var(--motion), color var(--motion);
}
.co-seg-btn:hover { color: var(--primary); }
.co-seg-btn.is-active { background: var(--primary); color: var(--on-primary); }

/* ------------------------------------------------------- плашки над сеткой */

.co-banner {
    position: relative; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    margin-bottom: 24px; padding: var(--space-4) 60px var(--space-4) var(--space-4); border-radius: var(--ui-radius);
    background: var(--bg-primary-light); border-left: 3px solid var(--primary);
}
.co-banner-icon {
    width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center;
    border-radius: var(--ui-radius); background: var(--bg-main); color: var(--primary);
}
.co-banner-text { flex: 1 1 280px; min-width: 0; }
.co-banner-title { font-size: var(--font-base); font-weight: 600; margin-bottom: 2px; }
.co-banner .co-row { gap: var(--space-3); }
.co-banner .co-link { font-size: var(--font-label); font-weight: 500; }
.co-banner > .co-icon-btn { position: absolute; top: var(--space-2); right: var(--space-2); }
.co-personal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-4); }
.co-pill { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--bg-card); font-size: var(--font-caption); font-weight: 600; }

.co-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    padding: 48px 20px; border-radius: var(--ui-radius); background: var(--bg-sidebar);
}
.co-empty-title { font-size: var(--font-lead); font-weight: 700; }

/* ---------------------------------------------------------------- сетка */

.co-grid {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(128px, auto); gap: var(--space-4);
}
.co-grid.is-mobile { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }

.co-card {
    position: relative; min-width: 0; box-sizing: border-box; overflow: hidden;
    display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3);
    border-radius: var(--ui-radius); background: var(--bg-sidebar); border: var(--hairline) solid var(--border);
}
.co-card.is-flash { outline: 2px solid var(--primary); outline-offset: 2px; }
.co-card.is-edit { outline: 1.5px dashed var(--border-dark); outline-offset: 3px; cursor: grab; }
.co-card.is-dragging { opacity: .45; }
.co-card.is-over { outline: 2px solid var(--primary); }
.co-card-head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.co-card-title {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--font-label); font-weight: 500; color: var(--text);
}
.co-card-marks { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.co-mark { padding: 1px 7px; border-radius: var(--ui-radius-small); background: var(--bg-card); font-size: var(--font-badge); font-weight: 600; color: var(--text-secondary); }
.co-more {
    width: 36px; height: 36px; border: none; border-radius: var(--ui-radius); background: transparent;
    color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.co-more:hover { background: var(--bg-card); color: var(--primary); }
.co-card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
/* Система виджета под названием и подвал «Подробнее · время» — по макету дизайнера. */
.co-card-src { display: flex; align-items: center; gap: 6px; margin-top: -4px; min-width: 0;
               font-size: var(--font-caption); color: var(--text-secondary); }
.co-card-src span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
                flex-shrink: 0; font-size: var(--font-caption); }
.co-card-body.is-loading { justify-content: center; align-items: center; }
/* Подпись центрируется относительно всего окна карточки, включая сводку
   с flex: none; заголовок и кнопки остаются на своих местах. */
.co-card:has(> .co-card-body.is-loading) { min-height: var(--co-loading-min-height); }
.co-card > .co-card-body.is-loading {
    position: absolute;
    inset: 0;
    padding: var(--space-3);
    box-sizing: border-box;
    pointer-events: none;
}
.co-loading-label {
    color: var(--text-secondary);
    font-size: var(--font-label);
    text-align: center;
    padding: var(--space-3);
    background: linear-gradient(110deg, var(--text-secondary) 35%, var(--text) 50%, var(--text-secondary) 65%);
    background-size: 250% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: co-loading-shimmer var(--co-loading-cycle) linear infinite;
}
@keyframes co-loading-shimmer {
    from { background-position: 150% 0; }
    to { background-position: -150% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .co-loading-label { animation: none; background: none; -webkit-text-fill-color: currentColor; }
}

@media (max-width: 768px) {
    .co-root { padding: var(--space-4); }
    .co-head.is-editing { margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4); padding-inline: var(--space-4); }
    /* Макет: даты, переключатель и календарь — одной строкой над вкладками.
       «Обновить» на телефоне не показываем — данные обновляются при входе. */
    .co-period { margin-left: 0; width: 100%; flex-wrap: nowrap; gap: var(--space-1); }
    .co-period-dates { flex: 1 1 auto; min-width: 0; white-space: normal; font-size: var(--font-badge); }
    .co-period .co-updated { display: none; }
    .co-seg { flex: 0 0 auto; }
    .co-seg-btn { padding-inline: var(--space-2); font-size: var(--font-caption); }
    .co-seg-btn { flex: 1 1 0; }
    .co-signal { flex-basis: 240px; }
    .co-banner { padding-right: 52px; }
}

@media (prefers-reduced-motion: reduce) {
    .co-tab, .co-seg-btn, .co-btn { transition: none; }
}

/* Логотипы чужих систем — на белой подложке в обеих темах, не перекрашиваем. */
.co-logo {
    flex-shrink: 0; box-sizing: border-box; border-radius: 6px; background: #fff;
    border: 1px solid var(--border); padding: 2px; display: inline-flex; align-items: center; justify-content: center;
}
.co-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ------------------------------------------------------------ показатели */

.co-kpi { display: flex; align-items: flex-start; gap: 10px; }
.co-kpi + .co-kpi { padding-top: 10px; border-top: 1px solid var(--border); }
.co-kpi-main { flex: 1 1 auto; min-width: 0; }
.co-kpi-src { font-size: 12px; color: var(--text-muted); }
/* ⚠️ Число не переносится: «1 248 / 600 ₽» на двух строках читается как два числа.
   Не помещается — уступает мини-график (контейнерный запрос ниже). */
.co-kpi-value {
    font-weight: 600; letter-spacing: -.5px; line-height: 1.1;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.co-kpi-value.is-bad { color: var(--error); }
/* Подробные карточки по макету: главное число крупно (в kpiBody размер ставится по числу систем). */
.co-card-body > .co-kpi-value, .co-sales-main .co-kpi-value { font-size: var(--font-metric); }
.co-kpi-meta { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.co-delta { font-weight: 600; color: var(--text-muted); }
.co-delta.is-up { color: var(--success); }
.co-delta.is-down { color: var(--error); }
.co-state-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; }
/* Причина отказа источника может содержать адрес запроса без пробелов —
   без переноса он вылезал за край узкой карточки и обрезался. */
.co-state-line > * { min-width: 0; overflow-wrap: anywhere; }

/* --------------------------------------------------------------- графики */

.co-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-secondary); }
.co-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.co-legend-item strong { color: var(--text); font-weight: 600; }
.co-legend-stroke { width: 16px; height: 2px; border-radius: 1px; }
.co-legend-stroke.is-dashed { background: none; border-top: 2px dashed var(--text-muted); height: 0; }
.co-chart { width: 100%; flex: 1 1 auto; min-height: 120px; }
.co-chart-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.co-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }
.co-foot { font-size: 12px; color: var(--text-muted); }

.co-funnel { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.co-funnel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.co-funnel-bar { height: 18px; }
.co-funnel-fill { height: 100%; border-radius: 5px; background: var(--primary); }
.co-funnel-value { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- таблицы */

.co-table { display: flex; flex-direction: column; font-size: 13px; }
.co-tr { display: flex; align-items: center; gap: 8px; padding: 7px 0; min-width: 0; }
.co-tr + .co-tr { border-top: 1px solid var(--border); }
.co-td-a { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-td-b { flex-shrink: 0; color: var(--text-muted); }
.co-td-c { flex-shrink: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.co-td-c.is-warn { color: var(--warning-text); }
.co-empty-small { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.co-error-title { font-size: 14px; font-weight: 600; color: var(--error); }

.co-feed { display: flex; flex-direction: column; }
.co-feed-item { display: flex; gap: 10px; padding: 8px 0; }
.co-feed-item + .co-feed-item { border-top: 1px solid var(--border); }
.co-dot { width: 8px; height: 8px; flex-shrink: 0; margin-top: 6px; border-radius: 50%; background: var(--text-muted); }
.co-feed-item.is-new .co-dot { background: var(--warning-text); }
.co-feed-text { min-width: 0; }
.co-feed-title { font-size: 13px; font-weight: 600; }
.co-feed-body { font-size: 13px; color: var(--text-secondary); }
.co-note { font-size: var(--font-lead); font-weight: 600; line-height: 1.35; white-space: pre-wrap; }

/* ------------------------------------------------------------- паспорт */

.co-passport { display: flex; flex-direction: column; gap: 12px; }
.co-passport-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.co-passport-group {
    display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
    border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border);
}
.co-passport-item { display: flex; align-items: flex-start; gap: 8px; }
.co-passport-text { flex: 1 1 auto; min-width: 0; }
.co-passport-name { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }

/* ----------------------------------------------------------- режим правки */

.co-resize {
    position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, var(--border-dark) 50%, var(--border-dark) 60%,
        transparent 60%, transparent 70%, var(--border-dark) 70%, var(--border-dark) 80%, transparent 80%);
    border-bottom-right-radius: 10px;
}
.co-size-label {
    position: absolute; left: 12px; bottom: 6px; padding: 1px 6px; border-radius: 6px;
    background: var(--bg-main); font-size: 11px; color: var(--text-muted);
}
.co-arrows { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; }
.co-arrow {
    width: 36px; height: 36px; border: 1px solid var(--border-dark); border-radius: 8px;
    background: var(--bg-main); color: var(--text); font-size: 16px; cursor: pointer;
}
.co-arrow:disabled { opacity: .35; }
.co-add-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 128px; border: 1.5px dashed var(--primary); border-radius: 14px;
    background: transparent; color: var(--primary); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.co-add-plus { font-size: 24px; line-height: 1; }

.co-menu {
    position: fixed; z-index: 1050; width: 236px; padding: 6px; box-sizing: border-box;
    border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border);
    box-shadow: var(--shadow-card); display: flex; flex-direction: column;
}
.co-menu-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 10px; border: none; border-radius: 8px; background: transparent; color: var(--text);
    text-align: left; font-family: inherit; font-size: 14px; cursor: pointer;
}
.co-menu-item:hover { background: var(--bg-hover); }
.co-menu-item.is-danger { color: var(--error); }
.co-menu-sep { height: 1px; margin: 4px 6px; background: var(--border); }
.co-menu-sizes { display: flex; align-items: center; gap: 4px; padding: 6px 10px; }
.co-menu-sizes .co-muted { margin-right: auto; }
.co-size {
    min-width: 32px; height: 30px; border: 1px solid var(--border-dark); border-radius: 6px;
    background: transparent; color: var(--text); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.co-size.is-active { border-color: var(--primary); background: var(--bg-primary-light); color: var(--primary); }

/* ---------------------------------------------------------------- окна */

.pf-modal.co-modal-wide { width: min(980px, calc(100vw - 32px)); max-width: none; }
/* Окно — колонка с ограниченной высотой: без этого её части сжимались
   (список каталога до одной карточки, превью — под кнопку «Закрыть»),
   а не прокручивались. */
.pf-modal.co-modal-wide > * { flex-shrink: 0; }
.co-input {
    width: 100%; box-sizing: border-box; padding: 10px 12px; min-height: 42px;
    border: 1px solid var(--border-dark); border-radius: 8px; background: var(--bg-input);
    color: var(--text); font-family: inherit; font-size: 15px;
}
.co-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--bg-primary-light); }
.co-textarea { min-height: 110px; resize: vertical; }
.co-note-box { padding: 10px 12px; border-radius: 10px; background: var(--warning-soft); font-size: 14px; }

.co-catalog { display: grid; grid-template-columns: 210px minmax(0, 1fr) 300px; gap: 16px; min-height: 360px; }
.co-cat-side { display: flex; flex-direction: column; gap: 10px; }
.co-cat-list { display: flex; flex-direction: column; gap: 2px; }
.co-cat {
    display: flex; justify-content: space-between; align-items: center; padding: 8px 10px;
    border: none; border-radius: 8px; background: transparent; color: var(--text-secondary);
    font-family: inherit; font-size: 14px; cursor: pointer;
}
.co-cat.is-active { background: var(--bg-hover); color: var(--text); font-weight: 600; }
.co-cat-items { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.co-cat-item {
    display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text);
    font-family: inherit; cursor: pointer;
}
.co-cat-item.is-active { border: 2px solid var(--primary); background: var(--bg-primary-light); padding: 9px 11px; }
.co-cat-item.is-off { opacity: .55; }
.co-cat-item-head { display: flex; align-items: center; gap: 8px; }
.co-cat-item-name { flex: 1 1 auto; font-size: 14px; font-weight: 600; }
.co-cat-logos { display: flex; gap: 4px; }
.co-cat-preview {
    display: flex; flex-direction: column; gap: 8px; padding: 16px;
    border-radius: 12px; background: var(--bg-sidebar);
}
.co-cat-preview-name { font-size: 17px; font-weight: 600; }
.co-cat-preview .co-btn { margin-top: auto; }

.co-config { display: flex; flex-direction: column; gap: 14px; }
.co-field { display: flex; flex-direction: column; gap: 6px; }
.co-field-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.co-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.co-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 36px;
    border: 1px solid var(--border-dark); border-radius: var(--radius-pill); background: transparent;
    color: var(--text); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.co-chip.is-on { border-color: var(--primary); background: var(--bg-primary-light); color: var(--primary); }

/* Форма «+ Создать сигнал» (openSignalForm в company.js). */
.co-signal-form { margin-top: var(--space-3); }
.co-signal-form-about {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
    border-radius: 10px; background: var(--bg-sidebar); font-size: 14px;
}
.co-signal-form-threshold { display: flex; align-items: center; gap: var(--space-2); }
.co-signal-form-threshold .co-input { max-width: 220px; }
.co-signal-form .co-link { align-self: flex-start; }
.co-signal-form-error { margin: 0; color: var(--error); font-size: 14px; }

.co-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.co-template {
    display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 12px;
    border: 1px solid var(--border); border-radius: 12px; background: transparent; color: var(--text);
    font-family: inherit; cursor: pointer;
}
.co-template.is-active { border: 2px solid var(--primary); padding: 11px; }
.co-template.is-off { opacity: .5; cursor: default; }
.co-template-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.co-template-name { font-weight: 600; }
.co-template-mini { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 14px; gap: 3px; }
.co-template-cell { border-radius: 3px; background: var(--bg-hover); }
.co-template-list { font-size: 13px; color: var(--text-secondary); }

/* --------------------------------------------------------------- телефон */

@media (max-width: 768px) {
    /* ⚠️ top: 0, а не высота верхней панели: прокручивается секция под
       панелью, и отступ считается от её края. С 64px шапка настройки
       съезжала вниз и закрывала верх первого виджета. */
    .co-head.is-editing { top: 0; }
    /* В режиме настройки заголовку не хватает строки рядом с «Отмена» /
       «Сохранить»: «Компания» рвалась посреди слова, а поле названия
       сжималось до трёх букв. Кнопки — строкой выше справа, заголовок —
       во всю ширину под ними. */
    .co-head.is-editing .co-top { flex-wrap: wrap; row-gap: var(--space-2); }
    .co-head.is-editing .co-top-tools { order: -1; }
    .co-head.is-editing .co-title,
    .co-head.is-editing .co-rename { flex-basis: 100%; }
    .co-tabsrow { flex-direction: column-reverse; align-items: stretch; }
    .co-catalog { grid-template-columns: minmax(0, 1fr); }
    .co-cat-list { flex-direction: row; overflow-x: auto; }
    .co-cat { flex-shrink: 0; gap: 6px; }
    /* Список — своей прокруткой и не короче трёх карточек: сетка окна иначе
       сжимала его до одной, а превью занимало остальное. */
    .co-catalog { min-height: 0; }
    .co-cat-items { max-height: 45svh; min-height: 220px; }
}

/* Настройка виджета: параметры слева, живое превью справа. */
.co-config-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; }
.co-config-preview {
    display: flex; flex-direction: column; gap: 10px; padding: 16px;
    border-radius: 12px; background: var(--bg-sidebar);
}
@media (max-width: 768px) {
    .co-config-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Мини-график показателя — справа от числа. */
.co-spark { flex-shrink: 0; align-self: center; }

/* Столбцы, план-факт, «Что изменилось», фразы над таблицами. */
.co-bar { display: flex; flex-direction: column; gap: 4px; }
.co-bar-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.co-bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-bar-value { flex-shrink: 0; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.co-bar-track { height: 8px; border-radius: 4px; background: var(--bg-input); overflow: hidden; }
.co-bar-fill { height: 100%; border-radius: 4px; background: var(--primary); }

.co-goal-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.co-goal-value { font-size: 30px; }
.co-goal-track { height: 10px; border-radius: 5px; background: var(--bg-input); overflow: hidden; }
.co-goal-fill { height: 100%; border-radius: 5px; background: var(--primary); }
.co-goal-forecast { font-size: 12px; font-weight: 600; }
.co-goal-forecast.is-ok { color: var(--success); }
.co-goal-forecast.is-warn { color: var(--warning-text); }

.co-changes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.co-change {
    display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
    padding: 10px 12px; border-radius: 10px; background: var(--bg-main);
}
.co-change-text { display: flex; gap: 8px; font-size: 14px; }
.co-change-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.co-dot.is-warn { background: var(--warning-text); }
.co-dot.is-error { background: var(--error); }
.co-dot.is-ok { background: var(--success); }
.co-dot.is-primary { background: var(--primary); }
.co-table-phrase { font-size: 13px; color: var(--text-secondary); }
.co-td-c.is-bad, .co-bad-text { color: var(--error); }
.co-filters { display: flex; flex-direction: column; gap: 6px; }

/* Каталог: вкладки «Каталог» / «Описать словами». */
.co-modal-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.co-modal-tab {
    padding: 8px 0; border: none; border-bottom: 2px solid transparent; background: none;
    color: var(--text-secondary); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.co-modal-tab.is-active { color: var(--text); border-bottom-color: var(--primary); }
.co-describe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; }
.co-describe[hidden] { display: none; }
.co-describe-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.co-describe-form .co-textarea { min-height: 90px; }
.co-describe-empty {
    display: flex; align-items: center; justify-content: center; min-height: 160px; padding: 16px;
    border: 1.5px dashed var(--border-dark); border-radius: 12px; color: var(--text-muted); font-size: 14px; text-align: center;
}
.co-mark.is-chat { display: inline-flex; align-items: center; gap: 4px; border-color: transparent; background: var(--bg-primary-light); color: var(--primary); }
.co-pin-pages { display: flex; flex-direction: column; gap: 6px; }
.co-pin-page { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.co-pin-page .co-muted { margin-left: auto; }

/* Под ответом ассистента: «Закрепить на „Компании“», «Сделать Excel». */
.message-pin-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 12px; }
.message-pin-actions .co-btn { min-height: 34px; padding: 6px 12px; font-size: 13px; }

@media (max-width: 768px) {
    .co-describe { grid-template-columns: minmax(0, 1fr); }
}

/* Узкая карточка показателя: мини-график уступает место числу. */
.co-card { container-type: inline-size; }
@container (max-width: 300px) {
    .co-spark { display: none; }
}


/* --- Шаблоны: боковая панель и предпросмотр (openTemplates в company.js) --- */
.co-tpl-panel {
    position: fixed;
    top: var(--trial-banner-height);
    right: 0;
    bottom: 0;
    z-index: 950;
    width: 340px;
    max-width: 100vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-sidebar);
    border-left: var(--hairline) solid var(--border);
    box-shadow: var(--shadow-card);
    color: var(--text);
}
.co-tpl-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.co-tpl-title { margin: 0; font-size: var(--font-base); font-weight: 700; }
.co-tpl-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); }
.co-tpl-list .co-template { padding: var(--space-3); border: var(--hairline) solid var(--border); border-radius: var(--ui-radius);
    background: var(--bg-main); color: var(--text); font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: var(--space-2); }
.co-tpl-list .co-template.is-active { border: 2px solid var(--primary); padding: calc(var(--space-3) - 1px); }
.co-tpl-list .co-template:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.co-tpl-foot { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--hairline) solid var(--border); }
.co-tpl-foot .co-btn { width: 100%; }
.co-tpl-foot .co-link { align-self: center; padding: var(--space-2); }
.co-tpl-foot p { margin: 0; }
.co-preview-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-3); margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4); border-radius: var(--ui-radius); background: var(--bg-primary-light); }
/* Открытая панель не закрывает правый край сетки на широком экране. */
@media (min-width: 1100px) { body:has(.co-tpl-panel) .co-root { padding-right: calc(340px + 24px); } }
@media (max-width: 768px) {
    /* Телефон: панель выезжает снизу, выбор закрывает её. */
    .co-tpl-panel { top: auto; left: 0; width: 100%; max-height: 75svh; border-left: 0;
        border-top: var(--hairline) solid var(--border); border-radius: var(--ui-radius) var(--ui-radius) 0 0; }
}

/* Сверка с актуальным прототипом: геометрия общая для всех состояний.
   ⚠️ ID удерживает ширину независимо от старой оболочки settings-section
   и совместим с общей шапкой из отдельного PR про шестерёнки. */
#settings-section:has(> #company-root) { padding: 0; }
#company-root.co-root {
    --settings-company-width: var(--co-page-width);
    max-width: var(--co-page-width); margin-inline: auto;
    padding: var(--space-3) var(--co-page-inset) var(--co-page-inset);
}
.co-h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.co-top { min-height: var(--control-height); }
.co-head.is-editing {
    margin: calc(-1 * var(--space-3)) calc(-1 * var(--co-page-inset)) var(--space-4);
    padding: var(--space-3) var(--co-page-inset) var(--space-4);
}
.co-rename input {
    max-width: 100%; padding: 0; border-bottom: var(--hairline) solid var(--primary);
    border-radius: 0; background: transparent;
}
.co-edit-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.co-counter { font-weight: 400; }
.co-tabsrow { padding-bottom: var(--space-2); border-bottom: var(--hairline) solid var(--border); }
.co-tab, .co-seg-btn {
    height: var(--co-segment-height); min-height: var(--co-segment-height);
    padding: var(--space-2) var(--space-3); font-size: var(--font-caption);
    font-weight: 400; line-height: var(--co-segment-line);
}
.co-tabs, .co-seg { padding: var(--co-segment-inset); }
.co-tab.is-active, .co-seg-btn.is-active { animation: co-select var(--co-select-motion) cubic-bezier(.2,.7,.2,1); }
@keyframes co-select {
    0% { transform: scale(var(--co-select-start)); background-color: var(--bg-card); }
    65% { transform: scale(var(--co-select-peak)); background-color: var(--primary); }
    100% { transform: scale(1); background-color: var(--primary); }
}
.co-edit-tools .co-link { font-size: var(--font-caption); font-weight: 400; }
.co-edit-tools .co-link[aria-pressed] {
    min-height: var(--control-height); padding-inline: var(--co-page-inset);
    border-radius: var(--ui-radius); background: var(--primary); color: var(--on-primary);
    font-size: var(--font-base); font-weight: 600;
}
.co-banner { background: var(--co-surface-notice); margin-bottom: var(--co-page-inset); }
.co-banner-title { font-weight: 500; }
.co-banner-icon { background: var(--bg-primary-light); }
.co-count { width: var(--icon-size); min-width: var(--icon-size); padding: 0; }
.co-signal { flex-basis: var(--co-signal-width); padding-block: var(--co-segment-inset); border-left-width: var(--co-signal-rule); }
.co-signal-title { font-weight: 400; }
.co-signal.is-new .co-signal-title { font-weight: 500; }
.co-rule { padding: var(--space-4); border: var(--hairline) solid var(--border); border-radius: var(--ui-radius); }
.co-rules { gap: var(--space-3); }
.co-rule-title { font-weight: 500; }
.co-card { gap: var(--co-segment-inset); }
.co-cat-item { padding: var(--space-3); border: var(--hairline) solid transparent; border-radius: var(--ui-radius); background: var(--bg-sidebar); }
.co-cat-item.is-active { padding: var(--space-3); border: var(--hairline) solid var(--primary); background: var(--bg-sidebar); }
.co-cat-item-name, .co-cat-preview-name { font-weight: 500; }
.co-cat-preview, .co-config-preview { border-radius: var(--ui-radius); padding: var(--space-4); }
.co-field-label { font-size: var(--font-label); font-weight: 400; }
.co-input, .co-textarea {
    min-height: var(--control-height); padding: var(--space-3); border: 0;
    border-radius: var(--ui-radius); background: var(--bg-card); color: var(--text);
    font-family: var(--font-sans); font-size: var(--font-label);
}
.co-input::placeholder, .co-textarea::placeholder { color: var(--text-secondary); opacity: 1; }
.co-input:focus-visible, .co-textarea:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.co-signal-form-about { padding: var(--space-3); border-radius: var(--ui-radius); }
.co-passport-group { border-radius: var(--ui-radius); }
.co-empty { padding: var(--space-4) 0; align-items: flex-start; background: transparent; text-align: left; }
.co-empty-title { font-size: var(--font-label); font-weight: 500; }

/* Общий каркас окон «Компании» не меняет окна профиля и оплаты. */
.co-modal { max-width: var(--co-dialog-width); padding: var(--co-page-inset); gap: var(--space-4); border-radius: var(--ui-radius); }
.co-modal.co-modal-wide { width: min(var(--co-catalog-width), calc(100vw - var(--space-4) * 2)); }
.co-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.co-modal-head .pf-modal-title { color: var(--primary); font-size: var(--space-5); font-weight: 500; }
.co-modal .pf-modal-text { font-size: var(--font-label); }
.co-modal .pf-modal-buttons { margin-top: 0; gap: var(--space-2); }
.co-modal .pf-btn { min-height: var(--control-height); padding: var(--space-2) var(--space-4); font-size: var(--font-label); border-radius: var(--ui-radius); }
.co-modal .co-catalog { min-width: 0; }

/* На ПК шаблоны занимают место навигации, не сжимая сетку справа. */
@media (min-width: 769px) {
    .co-tpl-panel { left: 0; right: auto; width: var(--rail-width); padding: var(--space-4); box-shadow: none; border-left: 0; border-right: var(--hairline) solid var(--border); }
    .co-tpl-title { font-size: var(--space-5); font-weight: 500; color: var(--primary); }
    body.co-templates-open #sidebar > * { visibility: hidden; }
    body:has(.co-tpl-panel) #company-root.co-root { padding-right: var(--co-page-inset); }
}
.co-tpl-list .co-template { padding: 0; border: 0; background: transparent; gap: var(--space-2); }
.co-tpl-list .co-template.is-active { padding: 0; border: 0; }
.co-tpl-list .co-template.is-active .co-template-mini { outline: var(--hairline) solid var(--primary); }
.co-template-name { font-size: var(--font-base); font-weight: 500; }
.co-template-mini { padding: var(--space-2); border: var(--hairline) solid var(--border); border-radius: var(--ui-radius-small); }
.co-tpl-foot .co-btn { min-height: var(--control-height); }

@media (max-width: 768px) {
    #company-root.co-root { padding: var(--space-2) var(--space-4) var(--space-4); }
    .co-top { min-height: var(--control-compact); }
    .co-head.is-editing { margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-4)) var(--space-4); padding: var(--space-2) var(--space-4) var(--space-4); }
    .co-head.is-editing .co-top { flex-wrap: nowrap; }
    .co-head.is-editing .co-top-tools { order: 0; }
    .co-head.is-editing .co-title, .co-head.is-editing .co-rename { flex-basis: auto; }
    .co-head.is-editing .co-h1, .co-head.is-editing .co-rename input { font-size: var(--space-5); }
    .co-head.is-editing .co-rename { flex-wrap: wrap; }
    .co-head.is-editing .co-rename input { flex-basis: 100%; }
    .co-tabs, .co-seg { padding: var(--co-segment-phone-inset); }
    .co-tab, .co-seg-btn { height: var(--co-segment-phone-height); min-height: var(--co-segment-phone-height); padding: var(--space-1) var(--co-segment-phone-padding); font-size: var(--co-segment-phone-font); }
    .co-period { gap: var(--co-segment-inset); }
    .co-period-dates { font-size: var(--font-badge); }
    .co-seg-cal { width: var(--co-segment-phone-height); height: var(--co-segment-height); }
    .co-edit-tools-group:first-child { display: flex; flex-wrap: nowrap; gap: var(--co-segment-inset); }
    .co-edit-tools-group:first-child .co-btn { min-width: 0; min-height: var(--co-segment-height); font-size: var(--font-caption); padding-inline: var(--space-2); white-space: nowrap; }
    .co-edit-tools .co-link[aria-pressed] { min-height: var(--co-segment-height); padding-inline: var(--space-4); font-size: var(--font-label); }
    .co-signal { flex-basis: var(--co-signal-width); }
    .co-modal { width: 100%; max-width: 100%; padding: var(--space-4); border-radius: var(--ui-radius) var(--ui-radius) 0 0; }
    .co-modal.co-modal-wide { width: 100%; }
    .co-catalog { gap: var(--space-4); }
    .co-catalog, .co-config-layout, .co-describe { grid-template-columns: minmax(0, 1fr); }
    .co-signal-form-threshold .co-input { min-width: 0; }
    .co-rule { padding: var(--space-3); }
    .co-rule-actions { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .co-root *, .co-modal *, .co-tpl-panel * { animation: none !important; transition: none !important; scroll-behavior: auto; }
}
/* Каталог — один список, выбор открывает параметры до добавления. */
.co-modal .co-catalog { display: flex; flex-direction: column; min-height: 0; gap: var(--space-4); }
.co-cat-side { gap: var(--space-4); }
.co-cat-list { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
.co-cat { gap: var(--space-2); padding: var(--space-2); font-size: var(--font-label); font-weight: 400; }
.co-cat.is-active { background: transparent; color: var(--primary); font-weight: 400; }
.co-cat-systems { margin: 0; }
.co-cat-sizes { font-size: var(--font-caption); color: var(--text-secondary); }
.co-cat-items { max-height: none; }
.co-cat-item-name { font-size: var(--font-base); }
.co-cat-item:hover:not(:disabled) .co-cat-item-name { color: var(--primary); }
.co-template-cell { display: flex; flex-direction: column; gap: var(--co-segment-phone-inset); overflow: hidden; padding: var(--co-segment-phone-inset); border: var(--hairline) solid var(--border); }
.co-template-cell-title { font-size: var(--font-badge); line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-template-cell-line { height: var(--co-segment-inset); width: 62%; background: var(--primary); opacity: .65; }
.co-template-cell-line:last-child { width: 86%; background: var(--text-secondary); opacity: .3; }
.co-tpl-list { gap: var(--space-5); }
@media (max-width: 768px) {
    .co-tpl-panel { top: var(--trial-banner-height); bottom: 0; left: 0; width: min(var(--co-dialog-width), 90vw); max-height: none; border-radius: 0; border-top: 0; border-right: var(--hairline) solid var(--border); }
}
.co-signals-open { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.co-signals-open:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.co-signals-head { justify-content: space-between; }
.co-signals-head .co-btn { margin-left: auto; }
.co-banner { display: grid; grid-template-columns: var(--control-height) minmax(0, 1fr) auto; align-items: start; }
.co-banner .co-row { align-self: center; }
@media (max-width: 768px) {
    .co-tabs { align-self: flex-start; width: max-content; }
    .co-banner { grid-template-columns: var(--control-height) minmax(0, 1fr); }
    .co-banner .co-row { grid-column: 1 / -1; }
    .co-banner-icon { width: var(--control-compact); height: var(--control-compact); }
    .co-banner-text { padding-right: var(--space-2); }
}
.co-btn { min-height: var(--co-button-height); }
.co-modal-head .pf-modal-title { font-size: var(--co-page-inset); }
.co-modal .pf-btn { min-height: var(--co-button-height); }
@media (max-width: 768px) {
    .pf-scrim:has(> .co-modal) { padding: 0; align-items: flex-end; }
    .pf-scrim > .co-modal { max-height: calc(100% - var(--space-4)); padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); }
    .co-signals-head .co-btn { min-height: var(--control-compact); padding-inline: var(--space-3); font-size: var(--font-caption); }
    .co-top-tools .co-btn { min-height: var(--control-compact); padding-inline: var(--space-3); }
}
.co-preview-return-short { display: none; }
@media (max-width: 768px) {
    body:has(#company-root.is-editing) #burger-btn { display: none !important; }
    .co-preview-return-short { display: inline; }
    .co-preview-return-full { display: none; }
    .co-title > .co-icon-btn { width: var(--co-page-inset); height: var(--co-page-inset); padding: var(--co-segment-inset); }
}
.co-modal .co-cat-items { min-height: 0; }
/* Каталог находится вне co-root: его вкладки тоже обязаны уважать hidden. */
.co-modal [hidden] { display: none !important; }
.co-range-summary { margin: 0; font-size: var(--font-caption); color: var(--text-secondary); }
.co-calendar-head { display: flex; align-items: center; justify-content: space-between; font-size: var(--font-label); }
.co-calendar-week, .co-calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--co-segment-phone-inset); text-align: center; }
.co-calendar-week { font-size: var(--font-caption); color: var(--text-secondary); padding-block: var(--space-2); }
.co-calendar-day { min-height: var(--co-segment-height); padding: 0; border: 0; border-radius: var(--ui-radius-small); background: transparent; color: var(--text); font: inherit; font-size: var(--font-label); cursor: pointer; }
.co-calendar-day.in-range { background: var(--bg-primary-light); }
.co-calendar-day[aria-pressed=true] { background: var(--primary); color: var(--on-primary); }
.co-calendar-day:disabled { opacity: .35; cursor: default; }
.co-calendar-day:hover:not(:disabled):not([aria-pressed=true]) { background: var(--bg-card); }
.co-calendar-day:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.co-template-mini { grid-auto-rows: var(--co-segment-phone-height); }
@media (max-width: 768px) {
    .co-head.is-editing .co-h1, .co-head.is-editing .co-rename input { font-size: var(--co-page-inset); }
}
/* Шапка сохраняет ось разделителя «Отчётов»: сигналы раскрываются под ней. */
.co-head:not(.is-editing) { gap: 0; }
.co-head:not(.is-editing) > .co-top { margin-bottom: var(--space-2); }
.co-head:not(.is-editing) > .co-signals { min-height: var(--control-compact); padding: 0; border: 0; margin-bottom: var(--space-4); }
.co-signals-head { min-height: var(--control-compact); margin: 0; }
.co-signals-head .co-btn { min-height: var(--control-compact); }
.co-signal-feed { margin-bottom: var(--space-4); }
.co-signal-feed:empty { display: none; }
.co-grid { grid-auto-rows: var(--co-grid-row); }
.co-card-body { min-height: 0; overflow: auto; scrollbar-width: thin; }
.co-card.is-edit { padding-bottom: var(--co-card-footer); }
.co-card-foot { min-height: var(--co-card-footer); }
.co-chart { flex: none; height: var(--co-chart-height); min-height: var(--co-chart-height); }
.co-bars-wrap { flex: none; min-height: 0; }
.co-bars { flex: none; height: var(--co-bars-height); min-height: var(--co-bars-height); }
.co-bars-pair { min-height: 0; }
.co-widget-configure { display: inline-flex; align-items: center; gap: var(--co-segment-inset); min-height: var(--co-button-height); padding: var(--space-2); border: var(--hairline) solid var(--border-dark); border-radius: var(--ui-radius-small); background: var(--bg-primary-light); color: var(--primary); font: inherit; font-size: var(--font-caption); cursor: pointer; }
.co-widget-configure svg { flex-shrink: 0; }
.co-card[data-size=S] .co-widget-configure span { display: none; }
.co-more { width: var(--co-page-inset); }
.co-widget-configure:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.co-size-label { left: auto; right: var(--control-compact); bottom: var(--space-1); }
.co-resize { touch-action: none; user-select: none; }
body:has(.co-card.is-resizing) { user-select: none; cursor: nwse-resize; }
.co-card.is-resizing { cursor: nwse-resize; }
.co-tab-rename { display: flex; align-items: center; gap: var(--co-segment-inset); min-width: 0; }
.co-tab-rename input { width: var(--co-tab-input); min-width: 0; height: var(--co-segment-phone-height); border: var(--hairline) solid var(--primary); border-radius: var(--ui-radius-small); padding: var(--co-segment-inset); background: var(--bg-card); color: var(--text); font: inherit; }
.co-tab-rename input[aria-invalid=true] { border-color: var(--error); }
.co-menu-item:disabled { opacity: .4; cursor: default; }
.co-tab.is-edit { padding: var(--co-segment-inset) var(--space-2); }
.co-modal .co-card-body { max-height: 60svh; }
@media (max-width: 768px) {
    .co-head:not(.is-editing) > .co-signals { margin-top: var(--space-2); margin-bottom: var(--space-4); }
    .co-head:not(.is-editing) > .co-tabsrow { margin-top: 0; margin-bottom: var(--space-4); }
    .co-body > .co-period { margin-bottom: var(--space-4); }
    .co-tab-rename input { width: min(var(--co-tab-input), 40vw); }
}
@media (min-width: 769px) { .co-top { min-height: calc(var(--space-6) * 2); } }
.co-card-body > .co-kpi-value, .co-sales-main .co-kpi-value { font-size: var(--co-metric); font-weight: 500; }
.co-kpi-value { font-weight: 500; }
.co-card-foot .co-link { font-weight: 400; }
.co-preview-note { background: var(--bg-sidebar); border: var(--hairline) solid var(--border); }
body:has(#company-root.is-editing) .app-dialog { background: var(--bg-main); color: var(--text); }
body:has(#company-root.is-editing) .app-dialog-btn.is-primary { color: var(--on-primary); }
.co-bars-col { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.co-bars-col:hover .co-bar.is-current { opacity: .75; }
.co-bars-col:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.co-card-body > .co-bar { flex: none; }
.co-modal:has(.co-config-layout) { width: min(var(--co-dialog-width), calc(100vw - var(--space-4) * 2)); max-width: var(--co-dialog-width); }
.co-config-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.co-config-widget-title { margin: 0; font-size: var(--font-base); font-weight: 500; }
.co-config-preview summary { cursor: pointer; }
.co-config-preview[open] summary { margin-bottom: var(--space-3); }
.co-config-movement { align-items: center; }
@media (max-width: 768px) { .co-modal:has(.co-config-layout) { width: 100%; } }
.co-head:not(.is-editing) > .co-tabsrow { min-height: calc(var(--space-6) * 2 + var(--hairline)); box-sizing: border-box; }
.co-config-advanced { display: flex; flex-direction: column; gap: var(--space-3); }
.co-config-advanced summary { cursor: pointer; color: var(--text-secondary); font-size: var(--font-label); }
.co-config-advanced[open] summary { margin-bottom: var(--space-3); }
.co-config-advanced > .co-field { margin-top: var(--space-3); }
.co-modal .pf-modal-buttons > .co-link-danger { margin-right: auto; min-height: var(--co-button-height); }
@media (max-width: 768px) {
    .co-head:not(.is-editing) > .co-signals { margin-bottom: var(--space-5); }
}
/* У сотрудника строка управления в «Отчётах» пуста: резервируем её высоту,
   не добавляя элементы и действия, чтобы общий разделитель не прыгал. */
#reports-section .reports-head:has(> .reports-sub:empty):has(> .reports-actions:empty) { display: flex; }
/* Сдвиг всей колонки при входе двигал и общий разделитель. */
#reports-section .reports-container { animation: none; }

/* Сигналы: выбор способа, параметры и срабатывания используют общий каркас окон. */
.co-signal-choices, .co-signal-details { display: grid; gap: var(--space-3); }
.co-signal-choice {
    display: grid; gap: var(--space-1); width: 100%; padding: var(--space-3);
    border: 0; border-radius: var(--ui-radius); background: var(--bg-sidebar);
    color: var(--text); text-align: left; font-family: var(--font-sans); cursor: pointer;
}
.co-signal-choice strong { font-size: var(--font-base); font-weight: 500; }
.co-signal-choice span { font-size: var(--font-label); color: var(--text-secondary); }
.co-signal-choice em { font-size: var(--font-caption); font-style: normal; color: var(--primary); }
.co-signal-choice:hover strong { color: var(--primary); }
.co-signal-choice:disabled { opacity: var(--co-disabled-opacity); cursor: default; }
.co-signal-choice:focus-visible, .co-signal-option:focus-visible, .co-signal-menu .co-menu-item:focus-visible {
    outline: none; box-shadow: var(--shadow-focus);
}
.co-signal-select { min-width: 0; }
.co-signal-select > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); cursor: pointer; list-style: none; }
.co-signal-select > summary::-webkit-details-marker { display: none; }
.co-signal-select > summary::after { content: '⌄'; color: var(--text-secondary); }
.co-signal-options { display: grid; gap: var(--space-1); padding-block: var(--space-2); }
.co-signal-option {
    display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: var(--space-3);
    border: 0; border-radius: var(--ui-radius); background: transparent; color: var(--text);
    text-align: left; font-family: var(--font-sans); font-size: var(--font-label); cursor: pointer;
}
.co-signal-option:hover, .co-signal-option[aria-pressed=true] { background: var(--bg-hover); }
.co-signal-check { width: var(--icon-size); flex-shrink: 0; color: var(--primary); }
.co-signal-menu { width: min(var(--co-signal-menu-width), calc(100vw - var(--space-4))); padding: var(--space-2); border-radius: var(--ui-radius); }
.co-signal-menu .co-menu-item { min-height: var(--control-height); padding: var(--space-2) var(--space-3); font-size: var(--font-label); border-radius: var(--ui-radius); }
.co-signal-event, .co-signal-condition { margin: 0; padding: var(--space-3); border-radius: var(--ui-radius); background: var(--bg-sidebar); font-size: var(--font-label); line-height: var(--text-body-lh); overflow-wrap: anywhere; }
.co-signal-event { border-left: var(--co-signal-rule) solid var(--border); }
.co-signal-event.is-negative { border-left-color: var(--error); }
.co-signal-event.is-positive { border-left-color: var(--success); }
.co-signal-event p, .co-signal-details > p { margin: 0; }
.co-signal-event time { display: block; margin-top: var(--space-2); font-size: var(--font-caption); }
.co-signal-more { display: flex; align-items: center; justify-content: center; }
.co-signal-more { width: var(--co-button-height); height: var(--co-button-height); }
.co-signal-open { padding-right: var(--co-button-height); }
.co-signal-form { gap: var(--space-4); }
.co-signal-form .co-field { gap: var(--space-2); }
.co-signal-form-about { background: transparent; padding: 0; font-size: var(--font-label); }
.co-signal-select > summary { box-sizing: border-box; }
.co-rule-actions > .co-more { width: var(--co-button-height); height: var(--co-button-height); display: flex; align-items: center; justify-content: center; }
.co-signal-form-threshold .co-input { max-width: none; flex: 1; min-width: 0; }
.co-modal.co-signal-editor { max-width: var(--co-signal-dialog); padding: var(--space-5); gap: var(--space-3); }
.co-signal-editor > *, .co-signal-form > * { flex-shrink: 0; }
.co-signal-editor .co-modal-head .pf-modal-title, .co-signal-manager .co-modal-head .pf-modal-title { font-size: var(--space-5); }
.co-signal-editor .pf-modal-text, .co-signal-editor .co-muted { font-size: var(--font-caption); }
.co-signal-editor .co-input { min-height: var(--co-signal-field-height); padding: var(--space-2) var(--space-3); }
.co-signal-editor .co-textarea { min-height: var(--co-signal-area); }
.co-signal-editor .co-field-label { font-size: var(--text-small); }
.co-signal-editor .co-field { gap: var(--space-1); }
.co-signal-editor .pf-modal-buttons { margin-top: var(--space-4); flex-wrap: nowrap; }
.co-signal-editor .pf-btn { min-height: var(--co-segment-height); font-size: var(--text-small); }
.co-modal.co-signal-manager { width: min(var(--co-signal-manager), calc(100vw - var(--space-4) * 2)); padding: var(--space-5); }
.co-signal-manager .co-rule { border: 0; background: var(--bg-card); }
.co-signal-select > summary::after { content: ''; width: var(--space-2); height: var(--space-2); border-right: var(--hairline) solid currentColor; border-bottom: var(--hairline) solid currentColor; transform: rotate(45deg); flex-shrink: 0; margin-right: var(--space-1); }
.co-signal-select[open] > summary::after { transform: rotate(225deg); }
@media (max-width: 768px) {
    .co-modal.co-signal-editor, .co-modal.co-signal-manager { width: 100%; max-width: none; padding: var(--space-4); }
    .co-signal-editor input, .co-signal-editor textarea { font-size: var(--font-base); }
}

/* Каталог сигналов не резервирует вторую строку для «Назад» и «Отмена». */
.co-signal-catalog { gap: var(--space-3); }
.co-signal-catalog .co-signal-choices { gap: var(--space-2); }
.co-signal-catalog .pf-modal-buttons { margin-top: 0; }
.co-signal-catalog .co-signal-choice { align-content: start; }
.co-signal-editor .co-signal-form { margin-top: 0; gap: var(--space-3); }
.co-signal-editor .pf-modal-buttons { margin-top: var(--co-segment-inset); }

/* Длинное условие не сжимает и не переносит меню действий. */
.co-signal-manager .co-rule { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
.co-signal-manager .co-rule-text { padding-right: var(--co-button-height); }
.co-signal-manager .co-rule-actions { max-width: none; flex-wrap: nowrap; justify-content: flex-start; align-items: center; }
.co-signal-manager .co-rule-actions > .co-more { position: absolute; top: var(--space-2); right: var(--space-2); }
.co-signal-manager .co-rule-prompt { margin-top: var(--space-2); font-size: var(--font-label); }

/* Тип новости: одинаковое выделение в выборе и подтверждении сигнала. */
.co-signal-news [data-polarity],
.co-signal-news[data-polarity] { font-weight: 700; }
.co-signal-news [data-polarity="negative"],
.co-signal-news[data-polarity="negative"] { color: var(--error); }
.co-signal-news [data-polarity="positive"],
.co-signal-news[data-polarity="positive"] { color: var(--success); }


/* Существующая сводка — компактный блок вне фиксированных рядов виджетов.
   Ежедневный показ и закрытие на всех устройствах ждут задачу 023. */
.co-brief { margin-bottom: var(--space-4); }
.co-brief .co-card-body { flex: none; overflow: visible; }
.co-brief .co-changes { gap: var(--space-3); }
.co-brief .co-change { padding: var(--space-3); gap: var(--space-2); border-radius: var(--ui-radius); }
.co-brief .co-change-text { font-size: var(--font-label); }
.co-brief .co-change-foot { gap: var(--space-2); flex-wrap: wrap; }
@media (max-width: 768px) {
    .co-brief .co-changes { grid-template-columns: minmax(0, 1fr); }
}
.co-card.co-brief { background: var(--co-brief-surface); }
.co-brief .co-card-head { padding-right: var(--control-height); }
.co-brief-close { position: absolute; top: 0; right: 0; }
.co-brief-close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.co-card.co-brief { gap: var(--space-2); }