/* ==========================================================================
   DOCtrac Enterprise Header Styles
   Redesigned to match the reference design:
   - Tier 1: Clean White Top Bar (Logo, Project Pill, Enquiry Pill, User Profile, Lock Icon, Sign Out)
   - Tier 2: Dark Navy Nav Bar (Blue Dashboard Button + Navigation Tabs)
   Scope: .dtr-header, #topBannerMainContainerDiv, #bannerSecondRowDiv, [id^="MainMenu_DXME"]
   ========================================================================== */

/* ==========================================================================
   NAVIGATION & MENU THEME CONFIGURATION (CSS VARIABLES)
   Centralized location for all menu colors, fonts, sizes, and layout.
   Edit values here to customize the entire navigation bar and dropdowns.
   ========================================================================== */
:root {
    /* --- Tier 2 Navbar Shell (Main Navigation Bar) --- */
    --dtr-menu-bar-bg: #111726;                     /* Navigation bar background */
    --dtr-menu-bar-height: 44px;                    /* Navigation bar height */
    --dtr-menu-bar-border: 1px solid #1e293b;       /* Navigation bar bottom border */
    --dtr-menu-bar-padding: 0 18px;                 /* Navigation bar horizontal padding */
    --dtr-menu-item-gap: 4px;                       /* Gap between top-level menu items */

    /* --- Top-Level Menu Items (Navbar Buttons & Tabs) --- */
    --dtr-menu-item-height: 32px;                   /* Menu item height */
    --dtr-menu-item-padding: 0 8px;                /* Menu item horizontal padding */
    --dtr-menu-item-radius: 6px;                    /* Menu item corner radius */
    --dtr-menu-font-family: inherit;                /* Menu font family */
    --dtr-menu-font-size: 13.5px;                   /* Menu font size */
    --dtr-menu-font-weight: 500;                    /* Default font weight */
    --dtr-menu-text-color: #ffffff;                 /* Menu text color */

    /* --- Top-Level Menu Item: Hover State --- */
    --dtr-menu-hover-bg: rgba(255, 255, 255, 0.08); /* Hover background highlight */
    --dtr-menu-hover-color: #ffffff;                /* Hover text color */

    /* --- Top-Level Menu Item: Selected / Active State (Dashboard & Parent Menus) --- */
    --dtr-menu-active-bg: rgba(255, 255, 255, 0.14);/* Active pill background highlight */
    --dtr-menu-active-color: #ffffff;               /* Active text color */
    --dtr-menu-active-font-weight: 600;             /* Active font weight */
    --dtr-menu-active-radius: 6px;                  /* Active pill corner radius */

    /* --- Top-Level Menu Item: Dropdown Indicator Arrow --- */
    --dtr-menu-arrow-opacity: 0.75;                 /* Default dropdown arrow opacity */
    --dtr-menu-arrow-hover-opacity: 1;              /* Hover / active arrow opacity */
    --dtr-menu-arrow-gap: 5px;                      /* Spacing before dropdown arrow */

    /* --- Dashboard Button Specific Settings --- */
    --dtr-dashboard-icon-size: 12.5px;              /* 4-square grid icon size */
    --dtr-dashboard-icon-color: #ffffff;            /* 4-square grid icon color */
    --dtr-dashboard-icon-gap: 7px;                  /* Spacing between grid icon and text */

    /* --- Submenu Dropdown Popups (DevExpress Dropdown Containers) --- */
    --dtr-submenu-bg: #ffffff;                      /* Dropdown background color */
    --dtr-submenu-border: 1px solid #cbd5e1;        /* Dropdown border */
    --dtr-submenu-radius: 8px;                      /* Dropdown corner radius */
    --dtr-submenu-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.05); /* Elevation shadow */
    --dtr-submenu-padding: 6px 0;                   /* Dropdown top/bottom padding */
    --dtr-submenu-min-width: 250px;                 /* Dropdown minimum width */
    --dtr-submenu-max-width: 440px;                 /* Dropdown maximum width */
    --dtr-submenu-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* --- Submenu Items (Dropdown Rows) --- */
    --dtr-submenu-item-min-height: 32px;            /* Minimum row height */
    --dtr-submenu-item-padding: 7px 16px;           /* Padding inside each dropdown row */
    --dtr-submenu-item-color: #334155;              /* Default text color (slate) */
    --dtr-submenu-item-font-size: 13px;             /* Dropdown text font size */
    --dtr-submenu-item-font-weight: 600;            /* Default font weight */

    /* --- Submenu Items: Hover & Active State --- */
    --dtr-submenu-item-hover-bg: #111726;           /* Hover/active row background (matches navbar) */
    --dtr-submenu-item-hover-color: #ffffff;        /* Hover/active row text color */
    --dtr-submenu-item-hover-font-weight: 500;      /* Hover/active font weight */

    /* --- Submenu Nested Flyout Arrow --- */
    --dtr-submenu-flyout-arrow-opacity: 0.65;       /* Submenu flyout arrow opacity */
    --dtr-submenu-flyout-arrow-hover-opacity: 1;     /* Submenu flyout arrow hover opacity */

    /* --- Ambient 4-Sided Blueish Gradient Shadow (Narrow Perimeter Glow ~12-14px) --- */
    --dtr-ambient-viewport-shadow: 
        /* Top side (over header) */
        inset 0 10px 14px -4px rgba(195, 215, 250, 0.45),
        inset 0 3px 5px -1px rgba(195, 215, 250, 0.35),
        /* Bottom side */
        inset 0 -12px 16px -4px rgba(180, 200, 238, 0.45),
        inset 0 -3px 5px -1px rgba(180, 200, 238, 0.35),
        /* Left side (spanning header and content) */
        inset 10px 0 14px -4px rgba(215, 224, 244, 0.50),
        inset 3px 0 5px -1px rgba(215, 224, 244, 0.35),
        /* Right side (spanning header and content) */
        inset -10px 0 14px -4px rgba(210, 220, 244, 0.50),
        inset -3px 0 5px -1px rgba(210, 220, 244, 0.35);

    --dtr-card-blue-shadow: 0 4px 20px -2px rgba(80, 110, 180, 0.08), 0 2px 6px -1px rgba(80, 110, 180, 0.04);
    --dtr-card-blue-shadow-hover: 0 16px 36px -4px rgba(80, 110, 180, 0.16), 0 6px 14px -2px rgba(80, 110, 180, 0.08);
}

/* Root Fixed Header Shell */
.dtr-header,
#topBannerMainContainerDiv.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 98px !important;
    min-height: 98px !important;
    max-height: 98px !important;
    z-index: 6000 !important;
    background-color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.04) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    box-sizing: border-box !important;
    transition: none !important;
}

/* Ensure Page Body & Main Content have clean white background with dynamic top offset */
html {
    background-color: #ffffff !important;
    min-height: 100% !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

body {
    padding-top: var(--dtr-header-total-height, 98px) !important;
    background-color: #ffffff !important;
    min-height: 100vh !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

body.dtr-drawer-open {
    overflow: hidden !important;
}

/* Single-tier layout when navigation bar is absent or hidden (e.g., SA mode) */
.dtr-header.dtr-no-nav,
.dtr-header:not(:has(#bannerSecondRowDiv)),
.dtr-header:not(:has(.dtr-header-nav-bar)),
#topBannerMainContainerDiv.dtr-no-nav,
#topBannerMainContainerDiv.header.dtr-no-nav {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
}

body.dtr-no-nav,
body:has(.dtr-no-nav),
body:has(#topBannerMainContainerDiv.dtr-no-nav),
body:has(.dtr-header.dtr-no-nav) {
    padding-top: 54px !important;
}

/* 4-Sided Ambient Gradient Glow framing the entire viewport including header */
body::after {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none !important;
    z-index: 6000 !important;
    box-shadow: var(--dtr-ambient-viewport-shadow) !important;
}

#contentMainContainerDiv {
    position: relative !important;
    background: transparent !important;
    min-height: calc(100vh - 98px) !important;
}

body.dtr-no-nav #contentMainContainerDiv,
body:has(.dtr-no-nav) #contentMainContainerDiv,
body:has(#topBannerMainContainerDiv.dtr-no-nav) #contentMainContainerDiv,
body:has(.dtr-header.dtr-no-nav) #contentMainContainerDiv {
    min-height: calc(100vh - 54px) !important;
}

#contentSectionDiv {
    background: transparent !important;
}

/* ==========================================================================
   TIER 1: CLEAN WHITE TOP BAR (Height: 54px)
   Brand Logo | Project Pill | Divider | Enquiry Pill | User Profile | Lock | Sign Out
   ========================================================================== */
.dtr-header-top {
    height: auto !important;
    min-height: 54px !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

/* Brand / Logo */
.dtr-header-brand {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-right: 8px !important;
    height: 32px !important;
}

.dtr-header-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.dtr-header-logo {
    max-height: 38px !important;
    height: 38px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    background: transparent !important;
    transition: opacity 0.15s ease !important;
}

.dtr-header-logo:hover {
    opacity: 0.88 !important;
}

/* Context Area (Project & Enquiry) */
.dtr-header-context-area {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Common Context Label & Icons */
.dtr-context-icon {
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.dtr-folder-icon {
    color: #2563eb !important;
}

.dtr-enquiry-icon {
    color: #64748b !important;
}

.dtr-header .topBannerLabel,
.dtr-context-label {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

/* Context Divider */
.dtr-context-divider {
    width: 1px !important;
    height: 20px !important;
    background-color: #cbd5e1 !important;
    margin: 0 12px !important;
    flex-shrink: 0 !important;
}

/* --------------------------------------------------------------------------
   PROJECT SELECTOR PILL
   -------------------------------------------------------------------------- */
.dtr-header-project-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 320px !important;
    max-width: none !important;
}

.dtr-header-project-pill {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    height: 33px !important;
    padding: 0 10px !important;
    width: 100% !important;
    min-width: 250px !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
    gap: 7px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.dtr-header-project-pill:focus-within {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

/* Green Active Status Dot inside Project Pill */
.dtr-project-dot {
    width: 7px !important;
    height: 7px !important;
    min-width: 7px !important;
    background-color: #22c55e !important;
    border-radius: 50% !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* DevExpress Combobox inside Pill */
.dtr-header-project-pill #ProjectHeaderCombo,
.dtr-header-project-pill .dxeControl_MetropolisBlue {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dtr-header-project-pill #ProjectHeaderCombo > tbody > tr > td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

#ProjectHeaderCombo_I.dxeEditArea_MetropolisBlue.dxeEditAreaSys {
    font-size: 13px !important;
    font-family: inherit !important;
    color: #2563eb !important;
    font-weight: 700 !important;
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
}

#ProjectHeaderCombo_I.dxeEditArea_MetropolisBlue.dxeEditAreaSys.dxh1 {
    color: #ef4444 !important;
    font-weight: 700 !important;
}

#ProjectHeaderCombo_B-1 {
    border: none !important;
    background: transparent !important;
    padding: 0 2px !important;
    cursor: pointer !important;
}

#ProjectHeaderCombo_B-1 img {
    opacity: 0.55 !important;
    transition: opacity 0.15s ease !important;
}

#ProjectHeaderCombo_B-1:hover img {
    opacity: 0.9 !important;
}

#ProjectHeaderCombo_DDD_PW-1,
.dxeListBox_MetropolisBlue {
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   ENQUIRY LABEL (Clean text label, not a dropdown) - Pixel-perfect vertical alignment
   -------------------------------------------------------------------------- */
.dtr-header-enquiry-group,
#EnquiryHeaderGroup.dtr-header-enquiry-group {
    display: inline-flex !important;
    align-items: center !important;
    height: 33px !important;
    line-height: 1 !important;
    gap: 7px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dtr-header-enquiry-group *,
#EnquiryHeaderGroup * {
    box-sizing: border-box !important;
}

.dtr-header-enquiry-group .dtr-context-icon,
.dtr-header-enquiry-group .dtr-enquiry-icon {
    font-size: 15px !important;
    line-height: 1 !important;
    height: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

.dtr-header-enquiry-group .dtr-context-icon i,
.dtr-header-enquiry-group .dtr-enquiry-icon i {
    display: inline-block !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

.dtr-header-enquiry-group .topBannerLabel,
.dtr-header-enquiry-group .dtr-context-label,
.dtr-header #EnquiryHeaderLabel {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}

.dtr-header-enquiry-group .topBannerText,
.dtr-header-enquiry-group .dtr-enquiry-text,
.dtr-header #EnquiryHeaderText {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dtr-header-enquiry-group .dtr-enquiry-text a,
.dtr-header #EnquiryHeaderText a {
    text-decoration: none !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

.dtr-header-enquiry-group .dtr-enquiry-text a:hover,
.dtr-header #EnquiryHeaderText a:hover {
    color: #0f172a !important;
    text-decoration: underline !important;
}

.dtr-header-enquiry-group .dtr-enquiry-text strong,
.dtr-header #EnquiryHeaderText strong {
    color: #0f172a !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}

.dtr-header-enquiry-group .dtr-enquiry-text font,
.dtr-header #EnquiryHeaderText font,
.dtr-header-enquiry-group .dtr-enquiry-text font[color="red"],
.dtr-header #EnquiryHeaderText font[color="red"] {
    color: #ef4444 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

/* --------------------------------------------------------------------------
   RIGHT CLUSTER (Company | User Profile | Lock Icon | Sign Out)
   -------------------------------------------------------------------------- */
.dtr-header-right-cluster {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

/* SuperAdmin Company Switcher */
.dtr-header-company-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.dtr-company-text {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.dtr-btn-exit.dxbButton_MetropolisBlue {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    font-size: 11px !important;
    padding: 0 6px !important;
    height: 24px !important;
    border-radius: 4px !important;
}

.dtr-btn-exit.dxbButton_MetropolisBlue:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

.dtr-btn-exit:focus,
.dtr-btn-exit:focus-visible,
.dtr-btn-exit.dxbButton_MetropolisBlue:focus,
.dtr-btn-exit.dxbButton_MetropolisBlue:focus-visible,
.dtr-btn-exit.dxbButtonFocused_MetropolisBlue {
    background-color: #f0f9ff !important;
    border-color: #0284c7 !important;
    color: #0369a1 !important;
    outline: 2px solid #0284c7 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0284c7, 0 0 10px rgba(2, 132, 199, 0.4) !important;
}

/* User Profile Block */
.dtr-header-user-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.dtr-user-avatar-wrap {
    position: relative !important;
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
}

.dtr-user-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background-color: #1e293b !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    user-select: none !important;
}

.dtr-user-status-dot {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background-color: #22c55e !important;
    border: 2px solid #ffffff !important;
    box-sizing: content-box !important;
}

.dtr-user-info-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    line-height: 1.25 !important;
}

.dtr-user-name {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dtr-user-role {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    white-space: nowrap !important;
    max-width: 220px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Action Buttons (Lock Icon for Change Password, Sign Out Pill) */
.dtr-header-actions-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Change Password: Lock Icon Only Button */
.dtr-btn-lock,
.dtr-btn-lock.dxbButton_MetropolisBlue,
#ChangePasswordButton {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.dtr-btn-lock::before,
#ChangePasswordButton::before {
    content: "\f023" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 15px !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: color 0.15s ease !important;
}

.dtr-btn-lock *::before,
.dtr-btn-lock *::after,
.dtr-btn-lock .dxb::before,
.dtr-btn-lock .dxb::after,
#ChangePasswordButton *::before,
#ChangePasswordButton *::after {
    display: none !important;
    content: none !important;
}

.dtr-btn-lock:hover,
.dtr-btn-lock.dxbButton_MetropolisBlue:hover {
    background-color: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

.dtr-btn-lock:hover::before,
#ChangePasswordButton:hover::before {
    color: #0f172a !important;
}

.dtr-btn-lock:focus,
.dtr-btn-lock:focus-visible,
.dtr-btn-lock.dxbButton_MetropolisBlue:focus,
.dtr-btn-lock.dxbButton_MetropolisBlue:focus-visible,
.dtr-btn-lock.dxbButtonFocused_MetropolisBlue {
    background-color: #f0f9ff !important;
    border-color: #0284c7 !important;
    outline: 2px solid #0284c7 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0284c7, 0 0 10px rgba(2, 132, 199, 0.4) !important;
}

.dtr-btn-lock:focus::before,
#ChangePasswordButton:focus::before {
    color: #0284c7 !important;
}

/* Sign Out Button (Red Pill Button) */
.dtr-btn-logout,
.dtr-btn-logout.dxbButton_MetropolisBlue,
.dtr-btn-logout.dxbButton,
#BULogout,
#SPLogout {
    height: 33px !important;
    min-height: 33px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    border: 1px solid #fca5a5 !important;
    background-color: #ffffff !important;
    color: #ef4444 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}

.dtr-btn-logout *,
.dtr-btn-logout .dxb,
.dtr-btn-logout .dxb span,
.dtr-btn-logout .dx-vam,
#BULogout *,
#SPLogout * {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.dtr-btn-logout .dxb {
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 31px !important;
    color: #ef4444 !important;
    background: transparent !important;
}

.dtr-btn-logout .dxb::before {
    content: "\f2f5" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 12.5px !important;
    margin-right: 6px !important;
    color: #ef4444 !important;
    transition: color 0.15s ease !important;
}

.dtr-btn-logout:hover,
.dtr-btn-logout.dxbButton_MetropolisBlue:hover,
#BULogout:hover,
#SPLogout:hover {
    background-color: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #dc2626 !important;
}

.dtr-btn-logout:focus,
.dtr-btn-logout:focus-visible,
.dtr-btn-logout.dxbButton_MetropolisBlue:focus,
.dtr-btn-logout.dxbButton_MetropolisBlue:focus-visible,
.dtr-btn-logout.dxbButtonFocused_MetropolisBlue {
    background-color: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #dc2626 !important;
    outline: 2px solid #ef4444 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #ef4444, 0 0 12px rgba(239, 68, 68, 0.4) !important;
}

.dtr-btn-logout:focus .dxb,
.dtr-btn-logout:focus .dxb::before,
.dtr-btn-logout.dxbButtonFocused_MetropolisBlue .dxb,
.dtr-btn-logout.dxbButtonFocused_MetropolisBlue .dxb::before {
    color: #dc2626 !important;
}

.dtr-btn-logout:hover .dxb,
.dtr-btn-logout:hover .dxb::before {
    color: #dc2626 !important;
}

/* Auto-hide elements when empty */
.dtr-header-project-group:not(:has(#ProjectHeaderCombo)),
.dtr-header-project-group:has(#ProjectHeaderCombo[style*="display: none"]),
.dtr-header-project-group:has(#ProjectHeaderCombo[style*="visibility: hidden"]),
.dtr-header-project-group.dtr-hidden {
    display: none !important;
}

.dtr-header-enquiry-group:not(:has(#EnquiryHeaderLabel)),
.dtr-header-enquiry-group:not(:has(#EnquiryHeaderText)),
.dtr-header-enquiry-group:has(#EnquiryHeaderLabel[style*="display: none"]),
.dtr-header-enquiry-group:has(#EnquiryHeaderLabel[style*="visibility: hidden"]),
.dtr-header-enquiry-group.dtr-hidden {
    display: none !important;
}

.dtr-header-company-group:not(:has(#CompanyHeaderLabel)),
.dtr-header-company-group:has(#CompanyHeaderLabel[style*="display: none"]),
.dtr-header-company-group.dtr-hidden {
    display: none !important;
}

.dtr-header-context-area:not(:has(.dtr-header-project-group:not(.dtr-hidden))) .dtr-context-divider,
.dtr-header-context-area:not(:has(.dtr-header-enquiry-group:not(.dtr-hidden))) .dtr-context-divider {
    display: none !important;
}

/* ==========================================================================
   TIER 2: DARK NAVY NAVIGATION BAR (Height: 44px)
   Background: #111726
   Dashboard (Blue Pill Button with Grid Icon) | Navigation Tabs
   ========================================================================== */
/* Hide Navigation Bar Shell when empty, hidden, or in dtr-no-nav mode */
.dtr-header.dtr-no-nav #bannerSecondRowDiv,
.dtr-header.dtr-no-nav .dtr-header-nav-bar,
.dtr-header-nav-bar:not(:has(#MainMenu)),
.dtr-header-nav-bar:has(#MainMenu[style*="display: none"]),
.dtr-header-nav-bar:has(#MainMenu[style*="visibility: hidden"]),
.dtr-header-nav-bar:empty {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.dtr-header-nav-bar,
#bannerSecondRowDiv.dtr-header-nav-bar {
    height: var(--dtr-menu-bar-height) !important;
    min-height: var(--dtr-menu-bar-height) !important;
    max-height: var(--dtr-menu-bar-height) !important;
    background-color: var(--dtr-menu-bar-bg) !important;
    border-top: none !important;
    border-bottom: var(--dtr-menu-bar-border) !important;
    display: flex !important;
    align-items: center !important;
    padding: var(--dtr-menu-bar-padding) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.dtr-header-nav {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    min-width: 0 !important;
    width: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

.dtr-header-nav::-webkit-scrollbar {
    display: none !important;
}

/* Main Menu Shell inside Dark Tier */
.dtr-header .dtr-nav-menu.dxmLite_MetropolisBlue,
.dtr-header .dtr-nav-menu,
#MainMenu,
#MainMenu.dtr-nav-menu {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: fit-content !important;
    height: 100% !important;
}

.dtr-header .dtr-nav-menu .dxm-main {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    width: auto !important;
    max-width: fit-content !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--dtr-menu-item-gap) !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

.dtr-header .dtr-nav-menu .dxm-main > table,
.dtr-header .dtr-nav-menu .dxm-main > tbody,
.dtr-header .dtr-nav-menu .dxm-main > tbody > tr {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    width: auto !important;
    max-width: fit-content !important;
    gap: var(--dtr-menu-item-gap) !important;
    background: transparent !important;
    border: none !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

/* Eliminate all DevExpress separator lines & cell borders in Navbar */
.dtr-header .dtr-nav-menu .dxm-main,
.dtr-header .dtr-nav-menu .dxm-main table,
.dtr-header .dtr-nav-menu .dxm-main tbody,
.dtr-header .dtr-nav-menu .dxm-main tr,
.dtr-header .dtr-nav-menu .dxm-main td,
.dtr-header .dtr-nav-menu .dxm-main li,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item,
.dtr-header .dtr-nav-menu .dxm-main .dxm-spacing,
.dtr-header .dtr-nav-menu .dxm-main .dxm-separator {
    border: none !important;
    border-width: 0 !important;
}

.dtr-header .dtr-nav-menu .dxm-main .dxm-spacing,
.dtr-header .dtr-nav-menu .dxm-main .dxm-separator {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Standard Top-level Menu Items (Dark Navy Bar Style) - Rock-solid static rendering */
#MainMenu,
#MainMenu *,
.dtr-nav-menu,
.dtr-nav-menu *,
.dtr-header .dtr-nav-menu,
.dtr-header .dtr-nav-menu * {
    visibility: visible !important;
    opacity: 1 !important;
}

#MainMenu .dxm-main .dxm-item,
#MainMenu.dtr-nav-menu .dxm-main .dxm-item,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item,
.dxmLite_MetropolisBlue.dtr-nav-menu .dxm-main .dxm-item,
#MainMenu [id^="MainMenu_DXI"],
.dtr-header .dtr-nav-menu [id^="MainMenu_DXI"] {
    background-color: transparent !important;
    border: none !important;
    border-radius: var(--dtr-menu-item-radius) !important;
    height: var(--dtr-menu-item-height) !important;
    padding: var(--dtr-menu-item-padding) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    position: relative !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    width: auto !important;
    flex: 0 0 auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#MainMenu .dxm-main .dxm-item:hover,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item:hover {
    transition: background 0.15s ease-in-out, color 0.15s ease-in-out !important;
}

/* Inner wrappers must be vertically centered inline-flex with 100% height and transparent background */
#MainMenu .dxm-main .dxm-item a.dx,
#MainMenu .dxm-main .dxm-item .dxm-content,
#MainMenu .dxm-main .dxm-item span.dx-vam,
#MainMenu .dxm-main .dxm-item .dxm-contentText,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item a.dx,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item .dxm-content,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item span.dx-vam,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item .dxm-contentText {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#MainMenu .dxm-main .dxm-item *,
#MainMenu .dxm-main .dxm-item a,
#MainMenu .dxm-main .dxm-item .dxm-content,
#MainMenu .dxm-main .dxm-item span,
#MainMenu .dxm-main .dxm-item div {
    background: transparent !important;
    background-color: transparent !important;
}

/* Menu Font: Pure White, Weight 500 */
#MainMenu .dxm-main .dxm-item a.dx,
#MainMenu .dxm-main .dxm-item .dxm-content,
#MainMenu .dxm-main .dxm-item span.dx-vam,
#MainMenu .dxm-main .dxm-item .dxm-contentText,
#MainMenu .dxm-main .dxm-item a,
#MainMenu .dxm-main .dxm-item span,
#MainMenu .dxm-main .dxm-item div,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item a.dx,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item .dxm-content,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item span.dx-vam,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item .dxm-contentText,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item a,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item span,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item div {
    color: var(--dtr-menu-text-color) !important;
    font-size: var(--dtr-menu-font-size) !important;
    font-weight: var(--dtr-menu-font-weight) !important;
    font-family: var(--dtr-menu-font-family) !important;
    text-decoration: none !important;
    line-height: normal !important;
    transition: color 0.15s ease !important;
}

/* Submenu Drop-arrow in Menu Items */
#MainMenu .dxm-main .dxm-item .dxm-drop-img,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item .dxm-drop-img {
    opacity: var(--dtr-menu-arrow-opacity) !important;
    margin-left: var(--dtr-menu-arrow-gap) !important;
    vertical-align: middle !important;
    filter: brightness(0) invert(1) !important;
    transition: opacity 0.15s ease !important;
}

/* Top-level Menu Hover State */
#MainMenu .dxm-main .dxm-item:hover,
#MainMenu .dxm-main .dxm-item.dxm-hovered,
#MainMenu .dxm-item:hover,
#MainMenu .dxm-item.dxm-hovered,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item:hover,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item.dxm-hovered {
    background-color: var(--dtr-menu-hover-bg) !important;
    border: none !important;
    border-radius: var(--dtr-menu-item-radius) !important;
    box-shadow: none !important;
}

#MainMenu .dxm-main .dxm-item:hover .dxm-drop-img,
#MainMenu .dxm-main .dxm-item.dxm-hovered .dxm-drop-img,
#MainMenu .dxm-main .dxm-item.dxm-selected .dxm-drop-img,
#MainMenu .dxm-main .dxm-item.dxm-checked .dxm-drop-img,
#MainMenu .dxm-main .dxm-item.dtr-nav-item-active .dxm-drop-img,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item:hover .dxm-drop-img,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item.dxm-hovered .dxm-drop-img,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item.dxm-selected .dxm-drop-img,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item.dxm-checked .dxm-drop-img,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item.dtr-nav-item-active .dxm-drop-img {
    opacity: var(--dtr-menu-arrow-hover-opacity) !important;
}

/* Top-level Menu Selected / Active State (Parent Menu & Dashboard) */
#MainMenu .dxm-main .dxm-item.dxm-selected,
#MainMenu .dxm-main .dxm-item.dxm-checked,
#MainMenu .dxm-main .dxm-item.dtr-nav-item-active,
#MainMenu .dxm-item.dxm-selected,
#MainMenu .dxm-item.dxm-checked,
#MainMenu .dxm-item.dtr-nav-item-active,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item.dxm-selected,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item.dxm-checked,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item.dtr-nav-item-active {
    background-color: var(--dtr-menu-active-bg) !important;
    border: none !important;
    border-radius: var(--dtr-menu-active-radius) !important;
    box-shadow: none !important;
}

#MainMenu .dxm-main .dxm-item.dxm-selected *,
#MainMenu .dxm-main .dxm-item.dxm-checked *,
#MainMenu .dxm-main .dxm-item.dtr-nav-item-active *,
#MainMenu .dxm-item.dxm-selected *,
#MainMenu .dxm-item.dxm-checked *,
#MainMenu .dxm-item.dtr-nav-item-active *,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item.dxm-selected *,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item.dxm-checked *,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item.dtr-nav-item-active * {
    color: var(--dtr-menu-active-color) !important;
    font-weight: var(--dtr-menu-active-font-weight) !important;
}

/* --------------------------------------------------------------------------
   DASHBOARD BUTTON (Navbar Item with 4-Square Grid Icon - NO PURPLE)
   Aligned identically to all other items
   -------------------------------------------------------------------------- */
#MainMenu .dtr-nav-dashboard-item,
#MainMenu .dxm-main .dxm-item:first-child,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item.dtr-nav-dashboard-item,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item:first-child {
    background-color: transparent !important;
    border: none !important;
    border-radius: var(--dtr-menu-item-radius) !important;
    height: var(--dtr-menu-item-height) !important;
    padding: var(--dtr-menu-item-padding) !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

/* Dashboard Grid Icon */
#MainMenu .dtr-nav-dashboard-item .dxm-content::before,
#MainMenu .dxm-main .dxm-item:first-child .dxm-content::before,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item.dtr-nav-dashboard-item .dxm-content::before,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item:first-child .dxm-content::before {
    content: "\f009" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: var(--dtr-dashboard-icon-size) !important;
    color: var(--dtr-dashboard-icon-color) !important;
    margin-right: var(--dtr-dashboard-icon-gap) !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    height: 100% !important;
}

#MainMenu .dtr-nav-dashboard-item:hover,
#MainMenu .dxm-main .dxm-item:first-child:hover,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item.dtr-nav-dashboard-item:hover,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item:first-child:hover {
    background-color: var(--dtr-menu-hover-bg) !important;
}

#MainMenu .dtr-nav-dashboard-item.dxm-selected,
#MainMenu .dtr-nav-dashboard-item.dtr-nav-item-active,
#MainMenu .dxm-main .dxm-item:first-child.dxm-selected,
#MainMenu .dxm-main .dxm-item:first-child.dtr-nav-item-active,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item.dtr-nav-dashboard-item.dxm-selected,
.dtr-header .dtr-nav-menu .dxm-main .dxm-item.dtr-nav-dashboard-item.dtr-nav-item-active {
    background-color: var(--dtr-menu-active-bg) !important;
    border-radius: var(--dtr-menu-active-radius) !important;
    box-shadow: none !important;
}

/* ==========================================================================
   DEVEXPRESS SUBMENU DROPDOWN POPUPS (Rendered on Document Body Level)
   Clean White Popups with Rounded Corners, Slate Text, Matching Dark Navy Hover
   Auto-expands to accommodate long menu text without overflow or clipping
   ========================================================================== */
[id*="MainMenu_DXM"],
.dxm-popup,
.dxm-popupSys,
.dxmLite_MetropolisBlue .dxm-popup,
.dxmLite_MetropolisBlue .dxm-popupSys {
    background: var(--dtr-submenu-bg) !important;
    border: var(--dtr-submenu-border) !important;
    border-radius: var(--dtr-submenu-radius) !important;
    box-shadow: var(--dtr-submenu-shadow) !important;
    padding: var(--dtr-submenu-padding) !important;
    margin-top: 4px !important;
    font-family: var(--dtr-submenu-font-family) !important;
    z-index: 20000 !important;
    min-width: var(--dtr-submenu-min-width) !important;
    width: auto !important;
    max-width: var(--dtr-submenu-max-width) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

[id*="MainMenu_DXM"] > div,
[id*="MainMenu_DXM"] > table,
[id*="MainMenu_DXM"] table,
.dxm-popup table,
.dxm-popupSys table {
    width: 100% !important;
    min-width: var(--dtr-submenu-min-width) !important;
    max-width: var(--dtr-submenu-max-width) !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

[id*="MainMenu_DXM"] .dxm-shadow,
.dxm-popup .dxm-shadow {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

[id*="MainMenu_DXM"] ul.dx,
.dxm-popup ul.dx {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Submenu Item Container (Flexbox row) */
[id*="MainMenu_DXM"] .dxm-item,
.dxm-popup .dxm-item,
.dxm-popupSys .dxm-item,
.dxmLite_MetropolisBlue .dxm-popup .dxm-item,
[id*="MainMenu_DXM"] td.dxm-item,
.dxm-popup td.dxm-item,
.dxm-popupSys td.dxm-item {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    min-height: var(--dtr-submenu-item-min-height) !important;
    height: auto !important;
    width: 100% !important;
    min-width: var(--dtr-submenu-min-width) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

[id*="MainMenu_DXM"] b.dx-clear,
.dxm-popup b.dx-clear {
    display: none !important;
}

/* Submenu Item Text Container */
[id*="MainMenu_DXM"] .dxm-item .dxm-content,
.dxm-popup .dxm-item .dxm-content,
.dxm-popupSys .dxm-item .dxm-content {
    flex: 1 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: var(--dtr-submenu-item-padding) !important;
    float: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
    line-height: normal !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Submenu Item Links & Text */
[id*="MainMenu_DXM"] .dxm-item a.dx,
[id*="MainMenu_DXM"] .dxm-item .dxm-content,
[id*="MainMenu_DXM"] .dxm-item span.dx-vam,
[id*="MainMenu_DXM"] .dxm-item .dxm-contentText,
.dxm-popup .dxm-item a.dx,
.dxm-popup .dxm-item .dxm-content,
.dxm-popup .dxm-item span.dx-vam,
.dxm-popup .dxm-item .dxm-contentText {
    color: var(--dtr-submenu-item-color) !important;
    font-size: var(--dtr-submenu-item-font-size) !important;
    font-weight: var(--dtr-submenu-item-font-weight) !important;
    font-family: inherit !important;
    text-decoration: none !important;
    line-height: normal !important;
    white-space: nowrap !important;
}

/* Popout Arrow Container */
[id*="MainMenu_DXM"] .dxm-popOut,
.dxm-popup .dxm-popOut,
.dxm-popupSys .dxm-popOut {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    margin-left: auto !important;
    padding: 0 14px 0 8px !important;
    height: 100% !important;
    position: static !important;
    float: none !important;
    flex-shrink: 0 !important;
}

[id*="MainMenu_DXM"] .dxm-popOut img,
[id*="MainMenu_DXM"] .dxm-pImage,
[id*="MainMenu_DXM"] .dxWeb_mVerticalPopOut_MetropolisBlue,
.dxm-popup .dxm-popOut img,
.dxm-popup .dxm-pImage,
.dxm-popup .dxWeb_mVerticalPopOut_MetropolisBlue,
.dxm-popupSys .dxm-pImage {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
    opacity: var(--dtr-submenu-flyout-arrow-opacity) !important;
    visibility: visible !important;
    filter: none !important;
}

/* Popout Arrow on Hover/Selected: Invert to pure white */
[id*="MainMenu_DXM"] .dxm-item:hover .dxm-popOut img,
[id*="MainMenu_DXM"] .dxm-item.dxm-hovered .dxm-popOut img,
[id*="MainMenu_DXM"] .dxm-item.dxm-selected .dxm-popOut img,
[id*="MainMenu_DXM"] .dxm-item.dxm-checked .dxm-popOut img,
[id*="MainMenu_DXM"] .dxm-item.dtr-subitem-active .dxm-popOut img,
.dxm-popup .dxm-item:hover .dxm-popOut img,
.dxm-popup .dxm-item.dxm-hovered .dxm-popOut img,
.dxm-popup .dxm-item.dxm-selected .dxm-popOut img,
.dxm-popup .dxm-item.dxm-checked .dxm-popOut img,
.dxm-popup .dxm-item.dtr-subitem-active .dxm-popOut img {
    filter: brightness(0) invert(1) !important;
    opacity: var(--dtr-submenu-flyout-arrow-hover-opacity) !important;
}

/* Submenu Item Hover & Selected: Match menu background (#111726), NO PURPLE, pure white forecolor */
[id*="MainMenu_DXM"] .dxm-item.dxm-hovered,
[id*="MainMenu_DXM"] .dxm-item:hover,
[id*="MainMenu_DXM"] .dxm-item.dxm-selected,
[id*="MainMenu_DXM"] .dxm-item.dxm-checked,
[id*="MainMenu_DXM"] .dxm-item.dtr-subitem-active,
.dxm-popup .dxm-item.dxm-hovered,
.dxm-popup .dxm-item:hover,
.dxm-popup .dxm-item.dxm-selected,
.dxm-popup .dxm-item.dxm-checked,
.dxm-popup .dxm-item.dtr-subitem-active,
.dxm-popupSys .dxm-item.dxm-hovered,
.dxm-popupSys .dxm-item:hover,
.dxm-popupSys .dxm-item.dxm-selected,
.dxm-popupSys .dxm-item.dxm-checked,
.dxmLite_MetropolisBlue .dxm-popup .dxm-item.dxm-hovered,
.dxmLite_MetropolisBlue .dxm-popup .dxm-item:hover,
.dxmLite_MetropolisBlue .dxm-popup .dxm-item.dxm-selected,
.dxmLite_MetropolisBlue .dxm-popup .dxm-item.dxm-checked {
    background-color: var(--dtr-submenu-item-hover-bg) !important;
    color: var(--dtr-submenu-item-hover-color) !important;
}

[id*="MainMenu_DXM"] .dxm-item.dxm-hovered *,
[id*="MainMenu_DXM"] .dxm-item:hover *,
[id*="MainMenu_DXM"] .dxm-item.dxm-selected *,
[id*="MainMenu_DXM"] .dxm-item.dxm-checked *,
[id*="MainMenu_DXM"] .dxm-item.dtr-subitem-active *,
[id*="MainMenu_DXM"] .dxm-item.dxm-hovered a,
[id*="MainMenu_DXM"] .dxm-item:hover a,
[id*="MainMenu_DXM"] .dxm-item.dxm-selected a,
[id*="MainMenu_DXM"] .dxm-item.dxm-checked a,
[id*="MainMenu_DXM"] .dxm-item.dxm-hovered a.dx,
[id*="MainMenu_DXM"] .dxm-item:hover a.dx,
[id*="MainMenu_DXM"] .dxm-item.dxm-selected a.dx,
[id*="MainMenu_DXM"] .dxm-item.dxm-checked a.dx,
[id*="MainMenu_DXM"] .dxm-item.dxm-hovered .dxm-content,
[id*="MainMenu_DXM"] .dxm-item:hover .dxm-content,
[id*="MainMenu_DXM"] .dxm-item.dxm-selected .dxm-content,
[id*="MainMenu_DXM"] .dxm-item.dxm-checked .dxm-content,
[id*="MainMenu_DXM"] .dxm-item.dxm-hovered span.dx-vam,
[id*="MainMenu_DXM"] .dxm-item:hover span.dx-vam,
[id*="MainMenu_DXM"] .dxm-item.dxm-selected span.dx-vam,
[id*="MainMenu_DXM"] .dxm-item.dxm-checked span.dx-vam,
[id*="MainMenu_DXM"] .dxm-item.dxm-hovered .dxm-contentText,
[id*="MainMenu_DXM"] .dxm-item:hover .dxm-contentText,
[id*="MainMenu_DXM"] .dxm-item.dxm-selected .dxm-contentText,
[id*="MainMenu_DXM"] .dxm-item.dxm-checked .dxm-contentText,
.dxm-popup .dxm-item.dxm-hovered *,
.dxm-popup .dxm-item:hover *,
.dxm-popup .dxm-item.dxm-selected *,
.dxm-popup .dxm-item.dxm-checked *,
.dxm-popup .dxm-item.dtr-subitem-active *,
.dxm-popup .dxm-item.dxm-hovered a,
.dxm-popup .dxm-item:hover a,
.dxm-popup .dxm-item.dxm-selected a,
.dxm-popup .dxm-item.dxm-checked a,
.dxm-popup .dxm-item.dxm-hovered a.dx,
.dxm-popup .dxm-item:hover a.dx,
.dxm-popup .dxm-item.dxm-selected a.dx,
.dxm-popup .dxm-item.dxm-checked a.dx,
.dxm-popup .dxm-item.dxm-hovered .dxm-content,
.dxm-popup .dxm-item:hover .dxm-content,
.dxm-popup .dxm-item.dxm-selected .dxm-content,
.dxm-popup .dxm-item.dxm-checked .dxm-content,
.dxm-popup .dxm-item.dxm-hovered span.dx-vam,
.dxm-popup .dxm-item:hover span.dx-vam,
.dxm-popup .dxm-item.dxm-selected span.dx-vam,
.dxm-popup .dxm-item.dxm-checked span.dx-vam,
.dxm-popup .dxm-item.dxm-hovered .dxm-contentText,
.dxm-popup .dxm-item:hover .dxm-contentText,
.dxm-popup .dxm-item.dxm-selected .dxm-contentText,
.dxm-popup .dxm-item.dxm-checked .dxm-contentText,
.dxm-popupSys .dxm-item.dxm-hovered *,
.dxm-popupSys .dxm-item:hover *,
.dxm-popupSys .dxm-item.dxm-selected *,
.dxm-popupSys .dxm-item.dxm-checked *,
.dxmLite_MetropolisBlue .dxm-popup .dxm-item.dxm-hovered *,
.dxmLite_MetropolisBlue .dxm-popup .dxm-item:hover *,
.dxmLite_MetropolisBlue .dxm-popup .dxm-item.dxm-selected *,
.dxmLite_MetropolisBlue .dxm-popup .dxm-item.dxm-checked * {
    color: var(--dtr-submenu-item-hover-color) !important;
    font-weight: var(--dtr-submenu-item-hover-font-weight) !important;
}

[id*="MainMenu_DXM"] .dxm-item.dxm-hovered .dxm-pImage,
[id*="MainMenu_DXM"] .dxm-item.dxm-hovered .dxWeb_mVerticalPopOut_MetropolisBlue,
[id*="MainMenu_DXM"] .dxm-item.dxm-hovered img,
[id*="MainMenu_DXM"] .dxm-item:hover .dxm-pImage,
[id*="MainMenu_DXM"] .dxm-item:hover .dxWeb_mVerticalPopOut_MetropolisBlue,
[id*="MainMenu_DXM"] .dxm-item:hover img,
[id*="MainMenu_DXM"] .dxm-item.dxm-selected .dxm-pImage,
[id*="MainMenu_DXM"] .dxm-item.dxm-selected .dxWeb_mVerticalPopOut_MetropolisBlue,
[id*="MainMenu_DXM"] .dxm-item.dxm-selected img,
.dxm-popup .dxm-item.dxm-hovered .dxm-pImage,
.dxm-popup .dxm-item.dxm-hovered .dxWeb_mVerticalPopOut_MetropolisBlue,
.dxm-popup .dxm-item.dxm-hovered img,
.dxm-popup .dxm-item:hover .dxm-pImage,
.dxm-popup .dxm-item:hover .dxWeb_mVerticalPopOut_MetropolisBlue,
.dxm-popup .dxm-item:hover img,
.dxm-popup .dxm-item.dxm-selected .dxm-pImage,
.dxm-popup .dxm-item.dxm-selected .dxWeb_mVerticalPopOut_MetropolisBlue,
.dxm-popup .dxm-item.dxm-selected img {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    filter: brightness(0) invert(1) !important;
}

[id*="MainMenu_DXM"] .dxm-separator,
.dxm-popup .dxm-separator {
    height: 1px !important;
    background-color: #f1f5f9 !important;
    margin: 4px 0 !important;
    border: none !important;
}

/* ==========================================================================
   RESPONSIVE ADAPTATIONS
   ========================================================================== */
@media (max-width: 1200px) {
    .dtr-header-project-pill {
        width: 280px !important;
    }
    .dtr-header-enquiry-pill {
        max-width: 240px !important;
    }
    .dtr-user-role {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .dtr-header-project-pill {
        width: 200px !important;
    }
    .dtr-header-enquiry-pill {
        max-width: 180px !important;
    }
    .dtr-header .topBannerLabel,
    .dtr-context-label {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .dtr-header,
    #topBannerMainContainerDiv.header {
        height: auto !important;
        max-height: none !important;
    }
    body {
        padding-top: 130px !important;
    }
    .dtr-header-top {
        flex-wrap: wrap !important;
        height: auto !important;
        max-height: none !important;
        padding: 6px 12px !important;
    }
    .dtr-header-context-area {
        width: 100% !important;
        order: 3 !important;
        margin-top: 6px !important;
    }
    .dtr-header-right-cluster {
        margin-left: auto !important;
    }
}

/* ==========================================================================
   SECONDARY ACTION BUTTONS (Exact Print Button Midnight Sapphire Gradient Design)
   Applies to standalone secondary buttons across the app (New User, Print, etc.)
   ========================================================================== */
.dxbButton_MetropolisBlue.dxb-secondary[style*="display:none"],
.dxbButton_MetropolisBlue.dxb-secondary[style*="display: none"],
.dxbButton.dxb-secondary[style*="display:none"],
.dxbButton.dxb-secondary[style*="display: none"],
.dxb-secondary[style*="display:none"],
.dxb-secondary[style*="display: none"],
.actionRow .dxbButton[style*="display:none"],
.actionRow .dxbButton[style*="display: none"],
.actionRow .dxbButton_MetropolisBlue[style*="display:none"],
.actionRow .dxbButton_MetropolisBlue[style*="display: none"],
.actionRow .dxb-secondary[style*="display:none"],
.actionRow .dxb-secondary[style*="display: none"],
.actionRow [id*="Button"][style*="display:none"],
.actionRow [id*="Button"][style*="display: none"],
.dtr-btn-secondary[style*="display:none"],
.dtr-btn-secondary[style*="display: none"] {
    display: none !important;
}

.dxbButton_MetropolisBlue.dxb-secondary:not([style*="display:none"]):not([style*="display: none"]),
.dxbButton.dxb-secondary:not([style*="display:none"]):not([style*="display: none"]),
.dxb-secondary:not([style*="display:none"]):not([style*="display: none"]),
button.btn-secondary:not([style*="display:none"]):not([style*="display: none"]),
.btn-secondary:not([style*="display:none"]):not([style*="display: none"]),
.actionRow .dxbButton:not([style*="display:none"]):not([style*="display: none"]),
.actionRow .dxbButton_MetropolisBlue:not([style*="display:none"]):not([style*="display: none"]),
.actionRow .dxb-secondary:not([style*="display:none"]):not([style*="display: none"]),
.dtr-btn-secondary:not([style*="display:none"]):not([style*="display: none"]) {
    background: linear-gradient(135deg, #0a1f36 0%, #0f2d4e 50%, #163e68 100%) !important;
    background-color: #0f2d4e !important;
    background-image: linear-gradient(135deg, #0a1f36 0%, #0f2d4e 50%, #163e68 100%) !important;
    border: 1px solid #1e3a5f !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 14px rgba(10, 31, 54, 0.22) !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    height: 30px !important;
    max-height: 30px !important;
    line-height: 28px !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
    outline: none !important;
    white-space: nowrap !important;
}

.dxbButton_MetropolisBlue.dxb-secondary:hover,
.dxbButtonHover_MetropolisBlue.dxb-secondary,
.dxbButton.dxb-secondary:hover,
.dxb-secondary:hover,
button.btn-secondary:hover,
.btn-secondary:hover,
.actionRow .dxbButton:hover,
.actionRow .dxbButton_MetropolisBlue:hover,
.actionRow .dxb-secondary:hover,
.dtr-btn-secondary:hover {
    background: linear-gradient(135deg, #05111e 0%, #0a1f36 50%, #0f2d4e 100%) !important;
    background-color: #0a1f36 !important;
    background-image: linear-gradient(135deg, #05111e 0%, #0a1f36 50%, #0f2d4e 100%) !important;
    border-color: #1e3a5f !important;
    box-shadow: 0 8px 22px rgba(10, 31, 54, 0.35) !important;
    transform: translateY(-1.5px) !important;
    color: #ffffff !important;
}

.dxbButton_MetropolisBlue.dxb-secondary:active,
.dxbButton.dxb-secondary:active,
.dxb-secondary:active,
button.btn-secondary:active,
.btn-secondary:active,
.actionRow .dxbButton:active,
.actionRow .dxbButton_MetropolisBlue:active,
.actionRow .dxb-secondary:active,
.dtr-btn-secondary:active {
    background: linear-gradient(135deg, #05111e 0%, #0a1f36 50%, #0f2d4e 100%) !important;
    background-color: #05111e !important;
    background-image: linear-gradient(135deg, #05111e 0%, #0a1f36 50%, #0f2d4e 100%) !important;
    border-color: #0284c7 !important;
    box-shadow: 0 2px 8px rgba(10, 31, 54, 0.2) !important;
    transform: translateY(0) !important;
    color: #ffffff !important;
}

html body .dxbButton_MetropolisBlue.dxb-secondary:focus,
html body .dxbButton_MetropolisBlue.dxb-secondary:focus-visible,
html body .dxbButton_MetropolisBlue.dxb-secondary:focus-within,
html body .dxbButtonFocused_MetropolisBlue.dxb-secondary,
html body .dxbButton.dxb-secondary:focus,
html body .dxbButton.dxb-secondary:focus-visible,
html body .dxbButton.dxb-secondary:focus-within,
html body .dxb-secondary:focus,
html body .dxb-secondary:focus-visible,
html body .dxb-secondary:focus-within,
html body .dtr-btn-focused,
html body button.btn-secondary:focus,
html body button.btn-secondary:focus-visible,
html body button.btn-secondary:focus-within,
html body .actionRow .dxbButton:focus,
html body .actionRow .dxbButton:focus-visible,
html body .actionRow .dxbButton:focus-within,
html body .actionRow .dxbButton_MetropolisBlue:focus,
html body .actionRow .dxbButton_MetropolisBlue:focus-visible,
html body .actionRow .dxbButton_MetropolisBlue:focus-within,
html body .actionRow .dxbButtonFocused_MetropolisBlue,
html body .actionRow .dtr-btn-focused {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    background-color: #0284c7 !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #0284c7, 0 8px 24px rgba(2, 132, 199, 0.5) !important;
    outline: none !important;
    transform: translateY(-1.5px) !important;
    color: #ffffff !important;
    z-index: 10 !important;
}

.dxbButton_MetropolisBlue.dxb-secondary *,
.dxbButton.dxb-secondary *,
.dxb-secondary *,
button.btn-secondary *,
.actionRow .dxbButton *,
.actionRow .dxbButton_MetropolisBlue * {
    color: #ffffff !important;
}

/* ==========================================================================
   REMOVE EXTRA HEADER BOTTOM MARGIN
   Eliminates unwanted spacing between navbar bottom and page content
   ========================================================================== */
#contentMainContainerDiv,
#contentMainContainerDiv > .row:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#contentMainContainerDiv > .row:first-child > #navSectionDiv,
#contentMainContainerDiv > .row:first-child > #contentSectionDiv {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==========================================================================
   FORTUNE 500 ENTERPRISE RESPONSIVE SYSTEM
   Complete cross-device support for Desktop, Tablet, and Mobile screens
   ========================================================================== */

/* --- Mobile Hamburger Button --- */
.dtr-mobile-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    background-color: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    padding: 7px;
    margin-right: 8px;
    flex-direction: column;
    justify-content: space-around;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
}

.dtr-mobile-hamburger:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.dtr-hamburger-bar {
    display: block;
    width: 18px;
    height: 2px;
    background-color: #334155;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* --- Mobile Slide-Out Drawer & Backdrop --- */
.dtr-mobile-drawer-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 9998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

.dtr-mobile-drawer-backdrop.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.dtr-mobile-drawer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 320px !important;
    max-width: 86vw !important;
    background-color: #111726 !important;
    color: #ffffff !important;
    z-index: 9999 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.35) !important;
    overflow: hidden !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.dtr-mobile-drawer.active {
    transform: translateX(0) !important;
}

.dtr-mobile-drawer-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background-color: #0b0f19 !important;
}

.dtr-mobile-logo {
    height: 30px !important;
    width: auto !important;
    object-fit: contain !important;
}

.dtr-mobile-drawer-close {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 20px !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    line-height: 1 !important;
    transition: color 0.15s ease !important;
}

.dtr-mobile-drawer-close:hover {
    color: #ffffff !important;
}

.dtr-mobile-drawer-user {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 20px !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dtr-mobile-user-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #2563eb !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}

.dtr-mobile-user-info {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

.dtr-mobile-user-name {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.dtr-mobile-user-role {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.dtr-mobile-drawer-nav {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 10px 0 !important;
    -webkit-overflow-scrolling: touch !important;
}

.dtr-mobile-nav-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.dtr-mobile-nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 20px !important;
    color: #e2e8f0 !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    user-select: none !important;
}

.dtr-mobile-nav-link:hover,
.dtr-mobile-nav-link.active {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

.dtr-mobile-nav-title {
    font-size: 13.5px !important;
    font-weight: 500 !important;
}

.dtr-mobile-nav-arrow {
    font-size: 11px !important;
    color: #64748b !important;
    transition: transform 0.2s ease !important;
}

.dtr-mobile-nav-group.expanded .dtr-mobile-nav-arrow {
    transform: rotate(180deg) !important;
    color: #ffffff !important;
}

.dtr-mobile-subitems {
    display: none !important;
    background-color: rgba(0, 0, 0, 0.25) !important;
    padding: 4px 0 6px 0 !important;
}

.dtr-mobile-nav-group.expanded .dtr-mobile-subitems {
    display: block !important;
}

.dtr-mobile-sublink {
    display: block !important;
    padding: 8px 20px 8px 36px !important;
    color: #cbd5e1 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    transition: color 0.15s ease, background-color 0.15s ease !important;
}

.dtr-mobile-sublink:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.dtr-mobile-nested-title {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #94a3b8 !important;
    padding: 8px 20px 4px 36px !important;
    font-weight: 700 !important;
}

.dtr-mobile-sublink-nested {
    padding-left: 48px !important;
}

.dtr-mobile-drawer-footer {
    padding: 14px 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background-color: #0b0f19 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.dtr-mobile-footer-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #cbd5e1 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    padding: 6px 0 !important;
    cursor: pointer !important;
    transition: color 0.15s ease !important;
}

.dtr-mobile-footer-item:hover {
    color: #ffffff !important;
}

.dtr-mobile-footer-item.dtr-mobile-logout {
    color: #f87171 !important;
    font-weight: 600 !important;
}

.dtr-mobile-footer-item.dtr-mobile-logout:hover {
    color: #ef4444 !important;
}

/* ==========================================================================
   BREAKPOINT 1: LAPTOPS / COMPACT DESKTOPS (992px to 1199px)
   ========================================================================== */
@media (max-width: 1199px) {
    .dtr-header-top {
        padding: 0 14px !important;
        gap: 8px !important;
    }

    .dtr-header-project-group {
        min-width: 220px !important;
        max-width: 320px !important;
    }

    .dtr-user-role {
        display: none !important; /* Hide long job title to conserve horizontal space */
    }

    .dtr-context-divider {
        margin: 0 6px !important;
    }

    .dtr-company-text {
        max-width: 120px !important;
    }
}

/* ==========================================================================
   BREAKPOINT 2: TABLETS & COMPACT LAPTOPS (768px to 991px)
   ========================================================================== */
@media (max-width: 991px) {
    .dtr-header-top {
        padding: 8px 16px !important;
        gap: 8px !important;
        height: auto !important;
        min-height: auto !important;
    }

    /* Top row split: Brand on left, User profile & Actions on right */
    .dtr-header-brand {
        order: 1 !important;
    }

    .dtr-header-right-cluster {
        order: 2 !important;
        gap: 10px !important;
    }

    /* Row 2: Context Area spans 100% width cleanly */
    .dtr-header-context-area {
        order: 3 !important;
        width: 100% !important;
        flex: 1 0 100% !important;
        padding-top: 6px !important;
        border-top: 1px solid #f1f5f9 !important;
        margin-top: 4px !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    .dtr-header-project-group {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }

    .dtr-header-project-pill {
        min-width: 180px !important;
        width: 100% !important;
    }

    .dtr-user-role {
        display: none !important;
    }

    .dtr-company-text {
        max-width: 100px !important;
    }

    /* Sidebar transforms into a modern horizontal quick-action bar */
    #contentMainContainerDiv > .row:first-child {
        display: flex !important;
        flex-direction: column !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #navSectionDiv.navSectionStyle {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        min-height: auto !important;
        background-color: #f8fafc !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding: 6px 10px !important;
        margin: 0 0 10px 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    #navSectionDiv.navSectionStyle::-webkit-scrollbar {
        display: none !important;
    }

    #navSectionDiv .custom-nav-bar {
        width: auto !important;
    }

    #navSectionDiv .custom-nav-bar .dxnb-group {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
    }

    #navSectionDiv .custom-nav-bar .dxnb-header {
        display: none !important;
    }

    #navSectionDiv .custom-nav-bar .dxnb-content {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0 !important;
    }

    #navSectionDiv .custom-nav-bar .dxnb-item {
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 12px !important;
        border-radius: 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        white-space: nowrap !important;
    }

    #navSectionDiv .custom-nav-bar .dxnb-item img {
        width: 18px !important;
        height: 18px !important;
        margin-right: 6px !important;
    }

    #contentSectionDiv.col-sm-10,
    #contentSectionDiv.col-sm-12 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ==========================================================================
   BREAKPOINT 3: MOBILE SMARTPHONES (Under 768px)
   ========================================================================== */
@media (max-width: 767px) {
    .dtr-mobile-hamburger {
        display: inline-flex !important;
    }

    .dtr-header-top {
        padding: 6px 10px !important;
        gap: 6px !important;
        height: auto !important;
        min-height: auto !important;
    }

    .dtr-header-brand {
        order: 1 !important;
        margin-right: 0 !important;
    }

    .dtr-header-logo {
        max-height: 28px !important;
        height: 28px !important;
    }

    .dtr-header-right-cluster {
        order: 2 !important;
        gap: 6px !important;
    }

    .dtr-header-user-group {
        gap: 0 !important;
    }

    .dtr-user-info-text {
        display: none !important; /* Avatar only on mobile */
    }

    .dtr-user-avatar-wrap,
    .dtr-user-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 11.5px !important;
    }

    .dtr-btn-logout {
        padding: 0 10px !important;
        height: 32px !important;
        min-height: 32px !important;
        min-width: 32px !important;
    }

    .dtr-btn-logout .dxb {
        font-size: 0 !important; /* Hide 'Sign Out' text, icon remains */
    }

    .dtr-btn-logout .dxb::before {
        margin-right: 0 !important;
        font-size: 13.5px !important;
    }

    .dtr-btn-lock,
    .dtr-btn-lock.dxbButton_MetropolisBlue {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    /* Row 2: Context Area full width on mobile */
    .dtr-header-context-area {
        order: 3 !important;
        width: 100% !important;
        flex: 1 0 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding-top: 6px !important;
        margin-top: 2px !important;
        border-top: 1px solid #f1f5f9 !important;
    }

    .dtr-header-project-group {
        width: 100% !important;
        min-width: 0 !important;
    }

    .dtr-header-project-pill {
        width: 100% !important;
        min-width: 0 !important;
        height: 32px !important;
    }

    .dtr-context-divider {
        display: none !important;
    }

    .dtr-header-enquiry-group {
        width: 100% !important;
        height: 24px !important;
        font-size: 11px !important;
    }

    /* Hide horizontal desktop navy menu bar; mobile drawer used */
    .dtr-header-nav-bar,
    #bannerSecondRowDiv.dtr-header-nav-bar {
        display: none !important;
    }

    /* Outer content area resets */
    #contentMainContainerDiv {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* ==========================================================================
   BREAKPOINT 4: ULTRA-COMPACT PHONES (Under 480px)
   ========================================================================== */
@media (max-width: 480px) {
    .dtr-header-top {
        padding: 5px 8px !important;
    }

    .dtr-header-logo {
        max-height: 24px !important;
        height: 24px !important;
    }

    .dtr-mobile-hamburger {
        width: 32px !important;
        height: 32px !important;
        padding: 6px !important;
        margin-right: 6px !important;
    }

    .dtr-header-company-group {
        display: none !important; /* Conserve space for avatar and logout */
    }

    #contentMainContainerDiv {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* ==========================================================================
   FORTUNE 500 ENTERPRISE SKELETON SCREEN & TOP PROGRESS BAR
   ========================================================================== */

/* Top Loading Progress Bar (Linear / Stripe / YouTube Grade) */
.dtr-top-progress-bar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important;
    z-index: 100000 !important;
    pointer-events: none !important;
    opacity: 0;
    transition: opacity 0.15s ease;
    background: rgba(2, 132, 199, 0.08);
}

.dtr-top-progress-bar.dtr-progress-active {
    opacity: 1 !important;
}

.dtr-top-progress-bar .dtr-progress-bar-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0284c7 0%, #38bdf8 50%, #818cf8 100%);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.8), 0 0 4px rgba(2, 132, 199, 0.9);
    border-radius: 0 2px 2px 0;
    transition: width 0.25s ease-out;
}

.dtr-top-progress-bar.dtr-progress-active .dtr-progress-bar-indicator {
    animation: dtrProgressIndeterminate 1.4s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.dtr-top-progress-bar .dtr-progress-bar-indicator.dtr-progress-finish {
    animation: none !important;
    left: 0 !important;
    width: 100% !important;
    transition: width 0.25s ease-out !important;
}

@keyframes dtrProgressIndeterminate {
    0% {
        left: -35%;
        width: 35%;
    }
    50% {
        left: 25%;
        width: 60%;
    }
    100% {
        left: 100%;
        width: 35%;
    }
}

/* Shimmer Animation */
@keyframes dtrSkeletonShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Skeleton Container (Overlays content while page and controls load) */
.dtr-page-skeleton {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: calc(100vh - 100px) !important;
    background: #f8fafc !important;
    z-index: 50 !important;
    padding: 16px 20px 40px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.dtr-page-skeleton.dtr-skeleton-hidden {
    opacity: 0 !important;
    transform: translateY(-4px) !important;
    pointer-events: none !important;
}

/* Actual Content Smooth Reveal */
#contentSectionDiv {
    opacity: 1;
    transition: opacity 0.22s ease-out;
}

#contentSectionDiv.dtr-content-loading {
    opacity: 0.65 !important;
    transition: opacity 0.15s ease-out !important;
}

#contentSectionDiv.dtr-content-transitioning {
    opacity: 0.85;
    transition: opacity 0.15s ease-out;
}

/* Skeleton Layout Inner */
.dtr-skeleton-inner {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Shimmer Atoms */
.dtr-sk-line,
.dtr-sk-pill,
.dtr-sk-icon,
.dtr-sk-icon-sm,
.dtr-sk-checkbox,
.dtr-sk-badge,
.dtr-sk-col {
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 35%, #e2e8f0 70%);
    background-size: 200% 100%;
    animation: dtrSkeletonShimmer 1.8s ease-in-out infinite;
    border-radius: 6px;
    display: inline-block;
}

/* Header Skeleton */
.dtr-skeleton-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 6px;
    gap: 16px;
}

.dtr-sk-title-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dtr-sk-title {
    width: 220px;
    height: 22px;
    border-radius: 6px;
}

.dtr-sk-subtitle {
    width: 140px;
    height: 12px;
    border-radius: 4px;
    opacity: 0.7;
}

.dtr-sk-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dtr-sk-btn-secondary {
    width: 86px;
    height: 32px;
    border-radius: 6px;
}

.dtr-sk-btn-primary {
    width: 100px;
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(90deg, #bae6fd 0%, #e0f2fe 35%, #bae6fd 70%);
    background-size: 200% 100%;
    animation: dtrSkeletonShimmer 1.8s ease-in-out infinite;
}

/* KPI / Metric Stat Cards Skeleton */
.dtr-skeleton-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.dtr-sk-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dtr-sk-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dtr-sk-card-label {
    width: 90px;
    height: 12px;
    border-radius: 4px;
}

.dtr-sk-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.dtr-sk-card-value {
    width: 65px;
    height: 24px;
    border-radius: 6px;
}

.dtr-sk-card-trend {
    width: 110px;
    height: 10px;
    border-radius: 4px;
    opacity: 0.65;
}

/* Toolbar Skeleton */
.dtr-skeleton-toolbar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.dtr-sk-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 240px;
    height: 32px;
    background: #f1f5f9;
    border-radius: 6px;
    padding: 0 10px;
    box-sizing: border-box;
}

.dtr-sk-icon-sm {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.dtr-sk-search-text {
    width: 100px;
    height: 12px;
    border-radius: 3px;
}

.dtr-sk-filter-pill {
    width: 110px;
    height: 32px;
    border-radius: 6px;
}

.dtr-sk-spacer {
    flex: 1;
}

.dtr-sk-btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

/* Grid Table Skeleton */
.dtr-skeleton-grid {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.dtr-sk-grid-header {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    padding: 11px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.dtr-sk-th-text {
    height: 13px;
    width: 70%;
    border-radius: 4px;
}

.dtr-sk-checkbox {
    width: 15px;
    height: 15px;
    border-radius: 4px;
}

.dtr-sk-grid-row {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 14px;
}

.dtr-sk-grid-row:nth-child(even) {
    background: #fafcff;
}

.dtr-sk-grid-td {
    display: flex;
    align-items: center;
}

.dtr-sk-grid-td .dtr-sk-line {
    height: 13px;
    border-radius: 4px;
}

.dtr-sk-badge {
    height: 20px;
    width: 68px;
    border-radius: 10px;
}

.dtr-sk-grid-footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dtr-sk-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Responsive Skeleton Adjustments */
@media (max-width: 991px) {
    .dtr-skeleton-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .dtr-sk-grid-header > div:nth-child(n+5),
    .dtr-sk-grid-row > div:nth-child(n+5) {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .dtr-page-skeleton {
        padding: 10px 12px 30px !important;
    }
    .dtr-skeleton-cards {
        grid-template-columns: 1fr;
    }
    .dtr-skeleton-toolbar {
        flex-wrap: wrap;
    }
    .dtr-sk-search-box {
        width: 100%;
    }
    .dtr-sk-filter-pill {
        flex: 1;
        min-width: 80px;
    }
}