/* Layout styles for overall page structure */

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: 'Arial', 'Helvetica', sans-serif;
    background: var(--dulux-light, #F5F7FA);
    color: var(--dulux-text, #333333);
    line-height: 1.6;
}

.main-layout {
    display: flex;
    width: 100%;
    min-height: calc(100vh - 80px);
    /* Updated to match new header height */
}

.header-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    height: 80px;
    overflow: visible;
}

.content-container {
    display: flex;
    width: 100%;
}

.content-with-sidebar {
    flex: 1 1 auto;
    box-sizing: border-box;
    padding: 20px;
    margin-left: 250px;
    width: calc(100% - 250px);
    max-width: calc(100% - 250px);
    /* Width of sidebar */
    margin-top: 80px;
    /* Updated to match new header height */
    transition: margin-left 0.3s ease, width 0.3s ease, max-width 0.3s ease;
}

/* Desktop collapsed — body class set by Sidebar for reliable cascade */
body.sidebar-collapsed .content-with-sidebar {
    margin-left: 60px;
    width: calc(100% - 60px);
    max-width: calc(100% - 60px);
}

/* Let page roots use the freed horizontal space */
body.sidebar-collapsed .content-with-sidebar > * {
    max-width: none;
}

/* Shrink logo slot so dropdowns sit next to the logo (current collapsed position) */
body.sidebar-collapsed .header-logo {
    flex-basis: auto;
    width: auto;
    margin-right: 0;
}

/* Sidebar positioning removed - styling moved to sidebar.css */

/* Responsive adjustments for content and header */
@media (max-width: 992px) {
    .content-with-sidebar {
        margin-left: 200px;
        width: calc(100% - 200px);
        max-width: calc(100% - 200px);
    }

    body.sidebar-collapsed .content-with-sidebar {
        margin-left: 60px;
        width: calc(100% - 60px);
        max-width: calc(100% - 60px);
    }
}

@media (max-width: 768px) {
    .content-with-sidebar {
        margin-left: 60px;
        width: calc(100% - 60px);
        max-width: calc(100% - 60px);
    }
}

@media (max-width: 576px) {
    .content-with-sidebar {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .content-with-sidebar {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
    }
}