/* ========================================
           RESPONSIVE & MOBILE STYLES
           ======================================== */

        /* Mobile hamburger menu button */
        #mobile-menu-toggle {
            display: none;
            width: 40px;
            height: 40px;
            background: transparent;
            border: none;
            color: var(--text-primary);
            cursor: pointer;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        #mobile-menu-toggle:hover {
            background: rgba(139, 92, 246, 0.1);
            color: #8b5cf6;
        }

        /* Mobile menu overlay */
        #mobile-menu-overlay {
            display: none;
            position: fixed;
            top: 48px;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999; /* Higher than drawers (z-index: 40) */
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none; /* CRITICAL: Don't block clicks when hidden */
        }

        #mobile-menu-overlay.active {
            opacity: 1;
            pointer-events: auto; /* Allow clicks when active */
        }

        /* Mobile menu panel */
        #mobile-menu-panel {
            display: none;
            position: fixed;
            top: 48px;
            right: -100%;
            width: 280px;
            height: calc(100vh - 48px);
            background: var(--bg-pane-light);
            box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
            z-index: 1000; /* Higher than mobile menu overlay */
            overflow-y: auto;
            padding: 1rem;
            transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        #mobile-menu-panel.active {
            right: 0;
        }

        /* Mobile menu items */
        .mobile-menu-item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0.75rem;
            width: 100%;
            padding: 0.875rem 1rem;
            margin-bottom: 0.5rem;
            border-radius: 8px;
            border: none;
            color: white;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.2s ease;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .mobile-menu-item:hover {
            transform: translateX(-4px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .mobile-menu-item i {
            width: 20px;
            text-align: center;
            font-size: 1rem;
        }

        /* Individual button colors */
        .mobile-menu-item[data-action="export-pdf"] {
            background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
        }

        .mobile-menu-item[data-action="export-pdf"]:hover {
            background: linear-gradient(135deg, #15803d 0%, #166534 100%);
        }

        .mobile-menu-item[data-action="ai-enhance"] {
            background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
        }

        .mobile-menu-item[data-action="ai-enhance"]:hover {
            background: linear-gradient(135deg, #9333ea 0%, #db2777 100%);
        }

        .mobile-menu-item[data-action="ai-import"] {
            background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
        }

        .mobile-menu-item[data-action="ai-import"]:hover {
            background: linear-gradient(135deg, #2563eb 0%, #0891b2 100%);
        }

        .mobile-menu-item[data-action="find-job"] {
            background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
        }

        .mobile-menu-item[data-action="find-job"]:hover {
            background: linear-gradient(135deg, #059669 0%, #0d9488 100%);
        }

        .mobile-menu-item[data-action="interview"] {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        }

        .mobile-menu-item[data-action="interview"]:hover {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        }

        .mobile-menu-item[data-action="settings"] {
            background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
        }

        .mobile-menu-item[data-action="settings"]:hover {
            background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
        }

        /* Tablet breakpoint (768px - 1024px) */
        @media (max-width: 1024px) {
            /* Reduce panel widths */
            #left-pane {
                flex: 0 0 30%;
                max-width: 30%;
                min-width: 250px;
            }

            #right-pane {
                flex: 0 0 35%;
                max-width: 35%;
                min-width: 280px;
            }

            /* Toolbar adjustments */
            #toolbar h1 {
                font-size: 1rem;
            }

            #toolbar button {
                padding: 0.5rem 0.75rem;
                font-size: 0.813rem;
            }

            #toolbar button span {
                display: none;
            }

            /* CV Preview scaling */
            #cv-preview {
                transform: scale(0.9);
            }
        }

        /* Mobile breakpoint (< 768px) */
        @media (max-width: 768px) {
            /* Stack layout vertically */
            #app-root {
                flex-direction: column;
                padding-top: 48px;
            }

            /* Show mobile menu button */
            #mobile-menu-toggle {
                display: flex;
            }

            #mobile-menu-overlay,
            #mobile-menu-panel {
                display: block;
            }

            /* Hide desktop toolbar buttons */
            #toolbar .flex.flex-wrap {
                display: none !important;
            }

            /* Adjust toolbar */
            #toolbar {
                padding: 0.5rem 1rem;
            }

            #toolbar h1 {
                font-size: 0.875rem;
                flex: 1;
            }

            /* Properties Panel (left-pane) - Bottom sheet over content */
            #left-pane {
                position: fixed !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0;
                top: auto;
                z-index: 1000 !important; /* Over everything */
                flex: none;
                max-width: 100% !important;
                width: 100% !important;
                height: 40vh !important; /* 40% screen height */
                max-height: 40vh !important;
                background: #ffffff !important; /* White background */
                box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                transform: translateY(100%);
                overflow-y: auto;
                overflow-x: hidden;
                border-radius: 0 !important; /* No rounded corners */
                padding: 1rem !important; /* Smaller padding for mobile */
                margin: 0 !important;
            }

            #left-pane:not(.hidden) {
                transform: translateY(0);
            }

            /* Right pane - hide completely on mobile */
            #right-pane {
                display: none !important;
            }

            /* Hide splitters on mobile */
            #splitter-left,
            #splitter-right {
                display: none !important;
            }

            /* Center area takes full width */
            #center-area {
                flex: 1;
                width: 100%;
            }

            /* Version controls - compact mobile layout */
            #version-controls {
                padding: 0.5rem 0.75rem;
            }

            #version-controls .flex.items-center.gap-2 {
                gap: 0.25rem;
                flex-wrap: wrap;
            }

            #version-controls button {
                padding: 0.375rem;
                font-size: 0.75rem;
                min-width: 32px;
            }

            #version-info {
                font-size: 0.75rem;
                min-width: auto;
            }

            #new-version-btn span,
            #delete-version-btn span {
                display: none;
            }

            #toggle-left-panel,
            #toggle-right-panel {
                display: none !important;
            }

            /* Template controls - horizontal scroll */
            #template-controls {
                padding: 0.5rem;
            }

            #template-buttons-container {
                gap: 0.25rem;
                padding: 0 0.25rem;
            }

            .template-btn {
                padding: 0.5rem 0.75rem;
                font-size: 0.75rem;
            }

            .gallery-nav {
                width: 28px;
                height: 28px;
            }

            /* CV Preview - scale A4 to fit screen */
            #cv-preview-wrapper {
                padding: 0;
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                width: 100%;
                display: flex !important;
                flex-direction: row !important; /* Override column */
                justify-content: center;
                align-items: flex-start;
            }

            #cv-preview {
                /* MOBILE: Keep A4 width and scale to fit */
                width: 210mm !important;
                min-width: 210mm !important;

                /* Scale to fit screen - 210mm ≈ 794px */
                /* Mobile screen typically 375-414px wide */
                /* Scale = screen_width / 794 */
                transform: scale(0.47);
                transform-origin: top center;

                margin: 0 auto;
                margin-bottom: -600px; /* Compensate for scale */
                padding: 20px;
                box-sizing: border-box;
            }

            /* CRITICAL: Prevent wrapper from being too small */
            #cv-preview-wrapper {
                min-height: 400px; /* Ensure touchable area */
            }

            /* Make all elements clickable/touchable on mobile */
            #cv-preview [data-cv-element] {
                pointer-events: auto !important;
                cursor: pointer !important;
                -webkit-tap-highlight-color: rgba(139, 92, 246, 0.3) !important;
                touch-action: manipulation !important; /* Optimize touch */
                position: relative;
                z-index: 1;
            }

            /* Disable pointer events on children EXCEPT nested [data-cv-element] */
            #cv-preview [data-cv-element] *:not([data-cv-element]) {
                pointer-events: none !important;
            }

            /* Ensure nested editable elements are clickable */
            #cv-preview [data-cv-element] [data-cv-element] {
                pointer-events: auto !important;
            }

            /* Inline actions visible and touchable on mobile */
            .inline-actions {
                opacity: 1 !important;
                pointer-events: auto !important;
                z-index: 10 !important;
            }

            .inline-action-btn {
                pointer-events: auto !important;
                touch-action: manipulation !important;
                z-index: 11 !important;
            }

            /* Sections controls - more compact */
            .section-control {
                padding: 0.75rem;
                margin-bottom: 0.5rem;
            }

            /* Form inputs - larger touch targets */
            input:not([type="checkbox"]):not([type="radio"]),
            textarea,
            select {
                font-size: 16px; /* Prevents zoom on iOS */
                padding: 0.75rem;
            }

            /* Buttons - larger touch targets */
            button {
                min-height: 44px;
                padding: 0.75rem 1rem;
            }

            /* Version controls - ultra compact single line on mobile */
            #version-controls {
                padding: 0.375rem 0.5rem;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                display: flex;
                justify-content: center;
            }

            #version-controls > div {
                flex-wrap: nowrap !important;
                gap: 0 !important;
            }

            /* All version buttons - minimal size */
            #version-controls button {
                padding: 0.375rem;
                min-width: 32px;
                width: 32px;
                height: 32px;
                font-size: 0.8rem;
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            /* Version info - no wrapping, smaller font */
            #version-info {
                font-size: 0.625rem !important;
                min-width: unset !important;
                max-width: unset !important;
                white-space: nowrap !important;
                overflow: hidden;
                text-overflow: ellipsis;
                padding: 0 0.125rem;
                flex-shrink: 1;
            }

            /* Hide text labels on New/Delete buttons, keep only icons */
            #new-version-btn span,
            #delete-version-btn span {
                display: none;
            }

            /* Remove margin-right from icons */
            #new-version-btn i,
            #delete-version-btn i {
                margin-right: 0 !important;
            }

            /* Adjust spacing - no margins */
            #new-version-btn {
                margin-left: 0 !important;
            }

            #delete-version-btn {
                margin-left: 0 !important;
            }

            /* Drawers on mobile - full width, slide from right */
            .drawer {
                width: 100% !important;
                max-width: 100% !important;
                top: 48px !important; /* Account for mobile toolbar height */
                right: 0 !important;
                bottom: 0 !important;
                border-left: none !important;
                border-radius: 0 !important;
                z-index: 1001 !important; /* Higher than mobile menu (1000) */
            }

            .drawer.translate-x-full {
                transform: translateX(100%) !important;
                box-shadow: none !important;
            }

            .drawer:not(.translate-x-full) {
                box-shadow: -4px 0 25px rgba(0, 0, 0, 0.15),
                            -8px 0 40px rgba(0, 0, 0, 0.08) !important;
            }

            /* No shadow for settings drawer */
            .drawer-open.settings-drawer-open #settings-drawer:not(.translate-x-full) {
                box-shadow: none !important;
            }

            /* Hide splitters on mobile */
            #settings-drawer-splitter,
            #job-drawer-splitter,
            #interview-drawer-splitter {
                display: none !important;
            }

            /* Add backdrop for bottom modals on mobile - use existing drawer overlay */
            /* Remove duplicate overlay to prevent conflicts */
        }


        /* Desktop drawers - side panel layout */
        @media (min-width: 769px) {
            .drawer {
                top: 0;
                right: 0;
                bottom: 0;
                width: 500px;
                max-width: 90%;
                border-left: 1px solid var(--border-drawer);
                box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
            }

            .drawer.translate-x-full {
                transform: translateX(100%);
                box-shadow: none;
            }

            .drawer:not(.translate-x-full) {
                box-shadow: -4px 0 25px rgba(0, 0, 0, 0.15),
                            -8px 0 40px rgba(0, 0, 0, 0.08);
            }

            #settings-drawer,
            #find-job-drawer,
            #interview-drawer {
                padding-top: 40px !important;
            }
        }

        /* Small mobile devices (< 480px) */
        @media (max-width: 480px) {
            /* Even more compact layout */
            #toolbar {
                padding: 0.375rem 0.75rem;
            }

            #toolbar h1 {
                font-size: 0.75rem;
            }

            /* Properties panel - same 40vh on small screens */
            #left-pane {
                height: 40vh !important;
                max-height: 40vh !important;
            }

            /* CV Preview - smaller scale for tiny screens */
            #cv-preview {
                transform: scale(0.52);
                margin-bottom: -650px;
            }

            /* Version controls - minimal */
            #version-controls button {
                padding: 0.25rem;
                min-width: 28px;
            }

            #version-info {
                font-size: 0.625rem;
            }

            /* Template buttons - icon only on very small screens */
            .template-btn span {
                display: none;
            }

            .template-btn {
                padding: 0.5rem;
            }
        }

        /* Landscape mode on mobile */
        @media (max-height: 500px) and (orientation: landscape) {
            #app-root {
                padding-top: 40px;
            }

            #toolbar {
                padding: 0.25rem 0.5rem;
            }

            #left-pane,
            #right-pane {
                top: 40px;
            }

            #mobile-menu-panel {
                top: 40px;
                height: calc(100vh - 40px);
            }

            #mobile-menu-overlay {
                top: 40px;
            }

            #version-controls,
            #template-controls {
                padding: 0.25rem 0.5rem;
            }
        }
        
        /* Reduce margins for PDF */
        @media print {
            #cv-preview .mb-3 { margin-bottom: 0.5rem !important; }
            #cv-preview .mb-4 { margin-bottom: 0.75rem !important; }
            #cv-preview section { margin-top: 0.75rem !important; }
        }

        /* Adaptive height for preview */
        @media (min-width: 800px) {
            #cv-preview {
                width: 210mm;
                min-width: 210mm;
            }
        }

        /* Styles for printing and PDF */
        @media print {
            #cv-preview {
                box-shadow: none;
                transform: none;
                min-height: auto !important; /* Override min-height for PDF */
            }
            #cv-preview > div {
                min-height: auto !important; /* Override min-height for PDF */
            }
            .page-break {
                page-break-after: always;
                break-after: page;
            }
        }
        
        /* Hide selection and hover states in PDF/print */
        @media print {
            [data-cv-element].cv-element-selected,
            [data-cv-element].cv-element-hover {
                outline: none !important;
                box-shadow: none !important;
                background: transparent !important;
            }
            [data-cv-element].cv-element-hover::before,
            [data-cv-element].cv-element-hover::after {
                display: none !important;
            }
            /* Hide inline action buttons (duplicate/delete) */
            .inline-actions {
                display: none !important;
            }
        }