/* ================================================================
 * Buenos CRM — theme bridge between Bootstrap 5 and brand tokens.
 * Loaded last in base.html. Source of truth: guides/brandbook.html.
 * Touch only via var(--bp-*) / var(--ff-*) — no new hex literals.
 * ================================================================ */

/* ---------- Нейтральная палитра поверхностей ----------
 * Переопределяет бежевые токены серыми. Обоснование и границы применения —
 * web/README.md → «Поверхности CRM ≠ поверхности портала».
 * ❌ Не переносить блок в brand-tokens.css (см. там же).
 */
:root {
    --bp-paper: #f5f6f8;
    --bp-paper-2: #eef0f4;
    --bp-line: #e6e8ec;
    --bp-line-strong: #d3d7de;
    /* Канонический #96989e давал 2.88:1 на белом и 2.67:1 на фоне страницы —
     * вдвое ниже порога AA (4.5:1), из-за чего подписи фильтров, подзаголовки
     * и вторичные цифры читались как выключенные. #6b6e76 — 5.1:1 и 4.72:1,
     * иерархия ink (17.8) › ink-soft (7.2) › muted (5.1) сохраняется. */
    --bp-muted: #6b6e76;
}

/* ---------- Body & global type ---------- */
body {
    background-color: var(--bp-paper);
    color: var(--bp-ink);
    font-family: var(--ff-body);
    line-height: 1.6;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-family: var(--ff-display);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.01em;
    color: var(--bp-ink);
}

h1, .h1 { line-height: 0.9; }

.eyebrow {
    font-family: var(--ff-ui);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    color: var(--bp-muted);
}

a { color: var(--bp-blue); }
a:hover { color: var(--bp-blue-ink); }

hr { border-top: 1px solid var(--bp-line); opacity: 1; }

/* ---------- Navbar — two palettes via body theme class ---------- */
.navbar-brand {
    font-family: var(--ff-display);
    font-weight: 900;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

/* Default (no theme class) → ink, so legacy bg-primary blue never shows. */
.navbar.bg-primary {
    background-color: var(--bp-ink) !important;
    box-shadow: none;
}

/* Paper theme (brandbook canonical) */
body.theme-paper .navbar.bg-primary {
    background-color: var(--bp-paper) !important;
    border-bottom: 1px solid var(--bp-line);
    box-shadow: none;
}
body.theme-paper .navbar.navbar-dark .navbar-brand,
body.theme-paper .navbar.navbar-dark .nav-link,
body.theme-paper .navbar.navbar-dark .navbar-text,
body.theme-paper .navbar.navbar-dark .dropdown-toggle {
    color: var(--bp-ink) !important;
}
body.theme-paper .navbar.navbar-dark .nav-link:hover {
    background-color: rgba(23, 24, 26, 0.06);
}
body.theme-paper .navbar.navbar-dark .form-control,
body.theme-paper .navbar.navbar-dark .input-group-text {
    color: var(--bp-ink) !important;
    border-color: var(--bp-line) !important;
    background-color: transparent !important;
}
body.theme-paper .navbar.navbar-dark .form-control::placeholder {
    color: var(--bp-muted) !important;
}
body.theme-paper .navbar.navbar-dark .btn-outline-light {
    color: var(--bp-ink);
    border-color: var(--bp-line);
}
body.theme-paper .navbar.navbar-dark .btn-outline-light:hover {
    background-color: var(--bp-ink);
    color: var(--bp-paper);
    border-color: var(--bp-ink);
}
body.theme-paper .navbar.navbar-dark .navbar-toggler {
    border-color: var(--bp-line);
}
body.theme-paper .navbar.navbar-dark .navbar-toggler-icon {
    filter: invert(1);
}

/* Ink theme — explicit dark navbar */
body.theme-ink .navbar.bg-primary {
    background-color: var(--bp-ink) !important;
    box-shadow: none;
}

/* Blue theme — brand navy navbar on paper body */
body.theme-blue .navbar.bg-primary {
    background-color: var(--bp-blue) !important;
    box-shadow: none;
    border-bottom: 1px solid var(--bp-blue-ink);
}
body.theme-blue .navbar.navbar-dark .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.12);
}
body.theme-blue .navbar.navbar-dark .form-control,
body.theme-blue .navbar.navbar-dark .input-group-text {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    background-color: transparent !important;
}
body.theme-blue .navbar.navbar-dark .form-control::placeholder {
    color: rgba(255, 255, 255, 0.65) !important;
}
body.theme-blue .navbar.navbar-dark .btn-outline-light {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
body.theme-blue .navbar.navbar-dark .btn-outline-light:hover {
    background-color: #fff;
    color: var(--bp-blue);
    border-color: #fff;
}

/* Navbar badges (utilisation, status pills) on tinted navbars — render as
 * paper-stamp on dark/blue chrome instead of the global ink fill. The
 * inline white border in base.html turns into a proper stamp frame. */
body.theme-blue .navbar .badge.bg-primary,
body.theme-ink  .navbar .badge.bg-primary {
    background-color: rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    border: none;
    font-family: var(--ff-ui);
    letter-spacing: 0.01em;
}
body.theme-paper .navbar .badge.bg-primary {
    background-color: var(--bp-blue-tint) !important;
    color: var(--bp-blue) !important;
    border-color: var(--bp-blue) !important;
    font-family: var(--ff-ui);
    letter-spacing: 0.01em;
}

/* ---------- Cards ---------- */
/* v3 modern: белый лист, скругления, заголовок карточки — обычный гротеск без капса */
.card {
    background-color: var(--bp-sheet);
    border: 1px solid var(--bp-line);
    border-radius: var(--bp-radius-lg);
    box-shadow: var(--bp-shadow-card);
}
.card-body { padding: 1.25rem; }
/* Card header/footer rounding follows the card radius so the sheet reads
 * as one piece. */
.card-header,
.card-footer {
    border-radius: calc(var(--bp-radius-lg) - 1px) calc(var(--bp-radius-lg) - 1px) 0 0 !important;
}
.card-footer { border-radius: 0 0 calc(var(--bp-radius-lg) - 1px) calc(var(--bp-radius-lg) - 1px) !important; }
/* Specificity 0,2,1 to win over base.html .card-header:not([class*="bg-"])
 * (0,2,0) without !important — that lets inline `style="background:..."`
 * (e.g. dynamic category colors on /finances/cash) still override. */
body .card-header:not([class*="bg-"]) {
    background-color: transparent;
    border-bottom: 1px solid var(--bp-line);
    font-family: var(--ff-ui);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
    color: var(--bp-ink);
    font-weight: 600;
    padding: 0.9rem 1.25rem;
}
.card-header[class*="bg-"] {
    font-family: var(--ff-ui);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

/* ---------- Warning palette overrides ----------
 * Bootstrap's #ffc107 amber washes out on the paper background, especially
 * when printed. Promote text/border/bg utilities to the brand warning
 * tokens so KPI cards, badges, and cell highlights stay legible.
 */
.text-warning {
    color: var(--bp-warning) !important;
}
.text-bg-warning {
    background-color: var(--bp-warning-fill) !important;
    color: var(--bp-ink) !important;
}
.border-warning {
    border-color: var(--bp-warning) !important;
}
.bg-warning {
    background-color: var(--bp-warning-fill) !important;
    color: var(--bp-ink) !important;
}
.bg-warning-subtle {
    background-color: var(--bp-warning-tint) !important;
    color: var(--bp-ink) !important;
}
.alert-warning {
    background-color: var(--bp-warning-tint);
    border-color: var(--bp-warning);
    color: var(--bp-ink);
}

/* ---------- Buttons ---------- */
/* v3 modern: скругления; primary — фирменный синий вместо чёрной заливки */
.btn {
    border-radius: var(--bp-radius-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.45rem 1.05rem;
}
.btn-primary {
    background-color: var(--bp-blue);
    border-color: var(--bp-blue);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--bp-blue-ink) !important;
    border-color: var(--bp-blue-ink) !important;
    color: var(--bp-paper) !important;
}
.btn-outline-primary {
    color: var(--bp-blue);
    border-color: var(--bp-line-strong);
    background-color: var(--bp-sheet);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--bp-blue-tint);
    color: var(--bp-blue-ink);
    border-color: var(--bp-blue);
}

/* Outline buttons in semantic colors — keep text in ink so they read on
 * paper background. Active/filled state inherits from .btn-* variants. */
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-secondary,
.btn-outline-dark {
    color: var(--bp-ink);
    background-color: transparent;
}
.btn-outline-success    { border-color: var(--bp-green-dark); }
.btn-outline-success:hover,
.btn-outline-success.active,
.btn-outline-success:active {
    background-color: var(--bp-green-dark) !important;
    border-color: var(--bp-green-dark) !important;
    color: var(--bp-paper) !important;
}
.btn-outline-danger     { border-color: var(--bp-stamp-red); }
.btn-outline-danger:hover,
.btn-outline-danger.active,
.btn-outline-danger:active {
    background-color: var(--bp-stamp-red) !important;
    border-color: var(--bp-stamp-red) !important;
    color: var(--bp-paper) !important;
}
.btn-outline-warning    { border-color: #b07a1f; }
.btn-outline-warning:hover,
.btn-outline-warning.active,
.btn-outline-warning:active {
    background-color: #e3a833 !important;
    border-color: #b07a1f !important;
    color: var(--bp-ink) !important;
}
.btn-outline-info       { border-color: var(--bp-blue); }
.btn-outline-info:hover,
.btn-outline-info.active,
.btn-outline-info:active {
    background-color: var(--bp-blue) !important;
    border-color: var(--bp-blue) !important;
    color: var(--bp-paper) !important;
}
.btn-outline-secondary  { border-color: var(--bp-line); color: var(--bp-ink-soft); }
.btn-outline-secondary:hover,
.btn-outline-secondary.active,
.btn-outline-secondary:active {
    background-color: var(--bp-paper-2) !important;
    border-color: var(--bp-ink-soft) !important;
    color: var(--bp-ink) !important;
}
.btn-outline-dark       { border-color: var(--bp-ink); }
.btn-outline-dark:hover,
.btn-outline-dark.active,
.btn-outline-dark:active {
    background-color: var(--bp-ink) !important;
    border-color: var(--bp-ink) !important;
    color: var(--bp-paper) !important;
}

/* Btn-check toggle group (radio-style filters) — ensure inactive labels
 * have ink text on paper, active state uses brand fill. */
.btn-check + .btn-outline-warning,
.btn-check + .btn-outline-primary,
.btn-check + .btn-outline-info,
.btn-check + .btn-outline-success,
.btn-check + .btn-outline-secondary {
    color: var(--bp-ink);
}
.btn-check:checked + .btn-outline-warning {
    background-color: #e3a833;
    color: var(--bp-ink);
    border-color: #b07a1f;
}
.btn-check:checked + .btn-outline-primary {
    background-color: var(--bp-blue);
    color: #fff;
    border-color: var(--bp-blue);
}
.btn-check:checked + .btn-outline-info {
    background-color: var(--bp-blue);
    color: var(--bp-paper);
    border-color: var(--bp-blue);
}
.btn-check:checked + .btn-outline-success {
    background-color: var(--bp-green-dark);
    color: var(--bp-paper);
    border-color: var(--bp-green-dark);
}
.btn-check:checked + .btn-outline-secondary {
    background-color: var(--bp-ink-soft);
    color: var(--bp-paper);
    border-color: var(--bp-ink-soft);
}
.btn-secondary {
    background-color: var(--bp-paper-2);
    border-color: var(--bp-line);
    color: var(--bp-ink);
}
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--bp-line);
    color: var(--bp-ink);
    border-color: var(--bp-ink-soft);
}
.btn-success {
    background-color: var(--bp-green-dark);
    border-color: var(--bp-green-dark);
    color: var(--bp-paper);
}
.btn-danger {
    background-color: var(--bp-stamp-red);
    border-color: var(--bp-stamp-red);
    color: var(--bp-paper);
}
.btn-warning {
    background-color: #e3a833;
    border-color: #e3a833;
    color: var(--bp-ink);
}
.btn-info {
    background-color: var(--bp-blue);
    border-color: var(--bp-blue);
    color: var(--bp-paper);
}
.btn-light {
    background-color: var(--bp-paper-2);
    border-color: var(--bp-line);
    color: var(--bp-ink);
}

/* ---------- Tables ---------- */
.table {
    color: var(--bp-ink);
    border-color: var(--bp-line);
    --bs-table-hover-bg: rgba(23, 24, 26, 0.04);
    --bs-table-bg: transparent;
}
.table thead th {
    background-color: transparent;
    border-bottom: 1px solid var(--bp-line-strong);
    font-family: var(--ff-ui);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8rem;
    color: var(--bp-ink-soft);
    font-weight: 600;
    padding-bottom: 0.55rem;
}
.table > :not(caption) > * > * {
    border-bottom-color: var(--bp-line);
    padding: 0.6rem 0.75rem;
}

/* ---------- Modal / Offcanvas ---------- */
/* v2 airy: модалка — лист без рамки, на тени */
.modal-content,
.offcanvas {
    background-color: var(--bp-sheet);
    border-radius: var(--bp-radius-lg);
    border: none;
    box-shadow: var(--bp-shadow-modal);
}
.modal-header,
.offcanvas-header {
    background-color: transparent;
    border-bottom: 1px solid var(--bp-line);
    padding: 1.1rem 1.4rem;
}
.modal-header.bg-primary {
    background-color: var(--bp-blue) !important;
    color: #fff;
}
.modal-footer {
    border-top: 1px solid var(--bp-line);
    background-color: transparent;
    padding: 1rem 1.4rem;
}
.modal-title {
    font-family: var(--ff-display);
    font-weight: 900;
    letter-spacing: -0.01em;
}

/* ---------- Badges ---------- */
/* v3 modern: пилюли, единый гротеск, тинт + цветной текст. Без чёрных заливок. */
.badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-family: var(--ff-ui);
    text-transform: none;
    padding: 0.35em 0.75em;
}
.badge.bg-light {
    color: var(--bp-ink) !important;
}
.badge.bg-primary  { background-color: var(--bp-blue-tint) !important; color: var(--bp-blue) !important; border: 1px solid var(--bp-blue); }
.badge.bg-dark     { background-color: var(--bp-paper-2) !important; color: var(--bp-ink) !important; border: 1px solid var(--bp-ink-soft); }
.badge.bg-success  { background-color: var(--bp-green-tint) !important; color: var(--bp-green-dark) !important; border: 1px solid var(--bp-green-dark); }
.badge.bg-danger   { background-color: var(--bp-red-tint) !important; color: var(--bp-stamp-red) !important; border: 1px solid var(--bp-stamp-red); }
.badge.bg-info     { background-color: var(--bp-blue-tint) !important; color: var(--bp-blue) !important; border: 1px solid var(--bp-blue); }
.badge.bg-warning  { background-color: var(--bp-warning-tint) !important; color: var(--bp-warning-deep) !important; border: 1px solid var(--bp-warning); }
.badge.bg-secondary{ background-color: var(--bp-paper-2) !important; color: var(--bp-ink-soft) !important; border: 1px solid var(--bp-line-strong); }

/* ---------- Form controls ---------- */
.form-control,
.form-select {
    background-color: var(--bp-sheet);
    border: 1px solid var(--bp-line-strong);
    border-radius: var(--bp-radius-sm);
    color: var(--bp-ink);
    padding: 0.5rem 0.8rem;
}
/* Каретка селекта нарисована фоном у правого края, и общий правый паддинг
   0.8rem заводил значение прямо под неё: «50» читалось как «5Ө», «— все» — как
   «— вс⌄». Дефект виден и на десктопе, поэтому правится здесь, а не в
   мобильном слое. */
.form-select {
    padding-right: 2.25rem;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--bp-blue);
    box-shadow: 0 0 0 3px rgba(4, 65, 132, 0.12);
    background-color: var(--bp-sheet);
    color: var(--bp-ink);
}
.form-label {
    font-family: var(--ff-ui);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
    color: var(--bp-ink);
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.form-text {
    color: var(--bp-muted);
}

/* ---------- Dropdowns / mega menu ---------- */
.dropdown-menu {
    background-color: var(--bp-sheet);
    border: 1px solid var(--bp-line);
    border-radius: var(--bp-radius);
    box-shadow: var(--bp-shadow-pop);
    padding: 0.4rem;
}
.dropdown-item {
    color: var(--bp-ink);
    border-radius: calc(var(--bp-radius) - 4px);
    padding: 0.45rem 0.75rem;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bp-paper-2);
    color: var(--bp-ink);
}
.dropdown-item.active {
    background-color: var(--bp-blue-tint);
    color: var(--bp-blue-ink);
}
.dropdown-header {
    font-family: var(--ff-ui);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bp-muted);
}
.dropdown-divider {
    border-top: 1px solid var(--bp-line);
}

/* ---------- Dashboard widgets ---------- */
/* v3 modern: виджеты — белый лист, скругления, заголовок без капса */
.dashboard-widget {
    background-color: var(--bp-sheet) !important;
    border: 1px solid var(--bp-line) !important;
    border-radius: var(--bp-radius-lg) !important;
    box-shadow: var(--bp-shadow-card) !important;
    transition: border-color 0.15s ease;
    padding: 1.1rem 1.25rem;
}
.dashboard-widget:hover {
    transform: none !important;
    border-color: var(--bp-ink) !important;
}
.widget-title {
    font-family: var(--ff-ui) !important;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bp-ink-soft) !important;
}
.widget-value {
    font-family: var(--ff-display) !important;
    font-weight: 900 !important;
    letter-spacing: -0.01em;
    color: var(--bp-ink) !important;
}

/* ---------- Alerts ---------- */
/* v3 modern: алерты — чистый тинт, скругления */
.alert {
    border-radius: var(--bp-radius);
    border: none;
    padding: 0.9rem 1.15rem;
}
.alert-success {
    background-color: var(--bp-green-tint);
    color: var(--bp-green-dark);
}
.alert-info {
    background-color: var(--bp-blue-tint);
    color: var(--bp-blue-ink);
}
.alert-danger {
    background-color: var(--bp-red-tint);
    color: var(--bp-stamp-red);
}

/* ---------- Footer ---------- */
.footer-links.bg-light {
    background-color: var(--bp-paper-2) !important;
    border-top: 1px solid var(--bp-line);
}

/* ---------- Pagination ---------- */
.page-link {
    color: var(--bp-ink);
    background-color: transparent;
    border-color: var(--bp-line);
    border-radius: var(--bp-radius-sm) !important;
    padding: 0.45rem 0.8rem;
    margin: 0 2px;
}
.page-item.active .page-link {
    background-color: var(--bp-blue);
    border-color: var(--bp-blue);
    color: #fff;
}

/* ---------- Misc utility tweaks ---------- */
.text-muted { color: var(--bp-muted) !important; }
.bg-light   { background-color: var(--bp-paper-2) !important; }
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--bp-line) !important;
}

/* Tooltip — paper-themed for paper backgrounds, keep dark default */
.tooltip-inner {
    background-color: var(--bp-ink);
    color: #fff;
    border-radius: var(--bp-radius-sm);
    font-family: var(--ff-ui);
    font-size: 0.78rem;
    letter-spacing: 0;
    line-height: 1.45;
    padding: 6px 10px;
    max-width: 280px;
}

/* Плашка «вышло обновление» — тихая, поверх контента, не блокирует работу.
   Появляется только когда оператор занят (иначе вкладка обновляется сама). */
.app-update-banner {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bp-ink);
    color: #fff;
    border-radius: var(--bp-radius-sm);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    font-family: var(--ff-ui);
    font-size: 0.85rem;
}

.app-update-banner button {
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    color: #fff;
    border-radius: var(--bp-radius-sm);
    padding: 4px 10px;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

.app-update-banner button:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* ---------- Утилиты цвета текста: приводим к AA ----------
 * Замер на отчётных страницах (29.07): дефолты Bootstrap не проходят порог
 * 4.5:1 на наших светлых поверхностях. Меняем ТОЛЬКО текстовые утилиты —
 * заливки (.bg-*, .text-bg-*, .alert-*, бейджи) не трогаем, там текст белый
 * поверх насыщенного фона и контраст свой.
 *   .text-info    #0dcaf0 → 1.96:1 на белом  ⇒ #0b7285 (5.59:1)
 *   .text-success #198754 → 4.30:1 на #f8f9fa ⇒ #146c43 (6.12:1)
 *   ссылки вкладок #0d6efd → 4.27:1 на #f8f9fa ⇒ --bp-blue (9.51:1)
 */
.text-info { color: #0b7285 !important; }
.text-success { color: #146c43 !important; }
.nav-tabs .nav-link { color: var(--bp-blue); }
.nav-tabs .nav-link.active { color: var(--bp-ink); font-weight: 600; }

/* ---------- KPI-полоса телеметрии (.crm-kpi) ----------
 * Одинаковое рисуем одинаково: полоса чисел над таблицей на страницах
 * наблюдения (логи вебхуков, журнал уведомлений) — ОДИН компонент, а не по
 * копии в каждом шаблоне. Приехало из admin_webhook_events.html, где родилось
 * page-local; при третьей такой странице копия точно разъехалась бы.
 * Модификаторы: --ok / --muted / --bad красят ЧИСЛО (не фон), --clickable
 * добавляет курсор и подсветку для drill-down.
 */
.crm-kpi {
    --crm-kpi-soft: color-mix(in srgb, var(--bp-primary) 4%, white);
    --crm-kpi-strong: color-mix(in srgb, var(--bp-primary) 8%, white);
    background: linear-gradient(
        180deg,
        var(--crm-kpi-strong) 0%,
        var(--crm-kpi-soft) 100%
    );
    border: 1px solid color-mix(in srgb, var(--bp-primary) 12%, white);
    border-radius: var(--bp-radius);
    padding: 0.85rem 1rem;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.crm-kpi::after {
    /* Едва заметная строчная текстура: полоса читается как телеметрия, а не
       как маркетинговая карточка. */
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        0deg,
        transparent 0,
        transparent 3px,
        rgba(0, 0, 0, 0.015) 3px,
        rgba(0, 0, 0, 0.015) 4px
    );
    pointer-events: none;
}

.crm-kpi-label {
    font-size: 0.72rem;
    font-family: var(--ff-ui);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--bp-muted);
}

.crm-kpi-value {
    font-family: var(--ff-display);
    font-size: 1.6rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--bp-fg);
}

/* Подпись под числом: расшифровка, из чего оно сложилось. Переносится
   целиком — обрезать текст многоточием нельзя. */
.crm-kpi-hint {
    font-size: 0.72rem;
    color: var(--bp-muted);
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

.crm-kpi--ok .crm-kpi-value { color: var(--bs-success); }
.crm-kpi--muted .crm-kpi-value { color: var(--bp-muted); }
.crm-kpi--bad .crm-kpi-value { color: var(--bs-danger); }

/* Тревога красит рамку, а не всё число: цвет числа уже занят смыслом
   «хорошо/нейтрально/плохо», а тревога — это «иди разбирайся сейчас». */
.crm-kpi--alarm {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 1px var(--bs-danger) inset;
}

.crm-kpi--clickable { cursor: pointer; }
.crm-kpi--clickable:hover {
    border-color: color-mix(in srgb, var(--bp-primary) 35%, white);
}