/* Horizontal Navbar Layout Override */
body, body.layout-dark, body.layout-light {
    background-image: url('../images/background.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}

/* Hide the vertical sidebar */
.sidebar-wrapper {
    display: none !important;
    }

    /* Hide the old top navbar (language/theme/profile bar) */
    .header-container {
        display: none !important;
    }

    /* Adjust main content to take full width */
    #content {
        margin-left: 0 !important;
        width: 100% !important;
        margin-top: 70px !important;
    }

    /* Create horizontal navigation */
    .horizontal-nav-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border-bottom: 1px solid #e0e6ed;
        padding: 10px 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1050;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .horizontal-nav-wrapper nav {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .horizontal-nav-wrapper .menu-categories {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 5px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .horizontal-nav-wrapper .menu {
        position: relative;
        margin: 0;
    }

    .horizontal-nav-wrapper .menu>a {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        color: #515365;
        text-decoration: none;
        border-radius: 6px;
        transition: all 0.3s ease;
        white-space: nowrap;
    }

    .horizontal-nav-wrapper .menu>a:hover {
        background: #ff8f9e;
        /* Soft Red for Hover */
        color: #fff;
    }

    .horizontal-nav-wrapper .menu.active>a {
        background: #e7515a;
        /* RED for Active */
        color: #fff;
    }

    .horizontal-nav-wrapper .menu>a svg {
        width: 18px;
        height: 18px;
        margin-right: 6px;
    }

    .horizontal-nav-wrapper .menu>a i {
        margin-right: 6px;
        font-size: 14px;
    }

    .horizontal-nav-wrapper .menu>a span {
        font-size: 14px;
        font-weight: 500;
    }

    /* Dropdown arrow */
    .horizontal-nav-wrapper .menu>a>div:last-child {
        margin-left: 4px;
    }

    .horizontal-nav-wrapper .menu>a>div:last-child svg {
        width: 14px;
        height: 14px;
        margin: 0;
        transform: rotate(90deg);
    }

    /* Submenu styling */
    .horizontal-nav-wrapper .submenu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        border: 1px solid #e0e6ed;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(31, 45, 61, 0.1);
        min-width: 200px;
        margin-top: 0;
        /* Fix: removed gap */
        padding: 8px 0;
        z-index: 1060;
        list-style: none;
    }

    /* Add invisible bridge to prevent menu closing when moving cursor */
    .horizontal-nav-wrapper .submenu::before {
        content: '';
        position: absolute;
        top: -10px;
        left: 0;
        width: 100%;
        height: 10px;
        background: transparent;
    }

    .horizontal-nav-wrapper .menu:hover>.submenu,
    .horizontal-nav-wrapper .submenu.show {
        display: block;
    }

    /* Fix: Ensure submenu is hidden even if parent is active, unless hovered */
    .horizontal-nav-wrapper .menu.active>.submenu {
        display: none;
    }

    .horizontal-nav-wrapper .menu.active:hover>.submenu {
        display: block;
    }

    .horizontal-nav-wrapper .submenu li {
        margin: 0;
    }

    .horizontal-nav-wrapper .submenu li a {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        color: #515365;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .horizontal-nav-wrapper .submenu li a:hover {
        background: #f1f2f3;
        color: #ff8f9e;
        /* Soft Red for Hover */
    }

    .horizontal-nav-wrapper .submenu li.active a {
        background: #e7515a;
        color: #fff;
        /* RED for Active */
    }

    .horizontal-nav-wrapper .submenu li a i {
        margin-right: 8px;
        font-size: 14px;
    }

    .horizontal-nav-wrapper .submenu li a svg {
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }

    /* Badge styling */
    .horizontal-nav-wrapper .badge {
        margin-left: 8px;
        font-size: 11px;
        padding: 2px 6px;
    }

    /* Logo in horizontal nav */
    .horizontal-nav-logo {
        display: flex;
        align-items: center;
        margin-right: 30px;
    }

    .horizontal-nav-logo img {
        height: 32px;
        width: auto;
        margin-right: 10px;
    }

    .horizontal-nav-logo span {
        font-size: 18px;
        font-weight: 700;
        color: #0e1726;
    }

    /* Adjust main container */
    .main-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Profile info - hide in horizontal mode */
    .horizontal-nav-wrapper .profile-info {
        display: none;
    }

    /* Navbar Controls Styling */
    .navbar-controls {
        flex-shrink: 0;
    }

    .navbar-controls .nav-item {
        position: relative;
    }

    .navbar-controls .nav-link {
        color: #515365;
        transition: all 0.3s ease;
    }

    .navbar-controls .nav-link:hover {
        color: #ff8f9e;
        /* Soft Red */
    }

    /* Language Dropdown */
    .navbar-controls .language-dropdown .dropdown-menu {
        max-height: 400px;
        overflow-y: auto;
    }

    .navbar-controls .language-dropdown .dropdown-item {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        font-size: 14px;
        color: #515365;
        transition: all 0.3s ease;
    }

    .navbar-controls .language-dropdown .dropdown-item:hover {
        background: #f1f2f3;
        color: #ff8f9e;
        /* Soft Red */
    }

    /* Theme Toggle - Fixed to ensure clicks work properly */
    .navbar-controls .theme-toggle-item .light-mode {
        display: none;
        pointer-events: none;
    }

    .navbar-controls .theme-toggle-item .dark-mode {
        display: inline-block;
        color: #ffc107;
    }

    body.layout-dark .navbar-controls .theme-toggle-item .light-mode {
        display: inline-block;
        color: #ffc107;
        pointer-events: auto;
    }

    body.layout-dark .navbar-controls .theme-toggle-item .dark-mode {
        display: none;
        pointer-events: none;
    }

    /* User Profile Dropdown */
    .navbar-controls .user-profile-dropdown .dropdown-menu {
        padding: 0 10px 10px 10px;
    }

    .navbar-controls .user-profile-dropdown .dropdown-item:hover a {
        color: #ff8f9e !important;
        /* Soft Red */
    }

    /* Dark Mode Styles */
    body.layout-dark .horizontal-nav-wrapper {
        background: #0e1726;
        border-bottom-color: #191e3a;
    }

    body.layout-dark .horizontal-nav-logo span {
        color: #e0e6ed;
    }

    body.layout-dark .horizontal-nav-wrapper .menu>a {
        color: #e0e6ed;
    }

    body.layout-dark .horizontal-nav-wrapper .menu>a:hover {
        background: #ff8f9e;
        /* Soft Red */
        color: #fff;
    }

    body.layout-dark .horizontal-nav-wrapper .menu.active>a {
        background: #e7515a;
        /* RED */
        color: #fff;
    }

    body.layout-dark .horizontal-nav-wrapper .submenu {
        background: #0e1726;
        border-color: #191e3a;
    }

    body.layout-dark .horizontal-nav-wrapper .submenu li a {
        color: #e0e6ed;
    }

    body.layout-dark .horizontal-nav-wrapper .submenu li a:hover {
        background: #191e3a;
        color: #ff8f9e;
        /* Soft Red */
    }

    body.layout-dark .horizontal-nav-wrapper .submenu li.active a {
        background: #e7515a;
        color: #fff;
    }

    body.layout-dark .navbar-controls .nav-link {
        color: #e0e6ed;
    }

    body.layout-dark .navbar-controls .nav-link:hover {
        color: #ff8f9e;
        /* Soft Red */
    }

    body.layout-dark .navbar-controls .language-dropdown .dropdown-menu,
    body.layout-dark .navbar-controls .user-profile-dropdown .dropdown-menu {
        background: #0e1726;
        border-color: #191e3a;
    }

    body.layout-dark .navbar-controls .language-dropdown .dropdown-item,
    body.layout-dark .navbar-controls .user-profile-dropdown .dropdown-item a {
        color: #e0e6ed;
    }

    body.layout-dark .navbar-controls .language-dropdown .dropdown-item:hover {
        background: #191e3a;
        color: #ff8f9e;
        /* Soft Red */
    }

    body.layout-dark .navbar-controls .user-profile-dropdown .user-profile-section {
        border-bottom-color: #191e3a;
    }

    body.layout-dark .navbar-controls .user-profile-dropdown .user-profile-section h5 {
        color: #e0e6ed;
    }

    body.layout-dark .navbar-controls .nav-link,
    body.layout-dark .navbar-controls .nav-link span,
    body.layout-dark .navbar-controls .nav-link i {
        color: #e0e6ed !important;
    }

    /* Social Media Dropdown Styling */
    .social-media-dropdown .dropdown-menu {
        background: #fff;
        border: 1px solid #e0e6ed;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(31, 45, 61, 0.1);
        min-width: 200px;
        margin-top: 0;
        padding: 8px 0;
        z-index: 1060;
    }

    /* Add invisible bridge to prevent menu closing when moving cursor */
    .social-media-dropdown .dropdown-menu::before {
        content: '';
        position: absolute;
        top: -10px;
        left: 0;
        width: 100%;
        height: 10px;
        background: transparent;
    }

    /* Show on hover to match navbar behavior */
    .social-media-dropdown:hover .dropdown-menu {
        display: block;
    }

    .social-media-dropdown .dropdown-item {
        padding: 0;
        background: transparent;
        border: none;
    }

    .social-media-dropdown .dropdown-item a {
        display: flex;
        align-items: center;
        padding: 10px 16px;
        text-decoration: none;
        transition: all 0.3s ease;
        color: #515365;
    }

    .social-media-dropdown .dropdown-item a:hover {
        background: #f1f2f3;
        color: #ff8f9e;
    }

    .social-media-dropdown .dropdown-item a:hover i {
        color: #ff8f9e !important;
    }

    .social-media-dropdown .dropdown-item a:hover span {
        color: #ff8f9e;
    }

    /* Dark mode for social media dropdown */
    body.layout-dark .social-media-dropdown .dropdown-menu {
        background: #0e1726;
        border-color: #191e3a;
    }

    body.layout-dark .social-media-dropdown .dropdown-item a {
        color: #fff;
    }

    body.layout-dark .social-media-dropdown .dropdown-item a i {
        color: #fff !important;
    }

    body.layout-dark .social-media-dropdown .dropdown-item a:hover {
        background: #191e3a;
        color: #ff8f9e;
    }

    body.layout-dark .social-media-dropdown .dropdown-item a:hover i {
        color: #ff8f9e !important;
    }

    body.layout-dark .social-media-dropdown .dropdown-item a:hover span {
        color: #ff8f9e;
    }