/**
 * Hybrid responsive layout — desktop / tablet / mobile / zoom-safe.
 * Loaded last among exchange styles. Uses layout tokens + container queries.
 */

.exchange-app {
    --ex-sidebar-full: 13.75rem;
    --ex-sidebar-icon: 2.75rem;
    --ex-sidebar-tablet: 9.5rem;
    --ex-shell-gap: 0.75rem;
}

/* ─── Main column — size-aware event cards (zoom + sidebar expand) ─────────── */
.ex-shell__main {
    container-type: inline-size;
    container-name: ex-main;
}

@container ex-main (max-width: 520px) {
    .exchange-app .ex-event__market-head,
    .exchange-app .ex-event__runner-row {
        grid-template-columns: minmax(0, 1fr) 44px 44px;
        gap: 0.15rem;
    }

    .exchange-app .ex-price {
        min-height: 34px;
        font-size: 0.6875rem;
    }
}

@container ex-main (max-width: 380px) {
    .exchange-app .ex-event__market-head,
    .exchange-app .ex-event__runner-row {
        grid-template-columns: minmax(0, 1fr) 38px 38px;
    }
}

/* ─── Tablet hybrid (992–1199): narrow sidebar + full-width main ─────────── */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .ex-shell:not(.ex-shell--user) {
        grid-template-columns: minmax(0, var(--ex-sidebar-tablet)) minmax(0, 1fr);
        gap: 0.5rem;
    }

    .ex-shell__sidebar {
        position: sticky;
        top: calc(var(--ex-site-header-height, 7.5rem) + var(--ex-site-header-gap, 0.75rem));
        max-height: calc(100dvh - var(--ex-site-header-height, 7.5rem) - var(--ex-site-header-gap, 0.75rem) - 1rem);
    }

    .exchange-app .ex-sidebar .s7__sidebar-nav-wrapper {
        height: calc(100dvh - var(--ex-site-header-height, 7.5rem) - var(--ex-site-header-gap, 0.75rem) - 1rem);
        max-height: calc(100dvh - var(--ex-site-header-height, 7.5rem) - var(--ex-site-header-gap, 0.75rem) - 1rem);
    }
}

@media (max-width: 991.98px) {
    .ex-shell__main {
        overflow-x: visible;
        scrollbar-gutter: auto;
    }
}

/* ─── Top nav: single row at all sub-desktop widths ──────────────────────── */
@media (max-width: 1199.98px) {
    .exchange-app .ex-navbar-bottom__grid:not(.ex-navbar-bottom__grid--guest) {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto) !important;
        grid-template-areas: "start center actions" !important;
        row-gap: 0 !important;
        align-items: center;
    }

    .exchange-app .ex-navbar-bottom__grid:not(.ex-navbar-bottom__grid--guest) .ex-navbar-bottom__center {
        padding-bottom: 0 !important;
        min-width: 0;
    }

    .exchange-app .ex-header-user-meta__item,
    .exchange-app .ex-header-user-meta__user-toggle {
        min-width: clamp(1.75rem, 3.5vw, 3.5rem);
        padding: clamp(0.1rem, 0.5vw, 0.35rem) clamp(0.15rem, 0.6vw, 0.4rem);
    }

    .exchange-app .ex-header-user-meta__label:not(.ex-header-user-balance),
    .exchange-app .ex-header-user-meta__label--user {
        font-size: clamp(0.5625rem, 1.8vw, 0.75rem);
        max-width: clamp(2.5rem, 8vw, 5.5rem);
    }

    .exchange-app .ex-header-user-meta__icon {
        width: clamp(1.5rem, 4vw, 2.25rem);
        height: clamp(1.5rem, 4vw, 2.25rem);
    }

    .exchange-app .ex-header-user-meta__icon svg {
        width: clamp(1rem, 3vw, 1.625rem);
        height: clamp(1rem, 3vw, 1.625rem);
    }

    .exchange-app .ex-navbar-bottom__logo img {
        max-height: clamp(1.65rem, 5vw, 2.35rem);
        max-width: min(100px, 22vw);
    }

    .exchange-app .ex-navbar-bottom__actions,
    .exchange-app .ex-header-actions {
        flex-wrap: nowrap !important;
    }

    .exchange-app .ex-navbar-bottom__actions .ex-menubar-btn,
    .exchange-app .ex-navbar-bottom__actions .ex-notification-btn,
    .exchange-app .ex-navbar-bottom__actions .switch {
        width: clamp(1.875rem, 5vw, 2.5rem);
        height: clamp(1.875rem, 5vw, 2.5rem);
        flex-shrink: 0;
    }

    .exchange-app .ex-lang-btn__label {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .exchange-app .ex-header-user-meta__label:not(.ex-header-user-balance),
    .exchange-app .ex-header-user-meta__label--user {
        display: none;
    }

    .exchange-app .ex-header-user-meta__item--wallet .ex-header-user-balance {
        display: inline-block !important;
        font-size: 0.5625rem;
        max-width: 2.75rem;
    }
}

/* Tablet: show full labels in sidebar, hide collapse chrome */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .exchange-app .ex-sidebar__toggle {
        display: none !important;
    }

    .exchange-app .ex-sidebar-rail.is-collapsed .s7__nav-caption,
    .exchange-app .ex-sidebar-rail.is-collapsed .ex-sidebar-live-badge,
    .exchange-app .ex-sidebar-rail.is-collapsed .s7__menu-title {
        display: inline !important;
    }

    .exchange-app .ex-sidebar-rail.is-collapsed .s7__sidebar-nav li a {
        justify-content: flex-start;
        padding: 0.45rem 0.5rem;
    }
}

@media (max-width: 991.98px) and (orientation: landscape) and (max-height: 500px) {
    .ex-shell {
        padding-bottom: 1rem;
    }

    .exchange-app .ex-sidebar .s7__sidebar-nav-wrapper {
        max-height: calc(100dvh - var(--ex-site-header-height, 5rem) - 1rem);
    }
}

/* ─── QW13 — Targeted mobile fixes (bet slip, ladder, tables, header) ─────── */

@media (max-width: 575.98px) {
    .bet-slip-modal.modal {
        align-items: flex-end;
        padding: 0;
    }

    .bet-slip-modal .bet-slip-modal__dialog {
        width: 100%;
        max-width: 100%;
        margin: 0;
        min-height: auto;
    }

    .bet-slip-modal .bet-slip-dock {
        border-radius: var(--ex-panel-radius, 10px) var(--ex-panel-radius, 10px) 0 0;
        max-height: min(88dvh, 100%);
    }

    .bet-slip-modal .modal-body.modal-content-cust {
        max-height: calc(88dvh - 3.25rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
    }

    .ex-match-header__title {
        font-size: 1rem;
        line-height: 1.25;
    }

    .ex-table-wrap .ex-table {
        min-width: 34rem;
    }

    .ex-personalization-strip__links {
        gap: 0.35rem;
    }

    .ex-personalization-chip {
        max-width: 100%;
    }

    .ex-odds-movement-log__item {
        padding: 0.45rem 0.65rem;
    }
}

@media (max-width: 399.98px) {
    .exchange-app .ex-navbar-bottom__actions,
    .exchange-app .ex-header-actions {
        gap: 0.15rem;
    }

    .exchange-app .ex-navbar-bottom__actions .ex-menubar-btn,
    .exchange-app .ex-navbar-bottom__actions .ex-notification-btn,
    .exchange-app .ex-navbar-bottom__actions .switch {
        width: 1.75rem;
        height: 1.75rem;
    }

    .exchange-app .ex-header-user-meta__item {
        min-width: 1.65rem;
        padding-left: 0.1rem;
        padding-right: 0.1rem;
    }

    .exchange-app .ex-event__market-head,
    .exchange-app .ex-event__runner-row {
        grid-template-columns: minmax(0, 1fr) 38px 38px;
    }
}