/* Custom Topbar Gray Color */
.app-topbar {
    background-color: #6c757d !important;
    border-bottom: 1px solid #dee2e6;
}

.app-topbar .topbar-menu {
    background-color: #6c757d !important;
}

.app-topbar .logo-topbar a.logo-light .logo-lg span,
.app-topbar .logo-topbar a.logo-light .logo-sm span {
    color: #ffffff !important;
}

.app-topbar .logo-topbar a.logo-dark .logo-lg span,
.app-topbar .logo-topbar a.logo-dark .logo-sm span {
    color: #ffffff !important;
}

.app-topbar .topbar-link,
.app-topbar .topbar-link-icon {
    color: #ffffff !important;
}

.app-topbar .topbar-link:hover,
.app-topbar .topbar-link:focus {
    color: #e9ecef !important;
}

.app-topbar .app-search .topbar-search {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.app-topbar .app-search .topbar-search::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

.app-topbar .app-search .topbar-search:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.app-topbar .app-search .app-search-icon {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Dropdown Menu Styling */
.app-topbar .dropdown-menu {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
}

.app-topbar .dropdown-item {
    color: #495057 !important;
    padding: 0.5rem 1rem !important;
}

.app-topbar .dropdown-item:hover,
.app-topbar .dropdown-item:focus {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

.app-topbar .dropdown-item.active {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

/* Dark Theme Topbar */
[data-bs-theme=dark] .app-topbar {
    background-color: #495057 !important;
    border-bottom-color: #495057 !important;
}

[data-bs-theme=dark] .app-topbar .topbar-menu {
    background-color: #495057 !important;
}

[data-bs-theme=dark] .app-topbar .app-search .topbar-search {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Luxe Theme Styling */
html[data-skin=luxe] .app-topbar {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

html[data-skin=luxe] .app-topbar .topbar-link {
    transition: all 0.3s ease !important;
}

html[data-skin=luxe] .app-topbar .topbar-link:hover {
    transform: scale(1.1) !important;
}

/* Language & Theme Buttons Styling */
.topbar-item .dropdown-menu {
    min-width: 120px !important;
}

.topbar-item .dropdown-item form {
    width: 100% !important;
}

.topbar-item .dropdown-item button {
    width: 100% !important;
    text-align: left !important;
    padding: 0.5rem 1rem !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
}

.topbar-item .dropdown-item button:hover {
    background-color: #e9ecef !important;
}

/* RTL Support */
html[dir=rtl] .app-topbar {
    direction: rtl !important;
}

html[dir=rtl] .topbar-menu {
    flex-direction: row-reverse !important;
}