/**
 * Responsive Design - Media queries and breakpoints
 */

/* Compact mode for small screens or low height */
@media (max-width: 768px) or (max-height: 600px) {
    #controls {
        width: clamp(250px, 95vw, 400px);
        padding: var(--spacing-md) var(--spacing-lg);
        gap: var(--spacing-xs);
        font-size: var(--font-size-sm);
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 10px;
    }
    
    #controls.controls-hidden {
        transform: translateX(-50%) translateY(20px) !important;
    }
    
    #controls.controls-visible {
        transform: translateX(-50%) translateY(0) !important;
    }
    
    .control-group {
        padding: var(--spacing-xs) var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
    }
    
    .control-row {
        gap: var(--spacing-sm);
        min-height: var(--control-height-compact);
    }
    
    .control-label {
        min-width: 60px;
        max-width: 90px;
        font-size: 0.9em;
    }
    
    .value-display {
        min-width: 35px;
        font-size: 0.85em;
    }
    
    input[type="range"]::-webkit-slider-thumb {
        width: var(--slider-thumb-size-compact);
        height: var(--slider-thumb-size-compact);
    }
    
    input[type="range"]::-moz-range-thumb {
        width: var(--slider-thumb-size-compact);
        height: var(--slider-thumb-size-compact);
    }
    
    .toggle-switch {
        width: 36px;
        height: 18px;
    }
    
    .toggle-slider:before {
        height: 12px;
        width: 12px;
    }
    
    input:checked + .toggle-slider:before {
        transform: translateX(18px);
    }
    
    #startBtn,
    #stopBtn {
        padding: 5px 12px;
        font-size: var(--font-size-sm);
    }
}

/* Extra small screens (mobile portrait) */
@media (max-width: 480px) {
    #controls {
        width: clamp(230px, 98vw, 350px);
        padding: var(--spacing-sm) var(--spacing-md);
        max-height: min(90vh, 600px);
    }
    
    .control-row {
        gap: var(--spacing-xs);
    }
    
    .control-label {
        min-width: 50px;
        max-width: 70px;
        font-size: 0.85em;
    }
    
    .control-group-title {
        font-size: 8px;
    }
}

/* Large screens - prevent controls from being too large */
@media (min-width: 1920px) {
    #controls {
        width: 500px;
        font-size: 12px;
    }
    
    .control-group-title {
        font-size: 10px;
    }
}

/* High zoom levels */
@media (min-resolution: 144dpi) {
    #controls {
        backdrop-filter: blur(15px);
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark mode (system preference) */
@media (prefers-color-scheme: dark) {
    /* Already dark by default */
}

/* Print styles */
@media print {
    #controls,
    #startScreen,
    .scale-ruler {
        display: none !important;
    }
    
    body {
        background: white;
    }
    
    #canvas-container {
        width: 100%;
        height: 100%;
    }
}