/* SCS Portal — modern sidebar navigation */

:root {
    --app-sidebar-width: 216px;
    --app-sidebar-gap: 6px;
    /* Flush to sidebar right edge (no gap between sidebar and glass/header) */
    --app-sidebar-offset: calc(var(--app-sidebar-width) + var(--app-sidebar-gap));
    /* Navbar bar height (taller standalone card) */
    --app-topnav-height: 52px;
    /* Equal air above & below the navbar card (inside content column) */
    --app-page-stack-gap: 0.65rem;
    --app-topnav-gap: var(--app-page-stack-gap);
    /* Offset from viewport = sidebar/glass top + equal gap */
    --app-topnav-top: calc(var(--app-sidebar-gap) + var(--app-topnav-gap));
    /* No extra shell Y inset — height is the visible card */
    --app-topnav-inset-y: 0px;
    /* Main content right pad (navbar right edge matches header) */
    --app-main-pad-right: 10px;
    --app-brand: #033D53;
    --app-ink: #32434B;
    --app-nav-hover: #E0F2FE;
    --app-nav-item-gap: 8px;
}

/* Disable MDB click ripple inside the sidebar */
.app-side-nav .waves-ripple {
    display: none !important;
}

.app-side-nav .waves-effect {
    overflow: visible !important;
}

/* Figma: floating white sidebar — outer never scrolls */
.app-side-nav.side-nav {
    width: var(--app-sidebar-width) !important;
    top: var(--app-sidebar-gap) !important;
    left: var(--app-sidebar-gap) !important;
    height: calc(100vh - var(--app-sidebar-gap) * 2) !important;
    height: calc(100dvh - var(--app-sidebar-gap) * 2) !important;
    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 8px 32px rgba(16, 24, 40, 0.08);
    border-radius: 10px 0 0 10px !important;
    padding: 10px 10px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 1040;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.app-side-nav.side-nav::-webkit-scrollbar,
.app-side-nav *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.app-side-nav,
.app-side-nav * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/*
 * App shell offsets — must live in global CSS (not Blazor scoped).
 */
@media (min-width: 1024px) {
    .app-side-nav.side-nav.fixed {
        transform: translateX(0) !important;
    }

    /* Geometry owned by app-responsive.css (navbar left/right = main margins) */
    .app-side-nav-toggle.button-collapse {
        display: none !important;
    }

    /* Desktop: never show MDB mobile sidenav dimmer (stuck overlay bug) */
    #sidenav-overlay,
    .drag-target {
        display: none !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }
}

@media (max-width: 1023px) {
    body.fixed-sn .double-nav,
    body.fixed-sn main,
    body.fixed-sn footer {
        padding-left: 0 !important;
    }

    .app-side-nav.side-nav {
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        border-radius: 0 !important;
    }
}

/* Top navbar shell — standalone card; top gap matches page-header stack gap */
body.fixed-sn .app-topnav-shell {
    position: fixed !important;
    top: var(--app-topnav-top, calc(var(--app-sidebar-gap) + var(--app-topnav-gap))) !important;
    left: calc(var(--app-sidebar-offset, calc(216px + 6px)) + var(--app-content-pad-x, 12px)) !important;
    right: calc(var(--app-shell-gutter-x, 6px) + var(--app-main-pad-right, 10px)) !important;
    height: var(--app-topnav-height) !important;
    min-height: var(--app-topnav-height) !important;
    max-height: var(--app-topnav-height) !important;
    background: #fff !important;
    background-color: #fff !important;
    border: 1px solid #e8eef4 !important;
    box-shadow: 0 1px 8px rgba(16, 24, 40, 0.04) !important;
    z-index: 1029 !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    isolation: isolate;
}

/*
 * Header must stack above <main> (main uses z-index for glass layering).
 * Otherwise page scroll paints content over the fixed navbar — clip breaks.
 */
body.fixed-sn .page > header {
    position: relative;
    z-index: 1030;
}

body.fixed-sn .app-topnav-shell .navbar.double-nav {
    pointer-events: auto;
}

/* Top navbar — fills shell */
body.fixed-sn .navbar.double-nav {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    box-sizing: border-box !important;
    top: var(--app-topnav-top, calc(var(--app-sidebar-gap) + var(--app-topnav-gap))) !important;
    height: var(--app-topnav-height) !important;
    min-height: var(--app-topnav-height) !important;
    max-height: var(--app-topnav-height) !important;
    /* Inset so Role / Lang / Notif hover pills don't touch shell border */
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    background: transparent !important;
    border-bottom: none !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    overflow: visible !important;
    z-index: 1030 !important;
}

/* Figma-style single bar wrapper — layout passthrough only (no visual change) */
body.fixed-sn .navbar.double-nav > .app-topnav-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body.fixed-sn .navbar.double-nav .top-nav-toolbar--main {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: calc(100% - 28px) !important;
    /* visible so active-client financial summary dropdown is not clipped */
    overflow: visible !important;
    margin-right: 24px !important;
}

body.fixed-sn .navbar.double-nav .top-nav-toolbar--actions {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    gap: 8px !important;
}

/* Phone/tablet: reserve space under fixed navbar (desktop uses fixed main below bar) */
@media (min-width: 600px) and (max-width: 1023px) {
    body.fixed-sn main,
    body.hidden-sn main {
        padding-top: calc(var(--app-topnav-height) + (var(--app-topnav-inset-y) * 2)) !important;
    }
}

html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

body.fixed-sn,
body.fixed-sn .page {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

.app-side-nav .sidenav-bg {
    display: none;
}

/* Shell list: pin header/footer; never scroll the whole panel */
.app-side-nav > ul.app-side-nav__scroll,
.app-side-nav > ul.custom-scrollbar {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Only the nav block can scroll (scrollbar fully hidden) */
.app-side-nav .app-side-nav__nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    margin-top: 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.app-side-nav .app-side-nav__nav::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.app-side-nav .app-side-nav__logo,
.app-side-nav .app-side-nav__user-snippet,
.app-side-nav .app-side-nav__logout {
    flex: 0 0 auto !important;
}

/* Extra spacer at end of MainNav causes fake sidebar scroll */
.app-side-nav .mb-5.pb-5,
.app-side-nav .app-main-nav + .mb-5 {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

.app-side-nav .app-side-nav__logo {
    padding: 0 4px 12px !important;
    margin-bottom: 0;
    border-bottom: none;
    background: transparent;
    text-align: left !important;
}

/* Logo: crop to full SCS letters only (hide tagline, no tall card) */
.app-side-nav .app-side-nav__logo .main-logo-wrap,
.app-side-nav .app-side-nav__logo .app-side-nav__logo-mark,
.app-side-nav .app-side-nav__logo > div {
    width: 86px !important;
    max-width: 86px !important;
    height: 44px !important;
    max-height: 44px !important;
    overflow: hidden !important;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
}

.app-side-nav .app-side-nav__logo .app-side-nav__logo-mark > div,
.app-side-nav .app-side-nav__logo .app-side-nav__logo-mark .main-logo-wrap {
    width: auto !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
}

.app-side-nav .app-side-nav__logo svg,
.app-side-nav .app-side-nav__logo img {
    /* viewBox 1539×512 → keep aspect; crop window shows SCS only */
    width: 132px !important;
    max-width: none !important;
    height: 44px !important;
    display: block;
    margin: 0 !important;
    transform: none;
}

/* Figma user block — avatar left, details right */
.app-side-nav .app-side-nav__user-snippet {
    padding: 8px 8px 10px !important;
    text-align: left !important;
}

.app-side-nav .app-side-nav__user-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.app-side-nav .app-side-nav__avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    margin: 0;
    background-color: #E0F2FE;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.app-side-nav .app-side-nav__avatar i {
    font-size: 17px;
    color: var(--app-ink);
}

.app-side-nav .app-side-nav__user-meta {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    margin-top: 2px;
}

.app-side-nav .app-side-nav__user-name {
    color: var(--app-ink);
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 2px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-side-nav .app-side-nav__user-role {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    color: var(--app-ink);
    font-size: 12px;
    font-weight: 400;
    max-width: 100%;
}

.app-side-nav .app-side-nav__user-role span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-side-nav .app-side-nav__user-role i {
    font-size: 12px;
    color: var(--app-ink);
    cursor: pointer;
    flex-shrink: 0;
}

.app-side-nav .app-side-nav__logout {
    margin-top: 12px;
    padding: 0;
}

.app-side-nav .app-side-nav__logout-link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 10px !important;
    min-height: 0 !important;
    height: auto !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    color: var(--app-ink) !important;
    font-weight: 500;
    background: transparent;
    border: none;
    border-radius: 4px;
    box-shadow: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    box-sizing: border-box;
}

.app-side-nav .app-side-nav__logout-link i {
    width: 1.25rem;
    min-width: 1.25rem;
    font-size: 1rem !important;
    line-height: 1;
    color: var(--app-ink);
    transition: color 0.15s ease;
}

/* Logout: light red hover, dark red press */
body.fixed-sn .app-side-nav .app-side-nav__logout-link:hover,
body.white-skin .app-side-nav .app-side-nav__logout-link:hover,
.app-side-nav .app-side-nav__logout-link:hover {
    background: #FEE2E2 !important;
    color: #B91C1C !important;
    border-color: transparent;
}

body.fixed-sn .app-side-nav .app-side-nav__logout-link:hover i,
body.white-skin .app-side-nav .app-side-nav__logout-link:hover i,
.app-side-nav .app-side-nav__logout-link:hover i,
body.fixed-sn .app-side-nav .app-side-nav__logout-link:hover span,
body.white-skin .app-side-nav .app-side-nav__logout-link:hover span,
.app-side-nav .app-side-nav__logout-link:hover span {
    color: #B91C1C !important;
}

body.fixed-sn .app-side-nav .app-side-nav__logout-link:active,
body.white-skin .app-side-nav .app-side-nav__logout-link:active,
.app-side-nav .app-side-nav__logout-link:active {
    background: #991B1B !important;
    color: #ffffff !important;
}

body.fixed-sn .app-side-nav .app-side-nav__logout-link:active i,
body.white-skin .app-side-nav .app-side-nav__logout-link:active i,
.app-side-nav .app-side-nav__logout-link:active i,
body.fixed-sn .app-side-nav .app-side-nav__logout-link:active span,
body.white-skin .app-side-nav .app-side-nav__logout-link:active span,
.app-side-nav .app-side-nav__logout-link:active span {
    color: #ffffff !important;
}

/* Figma nav: flat list — only ACTIVE is dark pill */
.app-main-nav.collapsible {
    margin: 10px 0 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: var(--app-nav-item-gap);
}

.app-main-nav > li,
.app-main-nav.collapsible > li {
    border-radius: 4px;
    margin-bottom: 0 !important;
}

.app-side-nav .collapsible > li > a,
.app-side-nav .collapsible > li > .collapsible-header,
.app-side-nav .app-main-nav > li > a,
.app-side-nav .app-main-nav__group > .collapsible-header,
.app-side-nav .app-main-nav__group-header {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 4px 10px !important;
    min-height: 0 !important;
    height: auto !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.25 !important;
    color: var(--app-ink) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.app-side-nav .collapsible .collapsible-header,
.app-side-nav .collapsible li.app-main-nav__group > .collapsible-header {
    position: relative;
    font-weight: 500;
}

.app-side-nav .collapsible a i,
.app-side-nav .collapsible .collapsible-header i.w-fa,
.app-side-nav .collapsible .collapsible-header i.fa,
.app-side-nav .app-main-nav__link > i.w-fa,
.app-side-nav .app-main-nav a i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    width: 1.35rem !important;
    min-width: 1.35rem !important;
    text-align: center;
    font-size: 1.1rem !important;
    color: var(--app-ink) !important;
    transition: color 0.15s ease;
}

.app-side-nav .app-main-nav__link > i.app-main-nav__home-icon svg {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
    flex-shrink: 0;
}

/* Figma sidebar icons — mask so color follows ink / active white */
.app-side-nav .app-main-nav i.app-nav-icon-home,
.app-side-nav .app-main-nav i.app-nav-icon-profile,
.app-side-nav .app-main-nav i.app-nav-icon-documents,
.app-side-nav .app-main-nav i.app-nav-icon-reporting,
.app-side-nav .app-main-nav i.app-nav-icon-funding,
.app-side-nav .app-main-nav i.app-nav-icon-permanent-funding,
.app-side-nav .app-main-nav i.app-nav-icon-funding-commitment,
.app-side-nav .app-main-nav i.app-nav-icon-financial-pressure,
.app-side-nav .app-main-nav i.app-nav-icon-impersonate,
.app-side-nav .app-main-nav i.app-nav-icon-vendor-approval,
.app-side-nav .app-main-nav i.app-nav-icon-billing,
.app-side-nav .app-main-nav i.app-nav-icon-invoice,
.app-side-nav .app-main-nav i.app-nav-icon-inquiry,
.app-side-nav .app-main-nav i.app-nav-icon-my-workers,
.app-side-nav .app-main-nav i.app-nav-icon-shifts,
.app-side-nav .app-main-nav i.app-nav-icon-my-schedule,
.app-side-nav .app-main-nav i.app-nav-icon-users,
.app-side-nav .app-main-nav i.app-nav-icon-roles,
.app-side-nav .app-side-nav__logout-link i.app-nav-icon-logout,
.app-side-nav .app-main-nav i.fas.fa-house,
.app-side-nav .app-main-nav i.fas.fa-home,
.app-side-nav .app-main-nav i.fas.fa-users-gear,
.app-side-nav .app-main-nav i.fa-solid.fa-users-gear,
.app-side-nav .app-main-nav i.fas.fa-user-shield,
.app-side-nav .app-main-nav i.fa-solid.fa-user-shield {
    font-size: 0 !important;
    line-height: 0 !important;
    width: 1.35rem !important;
    min-width: 1.35rem !important;
    height: 1.1rem !important;
    background-color: currentColor !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}

.app-side-nav .app-main-nav i.app-nav-icon-home,
.app-side-nav .app-main-nav i.fas.fa-house,
.app-side-nav .app-main-nav i.fas.fa-home {
    -webkit-mask-image: url("/images/icons/nav-home.svg") !important;
    mask-image: url("/images/icons/nav-home.svg") !important;
}
.app-side-nav .app-main-nav i.app-nav-icon-profile {
    -webkit-mask-image: url("/images/icons/nav-profile.svg") !important;
    mask-image: url("/images/icons/nav-profile.svg") !important;
}
.app-side-nav .app-main-nav i.app-nav-icon-documents {
    -webkit-mask-image: url("/images/icons/nav-documents.svg") !important;
    mask-image: url("/images/icons/nav-documents.svg") !important;
}
.app-side-nav .app-main-nav i.app-nav-icon-reporting {
    -webkit-mask-image: url("/images/icons/nav-reporting.svg") !important;
    mask-image: url("/images/icons/nav-reporting.svg") !important;
}
.app-side-nav .app-main-nav i.app-nav-icon-funding {
    -webkit-mask-image: url("/images/icons/nav-funding.svg") !important;
    mask-image: url("/images/icons/nav-funding.svg") !important;
}
.app-side-nav .app-main-nav i.app-nav-icon-permanent-funding {
    -webkit-mask-image: url("/images/icons/nav-permanent-funding.svg") !important;
    mask-image: url("/images/icons/nav-permanent-funding.svg") !important;
}
.app-side-nav .app-main-nav i.app-nav-icon-funding-commitment {
    -webkit-mask-image: url("/images/icons/nav-funding-commitment.svg") !important;
    mask-image: url("/images/icons/nav-funding-commitment.svg") !important;
}
.app-side-nav .app-main-nav i.app-nav-icon-financial-pressure {
    -webkit-mask-image: url("/images/icons/nav-financial-pressure.svg") !important;
    mask-image: url("/images/icons/nav-financial-pressure.svg") !important;
}
.app-side-nav .app-main-nav i.app-nav-icon-impersonate {
    -webkit-mask-image: url("/images/icons/nav-impersonate.svg") !important;
    mask-image: url("/images/icons/nav-impersonate.svg") !important;
}
.app-side-nav .app-main-nav i.app-nav-icon-vendor-approval {
    -webkit-mask-image: url("/images/icons/nav-vendor-approval.svg") !important;
    mask-image: url("/images/icons/nav-vendor-approval.svg") !important;
}
.app-side-nav .app-main-nav i.app-nav-icon-billing {
    -webkit-mask-image: url("/images/icons/nav-billing.svg") !important;
    mask-image: url("/images/icons/nav-billing.svg") !important;
}
.app-side-nav .app-main-nav i.app-nav-icon-invoice {
    -webkit-mask-image: url("/images/icons/nav-invoice.svg") !important;
    mask-image: url("/images/icons/nav-invoice.svg") !important;
}

.app-side-nav .app-main-nav i.app-nav-icon-inquiry {
    -webkit-mask-image: url("/images/icons/nav-inquiry.svg") !important;
    mask-image: url("/images/icons/nav-inquiry.svg") !important;
}
.app-side-nav .app-main-nav i.app-nav-icon-my-workers {
    -webkit-mask-image: url("/images/icons/nav-my-workers.svg") !important;
    mask-image: url("/images/icons/nav-my-workers.svg") !important;
}
.app-side-nav .app-main-nav i.app-nav-icon-shifts {
    -webkit-mask-image: url("/images/icons/nav-shifts.svg") !important;
    mask-image: url("/images/icons/nav-shifts.svg") !important;
}
.app-side-nav .app-main-nav i.app-nav-icon-my-schedule {
    -webkit-mask-image: url("/images/icons/nav-my-schedule.svg") !important;
    mask-image: url("/images/icons/nav-my-schedule.svg") !important;
}
.app-side-nav .app-side-nav__logout-link i.app-nav-icon-logout {
    -webkit-mask-image: url("/images/icons/nav-logout.svg") !important;
    mask-image: url("/images/icons/nav-logout.svg") !important;
}
/* User Management — Figma people icon */
.app-side-nav .app-main-nav i.app-nav-icon-users,
.app-side-nav .app-main-nav i.fas.fa-users-gear,
.app-side-nav .app-main-nav i.fa-solid.fa-users-gear {
    -webkit-mask-image: url("/images/icons/nav-users.svg") !important;
    mask-image: url("/images/icons/nav-users.svg") !important;
}
/* Role Management — Figma settings+check icon */
.app-side-nav .app-main-nav i.app-nav-icon-roles,
.app-side-nav .app-main-nav i.fas.fa-user-shield,
.app-side-nav .app-main-nav i.fa-solid.fa-user-shield {
    -webkit-mask-image: url("/images/icons/nav-roles.svg") !important;
    mask-image: url("/images/icons/nav-roles.svg") !important;
}

.app-side-nav .app-main-nav i.app-nav-icon-home::before,
.app-side-nav .app-main-nav i.app-nav-icon-profile::before,
.app-side-nav .app-main-nav i.app-nav-icon-documents::before,
.app-side-nav .app-main-nav i.app-nav-icon-reporting::before,
.app-side-nav .app-main-nav i.app-nav-icon-funding::before,
.app-side-nav .app-main-nav i.app-nav-icon-permanent-funding::before,
.app-side-nav .app-main-nav i.app-nav-icon-funding-commitment::before,
.app-side-nav .app-main-nav i.app-nav-icon-financial-pressure::before,
.app-side-nav .app-main-nav i.app-nav-icon-impersonate::before,
.app-side-nav .app-main-nav i.app-nav-icon-vendor-approval::before,
.app-side-nav .app-main-nav i.app-nav-icon-billing::before,
.app-side-nav .app-main-nav i.app-nav-icon-invoice::before,
.app-side-nav .app-main-nav i.app-nav-icon-inquiry::before,
.app-side-nav .app-main-nav i.app-nav-icon-my-workers::before,
.app-side-nav .app-main-nav i.app-nav-icon-shifts::before,
.app-side-nav .app-main-nav i.app-nav-icon-my-schedule::before,
.app-side-nav .app-main-nav i.app-nav-icon-users::before,
.app-side-nav .app-main-nav i.app-nav-icon-roles::before,
.app-side-nav .app-side-nav__logout-link i.app-nav-icon-logout::before,
.app-side-nav .app-main-nav i.fas.fa-house::before,
.app-side-nav .app-main-nav i.fas.fa-home::before,
.app-side-nav .app-main-nav i.fas.fa-users-gear::before,
.app-side-nav .app-main-nav i.fa-solid.fa-users-gear::before,
.app-side-nav .app-main-nav i.fas.fa-user-shield::before,
.app-side-nav .app-main-nav i.fa-solid.fa-user-shield::before {
    content: none !important;
    display: none !important;
}

.app-side-nav .collapsible > li > a:hover:not(.active) i,
.app-side-nav .collapsible > li > .collapsible-header:hover:not(.active) i,
.app-side-nav .app-main-nav__link:hover:not(.active) > i {
    color: var(--app-ink) !important;
}

.app-side-nav.side-nav .collapsible .collapsible-header .fa-angle-down.rotate-icon,
.app-side-nav.side-nav .collapsible .collapsible-header .rotate-icon {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin-right: 0 !important;
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--app-ink);
    transition: transform 0.2s ease, color 0.15s ease;
}

.app-side-nav .collapsible .collapsible-header.active .rotate-icon,
.app-side-nav .app-main-nav__group.active > .collapsible-header .rotate-icon,
.app-side-nav .app-main-nav__group.active > .app-main-nav__group-header .rotate-icon {
    transform: rotate(180deg);
    color: var(--app-ink);
}

.app-side-nav .collapsible .collapsible-header:hover .rotate-icon,
.app-side-nav .app-main-nav__group-header:hover .rotate-icon {
    color: var(--app-ink) !important;
}

/* Hover = light blue (Figma). Active stays solid brand. */
.app-side-nav .collapsible > li > a:hover:not(.active),
.app-side-nav .collapsible > li > .collapsible-header:hover:not(.active),
.app-side-nav .app-main-nav__group-header:hover:not(.active),
.app-side-nav .app-main-nav > li > a:hover:not(.active),
.app-main-nav__item > a:hover:not(.active),
.app-side-nav .collapsible-body ul.sub-menu li a:hover:not(.active) {
    background: var(--app-nav-hover) !important;
    color: var(--app-ink) !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 4px !important;
}

.app-side-nav .collapsible > li > a:hover:not(.active) i,
.app-side-nav .collapsible > li > .collapsible-header:hover:not(.active) i,
.app-main-nav__item > a:hover:not(.active) i,
.app-side-nav .collapsible-body ul.sub-menu li a:hover:not(.active) i,
.app-side-nav .app-main-nav__link:hover:not(.active) > i {
    color: var(--app-ink) !important;
}

/* Collapsible group: header → submenu gap = same as tab gap */
.app-main-nav__group {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--app-nav-item-gap) !important;
}

.app-main-nav__group > .app-main-nav__group-body.collapsible-body,
.app-side-nav .collapsible-body.app-main-nav__group-body {
    display: none;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.app-main-nav__group.active > .app-main-nav__group-body.collapsible-body {
    display: block !important;
}

/* Funding / Billing / etc. submenu — same gap as main tabs */
.app-side-nav .collapsible-body ul.sub-menu,
.app-side-nav .app-main-nav__sub-menu.sub-menu,
.app-main-nav__sub-menu.sub-menu {
    margin: 0 !important;
    padding: 0 0 0 18px !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--app-nav-item-gap) !important;
    row-gap: var(--app-nav-item-gap) !important;
}

.app-side-nav .collapsible-body ul.sub-menu > li,
.app-side-nav .app-main-nav__sub-menu > li {
    margin: 0 !important;
    padding: 0 !important;
}

.app-main-nav__sub-menu.sub-menu::before {
    display: none;
}

.app-side-nav.side-nav .collapsible a,
.app-side-nav.side-nav .collapsible-body a,
.app-side-nav.side-nav .collapsible-body ul.sub-menu li a {
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.app-main-nav__item > a {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    margin: 0 !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.25 !important;
    color: var(--app-ink) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
}

/* FC / Funding submenu — same pill size as main tabs (blue hover/active equal) */
.app-side-nav .collapsible-body ul.sub-menu li a {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    margin: 0 !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.25 !important;
    color: var(--app-ink) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
}

.app-main-nav__link > i,
.app-side-nav .collapsible-body ul.sub-menu li a > i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0 !important;
    width: 1.35rem !important;
    min-width: 1.35rem !important;
    font-size: 1.1rem !important;
    color: var(--app-ink);
}

.app-main-nav__link-label {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    word-break: normal;
    overflow-wrap: break-word;
}

.app-main-nav__item > a:hover:not(.active),
.app-side-nav .collapsible-body ul.sub-menu li a:hover:not(.active) {
    background: var(--app-nav-hover) !important;
    color: var(--app-ink) !important;
    border: none !important;
}

.app-main-nav__item > a:hover:not(.active) i,
.app-side-nav .collapsible-body ul.sub-menu li a:hover:not(.active) i {
    color: var(--app-ink) !important;
}

/* Active / selected = same size as hover (no extra padding).
   Only leaf nav links (.app-main-nav__link) — never Funding/Billing group headers. */
.app-main-nav__item--active > a,
.app-active-sub-menu-item > a,
.app-side-nav .collapsible-body ul.sub-menu li a.active,
.app-side-nav .collapsible > li > a.app-main-nav__link.active,
.app-side-nav .app-main-nav > li > a.app-main-nav__link.active {
    background: var(--app-brand) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    border: none !important;
    box-shadow: none !important;
}

/* Top-level + Funding/Billing group headers — same row layout */
.app-side-nav .app-main-nav > li > a.app-main-nav__link,
.app-side-nav .app-main-nav__item > a.app-main-nav__link,
.app-side-nav .app-main-nav__group > a.app-main-nav__group-header,
.app-side-nav .app-main-nav__group > .collapsible-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 4px 10px !important;
    box-sizing: border-box !important;
}

/* Kill MDB icon margin so Funding/Billing text lines up with Profile/etc. */
.app-side-nav .app-main-nav__group > a.app-main-nav__group-header > i.w-fa,
.app-side-nav .app-main-nav__group > .collapsible-header > i.w-fa,
.app-side-nav .app-main-nav > li > a.app-main-nav__link > i.w-fa {
    margin: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

/* Funding/Billing glyphs optically smaller — match other tab icon weight */
.app-side-nav .app-main-nav__group > a.app-main-nav__group-header > i.w-fa,
.app-side-nav .app-main-nav__group > .collapsible-header > i.w-fa:not(.rotate-icon) {
    width: 1.35rem !important;
    min-width: 1.35rem !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    transform: scale(1.08);
    transform-origin: center;
}

/* Chevron stays on the right — never sized like a leading nav icon */
.app-side-nav .app-main-nav__group > a.app-main-nav__group-header > .rotate-icon,
.app-side-nav .app-main-nav__group > .collapsible-header > .rotate-icon,
.app-side-nav.side-nav .collapsible .collapsible-header .fa-angle-down.rotate-icon {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 0 0 auto !important;
    flex-shrink: 0 !important;
    font-size: 0.75rem !important;
}

.app-main-nav__item--active > a > i,
.app-active-sub-menu-item > a > i,
.app-side-nav .collapsible-body ul.sub-menu li a.active > i,
.app-side-nav .collapsible > li > a.app-main-nav__link.active > i,
.app-side-nav .app-main-nav > li > a.app-main-nav__link.active > i,
.app-side-nav .app-main-nav a.app-main-nav__link.active > i,
.app-side-nav .app-main-nav a.app-main-nav__link.active i {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Collapsed group headers — ink, no pill */
.app-side-nav .app-main-nav__group > .collapsible-header:not(.active),
.app-side-nav .app-main-nav__group > .app-main-nav__group-header:not(.active) {
    background: transparent !important;
    color: var(--app-ink) !important;
    font-weight: 500 !important;
    border: none !important;
    box-shadow: none !important;
}

.app-side-nav .app-main-nav__group > .collapsible-header:not(.active) > i,
.app-side-nav .app-main-nav__group > .app-main-nav__group-header:not(.active) > i {
    color: var(--app-ink) !important;
}

/*
 * Parent Funding/Billing/… highlighted when expanded OR child page active.
 * Header .active = expanded (MDB); li.active = child route selected.
 */
.app-side-nav .app-main-nav__group > .app-main-nav__group-header.active,
.app-side-nav .app-main-nav__group > .collapsible-header.active,
.app-side-nav .app-main-nav__group.active > .app-main-nav__group-header,
.app-side-nav .app-main-nav__group.active > .collapsible-header,
.white-skin .side-nav .collapsible li.app-main-nav__group .collapsible-header.active,
.navy-blue-skin .side-nav .collapsible li.app-main-nav__group .collapsible-header.active,
body.white-skin .app-side-nav.side-nav .app-main-nav__group > .app-main-nav__group-header.active,
body.white-skin .app-side-nav.side-nav .app-main-nav__group > .collapsible-header.active,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__group > .app-main-nav__group-header.active,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__group > .collapsible-header.active,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__group.active > .app-main-nav__group-header,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__group.active > .collapsible-header {
    background: var(--app-brand, #033D53) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    border: none !important;
    box-shadow: none !important;
}

.app-side-nav .app-main-nav__group > .app-main-nav__group-header.active > i,
.app-side-nav .app-main-nav__group > .collapsible-header.active > i,
.app-side-nav .app-main-nav__group.active > .app-main-nav__group-header > i,
.app-side-nav .app-main-nav__group.active > .collapsible-header > i,
.app-side-nav .app-main-nav__group > .app-main-nav__group-header.active .app-main-nav__link-label,
.app-side-nav .app-main-nav__group > .collapsible-header.active .app-main-nav__link-label,
.app-side-nav .app-main-nav__group.active > .app-main-nav__group-header .app-main-nav__link-label,
.app-side-nav .app-main-nav__group.active > .collapsible-header .app-main-nav__link-label,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__group > .app-main-nav__group-header.active > i,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__group > .collapsible-header.active > i,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__group.active > .app-main-nav__group-header > i,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__group.active > .collapsible-header > i,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__group > .app-main-nav__group-header.active .app-main-nav__link-label,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__group > .collapsible-header.active .app-main-nav__link-label,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__group.active > .app-main-nav__group-header .app-main-nav__link-label,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__group.active > .collapsible-header .app-main-nav__link-label {
    color: #ffffff !important;
}

.white-skin .side-nav .collapsible-body a,
.navy-blue-skin .side-nav .collapsible-body a {
    background-color: transparent !important;
}

/* FC Rollover — one label (wrap as needed, not separate rooms) */
.app-main-nav__link--two-line {
    align-items: flex-start !important;
    min-height: 0 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.app-main-nav__link--two-line > i {
    margin-top: 0.15rem;
}

.app-nav-two-line-label {
    display: inline;
    line-height: 1.25;
    white-space: normal;
}

.app-nav-two-line-label__line {
    display: inline;
}

.app-nav-two-line-label__line + .app-nav-two-line-label__line::before {
    content: " ";
}

/* Participant-required dimming (existing behavior) */
.app-side-nav .participant-not-selected .collapsible a,
.app-side-nav .participant-not-selected .collapsible .collapsible-header {
    opacity: 0.55;
}

/* Kill MDB PerfectScrollbar chrome inside sidebar */
.app-side-nav .ps__rail-x,
.app-side-nav .ps__rail-y,
.app-side-nav .ps__thumb-x,
.app-side-nav .ps__thumb-y {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
}

.white-skin .side-nav .collapsible-body a,
.navy-blue-skin .side-nav .collapsible-body a {
    background-color: transparent !important;
}

/* Sidebar toggle (hamburger) */
.app-side-nav-toggle.button-collapse {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.5rem;
    color: #033D53 !important;
    background: #E0F2FE;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.app-side-nav-toggle.button-collapse:hover {
    background: #E0F2FE;
    color: #033D53 !important;
}

@media (max-width: 1023px) {
    .app-side-nav-toggle.button-collapse {
        display: inline-flex;
    }
}

/* Collapsible group open state */
.app-main-nav__group.active > .app-main-nav__group-body {
    display: block !important;
}

.app-main-nav__group-header.active,
.app-main-nav__group.active > .app-main-nav__group-header,
.app-main-nav__group.active > .app-main-nav__group-header.active {
    background: var(--app-brand, #033D53) !important;
    color: #ffffff !important;
}

/* Nav items that require active client/project before navigation */
.app-main-nav__item--requires-context > a,
.app-main-nav li.app-main-nav__item--requires-context > a {
    opacity: 0.72;
}

.app-main-nav__group.app-main-nav__item--requires-context > .app-main-nav__group-header {
    opacity: 0.72;
}

/*
 * Beat MDB white-skin: hover = light blue + dark text; page-active = solid brand + white.
 * Hover must NOT apply to .active (expanded / selected stays brand).
 */
body.white-skin .app-side-nav.side-nav .collapsible > li > a.app-main-nav__link:hover:not(.active),
body.white-skin .app-side-nav.side-nav .collapsible > li > .collapsible-header:hover:not(.active),
body.white-skin .app-side-nav.side-nav .collapsible li a.app-main-nav__link:hover:not(.active),
body.white-skin .app-side-nav.side-nav .collapsible li .collapsible-body a:hover:not(.active),
body.fixed-sn .app-side-nav.side-nav .collapsible > li > a.app-main-nav__link:hover:not(.active),
body.fixed-sn .app-side-nav.side-nav .collapsible > li > .collapsible-header:hover:not(.active),
body.fixed-sn .app-side-nav.side-nav .app-main-nav__item > a:hover:not(.active),
body.fixed-sn .app-side-nav.side-nav .collapsible-body ul.sub-menu li a:hover:not(.active) {
    background: #E0F2FE !important;
    color: var(--app-ink) !important;
}

/* Instant mousedown feedback = solid brand (before Blazor re-render) */
body.white-skin .app-side-nav.side-nav a.app-main-nav__link:active,
body.fixed-sn .app-side-nav.side-nav a.app-main-nav__link:active,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__item > a:active,
body.fixed-sn .app-side-nav.side-nav .collapsible-body ul.sub-menu li a:active {
    background: #033D53 !important;
    color: #ffffff !important;
}

body.white-skin .app-side-nav.side-nav a.app-main-nav__link:active *,
body.fixed-sn .app-side-nav.side-nav a.app-main-nav__link:active *,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__item > a:active *,
body.fixed-sn .app-side-nav.side-nav .collapsible-body ul.sub-menu li a:active * {
    color: #ffffff !important;
}

body.white-skin .app-side-nav.side-nav .collapsible li a.app-main-nav__link.active,
body.white-skin .app-side-nav.side-nav .collapsible li .collapsible-body a.active,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__item--active > a,
body.fixed-sn .app-side-nav.side-nav .collapsible-body ul.sub-menu li a.active {
    background: #033D53 !important;
    color: #ffffff !important;
}

body.white-skin .app-side-nav.side-nav .collapsible > li > a.app-main-nav__link:hover:not(.active) *,
body.white-skin .app-side-nav.side-nav .collapsible > li > .collapsible-header:hover:not(.active) *,
body.white-skin .app-side-nav.side-nav .collapsible li a.app-main-nav__link:hover:not(.active) *,
body.white-skin .app-side-nav.side-nav .collapsible li .collapsible-body a:hover:not(.active) *,
body.fixed-sn .app-side-nav.side-nav .collapsible > li > a.app-main-nav__link:hover:not(.active) *,
body.fixed-sn .app-side-nav.side-nav .collapsible > li > .collapsible-header:hover:not(.active) *,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__item > a:hover:not(.active) *,
body.fixed-sn .app-side-nav.side-nav .collapsible-body ul.sub-menu li a:hover:not(.active) *,
body.fixed-sn .app-side-nav.side-nav a.app-main-nav__link:hover:not(.active) .app-main-nav__link-label,
body.fixed-sn .app-side-nav.side-nav .collapsible-header:hover:not(.active) .app-main-nav__link-label {
    color: var(--app-ink) !important;
}

body.white-skin .app-side-nav.side-nav .collapsible li a.app-main-nav__link.active *,
body.white-skin .app-side-nav.side-nav .collapsible li .collapsible-body a.active *,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__item--active > a *,
body.fixed-sn .app-side-nav.side-nav .collapsible-body ul.sub-menu li a.active *,
body.fixed-sn .app-side-nav.side-nav a.app-main-nav__link.active .app-main-nav__link-label,
body.fixed-sn .app-side-nav.side-nav .collapsible-body a.active .app-main-nav__link-label,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__item--active > a .app-main-nav__link-label {
    color: #ffffff !important;
}

/* Active item: hover pe bhi solid brand (selected stay selected look) */
body.white-skin .app-side-nav.side-nav .collapsible li a.app-main-nav__link.active:hover,
body.white-skin .app-side-nav.side-nav .collapsible li .collapsible-body a.active:hover,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__item--active > a:hover,
body.fixed-sn .app-side-nav.side-nav .collapsible-body ul.sub-menu li a.active:hover {
    background: #033D53 !important;
    color: #ffffff !important;
}

body.white-skin .app-side-nav.side-nav .collapsible li a.app-main-nav__link.active:hover *,
body.white-skin .app-side-nav.side-nav .collapsible li .collapsible-body a.active:hover *,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__item--active > a:hover *,
body.fixed-sn .app-side-nav.side-nav .collapsible-body ul.sub-menu li a.active:hover * {
    color: #ffffff !important;
}

/* Expanded or route-active parent: stay brand on hover too */
body.fixed-sn .app-side-nav.side-nav .app-main-nav__group > .app-main-nav__group-header.active:hover,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__group > .collapsible-header.active:hover,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__group.active > .app-main-nav__group-header:hover,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__group.active > .collapsible-header:hover,
body.white-skin .app-side-nav.side-nav .app-main-nav__group > .app-main-nav__group-header.active:hover,
body.white-skin .app-side-nav.side-nav .app-main-nav__group > .collapsible-header.active:hover,
body.white-skin .app-side-nav.side-nav .app-main-nav__group.active > .app-main-nav__group-header:hover,
body.white-skin .app-side-nav.side-nav .app-main-nav__group.active > .collapsible-header:hover {
    background: #033D53 !important;
    color: #ffffff !important;
}

body.fixed-sn .app-side-nav.side-nav .app-main-nav__group > .app-main-nav__group-header.active:hover *,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__group > .collapsible-header.active:hover *,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__group.active > .app-main-nav__group-header:hover *,
body.fixed-sn .app-side-nav.side-nav .app-main-nav__group.active > .collapsible-header:hover *,
body.white-skin .app-side-nav.side-nav .app-main-nav__group > .app-main-nav__group-header.active:hover *,
body.white-skin .app-side-nav.side-nav .app-main-nav__group > .collapsible-header.active:hover *,
body.white-skin .app-side-nav.side-nav .app-main-nav__group.active > .app-main-nav__group-header:hover *,
body.white-skin .app-side-nav.side-nav .app-main-nav__group.active > .collapsible-header:hover * {
    color: #ffffff !important;
}