/* ==========================================================================
   legacy-overrides.css — локальные правки для layout_legacy.
   Поверх Listeo style.css + app-layout.css.
   Подключается только в layout_legacy_head.php.
   ========================================================================== */

/* Рейл на legacy-страницах — ТОТ ЖЕ светлый, что и в чистом новом дизайне
   (layout_app). Раньше здесь был чёрный «маркер легаси» — убран по просьбе,
   чтобы меню везде в новом дизайне выглядело одинаково (светлое, одинаково
   раскрывающееся, включая мобилку). Стили рейла наследуются из app-layout.css. */

/* Legacy Listeo задаёт body { font-family: ...; padding-top: ... } — не даём
   ломать нашу вертикальную сетку. Rail+topbar управляют структурой сами. */
.app-shell--legacy #wrapper { display: none !important; }
body:has(.app-shell--legacy) #header-container { display: none !important; }

/* Базовый padding для legacy-view (osago/view, osago/payment, payment/index
   и т.п.), чтобы контент не залипал в края. Новые страницы со своим
   .xxx-page wrapper могут добавить собственный padding поверх. */
.app-shell--legacy .app-shell__content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 32px 40px;
    /* width обязателен: margin:0 auto отменяет stretch у flex-item, без него
       блок схлопывается по intrinsic-ширине контента. */
    width: 100%;
}

/* Listeo навешивает .user-menu как HOVER-dropdown на header. В нашем topbar
   та же имя используется для user-меню, но с другим поведением. Выключаем
   legacy-hover, чтобы два механизма не конфликтовали. */
.app-shell--legacy .topbar .user-menu:hover > ul,
.app-shell--legacy .topbar .user-menu > ul { display: none; }

/* Listeo .user-menu (его хедер-виджет) навешивает margin-top:10px/-10px на наш
   .user-menu → в topbar кнопка съезжала вниз и вылезала за 60px (заметно на
   мобилке под layout_legacy, напр. /profile). Обнуляем поля/line-height у
   флекс-детей topbar, чтобы legacy не ломал вертикальное выравнивание. */
.app-shell--legacy .topbar .user-menu,
.app-shell--legacy .topbar .menu-btn,
.app-shell--legacy .topbar .cta-new {
    margin: 0;
    line-height: normal;
    vertical-align: middle;
}

/* Listeo ещё и сдвигает свой .user-menu: position: relative; top: 9px. У агента кнопка
   пользователя — <button> и сдвига не замечала, у гостя «Войти» — <a>, и она уезжала на
   9px ниже «Регистрации» (SITE-008, 17.09.2026). */
.app-shell--legacy .topbar .user-menu { top: 0; }

/* Если view ставит огромные .container / .container-fluid, Listeo придаёт
   им max-width и центрирует. Убираем центрирование внутри app-shell. */
.app-shell--legacy .app-shell__content .container,
.app-shell--legacy .app-shell__content .container-fluid {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* Тонкая риббон-плашка под крошкой — "это legacy" */
.legacy-ribbon {
    max-width: 1400px;
    margin: 0 auto;
    padding: 6px 32px 0;
    font-size: 11px;
    color: var(--ab-color-text-subtle, #71717a);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.legacy-ribbon b {
    color: #1f2229;
    font-weight: 600;
    margin-right: 6px;
}

/* ==========================================================================
   ОСАГО osago/view — карточки предложений СК на мобильном (≤767px). INC-117.

   Список предложений (.dashboard-list-box.invoices, 4 таба: all/success/
   cheapest/profitable) размечен ТОЛЬКО col-md-*/col-lg-*, без col-xs/col-sm.
   Ниже 768px Bootstrap схлопывает колонки в стопку 100%-блоков без границ и
   отступов — предложения сливаются в «стену текста» (жалоба из Safari,
   agentbroker.ru/osago/view). Патч точечный, только под .app-shell--legacy и
   только ≤767px; десктоп не трогаем, базовую тему не правим.
   ========================================================================== */
@media (max-width: 767px) {
    /* Каждое предложение СК — отдельная карточка с рамкой и отступом. */
    .app-shell--legacy .dashboard-list-box.invoices > ul > li {
        border: 1px solid var(--ab-color-border, #e5e5e5);
        border-radius: 10px;
        padding: 12px;
        margin-bottom: 12px;
        min-height: 0; /* в шаблоне инлайном min-height:100px — на мобиле лишняя пустота */
        overflow: hidden;
    }

    /* Логотип СК не должен вылезать за карточку (в шаблоне width=200px инлайном). */
    .app-shell--legacy .dashboard-list-box.invoices img {
        max-width: 60%;
        height: auto;
    }

    /* Строки результата внутри карточки — тонкие разделители, чтобы не слитно. */
    .app-shell--legacy .dashboard-list-box.invoices .dashboard-list-box.with-icons > ul > li {
        border-top: 1px solid var(--ab-color-border, #eee);
        padding: 10px 0;
        width: 100%;
    }
    .app-shell--legacy .dashboard-list-box.invoices .dashboard-list-box.with-icons > ul > li:first-child {
        border-top: 0;
        padding-top: 0;
    }

    /* Колонки строки результата — немного воздуха между подписями. */
    .app-shell--legacy .dashboard-list-box.invoices .dashboard-list-box.with-icons [class*="col-"] {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    /* Кнопка «Оформить» — во всю ширину карточки и крупнее под палец. */
    .app-shell--legacy .dashboard-list-box.invoices [id^="partner_buy_button"] .button,
    .app-shell--legacy .dashboard-list-box.invoices [id^="partner_buy_button"] a {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 6px;
    }

    /* Шапка колонок (Компания/Партнёр · Статус · КВ · Цена/Оформить) стоит ОДИН
       раз над табами (ul.nav-tabs + h4) и размечена под табличную раскладку —
       ниже 768px, где строки уже не табличные, она разъезжается. Прячем. */
    .app-shell--legacy ul.nav-tabs + h4 {
        display: none;
    }
}