/* ═══════════════════════════════════════════════════════════════════════════
   desktop.css — адаптация TMA-админки под широкие экраны (web).
   Грузится ПОСЛЕ tma-styles.css и точечно переопределяет мобильные правила.
   На узких экранах (<= 760px) ничего не делает — отдаём мобильный layout TMA.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 761px) {
    /* ───── Контейнер шире ───── */
    .app {
        max-width: 1180px;
        gap: 18px;
        padding-top: 8px;
    }

    /* На вебе нет TG bottom-bar — снимаем нижний паддинг под него. */
    body {
        padding-bottom: calc(28px + max(var(--safe-bottom, 0px), env(safe-area-inset-bottom, 0px)));
    }

    /* Sticky-шапка с табами на десктопе. Табы центрированы. */
    .admin-header {
        position: sticky;
        top: 0;
        z-index: 50;
        padding: 10px 8px;
        margin: -10px -8px 6px;
        background: rgba(11, 14, 22, 0.78);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-radius: 0 0 14px 14px;
        display: flex; justify-content: center;
    }

    /* Табы крупнее, текст всегда виден. Тянутся на всю ширину .app — чтобы не
       выглядеть «узенькими» относительно широких секций (рассылка/таблицы). */
    .admin-tabs {
        max-width: none;
        flex: 1;
        gap: 6px;
        padding: 5px;
    }
    @media (prefers-color-scheme: light) {
        .admin-header { background: rgba(245, 248, 252, 0.92); }
    }
    body.theme-light .admin-header { background: rgba(245, 248, 252, 0.92); }

    /* Поиск, KPI-блоки, табы юзеров — снимаем внутренний кеп, чтобы они тянулись
       во всю ширину .app (которая уже центрирует контент). */
    .search-wrap, .kpis, .users-tabs, .selection-toolbar { max-width: none; }
    .admin-tab-btn {
        font-size: 13px;
        padding: 11px 10px;
        gap: 8px;
    }
    .admin-tab-btn svg {
        width: 16px;
        height: 16px;
    }
    /* Перебиваем мобильную правилу @max-width:440 (тут всегда показываем). */
    .admin-tab-btn span { display: inline; }

    .mode-switcher {
        width: 42px;
        height: 42px;
    }

    /* ───── KPI-сетка: 4 колонки на десктопе ───── */
    .kpis {
        gap: 14px;
    }

    /* ───── Дашборд: график выше + крупнее столбцы ───── */
    .chart {
        min-height: 180px;
        padding: 18px 14px 12px;
    }
    .bar-wrap .bar {
        min-height: 16px;
    }

    /* ───── Список юзеров: компактно, без overflow ───── */
    #usersList .row-user,
    #paymentsList .row-payment,
    #payoutsList .row-payout,
    #payoutsQuick .row-payment {
        padding: 14px 16px;
    }
    #usersList .row-user .info .n,
    #paymentsList .row-payment .info .n,
    #payoutsList .row-payout .info .n {
        font-size: 14px;
    }

    /* ───── Карточка юзера: action-grid в 3 колонки на широком экране ───── */
    .action-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .act-btn {
        padding: 18px 12px;
        font-size: 13px;
    }

    /* User-detail профиль: чуть просторнее. */
    .user-profile {
        padding: 22px;
    }
    .user-profile .av-big {
        width: 78px;
        height: 78px;
        font-size: 30px;
    }
    .user-profile .un { font-size: 20px; }

    .user-kpis {
        gap: 14px;
    }

    /* ───── Payout detail: ширина строк ───── */
    .payout-card .po-row {
        padding: 14px 16px;
    }
    .payout-card .po-v {
        font-size: 15px;
    }

    /* ───── Broadcast: больше места под textarea и preview ───── */
    .compose-area {
        min-height: 220px;
        font-size: 15px;
    }
    .preview-bubble {
        padding: 16px;
    }

    /* ───── Hover-стейты, которых нет в TMA (мобайл) ───── */
    .row-user,
    .row-payment,
    .row-payout {
        transition: background 0.15s ease, transform 0.15s ease;
    }
    .row-user:hover,
    .row-payment:hover,
    .row-payout:hover {
        background: rgba(255, 255, 255, 0.04);
    }
    .act-btn {
        transition: transform 0.12s ease, background 0.15s ease;
    }
    .act-btn:hover {
        transform: translateY(-1px);
    }

    /* Touch-only элементы: убираем скрытие span'ов на mode-switcher. */
    .mode-switcher:hover {
        background: var(--glass-bg-hover, rgba(255, 255, 255, 0.06));
    }

    /* Toast — фиксируем по центру внизу, как в основной web-версии. */
    .toast {
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(20px);
        max-width: 420px;
    }
    .toast.show {
        transform: translateX(-50%) translateY(0);
    }
}

/* ───── Очень широкие экраны: списки в 2 колонки ───── */
@media (min-width: 1100px) {
    /* Список юзеров и партнёров — двухколоночный grid (на десктопе очень эффективно). */
    #usersList,
    #partnersList {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    /* Платежи и выплаты тоже отображаем в 2 колонки. */
    #paymentsList,
    #payoutsList {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}