/*
 * Summerlytics VPT — Global Application Shell
 * Cosmetic-only shared styling.
 */

:root {
    --vpt-workspace-bg: #f5f8fc;
    --vpt-surface: #ffffff;
    --vpt-surface-soft: #f8fafc;
    --vpt-border: #e3eaf3;
    --vpt-text: #1f2937;
    --vpt-text-muted: #6b7280;
    --vpt-text-soft: #8b95a5;
    --vpt-primary-soft: #eaf2ff;
    --vpt-primary-soft-hover: #dfeaff;
    --vpt-shadow-sm: 0 1px 3px rgba(15, 23, 42, .05);
    --vpt-shadow-card: 0 4px 16px rgba(15, 23, 42, .045);
    --vpt-radius-sm: 7px;
    --vpt-radius-md: 10px;
}

body[data-theme="light"],
#wrapper,
#main-content {
    color: var(--vpt-text);
    background: var(--vpt-workspace-bg);
}

#main-content {
    min-height: 100vh;
}

#main-content > .container-fluid {
    padding: 24px 28px 32px;
}

#wrapper .navbar.navbar-fixed-top {
    background: var(--vpt-surface);
    border-bottom: 1px solid var(--vpt-border);
    box-shadow: var(--vpt-shadow-sm);
}

#wrapper .navbar .container-fluid {
    padding-right: 24px;
    padding-left: 24px;
}

#wrapper .navbar .navbar-brand {
    display: flex;
    align-items: center;
}

#wrapper .navbar .navbar-brand > a {
    display: inline-flex;
    align-items: baseline;
    color: var(--vpt-text);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
}

#wrapper .navbar .navbar-brand > a span {
    margin-left: 5px;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

#wrapper .navbar .navbar-brand button {
    color: #526071;
}

#wrapper .navbar .navbar-brand button:hover,
#wrapper .navbar .navbar-brand button:focus {
    color: var(--primary-color);
}

#wrapper .navbar .navbar-right .icon-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 2px;
    border-radius: 50%;
    color: #526071;
}

#wrapper .navbar .navbar-right .icon-menu:hover,
#wrapper .navbar .navbar-right .icon-menu:focus {
    color: var(--primary-color);
    background: var(--vpt-primary-soft);
}

#wrapper .navbar .search-form .form-control {
    height: 38px;
    padding-right: 38px;
    padding-left: 14px;
    color: var(--vpt-text);
    background: var(--vpt-surface-soft);
    border: 1px solid transparent;
    border-radius: 19px;
}

#wrapper .navbar .search-form .form-control:hover {
    border-color: var(--vpt-border);
}

#wrapper .navbar .search-form .form-control:focus {
    background: var(--vpt-surface);
    border-color: rgba(11, 94, 215, .35);
    box-shadow: 0 0 0 3px rgba(11, 94, 215, .10);
}

#wrapper .navbar .notification-dot {
    background: var(--secondary-color);
    box-shadow: 0 0 0 2px var(--vpt-surface);
}

#left-sidebar.sidebar,
#left-sidebar .sidebar-scroll {
    background: var(--vpt-surface);
}

#left-sidebar.sidebar {
    border-right: 1px solid var(--vpt-border);
    box-shadow: 2px 0 12px rgba(15, 23, 42, .025);
}

#left-sidebar .user-account {
    margin: 0 14px 13px;
    padding: 17px 10px 16px;
    border-bottom: 1px solid var(--vpt-border);
}

#left-sidebar .user-account .user-photo {
    width: 43px;
    height: 43px;
    border: 2px solid var(--vpt-surface);
    box-shadow: 0 0 0 2px var(--vpt-primary-soft);
}

#left-sidebar .user-account .dropdown > span {
    color: var(--vpt-text-muted);
    font-size: 12px;
}

#left-sidebar .user-account .user-name {
    color: var(--vpt-text);
}

#left-sidebar .user-account .user-name:hover,
#left-sidebar .user-account .user-name:focus {
    color: var(--primary-color);
}

#left-sidebar-nav #main-menu {
    padding: 4px 10px 22px;
}

#left-sidebar-nav #main-menu > li {
    margin: 3px 0;
}

#left-sidebar-nav #main-menu > li > a,
#left-sidebar-nav #main-menu > li > button.sidebar-group-toggle {
    position: relative;
    min-height: 44px;
    padding: 10px 12px !important;
    border-radius: var(--vpt-radius-sm) !important;
    color: #465466 !important;
}

#left-sidebar-nav #main-menu > li > a::before,
#left-sidebar-nav #main-menu > li > button.sidebar-group-toggle::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: -10px;
    width: 3px;
    content: "";
    background: transparent;
    border-radius: 0 3px 3px 0;
}

#left-sidebar-nav #main-menu > li > a:hover,
#left-sidebar-nav #main-menu > li > a:focus,
#left-sidebar-nav #main-menu > li > button.sidebar-group-toggle:hover,
#left-sidebar-nav #main-menu > li > button.sidebar-group-toggle:focus {
    color: var(--primary-color) !important;
    background: var(--vpt-primary-soft) !important;
}

#left-sidebar-nav #main-menu > li.active > a,
#left-sidebar-nav #main-menu > li.active > button.sidebar-group-toggle {
    color: var(--primary-color) !important;
    background: var(--vpt-primary-soft) !important;
    font-weight: 700;
}

#left-sidebar-nav #main-menu > li.active > a::before,
#left-sidebar-nav #main-menu > li.active > button.sidebar-group-toggle::before {
    background: var(--primary-color);
}

#left-sidebar-nav #main-menu > li > a > i,
#left-sidebar-nav #main-menu > li > button.sidebar-group-toggle > i:first-child {
    color: #738094;
}

#left-sidebar-nav #main-menu > li > a:hover > i,
#left-sidebar-nav #main-menu > li > a:focus > i,
#left-sidebar-nav #main-menu > li.active > a > i,
#left-sidebar-nav #main-menu > li > button.sidebar-group-toggle:hover > i:first-child,
#left-sidebar-nav #main-menu > li > button.sidebar-group-toggle:focus > i:first-child,
#left-sidebar-nav #main-menu > li.active > button.sidebar-group-toggle > i:first-child {
    color: var(--primary-color);
}

#left-sidebar-nav .sidebar-chevron,
#left-sidebar-nav .sidebar-nested-chevron {
    color: #9aa5b4;
}

#left-sidebar-nav .sidebar-submenu {
    display: none;
    padding: 3px 0 7px !important;
}

#left-sidebar-nav .sidebar-submenu.is-open {
    display: block;
}

#left-sidebar-nav .sidebar-submenu > li > a {
    margin: 2px 0;
    padding-right: 12px !important;
    padding-left: 38px !important;
    border-radius: var(--vpt-radius-sm);
    color: #5a6778;
}

#left-sidebar-nav .sidebar-submenu > li > a:hover,
#left-sidebar-nav .sidebar-submenu > li > a:focus {
    color: var(--primary-color);
    background: var(--vpt-primary-soft);
}

#left-sidebar-nav .sidebar-nested-toggle {
    margin: 2px 0;
    padding-right: 12px !important;
    padding-left: 36px !important;
    border-radius: var(--vpt-radius-sm) !important;
    color: #667386 !important;
    opacity: 1 !important;
}

#left-sidebar-nav .sidebar-nested-toggle:hover,
#left-sidebar-nav .sidebar-nested-toggle:focus {
    color: var(--primary-color) !important;
    background: var(--vpt-surface-soft) !important;
}

#left-sidebar-nav .sidebar-nested-submenu {
    padding: 2px 0 6px !important;
}

#left-sidebar-nav .sidebar-nested-submenu > li > a {
    margin: 2px 0;
    padding-right: 12px !important;
    padding-left: 49px !important;
    border-radius: var(--vpt-radius-sm);
    color: #5f6d7e;
}

#left-sidebar-nav .sidebar-nested-submenu > li > a:hover,
#left-sidebar-nav .sidebar-nested-submenu > li > a:focus {
    color: var(--primary-color);
    background: var(--vpt-primary-soft);
}

#left-sidebar-nav .sidebar-submenu li.active > a,
#left-sidebar-nav .sidebar-nested-submenu li.active > a {
    color: var(--primary-color) !important;
    background: var(--vpt-primary-soft-hover) !important;
    font-weight: 700;
}

#left-sidebar-nav .sidebar-submenu li.active > a i,
#left-sidebar-nav .sidebar-nested-submenu li.active > a i {
    color: var(--primary-color);
}

#left-sidebar-nav .sidebar-section-label {
    color: var(--vpt-text-soft);
    opacity: 1 !important;
}

#main-content .breadcrumb {
    margin-bottom: 20px;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

#main-content .breadcrumb-item {
    color: var(--vpt-text-muted);
    font-size: 13px;
}

#main-content .breadcrumb-item a {
    color: var(--primary-color);
}

#main-content .breadcrumb-item.active {
    color: var(--vpt-text-soft);
}

#main-content .card {
    overflow: hidden;
    background: var(--vpt-surface);
    border: 1px solid var(--vpt-border);
    border-radius: var(--vpt-radius-md);
    box-shadow: var(--vpt-shadow-card);
}

#main-content .card .header {
    min-height: 58px;
    padding: 17px 20px;
    background: var(--vpt-surface);
    border-bottom: 1px solid var(--vpt-border);
}

#main-content .card .header h2 {
    margin: 0;
    color: var(--vpt-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.45;
}

#main-content .card .body {
    padding: 20px;
    color: var(--vpt-text);
}

#main-content .card.planned_task {
    border-style: solid;
}

#wrapper .dropdown-menu {
    border: 1px solid var(--vpt-border);
    border-radius: var(--vpt-radius-sm);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .10);
}

#wrapper .dropdown-menu > li > a:hover,
#wrapper .dropdown-menu > li > a:focus {
    color: var(--primary-color);
    background: var(--vpt-primary-soft);
}

@media only screen and (max-width: 767px) {
    #main-content > .container-fluid {
        padding: 18px 15px 24px;
    }

    #wrapper .navbar .container-fluid {
        padding-right: 14px;
        padding-left: 14px;
    }

    #main-content .card .header,
    #main-content .card .body {
        padding-right: 16px;
        padding-left: 16px;
    }
}

/* === VPT COSMETIC PHASE 2: SIDEBAR POLISH START === */

/*
 * Phase 2 — Sidebar polish
 * Cosmetic-only. Existing permissions, route-active logic,
 * accordion markup and JavaScript behavior remain unchanged.
 */

/* Sidebar width, rhythm and scrolling */
#left-sidebar.sidebar {
    width: 268px;
}

#left-sidebar .sidebar-scroll {
    padding-bottom: 20px;
}

#left-sidebar-nav {
    padding-bottom: 8px;
}

/* User panel */
#left-sidebar .user-account {
    display: flex;
    align-items: center;
    min-height: 76px;
    margin: 0 14px 16px;
    padding: 14px 8px 16px;
}

#left-sidebar .user-account .user-photo {
    flex: 0 0 43px;
    margin-right: 11px;
}

#left-sidebar .user-account .dropdown {
    min-width: 0;
}

#left-sidebar .user-account .dropdown > span {
    display: block;
    margin-bottom: 2px;
    line-height: 1.2;
}

#left-sidebar .user-account .user-name {
    display: inline-flex;
    align-items: center;
    max-width: 150px;
    color: var(--vpt-text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

#left-sidebar .user-account .user-name strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#left-sidebar .user-account .user-name::after {
    margin-left: 6px;
    color: #94a0af;
}

/* Main-level navigation */
#left-sidebar-nav #main-menu {
    padding-right: 11px;
    padding-left: 11px;
}

#left-sidebar-nav #main-menu > li {
    margin: 4px 0;
}

#left-sidebar-nav #main-menu > li > a,
#left-sidebar-nav #main-menu > li > button.sidebar-group-toggle {
    min-height: 43px;
    padding: 10px 13px !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

#left-sidebar-nav #main-menu > li > a > i,
#left-sidebar-nav #main-menu > li > button.sidebar-group-toggle > i:first-child {
    flex-basis: 22px;
    width: 22px;
    margin-right: 9px;
    font-size: 14px;
}

#left-sidebar-nav #main-menu > li.active > a,
#left-sidebar-nav #main-menu > li.active > button.sidebar-group-toggle {
    font-weight: 700;
}

#left-sidebar-nav #main-menu > li > a::before,
#left-sidebar-nav #main-menu > li > button.sidebar-group-toggle::before {
    top: 7px;
    bottom: 7px;
    left: -11px;
    width: 4px;
}

/* Parent groups */
#left-sidebar-nav #main-menu > li.active > button.sidebar-group-toggle[aria-expanded="true"] {
    margin-bottom: 3px;
}

#left-sidebar-nav .sidebar-chevron {
    margin-left: auto !important;
    color: #96a2b1;
    font-size: 10px;
}

/* First-level submenu container */
#left-sidebar-nav .sidebar-submenu {
    margin-top: 2px !important;
    padding: 1px 0 8px 0 !important;
}

/* Section/group toggles: PROCUREMENT, INVENTORY, PRODUCTION, etc. */
#left-sidebar-nav .sidebar-nested-group {
    margin: 4px 0;
}

#left-sidebar-nav .sidebar-nested-toggle {
    min-height: 36px;
    margin: 2px 0;
    padding: 8px 11px 8px 35px !important;
    color: #748194 !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .055em;
    line-height: 1.25;
}

#left-sidebar-nav .sidebar-nested-toggle > i:first-child {
    flex-basis: 19px;
    width: 19px;
    margin-right: 7px;
    color: #8190a3;
    font-size: 11px;
}

#left-sidebar-nav .sidebar-nested-toggle:hover,
#left-sidebar-nav .sidebar-nested-toggle:focus,
#left-sidebar-nav .sidebar-nested-toggle[aria-expanded="true"] {
    color: var(--primary-color) !important;
    background: #f4f8fe !important;
}

#left-sidebar-nav .sidebar-nested-toggle:hover > i:first-child,
#left-sidebar-nav .sidebar-nested-toggle:focus > i:first-child,
#left-sidebar-nav .sidebar-nested-toggle[aria-expanded="true"] > i:first-child {
    color: var(--primary-color);
}

#left-sidebar-nav .sidebar-nested-chevron {
    margin-left: auto !important;
    color: #a0aab8;
    font-size: 9px;
}

/* Deep submenu pages */
#left-sidebar-nav .sidebar-nested-submenu {
    margin-top: 2px !important;
    padding: 1px 0 7px !important;
}

#left-sidebar-nav .sidebar-nested-submenu > li {
    min-height: 35px;
    margin: 2px 0;
}

#left-sidebar-nav .sidebar-nested-submenu > li > a {
    min-height: 35px;
    margin: 0;
    padding: 7px 11px 7px 48px !important;
    color: #667487;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
}

#left-sidebar-nav .sidebar-nested-submenu > li > a > i {
    flex-basis: 18px;
    width: 18px;
    margin-right: 8px;
    color: #8a97a8;
    font-size: 12px;
}

#left-sidebar-nav .sidebar-nested-submenu > li > a:hover,
#left-sidebar-nav .sidebar-nested-submenu > li > a:focus {
    color: var(--primary-color);
    background: #f2f7ff;
}

#left-sidebar-nav .sidebar-nested-submenu > li.active > a {
    color: var(--primary-color) !important;
    background: var(--vpt-primary-soft-hover) !important;
    font-weight: 700;
}

#left-sidebar-nav .sidebar-nested-submenu > li.active > a::before {
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: 37px;
    width: 3px;
    content: "";
    background: var(--primary-color);
    border-radius: 3px;
}

/* Standalone first-level submenu links, where present */
#left-sidebar-nav .sidebar-submenu > li:not(.sidebar-nested-group) > a {
    min-height: 36px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    color: #667487;
    font-size: 12.5px;
}

#left-sidebar-nav .sidebar-submenu > li:not(.sidebar-nested-group).active > a {
    color: var(--primary-color) !important;
    background: var(--vpt-primary-soft-hover) !important;
    font-weight: 700;
}

/* Internal labels */
#left-sidebar-nav .sidebar-section-label {
    padding-top: 14px;
    padding-bottom: 6px;
    color: #98a3b2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .09em;
}

/* Badges */
#left-sidebar-nav #main-menu .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
}


/* === VPT COSMETIC PHASE 2: SIDEBAR POLISH END === */

/* === VPT COSMETIC PHASE 2B: SIDEBAR FINAL POLISH START === */

/*
 * Final sidebar polish.
 * Cosmetic-only: no permission, route, lifecycle or accordion behavior changes.
 */

/* User identity block */
#left-sidebar .user-account {
    position: relative;
    padding-top: 13px;
    padding-bottom: 14px;
}

#left-sidebar .user-account .dropdown {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#left-sidebar .user-account .user-account-kicker {
    margin-bottom: 3px;
    color: #8a96a6;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .055em;
    line-height: 1.2;
    text-transform: uppercase;
}

#left-sidebar .user-account .user-name {
    max-width: 154px;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 700;
}

#left-sidebar .user-account .user-account-role {
    display: block;
    max-width: 154px;
    overflow: hidden;
    color: var(--primary-color);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Stronger active top-level state */
#left-sidebar-nav #main-menu > li.active > a,
#left-sidebar-nav #main-menu > li.active > button.sidebar-group-toggle {
    color: #074fae !important;
    background: #e5f0ff !important;
    box-shadow: inset 0 0 0 1px rgba(11, 94, 215, .05);
}

#left-sidebar-nav #main-menu > li.active > a::before,
#left-sidebar-nav #main-menu > li.active > button.sidebar-group-toggle::before {
    top: 5px;
    bottom: 5px;
    width: 4px;
    background: #0b5ed7;
}

/* More deliberate spacing before grouped sections */
#left-sidebar-nav .sidebar-nested-group + .sidebar-nested-group {
    margin-top: 8px;
}

#left-sidebar-nav .sidebar-nested-toggle {
    margin-top: 5px;
}

/* Tighter grouping for nested page links */
#left-sidebar-nav .sidebar-nested-submenu {
    padding-bottom: 4px !important;
}

#left-sidebar-nav .sidebar-nested-submenu > li {
    min-height: 32px;
    margin: 1px 0;
}

#left-sidebar-nav .sidebar-nested-submenu > li > a {
    min-height: 32px;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* Clearer active nested item */
#left-sidebar-nav .sidebar-nested-submenu > li.active > a {
    color: #0759c7 !important;
    background: #eaf3ff !important;
    box-shadow: inset 0 0 0 1px rgba(11, 94, 215, .04);
}

#left-sidebar-nav .sidebar-nested-submenu > li.active > a::before {
    top: 7px;
    bottom: 7px;
    left: 37px;
    width: 3px;
}

/* Slightly more breathing room around collapsed category labels */
#left-sidebar-nav .sidebar-nested-toggle[aria-expanded="false"] {
    margin-bottom: 3px;
}

/* Shorter profile divider aligned to sidebar content */
#left-sidebar .user-account::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    content: "";
    background: linear-gradient(
        90deg,
        transparent 0,
        var(--vpt-border) 12%,
        var(--vpt-border) 88%,
        transparent 100%
    );
}

#left-sidebar .user-account {
    border-bottom: 0;
}

/* === VPT COSMETIC PHASE 2B: SIDEBAR FINAL POLISH END === */
+

/* Phase 18B-2 authenticated shell and authentication presentation */

.vpt-shell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
}

.vpt-shell-brand {
    min-width: 0;
}

.vpt-shell-icon-button,
.vpt-account-trigger {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.vpt-shell-icon-button:focus-visible,
.vpt-account-trigger:focus-visible,
#left-sidebar-nav a:focus-visible,
#left-sidebar-nav button:focus-visible {
    outline: 3px solid rgba(1, 153, 252, .72) !important;
    outline-offset: 2px;
}

.vpt-shell-tools,
.vpt-shell-tools .navbar-nav {
    display: flex;
    align-items: center;
}

.vpt-shell-tools .navbar-nav {
    flex-direction: row;
    gap: 4px;
}

.vpt-header-dropdown {
    position: relative;
}

.vpt-header-dropdown .dropdown-toggle::after {
    display: none;
}

.vpt-notification-menu,
.vpt-account-menu {
    width: min(320px, calc(100vw - 24px));
    margin-top: 9px;
    padding: 8px;
}

.vpt-dropdown-heading,
.vpt-account-menu__identity {
    padding: 10px 11px;
    border-bottom: 1px solid var(--vpt-border);
}

.vpt-dropdown-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.vpt-dropdown-heading strong,
.vpt-account-menu__identity strong {
    color: var(--vpt-text);
    font-size: 13px;
}

.vpt-dropdown-heading span,
.vpt-account-menu__identity span {
    color: var(--vpt-text-muted);
    font-size: 11px;
}

.vpt-notification-item,
.vpt-account-menu > a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 11px !important;
    color: var(--vpt-text) !important;
    border-radius: 6px;
    text-decoration: none;
}

.vpt-notification-item__icon {
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--primary-color);
    background: var(--vpt-primary-soft);
    border-radius: 8px;
}

.vpt-notification-item span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.vpt-notification-item strong {
    font-size: 12px;
}

.vpt-notification-item small {
    margin-top: 2px;
    color: var(--vpt-text-muted);
    font-size: 10.5px;
    line-height: 1.4;
}

.vpt-dropdown-empty {
    display: flex;
    min-height: 100px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    color: var(--vpt-text-muted);
    font-size: 12px;
}

.vpt-dropdown-empty i {
    color: #9aa6b5;
    font-size: 21px;
}

.vpt-account-trigger {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 9px;
    padding: 4px 7px;
    color: var(--vpt-text);
    border-radius: 9px;
}

.vpt-account-trigger:hover,
.vpt-account-trigger:focus {
    color: var(--primary-color);
    background: var(--vpt-primary-soft);
}

.vpt-account-trigger__avatar,
.vpt-sidebar-identity__avatar {
    display: inline-flex;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #fff;
    background: var(--primary-color);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.vpt-account-trigger__identity {
    display: flex;
    max-width: 150px;
    min-width: 0;
    flex-direction: column;
    text-align: left;
}

.vpt-account-trigger__identity strong,
.vpt-account-trigger__identity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpt-account-trigger__identity strong {
    font-size: 12px;
}

.vpt-account-trigger__identity small {
    color: var(--vpt-text-muted);
    font-size: 10px;
}

.vpt-account-trigger > .fa {
    color: #94a0af;
    font-size: 9px;
}

.vpt-account-menu__identity {
    display: flex;
    flex-direction: column;
}

.vpt-sidebar-close {
    position: absolute;
    top: 9px;
    right: 10px;
    z-index: 2;
    display: none;
    width: 36px;
    height: 36px;
    color: var(--vpt-text-muted);
    border: 0;
    border-radius: 8px;
    background: transparent;
}

.vpt-sidebar-identity {
    gap: 11px;
}

.vpt-sidebar-identity > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.vpt-sidebar-identity strong,
.vpt-sidebar-identity span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vpt-sidebar-identity strong {
    color: var(--vpt-text);
    font-size: 13px;
}

.vpt-sidebar-identity span {
    margin-top: 2px;
    color: var(--primary-color);
    font-size: 10.5px;
    font-weight: 700;
}

#left-sidebar .sidebar-scroll {
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

#left-sidebar-nav .sidebar-section-label {
    min-height: auto !important;
    padding: 13px 13px 5px 38px !important;
    color: #8b97a8;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#left-sidebar-nav .sidebar-submenu > li > a {
    min-height: 36px;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    font-size: 12px;
}

#left-sidebar-nav .sidebar-submenu > li > a > i {
    flex: 0 0 18px;
    width: 18px;
    margin-right: 7px;
    color: #8491a2;
    text-align: center;
}

#left-sidebar-nav .sidebar-submenu > li.active > a::after {
    width: 5px;
    height: 5px;
    margin-left: auto;
    content: "";
    background: var(--primary-color);
    border-radius: 50%;
}

#left-sidebar-nav .sidebar-group-toggle,
#left-sidebar-nav .sidebar-submenu {
    transition: color 160ms ease, background-color 160ms ease;
}

#left-sidebar-nav button.sidebar-group-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
}

@media (prefers-reduced-motion: reduce) {
    #left-sidebar-nav .sidebar-group-toggle,
    #left-sidebar-nav .sidebar-submenu,
    .vpt-launchpad-action {
        transition: none !important;
    }
}

/* Authentication */

body:has(.vpt-auth-shell) {
    min-height: 100vh;
    background: #f3f7fc;
}

body:has(.vpt-auth-shell) #wrapper {
    min-height: 100vh;
    background: #f3f7fc;
}

.vpt-auth-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: minmax(360px, .9fr) minmax(480px, 1.1fr);
    color: var(--vpt-text);
}

.vpt-auth-brand {
    position: relative;
    display: flex;
    align-items: center;
    padding: clamp(42px, 7vw, 96px);
    overflow: hidden;
    color: #fff;
    background: #0b5ed7;
}

.vpt-auth-brand::after {
    position: absolute;
    right: -100px;
    bottom: -140px;
    width: 360px;
    height: 360px;
    content: "";
    border: 70px solid rgba(255, 255, 255, .055);
    border-radius: 50%;
}

.vpt-auth-brand__content {
    position: relative;
    z-index: 1;
    max-width: 520px;
}

.vpt-auth-brand__mark {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    color: #0b5ed7;
    background: #fff;
    border-radius: 12px;
    font-size: 22px;
    font-weight: 900;
}

.vpt-auth-brand__eyebrow {
    margin: 0 0 9px;
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.vpt-auth-brand h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -.025em;
}

.vpt-auth-brand h1 span {
    color: #bce5ff;
    font-size: .42em;
    letter-spacing: .16em;
    vertical-align: middle;
}

.vpt-auth-brand__content > p:last-child {
    max-width: 460px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 15px;
    line-height: 1.7;
}

.vpt-auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.vpt-auth-card {
    width: 100%;
    max-width: 420px;
    padding: 36px;
    background: #fff;
    border: 1px solid var(--vpt-border);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
}

.vpt-auth-mobile-brand {
    display: none;
    margin-bottom: 25px;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
}

.vpt-auth-mobile-brand span {
    color: var(--vpt-text);
    font-size: 15px;
    letter-spacing: .03em;
}

.vpt-auth-card__heading > span {
    color: var(--primary-color);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.vpt-auth-card__heading h2 {
    margin: 7px 0 7px;
    color: var(--vpt-text);
    font-size: 28px;
    font-weight: 800;
}

.vpt-auth-card__heading p {
    margin: 0 0 27px;
    color: var(--vpt-text-muted);
    font-size: 13px;
}

.vpt-auth-form label {
    color: var(--vpt-text);
    font-size: 12px;
    font-weight: 700;
}

.vpt-auth-form .form-control {
    min-height: 44px;
    color: var(--vpt-text);
    background: #fff;
    border-color: #d6dfeb;
    border-radius: 8px;
}

.vpt-auth-form .form-control:focus {
    border-color: #0199fc;
    box-shadow: 0 0 0 3px rgba(1, 153, 252, .18);
}

.vpt-auth-form__options {
    margin: 3px 0 22px;
}

.vpt-auth-form .custom-control-label {
    color: var(--vpt-text-muted);
    font-weight: 500;
}

.vpt-auth-submit {
    width: 100%;
    min-height: 44px;
}

@media only screen and (max-width: 991px) {
    .vpt-account-trigger__identity {
        display: none;
    }

    .vpt-auth-shell {
        grid-template-columns: minmax(300px, .75fr) minmax(400px, 1.25fr);
    }

    .vpt-auth-brand {
        padding: 44px;
    }
}

@media only screen and (max-width: 767px) {
    .vpt-shell-header {
        min-height: 54px;
    }

    .vpt-account-trigger {
        min-width: 42px;
        padding: 4px;
    }

    .vpt-account-trigger > .fa {
        display: none;
    }

    .vpt-notification-menu,
    .vpt-account-menu {
        position: fixed !important;
        top: 51px !important;
        right: 8px !important;
        left: auto !important;
        transform: none !important;
    }

    .vpt-sidebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #left-sidebar .sidebar-scroll {
        height: 100vh !important;
        padding-top: 42px;
    }

    .vpt-auth-shell {
        display: block;
        min-height: 100vh;
    }

    .vpt-auth-brand {
        display: none;
    }

    .vpt-auth-panel {
        min-height: 100vh;
        padding: 24px 16px;
    }

    .vpt-auth-card {
        max-width: 460px;
        padding: 28px 22px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(15, 23, 42, .07);
    }

    .vpt-auth-mobile-brand {
        display: block;
    }
}

@media only screen and (max-width: 390px) {
    .vpt-shell-tools .navbar-nav {
        gap: 0;
    }

    .vpt-shell-tools .icon-menu {
        width: 36px !important;
        height: 36px !important;
    }
}

@media print {
    .vpt-sidebar,
    .sidebar,
    #left-sidebar,
    .navbar,
    .vpt-shell-header,
    .mobile-nav-trigger,
    .dropdown-menu,
    .no-print,
    .btn,
    .table-scroll-cue,
    .filter-toolbar {
        display: none !important;
    }

    html,
    body,
    #wrapper,
    #main-content,
    #main-content .container-fluid {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #fff !important;
    }

    .vpt-workspace,
    .vpt-page-shell,
    .vpt-content-shell {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* === VPT OPTION C TWO-LEVEL NAVIGATION START === */

#left-sidebar-nav.vpt-module-navigation #main-menu.vpt-module-list {
    margin: 0;
    padding: 5px 10px 24px;
    list-style: none;
}

#left-sidebar-nav.vpt-module-navigation .vpt-primary-module {
    position: relative;
    width: 100%;
    margin: 4px 0;
}

#left-sidebar-nav.vpt-module-navigation .vpt-module-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 11px 12px !important;
    border: 0;
    border-radius: var(--vpt-radius-sm);
    outline: 0;
    color: #465466;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

#left-sidebar-nav.vpt-module-navigation .vpt-module-button::before {
    position: absolute;
    top: 9px;
    bottom: 9px;
    left: -10px;
    width: 3px;
    content: "";
    background: transparent;
    border-radius: 0 3px 3px 0;
}

#left-sidebar-nav.vpt-module-navigation .vpt-module-button > i:first-child {
    flex: 0 0 24px;
    width: 24px;
    margin-right: 10px;
    color: #738094;
    font-size: 15px;
    text-align: center;
}

#left-sidebar-nav.vpt-module-navigation .vpt-module-button > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}

#left-sidebar-nav.vpt-module-navigation .vpt-module-chevron {
    flex: 0 0 auto;
    margin-left: 10px;
    color: #9aa5b4;
    font-size: 11px;
    transition: transform .18s ease, color .18s ease;
}

#left-sidebar-nav.vpt-module-navigation .vpt-module-button:hover {
    color: var(--primary-color);
    background: var(--vpt-primary-soft);
}

#left-sidebar-nav.vpt-module-navigation .vpt-module-button:hover > i:first-child,
#left-sidebar-nav.vpt-module-navigation .vpt-module-button:hover .vpt-module-chevron {
    color: var(--primary-color);
}

#left-sidebar-nav.vpt-module-navigation .vpt-module-button:focus-visible {
    color: var(--primary-color);
    background: var(--vpt-surface);
    box-shadow: 0 0 0 2px rgba(11, 94, 215, .22);
}

#left-sidebar-nav.vpt-module-navigation .vpt-primary-module.active > .vpt-module-button {
    color: var(--primary-color);
    background: var(--vpt-primary-soft);
    font-weight: 700;
}

#left-sidebar-nav.vpt-module-navigation .vpt-primary-module.active > .vpt-module-button::before {
    background: var(--primary-color);
}

#left-sidebar-nav.vpt-module-navigation .vpt-primary-module.active > .vpt-module-button > i:first-child,
#left-sidebar-nav.vpt-module-navigation .vpt-primary-module.active > .vpt-module-button .vpt-module-chevron {
    color: var(--primary-color);
}

#left-sidebar-nav.vpt-module-navigation .vpt-primary-module.is-panel-open:not(.active) > .vpt-module-button {
    color: #465466;
    background: rgba(11, 94, 215, .045);
}

#left-sidebar-nav.vpt-module-navigation .vpt-primary-module.is-panel-open .vpt-module-chevron {
    color: var(--primary-color);
    transform: rotate(180deg);
}

.vpt-secondary-navigation {
    color: var(--vpt-text);
    background: var(--vpt-surface);
    border-right: 1px solid var(--vpt-border);
}

.vpt-secondary-module-panel {
    height: 100%;
    background: var(--vpt-surface);
}

.vpt-secondary-header {
    position: relative;
    padding: 20px 20px 17px;
    border-bottom: 1px solid var(--vpt-border);
    background: var(--vpt-surface);
}

.vpt-secondary-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 34px;
}

.vpt-secondary-heading__icon {
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--primary-color);
    background: var(--vpt-primary-soft);
    border-radius: 10px;
    font-size: 16px;
}

.vpt-secondary-eyebrow {
    display: block;
    margin-bottom: 2px;
    color: var(--vpt-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.vpt-secondary-heading h2 {
    margin: 0;
    color: var(--vpt-text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.vpt-secondary-close,
.vpt-secondary-back {
    border: 0;
    outline: 0;
    color: var(--vpt-text-muted);
    background: transparent;
    cursor: pointer;
}

.vpt-secondary-close {
    position: absolute;
    top: 16px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.vpt-secondary-close:hover,
.vpt-secondary-close:focus-visible,
.vpt-secondary-back:hover,
.vpt-secondary-back:focus-visible {
    color: var(--primary-color);
    background: var(--vpt-primary-soft);
}

.vpt-secondary-back {
    display: none;
}

.vpt-secondary-scroll {
    height: calc(100% - 76px);
    padding: 10px 12px 22px;
    overflow-x: hidden;
    overflow-y: auto;
}

.vpt-secondary-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.vpt-secondary-list > li {
    margin: 3px 0;
}

.vpt-secondary-list > li > a {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border-radius: var(--vpt-radius-sm);
    color: #536174;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
}

.vpt-secondary-list > li > a > i {
    flex: 0 0 24px;
    width: 24px;
    margin-right: 10px;
    color: #7b8798;
    font-size: 14px;
    text-align: center;
}

.vpt-secondary-list > li > a > span:not(.badge) {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}

.vpt-secondary-list > li > a:hover,
.vpt-secondary-list > li > a:focus-visible {
    color: var(--primary-color);
    background: var(--vpt-primary-soft);
}

.vpt-secondary-list > li > a:hover > i,
.vpt-secondary-list > li > a:focus-visible > i {
    color: var(--primary-color);
}

.vpt-secondary-list > li.active > a {
    color: var(--primary-color);
    background: var(--vpt-primary-soft-hover);
    font-weight: 700;
}

.vpt-secondary-list > li.active > a::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 3px;
    content: "";
    background: var(--primary-color);
    border-radius: 0 3px 3px 0;
}

.vpt-secondary-list > li.active > a > i {
    color: var(--primary-color);
}

.vpt-secondary-list .badge {
    flex: 0 0 auto;
    margin-left: 8px;
}

.vpt-secondary-section-label {
    margin: 18px 10px 7px !important;
    color: #7a8798;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .07em;
    line-height: 1.3;
    text-transform: uppercase;
}

.vpt-secondary-section-label:first-child {
    margin-top: 8px !important;
}

.vpt-secondary-empty {
    margin: 12px 4px;
    padding: 24px 18px;
    text-align: center;
    background: var(--vpt-surface-soft);
    border: 1px solid var(--vpt-border);
    border-radius: var(--vpt-radius-md);
}

.vpt-secondary-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    color: var(--primary-color);
    background: var(--vpt-primary-soft);
    border-radius: 12px;
    font-size: 18px;
}

.vpt-secondary-empty strong {
    display: block;
    margin-bottom: 6px;
    color: var(--vpt-text);
    font-size: 14px;
}

.vpt-secondary-empty p {
    margin: 0;
    color: var(--vpt-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* === VPT OPTION C TWO-LEVEL NAVIGATION END === */