/* CLEAN MOBILE-FIRST CSS - NO CONFLICTS */

/* Mobile First Approach - Simple and Clean */
@media screen and (max-width: 768px) {
    /* Reset everything to prevent conflicts */
    * {
        box-sizing: border-box !important;
    }
    
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.4 !important;
    }
    
    /* Simple navbar layout */
    .navbar {
        padding: 8px 15px !important;
        min-height: 60px !important;
    }
    
    .navbar .container-fluid {
        padding: 0 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    /* Brand on left */
    .navbar-brand {
        font-size: 1rem !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* Navigation items on right */
    .navbar-nav {
        flex-direction: row !important;
        margin: 0 !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    /* Hide premium button on mobile - keep it simple */
    .btn-warning.d-none.d-md-block,
    .badge.bg-gradient.d-none.d-md-inline {
        display: none !important;
    }
    
    /* Profile dropdown styling */
    .navbar .dropdown-toggle {
        border: none !important;
        background: transparent !important;
        padding: 8px !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    /* Profile dropdown menu - center on screen */
    .navbar .dropdown-menu {
        position: fixed !important;
        top: 80px !important;
        left: 50% !important;
        right: auto !important;
        width: 300px !important;
        max-width: calc(100vw - 30px) !important;
        max-height: calc(100vh - 120px) !important; /* Ensure it fits on screen */
        transform: translateX(-50%) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        border-radius: 12px !important;
        box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
        z-index: 10000 !important;
        margin: 0 !important;
        overflow-y: auto !important; /* Enable vertical scrolling */
        overflow-x: hidden !important; /* Prevent horizontal scroll */
        -webkit-overflow-scrolling: touch !important; /* Ultra-smooth iOS scrolling */
        scroll-behavior: smooth !important; /* Chrome smooth scrolling */
        scrollbar-width: thin !important; /* Firefox */
        scrollbar-color: rgba(255,255,255,0.3) transparent !important; /* Firefox */
        /* Chrome-specific momentum scrolling */
        overscroll-behavior: contain !important;
        -webkit-transform: translateZ(0) !important; /* Hardware acceleration for Chrome */
        will-change: scroll-position !important; /* Chrome optimization */
    }
    
    /* Custom scrollbar for WebKit browsers (Safari, Chrome) */
    .navbar .dropdown-menu::-webkit-scrollbar {
        width: 4px !important;
        background: transparent !important;
    }
    
    .navbar .dropdown-menu::-webkit-scrollbar-track {
        background: transparent !important;
        border-radius: 2px !important;
    }
    
    .navbar .dropdown-menu::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.3) !important;
        border-radius: 2px !important;
        border: none !important;
    }
    
    .navbar .dropdown-menu::-webkit-scrollbar-thumb:hover {
        background: rgba(255,255,255,0.5) !important;
    }
    
    .navbar .dropdown-menu::-webkit-scrollbar-thumb:active {
        background: rgba(255,255,255,0.7) !important;
    }
    
    /* Chrome-specific fixes for smooth scrolling */
    @supports (-webkit-appearance: none) {
        .navbar .dropdown-menu {
            -webkit-font-smoothing: antialiased !important;
            -moz-osx-font-smoothing: grayscale !important;
            transform: translateX(-50%) translateZ(0) !important; /* Force hardware acceleration */
        }
    }
    
    /* Touch-friendly dropdown items */
    .navbar .dropdown-item {
        padding: 12px 16px !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        border: none !important;
        background: none !important;
    }
    
    .navbar .dropdown-item:hover {
        background-color: rgba(255,255,255,0.1) !important;
    }
    
    /* Content area with proper margins */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    
    /* Main content spacing */
    .container.my-5 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Upload area adjustments */
    .upload-area {
        margin: 20px 0 !important;
        padding: 20px 15px !important;
    }
    
    /* Fix any width issues */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .col, [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Ensure modals work on mobile */
    .modal-dialog {
        max-width: calc(100vw - 30px) !important;
        margin: 15px !important;
    }
    
    .modal-content {
        border-radius: 12px !important;
    }
    
    /* Form inputs on mobile */
    .form-control {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
    
    /* Profile modal adjustments */
    .modal-body {
        padding: 20px !important;
    }
    
    .modal-footer {
        padding: 15px 20px !important;
        gap: 10px !important;
    }
    
    .modal-footer .btn {
        flex: 1 !important;
        min-height: 44px !important; /* Touch target */
    }
    
    /* File item layout fixes for mobile */
    .file-item {
        padding: 8px !important;
        padding-left: 2rem !important; /* Space for grip handle on mobile */
        padding-top: 1.5rem !important; /* Space for page number and remove button on mobile */
        margin-bottom: 8px !important;
        min-height: 180px !important; /* Compact mobile height for better space utilization */
    }
    
    /* Grip handle mobile adjustments */
    .grip-handle {
        left: 0.25rem !important;
        top: 0.75rem !important;
        font-size: 1rem !important;
    }
    
    /* Page number mobile adjustments */
    .page-number {
        top: 0.25rem !important;
        width: 20px !important;
        height: 20px !important;
        font-size: 0.65rem !important;
    }
    
    /* Remove button mobile adjustments */
    .remove-file {
        top: 0.25rem !important;
        right: 0.25rem !important;
        width: 20px !important;
        height: 20px !important;
        font-size: 0.7rem !important;
    }
    
    /* Image Comparison Modal Mobile Fixes */
    #qualityPreviewModal .modal-dialog {
        margin: 10px !important;
        max-width: calc(100vw - 20px) !important;
        height: calc(100vh - 20px) !important;
        max-height: calc(100vh - 20px) !important;
    }
    
    #qualityPreviewModal .modal-content {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #qualityPreviewModal .modal-body {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px !important;
    }
    
    #qualityPreviewModal .modal-header {
        padding: 12px 15px !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        flex-shrink: 0 !important;
    }
    
    #qualityPreviewModal .modal-footer {
        flex-shrink: 0 !important;
        padding: 10px 15px !important;
    }
    
    #qualityPreviewModal .modal-title {
        font-size: 1rem !important;
        flex: 1 1 100% !important;
        margin-bottom: 5px !important;
    }
    
    /* Stack header info vertically on mobile */
    #qualityPreviewModal .modal-header > div:last-child {
        flex: 1 1 100% !important;
        justify-content: space-between !important;
    }
    
    /* Quality controls mobile layout */
    .quality-controls-bar {
        margin-bottom: 15px !important;
    }
    
    /* Button groups - stack vertically and use icons only */
    .quality-controls-bar .d-flex:first-child {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }
    
    .quality-controls-bar h6 {
        text-align: center !important;
        margin-bottom: 10px !important;
    }
    
    /* Make control buttons wrap and be touch-friendly */
    .quality-controls-bar .d-flex:first-child > div:last-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    /* Compact button text for mobile */
    #zoom-in-btn { content: ""; }
    #zoom-in-btn .fas::after { content: ""; }
    #zoom-in-btn::after { content: " Zoom+" !important; }
    
    #zoom-out-btn::after { content: " Zoom-" !important; }
    #rotate-ccw-btn::after { content: " ↺" !important; }
    #rotate-cw-btn::after { content: " ↻" !important; }
    #reset-zoom-btn::after { content: " Reset" !important; }
    #refresh-preview-btn::after { content: " Update" !important; }
    
    /* Hide button text, keep icons */
    .quality-controls-bar button .fas + * {
        display: none !important;
    }
    
    /* Settings row - stack vertically */
    .quality-controls-bar .d-flex:nth-child(2) {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: stretch !important;
    }
    
    .quality-controls-bar .d-flex:nth-child(2) > div {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    
    .quality-controls-bar .form-range {
        width: 100% !important;
    }
    
    .quality-controls-bar .form-select {
        width: 100% !important;
    }
    
    /* Larger comparison container on mobile */
    .comparison-container {
        min-height: 50vh !important;
        height: 50vh !important;
        margin: 15px 0 !important;
        position: relative !important;
    }
    
    .image-comparison-container {
        min-height: 50vh !important;
        height: 50vh !important;
        position: relative !important;
    }
    
    /* Larger comparison slider for touch */
    .comparison-slider-container {
        width: 80% !important;
        top: 20px !important;
    }
    
    .comparison-slider {
        height: 8px !important;
    }
    
    .comparison-slider::-webkit-slider-thumb {
        width: 30px !important;
        height: 30px !important;
    }
    
    .comparison-slider::-moz-range-thumb {
        width: 30px !important;
        height: 30px !important;
    }
    
    /* Larger comparison labels */
    .comparison-labels {
        padding: 0 15px !important;
        top: 15px !important;
    }
    
    .comparison-label .badge {
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }
    
    /* Better touch targets for apply button */
    #apply-quality-settings {
        min-height: 44px !important;
        padding: 10px 20px !important;
    }
    
    /* Footer button improvements */
    #qualityPreviewModal .modal-footer button {
        min-height: 50px !important;
        font-size: 1rem !important;
    }
}

/* Very small screens */
@media screen and (max-width: 375px) {
    .navbar-brand {
        font-size: 0.9rem !important;
    }
    
    .navbar .dropdown-menu {
        width: calc(100vw - 20px) !important;
        max-width: 320px !important;
        max-height: calc(100vh - 100px) !important; /* Smaller max height for very small screens */
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 70px !important;
        overflow-y: auto !important; /* Ensure scrolling on small screens too */
        -webkit-overflow-scrolling: touch !important; /* Ultra-smooth iOS scrolling */
    }
    
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}