/* ---------- Шрифт: Inter (variable) ----------
Свой хостинг, а не Google Fonts: CRM не должна зависеть от внешнего CDN
ни по скорости, ни по доступности. Только нужные подмножества — латиница и
кириллица; браузер скачивает файл, лишь когда на странице есть его символы. */
@font-face {
font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
src: url("/assets/fonts/inter-cyrillic-ext-wght-normal.woff2") format("woff2-variations");
unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
@font-face {
font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
src: url("/assets/fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations");
unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
src: url("/assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900;
src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ---------- Токены темы ----------
Семантические имена в духе shadcn/ui: компонент берёт «фон карточки»,
«приглушённый текст», «рамку», а не конкретный hex. Поэтому тёмная тема —
это только переопределение токенов в [data-theme="dark"]. Тему ставит
скрипт в index.html ещё до отрисовки (без вспышки светлого экрана),
переключают кнопка в шапке и пункт в меню профиля (setTheme в app.js). */
:root {
color-scheme: light;
--font-sans: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
--background: #f6f7fb; /* фон страницы */
--card: #ffffff; /* карточки, модалки, панели */
--panel: var(--card);
--popover: #ffffff; /* выпадающие меню */
--subtle: #f8fafc; /* едва заметная подложка: шапки, ховер строк */
--accent-bg: #f1f5f9; /* ховер кнопок-призраков и пунктов меню */
--column-bg: #eef1f6; /* колонка канбана */
--input-bg: #ffffff;
--text: #0f172a;
--text-2: #334155; /* второстепенный, но читаемый текст */
--muted: #64748b;
--muted-2: #94a3b8; /* плейсхолдеры, неактивное */
--line: #e2e8f0;
--border-strong: #cbd5e1;
--brand: #4f46e5;
--brand-dark: #4338ca; /* ховер основной кнопки */
--brand-soft: #eef2ff; /* фон «выбрано/акцент» */
--brand-fg: #ffffff; /* текст на брендовой заливке */
--brand-text: #4338ca; /* брендовый текст на обычном фоне */
--brand-rgb: 79, 70, 229;
--ok: #16a34a; --ok-soft: #f0fdf4; --ok-fg: #15803d;
--warn: #d97706; --warn-soft: #fffbeb; --warn-fg: #b45309;
--danger: #dc2626; --danger-soft: #fef2f2; --danger-fg: #b91c1c;
--info: #0891b2; --info-soft: #ecfeff; --info-fg: #0e7490;
--sidebar-bg: #ffffff;
--sidebar-fg: #475569;
--sidebar-fg-strong: #0f172a;
--sidebar-muted: #94a3b8;
--sidebar-hover: #f1f5f9;
--sidebar-active-bg: #eef2ff;
--sidebar-active-fg: #4338ca;
--sidebar-border: #e2e8f0;
--topbar-bg: rgba(255, 255, 255, .85);
--overlay: rgba(15, 23, 42, .45);
/* Шкала теней (elevation): чуть заметная — карточки и тайлы, «поднятая» —
модалки и выпадашки. Иерархия слоёв, а не просто рамка потемнее. */
--shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
--shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .05);
--shadow-md: 0 6px 16px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
--shadow-lg: 0 20px 48px rgba(15, 23, 42, .16), 0 4px 12px rgba(15, 23, 42, .08);
--radius-sm: 8px;
--radius: 10px;
--radius-lg: 14px;
/* Единая кривая для hover/motion-переходов по всему приложению. */
--ease: cubic-bezier(.4, 0, .2, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--focus-ring: 0 0 0 3px rgba(var(--brand-rgb), .22);
}
[data-theme="dark"] {
color-scheme: dark;
--background: #0a0e1a;
--card: #111726;
--popover: #151c2e;
--subtle: #0f1524;
--accent-bg: #1b2336;
--column-bg: #0d1321;
--input-bg: #0d1321;
--text: #e6eaf2;
--text-2: #c2c9d6;
--muted: #8b95a8;
--muted-2: #636d82;
--line: #222b3d;
--border-strong: #334057;
--brand: #6366f1;
--brand-dark: #818cf8;
--brand-soft: rgba(99, 102, 241, .16);
--brand-fg: #ffffff;
--brand-text: #a5b4fc;
--brand-rgb: 99, 102, 241;
--ok: #22c55e; --ok-soft: rgba(34, 197, 94, .12); --ok-fg: #4ade80;
--warn: #f59e0b; --warn-soft: rgba(245, 158, 11, .12); --warn-fg: #fbbf24;
--danger: #ef4444; --danger-soft: rgba(239, 68, 68, .12); --danger-fg: #f87171;
--info: #06b6d4; --info-soft: rgba(6, 182, 212, .12); --info-fg: #22d3ee;
--sidebar-bg: #0c111d;
--sidebar-fg: #a3adbf;
--sidebar-fg-strong: #f1f4f9;
--sidebar-muted: #5f6b80;
--sidebar-hover: #161e30;
--sidebar-active-bg: rgba(99, 102, 241, .18);
--sidebar-active-fg: #c7d2fe;
--sidebar-border: #1c2436;
--topbar-bg: rgba(10, 14, 26, .82);
--overlay: rgba(0, 0, 0, .6);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
--shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
--shadow-md: 0 8px 20px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
--shadow-lg: 0 24px 56px rgba(0, 0, 0, .6), 0 6px 18px rgba(0, 0, 0, .35);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: var(--font-sans);
/* cv11 — однотипная «a» у Inter: плотные таблицы и цифры читаются ровнее */
font-feature-settings: "cv11";
-webkit-font-smoothing: antialiased;
color: var(--text);
background: var(--background);
}
button { font-family: inherit; cursor: pointer; }
/* ---------- Иконки (см. ICONS/icon() в app.js, TG_ICON, .intake-tab-ico) ----------
svg stroke="currentColor" — иконка сама красится в цвет текста родителя,
поэтому hover/active/disabled у кнопки красят и иконку бесплатно, без
отдельных цветов на каждый экземпляр. .ico-svg — та же svg-разметка, но
вставленная напрямую в HTML (топ-бар, index.html), а не через icon(). */
.ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 0; }
.ico svg, .ico-svg { display: block; flex: 0 0 auto; }
/* Клавиатурная фокус-рамка — раньше её не было вообще ни у одной кнопки
(только у текстовых полей через :focus). Табом по интерфейсу было не
видно, где фокус. :focus-visible — рамка только при навигации с
клавиатуры, не при клике мышью. */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
input, select, textarea { font-family: inherit; font-size: 14px; }
a { color: var(--brand-text); }
.hidden { display: none !important; }
/* ---------- Экран входа ----------
Две колонки: слева брендовая панель с мягким «северным сиянием» (размытые
цветные пятна медленно плывут — приём с CodePen) и тонкой сеткой, справа —
форма в духе shadcn/ui. На узком экране панель уходит, остаётся форма. */
#login-screen {
min-height: 100%;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
background: var(--background);
}
.login-aside {
position: relative; overflow: hidden; isolation: isolate;
display: flex; background: #0b1020; color: #e7eaf6;
}
.login-aurora { position: absolute; inset: -20%; z-index: -2; filter: blur(72px); }
.login-aurora span {
position: absolute; width: 55%; aspect-ratio: 1; border-radius: 50%;
animation: aurora 18s ease-in-out infinite alternate;
}
.login-aurora span:nth-child(1) { background: #4f46e5; top: 6%; left: 2%; opacity: .9; }
.login-aurora span:nth-child(2) { background: #0ea5e9; bottom: 2%; right: 6%; opacity: .6; animation-duration: 22s; animation-delay: -6s; }
.login-aurora span:nth-child(3) { background: #a855f7; top: 42%; left: 34%; width: 40%; opacity: .5; animation-duration: 26s; animation-delay: -12s; }
@keyframes aurora {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(8%, -6%) scale(1.12); }
100% { transform: translate(-6%, 8%) scale(.95); }
}
/* сетка поверх сияния — фактура без картинок, гаснет к краям */
.login-aside::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 15%, transparent 75%);
mask-image: radial-gradient(ellipse at 30% 40%, #000 15%, transparent 75%);
}
.login-aside-inner { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 40px 48px; width: 100%; }
.login-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.login-brand img { border-radius: 9px; }
.login-pitch { max-width: 460px; margin-bottom: 8vh; }
.login-pitch h2 { margin: 0 0 22px; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; color: #fff; }
.login-pitch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.login-pitch li { display: flex; align-items: center; gap: 10px; color: #c7cbe0; font-size: 15px; }
.login-pitch li svg { flex: 0 0 auto; box-sizing: content-box; padding: 4px; border-radius: 999px; color: #a5b4fc; background: rgba(165, 180, 252, .14); }
.login-main { display: grid; place-items: center; padding: 32px 24px; }
.login-card { width: 100%; max-width: 380px; animation: loginIn .5s var(--ease-out) both; }
.login-logo { display: none; border-radius: 12px; margin-bottom: 18px; }
.login-card h1 { margin: 0 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.login-card .sub { margin: 0 0 26px; color: var(--muted); font-size: 14.5px; }
#login-screen .field { margin-bottom: 16px; }
#login-screen #login-btn { margin-top: 8px; height: 42px; }
#login-screen .error { min-height: 20px; }
/* поле с иконкой слева и (у пароля) кнопкой-глазом справа */
.input-wrap { position: relative; }
.input-wrap .input-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; transition: color .15s var(--ease); }
.field .input-wrap input { padding-left: 38px; height: 42px; }
.input-wrap:has(.pass-toggle) input { padding-right: 42px; }
.input-wrap:focus-within .input-ico { color: var(--brand); }
.pass-toggle {
position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
width: 32px; height: 32px; display: grid; place-items: center;
border: 0; border-radius: 7px; background: transparent; color: var(--muted);
}
.pass-toggle:hover { background: var(--accent-bg); color: var(--text); }
.pass-toggle .eye-off, .pass-toggle.is-visible .eye-on { display: none; }
.pass-toggle.is-visible .eye-off { display: block; }
/* тряска формы при неверном входе (класс вешает JS) */
.login-card.shake { animation: cardShake .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes loginIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cardShake {
10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); }
}
@media (max-width: 900px) {
#login-screen { grid-template-columns: 1fr; }
.login-aside { display: none; }
.login-logo { display: block; }
}
@media (prefers-reduced-motion: reduce) {
.login-aurora span, .login-card { animation: none !important; }
}
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.field input, .field select, .field textarea {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
outline: none;
background: var(--input-bg);
color: var(--text);
box-shadow: var(--shadow-sm);
transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--border-strong); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }
input, select, textarea { color: var(--text); }
/* выбор времени перезвона при статусе «Нет ответа» (внутри поля «Статус») */
.na-callback { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: 9px; flex-wrap: wrap; }
.na-callback .na-lbl { font-size: 13px; font-weight: 600; color: var(--warn-fg); margin: 0; }
.na-callback select, .na-callback input { width: auto; padding: 6px 9px; margin: 0; }
.na-callback .na-time { max-width: 110px; }
/* строка «когда» в окне массовой задачи */
.bulk-when { display: flex; gap: 8px; }
.bulk-when select, .bulk-when input { width: auto; }
/* ---------- Кнопки (shadcn/ui: default / outline / destructive) ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
padding: 9px 14px;
font-size: 14px; font-weight: 600; line-height: 1.2;
background: var(--brand); color: var(--brand-fg);
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .12);
transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), transform .08s var(--ease);
}
.btn:hover { background: color-mix(in srgb, var(--brand) 86%, #000); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn.block { width: 100%; }
.btn.ghost { background: var(--card); color: var(--text); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn.ghost:hover { background: var(--accent-bg); border-color: var(--border-strong); }
.btn.small { padding: 6px 10px; font-size: 13px; gap: 6px; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 86%, #000); }
.btn.tg { background: #229ed9; color: #fff; }
.btn.tg:hover { background: #1c86b8; }
.btn.tg svg { display: block; }
/* кнопка после отправки — «Отправлено ✓» (повторная отправка всё ещё доступна) */
.btn.tg.sent { background: #0ea5a3; }
.btn.tg.sent:hover { background: #0c8d8b; }
/* индикатор в шапке карточки: прижат к правому краю, слева от × */
.tg-sent-badge {
display: inline-flex; align-items: center; gap: 5px;
margin-left: auto; margin-right: 12px;
background: var(--info-soft); color: var(--info-fg);
font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
}
.tg-sent-badge svg { display: block; width: 15px; height: 15px; }
/* Блик на основной кнопке (приём с Uiverse): светлая полоса проходит по кнопке
при наведении. Без WebGL и постоянной анимации — не грузит слабые ПК. */
.btn-shine { position: relative; overflow: hidden; isolation: isolate; }
.btn-shine::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%);
transform: translateX(-120%);
transition: transform .7s var(--ease-out);
}
.btn-shine:hover::after { transform: translateX(120%); }
@media (prefers-reduced-motion: reduce) { .btn-shine::after { display: none; } }
.hint { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.6; }
.error { color: var(--danger); font-size: 13px; margin-top: 10px; min-height: 18px; }
/* ---------- App shell ---------- */
/* #app = горизонтальный флекс: слева боковая панель, справа основная колонка.
`.hidden { display:none !important }` продолжает перебивать это, поэтому
экран входа (когда #app.hidden) не затрагивается. */
#app { display: flex; align-items: stretch; }
/* margin-left резервирует место под панель — единственный источник истины по
ширине колонки (см. .sidebar ниже: она специально вне потока, position:fixed,
чтобы временное раскрытие по наведению ложилось ПОВЕРХ контента, а не
толкало эту колонку вправо). */
.app-main { flex: 1 1 auto; min-width: 0; margin-left: 240px; transition: margin-left .2s ease; }
/* бренд теперь живёт в боковой панели — убираем дубль из шапки.
header.topbar повышает специфичность, чтобы перебить .topbar .logo{display:flex} ниже. */
header.topbar .logo { display: none; }
/* ---------- Боковая панель (выдвигается слева, сворачивается) ----------
position: fixed — панель нарочно вне потока #app: свёрнутая .sidebar.collapsed
раскрывается по наведению (.sb-peek) и ложится поверх контента, не меняя
раскладку — .app-main держит своё margin-left. */
.sidebar {
width: 240px;
position: fixed; top: 0; left: 0; height: 100vh;
background: var(--sidebar-bg); color: var(--sidebar-fg);
border-right: 1px solid var(--sidebar-border);
display: flex; flex-direction: column; overflow: hidden; z-index: 25;
transition: width .2s var(--ease);
}
.sidebar.collapsed { width: 64px; }
/* ~ (любой последующий сосед), а не +: между #sidebar и .app-main в разметке
стоит #sidebar-backdrop, и с + правило не матчилось вовсе. */
.sidebar.collapsed ~ .app-main { margin-left: 64px; }
.sb-head {
flex: 0 0 auto; height: 56px; display: flex; align-items: center; gap: 10px;
padding: 0 14px; border-bottom: 1px solid var(--sidebar-border);
}
.sb-brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; color: var(--sidebar-fg-strong); font-size: 15.5px; letter-spacing: -.01em; }
.sb-logo { flex: 0 0 auto; display: block; border-radius: 8px; }
.sb-brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-toggle {
margin-left: auto; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px;
background: transparent; border: 1px solid var(--sidebar-border); color: var(--sidebar-fg);
display: grid; place-items: center; line-height: 1;
transition: transform .2s var(--ease), background .15s var(--ease), color .15s var(--ease);
}
.sb-toggle:hover { background: var(--sidebar-hover); color: var(--sidebar-fg-strong); }
.sidebar.collapsed .sb-toggle { transform: rotate(180deg); }
.sidebar.collapsed .sb-brand { display: none; }
.sidebar.collapsed .sb-head { justify-content: center; padding: 0; }
.sb-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.sb-group { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--sidebar-muted); font-weight: 600; padding: 14px 12px 6px; white-space: nowrap; }
.sidebar.collapsed .sb-group { display: none; }
.sb-item {
display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
background: transparent; border: none; color: var(--sidebar-fg); padding: 8px 12px;
border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; overflow: hidden;
transition: background .15s var(--ease), color .15s var(--ease);
}
.sb-item:hover { background: var(--sidebar-hover); color: var(--sidebar-fg-strong); }
.sb-item.sb-primary { color: var(--sidebar-fg-strong); font-weight: 600; }
.sb-ico { flex: 0 0 auto; width: 22px; display: flex; align-items: center; justify-content: center; opacity: .85; transition: opacity .15s var(--ease); }
.sb-item:hover .sb-ico, .sb-item.sb-active .sb-ico { opacity: 1; }
.sb-label { overflow: hidden; text-overflow: ellipsis; }
.sidebar.collapsed .sb-label { display: none; }
.sidebar.collapsed .sb-item { justify-content: center; padding: 9px 0; }
/* Раскрытие свёрнутой панели — класс .sb-peek от JS (mouseenter/focusin в
setupSidebar()), а не :hover: чистый :hover срабатывал сразу после клика по
пункту (панель сворачивается под неподвижным курсором) и перекрывал только
что открытую страницу. */
.sidebar.collapsed.sb-peek { width: 240px; box-shadow: var(--shadow-lg); }
.sidebar.collapsed.sb-peek .sb-brand { display: flex; }
.sidebar.collapsed.sb-peek .sb-head { justify-content: flex-start; padding: 0 14px; }
.sidebar.collapsed.sb-peek .sb-group { display: block; }
.sidebar.collapsed.sb-peek .sb-label { display: inline; }
.sidebar.collapsed.sb-peek .sb-item { justify-content: flex-start; padding: 8px 12px; }
.sidebar.collapsed.sb-peek .sb-toggle { transform: none; }
/* Пункт организации — это КОНТЕКСТ («с какой организацией работаем»), а не
экран: без собственной подсветки, только линия снизу отделяет его от разделов. */
.sb-item.sb-org { margin-bottom: 6px; padding-bottom: 11px; border-bottom: 1px solid var(--sidebar-border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.sb-item.sb-org .sb-label { font-weight: 600; color: var(--sidebar-fg-strong); }
.sidebar.collapsed .sb-item.sb-org { padding-bottom: 9px; }
/* Экран, на котором сейчас пользователь */
.sb-item.sb-active { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg); font-weight: 600; }
.sb-item.sb-active:hover { background: var(--sidebar-active-bg); color: var(--sidebar-active-fg); }
.sb-item:focus-visible { box-shadow: var(--focus-ring); outline: none; }
/* ---------- Гамбургер + затемнение мобильного сайдбара ----------
На десктопе оба скрыты — навигация через постоянную панель слева.
Раскрытие для телефона — в @media (max-width: 640px) ниже. */
.mobile-menu-btn {
display: none; flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--radius-sm);
background: var(--card); border: 1px solid var(--line); color: var(--text-2);
align-items: center; justify-content: center; transition: background .15s var(--ease);
}
.mobile-menu-btn:hover { background: var(--accent-bg); color: var(--text); }
.sidebar-backdrop {
display: none; position: fixed; inset: 0; z-index: 89;
background: var(--overlay); opacity: 0; pointer-events: none;
transition: opacity .2s var(--ease);
}
.sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
/* ---------- Организации (AMP, Фаза 0) ---------- */
.org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 10px; }
.org-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--card); display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.org-card.current { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), .15); }
.org-head { display: flex; align-items: center; gap: 8px; }
.org-name { font-weight: 700; font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-code { font-size: 11px; font-weight: 700; color: var(--brand-dark); background: var(--brand-soft); border-radius: 6px; padding: 2px 7px; flex: 0 0 auto; }
.org-counts { display: flex; gap: 8px; }
.org-counts .oc { flex: 1; display: flex; flex-direction: column; background: var(--subtle); border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; min-width: 0; }
.org-counts .oc span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-counts .oc b { font-size: 18px; font-variant-numeric: tabular-nums; }
.org-actions { display: flex; gap: 6px; align-items: center; }
.org-actions .btn:first-child { flex: 1; }
.org-actions .btn.small { flex: 0 0 auto; }
.org-confirm { font-size: 13px; font-weight: 600; color: var(--danger); }
/* ---------- Формы + конструктор (AMP, Фаза 1) ---------- */
.modal.fc-modal { max-width: 980px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 8px; }
.form-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--card); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-card-main { flex: 1; min-width: 0; }
.form-card-name { font-weight: 700; font-size: 15px; }
.form-card-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.fc-layout { display: flex; gap: 14px; align-items: flex-start; margin-top: 8px; }
.fc-main { flex: 1; min-width: 0; }
.fc-canvas { display: flex; flex-direction: column; gap: 10px; }
.fc-field { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--subtle); }
.fc-field .field { margin-bottom: 8px; }
.fc-field-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.fc-type { font-size: 12px; font-weight: 700; color: var(--brand-dark); background: var(--brand-soft); border-radius: 6px; padding: 3px 8px; }
.fc-field-head .spacer2 { flex: 1; }
.fc-required { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 2px; }
.fc-required input { width: 16px; height: 16px; }
/* drag-and-drop полей формы: грип-ручка + индикатор места вставки */
.fc-grip { cursor: grab; color: var(--muted); font-size: 15px; line-height: 1; padding: 2px 6px 2px 0; user-select: none; flex: 0 0 auto; touch-action: none; }
.fc-grip:active { cursor: grabbing; }
.fc-field.fc-dragging { opacity: .45; }
.fc-field.fc-drop-before { box-shadow: inset 0 3px 0 0 var(--brand); }
.fc-field.fc-drop-after { box-shadow: inset 0 -3px 0 0 var(--brand); }
/* top:18px — область прокрутки .amp-view считается по padding-box, поэтому при
top:0 палитра прилипла бы вплотную к верхнему краю; 18px повторяют её padding.
max-height/overflow — на случай роста списка компонентов: прилипший блок выше
экрана иначе обрезался бы без возможности прокрутки. */
.fc-palette { flex: 0 0 220px; border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--card); position: sticky; top: 18px; z-index: 5; max-height: calc(100vh - 92px); overflow-y: auto; }
.fc-palette .section-title { margin-top: 0; }
.fc-comp { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--subtle); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; margin-bottom: 8px; font-size: 14px; cursor: pointer; }
.fc-comp:hover { background: var(--brand-soft); border-color: var(--brand); }
.fc-comp-ico { width: 22px; text-align: center; flex: 0 0 auto; }
@media (max-width: 760px) { .fc-layout { flex-direction: column; } .fc-palette { flex-basis: auto; width: 100%; position: static; } }
/* «Условный список»: подполя вариантов внутри карточки поля. Ни одному из этих
контейнеров НЕЛЬЗЯ давать overflow — любой скролл-контейнер между .fc-palette
и .amp-view снова сломает липкую палитру (см. .amp-view:has(.fc-layout)). */
.fc-branches { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.fc-branch { border: 1px solid var(--line); border-radius: 10px; background: var(--subtle); }
.fc-branch-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.fc-branch-head .n { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.fc-branch-body { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; }
.fc-branch-add { display: flex; gap: 6px; align-items: center; }
.fc-branch-add select { flex: 1; min-width: 0; }
/* Осиротевшая ветка: вариант переименовали/удалили, а подполя остались. Не
удаляем молча — показываем и даём решить. */
.fc-branch.orphan { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-soft); }
.fc-orphan-note { font-size: 12px; color: var(--warn-fg); padding: 2px 10px 8px; }
.fc-field.fc-nested { background: var(--card); border-left: 3px solid var(--brand); }
/* Липкая панель сохранения снизу конструктора — форма длинная, кнопка «Сохранить»
всегда под рукой, не нужно скроллить наверх. Стиль как у панелей (#fff) —
Chrome auto-dark инвертирует её вместе с остальным интерфейсом. */
.fc-savebar {
position: sticky; bottom: 0; z-index: 20;
display: flex; align-items: center; gap: 10px;
margin-top: 18px; padding: 12px 14px;
background: var(--card); border: 1px solid var(--line); border-radius: 12px;
box-shadow: 0 -6px 18px rgba(2, 6, 23, .08);
}
.fc-savebar .spacer2 { flex: 1; }
.fc-savebar-hint { font-size: 13px; }
.fc-save-lg { min-width: 200px; padding: 12px 22px; font-weight: 600; }
@media (max-width: 640px) {
.fc-savebar { flex-wrap: wrap; }
.fc-savebar-hint { flex-basis: 100%; }
.fc-save-lg { flex: 1; }
}
/* ---------- Организации: тулбар/поиск ---------- */
.org-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 16px; }
.org-toolbar .flt-search { flex: 1 1 260px; max-width: 420px; }
.org-head-info { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-wrap: wrap; }
/* ---------- Заявки: приём (intake) ---------- */
.intake-form { display: flex; flex-direction: column; gap: 12px; }
.intake-field { display: flex; flex-direction: column; gap: 5px; }
.intake-field > label:first-child { font-size: 13px; color: var(--muted); font-weight: 500; }
.intake-field input:not([type=checkbox]):not([type=radio]), .intake-field select, .intake-field textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: var(--card); font-family: inherit; resize: vertical; }
.intake-field input:focus, .intake-field select:focus, .intake-field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
.intake-field input[type=checkbox] { width: 18px; height: 18px; }
.intake-helper { font-size: 12px; }
.radio-group { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 4px 0; }
.radio-item { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.radio-item input { width: auto; }
/* ---------- Заявки: список (Arizalar) ---------- */
.app-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.app-table th, .app-table td { white-space: nowrap; }
.app-table td { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
/* ---------- AMP: полноэкранные страницы ---------- */
.amp-view { padding: 18px 22px; overflow-y: auto; min-height: calc(100vh - 56px); }
.amp-page-head { margin-bottom: 16px; }
.amp-crumbs { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.amp-crumb { font-size: 13px; color: var(--muted); font-weight: 600; }
.amp-titlerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.amp-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.3px; flex: 1; min-width: 0; }
.amp-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.amp-sub { margin: 6px 0 0; }
.amp-body { max-width: 1280px; }
/* ---------- Doska (канбан заявок) ---------- */
.amp-board { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0; align-items: flex-start; }
.amp-col { flex: 0 0 270px; background: var(--column-bg); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; max-height: calc(100vh - 210px); }
.amp-col h3 { margin: 4px 6px 10px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.amp-col h3 .cname { flex: 1; display: inline-flex; align-items: center; gap: 6px; text-transform: uppercase; letter-spacing: .4px; color: var(--text); font-weight: 700; }
.amp-col h3 .cdot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.amp-col h3 .n { background: var(--border-strong); color: var(--text); border-radius: 20px; padding: 1px 8px; font-size: 12px; flex: 0 0 auto; }
.amp-col-body { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px; min-height: 44px; flex: 1; }
.amp-col-body.drop-hi { outline: 2px dashed var(--brand); outline-offset: -2px; background: var(--brand-soft); border-radius: 8px; }
.amp-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; box-shadow: var(--shadow); cursor: grab; }
.amp-card:hover { border-color: rgba(var(--brand-rgb), .35); }
.amp-card.dragging { opacity: .4; }
.amp-card-num { font-size: 11px; font-weight: 700; color: var(--brand-dark); }
.amp-card-name { font-weight: 600; font-size: 14px; margin-top: 2px; }
.amp-card-form { font-size: 11px; margin-top: 3px; }
@media (max-width: 640px) { .amp-view { padding: 12px; flex: 1 1 auto; min-height: 0; } }
/* ---------- Настройки организации ---------- */
.settings-layout { display: flex; gap: 16px; align-items: flex-start; }
.settings-nav { flex: 0 0 200px; display: flex; flex-direction: column; gap: 4px; }
.settings-content { flex: 1; min-width: 0; }
.settings-tab { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; font-size: 14px; cursor: pointer; }
.settings-tab.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); font-weight: 600; }
.settings-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: var(--card); margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.settings-logo { max-width: 120px; max-height: 80px; border: 1px solid var(--line); border-radius: 8px; object-fit: contain; background: var(--card); }
.logo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* предпросмотр «Исправить номера»: список «было → стало» может быть длинным —
держим его в своей прокрутке, чтобы карточка настроек не растягивалась */
.phone-fix-list { margin: 6px 0 0; padding-left: 18px; max-height: 220px; overflow-y: auto; font-variant-numeric: tabular-nums; }
.phone-fix-list li { margin: 2px 0; }
@media (max-width: 760px) { .settings-layout { flex-direction: column; } .settings-nav { flex-basis: auto; width: 100%; flex-direction: row; flex-wrap: wrap; } }
/* ---------- Скрипты / Вики (документы) ---------- */
.doc-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--card); margin-bottom: 10px; }
.doc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.doc-title { font-weight: 700; font-size: 15px; flex: 1; min-width: 0; }
.doc-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.doc-content { font-size: 14px; color: var(--text); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.doc-content * { max-width: 100%; }
.doc-content ul, .doc-content ol { margin: 6px 0 6px 22px; }
.doc-content a { color: var(--brand); }
.doc-content img { max-width: 100%; height: auto; }
/* ---------- Rich-text редактор (скрипты / база знаний) ---------- */
.rich-wrap { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.rich-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 6px 8px; background: var(--subtle); border-bottom: 1px solid var(--line); }
.rich-toolbar .rt-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: 7px; background: transparent; cursor: pointer; font-size: 14px; color: var(--text); line-height: 1; }
.rich-toolbar .rt-btn:hover { background: var(--accent-bg); border-color: var(--line); }
.rich-toolbar .rt-sel { height: 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); font-size: 12.5px; padding: 0 4px; cursor: pointer; }
.rich-toolbar .rt-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--line); }
.rich-toolbar .rt-color-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; cursor: pointer; overflow: hidden; }
.rich-toolbar .rt-color-wrap:hover { background: var(--accent-bg); }
.rich-toolbar .rt-color-a { font-weight: 700; font-size: 14px; border-bottom: 3px solid #ef4444; line-height: 1; padding-bottom: 1px; pointer-events: none; }
.rich-toolbar .rt-color-hl { font-weight: 700; font-size: 14px; background: #fff3b0; padding: 0 2px; border-radius: 2px; line-height: 1; pointer-events: none; }
.rich-toolbar .rt-color { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.rich-editor { min-height: 240px; max-height: 52vh; overflow: auto; padding: 12px 14px; font-size: 14px; line-height: 1.55; color: var(--text); outline: none; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }
.rich-editor img { max-width: 100%; height: auto; }
/* Таблицы, вставленные из Google Таблиц/Excel — в редакторе и в карточке.
Высота строк и отступы как в Google Docs — текст читается свободно. */
.rich-editor table, .doc-content table { border-collapse: collapse; max-width: 100%; margin: 8px 0; font-size: 13.5px; line-height: 1.5; }
.rich-editor td, .rich-editor th, .doc-content td, .doc-content th { padding: 8px 12px; vertical-align: middle; overflow-wrap: anywhere; white-space: normal; }
.rich-editor tr, .doc-content tr { min-height: 34px; }
/* ---------- Раздел «Скрипты / База знаний»: слева список, справа контент ---------- */
.doc-layout { display: flex; gap: 16px; align-items: flex-start; }
.doc-list { flex: 0 0 260px; max-width: 260px; }
.doc-list-add { margin-bottom: 10px; }
.doc-list-search { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; box-sizing: border-box; margin-bottom: 10px; }
.doc-list-scroll { display: flex; flex-direction: column; gap: 4px; max-height: 72vh; overflow-y: auto; }
.doc-list-item { padding: 9px 12px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-list-item:hover { background: var(--accent-bg); }
.doc-list-item.active { background: var(--brand-soft); border-color: rgba(var(--brand-rgb), .35); color: var(--brand-dark); font-weight: 600; }
.doc-list-name { display: block; overflow: hidden; text-overflow: ellipsis; }
.doc-main { flex: 1 1 auto; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.doc-view-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.doc-view-title { font-size: 18px; letter-spacing: -.2px; flex: 1; min-width: 0; }
.doc-view-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.doc-view-body { overflow-x: auto; }
.doc-empty { padding: 48px 12px; text-align: center; }
.doc-edit-head { margin-bottom: 10px; }
.doc-edit-head h3 { font-size: 17px; }
.doc-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
@media (max-width: 760px) { .doc-layout { flex-direction: column; } .doc-list, .doc-main { max-width: 100%; width: 100%; flex-basis: auto; } }
/* ---------- Виджет-помощник на приёме заявки (FAQ / Скрипты / супервайзер) ---------- */
/* Кнопка живёт в ряду действий шапки (.amp-actions), рядом с «К заявкам», а не
плавает над контентом — так она ни на что не наезжает при любой ширине окна.
Панель раскрывается под кнопкой, прижатая к правому краю. */
.help-widget { position: relative; display: inline-flex; }
.help-fab {
position: relative; width: 40px; height: 40px; border-radius: 50%; border: none;
background: var(--brand); color: #fff; font-size: 17px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 2px 8px rgba(var(--brand-rgb), .3); transition: background .15s, transform .15s ease;
}
.help-fab:hover { background: var(--brand-dark); transform: translateY(-1px); }
.help-fab.open { background: var(--brand-dark); transform: none; }
.help-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 360px; max-width: calc(100vw - 44px); height: 520px; max-height: calc(100vh - 200px); background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(15,23,42,.25); overflow: hidden; }
.help-panel.hidden { display: none; }
.help-view { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.help-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--brand); color: #fff; flex: 0 0 auto; }
.help-title { flex: 1; font-weight: 600; font-size: 15px; }
.help-logo { font-size: 18px; }
.help-back, .help-x { background: rgba(255,255,255,.18); border: none; color: #fff; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; }
.help-back:hover, .help-x:hover { background: rgba(255,255,255,.3); }
.help-body { padding: 14px; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.help-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; font-size: 14px; text-align: left; }
.help-item:hover { background: var(--brand-soft); border-color: rgba(var(--brand-rgb), .35); }
.help-ico { font-size: 20px; flex: 0 0 auto; }
.help-search { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; box-sizing: border-box; }
.help-results { display: flex; flex-direction: column; gap: 8px; }
.help-empty { text-align: center; padding: 14px 4px; }
.faq-item { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.faq-q { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: var(--subtle); border: none; cursor: pointer; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--text); }
.faq-q:hover { background: var(--brand-soft); }
.faq-q-ico { flex: 0 0 auto; }
.faq-q-text { flex: 1; }
.faq-answer { padding: 10px 12px; font-size: 13px; border-top: 1px solid var(--line); overflow-x: auto; }
.faq-answer.hidden { display: none; }
@media (max-width: 760px) { .help-panel { width: calc(100vw - 32px); } }
/* Строка FAQ/скрипта в виджете — клик уводит в полный раздел (Скрипты / База
знаний), поэтому это просто пункт списка, а не разворачивающийся аккордеон. */
.help-doc-item { justify-content: flex-start; gap: 10px; }
.help-doc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.help-doc-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
/* метка «Скрипт»/«База знаний» у находок из соседнего раздела */
.help-doc-src { font-size: 11.5px; font-weight: 600; color: var(--brand); text-transform: uppercase; letter-spacing: .3px; }
/* Фрагмент текста документа вокруг совпадения (docSnippet в app.js) — раньше
строка результата показывала только название, оператору приходилось
открывать каждый скрипт, чтобы понять, тот ли это. Строго одна строка с
троеточием: при переносе на 2+ строки само совпадение (обычно в середине
фрагмента) могло уехать во вторую строку и обрезаться line-clamp'ом —
сниппет показывался бы, а подсветка в нём — нет. */
.help-doc-snippet {
font-size: 12.5px; color: var(--muted); line-height: 1.4; text-align: left;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.help-doc-snippet mark.doc-hit { padding: 0 1px; box-shadow: none; } /* компактнее, чем подсветка в открытом документе */
.help-doc-open { flex: 0 0 auto; padding: 5px 10px; font-size: 12.5px; }
.help-doc-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* блок «в своём разделе не нашлось, но есть в соседнем» */
.help-cross { display: flex; flex-direction: column; gap: 8px; }
.help-cross-hint { margin: 0 0 2px; font-size: 12.5px; color: var(--muted); }
/* точка-уведомление на кнопке-чате (fab), когда супервайзер ответил, а виджет закрыт */
.help-fab { position: relative; }
.help-fab-dot { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--danger); border: 2px solid var(--card); box-shadow: 0 0 8px rgba(220, 38, 38, .9); }
/* Ответ СУПЕРВАЙЗЕРА/АДМИНА оператору. Кнопка стоит в шапке страницы на светлом
фоне, поэтому здесь фирменный индиго, а не голубой как в тёмной шапке.
Базовую тень кнопки (0 2px 8px) повторяем в обоих состояниях — иначе на время
свечения кнопка «проваливается», теряя объём. */
.help-fab.has-reply { --neon: 99, 102, 241; box-shadow: 0 2px 8px rgba(var(--brand-rgb), .3), 0 0 0 2px rgba(var(--neon), .3), 0 0 15px rgba(var(--neon), .6); }
.help-fab.has-reply.neon-arrive { animation: neonArrive 1.4s ease-out 2; }
.help-fab.has-reply:hover { transform: none; }
/* ---------- Найденный текст в статье/скрипте (переход из поиска помощника) ---------- */
mark.doc-hit { background: rgba(139, 92, 246, .28); color: var(--text); border-radius: 3px; padding: 0 2px; box-shadow: 0 0 0 1px rgba(139, 92, 246, .45); }
/* совпадение, к которому подвели экран — вспыхивает и гаснет, чтобы глаз сразу
зацепился именно за него, а не за все подсветки сразу */
mark.doc-hit.doc-hit-first { --neon: 139, 92, 246; background: rgba(139, 92, 246, .45); animation: neonFlash 1.1s ease-out 3; }
/* отключение анимаций для prefers-reduced-motion — в самом конце файла, иначе
правила ниже перебили бы его: медиазапрос специфичности не добавляет */
/* ---------- Чат-пузыри (виджет оператора + переписка супервайзера) ---------- */
.chat-body { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-msgs { flex: 1; min-height: 120px; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.chat-bubble { max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; }
.chat-bubble-meta { font-size: 10.5px; font-weight: 700; opacity: .65; margin-bottom: 2px; text-transform: uppercase; letter-spacing: .3px; }
.chat-bubble-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-bubble.mine { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble.mine .chat-bubble-meta { color: rgba(255,255,255,.85); }
.chat-bubble.their { align-self: flex-start; background: var(--accent-bg); color: var(--text); border-bottom-left-radius: 4px; }
.chat-inputrow { display: flex; gap: 8px; margin-top: 10px; flex: 0 0 auto; }
.chat-input { flex: 1; resize: none; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; box-sizing: border-box; }
.chat-inputrow .btn { flex: 0 0 auto; align-self: flex-end; }
.rich-editor:focus { box-shadow: inset 0 0 0 2px rgba(var(--brand-rgb), .14); }
.rich-editor ul, .rich-editor ol { margin: 6px 0 6px 22px; }
.rich-editor a { color: var(--brand); }
.rich-editor:empty::before { content: "Текст…"; color: var(--muted, var(--muted-2)); }
/* ---------- Заявки: приоритет / метки / обработка ---------- */
.prio-badge { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 20px; padding: 2px 9px; white-space: nowrap; }
.tag-chip { display: inline-block; font-size: 11px; background: var(--brand-soft); color: var(--brand-text); border-radius: 6px; padding: 1px 7px; margin: 2px 3px 0 0; }
.amp-card-meta { font-size: 11px; margin-top: 4px; }
.amp-card-tags { margin-top: 4px; }
.intake-meta { margin-top: 16px; padding-top: 4px; border-top: 1px dashed var(--line); }
/* ============================================================
AMP — визуальная полировка (senior UI pass)
============================================================ */
.amp-page-head { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.amp-crumbs { margin-bottom: 10px; }
.amp-crumb { display: inline-flex; align-items: center; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 12.5px; }
.amp-title { font-size: 25px; letter-spacing: -.4px; }
.amp-sub { font-size: 13.5px; margin-top: 6px; max-width: 760px; }
.amp-actions .btn { border-radius: 10px; }
/* карточки: единый радиус, мягкая тень, приятный hover */
.org-card, .form-card, .doc-card, .settings-card {
border-radius: 16px;
box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.org-card:hover, .form-card:hover, .doc-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,23,42,.10); border-color: rgba(var(--brand-rgb), .35); }
.org-card.current { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), .18), 0 12px 28px rgba(var(--brand-rgb), .12); }
/* Организации. auto-fit, а не auto-fill: с auto-fill лишние колонки, для
которых не хватило карточек, остаются пустыми track'ами (именно тот
пустой хвост справа, который иначе видно на широком экране при небольшом
числе организаций) — auto-fit схлопывает пустые колонки и отдаёт их
ширину существующим карточкам через 1fr. */
.org-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.org-head { gap: 10px; }
.org-icon { width: 34px; height: 34px; border-radius: 10px; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: 0 0 auto; }
.org-name { font-size: 16px; letter-spacing: -.2px; }
.org-counts { gap: 8px; }
.org-counts .oc { background: var(--subtle); border-radius: 11px; padding: 8px 10px; }
.org-counts .oc span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; }
.org-counts .oc b { font-size: 19px; color: var(--brand-dark); }
.form-card, .doc-card { border-radius: 14px; }
.form-card-name, .doc-title { letter-spacing: -.2px; }
/* Приём заявки — форма и «обработка» не на всю ширину */
.intake-form, .intake-meta { max-width: 720px; }
.intake-field > label:first-child { font-weight: 600; color: var(--text); }
/* Доска */
.amp-board { padding: 4px 0 14px; }
.amp-col { background: var(--accent-bg); border: 1px solid var(--line); border-radius: 14px; }
.amp-col h3 .cname { font-size: 12.5px; }
.amp-card { border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.07); transition: transform .1s ease, box-shadow .12s ease, border-color .12s ease; }
.amp-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(15,23,42,.12); border-color: rgba(var(--brand-rgb), .35); }
/* Настройки */
.settings-tab { border-radius: 11px; transition: background .12s, border-color .12s; }
.settings-card { border-radius: 14px; }
/* Таблица заявок */
.app-table tbody tr:hover td { background: var(--subtle); }
.prio-badge { padding: 3px 10px; }
.tag-chip { padding: 2px 8px; border-radius: 7px; }
/* ---------- Доска AMP — как доска Prime ---------- */
.amp-board { gap: 14px; padding: 16px 0 20px; align-items: flex-start; }
.amp-col { flex: 0 0 288px; background: var(--column-bg); border: none; border-radius: 12px; padding: 10px; max-height: calc(100vh - 220px); }
.amp-col h3 { margin: 4px 6px 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }
.amp-col h3 .cname { flex: 1; color: var(--muted); font-weight: 600; gap: 7px; }
.amp-col h3 .cdot { width: 9px; height: 9px; }
.amp-col h3 .n { background: var(--border-strong); color: var(--text); border-radius: 20px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.amp-col-body { gap: 9px; min-height: 160px; }
.amp-col-body .empty { color: var(--muted); font-size: 13px; text-align: center; padding: 28px 8px; }
.amp-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; box-shadow: var(--shadow); }
.amp-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,.12); border-color: rgba(var(--brand-rgb), .35); }
.amp-card-num { font-size: 11px; font-weight: 700; color: var(--brand-dark); }
.amp-card-name { font-weight: 600; font-size: 14px; margin-top: 2px; }
/* ---------- Приём/детали заявки — карточка + 2 колонки (как у сделки Prime) ---------- */
.intake-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; box-shadow: var(--shadow); max-width: 920px; }
.intake-form { display: grid; grid-template-columns: 1fr; gap: 14px 20px; max-width: none; }
.intake-field--full { grid-column: 1 / -1; }
/* Подполя «Условного списка» на приёме. Блоки всех вариантов отрисованы сразу и
скрываются классом .hidden — благодаря этому набранное в одном варианте
переживает переключение туда-обратно. Без overflow: иначе выпадающее меню
поиска (.ss-menu, position:absolute) обрезалось бы. */
.cond-host { display: grid; grid-template-columns: 1fr; gap: 14px 20px; }
.cond-host:empty { display: none; }
.intake-subform { display: grid; grid-template-columns: 1fr; gap: 14px 20px; grid-column: 1 / -1; padding-left: 14px; border-left: 2px solid var(--line); }
.intake-field > label:first-child { font-weight: 600; font-size: 13px; color: var(--text); }
.intake-field > label:first-child .req { color: var(--danger); font-weight: 700; }
.intake-helper { font-size: 12px; color: var(--muted); }
.intake-meta { border-top: none; margin-top: 0; max-width: none; }
.lead-main > .intake-card, .lead-main > .path { max-width: none; margin-bottom: 14px; }
.intake-submit-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
/* Галка «Отправить в Telegram» — слева от кнопок (margin-right:auto прижимает кнопки вправо) */
.intake-tg-send { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; }
.intake-tg-send input { width: 16px; height: 16px; accent-color: #0284c7; cursor: pointer; }
/* Кнопка ✈ в списке заявок: зелёная, если заявка уже отправлена в Telegram */
.btn.tg-btn.sent { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: var(--ok-fg); }
.btn.tg-btn.sent:hover { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.intake-center { display: flex; justify-content: center; }
.intake-center .intake-card { width: 100%; }
/* На экране нового приёма заявки снимаем ограничение ширины .amp-body,
чтобы .intake-center центрировал карточку по всей ширине области, а не
внутри прижатого влево блока 1280px. .intake-center используется только
здесь, поэтому правка не затрагивает другие AMP-страницы. */
.amp-body:has(.intake-center) { max-width: none; }
/* Сетка организаций — карточки, не текст: ограничение читаемости в 1280px
только оставляло пустой хвост на широких экранах вместо того, чтобы
auto-fill сам разложил дополнительные колонки. */
.amp-body:has(.org-grid) { max-width: none; }
/* Скрипты и База знаний (общая вёрстка .doc-layout: список слева + текст/
таблица справа, .doc-main уже flex:1 1 auto) — тот же потолок 1280px не
давал панели документа развернуться на широких мониторах: у таблиц из
вставленного текста (см. скриншот пользователя) не хватало места и они
сжимались, хотя справа оставалось пустое поле. */
.amp-body:has(.doc-layout) { max-width: none; }
/* Экран приёма с вкладками форм: делаем .amp-view контейнером фиксированной
высоты со своим скроллом (только когда есть .intake-tabs), чтобы поля формы
прокручивались ВНУТРИ области, а панель вкладок липла к низу экрана (как в
AMP). На других AMP-страницах поведение прежнее (min-height + скролл страницы). */
.amp-view:has(.intake-tabs) { height: calc(100vh - 56px); }
/* Конструктор формы — тот же приём. Без этого палитра «Компоненты» (.fc-palette,
position:sticky) и нижняя панель сохранения (.fc-savebar) не липнут вообще:
.amp-view объявлен scroll-контейнером (overflow-y:auto), но имеет только
min-height, поэтому всегда растёт под контент, никогда не прокручивается сам —
а sticky отсчитывается именно от него, и смещение всегда выходит нулевым.
Прокручивать начинает .amp-view — и обе панели встают на место.
.fc-layout есть только на экране конструктора. */
.amp-view:has(.fc-layout) { height: calc(100vh - 56px); }
/* Нижняя панель вкладок форм — центрируем по ширине формы (стоит ровно под
карточкой) и прилипаем к низу области прокрутки. Короткая форма — панель сразу
под ней; длинная — панель закреплена снизу, поля формы скроллятся. */
.intake-tabs { position: sticky; bottom: -18px; z-index: 5; display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; align-items: center; max-width: 920px; margin: 18px auto 0; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-bottom: none; border-radius: 12px 12px 0 0; box-shadow: 0 -6px 16px rgba(15,23,42,.08); }
.intake-tab { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; max-width: 160px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.intake-tab:hover { border-color: color-mix(in srgb, var(--info) 45%, transparent); background: var(--info-soft); }
.intake-tab.active { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 65%, transparent); color: var(--info-fg); }
.intake-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Монохромный значок-документ (как на фото): SVG через mask, цвет = фон (наследует
muted у неактивной вкладки и brand у активной). */
.intake-tab-ico { width: 15px; height: 15px; flex: 0 0 auto; background-color: var(--muted); -webkit-mask: url("data:image/svg+xml,") center/contain no-repeat; mask: url("data:image/svg+xml,") center/contain no-repeat; }
.intake-tab.active .intake-tab-ico { background-color: #0284c7; }
@media (max-width: 700px) { .intake-form { grid-template-columns: 1fr; } .intake-card { max-width: none; } .intake-submit-row { flex-direction: column-reverse; } .intake-submit-row .btn { width: 100%; } }
/* Телефон: сайдбар становится выезжающей панелью (гамбургер слева в шапке,
см. #mobile-menu-btn), а не постоянной колонкой. Раньше здесь стояло
display:none — то есть на телефоне перейти куда-либо, кроме доски,
было физически нечем: меню профиля с тех же экранов давно отключено
(buildProfileMenu). */
@media (max-width: 640px) {
.mobile-menu-btn, .sidebar-backdrop { display: flex; }
.sidebar-backdrop { display: block; z-index: 44; }
.sidebar {
position: fixed; inset: 0 auto 0 0;
/* Выше топбара/доски (20 и ниже), но НАМЕРЕННО ниже модалок (.modal-
backdrop: 50) и тостов (100) — если модалка вдруг откроется, пока
панель ещё не успела закрыться, она не должна оказаться под ней. */
z-index: 45;
width: min(86vw, 300px);
transform: translateX(-100%);
transition: transform .22s var(--ease-out);
box-shadow: none;
}
.sidebar.mobile-open { transform: translateX(0); box-shadow: 8px 0 32px rgba(2, 6, 23, .35); }
/* Свёрнутый вид (иконки без подписей) не имеет смысла для выезжающей
панели на весь рост — на телефоне всегда показываем полную панель,
независимо от класса .collapsed (это desktop-состояние, персистится в
localStorage и телефон его не трогает). */
.sidebar.collapsed { width: min(86vw, 300px); }
.sidebar.collapsed .sb-brand,
.sidebar .sb-brand { display: flex; }
.sidebar.collapsed .sb-head,
.sidebar .sb-head { justify-content: flex-start; padding: 0 14px; }
.sidebar.collapsed .sb-group,
.sidebar .sb-group { display: block; }
.sidebar.collapsed .sb-label,
.sidebar .sb-label { display: inline; }
.sidebar.collapsed .sb-item,
.sidebar .sb-item { justify-content: flex-start; padding: 10px 12px; }
.sb-toggle { display: none; } /* сворачивание — desktop-only, на телефоне панель закрывают гамбургером/тапом по фону */
/* .sidebar теперь position:fixed и вне потока — margin-left у .app-main
ей под неё больше не нужен ни в каком состоянии. */
.sidebar.collapsed ~ .app-main,
.app-main { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-left: 0; }
}
header.topbar {
height: 56px;
background: var(--topbar-bg);
-webkit-backdrop-filter: saturate(160%) blur(10px);
backdrop-filter: saturate(160%) blur(10px);
border-bottom: 1px solid var(--line);
color: var(--text);
display: flex;
align-items: center;
gap: 10px;
padding: 0 18px;
position: sticky;
top: 0;
z-index: 20;
}
.topbar .logo { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.topbar .spacer { flex: 1; }
.admin-org-filter { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.admin-org-filter select { min-width: 160px; max-width: 240px; }
.topbar select {
height: 34px;
background: var(--card);
color: var(--text);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 0 10px;
font-weight: 500;
box-shadow: var(--shadow-sm);
}
.topbar select:hover { border-color: var(--border-strong); }
.topbar select:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.topbar .user { font-size: 12.5px; color: var(--muted); text-align: right; line-height: 1.25; }
.topbar .user b { color: var(--text); font-weight: 600; }
.ws-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); display: inline-block; margin-right: 6px; }
.ws-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
/* Квадратная кнопка-иконка (переключатель темы в шапке) */
.icon-btn {
width: 34px; height: 34px; flex: 0 0 auto; display: inline-grid; place-items: center;
border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--card); color: var(--text-2); box-shadow: var(--shadow-sm);
transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.icon-btn:hover { background: var(--accent-bg); color: var(--text); border-color: var(--border-strong); }
.theme-ico-sun { display: none; }
[data-theme="dark"] .theme-ico-sun { display: block; }
[data-theme="dark"] .theme-ico-moon { display: none; }
/* ---------- Profile dropdown menu (карточка пользователя + выход) ---------- */
.profile { position: relative; display: flex; align-items: center; gap: 6px; }
.profile.clickable { cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); transition: background .15s var(--ease); }
.profile.clickable:hover { background: var(--accent-bg); }
.profile .caret { display: inline-flex; color: var(--muted); transition: transform .15s var(--ease); }
.profile.open .caret { transform: rotate(180deg); }
/* Появление выпадающих панелей (профиль, меню админа). Анимация, а не
transition: display:none в transition не участвует, а анимация проигрывается
заново при каждом снятии .hidden. */
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.profile-menu {
position: absolute; top: calc(100% + 6px); right: 12px; z-index: 60;
background: var(--popover); color: var(--text);
border: 1px solid var(--line); border-radius: 12px;
box-shadow: var(--shadow-lg);
padding: 6px; min-width: 272px; max-height: 80vh; overflow-y: auto;
display: flex; flex-direction: column; gap: 2px;
animation: popIn .14s var(--ease-out);
}
.pm-group { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 9px 10px 4px; font-weight: 600; }
.pm-group:not(:first-child) { border-top: 1px solid var(--line); margin-top: 4px; }
.pm-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 14px; color: var(--text); cursor: pointer; transition: background .12s var(--ease); }
.pm-item:hover { background: var(--accent-bg); }
.pm-item.pm-primary { font-weight: 600; color: var(--brand-text); }
.pm-ico { width: 20px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--muted); }
.pm-item:hover .pm-ico, .pm-item.pm-primary .pm-ico { color: currentColor; }
/* Карточка пользователя: кто я + текущая организация, ниже — настройки и «Выйти» */
.pm-user { display: flex; align-items: center; gap: 11px; padding: 8px 10px 12px; }
.pm-user-ava { width: 38px; height: 38px; font-size: 14px; flex: 0 0 auto; }
.pm-user-meta { min-width: 0; }
.pm-user-name { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-user-role { font-size: 12px; color: var(--brand-text); font-weight: 600; margin-top: 1px; }
.pm-user-login { font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-org {
display: flex; align-items: center; gap: 7px; margin: 0 4px 6px; padding: 7px 9px;
background: var(--subtle); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--muted);
}
.pm-org .ico { color: var(--muted); flex: 0 0 auto; }
.pm-org span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Тема: сегментированный переключатель (как Tabs/ToggleGroup в shadcn/ui) */
.pm-theme { display: flex; flex-direction: column; gap: 6px; padding: 6px 10px 10px; }
.pm-theme-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.pm-theme-seg { display: flex; gap: 2px; padding: 3px; background: var(--accent-bg); border-radius: 9px; }
.pm-theme-btn {
flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
height: 28px; padding: 0 6px; border: 0; border-radius: 7px;
background: transparent; color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap;
transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
.pm-theme-btn:hover { color: var(--text); }
.pm-theme-btn.active { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
/* «Выйти» — отделено линией и окрашено в danger, чтобы не нажать случайно */
.pm-logout { border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-top: 2px; padding-top: 10px; color: var(--danger-fg); font-weight: 600; }
.pm-logout:hover { background: var(--danger-soft); }
.pm-logout .pm-ico { color: var(--danger-fg); }
/* ---------- Меню админ-действий в строке фильтров (справа после «Сбросить») ---------- */
.fb-menu { position: relative; margin-left: auto; }
.fb-menu-btn.open { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-dark); }
.fb-menu-dropdown {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
background: var(--card); color: var(--text);
border: 1px solid var(--line); border-radius: 12px;
box-shadow: var(--shadow-lg);
padding: 8px; min-width: 240px; max-width: calc(100vw - 24px);
max-height: 70vh; overflow-y: auto;
display: flex; flex-direction: column; gap: 2px;
animation: popIn .14s var(--ease-out);
}
.toolbar {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 18px;
background: var(--card);
border-bottom: 1px solid var(--line);
flex-wrap: wrap;
}
.toolbar .spacer { flex: 1; }
/* когда единственное, что могло бы показаться в тулбаре (кнопка массовой задачи),
скрыто — прячем и саму полосу, чтобы не было пустой белой строки */
.toolbar:has(> #bulk-noanswer-btn.hidden) { display: none; }
/* ---------- Filter bar ---------- */
.filterbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 18px; background: var(--card); border-bottom: 1px solid var(--line); }
.filterbar:empty { display: none; }
/* Тумблер «Фильтры» и обёртка «всё, кроме поиска» (buildFilterBar в app.js):
на десктопе контейнер как будто не существует (display:contents), тумблер
скрыт. Мобильная версия — в @media ниже. */
.filterbar-toggle { display: none; }
.filterbar-extra { display: contents; }
.flt-search {
flex: 1 1 220px; min-width: 180px; max-width: 340px; height: 36px; padding: 0 12px 0 34px;
border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none; color: var(--text);
background: var(--input-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 11px 50% / 15px 15px;
box-shadow: var(--shadow-sm);
}
.flt-search:hover, .flt-sel:hover { border-color: var(--border-strong); }
.flt-search:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }
/* Поиск по номеру среди всех операторов (входящий звонок) */
.lookup-box { flex-basis: 100%; width: 100%; background: var(--popover); border: 1px solid rgba(var(--brand-rgb), .45); border-radius: 12px; margin-top: 4px; overflow: hidden; box-shadow: var(--shadow-md); }
.lookup-head { background: var(--brand-soft); color: var(--brand-text); font-weight: 600; font-size: 12px; padding: 8px 12px; }
.lookup-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); cursor: pointer; }
.lookup-item:hover { background: var(--subtle); }
.lookup-item .avatar { width: 28px; height: 28px; font-size: 11px; flex: 0 0 auto; }
.lk-main { flex: 1; min-width: 0; }
.lk-name { font-weight: 600; font-size: 13px; }
.lk-sub { font-size: 12px; }
.lk-open { color: var(--brand-text); font-size: 12px; font-weight: 600; white-space: nowrap; }
.flt-sel { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none; background: var(--input-bg); color: var(--text); max-width: 200px; box-shadow: var(--shadow-sm); }
.flt-sel:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }
.flt-date-group { display: inline-flex; gap: 4px; }
.flt-date, .flt-time { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none; background: var(--input-bg); color: var(--text); }
.flt-date:focus, .flt-time:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }
.flt-time { width: 100px; }
.flt-time:disabled { background: var(--subtle); color: var(--muted-2); }
/* ---------- Диапазон дат «с — до» (попап-календарь на доске) ---------- */
.daterange-wrap { position: relative; display: inline-flex; }
.flt-daterange-btn {
padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; outline: none;
background: var(--card); cursor: pointer; font: inherit; white-space: nowrap;
}
.flt-daterange-btn:hover { border-color: var(--brand); }
.daterange-pop {
position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
background: var(--card); color: var(--text);
border: 1px solid var(--line); border-radius: 12px;
box-shadow: 0 18px 44px rgba(2,6,23,.30);
padding: 12px; width: 260px;
}
.daterange-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.daterange-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.daterange-weekdays span { min-width: 0; }
.daterange-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.daterange-cell {
min-width: 0; width: 100%; box-sizing: border-box; aspect-ratio: 1;
margin: 0; padding: 0; border: none; background: transparent; border-radius: 8px;
font: inherit; font-size: 13px; cursor: pointer; color: var(--text);
}
.daterange-cell:hover { background: var(--accent-bg); }
.daterange-cell.empty { cursor: default; pointer-events: none; }
.daterange-cell.today { box-shadow: inset 0 0 0 1px var(--brand); }
.daterange-cell.in-range { background: rgba(var(--brand-rgb), .12); border-radius: 0; }
.daterange-cell.endpoint { background: var(--brand); color: #fff; border-radius: 8px; }
.daterange-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; justify-content: space-between; }
.app-form-picker { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; }
.app-form-picker .muted { font-size: 13px; white-space: nowrap; }
.app-form-sel { max-width: 280px; }
/* ---------- Board ---------- */
.board {
display: flex;
gap: 14px;
padding: 18px;
overflow-x: auto;
align-items: flex-start;
min-height: calc(100vh - 56px - 58px);
}
.column {
flex: 0 0 290px;
background: var(--column-bg);
border: 1px solid transparent;
border-radius: 14px;
padding: 10px;
max-height: calc(100vh - 120px);
display: flex;
flex-direction: column;
}
[data-theme="dark"] .column { border-color: var(--line); }
.column h3 {
margin: 2px 4px 10px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--muted);
display: flex;
align-items: center;
justify-content: space-between;
}
.column h3 .n {
background: var(--card);
color: var(--text-2);
border: 1px solid var(--line);
border-radius: 999px;
padding: 0 8px;
min-width: 24px;
text-align: center;
font-size: 11.5px;
line-height: 20px;
}
.col-body { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px; }
/* «Показать ещё N»: колонки с сотнями лидов рендерятся пачками. Не карточка —
выделена пунктиром, чтобы не путаться со сделками при быстром скролле. */
.col-more {
flex: 0 0 auto; margin-top: 2px; padding: 9px; border: 1.5px dashed var(--border-strong);
border-radius: var(--radius); background: transparent; color: var(--muted);
font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: center;
transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}
.col-more:hover { background: var(--card); border-color: var(--brand); color: var(--brand-text); }
.card {
position: relative;
background: var(--card);
border: 1px solid var(--line);
border-radius: 12px;
padding: 11px 12px;
box-shadow: var(--shadow-sm);
cursor: pointer;
transition: transform .12s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: rgba(var(--brand-rgb), .35); }
/* Клавиатурная навигация (Tab) по доске — tabindex + keydown в attachCardInteractions */
.card:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-md); border-color: var(--brand); }
.card .name { font-weight: 600; font-size: 14px; color: var(--text); letter-spacing: -.005em; }
.card .phone { color: var(--muted); font-size: 12.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.card .meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* Стикеры статуса: мягкая заливка + тонкая рамка того же тона. Цвета статусов
могут быть переопределены редактором статусов (statusBadge() в app.js). */
.badge {
font-size: 11px; font-weight: 600; letter-spacing: .1px;
border-radius: 999px; padding: 2px 9px; line-height: 1.45;
border: 1px solid transparent;
}
.badge.new { background: var(--brand-soft); color: var(--brand-text); border-color: rgba(var(--brand-rgb), .2); }
.badge.informed { background: var(--ok-soft); color: var(--ok-fg); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.badge.no_answer { background: var(--danger-soft); color: var(--danger-fg); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.badge.callback { background: var(--warn-soft); color: var(--warn-fg); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.badge.success { background: var(--ok-soft); color: var(--ok-fg); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.badge.fail { background: var(--accent-bg); color: var(--text-2); border-color: var(--line); }
.who { font-size: 11.5px; color: var(--text-2); display: inline-flex; align-items: center; gap: 5px; }
.avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 10px; display: grid; place-items: center; font-weight: 700; }
/* Не назначен — пунктирный контур однозначнее читается как «пусто» */
.avatar.none { background: var(--card); color: var(--muted-2); border: 1.5px dashed var(--border-strong); font-size: 9px; }
.empty { color: var(--muted); font-size: 13px; text-align: center; padding: 24px 8px; }
/* ---------- Modal ---------- */
@keyframes modalBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-backdrop {
position: fixed; inset: 0;
background: var(--overlay);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
display: grid; place-items: center;
z-index: 50; padding: 20px;
animation: modalBackdropIn .15s var(--ease-out);
}
.modal {
background: var(--card);
color: var(--text);
border: 1px solid var(--line);
border-radius: 16px;
width: 100%;
max-width: 560px;
max-height: 88vh;
overflow: auto;
box-shadow: var(--shadow-lg);
animation: modalIn .18s var(--ease-out);
}
.modal.wide { max-width: 720px; }
@media (prefers-reduced-motion: reduce) {
.modal-backdrop, .modal, .profile-menu, .fb-menu-dropdown { animation: none !important; }
}
.modal-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 16px 20px; border-bottom: 1px solid var(--line);
position: sticky; top: 0; background: var(--card); z-index: 2;
}
.modal-head h2 { margin: 0; font-size: 16.5px; font-weight: 650; letter-spacing: -.01em; }
.modal-head .x {
flex: 0 0 auto; display: inline-grid; place-items: center; width: 32px; height: 32px;
border: none; border-radius: 8px; background: transparent;
font-size: 20px; color: var(--muted); cursor: pointer; line-height: 1;
transition: background .15s var(--ease), color .15s var(--ease);
}
.modal-head .x:hover { background: var(--accent-bg); color: var(--text); }
.modal-body { padding: 18px 20px; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; align-items: center; position: sticky; bottom: 0; background: var(--card); }
.modal-foot .confirm-text { color: var(--danger-fg); font-weight: 600; font-size: 13px; margin-right: auto; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Инлайн-форма «создать нового пользователя» во вкладке Пользователи (настройки орг.) */
.user-create-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 640px; margin-top: 4px; }
.user-create-grid > button { grid-column: 1 / -1; }
.user-create-grid input, .user-create-grid select {
width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: var(--card);
}
.user-create-grid input:focus, .user-create-grid select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
@media (max-width: 560px) { .user-create-grid { grid-template-columns: 1fr; } }
.row { display: flex; gap: 10px; align-items: center; }
/* Контролы в строке тянутся на всю доступную ширину и оформлены единообразно
с остальными полями (бордер/паддинг/скругление) — иначе выглядят как голые
нативные селекты, а плейсхолдер обрезается. */
.row > input:not([type=checkbox]):not([type=radio]):not([type=color]),
.row > select,
.row > textarea {
flex: 1 1 auto; min-width: 0;
padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; background: var(--card); font: inherit;
}
.row > input:focus, .row > select:focus, .row > textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
/* Селект роли — узкий, не во всю ширину (роль короткая). */
.row > select.role-pick { flex: 0 0 auto; width: 168px; }
/* Строки создания «контролы + кнопка» не растягиваем на всю ширину страницы. */
.row.create { max-width: 640px; }
@media (max-width: 560px) { .row.create { flex-wrap: wrap; } .row.create > .role-pick, .row.create > .btn { flex: 1 1 auto; width: auto; } }
/* Панель поиска/добавления во вкладке «Пользователи» (settingsPeople) */
.member-add-head { align-items: flex-end; }
.member-add-head > .field { flex: 0 0 auto; margin: 0; }
.member-search-results { max-height: 320px; overflow-y: auto; }
/* Переключатель «В организации» / «Все пользователи» — сегментированный, чтобы
читался как два вида ОДНОГО списка, а не как два разных раздела. */
.people-scope { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; align-self: flex-start; }
.people-scope-btn {
background: var(--card); border: 0; padding: 8px 14px; font-size: 13px; font-weight: 600;
color: var(--muted); cursor: pointer; transition: background .12s, color .12s;
}
.people-scope-btn + .people-scope-btn { border-left: 1px solid var(--line); }
.people-scope-btn:hover { background: var(--subtle); }
.people-scope-btn.active { background: var(--brand-soft); color: var(--brand-dark); }
.people-tools { margin-top: 2px; }
.people-tools .row.create { max-width: 980px; }
.org-branch-filter { align-items: flex-end; max-width: 720px; }
.org-branch-filter > .btn { flex: 0 0 auto; }
@media (max-width: 560px) { .people-scope { width: 100%; } .people-scope-btn { flex: 1 1 0; } }
.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin: 18px 0 8px; }
.kv { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.kv span:first-child { color: var(--muted); }
/* ---------- ПУТЬ (маршрут по воронкам) ---------- */
.path { background: var(--subtle); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 6px; }
.path-title { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 8px; }
.path-bar { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--brand), #93c5fd); margin-bottom: 12px; }
.path-track { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.path-node { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); }
.path-node.current { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), .15); }
.path-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); flex: 0 0 auto; }
.path-node.current .path-dot { background: var(--brand); }
.path-name { font-weight: 600; font-size: 13px; }
.path-pipe { font-size: 10px; color: var(--muted); }
.path-date { font-size: 11px; color: var(--muted); }
.path-arrow { color: var(--muted); font-size: 14px; }
/* ---------- Заметки ---------- */
/* ---------- Lead modal: two-column layout with a right-side Notes panel ---------- */
.modal.lead-modal { max-width: 940px; }
.lead-layout { display: flex; gap: 18px; align-items: stretch; }
.lead-main { flex: 1 1 auto; min-width: 0; }
.notes-panel {
flex: 0 0 300px;
display: flex; flex-direction: column;
border: 1px solid var(--line); border-radius: 12px; background: var(--subtle);
min-height: 420px; align-self: stretch;
}
.notes-head { font-weight: 700; font-size: 15px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.notes-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.notes-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 24px 8px; margin: auto 0; }
.note-item { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; }
.note-text { font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.note-meta { font-size: 11px; color: var(--muted); margin-top: 4px; }
.note-add-row { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.note-add-row input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; outline: none; }
.note-add-row input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
/* Раньше была тёмно-серой, выпадала из фирменной индиго-палитры (.btn уже
индиго по умолчанию) — просто убираем переопределение цвета. */
.note-add { white-space: nowrap; }
@media (max-width: 760px) {
.lead-layout { flex-direction: column; }
.notes-panel { flex-basis: auto; min-height: 300px; }
}
.activity { list-style: none; margin: 0; padding: 0; }
.activity li { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; align-items: baseline; }
.activity li .t { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 88px; }
.activity li .act-ico { flex: 0 0 auto; }
.activity li .act-main { flex: 1; }
.activity li .act-by { margin-left: 6px; font-size: 12px; }
.activity li .act-by::before { content: "· "; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--subtle); border-radius: 20px; padding: 4px 10px; font-size: 12px; }
.stepper { display: flex; gap: 8px; margin-bottom: 16px; }
.step { flex: 1; text-align: center; font-size: 12px; color: var(--muted); padding-bottom: 8px; border-bottom: 3px solid var(--line); }
.step.active { color: var(--brand); border-color: var(--brand); font-weight: 700; }
.step.done { color: var(--ok); border-color: var(--ok); }
table.preview { width: 100%; border-collapse: collapse; font-size: 12px; }
table.preview th, table.preview td { border: 1px solid var(--line); padding: 5px 7px; text-align: left; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.preview th { background: var(--accent-bg); }
/* ---------- Import: custom fields + templates ---------- */
.custom-fields { display: flex; flex-direction: column; gap: 8px; }
.custom-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.tpl-list { margin-top: 14px; }
.tpl-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 6px; }
.tpl-row.sel { border-color: var(--brand); background: var(--brand-soft); }
.tpl-row .tpl-name { flex: 1; font-weight: 600; font-size: 14px; }
/* ---------- Отчёт обзвона (admin) ---------- */
.cr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.cr-tile { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.cr-tile b { font-size: 22px; line-height: 1.1; }
.cr-tile span { font-size: 12px; color: var(--muted); }
.cr-list { list-style: none; margin: 0; padding: 0; }
.cr-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 6px; font-size: 14px; }
/* ---------- Lead fields manager (admin) ---------- */
.fields-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.field-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
.field-row input { padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; width: 100%; }
.field-row input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
/* ---------- Stats / сводка ---------- */
/* auto-fit вместо жёстких 4 колонок: карточка автодозвона использует те же
.stat-tiles, и при 4 плитках в узком контейнере они раньше сплющивались. */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.stat-tile {
position: relative; display: flex; align-items: center; gap: 14px;
background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: 16px 18px 16px 20px; box-shadow: var(--shadow-sm); overflow: hidden;
transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.stat-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent, var(--brand)); }
.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(var(--brand-rgb), .35); }
.stat-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; }
.stat-meta { min-width: 0; }
/* Число — крупная доминанта плитки; подпись под ним капсом помельче, чтобы
пара «значение + что это» читалась сверху вниз одним движением глаза. */
.stat-val { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.stat-lbl { font-size: 11px; color: var(--muted); margin-top: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.stat-tile.danger { --accent: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-soft); }
.stat-tile.danger .stat-val { color: var(--danger); }
/* чипы активности за день — цветная точка на тип действия */
.chip.act { display: inline-flex; align-items: center; gap: 7px; background: var(--card); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; }
.chip.act .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); flex: 0 0 auto; }
.chip.act b { font-variant-numeric: tabular-nums; margin-left: 2px; }
/* бары «сделки по статусам» */
.bars { display: flex; flex-direction: column; gap: 11px; }
.bar-row { display: grid; grid-template-columns: 152px 1fr 78px; gap: 12px; align-items: center; }
.bar-row:hover .bar-fill { filter: brightness(.93); }
.bar-label { font-size: 13px; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: var(--column-bg); border-radius: 999px; height: 14px; overflow: hidden; }
.bar-fill { height: 100%; min-width: 3px; border-radius: 999px; transition: width .45s cubic-bezier(.4, 0, .2, 1); }
.bar-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--text); }
.bar-pct { display: inline-block; margin-left: 6px; font-style: normal; font-weight: 600; font-size: 11.5px; color: var(--muted); }
/* таблица операторов */
.stat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stat-table th, .stat-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; }
/* Шапка липнет при прокрутке длинного списка операторов — иначе на середине
таблицы уже не видно, какой столбец что означает. */
.stat-table th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; position: sticky; top: 0; background: var(--card); z-index: 1; }
.stat-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.stat-table th.num { text-align: right; }
.stat-table td.num.strong { font-weight: 800; color: var(--brand); }
.stat-table .small { font-size: 12px; }
.stat-table tbody tr { transition: background .12s var(--ease); }
.stat-table tbody tr:hover { background: var(--subtle); }
.stat-table tbody tr.top td { background: var(--brand-soft); }
.stat-table tbody tr:last-child td { border-bottom: none; }
.op-cell { display: flex; align-items: center; gap: 10px; }
.op-cell .avatar { width: 30px; height: 30px; font-size: 12px; flex: 0 0 auto; }
/* Место в рейтинге: раньше топ-3 отмечались эмодзи-медалями (единственные
растровые глифы в таблице). Теперь цифра в кружке, у призовых мест —
своя окраска: золото / серебро / бронза. */
.op-rank {
width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center;
border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--muted);
font-variant-numeric: tabular-nums;
}
.op-rank.rank-1 { background: var(--warn-soft); color: var(--warn-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); }
.op-rank.rank-2 { background: var(--accent-bg); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border-strong); }
.op-rank.rank-3 { background: var(--warn-soft); color: var(--warn-fg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); }
.act-cell { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.act-num { font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; min-width: 24px; text-align: right; }
.mini-track { width: 88px; height: 7px; background: var(--column-bg); border-radius: 999px; overflow: hidden; flex: 0 0 auto; }
.mini-fill { height: 100%; background: linear-gradient(90deg, var(--brand), #818cf8); border-radius: 999px; transition: width .45s cubic-bezier(.4, 0, .2, 1); }
/* Сводка как отдельный экран */
.stats-view { padding: 20px; overflow-y: auto; min-height: calc(100vh - 56px); }
/* Шапка: слева «назад + заголовок», справа сгруппированные инструменты
(период / заливки / выгрузка-обновление). Раньше всё шло одной сплошной
лентой кнопок вперемешку с заголовком — не за что зацепиться глазу.
Липнет к верху: при прокрутке длинной сводки переключатель дня и
«Обновить» остаются под рукой. */
.stats-head {
display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
position: sticky; top: 0; z-index: 5;
background: var(--accent-bg); padding: 4px 0 12px;
}
.stats-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.stats-head-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
/* Выбор заливок в шапке: имена файлов бывают длинными («Самарканд ЯНВАРЬ №2
491.xlsx · 23.07.2026 · 461 шт.») и распирали панель на пол-экрана.
Ограничиваем ширину — подпись сама обрежется с многоточием (.msel-label). */
.stats-head-tools .msel { width: 240px; flex: 0 0 auto; }
.stats-head .spacer { flex: 1; }
.stats-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.3px; display: inline-flex; align-items: center; gap: 8px; }
/* Переключатель дня — единый сегмент «◀ дата ▶» вместо трёх независимых
кнопок вразнобой: сразу читается как один орган управления периодом. */
.stats-daynav { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; }
.stats-daynav-btn {
display: grid; place-items: center; width: 30px; border: none; background: transparent;
color: var(--muted); cursor: pointer; transition: background .12s var(--ease), color .12s var(--ease);
}
.stats-daynav-btn:hover:not(:disabled) { background: var(--accent-bg); color: var(--text); }
.stats-daynav-btn:disabled { opacity: .35; cursor: default; }
.stats-daynav-btn .ico.flip { transform: rotate(180deg); }
.stats-daynav .stats-date { border: none; border-radius: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.stats-date { padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); outline: none; background: var(--card); }
.stats-date:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }
/* «Сегодня» при выбранной текущей дате — подсвечен как активный фильтр */
.btn.ghost.is-active { background: var(--brand-soft); border-color: rgba(var(--brand-rgb), .35); color: var(--brand-dark); }
.stats-body { max-width: 1240px; display: flex; flex-direction: column; gap: 16px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: 16px; align-items: start; }
.stats-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.stats-card-head { font-weight: 700; font-size: 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.stats-card-head .ico { color: var(--muted); }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 8px; text-align: center; }
.es-ico { color: var(--border-strong); }
@media (max-width: 860px) { .stats-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
.stat-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.stats-view { padding: 12px; }
.bar-row { grid-template-columns: 96px 1fr 62px; gap: 8px; }
.mini-track { width: 48px; }
/* На телефоне шапка занимала пол-экрана: заголовок, «назад» и 6 инструментов
в столбик. Прячем дублирующий заголовок (раздел и так открыт из меню),
инструменты пускаем в одну прокручиваемую строку. */
.stats-head { gap: 8px; padding: 2px 0 10px; }
.stats-title { font-size: 18px; }
.stats-head-tools { width: 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.stats-head-tools > * { flex: 0 0 auto; }
/* Плитки: значение над подписью, компактнее по высоте */
.stat-tile { padding: 12px 12px 12px 14px; gap: 10px; border-radius: var(--radius); }
.stat-ico { width: 36px; height: 36px; border-radius: 10px; }
.stat-val { font-size: 22px; }
.stat-lbl { font-size: 10px; margin-top: 4px; }
.stats-card { padding: 14px; border-radius: var(--radius); }
/* Таблица операторов на узком экране: компактнее ячейки, чтобы влезала
без агрессивного горизонтального скролла */
.stat-table th, .stat-table td { padding: 9px 8px; }
.op-cell { gap: 7px; }
.op-cell .avatar { width: 26px; height: 26px; }
}
/* поле с вариантами (Регион и т.п.): имя+кнопки сверху, textarea со значениями снизу */
.field-row.col { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--subtle); }
.field-row.col .row input { flex: 1; }
.opts { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; outline: none; font-family: inherit; font-size: 13px; resize: vertical; }
.opts:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
/* Справочник: таблица значений (статус, даты создания/обновления/удаления, действия) */
.cat-add { margin-top: 10px; }
/* только горизонтальный скролл при узкой модалке; по вертикали прокручивается
сама модалка (.modal), иначе получались два скроллбара рядом */
.cat-table-wrap { overflow-x: auto; margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; }
.cat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cat-table th, .cat-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
.cat-table th { color: var(--muted); font-size: 12px; font-weight: 600; }
.cat-table tbody tr:last-child td { border-bottom: none; }
.cat-table td.cat-name { white-space: normal; min-width: 160px; }
.cat-table tr.deleted { opacity: .55; }
.cat-num { color: var(--muted); }
.cat-date { color: var(--muted); }
.cat-status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.cat-status.on { background: rgba(22,163,74,.16); color: #22c55e; cursor: pointer; }
.cat-status.off { background: rgba(148,163,184,.18); color: var(--muted-2); cursor: pointer; }
.cat-status.del { background: rgba(239,68,68,.15); color: #ef4444; }
.cat-actions { display: flex; gap: 6px; }
/* Экспорт справочников в другую организацию: список чекбоксов */
.exp-cat-list { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.exp-cat-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.exp-cat-row input[type="checkbox"] { width: auto; flex: none; }
.exp-all { margin-bottom: 6px; }
/* Свой выпадающий список с поиском (searchableSelect) — цвета из переменных темы,
чтобы совпадало с полями формы (в т.ч. под Chrome force-dark). */
.ss { position: relative; }
.ss-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; max-height: 260px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(2,6,23,.22); padding: 4px; }
.ss-menu.hidden { display: none; }
.ss-opt { padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--text); white-space: normal; }
.ss-opt:hover, .ss-opt.active { background: rgba(var(--brand-rgb), .12); }
.ss-opt.sel { font-weight: 600; }
.ss-empty { padding: 8px 10px; }
/* строки редактора статусов */
.status-row { display: flex; align-items: center; gap: 8px; }
.status-row input:not(.color-inp) { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; outline: none; }
.status-row input:not(.color-inp):focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
.color-inp { width: 38px; height: 38px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; flex: 0 0 auto; }
/* группы чекбоксов (мультивыбор в «Распределить») */
.chk-group { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 6px 0; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.chk input { width: 16px; height: 16px; accent-color: var(--brand); }
/* мультивыбор выпадающей панелью (кнопка + чекбоксы по клику, как flt-sel) */
.msel { position: relative; }
.msel-trigger {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card);
font: inherit; font-size: 14px; text-align: left; cursor: pointer; color: inherit;
transition: border-color .12s ease, box-shadow .12s ease;
}
.msel-trigger:hover { border-color: var(--border-strong); }
.msel-trigger:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
.msel.open .msel-trigger { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); }
.msel-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msel-caret { color: var(--muted); font-size: 11px; flex: 0 0 auto; transition: transform .14s ease; }
.msel.open .msel-caret { transform: rotate(180deg); }
.msel-panel {
/* left+right (не width:max-content) — иначе ellipsis на подписях (см. ниже)
обнуляет их "естественную" ширину и панель схлопывается в узкую колонку */
position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 6; min-width: 200px;
background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
padding: 8px; max-height: 220px; overflow-y: auto; overflow-x: hidden;
opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top left;
transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}
.msel.open .msel-panel {
opacity: 1; visibility: visible; transform: translateY(0) scale(1);
transition: opacity .14s ease, transform .14s ease;
}
/* .chk строки внутри панели — это