/* FabriCalc Responsive Styles */

/* Tablet Styles (768px and down) */
@media (max-width: 768px) {
    .main-container {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "fabric-settings"
            "shape-input"
            "shapes-list"
            "fabric-canvas";
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }

    .header h1 {
        font-size: 2rem;
    }

    .panel {
        padding: var(--spacing-md);
    }

    .input-row {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .shape-type-selector {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .shapes-summary {
        grid-template-columns: 1fr;
    }

    .canvas-controls {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .project-controls,
    .export-controls {
        flex-direction: column;
        gap: var(--spacing-sm);
        width: 100%;
    }

    .export-controls {
        order: 1;
    }

    .project-controls {
        order: 2;
    }

    .zoom-controls {
        order: 3;
    }

    .canvas-info {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }

    .fabric-canvas {
        min-height: 400px;
    }

    .fabric-svg {
        height: 400px;
    }
}

/* Mobile Styles (480px and down) */
@media (max-width: 480px) {
    .main-container {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .header {
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .header h1 {
        font-size: 1.8rem;
    }

    .header .subtitle {
        font-size: 1rem;
    }

    .panel {
        padding: var(--spacing-sm);
    }

    .panel h2 {
        font-size: 1.3rem;
        margin-bottom: var(--spacing-md);
    }

    .input-group label {
        font-size: 0.85rem;
    }

    .input-group input[type="number"],
    .input-group input[type="text"] {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: var(--spacing-md);
    }

    .shape-form {
        padding: var(--spacing-md);
    }

    .add-shape-btn,
    .optimize-btn,
    .clear-btn {
        padding: var(--spacing-md);
        font-size: 0.9rem;
    }

    .save-project-btn,
    .load-project-btn,
    .export-cutting-template-btn,
    .export-material-list-btn,
    .print-cutting-diagram-btn {
        padding: var(--spacing-md);
        font-size: 0.85rem;
        width: 100%;
    }

    .shape-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .shape-actions {
        align-self: flex-end;
    }

    .fabric-canvas {
        min-height: 300px;
    }

    .fabric-svg {
        height: 300px;
    }

    .canvas-controls {
        padding: var(--spacing-sm);
    }

    .zoom-controls {
        order: -1;
    }
}

/* Large Desktop Styles (1200px and up) */
@media (min-width: 1200px) {
    .main-container {
        max-width: 1600px;
        grid-template-columns: 300px 350px 1fr;
        gap: var(--spacing-xl);
    }

    .fabric-canvas {
        min-height: 800px;
    }

    .panel h2 {
        font-size: 1.6rem;
    }
}

/* Extra Large Desktop Styles (1440px and up) */
@media (min-width: 1440px) {
    .main-container {
        grid-template-columns: 350px 400px 1fr;
        padding: var(--spacing-xl);
    }

    .fabric-canvas {
        min-height: 900px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) {
    .add-shape-btn,
    .optimize-btn,
    .clear-btn,
    .save-project-btn,
    .load-project-btn,
    .export-cutting-template-btn,
    .export-material-list-btn,
    .print-cutting-diagram-btn {
        min-height: 44px; /* Apple's recommended touch target */
    }

    .zoom-in-btn,
    .zoom-out-btn {
        width: 44px;
        height: 44px;
    }

    .delete-shape-btn {
        min-height: 36px;
        min-width: 36px;
    }

    .shape-type-selector label {
        padding: var(--spacing-sm);
        margin: -var(--spacing-sm);
    }
}

/* High DPI Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .fabric-svg {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print Styles */
@media print {
    .header,
    .footer,
    .canvas-controls,
    .add-shape-btn,
    .optimize-btn,
    .clear-btn {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .main-container {
        display: block;
        max-width: none;
        padding: 0;
    }

    .panel {
        box-shadow: none;
        border: 1px solid #000;
        margin-bottom: 1rem;
        break-inside: avoid;
    }

    .fabric-canvas {
        page-break-before: always;
    }

    .canvas-container {
        border: 2px solid #000;
    }
}

/* Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --gray-50: #0f172a;
        --gray-100: #1e293b;
        --gray-200: #334155;
        --gray-300: #475569;
        --gray-400: #64748b;
        --gray-500: #94a3b8;
        --gray-600: #cbd5e1;
        --gray-700: #e2e8f0;
        --gray-800: #f1f5f9;
        --gray-900: #f8fafc;
        --white: #1e293b;
    }

    body {
        background-color: var(--gray-50);
        color: var(--gray-700);
    }

    .fabric-area {
        fill: var(--gray-100);
        stroke: var(--gray-400);
    }
}