/*
* Дизайн-система crm-suite — один файл токенов + кастомных компонентов
* поверх Bootstrap 5.3 (Bootstrap остаётся за сетку/утилиты/формы-заготовки,
* но не за цвет/типографику/карточки — те переопределены здесь).
*
* Подключается в templates/base.html ПОСЛЕ bootstrap.min.css, поэтому любой
* `--bs-*` токен, переопределённый ниже, побеждает бутстраповский дефолт.
* React-доска задач (frontend/src/index.css) держит копию цветовых токенов
* вручную — сборка CRA не подключает этот файл напрямую, см. HANDOFF.md.
*/
:root {
/* Нейтрали — тёплый графит, не чистый Bootstrap-серый */
--ink-900: #211D2C;
--ink-700: #423C52;
--ink-500: #6B6478;
--ink-300: #A79FB0;
--ink-100: #E3DFE8;
--ink-50: #F5F3F7;
--surface: #FFFFFF;
/* Акцент — слива/баклажан, единственный «фирменный» цвет. 300/400 —
светлые оттенки для текста/иконок на тёмном сайдбаре (--ink-900):
600/700 сами по себе слишком тёмные, чтобы читаться на почти-чёрном
фоне так же чётко, как раньше читался светло-синий #6ea8fe. */
--accent-700: #4A2E73;
--accent-600: #5F3D8F;
--accent-400: #8C6BB8;
--accent-300: #B7A0DE;
--accent-100: #EEE7F7;
/* Семантика — отдельно от акцента, чтобы статус не путался с брендом */
--success-700: #176B44;
--success-600: #1E8E5A;
--success-100: #E4F6ED;
--warning-600: #C77A1F;
--warning-100: #FBF0DD;
--danger-700: #A6324A;
--danger-600: #C7405C;
--danger-100: #FBE4E9;
--info-600: #2A6FB0;
--info-100: #E4F0FB;
/* Типографика */
--font-display: 'Golos Text', 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
/* Форма */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 18px;
--shadow-sm: 0 1px 2px rgba(33, 29, 44, .06), 0 1px 8px rgba(33, 29, 44, .04);
--shadow-md: 0 4px 20px rgba(33, 29, 44, .09), 0 2px 6px rgba(33, 29, 44, .05);
/* Переопределение переменных Bootstrap — лучший из двух миров: где
Bootstrap сам ссылается на свои же переменные (ссылки, фокус-кольцо,
часть form-контролов), эффект бесплатный; для .btn-primary и т.п.
ниже ещё есть явные точечные правила, т.к. полагаться только на
каскад переменных Bootstrap не гарантия для каждого компонента. */
--bs-primary: var(--accent-600);
--bs-primary-rgb: 95, 61, 143;
--bs-link-color: var(--accent-600);
--bs-link-color-rgb: 95, 61, 143;
--bs-link-hover-color: var(--accent-700);
--bs-link-hover-color-rgb: 74, 46, 115;
--bs-body-font-family: var(--font-body);
--bs-body-color: var(--ink-900);
--bs-body-bg: var(--ink-50);
--bs-border-color: var(--ink-100);
--bs-border-radius: var(--radius-sm);
--bs-border-radius-lg: var(--radius-md);
--bs-border-radius-sm: 6px;
--bs-focus-ring-color: rgba(95, 61, 143, .25);
}
body {
font-family: var(--font-body);
background: var(--ink-50);
color: var(--ink-900);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -.01em;
color: var(--ink-900);
}
a { color: var(--accent-600); }
a:hover { color: var(--accent-700); }
::selection { background: var(--accent-100); color: var(--accent-700); }
/* ===== Кнопки ===== */
.btn { font-weight: 600; border-radius: var(--radius-sm); }
.btn-primary {
--bs-btn-bg: var(--accent-600);
--bs-btn-border-color: var(--accent-600);
--bs-btn-hover-bg: var(--accent-700);
--bs-btn-hover-border-color: var(--accent-700);
--bs-btn-active-bg: var(--accent-700);
--bs-btn-active-border-color: var(--accent-700);
--bs-btn-disabled-bg: var(--accent-600);
--bs-btn-disabled-border-color: var(--accent-600);
--bs-btn-focus-shadow-rgb: 95, 61, 143;
}
.btn-outline-primary {
--bs-btn-color: var(--accent-600);
--bs-btn-border-color: var(--accent-600);
--bs-btn-hover-bg: var(--accent-600);
--bs-btn-hover-border-color: var(--accent-600);
--bs-btn-active-bg: var(--accent-600);
--bs-btn-active-border-color: var(--accent-600);
--bs-btn-focus-shadow-rgb: 95, 61, 143;
}
/* ===== List-group (фильтры вывода из оборота) — Bootstrap хардкодит
--bs-list-group-active-bg в свой стандартный синий, а не наследует
--bs-primary, поэтому точечный override. ===== */
.list-group-item.active {
--bs-list-group-active-bg: var(--accent-600);
--bs-list-group-active-border-color: var(--accent-600);
}
.list-group-item-action:hover { background: var(--ink-50); }
.dropdown-item.active, .dropdown-item:active {
--bs-dropdown-link-active-bg: var(--accent-600);
--bs-dropdown-link-active-color: #fff;
}
.page-item.active .page-link {
--bs-pagination-active-bg: var(--accent-600);
--bs-pagination-active-border-color: var(--accent-600);
}
/* ===== Формы ===== */
.form-control, .form-select {
border-color: var(--ink-100);
border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus {
border-color: var(--accent-600);
box-shadow: 0 0 0 .2rem var(--accent-100);
}
.form-label { font-weight: 600; color: var(--ink-700); font-size: .9rem; }
.form-check-input:checked { background-color: var(--accent-600); border-color: var(--accent-600); }
.form-check-input:focus { border-color: var(--accent-600); box-shadow: 0 0 0 .2rem var(--accent-100); }
/* ===== Карточки ===== */
.card {
border: none;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.card-body { padding: 20px; }
/* Карточка-форма — замена разбросанным
class="card card-body mb-4" style="max-width: 640px;" по шаблонам. */
.panel {
background: var(--surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 24px;
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
.panel-wide { max-width: 880px; }
/* Единая центрированная колонка для страниц-настроек, где несколько
разноширинных блоков (.panel/.data-table-wrap с собственным inline
max-width) раньше выстраивались по левому краю .app-content, а не по
центру экрана — см. kiz/company_settings.html. Внутри такой колонки
.panel/.data-table-wrap сами растягиваются на всю её ширину, чтобы все
блоки совпадали по краям. */
.settings-col { max-width: 960px; margin: 0 auto; }
.settings-col .panel { max-width: none; margin: 0; }
.settings-col .data-table-wrap { max-width: none; }
.settings-col .module-link { max-width: none; }
/* ===== Алерты/бейджи, задействованные как есть ===== */
.alert { border: none; border-radius: var(--radius-sm); }
/* ===== KPI-плитки — замена сплошным text-bg-warning/text-bg-success ===== */
.kpi-row { display: flex; gap: 12px; flex-wrap: wrap; }
.kpi-tile {
flex: 1 1 160px;
min-width: 0;
background: var(--surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 14px 16px;
border-left: 4px solid var(--tile-accent, var(--ink-300));
text-decoration: none;
color: inherit;
display: block;
transition: box-shadow .15s ease, transform .15s ease;
}
.kpi-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); color: inherit; }
.kpi-tile .kpi-label {
font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
color: var(--ink-500); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-tile .kpi-value {
font-family: var(--font-display); font-size: 1.65rem; font-weight: 700;
color: var(--ink-900); font-variant-numeric: tabular-nums; margin-top: 2px;
}
.kpi-tile .kpi-sub { font-size: .75rem; color: var(--ink-500); margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi-tile .kpi-value.tone-success, .kpi-tile .kpi-value.tone-danger { font-variant-numeric: tabular-nums; }
.kpi-tile .kpi-value.tone-success { color: var(--success-600); }
.kpi-tile .kpi-value.tone-danger { color: var(--danger-600); }
.kpi-tile.tone-accent { --tile-accent: var(--accent-600); }
.kpi-tile.tone-success { --tile-accent: var(--success-600); }
.kpi-tile.tone-warning { --tile-accent: var(--warning-600); }
.kpi-tile.tone-danger { --tile-accent: var(--danger-600); }
.kpi-tile.tone-neutral { --tile-accent: var(--ink-300); }
/* Компактные плитки-фильтры на странице «КИЗ» (kiz/items.html): все статусы в
одну-две строки, выбранный — с обводкой цветом плитки. */
.kpi-row.kpi-compact { gap: 8px; }
.kpi-row.kpi-compact .kpi-tile { flex: 1 1 120px; padding: 8px 12px; }
.kpi-row.kpi-compact .kpi-label { font-size: .66rem; white-space: normal; line-height: 1.2; }
.kpi-row.kpi-compact .kpi-value { font-size: 1.3rem; }
.kpi-tile.active { box-shadow: 0 0 0 2px var(--tile-accent, var(--ink-300)), var(--shadow-md); }
/* Панель инструментов и панель действия над таблицей на странице «КИЗ». */
.kiz-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.kiz-toolbar-sep { width: 1px; align-self: stretch; background: var(--ink-100, #e5e7eb); }
.action-bar {
display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px;
background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
padding: 12px 16px; margin-bottom: 12px;
}
/* ===== Статус-пилюли — замена серым .badge.bg-secondary ===== */
.pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px;
border-radius: 999px;
font-size: .78rem; font-weight: 600;
background: var(--pill-bg, var(--ink-100));
color: var(--pill-fg, var(--ink-700));
white-space: nowrap;
line-height: 1.5;
}
.pill-success { --pill-bg: var(--success-100); --pill-fg: var(--success-600); }
.pill-warning { --pill-bg: var(--warning-100); --pill-fg: var(--warning-600); }
.pill-danger { --pill-bg: var(--danger-100); --pill-fg: var(--danger-600); }
.pill-info { --pill-bg: var(--info-100); --pill-fg: var(--info-600); }
.pill-neutral { --pill-bg: var(--ink-100); --pill-fg: var(--ink-700); }
.pill-accent { --pill-bg: var(--accent-100); --pill-fg: var(--accent-700); }
/* ===== Таблицы данных ===== */
.data-table-wrap {
border-radius: var(--radius-md);
overflow: auto;
box-shadow: var(--shadow-sm);
background: var(--surface);
}
.data-table { width: 100%; border-collapse: collapse; margin: 0; font-size: .92rem; }
.data-table thead th {
position: sticky; top: 0; z-index: 1;
background: var(--ink-50); color: var(--ink-500);
font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--ink-100);
white-space: nowrap;
}
.data-table tbody td { padding: 10px 14px; border-bottom: 1px solid var(--ink-50); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--accent-100); }
.data-table .num { font-variant-numeric: tabular-nums; text-align: right; }
.data-table .mono { font-family: var(--font-mono); font-size: .85em; }
.data-table tfoot td {
font-weight: 700; background: var(--ink-50); border-top: 2px solid var(--ink-100); border-bottom: none;
}
/* Компактный вариант — опциональный модификатор (класс на .data-table
самой), не трогает базовые правила выше: их используют многие таблицы
в проекте (kiz/ozon/tasks/worktime/sales_reports и т.д.), а компактность
нужна была только для списка кампаний автоставок (много строк, мало
данных в каждой) — см. HANDOFF.md от 2026-09-28. */
.data-table--compact thead th { padding: 6px 14px; }
.data-table--compact tbody td { padding: 4px 14px; }
/* Плотный вариант — колонок много (таблица запросов автоставок, много
узких числовых столбцов: показы/клики/CTR/заказы/шт/расход/позиция/CPC/
CPM), задача — влезть в ширину страницы без горизонтального скролла.
Сочетается с --compact (тот же элемент несёт оба класса) и режет
горизонтальные отступы и шрифт ячеек ещё сильнее. */
.data-table--dense thead th { padding: 6px 6px; font-size: .66rem; letter-spacing: 0; }
.data-table--dense tbody td { padding: 4px 6px; font-size: .8rem; }
/* Сортируемые заголовки — клик по th меняет порядок строк (JS на
странице, см. campaign_list.html). Стрелка — текущее направление
сортировки этой колонки, пусто у остальных. */
.data-table th.sortable-th { cursor: pointer; user-select: none; }
.data-table th.sortable-th:hover { color: var(--ink-700); }
.data-table th.sortable-th .sort-arrow { margin-left: 4px; opacity: .6; }
/* ===== Пустые состояния — замена голому ===== */
.empty-state { text-align: center; padding: 48px 24px; color: var(--ink-500); }
.empty-state .bi { font-size: 2rem; color: var(--ink-300); margin-bottom: 10px; display: block; }
.empty-state p { margin: 0; }
/* Карточка для страниц-заглушек (404, нет доступа к компании, лицензия истекла) */
.status-card {
max-width: 480px; margin: 64px auto; text-align: center;
background: var(--surface); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); padding: 40px 32px;
}
.status-card .bi { font-size: 2.5rem; color: var(--accent-600); margin-bottom: 12px; display: block; }
.status-card h1, .status-card h2 { margin-bottom: 8px; }
.status-card p { color: var(--ink-500); margin-bottom: 20px; }
.status-card .btn + .btn { margin-left: 8px; }
/* ===== Карточка-ссылка на модуль (настройки компании) ===== */
.module-link {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
padding: 16px 20px; max-width: 640px; text-decoration: none; color: inherit;
transition: box-shadow .15s ease, transform .15s ease;
}
.module-link:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); color: inherit; }
.module-link .module-link-title { font-weight: 700; color: var(--ink-900); display: flex; align-items: center; gap: 8px; }
.module-link .module-link-title .bi { color: var(--accent-600); }
.module-link .module-link-desc { color: var(--ink-500); font-size: .85rem; margin-top: 2px; }
.module-link > .bi-chevron-right { color: var(--ink-300); flex-shrink: 0; }
/* ===== Сегментированные вкладки (register.html) ===== */
.tabs-segmented {
display: inline-flex; background: var(--ink-100); border-radius: var(--radius-sm);
padding: 3px; gap: 2px; border: none; list-style: none; margin: 0 0 1rem;
}
.tabs-segmented .nav-link {
border: none !important; border-radius: calc(var(--radius-sm) - 3px);
padding: 8px 18px; color: var(--ink-700); font-weight: 600; font-size: .9rem;
background: transparent;
}
.tabs-segmented .nav-link.active {
background: var(--surface); color: var(--accent-700); box-shadow: var(--shadow-sm);
}
/* Модальное окно, у которого вся начинка завёрнута в