@charset "UTF-8";
/* scriner-mobile.css — мобильная обёртка блока «Скринер акций» (03.09.2026)
   Работает вместе с scriner-mobile.js. Стили для: свёрнутой плашки легенды
   у гостя, скрытия колонки «Сектор», пульсирующей подсказки «листайте
   влево». Все правила внутри @media (max-width: 576px) ниже — десктоп
   не затронут. */

@media (max-width: 576px) {
    /* Правило .scriner-mobile-scroll-hint удалено 03.09.2026 — этот градиент
       был position:absolute внутри скролл-контейнера, из-за чего ехал вместе
       с содержимым таблицы, а не стоял у правого края; растянутый на всю
       высоту (top:0/bottom:0), цвета фона и с z-index:3 выше закреплённой
       колонки, он проходил поверх названий компаний. Роль подсказки о
       скролле полностью выполняет .scriner-mobile-swipe-hint ниже. */

    /* Свёрнутая плашка "Один лотос..." у гостя — повторяет визуал
       .scriner-intro-collapsed-bar подписчика (та CSS в scriner-optimized.js,
       который для гостя не загружается вовсе). */
    .scriner-mobile-guest-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 10px 16px;
        border-radius: 10px;
        background: var(--tblr-bg-surface-secondary);
        border: 1px solid var(--tblr-border-color);
        cursor: pointer;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--tblr-secondary);
        transition: color 0.15s ease, border-color 0.15s ease;
    }
    .scriner-mobile-guest-bar:hover {
        color: var(--tblr-body-color);
        border-color: #206bc4;
    }

    /* Колонка "Сектор" малоинформативна на узком экране (просто цветная
       полоска без подписи) — скрываем, освобождает место под скролл. */
    .scriner-main-table th:nth-child(4),
    .scriner-main-table td:nth-child(4) {
        display: none;
    }

    /* Самый прямой и максимально совместимый способ — прячем сам элемент
       по имени класса, без :has() (может не поддерживаться на части
       Android WebView) и без расчёта номера колонки (риск промаха).
       02.09.2026, после того как первые два варианта не сработали. */
    .sector-strip {
        display: none !important;
    }

    /* Пульсирующая подсказка «листайте влево» над таблицей (03.09.2026,
       второй заход) — вставляется/убирается из scriner-mobile.js, здесь
       только внешний вид и анимация. Плавно гаснет (класс -hidden) перед
       удалением из DOM, а не пропадает рывком. */
    .scriner-mobile-swipe-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 12px;
        margin-bottom: 8px;
        border-radius: 8px;
        background: var(--tblr-bg-surface-secondary);
        border: 1px solid var(--tblr-border-color);
        color: var(--tblr-secondary);
        font-size: 0.75rem;
        font-weight: 600;
        text-align: center;
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .scriner-mobile-swipe-hint-hidden {
        opacity: 0;
        transform: translateY(-4px);
        pointer-events: none;
    }

    .scriner-mobile-swipe-hint-arrow {
        display: inline-flex;
        flex-shrink: 0;
        color: #206bc4;
        animation: scriner-mobile-swipe-pulse 1.3s ease-in-out infinite;
    }

    @keyframes scriner-mobile-swipe-pulse {
        0%, 100% { transform: translateX(0); opacity: 0.55; }
        50% { transform: translateX(-5px); opacity: 1; }
    }

    /* Заголовки таблицы на мобильном (05.09.2026, второй заход) — сначала
       пробовали обрезать многоточием (overflow:hidden), но после того как
       колонкам дали больше пространства (min-width таблицы поднят до
       1100px в scriner-mobile.js), оказалось нагляднее переносить длинные
       заголовки на две строки, а не обрезать их — «Рост г/г», «90 дней»
       и т.п. читаются полностью. white-space:normal перебивает Bootstrap-
       класс text-nowrap на самой <table> (он ставит nowrap с !important,
       поэтому здесь тоже нужен !important, иначе проиграет). Высота строки
       заголовка растёт сама — table-layout:fixed фиксирует только ширину
       колонок, не высоту строк. */
    .scriner-main-table thead th {
        white-space: normal !important;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.2;
        vertical-align: middle;
    }

    /* Панель фильтров скринера (сектор/показать/поиск/быстрые фильтры) —
       05.09.2026. В scriner-optimized.js есть общее правило
       `.card-body.border-bottom.py-3 .d-flex{flex-direction:column!important}`
       (рассчитано на ≤768px) — оно расставляет КАЖДЫЙ элемент управления
       на свою отдельную строку без разбора, отсюда разнобой на скриншоте.
       Ниже — более точная раскладка именно под узкий экран: селектор
       сектора занимает всю ширину отдельной строкой, следом компактной
       группой «Показать N записей» + кнопка списка, затем поиск на всю
       ширину, и отдельно — быстрые фильтры. Специфичность через
       #scriner-container (id) гарантированно перебивает исходное правило
       (у него только классы) независимо от порядка подключения файлов —
       не полагаемся на очерёдность <style>/<link> в документе. */
    #scriner-container .text-secondary.d-flex.align-items-center {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        row-gap: 10px;
        column-gap: 8px;
        width: 100%;
    }

    /* Единый визуальный стиль для трёх "нейтральных" контролов — Сектор,
       Показать N, Поиск (11.09.2026, шестой заход: были все с разным
       border-radius/фоном/шрифтом — жалоба пользователя). Общие height/
       border-radius/font/цвета задаём один раз здесь и переиспользуем на
       всех трёх ниже, а не подбираем заново под каждый — сверить руками,
       что расходится, при следующей правке будет проще. "Мой список"
       сюда сознательно не входит — её просили не перекрашивать, только
       выровнять и привести шрифт к общему (см. отдельное правило ниже). */
    #scriner-container #sectorDropdown,
    .scriner-mobile-controls-half-count,
    #scriner-container #scriner-search {
        height: 38px !important;
        border-radius: 8px !important;
        background: var(--tblr-bg-surface) !important;
        border: 1px solid var(--tblr-border-color) !important;
        color: var(--tblr-body-color) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
    }

    /* Селектор сектора — на всю ширину своей половины строки. */
    #scriner-container .dropdown.me-3 {
        width: 100%;
        margin-right: 0 !important;
        min-width: 0;
        overflow: hidden;
    }
    #scriner-container #sectorDropdown {
        display: flex !important;
        align-items: center;
        width: 100%;
        min-width: 0 !important;
        max-width: 100%;
        overflow: hidden;
        text-align: left;
    }
    #scriner-container #sectorDropdown .scriner-sector-btn-label {
        display: block;
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* #scriner-search — двойной ID-селектор перебивает вне зависимости от
       порядка подключения файлов; scriner-optimized.js на этой ширине
       зажимает поле в 150px (рассчитано на вариант, когда рядом с ним
       ещё что-то стоит на десктопе). */
    #scriner-container #scriner-search {
        width: 100%;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Быстрые фильтры (05.09.2026, третий заход) — вместо переноса по
       длине текста (разнобой: где-то влезало по 2 кнопки, где-то одна
       во всю ширину) — ровная сетка 2 колонки. Подпись "Быстрые фильтры:"
       выносим на всю ширину отдельной строкой сверху (grid-column:1/-1),
       кнопки — одинаковой ширины, текст внутри переносится сам, если не
       помещается (у длинных вроде "Недооценённые по мультипликаторам"). */
    #scriner-container .card-body.border-bottom.py-2 .d-flex.flex-wrap {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    #scriner-container .card-body.border-bottom.py-2 .d-flex.flex-wrap > .text-secondary {
        grid-column: 1 / -1;
    }
    /* Подсказка под активной пилюлей (.scriner-preset-explanation) —
       теперь общий десктопный элемент из scriner-optimized.js (переехал
       туда 11.09.2026, был мобильным костылём). Там раскладка — flex-wrap,
       и растяжение на всю ширину сделано через flex-basis:100%; на
       мобильном тот же ряд переведён в display:grid (см. правило выше) —
       flex-basis в гриде не действует, поэтому здесь свой аналог. */
    #scriner-container .card-body.border-bottom.py-2 .scriner-preset-explanation {
        grid-column: 1 / -1;
    }
    #scriner-container .card-body.border-bottom.py-2 .scriner-preset-chip {
        width: 100%;
        white-space: normal;
        text-align: center;
        justify-content: center;
        line-height: 1.25;
        font-size: 9px;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }
    /* Неактивные пилюли — прозрачный фон (только тонкая обводка) визуально
       читается как "уже", чем сплошь залитые кнопки строкой выше того же
       фактического размера (мат. проверено — паддинги и 1fr-колонки у
       обоих блоков идентичны, разница чисто оптическая от заливки).
       :not(.active) — чтобы не перебить синюю заливку выбранной пилюли
       (та же специфичность + !important у нас против desktop-правила
       .scriner-preset-chip.active, без :not() мы бы её погасили). */
    #scriner-container .card-body.border-bottom.py-2 .scriner-preset-chip:not(.active) {
        background: var(--tblr-bg-surface) !important;
    }

    /* Подсказка под активной пилюлей (11.09.2026) — вставляется реальным
       DOM-узлом сразу после выбранной пилюли (scriner-mobile.js,
       syncPresetExplanation) внутри той же grid-сетки; grid-column:1/-1
       растягивает её на всю ширину и переносит всё, что после неё, на
       новую строку — самой сетке ничего дополнительно готовить не нужно. */
    .scriner-mobile-preset-explanation {
        grid-column: 1 / -1;
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 12px;
        margin-top: 2px;
        border-radius: 10px;
        background: var(--tblr-bg-surface-secondary);
        border: 1px solid var(--tblr-border-color);
        font-size: 12px;
        line-height: 1.4;
        color: var(--tblr-secondary);
        text-transform: none;
        letter-spacing: normal;
    }
    .scriner-mobile-preset-explanation-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        margin-top: 1px;
        background: #206bc4;
        color: #fff;
        border-radius: 50%;
        font-size: 11px;
        font-weight: bold;
        font-style: normal;
    }
    .scriner-mobile-preset-explanation-text {
        flex: 1;
    }

    /* ⚠️ Сброс Bootstrap-отступов — ТОЛЬКО с !important (11.09.2026).
       Утилиты .ms-2/.ms-3/.mx-2 объявлены в самом Bootstrap с !important,
       поэтому обычный `margin-left:0` им проигрывает независимо от
       специфичности селектора. Именно из-за этого левые края трёх контролов
       расходились лесенкой: "Все сектора" — по краю (0), "Поиск" — +0.5rem
       (ms-2), "Мой список" — +1rem (ms-3). Все три должны начинаться от
       одного края. */
    .scriner-mobile-controls-wrap .ms-3,
    .scriner-mobile-controls-wrap .ms-2 {
        margin-left: 0 !important;
    }
    .scriner-mobile-controls-half-count .mx-2 {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* "Мой список" — цвет/рамку/иконку не трогаем (просили оставить её
       визуал как есть), приводим только шрифт к общему. flex:1 1 0 (с
       нулевой базой) вместо auto — растягивается ровно на половину строки
       наравне с полем поиска, а не по ширине своего текста; было заметно
       уже, чем "Поиск" рядом. */
    .scriner-mobile-controls-row-watchlist-search > .ms-3 {
        flex: 1 1 0;
        min-width: 0;
    }
    .scriner-mobile-controls-row-watchlist-search > .ms-3 button {
        width: 100%;
        font-size: 14px !important;
        font-weight: 500 !important;
        height: 38px !important;
        border-radius: 8px !important;
    }
    /* Поле поиска — вторая половина строки, той же ширины, что и "Мой
       список" слева (flex-basis 0 у обоих делит строку ровно пополам). */
    .scriner-mobile-controls-row-watchlist-search > .d-inline-block {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Перекомпоновка панели контролов (11.09.2026, четвёртый заход):
       строка 1 — "Мой список" + "Поиск", строка 2 — "Все сектора" +
       "Показать N строк". Реальные DOM-узлы переносит scriner-mobile.js
       (buildControlsLayout) — здесь только внешний вид. */
    .scriner-mobile-controls-wrap {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .scriner-mobile-controls-row-watchlist-search {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #scriner-container .scriner-mobile-controls-source-hidden {
        display: none !important;
    }

    .scriner-mobile-controls-row-sector-count {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    /* Сектор тянется, "Показать N строк" занимает ровно столько, сколько
       нужно его тексту (11.09.2026): раньше обе половины делили строку
       50/50 через flex:1, и в правую половину содержимое просто не влезало
       — текст "Показать"/"строк" вылезал за границы пилюли наружу (видно
       на скриншоте: обрезанное "оказать" и "строк" за рамкой). */
    .scriner-mobile-controls-half-sector {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* "Показать [25] строк" — одна пилюля, базовый стиль (высота/рамка/
       радиус/фон) общий с Сектор/Поиск из группового селектора выше.
       flex:0 0 auto — занимает ровно по своему тексту: раньше обе половины
       делили строку 50/50 через flex:1, и содержимое просто не влезало —
       "оказать" обрезалось, "строк" вылезало за рамку (видно на скриншоте).
       Шрифт чуть мельче общего: строка длинная, а места в паре с кнопкой
       сектора немного. */
    .scriner-mobile-controls-half-count {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0 10px;
        white-space: nowrap;
        font-size: 13px !important;
        color: var(--tblr-secondary) !important;
    }
    /* Нативный <select> внутри пилюли — без собственной рамки/фона/стрелки,
       чтобы не выглядеть "коробкой в коробке" (жалоба по скриншоту).
       appearance:none убирает системную стрелку, которая на iOS занимает
       заметное место и ломает центровку; width:auto — иначе Bootstrap
       .form-control растягивает его на 100% родителя. */
    .scriner-mobile-controls-half-count select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        width: auto !important;
        min-width: 0 !important;
        color: var(--tblr-body-color) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        text-align: center;
        text-align-last: center;
    }
    .scriner-mobile-controls-half-count select:focus {
        outline: none !important;
        box-shadow: none !important;
    }
}