/* ========================================
   GLOBAL LAYOUT POSITIONING RULES
   These MUST be in a global CSS file to work in Release mode
   Scoped CSS doesn't support :has() and body class selectors
   ======================================== */

/* ✅ DEFAULT: Header positioned for OPEN sidebar (sidebar-open class on body) */
body.sidebar-open .header-bar {
    left: var(--BEC-dashboard-sidebar-width) !important;
    width: calc(100% - var(--BEC-dashboard-sidebar-width)) !important;
    transition: left var(--BEC-durationNormal) var(--BEC-curveEasyEase),
                width var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

/* ✅ Header positioned for CLOSED sidebar (no sidebar-open class) */
body:not(.sidebar-open) .header-bar {
    left: 0 !important;
    width: 100% !important;
    transition: left var(--BEC-durationNormal) var(--BEC-curveEasyEase),
                width var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

/* ✅ Main content adjusts when sidebar is open */
body.sidebar-open .main-content {
    margin-left: var(--BEC-dashboard-sidebar-width) !important;
    width: calc(100% - var(--BEC-dashboard-sidebar-width)) !important;
    transition: margin-left var(--BEC-durationNormal) var(--BEC-curveEasyEase),
                width var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

/* ✅ Main content full width when sidebar is closed */
body:not(.sidebar-open) .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    transition: margin-left var(--BEC-durationNormal) var(--BEC-curveEasyEase),
                width var(--BEC-durationNormal) var(--BEC-curveEasyEase);
}

/* ✅ Mobile: Header always full width (sidebar overlays) */
@media (max-width: calc(var(--BEC-breakpointExtraLarge) - 1px)) {
    .header-bar {
        left: 0 !important;
        width: 100% !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* ✅ Ensure header is always visible and positioned correctly */
.header-bar {
    position: fixed !important;
    top: 0 !important;
    z-index: 1001 !important;
    /* Default positioning - will be overridden by body classes above */
    left: var(--BEC-dashboard-sidebar-width);
    width: calc(100% - var(--BEC-dashboard-sidebar-width));
}

/* ✅ Syncfusion sidebar visibility detection (fallback) */
.e-sidebar.e-open ~ .header-bar {
    left: var(--BEC-dashboard-sidebar-width) !important;
    width: calc(100% - var(--BEC-dashboard-sidebar-width)) !important;
}

.e-sidebar:not(.e-open) ~ .header-bar {
    left: 0 !important;
    width: 100% !important;
}