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

.logistics-models { border-top: var(--border-width) solid var(--line); }
.logistics-model { border-bottom: var(--border-width) solid var(--line); padding: var(--space-sm) 0; }
.logistics-model-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}
.logistics-model-title { display: flex; align-items: baseline; gap: var(--space-xs); min-width: 0; flex: 1 1 auto; }
.logistics-model-far {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    font-weight: 400;
    white-space: nowrap;
}
.logistics-model-name { font-size: var(--font-size-card-title); font-weight: 600; }
.logistics-model-sizes { color: var(--text-muted); font-size: var(--font-size-small); }
.logistics-model-overpay {
    font-size: var(--font-size-metric);
    font-weight: 600;
    white-space: nowrap;
}
.logistics-line { margin: var(--space-2xs) 0; }
.logistics-line-muted { color: var(--text-secondary); font-size: var(--font-size-small); }

.logistics-bar {
    display: flex;
    height: 12px;
    margin: var(--space-sm) 0 var(--space-2xs);
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--bg-canvas);
}
/* Белая черта между сегментами: соседние кластеры одного состояния
   сливались в сплошное пятно (владелец, 25.08.2026, по скриншоту).
   Граница именно на сегменте, а не зазор в раскладке — иначе сумма
   ширин перестанет складываться в 100%. */
.logistics-bar-seg {
    display: block;
    height: 100%;
    box-shadow: inset -2px 0 0 var(--bg-surface);
}
.logistics-bar-seg:last-child { box-shadow: none; }
.logistics-bar-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: var(--space-2xs);
}
.logistics-bar-c1 { background: var(--logistics-c1); }
.logistics-bar-c2 { background: var(--logistics-c2); }
.logistics-bar-c3 { background: var(--logistics-c3); }
.logistics-bar-c4 { background: var(--logistics-c4); }
.logistics-bar-c5 { background: var(--logistics-c5); }
.logistics-bar-c6 { background: var(--logistics-c6); }
.logistics-bar { height: 14px; }
.logistics-bar-other { background: var(--logistics-other); }
/* Ровный ряд одинаковых подписей, а не растянутые под ширину сегментов:
   от растяжки кружок, имя и число разъезжались, а длинные названия
   ломались на три строки (владелец, 25.08.2026). Связь с полоской —
   через цвет кружка. Полное имя кластера — в подсказке. */
.logistics-bar-labels {
    display: flex;
    align-items: flex-start;
    font-size: 11px; /* мельче основного: иначе подписи узких сегментов наезжают */
    line-height: 1.3;
    color: var(--text-secondary);
    margin-bottom: var(--space-2xs);
}
/* Ячейка подписи повторяет ширину своего сегмента, текст в ней
   центрирован — взгляд идёт от цвета вниз и попадает в имя
   (владелец, 25.08.2026). */
.logistics-bar-label {
    box-sizing: border-box;
    padding: 0 2px;
    text-align: center;
    white-space: nowrap;
    cursor: help;
}
.logistics-bar-label b { color: var(--text-primary); font-weight: 600; }
.logistics-bar-label .logistics-bar-dot { width: 6px; height: 6px; margin-right: 3px; }

.logistics-fact { margin: var(--space-xs) 0 var(--space-2xs); }
.logistics-advice-none {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: var(--font-size-small);
}
.logistics-estimate {
    display: inline-block;
    margin-left: var(--space-xs);
    color: var(--text-secondary);
    font-weight: 400;
    font-size: var(--font-size-small);
}
.logistics-badge {
    display: inline-block;
    padding: 0 var(--space-xs);
    border-radius: var(--r-pill);
    background: var(--pastel-lilac-2);
    color: var(--text-primary);
    font-size: var(--font-size-table-head);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.logistics-gap { margin: var(--space-2xs) 0; font-size: var(--font-size-small); color: var(--state-bad-text); }
.logistics-model-details { margin-top: var(--space-md); }
.logistics-subhead {
    font-size: var(--font-size-small);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-secondary);
    margin: var(--space-md) 0 var(--space-xs);
}
.logistics-table { border-collapse: collapse; width: 100%; max-width: 640px; font-size: var(--font-size-small); }
.logistics-table th {
    text-align: left;
    font-size: var(--font-size-table-head);
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 500;
    padding: var(--space-2xs) var(--space-xs);
}
.logistics-table td { padding: var(--space-2xs) var(--space-xs); border-top: var(--border-width) solid var(--line); }
.logistics-minor-toggle { margin-top: var(--space-md); }
.logistics-minor-btn {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; color: var(--text-secondary);
}

.logistics-bar-more {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: var(--text-muted);
    white-space: nowrap;
}
.logistics-bar-more:hover { color: var(--text-secondary); }
.logistics-bar-seg { cursor: help; }
.logistics-nobase-btn {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; color: var(--text-secondary);
}
.logistics-nobase-list { margin-bottom: var(--space-md); }

.logistics-model-money { text-align: right; white-space: nowrap; }
.logistics-model-overpay-note {
    display: block;
    font-size: var(--font-size-small);
    font-weight: 400;
    color: var(--text-muted);
}
.logistics-more-btn, .logistics-tariff-btn {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; color: var(--accent-violet); text-decoration: underline;
}
.logistics-more-body, .logistics-tariff-body { margin: 0 0 var(--space-sm); }
.logistics-ai-hint {
    color: var(--text-muted);
    font-size: var(--font-size-small);
    margin: 0 0 var(--space-sm);
}
.logistics-sizes-table td:first-child { font-weight: 600; }

/* Строка под заголовком «Единого отчёта»: по какой дате собраны цифры.
   Нужна, чтобы отчёт не путали с будущим финансовым — тот будет считать
   по поступившим деньгам, а этот по дате заказа (владелец, 01.09.2026). */
.report-basis {
    margin: 0 0 var(--space-md);
    color: var(--text-secondary);
    font-size: var(--font-size-small);
}

/* Значок «?» с подсказкой. Своя, а не системная title=: текст в несколько
   предложений — браузерная подсказка показывает его одной строкой, ждёт
   около секунды и не открывается с клавиатуры. */
.hint {
    position: relative;
    display: inline-block;
    margin-left: var(--space-2xs);
    vertical-align: middle;
}
.hint-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: var(--border-width) solid var(--border-strong);
    border-radius: var(--r-pill);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: var(--font-size-small);
    font-weight: 600;
    line-height: 1;
    cursor: help;
}
.hint-mark:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}
.hint-popup {
    position: absolute;
    left: 0;
    top: calc(100% + var(--space-2xs));
    z-index: 20;
    display: none;
    width: 320px;
    padding: var(--space-sm);
    background: var(--bg-surface);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-pop);
    color: var(--text-primary);
    font-size: var(--font-size-small);
    font-weight: 500;
    line-height: 1.45;
}
/* Показывается и мышью, и с клавиатуры: focus-within ловит переход
   табом на саму кнопку. */
.hint-mark:hover + .hint-popup,
.hint:focus-within .hint-popup {
    display: block;
}

/* Шапка строго в одну строку и одной высоты: перенос на две строки
   заставлял высоту шапки прыгать от колонки к колонке (владелец,
   01.09.2026). Длинные названия поэтому сокращены в UNIFIED_COLUMNS,
   а не перенесены, а ширины подобраны так, чтобы текст помещался
   целиком — обрезка многоточием тут запасной вариант, не рабочий. */
.unified-table thead th { vertical-align: middle; }

/* Обрезка ячейки снята только у колонки с подсказкой — иначе
   всплывающий блок обрезался бы её краем. Остальным колонкам
   overflow: hidden оставлен как был. */
.unified-table thead th.th-hint { overflow: visible; }

/* Подпись и значок сортировки стоят вместе, в потоке, прижатые к правому
   краю ячейки. Раньше значок был вынесен к ЛЕВОМУ краю — чтобы подпись
   села ровно над столбцом цифр. Ценой стало то, что значок оказывался
   визуально под подписью ПРЕДЫДУЩЕЙ колонки: у «Ц.корз Р» стрелка
   выглядела принадлежащей «Расход З» (владелец, 01.09.2026). Точное
   выравнивание заголовка над разрядами того не стоит — стрелка обязана
   быть при своей подписи. */
.unified-table thead th .hint { margin-left: var(--space-2xs); }
.unified-table thead th .hint-popup {
    left: 0;
    right: auto;
    width: 280px;
    white-space: normal;
    text-align: left;
    font-weight: 500;
}

/* Значок у заголовка страницы: подпись про дату заказа больше не висит
   отдельной строкой и не занимает место постоянно (владелец, 01.09.2026). */
.hint-title { margin-left: var(--space-xs); vertical-align: middle; }
.hint-title .hint-mark { width: 22px; height: 22px; font-size: var(--font-size-base); }

/* Верхний ряд шапки — группы колонок по размещениям («Поиск»,
   «Рекомендации», «Оплата за заказ»). Нужен, чтобы при горизонтальной
   прокрутке было понятно, к чему относится колонка: их 45 (владелец,
   01.09.2026). Ряд только подписывает — сортировка живёт в нижнем. */
.unified-table thead tr.unified-head-groups th {
    top: 0;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-table-head);
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    background: var(--bg-canvas);
}
.unified-table thead tr.unified-head-groups th.head-group {
    border-left: var(--border-width) solid var(--border-strong);
    border-right: var(--border-width) solid var(--border-strong);
    border-bottom: var(--border-width) solid var(--line);
}
/* Нижний ряд прилипает не к нулю, а под верхним — иначе они наложатся
   друг на друга при вертикальной прокрутке. */
.unified-table thead tr.unified-head-cols th { top: 30px; }
/* Первая колонка закреплена слева в обоих рядах шапки. */
.unified-table thead tr.unified-head-groups th:first-child {
    position: sticky; left: 0; z-index: 3;
    background: var(--bg-canvas);
    box-shadow: 2px 0 0 var(--line);
}

/* Настройки таблицы: какие колонки показывать. Колонок 45, и не всякому
   нужны все сразу. Тумблер есть у группы и у каждой колонки отдельно.
   Управляет только экраном — файл всегда выгружается полностью
   (владелец, 01.09.2026). */
.columns-picker { position: relative; display: inline-block; }
.columns-btn-icon { margin-right: var(--space-2xs); }