/* =========================
   SIDEBAR BASE
========================= */

.fluent-sidebar {
    width: 240px;
    flex-shrink: 0;

    background: var(--ms-color-bg-canvas);
    border-right: 1px solid var(--ms-color-border-subtle);

    display: flex;
    flex-direction: column;

    transition: width 0.2s ease;
}

/* =========================
   CONTENT
========================= */

.fluent-sidebar-content {
    flex: 1;
    overflow-y: auto;

    padding: var(--ms-space-sm) 0;
}

/* =========================
   COLLAPSED (DESKTOP)
========================= */

.fluent-sidebar.is-collapsed {
    width: 56px; /* icon only */
}

/* =========================
   MOBILE (HIDDEN DEFAULT)
========================= */

@media (max-width: 768px) {
    .fluent-sidebar {
        position: fixed;
        top: 0;
        left: 0;

        width: 100%;
        height: 100vh;

        transform: translateX(-100%);
        z-index: var(--ms-z-sticky);

        transition: transform 0.25s ease;
        will-change: transform;
    }

    .fluent-sidebar.is-open {
        transform: translateX(0);
    }
}

/* =========================
   OVERLAY
========================= */

.fluent-sidebar-overlay {
    position: fixed;
    inset: 0;

    background: var(--ms-color-scrim);

    opacity: 0;
    visibility: hidden;

    transition: opacity var(--ms-motion-base) var(--ms-ease);

    z-index: calc(var(--ms-z-sticky) - 1);
}

.fluent-sidebar-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* =========================
   SUBMENU STATE
========================= */

.fluent-submenu.is-open {
    display: flex;
}