/* ========================================
   CUSTOM PUSHABLE SIDENAV STYLES
   ======================================== */

/* Wrapper container for sidenav and content */
.bn-custom-sidenav-wrapper {
    display: flex;
    position: relative;
    overflow-x: hidden;
    height: 100%;
    width: 100%;
}

/* Custom sidenav */
.bn-custom-sidenav {
    position: fixed;
    top: 64px;
    left: -280px;
    width: 280px;
    height: calc(100vh - 64px);
    z-index: 65;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    will-change: left, width;
    background-color: white;
}

/* Content area that gets pushed */
.bn-custom-content-area {
    flex: 1;
    width: 100%;
    margin-left: 0;
    transition: margin-left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    min-width: 0;
    will-change: margin-left;
    height: 100%;
}

/* Desktop normal pages - sidenav always visible and locked open */
@media (min-width: 960px) {
    .bn-custom-sidenav.bn-sidenav-desktop-locked {
        left: 0 !important;
    }

    .bn-custom-sidenav.bn-sidenav-desktop-locked~.bn-custom-content-area {
        margin-left: 280px !important;
    }
}

/* When sidenav is open - for mobile and meeting pages */
.bn-custom-sidenav-wrapper.bn-custom-sidenav-open .bn-custom-sidenav {
    left: 0;
    z-index: 71;
}

/* Mobile/meeting pages - overlay mode (no push) */
@media (max-width: 959px) {
    .bn-custom-sidenav-wrapper.bn-custom-sidenav-open .bn-custom-content-area {
        margin-left: 0 !important;
    }

    .bn-custom-sidenav {
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3);
    }
}

/* Desktop meeting/planning pages - overlay mode */
@media (min-width: 960px) {
    .bn-custom-sidenav-wrapper.bn-in-meeting-mode.bn-custom-sidenav-open .bn-custom-content-area {
        margin-left: 0 !important;
    }

    .bn-custom-sidenav-wrapper.bn-in-meeting-mode .bn-custom-sidenav {
        /* box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3); */
    }
}

/* Push mode for desktop normal pages when toggled */
@media (min-width: 960px) {
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode).bn-custom-sidenav-open .bn-custom-content-area {
        margin-left: 280px;
    }
}

/* Toggle button styling */
.bn-sidenav-toggle-btn {
    background-color: white !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.bn-sidenav-toggle-btn:hover {
    background-color: #f5f5f5 !important;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 599px) {
    .bn-custom-sidenav {
        width: 260px;
        left: -260px;
    }

    .bn-custom-sidenav-wrapper.bn-custom-sidenav-open .bn-custom-sidenav {
        left: 0;
    }

    .bn-custom-sidenav-wrapper.bn-custom-sidenav-open .bn-custom-content-area {
        margin-left: 260px;
    }
}

/* Ensure smooth scrolling */
.bn-custom-sidenav::-webkit-scrollbar {
    width: 6px;
}

.bn-custom-sidenav::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.bn-custom-sidenav::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.bn-custom-sidenav::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Backdrop for overlay mode */
.bn-custom-sidenav-backdrop {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 59;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

/* Show backdrop only in overlay mode when sidenav is open */
.bn-custom-sidenav-wrapper.bn-custom-sidenav-open.bn-in-meeting-mode .bn-custom-sidenav-backdrop {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 959px) {
    .bn-custom-sidenav-wrapper.bn-custom-sidenav-open .bn-custom-sidenav-backdrop {
        opacity: 1;
        visibility: visible;
    }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 599px) {
    .bn-custom-sidenav {
        width: 260px;
        left: -260px;
    }

    .bn-custom-sidenav-wrapper.bn-custom-sidenav-open .bn-custom-sidenav {
        left: 0;
    }
}

/* Ensure smooth scrolling */
.bn-custom-sidenav::-webkit-scrollbar {
    width: 6px;
}

.bn-custom-sidenav::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.bn-custom-sidenav::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.bn-custom-sidenav::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ========================================
   DESKTOP ICON-ONLY COLLAPSED SIDEBAR
   On large screens (≥960px), non-meeting pages:
   sidebar collapses to a narrow icon strip
   instead of hiding off-screen.
   ======================================== */
@media (min-width: 960px) {

    /* Collapsed state: position on-screen at icon-strip width */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav {
        left: 0;
        width: 56px;
    }

    /* Content area is offset by icon-strip width */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-content-area {
        margin-left: 56px;
    }

    /* Expanded/open state: full width */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode).bn-custom-sidenav-open .bn-custom-sidenav {
        left: 0;
        width: 280px;
    }

    /* --- Hide everything except main nav sections --- */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav md-divider,
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-sidebar-help-menu-section {
        display: none !important;
    }

    /* Show teams section container as flex column — manage children individually */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-teams-section-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Hide the teams header row (text + add + sort buttons) in collapsed mode */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-teams-header-row,
    /* Hide other teams header button */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-other-teams-header-row,
    /* Hide the expanded teams list */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-teams-section-container>[ng-if],
    /* Hide other teams expanded list */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-other-teams-list {
        display: none !important;
    }

    /* Hide the regular invite section in collapsed mode (replaced by bn-sidebar-collapsed-teams-section) */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-teams-section-container>div.bn-sidebar-menu-section.bn-margin-l4 {
        display: none !important;
    }

    /* Hide the "Back to meeting" button (md-raised) in collapsed mode */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .md-raised {
        display: none !important;
    }

    /* Hide the mobile-only "New meeting" button row in collapsed mode */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav [hide-gt-xs] {
        display: none !important;
    }

    /* --- Icon-only menu items: hide text labels --- */
    /* Direct <p> children of menu item buttons */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-sidebar-menu-item>p,
    /* <p> nested inside the icon wrapper (e.g. MY_TASKS label) */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-sidebar-menu-item .bn-icon-counter-sidebar-wrapper>p,
    /* The "NEW" badge  */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-sidebar-menu-section>md-button>p {
        display: none !important;
    }

    /* Center-align icon buttons within the collapsed strip */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-sidebar-menu-item {
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        width: 48px !important;
        height: 40px !important;
        margin-left: 4px !important;
        margin-right: 4px !important;
        min-width: unset !important;
    }

    /* Keep the icon wrapper centered; counter badge still visible */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-sidebar-menu-item .bn-icon-counter-sidebar-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Also hide the inner div wrapper for task button (contains icon + text) layout */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-sidebar-menu-item .bn-icon-counter-sidebar-wrapper[layout="row"]>p {
        display: none !important;
    }

    /* --- Bottom menu sections (Tour, Features, Help) --- */
    /* Hide text containers in two-line buttons (tour/features) */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-two-line-button .bn-button-text-container,
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-sidebar-sub-menu-item .bn-button-text-container {
        display: none !important;
    }

    /* Hide text containers in help section buttons */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-button-primary-black-text .bn-button-text-container {
        display: none !important;
    }

    /* Center and size tour/features buttons */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-two-line-button,
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-sidebar-sub-menu-item {
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        width: 48px !important;
        height: 40px !important;
        min-width: unset !important;
        margin-left: 4px !important;
        margin-right: 4px !important;
    }

    /* Stack help section buttons vertically and center them */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-sidebar-help-menu-section {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Center and size help buttons */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-button-primary-black-text {
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        width: 48px !important;
        height: 40px !important;
        min-width: unset !important;
        margin-left: 4px !important;
        margin-right: 4px !important;
        flex: none !important;
    }

    /* Remove left margins from bottom sections */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-margin-l6,
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-margin-l4 {
        margin-left: 0 !important;
    }

    /* --- Standardize all icon sizes and centering --- */
    /* Main menu icons - more specific selectors */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-sidebar-menu-item md-icon.material-symbols-outlined,
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-sidebar-menu-item .bn-icon-counter-sidebar-wrapper>md-icon {
        font-size: 24px !important;
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
    }

    /* Bottom section icons (tour, features, help) */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-two-line-button md-icon,
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-sidebar-sub-menu-item md-icon,
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-button-primary-black-text md-icon {
        font-size: 24px !important;
        width: 24px !important;
        height: 24px !important;
        margin: 0 !important;
    }

    /* Override any margin classes on icons */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav md-icon.bn-margin-x,
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav md-icon.bn-margin-r4,
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav md-icon.bn-margin-l2 {
        margin: 0 !important;
    }

    /* Ensure icon wrapper doesn't interfere */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-icon-counter-sidebar-wrapper {
        width: auto !important;
        min-width: unset !important;
    }

    /* Remove layout attributes from wrapper that interfere with centering */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-icon-counter-sidebar-wrapper[layout] {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Center all icons properly within their containers */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav md-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* =============================================
       COLLAPSED MODE: Separator between Stats and Teams
       ============================================= */

    /* Show the divider between main nav and teams section */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-main-teams-divider {
        display: block !important;
        width: 36px !important;
        min-width: unset !important;
        margin: 6px auto !important;
        border-color: #ddd !important;
    }
}

/* =============================================
   COLLAPSED MODE: Dedicated Teams + Invite icon section
   ============================================= */

/* Hidden by default (expanded mode) */
.bn-sidebar-collapsed-teams-section {
    display: none !important;
}

/* Show only in collapsed desktop mode */
@media (min-width: 960px) {
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-sidebar-collapsed-teams-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: start !important;
        width: 100% !important;
    }

    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-sidebar-collapsed-teams-section .bn-sidebar-menu-item {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        width: 48px !important;
        height: 40px !important;
        min-width: unset !important;
        margin: 2px 4px !important;
    }

    /* =============================================
       COLLAPSED MODE: Hover floating label tooltips
       ============================================= */

    /* Position context */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-sidebar-menu-item,
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-two-line-button,
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-sidebar-sub-menu-item {
        position: relative;
        overflow: visible !important;
    }

    /* Tooltip label for items with direct <p> child (Dashboard, Unpublished, Minutes, Stats, Personal Notes) */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-sidebar-menu-item:hover>p:first-of-type {
        display: block !important;
        position: absolute !important;
        left: 54px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: rgba(50, 50, 50, 0.92) !important;
        color: #fff !important;
        padding: 5px 10px !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
        z-index: 9999 !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        pointer-events: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
        line-height: 1.4 !important;
    }

    /* Tooltip label for items where label is inside icon wrapper (MY_TASKS) */
    .bn-custom-sidenav-wrapper:not(.bn-in-meeting-mode):not(.bn-custom-sidenav-open) .bn-custom-sidenav .bn-sidebar-menu-item:hover .bn-icon-counter-sidebar-wrapper>p:first-of-type {
        display: block !important;
        position: absolute !important;
        left: 54px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: rgba(50, 50, 50, 0.92) !important;
        color: #fff !important;
        padding: 5px 10px !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
        z-index: 9999 !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        pointer-events: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
        line-height: 1.4 !important;
    }
}