/* ==========================================================================
   NeoConnect AdminLTE Sidebar Overrides
   Appearance overrides for the existing Laravel AdminLTE menu.
   Menu order, text, and role rules remain in their current configuration.
   ========================================================================== */

.main-sidebar.sidebar-dark-primary {
    --d2-bg: var(--neoconnect-background-dark);
    --d2-text: var(--neoconnect-theme-text);
    --d2-muted: var(--neoconnect-theme-text);
    --d2-subtle: var(--neoconnect-theme-text);
    --d2-icon: var(--neoconnect-theme-text);
    --d2-icon-rail: var(--neoconnect-theme-text);
    --d2-line: rgba(var(--neoconnect-theme-text-rgb), 0.1);
    --d2-hover: var(--neoconnect-theme-hover);
    --d2-open-text: var(--neoconnect-theme-text);
    --d2-accent: var(--neoconnect-purple);
    --d2-accent-soft: var(--neoconnect-theme-active);
    --d2-accent-active: var(--neoconnect-purple);
    --d2-parent-active-text: var(--neoconnect-theme-active-text);
    --d2-hover-text: var(--neoconnect-theme-text);
    --d2-focus-text: var(--neoconnect-theme-text);
    --d2-active-text: var(--neoconnect-active-deepest-text);
    --d2-focus: var(--neoconnect-purple);
    --d2-scrollbar-thumb: rgba(var(--neoconnect-theme-text-rgb), 0.22);
    --d2-scrollbar-thumb-hover: rgba(var(--neoconnect-theme-text-rgb), 0.34);
    --d2-pending: var(--neoconnect-notification);

    background-color: var(--d2-bg);
    border-right: 1px solid var(--d2-line);
}

html[data-neoconnect-theme="light"] .main-sidebar.sidebar-dark-primary {
    --d2-bg: var(--neoconnect-background-light);
    --d2-text: var(--neoconnect-theme-text);
    --d2-muted: var(--neoconnect-theme-text);
    --d2-subtle: var(--neoconnect-theme-text);
    --d2-icon: var(--neoconnect-theme-text);
    --d2-icon-rail: var(--neoconnect-theme-text);
    --d2-line: rgba(var(--neoconnect-theme-text-rgb), 0.12);
    --d2-hover: var(--neoconnect-theme-hover);
    --d2-open-text: var(--neoconnect-theme-text);
    --d2-accent: var(--neoconnect-purple);
    --d2-accent-soft: var(--neoconnect-theme-active);
    --d2-accent-active: var(--neoconnect-purple);
    --d2-parent-active-text: var(--neoconnect-theme-active-text);
    --d2-hover-text: var(--neoconnect-theme-text);
    --d2-focus-text: var(--neoconnect-theme-text);
    --d2-active-text: var(--neoconnect-active-deepest-text);
    --d2-focus: var(--neoconnect-purple);
    --d2-scrollbar-thumb: rgba(var(--neoconnect-theme-text-rgb), 0.22);
    --d2-scrollbar-thumb-hover: rgba(var(--neoconnect-theme-text-rgb), 0.34);
}

html[data-neoconnect-theme="dark"] .preloader {
    background-color: var(--neoconnect-background-dark) !important;
    color: #fff;
}

html[data-neoconnect-theme="light"] .preloader {
    background-color: var(--neoconnect-background-light) !important;
    color: #000;
}

.main-sidebar.sidebar-dark-primary .brand-link {
    border-bottom: 1px solid var(--d2-line);
}

.main-sidebar.sidebar-dark-primary .brand-link:not(.logo-switch) {
    display: flex;
    align-items: center;
}

.main-sidebar.sidebar-dark-primary .brand-link:not(.logo-switch) > .brand-image {
    float: none;
    flex: 0 0 auto;
    margin-top: 0;
}

.main-sidebar.sidebar-dark-primary .brand-link:not(.logo-switch) > .brand-text {
    align-self: center;
    line-height: 1.2;
    vertical-align: middle;
}

.sidebar-mobile-close {
    display: none;
}

.main-sidebar.sidebar-dark-primary .brand-text,
.main-sidebar.sidebar-dark-primary .brand-text b {
    color: var(--neoconnect-purple);
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link {
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 7px;
    color: var(--d2-text);
    transition: background-color 160ms ease, color 160ms ease;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-item > .nav-link {
    box-sizing: border-box;
    width: calc(100% - 16px);
    margin-left: 8px;
    margin-right: 8px;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link > p {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link > p > .nav-label {
    flex: 1 1 auto;
    min-width: 0;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link > p > .badge,
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link > p > i.right {
    position: static !important;
    flex: 0 0 auto;
    margin-left: 8px;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link > p > .badge {
    order: 2;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link > p > i.right {
    order: 3;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link {
    margin: 2px 8px;
    padding: 9px 12px 9px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.005em;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item {
    box-sizing: border-box;
    width: 100%;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-treeview {
    --d2-guide-offset: 27px;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview .nav-treeview {
    --d2-guide-offset: 43px;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview .nav-treeview .nav-treeview {
    --d2-guide-offset: 59px;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview::before {
    position: absolute;
    z-index: 2;
    top: 5px;
    bottom: 5px;
    left: var(--d2-guide-offset, 27px);
    width: 1px;
    border-radius: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(var(--neoconnect-theme-text-rgb), var(--neoconnect-submenu-guide-opacity)) 12%,
        rgba(var(--neoconnect-theme-text-rgb), var(--neoconnect-submenu-guide-opacity)) 88%,
        transparent
    );
    content: "";
    pointer-events: none;
}

/* Preserve every active submenu level when the page loads on a nested route. */
.main-sidebar.sidebar-dark-primary .nav-sidebar .menu-open > .nav-treeview {
    display: block !important;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link {
    width: calc(100% - 16px);
    margin: 2px 8px;
    padding: 7px 12px 7px 40px;
    border-radius: 6px;
    color: var(--d2-muted);
    font-size: 12.5px;
    font-weight: 500;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview .nav-treeview > .nav-item > .nav-link {
    padding-left: 58px;
    color: var(--d2-subtle);
    font-size: 12px;
    font-weight: 400;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link i:not(.right),
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link svg:not(.right),
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link i.right,
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link svg.right {
    color: var(--d2-icon);
}

.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link > i:not(.right) {
    width: 18px;
    margin-right: 10px;
    color: var(--d2-icon);
    font-size: 14px;
    text-align: center;
    transition: color 160ms ease;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview .nav-link > i:not(.right) {
    width: 14px;
    margin-right: 8px;
    font-size: 11px;
}

/* Scope caret styling to the icon. Badges also use AdminLTE's right class. */
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link > p > i.right,
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link > p > svg.right {
    color: var(--d2-icon);
    font-size: 9px;
    opacity: 1;
}

.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover,
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {
    background-color: var(--d2-hover);
    color: var(--d2-hover-text);
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link:hover > i:not(.right),
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link:focus-visible > i:not(.right) {
    color: var(--d2-hover-text);
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link.active > i:not(.right) {
    color: var(--d2-active-text);
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link:active {
    color: var(--d2-text);
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link:active > i:not(.right),
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link:active > p > i.right {
    color: var(--d2-icon);
}

.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item.menu-open > .nav-link:not(.active),
.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item.menu-is-opening > .nav-link:not(.active),
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item.menu-open > .nav-link:not(.active),
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item.menu-is-opening > .nav-link:not(.active) {
    background-color: transparent;
    color: var(--d2-open-text);
}

.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item.menu-open > .nav-link:not(.active):hover,
.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item.menu-is-opening > .nav-link:not(.active):hover,
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item.menu-open > .nav-link:not(.active):hover,
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item.menu-is-opening > .nav-link:not(.active):hover {
    background-color: var(--d2-hover);
    color: var(--d2-hover-text);
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link:focus:not(:hover),
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link:focus-visible:not(:hover) {
    background-color: transparent;
    color: var(--d2-focus-text);
}

.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item:hover > .nav-link:not(.active),
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item:hover > .nav-link:not(.active) {
    background-color: var(--d2-hover);
    color: var(--d2-hover-text);
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-treeview > .nav-item > .nav-link.active,
.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--d2-accent-active);
    color: var(--d2-active-text);
    font-weight: 600;
    box-shadow: 0 3px 12px rgba(var(--neoconnect-purple-rgb), 0.22);
}

.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link:focus-visible {
    outline: 2px solid var(--d2-focus);
    outline-offset: -2px;
}

/* Mark the active leaf; active ancestors keep a quieter background. */
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-item > .nav-link.active::before {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: -16px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background-color: var(--d2-accent);
    content: "";
}

@supports selector(.nav-item:has(+ .nav-treeview .nav-link.active)) {
    .main-sidebar.sidebar-dark-primary .nav-sidebar .nav-item > .nav-link.active:has(+ .nav-treeview .nav-link.active) {
        background-color: var(--d2-accent-soft);
        color: var(--d2-parent-active-text);
        font-weight: 600;
        box-shadow: none;
    }

    .main-sidebar.sidebar-dark-primary .nav-sidebar .nav-item > .nav-link.active:has(+ .nav-treeview .nav-link.active) > i:not(.right),
    .main-sidebar.sidebar-dark-primary .nav-sidebar .nav-item > .nav-link.active:has(+ .nav-treeview .nav-link.active) > svg:not(.right),
    .main-sidebar.sidebar-dark-primary .nav-sidebar .nav-item > .nav-link.active:has(+ .nav-treeview .nav-link.active) > p > i.right,
    .main-sidebar.sidebar-dark-primary .nav-sidebar .nav-item > .nav-link.active:has(+ .nav-treeview .nav-link.active) > p > svg.right {
        color: var(--d2-parent-active-text);
    }

    .main-sidebar.sidebar-dark-primary .nav-sidebar .nav-item > .nav-link.active:has(+ .nav-treeview .nav-link.active)::before {
        display: none;
    }
}

/* Pending work indicator. The existing parent badge reflects pending children,
   so it remains visible even while the submenu is closed. */
.main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link > p > .badge {
    display: block !important;
    width: 8px !important;
    min-width: 8px;
    height: 8px !important;
    padding: 0 !important;
    border: 2px solid var(--d2-bg);
    border-radius: 50% !important;
    background-color: var(--d2-pending) !important;
    box-shadow: 0 0 0 1px rgba(var(--neoconnect-notification-rgb), 0.36), 0 0 8px rgba(var(--neoconnect-notification-rgb), 0.34);
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    opacity: 1;
    overflow: hidden;
    animation: d2-notification-pulse 1.1s ease-in-out infinite;
}

@keyframes d2-notification-pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 1px rgba(var(--neoconnect-notification-rgb), 0.36), 0 0 7px rgba(var(--neoconnect-notification-rgb), 0.32);
    }

    50% {
        opacity: 0.48;
        box-shadow: 0 0 0 4px rgba(var(--neoconnect-notification-rgb), 0.16), 0 0 11px rgba(var(--neoconnect-notification-rgb), 0.42);
    }
}

/* Add breathing room before each top-level submenu group. */
@supports selector(.nav-item:has(> .nav-link)) {
    .main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item:has(> .nav-treeview) {
        margin-top: 8px;
    }
}

@media (min-width: 992px) {
    /* Keep menu rows and icons rendered in the collapsed rail. AdminLTE hides
       the labels here; it should not hide the navigation items themselves. */
    body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar,
    body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar nav,
    body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar .nav-sidebar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar .sidebar .nav-sidebar {
        display: flex !important;
        flex-direction: column;
    }

    /* Keep the actual menu content within the 4.6rem rail. Without this,
       centered links can remain positioned in the full 250px sidebar and get
       clipped by AdminLTE's overflow-x:hidden rule when collapsed. */
    body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .sidebar,
    body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .sidebar .os-content,
    body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .sidebar nav,
    body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar,
    body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-treeview,
    body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar > .nav-item,
    body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-treeview > .nav-item {
        box-sizing: border-box;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar > .nav-item,
    body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-treeview > .nav-item {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-item > .nav-link {
        display: flex !important;
        align-items: center;
        justify-content: center;
        visibility: visible !important;
        opacity: 1 !important;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar .nav-sidebar .nav-link > i:not(.right) {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Keep labels clipped in the rail while allowing the badge to sit beside it. */
    body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-link > p {
        display: flex !important;
        width: 0 !important;
        max-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        vertical-align: middle;
        white-space: nowrap;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar > .nav-item > .nav-link,
    body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-treeview > .nav-item > .nav-link {
        box-sizing: border-box;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 4px 0;
        padding: 10px 0;
        text-align: center;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-link > i:not(.right) {
        display: inline-block;
        width: 20px !important;
        margin: 0 !important;
        color: var(--d2-icon-rail);
        font-size: 16px;
        text-align: center;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-dark-primary:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-link.active > i:not(.right),
    body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-dark-primary:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-link.active > svg:not(.right) {
        color: var(--d2-active-text);
    }

    @supports selector(.nav-item:has(+ .nav-treeview .nav-link.active)) {
        body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-dark-primary:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-item > .nav-link.active:has(+ .nav-treeview .nav-link.active) > i:not(.right),
        body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-dark-primary:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-item > .nav-link.active:has(+ .nav-treeview .nav-link.active) > svg:not(.right) {
            color: var(--d2-parent-active-text);
        }
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-link > p > i.right {
        visibility: hidden;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-treeview::before {
        display: none;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-dark-primary:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-item > .nav-link.active::before {
        left: -8px;
        top: 5px;
        bottom: 5px;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover):not(.sidebar-focused) .nav-sidebar .nav-link > p > .badge {
        position: absolute !important;
        top: 5px !important;
        right: calc(50% - 14px) !important;
        margin: 0 !important;
        flex: none;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link,
    body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link {
        width: auto;
        text-align: left;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar > .nav-item > .nav-link,
    body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar > .nav-item > .nav-link {
        margin: 2px 8px;
        padding: 9px 12px 9px 16px;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-treeview > .nav-item > .nav-link,
    body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-treeview > .nav-item > .nav-link {
        margin: 2px 8px;
        padding: 7px 12px 7px 40px;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-treeview .nav-treeview > .nav-item > .nav-link,
    body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-treeview .nav-treeview > .nav-item > .nav-link {
        padding-left: 58px;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link > p,
    body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link > p {
        display: flex !important;
        flex: 1 1 auto;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        color: inherit !important;
        font-size: inherit !important;
        line-height: inherit !important;
        visibility: visible !important;
        white-space: nowrap;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .nav-sidebar .nav-link > p > i.right,
    body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .nav-sidebar .nav-link > p > i.right {
        visibility: visible;
    }

    body.sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-text,
    body.sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused .brand-text {
        margin-left: 0;
        visibility: visible !important;
    }

}

/* OverlayScrollbars and native scrollbar fallback */
.main-sidebar.sidebar-dark-primary .os-scrollbar-vertical {
    width: 7px;
}

.main-sidebar.sidebar-dark-primary .os-scrollbar-vertical .os-scrollbar-handle {
    border-radius: 99px;
    background-color: var(--d2-scrollbar-thumb) !important;
}

.main-sidebar.sidebar-dark-primary .os-scrollbar-vertical:hover .os-scrollbar-handle,
.main-sidebar.sidebar-dark-primary .os-scrollbar-vertical .os-scrollbar-handle:hover {
    background-color: var(--d2-scrollbar-thumb-hover) !important;
}

.main-sidebar.sidebar-dark-primary .os-scrollbar .os-scrollbar-track {
    background-color: transparent !important;
}

/* Theme picker in the navbar. */
.main-header.navbar-neo-purple.navbar-dark,
.main-header.navbar-neo-purple.navbar-dark .navbar-brand,
.main-header.navbar-neo-purple.navbar-dark .navbar-nav .nav-link,
.main-header.navbar-neo-purple.navbar-dark .navbar-text,
.main-header.navbar-neo-purple.navbar-dark .navbar-text a,
.main-header.navbar-neo-purple.navbar-dark .navbar-toggler {
    color: var(--neoconnect-active-deepest-text);
}

.main-header.navbar-neo-purple.navbar-dark .navbar-nav .nav-link.disabled {
    opacity: 0.45;
}

.main-header .neoconnect-theme-toggle {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.main-header .neoconnect-theme-toggle:focus-visible {
    outline: 2px solid var(--neoconnect-active-deepest-text);
    outline-offset: -2px;
}

.main-header .neoconnect-theme-menu > .dropdown-menu {
    min-width: 210px;
    padding: 6px;
    border: 1px solid var(--theme-menu-border);
    border-radius: 10px;
    background-color: var(--theme-menu-bg);
    box-shadow: var(--theme-menu-shadow);
}

.main-header .neoconnect-theme-menu .dropdown-item {
    min-height: 40px;
    gap: 8px;
    border-radius: 6px;
    color: var(--theme-menu-text);
}

.main-header .neoconnect-theme-menu .dropdown-item:hover,
.main-header .neoconnect-theme-menu .dropdown-item:focus {
    background-color: var(--theme-menu-hover);
    color: var(--theme-menu-hover-text);
}

.main-header .neoconnect-theme-menu .dropdown-item:focus-visible {
    outline: 2px solid var(--theme-menu-focus);
    outline-offset: -2px;
}

.main-header .neoconnect-theme-menu .dropdown-item[aria-pressed="true"],
.main-header .neoconnect-theme-menu .dropdown-item[aria-pressed="true"]:hover,
.main-header .neoconnect-theme-menu .dropdown-item[aria-pressed="true"]:focus {
    background-color: var(--theme-menu-selected-bg);
    color: var(--theme-menu-selected-text);
}

.main-header .neoconnect-theme-menu .theme-choice-check {
    visibility: hidden;
    color: var(--theme-menu-check);
}

.main-header .neoconnect-theme-menu .dropdown-item[aria-pressed="true"] .theme-choice-check {
    visibility: visible;
}

/* Keep the account dropdown compact and make its logout action easy to spot. */
.main-header {
    --theme-menu-bg: var(--neoconnect-background-dark);
    --theme-menu-text: var(--neoconnect-theme-text);
    --theme-menu-border: rgba(var(--neoconnect-theme-text-rgb), 0.1);
    --theme-menu-shadow: 0 12px 32px rgba(var(--neoconnect-purple-rgb), 0.18);
    --theme-menu-hover: var(--neoconnect-theme-hover);
    --theme-menu-hover-text: var(--neoconnect-theme-text);
    --theme-menu-selected-bg: var(--neoconnect-purple);
    --theme-menu-selected-text: var(--neoconnect-active-deepest-text);
    --theme-menu-check: var(--neoconnect-active-deepest-text);
    --theme-menu-focus: var(--neoconnect-purple);
    --navbar-user-bg: var(--neoconnect-background-dark);
    --navbar-user-text: var(--neoconnect-theme-text);
    --navbar-user-muted: rgba(var(--neoconnect-theme-text-rgb), 0.68);
    --navbar-user-line: rgba(var(--neoconnect-theme-text-rgb), 0.1);
    --navbar-user-label: rgba(var(--neoconnect-theme-text-rgb), 0.5);
    --navbar-user-shadow: 0 12px 32px rgba(var(--neoconnect-purple-rgb), 0.18);
    --navbar-user-chip-border: var(--neoconnect-purple);
    --navbar-user-chip-bg: var(--neoconnect-theme-active);
    --navbar-user-chip-text: var(--neoconnect-theme-text);
    --navbar-user-logout-border: rgba(var(--neoconnect-notification-rgb), 0.34);
    --navbar-user-logout-bg: rgba(var(--neoconnect-notification-rgb), 0.08);
    --navbar-user-logout-text: var(--neoconnect-notification);
    --navbar-user-logout-hover-border: rgba(var(--neoconnect-notification-rgb), 0.6);
    --navbar-user-logout-hover-bg: rgba(var(--neoconnect-notification-rgb), 0.14);
    --navbar-user-logout-hover-text: var(--neoconnect-notification);
    --navbar-user-focus: var(--neoconnect-notification);
}

html[data-neoconnect-theme="light"] .main-header {
    --theme-menu-bg: var(--neoconnect-background-light);
    --theme-menu-text: var(--neoconnect-theme-text);
    --theme-menu-border: rgba(var(--neoconnect-theme-text-rgb), 0.12);
    --theme-menu-shadow: 0 12px 32px rgba(var(--neoconnect-purple-rgb), 0.14);
    --theme-menu-hover: var(--neoconnect-theme-hover);
    --theme-menu-hover-text: var(--neoconnect-theme-text);
    --theme-menu-selected-bg: var(--neoconnect-purple);
    --theme-menu-selected-text: var(--neoconnect-active-deepest-text);
    --theme-menu-check: var(--neoconnect-active-deepest-text);
    --theme-menu-focus: var(--neoconnect-purple);
    --navbar-user-bg: var(--neoconnect-background-light);
    --navbar-user-text: var(--neoconnect-theme-text);
    --navbar-user-muted: rgba(var(--neoconnect-theme-text-rgb), 0.68);
    --navbar-user-line: rgba(var(--neoconnect-theme-text-rgb), 0.12);
    --navbar-user-label: rgba(var(--neoconnect-theme-text-rgb), 0.5);
    --navbar-user-shadow: 0 12px 32px rgba(var(--neoconnect-purple-rgb), 0.14);
    --navbar-user-chip-border: var(--neoconnect-purple);
    --navbar-user-chip-bg: var(--neoconnect-theme-active);
    --navbar-user-chip-text: var(--neoconnect-theme-text);
    --navbar-user-logout-border: rgba(var(--neoconnect-notification-rgb), 0.3);
    --navbar-user-logout-bg: rgba(var(--neoconnect-notification-rgb), 0.035);
    --navbar-user-logout-text: var(--neoconnect-notification);
    --navbar-user-logout-hover-border: rgba(var(--neoconnect-notification-rgb), 0.58);
    --navbar-user-logout-hover-bg: rgba(var(--neoconnect-notification-rgb), 0.1);
    --navbar-user-logout-hover-text: var(--neoconnect-notification);
    --navbar-user-focus: var(--neoconnect-notification);
}

.main-header .user-menu > .dropdown-menu {
    min-width: 240px;
    max-width: calc(100vw - 16px);
    overflow: hidden;
    border: 1px solid var(--navbar-user-line);
    border-radius: 10px;
    background-color: var(--navbar-user-bg);
    box-shadow: var(--navbar-user-shadow);
}

.main-header .user-menu > .dropdown-menu > .navbar-user-summary {
    padding: 16px 16px 14px;
    background-color: var(--navbar-user-bg);
}

.main-header .navbar-user-summary .navbar-user-summary-name {
    display: block;
    padding-left: 10px;
    border-left: 2px solid var(--neoconnect-purple);
    color: var(--navbar-user-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.005em;
    overflow-wrap: anywhere;
}

.main-header .navbar-user-footer > a.btn-default:not(.navbar-user-logout) {
    border: 1px solid var(--navbar-user-line);
    border-radius: 8px;
    background-color: transparent;
    color: var(--navbar-user-text);
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.main-header .navbar-user-footer > a.btn-default:not(.navbar-user-logout):hover,
.main-header .navbar-user-footer > a.btn-default:not(.navbar-user-logout):focus-visible {
    border-color: var(--neoconnect-purple);
    background-color: var(--neoconnect-theme-hover);
    color: var(--navbar-user-text);
}

.main-header .navbar-user-footer > a.btn-default:not(.navbar-user-logout):active {
    background-color: var(--neoconnect-theme-active);
    color: var(--neoconnect-theme-active-text);
}

.main-header .navbar-user-summary-details {
    display: grid;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.45;
}

.main-header .navbar-user-summary-details > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.main-header .navbar-user-summary-details dt {
    flex: 0 0 50px;
    margin: 0;
    color: var(--navbar-user-label);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.main-header .navbar-user-summary-details dd {
    display: inline-flex;
    width: fit-content;
    max-width: calc(100% - 58px);
    align-items: center;
    padding: 3px 8px;
    border: 1px solid var(--navbar-user-chip-border);
    border-radius: 6px;
    background-color: var(--navbar-user-chip-bg);
    color: var(--navbar-user-chip-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.main-header .user-menu > .dropdown-menu > .navbar-user-footer {
    position: relative;
    padding: 14px 12px 12px;
    background-color: var(--navbar-user-bg);
}

.main-header .user-menu > .dropdown-menu > .navbar-user-footer::before {
    position: absolute;
    top: 0;
    right: 12px;
    left: 12px;
    height: 1px;
    background-color: var(--navbar-user-line);
    content: "";
}

.main-header .navbar-nav > .user-menu > .dropdown-menu > .navbar-user-footer > .navbar-user-logout {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    border: 1px solid var(--navbar-user-logout-border);
    border-radius: 8px;
    background-color: var(--navbar-user-logout-bg);
    color: var(--navbar-user-logout-text);
    font-weight: 600;
    text-align: center;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.main-header .navbar-nav > .user-menu > .dropdown-menu > .navbar-user-footer > .navbar-user-logout > i {
    color: inherit !important;
}

.main-header .navbar-nav > .user-menu > .dropdown-menu > .navbar-user-footer > .navbar-user-logout:hover,
.main-header .navbar-nav > .user-menu > .dropdown-menu > .navbar-user-footer > .navbar-user-logout:focus-visible {
    border-color: var(--navbar-user-logout-hover-border);
    background-color: var(--navbar-user-logout-hover-bg);
    color: var(--navbar-user-logout-hover-text);
}

.main-header .navbar-nav > .user-menu > .dropdown-menu > .navbar-user-footer > .navbar-user-logout:focus-visible {
    outline: 2px solid var(--navbar-user-focus);
    outline-offset: 2px;
}

.main-sidebar.sidebar-dark-primary .sidebar {
    scrollbar-color: var(--d2-scrollbar-thumb) transparent;
    scrollbar-width: thin;
}

.main-sidebar.sidebar-dark-primary .sidebar::-webkit-scrollbar {
    width: 6px;
}

.main-sidebar.sidebar-dark-primary .sidebar::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background-color: var(--d2-scrollbar-thumb);
}

.main-sidebar.sidebar-dark-primary .sidebar::-webkit-scrollbar-thumb:hover {
    background-color: var(--d2-scrollbar-thumb-hover);
}

@media (prefers-reduced-motion: reduce) {
    .main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link,
    .main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link > i,
    .main-header .navbar-nav > .user-menu > .dropdown-menu > .navbar-user-footer > .navbar-user-logout {
        transition: none;
    }

    .main-sidebar.sidebar-dark-primary .nav-sidebar .nav-link > p > .badge {
        animation: none;
    }
}

/* Keep the desktop sidebar fixed while only its menu area scrolls. */
@media (min-width: 1025px) {
    body:not(.layout-top-nav) .main-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
    }

    body:not(.layout-top-nav) .main-sidebar > .sidebar {
        height: calc(100vh - 3.5rem - 1px);
        height: calc(100dvh - 3.5rem - 1px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        padding-bottom: 12px;
    }
}

/* Tablet navigation drawer. The phone layout below expands this to full screen. */
@media (max-width: 1024px) {
    body.sidebar-open {
        overflow: hidden;
    }

    body.sidebar-open #sidebar-overlay {
        display: block;
    }

    .main-sidebar,
    .main-sidebar::before {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 320px !important;
        max-width: 85vw;
        height: 100vh !important;
        height: 100dvh !important;
        margin-left: -320px !important;
        transition: margin-left 0.3s ease-in-out;
    }

    body.sidebar-open .main-sidebar,
    body.sidebar-open .main-sidebar::before {
        margin-left: 0 !important;
    }

    .main-sidebar .brand-link {
        position: relative;
        width: 100% !important;
        padding-right: 60px;
    }

    .main-sidebar .sidebar {
        height: calc(100vh - 3.5rem - 1px);
        height: calc(100dvh - 3.5rem - 1px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }

    .sidebar-mobile-close {
        position: absolute;
        z-index: 4;
        top: 6px;
        right: 8px;
        display: inline-flex;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--d2-text);
        cursor: pointer;
        font-size: 18px;
    }

    .sidebar-mobile-close:hover {
        background: var(--d2-hover);
        color: var(--d2-hover-text);
    }

    .sidebar-mobile-close:focus-visible {
        outline: 2px solid var(--d2-focus);
        outline-offset: -2px;
    }

    .main-sidebar .nav-sidebar .nav-item > .nav-link {
        min-height: 44px;
    }

    .main-sidebar .nav-sidebar .nav-link > p,
    .main-sidebar .nav-sidebar .nav-link > p > .nav-label {
        white-space: normal;
    }
}

@media (max-width: 767.98px) {
    .main-header .navbar-nav > .nav-item > .nav-link {
        display: flex;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    .main-header .user-menu .navbar-user-name {
        display: inline-block;
        max-width: clamp(4rem, 22vw, 6rem);
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
        white-space: nowrap;
    }

    .main-sidebar,
    .main-sidebar::before {
        width: 100vw !important;
        max-width: 100vw;
        margin-left: -100vw !important;
    }

    body.sidebar-open .main-sidebar,
    body.sidebar-open .main-sidebar::before {
        margin-left: 0 !important;
    }

    .main-sidebar .brand-link {
        width: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-sidebar,
    .main-sidebar::before {
        transition: none !important;
    }
}