/* Страница «Спреды онлайн».

   Раскладка подстраивается под ширину самой страницы, а не окна: контейнер
   .spread-container объявлен как container «page» (см. layout/main-layout.css),
   потому что колонка навигации забирает 248px и медиазапрос по окну
   срабатывает на эти 248px позже, чем нужно. Медиазапросы по окну остались
   только там, где речь действительно об окне. */

.coin-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.coin-link:hover {
    color: #0d6efd;
    text-decoration: underline;
}

/* Фильтры — сетка, а не ряд флексов: колонки укладываются сами по ширине
   страницы, поэтому «в один столбец на телефоне» отдельным правилом задавать
   не нужно. min(100%, …) защищает от колонки шире страницы. */
.spread-filters {
    --filter-min: 11rem;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--filter-min)), 1fr));
    gap: 0.5rem 0.75rem;
    align-items: end;
    margin-bottom: 0.75rem;
}

.filter-field {
    min-width: 0;
}

/* .filter-label — подпись с кнопкой «?» рядом: кнопку нельзя класть внутрь
   label, нажатие на неё ушло бы ещё и в поле. */
.spread-filters .filter-field > label,
.spread-filters .filter-field > .filter-label,
.spread-filters .form-check-label {
    display: block;
    font-size: 0.8rem;
    margin-bottom: 3px;
}

/* Bootstrap делает label inline-block: перенесённая подпись растягивается на
   всю колонку и сталкивает «?» на отдельную строку. Строчная — кнопка встаёт
   сразу за последним словом. */
.spread-filters .filter-label > label {
    display: inline;
    margin: 0;
}

.spread-filters .form-select,
.spread-filters .form-control {
    font-size: 0.85rem;
    padding: 5px 10px;
    height: auto;
}

/* Поля фильтров ниже общих, но место под стрелку селекта остаётся. */
.spread-filters .form-select {
    padding-right: 2rem;
}

/* Пара «От — До». Поля делят строку поровну и сжимаются до нуля, иначе
   в узкой колонке правое поле вылезает за её край. */
.filter-range {
    display: flex;
    align-items: center;
    gap: 5px;
}

.filter-range .form-control {
    min-width: 0;
    flex: 1 1 0;
}

/* Флажок «API доступно» стоит на одной линии с полями соседних колонок. */
.api-filter {
    display: flex;
    align-items: center;
    padding-bottom: 5px;
}

.api-filter .form-check-label {
    white-space: nowrap;
}

/* Сводка карточки: слева проценты, справа объёмы. В узкой колонке объёмы
   переезжают под проценты, а не выходят за край карточки. */
.spread-card .spread-percentage {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.25rem 1rem;
}

.spread-percentage-main {
    min-width: 0;
}

.spread-card .volume-info {
    min-width: 0;
    margin-top: 0;
}

.spread-percentage-average {
    margin-top: 2px;
    font-size: 0.75em;
    opacity: 0.85;
}

.spread-percentage-average .value {
    font-weight: 400 !important;
    font-size: 0.9em !important;
}

.spread-percentage-average .label {
    font-weight: 500;
    color: #6c757d;
}

/* Внутри одна буква (F/S), поэтому бейдж фиксированной ширины и с текстом
   по центру — иначе F и S давали бы плашки разной ширины. */
.trade-type-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    padding: 1px 0;
    min-width: 15px;
    text-align: center;
    margin-left: 4px;
    border-radius: 4px;
    background: rgba(13, 110, 253, 0.12);
    color: #0d6efd;
    vertical-align: middle;
    line-height: 1.4;
    white-space: nowrap;
}

/* ---------- Таблица спредов ----------

   Цвета — токенами на .table-view, тёмная тема (spread-dark.css) переопределяет
   только их. Селекторы с .spread-container: общие стили компонентов
   подключаются после стилей страницы и при равной специфичности побеждают. */
.spread-container .table-view {
    --st-surface: #ffffff;
    --st-head: #f8fafc;
    --st-hover: #f4f7fb;
    --st-border: #eef1f5;
    --st-border-strong: #e2e8f0;
    --st-text: #1f2937;
    --st-text-2: #475569;
    --st-muted: #64748b;
    --st-faint: #94a3b8;
    --st-positive: #16a34a;
    --st-negative: #dc2626;
    --st-short: #dc2626;
    --st-long: #16a34a;
    --st-accent: #2563eb;
    --st-chip: #f1f5f9;
    --st-chip-border: #e2e8f0;
    --st-futures-bg: rgba(37, 99, 235, 0.1);
    --st-futures-text: #1d4ed8;
    --st-spot-bg: rgba(217, 119, 6, 0.12);
    --st-spot-text: #b45309;
    --st-dex-bg: rgba(124, 58, 237, 0.1);
    --st-dex-text: #6d28d9;
    --st-warn: #b45309;
    --st-star: #f59e0b;
    --st-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --st-edge-shadow: rgba(15, 23, 42, 0.12);

    background: none;
    box-shadow: none;
}

/* Без прокрутки вбок (overflow: clip не делает обёртку прокручиваемой) шапка
   таблицы липнет к верху при прокрутке страницы. Когда таблица не помещается,
   spread.js ставит is-scrollable: таблица листается вбок, а колонка монеты
   остаётся на месте. */
.st-scroll {
    overflow: clip;
    background: var(--st-surface);
    border: 1px solid var(--st-border-strong);
    border-radius: 12px;
    box-shadow: var(--st-shadow);
}

.st-scroll.is-scrollable {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.st-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--st-text);
    font-variant-numeric: tabular-nums;
}

/* Шапка липнет к верху .main-content — её прокручивает страница. На телефоне
   прокручивается окно под шапкой сайта, но там таблица всегда шире экрана и
   листается вбок, а в этом режиме шапку держит сама обёртка: отступ сверху
   сдвинул бы шапку внутрь таблицы, поверх первой строки. */
.st-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.6rem 0.625rem;
    background: var(--st-head);
    /* Рамка тенью: у закреплённой ячейки border-bottom остаётся на месте. */
    box-shadow: inset 0 -1px 0 var(--st-border-strong);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--st-muted);
}

/* Фон — у ячеек, а не у строки: у закреплённой колонки монеты он должен быть
   непрозрачным, иначе под ней просвечивают уехавшие влево ячейки. */
.st-table tbody td,
.st-table tbody th {
    padding: 0.45rem 0.625rem;
    border-bottom: 1px solid var(--st-border);
    background: var(--st-surface);
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}

.st-table tbody tr:last-child > * {
    border-bottom: 0;
}

.st-table tbody tr.st-row:hover > * {
    background: var(--st-hover);
}

.st-table .st-col-num {
    text-align: right;
}

/* Двухсловный заголовок над короткими числами («$5K») переносится, когда
   таблице тесно: в одну строку он один делал колонку вдвое шире её чисел. */
.st-table thead .st-col-wrap {
    white-space: normal;
}

.st-table .st-col-actions {
    width: 1%;
    padding-left: 0.25rem;
    padding-right: 0.5rem;
}

/* Ноги отделены от соседей тонкой линией: шорт и лонг читаются как пара блоков. */
.st-table tbody .st-col-leg {
    border-left: 1px solid var(--st-border);
}

.st-table thead .st-col-leg {
    padding-left: calc(0.625rem + 1px);
}

.st-table thead .st-col-leg--short {
    color: var(--st-short);
}

.st-table thead .st-col-leg--long {
    color: var(--st-long);
}

/* Строчки ячейки: верхняя — вход, нижняя — выход. */
.st-line {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    min-height: 1.35em;
}

.st-col-num .st-line {
    justify-content: flex-end;
}

.st-sub {
    font-size: 0.72rem;
    color: var(--st-muted);
}

.st-label {
    color: var(--st-faint);
}

.st-none {
    color: var(--st-faint);
}

/* Сортировка по клику на «Спред» */
.st-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.st-sort:hover,
.st-sort.is-active {
    color: var(--st-text);
}

.st-sort__icon {
    font-size: 0.62rem;
    opacity: 0.75;
}

.st-sort:focus-visible,
.st-fav:focus-visible,
.st-ca:focus-visible,
.st-action:focus-visible {
    outline: 2px solid var(--st-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Монета: звезда, тикер (ссылка на график связки), под ним сеть и контракт */
.st-coin-cell {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.st-coin {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--st-text);
    text-decoration: none;
}

.st-coin:hover {
    color: var(--st-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.st-fav {
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--st-faint);
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.15s, color 0.15s, transform 0.15s;
}

.st-row:hover .st-fav {
    opacity: 1;
}

.st-fav:hover {
    color: var(--st-star);
    transform: scale(1.12);
}

.st-row[data-fav="like"] .st-fav {
    color: var(--st-star);
    opacity: 1;
}

.st-coin-meta {
    gap: 0.45rem;
}

/* У монеты без сети и контракта тикер встаёт по центру строки. */
.st-coin-meta:empty {
    display: none;
}

.st-chain {
    color: var(--st-muted);
}

.st-ca {
    position: relative;
    padding: 0;
    border: 0;
    background: none;
    font-family: ui-monospace, 'Roboto Mono', SFMono-Regular, Menlo, monospace;
    font-size: 0.68rem;
    color: var(--st-faint);
    cursor: pointer;
}

/* Значок копирования появляется при наведении и места в строке не занимает:
   иначе колонка монеты была бы шире на его ширину ради невидимой иконки. */
.st-ca i {
    position: absolute;
    top: 50%;
    left: 100%;
    margin-left: 0.25rem;
    font-size: 0.68rem;
    line-height: 1;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.15s;
}

.st-ca:hover,
.st-ca.is-copied {
    color: var(--st-accent);
}

.st-row:hover .st-ca i,
.st-ca:focus-visible i {
    opacity: 0.8;
}

/* Спред не пересчитывался дольше порога: числа строки уже не про рынок.
   Метка у тикера видна и без наведения (телефон), сами числа приглушены. */
.st-stale {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--st-warn);
}

/* Приглушается содержимое, а не ячейка: закреплённая при прокрутке вбок
   ячейка с прозрачностью пропускала бы уехавшие под неё числа. */
.st-row.is-stale > td > * {
    opacity: 0.5;
}

.st-row.is-stale > .st-col-coin {
    box-shadow: inset 3px 0 0 var(--st-warn);
}

/* Спред: вход крупно и цветом знака, выход — под ним */
.st-entry {
    font-size: 0.95rem;
    font-weight: 700;
}

.st-entry.is-positive {
    color: var(--st-positive);
}

.st-entry.is-negative {
    color: var(--st-negative);
}

.st-exit,
.st-ext {
    color: var(--st-text-2);
}

/* Нога: биржа и цена входа, под ними оборот, ввод/вывод и цена выхода.
   Цены выровнены по правому краю колонки — их удобно сравнивать по строкам. */
/* Колонка биржи — по содержимому: с minmax(0, …) она сжималась бы до нуля,
   и цена наезжала на название (Hyperliquid на экране 1280px). Тогда таблица
   не знала бы, что ей тесно, и не включала прокрутку вбок. */
.st-leg {
    display: grid;
    grid-template-columns: auto minmax(max-content, 1fr);
    align-items: baseline;
    column-gap: 0.75rem;
    row-gap: 0.1rem;
}

/* min-width не обнуляем: тогда минимальная ширина колонки биржи — её
   содержимое, и узкая страница включает прокрутку вбок, а не наложение. */
.st-leg__venue,
.st-leg__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.st-leg__meta {
    font-size: 0.72rem;
    color: var(--st-muted);
}

.st-leg__price {
    text-align: right;
}

.st-leg__price--exit {
    font-size: 0.72rem;
    color: var(--st-muted);
}

.st-exchange {
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--st-chip-border);
    border-radius: 5px;
    background: var(--st-chip);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--st-text);
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

a.st-exchange:hover {
    border-color: var(--st-accent);
    color: var(--st-accent);
}

.st-tag {
    padding: 0 0.3rem;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
    cursor: help;
}

.st-tag--futures {
    background: var(--st-futures-bg);
    color: var(--st-futures-text);
}

.st-tag--spot {
    background: var(--st-spot-bg);
    color: var(--st-spot-text);
}

.st-tag--dex {
    background: var(--st-dex-bg);
    color: var(--st-dex-text);
}

.st-wallet:empty {
    display: none;
}

.st-table .wallet-flag {
    font-size: 0.72rem;
}

.st-table .wallet-flag + .wallet-flag {
    margin-left: 0.15rem;
}

/* Действия строки: скрыть связку и открыть её график. Заметны при наведении;
   на сенсорном экране наведения нет — там видны всегда. */
.st-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.1rem;
}

.st-action {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    font-size: 0.85rem;
    color: var(--st-faint);
    opacity: 0.45;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s, background-color 0.15s, color 0.15s;
}

.st-row:hover .st-action {
    opacity: 1;
}

.st-action:hover {
    background: var(--st-chip);
    color: var(--st-accent);
}

.st-row[data-fav="dislike"] .st-hide {
    opacity: 1;
    color: var(--st-warn);
}

@media (hover: none) {
    .st-fav,
    .st-action {
        opacity: 1;
    }

    .st-ca i {
        opacity: 0.8;
    }
}

/* Только что скрытая связка остаётся на месте до ухода курсора с таблицы —
   её можно сразу вернуть. В списке «Скрытые» приглушать нечего. */
.st-table:not([data-favourite-filter="disliked"]) .st-row[data-fav="dislike"] > :not(.st-col-actions) > * {
    opacity: 0.4;
}

/* Сообщения вместо строк: загрузка и пустая выдача */
.st-table .st-message td {
    padding: 2.5rem 1rem;
    text-align: center;
    white-space: normal;
    color: var(--st-muted);
}

.st-message i {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 1.6rem;
    opacity: 0.6;
}

.st-message small {
    display: block;
    margin-top: 0.25rem;
    color: var(--st-faint);
}

/* Прокрутка вбок: колонка монеты закреплена, у края закреплённой части —
   тень, пока таблица сдвинута. */
.st-scroll.is-scrollable .st-col-coin {
    position: sticky;
    left: 0;
    z-index: 1;
}

.st-scroll.is-scrollable thead .st-col-coin,
.st-scroll.is-scrollable thead .st-col-spread {
    z-index: 3;
}

.st-scroll.is-scrollable .st-col-coin::after {
    content: "";
    position: absolute;
    top: 0;
    right: -8px;
    bottom: 0;
    width: 8px;
    pointer-events: none;
    background: linear-gradient(to right, var(--st-edge-shadow), transparent);
    opacity: 0;
    transition: opacity 0.15s;
}

.st-scroll.is-scrolled-x .st-col-coin::after {
    opacity: 1;
}

/* Планшет и узкое окно: рядом с монетой закреплён и спред — листая к ногам,
   его не теряешь из виду. Отступ — ширина колонки монеты (её меряет
   spread.js). На телефоне две закреплённые колонки заняли бы экран. */
@container page (min-width: 640px) {
    .st-scroll.is-scrollable .st-col-spread {
        position: sticky;
        left: var(--st-coin-width, 0px);
        z-index: 1;
    }

    .st-scroll.is-scrollable .st-col-coin::after {
        display: none;
    }

    .st-scroll.is-scrollable .st-col-spread::after {
        content: "";
        position: absolute;
        top: 0;
        right: -8px;
        bottom: 0;
        width: 8px;
        pointer-events: none;
        background: linear-gradient(to right, var(--st-edge-shadow), transparent);
        opacity: 0;
        transition: opacity 0.15s;
    }

    .st-scroll.is-scrolled-x .st-col-spread::after {
        opacity: 1;
    }
}

/* Узкая страница: таблица идёт от края до края, без боковых полей. */
@container page (max-width: 700px) {
    .st-scroll {
        margin-inline: calc(-1 * var(--page-gutter));
        border-inline: 0;
        border-radius: 0;
    }

    .st-table tbody td,
    .st-table tbody th,
    .st-table thead th {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
}

/* Узкая страница: колонка навигации может быть на месте (планшет, узкое окно)
   или уже уехать в бургер — правилам ниже это безразлично. */
@container page (max-width: 700px) {
    .spread-filters {
        gap: 0.4rem 0.6rem;
    }

    .spread-filters .filter-field > label,
    .spread-filters .filter-field > .filter-label,
    .spread-filters .form-check-label {
        font-size: 0.75rem;
        margin-bottom: 2px;
    }

    .spread-filters .form-select,
    .spread-filters .form-control {
        font-size: 0.82rem;
        padding: 6px 8px;
    }

    .spread-filters .form-select {
        padding-right: 1.75rem;
    }

    .btn-refresh {
        padding: 0.4rem 0.75rem;
        font-size: 0.82rem;
    }
}

/* Телефон: две колонки фильтров вместо одной — блок перестаёт занимать
   два экрана до первой карточки. */
@container page (max-width: 460px) {
    .spread-filters {
        --filter-min: 8.5rem;
    }
}

/* Переход «Смотреть спреды на …» со страниц бирж (?exchange=id) */
.spread-only-exchange {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: rgba(52, 152, 219, 0.12);
    font-size: 0.9rem;
}

/* «Мои биржи»: флажок и «Моя страна» под фильтрами сканера */
.spread-my-exchanges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
    margin-bottom: 0.75rem;
}