/* ════════════════════════════════════════════════════════════════════════
   Стили страницы «Метрики проекта» (sys_metrics).

   Скоуп — корневой класс `.sys-metrics`. Плитка, дельта, метр и спарклайн
   приехали из `themes/core/viz.css`, паспорт — из `meta-strip`, поиск — из
   `search-box`, скин таблиц — из `.table__data`; здесь осталась только
   раскладка страницы.

   Каркас `.page__header` / `.page__content` не переопределяем (UI-014): всё,
   что нужно этой странице, живёт на собственной обёртке `__body`.
   ════════════════════════════════════════════════════════════════════════ */

.sys-metrics {
    /* Геометрия раскладки, под которую токенов нет по смыслу: это размеры
       конкретных гридов, а не шаг общей шкалы. */
    --sys-metrics-tile-min: 16rem;
    --sys-metrics-bento-min: 22rem;
}

.sys-metrics .sys-metrics__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
    overflow-y: auto;
}

.sys-metrics .sys-metrics__note {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text-tertiary);
    max-width: 60rem;
}

/* ---- toolbar --------------------------------------------------------- */

.sys-metrics .sys-metrics__toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.sys-metrics .sys-metrics__count {
    margin-left: auto;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* ---- attention: ведущий блок ------------------------------------------
   Блок выделен положением и заголовком, а не размером плиток. Попытка
   укрупнить первую не сработала дважды: при полоске тренда в 28 px растянутая
   плитка оставалась наполовину пустой, а полноразмерный график с сеткой и
   порогами перегружал карточку, которой полагается читаться за секунду.
   Развёрнутый разбор одной метрики — задача отдельного экрана. */

.sys-metrics .sys-metrics__attention {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.sys-metrics .sys-metrics__attention-head {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.sys-metrics .sys-metrics__attention-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

.sys-metrics .sys-metrics__block-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.sys-metrics .sys-metrics__bento {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--sys-metrics-bento-min), 1fr));
    grid-auto-rows: min-content;
    gap: var(--spacing-md);
}

/* Элемент сетки — обёртка страницы, а не сама плитка: `stat-tile` живёт в
   themes/core, и переопределять его из page-файла нельзя (UI-011, UI-014).
   Страница владеет раскладкой, core — компонентом. */
.sys-metrics .sys-metrics__bento-item {
    display: flex;
    min-width: 0;
}

.sys-metrics .sys-metrics__bento-item > * {
    flex: 1;
    min-width: 0;
}

.sys-metrics .sys-metrics__attention--clear .sys-metrics__state {
    border-style: solid;
    border-color: var(--color-success);
}

/* ---- groups and tiles ------------------------------------------------
   Заголовок группы липкий: на десяти группах он уезжает за верх экрана, и
   плитки теряют принадлежность — по экрану остаётся ровная стена без
   объяснения, что это за показатели. */

.sys-metrics .sys-metrics__group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.sys-metrics .sys-metrics__group-head {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) 0;
    border: none;
    /* Логическое свойство: линейка под заголовком переворачивается вместе с
       направлением письма, и px-хардкод не числится отступом. */
    border-block-end: 1px solid var(--color-border);
    background: var(--color-bg-primary);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.sys-metrics .sys-metrics__group-head:hover .sys-metrics__group-title {
    color: var(--color-primary);
}

.sys-metrics .sys-metrics__group-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.sys-metrics .sys-metrics__group-count {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
}

.sys-metrics .sys-metrics__chevron {
    display: inline-flex;
    color: var(--color-text-secondary);
    transition: transform var(--transition-fast);
}

.sys-metrics .sys-metrics__chevron--expanded {
    transform: rotate(90deg);
}

.sys-metrics .sys-metrics__group-body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.sys-metrics .sys-metrics__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--sys-metrics-tile-min), 1fr));
    gap: var(--spacing-md);
}

/* ---- detail tables ---------------------------------------------------
   Скин целиком из `.table__data`: он покрывает семантические `thead th` и
   `tbody td`, поэтому размечать каждую ячейку не нужно. */

.sys-metrics .sys-metrics__table-block {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.sys-metrics .sys-metrics__table-title {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
}

/* Таблица уже внутри карточки: собственные поля `.table__data` здесь лишние. */
.sys-metrics .sys-metrics__table {
    width: 100%;
    margin: 0;
}

.sys-metrics .sys-metrics__cell-number {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sys-metrics .sys-metrics__cell-muted {
    color: var(--color-text-tertiary);
}

/* ---- states ----------------------------------------------------------
   Ошибка показывается общим `.alert--error`: у него уже есть мягкая заливка
   и рамка в тон, а собственный красный текст на странице был лишним. */

.sys-metrics .sys-metrics__state {
    padding: var(--spacing-md);
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
}