/* Desktop-specific fixes to ensure mobile styles don't affect desktop */

@media (min-width: 768px) {
    /* Fix desktop navbar - hide Home button and mobile elements */
    .mediaHeader .navbar-header .navbar-brand {
        display: none !important;
    }
    
    /* Hide mobile-specific navbar elements on desktop */
    .mobile-sidebar-header,
    .mobile-sidebar-title,
    .mobile-sidebar-close {
        display: none !important;
    }
    
    /* Ensure dropdown arrow is visible on desktop for Services menu */
    .sidebar-item-caret {
        display: block !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 5px solid transparent !important;
        border-right: 5px solid transparent !important;
        border-top: 6px solid #8b6f47 !important;
        transition: transform 0.3s ease !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Rotate arrow when menu is active */
    .menuList li div.active .sidebar-item-caret {
        transform: translateY(-50%) rotate(180deg) !important;
    }
    
    /* Ensure menu items with submenus show the arrow */
    .menuList li .menuWrap a {
        position: relative !important;
    }
    
    /* Override any existing desktop styles that might hide the arrow */
    .sidebar > .sidebar-nav > .nav .sidebar-item-caret {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Ensure the arrow is visible for all menu items with submenus */
    .menuList li .menuWrap a .sidebar-item-caret {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Force arrow visibility for all desktop menu items */
    .sidebar .sidebar-nav .nav .sidebar-item-caret,
    .sidebar > .sidebar-nav > .nav .sidebar-item-caret,
    .sidebar > .sidebar-nav > .nav > li > a > .sidebar-item-caret {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 5px solid transparent !important;
        border-right: 5px solid transparent !important;
        border-top: 6px solid #8b6f47 !important;
        transition: transform 0.3s ease !important;
    }
    
    /* Override the display: none rule from the main CSS */
    .aside-mini .sidebar .sidebar-nav > .nav li > a > .sidebar-item-caret {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Fix arrow for main navigation menu (NewMenu.html) */
    .newMenu .menuList li .menuWrap a .sidebar-item-caret {
        display: block !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 5px solid transparent !important;
        border-right: 5px solid transparent !important;
        border-top: 6px solid #8b6f47 !important;
        transition: transform 0.3s ease !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Rotate arrow when menu is active */
    .newMenu .menuList li.active .menuWrap a .sidebar-item-caret {
        transform: translateY(-50%) rotate(180deg) !important;
    }
    
    /* Ensure menu items with submenus show the arrow */
    .newMenu .menuList li .menuWrap a {
        position: relative !important;
    }
    
    /* Fix arrow for main top navigation bar */
    .topnavbar .nav > li > a .sidebar-item-caret,
    .topnavbar .navbar-nav > li > a .sidebar-item-caret,
    .topnavbar .nav > li > a .fa-angle-down,
    .topnavbar .navbar-nav > li > a .fa-angle-down {
        display: inline-block !important;
        position: relative !important;
        margin-left: 5px !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 4px solid transparent !important;
        border-right: 4px solid transparent !important;
        border-top: 5px solid currentColor !important;
        transition: transform 0.3s ease !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Rotate arrow when dropdown is active */
    .topnavbar .nav > li.open > a .sidebar-item-caret,
    .topnavbar .navbar-nav > li.open > a .sidebar-item-caret,
    .topnavbar .nav > li.open > a .fa-angle-down,
    .topnavbar .navbar-nav > li.open > a .fa-angle-down {
        transform: rotate(180deg) !important;
    }
    
    /* Ensure all navigation items with dropdowns show arrows */
    .topnavbar .nav > li.dropdown > a:after,
    .topnavbar .navbar-nav > li.dropdown > a:after {
        content: '' !important;
        display: inline-block !important;
        position: relative !important;
        margin-left: 5px !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 4px solid transparent !important;
        border-right: 4px solid transparent !important;
        border-top: 5px solid currentColor !important;
        transition: transform 0.3s ease !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Rotate arrow when dropdown is open */
    .topnavbar .nav > li.dropdown.open > a:after,
    .topnavbar .navbar-nav > li.dropdown.open > a:after {
        transform: rotate(180deg) !important;
    }
    
    /* General rules for any navigation with dropdowns */
    .navbar .nav > li > a:after,
    .navbar-nav > li > a:after,
    .nav > li > a:after {
        content: '' !important;
        display: inline-block !important;
        position: relative !important;
        margin-left: 5px !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 4px solid transparent !important;
        border-right: 4px solid transparent !important;
        border-top: 5px solid currentColor !important;
        transition: transform 0.3s ease !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Show arrow for any element with submenus */
    .nav > li:has(> ul) > a:after,
    .navbar-nav > li:has(> ul) > a:after {
        content: '' !important;
        display: inline-block !important;
        position: relative !important;
        margin-left: 5px !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 4px solid transparent !important;
        border-right: 4px solid transparent !important;
        border-top: 5px solid currentColor !important;
        transition: transform 0.3s ease !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Force arrow visibility for any navigation item */
    .nav > li > a .caret,
    .navbar-nav > li > a .caret,
    .nav > li > a .dropdown-toggle:after {
        display: inline-block !important;
        position: relative !important;
        margin-left: 5px !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 4px solid transparent !important;
        border-right: 4px solid transparent !important;
        border-top: 5px solid currentColor !important;
        transition: transform 0.3s ease !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Fix arrow for topMenu navigation - ONLY for items with dropdowns */
    .topMenu .menuList li:has(.menuSubList) > a:after {
        content: '' !important;
        display: inline-block !important;
        position: relative !important;
        margin-left: 5px !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 4px solid transparent !important;
        border-right: 4px solid transparent !important;
        border-top: 5px solid #4E3C2E !important;
        transition: transform 0.3s ease !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Rotate arrow when dropdown is open */
    .topMenu .menuList li.active:has(.menuSubList) > a:after {
        transform: rotate(180deg) !important;
    }
    
    /* Hide arrow for menu items WITHOUT dropdowns */
    .topMenu .menuList li:not(:has(.menuSubList)) > a:after {
        display: none !important;
    }
    
    /* Alternative approach for browsers that don't support :has() */
    .topMenu .menuList li.dropdown > a:after,
    .topMenu .menuList li.has-submenu > a:after {
        content: '' !important;
        display: inline-block !important;
        position: relative !important;
        margin-left: 5px !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 4px solid transparent !important;
        border-right: 4px solid transparent !important;
        border-top: 5px solid #4E3C2E !important;
        transition: transform 0.3s ease !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Rotate arrow when dropdown is open */
    .topMenu .menuList li.dropdown.active > a:after,
    .topMenu .menuList li.has-submenu.active > a:after {
        transform: rotate(180deg) !important;
    }
    
    /* Specific rule for Services menu item */
    .topMenu .menuList li a[href*="services"]:after,
    .topMenu .menuList li a[title*="Services"]:after {
        content: '' !important;
        display: inline-block !important;
        position: relative !important;
        margin-left: 5px !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 4px solid transparent !important;
        border-right: 4px solid transparent !important;
        border-top: 5px solid #4E3C2E !important;
        transition: transform 0.3s ease !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Rotate Services arrow when active */
    .topMenu .menuList li.active a[href*="services"]:after,
    .topMenu .menuList li.active a[title*="Services"]:after {
        transform: rotate(180deg) !important;
    }
    
    /* General rule for ONLY TOP-LEVEL menu items with submenus */
    .topMenu .menuList > li:has(ul) > a:after,
    .topMenu .menuList > li:has(.menuSubList) > a:after,
    .topMenu .menuList > li:has(.submenu) > a:after,
    .topMenu .menuList > li:has(.dropdown-menu) > a:after {
        content: '' !important;
        display: inline-block !important;
        position: relative !important;
        margin-left: 5px !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 4px solid transparent !important;
        border-right: 4px solid transparent !important;
        border-top: 5px solid #4E3C2E !important;
        transition: transform 0.3s ease !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Rotate arrow when any TOP-LEVEL submenu is open */
    .topMenu .menuList > li.active:has(ul) > a:after,
    .topMenu .menuList > li.active:has(.menuSubList) > a:after,
    .topMenu .menuList > li.active:has(.submenu) > a:after,
    .topMenu .menuList > li.active:has(.dropdown-menu) > a:after {
        transform: rotate(180deg) !important;
    }
    
    /* Alternative selectors for TOP-LEVEL menu structures */
    .topMenu .menuList > li[ng-class*="active"] > a:after,
    .topMenu .menuList > li[class*="active"] > a:after {
        content: '' !important;
        display: inline-block !important;
        position: relative !important;
        margin-left: 5px !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 4px solid transparent !important;
        border-right: 4px solid transparent !important;
        border-top: 5px solid #4E3C2E !important;
        transition: transform 0.3s ease !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Specific rules for TOP-LEVEL Lists, Applications, Inspection, Reports */
    .topMenu .menuList > li a[href*="lists"]:after,
    .topMenu .menuList > li a[title*="Lists"]:after,
    .topMenu .menuList > li a[href*="applications"]:after,
    .topMenu .menuList > li a[title*="Applications"]:after,
    .topMenu .menuList > li a[href*="inspection"]:after,
    .topMenu .menuList > li a[title*="Inspection"]:after,
    .topMenu .menuList > li a[href*="reports"]:after,
    .topMenu .menuList > li a[title*="Reports"]:after {
        content: '' !important;
        display: inline-block !important;
        position: relative !important;
        margin-left: 5px !important;
        width: 0 !important;
        height: 0 !important;
        border-left: 4px solid transparent !important;
        border-right: 4px solid transparent !important;
        border-top: 5px solid #4E3C2E !important;
        transition: transform 0.3s ease !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Rotate arrows when these TOP-LEVEL items are active */
    .topMenu .menuList > li.active a[href*="lists"]:after,
    .topMenu .menuList > li.active a[title*="Lists"]:after,
    .topMenu .menuList > li.active a[href*="applications"]:after,
    .topMenu .menuList > li.active a[title*="Applications"]:after,
    .topMenu .menuList > li.active a[href*="inspection"]:after,
    .topMenu .menuList > li.active a[title*="Inspection"]:after,
    .topMenu .menuList > li.active a[href*="reports"]:after,
    .topMenu .menuList > li.active a[title*="Reports"]:after {
        transform: rotate(180deg) !important;
    }
    
    /* Hide arrows in submenus (nested lists) */
    .topMenu .menuList li li a:after,
    .topMenu .menuList li ul li a:after,
    .topMenu .menuList li .menuSubList li a:after,
    .topMenu .menuList li .submenu li a:after,
    .topMenu .menuList li .dropdown-menu li a:after,
    .topMenu .menuList li li li a:after,
    .topMenu .menuList li ul li li a:after,
    .topMenu .menuList li .menuSubList li li a:after,
    .topMenu .menuList li .submenu li li a:after,
    .topMenu .menuList li .dropdown-menu li li a:after,
    /* Hide arrows in any nested level */
    .topMenu .menuList li li a:after,
    .topMenu .menuList li li li a:after,
    .topMenu .menuList li li li li a:after,
    /* Specific rules for submenu items */
    .topMenu .menuList li a[href*="contact"]:after,
    .topMenu .menuList li a[href*="urgent"]:after,
    .topMenu .menuList li a[title*="Contact"]:after,
    .topMenu .menuList li a[title*="Urgent"]:after,
    /* Hide arrows for any submenu item */
    .topMenu .menuList li li a[href*="applications"]:after,
    .topMenu .menuList li li a[href*="reports"]:after,
    .topMenu .menuList li li a[title*="Applications"]:after,
    .topMenu .menuList li li a[title*="Reports"]:after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* General rule to hide ALL arrows in submenus at any level */
    .topMenu .menuList li li a:after,
    .topMenu .menuList li li li a:after,
    .topMenu .menuList li li li li a:after,
    .topMenu .menuList li li li li li a:after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Override any existing arrow styles in submenus */
    .topMenu .menuList li li a .sidebar-item-caret,
    .topMenu .menuList li li li a .sidebar-item-caret,
    .topMenu .menuList li li li li a .sidebar-item-caret {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Additional rules to hide arrows in Reports submenu specifically */
    .topMenu .menuList li li a[href*="reports"]:after,
    .topMenu .menuList li li a[title*="Reports"]:after,
    .topMenu .menuList li li a[href*="report"]:after,
    .topMenu .menuList li li a[title*="Report"]:after,
    /* Hide any arrow in submenus regardless of content */
    .topMenu .menuList li li a:after,
    .topMenu .menuList li li li a:after,
    .topMenu .menuList li li li li a:after,
    .topMenu .menuList li li li li li a:after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Force hide ALL arrows in ANY submenu level - most aggressive approach */
    .topMenu .menuList li li a:after,
    .topMenu .menuList li li li a:after,
    .topMenu .menuList li li li li a:after,
    .topMenu .menuList li li li li li a:after,
    .topMenu .menuList li li li li li li a:after,
    .topMenu .menuList li li li li li li li a:after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }
    
    /* Override any existing arrow elements in submenus */
    .topMenu .menuList li li a .sidebar-item-caret,
    .topMenu .menuList li li li a .sidebar-item-caret,
    .topMenu .menuList li li li li a .sidebar-item-caret,
    .topMenu .menuList li li li li li a .sidebar-item-caret,
    .topMenu .menuList li li li li li li a .sidebar-item-caret {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }
    
    /* Fix desktop Quick Links - make them horizontal */
    .section .card-flex {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
    }
    
    .section .card-flex .card {
        flex: 1 1 calc(20% - 16px) !important;
        min-width: 200px !important;
        max-width: 250px !important;
    }
    
    /* Ensure proper styling for desktop Quick Links cards */
    .section .card-flex .card .card-body {
        padding: 20px !important;
    }
    
    .section .card-flex .card .card-body i {
        font-size: 2.5rem !important;
        margin-bottom: 15px !important;
    }
    
    .section .card-flex .card .card-body .start-service {
        margin-top: 15px !important;
    }
    
    /* Fix desktop Most Used Services cards - make them horizontal with proper width */
    .section .card-flex {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
    }
    
    .section .card-flex .card {
        flex: 1 1 calc(20% - 12px) !important;
        min-width: 180px !important;
        max-width: 220px !important;
        margin-bottom: 15px !important;
    }
    
    /* Ensure proper styling for desktop cards */
    .section .card-flex .card .card-body {
        padding: 20px !important;
    }
    
    .section .card-flex .card .card-body i {
        font-size: 2.5rem !important;
        margin-bottom: 15px !important;
    }
    
    .section .card-flex .card .card-body .start-service {
        margin-top: 15px !important;
    }
    
    /* Hide mobile elements on desktop */
    .mobile-most-used-services,
    .mobile-services-grid,
    .mobile-service-card,
    .mobile-most-used-header,
    .mobile-main-title,
    .mobile-view-all,
    .mobile-quick-links-container,
    .mobile-quick-links-card,
    .mobile-tiles,
    .mobile-tile,
    .mobile-requests-card {
        display: none !important;
    }
    
    /* Ensure desktop header is properly styled */
    .section-header {
        margin-bottom: 30px !important;
    }
    
    .section-header h2 {
        font-size: 2rem !important;
        margin-bottom: 20px !important;
    }
}