/* ==========================================================
   Mobile Menu — prefix: mm-
   Breakpoint: 768px (совпадает с nav_sidebar.css)
   Z-index: mm-header 9990, mm-overlay 9991, mm-panel 9992
   (ниже модалок HystModal 99998+, ниже help button 999999)
   ========================================================== */

/* Все mm-элементы скрыты на десктопе */
.mm-header,
.mm-panel,
.mm-overlay {
    display: none;
}

/* Модалки HystModal выше мобильного меню */
.hystmodal__shadow {
    z-index: 99998 !important;
}
.hystmodal {
    z-index: 99999 !important;
}

/* Единая геометрия модалок: дочерний desktop-контент не должен расширять viewport. */
.hystmodal,
.hystmodal__wrap,
.hystmodal__window,
.hystmodal__content {
    box-sizing: border-box;
    min-width: 0;
}

/* Блокировка скролла при открытой панели (iOS fix) */
.mm-body-locked {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* ==============================
   Мобильный режим
   ============================== */
@media (max-width: 767px) {

    .hystmodal {
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
                 max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        overflow-x: hidden !important;
    }

    .hystmodal__wrap {
        width: 100% !important;
        min-height: calc(100dvh - 16px) !important;
        align-items: stretch !important;
        justify-content: center !important;
    }

    .hystmodal__window {
        position: relative;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 16px) !important;
        margin: auto 0 !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .hystmodal__content {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        overflow-wrap: anywhere;
    }

    /* Ячейки таблиц не наследуют anywhere: иначе min-content колонки
       схлопывается до одного символа и текст идёт «столбиком» по букве.
       break-word переносит только то, что не помещается в ширину колонки. */
    .hystmodal__content th,
    .hystmodal__content td {
        overflow-wrap: break-word;
    }

    .hystmodal__window img,
    .hystmodal__window video,
    .hystmodal__window canvas,
    .hystmodal__window svg {
        max-width: 100%;
        height: auto;
    }

    .hystmodal__window input,
    .hystmodal__window select,
    .hystmodal__window textarea {
        max-width: 100%;
        box-sizing: border-box;
    }

    .hystmodal__window .table-responsive,
    .hystmodal__window [data-admin-responsive-table] {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Скрытие десктопного header и navbar */
    .mm-active #header {
        display: none !important;
    }
    .mm-active .navbar.navbar-expand.navbar-dark.bg-dark {
        display: none !important;
    }

    /* --- Липкая шапка (только при активном бургер-меню) --- */
    .mm-active .mm-header {
        display: flex;
        align-items: center;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        height: 48px;
        background: #212529;
        color: #fff;
        z-index: 9990;
        padding: 0 10px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }

    /* Бургер-кнопка */
    .mm-burger {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: #fff;
        width: 36px;
        height: 36px;
        padding: 0;
        cursor: pointer;
        flex-shrink: 0;
        -webkit-tap-highlight-color: transparent;
    }

    .mm-burger-icon {
        display: block;
        width: 20px;
        height: 14px;
        position: relative;
    }

    .mm-burger-icon span,
    .mm-burger-icon::before,
    .mm-burger-icon::after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background: #fff;
        border-radius: 1px;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .mm-burger-icon::before { top: 0; }
    .mm-burger-icon span { top: 6px; }
    .mm-burger-icon::after { top: 12px; }

    /* Анимация бургера в крестик */
    .mm-burger--active .mm-burger-icon::before {
        transform: translateY(6px) rotate(45deg);
    }
    .mm-burger--active .mm-burger-icon span {
        opacity: 0;
    }
    .mm-burger--active .mm-burger-icon::after {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* Блок балансов в шапке */
    .mm-header-info {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 8px;
        min-width: 0;
    }
    .mm-header-info::-webkit-scrollbar { display: none; }

    /* Юзернейм в шапке */
    /* Пользователь — круглая кнопка в стиле остальных кнопок шапки */
    .mm-header-user {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        margin-left: 4px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(255, 255, 255, 0.06);
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        padding: 0;
    }
    .mm-header-user:active { background: rgba(255, 255, 255, 0.14); }

    /* --- Затемнение фона --- */
    .mm-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9991;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mm-overlay--visible {
        opacity: 1;
        visibility: visible;
    }

    /* --- Боковая панель --- */
    .mm-panel {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 85%;
        max-width: 320px;
        background: #fff;
        z-index: 9992;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
    }
    .mm-panel--open {
        transform: translateX(0);
    }

    /* Шапка панели */
    .mm-panel-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding: 10px 14px 8px;
        background: #212529;
        color: #fff;
        flex-shrink: 0;
    }

    .mm-panel-title {
        font-size: 15px;
        font-weight: 600;
    }

    .mm-close {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: #fff;
        font-size: 20px;
        width: 32px;
        height: 32px;
        cursor: pointer;
        padding: 0;
        -webkit-tap-highlight-color: transparent;
        opacity: 0.8;
    }
    .mm-close:active { opacity: 1; }

    /* --- Блок пользователя --- */
    .mm-panel-user {
        padding: 10px 14px;
        background: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
        flex-shrink: 0;
    }

    .mm-user-name {
        font-weight: 600;
        font-size: 14px;
        color: #212529;
        padding-bottom: 6px;
        margin-bottom: 6px;
        border-bottom: 1px solid #e9ecef;
    }

    .mm-user-link {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 0;
        color: #495057;
        text-decoration: none;
        font-size: 13px;
    }
    .mm-user-link:active { color: #212529; }

    .mm-user-link-icon {
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        flex-shrink: 0;
    }

    /* --- Навигация --- */
    .mm-nav {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .mm-nav-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mm-nav-item {
        border-bottom: 1px solid #eee;
    }
    .mm-nav-item:last-child {
        border-bottom: none;
    }

    /* Ссылка навигации */
    .mm-nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 14px;
        color: #212529;
        text-decoration: none;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        background: none;
        border: none;
        width: 100%;
        text-align: left;
    }
    .mm-nav-link:active { background: #f0f0f0; }
    a.mm-nav-link:hover { color: #447e9b; }

    /* Стрелка аккордеона */
    .mm-arrow {
        font-size: 10px;
        color: #999;
        transition: transform 0.25s ease;
        flex-shrink: 0;
        margin-left: 8px;
    }
    .mm-expanded > .mm-nav-link .mm-arrow {
        transform: rotate(90deg);
        color: #447e9b;
    }

    /* Вложенные пункты (аккордеон) */
    .mm-children {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        background: #f8f9fa;
    }

    .mm-child-link {
        display: block;
        padding: 9px 14px 9px 28px;
        color: #495057;
        text-decoration: none;
        font-size: 13px;
        border-top: 1px solid #eee;
        -webkit-tap-highlight-color: transparent;
    }
    .mm-child-link:active { background: #e9ecef; }
    .mm-child-link:hover { color: #447e9b; }

    /* Подпись вложенной группы (подменю «Инструменты» и т.п.) */
    .mm-child-group {
        padding: 10px 14px 4px 28px;
        color: #6c757d;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .03em;
        border-top: 1px solid #eee;
    }
    .mm-child-group ~ li .mm-child-link { padding-left: 40px; }

    /* Разделитель секций в панели */
    .mm-divider {
        height: 1px;
        background: #dee2e6;
        margin: 4px 0;
    }

    /* Перемещаем кнопку JS Debug в правый нижний угол, чтобы не перекрывала бургер */
    #js-debug-toggle {
        top: auto !important;
        left: auto !important;
        bottom: 10px !important;
        right: 10px !important;
    }

    /* --- Десктопное меню на мобильных (когда бургер отключён) --- */
    body:not(.mm-active) #header {
        flex-wrap: wrap;
        padding: 6px 8px;
        gap: 4px;
    }

    body:not(.mm-active) #header #branding {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 4px;
        font-size: 12px;
    }

    body:not(.mm-active) #header #user-tools {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: center;
        border-top: 1px solid rgba(255,255,255,0.15);
        padding-top: 6px;
    }

    body:not(.mm-active) #header #user-tools .dropdown {
        padding: 0 4px !important;
    }

    body:not(.mm-active) #header #user-tools .btn-button {
        font-size: 13px;
        padding: 2px 4px;
    }

    body:not(.mm-active) .navbar.navbar-expand.navbar-dark.bg-dark {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        flex-shrink: 0;
        padding: 0 4px;
        position: relative;
        z-index: 10;
    }

    /* При открытом dropdown убираем overflow, чтобы список не обрезался */
    body:not(.mm-active) .navbar.navbar-expand.navbar-dark.bg-dark:has(.dropdown-menu.show) {
        overflow: visible !important;
    }

    body:not(.mm-active) .navbar.navbar-expand.navbar-dark.bg-dark .navbar-nav {
        flex-wrap: nowrap;
    }

    body:not(.mm-active) .navbar.navbar-expand.navbar-dark.bg-dark .nav-link {
        font-size: 12px;
        padding: 6px 5px !important;
        white-space: nowrap;
    }

} /* end @media */

/* ==========================================================
   Nested dropdown (dropend) для вложенного меню
   ========================================================== */
.dropdown-menu .dropend {
    position: relative;
}
.dropdown-menu .dropend > .dropdown-menu {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 200px;
    margin: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.dropdown-menu .dropend:hover > .dropdown-menu,
.dropdown-menu .dropend.dropend--open > .dropdown-menu {
    display: block;
}
/* У правого края экрана подменю открывается влево (mobile-menu.js). */
.dropdown-menu .dropend.dropend--left > .dropdown-menu {
    left: auto;
    right: 100%;
}
.dropdown-menu .dropend.dropend--left > .dropdown-toggle::after {
    content: "◂";
}
.dropdown-menu .dropend > .dropdown-toggle::after {
    content: "▸";
    float: right;
    margin-left: 8px;
    font-size: 10px;
    line-height: 1.6;
}
/* Убираем стандартную стрелку Bootstrap */
.dropdown-menu .dropend > .dropdown-toggle.dropdown-toggle::after {
    border: none;
}

/* На мобильных — вложенный dropdown раскрывается вниз */
@media (max-width: 767px) {
    .dropdown-menu .dropend > .dropdown-menu {
        position: static;
        left: 0;
        box-shadow: none;
        border: none;
        padding-left: 12px;
        background: #f0f0f0;
    }
}

/* ==========================================================
   Пункт «Купить» под «Рабочими ботами» (десктоп и мобильное меню):
   компактная зелёная «таблетка» с иконкой корзины, без анимации.
   ========================================================== */
.dropdown-menu .dropdown-item.menu-buy-bots,
.mm-child-link.menu-buy-bots {
    display: flex;
    align-items: center;
    gap: 6px;
    width: auto;
    margin: 3px 10px 5px;
    padding: 3px 10px;
    border: 1px solid rgba(22, 163, 74, .35);
    border-radius: 999px;
    background: rgba(22, 163, 74, .08);
    color: #15803d;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.mm-child-link.menu-buy-bots {
    margin: 6px 14px 6px 22px;
    padding: 6px 12px;
    font-size: 14px;
}

.dropdown-menu .dropdown-item.menu-buy-bots::before,
.mm-child-link.menu-buy-bots::before {
    content: '';
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.6 11.2a1.5 1.5 0 0 0 1.5 1.1h8.8a1.5 1.5 0 0 0 1.5-1.1L22 7H6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.6 11.2a1.5 1.5 0 0 0 1.5 1.1h8.8a1.5 1.5 0 0 0 1.5-1.1L22 7H6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dropdown-menu .dropdown-item.menu-buy-bots:hover,
.dropdown-menu .dropdown-item.menu-buy-bots:focus,
.mm-child-link.menu-buy-bots:hover,
.mm-child-link.menu-buy-bots:active {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

.dropdown-menu .dropdown-item.menu-buy-bots:focus-visible {
    outline: 2px solid #86efac;
    outline-offset: 1px;
}

[data-theme="dark"] .dropdown-menu .dropdown-item.menu-buy-bots,
[data-theme="dark"] .mm-child-link.menu-buy-bots {
    background: rgba(34, 197, 94, .12) !important;
    border-color: rgba(74, 222, 128, .4);
    color: #4ade80 !important;
}

[data-theme="dark"] .dropdown-menu .dropdown-item.menu-buy-bots:hover,
[data-theme="dark"] .dropdown-menu .dropdown-item.menu-buy-bots:focus,
[data-theme="dark"] .mm-child-link.menu-buy-bots:hover,
[data-theme="dark"] .mm-child-link.menu-buy-bots:active {
    background: #15803d !important;
    border-color: #15803d;
    color: #fff !important;
}