/*!
* smit-stat — единый компонент KPI/метрики (build 1873).
* Консолидирует ~15 частных вариантов (*-kpi-label/value/num, smit-stat,
* nas-kpi-pill, ao-kpi, cp-kpi, mg-kpi). Контраст WCAG AA из коробки:
* лейблы/суб — var(--sc-text-muted) #64748b, дельта up/down — тёмно-зелёный/красный.
*
* Разметка (или через SmitStat.html):
*
*
*
*
1 234
*
Активных
*
+12 за неделю
*
*
…
* Компактная пилюля: 42 Онлайн
*/
.smit-kpis { display: flex; flex-wrap: wrap; gap: 10px; }
.smit-kpi {
display: flex; align-items: center; gap: .6rem;
padding: .55rem .75rem; border: 1px solid var(--sc-border, #e2e8f0);
/* 5px — общий радиус карточек в интерфейсе; на телефоне тоже он, а не
капсула: капсула читалась как чип-фильтр, хотя это метрика. */
border-radius: 5px; background: #fff; min-width: 0; flex: 1 1 auto;
}
.smit-kpi.is-clickable { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.smit-kpi.is-clickable:hover { border-color: var(--sc-brand, #43b77a); box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.smit-kpi.is-active { border-color: var(--sc-brand, #43b77a); box-shadow: 0 0 0 1px var(--sc-brand, #43b77a) inset; }
.smit-kpi:focus-visible { outline: 2px solid var(--sc-brand, #43b77a); outline-offset: 1px; }
.smit-kpi-ic {
width: 2rem; height: 2rem; border-radius: 8px; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
font-size: .95rem; background: var(--sc-subtle-bg, #f1f5f9); color: #475569;
}
.smit-kpi-body { min-width: 0; }
.smit-kpi-value {
font-size: var(--sc-fz-2xl, 1.5rem); font-weight: 700; line-height: 1.1;
color: var(--sc-text, #1f2937); font-variant-numeric: tabular-nums;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.smit-kpi-label {
font-size: var(--sc-fz-2xs, .7rem); font-weight: 600; text-transform: uppercase;
letter-spacing: .03em; color: var(--sc-text-muted, #64748b);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.smit-kpi-sub { font-size: var(--sc-fz-2xs, .72rem); color: var(--sc-text-muted, #64748b); }
.smit-kpi-sub.up { color: #15803d; } /* AA-зелёный (было #27ae60 ~2.9:1) */
.smit-kpi-sub.down { color: #b02a37; }
/* цветовые тоны иконки (фон-тинт + AA-текст) */
.smit-kpi-ic.green { background: rgba(67,183,122,.14); color: #15803d; }
.smit-kpi-ic.teal { background: color-mix(in srgb, var(--sc-brand,#43b77a) 14%, transparent); color: #15803d; }
.smit-kpi-ic.blue { background: rgba(13,110,253,.10); color: #084298; }
.smit-kpi-ic.orange { background: rgba(217,119,6,.12); color: #9a5b06; }
.smit-kpi-ic.red { background: rgba(220,53,69,.12); color: #a32230; }
.smit-kpi-ic.gray { background: var(--sc-subtle-bg,#f1f5f9); color: #475569; }
/* компактная пилюля-счётчик (замена nas-kpi-pill и т.п.) */
.smit-kpi-pill {
display: inline-flex; align-items: center; gap: .35rem;
padding: .15rem .55rem; border-radius: 999px; font-size: var(--sc-fz-sm, .85rem);
background: var(--sc-subtle-bg,#f1f5f9); color: #475569; white-space: nowrap;
}
.smit-kpi-pill b { font-weight: 700; font-variant-numeric: tabular-nums; }
.smit-kpi-pill.green { background: rgba(67,183,122,.12); color: #15803d; }
.smit-kpi-pill.blue { background: rgba(13,110,253,.10); color: #084298; }
.smit-kpi-pill.orange { background: rgba(217,119,6,.12); color: #9a5b06; }
.smit-kpi-pill.red { background: rgba(220,53,69,.12); color: #a32230; }
/* мобильно — карточки компактнее */
/* Мобильный: ряд KPI — не столбик карточек (он съедал ~200px первого экрана,
до данных приходилось листать), а горизонтальная лента с прокруткой и
привязкой к карточке. Иконка/значение/подпись выстраиваются в строку. */
@media (max-width: 767.98px) {
.smit-kpis {
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 6px;
padding-bottom: 2px;
}
.smit-kpis::-webkit-scrollbar { display: none; }
.smit-kpis > .smit-kpi {
flex: 0 0 auto;
scroll-snap-align: start;
padding: .35rem .6rem;
gap: .4rem;
border-radius: 5px;
}
.smit-kpis > .smit-kpi .smit-kpi-ic { width: 1.4rem; height: 1.4rem; font-size: .75rem; }
.smit-kpis > .smit-kpi .smit-kpi-body { display: flex; align-items: baseline; gap: .35rem; }
.smit-kpis > .smit-kpi .smit-kpi-value { font-size: var(--sc-fz-md, .95rem); }
.smit-kpis > .smit-kpi .smit-kpi-label {
font-size: var(--sc-fz-2xs, .7rem); text-transform: none; letter-spacing: 0;
}
.smit-kpis > .smit-kpi .smit-kpi-sub { display: none; } /* дельта не влезает в пилюлю */
}
@media (max-width: 575.98px) {
.smit-kpi { padding: .45rem .55rem; gap: .45rem; }
.smit-kpi-ic { width: 1.7rem; height: 1.7rem; font-size: .82rem; }
.smit-kpi-value { font-size: var(--sc-fz-xl, 1.2rem); }
}
/* тёмная тема */
[data-bs-theme="dark"] .smit-kpi, .dark-theme .smit-kpi { background: #23272d; border-color: #2a2f37; }
[data-bs-theme="dark"] .smit-kpi-value, .dark-theme .smit-kpi-value { color: #e4e6ea; }
[data-bs-theme="dark"] .smit-kpi-label, .dark-theme .smit-kpi-label,
[data-bs-theme="dark"] .smit-kpi-sub, .dark-theme .smit-kpi-sub { color: #94a3b8; }
[data-bs-theme="dark"] .smit-kpi-sub.up, .dark-theme .smit-kpi-sub.up { color: #6ee7b7; }
[data-bs-theme="dark"] .smit-kpi-sub.down, .dark-theme .smit-kpi-sub.down { color: #f1aeb5; }
[data-bs-theme="dark"] .smit-kpi-ic.green, .dark-theme .smit-kpi-ic.green { background: rgba(67,183,122,.22); color: #6ee7b7; }
[data-bs-theme="dark"] .smit-kpi-ic.blue, .dark-theme .smit-kpi-ic.blue { background: rgba(13,110,253,.25); color: #cfe2ff; }
[data-bs-theme="dark"] .smit-kpi-ic.orange,.dark-theme .smit-kpi-ic.orange{ background: rgba(217,119,6,.25); color: #fcd34d; }
[data-bs-theme="dark"] .smit-kpi-ic.red, .dark-theme .smit-kpi-ic.red { background: rgba(220,53,69,.25); color: #f1aeb5; }
[data-bs-theme="dark"] .smit-kpi-pill, .dark-theme .smit-kpi-pill { background: #2a2f37; color: #cbd5e1; }
[data-bs-theme="dark"] .smit-kpi-pill.green, .dark-theme .smit-kpi-pill.green { background: rgba(67,183,122,.2); color: #6ee7b7; }
[data-bs-theme="dark"] .smit-kpi-pill.blue, .dark-theme .smit-kpi-pill.blue { background: rgba(13,110,253,.25); color: #cfe2ff; }