/* ==========================================================================
   lteModern responsive layer — единая точка правды для адаптива.
   Загружается ПОСЛЕ theme.css, поэтому имеет приоритет в каскаде.
   Всё мобильное и все sweep-фиксы белых vendor-фонов — здесь.
   ========================================================================== */

/* ---------- 1. Global hard reset белых фонов ---------------------------- */

/* primary.css:91 в media (max-width:767px) ставит html { background:#E7EAF1 !important }.
   Это и было «белая полоса снизу при сжатии Safari». Бьём 1-в-1 с !important. */
html,
html body {
    background-color: var(--bg) !important;
}
body {
    /* Картинку-градиент оставляем только до конца viewport первого экрана,
       но базовый цвет — наш dark, чтобы при длинном скролле НЕ просвечивало. */
    background-color: var(--bg) !important;
    background-attachment: scroll;
    min-height: 100vh;
}

/* Контейнеры layout-а — никогда не должны иметь свой фон.
   primary.css ставит .right_block: #E7EAF1, .left_block: #34495E. */
.wapper,
.right_block,
.page,
.page > .row,
.with_code,
.row,
[class^="col-xs-"],
[class*=" col-xs-"],
[class^="col-sm-"],
[class*=" col-sm-"],
[class^="col-md-"],
[class*=" col-md-"],
[class^="col-lg-"],
[class*=" col-lg-"] {
    background-color: transparent !important;
    background-image: none !important;
}

/* НО: цветные плитки кошелька — это div ВНУТРИ .col-md-3, фон у них сохранён.
   .purse .col-md-3 div — стилизован в secondary.css:1643. Не трогаем. */

/* Любой bs-callout-* — даже неизвестный модификатор (warning/primary/...)
   приходит с vendor PHP-вью. Закрываем глобально. */
[class^="bs-callout"],
[class*=" bs-callout"] {
    background-color: var(--bg-elev) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-left-width: 4px !important;
}
[class^="bs-callout"] h4,
[class*=" bs-callout"] h4 {
    color: var(--text) !important;
}
[class^="bs-callout"] p,
[class*=" bs-callout"] p,
[class^="bs-callout"] span:not(.label):not(.glyphicon):not(.m-icon),
[class*=" bs-callout"] span:not(.label):not(.glyphicon):not(.m-icon) {
    color: var(--text-muted) !important;
}
[class^="bs-callout"] a,
[class*=" bs-callout"] a {
    color: #6B82FF !important;
}

/* Inline-стили из vendor PHP-генерации (bgcolor=, style="background:...") */
.right_block [bgcolor],
.right_block [style*="background"]:not(.serv_mon):not([style*="image"]),
.with_code [bgcolor],
.new [bgcolor] {
    background-color: transparent !important;
}

/* ---------- 2. Анти-горизонтальный-скролл -------------------------------- */

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Длинные слова, ID, ссылки — переносим, чтобы не распирали колонку */
.block_head,
.bs-callout h4,
.new h4,
.new p,
.with_code,
.with_code p,
.with_code li,
.breadcrumb_wrap,
.breadcrumb_wrap ul,
td, th,
.online_user a,
.notification p {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

/* Логотип и кнопка-навигатор не должны разлетаться */
.logo {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Vendor таблицы — заворачиваем в скролл-контейнер визуально через
   обёртку-родителя, который чаще всего .with_code / .block / .bs-callout */
.with_code > table,
.block > table,
.bs-callout > table,
.forum_message > table,
.tab-pane > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- 3. Брейкпойнт <=991: фикс двойного float (vendor + BS3) ----- */
@media (max-width: 991px) {
    /* primary.css держит .right_block: 80% / .left_block: 20% до 767px.
       Между 768 и 991 — bootstrap col-md уже в полную ширину, а vendor
       float ещё в силе. Кнопки/текст уезжают за viewport. */
    .right_block {
        width: 100% !important;
        float: none !important;
    }
    .left_block {
        width: 100% !important;
        float: none !important;
    }
    .page {
        padding: 8px !important;
    }
}

/* ---------- 4. Современный mobile offcanvas <=767 ----------------------- */
@media (max-width: 767px) {
    /* На мобиле .left_block позиционируется как полноэкранный сайдбар-оверлей,
       выезжающий слева. Vendor JS оставляем — он по-прежнему toggle'ит
       класс .hidden-xs, который у нас всё ещё display:none, так что
       работает старый и новый поведение. */

    /* Фиксированный сайдбар */
    .left_block:not(.hidden-xs) {
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(86%, 320px);
        max-width: 320px;
        height: 100vh;
        height: 100dvh;
        z-index: 10000;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background-color: var(--surface) !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6);
        animation: sfwSlideIn 220ms cubic-bezier(.2, .9, .3, 1);
        padding-top: env(safe-area-inset-top);
    }
    @keyframes sfwSlideIn {
        from { transform: translateX(-100%); }
        to   { transform: translateX(0); }
    }

    /* Бэкдроп через body-класс, который ставит JS */
    body.sfw-mobile-menu-open {
        overflow: hidden;
    }
    body.sfw-mobile-menu-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 9999;
        animation: sfwFade 180ms ease;
    }
    @keyframes sfwFade {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Hide nav from .left_block when it's outside-flow on first paint */
    /* (vendor .hidden-xs already does display:none, just be explicit) */

    /* ---------- Header на мобиле ---------- */
    .header,
    .header.container-fluid {
        padding: 0 !important;
    }
    .header-flex {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px !important;
        gap: 8px;
        min-height: 56px;
    }
    .menu_button.visible-xs {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 22px;
        border-radius: 8px;
        flex: 0 0 auto;
    }
    .menu_button.visible-xs:active,
    .menu_button.visible-xs:hover {
        background: var(--surface-2);
    }
    .header .logo {
        flex: 1 1 auto;
        text-align: center;
        font-size: 16px !important;
        line-height: 44px !important;
        height: 44px !important;
        padding: 0 8px !important;
        background: transparent !important;
        max-width: none !important;
        width: auto !important;
    }
    .header .profile_menu {
        margin: 0 !important;
        flex: 0 0 auto;
    }
    .header .profile_menu .dropdown-toggle {
        width: 38px;
        height: 38px;
    }

    /* Показываем баланс-пилюлю на мобиле в компактном виде. Vendor markup
       прячет её через .hidden-xs.hidden-sm — переопределяем. */
    .header-balance.hidden-xs.hidden-sm,
    .header-balance {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        padding: 6px 10px !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
        margin: 0 !important;
        flex: 0 0 auto;
        max-width: 130px;
        overflow: hidden;
    }
    .header-balance .currency,
    .header-balance .action {
        display: none; /* экономим место — оставляем только сумму + кнопку */
    }
    .header-balance .glyphicon {
        font-size: 13px !important;
    }
    .header-balance .amount {
        font-size: 13px !important;
    }

    /* Серверный пилл скрываем на мобиле — в шапке нет места */
    .header-server-pill.hidden-xs.hidden-sm {
        display: none !important;
    }

    /* ---------- breadcrumb ---------- */
    .breadcrumb_wrap {
        font-size: 13px;
        padding: 8px 10px !important;
    }
    .breadcrumb_wrap .f-r {
        float: none !important;
        display: block;
        margin: 4px 0 0 0 !important;
    }

    /* ---------- Карточки ---------- */
    .block,
    [class^="bs-callout"],
    [class*=" bs-callout"] {
        margin-left: 0;
        margin-right: 0;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* ---------- Тап-зоны ---------- */
    nav#nav > li > a,
    .dropdown-menu > li > a {
        min-height: 44px;
        line-height: 1.4;
        padding: 12px 16px !important;
        display: flex !important;
        align-items: center;
    }
    .nav-pills > li > a,
    .nav-tabs > li > a {
        padding: 10px 14px;
    }

    /* Видеть длинные ссылки/ID в карточках транзакций */
    .bs-callout {
        font-size: 14px;
    }

    /* Кнопки в строках — не выпирали за блок */
    .btn, .btn2 {
        white-space: normal;
        word-break: keep-all;
    }
}

/* ---------- 5. Узкий телефон <=480 -------------------------------------- */
@media (max-width: 480px) {
    .header .logo {
        font-size: 14px !important;
        letter-spacing: 0.04em !important;
    }
    .header-balance {
        max-width: 100px;
    }
    .header-balance .amount {
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .page {
        padding: 6px !important;
    }
    .block {
        padding: 10px !important;
    }
}

/* ---------- 6. TinyMCE контейнер — выравнивание тёмной обвязки --------- */
/* Сам iframe-контент красится JS-инжектором (tinymce-dark.js), здесь — рамка */
.tox-tinymce,
.mce-tinymce {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--surface) !important;
    overflow: hidden;
}
.tox .tox-edit-area,
.tox .tox-edit-area__iframe,
.mce-edit-area,
.mce-edit-area iframe {
    background: var(--bg-elev) !important;
}
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-toolbar-overlord,
.mce-toolbar-grp,
.mce-toolbar {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
}
.tox .tox-tbtn,
.mce-btn {
    color: var(--text) !important;
}
.tox .tox-tbtn:hover,
.mce-btn:hover {
    background: var(--surface-3) !important;
}
.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover {
    background: var(--primary-soft) !important;
    color: var(--accent) !important;
}
.tox-tooltip,
.tox-tooltip__body,
.mce-tooltip-inner {
    background: #0E1116 !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.tox-statusbar,
.mce-statusbar {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text-muted) !important;
}