/* Custom Top Navigation - 47px Height with #012377 Background */
/* This file sets the top navigation bar to exactly 47px tall with custom background */

/* Set navbar header height to exactly 47px */
.navbar-header {
    height: 47px !important;
}

/* Adjust logo line height to match navbar height */
.logo {
    line-height: 47px !important;
}

/* Set header item height to match navbar */
.header-item {
    height: 47px !important;
}

/* Adjust page content padding to account for 47px navbar */
.page-content {
    padding: 12px 12px 60px !important; /* 47px navbar + 24px spacing */
}

/* Dashboard page specific styling - reduce right margin to 24px */
body.dashboard .page-content {
    padding: 12px 0px 0px 0px !important; /* top right bottom left - override the default 12px right padding */
}

/* Reduce row gutter on dashboard page */
body.dashboard .row {
    margin-right: 0 !important; /* Remove right margin from rows */
    --bs-gutter-x: 0 !important; /* Override the Bootstrap gutter variable */
}

/* Remove right padding from Bootstrap containers on dashboard page */
body.dashboard .container-lg,
body.dashboard .container-md,
body.dashboard .container-sm,
body.dashboard .container-xl,
body.dashboard .container-xxl {
    padding-right: 0 !important; /* Remove the 12px right padding */
}

/* Adjust logo sizes to fit perfectly in navbar - maintain 1:1 aspect ratio */
.logo-sm img {
    height: 32px !important; /* Smaller logo size */
    width: 32px !important; /* maintain square aspect ratio */
    margin-top: 10px !important; /* Increased spacing from top */
    margin-bottom: 12px !important; /* Add spacing from bottom */
}

.logo-lg img {
    /* Size controlled by sidebar-specific CSS */
}

/* Ensure dropdown buttons fit in 47px navbar */
.btn.header-item.waves-effect.org-btn, 
.btn.header-item.waves-effect.project-btn {
    min-height: 47px !important; /* Match navbar height */
    font-size: 0.75rem !important; /* Slightly smaller font for compact design */
}

/* Adjust profile image size for 47px navbar */
.header-profile-user {
    height: 30px !important; /* Optimized for 47px navbar */
    width: 30px !important;
}

/* Ensure proper alignment of elements */
.navbar-header .d-flex {
    align-items: center;
}

/* Set hamburger menu button height */
#vertical-menu-btn {
    height: 47px !important;
    display: flex !important;
    align-items: center !important;
}

/* Set custom gradient background for top navigation - fixed distance from right edge with sharp transition */
#page-topbar {
    background: linear-gradient(128deg, #012377 0%, #012377 calc(100% - 261px), #EFAC03 calc(100% - 259px), #EFAC03 100%) !important;
}

/* Ensure all header elements inherit the gradient background - fixed distance from right edge with sharp transition */
.navbar-header {
    background: linear-gradient(128deg, #012377 0%, #012377 calc(100% - 261px), #EFAC03 calc(100% - 259px), #EFAC03 100%) !important;
}

/* Extend the gradient to cover the white area below the main nav bar - fixed distance from right edge with sharp transition */
.navbar-brand-box,
.navbar-brand-box *,
.navbar-nav,
.navbar-nav *,
.navbar-collapse,
.navbar-collapse * {
    background: linear-gradient(128deg, #012377 0%, #012377 calc(100% - 261px), #EFAC03 calc(100% - 259px), #EFAC03 100%) !important;
}

/* Set white foreground color for all top navigation text and elements */
#page-topbar,
#page-topbar *,
.navbar-header,
.navbar-header *,
.header-item,
.header-item *,
.btn.header-item,
.btn.header-item *,
#vertical-menu-btn,
#vertical-menu-btn * {
    color: #FFFFFF !important;
}

/* Organization/Project dropdown buttons - 70% lighter blue on dark blue background when not selected */
#page-header-organization-dropdown,
#page-header-project-dropdown,
#page-header-organization-dropdown *,
#page-header-project-dropdown * {
    color: #CCDAFB !important; /* 70% lighter blue text on dark blue background */
}

/* Organization/Project dropdown buttons when hovered (not selected) - background change with black text */
#page-header-organization-dropdown:hover,
#page-header-project-dropdown:hover {
    background-color: #CCDAFB !important; /* 70% lighter blue background */
    color: #000000 !important; /* Black text */
    border-color: #CCDAFB !important;
}

#page-header-organization-dropdown:hover *,
#page-header-project-dropdown:hover * {
    color: #000000 !important; /* Black text */
}

/* Organization/Project dropdown buttons when selected (dropdown open) - regular blue on lighter blue background */
#page-header-organization-dropdown.show,
#page-header-project-dropdown.show,
#page-header-organization-dropdown[aria-expanded="true"],
#page-header-project-dropdown[aria-expanded="true"] {
    background-color: #CCDAFB !important; /* 70% lighter blue background */
    color: #012377 !important; /* Regular blue text */
    border-color: #CCDAFB !important;
}

#page-header-organization-dropdown.show *,
#page-header-project-dropdown.show *,
#page-header-organization-dropdown[aria-expanded="true"] *,
#page-header-project-dropdown[aria-expanded="true"] * {
    color: #012377 !important; /* Regular blue text */
}

/* Organization/Project dropdown buttons when selected and hovered - black on lighter blue background */
#page-header-organization-dropdown.show:hover,
#page-header-project-dropdown.show:hover,
#page-header-organization-dropdown[aria-expanded="true"]:hover,
#page-header-project-dropdown[aria-expanded="true"]:hover {
    background-color: #CCDAFB !important; /* 70% lighter blue background */
    color: #000000 !important; /* Black text when selected and hovered */
    border-color: #CCDAFB !important;
}

#page-header-organization-dropdown.show:hover *,
#page-header-project-dropdown.show:hover *,
#page-header-organization-dropdown[aria-expanded="true"]:hover *,
#page-header-project-dropdown[aria-expanded="true"]:hover * {
    color: #000000 !important; /* Black text when selected and hovered */
}

/* Image circle styling for organization/project dropdowns */

/* Not selected, not hovering - light blue circle (border only) with white background */
#page-header-organization-dropdown .header-profile-user,
#page-header-project-dropdown .header-profile-user {
    background-color: #ffffff !important; /* White background behind image */
    border: 0.5px solid #CCDAFB !important; /* Light blue circle border (not filled) */
    box-shadow: 0 0 0 0.5px #CCDAFB !important; /* Light blue circle outline */
    transition: all 0.3s ease !important; /* Smooth animation */
}

/* Add hover animation to org/project icons */
#page-header-organization-dropdown:hover .header-profile-user,
#page-header-project-dropdown:hover .header-profile-user {
    transform: scale(1.05) !important; /* Slight scale on hover */
}

/* Not selected, hovering - black circle (border only) with white background */
#page-header-organization-dropdown:hover .header-profile-user,
#page-header-project-dropdown:hover .header-profile-user {
    background-color: #ffffff !important; /* White background behind image */
    border: 0.5px solid #000000 !important; /* Black circle border (not filled) */
    box-shadow: 0 0 0 0.5px #000000 !important; /* Black circle outline */
}

/* Selected, not hovering - dark blue circle (border only) with white background */
#page-header-organization-dropdown.show .header-profile-user,
#page-header-project-dropdown.show .header-profile-user,
#page-header-organization-dropdown[aria-expanded="true"] .header-profile-user,
#page-header-project-dropdown[aria-expanded="true"] .header-profile-user {
    background-color: #ffffff !important; /* White background behind image */
    border: 0.5px solid #012377 !important; /* Dark blue circle border (not filled) */
    box-shadow: 0 0 0 0.5px #012377 !important; /* Dark blue circle outline */
}

/* Selected, hovering - black circle (border only) with white background */
#page-header-organization-dropdown.show:hover .header-profile-user,
#page-header-project-dropdown.show:hover .header-profile-user,
#page-header-organization-dropdown[aria-expanded="true"]:hover .header-profile-user,
#page-header-project-dropdown[aria-expanded="true"]:hover .header-profile-user {
    background-color: #ffffff !important; /* White background behind image */
    border: 0.5px solid #000000 !important; /* Black circle border (not filled) */
    box-shadow: 0 0 0 0.5px #000000 !important; /* Black circle outline */
}

/* Profile picture circle styling - 0.5px light orange circle */

/* Profile picture in dropdown header - also thin white border */
.dropdown-header .rounded-circle {
    border: 1px solid #FFFFFF !important;
    box-shadow: none !important;
    display: block !important;
    width: 32px !important;
    height: 32px !important;
    outline: none !important;
    border-radius: 50% !important;
}

/* Remove any default borders from profile images */
.header-profile-user,
.dropdown-header .rounded-circle {
    border: 1px solid #FFFFFF !important;
    box-shadow: 0 0 0 0 transparent !important;
    outline: 0 !important;
}

/* Organization/role and project image styling - white background and proper clipping */
.org-btn img.rounded-circle.header-profile-user,
.project-btn img.rounded-circle.header-profile-user,
.org-btn img,
.project-btn img {
    border: 1px solid #FFFFFF !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    background-color: #ffffff !important; /* White background */
    width: 32px !important;
    height: 32px !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Logo container sizing to fit within left nav width */
.navbar-brand-box {
    max-width: 224px !important; /* match left nav width */
    width: 224px !important;
    height: 47px !important; /* match topbar height */
    display: flex !important;
    align-items: center !important; /* vertical center */
    justify-content: center !important; /* horizontal center */
    overflow: hidden !important;
}

/* Logo sizing - more specific selectors to override conflicting rules */
.navbar-header .navbar-brand-box img,
#page-topbar .navbar-brand-box img,
.navbar-brand-box img {
    display: block !important;
    height: 184px !important; /* 40px less than 224px left nav width */
    width: 184px !important; /* maintain 1:1 aspect ratio */
    max-width: 100% !important; /* don't exceed container */
    object-fit: contain !important;
    transform: translateY(3px) !important; /* nudge logo down slightly */
}

/* General profile image styling for dropdown and other areas */
img.rounded-circle.header-profile-user,
img.rounded-circle {
    border: 1px solid #FFFFFF !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

/* Dropdown menus - black text for visibility on light backgrounds */
/* Target specific dropdown elements with high specificity */
#page-header-user-dropdown + .dropdown-menu,
#page-header-user-dropdown + .dropdown-menu *,
#page-header-user-dropdown + .dropdown-menu .dropdown-item,
#page-header-user-dropdown + .dropdown-menu .dropdown-header,
#page-header-user-dropdown + .dropdown-menu span,
#page-header-user-dropdown + .dropdown-menu i,
#page-header-user-dropdown + .dropdown-menu a,
#page-header-user-dropdown + .dropdown-menu div,
#page-header-user-dropdown + .dropdown-menu .fw-bold,
#page-header-user-dropdown + .dropdown-menu .text-muted,
#page-header-user-dropdown + .dropdown-menu small {
    color: #000000 !important;
}

/* Organization and project dropdowns - more specific targeting */
.dropdown-menu .org-btn,
.dropdown-menu .project-btn,
.dropdown-menu .org-btn *,
.dropdown-menu .project-btn *,
.dropdown-menu .org-btn span,
.dropdown-menu .project-btn span,
.dropdown-menu .org-btn img,
.dropdown-menu .project-btn img {
    color: #000000 !important;
}

/* Organization and project dropdown content - white background */
.dropdown-menu .btn.header-item.waves-effect.org-btn,
.dropdown-menu .btn.header-item.waves-effect.project-btn {
    background-color: #ffffff !important;
    color: #012377 !important; /* Blue from nav bar on white */
    border: none !important;
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    padding: 8px 12px !important;
    margin-bottom: 2px !important;
    transition: all 0.2s ease !important;
}

/* Organization and project dropdown content - all child elements inherit parent colors */
.dropdown-menu .btn.header-item.waves-effect.org-btn *,
.dropdown-menu .btn.header-item.waves-effect.project-btn * {
    color: inherit !important;
    background-color: transparent !important;
}

/* Override any white text inheritance for dropdown items */
.dropdown-menu .btn.header-item.waves-effect.org-btn span,
.dropdown-menu .btn.header-item.waves-effect.project-btn span {
    color: inherit !important;
}

/* Not-selected, not-hover: blue from nav bar on white - override topbar white rule */
#page-topbar .dropdown-menu .btn.header-item.waves-effect.org-btn:not(.bg-selected),
#page-topbar .dropdown-menu .btn.header-item.waves-effect.project-btn:not(.bg-selected) {
    background-color: #ffffff !important;
    color: #012377 !important;
}

#page-topbar .dropdown-menu .btn.header-item.waves-effect.org-btn:not(.bg-selected) *,
#page-topbar .dropdown-menu .btn.header-item.waves-effect.project-btn:not(.bg-selected) *,
#page-topbar .dropdown-menu .btn.header-item.waves-effect.org-btn:not(.bg-selected) span,
#page-topbar .dropdown-menu .btn.header-item.waves-effect.project-btn:not(.bg-selected) span {
    color: #012377 !important;
}

/* Not-selected, hover: black on light blue - match top nav hover appearance */
#page-topbar .dropdown-menu .btn.header-item.waves-effect.org-btn:not(.bg-selected):hover,
#page-topbar .dropdown-menu .btn.header-item.waves-effect.project-btn:not(.bg-selected):hover {
    background-color: #CCDAFB !important; /* Light blue background */
    color: #000000 !important; /* Black text */
}

#page-topbar .dropdown-menu .btn.header-item.waves-effect.org-btn:not(.bg-selected):hover *,
#page-topbar .dropdown-menu .btn.header-item.waves-effect.project-btn:not(.bg-selected):hover *,
#page-topbar .dropdown-menu .btn.header-item.waves-effect.org-btn:not(.bg-selected):hover span,
#page-topbar .dropdown-menu .btn.header-item.waves-effect.project-btn:not(.bg-selected):hover span {
    color: #000000 !important;
}

/* Selected, not-hover: light blue text on blue background */
#page-topbar .dropdown-menu .btn.header-item.waves-effect.org-btn.bg-selected,
#page-topbar .dropdown-menu .btn.header-item.waves-effect.project-btn.bg-selected {
    background-color: #012377 !important; /* Blue background from top nav */
    color: #CCDAFB !important; /* Light blue text */
    border: none !important; /* No border */
}

#page-topbar .dropdown-menu .btn.header-item.waves-effect.org-btn.bg-selected *,
#page-topbar .dropdown-menu .btn.header-item.waves-effect.project-btn.bg-selected *,
#page-topbar .dropdown-menu .btn.header-item.waves-effect.org-btn.bg-selected span,
#page-topbar .dropdown-menu .btn.header-item.waves-effect.project-btn.bg-selected span {
    color: #CCDAFB !important;
}

/* Selected, hover: white text on blue background */
#page-topbar .dropdown-menu .btn.header-item.waves-effect.org-btn.bg-selected:hover,
#page-topbar .dropdown-menu .btn.header-item.waves-effect.project-btn.bg-selected:hover {
    background-color: #012377 !important; /* Blue background from top nav */
    color: #ffffff !important; /* White text */
    border: none !important; /* No border */
}

#page-topbar .dropdown-menu .btn.header-item.waves-effect.org-btn.bg-selected:hover *,
#page-topbar .dropdown-menu .btn.header-item.waves-effect.project-btn.bg-selected:hover *,
#page-topbar .dropdown-menu .btn.header-item.waves-effect.org-btn.bg-selected:hover span,
#page-topbar .dropdown-menu .btn.header-item.waves-effect.project-btn.bg-selected:hover span {
    color: #ffffff !important;
}

/* Bottom buttons in org/project dropdowns - match profile dropdown appearance */
/* Not selected, not hover: grey on white */
#page-topbar .dropdown-menu .btn.waves-effect:not(.org-btn):not(.project-btn) {
    background-color: #ffffff !important;
    color: #444444 !important; /* Dark grey text */
    border: none !important;
}

#page-topbar .dropdown-menu .btn.waves-effect:not(.org-btn):not(.project-btn) * {
    color: #444444 !important;
}

/* Not selected, hover: dark blue on light grey */
#page-topbar .dropdown-menu .btn.waves-effect:not(.org-btn):not(.project-btn):hover {
    background-color: #CCD3E4 !important; /* 80% lightened top-nav blue */
    color: #012377 !important; /* Dark blue text */
    border: none !important;
}

#page-topbar .dropdown-menu .btn.waves-effect:not(.org-btn):not(.project-btn):hover * {
    color: #012377 !important;
}

/* Image and text layout within dropdown items */
.dropdown-menu .btn.header-item.waves-effect.org-btn img,
.dropdown-menu .btn.header-item.waves-effect.project-btn img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    margin-right: 8px !important;
    object-fit: cover !important;
}

/* Text styling within dropdown items */
.dropdown-menu .btn.header-item.waves-effect.org-btn span,
.dropdown-menu .btn.header-item.waves-effect.project-btn span {
    flex: 1 !important;
    text-align: left !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    display: block !important;
}

/* Dropdown item image circle styling - white background with colored borders */

/* Not-selected, not-hover: blue circle border on white background */
#page-topbar .dropdown-menu .btn.header-item.waves-effect.org-btn:not(.bg-selected) img,
#page-topbar .dropdown-menu .btn.header-item.waves-effect.project-btn:not(.bg-selected) img {
    background-color: #ffffff !important;
    border: 0.5px solid #012377 !important;
    box-shadow: 0 0 0 0.5px #012377 !important;
}

/* Not-selected, hover: black circle border on white background */
#page-topbar .dropdown-menu .btn.header-item.waves-effect.org-btn:not(.bg-selected):hover img,
#page-topbar .dropdown-menu .btn.header-item.waves-effect.project-btn:not(.bg-selected):hover img {
    background-color: #ffffff !important;
    border: 0.5px solid #000000 !important;
    box-shadow: 0 0 0 0.5px #000000 !important;
}

/* Selected, not-hover: light blue circle border on white background */
#page-topbar .dropdown-menu .btn.header-item.waves-effect.org-btn.bg-selected img,
#page-topbar .dropdown-menu .btn.header-item.waves-effect.project-btn.bg-selected img {
    background-color: #ffffff !important;
    border: 0.5px solid #CCDAFB !important; /* Light blue circle border */
    box-shadow: 0 0 0 0.5px #CCDAFB !important; /* Light blue circle outline */
}

/* Selected, hover: white circle border on white background */
#page-topbar .dropdown-menu .btn.header-item.waves-effect.org-btn.bg-selected:hover img,
#page-topbar .dropdown-menu .btn.header-item.waves-effect.project-btn.bg-selected:hover img {
    background-color: #ffffff !important;
    border: 0.5px solid #ffffff !important; /* White circle border */
    box-shadow: 0 0 0 0.5px #ffffff !important; /* White circle outline */
}

/* QuantKey Growth Hub link - 70% lighter orange, white on hover */
#page-topbar .navbar-header .d-flex a[href="https://growth.quantkey.com"] {
    color: #fff7e5 !important; /* Light orange (70% lightened from #fd7e14) */
}

#page-topbar .navbar-header .d-flex a[href="https://growth.quantkey.com"] {
    transition: all 0.3s ease !important; /* Smooth animation */
}

#page-topbar .navbar-header .d-flex a[href="https://growth.quantkey.com"]:hover {
    color: #000000 !important; /* Black on hover */
    background-color: transparent !important; /* No background on hover */
    background: transparent !important; /* No background on hover */
    transform: scale(1.05) !important; /* Slight scale on hover */
}

#page-topbar .navbar-header .d-flex a[href="https://growth.quantkey.com"] i.bx.bx-link-external {
    color: #fff7e5 !important; /* Light orange for the icon */
}

#page-topbar .navbar-header .d-flex a[href="https://growth.quantkey.com"]:hover i.bx.bx-link-external {
    color: #000000 !important; /* Black on hover */
}

#page-topbar .navbar-header .d-flex a[href="https://growth.quantkey.com"] span.d-none.d-xl-inline-block {
    color: #fff7e5 !important; /* Light orange for the text */
}

#page-topbar .navbar-header .d-flex a[href="https://growth.quantkey.com"]:hover span.d-none.d-xl-inline-block {
    color: #000000 !important; /* Black on hover */
}

/* Notification icon - 70% lighter orange, background change on hover */
#page-header-notifications-dropdown i {
    color: #fff7e5 !important; /* Light orange (70% lightened from #fd7e14) */
}

/* Pancake/sandwich icon - light blue default, white on hover */
#vertical-menu-btn i {
    color: #CCDAFB !important; /* Light blue default color */
    font-size: 2em !important; /* 100% larger (doubled) */
    transition: all 0.3s ease !important; /* Smooth animation */
}

#vertical-menu-btn:hover i {
    transform: scale(1.1) !important; /* Slight scale on hover */
}

/* Notification icon hover - always black on light orange background when hovering */
#page-topbar .navbar-header .d-flex #page-header-notifications-dropdown:hover {
    background-color: #fff7e5 !important; /* 70% lightened orange background */
    color: #000000 !important; /* Black text */
    border-color: #fff7e5 !important;
}

#page-topbar .navbar-header .d-flex #page-header-notifications-dropdown:hover i,
#page-topbar .navbar-header .d-flex #page-header-notifications-dropdown:hover * {
    color: #000000 !important; /* Black text on hover */
}

/* Pancake/sandwich icon hover - white on hover */
#page-topbar .navbar-header .d-flex #vertical-menu-btn:hover {
    color: #FFFFFF !important; /* White on hover */
}

#page-topbar .navbar-header .d-flex #vertical-menu-btn:hover i {
    color: #FFFFFF !important; /* White icon on hover */
}

/* Notification icon when dropdown is open (not hovering) - orange background, EFAC03 text */
#page-topbar .navbar-header .d-flex #page-header-notifications-dropdown[aria-expanded="true"]:not(:hover),
#page-topbar .navbar-header .d-flex #page-header-notifications-dropdown.show:not(:hover) {
    background-color: #fff7e5 !important; /* 70% lightened orange background */
    color: #EFAC03 !important; /* EFAC03 text when dropdown is open */
    border-color: #fff7e5 !important;
}

#page-topbar .navbar-header .d-flex #page-header-notifications-dropdown[aria-expanded="true"]:not(:hover) i,
#page-topbar .navbar-header .d-flex #page-header-notifications-dropdown.show:not(:hover) i {
    color: #EFAC03 !important; /* EFAC03 icon when dropdown is open */
}

/* Selected + hover state is now handled by the general hover rule above */

/* Notification dropdown text - match profile dropdown color */
#page-header-notifications-dropdown + .dropdown-menu,
#page-header-notifications-dropdown + .dropdown-menu *,
#page-header-notifications-dropdown + .dropdown-menu .notification-item,
#page-header-notifications-dropdown + .dropdown-menu .notification-item *,
#page-header-notifications-dropdown + .dropdown-menu h6,
#page-header-notifications-dropdown + .dropdown-menu p,
#page-header-notifications-dropdown + .dropdown-menu span,
#page-header-notifications-dropdown + .dropdown-menu .text-muted {
    color: #444444 !important; /* Dark gray to match profile dropdown */
}

/* Ensure organization and project dropdown text is black */
.org-btn + .dropdown-menu,
.project-btn + .dropdown-menu,
.org-btn + .dropdown-menu *,
.project-btn + .dropdown-menu *,
.org-btn + .dropdown-menu .dropdown-item,
.project-btn + .dropdown-menu .dropdown-item,
.org-btn + .dropdown-menu span,
.project-btn + .dropdown-menu span,
.org-btn + .dropdown-menu div,
.project-btn + .dropdown-menu div {
    color: #000000 !important;
}

/* Ensure dropdown dividers are visible */
.dropdown-divider {
    border-color: #dee2e6 !important;
}

/* Profile dropdown header styling */
.dropdown-header {
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #dee2e6 !important;
}

/* Hover states for dropdown items */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bs-dropdown-link-hover-bg, #f8f9fa) !important;
    color: #000000 !important;
}

/* Profile dropdown header: keep items darker below header */
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item * {
    color: #444444 !important; /* dark gray */
}

/* Normalize profile dropdown header typography to match list items */
.dropdown-menu .dropdown-header {
    font-family: inherit !important;
    font-size: var(--bs-dropdown-font-size, .875rem) !important; /* match dropdown-item */
    line-height: 1.5 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.dropdown-menu .dropdown-header * {
    font-family: inherit !important;
    font-size: var(--bs-dropdown-font-size, .875rem) !important;
    line-height: 1.5 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Specific targeting for organization and project dropdowns */
.org-btn + .dropdown-menu,
.project-btn + .dropdown-menu,
.org-btn + .dropdown-menu *,
.project-btn + .dropdown-menu * {
    color: #000000 !important;
}

/* Ensure all dropdown text elements are black */
.dropdown-menu a,
.dropdown-menu button,
.dropdown-menu div,
.dropdown-menu span,
.dropdown-menu i,
.dropdown-menu .btn {
    color: #000000 !important;
}

/* Force black text in all dropdowns - most aggressive override */
body .dropdown-menu,
body .dropdown-menu *,
body .dropdown-item,
body .dropdown-item *,
body .dropdown-header,
body .dropdown-header * {
    color: #000000 !important;
}

/* Specific override for inherited white text */
.dropdown-menu * {
    color: #000000 !important;
}

/* Nuclear option - target all possible dropdown text elements */
.dropdown-menu,
.dropdown-menu a,
.dropdown-menu button,
.dropdown-menu div,
.dropdown-menu span,
.dropdown-menu i,
.dropdown-menu p,
.dropdown-menu small,
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-header,
.dropdown-menu .fw-bold,
.dropdown-menu .text-muted {
    color: #000000 !important;
}

/* Override any Bootstrap or theme defaults */
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-header {
    color: #000000 !important;
}

/* Ensure icons are also black */
.dropdown-menu i,
.dropdown-menu .bx,
.dropdown-menu .mdi {
    color: #000000 !important;
}

/* Add drop shadow to notification dropdown */
#page-header-notifications-dropdown + .dropdown-menu {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Add drop shadow and white background to organization dropdown */
#page-header-organization-dropdown + .dropdown-menu {
    background-color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Add drop shadow and white background to project dropdown */
#page-header-project-dropdown + .dropdown-menu {
    background-color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Ensure all dropdowns have consistent positioning and shadows */
.dropdown-menu {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* Fix white strip below logo - ensure navbar-brand-box has proper background */
.navbar-brand-box {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure logo container doesn't have any white background */
.logo,
.logo-dark,
.logo-light {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Fix any potential white background on logo spans */
.logo-sm,
.logo-lg {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Left navigation sidebar - single vertical gradient from blue to black */
/* Target only the main left nav container, not menu elements */
#sidebar,
.vertical-menu,
.left-sidebar,
.sidebar-wrapper,
.nav-sidebar,
.sidebar-nav,
.menu-sidebar,
.sidebar-container,
.sidebar-content {
    background: linear-gradient(180deg, #012377 0%, #000000 100%) !important;
    border: none !important;
    box-shadow: none !important;
}

/* Make menu elements transparent to show parent gradient */
.sidebar-menu,
.left-side-menu,
#sidebar-menu,
.sidebar {
    background: transparent !important;
}

/* Ensure sandwich menu icon is transparent */
#vertical-menu-btn,
#vertical-menu-btn *,
.btn.header-item.waves-effect,
.btn.header-item.waves-effect * {
    background: transparent !important;
}

/* Make all child elements transparent */
#sidebar *,
.sidebar-menu *,
.left-side-menu *,
#sidebar-menu *,
.sidebar *,
.navbar-brand-box,
.navbar-brand-box * {
    background: transparent !important;
}

/* Left nav menu items - transparent background to show parent gradient */
#sidebar .nav-link,
#sidebar .nav-item,
.sidebar-menu .nav-link,
.sidebar-menu .nav-item,
.left-side-menu .nav-link,
.left-side-menu .nav-item,
.navbar-nav .nav-link,
.navbar-nav .nav-item,
#sidebar-menu .nav-link,
#sidebar-menu .nav-item,
.sidebar .nav-link,
.sidebar .nav-item {
    background-color: transparent !important;
    color: #FFFFFF !important;
}

/* Additional targeting for common left nav container classes */
.vertical-menu *,
.left-sidebar *,
.sidebar-wrapper * {
    background: transparent !important;
}

/* Blue rectangle to cover white strip below top nav and above left nav */
.navbar-header::after,
#page-topbar::after {
    content: '';
    position: absolute;
    top: 47px; /* Start right below the top nav */
    left: 0;
    width: 250px; /* Width to match left nav width */
    height: 24px; /* Adjust height to cover the white strip */
    background-color: #012377; /* Same blue as top of gradient */
    z-index: 1; /* Lower z-index so logo appears above */
}

/* Ensure logo appears above the blue rectangle */
.navbar-brand-box,
.logo,
.logo-dark,
.logo-light {
    position: relative;
    z-index: 1000; /* Higher z-index than the blue rectangle */
}

/* Make left navigation exactly 224px wide when expanded */
#sidebar,
.vertical-menu,
.left-sidebar,
.sidebar-wrapper,
.sidebar-container,
.sidebar-content {
    width: 224px !important;
    max-width: 224px !important;
    min-width: 224px !important;
}

/* Collapsed state - narrow width with icons only */
.vertical-collpsed #sidebar,
.vertical-collpsed .vertical-menu,
.vertical-collpsed .left-sidebar,
.vertical-collpsed .sidebar-wrapper,
.vertical-collpsed .sidebar-container,
.vertical-collpsed .sidebar-content {
    width: 70px !important;
    max-width: 70px !important;
    min-width: 70px !important;
    overflow-x: visible !important; /* Allow flyouts to extend beyond sidebar */
}

/* Collapsed state - hide text, show only icons */
.vertical-collpsed #sidebar-menu ul li a span {
    display: none !important;
}

/* Collapsed state - center icons */
.vertical-collpsed #sidebar-menu ul li a {
    text-align: center !important;
    padding: 15px 20px !important;
    min-height: 55px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Collapsed state - hide submenu arrows */
.vertical-collpsed #sidebar-menu .has-arrow:after {
    display: none !important;
}

/* Collapsed state - force logo into 1:1 square ratio */
.vertical-collpsed .navbar-header .navbar-brand-box img,
.vertical-collpsed #page-topbar .navbar-brand-box img,
.vertical-collpsed .navbar-brand-box img {
    height: 50px !important; /* fit within 70px width with padding */
    width: 50px !important; /* fit within 70px width with padding */
    object-fit: contain !important; /* fit entire logo within square, maintaining 1:1 */
    border-radius: 0 !important; /* ensure square corners */
    transform: translateY(1px) !important; /* slight adjustment down */
}

/* Collapsed state - gradient background on sidebar container only (fixed height, not full page) */
.vertical-collpsed #sidebar,
.vertical-collpsed .vertical-menu,
.vertical-collpsed .left-sidebar,
.vertical-collpsed .sidebar-wrapper,
.vertical-collpsed .sidebar-container,
.vertical-collpsed .sidebar-content {
    background: linear-gradient(180deg, #012377 0%, #000000 100%) !important;
    height: 100vh !important; /* Full viewport height */
    position: fixed !important; /* Ensure it's fixed like expanded state */
    top: 0 !important; /* Start at the top of viewport */
    bottom: 0 !important; /* Extend to bottom of viewport */
}

/* Collapsed state - make menu items transparent to show gradient behind */
.vertical-collpsed #sidebar-menu,
.vertical-collpsed #sidebar-menu *,
.vertical-collpsed .metismenu,
.vertical-collpsed .metismenu *,
.vertical-collpsed .vertical-menu ul,
.vertical-collpsed .vertical-menu ul *,
.vertical-collpsed .vertical-menu li,
.vertical-collpsed .vertical-menu li *,
.vertical-collpsed .vertical-menu li a,
.vertical-collpsed .vertical-menu li a * {
    background: transparent !important;
}

/* Collapsed state - fix hover pop-out menu backgrounds and z-index */
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>ul,
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li>ul.mm-show {
    background-color: #012377 !important;
    box-shadow: 3px 5px 10px 0 rgba(54, 61, 71, .1) !important;
    z-index: 9999999999 !important; /* Even higher z-index to ensure it's above everything */
    position: absolute !important; /* Use absolute positioning relative to the menu item */
    left: 70px !important; /* Position to the right of collapsed sidebar */
    top: 0 !important; /* Position at the same level as the hovered menu item */
    min-width: 250px !important; /* Match expanded sidebar width */
    pointer-events: auto !important; /* Ensure it can receive mouse events */
    display: block !important; /* Force display */
    visibility: visible !important; /* Force visibility */
    opacity: 1 !important; /* Force opacity */
}

.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>ul a,
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li>ul.mm-show a {
    background-color: transparent !important;
    color: #FFFFFF !important;
    text-align: left !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: flex-start !important; /* Align to top for multi-line text */
    padding: 8px 20px !important;
    width: 250px !important; /* Match expanded sidebar width */
    min-height: 40px !important; /* Ensure adequate height for wrapped text */
}

/* Ensure icons are visible and properly sized in flyout menus */
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>ul a i {
    display: inline-block !important;
    margin-right: 8px !important;
    font-size: 1rem !important;
    color: #FFFFFF !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important; /* Slight top margin to align with first line of text */
}

/* Ensure text spans are visible and properly styled in flyout menus */
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>ul a span {
    display: inline-block !important;
    color: #FFFFFF !important;
    flex: 1 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: normal !important;
    line-height: 1.3 !important;
}

.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>ul a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}

/* Ensure icons maintain proper styling on hover in flyout menus */
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>ul a:hover i {
    color: #FFFFFF !important;
}

/* Ensure text maintains proper styling on hover in flyout menus */
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>ul a:hover span {
    color: #FFFFFF !important;
}


/* Collapsed state - keep the parent icon visible and in place when flyout is open */
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a {
    background-color: transparent !important; /* Keep icon transparent to show gradient */
    color: #FFFFFF !important; /* Keep icon visible */
    z-index: 2147483647 !important; /* Maximum z-index value */
    position: relative !important;
    opacity: 1 !important; /* Ensure icon is fully visible */
    visibility: visible !important; /* Ensure icon is not hidden */
    width: 70px !important; /* Keep icon in original position */
    left: 0 !important; /* Prevent icon from moving right */
    transform: none !important; /* Remove any transforms that might move the icon */
}

/* Collapsed state - ensure parent icon container stays visible and in place */
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li {
    position: relative !important; /* Ensure all menu items have relative positioning */
}

.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover {
    z-index: 2147483647 !important; /* Maximum z-index value */
    position: relative !important;
    width: 70px !important; /* Keep container width fixed */
}

/* Adjust blue rectangle to match new left nav width */
.navbar-header::after,
#page-topbar::after {
    width: 224px !important; /* Match the new left nav width */
}

/* Collapsed state - adjust blue rectangle width */
.vertical-collpsed .navbar-header::after,
.vertical-collpsed #page-topbar::after {
}

/* Collapsed state - adjust main content margin */
.vertical-collpsed .main-content {
    margin-left: 24px !important;
}

/* Force map container to have lower z-index */
#access_map,
#access_map *,
.leaflet-container,
.leaflet-container * {
    z-index: 1 !important;
}

/* Create flyouts for single menu items (no submenu) */
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:not(:has(ul)):hover::after {
    content: attr(data-menu-title);
    position: absolute !important;
    left: 70px !important; /* Align with regular flyouts */
    top: 0 !important;
    background-color: #012377 !important; /* Always solid blue background */
    color: #FFFFFF !important;
    padding: 12px 20px !important;
    border-radius: 0 !important; /* Make rectangular like regular flyouts */
    box-shadow: 3px 5px 10px 0 rgba(54, 61, 71, .1) !important;
    z-index: 9999999999 !important; /* Match the higher z-index */
    min-width: 250px !important; /* Match regular flyout width */
    white-space: nowrap !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    pointer-events: none !important; /* Let the overlay handle clicks */
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

/* Make the flyout clickable by creating a clickable area with hover effect */
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:not(:has(ul)):hover::before {
    content: '';
    position: absolute !important;
    left: 70px !important; /* Match the flyout position */
    top: 0 !important;
    width: 250px !important; /* Match regular flyout width */
    height: 50px !important;
    z-index: 10000000000 !important; /* Even higher than the flyout text */
    pointer-events: auto !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

/* Hover effect for single menu item flyouts - applied via JavaScript */
.vertical-collpsed .vertical-menu #sidebar-menu>ul>li:not(:has(ul)) .flyout-overlay:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}


/* Custom flyout styling */
.vertical-collpsed .vertical-menu .custom-flyout {
    position: absolute !important;
    left: 70px !important;
    top: 0 !important;
    background-color: #012377 !important;
    box-shadow: 3px 5px 10px 0 rgba(54, 61, 71, .1) !important;
    z-index: 9999999999 !important;
    min-width: 250px !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

/* Style for JavaScript-generated flyout headers */
.vertical-collpsed .vertical-menu .flyout-header {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    padding: 8px 20px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.4) !important;
    margin: 0 !important;
    min-height: 20px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: normal !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    z-index: 1 !important;
}