/**
 * Exchange responsive shell — 3-column desktop, stacked mobile, no page horizontal scroll.
 */

.exchange-app .container,
.exchange-app .container-fluid {
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
}

.exchange-app .main-body-area,
.exchange-app .ex-shell {
    max-width: 100%;
    overflow-x: clip;
}

.ex-shell {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 280px);
    gap: 0.75rem;
    align-items: start;
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0 1rem;
}

.ex-shell__main {
    min-width: 0;
    max-width: 100%;
}

.ex-shell__sidebar {
    min-width: 0;
}

.ex-shell__rail {
    min-width: 0;
    position: sticky;
    top: 0.75rem;
}

.ex-shell__rail .bet-slip-dock {
    max-width: 100%;
}

/* User dashboard: sidebar + main only */
.ex-shell--user {
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
}

@media (max-width: 991.98px) {
    .ex-shell--user {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Prevent bootstrap row negative margin blowout inside exchange */
.exchange-layout .row {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

.exchange-layout [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
    min-width: 0;
}

/* In-play strip: scroll contained inside, never widens page */
.ex-inplay-strip {
    max-width: 100%;
    min-width: 0;
}

.ex-inplay-strip__scroll {
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* Market grids never overflow page */
.ex-market__grid,
.ex-event,
.ex-markets-wrap,
.ex-event-list {
    max-width: 100%;
    min-width: 0;
}

.ex-market__runner-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tables scroll inside card only */
.ex-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ex-table-wrap .ex-table {
    min-width: 640px;
}

/* Mobile: single column, sidebar hidden, bet slip = bottom sheet */
@media (max-width: 991.98px) {
    .ex-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
        padding-bottom: 5.5rem;
    }

    .ex-shell__sidebar {
        display: none !important;
    }

    .ex-shell__rail {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        pointer-events: none;
    }

    .ex-shell__rail .bet-slip-dock {
        pointer-events: auto;
        max-height: 70vh;
    }

    .ex-header-actions {
        justify-content: flex-end;
    }

    .ex-wallet-bar {
        font-size: 0.75rem;
        gap: 0.25rem 0.5rem;
    }

    .ex-market__head-row,
    .ex-market__runner-row {
        grid-template-columns: minmax(0, 1fr) 58px;
    }

    .ex-market__head-row--fancy,
    .ex-market__runner-row--fancy {
        grid-template-columns: minmax(0, 1fr) 52px 52px;
    }

    .ex-event__runners {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ex-open-bets__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.25rem;
    }

    .navbar-bottom .col-6 {
        max-width: 50%;
    }
}

@media (max-width: 575.98px) {
    .ex-shell {
        padding-left: 0;
        padding-right: 0;
    }

    .ex-event__runners {
        grid-template-columns: minmax(0, 1fr);
    }

    .ex-tabs .nav-link {
        font-size: 0.8125rem;
        padding: 0.45rem 0.65rem;
    }

    .ex-inplay-strip__item {
        max-width: 85vw;
    }
}

/* Mobile bet-slip trigger bar when closed */
.ex-mobile-slip-bar {
    display: none;
}

@media (max-width: 991.98px) {
    .ex-mobile-slip-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1035;
        padding: 0.5rem 0.75rem;
        background: var(--ex-surface);
        border-top: 1px solid var(--ex-border);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    }

    .ex-mobile-slip-bar__btn {
        background: var(--color-primary);
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        font-weight: 600;
    }
}