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

@media (max-width: 768px) {
    /* Header adjustments */
    .header h1 {
        font-size: 20px;
    }
    
    .header-icon {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
    
    /* Project info - stack vertically on mobile */
    .header .project-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }
    
    .project-info-content {
        width: 100%;
    }
    
    .auto-save-status {
        width: 100%;
        margin-right: 0;
    }
    
    .btn-switch-project {
        width: 100%;
        margin-top: 4px;
    }
    
    /* Keep grid but make canvas take full space */
    .main-content {
        display: flex;
        position: relative;
    }
    
    /* Canvas takes full screen */
    .canvas-area {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        touch-action: none; /* Prevents default touch behaviors */
    }
    
    /* Left sidebar - overlay from left */
    .sidebar {
        position: fixed;
        left: 0;
        top: 150px; /* Below header (adjusted for mobile header height) */
        bottom: 0;
        width: 85%;
        max-width: 350px;
        z-index: 1002;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
        transform: translateX(0); /* Visible by default (when not collapsed) */
        transition: transform 0.3s ease;
    }
    
    .sidebar.collapsed {
        transform: translateX(-100%); /* Hidden when collapsed */
    }
    
    /* Right sidebar - overlay from right */
    .properties-panel {
        position: fixed;
        right: 0;
        top: 150px; /* Below header (adjusted for mobile header height) */
        bottom: 0;
        width: 85%;
        max-width: 320px;
        z-index: 1002;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
        transform: translateX(0); /* Visible by default (when not collapsed) */
        transition: transform 0.3s ease;
    }
    
    .properties-panel.collapsed {
        transform: translateX(100%); /* Hidden when collapsed */
    }
    
    /* Larger tap targets for components */
    .component-symbol {
        width: 80px;
        height: 80px;
    }
    
    .component-info-box {
        font-size: 13px;
        padding: 10px 14px;
        min-width: 200px;
    }
    
    /* Larger buttons */
    .btn {
        padding: 16px 24px;
        font-size: 16px;
        min-height: 48px;
    }
    
    .hamburger-btn {
        padding: 12px 16px;
        font-size: 18px;
        min-width: 48px;
        min-height: 48px;
    }
    
    /* Floating buttons - larger and more visible */
    .floating-toggle-btn {
        padding: 16px 20px;
        font-size: 16px;
        min-height: 52px;
        box-shadow: 0 4px 16px rgba(52, 152, 219, 0.4);
    }
    
    .left-floating {
        left: 15px;
        top: 15px;
    }
    
    .right-floating {
        right: 15px;
        top: 15px;
        display: flex !important; /* Show by default on mobile */
    }
    
    /* Palette buttons - larger */
    .component-palette-btn {
        padding: 16px 12px;
        min-height: 100px;
    }
    
    .component-palette-btn svg {
        width: 50px;
        height: 50px;
    }
    
    .component-palette-btn span {
        font-size: 12px;
    }
    
    /* Form controls - larger */
    .form-control, .property-input, .property-select {
        padding: 14px 16px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }
    
    /* Zoom controls - larger */
    .zoom-btn {
        width: 48px;
        height: 48px;
        padding: 12px;
        font-size: 18px;
    }
    
    .zoom-level {
        font-size: 16px;
        min-width: 60px;
    }
    
    /* Modal adjustments */
    .modal-container {
        min-width: 90%;
        max-width: 90%;
        margin: 20px;
    }
    
    /* Context menu adjustments */
    .context-menu {
        min-width: 200px;
    }
    
    .context-menu-item {
        padding: 14px 20px;
        font-size: 16px;
        min-height: 48px;
    }
    
    /* Replace modal - single column on mobile */
    .replace-type-grid {
        grid-template-columns: 1fr;
    }
    
    .replace-type-option {
        padding: 16px 20px;
        min-height: 56px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .sidebar, .properties-panel {
        width: 95%;
    }
    
    .floating-toggle-btn {
        padding: 12px 16px;
        min-width: auto;
    }
    
    .floating-btn-text {
        display: none; /* Hide text, show only icon */
    }
}