/* Sidebar navigation — brand-aligned look; no markup or logic changes */

#navigation {
    --nav-red: #c61d2f;
    --nav-red-mid: #9e1628;
    --nav-blue: #52b4e0;
    --nav-blue-mid: #2e93c4;
    --nav-blue-deep: #1e6f96;
    --nav-surface: rgba(30, 111, 150, 0.09);
    --nav-surface-hover: rgba(82, 180, 224, 0.2);
    --nav-item-radius: 12px;
    --nav-transition: 0.28s cubic-bezier(0.22, 1, 0.36, 1);

    position: relative;
    background: linear-gradient(185deg, #f2f6fa 0%, #e8eef6 45%, #e2ebf4 100%);
}

/* Let sidebar chrome show the gradient (Homer often paints #menu solid white) */
#menu {
    background: transparent !important;
}

#navigation::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.11;
    background: linear-gradient(
        125deg,
        var(--nav-red-mid) 0%,
        var(--nav-red) 28%,
        var(--nav-blue-mid) 62%,
        var(--nav-blue) 100%
    );
    background-size: 220% 220%;
    animation: migm-nav-bg-flow 18s ease-in-out infinite;
}

@keyframes migm-nav-bg-flow {
    0% {
        background-position: 0% 40%;
    }
    50% {
        background-position: 100% 60%;
    }
    100% {
        background-position: 0% 40%;
    }
}

/* Logo + user block — centered, sized for narrow sidebar */
#navigation .profile-picture {
    position: relative;
    z-index: 1;
    padding: 14px 10px 16px;
    margin-bottom: 4px;
    text-align: center;
    border-bottom: 1px solid rgba(46, 147, 196, 0.2);
    background: linear-gradient(180deg, rgba(46, 147, 196, 0.08) 0%, transparent 85%);
    box-shadow: none;
}

#navigation .profile-picture img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: none !important;
    width: 96px !important;
    height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
    object-fit: contain;
    object-position: center;
    padding: 6px;
    background: rgba(46, 147, 196, 0.12);
    border: 2px solid rgba(46, 147, 196, 0.28);
    box-sizing: border-box;
    box-shadow: 0 4px 16px rgba(30, 60, 90, 0.12);
}

#navigation .profile-picture .img-circle {
    border-radius: 50% !important;
}

#navigation .profile-picture .stats-label {
    margin-top: 12px;
    padding: 0 4px;
}

#navigation .profile-picture .font-extra-bold {
    color: #34495e;
    letter-spacing: 0.04em;
}

#navigation .nav {
    background-color: transparent !important;
}

#navigation #side-menu {
    position: relative;
    z-index: 1;
    background: transparent !important;
    padding: 6px 10px 28px;
}

#navigation #side-menu > li {
    border: none !important;
    margin-bottom: 5px;
    background: transparent !important;
}

#navigation #side-menu > li:first-child {
    border-top: none !important;
}

/* Top-level links — no default white panel */
#navigation #side-menu > li > a {
    position: relative;
    display: block;
    border-radius: var(--nav-item-radius);
    padding: 12px 14px !important;
    margin: 0 2px;
    color: #4d5664 !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
    background: transparent !important;
    transition:
        background var(--nav-transition),
        color var(--nav-transition),
        transform var(--nav-transition),
        box-shadow var(--nav-transition);
    overflow: hidden;
}

#navigation #side-menu > li > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--nav-red) 0%, var(--nav-blue-mid) 100%);
    opacity: 0;
    transform: scaleY(0.5);
    transition:
        opacity var(--nav-transition),
        transform var(--nav-transition);
}

#navigation #side-menu > li:hover > a::before,
#navigation #side-menu > li.active > a::before {
    opacity: 1;
    transform: scaleY(1);
}

#navigation #side-menu > li:hover > a {
    background: var(--nav-surface-hover) !important;
    color: var(--nav-blue-deep) !important;
    transform: translateX(4px);
    box-shadow: 0 4px 14px rgba(46, 147, 196, 0.14);
}

#navigation #side-menu > li.active > a {
    background: linear-gradient(
        90deg,
        rgba(198, 29, 47, 0.2) 0%,
        rgba(46, 147, 196, 0.22) 100%
    ) !important;
    color: var(--nav-blue-deep) !important;
    box-shadow: 0 6px 18px rgba(30, 111, 150, 0.12);
}

#navigation #side-menu > li > a .fa.arrow {
    transition: color var(--nav-transition), transform var(--nav-transition);
    color: var(--nav-blue-mid);
}

#navigation #side-menu > li.active > a .fa.arrow {
    color: var(--nav-red);
}

/* Submenu rows: reset legacy “white strip” when parent hovered */
#navigation #side-menu > li:hover .nav-second-level li > a {
    color: #4d5664 !important;
    transform: none;
    box-shadow: none;
    background: transparent !important;
}

#navigation #side-menu > li:hover .nav-second-level li > a::before {
    display: none;
}

#navigation #side-menu > li:hover .nav-second-level li.active > a {
    background: linear-gradient(
        90deg,
        rgba(198, 29, 47, 0.18),
        rgba(46, 147, 196, 0.22)
    ) !important;
    color: var(--nav-blue-deep) !important;
    box-shadow: 0 2px 10px rgba(30, 111, 150, 0.1);
    transform: none;
}

/* Submenu container — tinted glass, not white card */
#navigation #side-menu .nav-second-level {
    background: var(--nav-surface);
    border-radius: 10px;
    margin: 6px 4px 10px;
    padding: 6px 0;
    border: 1px solid rgba(46, 147, 196, 0.14);
    box-shadow: none;
}

#navigation #side-menu .nav-second-level li {
    border: none !important;
    background: transparent !important;
}

#navigation #side-menu .nav-second-level li > a {
    border-radius: 8px;
    margin: 3px 8px;
    padding: 10px 12px 10px 18px !important;
    color: #4a5568 !important;
    font-weight: 600 !important;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 12px;
    background: transparent !important;
    transition:
        background var(--nav-transition),
        color var(--nav-transition),
        transform var(--nav-transition);
}

#navigation #side-menu .nav-second-level li > a:hover {
    background: var(--nav-surface-hover) !important;
    color: var(--nav-blue-deep) !important;
    transform: translateX(4px);
}

#navigation #side-menu .nav-second-level li.active > a {
    background: linear-gradient(
        90deg,
        rgba(198, 29, 47, 0.18),
        rgba(46, 147, 196, 0.24)
    ) !important;
    color: var(--nav-blue-deep) !important;
    box-shadow: 0 2px 10px rgba(30, 111, 150, 0.1);
}

@media (prefers-reduced-motion: reduce) {
    #navigation::before {
        animation: none;
        background-size: auto;
    }

    #navigation #side-menu > li > a,
    #navigation #side-menu .nav-second-level li > a,
    #navigation #side-menu > li > a::before,
    #navigation #side-menu > li > a .fa.arrow {
        transition: none;
    }

    #navigation #side-menu > li:hover > a,
    #navigation #side-menu .nav-second-level li > a:hover {
        transform: none;
    }
}

/* Ensure the user dropdown (Role -> Logout) sits above the sidebar links.
   If the menu is under another element, clicks can "fall through" to Dashboard. */
#navigation {
    overflow: visible;
}

#navigation .profile-picture,
#navigation .profile-picture .dropdown {
    position: relative;
    z-index: 5000;
}

#navigation .profile-picture .dropdown-menu {
    z-index: 6000;
    pointer-events: auto;
}