:root {
    --sidebar-width: 5%;
    --sub-sidebar-width: 15%;
    /*--sidebar-background: #151f24; */
    --sidebar-background: #181a1b; /* Looks sick with black taken from RCC website, maybe temp, until Jaya says otherwise */
    --sidebar-background-hover: #425563;
    --sidebar-inner-border-color: #303f49;
    --sidebar-logo-height: 2.7rem;
}

.sidebar {
    left: 0;
    top: 0;
    bottom: 0;
    background-color: var(--sidebar-background);
    color: white;
    margin: 0;
    padding: 0;
    width: var(--sidebar-width);
    transition: all 0.6s;
    height: 100vh;
    position: fixed;
    z-index: 1040;
}

.sub-sidebar {
    left: var(--sidebar-width);
    width: var(--sub-sidebar-width);
    z-index: 1030;
    box-shadow: none !important;
}

.sidebar.collapsed .si-link-text,
.sidebar.collapsed .collapse-arrow {
    transition: transform 0.3s ease;
}

.sidebar.expanded .logo-full {
    transition: all 0.7s ease-in-out;
}

.sidebar.collapsed .logo-icon {
    opacity: 1;
    transform: scale(1);
    transition: all 0.3s ease;
    left: 1.5rem;
}

.logo {
    padding: 15px;
    border-bottom: 2px solid var(--sidebar-inner-border-color);
    display: flex;
    justify-content: space-between;
}

.toggle-btn {
    color: white;
    background: none;
    border: none;
    font-size: 1.25rem;
    position: absolute;
    right: 10px;
    top: 25px;
    z-index: 1050;
    transition: all 0.3s linear;
}

.si-panel {
    margin-left: 15px;
    margin-right: 15px;
    height: calc(100vh - 75px);
    flex-wrap: nowrap !important;
    flex-direction: column;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-y: auto;
}

.si-sub-panel {
    margin-left: unset;
    padding-left: 15px !important;
    border-left: 1px solid var(--sidebar-inner-border-color);
}

.si-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--sidebar-inner-border-color);
    cursor: pointer;
    transition: background-color 0.3s;
}

.si-mini-item {
    padding: 0.5rem 0 !important;
}

.si-link {
    background-color: var(--sidebar-background);
    align-items: center;
    color: white !important;
    font-size: 1rem !important;
    font-optical-sizing: auto;
    font-weight: 300 !important;
    font-style: normal;
    transition: font-size 0.7s ease;
    cursor: pointer;
    pointer-events: auto !important;
}

.si-mini-link {
    flex-direction: column;
    padding: 0.5rem 0.15rem !important;
}

.si-mini-link .nav-link-text {
    font-size: 0.83rem;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.si-mini-link .img-btn img {
    width: 2.3rem;
    height: 2.3rem;
}

.si-mini-link .img-btn {
    margin-right: unset !important;
}

.disabled-item {
    filter: brightness(0.8);
}

.disabled-item,
.disabled-item * {
    cursor: not-allowed !important;
}

.si-link * {
    pointer-events: none;
}

.si-link-text, .collapse-arrow {
    transition: opacity 0.2s ease 0.6s, visibility 0s linear 0.8s;
}

.si-link i,
.si-link > :first-child {
    margin-right: 0.5rem;
}

.collapse-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    transform-origin: center;
    margin-left: auto;
    background-color: #1f2a31;
    border-radius: 5px;
    padding: 0 7px 0 7px;
    font-size: 1rem;
    margin-right: unset !important;
}

.submenu {
    padding-left: 16px;
}

.submenu .si-link {
    transition: all 0.3s;
    border-radius: 0.25rem;
    display: flex;
    gap: 0.5rem;
}

.submenu .si-link:hover {
    background-color: var(--sidebar-background-hover);
    text-decoration: none;
}

.submenu .img-btn:hover img {
    filter: unset !important;
}

.si-link[aria-expanded="true"] .collapse-arrow {
    transform: rotate(180deg);
}

.sidebar.expanded .toggle-btn,
.sidebar.collapsed .toggle-btn:hover {
    transform: rotate(-45deg);
}

.logo-container {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-bottom: 2px solid var(--sidebar-inner-border-color);
    height: var(--top-panel-height);
    justify-content: center;
}

.logo-full-sidebar {
    position: absolute;
    left: 2.4rem;
    height: var(--sidebar-logo-height);
    opacity: 1;
}

.logo-icon {
    position: absolute;
    height: var(--sidebar-logo-height);
}

.sidebar-link {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    border-radius: 0.25rem;
    transition: background-color 0.3s !important;
}

.sidebar-mini-link-selected .sidebar-link,
.sidebar-link:not(:has(> .collapse-arrow)):hover {
    background-color: var(--sidebar-background-hover);
}

.sub-sidebar .sidebar-link {
    padding-right: unset !important;
}

.sidebar-spacer {
    flex: 1 1 auto;
}

/* Bottom area styling */
.sidebar-bottom {
    width: 100%;
    margin-bottom: 1rem;
    border-top: 1px solid var(--sidebar-inner-border-color);
    background: var(--sidebar-background);
}

/* Optional: keep hover consistent for the bottom button */
.sidebar-bottom .sidebar-link:hover {
    background-color: var(--sidebar-background-hover);
}