/**
 * Enhanced Resolution Scaling Styles
 * 
 * This stylesheet defines comprehensive scaling rules for different screen resolutions
 * to ensure that modules and content are appropriately sized for
 * 720p, 1080p, 4K, and ultra-wide displays.
 */

/* CSS Custom Properties for resolution scaling */
:root {
    --scale-factor: 1;
    --font-scale: 1;
    --spacing-scale: 1;
    --border-scale: 1;
}

/* Base styles for all resolutions */
body {
    font-size: calc(16px * var(--font-scale));
    line-height: 1.5;
    transform-origin: top left;
}

/* 720p or lower resolution scaling */
body.resolution-720p {
    --scale-factor: 0.85;
    --font-scale: 0.9;
    --spacing-scale: 0.85;
    --border-scale: 0.8;
}

/* 1080p resolution scaling (baseline) */
body.resolution-1080p {
    --scale-factor: 1.0;
    --font-scale: 1.0;
    --spacing-scale: 1.0;
    --border-scale: 1.0;
}

/* 4K resolution scaling - Enhanced for better visibility */
body.resolution-4k {
    --scale-factor: 1.0;
    --font-scale: 3.0;
    --spacing-scale: 1.8;
    --border-scale: 1.5;
}

/* Ultra 4K (8K+) resolution scaling */
body.resolution-ultra-4k {
    --scale-factor: 1.0;
    --font-scale: 4.0;
    --spacing-scale: 2.2;
    --border-scale: 2.0;
}

/* Enhanced text scaling within modules */
body.resolution-720p .module * {
    font-size: clamp(0.75rem, 1.8vw, 1.1rem);
}

body.resolution-1080p .module * {
    font-size: clamp(0.9rem, 2vw, 1.3rem);
}

body.resolution-4k .module * {
    font-size: clamp(1.6rem, 2.5vw, 2.8rem);
}

body.resolution-ultra-4k .module * {
    font-size: clamp(2.2rem, 3vw, 3.8rem);
}

/* Scale UI controls and buttons appropriately */
body.resolution-4k .module__controls,
body.resolution-4k .button,
body.resolution-4k .indicator {
    transform: scale(calc(var(--scale-factor) * 0.7));
    transform-origin: center;
}

body.resolution-ultra-4k .module__controls,
body.resolution-ultra-4k .button,
body.resolution-ultra-4k .indicator {
    transform: scale(calc(var(--scale-factor) * 0.6));
    transform-origin: center;
}

/* Scale module headers properly */
body.resolution-4k .module__header {
    padding: calc(var(--spacing-sm) * var(--spacing-scale)) calc(var(--spacing-md) * var(--spacing-scale));
}

body.resolution-4k .module__title {
    font-size: calc(var(--font-size-md) * var(--font-scale));
}

body.resolution-ultra-4k .module__header {
    padding: calc(var(--spacing-sm) * var(--spacing-scale)) calc(var(--spacing-md) * var(--spacing-scale));
}

body.resolution-ultra-4k .module__title {
    font-size: calc(var(--font-size-md) * var(--font-scale));
}

/* Ensure proper minimum sizes for scaled modules */
body.resolution-4k .module {
    min-width: calc(300px * var(--scale-factor));
    min-height: calc(200px * var(--scale-factor));
}

body.resolution-ultra-4k .module {
    min-width: calc(300px * var(--scale-factor));
    min-height: calc(200px * var(--scale-factor));
}

/* Scale resize handles appropriately */
body.resolution-4k .module::after {
    width: calc(20px * var(--scale-factor));
    height: calc(20px * var(--scale-factor));
}

body.resolution-ultra-4k .module::after {
    width: calc(20px * var(--scale-factor));
    height: calc(20px * var(--scale-factor));
}

/* Responsive viewport adjustments */
@media (min-width: 3840px) and (min-height: 2160px) {
    /* 4K specific adjustments */
    body.resolution-4k {
        zoom: 1.0; /* Fallback zoom for browsers that support it */
    }
}

@media (min-width: 7680px) and (min-height: 4320px) {
    /* 8K specific adjustments */
    body.resolution-ultra-4k {
        zoom: 1.0;
    }
}

/* Print compatibility - reset scaling */
@media print {
    body {
        --scale-factor: 1 !important;
        --font-scale: 1 !important;
        --spacing-scale: 1 !important;
        --border-scale: 1 !important;
        font-size: 12pt !important;
    }
    
    .module {
        transform: none !important;
    }
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .module {
        transition: none !important;
    }
}