/* ================================================================
   ENSC Sidebar Collapse — sidebar-collapse.css
   ================================================================ */

/* ── Variables ─────────────────────────────────────────────────── */
:root {
    --ensc-width-open:       270px;
    --ensc-width-closed:      58px;
    --ensc-ease:             0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --ensc-btn-size:          26px;
    --ensc-btn-bg:           #2a3340;
    --ensc-btn-hover:        #3a4555;
    --ensc-btn-border:       #4a5568;
    --ensc-btn-color:        #a0aec0;
    --ensc-btn-hover-color:  #e2e8f0;
}

/* ── LEFT SIDEBAR — DESKTOP ────────────────────────────────────── */
#fcom_sidebar_wrap, .fcom_sidebar_wrap {
    width: var(--ensc-width-open) !important;
    min-width: var(--ensc-width-open) !important;
    max-width: var(--ensc-width-open) !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    transition: width var(--ensc-ease), min-width var(--ensc-ease), max-width var(--ensc-ease) !important;
}

body.ensc-collapsed #fcom_sidebar_wrap,
body.ensc-collapsed .fcom_sidebar_wrap {
    width: var(--ensc-width-closed) !important;
    min-width: var(--ensc-width-closed) !important;
    max-width: var(--ensc-width-closed) !important;
}

body.ensc-collapsed #fluent_community_sidebar_menu.space_contents {
    width: var(--ensc-width-closed) !important;
    min-width: var(--ensc-width-closed) !important;
}

.fcom_menu_link.space_menu_item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    overflow: hidden;
    transition: padding var(--ensc-ease), gap var(--ensc-ease);
    position: relative;
}

body.ensc-collapsed .fcom_menu_link.space_menu_item {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0 !important;
}

.fcom_emoji { flex-shrink: 0; font-size: 1.15rem; line-height: 1; display: inline-block !important; }

.community_name {
    opacity: 1; max-width: 300px; overflow: hidden; white-space: nowrap;
    display: inline-block; transition: opacity var(--ensc-ease), max-width var(--ensc-ease);
}
body.ensc-collapsed .fcom_menu_link.space_menu_item .community_name {
    opacity: 0 !important; max-width: 0 !important;
}
.community_avatar { flex-shrink: 0 !important; display: flex !important; opacity: 1 !important; }

.fcom_space_group_header, .fcom_group_title {
    overflow: hidden; white-space: nowrap; transition: padding var(--ensc-ease);
    display: flex !important; align-items: center; gap: 6px;
}
body.ensc-collapsed .fcom_space_group_header,
body.ensc-collapsed .fcom_group_title {
    justify-content: center !important; padding-left: 0 !important; padding-right: 0 !important; gap: 0 !important;
}

.space_section_title {
    display: inline-block; overflow: hidden; white-space: nowrap;
    transition: opacity var(--ensc-ease), max-width var(--ensc-ease); opacity: 1; max-width: 200px;
}
body.ensc-collapsed .space_section_title { opacity: 0 !important; max-width: 0 !important; }

body.ensc-collapsed .fcom_space_group_header .community_avatar,
body.ensc-collapsed .fcom_group_title .community_avatar {
    display: flex !important; opacity: 1 !important; max-width: none !important; flex-shrink: 0;
}

.fcom_side_footer { transition: opacity var(--ensc-ease), max-height var(--ensc-ease); overflow: hidden; }
body.ensc-collapsed .fcom_side_footer {
    opacity: 0 !important; max-height: 0 !important; padding: 0 !important; margin: 0 !important;
}

/* ── LEFT SIDEBAR TOGGLE BUTTON ────────────────────────────────── */
#ensc-toggle-btn {
    position: fixed; top: 50%; transform: translateY(-50%); z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    width: var(--ensc-btn-size); height: var(--ensc-btn-size);
    border-radius: 50%; border: 1px solid var(--ensc-btn-border);
    background: var(--ensc-btn-bg); color: var(--ensc-btn-color);
    cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.5);
    transition: left var(--ensc-ease), background var(--ensc-ease), color var(--ensc-ease);
    left: calc(var(--ensc-width-open) - calc(var(--ensc-btn-size) / 2));
}
body.ensc-collapsed #ensc-toggle-btn {
    left: calc(var(--ensc-width-closed) - calc(var(--ensc-btn-size) / 2));
}
#ensc-toggle-btn:hover { background: var(--ensc-btn-hover); color: var(--ensc-btn-hover-color); box-shadow: 0 4px 14px rgba(0,0,0,.65); }
#ensc-toggle-btn svg {
    width: 13px; height: 13px; transition: transform var(--ensc-ease);
    fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
body.ensc-collapsed #ensc-toggle-btn svg { transform: rotate(180deg); }

body.ensc-collapsed .fcom_menu_link.space_menu_item[data-ensc-label] { position: relative; }
body.ensc-collapsed .fcom_menu_link.space_menu_item[data-ensc-label]:hover::after {
    content: attr(data-ensc-label); position: fixed;
    left: calc(var(--ensc-width-closed) + 10px);
    background: #1a2332; color: #e2e8f0; font-size: 0.78rem; font-weight: 500;
    padding: 5px 12px; border-radius: 6px; white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0,0,0,.55); pointer-events: none; z-index: 100000;
}

/* ── LEFT SIDEBAR — MOBILE (off-canvas) ────────────────────────── */
@media (max-width: 768px) {

    /* Sidebar slides in from left; hidden by default */
    #fcom_sidebar_wrap, .fcom_sidebar_wrap {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        z-index: 99998 !important;
        width: var(--ensc-width-open) !important;
        min-width: var(--ensc-width-open) !important;
        max-width: var(--ensc-width-open) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: translateX(-100%) !important;
        transition: transform var(--ensc-ease) !important;
        box-shadow: none !important;

        /* Prevent sidebar from taking up space in the flex layout */
        flex: 0 0 0px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Remove reserved space for sidebar in the flex parent */
    .fhr_wrap {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* Main content takes full width since sidebar is out of flow */
    .fhr_content,
    .feed_layout,
    #fluent_com_portal,
    .fcom_single_layout,
    .feeds_main,
    .no_bg_layout {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    /* Visible when explicitly opened on mobile */
    body.ensc-mobile-open #fcom_sidebar_wrap,
    body.ensc-mobile-open .fcom_sidebar_wrap {
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.35) !important;
    }

    /* Dim overlay behind open sidebar */
    body.ensc-mobile-open::before {
        content: '' !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 99997 !important;
        pointer-events: auto !important;
    }

    /* Toggle button: fixed top-left hamburger */
    #ensc-toggle-btn {
        position: fixed !important;
        top: 14px !important;
        left: 14px !important;
        transform: none !important;
        z-index: 99999 !important;
        transition: left var(--ensc-ease) !important;
    }

    body.ensc-mobile-open #ensc-toggle-btn {
        left: calc(var(--ensc-width-open) + 6px) !important;
    }

    /* Full labels always visible inside mobile sidebar */
    body.ensc-collapsed .community_name,
    body.ensc-collapsed .space_section_title {
        opacity: 1 !important;
        max-width: 300px !important;
    }
    body.ensc-collapsed .fcom_menu_link.space_menu_item {
        justify-content: flex-start !important;
        padding-left: revert !important;
        padding-right: revert !important;
        gap: 10px !important;
    }
    body.ensc-collapsed .fcom_space_group_header,
    body.ensc-collapsed .fcom_group_title {
        justify-content: flex-start !important;
        padding-left: revert !important;
        padding-right: revert !important;
        gap: 6px !important;
    }
}

/* ================================================================
   RIGHT SIDEBAR
   ================================================================ */

:root {
    --ensc-right-width: 306px;
    --ensc-right-ease:  0.45s cubic-bezier(0.4, 0, 0.2, 1);
    --ensc-right-tab:   32px;
}

/* Right sidebar — never clip, no height cap when open */
.el-aside.fcom_resp_side {
    width: var(--ensc-right-width) !important;
    min-width: var(--ensc-right-width) !important;
    max-width: var(--ensc-right-width) !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    max-height: none !important;
    transition: max-height var(--ensc-right-ease) !important;
    position: relative !important;
    align-self: flex-start !important;
    display: block !important;
}

/* Only clip when actually collapsed */
body.ensc-right-collapsed .el-aside.fcom_resp_side {
    overflow: hidden !important;
    max-height: var(--ensc-right-tab) !important;
}

.el-aside.fcom_resp_side .fcom_main_side_wrap {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity var(--ensc-right-ease), transform var(--ensc-right-ease) !important;
    padding-top: var(--ensc-right-tab) !important;
}

body.ensc-right-collapsed .el-aside.fcom_resp_side .fcom_main_side_wrap {
    opacity: 0 !important;
    transform: translateY(-12px) !important;
}

#ensc-right-toggle {
    position: absolute !important;
    top: 6px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    height: 20px !important;
    width: auto !important;
    padding: 0 10px !important;
    border-radius: 20px !important;
    border: none !important;
    background: transparent !important;
    color: var(--fcom-primary-text) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    opacity: 0.18 !important;
    transition: opacity 0.2s !important;
    box-shadow: none !important;
    z-index: 10 !important;
    white-space: nowrap !important;
}

#ensc-right-toggle:hover {
    opacity: 0.5 !important;
}

#ensc-right-toggle svg {
    width: 14px !important;
    height: 14px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    transition: transform var(--ensc-right-ease) !important;
    transform: rotate(0deg) !important;
}

body:not(.ensc-right-collapsed) #ensc-right-toggle svg {
    transform: rotate(180deg) !important;
}