/**
 * FIX HORIZONTAL SCROLLING - EMERGENCY MOBILE FIX
 * Prevents all horizontal overflow on mobile devices
 */

@media (max-width: 768px) {
    /* GLOBAL: Prevent ALL horizontal scrolling */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative !important;
    }

    /* Main container must not exceed viewport */
    #app,
    .page,
    .container,
    main {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* All child elements must respect viewport width */
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* Tables: NEVER allow horizontal scroll */
    table {
        display: block !important;
        overflow-x: auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Force table cells to wrap or truncate */
    td, th {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Images must never exceed viewport */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Cards and content blocks */
    .card,
    .content-block,
    .section {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Forms and inputs */
    form,
    input,
    textarea,
    select,
    button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Calendar/Grid layouts - force single column */
    .calendar-grid,
    .grid-layout,
    .multi-column {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Remove any fixed widths that exceed viewport */
    [style*="width: 600px"],
    [style*="width: 700px"],
    [style*="width: 800px"],
    [style*="width: 900px"],
    [style*="width: 1000px"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Horizontal scrolling containers - convert to vertical */
    .horizontal-scroll,
    .scroll-x {
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* Stats/Info rows - stack vertically */
    .stats-row,
    .info-row,
    .button-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .stats-row > *,
    .info-row > *,
    .button-row > * {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Dashboard specific */
    .dashboard-page {
        padding: 0.75rem !important;
        overflow-x: hidden !important;
    }

    /* Nutrition page */
    .nutrition-page {
        padding: 0.75rem !important;
        overflow-x: hidden !important;
    }

    /* Training page */
    .training-page {
        padding: 0.75rem !important;
        overflow-x: hidden !important;
    }

    .programme-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1rem 0 !important;
    }

    /* Rehab page */
    .rehab-page {
        padding: 0.75rem !important;
        overflow-x: hidden !important;
    }

    /* Community page */
    .community-page,
    .dc-layout,
    .dc-main {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Timetable page */
    .timetable-page {
        padding: 0.75rem !important;
        overflow-x: hidden !important;
    }

    .calendar-container {
        overflow-x: auto !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Profile page */
    .profile-page {
        padding: 0.75rem !important;
        overflow-x: hidden !important;
    }

    /* Modals */
    .modal,
    .dialog {
        max-width: calc(100vw - 2rem) !important;
        margin: 0 1rem !important;
        overflow-x: hidden !important;
    }

    /* Remove min-width constraints on mobile */
    * {
        min-width: 0 !important;
    }

    /* Exception: Only calendar can scroll horizontally if needed */
    .calendar-grid,
    .calendar-table,
    #fitness-calendar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* But wrap the calendar in a container that doesn't overflow */
    .calendar-wrapper,
    .calendar-container {
        max-width: 100% !important;
        overflow-x: auto !important;
    }

    /* Prevent body scroll when calendar scrolls */
    body:has(.calendar-container) {
        overflow-x: hidden !important;
    }
}

/**
 * DEBUG: Show elements causing overflow
 * Uncomment to debug which elements are too wide
 */
/*
@media (max-width: 768px) {
    * {
        outline: 1px solid rgba(255, 0, 0, 0.3) !important;
    }

    *:not(html):not(body) {
        position: relative !important;
    }

    *:not(html):not(body)::before {
        content: attr(class) !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        font-size: 10px !important;
        color: red !important;
        background: rgba(255, 255, 255, 0.8) !important;
        padding: 2px !important;
        z-index: 9999 !important;
    }
}
*/