/* Стили, часть 11 из 12: вкладка «СПП»: тепловая карта. Подключаются в base.html строго по порядку —
   от него зависит, какое правило главнее. Один base.css разбит 30.09.2026: Cloudflare
   отдавал файлы крупнее ~20 КБ обрезанными. Файл держать меньше 15 КБ. */

/* Вкладка «СПП»: тепловая карта модель × день (владелец, 30.09.2026).
   Видно 14 последних дней, прошлое — прокруткой; модель и среднее
   закреплены по краям, чтобы при прокрутке не терялись. */
.spp-shapka { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gap); }
.spp-srednij { text-align: right; white-space: nowrap; }
.spp-obertka {
    overflow-x: auto;
    max-width: calc(var(--spp-imya) + var(--spp-dney-vidno) * var(--spp-kletka) + var(--spp-sr));
}
.spp-karta {
    width: auto; border-collapse: separate; border-spacing: var(--spp-shag); font-variant-numeric: tabular-nums;
}
.spp-karta tr { border-top: none; }
.spp-karta th, .spp-karta td { padding: 0 var(--space-2xs); }
.spp-karta th {
    font-size: var(--font-size-table-head); font-weight: 500; color: var(--text-muted);
    padding: var(--space-2xs) 0; text-align: center;
}
.spp-karta .spp-imya {
    position: sticky; left: 0; z-index: 1; background: var(--bg-surface);
    /* закрашивает зазоры между строками: иначе в них видны клетки,
       прокрученные под закреплённую колонку */
    box-shadow: 0 0 0 var(--spp-shag) var(--bg-surface);
    min-width: var(--spp-imya); max-width: var(--spp-imya); text-align: left;
    white-space: nowrap;
}
/* Многоточие — на тексте, а не на ячейке: обрезка ячейки срезала бы
   полосу раскрытой группы, которая выходит в зазоры между строками. */
.spp-imya-tekst {
    display: inline-block; max-width: var(--spp-imya-tekst); vertical-align: middle;
    overflow: hidden; text-overflow: ellipsis;
}
.spp-karta .spp-sr {
    position: sticky; right: 0; z-index: 1; background: var(--bg-surface);
    box-shadow: 0 0 0 var(--spp-shag) var(--bg-surface);
    min-width: var(--spp-sr); text-align: right; padding-left: var(--space-xs);
}
.spp-karta .spp-razmer { padding-left: var(--spp-otstup-razmera); color: var(--text-secondary); }
.spp-karta .group-row .spp-imya { font-weight: 600; padding-left: var(--space-xs); }
.spp-karta .size-row { font-size: var(--font-size-small); }
.spp-karta .size-row .spp-k { height: var(--spp-vysota-razmer); }
.spp-karta .size-row .spp-imya, .spp-karta .size-row .spp-sr {
    background: var(--spp-razmer-fon);
    box-shadow: 0 0 0 var(--spp-shag) var(--spp-razmer-fon);
}
/* Полоса раскрытой группы: через строку модели и все её размеры,
   включая зазоры между строками — группа читается одним блоком. */
.spp-karta .spp-otkryta .spp-imya::before {
    content: ""; position: absolute; left: 0; width: var(--spp-polosa); z-index: 2;
    top: calc(-2 * var(--spp-shag)); bottom: 0; background: var(--spp-polosa-cvet);
}
.spp-karta .group-row.spp-otkryta .spp-imya::before { top: 0; }
/* Тонкие линии над первым и под последним размером: размеры — группа
   внутри карты (владелец, 30.09.2026). Линия идёт по зазору между
   строками и тянется через зазоры между клетками — сплошная. */
.spp-karta .spp-razmer-pervyy td:not(.spp-imya):not(.spp-sr),
.spp-karta .spp-razmer-posledniy td:not(.spp-imya):not(.spp-sr) { position: relative; }
.spp-karta .spp-razmer-pervyy td::after, .spp-karta .spp-razmer-posledniy td::after {
    content: ""; position: absolute; height: var(--border-width); background: var(--spp-liniya);
    left: calc(-1 * var(--spp-shag)); right: calc(-1 * var(--spp-shag));
}
.spp-karta .spp-razmer-pervyy td::after { top: calc(-1 * var(--spp-shag)); }
.spp-karta .spp-razmer-posledniy td::after { bottom: calc(-1 * var(--spp-shag)); }
/* Один размер: у линии один псевдоэлемент — оставляем только верхнюю,
   иначе top и bottom вместе растянут её на всю строку. */
.spp-karta .spp-razmer-pervyy.spp-razmer-posledniy td::after { bottom: auto; }
/* Скрытые модели, когда их показали внизу: серые, с галочками. */
.spp-karta .spp-skryta td { color: var(--spp-skryta-tekst); }
.spp-karta .spp-skryta .spp-k { opacity: var(--spp-skryta-prozrachnost); }
.spp-galka { margin: 0 var(--space-2xs) 0 0; vertical-align: middle; }
.spp-upravlenie {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-sm);
}
.spp-upravlenie .size-filter { flex-wrap: wrap; }
.spp-skrytye-knopki { display: flex; gap: var(--space-xs); }
.spp-vybor {
    display: flex; align-items: center; gap: var(--space-xs);
    margin-bottom: var(--space-sm); color: var(--text-secondary);
}
.spp-karta .spp-top td { font-weight: 600; }
.spp-k {
    min-width: var(--spp-kletka); height: var(--spp-vysota); text-align: center;
    border-radius: var(--r-kletka); font-size: var(--font-size-small);
    color: var(--spp-tekst-temnyj);
}
.spp-pusto { background: var(--spp-pusto); }
.spp-u1 { background: var(--spp-u1); }
.spp-u2 { background: var(--spp-u2); }
.spp-u3 { background: var(--spp-u3); }
.spp-u4 { background: var(--spp-u4); color: var(--spp-tekst-svetlyj); }
.spp-u5 { background: var(--spp-u5); color: var(--spp-tekst-svetlyj); }