.sidebar-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    height: 42px;
    width: 100%;
    padding: 8px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.3s, color 0.3s;
    margin-bottom: 10px;
    position: relative;
    text-decoration: none !important;
    border: none;
    color: #A0AEC0;
}

/* Hide Bootstrap's default accordion indicator */
.accordion-button::after {
    display: none !important;
}

/* Remove Bootstrap padding and styling */
.accordion-button.no-indicator {
    padding-right: 8px !important; /* Keep consistent padding */
    box-shadow: none !important;
    background: transparent;
    color: white;
}

.accordion-button:not(.collapsed) {
    box-shadow: none !important;
    color: inherit;
}

a :hover, :focus {
    text-decoration: none !important;
}

.sidebar-link img {
    height: 24px;
    width: 24px;
    margin-right: 16px;
}

.sidebar-link div {
    font-size: 14px;
    flex: 1;
}

.sidebar-link.accordion-button {
    background-color: #202A35;
    padding-right: 12px; /* Give a bit more space for the arrow */
    justify-content: space-between;
}

.sidebar-link:hover,
.sidebar-link.active,
.sidebar-link.subfolder.active,
.sidebar-link.subfolder:hover,
.accordion-button:hover {
    background-color: #2D3748;
    color: #FFFFFF;
}

.sidebar-link.subfolder {
    padding-left: 20px !important;
}

.accordion-content {
    display: none;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    max-height: 0;
}

.accordion-content.active {
    display: block;
    max-height: 500px; /* Adjust based on your content */
}

.accordion-arrow {
    transition: transform 0.3s ease;
    transform: rotate(-90deg);
    font-size: 10px; /* Slightly smaller */
    margin-left: auto;
    color: #A0AEC0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8; /* Slightly more subtle */
}

.accordion-button.active .accordion-arrow,
.accordion-button:not(.collapsed) .accordion-arrow {
    transform: rotate(0deg);
    color: #FFFFFF;
}

/* Styles for SVG elements in sidebar */
.svg-fill {
    fill: #c0c4dc;
}

.svg-stroke {
    stroke: #c0c4dc;
    stroke-dasharray: none;
    stroke-opacity: 1;
}

/* Make sure content items have proper spacing */
.accordion-content .sidebar-link {
    margin-bottom: 6px; /* Slightly tighter spacing */
    transition: all 0.2s ease;
}