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

/* Индикатор расчёта отчёта — владелец, 25.08.2026: без текста, только
   размытие таблицы и спиннер поверх, пока грузится новая страница. */
.unified-report-body { position: relative; }
.unified-report-body.report-loading > *:not(.report-loading-overlay) { filter: blur(3px); }
.report-loading-overlay {
    position: absolute; inset: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center;
}
.report-loading-spinner {
    width: 40px; height: 40px;
    border: 3px solid var(--line);
    border-top-color: var(--accent-violet);
    border-radius: 50%;
    animation: report-loading-spin 0.7s linear infinite;
}
@keyframes report-loading-spin {
    to { transform: rotate(360deg); }
}
.group-toggle {
    background: none; border: none; cursor: pointer; color: var(--text-muted);
    padding: 0 var(--space-xs) 0 0; font-size: var(--font-size-base);
}

/* Сортировка единого отчёта — владелец, 24.08.2026. Клик по тексту
   заголовка — цикл (без сортировки → по возрастанию → по убыванию),
   клик по значку стрелок — меню из трёх пунктов. Подсветка и курсор
   при наведении показывают, что колонка кликабельна, без подсказок
   текстом. */
.unified-table th { padding: 0; position: relative; }
/* Блок «Скрыто» без кнопок сортировки — заголовкам нужен свой отступ. */
.hidden-table-wrap .unified-table th { padding: var(--space-sm); }
.unified-table th > .th-sort-label, .unified-table th > .th-sort-icon {
    display: inline-flex; align-items: center;
    background: none; border: none;
    font: inherit; font-weight: 500; color: inherit;
    cursor: pointer; white-space: nowrap;
}
.th-sort-label { padding: var(--space-sm) 0 var(--space-sm) var(--space-sm); }
.unified-table th:first-child .th-sort-label { padding-left: var(--space-sm); }
.th-sort-icon { padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-xs); }
.th-sort-label:hover, .th-sort-icon:hover { background: var(--bg-surface); }
.sort-indicator { color: var(--border-strong); font-size: var(--font-size-small); }
th.sorted .sort-indicator { color: var(--text-primary); font-weight: 600; }

.sort-menu {
    position: absolute; right: 0; top: 100%; z-index: 10;
    display: flex; flex-direction: column;
    min-width: 180px;
    padding: var(--space-xs);
    background: var(--bg-surface);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-pop);
    font-weight: 500;
}
.unified-table th:first-child .sort-menu { right: auto; left: 0; }
/* Колонка у правого края экрана — меню уехало бы за край, JS
   измеряет и переключает на этот класс (base.css не знает заранее,
   где окажется правый край при горизонтальной прокрутке). */
.sort-menu.sort-menu-flip { right: auto; left: 0; }
.sort-menu-item {
    display: flex; align-items: center; gap: var(--space-xs);
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    background: none; border: none;
    font: inherit; color: var(--text-primary);
    text-align: left; cursor: pointer; white-space: nowrap;
}
.sort-menu-item:hover { background: var(--bg-canvas); }
.sort-menu-check { width: 1em; color: var(--accent-violet); font-weight: 600; }

/* Переключатель кабинетов — шапка. */
.cabinet-switcher { position: relative; font-size: var(--font-size-small); }
.cabinet-switcher summary {
    cursor: pointer;
    list-style: none;
    padding: var(--space-xs) var(--space-md);
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--r-pill);
    color: var(--text-primary);
    background: var(--bg-surface);
}
.cabinet-switcher summary::-webkit-details-marker { display: none; }
.cabinet-switcher summary::after { content: " ▾"; color: var(--text-muted); }
.cabinet-switcher-panel {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-xs));
    z-index: 10;
    width: 280px;
    max-height: 360px;
    overflow-y: auto;
    padding: var(--space-sm);
    background: var(--bg-surface);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-pop);
}
.cabinet-switcher-search {
    width: 100%;
    margin-bottom: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-small);
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--r-pill);
}
.cabinet-switcher-add {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    color: var(--accent-violet);
    text-decoration: none;
    border-bottom: var(--border-width) solid var(--line);
    margin-bottom: var(--space-xs);
    font-weight: 600;
}
.cabinet-switcher-list { list-style: none; margin: 0; padding: 0; }
.cabinet-switcher-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    background: none;
    color: var(--text-primary);
    font-weight: 500;
    border: none;
    border-radius: var(--r-sm);
    text-align: left;
    cursor: pointer;
}
.cabinet-switcher-item:hover { background: var(--bg-canvas); }

/* Размеры: матрица модель × размер — владелец, 24.08.2026. Подсветка
   из уже существующей палитры, ничего нового: дефицит/ноль — тот же
   «негатив», что и в остальных отчётах (--pastel-pink-2), перезапас —
   пастельный жёлтый с тем же акцентом, что порог «средне» у ДРР
   (--color-average), серая модель — просто приглушённый текст. */
.size-counters { display: flex; gap: var(--space-lg); margin-bottom: var(--space-md); }
.size-counter-value { font-size: var(--font-size-metric); font-weight: 600; }
.size-counter-label { color: var(--text-muted); font-size: var(--font-size-small); }

.size-hidden-toggle { margin-bottom: 0; }
.hidden-models-btn, .hidden-sizes-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font: inherit; padding: 0;
}
.hidden-models-btn:hover, .hidden-sizes-btn:hover { color: var(--text-primary); }
.hidden-models-arrow, .hidden-sizes-arrow { display: inline-block; width: 1em; }
.hidden-models-list {
    margin: var(--space-sm) 0 var(--space-md);
    padding: var(--space-sm) var(--pad-card);
    background: var(--bg-surface);
    border-radius: var(--r-sm);
}
.hidden-models-list ul { margin: 0; padding-left: 1.2em; }
/* Блок «Скрыто без продаж и остатка» — своя таблица тем же устройством,
   что основная, отделена фоном и рамкой карточки (.card), но без её
   левого/правого отступа (владелец, 25.08.2026): блок и так лежит
   внутри той же .unified-card с её собственным горизонтальным
   отступом — паддинг .card поверх него сдвигал таблицу блока вправо
   относительно основной. Первый столбец «Артикул» должен начинаться
   в той же точке, что и в основной таблице. */
.hidden-sizes-block { margin-top: var(--space-md); padding-left: 0; padding-right: 0; }

/* Дата снимка «Размеров» — заметно бледнее обычного .muted: строка
   должна быть на странице, но не привлекать взгляд (владелец,
   25.08.2026) — обновление теперь фоновое, не действие пользователя. */
.sizes-updated-at { color: var(--text-muted); opacity: 0.55; font-size: var(--font-size-small); }

.size-toolbar {
    display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap;
    margin: var(--space-md) 0;
}
.size-filter { display: flex; gap: var(--space-xs); }
.size-filter-btn.active { background: var(--bg-inverse); color: var(--accent-lime); border-color: var(--bg-inverse); }
.size-search-input { min-width: 240px; }

/* Одна модель — одна строка, как строки таблицы: без карточек,
   разделитель — тонкая линия сверху (правка 24.08.2026, владелец:
   крупные карточки не давали видеть перекос по размерам одним
   взглядом — цель была 20 моделей на экран). */
.size-models { border-top: var(--border-width) solid var(--line); }
.size-model {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-2xs) 0;
    border-bottom: var(--border-width) solid var(--line);
}
.size-model-name-col { flex: 0 0 200px; min-width: 0; }
.size-model-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.size-model-gray .size-model-name { color: var(--text-muted); }
.size-model-median {
    color: var(--text-muted);
    font-size: var(--font-size-table-head);
    white-space: nowrap;
}

.size-cells { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.size-cell {
    min-width: 40px;
    padding: var(--space-2xs);
    border-radius: var(--r-sm);
    text-align: center;
}
.size-cell-label { color: var(--text-muted); font-size: var(--font-size-table-head); line-height: 1.3; }
.size-cell-stock { font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; }
.size-cell-price { color: var(--text-muted); font-size: var(--font-size-table-head); line-height: 1.3; font-variant-numeric: tabular-nums; }

/* Полоска под количеством — от центра ячейки (владелец, 24.08.2026):
   центр = норма (медиана), отклонение вниз растёт влево, вверх —
   вправо, до края. Ровно норма — почти нет полоски, только точка по
   центру. Подсказка, не главное — тоньше, чем ячейка вокруг, цвет
   тот же, что подсветка. Чисто для экрана, порогов не задаёт. */
.size-cell-bar-track {
    position: relative;
    height: 2px;
    margin: 3px 0;
    background: var(--border);
}
.size-cell-bar-track::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--border-strong);
    transform: translate(-50%, -50%);
}
.size-cell-bar-fill {
    position: absolute;
    top: 0; height: 100%;
    background: var(--border-strong);
}

.size-cell-deficit, .size-cell-zero { background: var(--pastel-pink-2); }
.size-cell-deficit .size-cell-stock { color: var(--state-bad-text); }
.size-cell-deficit .size-cell-bar-fill { background: var(--state-bad-text); }
.size-cell-zero .size-cell-stock { color: var(--accent-magenta); }
.size-cell-zero .size-cell-bar-fill { background: var(--accent-magenta); }
.size-cell-overstock { background: var(--pastel-yellow); }
.size-cell-overstock .size-cell-stock { color: var(--color-average); }
.size-cell-overstock .size-cell-bar-fill { background: var(--color-average); }
.size-cell-gray .size-cell-label, .size-cell-gray .size-cell-stock, .size-cell-gray .size-cell-price {
    color: var(--text-muted);
}

/* Экран «Логистика» — переплата за нелокальность по моделям.
   Цвета только токенами (правило 5). */
.logistics-summary { display: flex; gap: var(--gap); margin: var(--gap) 0; flex-wrap: wrap; }
.logistics-metric {
    flex: 1 1 220px;
    padding: var(--pad-card);
    background: var(--bg-canvas);
    border-radius: var(--r-card);
}
.logistics-metric-main { background: var(--pastel-lilac); }
.logistics-metric-label {
    font-size: var(--font-size-table-head);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-secondary);
}
.logistics-metric-value {
    font-size: var(--font-size-title);
    font-weight: 600;
    margin-top: var(--space-xs);
}
.logistics-metric-note {
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    margin-top: var(--space-2xs);
}
.logistics-facts, .logistics-footnote {
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}
.logistics-footnote {
    margin-top: var(--space-lg);
    padding-top: var(--space-sm);
    border-top: var(--border-width) solid var(--line);
}
.logistics-warning {
    padding: var(--space-sm) var(--space-md);
    background: var(--pastel-yellow);
    border-radius: var(--r-sm);
    font-size: var(--font-size-small);
}