/* ============================================================================
   IMPROVED LEFT SIDEBAR MENU STYLING
   Modern, clean design matching the reference image
   ============================================================================ */

/* ── Container Improvements ── */
.leftSidebarWrapper {
    padding: 12px 8px !important;
}

.leftSidebar_in {
    background: transparent;
}

/* Remove top padding when logo is present on reels/videos page */
body.reels-page .leftSticky,
body.videos-page .leftSticky {
    padding-top: 0 !important;
}

body.reels-page .i_left_container,
body.videos-page .i_left_container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.reels-page .leftSidebar_in,
body.videos-page .leftSidebar_in {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.reels-page .leftSidebarWrapper,
body.videos-page .leftSidebarWrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ── Sidebar Logo (Small and Compact) ── */
.sidebar-logo-container {
    padding: 0 16px 12px 16px !important;
    margin-bottom: 8px;
    margin-top: 0 !important;
}

/* Remove space above logo on videos/reels page */
body.reels-page .sidebar-logo-container,
body.videos-page .sidebar-logo-container {
    margin-top: -20px !important;
    padding-top: 0 !important;
}

/* Remove padding from wrapper when logo is present */
body.reels-page .leftSidebarWrapper,
body.videos-page .leftSidebarWrapper {
    padding-top: 0 !important;
}

.sidebar-logo-container a {
    display: inline-block;
}

.sidebar-logo {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: contain !important;
    display: block !important;
}

/* ── Menu Item Base Styles ── */
.i_left_menu_box {
    display: flex !important;
    align-items: center;
    padding: 12px 16px !important;
    margin: 4px 0 !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
    position: relative;
    text-decoration: none !important;
    color: #1c1e21 !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    gap: 12px;
}

/* ── Icon Styling ── */
.i_left_menu_box svg,
.i_left_menu_box .svg_icon,
.i_left_menu_box .i_icons {
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0;
    fill: #606770 !important;
    transition: fill 0.2s ease !important;
}

/* ── Text Styling ── */
.i_left_menu_box .m_tit {
    color: #1c1e21 !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    line-height: 1.4;
}

/* ── Hover State ── */
.i_left_menu_box:hover {
    background-color: #f0f2f5 !important;
    transform: none !important;
}

.i_left_menu_box:hover svg,
.i_left_menu_box:hover .svg_icon,
.i_left_menu_box:hover .i_icons {
    fill: #1877f2 !important;
}

.i_left_menu_box:hover .m_tit {
    color: #1877f2 !important;
}

/* ── Active/Selected State ── */
.i_left_menu_box.active,
.i_left_menu_box.selected {
    background-color: #e7f3ff !important;
    position: relative;
}

/* Red accent bar on left for active item */
.i_left_menu_box.active::before,
.i_left_menu_box.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #fe2c55;
    border-radius: 0 4px 4px 0;
}

.i_left_menu_box.active svg,
.i_left_menu_box.selected svg,
.i_left_menu_box.active .svg_icon,
.i_left_menu_box.selected .svg_icon,
.i_left_menu_box.active .i_icons,
.i_left_menu_box.selected .i_icons {
    fill: #1877f2 !important;
}

.i_left_menu_box.active .m_tit,
.i_left_menu_box.selected .m_tit {
    color: #1877f2 !important;
    font-weight: 600 !important;
}

/* ── Special handling for Videos page - Multiple approaches for reliability ── */
/* Approach 1: Using body class */
body.videos-page .leftSidebarWrapper a[href*="videos"] .i_left_menu_box,
body.reels-page .leftSidebarWrapper a[href*="videos"] .i_left_menu_box {
    background-color: #e7f3ff !important;
    position: relative;
}

body.videos-page .leftSidebarWrapper a[href*="videos"] .i_left_menu_box::before,
body.reels-page .leftSidebarWrapper a[href*="videos"] .i_left_menu_box::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #fe2c55;
    border-radius: 0 4px 4px 0;
}

body.videos-page .leftSidebarWrapper a[href*="videos"] .i_left_menu_box svg,
body.reels-page .leftSidebarWrapper a[href*="videos"] .i_left_menu_box svg,
body.videos-page .leftSidebarWrapper a[href*="videos"] .i_left_menu_box .svg_icon,
body.reels-page .leftSidebarWrapper a[href*="videos"] .i_left_menu_box .svg_icon,
body.videos-page .leftSidebarWrapper a[href*="videos"] .i_left_menu_box .i_icons,
body.reels-page .leftSidebarWrapper a[href*="videos"] .i_left_menu_box .i_icons {
    fill: #1877f2 !important;
}

body.videos-page .leftSidebarWrapper a[href*="videos"] .i_left_menu_box .m_tit,
body.reels-page .leftSidebarWrapper a[href*="videos"] .i_left_menu_box .m_tit {
    color: #1877f2 !important;
    font-weight: 600 !important;
}

/* Approach 2: Using :has() selector for modern browsers */
.wrapper:has([data-type="moretrendposts"]) .leftSidebarWrapper a[href*="videos"] .i_left_menu_box,
.wrapper:has([data-type="trendposts"]) .leftSidebarWrapper a[href*="videos"] .i_left_menu_box {
    background-color: #e7f3ff !important;
    position: relative;
}

.wrapper:has([data-type="moretrendposts"]) .leftSidebarWrapper a[href*="videos"] .i_left_menu_box::before,
.wrapper:has([data-type="trendposts"]) .leftSidebarWrapper a[href*="videos"] .i_left_menu_box::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #fe2c55;
    border-radius: 0 4px 4px 0;
}

.wrapper:has([data-type="moretrendposts"]) .leftSidebarWrapper a[href*="videos"] .i_left_menu_box svg,
.wrapper:has([data-type="trendposts"]) .leftSidebarWrapper a[href*="videos"] .i_left_menu_box svg,
.wrapper:has([data-type="moretrendposts"]) .leftSidebarWrapper a[href*="videos"] .i_left_menu_box .svg_icon,
.wrapper:has([data-type="trendposts"]) .leftSidebarWrapper a[href*="videos"] .i_left_menu_box .svg_icon,
.wrapper:has([data-type="moretrendposts"]) .leftSidebarWrapper a[href*="videos"] .i_left_menu_box .i_icons,
.wrapper:has([data-type="trendposts"]) .leftSidebarWrapper a[href*="videos"] .i_left_menu_box .i_icons {
    fill: #1877f2 !important;
}

.wrapper:has([data-type="moretrendposts"]) .leftSidebarWrapper a[href*="videos"] .i_left_menu_box .m_tit,
.wrapper:has([data-type="trendposts"]) .leftSidebarWrapper a[href*="videos"] .i_left_menu_box .m_tit {
    color: #1877f2 !important;
    font-weight: 600 !important;
}

/* ── Profile Avatar in Menu ── */
.i_left_menu_profile_avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #e4e6eb;
}

.i_left_menu_profile_avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* ── Remove Link Underlines ── */
.leftSidebarWrapper a {
    text-decoration: none !important;
}

.leftSidebarWrapper a:hover {
    text-decoration: none !important;
}

/* ── Scrollbar Styling ── */
.leftSidebarWrapper::-webkit-scrollbar {
    width: 6px;
}

.leftSidebarWrapper::-webkit-scrollbar-track {
    background: transparent;
}

.leftSidebarWrapper::-webkit-scrollbar-thumb {
    background: #dadde1;
    border-radius: 3px;
}

.leftSidebarWrapper::-webkit-scrollbar-thumb:hover {
    background: #b0b3b8;
}

/* ── Section Dividers (Optional) ── */
.menu-divider {
    height: 1px;
    background: #e4e6eb;
    margin: 8px 16px;
}

/* ── Sticky Header in Sidebar ── */
.leftSidebarWrapper .sidebar-header {
    padding: 16px;
    margin-bottom: 8px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
}

/* ── Footer Menu Items ── */
.leftSidebarWrapper .footer_container {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e4e6eb;
}

.leftSidebarWrapper .footer_menu_item {
    padding: 4px 16px;
    font-size: 13px;
}

.leftSidebarWrapper .footer_menu_item a {
    color: #8a8d91 !important;
    font-weight: 400 !important;
    transition: color 0.2s ease;
}

.leftSidebarWrapper .footer_menu_item a:hover {
    color: #1877f2 !important;
    text-decoration: none !important;
}

/* ── Mobile Adjustments ── */
@media screen and (max-width: 940px) {
    .i_left_menu_box {
        padding: 10px 12px !important;
        margin: 2px 0 !important;
        border-radius: 10px !important;
        font-size: 14px !important;
    }
    
    .i_left_menu_box svg,
    .i_left_menu_box .svg_icon,
    .i_left_menu_box .i_icons {
        width: 20px !important;
        height: 20px !important;
    }
    
    .i_left_menu_box .m_tit {
        font-size: 14px !important;
    }
}

/* ── Dark Mode Support (Optional) ── */
@media (prefers-color-scheme: dark) {
    .i_left_menu_box {
        color: #e4e6eb !important;
    }
    
    .i_left_menu_box .m_tit {
        color: #e4e6eb !important;
    }
    
    .i_left_menu_box:hover {
        background-color: #3a3b3c !important;
    }
    
    .i_left_menu_box.active,
    .i_left_menu_box.selected {
        background-color: #263951 !important;
    }
}

/* ── Animation on Click ── */
.i_left_menu_box:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* ── Badge/Counter (for notifications, etc.) ── */
.menu-badge {
    background: #fe2c55;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: auto;
    min-width: 20px;
    text-align: center;
}

/* ── Collapsible Menu Groups (Optional) ── */
.menu-group-header {
    padding: 8px 16px;
    color: #65676b;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 12px;
}