/* ===============================================
   CRITICAL MOBILE FULL-WIDTH FIX
   Include this on ALL pages to ensure no edges
   =============================================== */

/* Force full-width on ALL mobile devices */
@media (max-width: 768px) {
    /* Reset root elements - ZERO TOP SPACING */
    html {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
    }

    body {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 68px !important; /* space for bottom nav */
        overflow-x: hidden !important;
        box-sizing: border-box;
    }

    /* Force all containers to full-width with NO PADDING */
    .container,
    #root,
    #app,
    .app,
    .app-wrapper,
    .app-container,
    .page-wrapper,
    .page-container,
    .main-wrapper,
    .main-container,
    .content-wrapper,
    .content-container,
    .workspace-container,
    main,
    article,
    section {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        margin-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Breakdown pages - FORCE ZERO PADDING */
    #breakdownApp,
    .breakdown-app,
    .breakdown-wrapper,
    .breakdown-container,
    .breakdown-main,
    .breakdown-content,
    .script-breakdown-main {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: hidden !important;
    }

    /* Breakdown header - full width */
    .script-breakdown-header,
    .breakdown-header {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }

    /* Scene cards container - full width, add internal padding */
    .breakdown-grid,
    .scenes-grid,
    .scene-list {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Script pages */
    .script-container,
    .script-wrapper,
    .script-content,
    .screenplay-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    /* Budget, Schedule, Shot list pages */
    .budget-container,
    .schedule-container,
    .shot-container,
    .storyboard-container,
    .call-sheet-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    /* Dashboard */
    .dashboard-container,
    .dashboard-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 12px !important;
        overflow-x: hidden !important;
    }

    /* Grid and flex containers */
    .breakdown-grid,
    .scenes-grid,
    .shot-list-grid,
    .budget-grid {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    /* Cards and items */
    .scene-card,
    .breakdown-card,
    .budget-card,
    .shot-card {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    /* Remove any absolute positioning that breaks layout */
    .page-controls,
    .controls-row,
    .breakdown-header {
        position: relative !important;
        width: 100% !important;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* Prevent horizontal scroll on all screen sizes */
html {
    overflow-x: hidden;
    width: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
}