/* Logo size adjustment */
#header img {
    max-height: 40px;
    max-width: 160px !important;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Footer position adjustment */
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 300px;
    background-color: var(--MENU-BG);
    padding: 0rem;
    padding-left: 1rem;
    z-index: 100;
    border-top: 1px solid var(--MENU-SECTION-ACTIVE-CATEGORY-BG);
}

/* Add padding to body to prevent content from being hidden behind footer */
#body-inner {
    padding-bottom: 4rem;
}

/* Make menu scrollable */
#sidebar .topics {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    overflow-x: hidden;
    margin-right: 0rem !important;
    padding-bottom: 4rem; /* Add padding to prevent last items from being hidden */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: rgba(220, 220, 220, 0.678) transparent; /* For Firefox */
}

/* Hide scrollbar by default */
#sidebar .topics::-webkit-scrollbar {
    width: 6px;
    background-color: transparent;
}

/* Customize scrollbar track */
#sidebar .topics::-webkit-scrollbar-track {
    background-color: transparent;
}

/* Customize scrollbar thumb */
#sidebar .topics::-webkit-scrollbar-thumb {
    background-color: rgba(220, 220, 220, 0.678);
    border-radius: 3px;
}

/* Hover effect on scrollbar thumb */
#sidebar .topics::-webkit-scrollbar-thumb:hover {
    background-color: rgba(180, 180, 180, 0.8);
}

/* Menu arrow styles */
#sidebar .topics .dd-item > a {
    position: relative;
    padding-left: 1.5em !important;
    display: flex;
    align-items: center;
    transition: none !important;
    transform: none !important;
}

/* Ensure consistent padding for all menu items */
#sidebar .topics .dd-item:not(:has(ul)) > a,
#sidebar .topics .dd-item:has(ul) > a,
#sidebar .topics .dd-item.parent > a,
#sidebar .topics .dd-item.active > a {
    padding-left: 1.5em !important;
}

#sidebar .topics .dd-item > a .menu-arrow {
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s ease;
    font-size: 0.8em;
    opacity: 0.7;
    width: 0.8em;
    text-align: center;
}

/* Rotate arrow when parent is active */
#sidebar .topics .dd-item.parent > a .menu-arrow {
    transform: translateY(-50%) rotate(90deg);
    opacity: 1;
}

/* Show arrow for items with children */
#sidebar .topics .dd-item:has(ul) > a .menu-arrow {
    display: inline-block;
}

/* Hide arrow for items without children */
#sidebar .topics .dd-item:not(:has(ul)) > a .menu-arrow {
    display: none;
    width: 0;
}

/* Submenu animation */
#sidebar .topics .dd-item > ul {
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    max-height: 0;
    overflow: hidden;
}

#sidebar .topics .dd-item.parent > ul {
    display: block;
    opacity: 1;
    max-height: 1000px;
}

/* Hover effects */
#sidebar .topics .dd-item > a:hover {
    background-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG);
}

#sidebar .topics .dd-item > a:hover .menu-arrow {
    opacity: 1;
}

/* Active state */
#sidebar .topics .dd-item.active > a {
    background-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG);
    color: var(--MENU-SECTION-ACTIVE-CATEGORY-COLOR);
    font-weight: 500;
}

/* Ensure submenu items are properly indented */
#sidebar .topics .dd-item > ul > li > a {
    padding-left: 1.5em !important;
    transition: none !important;
    transform: none !important;
}

/* Prevent any movement on all menu items */
#sidebar .topics .dd-item,
#sidebar .topics .dd-item > a,
#sidebar .topics .dd-item > ul,
#sidebar .topics .dd-item > ul > li,
#sidebar .topics .dd-item > ul > li > a {
    transition: none !important;
    transform: none !important;
    will-change: auto;
}

/* Ensure text doesn't move */
#sidebar .topics .dd-item > a span {
    position: relative;
    display: inline-block;
    transition: none !important;
    transform: none !important;
}

#sidebar ul li.active > a {
    margin-left: 0em;
    margin-right: 0em;
    padding-right: 0rem;
    padding-left: 0rem;
}

#sidebar ul li li {
    padding-left: 0.8rem;
    text-indent: 0rem;
}