:root {
    --sidebar-collapsed-width: 5rem;
    --sidebar-expanded-width: 16rem;
    --sidebar-width: var(--sidebar-collapsed-width);
}

body {
    overflow-x: hidden;
}

body.sidebar-open {
    --sidebar-width: var(--sidebar-expanded-width);
}

.site-header,
.site-main,
.site-footer {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    transition: margin-left 300ms ease, width 300ms ease;
}

.side-nav {
    width: var(--sidebar-width);
    overflow-x: hidden;
    transition: width 300ms ease;
}

.side-nav__brand-text,
.side-nav__item-label {
    opacity: 1;
    max-width: 12rem;
    transform: translateX(0);
    transition: opacity 200ms ease, max-width 300ms ease, transform 300ms ease;
}

body.sidebar-collapsed .side-nav__brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

body.sidebar-collapsed .side-nav__brand-text,
body.sidebar-collapsed .side-nav__item-label {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
    transform: translateX(-0.5rem);
}

body.sidebar-collapsed .side-nav__item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

body.sidebar-collapsed .side-nav__item--active {
    border-right-width: 0;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}

.inner-glow-emerald {
    box-shadow: inset 0 0 15px rgba(187, 203, 186, 0.05);
}

.neural-line {
    background: linear-gradient(90deg, transparent, rgba(184, 199, 229, 0.2), transparent);
    height: 0.5px;
    width: 100%;
}

.glass-card {
    background: rgba(14, 20, 29, 0.6);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(184, 199, 229, 0.1);
}

.organic-growth-mask {
    mask-image: linear-gradient(to top, black, transparent);
}

@media (max-width: 767px) {
    :root {
        --sidebar-collapsed-width: 4.5rem;
        --sidebar-expanded-width: 13.5rem;
    }

    .site-header > div {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}