/**
 * Mobile Responsive CSS
 * Fixes layout issues on mobile devices (≤768px)
 * CRITICAL: All changes are MOBILE ONLY - Desktop remains unchanged
 */

/* ============================================
   GLOBAL RESPONSIVE FOUNDATION (MOBILE ONLY)
   ============================================ */

@media (max-width: 768px) {
    /* Ensure no horizontal scrolling */
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
    }
    
    *, *::before, *::after {
        box-sizing: border-box;
    }
    
    /* Ensure images and media don't overflow */
    img, video, canvas, input, textarea, select {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Prevent horizontal overflow */
    .container, .view, .view.active {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Review and Script containers - prevent overflow */
    .review-container,
    .script-editor-container {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Text wrapping for long content */
    p, span, div, h1, h2, h3, h4, h5, h6, label {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }
    
    /* Fix flex items that overflow */
    [style*="display: flex"] > *,
    .flex-item {
        min-width: 0 !important;
    }
    
    /* Prevent horizontal scroll on all containers */
    .view,
    .container,
    .panel,
    header,
    .sidebar {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* ============================================
   HEADER / TOP ACTIONS (Mobile Fix)
   ============================================ */

@media (max-width: 768px) {
    /* Header layout - stack on mobile */
    header {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px 15px !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Brand container */
    header > .brand-container {
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Header actions container - wrap buttons */
    header > div:last-child,
    header > div[style*="display:flex"] {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }
    
    /* Header buttons - 2-per-row on mobile */
    header .btn-header-yellow,
    header .btn-glow,
    header button:not(.mobile-sidebar-toggle) {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        padding: 10px 12px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        justify-content: center !important;
        text-align: center !important;
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Dropdown in header */
    header .dropdown {
        flex: 1 1 calc(50% - 4px) !important;
        max-width: 100% !important;
    }
    
    header select {
        flex: 1 1 calc(50% - 4px) !important;
        font-size: 9px !important;
        padding: 10px 8px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Smaller buttons on very small screens */
    @media (max-width: 480px) {
        header .btn-header-yellow,
        header .btn-glow,
        header button:not(.mobile-sidebar-toggle) {
            flex: 1 1 100% !important;
            font-size: 9px !important;
            padding: 8px 10px !important;
        }
        
        header .dropdown,
        header select {
            flex: 1 1 100% !important;
        }
    }
}

/* ============================================
   TABS NAVIGATION (Mobile Fix)
   ============================================ */

@media (max-width: 768px) {
    /* Library tabs - horizontal scroll */
    .library-tabs,
    div[style*="display: flex"][style*="gap: 10px"][style*="border-bottom"] {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding-bottom: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .library-tabs::-webkit-scrollbar,
    div[style*="display: flex"][style*="gap: 10px"][style*="border-bottom"]::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    
    .library-tabs > button,
    .library-tab,
    .help-tab {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        min-width: fit-content !important;
        padding: 10px 16px !important;
        font-size: 11px !important;
    }
    
    /* Review status tabs */
    .review-status-tabs {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .review-status-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .review-status-tab {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    
    /* Help tabs */
    .help-tab {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
}

/* ============================================
   TWO-COLUMN LAYOUTS (Stack on Mobile)
   ============================================ */

@media (max-width: 768px) {
    /* Any grid with 2+ columns becomes 1 column */
    .container > div[style*="grid-template-columns"],
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns: 2fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    /* Panel grids */
    .panel > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Cloud storage settings - stack columns */
    .cloud-sync-panel > div[style*="grid-template-columns"],
    div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Flex containers with row direction - more specific selectors */
    #dashView .container[style*="display: flex"],
    #reviewView .review-container,
    .container[style*="display: flex"]:not([style*="flex-direction: column"]) {
        flex-direction: column !important;
    }
    
    /* Library container with comments panel */
    #dashView .container[style*="display: flex"] > div:first-child,
    .container[style*="display: flex"] > div:first-child {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Editor view panels */
    #editorView .panel > div[style*="grid-template-columns"],
    #editorView div[style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   TOOL PANELS / CHIPS / BUTTON GROUPS
   ============================================ */

@media (max-width: 768px) {
    /* Appearance selector - stack on mobile */
    .appearance-selector,
    div[style*="display: flex"][style*="align-items: center"][style*="gap: 15px"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .appearance-modes,
    div[style*="display: flex"][style*="gap: 5px"] {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
        width: 100% !important;
    }
    
    .appearance-btn,
    .size-btn {
        flex: 1 1 calc(33.333% - 8px) !important;
        min-width: 0 !important;
        padding: 8px 12px !important;
        font-size: 10px !important;
    }
    
    .size-selector {
        margin-left: 0 !important;
        margin-top: 0 !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 8px !important;
    }
    
    /* Camera tags / shortcut buttons - wrap */
    .shortcut-btn,
    .camera-tag,
    .location-tag,
    .script-shortcuts > button {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }
    
    .script-shortcuts,
    [style*="flex-wrap"],
    div[style*="display: flex"][style*="gap: 8px"] {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Field groups */
    .field-group,
    div[style*="display:grid"][style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Chip groups - wrap */
    div[style*="display: flex"][style*="gap: 10px"]:not(.library-tabs):not(.help-tab) {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

/* ============================================
   CONTENT CONTAINERS AND CARDS
   ============================================ */

@media (max-width: 768px) {
    /* Main container */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 12px !important;
        margin: 0 auto;
    }
    
    /* Panels */
    .panel {
        padding: 20px 15px !important;
        margin-bottom: 20px !important;
    }
    
    /* Project grid - 1 column on mobile */
    .project-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    /* Shot grid - 1 column on mobile */
    .shot-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 15px !important;
    }
    
    /* Cards */
    .proj-card,
    .card {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Remove fixed widths */
    .library-comments-panel,
    .comments-panel {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        margin-top: 20px;
    }
    
    /* Cloud provider cards */
    .cloud-providers {
        grid-template-columns: 1fr !important;
    }
    
    /* Tech info grid - stack on mobile */
    .tech-info-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Project card with image - stack on mobile */
    .shotdeck-project-card,
    div[style*="display: flex"][style*="gap: 20px"] {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .project-card-image {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Button groups in editor - stack on mobile */
    div[style*="grid-template-columns: 2fr 1fr"],
    div[style*="grid-template-columns: 2fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Cloud storage settings grid */
    div[style*="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Cloud settings buttons */
    .cloud-sync-panel > div[style*="display: flex"] {
        flex-direction: column !important;
        width: 100%;
    }
    
    .cloud-sync-panel button {
        width: 100% !important;
    }
    
    /* Review view container - stack columns */
    .review-container,
    div[style*="display: flex"][style*="gap: 20px"][style*="height: calc"] {
        flex-direction: column !important;
        height: auto !important;
        padding: 15px 12px !important;
    }
    
    .review-assets-panel,
    .review-content-panel,
    .review-comments-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px;
    }
    
    .review-content-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Script editor container */
    .script-editor-container {
        flex-direction: column !important;
        height: auto !important;
    }
    
    .script-versions {
        width: 100% !important;
        border-left: none !important;
        border-top: 1px solid var(--sb-border) !important;
        max-height: 300px;
        overflow-y: auto;
    }
    
    .script-editor {
        max-width: 100% !important;
        padding: 15px !important;
    }
    
    .script-toolbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    /* Bulk upload panel */
    .bulk-upload-panel {
        padding: 20px 15px !important;
    }
    
    /* Sequence groups */
    .seq-group {
        margin-bottom: 20px !important;
    }
    
    .seq-header {
        padding: 12px 15px !important;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    /* Navigator table */
    .navigator-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Sequence cards */
    .seq-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Tablets (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .project-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .shot-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   STICKY ELEMENTS AND FOOTER
   ============================================ */

@media (max-width: 768px) {
    /* Ensure content has enough bottom padding */
    .view {
        padding-bottom: 100px !important;
    }
    
    /* Header height adjustment and z-index */
    header {
        min-height: auto !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 2000 !important;
    }
    
    /* Sticky elements */
    header[style*="position: sticky"],
    .sticky {
        position: sticky !important;
        top: 0;
        z-index: 1000;
    }
    
    /* Footer */
    footer {
        position: relative !important;
        width: 100% !important;
    }
}

/* ============================================
   CRITICAL FIX: DROPDOWN/MENU BEHIND HEADER
   ============================================ */

@media (max-width: 768px) {
    /* CSS Variable for header height (set by JS) */
    :root {
        --m-header-h: 60px; /* Default fallback */
    }
    
    /* Sidebar - Fixed overlay below header */
    .sidebar {
        position: fixed !important;
        top: var(--m-header-h) !important;
        left: 0 !important;
        right: auto !important;
        width: 260px !important;
        max-width: 85vw !important;
        height: calc(100vh - var(--m-header-h)) !important;
        max-height: calc(100vh - var(--m-header-h)) !important;
        z-index: 3000 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .sidebar.mobile-open {
        transform: translateX(0) !important;
    }
    
    /* Prevent body scroll when sidebar is open */
    body.sidebar-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
    
    /* Mobile sidebar toggle - position below header */
    .mobile-sidebar-toggle {
        position: fixed !important;
        top: calc(var(--m-header-h) + 10px) !important;
        left: 10px !important;
        z-index: 3001 !important;
    }
    
    /* Sidebar hover menu - ensure it's above header */
    .sidebar-hover-menu {
        z-index: 3002 !important;
    }
    
    /* Dropdown menus - position fixed below header to avoid overlap */
    header .dropdown-menu,
    .dropdown-menu {
        position: fixed !important;
        top: calc(var(--m-header-h, 64px) + 8px) !important;
        left: 10px !important;
        right: 10px !important;
        z-index: 3000 !important;
        max-height: calc(100vh - var(--m-header-h, 64px) - 20px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }
    
    /* Header z-index - below dropdowns/sidebar */
    header {
        z-index: 4000 !important;
        position: sticky !important;
        top: 0 !important;
    }
    
    /* Dropdown menus and sidebar - above header */
    .dropdown-menu,
    .sidebar,
    .mobile-sidebar {
        z-index: 5000 !important;
    }
    
    /* View padding-top to account for sticky header */
    .view.active {
        padding-top: 70px !important;
    }
    
    /* Dropdown container positioning */
    header .dropdown {
        position: relative !important;
        z-index: 2001 !important;
    }
    
    /* Dropdown content (legacy) - ensure it's visible */
    .dropdown-content {
        position: fixed !important;
        top: calc(var(--m-header-h, 64px) + 8px) !important;
        left: 10px !important;
        right: 10px !important;
        z-index: 3000 !important;
        max-height: calc(100vh - var(--m-header-h, 64px) - 20px) !important;
        overflow-y: auto !important;
        overflow-y: auto !important;
    }
    
    /* Remove overflow hidden from parent containers that might clip menu */
    body,
    .view,
    .container {
        overflow-x: hidden !important;
    }
    
    /* Ensure no parent clips the sidebar */
    body > * {
        overflow-x: visible !important;
    }
}

/* ============================================
   MODALS AND OVERLAYS
   ============================================ */

@media (max-width: 768px) {
    .modal {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px !important;
        padding: 20px 15px !important;
    }
    
    .modal-footer {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .modal-btn {
        width: 100% !important;
    }
}

/* ============================================
   TEXT AND TYPOGRAPHY
   ============================================ */

@media (max-width: 768px) {
    /* Ensure text doesn't overflow */
    h1, h2, h3, h4, h5, h6,
    .section-title,
    .deck-label {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    /* Prevent text overflow in buttons */
    button, .btn-header-yellow, .btn-glow {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Hide on mobile */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Show only on mobile */
.show-mobile {
    display: none !important;
}

@media (max-width: 768px) {
    .show-mobile {
        display: block !important;
    }
}

/* Full width on mobile */
@media (max-width: 768px) {
    .full-width-mobile {
        width: 100% !important;
        max-width: 100% !important;
    }
}