/* Syncfusion dashboard sidebar + toolbar layout overrides (time.track) */

/* ── Preload / FOUC prevention ─────────────────────────────────────────────
   portal-nav-loading is added by menu-preload.js before Blazor hydrates and
   removed by portalClearSidebarCompactPreload() after the first render.
   sidebar-compact-preload is added only when localStorage says "compact" so
   the sidebar width is already correct before Blazor restores _sidebarOpen. */

/* Hide sidebar nav content during load.
   Targets our own elements (not Syncfusion's) because .e-sidebar-content is
   injected by Syncfusion JS and may not exist in the SSR pre-render HTML. */
html.portal-nav-loading nav.dashboard-nav-list {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Suppress Syncfusion SfSidebar init animation during preload. */
html.portal-nav-loading .dashboard-app,
html.portal-nav-loading .dashboard-app.e-content {
    transition: none !important;
}

/* Lock sidebar width and content margin during preload so the page layout does
   not jump before Blazor/Syncfusion JavaScript finishes initialising. */
.sidebar-compact-preload .e-sidebar.dashboard-nav,
.sidebar-compact-preload .e-sidebar {
    width: var(--dashboard-nav-width-compact) !important;
    transform: translateX(0) !important;
}

@media (min-width: 769px) {
    .sidebar-compact-preload .dashboard-app,
    .sidebar-compact-preload .dashboard-app.e-content {
        margin-left: var(--dashboard-nav-width-compact) !important;
    }
}

/* During compact preload, make the sidebar CONTENT visually match compact mode.
   Selectors use only OUR classes (not Syncfusion's e-sidebar / e-sidebar-content)
   because those are injected by Syncfusion JS and may not exist yet in SSR HTML. */
html.sidebar-compact-preload .menu-text-wrap,
html.sidebar-compact-preload .menu-text,
html.sidebar-compact-preload .e-caret,
html.sidebar-compact-preload .nav-item-divider,
html.sidebar-compact-preload .nav_lang,
html.sidebar-compact-preload .nav_app_info,
html.sidebar-compact-preload .brand_app_text,
html.sidebar-compact-preload .logo-open {
    display: none !important;
}

html.sidebar-compact-preload .logo-closed {
    display: flex !important;
}

html.sidebar-compact-preload .dashboard-nav-item,
html.sidebar-compact-preload .dashboard-nav-dropdown-toggle,
html.sidebar-compact-preload .dashboard-nav-dropdown-item {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html.sidebar-compact-preload .menu-icon {
    width: 22px !important;
    height: 22px !important;
    margin: 4px auto !important;
}

/* Syncfusion SfSidebar always starts in the docked (narrow) state before its JS
   runs — sidebar-expanded-preload forces the full width immediately so expanded
   users do not see the sidebar animate from 70px to 238px on every page load. */
.sidebar-expanded-preload .e-sidebar.dashboard-nav,
.sidebar-expanded-preload .e-sidebar {
    width: var(--dashboard-nav-width) !important;
    transform: translateX(0) !important;
}

@media (min-width: 769px) {
    .sidebar-expanded-preload .dashboard-app,
    .sidebar-expanded-preload .dashboard-app.e-content {
        margin-left: var(--dashboard-nav-width) !important;
    }
}

/* Mobile preload: content full-width before Blazor adds dashboard-mobile class. */
html.dashboard-mobile-preload #mainDashboard .dashboard-app,
html.dashboard-mobile-preload #mainDashboard .dashboard-app.e-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

:root {
    --dashboard-nav-width: 238px;
    --dashboard-nav-width-compact: 70px;
    --dashboard-transition-duration: 0.3s;
    --dashboard-header-height: 60px;
    --dashboard-nav-bg: #323537;
    --dashboard-header-bg: #ef3f32;
    --dashboard-toolbar-bg: #ededed;
}

.dashboard-app,
.dashboard-app.e-content,
.dashboard > .e-content.dashboard-app {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.dashboard-toolbar {
    min-height: var(--dashboard-header-height);
    background-color: var(--dashboard-toolbar-bg);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 8px 27px;
    position: sticky;
    top: 0;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1200;
}

.dashboard-toolbar .breadcrumb-container {
    flex-grow: 0;
    flex-shrink: 0;
    margin-left: 15px;
    margin-right: 0;
}

.dashboard-toolbar .header_user_info {
    margin-left: auto;
}

/* Legacy GridStack dashboard: restore + trash + widget palette inline after breadcrumb. */
.dashboard_toolbar_layout_actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 8px;
    overflow: hidden;
}

.dashboard_toolbar_layout_actions #dynamic.dynamic {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    max-height: 120px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Push main content beside the docked sidebar (Syncfusion inline margin can be missing on first paint).
   Desktop + tablet only — mobile overlay must not reserve horizontal space. */
@media (min-width: 769px) {
    #mainDashboard.dashboard:not(.dashboard-compact) .dashboard-app,
    #mainDashboard.dashboard:not(.dashboard-compact) .dashboard-app.e-content {
        margin-left: var(--dashboard-nav-width) !important;
    }

    #mainDashboard.dashboard-compact .dashboard-app,
    #mainDashboard.dashboard-compact .dashboard-app.e-content {
        margin-left: var(--dashboard-nav-width-compact) !important;
    }
}

.dashboard-body {
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
}

/* Restore portal chrome typography — site.css targets .e-control * (11px !important); dashboard widget HTML uses dashboard*.css exclusions + local rules. */
#mainDashboard .dashboard-toolbar .breadcrumb-item,
#mainDashboard .dashboard-toolbar .breadcrumb-item a,
#mainDashboard .dashboard-toolbar .employee_name,
#mainDashboard .dashboard-toolbar .employee_client_id,
#mainDashboard .dashboard-toolbar .user_dropdown_menu li a,
#mainDashboard .dashboard-app .page-title-text,
#mainDashboard .dashboard-nav-footer .nav_app_info,
#mainDashboard .dashboard-nav-footer .label_about,
#mainDashboard .dashboard-nav-footer .label_copyright,
#mainDashboard .dashboard-nav-footer .brand_app_text {
    font-family: 'Montserrat-Regular', sans-serif !important;
}

#mainDashboard .dashboard-toolbar .breadcrumb-item,
#mainDashboard .dashboard-toolbar .breadcrumb-item a {
    font-size: 12px !important;
}

#mainDashboard .dashboard-toolbar .employee_name,
#mainDashboard .dashboard-toolbar .employee_client_id,
#mainDashboard .dashboard-toolbar .user_dropdown_menu li a {
    font-size: 1rem !important;
}

#mainDashboard .dashboard-app .page-title-text {
    font-size: 24px !important;
    font-weight: 600;
    color: #323537;
}

#mainDashboard .dashboard-nav-footer .nav_app_info,
#mainDashboard .dashboard-nav-footer .label_about {
    font-size: 12px !important;
}

#mainDashboard .dashboard-nav-footer .label_copyright {
    font-size: 10px !important;
}

#mainDashboard .dashboard-nav-footer .brand_app_text {
    font-size: 11px !important;
}

/* SfSidebar keeps CssClass "dashboard-nav" — neutralize legacy whole-nav scroll from site.css */
#mainDashboard.dashboard > .e-sidebar.dashboard-nav,
#mainDashboard.dashboard > .e-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    overflow-y: hidden !important;
    background-color: var(--dashboard-nav-bg) !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
    z-index: 1050 !important;
    transition: width var(--dashboard-transition-duration) ease !important;
}

#mainDashboard.dashboard > .e-sidebar .e-sidebar-content {
    display: block !important;
    flex: none !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

/* Expanded: whole sidebar scrolls (menu + footer together), like legacy .dashboard-nav. */
#mainDashboard.dashboard:not(.dashboard-compact) > .e-sidebar.dashboard-nav,
#mainDashboard.dashboard:not(.dashboard-compact) > .e-sidebar {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

#mainDashboard.dashboard:not(.dashboard-compact) > .e-sidebar.dashboard-nav::-webkit-scrollbar,
#mainDashboard.dashboard:not(.dashboard-compact) > .e-sidebar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Compact: scrollbar styling when icons overflow the viewport height. */
#mainDashboard.dashboard-compact > .e-sidebar.dashboard-nav::-webkit-scrollbar,
#mainDashboard.dashboard-compact > .e-sidebar::-webkit-scrollbar {
    width: 3px !important;
}

#mainDashboard.dashboard-compact > .e-sidebar.dashboard-nav::-webkit-scrollbar-thumb,
#mainDashboard.dashboard-compact > .e-sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.2) !important;
    border-radius: 2px !important;
}

.dashboard > .e-sidebar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

#mainDashboard.dashboard > .e-sidebar header {
    flex-shrink: 0;
}

.dashboard > .e-sidebar header {
    min-height: var(--dashboard-header-height);
    padding: 8px 27px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--dashboard-header-bg);
    flex-shrink: 0;
}

.dashboard > .e-sidebar a {
    color: #fff;
    text-decoration: none;
}

#mainDashboard .dashboard-nav-list .dashboard-nav-dropdown-toggle:after {
    filter: brightness(0.5) invert(0.5);
}

/* No item transitions during sidebar width animation (site.css uses 0.5s ease-out). */
#mainDashboard .dashboard-nav-list .dashboard-nav-item,
#mainDashboard .dashboard-nav-list .dashboard-nav-dropdown-toggle,
#mainDashboard .dashboard-nav-list .dashboard-nav-dropdown-item {
    transition: none !important;
}

#mainDashboard .dashboard-nav-list .dashboard-nav-item,
#mainDashboard .dashboard-nav-list .dashboard-nav-dropdown-toggle,
#mainDashboard .dashboard-nav-list .dashboard-nav-dropdown-item,
#mainDashboard .dashboard-nav-list .menu-text,
#mainDashboard .dashboard_sf_treeview .e-list-item,
#mainDashboard .dashboard_sf_treeview .e-list-item .e-list-text {
    font-family: 'Montserrat-Regular', sans-serif !important;
    color: #fff !important;
}

#mainDashboard .dashboard-nav-list .menu-text {
    font-size: 14px !important;
    font-weight: 400 !important;
}

#mainDashboard .dashboard-nav-list .dashboard-nav-dropdown-item,
#mainDashboard .dashboard-nav-list .dashboard-nav-dropdown-item .menu-text {
    font-size: 11px !important;
    line-height: normal !important;
}

#mainDashboard .dashboard-nav-list .menu-separator,
#mainDashboard .dashboard-nav-list .menu-separator span {
    color: #ffffff !important;
    font-size: 11px !important;
}

#mainDashboard .dashboard-nav-list .menu-separator {
    min-height: 14px;
}

/* Syncfusion TreeView sets .e-list-text { min-height: 22px } — separators are group headers, not nav rows. */
.dashboard_sf_treeview .e-list-text:has(.menu-separator) {
    min-height: 14px !important;
    line-height: normal !important;
}

.dashboard_sf_treeview .e-list-text > span:has(.menu-separator) {
    min-height: 14px;
}

.e-menu-popup .e-menu-item:has(.menu-separator) {
    min-height: 14px !important;
    height: auto !important;
    line-height: normal !important;
    padding: 0 !important;
    pointer-events: none;
    cursor: default;
    background: transparent !important;
}

.e-menu-popup .e-menu-item:has(.menu-separator):hover,
.e-menu-popup .e-menu-item:has(.menu-separator).e-focused {
    background: transparent !important;
}

.e-menu-popup .menu-separator {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 22px;
    margin: 4px 0 2px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
    border-radius: 0;
}

.e-menu-popup .menu-separator span {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-right: 8px;
}

.e-menu-popup .menu-separator::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    min-width: 12px;
    background: rgba(255, 255, 255, 0.28);
}

#mainDashboard .dashboard-nav-list .dashboard-nav-item.active,
#mainDashboard .dashboard-nav-list .dashboard-nav-dropdown-item.active,
#mainDashboard .dashboard-nav-list .dashboard-nav-dropdown-toggle.active,
#mainDashboard .dashboard-nav-list .dashboard-nav-item.active .menu-text,
#mainDashboard .dashboard-nav-list .dashboard-nav-dropdown-item.active .menu-text,
#mainDashboard .dashboard-nav-list .dashboard-nav-dropdown-toggle.active .menu-text {
    color: #323537 !important;
}

#mainDashboard .dashboard-nav-list .dashboard-nav-dropdown-toggle.active-parent,
#mainDashboard .dashboard-nav-list .dashboard-nav-dropdown-toggle.active-parent .menu-text {
    color: #fff !important;
}

/* Expanded: menu list grows with content; sidebar element handles scroll. */
#mainDashboard.dashboard:not(.dashboard-compact) .dashboard-nav-list {
    overflow: visible !important;
}

.dashboard-nav-list {
    display: flex;
    flex-direction: column;
}

.dashboard-nav-footer {
    flex-shrink: 0;
}

.dashboard > .e-sidebar a:hover {
    text-decoration: none;
}

.dashboard-nav-list,
.dashboard-nav-footer {
    background-color: var(--dashboard-nav-bg) !important;
}

/* ── SfTreeView expanded sidebar navigation ── */
.dashboard_sf_treeview.e-treeview {
    background-color: var(--dashboard-nav-bg);
    border: none;
    padding: 0;
    width: 100%;
    overflow: visible;
}

.dashboard_sf_treeview .e-list-item,
.dashboard_sf_treeview .e-list-item.e-active,
.dashboard_sf_treeview .e-list-item.e-hover,
.dashboard_sf_treeview .e-list-item.e-node-focus,
.dashboard_sf_treeview .e-list-item:focus,
.dashboard_sf_treeview .e-list-item:hover,
.dashboard_sf_treeview .e-list-item:active {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    line-height: normal !important;
    outline: none !important;
    box-shadow: none !important;
    transition: none !important;
    animation: none !important;
}

.dashboard_sf_treeview .e-list-item *,
.dashboard_sf_treeview .e-list-item *::before,
.dashboard_sf_treeview .e-list-item *::after {
    transition: none !important;
    animation: none !important;
}

.dashboard_sf_treeview .e-fullrow,
.dashboard_sf_treeview .e-list-item.e-active > .e-fullrow,
.dashboard_sf_treeview .e-list-item.e-hover > .e-fullrow,
.dashboard_sf_treeview .e-list-item.e-node-focus > .e-fullrow {
    display: none !important;
    background: transparent !important;
    background-color: transparent !important;
    opacity: 0 !important;
}

.dashboard_sf_treeview .e-list-item .e-text-content,
.dashboard_sf_treeview .e-list-item .e-text-content:hover,
.dashboard_sf_treeview .e-list-item:hover > .e-text-content,
.dashboard_sf_treeview .e-list-item:focus > .e-text-content,
.dashboard_sf_treeview .e-list-item.e-hover > .e-text-content,
.dashboard_sf_treeview .e-list-item.e-active > .e-text-content,
.dashboard_sf_treeview .e-list-item.e-node-focus > .e-text-content,
.dashboard_sf_treeview .e-list-item .e-list-text,
.dashboard_sf_treeview .e-list-item.e-active .e-list-text,
.dashboard_sf_treeview .e-list-item.e-hover .e-list-text {
    background: transparent !important;
    background-color: transparent !important;
}

.dashboard_sf_treeview .e-text-content {
    padding: 0 !important;
    width: 100%;
    display: flex !important;
    align-items: stretch !important;
    overflow: visible !important;
}

.dashboard_sf_treeview .e-list-text {
    padding: 0 !important;
    line-height: normal !important;
    color: #fff !important;
    width: 100%;
    display: block !important;
    overflow: visible !important;
    white-space: normal !important;
}

.dashboard_sf_treeview .e-list-text > span,
.dashboard_sf_treeview .e-list-text > a.dashboard-menu-nav-link {
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

.dashboard_sf_treeview .e-icons.e-icon-expandable,
.dashboard_sf_treeview .e-icons.e-icon-collapsible,
.dashboard_sf_treeview .e-icon-collapsible,
.dashboard_sf_treeview .e-icon-expandable {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.dashboard_sf_treeview .e-ul {
    padding: 0 !important;
    margin: 0 !important;
}

.dashboard_sf_treeview .e-ul .e-list-item {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.dashboard_sf_treeview .e-list-item[aria-expanded="true"] > .e-text-content .dashboard-nav-dropdown-toggle::after {
    background-image: url('/images/svg/arrow_down.svg') !important;
}

.dashboard_sf_treeview .dashboard-nav-item {
    min-height: 30px;
    white-space: nowrap;
}

.dashboard_sf_treeview .dashboard-nav-dropdown-toggle {
    white-space: nowrap;
}

.dashboard_sf_treeview .dashboard-nav-dropdown-item {
    min-height: 20px;
    white-space: nowrap;
}

.dashboard_sf_treeview .dashboard-nav-item.active::before,
.dashboard_sf_treeview .dashboard-nav-dropdown-toggle.active::before,
.dashboard_sf_treeview .dashboard-nav-dropdown-toggle.active-parent::before,
.dashboard_sf_treeview .dashboard-nav-dropdown-item.active::before {
    height: 22px;
}

.dashboard_sf_treeview .dashboard-nav-dropdown-toggle.active::after {
    background-image: url('/images/svg/arrow_down.svg') !important;
}

/* At rest: clip overflowing text and show ellipsis. */
.dashboard_sf_treeview .menu-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On hover: switch to inline-block so translateX % refers to text width,
   then scroll the text to reveal the full label (same timing for roots and children). */
.dashboard_sf_treeview .dashboard-nav-item:hover .menu-text,
.dashboard_sf_treeview .dashboard-nav-dropdown-toggle:hover .menu-text,
.dashboard_sf_treeview .dashboard-nav-dropdown-item:hover .menu-text,
.e-menu-popup:has(.dashboard-nav-item) .dashboard-nav-item:hover .menu-text {
    display: inline-block;
    overflow: visible;
    text-overflow: clip;
    animation: dashboard-menu-autoscroll 5s ease-in-out infinite alternate !important;
}

.dashboard_sf_treeview .e-list-item[aria-expanded="true"] > .e-text-content .dashboard-nav-dropdown-toggle {
    background: rgba(255, 255, 255, 0.07);
}

.dashboard_sf_treeview .e-list-item[aria-expanded="true"] > .e-ul {
    background: #434343 !important;
}

.dashboard-nav-item.active,
.dashboard-nav-dropdown-item.active,
.dashboard-nav-dropdown-toggle.active,
.dashboard-nav-dropdown-toggle.active-parent {
    isolation: isolate;
}

.menu-text-wrap {
    flex: 1 1 0;
    min-width: 0;
    width: 0;
    overflow: hidden;
    display: block;
    box-sizing: border-box;
    container-type: inline-size;
}

.dashboard-nav-dropdown-toggle .menu-text-wrap {
    padding-right: 4px;
}

.dashboard-nav-dropdown-item .menu-text-wrap {
    padding-right: 8px;
}

@keyframes dashboard-menu-autoscroll {
    0%, 12% {
        transform: translateX(0);
    }

    88%, 100% {
        transform: translateX(min(0px, calc(100cqw - 100%)));
    }
}

.dashboard-nav-item.active .menu-icon,
.dashboard-nav-dropdown-toggle.active .menu-icon {
    filter: brightness(0.2);
}

.dashboard-nav-item.active .menu-icon-selected,
.dashboard-nav-dropdown-toggle.active .menu-icon-selected,
.dashboard-nav-dropdown-toggle.active-parent .menu-icon-selected,
.dashboard-nav-dropdown-item.active .menu-icon-selected {
    filter: none;
}

/* SfButton menu toggle */
.menu-toggle.e-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    cursor: pointer;
    background: transparent url('/images/svg/menu_icon.svg') center / 24px 24px no-repeat !important;
    color: transparent !important;
}

.menu-toggle.e-btn:hover,
.menu-toggle.e-btn:active,
.menu-toggle.e-btn:focus,
.menu-toggle.e-btn.e-active,
.menu-toggle.e-btn.e-ripple {
    background: transparent url('/images/svg/menu_icon.svg') center / 24px 24px no-repeat !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

.menu-toggle.e-btn .e-btn-icon {
    display: none !important;
}

.dashboard-toolbar .menu-toggle {
    display: flex !important;
}

/* site.css legacy forces a fixed px value — we lock it here via our variable so CSS and DockSize prop agree. */
#mainDashboard.dashboard-compact > .e-sidebar.dashboard-nav,
#mainDashboard.dashboard-compact > .e-sidebar {
    width: var(--dashboard-nav-width-compact) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Compact mode */
.dashboard-compact .logo-open {
    display: none;
}

.dashboard-compact .logo-closed {
    display: flex !important;
}

.dashboard-compact .menu-icon {
    width: 22px;
    height: 22px;
    margin: 4px auto;
}

.dashboard-compact .dashboard-nav-item {
    text-align: center;
    justify-content: center;
    padding-left: 0;
}

.dashboard-compact .dashboard-nav-item .menu-text-wrap,
.dashboard-compact .dashboard-nav-item span {
    display: none;
}

.dashboard-compact .nav-item-divider,
.dashboard-compact .nav_lang,
.dashboard-compact .nav_app_info {
    display: none;
}

.dashboard-compact .label_about,
.dashboard-compact .brand_app_text,
.dashboard-compact .copyright_container {
    display: none;
}

.dashboard-compact .dashboard-nav-item.active::before,
.dashboard-compact .dashboard-nav-dropdown-toggle.active::before {
    display: none !important;
}

.dashboard-compact > .e-sidebar,
.dashboard-compact > .e-sidebar .e-sidebar-content,
.dashboard-compact .dashboard-nav-list {
    overflow: visible !important;
}

.dashboard-nav-list .e-menu-wrapper,
.dashboard-compact .dashboard-nav-list .e-menu-wrapper,
.dashboard-nav-list ul.e-menu,
.dashboard-compact .dashboard-nav-list ul.e-menu {
    width: 100% !important;
    min-width: 0 !important;
    background: var(--dashboard-nav-bg) !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.dashboard-compact .dashboard-nav-list ul.e-menu > .e-menu-item {
    height: auto !important;
    line-height: normal !important;
    padding: 4px 0 !important;
    background: var(--dashboard-nav-bg) !important;
    color: inherit !important;
    display: flex !important;
    justify-content: center !important;
}

.dashboard-compact .dashboard-nav-list ul.e-menu > .e-menu-item .menu-text-wrap {
    display: none !important;
}

.dashboard-compact .dashboard-nav-list ul.e-menu > .e-menu-item .e-caret {
    display: none !important;
}

.dashboard-compact .dashboard-nav-list ul.e-menu > .e-menu-item.e-focused,
.dashboard-compact .dashboard-nav-list ul.e-menu > .e-menu-item:hover,
.dashboard-compact .dashboard-nav-list ul.e-menu > .e-menu-item.e-selected {
    background: rgba(255, 255, 255, 0.08) !important;
}

.dashboard-compact .dashboard-nav-list ul.e-menu > .e-menu-item:has(.dashboard-nav-item.active),
.dashboard-compact .dashboard-nav-list ul.e-menu > .e-menu-item:has(.dashboard-nav-item.active):hover,
.dashboard-compact .dashboard-nav-list ul.e-menu > .e-menu-item:has(.dashboard-nav-item.active).e-focused,
.dashboard-compact .dashboard-nav-list ul.e-menu > .e-menu-item:has(.dashboard-nav-item.active).e-selected {
    background: rgba(221, 225, 232, 0.7) !important;
}

/* Flyout popup — appended to <body> by Syncfusion, so no parent selector is possible.
   Scoped via :has(.dashboard-nav-item) which is a class only our menu template emits,
   keeping grid/dropdown context-menus unaffected. */
.e-menu-popup:has(.dashboard-nav-item) {
    width: max-content !important;
    max-width: 300px !important;
    min-width: 200px !important;
    background: #434343 !important;
    border: none !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    overflow: visible !important;
}

/* Scroll goes on the inner ul/scroll-container, not the popup root
   (Syncfusion calculates popup position before rendering, so overflow on the root collapses it) */
.e-menu-popup:has(.dashboard-nav-item) ul,
.e-menu-popup:has(.dashboard-nav-item) .e-menu-vscroll,
.e-menu-popup:has(.dashboard-nav-item) .e-vscroll-content {
    width: max-content !important;
    max-width: 300px !important;
    min-width: 200px !important;
    max-height: 72vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #434343 !important;
    border: none !important;
    padding: 4px 6px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.2) transparent !important;
}

.e-menu-popup .e-menu-item:has(.dashboard-nav-item) {
    height: auto !important;
    line-height: normal !important;
    width: 100% !important;
    max-width: none !important;
    color: #fff !important;
    background: transparent !important;
    padding: 0 !important;
}

.e-menu-popup .e-menu-item:has(.dashboard-nav-item):hover,
.e-menu-popup .e-menu-item:has(.dashboard-nav-item).e-focused {
    background: rgba(255, 255, 255, 0.12) !important;
}

.e-menu-popup .dashboard-nav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    gap: 6px !important;
    padding: 3px 12px !important;
    overflow: visible !important;
    min-height: 26px;
    white-space: nowrap;
}

.e-menu-popup .dashboard-nav-item .menu-text-wrap,
.e-menu-popup .dashboard-nav-item .menu-text {
    display: block !important;
    width: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: #fff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important;
    line-height: normal !important;
}

.e-menu-popup .dashboard-nav-item .menu-icon {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

.e-menu-popup .dashboard-nav-item.active {
    background: rgba(221, 225, 232, 0.7) !important;
    color: #323537 !important;
}

.e-menu-popup .dashboard-nav-item.active::before {
    display: none !important;
}

.e-menu-popup .dashboard-nav-item.active .menu-text {
    color: #323537 !important;
}

/* ── Responsive sidebar ────────────────────────────────────────────────────── */

/* Tablet (769-1279 px): sidebar is always compact (Push + dock).
   Syncfusion will set margin-left but may use the wrong value during init —
   we lock it here. The toggle button is hidden because expanding is disabled. */
@media (min-width: 769px) and (max-width: 1279px) {
    #mainDashboard > .e-sidebar.dashboard-nav,
    #mainDashboard > .e-sidebar {
        width: var(--dashboard-nav-width-compact) !important;
    }

    #mainDashboard .dashboard-app,
    #mainDashboard .dashboard-app.e-content {
        margin-left: var(--dashboard-nav-width-compact) !important;
    }

    .dashboard-toolbar .menu-toggle {
        display: none !important;
    }
}

/* Mobile (≤768 px): sidebar is a full-width overlay (SidebarType.Over).
   Content takes the full viewport — no margin regardless of sidebar state.
   The sidebar itself is hidden off-screen when closed by Syncfusion. */
@media (max-width: 768px) {
    #mainDashboard.dashboard {
        display: block;
    }

    /* Beat any leftover desktop/preload margin selectors on mobile. */
    html.dashboard-mobile-preload #mainDashboard .dashboard-app,
    html.dashboard-mobile-preload #mainDashboard .dashboard-app.e-content,
    html.sidebar-expanded-preload #mainDashboard .dashboard-app,
    html.sidebar-expanded-preload #mainDashboard .dashboard-app.e-content,
    html.sidebar-compact-preload #mainDashboard .dashboard-app,
    html.sidebar-compact-preload #mainDashboard .dashboard-app.e-content,
    #mainDashboard.dashboard-mobile .dashboard-app,
    #mainDashboard.dashboard-mobile .dashboard-app.e-content,
    #mainDashboard.dashboard:not(.dashboard-compact) .dashboard-app,
    #mainDashboard.dashboard:not(.dashboard-compact) .dashboard-app.e-content,
    #mainDashboard.dashboard-compact .dashboard-app,
    #mainDashboard.dashboard-compact .dashboard-app.e-content,
    #mainDashboard .dashboard-app,
    #mainDashboard .dashboard-app.e-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Keep sidebar hidden during portal-nav-loading on mobile */
    html.portal-nav-loading #mainDashboard > .e-sidebar.dashboard-nav {
        display: none !important;
    }

    /* SfDashboardLayout: ~1/3 row height (CellAspectRatio 12 vs 4 desktop) — drop fixed min-heights. */
    .time_dashboard_grid_area,
    .access_dashboard_grid_area,
    .ai_dashboard_grid_area,
    .recruitment_dashboard_grid_area,
    .performance_survey_dashboard_grid_area,
    .training_dashboard_grid_area {
        min-height: 0;
    }

    .recruitment_dashboard_grid_area .recruitment_dashboard_card_body,
    .performance_survey_dashboard_grid_area .performance_survey_dashboard_card_body,
    .ai_dashboard_grid_area .recruitment_dashboard_card_body {
        min-height: 0;
    }
}

/* Semi-transparent backdrop shown behind the sidebar overlay on mobile */
.sidebar-mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1049;
    cursor: pointer;
}