/* ===================================
   RESPONSIVE OVERRIDES AND FIXES
   =================================== */

/* ===================================
   FOOTER STYLES
   =================================== */
.footer-main {
    background-color: #1a1a1a;
    color: #ffffff;
    margin-top: auto;
    width: 100%;
}

/* Ensure proper footer positioning */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container-fluid.overflow-y {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.row.overflow-y {
    flex: 1;
    display: flex;
/*    flex-direction: column;*/
}

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

main.overflow-y {
    flex: 1;
}

/* Layout-specific footer positioning */
.consultant-page .container-fluid {
    
    display: flex;
    flex-direction: column;
}

.consultant-page .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.consultant-page main.overflow-y {
    flex: 1;
}

/* Ensure footer is at bottom for all layouts */
.footer-main {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: auto;
    flex-shrink: 0;
    z-index: 1; /* Keep footer below dropdowns */
}

.footer-newsletter {
    background-color: var(--bs-primary);
    padding: 2rem 0;
}

.footer-newsletter h5 {
    font-weight: 600;
    font-size: 1.1rem;
}

.footer-newsletter .input-group {
    max-width: 400px;
}

.footer-newsletter .form-control {
    border: none;
    border-radius: 0.375rem 0 0 0.375rem;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}

.footer-newsletter .btn {
    border: none;
    border-radius: 0 0.375rem 0.375rem 0;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    background-color: var(--bs-secondary);
    color: white;
}

.footer-newsletter .btn:hover {
    background-color: var(--bs-secondary);
}

.footer-content {
    padding: 3rem 0 2rem 0;
}

/* Enhanced styling for single Company column */
.footer-content .row.justify-content-center {
    text-align: center;
}

.footer-content .col-lg-8 {
    max-width: 800px;
}

/* New footer links container styling */
.footer-links-container {
    display: flex;
    justify-content: center;
    gap: 2rem;
/*    flex-wrap: wrap;*/
    margin-top: 1rem;
}

.footer-link-item {
    flex: 0 0 auto;
    min-width: 200px;
}

.footer-link {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #b0b0b0;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    text-align: center;
    justify-content: center;
    min-height: 60px;
}

.footer-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.footer-link i {
    font-size: 1.2rem;
    margin-right: 0.5rem;
    transition: transform 0.3s ease;
}

.footer-link:hover i {
    transform: scale(1.1);
}

.footer-heading {
    color: #ffffff;
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 1rem;
}

.footer-heading:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--bs-primary), var(--bs-secondary));
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

/* Footer heading styles are now defined above with enhanced styling */

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: #b0b0b0;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
    line-height: 1.4;
}

.footer-links a:hover {
    color: var(--bs-primary);
    text-decoration: none;
}

.footer-bottom {
    background-color: #0f0f0f;
    padding: 2rem 0;
    border-top: 1px solid #333;
}

.social-icons {
    display: flex;
    gap: 0.75rem;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #333;
    color: #ffffff;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.social-icon:hover {
    background-color: var(--bs-primary);
    color: #ffffff;
    transform: translateY(-2px);
}

.copyright-text {
    color: #b0b0b0;
    font-size: 0.9rem;
}

.legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.legal-link {
    color: #b0b0b0;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.legal-link:hover {
    color: var(--bs-primary);
    text-decoration: none;
}

.separator {
    color: #666;
    font-size: 0.85rem;
}

.app-store-icons {
    display: flex;
    gap: 0.75rem;
}

.app-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #333;
    color: #ffffff;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.app-icon:hover {
    background-color: var(--bs-secondary);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Footer Responsive Design */
@media (max-width: 991.98px) {
    .footer-content {
        padding: 2rem 0 1.5rem 0;
    }
    
    .footer-bottom {
        padding: 1.5rem 0;
    }
    
    .footer-newsletter {
        padding: 1.5rem 0;
    }
    
    .footer-newsletter .row > div {
        margin-bottom: 1rem;
    }
    
    .footer-newsletter .row > div:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 767.98px) {
    .footer-content {
        padding: 1.5rem 0 1rem 0;
    }
    
    .footer-bottom {
        padding: 1rem 0;
        text-align: center;
    }
    
    .footer-newsletter {
        padding: 1rem 0;
        text-align: center;
    }
    
    .footer-newsletter .input-group {
        max-width: 100%;
        margin: 0 auto;
    }
    
    .social-icons {
        justify-content: center;
        margin-bottom: 1rem;
    }
    
    .app-store-icons {
        justify-content: center;
        margin-top: 1rem;
    }
    
    .legal-links {
        justify-content: center;
        margin-top: 1rem;
    }
    
    .footer-bottom .row > div {
        margin-bottom: 1rem;
    }
    
    .footer-bottom .row > div:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 575.98px) {
    .footer-content {
        padding: 1rem 0;
    }
    
    .footer-newsletter {
        padding: 0.75rem 0;
    }
    
    .footer-newsletter h5 {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    
    .footer-heading {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    
    .footer-links a {
        font-size: 0.85rem;
    }
    
    .social-icon,
    .app-icon {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
    }
    
    .copyright-text {
        font-size: 0.8rem;
    }
    
    .legal-link {
        font-size: 0.8rem;
    }
}

/* Additional footer enhancements */
.footer-main {
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* Fix for large screens (16-inch and above) - prevent white space below footer */
/*@media (min-width: 1440px) {
    body {
        height: 100vh;
    }*/
    
/*    .container-fluid {
        height: 100%;
    }*/
    
    /*.row {
        height: 100%;
    }
    
    .main-content {
        height: 100%;
    }
}*/

.footer-newsletter .form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
    border-color: var(--bs-primary);
}

.footer-links a:before {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: var(--bs-primary);
    transition: width 0.3s ease;
}

.footer-links a:hover:before {
    width: 100%;
}

.footer-links a {
    position: relative;
}

/* Smooth transitions for all interactive elements */
.footer-main * {
    transition: all 0.3s ease;
}

/* Ensure proper spacing in different layouts */
@media (min-width: 992px) {
    .footer-content .row > div:not(:last-child) {
        border-right: 1px solid #333;
    }
}

/* Responsive adjustments for single column layout */
@media (max-width: 768px) {
    .footer-content .col-lg-8 {
        max-width: 100%;
    }
    
    .footer-links-container {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
    .footer-link-item {
        min-width: 100%;
        max-width: 300px;
    }
    
    .footer-link {
        padding: 0.875rem 1.25rem;
        min-height: 50px;
        font-size: 0.95rem;
    }
    
    .footer-heading {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }
}

/* Fix navbar content conflicts - override main style.css */
.navbar-content {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    padding-left: 1rem !important;
    padding-right: .3rem !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Override main style.css conflicting rules */
@media (max-width: 991px) {
    .navbar .navbar-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex-wrap: nowrap !important;
/*        overflow: hidden !important;*/
    }
    
    /* Override the calc width that's causing issues */
    .navbar .navbar-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
    
    /* Hide the extra hamburger menu that appears on the right side */
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:last-child .nav-link,
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:last-child button,
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:last-child .btn {
        display: none !important;
    }
    
    /* Hide any mobile menu toggle buttons that might appear on the right */
    body[data-role="Client"] .navbar-content .mobile-menu-toggle,
    body[data-role="Client"] .navbar-content .navbar-toggler,
    body[data-role="Client"] .navbar-content .navbar-collapse-toggle {
        display: none !important;
    }
    
    /* Hide any sidebar toggler buttons that might appear */
    body[data-role="Client"] .navbar-content .sidebar-toggler,
    body[data-role="Client"] .navbar-content .navbar-nav .sidebar-toggler {
        display: none !important;
    }
    
    /* Hide any menu buttons that might appear on the right side */
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:last-child a[href="#"],
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:last-child .nav-link[href="#"] {
        display: none !important;
    }
}

/* Additional override for the specific calc rule */
@media (max-width: 991px) {
    .navbar .navbar-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
    
    /* Force override any calc width rules */
    body[data-role="Client"] .navbar .navbar-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex-wrap: nowrap !important;
    }
    
    /* Hide any additional mobile menu elements that might appear */
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:last-child .nav-link,
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:last-child button,
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:last-child .btn,
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:last-child .dropdown-toggle {
        display: none !important;
    }
    
    /* But preserve the profile dropdown - only hide menu buttons */
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:last-child .dropdown-toggle[aria-haspopup="true"] {
        display: block !important;
    }
    
    /* Hide any menu icons that might appear */
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:last-child i[data-feather="menu"],
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:last-child .fa.fa-bars,
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:last-child .bi.bi-list {
        display: none !important;
    }
}

@media (max-width: 575.98px) {
    .navbar .navbar-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* Ensure mobile menu toggle buttons are properly styled */
.mobile-menu-toggle {
    background: none !important;
    border: none !important;
    color: var(--bs-primary) !important;
    padding: 0.5rem !important;
    border-radius: 0.375rem !important;
    transition: all 0.2s ease !important;
}

.mobile-menu-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.mobile-menu-toggle:focus {
    outline: none !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

/* Fix client navbar mobile layout */
@media (max-width: 767.98px) {
    body[data-role="Client"] .navbar-content {
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding: 0 0.5rem !important;
        min-height: 4rem !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: row !important;
    }
    
    /* Hide any remaining menu buttons while preserving profile dropdown */
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:last-child a:not(.dropdown-toggle),
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:last-child .nav-link:not(.dropdown-toggle) {
        display: none !important;
    }
    
    /* Ensure profile dropdown is visible */
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:last-child .dropdown-toggle {
        display: block !important;
    }
    
    /* Force single line layout with flexbox */
    body[data-role="Client"] .navbar-content {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
    
    /* Override main style.css navbar-nav properties */
    body[data-role="Client"] .navbar-content .navbar-nav {
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.375rem !important;
        flex-wrap: nowrap !important;
    }
    
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item {
        margin-left: 0 !important;
        margin-right: 0 !important;
        min-width: auto !important;
        flex-shrink: 0 !important;
    }
    
    /* Ensure left side (logo + hamburger) stays compact */
    body[data-role="Client"] .navbar-content > div:first-child {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex-shrink: 0 !important;
        min-width: 0 !important;
        max-width: 40% !important;
    }
    
    /* Ensure right side (language, notifications, profile) stays on same line */
    body[data-role="Client"] .navbar-content > div:last-child,
    body[data-role="Client"] .navbar-content > ul:last-child {
        display: flex !important;
        align-items: center !important;
        gap: 0.375rem !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
        flex-wrap: nowrap !important;
        max-width: 60% !important;
        justify-content: flex-end !important;
    }
    
    body[data-role="Client"] .navbar-nav.align-items-center {
        gap: 0.375rem !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
        flex-wrap: nowrap !important;
    }
    
    /* Hide main navigation menu on mobile - more specific selector */
    body[data-role="Client"] .navbar-nav.flex-row:not(.align-items-center),
    body[data-role="Client"] .navbar-content .d-flex .navbar-nav.flex-row,
    body[data-role="Client"] .navbar-content > div:first-child .navbar-nav.flex-row {
        display: none !important;
    }
    
    /* Hide any menu-related nav items while preserving profile dropdown */
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:has(a[href="#"]),
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:has(.sidebar-toggler),
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:has(i[data-feather="menu"]) {
/*        display: none !important;*/
    }
    
    /* Ensure profile dropdown nav item is visible */
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:has(.dropdown-toggle) {
        display: block !important;
    }
    
    /* Ensure mobile hamburger menu is visible */
    body[data-role="Client"] .mobile-hamburger-menu {
        display: block !important;
        margin-right: 0.5rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide sidebar toggler on mobile */
    body[data-role="Client"] .sidebar-toggler:not(.mobile-hamburger-menu) {
        display: none !important;
    }
    
    /* Ensure mobile menu overlay is properly positioned */
    body[data-role="Client"] .client-mobile-menu-overlay {
        z-index: 1070 !important;
    }
    
    /* Hide any desktop navigation elements on mobile */
    body[data-role="Client"] .d-none-mobile {
        display: none !important;
    }
    
    /* Prevent right side elements from wrapping */
    body[data-role="Client"] .language-switcher,
    body[data-role="Client"] .auth-btn,
    body[data-role="Client"] .w-60px.h-60px,
    body[data-role="Client"] .fa.fa-bell {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
}

/* Fix client navbar desktop layout - ensure horizontal menu */
@media (min-width: 768px) {
    body[data-role="Client"] .navbar-nav.flex-row:not(.align-items-center) {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 1.5rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    body[data-role="Client"] .navbar-nav.flex-row:not(.align-items-center) .nav-item {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    body[data-role="Client"] .navbar-nav.flex-row:not(.align-items-center) .nav-link {
        padding: 0.5rem 0.75rem !important;
        color: #495057 !important;
        text-decoration: none !important;
        font-weight: 500 !important;
        transition: color 0.2s ease !important;
        white-space: nowrap !important;
    }
    
    body[data-role="Client"] .navbar-nav.flex-row:not(.align-items-center) .nav-link:hover {
        color: var(--bs-primary) !important;
    }
    
    /* Hide mobile hamburger on desktop */
    body[data-role="Client"] .mobile-hamburger-menu {
        display: none !important;
    }
    
    /* Ensure desktop navigation is visible */
    body[data-role="Client"] .d-none-mobile {
        display: flex !important;
        margin-left:auto!important;
    }
    
    /* Ensure proper spacing and alignment */
    body[data-role="Client"] .navbar-content > div:first-child {
        display: flex !important;
        align-items: center !important;
        gap: 2rem !important;
    }
}

/* Fix dropdown functionality for medium screens (768px - 996px) */
@media (min-width: 768px) and (max-width: 995.98px) {
    /* Keep navbar with white background but ensure proper positioning */
    body[data-role="Client"] .navbar {
/*        position: relative !important;*/
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 1030 !important;
        background: #fff !important; /* Keep white background */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; /* Keep subtle shadow */
        border-bottom: 1px solid #e9ecef !important; /* Add border for separation */
    }
    
    /* Ensure navbar has proper height and spacing */
    body[data-role="Client"] .navbar-content {
/*        min-height: 4rem !important;*/
/*        padding: 0.5rem 1rem !important;*/
    }
    
    /* Ensure dropdowns work properly */
    body[data-role="Client"] .navbar-content .dropdown-menu,
    body[data-role="Client"] .navbar-content .notification-dropdown {
        position: absolute !important;
        top: 100% !important;
        left: auto !important;
        right: 0 !important;
        width: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        z-index: 1050 !important;
    }
    
    /* Fix language switcher dropdown */
    body[data-role="Client"] .language-switcher .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: auto !important;
        width: auto !important;
        min-width: 10rem !important;
        margin-top: 0.25rem !important;
        z-index: 1050 !important;
    }
    
    /* Fix notification dropdown */
    body[data-role="Client"] .notification-dropdown {
        position: absolute !important;
        top: 100% !important;
        left: auto !important;
        right: 0 !important;
        width: 20rem !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
        z-index: 1050 !important;
    }
    
    /* Fix profile dropdown */
    body[data-role="Client"] .navbar-content .navbar-nav .nav-item:last-child .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: auto !important;
        right: 0 !important;
        width: auto !important;
        min-width: 15rem !important;
        z-index: 1050 !important;
    }
    
    
    
    /* Ensure navbar doesn't overlap content */
    body[data-role="Client"] .navbar + * {
        margin-top: 0 !important;
    }
}

/* Fix admin panel mobile menu */
@media (max-width: 767.98px) {
    body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle {
        display: block !important;
    }
    
    body:not([data-role="Client"]):not([data-role="Consultant"]) .desktop-menu-toggle {
        display: none !important;
    }
    
    body:not([data-role="Client"]):not([data-role="Consultant"]) .sidebar-container {
        position: fixed !important;
        left: -100% !important;
        top: 0 !important;
        height: 100vh !important;
        z-index: 1050 !important;
        transition: left 0.3s ease !important;
        background: #fff !important;
        box-shadow: 0 0 0.625rem rgba(0,0,0,0.1) !important;
    }
    
    body:not([data-role="Client"]):not([data-role="Consultant"]) .sidebar-container.show {
        left: 0 !important;
    }
    
    body:not([data-role="Client"]):not([data-role="Consultant"]) .main-content {
        margin-left: 0 !important;
        padding-left: 0.9375rem !important;
        width: 100% !important;
    }
}

/* Fix table responsiveness */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Fix form responsiveness */
@media (max-width: 767.98px) {
    .form-control,
    .form-select {
        font-size: 16px !important; /* Prevent iOS zoom */
    }
    
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }
}

/* ===================================
   GLOBAL BUTTON RESPONSIVENESS
   =================================== */

/* All buttons get responsive behavior by default */
.btn {
    transition: all 0.3s ease !important;
}

/* Tablet and small desktop (768px and below) */
@media (max-width: 767.98px) {
    .btn {
        font-size: 0.8rem !important;
        padding: 0.3rem 0.6rem !important;
        min-height: 36px !important;
    }
}

/* Mobile (576px and below) */
@media (max-width: 575.98px) {
    .btn {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
        min-height: 32px !important;
    }
}

/* Small mobile (360px and below) */
@media (max-width: 360px) {
    .btn {
        font-size: 0.6875rem !important;
        padding: 0.2rem 0.4rem !important;
        min-height: 28px !important;
    }
    
    /* Ensure very small buttons remain usable */
    .btn-sm {
        font-size: 0.6875rem !important;
        padding: 0.2rem 0.4rem !important;
        min-height: 28px !important;
    }
    
    .btn-lg {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.75rem !important;
        min-height: 36px !important;
    }
}

/* Additional responsive button enhancements */
@media (max-width: 767.98px) {
    /* Ensure button groups and input groups work properly */
    .btn-group .btn,
    .input-group .btn {
        border-radius: 0.375rem !important;
    }
    
    /* Ensure icon buttons maintain proper sizing */
    .btn i,
    .btn [data-feather] {
        font-size: inherit !important;
        width: 1em !important;
        height: 1em !important;
    }
    
    /* Ensure button text doesn't overflow */
.btn {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Responsive button size adjustments for different button types */
@media (max-width: 767.98px) {
    /* Small buttons */
    .btn-sm {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
        min-height: 32px !important;
    }
    
    /* Large buttons */
    .btn-lg {
        font-size: 0.875rem !important;
        padding: 0.5rem 1rem !important;
        min-height: 44px !important;
    }
    
    /* Extra large buttons */
    .btn-xl {
        font-size: 0.875rem !important;
        padding: 0.5rem 1rem !important;
        min-height: 44px !important;
    }
    
    /* Button groups and special layouts */
    .btn-group-vertical .btn {
        border-radius: 0.375rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Ensure buttons in forms don't break layout */
    .form-group .btn,
    .input-group .btn {
        margin-top: 0.25rem !important;
    }
}
}

/* Client Dashboard Search Section Responsiveness */
@media (max-width: 767.98px) {
    body[data-role="Client"] .search-section {
        padding: 0.75rem 0 !important;
    }
    
    body[data-role="Client"] .search-container {
        padding: 0 0.5rem !important;
    }
    
    body[data-role="Client"] .search-container .input-group {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    body[data-role="Client"] .search-container .input-group .form-control {
        min-width: 0 !important;
        font-size: 0.875rem !important;
        padding: 0.625rem 0.75rem !important;
        min-height: 44px !important;
    }
    
    body[data-role="Client"] .search-container .input-group .btn {
        white-space: nowrap !important;
        padding: 0.625rem 1rem !important;
        font-size: 0.875rem !important;
        min-height: 44px !important;
        min-width: fit-content !important;
    }
    
    body[data-role="Client"] .request-help-link {
        font-size: 0.875rem !important;
        padding: 8px !important;
    }
}

@media (max-width: 575.98px) {
    body[data-role="Client"] .search-container {
        padding: 0 0.25rem !important;
    }
    
    body[data-role="Client"] .search-container .input-group .form-control {
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.625rem !important;
        min-height: 40px !important;
    }
    
    body[data-role="Client"] .search-container .input-group .btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8125rem !important;
        min-height: 40px !important;
    }
    
    body[data-role="Client"] .request-help-link {
        font-size: 0.8125rem !important;
        padding: 6px !important;
    }
}

/* Fix card responsiveness */
@media (max-width: 767.98px) {
    .card {
        margin-bottom: 1rem !important;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    .card-header {
        padding: 0.75rem 1rem !important;
    }
}

/* Fix navigation responsiveness */
@media (max-width: 767.98px) {
    .navbar-nav {
        flex-direction: row !important;
    }
    
    .navbar-nav .nav-item {
        margin: 0.25rem 0 !important;
    }
}

/* Fix dropdown responsiveness */
@media (max-width: 767.98px) {
    .dropdown-menu {
        position: fixed !important;
        top: 3.75rem !important;
        left: auto !important;
        right: 0 !important;
        width: auto !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }
}

/* Ensure dropdowns work properly on all screen sizes */
@media (min-width: 768px) {
    /* Override any conflicting dropdown positioning */
    body[data-role="Client"] .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: auto !important;
        right: 0 !important;
        width: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        z-index: 1050 !important;
    }
    
    /* Ensure dropdown toggles work */
    body[data-role="Client"] .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
    body[data-role="Client"] .dropdown-toggle[aria-expanded="true"] ~ .dropdown-menu {
        display: block !important;
    }
    
    /* Fix any Bootstrap dropdown conflicts */
    body[data-role="Client"] .dropdown-menu.show {
        display: block !important;
    }
}

/* Fix sidebar responsiveness */
@media (max-width: 767.98px) {
    .sidebar-container {
        position: fixed !important;
        left: -100% !important;
        top: 0 !important;
        height: 100vh !important;
        z-index: 1050 !important;
        transition: left 0.3s ease !important;
        background: #fff !important;
        box-shadow: 0 0 0.625rem rgba(0,0,0,0.1) !important;
    }
    
    .sidebar-container.show {
        left: 0 !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        padding-left: 0.9375rem !important;
        width: 100% !important;
    }
}

/* Fix mobile overlay */
.mobile-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 1040 !important;
    display: none !important;
}

.mobile-overlay.show {
    display: block !important;
}

/* Fix utility classes */
.d-none-mobile {
    display: none !important;
}

.d-block-mobile {
    display: block !important;
}

@media (min-width: 768px) {
    .d-none-mobile {
        display: block !important;
    }
    
    .d-block-mobile {
        display: none !important;
    }
}

/* Additional utility classes for better control */
.d-flex-mobile {
    display: flex !important;
}

.d-none-desktop {
    display: none !important;
}

@media (min-width: 768px) {
    .d-flex-mobile {
        display: none !important;
    }
    
    .d-none-desktop {
        display: block !important;
    }
}

/* Fix text responsiveness */
.text-responsive-sm {
    font-size: 0.875rem !important;
}

.text-responsive-lg {
    font-size: 1.25rem !important;
}

@media (min-width: 768px) {
    .text-responsive-sm {
        font-size: 1rem !important;
    }
    
    .text-responsive-lg {
        font-size: 1.5rem !important;
    }
}

/* Fix spacing responsiveness */
.p-responsive {
    padding: 0.375rem !important; /* Minimal padding on mobile (6px) */
}

.m-responsive {
    margin: 0.375rem !important;
}

@media (min-width: 576px) {
    .p-responsive {
        padding: 0.5rem !important; /* Larger phones (8px) */
    }
    
    .m-responsive {
        margin: 0.5rem !important;
    }
}

@media (min-width: 768px) {
    .p-responsive {
        padding: 0.75rem !important; /* Tablet (12px) */
    }
    
    .m-responsive {
        margin: 0.75rem !important;
    }
}

@media (min-width: 992px) {
    .p-responsive {
        padding: 1rem !important; /* Desktop (16px) */
    }
    
    .m-responsive {
        margin: 1rem !important;
    }
}

/* Fix client mobile menu */
.client-mobile-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 1060 !important;
    display: none !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    visibility: hidden !important;
}

.client-mobile-menu-overlay.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.client-mobile-menu-content {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 80% !important;
    max-width: 20rem !important;
    height: 100% !important;
    background: #fff !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    overflow-y: auto !important;
    z-index: 1071 !important;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3) !important;
}

.client-mobile-menu-overlay.show .client-mobile-menu-content {
    transform: translateX(0) !important;
}

/* Ensure mobile menu links are properly styled */
.client-mobile-menu-nav .mobile-menu-link {
    display: flex !important;
    align-items: center !important;
    padding: 1rem !important;
    color: #495057 !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease !important;
    border-bottom: 1px solid #f8f9fa !important;
}

.client-mobile-menu-nav .mobile-menu-link:hover {
    background-color: #f8f9fa !important;
    color: var(--bs-primary) !important;
}

.client-mobile-menu-nav .mobile-menu-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-right: 0.75rem !important;
    color: var(--bs-primary) !important;
}

.client-mobile-menu-nav .mobile-menu-link span {
    font-size: 1rem !important;
    font-weight: 500 !important;
}

/* Hide mobile menu on larger screens */
@media (min-width: 768px) {
    .client-mobile-menu-overlay,
    .client-mobile-menu-content,
    .mobile-menu-link,
    .mobile-menu-nav,
    .client-mobile-menu-nav,
    body[data-role="Client"] .mobile-hamburger-menu,
    body[data-role="Consultant"] .mobile-hamburger-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Additional consultant hamburger hiding */
    body[data-role="Consultant"] .mobile-hamburger-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Fix language switcher mobile */
@media (max-width: 767.98px) {
    body[data-role="Client"]:not(.authenticated) .language-switcher {
        display: none !important;
    }
    
    .language-switcher .dropdown-menu {
        
        left: auto !important;
        right: auto !important;
        width: auto !important;
        min-width: 10rem !important;
        margin-top: 0.25rem !important;
        z-index: 1050 !important;
    }
}

/* Fix authentication buttons mobile */
@media (max-width: 767.98px) {
    body[data-role="Client"] .auth-btn {
        font-size: 0.875rem !important;
        padding: 0.375rem 0.75rem !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        text-decoration: none !important;
    }
    
    body[data-role="Client"] .signin-btn {
        padding: 0.375rem 0.625rem !important;
    }
    
    body[data-role="Client"] .join-btn {
        padding: 0.375rem 0.75rem !important;
    }
}

/* Fix very small screens */
@media (max-width: 360px) {
    body[data-role="Client"]:not(.authenticated) .gradient-text {
        display: none !important;
    }
    
    body[data-role="Client"]:not(.authenticated) .auth-btn {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.375rem !important;
    }
    
    body[data-role="Client"]:not(.authenticated) .logo-image {
        height: 1.5rem !important;
    }
}

/* Fix profile and notification sizing mobile */
@media (max-width: 767.98px) {
    body[data-role="Client"] .w-60px.h-60px {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    
    body[data-role="Client"] .fa.fa-bell {
        font-size: 1.25rem !important;
    }
    
    body[data-role="Client"] .mobile-hamburger-menu {
        font-size: 1.5rem !important;
        padding: 0.375rem !important;
        margin-right: 0.5rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Ensure navbar elements don't wrap */
    body[data-role="Client"] .navbar-content {
        overflow: hidden !important;
    }
    
    /* Compact sizing for mobile navbar elements */
    body[data-role="Client"] .language-switcher .btn-link {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
        min-height: 2rem !important;
    }
    
    body[data-role="Client"] .auth-btn {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.875rem !important;
        min-height: 2rem !important;
    }
    
    /* Ensure notification icon doesn't take too much space */
    body[data-role="Client"] .fa.fa-bell {
        padding: 0.25rem !important;
        margin: 0 0.25rem !important;
    }

    /* Improve spacing and alignment for login / sign up buttons on mobile */
    body[data-role="Client"]:not(.authenticated) .navbar-nav.align-items-center {
        gap: 0.5rem !important;
    }

    body[data-role="Client"]:not(.authenticated) .navbar-nav.align-items-center .nav-item {
        display: flex !important;
        align-items: center !important;
    }
}

/* Fix authenticated user mobile layout */
@media (max-width: 767.98px) {
    body[data-role="Client"].authenticated .navbar-content {
        gap: 0.375rem !important;
        justify-content: space-between !important;
    }
    
    body[data-role="Client"].authenticated .navbar-nav.align-items-center {
        gap: 0.375rem !important;
    }
    
    body[data-role="Client"].authenticated .w-60px.h-60px {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }
    
    body[data-role="Client"].authenticated .fa.fa-bell {
        font-size: 1.125rem !important;
    }
    
    body[data-role="Client"].authenticated .sidebar-toggler {
        font-size: 1.125rem !important;
        padding: 0.25rem !important;
    }
    
    body[data-role="Client"].authenticated .navbar-content > div:first-child {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    body[data-role="Client"].authenticated .navbar-content > ul:last-child {
        gap: 0.25rem !important;
        flex-shrink: 0 !important;
    }
    
    body[data-role="Client"].authenticated .language-switcher .btn-link {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
        min-height: 2rem !important;
    }
}

/* Fix main content margin for fixed navbar */
@media (max-width: 767.98px) {
    body[data-role="Client"] .main-content {
        margin-top: 4rem !important;
    }
    
    /* Ensure navbar is fixed and doesn't wrap */
    body[data-role="Client"] .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1030 !important;
        background: #fff !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    /* Consultant navbar mobile positioning */
    body[data-role="Consultant"] .main-content {
        margin-top: 4rem !important;
    }
    
    body[data-role="Consultant"] .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1030 !important;
        background: #fff !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
}

/* Remove duplicate rule - handled above */

/* Additional mobile navbar fixes */
@media (max-width: 767.98px) {
    /* Ensure navbar content fits in one line */
    body[data-role="Client"] .navbar-content {
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    
    /* Force single line layout */
    body[data-role="Client"] .navbar-content > * {
        flex-shrink: 0 !important;
    }
    
    /* Ensure navbar elements don't exceed container width */
    body[data-role="Client"] .navbar-content > div:first-child {
        max-width: 40% !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
    }
    
    body[data-role="Client"] .navbar-content > div:last-child,
    body[data-role="Client"] .navbar-content > ul:last-child {
        max-width: 60% !important;
        flex-shrink: 0 !important;
        justify-content: flex-end !important;
        overflow: hidden !important;
    }
    
    /* Prevent any element from causing wrapping */
    body[data-role="Client"] .navbar-content * {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }
    
    /* Force all navbar content to stay in one line */
    body[data-role="Client"] .navbar-content {
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        flex-basis: auto !important;
    }
    
    /* Ensure specific elements don't cause wrapping */
    body[data-role="Client"] .navbar-content .language-switcher,
    body[data-role="Client"] .navbar-content .auth-btn,
    body[data-role="Client"] .navbar-content .w-60px.h-60px,
    body[data-role="Client"] .navbar-content .fa.fa-bell,
    body[data-role="Client"] .navbar-content .mobile-hamburger-menu {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: ellipsis !important;
    }
    
    /* Consultant navbar element sizing for mobile */
    body[data-role="Consultant"] .navbar-content .w-60px.h-60px {
        width: 2.5rem !important;
        height: 2.5rem !important;
        flex-shrink: 0 !important;
    }
    
    body[data-role="Consultant"] .navbar-content .fa.fa-bell {
        font-size: 1.25rem !important;
        padding: 0.25rem !important;
        margin: 0 0.25rem !important;
        flex-shrink: 0 !important;
    }
    
    body[data-role="Consultant"] .navbar-content .mobile-hamburger-menu {
        font-size: 1.5rem !important;
        padding: 0.375rem !important;
        margin-right: 0.5rem !important;
        flex-shrink: 0 !important;
    }
}

/* ===================================
   CONSULTANT NAVBAR RESPONSIVE IMPLEMENTATION
   =================================== */

/* Consultant navbar content fixes - similar to client */
@media (max-width: 991px) {
    body[data-role="Consultant"] .navbar .navbar-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex-wrap: nowrap !important;
    }
    
    /* Hide the extra hamburger menu that appears on the right side */
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .nav-link,
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child button,
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .btn {
        display: none !important;
    }
    
    /* Hide any mobile menu toggle buttons that might appear on the right */
    body[data-role="Consultant"] .navbar-content .mobile-menu-toggle,
    body[data-role="Consultant"] .navbar-content .navbar-toggler,
    body[data-role="Consultant"] .navbar-content .navbar-collapse-toggle {
        display: none !important;
    }
    
    /* Hide any sidebar toggler buttons that might appear */
    body[data-role="Consultant"] .navbar-content .sidebar-toggler,
    body[data-role="Consultant"] .navbar-content .navbar-nav .sidebar-toggler {
/*        display: none !important;*/
    }
    
    /* Hide any menu buttons that might appear on the right side */
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child a[href="#"],
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .nav-link[href="#"] {
        display: none !important;
    }
}

/* Consultant navbar large screen fixes (992px+) */
@media (min-width: 992px) {
    /* Ensure hamburger menu is completely hidden on large screens */
    body[data-role="Consultant"] .mobile-hamburger-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* Ensure main navigation is visible on large screens */
    body[data-role="Consultant"] .navbar-nav.flex-row:not(.align-items-center) {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 2rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Consultant navbar mobile layout fixes */
@media (max-width: 767.98px) {
    /* Debug indicator for mobile mode */
    body[data-role="Consultant"] .navbar-content::before {
        content: "MOBILE MODE ACTIVE" !important;
        position: absolute !important;
        top: -20px !important;
        left: 0 !important;
        background: red !important;
        color: white !important;
        font-size: 10px !important;
        padding: 2px 4px !important;
        z-index: 9999 !important;
    }
    
    body[data-role="Consultant"] .navbar-content {
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding: 0 0.5rem !important;
        min-height: 4rem !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: row !important;
    }
    
    /* Hide main navigation menu on mobile */
    body[data-role="Consultant"] .navbar-nav.flex-row:not(.align-items-center),
    body[data-role="Consultant"] .navbar-content .d-flex .navbar-nav.flex-row,
    body[data-role="Consultant"] .navbar-content > div:first-child .navbar-nav.flex-row {
        display: none !important;
    }
    
    /* Ensure mobile hamburger menu is visible */
    body[data-role="Consultant"] .mobile-hamburger-menu {
        display: block !important;
        margin-right: 0.5rem !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide sidebar toggler on mobile */
    body[data-role="Consultant"] .sidebar-toggler:not(.mobile-hamburger-menu) {
        display: none !important;
    }
    
    /* Ensure left/right sections stay compact */
    body[data-role="Consultant"] .navbar-content > div:first-child {
        max-width: 45% !important;
        overflow: hidden !important;
    }
    
    body[data-role="Consultant"] .navbar-content > ul:last-child,
    body[data-role="Consultant"] .navbar-content > div:last-child {
        max-width: 55% !important;
        justify-content: flex-end !important;
        overflow: visible !important;
        gap: 0.5rem !important;
    }
    
    /* Prevent any element from causing wrapping */
    body[data-role="Consultant"] .navbar-content * {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
/*        overflow: hidden !important;*/
        text-overflow: ellipsis !important;
    }
    
    /* Hide extra hamburger menu on right - but preserve profile dropdown and notifications */
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .nav-link:not(.dropdown-toggle),
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child button:not(.dropdown-toggle),
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .btn:not(.dropdown-toggle) {
        display: none !important;
    }
    
    /* Ensure profile dropdown and notifications are visible - more specific selectors */
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .dropdown-toggle,
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .notification-dropdown,
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .fa.fa-bell,
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .w-60px.h-60px,
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .dropdown,
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .profile-dropdown {
        display: block !important;
    }
    
    /* Force show all profile-related elements */
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child * {
        display: block !important;
    }
    
    /* Override any hiding rules for profile elements */
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .dropdown-toggle,
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .fa.fa-bell,
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .w-60px.h-60px {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Hide menu icons */
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child i[data-feather="menu"],
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .fa.fa-bars,
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .bi.bi-list {
        display: none !important;
    }
    
    /* Hide menu-related nav items */
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:has(a[href="#"]),
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:has(.sidebar-toggler),
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:has(i[data-feather="menu"]) {
/*        display: none !important;*/
    }
    
    /* Ensure profile dropdown nav item is visible */
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:has(.dropdown-toggle) {
        display: block !important;
    }
    
    /* Hide any remaining menu buttons while preserving profile dropdown */
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child a:not(.dropdown-toggle),
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .nav-link:not(.dropdown-toggle) {
        display: none !important;
    }
    
    /* Force show profile elements on mobile - override any conflicting rules */
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .dropdown,
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .dropdown-toggle,
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .fa.fa-bell,
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .w-60px.h-60px,
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .profile-image,
    body[data-role="Consultant"] .navbar-content .navbar-nav .nav-item:last-child .notification-icon {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
    }
}
@media (min-width: 992px) {
    body[data-role="Consultant"] .d-none-mobile {
        display: flex !important;
        margin-left: 4rem !important;
    }

}
    /* Consultant navbar desktop layout fixes (768px+) */
    @media (min-width: 768px) {
        body[data-role="Consultant"] .navbar-nav.flex-row:not(.align-items-center) {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            gap: 1.5rem !important;
            margin: 0 !important;
            padding: 0 !important;
        }

            body[data-role="Consultant"] .navbar-nav.flex-row:not(.align-items-center) .nav-link {
                color: black !important;
                text-decoration: none !important;
                font-weight: 500 !important;
                transition: color 0.3s ease !important;
                padding: 0.5rem 0.75rem !important;
                border-radius: 0.375rem !important;
            }

                body[data-role="Consultant"] .navbar-nav.flex-row:not(.align-items-center) .nav-link:hover {
                    color: #14899a !important;
                    background-color: rgba(20, 137, 154, 0.1) !important;
                }

        /* Hide mobile hamburger menu on desktop */
        body[data-role="Consultant"] .mobile-hamburger-menu {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
        }

       
    }
@media (min-width: 768px) and (max-width: 992px) {
    body[data-role="Consultant"] .d-none-mobile {
        display: flex !important;
        margin-left: auto !important;
    }
}

    /* Consultant dropdown functionality fixes for medium screens (768px - 996px) */
    @media (min-width: 768px) and (max-width: 992px) {
        body[data-role="Consultant"] .navbar {
            position: static !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            z-index: 1030 !important;
            background: #fff !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
            border-bottom: 1px solid #e9ecef !important;
            width: 100% !important;
            height: auto !important;
            min-height: 4rem !important;
            display: block !important;
            --bs-navbar-color: black;
        }

        body[data-role="Consultant"] .navbar-content {
            min-height: 4rem !important;
            padding: 0.5rem 1rem !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
        }

        body[data-role="Consultant"] .main-content {
            margin-top: 0 !important;
        }

        /* Ensure dropdowns are properly positioned */
        body[data-role="Consultant"] .dropdown-menu {
            position: absolute !important;
            top: 100% !important;
            left: auto !important;
            right: 0 !important;
            z-index: 1050 !important;
            background: #fff !important;
            border: 1px solid #e9ecef !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
            border-radius: 0.375rem !important;
            min-width: 200px !important;
        }

            body[data-role="Consultant"] .dropdown-menu .dropdown-item {
                padding: 0.5rem 1rem !important;
                color: #333 !important;
                text-decoration: none !important;
                transition: background-color 0.2s ease !important;
            }

                body[data-role="Consultant"] .dropdown-menu .dropdown-item:hover {
                    background-color: #f8f9fa !important;
                    color: #14899a !important;
                }
    }

    /* ===================================
   MOBILE MENU OVERLAY STYLES
   =================================== */

    /* Mobile menu overlay for both Client and Consultant */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        z-index: 9999;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

        .mobile-menu-overlay.show {
            display: block;
            opacity: 1;
        }

    .mobile-menu-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #fff;
        display: flex;
        flex-direction: column;
        animation: slideInFromLeft 0.3s ease;
    }

    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        border-bottom: 1px solid #e9ecef;
        background: #f8f9fa;
    }

        .mobile-menu-header h5 {
            margin: 0;
            color: #333;
            font-weight: 600;
        }

    .mobile-menu-close {
        background: none;
        border: none;
        font-size: 1.5rem;
        color: #666;
        cursor: pointer;
        padding: 0.25rem;
        border-radius: 0.25rem;
        transition: all 0.2s ease;
    }

        .mobile-menu-close:hover {
            background: #e9ecef;
            color: #333;
        }

    .mobile-menu-nav {
        flex: 1;
        padding: 1rem;
        overflow-y: auto;
    }

    .mobile-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .mobile-menu-list li {
            margin-bottom: 0.5rem;
        }

    .mobile-menu-link {
        display: flex;
        align-items: center;
        padding: 1rem;
        color: #333;
        text-decoration: none;
        border-radius: 0.5rem;
        transition: all 0.2s ease;
        background: #f8f9fa;
    }

        .mobile-menu-link:hover {
            background: #e9ecef;
            color: #14899a;
            text-decoration: none;
        }

        .mobile-menu-link i {
            margin-right: 1rem;
            width: 20px;
            text-align: center;
        }

        .mobile-menu-link span {
            font-weight: 500;
        }

    /* Animation for mobile menu */
    @keyframes slideInFromLeft {
        from {
            transform: translateX(-100%);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* Responsive adjustments for mobile menu */
    @media (max-width: 767.98px) {
        .mobile-menu-content {
            width: 100%;
            max-width: 100%;
        }

        .mobile-menu-header {
            padding: 0.75rem;
        }

        .mobile-menu-nav {
            padding: 0.75rem;
        }

        .mobile-menu-link {
            padding: 0.75rem;
            font-size: 0.95rem;
        }
    }

    /* ===================================
   CONSULTANT MOBILE MENU SPECIFIC STYLES
   =================================== */

    /* Consultant mobile hamburger menu styling */
    body[data-role="Consultant"] .mobile-hamburger-menu {
        background: none !important;
        border: none !important;
        color: var(--bs-primary) !important;
        padding: 0.5rem !important;
        border-radius: 0.375rem !important;
        transition: all 0.2s ease !important;
        font-size: 1.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 2.5rem !important;
        min-height: 2.5rem !important;
    }

        body[data-role="Consultant"] .mobile-hamburger-menu:hover {
            background-color: rgba(0, 0, 0, 0.05) !important;
            color: var(--bs-primary) !important;
        }

        body[data-role="Consultant"] .mobile-hamburger-menu:focus {
            outline: none !important;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
        }

    /* Consultant mobile menu overlay specific styling */
    body[data-role="Consultant"] .mobile-menu-overlay {
        z-index: 1070 !important;
    }

    body[data-role="Consultant"] .mobile-menu-content {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
        border-right: 3px solid var(--bs-primary) !important;
    }

    body[data-role="Consultant"] .mobile-menu-header {
        background: linear-gradient(135deg, var(--bs-primary) 0%, #14899a 100%) !important;
        color: white !important;
        border-bottom: 2px solid rgba(255, 255, 255, 0.2) !important;
    }

        body[data-role="Consultant"] .mobile-menu-header h5 {
            color: white !important;
            font-weight: 600 !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
        }

    body[data-role="Consultant"] .mobile-menu-close {
        color: white !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 50% !important;
        width: 2rem !important;
        height: 2rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
    }

        body[data-role="Consultant"] .mobile-menu-close:hover {
            background: rgba(255, 255, 255, 0.3) !important;
            transform: scale(1.1) !important;
        }

    /* Consultant mobile menu navigation styling - matching client-side exactly */
    body[data-role="Consultant"] .mobile-menu-nav {
        padding: 1rem 0 !important;
    }

        body[data-role="Consultant"] .mobile-menu-nav ul {
            margin: 0 !important;
            padding: 0 !important;
        }

        body[data-role="Consultant"] .mobile-menu-nav li {
            border-bottom: 1px solid #f8f9fa !important;
        }

    body[data-role="Consultant"] .mobile-menu-link {
        display: flex !important;
        align-items: center !important;
        padding: 1rem !important;
        color: #495057 !important;
        text-decoration: none !important;
        transition: background-color 0.2s ease !important;
        background: transparent !important;
        border: none !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

        body[data-role="Consultant"] .mobile-menu-link:hover {
            background-color: #f8f9fa !important;
            color: var(--bs-primary) !important;
            transform: none !important;
            box-shadow: none !important;
        }

        body[data-role="Consultant"] .mobile-menu-link i,
        body[data-role="Consultant"] .mobile-menu-link .mobile-menu-icon {
            width: 1.25rem !important;
            height: 1.25rem !important;
            margin-right: 0.75rem !important;
            color: var(--bs-primary) !important;
            transition: color 0.2s ease !important;
        }

        body[data-role="Consultant"] .mobile-menu-link:hover i {
            color: var(--bs-primary) !important;
        }

        body[data-role="Consultant"] .mobile-menu-link span {
            font-size: 1rem !important;
            font-weight: 500 !important;
        }

        body[data-role="Consultant"] .mobile-menu-link:active {
            background-color: #e9ecef !important;
            color: var(--bs-primary) !important;
        }

    /* Ensure consultant mobile menu is properly positioned */
    @media (max-width: 767.98px) {
        body[data-role="Consultant"] .mobile-menu-overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            z-index: 1070 !important;
        }

        body[data-role="Consultant"] .mobile-menu-content {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 85% !important;
            max-width: 22rem !important;
            height: 100% !important;
            z-index: 1071 !important;
        }
    }

    /* General mobile menu icon styling for both Client and Consultant */
    .mobile-menu-icon {
        width: 1.25rem !important;
        height: 1.25rem !important;
        margin-right: 0.75rem !important;
        color: var(--bs-primary) !important;
    }

    /* ===================================
   COMPANY ADMIN RESPONSIVENESS
   =================================== */

    /* Company Admin responsive behavior - preserving existing functionality */
    @media (max-width: 991px) {
        /* Tablet behavior - hide sidebar, show mobile menu */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .sidebar-container {
            position: fixed !important;
            top: 0 !important;
            left: -100% !important;
            height: 100vh !important;
            z-index: 1060 !important;
            transition: left 0.3s ease !important;
            background: white !important;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
        }

            body:not([data-role="Client"]):not([data-role="Consultant"]) .sidebar-container.show {
                left: 0 !important;
            }

        /* Main content takes full width on tablet */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .main-content {
            margin-left: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            flex: 0 0 100% !important;
        }

        /* Ensure mobile menu toggle is visible on tablet */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle {
            display: block !important;
        }

        /* Hide desktop menu toggle on tablet */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .desktop-menu-toggle {
            display: none !important;
        }

        /* Fixed navbar on tablet for better UX */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            z-index: 1030 !important;
            background: #fff !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        }
    }

    @media (max-width: 767.98px) {
        /* Mobile behavior - hide sidebar, show mobile menu */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .sidebar-container {
            position: fixed !important;
            top: 0 !important;
            left: -100% !important;
            height: 100vh !important;
            z-index: 1060 !important;
            transition: left 0.3s ease !important;
            background: white !important;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
        }

            body:not([data-role="Client"]):not([data-role="Consultant"]) .sidebar-container.show {
                left: 0 !important;
            }

        /* Main content takes full width on mobile */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .main-content {
            margin-left: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            flex: 0 0 100% !important;
        }

        /* Ensure mobile menu toggle is visible */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle {
            display: block !important;
        }

        /* Hide desktop menu toggle on mobile */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .desktop-menu-toggle {
            display: none !important;
        }

        /* Fixed navbar on mobile for better UX */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            z-index: 1030 !important;
            background: #fff !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        }

        /* Adjust main content margin for fixed navbar */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .main-content {
            margin-top: 4rem !important;
        }
    }

    @media (min-width: 768px) and (max-width: 991px) {
        /* Tablet behavior - use mobile menu overlay */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle {
            display: block !important;
        }

        body:not([data-role="Client"]):not([data-role="Consultant"]) .desktop-menu-toggle {
            display: none !important;
        }

        /* Keep sidebar hidden on tablet */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .sidebar-container {
            position: fixed !important;
            left: -100% !important;
            height: 100vh !important;
            transition: left 0.3s ease !important;
        }

        /* Ensure logo is visible on tablet */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .sidebar-header .logo,
        body:not([data-role="Client"]):not([data-role="Consultant"]) .sidebar-header img,
        body:not([data-role="Client"]):not([data-role="Consultant"]) .sidebar-header .brand-text {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
    }

    /* ===================================
   COMPANY ADMIN LOGO VISIBILITY
   =================================== */

    /* Company Admin logo in top navbar - hidden on desktop, visible on tablet/mobile */
    .company-admin-logo {
        display: none !important;
    }

        .company-admin-logo .top-navbar-logo {
            height: 2.5rem !important;
            width: auto !important;
            max-width: 150px !important;
            object-fit: contain !important;
        }

    /* Show Company Admin logo on tablet and mobile */
    @media (max-width: 991px) {
        /* Ensure top navbar takes full width when sidebar is hidden */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            max-width: 100vw !important;
            z-index: 1030 !important;
            background: #fff !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        }

        /* Ensure navbar content takes full width and aligns properly */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-content {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 100% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding: 0 1rem !important;
            gap: 0.5rem !important;
            flex-wrap: nowrap !important;
        }

        /* Logo positioning */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .company-admin-logo {
            display: flex !important;
            align-items: center !important;
            margin-right: 1rem !important;
            flex-shrink: 0 !important;
        }

        /* Mobile menu toggle positioning */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle {
            /*        margin-left: auto !important;*/
            flex-shrink: 0 !important;
            order: 2 !important;
        }

        /* Right side items (language, notifications, profile) */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-nav {
            display: flex !important;
            align-items: center !important;
            gap: 0.5rem !important;
            flex-shrink: 0 !important;
            margin-left: auto !important;
            order: 3 !important;
            flex-wrap: nowrap !important;
        }

            /* Ensure navbar items don't wrap */
            body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-nav .nav-item {
                flex-shrink: 0 !important;
                white-space: nowrap !important;
            }

        /* Hide sidebar completely on tablet and mobile */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .sidebar-container {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            position: absolute !important;
            left: -100% !important;
            width: 0 !important;
            height: 0 !important;
            overflow: hidden !important;
        }

        /* Ensure main content takes full width */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .main-content {
            margin-left: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            flex: 0 0 100% !important;
        }

        /* Ensure mobile menu overlay works properly on tablet and mobile */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-overlay {
            z-index: 1070 !important;
        }
    }

    /* Desktop behavior - NO custom CSS - let Bootstrap handle everything normally */

    /* ===================================
   ADDITIONAL COMPANY ADMIN RESPONSIVENESS
   =================================== */

    /* Ensure smooth transitions for Company Admin */
    @media (max-width: 991px) {
        /* Smooth transition for main content when sidebar is hidden */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .main-content {
            transition: margin-left 0.3s ease, width 0.3s ease !important;
        }

        /* Ensure top navbar logo is properly positioned */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-content {
            position: relative !important;
        }

        /* Ensure mobile menu toggle is properly positioned */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle {
            /*        margin-left: auto !important;*/
        }
    }

    /* Ensure Company Admin logo is properly sized on all devices */
    @media (max-width: 767.98px) {
        body:not([data-role="Client"]):not([data-role="Consultant"]) .company-admin-logo .top-navbar-logo {
            height: 2rem !important;
            max-width: 120px !important;
        }

        /* Mobile-specific navbar optimizations */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-content {
            padding: 0 0.75rem !important;
            gap: 0.375rem !important;
        }

        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-nav {
            gap: 0.375rem !important;
        }

        /* Ensure mobile menu toggle is properly sized */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle {
            padding: 0.375rem !important;
            font-size: 1.25rem !important;
        }
    }

    @media (min-width: 768px) and (max-width: 991px) {
        body:not([data-role="Client"]):not([data-role="Consultant"]) .company-admin-logo .top-navbar-logo {
            height: 2.25rem !important;
            max-width: 140px !important;
        }

        /* Tablet-specific navbar optimizations */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-content {
            padding: 0 1.25rem !important;
            gap: 0.75rem !important;
        }

        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-nav {
            gap: 0.75rem !important;
        }
    }



    /* ===================================
   COMPANY ADMIN NAVBAR ALIGNMENT FIXES
   =================================== */

    /* Ensure navbar items are properly aligned in one row */
    @media (max-width: 991px) {
        /* Force navbar to stay in one line */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-content > * {
            flex-shrink: 0 !important;
            white-space: nowrap !important;
        }

        /* Prevent any element from causing wrapping */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-content {
            min-height: 4rem !important;
            max-height: 4rem !important;
        }

        /* Ensure logo and mobile menu toggle don't interfere with each other */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .company-admin-logo {
            min-width: 0 !important;
            max-width: 150px !important;
        }

        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle {
            min-width: 2.5rem !important;
            max-width: 2.5rem !important;
        }

        /* Ensure right side items are properly spaced */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-nav .nav-item {
            min-width: auto !important;
            max-width: none !important;
        }

        /* Prevent dropdown menus from breaking layout */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-menu {
            position: absolute !important;
            top: 100% !important;
            left: auto !important;
            right: 0 !important;
            z-index: 1050 !important;
            min-width: 200px !important;
        }

        /* Ensure language switcher doesn't break layout */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .language-switcher {
            flex-shrink: 0 !important;
            white-space: nowrap !important;
        }

        /* Ensure notification bell doesn't break layout */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .fa.fa-bell {
            flex-shrink: 0 !important;
            white-space: nowrap !important;
        }

        /* Ensure profile image doesn't break layout */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .w-60px.h-60px {
            flex-shrink: 0 !important;
            white-space: nowrap !important;
        }
    }

    /* Additional mobile optimizations */
    @media (max-width: 767.98px) {
        /* Force very compact layout on mobile */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-content {
            padding: 0 0.5rem !important;
            gap: 0.25rem !important;
        }

        /* Reduce gaps between navbar items on mobile */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-nav {
            gap: 0.25rem !important;
        }

        /* Ensure mobile menu toggle is compact */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle {
            padding: 0.25rem !important;
            min-width: 2rem !important;
            max-width: 2rem !important;
        }

        /* Reduce logo size on very small screens */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .company-admin-logo .top-navbar-logo {
            height: 1.75rem !important;
            max-width: 100px !important;
        }
    }

    /* Ensure smooth transitions */
    @media (max-width: 991px) {
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar,
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-content,
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-nav {
            transition: all 0.3s ease !important;
        }
    }

    /* ===================================
   COMPANY ADMIN MOBILE MENU OVERLAY STYLES
   =================================== */

    /* Company Admin mobile menu overlay - matching client mobile menu styling */
    body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 1060 !important;
        display: none !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

        /* Only show overlay when .show class is applied */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-overlay.show {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
        }

        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-overlay.show {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

    body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-content {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 80% !important;
        max-width: 20rem !important;
        height: 100% !important;
        background: #fff !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        overflow-y: auto !important;
        z-index: 1071 !important;
        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3) !important;
    }

    body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-overlay.show .mobile-menu-content {
        transform: translateX(0) !important;
    }

    body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 1rem !important;
        border-bottom: 1px solid #e9ecef !important;
        background: var(--bs-primary) !important;
        color: #fff !important;
    }

        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-header h5 {
            margin: 0 !important;
            font-size: 1.125rem !important;
            font-weight: 600 !important;
        }

    body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-close {
        background: none !important;
        border: none !important;
        color: #fff !important;
        font-size: 1.5rem !important;
        cursor: pointer !important;
        padding: 0 !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        transition: all 0.2s ease !important;
    }

        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-close:hover {
            background: rgba(255, 255, 255, 0.2) !important;
            transform: scale(1.1) !important;
        }

    body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-nav {
        padding: 1rem 0 !important;
    }

        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-nav ul {
            margin: 0 !important;
            padding: 0 !important;
        }

        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-nav li {
            border-bottom: 1px solid #f8f9fa !important;
        }

    body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-link {
        display: flex !important;
        align-items: center !important;
        padding: 1rem !important;
        color: #495057 !important;
        text-decoration: none !important;
        transition: background-color 0.2s ease !important;
        background: transparent !important;
        border: none !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-link:hover {
            background-color: #f8f9fa !important;
            color: var(--bs-primary) !important;
            transform: none !important;
            box-shadow: none !important;
        }

        /* Company Admin mobile menu icon styling - comprehensive coverage */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-link i,
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-link .mobile-menu-icon,
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-link [data-feather],
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-link svg {
            width: 1.25rem !important;
            height: 1.25rem !important;
            margin-right: 0.75rem !important;
            color: var(--bs-primary) !important;
            transition: color 0.2s ease !important;
            display: inline-block !important;
            vertical-align: middle !important;
            flex-shrink: 0 !important;
        }

        /* Ensure Feather icons are properly styled */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-link [data-feather] {
            stroke: var(--bs-primary) !important;
            fill: none !important;
            stroke-width: 2 !important;
            stroke-linecap: round !important;
            stroke-linejoin: round !important;
        }

        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-link:hover i {
            color: var(--bs-primary) !important;
        }

        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-link span {
            font-size: 1rem !important;
            font-weight: 500 !important;
        }

        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-link:active {
            background-color: #e9ecef !important;
            color: var(--bs-primary) !important;
        }

    /* Hide Company Admin mobile menu only on desktop (992px+) */
    @media (min-width: 992px) {
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-overlay,
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-content,
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-link,
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-nav,
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
        }
        
        /* Reset sidebar to normal desktop behavior */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .sidebar-container {
            position: static !important;
            left: auto !important;
            top: auto !important;
            height: auto !important;
            z-index: auto !important;
            transition: none !important;
            background: inherit !important;
            box-shadow: none !important;
            width: auto !important;
            flex: 0 0 16.666667% !important;
            max-width: 16.666667% !important;
        }
        
        /* Ensure main content has proper spacing on desktop */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .main-content {
            margin-left: 0 !important;
/*            padding-left: 8rem !important;*/
           
            flex: 0 0 83.333333% !important;
            max-width: 83.333333% !important;
        }
    }

    /* Ensure Company Admin mobile menu is properly positioned on tablet and mobile */
    @media (max-width: 991px) {
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            z-index: 1060 !important;
            /* Ensure overlay is hidden by default */
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }

        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-content {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 85% !important;
            max-width: 22rem !important;
            height: 100% !important;
            z-index: 1071 !important;
            transform: translateX(-100%) !important;
            transition: transform 0.3s ease !important;
        }

        /* Ensure mobile menu toggle is visible and functional on tablet */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            position: relative !important;
            z-index: 1031 !important;
        }

        /* Only show overlay when .show class is applied */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-overlay.show {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }

            /* Show mobile menu content when overlay is active */
            body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-overlay.show .mobile-menu-content {
                transform: translateX(0) !important;
            }
    }

    /* Company Admin mobile menu backdrop and shadow enhancements */
    body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-overlay {
        backdrop-filter: blur(5px) !important;
    }

    body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-content {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;
    }

    /* Company Admin mobile menu toggle button styling */
    body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle {
        background: none !important;
        border: none !important;
        color: var(--bs-primary) !important;
        padding: 0.5rem !important;
        border-radius: 0.375rem !important;
        transition: all 0.2s ease !important;
        font-size: 1.25rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 2.5rem !important;
        min-height: 2.5rem !important;
        cursor: pointer !important;
        z-index: 1031 !important;
        position: relative !important;
    }

        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle:hover {
            background-color: rgba(0, 0, 0, 0.05) !important;
            color: var(--bs-primary) !important;
        }

        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle:focus {
            outline: none !important;
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
        }

        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle i,
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle [data-feather] {
            width: 1.25rem !important;
            height: 1.25rem !important;
            color: inherit !important;
        }

    /* ===================================
   COMPANY ADMIN TABLET MODE ENHANCEMENTS
   =================================== */

    /* Ensure mobile menu is fully functional on tablet mode */
    @media (min-width: 768px) and (max-width: 991px) {
        /* Force mobile menu toggle to be visible and functional */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            position: static !important;
            left: auto !important;
            right: auto !important;
        }

        /* Ensure mobile menu overlay is accessible but hidden by default */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-overlay {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: auto !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            z-index: 1060 !important;
        }

        /* Ensure mobile menu content is properly positioned but hidden by default */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-content {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 85% !important;
            max-width: 22rem !important;
            height: 100% !important;
            z-index: 1071 !important;
            transform: translateX(-100%) !important;
            transition: transform 0.3s ease !important;
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        /* Show mobile menu content when overlay is active */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-overlay.show .mobile-menu-content {
            transform: translateX(0) !important;
        }

        /* Ensure mobile menu items are visible and properly styled */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-nav {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            padding: 1rem 0 !important;
        }

            body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-nav ul {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-nav li {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                border-bottom: 1px solid #f8f9fa !important;
            }

        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-link {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            align-items: center !important;
            padding: 1rem !important;
            color: #495057 !important;
            text-decoration: none !important;
            transition: background-color 0.2s ease !important;
            background: transparent !important;
            border: none !important;
            margin-bottom: 0 !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            transform: none !important;
        }

            /* Ensure icons are properly displayed on tablet */
            body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-link i,
            body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-link .mobile-menu-icon,
            body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-link [data-feather] {
                display: inline-block !important;
                visibility: visible !important;
                opacity: 1 !important;
                width: 1.25rem !important;
                height: 1.25rem !important;
                margin-right: 0.75rem !important;
                color: var(--bs-primary) !important;
                transition: color 0.2s ease !important;
                vertical-align: middle !important;
            }

            /* Ensure text is visible on tablet */
            body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-link span {
                display: inline-block !important;
                visibility: visible !important;
                opacity: 1 !important;
                font-size: 1rem !important;
                font-weight: 500 !important;
                color: inherit !important;
            }
    }

    /* Additional tablet-specific mobile menu optimizations */
    @media (min-width: 768px) and (max-width: 991px) {
        /* Ensure mobile menu header is visible */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-header {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            justify-content: space-between !important;
            align-items: center !important;
            padding: 1rem !important;
            border-bottom: 1px solid #e9ecef !important;
            background: var(--bs-primary) !important;
            color: #fff !important;
        }

        /* Ensure close button is visible and functional */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-close {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            background: none !important;
            border: none !important;
            color: #fff !important;
            font-size: 1.5rem !important;
            cursor: pointer !important;
            padding: 0 !important;
            width: 1.5rem !important;
            height: 1.5rem !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 50% !important;
            transition: all 0.2s ease !important;
        }

        /* Ensure mobile menu toggle icon is visible */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle i,
        body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle [data-feather] {
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
            width: 1.25rem !important;
            height: 1.25rem !important;
            color: inherit !important;
        }
    }

    /* ===================================
   COMPANY ADMIN MOBILE MENU ICON DEBUGGING
   =================================== */

    /* Force icon styling with maximum specificity */
    body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-overlay .mobile-menu-content .mobile-menu-nav .mobile-menu-list .mobile-menu-link i,
    body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-overlay .mobile-menu-content .mobile-menu-nav .mobile-menu-list .mobile-menu-link [data-feather],
    body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-overlay .mobile-menu-content .mobile-menu-nav .mobile-menu-list .mobile-menu-link svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
        margin-right: 0.75rem !important;
        color: var(--bs-primary) !important;
        transition: color 0.2s ease !important;
        display: inline-block !important;
        vertical-align: middle !important;
        flex-shrink: 0 !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Force Feather icon specific styling */
    body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-overlay .mobile-menu-content .mobile-menu-nav .mobile-menu-list .mobile-menu-link [data-feather] {
        stroke: var(--bs-primary) !important;
        fill: none !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
        width: 1.25rem !important;
        height: 1.25rem !important;
    }

    /* Ensure mobile menu toggle icon is visible */
    body:not([data-role="Client"]):not([data-role="Consultant"]) .mobile-menu-toggle [data-feather] {
        width: 1.25rem !important;
        height: 1.25rem !important;
        color: var(--bs-primary) !important;
        stroke: var(--bs-primary) !important;
        fill: none !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    /* ===================================
   COMPANY ADMIN DROPDOWN FIXES
   =================================== */

    /* Ensure Company Admin dropdowns work properly on all screen sizes */
    @media (min-width: 768px) {
        /* Override any conflicting dropdown positioning */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-menu {
            position: absolute !important;
            top: 100% !important;
            left: auto !important;
            right: 0 !important;
            width: auto !important;
            max-height: none !important;
            overflow-y: visible !important;
            z-index: 1050 !important;
        }

        /* Ensure dropdown toggles work */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
        body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-toggle[aria-expanded="true"] ~ .dropdown-menu {
            display: block !important;
        }

        /* Fix any Bootstrap dropdown conflicts */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-menu.show {
            display: block !important;
        }
    }

    /* Fix dropdown functionality for medium screens (768px - 996px) */
    @media (min-width: 768px) and (max-width: 992px) {
        /* Keep navbar with white background but ensure proper positioning */
        /*    body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 1030 !important;
        background: #fff !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        border-bottom: 1px solid #e9ecef !important;
    }*/

        /* Ensure navbar has proper height and spacing */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-content {
            min-height: 4rem !important;
            padding: 0.5rem 1rem !important;
        }

            /* Ensure dropdowns work properly */
            body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-content .dropdown-menu,
            body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-content .notification-dropdown {
                position: absolute !important;
                top: 100% !important;
                left: auto !important;
                right: 0 !important;
                width: auto !important;
                max-height: none !important;
                overflow-y: visible !important;
                z-index: 1050 !important;
            }

        /* Fix language switcher dropdown */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .language-switcher .dropdown-menu {
            position: absolute !important;
            top: 100% !important;
            left: 0 !important;
            right: auto !important;
            width: auto !important;
            min-width: 10rem !important;
            margin-top: 0.25rem !important;
            z-index: 1050 !important;
        }

        /* Fix notification dropdown */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .notification-dropdown {
            position: absolute !important;
            top: 100% !important;
            left: auto !important;
            right: 0 !important;
            width: 20rem !important;
            max-height: 70vh !important;
            overflow-y: auto !important;
            z-index: 1050 !important;
        }

        /* Fix profile dropdown */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-content .navbar-nav .nav-item:last-child .dropdown-menu {
            position: absolute !important;
            top: 100% !important;
            left: auto !important;
            right: 0 !important;
            width: auto !important;
            min-width: 15rem !important;
            z-index: 1050 !important;
        }

        /* Ensure navbar doesn't overlap content */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar + * {
            margin-top: 0 !important;
        }
    }

    /* Fix Company Admin dropdowns on tablet and mobile */
    @media (max-width: 991px) {
        /* Ensure dropdowns are properly positioned and visible */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-menu {
            position: absolute !important;
            top: 100% !important;
            left: auto !important;
            right: 0 !important;
            z-index: 1080 !important;
            background: #fff !important;
            border: 1px solid #e9ecef !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
            border-radius: 0.375rem !important;
            margin-top: 0.25rem !important;
            display: none !important;
        }

            /* Show dropdowns when they have the show class */
            body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-menu.show {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }

        /* Ensure dropdown toggles work properly */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
        body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-toggle[aria-expanded="true"] ~ .dropdown-menu {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        /* Fix language switcher dropdown positioning */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .language-switcher .dropdown-menu {
            position: absolute !important;
            top: 100% !important;
            left: 0 !important;
            right: auto !important;
            width: auto !important;
            min-width: 10rem !important;
            margin-top: 0.25rem !important;
            z-index: 1080 !important;
        }

        /* Fix notification dropdown positioning */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .notification-dropdown {
            position: absolute !important;
            top: 100% !important;
            left: auto !important;
            right: 0 !important;
            width: 20rem !important;
            max-height: 70vh !important;
            overflow-y: auto !important;
            z-index: 1080 !important;
        }

        /* Fix profile dropdown positioning */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-nav .nav-item:last-child .dropdown-menu {
            position: absolute !important;
            top: 100% !important;
            left: auto !important;
            right: 0 !important;
            width: auto !important;
            min-width: 15rem !important;
            z-index: 1080 !important;
        }

        /* Ensure dropdown items are properly styled */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-menu .dropdown-item {
            padding: 0.5rem 1rem !important;
            color: #333 !important;
            text-decoration: none !important;
            transition: background-color 0.2s ease !important;
            display: block !important;
            width: 100% !important;
        }

            body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-menu .dropdown-item:hover {
                background-color: #f8f9fa !important;
                color: var(--bs-primary) !important;
            }

        /* Ensure dropdown headers are visible */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-menu .dropdown-header {
            padding: 0.5rem 1rem !important;
            color: #6c757d !important;
            font-weight: 600 !important;
            font-size: 0.875rem !important;
            display: block !important;
        }

        /* Ensure dropdown dividers are visible */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-menu .dropdown-divider {
            height: 1px !important;
            background-color: #e9ecef !important;
            margin: 0.5rem 0 !important;
            display: block !important;
        }
    }

    /* Additional dropdown fixes for very small screens */
    @media (max-width: 767.98px) {
        /* Ensure dropdowns are properly positioned on mobile */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-menu {
            position: fixed !important;
            top: 4rem !important;
            left: 0.5rem !important;
            right: 0.5rem !important;
            width: auto !important;
            max-height: 70vh !important;
            overflow-y: auto !important;
            z-index: 1080 !important;
            margin-top: 0 !important;
        }

        /* Fix language switcher dropdown on mobile */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .language-switcher .dropdown-menu {
            position: fixed !important;
            top: 4rem !important;
            left: auto !important;
            right: auto !important;
            width: auto !important;
            min-width: 10rem !important;
            z-index: 1080 !important;
        }

        /* Fix notification dropdown on mobile */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .notification-dropdown {
            position: fixed !important;
            top: 4rem !important;
            left: auto !important;
            right: 0 !important;
            width: auto !important;
            max-width: 420px !important;
            max-height: 70vh !important;
            z-index: 1080 !important;
        }

        /* Fix profile dropdown on mobile */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .navbar-nav .nav-item:last-child .dropdown-menu {
            position: fixed !important;
            top: 4rem !important;
            left: auto !important;
            right: 0.5rem !important;
            width: auto !important;
            min-width: 15rem !important;
            z-index: 1080 !important;
        }
    }

    /* Ensure dropdowns work properly on all screen sizes */
    @media (min-width: 768px) {
        /* Override any conflicting dropdown positioning */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-menu {
            position: absolute !important;
            top: 100% !important;
            left: auto !important;
            right: 0 !important;
            width: auto !important;
            max-height: none !important;
            overflow-y: visible !important;
            z-index: 1050 !important;
        }

        /* Ensure dropdown toggles work */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
        body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-toggle[aria-expanded="true"] ~ .dropdown-menu {
            display: block !important;
        }

        /* Fix any Bootstrap dropdown conflicts */
        body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-menu.show {
            display: block !important;
        }
    }

    /* Fix language switcher dropdown specifically */
    @media (min-width: 768px) and (max-width: 991.98px) {
        body:not([data-role="Client"]):not([data-role="Consultant"]) .language-switcher .dropdown-menu {
            min-width: 11rem !important;
            font-size: 0.9rem !important;
        }
    }

    /* Ensure proper dropdown styling */
    body:not([data-role="Client"]):not([data-role="Consultant"]) .language-switcher .dropdown-menu {
        min-width: 150px !important;
        border: 1px solid #dee2e6 !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
        margin-top: 5px !important;
    }


    /* Ensure dropdowns show when they have the show class */
    body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-menu.show {
        display: block !important;
    }

    /* Fix Bootstrap dropdown positioning */
    body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-menu[data-bs-popper] {
        /*top: 100% !important;*/
        /*    left: 0 !important;*/
        /*margin-top: var(--bs-dropdown-spacer) !important;*/
    }

    /* Ensure proper dropdown styling */
    body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-menu {
        border: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        border-radius: 8px !important;
    }

    /* Responsive dropdown font sizing */
    @media (min-width: 768px) and (max-width: 991.98px) {
        body:not([data-role="Client"]):not([data-role="Consultant"]) .dropdown-menu {
            font-size: 0.9rem !important;
        }
    }

    /* ===================================
   SUPERADMIN RESPONSIVENESS
   =================================== */

    /* Utility classes for responsive display */
    .d-none-desktop {
        display: none !important;
    }

    .d-block-mobile {
        display: none !important;
    }

    @media (max-width: 991px) {
        .d-none-desktop {
            display: block !important;
        }

        .d-block-mobile {
            display: block !important;
        }
    }

    @media (min-width: 992px) {
        .d-none-desktop {
            display: none !important;
        }

        .d-block-mobile {
            display: none !important;
        }
    }

    /* SuperAdmin logo in top navbar - hidden on desktop, visible on tablet/mobile */
    .super-admin-logo {
        display: none !important;
    }

        .super-admin-logo .top-navbar-logo {
            height: 2.5rem !important;
            width: auto !important;
            max-width: 150px !important;
            object-fit: contain !important;
        }

    /* Bootstrap grid overrides handled in main SuperAdmin rule below */

    /* Above 991px - ensure Bootstrap grid works normally for SuperAdmin */
    @media (min-width: 992px) {
        .super-admin-layout .sidebar-container.col-md-2 {
            /* Let Bootstrap handle the grid - no overrides */
            display: block !important;
/*            width: auto !important;*/
            flex: 0 0 16.666667% !important;
            max-width: 16.666667% !important;
            position: static !important;
            left: auto !important;
            height: auto !important;
            z-index: auto !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            transition: none !important;
            overflow: visible !important;
            background: inherit !important;
            box-shadow: inherit !important;
            padding: inherit !important;
            margin: inherit !important;
        }

        .super-admin-layout .main-content.col-md-10 {
            /* Let Bootstrap handle the grid - no overrides */
            display: block !important;
            width: auto !important;
            flex: 0 0 83.333333% !important;
            max-width: 83.333333% !important;
            margin-left: inherit !important;
            /*        padding-left: inherit !important;*/
            padding-right: inherit !important;
        }

        /* Ensure row and container work normally */
        .super-admin-layout .row {
            margin-left: inherit !important;
            margin-right: inherit !important;
        }

        .super-admin-layout .container-fluid {
            padding-left: inherit !important;
            padding-right: inherit !important;
        }
    }

    /* SuperAdmin responsive behavior - ONLY for tablet/mobile below 991px */
    @media (max-width: 991px) {
        /* Hide sidebar completely on tablet/mobile */
        .super-admin-layout .sidebar-container {
            display: none !important;
            width: 0 !important;
            flex: 0 0 0 !important;
            max-width: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        /* Main content takes full width on tablet/mobile */
        .super-admin-layout .main-content {
            width: 100% !important;
            flex: 0 0 100% !important;
            max-width: 100% !important;
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }

        /* Ensure mobile menu toggle is visible on tablet/mobile */
        .super-admin-layout .mobile-menu-toggle {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }

        /* Hide desktop menu toggle on tablet/mobile */
        .super-admin-layout .desktop-menu-toggle {
            display: none !important;
        }

        /* Fix top navbar for tablet/mobile */
        .super-admin-layout .navbar {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            z-index: 1030 !important;
            background: #fff !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        }

        /* Ensure navbar content takes full width */
        .super-admin-layout .navbar-content {
            width: 100% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding: 0 1rem !important;
        }

        /* Show logo on tablet/mobile */
        .super-admin-layout .super-admin-logo {
            display: flex !important;
            align-items: center !important;
            margin-right: 1rem !important;
        }
    }

    /* SuperAdmin mobile menu toggle button styling - matching sidebar */
    .super-admin-layout .mobile-menu-toggle {
        background: none !important;
        border: none !important;
        color: #7987a1 !important;
        padding: 0.5rem !important;
        border-radius: 0.375rem !important;
        transition: all 0.2s ease !important;
        font-size: 1.25rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 2.5rem !important;
        min-height: 2.5rem !important;
        cursor: pointer !important;
        z-index: 1031 !important;
        position: relative !important;
    }

        .super-admin-layout .mobile-menu-toggle:hover {
            background-color: rgba(0, 0, 0, 0.05) !important;
            color: #14899a !important;
        }

        .super-admin-layout .mobile-menu-toggle:focus {
            outline: none !important;
            box-shadow: none !important;
        }

        .super-admin-layout .mobile-menu-toggle i,
        .super-admin-layout .mobile-menu-toggle [data-feather] {
            width: 1.25rem !important;
            height: 1.25rem !important;
            color: inherit !important;
        }

    /* Ensure SuperAdmin mobile menu toggle is hidden on desktop */
    @media (min-width: 992px) {
        .super-admin-layout .mobile-menu-toggle {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }
    }

    /* Ensure SuperAdmin mobile menu toggle is visible on tablet and mobile */
    @media (max-width: 991px) {
        .super-admin-layout .mobile-menu-toggle {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            /* Ensure proper positioning */
            position: relative !important;
            z-index: 9999 !important;
        }
    }

    /* ===================================
   SUPERADMIN MOBILE MENU OVERLAY STYLES
   =================================== */

    /* SuperAdmin mobile menu overlay - matching Company Admin styling */
    .super-admin-mobile-menu-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9999 !important;
        display: none !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

        .super-admin-mobile-menu-overlay.show {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important;
        }

    .super-admin-mobile-menu-content {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 80% !important;
        max-width: 20rem !important;
        height: 100% !important;
        background: #fff !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        overflow-y: auto !important;
        z-index: 10000 !important;
        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3) !important;
    }

    .super-admin-mobile-menu-overlay.show .super-admin-mobile-menu-content {
        transform: translateX(0) !important;
    }

    .super-admin-mobile-menu-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 1rem !important;
        border-bottom: 1px solid #e9ecef !important;
        background: var(--bs-primary) !important;
        color: #fff !important;
    }

        .super-admin-mobile-menu-header h5 {
            margin: 0 !important;
            font-size: 1.125rem !important;
            font-weight: 600 !important;
        }

    .super-admin-mobile-menu-close {
        background: none !important;
        border: none !important;
        color: #fff !important;
        font-size: 1.5rem !important;
        cursor: pointer !important;
        padding: 0 !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        transition: all 0.2s ease !important;
    }

        .super-admin-mobile-menu-close:hover {
            background: rgba(255, 255, 255, 0.2) !important;
            transform: scale(1.1) !important;
        }

    .super-admin-mobile-menu-nav {
        padding: 1rem 0 !important;
    }

        .super-admin-mobile-menu-nav ul {
            margin: 0 !important;
            padding: 0 !important;
        }

        .super-admin-mobile-menu-nav li {
            border-bottom: 1px solid #f8f9fa !important;
            margin: 0 !important;
            padding: 0 !important;
        }

            .super-admin-mobile-menu-nav li:last-child {
                border-bottom: none !important;
            }

    /* SuperAdmin mobile menu link styling - matching Company Admin */
    .super-admin-mobile-menu-link {
        display: flex !important;
        align-items: center !important;
        padding: 1rem !important;
        color: #495057 !important;
        text-decoration: none !important;
        transition: background-color 0.2s ease !important;
        background: transparent !important;
        border: none !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        cursor: pointer !important;
        width: 100% !important;
        min-height: 44px !important;
    }

        .super-admin-mobile-menu-link:hover {
            background-color: #f8f9fa !important;
            color: var(--bs-primary) !important;
            transform: none !important;
            box-shadow: none !important;
        }

        /* SuperAdmin mobile menu icon styling - comprehensive coverage */
        .super-admin-mobile-menu-link i,
        .super-admin-mobile-menu-link .mobile-menu-icon,
        .super-admin-mobile-menu-link [data-feather],
        .super-admin-mobile-menu-link svg {
            width: 1.25rem !important;
            height: 1.25rem !important;
            margin-right: 0.75rem !important;
            color: var(--bs-primary) !important;
            transition: color 0.2s ease !important;
            display: inline-block !important;
            vertical-align: middle !important;
            flex-shrink: 0 !important;
        }

        /* Ensure Feather icons are properly styled - matching Company Admin */
        .super-admin-mobile-menu-link [data-feather] {
            stroke: var(--bs-primary) !important;
            fill: none !important;
            stroke-width: 2 !important;
            stroke-linecap: round !important;
            stroke-linejoin: round !important;
            width: 1.25rem !important;
            height: 1.25rem !important;
        }

        .super-admin-mobile-menu-link:hover i,
        .super-admin-mobile-menu-link:hover [data-feather] {
            color: var(--bs-primary) !important;
            stroke: var(--bs-primary) !important;
        }

        .super-admin-mobile-menu-link span {
            font-size: 1rem !important;
            font-weight: 500 !important;
        }

        .super-admin-mobile-menu-link:active {
            background-color: #e9ecef !important;
            color: var(--bs-primary) !important;
        }

    /* SuperAdmin mobile menu category styling */
    .super-admin-mobile-menu-category {
        background: #f8f9fa !important;
        border-bottom: 1px solid #e9ecef !important;
        padding: 0.75rem 1rem !important;
        margin: 0 !important;
    }

    .super-admin-mobile-menu-category-title {
        font-size: 11px !important;
        font-weight: 500 !important;
        color: #7987a1 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin: 0 !important;
        display: block !important;
    }

    /* Hide SuperAdmin mobile menu on desktop */
    @media (min-width: 992px) {
        .super-admin-mobile-menu-overlay,
        .super-admin-mobile-menu-content {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
        }
    }


    .super-admin-mobile-menu-overlay.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .super-admin-mobile-menu-content {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 80% !important;
        max-width: 20rem !important;
        height: 100% !important;
        background: #fff !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        overflow-y: auto !important;
        z-index: 10000 !important;
        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3) !important;
    }

    .super-admin-mobile-menu-overlay.show .super-admin-mobile-menu-content {
        transform: translateX(0) !important;
    }

    .super-admin-mobile-menu-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 1rem !important;
        border-bottom: 1px solid #e9ecef !important;
        background: var(--bs-primary) !important;
        color: #fff !important;
    }

        .super-admin-mobile-menu-header h5 {
            margin: 0 !important;
            font-size: 1.125rem !important;
            font-weight: 600 !important;
        }

    .super-admin-mobile-menu-close {
        background: none !important;
        border: none !important;
        color: #ffffff !important;
        font-size: 1.5rem !important;
        cursor: pointer !important;
        padding: 0 !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        transition: all 0.2s ease !important;
    }

        .super-admin-mobile-menu-close:hover {
            background: rgba(255, 255, 255, 0.2) !important;
            transform: scale(1.1) !important;
        }

    .super-admin-mobile-menu-nav {
        padding: 1rem 0 !important;
    }

        .super-admin-mobile-menu-nav ul {
            margin: 0 !important;
            padding: 0 !important;
        }

        .super-admin-mobile-menu-nav li {
            border-bottom: 1px solid #f8f9fa !important;
            margin: 0 !important;
            padding: 0 !important;
        }

            /* Ensure mobile menu items are properly styled */
            .super-admin-mobile-menu-nav li:last-child {
                border-bottom: none !important;
            }

    /* Mobile menu list styling */
    .mobile-menu-list {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

        .mobile-menu-list li {
            margin: 0 !important;
            padding: 0 !important;
        }

    /* Mobile menu category styling - matching sidebar */
    .mobile-menu-category {
        background: #f8f9fa !important;
        border-bottom: 1px solid #e9ecef !important;
        padding: 0.75rem 1rem !important;
        margin: 0 !important;
    }

    .mobile-menu-category-title {
        font-size: 11px !important;
        font-weight: 500 !important;
        color: #7987a1 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin: 0 !important;
        display: block !important;
    }

    .super-admin-mobile-menu-link {
        display: flex !important;
        align-items: center !important;
        padding: 1rem !important;
        color: var(--bs-sidebar-color) !important;
        text-decoration: none !important;
        transition: background-color 0.2s ease !important;
        background: transparent !important;
        border: none !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        cursor: pointer !important;
        width: 100% !important;
        min-height: 44px !important; /* Ensure touch-friendly size */
    }

        .super-admin-mobile-menu-link:hover {
            background-color: #f8f9fa !important;
            color: #14899a !important;
            transform: none !important;
            box-shadow: none !important;
        }

        /* SuperAdmin mobile menu icon styling - comprehensive coverage */
        .super-admin-mobile-menu-link i,
        .super-admin-mobile-menu-link .mobile-menu-icon,
        .super-admin-mobile-menu-link [data-feather],
        .super-admin-mobile-menu-link svg {
            width: 1.25rem !important;
            height: 1.25rem !important;
            margin-right: 0.75rem !important;
            color: #14899a !important;
            transition: color 0.2s ease !important;
            display: inline-block !important;
            vertical-align: middle !important;
            flex-shrink: 0 !important;
        }

        /* Ensure Feather icons are properly styled - matching sidebar */
        .super-admin-mobile-menu-link [data-feather] {
            stroke: #7987a1 !important;
            fill: none !important;
            stroke-width: 2 !important;
            stroke-linecap: round !important;
            stroke-linejoin: round !important;
        }

        .super-admin-mobile-menu-link:hover i {
            color: #14899a !important;
        }

        .super-admin-mobile-menu-link span {
            font-size: 1rem !important;
            font-weight: 500 !important;
            color: var(--bs-sidebar-color) !important;
            display: block !important;
            flex: 1 !important;
        }

        .super-admin-mobile-menu-link:active {
            background-color: #e9ecef !important;
            color: #14899a !important;
        }

    /* Hide SuperAdmin mobile menu on larger screens */
    @media (min-width: 992px) {
        .super-admin-mobile-menu-overlay,
        .super-admin-mobile-menu-content,
        .super-admin-mobile-menu-link,
        .super-admin-mobile-menu-nav {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }
    }

    /* Ensure SuperAdmin mobile menu is properly positioned on tablet and mobile */
    @media (max-width: 991px) {
        .super-admin-mobile-menu-overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            z-index: 1060 !important;
            /* Remove the display: none that was conflicting with .show class */
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }

        .super-admin-mobile-menu-content {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 85% !important;
            max-width: 22rem !important;
            height: 100% !important;
            background: #fff !important;
            transform: translateX(-100%) !important;
            transition: transform 0.3s ease !important;
            overflow-y: auto !important;
            z-index: 1071 !important;
            box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3) !important;
        }

        .super-admin-mobile-menu-overlay.show .super-admin-mobile-menu-content {
            transform: translateX(0) !important;
        }
    }

    /* SuperAdmin mobile menu backdrop and shadow enhancements */
    .super-admin-mobile-menu-overlay {
        backdrop-filter: blur(5px) !important;
    }

    .super-admin-mobile-menu-content {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;
    }

    /* SuperAdmin mobile menu toggle button styling - already defined above */

    /* SuperAdmin dropdown fixes - same as Company Admin */
    @media (min-width: 768px) {
        /* Override any conflicting dropdown positioning */
        .super-admin-layout .dropdown-menu {
            position: absolute !important;
            top: 100% !important;
            left: auto !important;
            right: 0 !important;
            width: auto !important;
            max-height: none !important;
            overflow-y: visible !important;
            z-index: 1050 !important;
        }

        /* Ensure dropdown toggles work */
        .super-admin-layout .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
        .super-admin-layout .dropdown-toggle[aria-expanded="true"] ~ .dropdown-menu {
            display: block !important;
        }

        /* Fix any Bootstrap dropdown conflicts */
        .super-admin-layout .dropdown-menu.show {
            display: block !important;
        }
    }

    /* Fix dropdown functionality for medium screens (768px - 996px) */
    @media (min-width: 768px) and (max-width: 995.98px) {
        /* Ensure dropdowns work properly */
        .super-admin-layout .navbar-content .dropdown-menu,
        .super-admin-layout .navbar-content .notification-dropdown {
            position: absolute !important;
            top: 100% !important;
            left: auto !important;
            right: 0 !important;
            width: auto !important;
            max-height: none !important;
            overflow-y: visible !important;
            z-index: 1050 !important;
        }

        /* Fix language switcher dropdown */
        .super-admin-layout .language-switcher .dropdown-menu {
            position: absolute !important;
            top: 100% !important;
            left: 0 !important;
            right: auto !important;
            width: auto !important;
            min-width: 10rem !important;
            margin-top: 0.25rem !important;
            z-index: 1050 !important;
        }

        /* Fix notification dropdown */
        .super-admin-layout .notification-dropdown {
            position: absolute !important;
            top: 100% !important;
            left: auto !important;
            right: 0 !important;
            width: 20rem !important;
            max-height: 70vh !important;
            overflow-y: auto !important;
            z-index: 1050 !important;
        }

        /* Fix profile dropdown */
        .super-admin-layout .navbar-content .navbar-nav .nav-item:last-child .dropdown-menu {
            position: absolute !important;
            top: 100% !important;
            left: auto !important;
            right: 0 !important;
            width: auto !important;
            min-width: 15rem !important;
            z-index: 1050 !important;
        }
    }

    /* Fix SuperAdmin dropdowns on tablet and mobile */
    @media (max-width: 991px) {
        /* Ensure dropdowns are properly positioned and visible */
        .super-admin-layout .dropdown-menu {
            position: absolute !important;
            top: 100% !important;
            left: auto !important;
            right: 0 !important;
            z-index: 1080 !important;
            background: #fff !important;
            border: 1px solid #e9ecef !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
            border-radius: 0.375rem !important;
            margin-top: 0.25rem !important;
            display: none !important;
        }

            /* Show dropdowns when they have the show class */
            .super-admin-layout .dropdown-menu.show {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
            }

        /* Ensure dropdown toggles work properly */
        .super-admin-layout .dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
        .super-admin-layout .dropdown-toggle[aria-expanded="true"] ~ .dropdown-menu {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        /* Fix language switcher dropdown positioning */
        .super-admin-layout .language-switcher .dropdown-menu {
            position: absolute !important;
            top: 100% !important;
            left: 0 !important;
            right: auto !important;
            width: auto !important;
            min-width: 10rem !important;
            margin-top: 0.25rem !important;
            z-index: 1080 !important;
        }

        /* Fix notification dropdown positioning */
        .super-admin-layout .notification-dropdown {
            position: absolute !important;
            top: 100% !important;
            left: auto !important;
            right: 0 !important;
            width: 20rem !important;
            max-height: 70vh !important;
            overflow-y: auto !important;
            z-index: 1080 !important;
        }

        /* Fix profile dropdown positioning */
        .super-admin-layout .navbar-nav .nav-item:last-child .dropdown-menu {
            position: absolute !important;
            top: 100% !important;
            left: auto !important;
            right: 0 !important;
            width: auto !important;
            min-width: 15rem !important;
            z-index: 1080 !important;
        }
    }

    /* Additional dropdown fixes for very small screens */
    @media (max-width: 767.98px) {
        /* Ensure dropdowns are properly positioned on mobile */
        .super-admin-layout .dropdown-menu {
            position: fixed !important;
            top: 4rem !important;
            left: auto !important;
            right: 0.5rem !important;
            width: auto !important;
            max-height: 70vh !important;
            overflow-y: auto !important;
            z-index: 1080 !important;
            margin-top: 0 !important;
        }

        /* Fix language switcher dropdown on mobile */
        .super-admin-layout .language-switcher .dropdown-menu {
            position: fixed !important;
            top: 4rem !important;
            left: 0.5rem !important;
            right: auto !important;
            width: auto !important;
            min-width: 10rem !important;
            z-index: 1080 !important;
        }

        /* Fix notification dropdown on mobile */
        .super-admin-layout .notification-dropdown {
            position: fixed !important;
            top: 4rem !important;
            left: auto !important;
            right: 0.5rem !important;
            width: auto !important;
            max-width: 420px !important;
            max-height: 70vh !important;
            z-index: 1080 !important;
        }

        /* Fix profile dropdown on mobile */
        .super-admin-layout .navbar-nav .nav-item:last-child .dropdown-menu {
            position: fixed !important;
            top: 4rem !important;
            left: auto !important;
            right: 0.5rem !important;
            width: auto !important;
            min-width: 15rem !important;
            z-index: 1080 !important;
        }
    }

    /* SuperAdmin mobile menu backdrop and shadow enhancements */
    .super-admin-mobile-menu-overlay {
        backdrop-filter: blur(5px) !important;
    }

    .super-admin-mobile-menu-content {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;
    }

    /* SuperAdmin mobile menu category headings */
    .super-admin-mobile-menu-category {
        padding: 0.75rem 1rem 0.5rem 1rem !important;
        border-bottom: none !important;
        background: #f8f9fa !important;
    }

    .super-admin-mobile-menu-category-title {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: #6c757d !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* Mobile menu category styling */
    .mobile-menu-category {
        padding: 0.75rem 1rem 0.5rem 1rem !important;
        border-bottom: none !important;
        background: #f8f9fa !important;
    }

    .mobile-menu-category-title {
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: #6c757d !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* Ensure SuperAdmin sidebar is completely hidden on tablet and mobile */
    @media (max-width: 991px) {
        .super-admin-layout .sidebar-container {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            position: absolute !important;
            left: -100% !important;
            width: 0 !important;
            height: 0 !important;
            overflow: hidden !important;
            z-index: -1 !important;
            pointer-events: none !important;
            background: transparent !important;
            box-shadow: none !important;
            border: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }

            /* Override Bootstrap grid classes */
            .super-admin-layout .sidebar-container.col-md-2,
            .super-admin-layout .sidebar-container.col-lg-2,
            .super-admin-layout .sidebar-container.col-xl-2 {
                display: none !important;
                width: 0 !important;
                flex: 0 0 0 !important;
                max-width: 0 !important;
                min-width: 0 !important;
            }

        /* Ensure main content takes full width */
        .super-admin-layout .main-content.col-md-10,
        .super-admin-layout .main-content.col-lg-10,
        .super-admin-layout .main-content.col-xl-10 {
            width: 100% !important;
            flex: 0 0 100% !important;
            max-width: 100% !important;
            min-width: 100% !important;
        }

        .super-admin-layout .sidebar-container.show {
            display: none !important;
            left: -100% !important;
            width: 0 !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }

        /* Ensure main content takes full width */
        .super-admin-layout .main-content {
            margin-left: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            flex: 0 0 100% !important;
            padding-left: 1rem !important;
            padding-right: 1rem !important;
        }

        /* Ensure proper layout on tablet/mobile */
        .super-admin-layout .row {
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        .super-admin-layout .container-fluid {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        /* Hide any sidebar toggle functionality on tablet/mobile */
        .super-admin-layout .sidebar-toggler,
        .super-admin-layout #toggleSidebar {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }

        /* Fix top navbar for tablet/mobile */
        .super-admin-layout .navbar {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            z-index: 1030 !important;
            background: #fff !important;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        }

        /* Ensure navbar content takes full width */
        .super-admin-layout .navbar-content {
            width: 100% !important;
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding: 0 1rem !important;
        }

        /* Show logo on tablet/mobile */
        .super-admin-layout .super-admin-logo {
            display: flex !important;
            align-items: center !important;
            margin-right: 1rem !important;
        }
    }

    /* Mobile mode is working properly - no additional CSS needed */

    /* Desktop behavior - NO custom CSS - let Bootstrap handle everything normally */