/* Admin sidebar — load in to prevent FOUC on refresh */ /* Neutralize legacy style.css sidebar rules */ .side-bar { padding: 0 !important; border-radius: 0 !important; background: linear-gradient(180deg, #0d2131 0%, #102638 50%, #132c40 100%) !important; box-shadow: 4px 0 20px rgba(15, 23, 42, 0.3); border-right: none !important; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(47, 109, 147, 0.4) transparent; } .side-bar-manu li { margin: 0 !important; font-size: inherit !important; } .side-bar-manu li a { border-radius: 10px !important; } .side-bar-manu li:hover:before, .side-bar-manu li.active:before { display: none !important; content: none !important; } .side-bar-manu .dropdown::before { display: none !important; content: none !important; } .side-bar .overlay { display: none; position: fixed; inset: 0; z-index: 9; background: rgba(15, 23, 42, 0.45); } @media (max-width: 1150px) { body.sidebar-open .side-bar .overlay { display: block; } } /* Remove double dropdown arrows */ .side-bar-manu ul li.dropdown > a::after, .side-bar-manu ul li.dropdown > a::before { display: none !important; content: none !important; } .side-bar-manu ul li.dropdown > a > svg.dropdown-arrow, .side-bar-manu ul li.dropdown > a > i.dropdown-arrow, .side-bar-manu ul li.dropdown > a > span.dropdown-indicator, .side-bar-manu ul li.dropdown > a > .chevron, .side-bar-manu ul li.dropdown > a > i.fa-chevron-right, .side-bar-manu ul li.dropdown > a > i.fa-chevron-down, .side-bar-manu ul li.dropdown > a > i.fa-angle-right, .side-bar-manu ul li.dropdown > a > i.fa-angle-down { display: none !important; } .side-bar-manu ul li.dropdown > a { position: relative; padding-right: 35px !important; } .side-bar-manu ul li.dropdown > a .sidebar-dropdown-arrow { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; color: rgba(255, 255, 255, 0.6); font-size: 12px; } .side-bar-manu ul li.dropdown.active > a .sidebar-dropdown-arrow { transform: translateY(-50%) rotate(90deg); color: #fff; } .side-bar::-webkit-scrollbar { width: 5px; } .side-bar::-webkit-scrollbar-track { background: transparent; } .side-bar::-webkit-scrollbar-thumb { background: rgba(47, 109, 147, 0.4); border-radius: 10px; } .side-bar::-webkit-scrollbar-thumb:hover { background: rgba(47, 109, 147, 0.7); } .side-bar-logo { padding: 20px 15px; text-align: center; border-bottom: 1px solid rgba(47, 109, 147, 0.25); background: rgba(0, 0, 0, 0.15); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); } .side-bar-logo img { max-height: 45px; width: auto; transition: all 0.3s ease; filter: brightness(1.1); } .side-bar-logo a:hover img { transform: scale(1.05); filter: brightness(1.2); } .side-bar-manu { padding: 10px 0; } .side-bar-manu > ul { list-style: none; padding: 0; margin: 0; } .side-bar-manu > ul > li { margin: 2px 10px; border-radius: 10px; overflow: visible; transition: all 0.3s ease; background: transparent !important; border: none !important; } .side-bar-manu > ul > li > a { display: flex !important; align-items: center !important; gap: 12px; padding: 11px 15px !important; color: rgba(255, 255, 255, 0.8) !important; text-decoration: none !important; font-size: 13.5px !important; font-weight: 500 !important; border-radius: 10px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; border: 1px solid transparent !important; letter-spacing: 0.2px; background: transparent !important; } .side-bar-manu > ul > li > a:hover { background: rgba(47, 109, 147, 0.25) !important; color: #fff !important; border-color: rgba(47, 109, 147, 0.3) !important; transform: translateX(3px); } .side-bar-manu > ul > li.active > a { background: linear-gradient(135deg, #2f6d93 0%, #3e82ab 100%) !important; color: #fff !important; box-shadow: 0 4px 15px rgba(47, 109, 147, 0.4); border-color: rgba(224, 229, 232, 0.15) !important; font-weight: 600 !important; } .side-bar-manu > ul > li > a .sidebar-icon { width: 34px; height: 34px; min-width: 34px; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(47, 109, 147, 0.2); border-radius: 9px; transition: all 0.3s ease; flex-shrink: 0; margin-right: 0 !important; } .side-bar-manu > ul > li > a .sidebar-icon svg { width: 16px; height: 16px; } .side-bar-manu > ul > li > a .sidebar-icon img { width: 16px; height: 16px; filter: brightness(0) invert(1); opacity: 0.85; } .side-bar-manu > ul > li > a:hover .sidebar-icon { background: rgba(47, 109, 147, 0.35); transform: scale(1.05); } .side-bar-manu > ul > li.active > a .sidebar-icon { background: rgba(255, 255, 255, 0.2); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .order-count-badge { background: linear-gradient(135deg, #ef4444, #dc2626) !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important; padding: 2px 7px !important; border-radius: 50px !important; min-width: 20px; text-align: center; line-height: 1.4; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4); animation: sidebarBadgePulse 2s infinite; } @keyframes sidebarBadgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .side-bar-manu > ul > li.dropdown > ul, .side-bar-manu > ul > li.dropdown > .dropdown-menu { list-style: none; padding: 5px 0 8px 0 !important; margin: 0 !important; background: rgba(255, 255, 255, 0.04) !important; border-radius: 0 0 10px 10px; border-top: 1px solid rgba(47, 109, 147, 0.15); border-left: none !important; border-right: none !important; position: static !important; } .side-bar-manu > ul > li.dropdown > ul > li { margin: 0; padding-left: 0 !important; } .side-bar-manu > ul > li.dropdown > ul > li > a { display: block; padding: 8px 15px 8px 60px !important; color: rgba(255, 255, 255, 0.65) !important; font-size: 12.5px !important; font-weight: 400 !important; text-decoration: none !important; transition: all 0.25s ease !important; position: relative; border-radius: 0 !important; background: transparent !important; } .side-bar-manu > ul > li.dropdown > ul > li > a::before { content: ''; position: absolute; left: 40px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: rgba(224, 229, 232, 0.3); transition: all 0.3s ease; } .side-bar-manu > ul > li.dropdown > ul > li > a:hover { color: #e0e5e8 !important; background: rgba(47, 109, 147, 0.15) !important; padding-left: 65px !important; } .side-bar-manu > ul > li.dropdown > ul > li > a:hover::before { background: #2f6d93; box-shadow: 0 0 6px rgba(47, 109, 147, 0.5); transform: translateY(-50%) scale(1.3); } .side-bar-manu > ul > li.dropdown > ul > li > a.active { color: #e0e5e8 !important; font-weight: 600 !important; background: rgba(47, 109, 147, 0.2) !important; } .side-bar-manu > ul > li.dropdown > ul > li > a.active::before { background: #2f6d93; box-shadow: 0 0 8px rgba(47, 109, 147, 0.6); width: 8px; height: 8px; } .side-bar-manu > ul > li.dropdown > ul > li > a::after { display: none !important; content: none !important; } [dir="rtl"] .side-bar-manu .dropdown-menu, [dir="rtl"] .side-bar-manu > ul > li.dropdown > ul { position: static !important; inset: auto !important; transform: none !important; float: none !important; clip-path: none !important; width: auto !important; min-width: 0 !important; } [dir="rtl"] .side-bar-manu ul li.dropdown > a { padding-right: 15px !important; padding-left: 35px !important; } [dir="rtl"] .side-bar-manu ul li.dropdown > a .sidebar-dropdown-arrow { right: auto; left: 15px; } [dir="rtl"] .side-bar-manu ul li.dropdown.active > a .sidebar-dropdown-arrow { transform: translateY(-50%) rotate(-90deg); } [dir="rtl"] .side-bar-manu > ul > li > a:hover { transform: translateX(-3px); } [dir="rtl"] .side-bar-manu > ul > li.dropdown > ul > li > a { padding: 8px 60px 8px 15px !important; text-align: right; } [dir="rtl"] .side-bar-manu > ul > li.dropdown > ul > li > a::before { right: 40px; left: auto; } [dir="rtl"] .side-bar-manu > ul > li.dropdown > ul > li > a:hover { padding-right: 65px !important; padding-left: 15px !important; }