@import "../../../../abstracts/abstracts";

// Variables
$sidebar-background-color: $color-layer-2;
$border-color: $global-border-color;
$background-color-collapse-button: $dbqft-list-collapse-button-background-color;

// Navigation Styling starts here
.dbq-left-column { 
    float: left;
    z-index: 2;
    margin: 0;
    flex-shrink: 0;
    width: 320px;
    height: 100vh;
    position: relative;
    background: $sidebar-background-color;
    border-right: 1px solid $border-color;

    .dbq-folder-tree-container {      
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        border: none;
        position: relative;
        overflow: visible;

        .dbqft-list-header {
            height: 60px;
            margin-top: 15px;
            margin-bottom: 15px;
            flex-shrink: 0;
            position: relative;

            .navbar-brand {
                height: 60px;
                width: 220px;
                display: block;
                margin-left: 15px;

                // Set the customer Logo
                @if ($navbar-logo-img != false) {
                    background: $navbar-logo-img no-repeat center center;
                    background-size: contain;
                    background-position-x: left;
        
                    svg {
                        display: none;
                    }
                }

                svg {
                    width: auto;
                    height: auto;
                    max-width: 260px;
                    max-height: 60px;
                }

            }
            .dbqft-list-collapse-button {
                position: absolute;
                right: -15px;
                top: 0;

                button {
                    @include list-collapse-button;
                }
                // button {
                //     background: $background-color-collapse-button;
                //     color: transparent;
                //     border: none;
                //     padding: 0;
                //     cursor: pointer;
                //     width: 30px;
                //     height: 30px;
                //     outline: 0;
                //     border-radius: 50%;
                //     transition: all 0.5s ease;
                //     box-shadow: 0px 0px 5px 0px rgba(127, 127, 127, 0.4);

                //     svg {
                //         fill: $text-color-default;
                //         vertical-align: middle;
                //     }

                //     &:hover {
                //         background: $text-color-inverse;
                //     }
                // }
                
            }
        }

        .dbqft-navigation-button {
            border-radius: 15px;
            height: 49.22px;
            position: relative;
            background-color: transparent;
            cursor: pointer;
            margin: 0 25px 0 13px;
            padding: 12px 5px 12px 17px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            display: flex;
            align-items: center;

            svg {
                fill: $dbqft-list-item-color;
                display: inline-block;
                margin: auto 8px auto 0;
            }

            .dbqft-navigation-button-title {
                color: $dbqft-list-item-color;
                font-family: $font-family-default;
                font-size: 14px;
                font-weight: 600;
                max-width: 220px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            &:hover {
                box-shadow: 0px 0px 5px 0px rgba(127, 127, 127, 0.5);
                background-color: $dbqft-list-item-hover-background-color;
                .dbqft-navigation-button-title {
                    color: $dbqft-list-item-color;
                }
                svg {
                    fill: $dbqft-list-item-color;
                }
            }
        }

        .dbqft-lists {
            padding: $global-padding 25px 0 $global-padding;
            height: 100%;
            overflow-y: hidden;
            backdrop-filter: unset;
            @include custom-scrollbar(false, 'small');

            .dbqft-list {
                list-style-type: none;
                margin: 0;
                padding: 0 0 10px 0;

                .dbqft-list-title {
                    display: none;
                }

                .dbqft-list-item {
                    width: 100%;
                    position: relative;
                    overflow: unset;
                    background-color: transparent;
                    cursor: pointer;
    
                    .dbqft-list-items {
                        list-style-type: none;
                        border-left: 1px solid $border-color;
                        margin-left: 26px;
                        padding-left: 15px;

                        .dbqft-folder-wrapper {
                            .dbqft-folder-image {
                                display: none;
                            }
                            .dbqft-folder-name {
                                margin-left: 10px;
                            }
                        }
                    }
    
                    .dbqft-folder-wrapper {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 6px;
                        position: relative;

                        background-color: transparent;
                        border-radius: 15px;
                        width: inherit;
                        height: inherit;
                        display: flex;
                        align-items: center;
                        overflow: visible; // Changed to visible to prevent the badge shadow from being clipped
                        padding: 8px 0px;

                        .dbqft-folder-content {
                            display: flex;
                            align-items: center;
                            gap: 10px;
                        }
                        
                        .dbqft-folder-image,
                        .dbqft-folder-expander {
                            margin-right: 5px;
                            svg {
                                fill: $dbqft-list-item-color;
                            }
                        }

                        .dbqft-folder-image {
                            width: 20px;
                            height: 20px;
                            margin-left: 12px;
                            margin-right: 12px;
                            position: relative;

                            svg {
                                width: 20px;
                                max-width: 24px;
                                max-height: 18px;
                                display: inline-block;
                                position: absolute;
                                top: 50%;
                                -webkit-transform: translateY(-50%);
                                -ms-transform: translateY(-50%);
                                transform: translateY(-50%);
                                left: 0;
                                right: 0;
                                margin: auto;
                                text-align: center; 

                                .dbq-icon-color-2 {
                                    fill: unset;
                                }
                            }
                        }

                        .dbqft-folder-name {
                            color: $dbqft-list-item-color;
                            font-family: $font-family-default;
                            font-size: 14px;
                            font-weight: 400;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            max-width: 220px;
                            overflow: hidden;
                            padding: 4px 5px;
                            border-radius: 3px;
                        }

                        .dbqft-folder-actions {
                            display: flex;
                            align-items: center;

                            .dbqft-folder-counter {
                                display: inline-flex;
                                margin-right: 5px;
                                @include alert-badge;
                            }
        
                            .dbqft-folder-expander {
                                display: none;

                                svg {
                                    max-width: 24px;
                                }
                            }
                        }
                          
                        &:hover {
                            //box-shadow: 0px 0px 5px 0px rgba(127, 127, 127, 0.2);
                            background-color: $sidebar-tile-background-hover;

                            .dbqft-folder-name {
                                color: $text-color-default;
                                font-weight: $font-weight-bold;
                                //background: $color-gray-lightest;
                            }
                            .dbqft-folder-image,
                            .dbqft-folder-expander {
                                svg {
                                    fill: $dbqft-list-item-color;
                                }
                            }
                        }
                    }
    
                    // Active styling
                    &.dbqft-active {
                        > .dbqft-folder-wrapper {
                            //box-shadow: 0px 0px 5px 0px rgba(127, 127, 127, 0.2);
                            //background-color: $dbqft-list-item-active-background-color;
                            background: color(subtle);
                            background: color(primary-tone, 90);

                            .dbqft-folder-name {
                                color: $color-primary;
                                font-weight: $font-weight-bold;
                            }
                            .dbqft-folder-image,
                            .dbqft-folder-expander {
                                svg {
                                    fill: $dbqft-list-item-color;
                                    fill: $color-primary;
                                }
                            }
                        }
                    }
    
                    // Display the exander
                    &[data-has-sub-folders="true"] {
                        > .dbqft-folder-wrapper {
                            > .dbqft-folder-actions {
                                > .dbqft-folder-expander {
                                    display: inline-block;
                                    cursor: pointer;
                                }
                            }
                        }
                    }

                    &[data-is-expanded="true"] {
                        > .dbqft-folder-wrapper {
                            > .dbqft-folder-actions {
                                > .dbqft-folder-expander {
                                    svg {
                                        transform: rotate(180deg);
                                    }
                                }
                            }
                        }
                    }

                    &[data-is-expanded="false"] {
                        .dbqft-list-items,
                        .dbqft-class-list-items {
                            display: none;
                        }
                    }
                }
                
                &:not(:first-child) {
                    padding-top: 10px;
                }

                &:not(:last-child) {
                    border-bottom: 1px solid $border-color;
                }
            }

            &:hover {
                overflow-y: scroll;
            }

            @supports (contain: paint) and (not (-moz-appearance: none)) {
                &:hover {
                    padding-right: 17px;
                }
            }
        }
        
        &.dbqft-hover {
            width: 100% !important;
        }
    }

    // Expanded menu settings
    &:not(.dbqft-collapsed) {
        .dbqft-lists {
            .dbqft-list > .dbqft-list-item {
                > .dbqft-class-list-items {
                    display: none;
                }
            }
        }
    }

    // Collapsed menu settings
    &.dbqft-collapsed {
        width: 80px;

        #navigator.dbq-folder-tree-container {
            .dbqft-list-header {
                .navbar-brand {
                    height: 45px;
                    width: 45px;

                    // Set the customer Logo
                    @if ($navbar-logo-img-small != false) {
                        background: $navbar-logo-img-small no-repeat center center;
                        background-size: contain;
                    } @else {
                        display: none;
                    }
                }
                .dbqft-list-collapse-button {
                    button {
                        svg {
                            transform: rotate(180deg);
                            margin-left: 0;
                        }
                    }
                }
            }

            .dbqft-navigation-button {
                width: 50px;
                padding: 12px 4px 12px 5px;
                .dbqft-navigation-button-title {
                    display: none;
                }
                svg {
                    margin-left: auto;
                    margin-right: auto;
                }
            }
            .dbqft-lists {
                padding-left: 14px;
                padding-right: 14px;
                .dbqft-list {
                    margin: 0;
                    > .dbqft-list-item {
                        background-color: none;
                        height: 40px;
                        > .dbqft-folder-wrapper {
                            width: 50px;
                            padding: 9px 4px 9px 5px;
                            justify-content: center;
                            position: relative;

                            .dbqft-folder-content {
                                .dbqft-folder-name {
                                    display: none;
                                }
                            }

                            .dbqft-folder-actions {
                                position: absolute;
                                top: 0;
                                right: 0;

                                .dbqft-folder-counter {
                                    position: absolute;
                                    top: 0px;
                                    right: -3px;
                                    margin-right: 0;
                                }
            
                                .dbqft-folder-expander {
                                    display: none;
                                }
                            }
                        }

                        .dbqft-list-items,
                        .dbqft-class-list-items {
                            display: none;
                        }
                    }
                }

                &:hover {
                    padding-right: 7px;
                }
            }
        }
    }
}

.dbqft-list-items.dbq-popover {
    position: absolute;
    z-index: 9999;  // Increased z-index to ensure the menu appears above dropdown menus
    margin: 0;
    border: none;
    padding: 6px 0px;
    border-radius: 10px;
    background-color: $dropdown-background-color;
    list-style-type: none;
    @include shadow;

    .dbqft-list-title {
        cursor: pointer;
        padding: 6px 15px;
        font-weight: 500;
    }

    > .dbqft-list-item {
        width: 100%;
        padding: 0 9px;
        position: relative;
        overflow: unset;
        background-color: transparent;
        cursor: pointer;

        .dbqft-folder-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: transparent;
            border-radius: 6px;
            width: 100%;
            height: inherit;
            overflow: hidden;
            padding: 2px 0px;
            
            .dbqft-folder-image,
            .dbqft-folder-expander {
                display: none;
            }

            .dbqft-folder-counter {
                margin-right: 5px;
            }

            .dbqft-folder-name {
                padding: 4px 6px;
                border-radius: 6px;
                font-family: $font-family-default;
                font-size: 14px;
                font-weight: 400;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 100%;
                max-width: 220px;
                overflow: hidden;
                color: $dropdown-text-color;
                display: inline-flex;
                flex-direction: column;

                &::after {
                    content: attr(data-name);
                    content: attr(data-name) / "";
                    height: 0;
                    visibility: hidden;
                    overflow: hidden;
                    user-select: none; 
                    pointer-events: none;
                    font-weight: $font-weight-bold;

                    @media speech {
                        display: none;
                    }
                }
            }

            &:hover {
                background: color(gray-7);

                .dbqft-folder-name {
                    color: $text-color-default;
                    font-weight: 600;
                }
            }
        }

        // Active menu item
        &.dbqft-active {
            & > .dbqft-folder-wrapper {
                background: color(subtle); // moved from name to wrapper after notification icon was added

                .dbqft-folder-name {
                    color: $color-primary;
                    font-weight: 600;
                }
            }
        }

        .dbqft-class-list-items {
            display: none;
        }

        &:hover {
            > .dbqft-class-list-items {
                display: flex;
                flex-direction: column;
                padding: 6px 9px;
            }
        }
    }
}

.dbqft-class-list-items {
    position: absolute;
    z-index: 2;
    margin: 0;
    border: none;
    padding: 6px 0px;
    border-radius: 10px;
    background-color: $dropdown-background-color;
    list-style-type: none;
    @include shadow;

    .dbqft-list-title {
        cursor: pointer;
        padding: 6px;
        font-weight: 500;
    }

    &.dbq-popover {
        display: flex;
        flex-direction: column;
        padding: 6px 9px;
    }
  
    > .dbqft-class-list-item {
        display: inline-flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        position: relative;
        background-color: transparent;
        border-radius: 6px;
        padding: 4px 6px !important;
        cursor: pointer;

        > .dbqft-class-list-items {
            display: none;
        }

        .dbqft-folder-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: transparent;
            border-radius: 6px;
            width: 100%;
            height: inherit;
            overflow: hidden;
            padding: 2px 0px;

            .dbqft-folder-document-class-list-name {
                font-family: $font-family-default;
                font-size: 14px;
                font-weight: 400;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: $dropdown-text-color;
                display: inline-flex;
                flex-direction: column;

                &::after {
                    content: attr(data-name);
                    font-weight: $font-weight-bold;
                    font-family: $font-family-default;
                    font-size: 14px;
                    visibility: hidden;
                    pointer-events: none;
                    white-space: nowrap;
                    height: 0;

                    @media speech {
                        display: none;
                    }
                }      
            }  

            .dbqft-folder-counter {
                margin-left: 5px;
            }
        }

        &:hover {
            background: color(gray-7);

            > .dbqft-folder-document-class-list-name { 
                color: $text-color-default;
                font-weight: $font-weight-bold;
            }

            > .dbqft-class-list-items {
                display: flex;
            }
        }

        &.dbqft-active {
            background: color(subtle);

            > .dbqft-folder-wrapper {
                > .dbqft-folder-document-class-list-name {
                    color: $color-primary;
                    font-weight: 600;
                }
            }
        }
    }
}

.dbqft-folder-counter {
    @include alert-badge;
}

// Hide the left column when a graph is in full screen
body[data-has-full-screen-graph="true"] {
    .dbq-left-column {
        display: none;
    }
}