/* Local left-nav styles so partial looks correct on admin pages too */
:root { --left-nav-width: 260px; }

/* Make the side nav fixed on larger screens so main content flows beside it */
.side {
    background: linear-gradient(180deg,#f6f8ff,#edf2ff);
    border-right: 1px solid #d9e2ff;
    padding: 8px 0;
    box-sizing: border-box;
}

/* Fixed sidebar for desktops to avoid overlap/collisions */
@media (min-width: 900px) {
    .side {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--left-nav-width);
        height: 100vh;
        overflow: auto;
        padding-top: 16px;
        z-index: 1000;
    }

        /* Instead of shifting the entire main element, keep the main full-width and
           add left padding so header backgrounds extend behind the fixed sidebar.
           This avoids a visible vertical gap when the sidebar is fixed. */
        /* Keep main full-width and only use left padding so content stretches across the page */
        main, .main {
            margin-left: 0;
            padding-left: var(--left-nav-width);
            box-sizing: border-box;
            transition: padding-left 240ms ease-in-out;
            width: 100%;
            max-width: 100%;
        }

        /* Keep layout spacing to the .main element only; do not add body padding here. */

        /* When collapsed, make the main content container fill the available width
           minus the collapsed sidebar width so no empty column remains on the right. */
        body.left-collapsed .container,
        body.left-collapsed main .container,
        body.left-collapsed .main .container {
            max-width: none !important;
            width: 100% !important;
            margin-left: 0 !important;
            padding-right: 18px;
            box-sizing: border-box;
        }

        /* Ensure the top header stretches the same width as content when collapsed */
        body.left-collapsed .top {
            width: 100% !important;
        }

/* Ensure page content sits flush with the top and the fixed sidebar.
   Remove extra top padding on the main container and make header panels
   align to the top-left edge next to the sidebar. */

/* Ensure main occupies full available height and has no extra top padding */
main, .main {
    margin-top: 0;
    padding-top: 0 !important;
    box-sizing: border-box;
    width: 100%;
}

.top, .header {
    margin-top: 0;
    /* remove rounded corner on the top-left so it touches the fixed sidebar */
    border-top-left-radius: 0 !important;
}
}

/* On small screens make sidebar flow normally (stacked) */
@media (max-width: 899px) {
    .side { position: relative; width: 100%; height: auto; }
    .shell, main, .main { margin-left: 0; }
}

.brand { padding: 12px 10px; text-align: center; }
.logo { width: 54px; height: 54px; border-radius: 14px; margin: 0 auto 8px; display: grid; place-items: center; color: #fff; font-weight: 800; background: linear-gradient(135deg,#5ba7ff,#2d57d9); }
.nav { margin-top: 8px; }
.nav a { display: block; padding: 12px 14px; text-decoration: none; color: #334155; border-left: 3px solid transparent; font-size: 15px; border-radius: 6px; margin: 4px 8px; }
.nav a.active { background: #1f2741; color: #fff; border-left-color: #ffb020; }
.submenu a { display: block; padding: 8px 14px; text-decoration:none; color:#475569; margin:4px 8px; border-radius:6px }
.submenu a.active { background: rgba(31,39,65,0.08); color: #1f2741; }