@use '../_sass_variables' as *;

.layout-sidebar {
    border-right: var(--d-sidebar-border);
    background: var(--d-sidebar-bg-color);
    height: 100%;
    z-index: 10;
    .sidebar-header {
        min-height: 4rem;
        height: 4rem;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        padding: 1rem 0.5rem;
        box-sizing: border-box;
        overflow: hidden;
        .layout-sidebar-anchor {
            display: none;
            cursor: pointer;
        }
        .layout-sidebar-pin {
            display: none;
            cursor: pointer;
            background: transparent;
            border: none;
            color: var(--d-menuitem-text-color);
            padding: 0.5rem;
            border-radius: 0.375rem;
            transition: all 0.2s;
            
            i {
                font-size: 1rem;
            }
            
            &:hover {
                background: var(--d-menuitem-hover-bg);
                color: var(--d-menuitem-active-text-color);
            }
            
            &.pinned {
                color: var(--primary-color);
                
                &:hover {
                    color: var(--primary-color);
                    opacity: 0.8;
                }
            }
        }
    }
    .app-name {
        color: var(--d-app-name-color);
    }

    .layout-menu {
        .menu-separator {
            height: 1px;
            width: 100%;
            background: transparent;
        }

        li {
            &.active-menuitem {
                > a {
                    color: var(--d-menuitem-active-text-color);
                }
            }

            a {
                color: var(--d-menuitem-text-color);

                &.active-route {
                    color: var(--d-menuitem-active-route-text-color);
                }

                &:hover {
                    background: var(--d-menuitem-hover-bg);
                }
            }
        }

        .layout-root-menuitem {
            .layout-menuitem-root-text {
                color: var(--d-menuitem-root-text-color);
            }

            .layout-menu-section-header {
                color: var(--d-menuitem-root-text-color);
                font-size: 0.75rem;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.08em;
                padding: 0.375rem 0.75rem;
            }

            > ul {
                z-index: 10;
                > li.active-menuitem {
                    background: var(--d-menuitem-active-bg);
                }
            }
        }
    }

    /* Collapsible titled groups (navigation headers from DB / seed) */
    .layout-sidebar-details {
        margin-bottom: 0.375rem;
        border-radius: var(--border-radius);
    }

    .layout-sidebar-details-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        cursor: pointer;
        list-style: none;
        user-select: none;
        padding: 0.35rem 0.35rem 0.35rem 0.75rem;
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        color: var(--d-menuitem-root-text-color);
        opacity: 0.92;
        border-radius: var(--border-radius);
        transition: background 0.15s ease, opacity 0.15s ease;
    }

    .layout-sidebar-details-summary::-webkit-details-marker {
        display: none;
    }

    .layout-sidebar-details-summary:hover {
        opacity: 1;
        background: color-mix(in srgb, var(--d-menuitem-hover-bg) 55%, transparent);
    }

    .layout-sidebar-details-chevron {
        font-size: 0.65rem;
        opacity: 0.85;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    .layout-sidebar-details[open] .layout-sidebar-details-chevron {
        transform: rotate(-180deg);
    }

    .layout-sidebar-details-menu {
        padding: 0.125rem 0 0.25rem;
    }
}
@media screen and (min-width: $breakpoint) {
    .layout-horizontal {
        .layout-topbar {
            background: var(--d-sidebar-bg-color);
            color: var(--d-menuitem-text-color);

            .topbar-separator {
                border-left: var(--d-menu-separator-border);
            }

            .topbar-menu {
                > li {
                    &.right-sidebar-item {
                        > a {
                            background: transparent;
                            color: var(--d-menuitem-text-color);

                            &:hover {
                                background: var(--d-menuitem-hover-bg);
                            }

                            &:focus {
                                box-shadow: var(--d-menuitem-focus-shadow);
                            }
                        }
                    }

                    > a {
                        color: var(--d-menuitem-text-color);

                        &:hover {
                            background: var(--d-menuitem-hover-bg);
                        }

                        &:focus {
                            box-shadow: var(--d-menuitem-focus-shadow);
                        }

                        .topbar-badge {
                            background: var(--primary-color);
                            color: var(--primary-contrast-color);
                        }
                    }

                    > ul {
                        &.notifications-menu {
                            .notification-detail {
                                color: var(--d-menuitem-root-text-color);
                            }
                        }
                    }
                }
            }
        }

        .layout-sidebar {
            background-image: none;

            .layout-menu {
                .layout-root-menuitem {
                    > ul {
                        background: var(--d-sidebar-bg-color);
                    }
                }
            }
        }
    }
    .app-dark {
        .layout-sidebar-primary {
            .layout-sidebar {
                background: var(--d-sidebar-bg-color);
                border: none;
            }
        }
    }
}

@media screen and (max-width: ($breakpoint - 1)) {
    .layout-sidebar {
        .layout-menu {
            .layout-root-menuitem {
                &.active-menuitem {
                    background: transparent;
                }
            }
        }
    }
}
