/**
 * StadiumConnect — global responsive (phone full-fit + laptop full-screen)
 * Load after page styles; works on ALL pages including index & home.
 */

*, *::before, *::after { box-sizing: border-box; }

html {
    width: 100%;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    overflow-x: clip;
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

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

/* Prevent flex/grid children from forcing horizontal scroll */
.header, .topbar, .hero-top, .search-row, .bottom-inner,
.dash, .dash .main, .main-container, .container, .wrap, .page {
    min-width: 0;
}

/* ── Phone: full width fit ── */
@media (max-width: 767px) {
    html, body { overflow-x: clip; }

    .container,
    .main-container,
    .dashboard-container,
    .content,
    .page,
    .wrap,
    .section-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: max(12px, env(safe-area-inset-left, 12px)) !important;
        padding-right: max(12px, env(safe-area-inset-right, 12px)) !important;
    }

    .header,
    .topbar {
        width: 100% !important;
        padding-left: max(12px, env(safe-area-inset-left, 12px)) !important;
        padding-right: max(12px, env(safe-area-inset-right, 12px)) !important;
    }

    /* iOS: 16px+ inputs avoid zoom */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    .modal,
    .modal-content,
    .sheet,
    .loc-sheet {
        max-width: calc(100vw - 24px) !important;
        width: calc(100vw - 24px) !important;
    }

    .table-wrapper {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 0 !important;
    }

    /* Touch targets */
    button,
    .icon-btn,
    .nav-item,
    .cat-pill,
    a.btn {
        min-height: 44px;
    }

    .bottom-nav {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body:has(.bottom-nav) {
        padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .dash .topbar {
        flex-direction: column;
        align-items: stretch !important;
    }

    .dash .top-actions {
        width: 100%;
    }

    .dash .search {
        width: 100% !important;
    }

    /* Index login page */
    body:has(.login-card) .page {
        max-width: 100% !important;
        padding: 0 4px;
    }

    .role-tabs {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .role-tab {
        font-size: 10px !important;
        padding: 8px 4px !important;
    }
}

@media (max-width: 380px) {
    .features {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .stats-row:not(body.vendor-detail-page .stats-row) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── Tablet ── */
@media (min-width: 768px) and (max-width: 1023px) {
    .wrap {
        max-width: min(720px, 94vw) !important;
    }

    .container,
    .main-container {
        max-width: min(1200px, 96vw) !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .vendor-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }

    .dash {
        grid-template-columns: 240px 1fr !important;
    }

    .dash .sidebar {
        position: sticky !important;
        transform: none !important;
        width: auto !important;
    }
}

/* ── Laptop / desktop: use full screen width ── */
@media (min-width: 1024px) {
    .wrap {
        max-width: min(960px, 92vw) !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .container,
    .main-container,
    .dashboard-container {
        max-width: min(1400px, 96vw) !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    .content,
    .hero,
    .page-content {
        max-width: min(900px, 92vw);
        margin-left: auto;
        margin-right: auto;
    }

    #homeView .hero {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Directory: multi-column on wide screens */
    .vendor-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .dash {
        grid-template-columns: 260px 1fr !important;
        min-height: 100dvh;
    }

    .dash .sidebar {
        position: sticky !important;
        top: 0 !important;
        height: 100dvh !important;
        overflow-y: auto !important;
        transform: none !important;
        width: auto !important;
    }

    .dash .main {
        padding: 24px 32px 40px !important;
        width: 100%;
    }

    .dash .stats-row {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .dash .booking-card {
        grid-template-columns: 220px 1fr auto !important;
    }

    .header,
    .topbar {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    /* Admin panels full width */
    body:has(.stats-grid) .main-container {
        max-width: min(1600px, 97vw) !important;
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    }

    /* Index: wider but centered on laptop */
    body:has(.login-card) {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    body:has(.login-card) .page {
        max-width: min(520px, 92vw) !important;
        width: 100%;
    }

    /* Home: wider layout */
    body:has(.hero) .page,
    .page:has(.hero) {
        max-width: min(1100px, 94vw) !important;
    }
}

@media (min-width: 1280px) {
    .wrap {
        max-width: min(1100px, 90vw) !important;
    }

    .vendor-list {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .container,
    .main-container {
        max-width: min(1600px, 94vw) !important;
    }

    body:has(.hero) .page,
    .page:has(.hero) {
        max-width: min(1200px, 92vw) !important;
    }
}

@media (min-width: 1536px) {
    .vendor-list {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
    }

    .main-container {
        max-width: min(1680px, 90vw) !important;
    }
}

/* Vendor detail: stay readable, slightly wider on laptop */
@media (min-width: 768px) {
    body.vendor-detail-page .page {
        max-width: min(600px, 94vw) !important;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1024px) {
    body.vendor-detail-page .page {
        max-width: min(640px, 92vw) !important;
    }
}

/* Login pages centered full viewport */
.login-container,
.login-card:not(.page .login-card) {
    width: 100%;
    max-width: min(480px, 94vw);
}

/* Fix fixed elements spanning full viewport */
.bottom-bar,
.bottom-nav,
.sheet,
.loc-sheet {
    max-width: 100vw;
}

/* Grids that should expand on desktop */
.vendors-grid,
.cards-grid,
.packages-grid,
.charts-grid {
    width: 100%;
}

@media (min-width: 1024px) {
    .vendors-grid,
    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }

    .charts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Don't stretch inline action buttons on desktop */
@media (min-width: 481px) {
    .btn-row .btn,
    .header-actions .btn,
    .header-actions .logout-btn,
    .top-actions .icon-btn,
    .v-actions .act-btn,
    .booking-footer .btn-pay-booking,
    .booking-footer .review-btn {
        width: auto !important;
    }
}