/* Modernised sidebar — CSS-only layer over the INSPINIA theme.
   Scoped to .navbar-static-side so nothing else is affected.
   Colours kept in line with the existing dark-navy / green theme. */
:root {
    /* matched to INSPINIA skin-1: sidebar #3e495f, text #9ea6b9, hover/active #3a4459 */
    --sb-text: #9ea6b9;
    --sb-text-strong: #ffffff;
    --sb-accent: #1c84c6;
    --sb-hover-bg: #3a4459;
    --sb-active-bg: #3a4459;
    --sb-divider: #4a5670;
    --sb-section: #7e889c;
}

/* --- Top-level items --- */
.navbar-static-side .nav > li > a {
    color: var(--sb-text);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    padding: 12px 22px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

    .navbar-static-side .nav > li > a:hover,
    .navbar-static-side .nav > li > a:focus {
        background: var(--sb-hover-bg);
        color: var(--sb-text-strong);
    }

/* Uniform icon column so every label lines up regardless of icon width */
.navbar-static-side .nav > li > a > i.fa:first-child {
    width: 20px;
    margin-right: 12px;
    text-align: center;
    font-size: 15px;
    vertical-align: middle;
}

/* --- Active item --- */
.navbar-static-side .nav > li.active {
    background: var(--sb-active-bg);
    border-left: 3px solid var(--sb-accent);
}

    .navbar-static-side .nav > li.active > a {
        color: var(--sb-text-strong);
        font-weight: 700;
    }

        .navbar-static-side .nav > li.active > a > i.fa:first-child {
            color: var(--sb-accent);
        }

/* --- Second / third level --- */
.navbar-static-side .nav-second-level > li > a {
    padding: 9px 16px 9px 56px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sb-text);
    transition: background .15s ease, color .15s ease;
}

.navbar-static-side .nav-third-level > li > a {
    padding-left: 70px;
    font-size: 13px;
}

.navbar-static-side .nav-second-level > li > a:hover,
.navbar-static-side .nav-third-level > li > a:hover {
    background: var(--sb-hover-bg);
    color: var(--sb-text-strong);
}

.navbar-static-side .nav-second-level > li.active > a {
    color: var(--sb-text-strong);
    font-weight: 700;
}

/* --- Section header (logo / profile block) --- */
.navbar-static-side .nav-header {
    border-bottom: 1px solid var(--sb-divider);
}

/* --- Collapsible submenu arrow --- */
.navbar-static-side .arrow-indicator {
    transition: transform .15s ease;
}

/* --- Admin section: a separated group with its own header --- */
/* The "Admin Menu" row becomes an uppercase section label with a divider above it */
.navbar-static-side .admin-section {
    margin-top: 8px;
    border-top: 1px solid var(--sb-divider);
}

    .navbar-static-side .admin-section > a {
        padding: 16px 22px 8px;
        color: var(--sb-section);
        font-size: 12px;
        font-weight: 600;
        cursor: default;
    }

        .navbar-static-side .admin-section > a:hover,
        .navbar-static-side .admin-section > a:focus {
            background: transparent;
            color: var(--sb-section);
        }

        /* drop the icon on the header row */
        .navbar-static-side .admin-section > a > i.fa:first-child {
            display: none;
        }

    /* never show the active highlight on the whole section wrapper —
       only the individual active item (below) should highlight.
       Specificity must beat the general ".nav > li.active" rule. */
    .navbar-static-side .nav > li.admin-section.active {
        background: transparent;
        border-left: 0;
        border-top: 1px solid var(--sb-divider);
    }

/* Promote the admin items to the same primary look as the reseller items */
.navbar-static-side .admin-section .nav-second-level > li > a {
    padding: 10px 22px;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--sb-text);
}

/* drop the submenu's default bottom gap so spacing matches the top group */
.navbar-static-side .admin-section .nav-second-level > li:last-child {
    margin-bottom: 0;
}

    .navbar-static-side .admin-section .nav-second-level > li > a > i.fa:first-child {
        width: 20px;
        margin-right: 12px;
        text-align: center;
        font-size: 15px;
        vertical-align: middle;
    }

.navbar-static-side .admin-section .nav-second-level > li.active {
    background: var(--sb-active-bg);
    border-left: 3px solid var(--sb-accent);
}

    .navbar-static-side .admin-section .nav-second-level > li.active > a {
        color: var(--sb-text-strong);
        font-weight: 700;
    }

        .navbar-static-side .admin-section .nav-second-level > li.active > a > i.fa:first-child {
            color: var(--sb-accent);
        }

/* Third level (no icon) aligned under its parent's label */
.navbar-static-side .admin-section .nav-third-level > li > a {
    padding: 8px 22px 8px 54px;
    font-size: 13px;
    color: var(--sb-text);
}

    .navbar-static-side .admin-section .nav-third-level > li > a:hover {
        background: var(--sb-hover-bg);
        color: var(--sb-text-strong);
    }

/* This app has no hamburger/toggle button to bring the sidebar back once
   inspinia.js's body-small class hides it below 769px, so force it to stay
   visible on mobile instead. */
@media (max-width: 768px) {
    body.body-small .navbar-static-side {
        display: block;
        width: 100%;
        position: relative;
    }

    body.body-small #page-wrapper {
        margin-left: 0;
    }
}