:root {
    --isms-nav-blue: #054cd4;
    --isms-nav-blue-dark: #043da9;
    --isms-nav-blue-soft: #edf3ff;
    --isms-nav-green: #269407;
    --isms-nav-page: #f2f6fc;
    --isms-nav-surface: #ffffff;
    --isms-nav-heading: #212832;
    --isms-nav-text: #4a515b;
    --isms-sidebar-label: #59656f;
    --isms-nav-muted: #69707a;
    --isms-nav-subtle: #a7aeb8;
    --isms-nav-border: #d4dae3;
    --isms-nav-danger: #e81500;
    --isms-nav-danger-soft: #fde9e7;
    --isms-nav-focus: rgba(5, 76, 212, 0.18);
    --isms-nav-shadow: rgba(33, 40, 50, 0.1);
    --isms-nav-overlay: rgba(21, 30, 44, 0.58);
    --isms-nav-active: #e9eff8;
    --isms-nav-hover: #f3f6fa;
    --isms-topbar-height: 4rem;
    --isms-sidebar-width: 15.75rem;
    --isms-sidebar-mobile: 17rem;
    --isms-maintenance-height: 3.625rem;
}

/* Layout */

#layoutSidenav {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

    #layoutSidenav #layoutSidenav_nav,
    .nav-fixed #layoutSidenav #layoutSidenav_nav {
        width: var(--isms-sidebar-width);
        height: 100vh;
        height: 100dvh;
        flex-basis: var(--isms-sidebar-width);
        flex-shrink: 0;
        background-color: var(--isms-nav-surface);
        transform: none;
        transition: width 160ms ease, flex-basis 160ms ease;
        z-index: 1038;
    }

    #layoutSidenav #layoutSidenav_content,
    .nav-fixed #layoutSidenav #layoutSidenav_content {
        min-width: 0;
        min-height: calc(100vh - var(--isms-topbar-height));
        min-height: calc(100dvh - var(--isms-topbar-height));
        margin-left: 0;
        padding-left: var(--isms-sidebar-width);
        top: var(--isms-topbar-height);
        transition: padding-left 160ms ease;
    }

body.isms-sidebar-collapsed #layoutSidenav #layoutSidenav_nav {
    width: 0;
    flex-basis: 0;
    overflow: hidden;
    pointer-events: none;
}

body.isms-sidebar-collapsed #layoutSidenav #layoutSidenav_content {
    padding-left: 0;
}

/* Topbar */

.nav-fixed .isms-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1039;
}

.isms-topbar {
    height: var(--isms-topbar-height);
    padding: 0;
    border-bottom: 1px solid var(--isms-nav-border);
    background-color: var(--isms-nav-surface);
    color: var(--isms-nav-heading);
    box-shadow: 0 0.125rem 0.4rem rgba(33, 40, 50, 0.045);
}

    .isms-topbar .isms-topbar-inner {
        display: flex;
        height: 100%;
        align-items: center;
        padding-right: 0.85rem;
        padding-left: 0.75rem;
    }

    .isms-topbar .min-w-0 {
        min-width: 0;
    }

    .isms-topbar .isms-topbar-button {
        display: inline-flex;
        width: 2.5rem;
        height: 2.5rem;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid transparent;
        border-radius: 0.6rem;
        background-color: transparent;
        color: var(--isms-nav-text);
        font-size: 1.3rem;
    }

        .isms-topbar .isms-topbar-button:hover {
            border-color: var(--isms-nav-border);
            background-color: var(--isms-nav-page);
            color: var(--isms-nav-blue);
        }

        .isms-topbar .isms-topbar-button:focus-visible {
            border-color: var(--isms-nav-blue);
            box-shadow: 0 0 0 0.2rem var(--isms-nav-focus);
            outline: 0;
        }

    .isms-topbar .isms-topbar-brand {
        width: auto;
        max-width: min(30rem, 50vw);
        margin: 0;
        padding: 0.35rem 0.3rem;
        color: var(--isms-nav-heading);
        text-decoration: none;
    }

    .isms-topbar .isms-topbar-title {
        overflow: hidden;
        color: var(--isms-nav-heading);
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .isms-topbar .isms-account-trigger {
        display: inline-flex;
        min-height: 2.65rem;
        align-items: center;
        gap: 0.55rem;
        padding: 0.25rem 0.45rem;
        border: 1px solid transparent;
        border-radius: 0.7rem;
        background-color: transparent;
        color: var(--isms-nav-heading);
        text-align: left;
        touch-action: manipulation;
    }

        .isms-topbar .isms-account-trigger::after {
            display: none;
        }

        .isms-topbar .isms-account-trigger:hover,
        .isms-topbar .isms-account-trigger[aria-expanded="true"] {
            border-color: var(--isms-nav-border);
            background-color: var(--isms-nav-page);
        }

        .isms-topbar .isms-account-trigger:focus-visible {
            border-color: var(--isms-nav-blue);
            box-shadow: 0 0 0 0.2rem var(--isms-nav-focus);
            outline: 0;
        }

    .isms-topbar .isms-topbar-avatar,
    .isms-topbar .isms-account-avatar {
        border-radius: 50%;
        object-fit: cover;
    }

    .isms-topbar .isms-topbar-avatar {
        width: 2.125rem;
        height: 2.125rem;
        border: 2px solid var(--isms-nav-blue-soft);
    }

    .isms-topbar .isms-account-summary {
        max-width: 10rem;
    }

    .isms-topbar .isms-account-name,
    .isms-topbar .isms-account-role {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .isms-topbar .isms-account-name {
        color: var(--isms-nav-heading);
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .isms-topbar .isms-account-role {
        margin-top: 0.12rem;
        color: var(--isms-nav-muted);
        font-size: 0.62rem;
        line-height: 1.2;
    }

    .isms-topbar .isms-account-menu {
        width: min(18rem, calc(100vw - 1rem));
        margin-top: 0.4rem;
        padding: 0.45rem;
        border: 1px solid var(--isms-nav-border);
        border-radius: 0.75rem;
        background-color: var(--isms-nav-surface);
        box-shadow: 0 0.9rem 2rem var(--isms-nav-shadow);
    }

    .isms-topbar .isms-account-header {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.65rem;
    }

    .isms-topbar .isms-account-avatar {
        width: 2.625rem;
        height: 2.625rem;
    }

    .isms-topbar .isms-account-header-name,
    .isms-topbar .isms-account-email {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .isms-topbar .isms-account-header-name {
        color: var(--isms-nav-heading);
        font-size: 0.82rem;
        font-weight: 700;
    }

    .isms-topbar .isms-account-email {
        margin-top: 0.1rem;
        color: var(--isms-nav-muted);
        font-size: 0.69rem;
    }

    .isms-topbar .isms-account-role-label {
        margin-top: 0.25rem;
        color: var(--isms-nav-blue);
        font-size: 0.61rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .isms-topbar .isms-menu-divider {
        height: 1px;
        margin: 0.3rem 0.4rem;
        background-color: var(--isms-nav-border);
    }

    .isms-topbar .isms-account-item {
        display: flex;
        min-height: 2.4rem;
        align-items: center;
        gap: 0.65rem;
        margin: 0.06rem 0;
        padding: 0.48rem 0.6rem;
        border-radius: 0.5rem;
        color: var(--isms-nav-text);
        font-size: 0.77rem;
        font-weight: 500;
    }

        .isms-topbar .isms-account-item i {
            width: 1.25rem;
            color: var(--isms-nav-muted);
            font-size: 1.05rem;
            text-align: center;
        }

        .isms-topbar .isms-account-item:hover,
        .isms-topbar .isms-account-item:focus {
            background-color: var(--isms-nav-blue-soft);
            color: var(--isms-nav-blue-dark);
        }

            .isms-topbar .isms-account-item:hover i,
            .isms-topbar .isms-account-item:focus i {
                color: var(--isms-nav-blue);
            }

    .isms-topbar .isms-account-logout,
    .isms-topbar .isms-account-logout i {
        color: var(--isms-nav-danger);
    }

        .isms-topbar .isms-account-logout:hover,
        .isms-topbar .isms-account-logout:focus {
            background-color: var(--isms-nav-danger-soft);
            color: var(--isms-nav-danger);
        }

/* Sidebar */

.nav-fixed #layoutSidenav #layoutSidenav_nav .isms-sidebar {
    padding-top: var(--isms-topbar-height);
}

.isms-sidebar {
    --bs-offcanvas-width: min( var(--isms-sidebar-mobile), calc(100vw - 1rem) );
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    background-color: var(--isms-nav-surface);
    color: var(--isms-nav-heading);
    box-shadow: 0.2rem 0 0.8rem rgba(33, 40, 50, 0.035);
}

    #layoutSidenav_nav .isms-sidebar.offcanvas-lg.offcanvas-start {
        border: 0;
    }

    .isms-sidebar::after {
        display: none;
        content: none;
    }

    .isms-sidebar .isms-sidebar-mobile-header {
        display: flex;
        min-height: 3.75rem;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        padding: 0.55rem 0.65rem 0.55rem 1rem;
        background-color: var(--isms-nav-surface);
    }

    .isms-sidebar .isms-sidebar-mobile-title {
        color: var(--isms-nav-heading);
        font-size: 0.83rem;
        font-weight: 700;
        letter-spacing: 0.01em;
    }

    .isms-sidebar .isms-sidebar-close {
        display: inline-flex;
        width: 2.25rem;
        height: 2.25rem;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        margin-right: 0;
        padding: 0;
        border: 1px solid transparent;
        border-radius: 0.55rem;
        background-color: transparent;
        color: var(--isms-nav-muted);
        font-size: 1.15rem;
    }

        .isms-sidebar .isms-sidebar-close:hover {
            border-color: var(--isms-nav-border);
            background-color: var(--isms-nav-page);
            color: var(--isms-nav-heading);
        }

.nav-fixed #layoutSidenav #layoutSidenav_nav
.isms-sidebar .isms-sidebar-navigation {
    overflow-x: hidden;
    overflow-y: auto;
}

.isms-sidebar .isms-sidebar-navigation {
    min-height: 0;
    flex: 1 1 auto;
    padding: 0.45rem 0.5rem 0.65rem;
    scrollbar-color: var(--isms-nav-border) transparent;
    scrollbar-width: thin;
}

    .isms-sidebar .isms-sidebar-navigation::-webkit-scrollbar {
        width: 0.28rem;
    }

    .isms-sidebar .isms-sidebar-navigation::-webkit-scrollbar-track {
        background-color: transparent;
    }

    .isms-sidebar .isms-sidebar-navigation::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background-color: transparent;
    }

    .isms-sidebar .isms-sidebar-navigation:hover::-webkit-scrollbar-thumb {
        background-color: var(--isms-nav-border);
    }

    .isms-sidebar .isms-sidebar-navigation > .nav {
        display: flex;
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        padding-top: 0;
    }

.isms-sidebar .isms-sidebar-navigation > .nav >
.sidenav-menu-heading,
.isms-sidebar .isms-sidebar-navigation > .nav >
.isms-nav-link,
.isms-sidebar .isms-sidebar-navigation > .nav >
.isms-nav-group {
    width: 100%;
    flex: 0 0 auto;
}

.isms-sidebar .isms-nav-group {
    min-width: 0;
}

.isms-sidebar .sidenav-menu-heading {
    height: 0.58rem;
    min-height: 0.58rem;
    margin: 0;
    overflow: hidden;
    padding: 0;
    color: transparent;
    font-size: 0;
    line-height: 0;
    user-select: none;
}

.isms-sidebar .isms-nav-link {
    position: relative;
    display: grid;
    min-height: 2.45rem;
    grid-template-columns: 2.15rem minmax(0, 1fr) 1.2rem;
    align-items: center;
    margin: 0.08rem 0;
    padding: 0.1rem 0.4rem 0.1rem 0.2rem;
    border: 0;
    border-radius: 0.55rem;
    background-color: transparent;
    color: var(--isms-sidebar-label);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
}

    .isms-sidebar .isms-nav-link::after {
        display: none;
        content: none;
    }

    .isms-sidebar .isms-nav-link::before {
        display: none;
        content: none;
    }

    .isms-sidebar .isms-nav-link > * {
        position: relative;
        z-index: 1;
    }

    .isms-sidebar .isms-nav-link:hover {
        background-color: var(--isms-nav-hover);
        color: var(--isms-nav-blue-dark);
    }

    .isms-sidebar .isms-nav-link.active {
        background-color: var(--isms-nav-active);
        color: var(--isms-nav-blue-dark);
        font-weight: 600;
    }

    .isms-sidebar .isms-nav-link:focus-visible {
        background-color: var(--isms-nav-hover);
        box-shadow: 0 0 0 0.18rem var(--isms-nav-focus);
        outline: 0;
    }

    .isms-sidebar .isms-nav-link .nav-link-icon {
        display: flex;
        width: 2.15rem;
        height: 2.05rem;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        background-color: transparent;
        color: var(--isms-nav-muted);
        font-size: 0.92rem;
    }

        .isms-sidebar .isms-nav-link .nav-link-icon i {
            color: inherit;
            font-size: inherit;
            line-height: 1;
        }

    .isms-sidebar .isms-nav-link:hover .nav-link-icon {
        color: var(--isms-nav-blue);
    }

    .isms-sidebar .isms-nav-link.active .nav-link-icon,
    .isms-sidebar .isms-nav-link.active .nav-link-icon i {
        background-color: transparent;
        color: var(--isms-nav-blue);
    }

.isms-sidebar .isms-nav-label {
    overflow: hidden;
    padding-right: 0.25rem;
    padding-left: 0.3rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.isms-sidebar .sidenav-collapse-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--isms-nav-muted);
    font-size: 0.78rem;
    transition: transform 130ms ease;
}

.isms-sidebar .isms-nav-link.collapsed .sidenav-collapse-arrow {
    transform: rotate(-90deg);
}

.isms-sidebar .isms-nav-link:not(.collapsed)
.sidenav-collapse-arrow {
    color: var(--isms-nav-blue);
}

.isms-sidebar .sidenav-menu-nested {
    display: flex;
    width: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    margin: 0.1rem 0.15rem 0.34rem 2.55rem;
    padding: 0.08rem 0;
    border: 0;
}

.isms-sidebar .isms-nav-sublink {
    position: relative;
    display: flex;
    min-height: 2rem;
    align-items: center;
    margin: 0.04rem 0;
    padding: 0.35rem 0.55rem;
    border-radius: 0.45rem;
    color: var(--isms-sidebar-label);
    font-size: 0.665rem;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    flex: 0 0 auto;
}

    .isms-sidebar .isms-nav-sublink::before {
        display: none;
        content: none;
    }

    .isms-sidebar .isms-nav-sublink:hover {
        background-color: var(--isms-nav-hover);
        color: var(--isms-nav-blue-dark);
    }

    .isms-sidebar .isms-nav-sublink.active {
        background-color: var(--isms-nav-active);
        color: var(--isms-nav-blue-dark);
        font-weight: 600;
    }

    .isms-sidebar .isms-nav-sublink.disabled {
        background-color: transparent;
        color: var(--isms-nav-subtle);
        opacity: 0.5;
    }

.isms-sidebar .isms-sidebar-footer {
    display: grid;
    flex: 0 0 auto;
    padding: 0.4rem 0.5rem 0.55rem;
    border: 0;
    background-color: var(--isms-nav-surface);
}

.isms-sidebar .isms-sidebar-utility {
    display: grid;
    min-height: 2.4rem;
    grid-template-columns: 2.15rem minmax(0, 1fr);
    align-items: center;
    margin: 0.06rem 0;
    padding: 0.08rem 0.4rem 0.08rem 0.2rem;
    border-radius: 0.55rem;
    color: var(--isms-sidebar-label);
    font-size: 0.68rem;
    font-weight: 500;
    text-decoration: none;
}

.isms-sidebar .isms-sidebar-utility-icon {
    display: flex;
    width: 2.15rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    color: inherit;
    font-size: 0.92rem;
}

.isms-sidebar .isms-sidebar-footer .isms-sidebar-label {
    min-width: 0;
    padding-left: 0.3rem;
}

.isms-sidebar .isms-sidebar-utility:hover {
    background-color: var(--isms-nav-hover);
    color: var(--isms-nav-blue);
}

.isms-sidebar .isms-sidebar-utility:focus-visible {
    background-color: var(--isms-nav-hover);
    box-shadow: 0 0 0 0.18rem var(--isms-nav-focus);
    outline: 0;
}

.isms-sidebar .isms-sidebar-utility.active {
    background-color: var(--isms-nav-active);
    color: var(--isms-nav-blue-dark);
}

.isms-sidebar .isms-sidebar-logout,
.isms-sidebar .isms-sidebar-logout:hover {
    color: var(--isms-nav-danger);
}

/* Collapsed desktop rail */

@media (min-width: 992px) {
    .isms-sidebar.offcanvas-lg {
        position: static;
        width: 100%;
        height: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 100ms ease;
    }

    body.isms-sidebar-collapsed
    .isms-sidebar.offcanvas-lg {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* Mobile offcanvas */

@media (max-width: 991.98px) {
    #layoutSidenav #layoutSidenav_nav,
    .nav-fixed #layoutSidenav #layoutSidenav_nav {
        width: 0;
        height: 0;
        flex-basis: 0;
        transform: none;
    }

    #layoutSidenav #layoutSidenav_content,
    .nav-fixed #layoutSidenav #layoutSidenav_content,
    body.isms-sidebar-collapsed
    #layoutSidenav #layoutSidenav_content {
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        top: var(--isms-topbar-height);
    }

    .nav-fixed #layoutSidenav
    #layoutSidenav_nav .isms-sidebar {
        padding-top: 0;
    }

    #layoutSidenav_nav .isms-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min( var(--isms-sidebar-mobile), calc(100vw - 1rem) );
        max-width: calc(100vw - 1rem);
        height: 100vh;
        height: 100dvh;
        z-index: 1045;
        box-shadow: 0.75rem 0 2rem var(--isms-nav-shadow);
    }

    .isms-sidebar::after {
        top: 0;
    }

    body.has-maintenance-notice
    #layoutSidenav_nav .isms-sidebar {
        top: var(--isms-maintenance-height);
        height: calc( 100dvh - var(--isms-maintenance-height) );
    }

    .offcanvas-backdrop {
        background-color: var(--isms-nav-overlay);
    }
}

@media (max-width: 575.98px) {
    .isms-topbar .isms-topbar-inner {
        padding-right: 0.45rem;
        padding-left: 0.45rem;
    }

    .isms-topbar .isms-topbar-brand {
        max-width: calc(100vw - 8rem);
    }

    .isms-topbar .isms-account-trigger {
        width: 2.75rem;
        min-width: 2.75rem;
        min-height: 2.75rem;
        justify-content: center;
        padding: 0.25rem;
    }

    .isms-topbar .isms-account-menu {
        position: fixed !important;
        z-index: 1055;
        inset: calc(var(--isms-topbar-height) - 0.1rem) 0.5rem auto auto !important;
        margin-top: 0;
        transform: none !important;
    }

    body.has-maintenance-notice .isms-topbar .isms-account-menu {
        top: calc(
            var(--isms-topbar-height) +
            var(--isms-maintenance-height) - 0.1rem
        ) !important;
    }
}

@media (min-width: 992px) {
    body.has-maintenance-notice
    #layoutSidenav #layoutSidenav_nav .isms-sidebar {
        padding-top: calc( var(--isms-topbar-height) + var(--isms-maintenance-height) );
    }
}

@media (prefers-reduced-motion: reduce) {
    #layoutSidenav #layoutSidenav_nav,
    #layoutSidenav #layoutSidenav_content,
    .isms-sidebar.offcanvas-lg,
    .isms-sidebar .isms-nav-link,
    .isms-sidebar .sidenav-collapse-arrow {
        transition: none;
    }
}