/**
 * Flexible Container Width Override
 * Date: August 17, 2025
 * 
 * Purpose: Override Bootstrap's rigid max-width constraints to better utilize screen space
 * while maintaining pleasant margins and preserving all existing functionality.
 * 
 * CRITICAL: This file carefully overrides ONLY the max-width property to avoid
 * disrupting zoom, drag & drop, fixed header, dark mode, or any other features.
 */

/* ============================================
   FLEXIBLE CONTAINER WIDTH
   ============================================ */

/**
 * Override Bootstrap's container max-width with flexible sizing
 * Bootstrap 5.3.5 defaults:
 * - xl (≥1200px): max-width: 1140px
 * - xxl (≥1400px): max-width: 1320px
 * 
 * Our approach: Use 95% of viewport width with a reasonable maximum
 * This provides breathing room while utilizing screen space efficiently
 */

/* Main container override - applies to dashboard and other pages (NOT home) */
body:not(.landing-page-active) .container {
    /* Override the problematic 70% width from base.css */
    width: 100% !important;
    /* Use 95% of viewport width, but cap at 1800px for ultra-wide screens */
    max-width: min(1800px, 95vw) !important;
    /* Preserve Bootstrap's auto margins for centering */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Specific override for the with-fixed-header container */
.container.with-fixed-header {
    /* Override the 70% width */
    width: 100% !important;
    /* Same flexible width */
    max-width: min(1800px, 95vw) !important;
    /* Preserve existing padding-top and transform-origin from fixed-header.css */
    /* These are already set in fixed-header.css, so we don't touch them */
}

/* Nested container safety rule (in case any remain elsewhere) */
.container .container {
    /* Remove max-width from nested containers to prevent double-constraining */
    max-width: none !important;
    /* Also remove the width percentage that was set in base.css */
    width: 100% !important;
    /* Remove horizontal padding from nested container */
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Keep margins at 0 to prevent additional spacing */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Tablet and smaller screens - more aggressive width usage */
@media (max-width: 1200px) {
    body:not(.landing-page-active) .container {
        width: 100% !important;
        /* Use 97% on smaller screens where space is premium */
        max-width: 97vw !important;
    }
    
    .container.with-fixed-header {
        width: 100% !important;
        max-width: 97vw !important;
    }
}

/* Mobile screens - nearly full width */
@media (max-width: 768px) {
    body:not(.landing-page-active) .container {
        width: 100% !important;
        /* Use 98% on mobile for maximum space utilization */
        max-width: 98vw !important;
        /* Reduce padding on mobile */
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .container.with-fixed-header {
        width: 100% !important;
        max-width: 98vw !important;
    }
}

/* ============================================
   ZOOM COMPATIBILITY
   ============================================ */

/**
 * The container scaling happens via transform in the dashboard
 * Our max-width changes work seamlessly with this because:
 * 1. Transform scale is applied after layout calculation
 * 2. The percentage-based width scales proportionally
 * 3. Transform-origin is preserved from fixed-header.css
 */

/* ============================================
   DARK MODE COMPATIBILITY
   ============================================ */

/* Ensure our changes don't interfere with dark mode backgrounds */
[data-theme="dark"] body:not(.landing-page-active) .container {
    /* Dark mode background colors are preserved from dark-mode-fix.css */
    /* We only touch max-width, nothing else */
}

/* ============================================
   HOME PAGE EXCLUSION
   ============================================ */

/* The home page has special container handling via landing.css */
/* The body.landing-page-active selector ensures we don't affect it */

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .container {
        /* Reset to full width for printing */
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ============================================
   FEATURE PRESERVATION NOTES
   ============================================ */

/*
 * This CSS file preserves:
 * ✅ Zoom functionality - transform scale unaffected
 * ✅ Fixed header - positioning and spacing maintained
 * ✅ Drag & drop - DOM structure unchanged
 * ✅ Dark mode - only max-width modified
 * ✅ Visual containers - internal layout unaffected
 * ✅ Nested kanban - container children unchanged
 * ✅ Search functionality - layout independent
 * ✅ Theme toggle - styling preserved
 * ✅ Mobile responsiveness - enhanced with better widths
 * ✅ Calendar integration - backend feature unaffected
 * ✅ Voice system - UI independent of container width
 * 
 * The only changes are:
 * - max-width from fixed pixels to viewport-based
 * - Nested container constraints removed
 * - More efficient screen space utilization
 */