/* ====================================================================
   Мобильная адаптация (≤ 768px).
   Десктоп-стили остаются основными, здесь только переопределения.
   ==================================================================== */

/* ── Mobile top-bar и bottom-bar по умолчанию скрыты на десктопе ── */
.m-topbar, .m-bottombar, .m-backdrop { display: none; }

@media (max-width: 768px) {

    /* ── Top-bar (фикс. сверху) ──────────────────────────────────── */
    .m-topbar {
        display: flex;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 56px;
        z-index: 200;
        background: var(--color-bg-sidebar);
        border-bottom: 1px solid var(--color-border);
        padding: 0 .9rem;
        align-items: center;
        gap: .75rem;
    }
    .m-topbar__btn {
        background: none;
        border: none;
        color: var(--color-text);
        font-size: 1.4rem;
        line-height: 1;
        cursor: pointer;
        padding: .4rem .55rem;
        border-radius: 6px;
    }
    .m-topbar__btn:hover { background: rgba(255,255,255,.08); }
    .m-topbar__logo { flex: 1; display: flex; align-items: center; }
    .m-topbar__logo svg { height: 22px; width: auto; }
    .m-topbar__balance {
        font-size: .8rem;
        color: var(--color-text-muted);
        white-space: nowrap;
    }
    .m-topbar__balance strong { color: inherit; }

    /* ── Off-canvas sidebar ───────────────────────────────────────── */
    .sidebar {
        transform: translateX(-100%);
        transition: transform .25s ease;
        width: 280px !important;
        z-index: 300;
    }
    .sidebar.is-open { transform: translateX(0); box-shadow: 0 0 32px rgba(0,0,0,.5); }

    /* В drawer возвращаем подписи пунктов и контрастный текст */
    .sidebar .nav-label,
    .sidebar .sidebar-footer .admin-name,
    .sidebar .sidebar-footer .balance-chip,
    .sidebar .sidebar-logo .logo-link span,
    .sidebar .role-badge { display: inline-block !important; }
    .sidebar .nav-item { color: #cbd5e1; font-size: .95rem; padding: .8rem 1.25rem; }
    .sidebar .nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
    .sidebar .nav-item.active { color: var(--color-primary); }
    .sidebar .admin-name { color: #cbd5e1; }

    /* Backdrop за открытым сайдбаром */
    .m-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.55);
        z-index: 250;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s;
    }
    .m-backdrop.is-open { opacity: 1; pointer-events: auto; }

    /* ── Bottom-bar (фикс. снизу, основные вкладки) ──────────────── */
    .m-bottombar {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 60px;
        z-index: 200;
        background: var(--color-bg-sidebar);
        border-top: 1px solid var(--color-border);
        padding-bottom: env(safe-area-inset-bottom);
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .m-bottombar::-webkit-scrollbar { display: none; }
    .m-bottombar__item {
        flex: 0 0 auto;
        min-width: calc(25% - 1px);            /* по умолчанию 4 уместится */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        color: var(--color-text-muted);
        text-decoration: none;
        font-size: .68rem;
        padding: .25rem .15rem;
        background: none;
        border: none;
        cursor: pointer;
        position: relative;
        transition: color .15s, background .15s;
    }
    .m-bottombar__item:hover { background: rgba(255,255,255,.04); color: var(--color-text); }
    .m-bottombar__item.active { color: var(--color-primary); }
    .m-bottombar__item .m-icon { font-size: 1.3rem; line-height: 1; }
    .m-bottombar__badge {
        position: absolute;
        top: 6px; right: calc(50% - 16px);
        width: 8px; height: 8px;
        background: #10b981;
        border: 2px solid var(--color-bg-sidebar);
        border-radius: 50%;
    }

    /* Плавающая кнопка помощи скрыта на мобиле (есть пункт в bottom-bar).
       Селектор более специфичный, чтобы перекрыть inline style="display:flex" */
    .help-drawer-root .hd-fab,
    button.hd-fab { display: none !important; }

    /* ── Панель массовых действий на «Фразах»: на всю ширину и НАД bottom-bar
       (перебиваем inline left:var(--sidebar-width) и bottom:0) ──────────── */
    .kw-bulk-bar {
        left: 0 !important;
        right: 0 !important;
        bottom: calc(60px + env(safe-area-inset-bottom)) !important;
        z-index: 250 !important;
    }
    /* «Снять выделение ✕» — на отдельную строку (на всю ширину) на мобиле */
    .kw-bulk-bar .bulk-panel { flex-wrap: wrap !important; }
    .kw-clear-sel { flex: 1 0 100% !important; margin-top: .4rem !important; }

    /* ── Аудит адаптива: фиксы ───────────────────────────────────── */

    /* Плашка «платёж в обработке» — над bottom-bar, не перекрывает меню (HIGH) */
    #pending-banner {
        bottom: calc(60px + env(safe-area-inset-bottom) + .75rem) !important;
        left: .75rem !important;
        right: .75rem !important;
    }

    /* Тост триала — выше bottom-bar */
    #trial-toast { bottom: calc(60px + 16px) !important; }

    /* Кастомные модалки (не класс .modal): тело со скроллом на низких экранах (MED) */
    #invoice-modal > div,
    #sidebar-deposit-modal > div { max-height: 90vh; overflow-y: auto; }

    /* Затемнение и сами модалки — выше фикс-баров (z-index баров = 200) (MED) */
    .modal-backdrop { z-index: 1190 !important; }
    .modal, .modal-lg { z-index: 1200 !important; }

    /* Абсолютные инлайн-дропдауны/дейтпикеры (region-фильтр, дейтпикеры, поповеры) —
       не шире экрана, чтобы не вылезали за правый край (MED) */
    [style*="position:absolute"][style*="top:100%"] { max-width: calc(100vw - 1.2rem) !important; }

    /* Ряд «URL + Копировать» — кнопка переносится, не сжимается (MED) */
    .url-copy-row { flex-wrap: wrap !important; }

    /* Длинные auth-формы — не центрировать по вертикали, верх не уезжает за экран (HIGH) */
    .auth-wrapper { align-items: flex-start !important; padding-top: 1.5rem !important; }

    /* Подтверждение удаления копии (админка) — фикс-полоса над bottom-bar,
       а не внутри широкой горизонтально-скроллящейся строки (MED) */
    .copy-del-overlay {
        position: fixed !important;
        inset: auto !important;
        left: .6rem !important; right: .6rem !important;
        bottom: calc(60px + env(safe-area-inset-bottom) + .5rem) !important;
        flex-wrap: wrap !important;
        border-radius: 10px;
        box-shadow: 0 -4px 20px rgba(0,0,0,.3);
    }

    /* ── Main content: отступы под top-bar и bottom-bar ──────────── */
    .main-content {
        margin-left: 0 !important;
        max-width: 100vw !important;
        padding: 72px .9rem 76px !important;
    }

    /* ── Шапка страницы: вертикальная компоновка ─────────────────── */
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;
    }
    .page-title { font-size: 1.25rem !important; }
    .page-subtitle { font-size: .82rem; }

    /* ── Карточки и общие блоки: меньшие отступы ─────────────────── */
    .card { border-radius: 10px; }
    .card-header { padding: .85rem 1rem; flex-wrap: wrap; gap: .5rem; }
    .card-body { padding: 1rem; }

    /* ── Карточка баланса: убираем фиксированную ширину 457px ────── */
    .balance-card {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }
    .balance-amount { font-size: 1.6rem !important; word-break: break-word; }
    .balance-card .alert { white-space: normal !important; font-size: .8rem; }

    /* ── Таблицы: горизонтальный скролл по умолчанию ─────────────── */
    .table-wrapper, .card .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table { min-width: 520px; }

    /* ── Формы: 1 колонка ────────────────────────────────────────── */
    .form-input { font-size: 1rem; /* отключает iOS zoom при фокусе */ }
    .form-row, .cards-row, .form-grid-2 {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }

    /* ── Модалки: почти fullscreen ──────────────────────────────── */
    .modal, .modal-lg {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    .modal-backdrop { padding: 0; }
    .modal-body { max-height: calc(100vh - 130px); overflow-y: auto; }

    /* ── Кнопки: чуть крупнее для тача ───────────────────────────── */
    .btn { padding: .55rem .9rem; font-size: .92rem; }
    .btn-sm { padding: .35rem .65rem; font-size: .82rem; }
    .btn-block { width: 100%; }

    /* ── Бэдж статуса проекта в шапке: чуть мельче ───────────────── */
    .btn-project-state { font-size: .78rem; padding: .35rem .8rem; }

    /* ── Список проектов: компактные группы ──────────────────────── */
    .group-header-bar { padding: .65rem .85rem; }
    .group-title { font-size: .92rem; }

    /* ── Импersonate-бар над всем ────────────────────────────────── */
    .impersonate-bar { font-size: .78rem; padding: .35rem .7rem; }

    /* ── Вкладки внутри проекта: горизонтальный свайп ────────────── */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;             /* Firefox */
    }
    .tabs::-webkit-scrollbar { display: none; }  /* WebKit */
    .tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: .5rem .85rem;
        font-size: .85rem;
    }
}

/* ── Планшет (768–1200) ───────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1200px) {
    .main-content { padding: 1.5rem 1.5rem; }
    .page-header { gap: .75rem; }
}