/* ============================================
   FLUID RESPONSIVE BOUNDARIES
   ============================================ */

:root {
    /* Breakpoints in rem (not px) */
    --breakpoint-xs: 0;
    --breakpoint-sm: 36rem; /* 576px */
    --breakpoint-md: 48rem; /* 768px */
    --breakpoint-lg: 62rem; /* 992px */
    --breakpoint-xl: 75rem; /* 1200px */
    --breakpoint-xxl: 87.5rem; /* 1400px */
    /* Viewport-aware calculations */
    --viewport-width: 100vw;
    --viewport-height: 100vh;
    /* Safe viewport units (mobile-aware) */
    --viewport-width-safe: 100dvw;
    --viewport-height-safe: 100dvh;
}

/* Container Query Units Setup */
.page-container {
    container-type: inline-size;
    container-name: page;
}

.module-content {
    container-type: inline-size;
    container-name: module;
}

/* Fluid Container Widths */
@container page (min-width: 36rem) {
    .container-fluid {
        --container-padding: var(--space-4);
    }
}

@container page (min-width: 48rem) {
    .container-fluid {
        --container-padding: var(--space-5);
    }
}

@container page (min-width: 62rem) {
    .container-fluid {
        --container-padding: var(--space-6);
    }
}

/* Dynamic Layout Regions */
:root {
    /* Calculate available space */
    --available-height: calc( var(--viewport-height-safe, var(--viewport-height)) - var(--height-header-fluid) - var(--height-footer, 0rem) );
    --available-width: calc( var(--viewport-width-safe, var(--viewport-width)) - var(--sidebar-left-offset, 0rem) - var(--sidebar-right-offset, 0rem) );
}

/* Sidebar State Modifiers */
[data-sidebar-left="expanded"] {
    --sidebar-left-offset: var(--width-sidebar-left);
}

[data-sidebar-left="collapsed"] {
    --sidebar-left-offset: var(--width-sidebar-collapsed);
}

[data-sidebar-right="expanded"] {
    --sidebar-right-offset: var(--width-sidebar-right);
}