.content {
    overflow-x: auto !important; /* Adds a horizontal scrollbar if the content overflows the div */
}

th.product-image {
    width: 70px;
}

.border img {
    margin: 2px;
}

/* Custom table sorting styles */
th.sortable {
    cursor: pointer;
}

.mvc-grid-sort {
    display: none;
}

/* Phoenix sort arrow icons */
th.sortable::after {
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNyA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMy4xNDkgMC42NDY3NjhDMy4zNDM2NiAwLjQ1NDg4NSAzLjY1NjM0IDAuNDU0ODg1IDMuODUxIDAuNjQ2NzY4TDYuMTMxNTEgMi44OTQ2OUM2LjQ0OTk4IDMuMjA4NjIgNi4yMjc2OSAzLjc1MDc4IDUuNzgwNSAzLjc1MDc4SDEuMjE5NUMwLjc3MjMwNyAzLjc1MDc4IDAuNTUwMDE4IDMuMjA4NjIgMC44Njg0OTUgMi44OTQ2OUwzLjE0OSAwLjY0Njc2OFoiIGZpbGw9IiM2RTc4OTEiLz4KPHBhdGggZD0iTTMuMTQ5IDguMTU0MDFDMy4zNDM2NiA4LjM0NTkgMy42NTYzNCA4LjM0NTkgMy44NTEgOC4xNTQwMUw2LjEzMTUxIDUuOTA2MDlDNi40NDk5OCA1LjU5MjE2IDYuMjI3NjkgNS4wNSA1Ljc4MDUgNS4wNUgxLjIxOTVDMC43NzIzMDcgNS4wNSAwLjU1MDAxOCA1LjU5MjE2IDAuODY4NDk1IDUuOTA2MDlMMy4xNDkgOC4xNTQwMVoiIGZpbGw9IiM2RTc4OTEiLz4KPC9zdmc+Cg==");
    margin-left: .25rem;
}

th.sortable.asc::after {
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNyA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMy4xNDkgOC4xNTQwMUMzLjM0MzY2IDguMzQ1OSAzLjY1NjM0IDguMzQ1OSAzLjg1MSA4LjE1NDAxTDYuMTMxNTEgNS45MDYwOUM2LjQ0OTk4IDUuNTkyMTYgNi4yMjc2OSA1LjA1IDUuNzgwNSA1LjA1SDEuMjE5NUMwLjc3MjMwNyA1LjA1IDAuNTUwMDE4IDUuNTkyMTYgMC44Njg0OTUgNS45MDYwOUwzLjE0OSA4LjE1NDAxWiIgZmlsbD0iIzZFNzg5MSIvPgo8L3N2Zz4K") !important;
}

th.sortable.desc::after {
    content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNyA5IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMy4xNDkgMC42NDY3NjhDMy4zNDM2NiAwLjQ1NDg4NSAzLjY1NjM0IDAuNDU0ODg1IDMuODUxIDAuNjQ2NzY4TDYuMTMxNTEgMi44OTQ2OUM2LjQ0OTk4IDMuMjA4NjIgNi4yMjc2OSAzLjc1MDc4IDUuNzgwNSAzLjc1MDc4SDEuMjE5NUMwLjc3MjMwNyAzLjc1MDc4IDAuNTUwMDE4IDMuMjA4NjIgMC44Njg0OTUgMi44OTQ2OUwzLjE0OSAwLjY0Njc2OFoiIGZpbGw9IiM2RTc4OTEiLz4KPC9zdmc+Cg==") !important
}

.user-profile-icon {
    background-color: #f5f7fa;
    margin: 0;
    height: 100%;
    font-size: 18px;
    color: #6e7891;
}

.navbar-vertical .navbar-vertical-content .navbar-nav {
    font-size: 1rem;
}

.vertical-tab .nav-link {
    flex: unset;
}

.table:not(.table-sm) > thead > tr > th {
    font-size: 14px;
    white-space: nowrap;
}
/* Shipped icons */
tr.waiting .shipped-icon a {
    color: darkgray;
}

tr.shipped .shipped-icon a {
    color: #107AB0;
}

tr.received .shipped-icon a {
    color: #25b003;
}

tr.partial .shipped-icon a {
    color: #687547;
}

.icon-received {
    color: #25b003;
}

.icon-shipped {
    color: #107AB0;
}

.icon-waiting {
    color: darkgray; 
}

.form-group.required label.form-label::after {
    content: "*";
    color: red;
}

input[aria-invalid="true"] {
    border-color: #ed2000;
    padding-right: calc(1.49em + 1rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23ed2000'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ed2000' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.3725em + 0.25rem) center;
    background-size: calc(0.745em + 0.5rem) calc(0.745em + 0.5rem);
}

/* This Phoenix style is supposed to apply, but for some reason is overwritten by a different phoenix style on our site */
.table-sm > :not(caption) > * > * {
    padding-left: 0.25rem !important;
}

@media print {
    body {
        background-color: white;
    }

    .navbar-vertical.navbar-expand-lg ~ .navbar-top ~ .content, .content {
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
    }

    .navbar,
    #title-row,
    #filter-row,
    footer {
        display: none;
    }

    .report-printouts .fs--1 {
        font-size: 12px !important;
    }

    .report-printouts th {
        font-weight: 700 !important;
    }
}

.report-printouts hr {
    border-top: 2px solid;
    color: #6e7891;
}

.report-printouts th,
.report-printouts td {
    border: none !important;
}

.search-type {
    cursor: pointer;
}

#search-dropdown-toggle {
    position: absolute;
    right: 16px;
    top: calc(50% - 16px);
    padding: 5px;
    cursor: pointer;
}

#search-dropdown-toggle svg {
    position: unset !important;
    -webkit-transform: unset !important;
    -ms-transform: unset !important;
    transform: unset !important;
}

.icon-links a {
    color: black;
    padding: 0.25em;
}


.echart-daily-transactions-chart {
    min-height: 320px;
    width: 100%;
    user-select: none;
}

.echart-daily-transactions-chart > div:first-child {
    width: 1058px;
    padding: 0;
    margin: 0;
    border-width: 0;
    cursor: default;
}

.echart-daily-transactions-chart canvas {
    left: 0;
    top: 0;
    width: 1058px;
    height: 320px;
    user-select: none;
    padding: 0;
    margin: 0;
    border-width: 0;
}

.echart-daily-transactions-chart > div:last-child {
    display: block;
    border-style: solid;
    white-space: nowrap;
    box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
    background-color: rgb(239, 242, 246);
    border-width: 1px;
    border-radius: 4px;
    color: rgb(20, 24, 36);
    font: 14px / 21px 'Microsoft YaHei';
    padding: 0px;
    transform: translate3d(56px, 35px, 0px);
    border-color: rgb(203, 208, 221);
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}

.report_menu {
    padding-top:15px;
}

.btn.active {
    color: yellow !important;
}

.choices__button {
    border-left:none !important;
    background-color:black !important;
}

.choices .choices__list--multiple .choices__item {
    background-color: #f5f7fa !important;
    text-transform: none !important;
    color: #525b75 !important;
    font-size: .9rem !important;
    border: 1px solid #cbd0dd;
}

.choices__input--cloned::placeholder {
    color: #31374a !important; /* Change 'red' to any color you prefer */
}

.fill-all-disposition {
    border-radius: 5px;
    padding: .25em;
    cursor: pointer;
}

.fill-all-disposition:hover {
    font-size: 1.5em;
    background: #004dff;
    color: white;
}

.partno-cell {
    white-space: nowrap;
}

.alert-success {
    --phoenix-alert-color: #141824;
    --phoenix-alert-bg: #FFFFFF;
    --phoenix-alert-border-color: #3874FF;
}

.alert-info {
    --phoenix-alert-color: #141824;
    --phoenix-alert-bg: #D1E7FF;
    --phoenix-alert-border-color: #3874FF;
    font-weight: 600;
}

.alert-warning {
    --phoenix-alert-color: #141824;
    --phoenix-alert-bg: #FFF3CD;
    --phoenix-alert-border-color: #FFC107;
    background-color: #FFF3CD !important;
    color: #141824 !important;
    border-color: #FFC107 !important;
}

/* Command Palette placeholder styling */
#commandPaletteInput::placeholder {
    color: #015daa !important;
    font-weight: 600 !important;
}

.form-label {
    font-size: .8rem;
}

.form-text {
    font-size:90%;
}

tr.mvc-grid-headers th {
    position: sticky;
    top: 0;
    background-color: #000 !important; /* Dark background */
    color: #fff !important; /* White text */
    z-index: 1020; /* Higher than the table rows */
}

.truncate {
    display: inline-block;
    max-width: 150px; /* Adjust as needed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.btn.text-left {
    text-align: left;
    margin:0;
    padding:0;
}

.small-input {
    width: 100px; /* Adjust the width as needed */
}

.qty-input {
    width: 70px; /* Adjust the width as needed */
}


    td .qty {
    width:100px;
}

/* Force.net input box for qty to be shorter. */
td.qty-box input {
    width: 60px;
}

/* Dark table headers - black background with white text */
/* Regular table headers */
th,
thead th,
.table > thead > tr > th,
.table:not(.table-sm) > thead > tr > th {
    background-color: #000 !important;
    color: #fff !important;
}

/* MVC Grid headers */
.mvc-grid th,
tr.mvc-grid-headers th {
    background-color: #000 !important;
    color: #fff !important;
}

/* Phoenix table headers */
.table > thead > tr > th {
    background-color: #000 !important;
    color: #fff !important;
}

/* Sortable headers */
th.sortable {
    background-color: #000 !important;
    color: #fff !important;
}

/* Ensure sort arrows remain visible on dark background */
th.sortable::after {
    filter: brightness(0) invert(1);
}

th.sortable.asc::after {
    filter: brightness(0) invert(1);
}

th.sortable.desc::after {
    filter: brightness(0) invert(1);
}

/* Professional zebra striping for all tables */
/* Enhanced striping for Bootstrap tables */
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: #f8f9fa !important;
}

.table-striped > tbody > tr:nth-of-type(even) > td,
.table-striped > tbody > tr:nth-of-type(even) > th {
    background-color: #ffffff !important;
}

/* Apply striping to all tables by default for professional look */
table.table > tbody > tr:nth-of-type(odd) > td,
table.table > tbody > tr:nth-of-type(odd) > th {
    background-color: #f8f9fa !important;
}

table.table > tbody > tr:nth-of-type(even) > td,
table.table > tbody > tr:nth-of-type(even) > th {
    background-color: #ffffff !important;
}

/* MVC Grid striping */
.mvc-grid tbody tr:nth-of-type(odd) td {
    background-color: #f8f9fa !important;
}

.mvc-grid tbody tr:nth-of-type(even) td {
    background-color: #ffffff !important;
}

/* Phoenix theme striping enhancement */
.table > tbody > tr:nth-of-type(odd) > * {
    --phoenix-table-accent-bg: rgba(248, 249, 250, 1) !important;
    background-color: #f8f9fa !important;
}

.table > tbody > tr:nth-of-type(even) > * {
    --phoenix-table-accent-bg: rgba(255, 255, 255, 1) !important;
    background-color: #ffffff !important;
}

/* Hover effects that work with striping */
table.table > tbody > tr:hover > td,
table.table > tbody > tr:hover > th,
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: #e3f2fd !important;
}

/* Grid table striping */
table.grid-table tbody tr:nth-of-type(odd) td {
    background-color: #f8f9fa !important;
}

table.grid-table tbody tr:nth-of-type(even) td {
    background-color: #ffffff !important;
}

/* MVC Grid container styling improvements */
/* Remove white background and borders from containers that hold mvc-grid */
.mvc-grid-container,
div[data-list=""]:has(.mvc-grid),
.mx-n4.mx-lg-n6:has(.mvc-grid) {
    background-color: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
    border-y: none !important;
}

/* Alternative selector for containers with mvc-grid */
.bg-white.border-y:has(.mvc-grid) {
    background-color: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Professional dark border for mvc-grid */
.mvc-grid {
    border: 2px solid #dee2e6 !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}

/* Dark border for the table inside mvc-grid */
.mvc-grid table {
    border: none !important;
    margin-bottom: 0 !important;
}

/* Ensure mvc-grid headers maintain dark styling */
.mvc-grid .mvc-grid-headers th {
    border-top: none !important;
    border-left: 1px solid #495057 !important;
    border-right: 1px solid #495057 !important;
}

.mvc-grid .mvc-grid-headers th:first-child {
    border-left: none !important;
}

.mvc-grid .mvc-grid-headers th:last-child {
    border-right: none !important;
}

/* Professional styling for mvc-grid cells */
.mvc-grid tbody td {
    border-left: 1px solid #dee2e6 !important;
    border-right: 1px solid #dee2e6 !important;
}

.mvc-grid tbody td:first-child {
    border-left: none !important;
}

.mvc-grid tbody td:last-child {
    border-right: none !important;
}

/* Style the pager to match */
.mvc-grid-pager {
    background-color: transparent !important;
    border-top: none !important;
    margin: 0 !important;
    padding: 1rem !important;
}

/* Better spacing for first and last columns */
/* First column - add extra left padding */
.mvc-grid thead th:first-child,
.mvc-grid tbody td:first-child {
    padding-left: 1.5rem !important;
}

/* Last column - add extra right padding */
.mvc-grid thead th:last-child,
.mvc-grid tbody td:last-child {
    padding-right: 1.5rem !important;
}

/* Remove any conflicting borders from table-responsive wrapper */
.mvc-grid .table-responsive {
    border: none !important;
}

/* Additional container targeting for better browser compatibility */
/* Target containers that are commonly used with mvc-grid */
div[data-list=""]:not(.mvc-grid) {
    background-color: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Specific targeting for Phoenix theme containers with mvc-grid */
.mx-n4.mx-lg-n6.bg-white.border-y {
    background-color: transparent !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Override any bootstrap border utilities when used with mvc-grid containers */
.border-y.border-300 {
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

/* Ensure proper spacing around mvc-grid */
.mvc-grid {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Enhanced styling for mvc-grid sort buttons */
.mvc-grid .mvc-grid-sort {
    color: #fff !important;
    border: none !important;
    background: transparent !important;
}

.mvc-grid .mvc-grid-sort:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Main site header styling */
/* Blue background for the top navbar */
.navbar-top {
    background-color: #015daa !important;
    min-height: 4.48rem !important; /* 12% taller than default 4rem */
    border-bottom: 1px solid #013d7a !important; /* Slightly darker border */
}

/* White text for logo and navbar elements */
.navbar-top .logo-text {
    color: #ffffff !important;
}

.navbar-top .navbar-brand {
    color: #ffffff !important;
}

.navbar-top .navbar-brand:hover,
.navbar-top .navbar-brand:focus {
    color: #f0f0f0 !important;
}

/* White text for navigation links */
.navbar-top .nav-link {
    color: #ffffff !important;
}

.navbar-top .nav-link:hover,
.navbar-top .nav-link:focus {
    color: #f0f0f0 !important;
}

/* White text for navbar toggler and hamburger menu */
.navbar-top .navbar-toggler {
    border-color: #ffffff !important;
}

.navbar-top .navbar-toggler .navbar-toggle-icon .toggle-line {
    background-color: #ffffff !important;
}

.navbar-top .navbar-toggler .navbar-toggle-icon:before,
.navbar-top .navbar-toggler .navbar-toggle-icon:after {
    background-color: #ffffff !important;
}

/* White text for dropdown toggles and buttons */
.navbar-top .dropdown-toggle {
    color: #ffffff !important;
}

.navbar-top .btn {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.navbar-top .btn:hover {
    color: #015daa !important;
    background-color: #ffffff !important;
}

/* Update navbar height variable for Phoenix theme */
:root {
    --phoenix-navbar-top-height: 4.48rem !important;
}

/* Adjust content padding for taller header */
.content {
    padding-top: calc(4.48rem + 2rem) !important; /* Account for the taller header */
}

/* Adjust vertical navbar positioning for taller header */
.navbar-vertical {
    top: 4.48rem !important; /* Position below the taller header */
}

html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-xs {
    height: calc(100vh - 4.48rem) !important;
}

html:not(.navbar-vertical-collapsed) .navbar-vertical.navbar-expand-xs .navbar-vertical-content {
    height: calc(100vh - 4.48rem - 4rem) !important;
}

/* Customer selector and profile section improvements */
/* Fix alignment and styling for blue header background */

/* Proper alignment for navbar icons and customer selector */
.navbar-top .navbar-nav-icons {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem;
}

/* Customer selector styling */
.navbar-top .dropdown.font-sans-serif {
    margin-top: 0 !important; /* Remove the mt-2 margin that was misaligning */
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* Customer selector button styling for blue background */
.navbar-top .btn-phoenix-secondary.dropdown-toggle {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    font-weight: 600;
    padding: 0.5rem 1rem !important;
    border-radius: 0.375rem !important;
    transition: all 0.3s ease !important;
}

.navbar-top .btn-phoenix-secondary.dropdown-toggle:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.navbar-top .btn-phoenix-secondary.dropdown-toggle:focus {
    background-color: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

/* Profile avatar alignment and styling */
.navbar-top .nav-item.dropdown {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

.navbar-top .nav-link.pe-0 {
    padding: 0.5rem !important;
    border-radius: 0.375rem !important;
    transition: all 0.3s ease !important;
}

.navbar-top .nav-link.pe-0:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-1px);
}

/* Profile icon styling for blue background */
.navbar-top .user-profile-icon {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    transition: all 0.3s ease !important;
}

.navbar-top .nav-link:hover .user-profile-icon {
    background-color: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #ffffff !important;
}

/* Professional dropdown menus with light theme */
/* Customer selector dropdown menu */
.navbar-top .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #e3e6ed !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    margin-top: 0.5rem !important;
    padding: 0.5rem 0 !important;
    min-width: 200px !important;
}

.navbar-top .dropdown-item {
    color: #31374a !important;
    font-weight: 500 !important;
    padding: 0.5rem 1rem !important;
    border-radius: 0.25rem !important;
    margin: 0 0.5rem !important;
    transition: all 0.2s ease !important;
}

.navbar-top .dropdown-item:hover {
    background-color: #f8f9fa !important;
    color: #015daa !important;
    transform: translateX(2px);
}

.navbar-top .dropdown-item.active {
    background-color: #015daa !important;
    color: #ffffff !important;
}

/* Profile dropdown menu */
.navbar-top .dropdown-profile {
    background-color: #ffffff !important;
    border: 1px solid #e3e6ed !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    margin-top: 0.5rem !important;
    overflow: hidden !important;
    padding: 0.5rem 0 !important;
}

/* Remove the header section completely */
.navbar-top .dropdown-profile .card-body {
    display: none !important;
}

.navbar-top .dropdown-profile .text-center {
    display: none !important;
}

/* Show the navigation section and style it properly */
.navbar-top .dropdown-profile .overflow-auto.scrollbar {
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* Consistent menu item styling for both profile and signout */
.navbar-top .dropdown-profile .nav-link,
.navbar-top .dropdown-profile .btn-phoenix-secondary {
    background: none !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    color: #31374a !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    border-radius: 0.25rem !important;
    margin: 0 0.5rem !important;
    text-align: left !important;
    font-size: 0.875rem !important;
}

.navbar-top .dropdown-profile .nav-link:hover,
.navbar-top .dropdown-profile .btn-phoenix-secondary:hover {
    background-color: #f8f9fa !important;
    color: #015daa !important;
    transform: translateX(2px);
    box-shadow: none !important;
    text-decoration: none !important;
}

.navbar-top .dropdown-profile .nav-link:focus,
.navbar-top .dropdown-profile .btn-phoenix-secondary:focus {
    background-color: #f8f9fa !important;
    color: #015daa !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
}

/* Icon styling for both menu items */
.navbar-top .dropdown-profile .nav-link svg,
.navbar-top .dropdown-profile .btn-phoenix-secondary .fas {
    color: #6e7891 !important;
    margin-right: 0.75rem !important;
    width: 16px !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

.navbar-top .dropdown-profile .nav-link:hover svg,
.navbar-top .dropdown-profile .btn-phoenix-secondary:hover .fas {
    color: #015daa !important;
}

/* Font Awesome icon styling for both menu items */
.navbar-top .dropdown-profile .nav-link .fas,
.navbar-top .dropdown-profile .nav-link .fa,
.navbar-top .dropdown-profile a.logout-link .fas,
.navbar-top .dropdown-profile a.logout-link .fa {
    color: #6e7891 !important;
    margin-right: 0.5rem !important;
    width: 16px !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    text-align: center !important;
}

.navbar-top .dropdown-profile .nav-link:hover .fas,
.navbar-top .dropdown-profile .nav-link:hover .fa,
.navbar-top .dropdown-profile a.logout-link:hover .fas,
.navbar-top .dropdown-profile a.logout-link:hover .fa {
    color: #015daa !important;
}

/* Remove the dropdown triangle/caret */
.navbar-top .dropdown-profile.navbar-dropdown-caret::after {
    display: none !important;
}

.navbar-top .dropdown-menu.navbar-dropdown-caret::after {
    display: none !important;
}

/* Simple logout link styling (to replace the form) */
.navbar-top .dropdown-profile a.logout-link {
    background: none !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    color: #31374a !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    border-radius: 0.25rem !important;
    margin: 0 0.5rem !important;
    text-align: left !important;
    font-size: 0.875rem !important;
}

.navbar-top .dropdown-profile a.logout-link:hover {
    background-color: #f8f9fa !important;
    color: #015daa !important;
    transform: translateX(2px);
    text-decoration: none !important;
}

.navbar-top .dropdown-profile a.logout-link:focus {
    background-color: #f8f9fa !important;
    color: #015daa !important;
    outline: none !important;
    text-decoration: none !important;
}

/* Clean menu items container */
.navbar-top .dropdown-profile .card-footer {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.navbar-top .dropdown-profile .px-3 {
    padding: 0 !important;
}

/* Fix the form alignment issue */
.navbar-top form.nav.navbar-nav {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}