/* |-------------------------------------------------------------------------- | SMMMatrix dashboard layout — complete replacement |-------------------------------------------------------------------------- | Header: standard desktop bar, centered logo on mobile. | Sidebar: fixed 248px rail on desktop and the same-width drawer on mobile. | Existing routes, menu content and dashboard logic remain untouched. */ :root { --smw-header-height: 68px; --smw-mobile-header-height: 64px; --smw-sidebar-width: 260px; --smw-violet-950: #07112d; --smw-violet-900: #050f2c; --smw-violet-850: #1a2453; --smw-violet-800: #292f68; --smw-profile-gradient: linear-gradient(135deg, #5d63f2 0%, #a548f2 100%); --smw-profile-blue: #1678f5; --smw-text: #f7f4ff; --smw-muted: #c2b9e2; --smw-border: rgba(255, 255, 255, 0.11); --smw-blue: #2d7cff; --smw-danger: #ff6577; } html, body { max-width: 100%; overflow-x: hidden; } body { background: var(--smw-violet-950); } /* ========================================================================== HEADER ========================================================================== */ #header.header { position: fixed !important; top: 0; right: 0; left: 0; display: flex !important; align-items: center !important; height: var(--smw-header-height) !important; min-height: var(--smw-header-height) !important; padding: 0 18px !important; background: var(--smw-violet-950) !important; border-bottom: 1px solid var(--smw-border); z-index: 1100 !important; } #header .mobile-top-left { display: flex !important; align-items: center !important; gap: 10px; min-width: 0; height: 100%; } #header .toggle-sidebar-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 40px; width: 40px; height: 40px; margin: 0 !important; padding: 0 !important; color: var(--smw-text) !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(126, 91, 255, 0.7) !important; border-radius: 9px !important; cursor: pointer; font-size: 21px; line-height: 1; transition: background 0.18s ease, border-color 0.18s ease; } #header .toggle-sidebar-btn:hover, #header .toggle-sidebar-btn:focus-visible { background: rgba(111, 74, 255, 0.36) !important; border-color: #9a7dff !important; outline: none; } #header .toggle-sidebar-btn i { margin: 0 !important; color: inherit !important; line-height: 1; } #header .logo-container { display: flex; align-items: center; min-width: 0; } #header .logo { display: flex !important; align-items: center !important; max-width: 150px; min-width: 0; margin: 0 !important; } #header .logo img { display: block; width: auto; max-width: 150px; max-height: 32px; object-fit: contain; } #header .header-nav { flex: 0 0 auto; margin-left: auto !important; } #header .nav-icons { display: flex; align-items: center; gap: 14px; height: 100%; margin: 0 !important; padding: 0 !important; list-style: none; } #header .nav-icons > li { display: flex; align-items: center; height: 100%; } #header .nav-link, #header .toggle-btn { color: var(--smw-text) !important; } #header .nav-link:hover, #header .toggle-btn:hover { color: #ffffff !important; } #header .language-box { display: flex; align-items: center; gap: 5px; } #header .language-box > i { color: var(--smw-muted); } #header .language-box .form-select { width: 60px; min-width: 60px; padding: 0 15px 0 0; color: var(--smw-text); background: transparent; border: 0; box-shadow: none; font-size: 12px; } #header .badge-number { background: #ff9d18; } #header .nav-profile { display: flex !important; align-items: center !important; gap: 8px; min-height: 40px; padding: 4px 8px !important; color: var(--smw-text) !important; border-radius: 9px; } #header .nav-profile .profile-arrow { display: inline-flex; align-items: center; justify-content: center; color: var(--smw-muted); font-size: 10px; line-height: 1; } #header .nav-profile img { width: 32px; height: 32px; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.82); } #header .nav-profile .profile-name { max-width: 110px; overflow: hidden; color: var(--smw-text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } /* Profile dropdown */ #header .profile-menu-item { position: relative; } #header .dropdown-menu.profile { min-width: 235px; margin-top: 6px !important; padding: 0 !important; overflow: hidden; background: var(--smw-violet-850) !important; border: 1px solid var(--smw-border) !important; border-radius: 12px !important; box-shadow: 0 16px 38px rgba(0, 0, 0, 0.35); } #header .profile .dropdown-header { gap: 10px; padding: 15px 14px !important; color: var(--smw-text) !important; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid var(--smw-border); } #header .profile-thum img { width: 42px; height: 42px; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.75); border-radius: 50%; } #header .profile-content h6, #header .profile-content span { display: block; margin: 0; color: var(--smw-text); } #header .profile-content h6 { margin-bottom: 4px; font-size: 13px; } #header .profile-content span { color: var(--smw-muted); font-size: 12px; } #header .profile .dropdown-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 9px 14px !important; color: var(--smw-text) !important; font-size: 13px; } #header .profile .dropdown-item:hover, #header .profile .dropdown-item:focus { color: #ffffff !important; background: rgba(118, 76, 255, 0.25) !important; } #header .profile .dropdown-item i { width: 18px; color: #b99bff; text-align: center; } /* ========================================================================== SIDEBAR — fixed standard rail, same visual design on every breakpoint ========================================================================== */ #sidebar.sidebar { position: fixed !important; top: var(--smw-header-height) !important; bottom: 0 !important; left: 0 !important; display: flex !important; flex-direction: column; width: var(--smw-sidebar-width) !important; height: calc(100vh - var(--smw-header-height)) !important; height: calc(100dvh - var(--smw-header-height)) !important; margin: 0 !important; padding: 18px !important; overflow: hidden !important; background: var(--smw-violet-900) !important; border: 1px solid var(--smw-border) !important; border-top: 0 !important; border-radius: 0 !important; box-shadow: 8px 0 28px rgba(5, 3, 21, 0.22) !important; z-index: 1050 !important; transform: none !important; transition: left 0.24s ease !important; } /* Desktop hamburger hides/shows the fixed rail through the existing JS class. */ @media (min-width: 992px) { body.toggle-sidebar #sidebar.sidebar { left: calc(-1 * var(--smw-sidebar-width)) !important; } } #sidebar.sidebar::-webkit-scrollbar, #sidebar .sidebar-nav::-webkit-scrollbar { width: 4px; } #sidebar.sidebar::-webkit-scrollbar-thumb, #sidebar .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(176, 145, 255, 0.48); border-radius: 8px; } /* Reference profile card */ #sidebar .sidebar-profile { position: relative; flex: 0 0 auto; min-height: 198px; margin: 0 0 12px !important; padding: 27px 12px 16px !important; overflow: hidden; text-align: center; background: var(--smw-profile-gradient) !important; border: 0 !important; border-radius: 12px !important; box-shadow: 0 8px 22px rgba(10, 4, 43, 0.2); } #sidebar .sidebar-new-badge { position: absolute; top: 0; right: 0; z-index: 3; padding: 5px 10px; color: #ffffff; background: #1678f5; border-radius: 0 12px 0 9px; font-size: 10px; font-weight: 700; letter-spacing: 0.25px; line-height: 1.1; } #sidebar .sidebar-profile::after { position: absolute; right: -38px; bottom: -66px; width: 150px; height: 150px; content: ""; background: rgba(255, 255, 255, 0.08); border-radius: 50%; pointer-events: none; } #sidebar .sidebar-profile-avatar { position: relative; z-index: 1; width: 68px !important; height: 68px !important; margin: 2px auto 10px !important; padding: 5px !important; background: #ffffff !important; border: 2px solid #21184d !important; border-radius: 14px !important; box-shadow: 0 4px 12px rgba(11, 5, 43, 0.18); } #sidebar .sidebar-profile-avatar img { display: block; width: 100% !important; height: 100% !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; object-fit: cover; } #sidebar .sidebar-profile-status { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; background: #28c970; border: 2px solid #ffffff; border-radius: 50%; } #sidebar .sidebar-profile-name { position: relative; z-index: 1; margin: 0 0 9px !important; color: #ffffff !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.25; } #sidebar .sidebar-profile-balance { position: relative; z-index: 1; display: inline-block; min-width: 86px; padding: 7px 14px !important; color: #ffffff !important; background: var(--smw-profile-blue) !important; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 7px !important; font-size: 13px !important; font-weight: 700 !important; } /* Remove any legacy close/cross control placed above the profile card. */ #sidebar .btn-close, #sidebar .cmn-btn-close, #sidebar .sidebar-close, #sidebar .sidebar-close-btn, #sidebar .close-sidebar, #sidebar .sidebar-dismiss, #sidebar button[aria-label*="Close"], #sidebar button[title*="Close"], #sidebar .fa-xmark, #sidebar .fa-times, #sidebar .bi-x, #sidebar .bi-x-lg, .sidebar-close, .sidebar-close-btn, .close-sidebar, #sidebarClose, #sidebarCloseBtn { display: none !important; } /* One New Order action button only. */ #sidebar .sidebar-new-order { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 42px; margin: 0 0 11px; padding: 9px 12px; gap: 9px; color: #ffffff; background: linear-gradient(90deg, #4334ff, #7444ec); box-shadow: 0 7px 16px rgba(61, 61, 238, 0.24); border-radius: 9px; font-size: 13px; font-weight: 700; text-decoration: none; text-transform: uppercase; transition: filter 0.18s ease, transform 0.18s ease; } #sidebar .sidebar-new-order:hover, #sidebar .sidebar-new-order:focus-visible { color: #ffffff; filter: brightness(1.12); outline: none; transform: translateY(-1px); } #sidebar .sidebar-new-order i { font-size: 15px; } /* Main menu */ #sidebar .sidebar-nav { flex: 1 1 auto; min-height: 0; margin: 0 !important; padding: 0 !important; overflow-y: auto; list-style: none; } #sidebar .sidebar-nav .nav-item { margin: 0 0 4px; } #sidebar .sidebar-nav .nav-link { display: flex !important; align-items: center; min-height: 40px; width: 100%; padding: 6px 9px !important; gap: 9px; color: #eeeaff !important; background: transparent !important; border: 1px solid transparent !important; border-left: 2px solid transparent !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } #sidebar .sidebar-nav .nav-link:hover, #sidebar .sidebar-nav .nav-link:focus-visible, #sidebar .sidebar-nav .nav-link.active { color: #ffffff !important; background: linear-gradient(90deg, rgba(103, 80, 245, 0.48), rgba(86, 65, 184, 0.22)) !important; border-left-color: #8b6cff !important; font-weight: 700 !important; text-shadow: 0 0 12px rgba(255, 255, 255, 0.16); outline: none; } #sidebar .sidebar-icon { display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 29px; width: 29px; height: 29px; color: #55c8ff; background: rgba(15, 37, 92, 0.88); border-radius: 7px; font-size: 14px; transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } #sidebar .sidebar-icon i { margin: 0 !important; color: inherit !important; transition: transform 0.18s ease; } #sidebar .sidebar-nav .nav-link:hover .sidebar-icon, #sidebar .sidebar-nav .nav-link:focus-visible .sidebar-icon { background: rgba(148, 112, 255, 0.3); box-shadow: 0 0 0 3px rgba(138, 104, 255, 0.11); transform: translateY(-1px) scale(1.06); } #sidebar .sidebar-nav .nav-link:hover .sidebar-icon i, #sidebar .sidebar-nav .nav-link:focus-visible .sidebar-icon i { transform: rotate(-7deg); } #sidebar .sidebar-nav .nav-link.active .sidebar-icon { color: #ffffff; background: rgba(119, 95, 255, 0.48); box-shadow: 0 0 0 3px rgba(138, 104, 255, 0.14); } #sidebar .sidebar-link-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #sidebar .sidebar-arrow { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-left: auto !important; color: var(--smw-muted); background: rgba(255, 255, 255, 0.08); border-radius: 50%; font-size: 10px !important; } #sidebar .nav-content { margin: 0; padding: 2px 0 3px 38px !important; list-style: none; } #sidebar .nav-content.collapse:not(.show) { display: none; } #sidebar .nav-content a { display: flex; align-items: center; min-height: 30px; padding: 5px 6px !important; gap: 7px; color: var(--smw-muted) !important; font-size: 12px !important; text-decoration: none !important; border-radius: 6px; } #sidebar .nav-content a:hover, #sidebar .nav-content a:focus-visible, #sidebar .nav-content a.active { color: #ffffff !important; background: rgba(118, 76, 255, 0.2) !important; font-weight: 600; text-shadow: 0 0 10px rgba(255, 255, 255, 0.14); outline: none; } #sidebar .nav-content a i { color: #8e73ff; font-size: 5px; } /* Logout stays below the scrollable menu. */ #sidebar .sidebar-logout { flex: 0 0 auto; margin-top: 10px; } #sidebar .sidebar-logout a { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 8px 13px; color: var(--smw-danger); background: rgba(255, 101, 119, 0.08); border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; } #sidebar .sidebar-logout a:hover { color: #ff9ba7; background: rgba(255, 101, 119, 0.15); } #sidebar .sidebar-install-app { display: none; align-items: center; justify-content: space-between; min-height: 40px; margin-top: 8px; padding: 8px 13px; color: #ffffff; background: rgba(45, 124, 255, 0.18); border: 1px solid rgba(45, 124, 255, 0.34); border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease; } #sidebar .sidebar-install-app:hover, #sidebar .sidebar-install-app:focus-visible, #sidebar .sidebar-install-app:active { color: #ffffff; background: rgba(45, 124, 255, 0.36); border-color: #7caeff; outline: none; } #sidebar .sidebar-install-app i { font-size: 17px; } /* ========================================================================== PAGE OFFSET AND DESKTOP SIDEBAR TOGGLE ========================================================================== */ #main { min-height: calc(100vh - var(--smw-header-height)); margin-top: var(--smw-header-height) !important; margin-left: var(--smw-sidebar-width) !important; padding: 22px 20px 28px !important; transition: margin-left 0.24s ease; } #footer { margin-left: var(--smw-sidebar-width) !important; transition: margin-left 0.24s ease; } @media (min-width: 992px) { body.toggle-sidebar #main, body.toggle-sidebar #footer { margin-left: 0 !important; } } /* ========================================================================== MOBILE — hamburger left, centered logo, profile icon right ========================================================================== */ @media (max-width: 991.98px) { #header.header { position: fixed !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; height: var(--smw-mobile-header-height) !important; min-height: var(--smw-mobile-header-height) !important; padding: 0 10px !important; } /* The left group fills the bar so the logo can be centered exactly. */ #header .mobile-top-left { position: absolute; inset: 0; display: flex !important; align-items: center !important; justify-content: center !important; width: 100%; min-width: 0; height: 100%; pointer-events: none; } #header .toggle-sidebar-btn { position: absolute; left: 10px; z-index: 2; pointer-events: auto; } #header .logo-container, #header .logo { pointer-events: auto; } #header .logo { max-width: 148px; } #header .logo img { max-width: 148px; max-height: 30px; } /* Mobile keeps only the profile avatar and its small arrow. */ #header .nav-icons { display: flex !important; flex: 0 0 auto !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 0; width: auto; margin: 0 0 0 auto !important; margin-inline-start: auto !important; margin-inline-end: 0 !important; padding: 0 !important; } #header .nav-icons > li:not(.profile-menu-item) { display: none !important; } #header .header-nav { display: flex !important; flex: 0 0 auto !important; order: 2; align-items: center !important; justify-content: flex-end !important; position: relative; z-index: 3; width: auto !important; max-width: none !important; height: 100%; margin: 0 0 0 auto !important; padding: 0 !important; margin-inline-start: auto !important; margin-inline-end: 0 !important; } #header .profile-menu-item { display: flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: flex-end !important; margin: 0 0 0 auto !important; margin-inline-start: auto !important; margin-inline-end: 0 !important; } #header .nav-profile { display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 38px; height: 38px; min-height: 38px; padding: 2px !important; justify-content: center; background: transparent !important; border: 0; } #header .nav-profile img { width: 34px; height: 34px; border-width: 2px; } #header .nav-profile .profile-name { display: none !important; } #header .nav-profile { width: auto; min-width: 48px; gap: 5px; padding: 2px 3px !important; } #header .nav-profile .profile-arrow { display: inline-flex; color: var(--smw-muted); font-size: 9px; } #header .profile-menu-item > .dropdown-menu.profile { position: absolute !important; top: calc(100% + 5px) !important; right: 0 !important; left: auto !important; min-width: 225px; margin: 0 !important; transform: none !important; } /* Fixed mobile drawer; its inner spacing and card size stay standard. */ #sidebar.sidebar { top: var(--smw-mobile-header-height) !important; bottom: 0 !important; left: calc(-1 * var(--smw-sidebar-width)) !important; width: min(var(--smw-sidebar-width), 88vw) !important; height: calc(100vh - var(--smw-mobile-header-height)) !important; height: calc(100dvh - var(--smw-mobile-header-height)) !important; padding: 18px !important; transition: left 0.24s ease !important; } #sidebar .sidebar-logout { display: none !important; } #sidebar .sidebar-install-app { display: flex; } body.toggle-sidebar #sidebar.sidebar { left: 0 !important; } #main { min-height: calc(100vh - var(--smw-mobile-header-height)); margin-top: var(--smw-mobile-header-height) !important; margin-left: 0 !important; padding: 16px 12px 24px !important; } #footer { margin-left: 0 !important; } /* Existing sidebar has no close button, and any legacy one is hidden. */ #sidebar .btn-close, #sidebar .cmn-btn-close, #sidebar .sidebar-close, #sidebar .close-sidebar, #sidebar [data-bs-dismiss="offcanvas"] { display: none !important; } #sidebarOverlay, #sidebar-overlay, .sidebar-overlay { position: fixed !important; top: var(--smw-mobile-header-height) !important; right: 0 !important; bottom: 0 !important; left: 0 !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; background: rgba(5, 3, 21, 0.62) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: 1040 !important; transition: opacity 0.24s ease, visibility 0.24s ease; } body.toggle-sidebar #sidebarOverlay, body.toggle-sidebar #sidebar-overlay, body.toggle-sidebar .sidebar-overlay { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } html:has(body.toggle-sidebar), body.toggle-sidebar { overflow: hidden !important; overscroll-behavior: none !important; } } @media (max-width: 380px) { #header .header-nav, #header .nav-icons, #header .profile-menu-item { display: flex !important; flex: 0 0 auto !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; margin: 0 0 0 auto !important; margin-inline-start: auto !important; margin-inline-end: 0 !important; } #header .toggle-sidebar-btn { left: 7px; } #header .logo, #header .logo img { max-width: 122px; } #sidebar.sidebar { padding: 16px !important; } } /* ========================================================================== DEFAULT PROFILE AVATAR (permanent) + CUSTOM RESPONSIVE PROFILE BOX The avatar below is embedded in this stylesheet, so it always loads. If a user uploads their own photo, the uploaded photo simply covers it. ========================================================================== */ :root { --smw-default-avatar: url("data:image/jpeg;base64,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"); --smw-avatar-radius: 14px; --smw-profile-box-radius: 18px; } /* Every avatar image falls back to the default photo. */ #header .nav-profile img, #header .profile-thum img, #sidebar .sidebar-profile-avatar img, .profile-thum img, .profile-img img, .profile-image img, .profile-pic img, .user-avatar img, .avatar-upload img, .upload-photo-box img, img.profile-avatar, img.avatar { background-image: var(--smw-default-avatar) !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; background-color: #ffffff; object-fit: cover !important; object-position: center !important; } /* -------------------------------------------------------------------------- 1) Profile avatar / profile box: no circle crop — custom responsive box -------------------------------------------------------------------------- */ /* Sidebar avatar: box-fill, not circular. */ #sidebar .sidebar-profile-avatar img { aspect-ratio: 1 / 1; border-radius: var(--smw-avatar-radius) !important; object-fit: cover !important; } #sidebar .sidebar-profile-avatar { overflow: hidden; border-radius: var(--smw-avatar-radius) !important; } /* Header avatar (top-right nav icon + dropdown header): circular, as in the reference design. */ #header .nav-profile img, #header .profile-thum img { aspect-ratio: 1 / 1; border-radius: 50% !important; object-fit: cover !important; } #header .profile-thum { overflow: hidden; border-radius: 50% !important; } /* Profile page / settings photo box — image fills the whole box area. */ .profile-img, .profile-image, .profile-pic, .profile-thum, .profile-card .avatar-upload, .avatar-upload, .upload-photo-box { position: relative; display: flex !important; align-items: center !important; justify-content: center !important; width: clamp(96px, 30vw, 160px); max-width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background-color: #ffffff; border-radius: var(--smw-profile-box-radius) !important; } .profile-img img, .profile-image img, .profile-pic img, .profile-card .avatar-upload img, .avatar-upload img, .upload-photo-box img, #main .profile-info img, #main .profile-details img { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: center !important; border-radius: var(--smw-profile-box-radius) !important; } /* Keep the upload control clickable and visible on top of the photo box. */ .profile-img input[type="file"], .profile-image input[type="file"], .avatar-upload input[type="file"], .upload-photo-box input[type="file"] { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .profile-img label, .profile-image label, .avatar-upload label, .upload-photo-box label, .avatar-upload .avatar-edit, .upload-photo-box .avatar-edit { position: absolute; right: 6px; bottom: 6px; z-index: 4; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0; color: #ffffff; background: rgba(15, 12, 45, 0.75); border-radius: 9px; cursor: pointer; } @media (max-width: 575.98px) { .profile-img, .profile-image, .profile-pic, .profile-card .avatar-upload, .avatar-upload, .upload-photo-box { width: clamp(88px, 34vw, 130px); } } /* -------------------------------------------------------------------------- 2) Sidebar closes smoothly after a nav click (all breakpoints) -------------------------------------------------------------------------- */ #sidebar.sidebar { will-change: transform; transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), left 0.42s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.42s ease !important; } @media (max-width: 991.98px) { #sidebar.sidebar { left: 0 !important; transform: translateX(-100%) !important; transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) !important; } body.toggle-sidebar #sidebar.sidebar { left: 0 !important; transform: translateX(0) !important; } #sidebarOverlay, #sidebar-overlay, .sidebar-overlay { transition: opacity 0.42s ease, visibility 0.42s ease !important; } } @media (min-width: 992px) { /* Desktop rail slides out with the same easing when collapsed. */ body.sidebar-hidden #sidebar.sidebar, body.toggle-sidebar #sidebar.sidebar { left: 0 !important; transform: translateX(-100%) !important; } body.sidebar-hidden #main, body.toggle-sidebar #main, body.sidebar-hidden #footer, body.toggle-sidebar #footer { margin-left: 0 !important; transition: margin-left 0.42s cubic-bezier(0.22, 0.61, 0.36, 1); } #main, #footer { transition: margin-left 0.42s cubic-bezier(0.22, 0.61, 0.36, 1); } } /* -------------------------------------------------------------------------- 3) Header stays perfectly fixed — no jump, shift or flicker -------------------------------------------------------------------------- */ #header.header { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; width: 100% !important; transform: none !important; transition: none !important; z-index: 1100 !important; } body.toggle-sidebar #header.header, body.sidebar-hidden #header.header { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; width: 100% !important; height: var(--smw-header-height) !important; transform: none !important; margin: 0 !important; } @media (max-width: 991.98px) { body.toggle-sidebar #header.header, body.sidebar-hidden #header.header { height: var(--smw-mobile-header-height) !important; } } /* Locking scroll while the drawer is open must not shift the fixed header. */ html:has(body.toggle-sidebar), body.toggle-sidebar { scrollbar-gutter: stable; } /* ========================================================================== V5 ADDENDUM — desktop width, sidebar typography, mobile header fix, and hamburger/sidebar performance. Nothing above is removed or redesigned. ========================================================================== */ /* -------------------------------------------------------------------------- 1) DESKTOP ONLY — slightly wider menu bar (header) and sidebar rail -------------------------------------------------------------------------- */ @media (min-width: 992px) { :root { --smw-header-height: 76px; --smw-sidebar-width: 296px; } #header.header { height: var(--smw-header-height) !important; min-height: var(--smw-header-height) !important; padding: 0 26px !important; } #header .logo, #header .logo img { max-width: 172px; } #header .logo img { max-height: 38px; } #header .nav-icons { gap: 18px; } #header .nav-profile { min-height: 44px; padding: 4px 10px !important; } #header .nav-profile img { width: 36px; height: 36px; } #header .nav-profile .profile-name { max-width: 130px; font-size: 13.5px; } #sidebar.sidebar { width: var(--smw-sidebar-width) !important; padding: 20px 18px !important; } } /* -------------------------------------------------------------------------- 2) SIDEBAR TYPOGRAPHY — slightly larger, more professional (all breakpoints) -------------------------------------------------------------------------- */ #sidebar .sidebar-new-order { min-height: 46px; font-size: 14px; letter-spacing: 0.2px; } #sidebar .sidebar-nav .nav-link { min-height: 46px; padding: 8px 11px !important; gap: 11px; font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: 0.1px; line-height: 1.25; } #sidebar .sidebar-nav .nav-link.active, #sidebar .sidebar-nav .nav-link:hover { font-weight: 700 !important; } #sidebar .sidebar-icon { flex: 0 0 32px; width: 32px; height: 32px; font-size: 15px; } #sidebar .nav-content { padding-left: 42px !important; } #sidebar .nav-content a { min-height: 34px; font-size: 13px !important; font-weight: 500; } #sidebar .sidebar-logout a, #sidebar .sidebar-install-app { min-height: 44px; font-size: 14px; } #sidebar .sidebar-profile-name { font-size: 16px !important; } #sidebar .sidebar-profile-balance { font-size: 13.5px !important; } /* -------------------------------------------------------------------------- 3) MOBILE — logo and profile stay visible while the drawer is open -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { #header.header, body.toggle-sidebar #header.header { z-index: 1200 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; } body.toggle-sidebar #header .mobile-top-left, body.toggle-sidebar #header .logo-container, body.toggle-sidebar #header .logo, body.toggle-sidebar #header .logo img, body.toggle-sidebar #header .header-nav, body.toggle-sidebar #header .nav-icons, body.toggle-sidebar #header .profile-menu-item, body.toggle-sidebar #header .nav-profile, body.toggle-sidebar #header .nav-profile img, body.toggle-sidebar #header .toggle-sidebar-btn { display: flex !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; } body.toggle-sidebar #header .logo img, body.toggle-sidebar #header .nav-profile img { display: block !important; } /* Drawer and overlay stay strictly below the header, never over it. */ #sidebar.sidebar, body.toggle-sidebar #sidebar.sidebar { top: var(--smw-mobile-header-height) !important; z-index: 1050 !important; } #sidebarOverlay, #sidebar-overlay, .sidebar-overlay { top: var(--smw-mobile-header-height) !important; z-index: 1040 !important; } /* Scroll lock must not resize the fixed header (no jump/flicker). */ html:has(body.toggle-sidebar), body.toggle-sidebar { scrollbar-gutter: stable; overflow: hidden !important; } } /* -------------------------------------------------------------------------- 4) PERFORMANCE — instant first hamburger response, no lag or flicker -------------------------------------------------------------------------- */ #sidebar.sidebar { /* Composite the drawer on the GPU and pre-rasterise it before the first click so the very first open is as fast as later ones. */ backface-visibility: hidden; contain: layout paint style; transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1), left 0.24s cubic-bezier(0.22, 0.61, 0.36, 1) !important; } #sidebar .sidebar-nav { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; content-visibility: auto; contain-intrinsic-size: 1px 700px; } #header .toggle-sidebar-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background 0.12s ease, border-color 0.12s ease !important; } #sidebar .sidebar-nav .nav-link, #sidebar .nav-content a, #sidebar .sidebar-new-order, #sidebar .sidebar-logout a, #sidebar .sidebar-install-app { touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition-duration: 0.14s !important; } /* Hover-only flourishes cost paint on touch devices — keep them for mouse. */ @media (hover: none) { #sidebar .sidebar-nav .nav-link:hover .sidebar-icon, #sidebar .sidebar-nav .nav-link:hover .sidebar-icon i { box-shadow: none; transform: none; } } @media (min-width: 992px) { #main, #footer { transition: margin-left 0.24s cubic-bezier(0.22, 0.61, 0.36, 1) !important; } } @media (max-width: 991.98px) { #sidebarOverlay, #sidebar-overlay, .sidebar-overlay { transition: opacity 0.2s ease, visibility 0.2s ease !important; } } @media (prefers-reduced-motion: reduce) { #sidebar.sidebar, #main, #footer, .sidebar-overlay { transition: none !important; } } /* ========================================================================== v6 ADD-ON — MENU ORDER, PROFILE SETTING GLASS BOX, SMOOTH CLOSE-ON-CLICK (Nothing above this line is modified. Colors, logo, header, main content, backend, pages and auth are untouched.) ========================================================================== */ /* -------------------------------------------------------------------------- 1) SIDEBAR MENU ORDER — now controlled purely by DOM order in sidebar.blade.php (ORDER & SERVICES, ORDER & HISTORIES, SUPPORT & TICKET, EARN MONEY, API & UPDATE, in that order). The old href-sniffing flex `order` rules that used to live here are removed — they were built for the old flat nav-item list and were mis-firing against the new category wrappers (e.g. reordering ORDER & HISTORIES before ORDER & SERVICES because its links happened to contain "orders"). -------------------------------------------------------------------------- */ #sidebar .sidebar-nav { display: flex !important; flex-direction: column; /* leave room for the pinned Profile Setting box */ padding-bottom: 74px !important; } /* Profile Setting is always last and visually detached from the list. */ #sidebar .sidebar-nav > .nav-item:has(a[href*="profile"]), #sidebar .sidebar-nav > .nav-item:has(a[href*="account-setting"]), #sidebar .sidebar-nav > .nav-item.sidebar-profile-setting { order: 999; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); } /* -------------------------------------------------------------------------- 2) PROFILE SETTING — glass / transparent box like the mobile "Install App" -------------------------------------------------------------------------- */ #sidebar .sidebar-nav > .nav-item:has(a[href*="profile"]) > a, #sidebar .sidebar-nav > .nav-item:has(a[href*="account-setting"]) > a, #sidebar .sidebar-profile-setting > a, #sidebar a.sidebar-profile-setting { display: flex !important; align-items: center; gap: 11px; min-height: 46px; margin: 0 2px; padding: 10px 14px !important; color: #ffffff !important; background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 12px !important; backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08); font-size: 14.5px; font-weight: 600; letter-spacing: 0.1px; text-decoration: none; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } #sidebar .sidebar-nav > .nav-item:has(a[href*="profile"]) > a:hover, #sidebar .sidebar-nav > .nav-item:has(a[href*="profile"]) > a:focus-visible, #sidebar .sidebar-nav > .nav-item:has(a[href*="profile"]) > a.active, #sidebar .sidebar-nav > .nav-item:has(a[href*="account-setting"]) > a:hover, #sidebar .sidebar-profile-setting > a:hover, #sidebar a.sidebar-profile-setting:hover { background: rgba(255, 255, 255, 0.14) !important; border-color: rgba(255, 255, 255, 0.3) !important; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.12); outline: none; } #sidebar .sidebar-nav > .nav-item:has(a[href*="profile"]) > a i, #sidebar .sidebar-profile-setting > a i, #sidebar a.sidebar-profile-setting i { font-size: 18px; line-height: 1; opacity: 0.95; } @media (max-width: 991.98px) { #sidebar .sidebar-nav > .nav-item:has(a[href*="profile"]) > a, #sidebar .sidebar-profile-setting > a, #sidebar a.sidebar-profile-setting { min-height: 48px; font-size: 15px; border-radius: 14px; } } /* -------------------------------------------------------------------------- 3) SMOOTH CLOSE ON MENU CLICK — no jump, header never moves -------------------------------------------------------------------------- */ #sidebar.sidebar { will-change: transform; } #header.header, #header { /* Header is fully independent of sidebar state at all times. */ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; transition: none !important; } @media (max-width: 991.98px) { /* The drawer slides, the page underneath never reflows. */ #main, #footer { transition: none !important; margin-left: 0 !important; } } /* ========================================================================== FINAL MOBILE STACKING FIX Header সর্বোচ্চে থাকবে, Sidebar মূল content-এর উপরে থাকবে, এবং মূল content নিচের layer-এ থাকবে। ========================================================================== */ @media (max-width: 991.98px) { /* * Main content ও footer নিচের stacking layer-এ থাকবে */ #main, #footer { position: relative !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; z-index: 1 !important; box-sizing: border-box !important; } /* * Overlay সাইডবার শেষ হওয়ার জায়গা থেকে শুরু হয়ে ডান পাশ পর্যন্ত পুরো * background ঢেকে রাখবে — sidebar প্যানেলের উপর বসবে না (তাই sidebar-এর * উপর কোনো dark tint পড়বে না), কিন্তু পিছনের পেজটা পুরোপুরি dim/frozen * দেখাবে এবং যেকোনো জায়গায় ট্যাপ করলেই overlay-তে ক্লিক লেগে sidebar * বন্ধ হয়ে যাবে। */ #sidebarOverlay, #sidebar-overlay, .sidebar-overlay { left: min(var(--smw-sidebar-width), 88vw) !important; right: 0 !important; z-index: 1200 !important; } /* * Mobile sidebar মূল content-এর উপরে থাকবে */ #sidebar.sidebar { position: fixed !important; width: min(var(--smw-sidebar-width), 88vw) !important; margin: 0 !important; border: 0 !important; z-index: 1300 !important; isolation: isolate; box-shadow: 4px 0 16px rgba(0, 0, 0, 0.24) !important; } /* * Header sidebar এবং overlay—দুটোর উপরে থাকবে */ #header.header, body.toggle-sidebar #header.header { position: fixed !important; z-index: 1400 !important; } } /* ========================================================================== FINAL OVERLAY FIX — overlay stays strictly behind the sidebar panel, never covers the menu, and still dims/freezes the page behind it. This is the single source of truth; it intentionally comes last so it wins over every earlier .sidebar-overlay rule in this file. ========================================================================== */ @media (max-width: 991.98px) { #sidebarOverlay, #sidebar-overlay, .sidebar-overlay { position: fixed !important; top: var(--smw-mobile-header-height) !important; left: min(var(--smw-sidebar-width), 88vw) !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; background: rgba(5, 3, 21, 0.62) !important; z-index: 1200 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.24s ease, visibility 0.24s ease; } body.toggle-sidebar #sidebarOverlay, body.toggle-sidebar #sidebar-overlay, body.toggle-sidebar .sidebar-overlay { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Sidebar panel always renders above the overlay, in front, fully visible. */ #sidebar.sidebar { z-index: 1300 !important; } /* Header stays above both, so it's never dimmed either. */ #header.header { z-index: 1400 !important; } } /* ========================================================================== SIDEBAR TRANSITION — plain slide, no blur. This is the single source of truth for #sidebar.sidebar's transition; it comes last so it wins over every earlier transition declaration in this file. ========================================================================== */ @media (max-width: 991.98px) { #sidebar.sidebar { transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), left 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; filter: none !important; opacity: 1 !important; } #sidebarOverlay, #sidebar-overlay, .sidebar-overlay { transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; } } @media (prefers-reduced-motion: reduce) { #sidebar.sidebar { filter: none !important; opacity: 1 !important; transition: none !important; } } /* ========================================================================== BACKGROUND BLUR + FREEZE — entire page behind the sidebar blurs and locks (no scroll, no interaction) while the drawer is open. ========================================================================== */ @media (max-width: 991.98px) { body.toggle-sidebar { overflow: hidden !important; overscroll-behavior: none !important; touch-action: none !important; } body.toggle-sidebar #main, body.toggle-sidebar #footer { pointer-events: none !important; } } /* ========================================================================== SIDEBAR AVATAR — image fills the box edge-to-edge (no white border/padding gap), and the online-status dot is bigger, brighter, and clearly visible with a glow — matching the reference design. ========================================================================== */ #sidebar .sidebar-profile-avatar { padding: 0 !important; background: transparent !important; } #sidebar .sidebar-profile-avatar img { width: 100% !important; height: 100% !important; border-radius: 12px !important; object-fit: cover !important; } #sidebar .sidebar-profile-status { right: -1px !important; bottom: -1px !important; width: 15px !important; height: 15px !important; background: #2be37f !important; border: 2.5px solid #ffffff !important; box-shadow: none !important; z-index: 2; } /* ========================================================================== HEADER BALANCE BADGE — always-visible balance pill in the header (desktop only; hidden on mobile alongside the other nav-icons, same as the existing pattern, to keep the compact mobile header uncluttered). ========================================================================== */ #header .header-balance-badge { display: flex; align-items: center; gap: 7px; padding: 7px 14px; color: #ffffff; background: linear-gradient(135deg, rgba(43, 227, 127, 0.24), rgba(43, 227, 127, 0.1)); border: 1px solid rgba(43, 227, 127, 0.4); border-radius: 10px; backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1); font-size: 13px; font-weight: 700; white-space: nowrap; } #header .header-balance-badge i { font-size: 13px; color: #4de89a; } /* ========================================================================== PROFILE TRIGGER — bordered box around avatar + dropdown arrow, kept identical on both desktop and mobile (overrides the mobile-only transparent/border:0 rule from the MOBILE section above). ========================================================================== */ #header .nav-profile { background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 10px !important; } #header .nav-profile:hover, #header .nav-profile:focus-visible { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.3) !important; } /* ========================================================================== v7 PREMIUM HEADER REFRESH Scope: header bar only (hamburger, theme toggle, profile trigger, profile dropdown, mobile nav width). Sidebar menu, colors, logo, main content and backend logic are untouched. This section is intentionally the last block in the file so it wins the cascade over every earlier header rule above without needing to edit them. ========================================================================== */ :root { --smw-navbox-h: 46px; --smw-navbox-radius: 13px; --smw-navbox-bg: rgba(255, 255, 255, 0.055); --smw-navbox-bg-hover: rgba(148, 112, 255, 0.22); --smw-navbox-bg-active: rgba(148, 112, 255, 0.34); --smw-navbox-border: rgba(148, 112, 255, 0.55); --smw-navbox-border-hover: rgba(180, 150, 255, 0.9); --smw-navbox-blur: blur(14px) saturate(160%); } @media (max-width: 991.98px) { :root { --smw-navbox-h: 40px; } } /* -------------------------------------------------------------------------- 1) Hamburger — same glass/violet language as the rest of the group -------------------------------------------------------------------------- */ #header .toggle-sidebar-btn { flex: 0 0 var(--smw-navbox-h) !important; width: var(--smw-navbox-h) !important; height: var(--smw-navbox-h) !important; background: var(--smw-navbox-bg) !important; border: 1px solid var(--smw-navbox-border) !important; border-radius: var(--smw-navbox-radius) !important; backdrop-filter: var(--smw-navbox-blur); -webkit-backdrop-filter: var(--smw-navbox-blur); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08); font-size: 19px; } #header .toggle-sidebar-btn:hover, #header .toggle-sidebar-btn:focus-visible { background: var(--smw-navbox-bg-hover) !important; border-color: var(--smw-navbox-border-hover) !important; } #header .toggle-sidebar-btn:active { background: var(--smw-navbox-bg-active) !important; transform: scale(0.96); } /* -------------------------------------------------------------------------- 2) Day / Night toggle — becomes its own glass box, same size as the group -------------------------------------------------------------------------- */ #header .nav-item.mobile-hide-icon:has(> .toggle-btn) { display: flex; align-items: center; } #header .toggle-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 var(--smw-navbox-h); width: var(--smw-navbox-h); height: var(--smw-navbox-h); background: var(--smw-navbox-bg) !important; border: 1px solid var(--smw-navbox-border) !important; border-radius: var(--smw-navbox-radius) !important; backdrop-filter: var(--smw-navbox-blur); -webkit-backdrop-filter: var(--smw-navbox-blur); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08); font-size: 15px; transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease; } #header .toggle-btn:hover, #header .toggle-btn:focus-visible { background: var(--smw-navbox-bg-hover) !important; border-color: var(--smw-navbox-border-hover) !important; outline: none; } #header .toggle-btn:active { background: var(--smw-navbox-bg-active) !important; transform: scale(0.96); } /* -------------------------------------------------------------------------- 3) Balance badge — same height as the group, keeps its own accent color -------------------------------------------------------------------------- */ #header .header-balance-badge { height: var(--smw-navbox-h); border-radius: var(--smw-navbox-radius); box-sizing: border-box; } /* -------------------------------------------------------------------------- 4) Profile trigger — matches the reference: bordered violet glass box, circular avatar, name, arrow. Identical box language on mobile too (name hides on small screens, the box itself stays square). -------------------------------------------------------------------------- */ #header .nav-profile { display: inline-flex !important; align-items: center !important; justify-content: center; gap: 8px; height: var(--smw-navbox-h) !important; min-height: var(--smw-navbox-h) !important; padding: 0 12px !important; background: var(--smw-navbox-bg) !important; border: 1px solid var(--smw-navbox-border) !important; border-radius: var(--smw-navbox-radius) !important; backdrop-filter: var(--smw-navbox-blur); -webkit-backdrop-filter: var(--smw-navbox-blur); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease; } #header .nav-profile img { width: calc(var(--smw-navbox-h) - 14px); height: calc(var(--smw-navbox-h) - 14px); border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50% !important; object-fit: cover; } #header .nav-profile .profile-name { max-width: 130px; font-size: 13.5px; font-weight: 600; } #header .nav-profile .profile-arrow { font-size: 10px; transition: transform 0.18s ease; } #header .nav-profile:hover, #header .nav-profile:focus-visible { background: var(--smw-navbox-bg-hover) !important; border-color: var(--smw-navbox-border-hover) !important; outline: none; } /* Click / open state — the trigger itself changes color, per request #3 */ #header .nav-profile:active, #header .nav-profile[aria-expanded="true"] { background: var(--smw-navbox-bg-active) !important; border-color: var(--smw-navbox-border-hover) !important; box-shadow: 0 0 0 3px rgba(148, 112, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1); } #header .nav-profile[aria-expanded="true"] .profile-arrow { transform: rotate(180deg); color: #ffffff; } @media (max-width: 991.98px) { #header .nav-profile { width: var(--smw-navbox-h); min-width: var(--smw-navbox-h); padding: 0 !important; } #header .nav-profile .profile-name { display: none !important; } } /* -------------------------------------------------------------------------- 5) Profile dropdown menu — responsive click feedback on every item -------------------------------------------------------------------------- */ #header .dropdown-menu.profile { border-color: var(--smw-navbox-border) !important; backdrop-filter: var(--smw-navbox-blur); -webkit-backdrop-filter: var(--smw-navbox-blur); } #header .profile .dropdown-item:active { color: #ffffff !important; background: var(--smw-navbox-bg-active) !important; } /* -------------------------------------------------------------------------- 6) Mobile header — a touch more breathing room between the boxed icons -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { #header.header, body.toggle-sidebar #header.header { height: 66px !important; min-height: 66px !important; padding: 0 14px !important; } #sidebar.sidebar, body.toggle-sidebar #sidebar.sidebar { top: 66px !important; height: calc(100vh - 66px) !important; height: calc(100dvh - 66px) !important; } #sidebarOverlay, #sidebar-overlay, .sidebar-overlay { top: 66px !important; } #main { margin-top: 66px !important; } #header .nav-icons { gap: 10px; } } /* ========================================================================== v8 HEADER FIX-UP - Mobile profile trigger: fits avatar + arrow properly (no more cramped square), same height as the hamburger/toggle boxes. - Deep violet "pressed" color on every header box when clicked. - Profile dropdown popup rebuilt for the plain 3-row list (avatar/name header block removed from the markup) — compact, same look on every breakpoint. - Defensive hide, in case an older cached header still renders the currency/USD selector or the notification bell. Scope: header only. Sidebar menu, colors, logo, main content untouched. Comes last in the file, so it wins the cascade over every rule above. ========================================================================== */ :root { --smw-navbox-pressed: #4c1d95; --smw-navbox-pressed-border: #a78bfa; } /* -------------------------------------------------------------------------- 1) Deep violet pressed state — hamburger, theme toggle, profile trigger -------------------------------------------------------------------------- */ #header .toggle-sidebar-btn:active, #header .toggle-sidebar-btn.pressed { background: var(--smw-navbox-pressed) !important; border-color: var(--smw-navbox-pressed-border) !important; color: #ffffff !important; } #header .toggle-btn:active, #header .toggle-btn.pressed { background: var(--smw-navbox-pressed) !important; border-color: var(--smw-navbox-pressed-border) !important; } #header .nav-profile:active, #header .nav-profile[aria-expanded="true"] { background: var(--smw-navbox-pressed) !important; border-color: var(--smw-navbox-pressed-border) !important; box-shadow: 0 0 0 3px rgba(148, 112, 255, 0.28) !important; } /* -------------------------------------------------------------------------- 2) Mobile profile trigger — auto width so avatar + arrow actually fit, height locked to the same box height as every other header icon. -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { #header .nav-profile { display: inline-flex !important; width: auto !important; min-width: unset !important; height: var(--smw-navbox-h) !important; min-height: var(--smw-navbox-h) !important; padding: 0 9px !important; gap: 6px; box-sizing: border-box; } #header .nav-profile img { width: 24px !important; height: 24px !important; flex: 0 0 24px; border-width: 1.5px; } #header .nav-profile .profile-arrow { flex: 0 0 auto; font-size: 9px; } #header .profile-menu-item { height: var(--smw-navbox-h); } } /* -------------------------------------------------------------------------- 3) Profile dropdown — rebuilt for the plain list (no avatar header row) -------------------------------------------------------------------------- */ #header .dropdown-menu.profile { min-width: 190px !important; padding: 6px !important; } #header .profile .dropdown-item { gap: 10px; min-height: 38px; padding: 8px 10px !important; border-radius: 8px; font-size: 13.5px; } #header .profile .dropdown-item:not(:last-child) { margin-bottom: 2px; } #header .profile .dropdown-item i { width: 16px; font-size: 14px; } /* -------------------------------------------------------------------------- 4) Defensive hide — in case an old cached header still renders the currency/USD selector or the bell notification icon anywhere. -------------------------------------------------------------------------- */ #header .language-box, #header li:has(> .language-box), #header .nav-icons .fa-bell, #header .nav-icons li:has(.fa-bell), #header .notifications, #header .badge-number { display: none !important; } /* ========================================================================== v9 MOBILE PROFILE BOX — locked to the same height as the other header boxes (it was rendering taller than the translate/day-night box because the avatar image could push the box past its intended height). This is the single source of truth for #header .nav-profile on mobile; it comes last in the file so nothing above can make the box grow again. Scope: header only, mobile breakpoint. Nothing else touched. ========================================================================== */ @media (max-width: 991.98px) { #header .profile-menu-item { display: flex !important; align-items: center !important; height: auto !important; overflow: visible; } #header .nav-profile { display: inline-flex !important; flex-wrap: nowrap; align-items: center !important; justify-content: center !important; width: auto !important; height: var(--smw-navbox-h) !important; min-height: var(--smw-navbox-h) !important; max-height: var(--smw-navbox-h) !important; margin: 0 !important; padding: 0 10px !important; gap: 7px; overflow: hidden; box-sizing: border-box !important; line-height: 1; } #header .nav-profile img { display: block !important; width: 36px !important; height: calc(var(--smw-navbox-h) - 12px) !important; max-height: calc(var(--smw-navbox-h) - 12px) !important; flex: 0 0 auto; border-radius: 50% !important; object-fit: cover !important; border-width: 1.5px; } #header .nav-profile .profile-name { display: none !important; } #header .nav-profile .profile-arrow { display: inline-flex !important; flex: 0 0 auto; font-size: 11px; line-height: 1; color: var(--smw-muted); } } /* ========================================================================== v10 HEADER PROFILE AVATAR — squared/"fixed" box like the sidebar avatar, not circular. Overrides the earlier circular-avatar rule for the header trigger only (dropdown popup and sidebar avatar are untouched). Comes last in the file so it wins over the older circular rule. ========================================================================== */ #header .nav-profile img { border-radius: 8px !important; background: #ffffff !important; object-fit: cover !important; } @media (max-width: 991.98px) { #header .nav-profile img { border-radius: 7px !important; } } @media (min-width: 992px) { #header .nav-profile img { border-radius: 9px !important; } } /* ========================================================================== v11 MOBILE HEADER REFINEMENT — closer to the reference proportions: a slightly more compact bar, a fully pill-shaped profile trigger with an oval avatar (matches the box's curve instead of a hard square/circle), and a clear divider line above "Logout" in the dropdown. Scope: header only (mobile). Sidebar, desktop view, colors untouched. Comes last in the file, so it wins the cascade. ========================================================================== */ @media (max-width: 991.98px) { /* 1) A touch more compact bar, closer to the reference proportions */ #header.header, body.toggle-sidebar #header.header { height: 60px !important; min-height: 60px !important; } #sidebar.sidebar, body.toggle-sidebar #sidebar.sidebar { top: 60px !important; height: calc(100vh - 60px) !important; height: calc(100dvh - 60px) !important; } #sidebarOverlay, #sidebar-overlay, .sidebar-overlay { top: 60px !important; } #main { margin-top: 60px !important; } /* 2) Profile trigger — full pill shape, oval avatar matching the curve */ #header .nav-profile { border-radius: 999px !important; padding: 0 12px !important; } #header .nav-profile img { border-radius: 50% !important; } #header .toggle-btn, #header .toggle-sidebar-btn { border-radius: 14px !important; } } /* 3) Divider above "Logout" in the profile dropdown, on every breakpoint */ #header .profile li:last-child { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.18); } #header .profile li:last-child .dropdown-item { margin-bottom: 0; } /* ========================================================================== v12 PROFILE DROPDOWN — squared/lightly-rounded box (not a pill), solid filled-white icons, a bold divider above Logout, and distinct click colors: deep blue for Profile/Settings, red for Logout. Sizing matches the reference screenshot. Scope: dropdown popup only. Comes last in the file, so it wins the cascade. ========================================================================== */ :root { --smw-dropdown-blue: #1d3a8f; --smw-dropdown-blue-border: #3b5fd9; --smw-dropdown-red: #b91c1c; --smw-dropdown-red-border: #ef4444; } /* 1) Box shape — lightly rounded rectangle, not a pill */ #header .dropdown-menu.profile { border-radius: 10px !important; min-width: 200px !important; padding: 8px !important; } /* 2) Icons — solid, filled white */ #header .profile .dropdown-item i { color: #ffffff !important; font-size: 15px; width: 18px; text-align: center; } #header .profile .dropdown-item span { color: #ffffff; font-weight: 500; } /* 3) Row sizing, matching the reference proportions */ #header .profile .dropdown-item { min-height: 40px; padding: 9px 12px !important; border-radius: 8px; gap: 10px; transition: background 0.15s ease, border-color 0.15s ease; } /* 4) Bold divider above Logout */ #header .profile li:last-child { margin-top: 6px; padding-top: 6px; border-top: 2px solid rgba(255, 255, 255, 0.55) !important; } /* 5) Click / hover colors — deep blue for Profile & Settings ... */ #header .profile li:not(:last-child) .dropdown-item:hover, #header .profile li:not(:last-child) .dropdown-item:focus-visible, #header .profile li:not(:last-child) .dropdown-item:active { background: var(--smw-dropdown-blue) !important; box-shadow: inset 0 0 0 1px var(--smw-dropdown-blue-border); } /* ... and red for Logout */ #header .profile .logout-item:hover, #header .profile .logout-item:focus-visible, #header .profile .logout-item:active { background: var(--smw-dropdown-red) !important; box-shadow: inset 0 0 0 1px var(--smw-dropdown-red-border); } /* ========================================================================== SIDEBAR — CATEGORY GROUPS (ORDER & SERVICES / ORDER & HISTORIES / SUPPORT & TICKET / EARN MONEY / API & UPDATE) ========================================================================== */ #sidebar .nav-category + .nav-category { margin-top: 14px; } #sidebar .sidebar-category-header { display: flex !important; align-items: center; min-height: 38px !important; padding: 8px 10px !important; gap: 8px; color: #ffffff !important; background: linear-gradient(90deg, rgba(58, 33, 112, 0.82), rgba(42, 26, 82, 0.72)) !important; border: 1px solid rgba(155, 110, 255, 0.32) !important; border-radius: 8px !important; backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06); font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: 0.6px; text-transform: uppercase; text-decoration: none !important; } #sidebar a.sidebar-category-header:hover, #sidebar a.sidebar-category-header:focus-visible { background: linear-gradient(90deg, rgba(69, 40, 128, 0.88), rgba(51, 31, 96, 0.78)) !important; outline: none; } #sidebar .sidebar-category-header .sidebar-arrow { width: 15px; height: 15px; font-size: 9px !important; } /* Static categories (ORDER & SERVICES, ORDER & HISTORIES) — always expanded, the arrow is shown for visual consistency but carries no toggle behaviour. */ #sidebar .nav-category-static .sidebar-arrow { opacity: 0.55; } /* Split header (SUPPORT & TICKET): text navigates, the separate button toggles. */ #sidebar .sidebar-category-split { padding: 0 !important; gap: 0; } #sidebar .sidebar-category-link { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; min-height: 34px; padding: 6px 4px 6px 8px; color: inherit !important; text-decoration: none !important; } #sidebar .sidebar-category-link:hover, #sidebar .sidebar-category-link:focus-visible { color: #ffffff !important; outline: none; } #sidebar .sidebar-category-toggle-btn { display: flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 34px; padding: 0; color: var(--smw-muted); background: transparent; border: 0; border-radius: 6px; cursor: pointer; } #sidebar .sidebar-category-toggle-btn:hover, #sidebar .sidebar-category-toggle-btn:focus-visible { color: #ffffff; background: rgba(255, 255, 255, 0.07); outline: none; } #sidebar .sidebar-category-toggle-btn[aria-expanded="true"] .sidebar-arrow { transform: rotate(180deg); } #sidebar .sidebar-arrow { transition: transform 0.18s ease; } /* -------------------------------------------------------------------------- Submenu items shifted closer to the sidebar's left edge (less indent) -------------------------------------------------------------------------- */ #sidebar .nav-content { padding: 2px 0 3px 18px !important; } #sidebar .nav-content-nested { padding-left: 16px !important; } /* First two entries in ORDER & SERVICES get a slightly stronger highlight. */ #sidebar .sidebar-highlight > a { font-weight: 700 !important; } /* New Order — plain like other items, just yellow text. */ #sidebar .sidebar-link-yellow, #sidebar .sidebar-link-yellow span { color: #ffd23f !important; } #sidebar .sidebar-link-yellow i { color: #ffd23f !important; } #sidebar .sidebar-link-yellow:hover, #sidebar .sidebar-link-yellow:focus-visible, #sidebar .sidebar-link-yellow.active { color: #ffe27a !important; background: rgba(118, 76, 255, 0.2) !important; } #sidebar .sidebar-link-yellow:hover span, #sidebar .sidebar-link-yellow:focus-visible span, #sidebar .sidebar-link-yellow.active span, #sidebar .sidebar-link-yellow:hover i, #sidebar .sidebar-link-yellow:focus-visible i, #sidebar .sidebar-link-yellow.active i { color: #ffe27a !important; } /* ========================================================================== NEED HELP? CONTACT US — desktop only, standard bordered box with icon ========================================================================== */ #sidebar .sidebar-help-box { flex: 0 0 auto; margin: 10px 0 0; } #sidebar .sidebar-help-box a { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 9px 12px; color: var(--smw-text); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--smw-border); border-radius: 10px; text-decoration: none; transition: background 0.18s ease, border-color 0.18s ease; } #sidebar .sidebar-help-box a:hover, #sidebar .sidebar-help-box a:focus-visible { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.24); outline: none; } #sidebar .sidebar-help-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; color: #55c8ff; background: rgba(15, 37, 92, 0.88); border-radius: 8px; font-size: 15px; } #sidebar .sidebar-help-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } #sidebar .sidebar-help-text strong { color: #ffffff; font-size: 13px; } #sidebar .sidebar-help-text small { color: var(--smw-muted); font-size: 11.5px; } #sidebar .sidebar-help-arrow { flex: 0 0 auto; margin-left: auto; color: var(--smw-muted); font-size: 13px; } /* Mobile: hide entirely, as requested — desktop keeps it. */ @media (max-width: 991.98px) { #sidebar .sidebar-help-box { display: none !important; } } /* ========================================================================== SIDEBAR — hide scrollbar (still scrollable, just no visible track/thumb) ========================================================================== */ #sidebar.sidebar, #sidebar .sidebar-nav { scrollbar-width: none !important; -ms-overflow-style: none !important; } #sidebar.sidebar::-webkit-scrollbar, #sidebar .sidebar-nav::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* ========================================================================== TOUCH FEEDBACK — deep blue on tap/press, so mobile users (no :hover) get the same visible highlight desktop gets on hover. ========================================================================== */ #sidebar .sidebar-nav .nav-link:active, #sidebar .sidebar-category-link:active, #sidebar .sidebar-category-toggle-btn:active, #sidebar .nav-content a:active { color: #ffffff !important; background: rgba(45, 65, 200, 0.55) !important; } /* Category headers get a deep-blue GLASS effect on tap, instead of flat blue. */ #sidebar .sidebar-category-header:active { color: #ffffff !important; background: linear-gradient(90deg, rgba(24, 60, 200, 0.55), rgba(20, 40, 150, 0.4)) !important; border-color: rgba(90, 150, 255, 0.55) !important; backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); } #sidebar .sidebar-new-order:active { filter: brightness(0.92); } /* ========================================================================== PERMANENT ACTIVE-CATEGORY HIGHLIGHT — stays visible (not just on hover) whenever a page inside that category is the current page. ========================================================================== */ #sidebar a.sidebar-category-header.active, #sidebar .sidebar-category-split.active { color: #ffffff !important; background: linear-gradient(90deg, rgba(103, 80, 245, 0.4), rgba(86, 65, 184, 0.18)) !important; box-shadow: inset 2px 0 0 #8b6cff; } #sidebar .sidebar-category-split.active .sidebar-category-link { color: #ffffff !important; } #sidebar a.sidebar-category-header.active .sidebar-arrow, #sidebar .sidebar-category-split.active .sidebar-arrow { color: #ffffff; opacity: 1; } /* ========================================================================== NEW ORDER PAGE — centered avatar/name/email profile card, plus the stat boxes below it (My Balance / Total Orders / Spent Balance / All Services — "All Services" replaces a points/loyalty stat since no such feature exists in this project's data). Reuses the theme's existing --variables, no new colors introduced. ========================================================================== */ .order-profile-card { border-radius: 14px; } /* Desktop: avatar + info side by side */ .order-profile-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } /* Mobile: avatar + info centered/stacked */ .order-profile-centered { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 22px; padding-bottom: 22px; } .order-profile-avatar img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary-color); } .order-profile-top .order-profile-avatar img { width: 64px; height: 64px; } .order-profile-name { font-weight: 700; margin-top: 14px; margin-bottom: 4px; } .order-profile-top .order-profile-name { margin-top: 0; } .order-profile-email { color: var(--grayish-blue); font-size: 14px; margin-bottom: 12px; } .order-profile-email i { margin-right: 6px; } .order-profile-badges { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .order-profile-top .order-profile-badges { justify-content: flex-start; } .order-badge-user, .order-badge-joined { padding: 6px 12px; font-weight: 600; font-size: 12.5px; } .order-badge-user { background: var(--primary-color-opacity-low); color: var(--primary-color); } .order-badge-joined { background: var(--moderate-lime-green-opacity-low); color: var(--moderate-lime-green); } .order-stats-row { margin-top: 4px; } .order-stat-box { display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 16px; background-color: var(--bg-color3); border: 1px solid var(--border-color1); border-radius: 12px; box-shadow: var(--shadow1); } .order-stat-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } /* Light/white icon glyph on a tinted background for premium contrast */ .order-stat-icon i { color: var(--white); font-size: 20px; } .order-stat-icon.icon-user { background: var(--primary-color-opacity-low2); } .order-stat-icon.icon-balance { background: var(--secondary-color-opacity-low); } .order-stat-icon.icon-orders { background: var(--moderate-lime-green-opacity-low); } .order-stat-icon.icon-spent { background: var(--soft-red-opacity-low); } .order-stat-icon.icon-services { background: rgba(251, 97, 22, 0.18); } .order-stat-text { display: flex; flex-direction: column; min-width: 0; } .order-stat-label { font-size: 12.5px; font-weight: 600; color: var(--grayish-blue); line-height: 1.3; } .order-stat-value { font-size: 16px; font-weight: 700; color: var(--heading-color); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 575px) { .order-stat-box { padding: 12px; } .order-stat-value { font-size: 14px; } } /* Desktop/tablet only — larger stat boxes (User Name / Panel Order / All Services / My Balance row). Mobile design above is untouched. */ @media (min-width: 768px) { .order-stat-box { padding: 22px 24px; } .order-stat-icon { width: 64px; height: 64px; border-radius: 14px; } .order-stat-icon i { font-size: 26px; } .order-stat-label { font-size: 14px; } .order-stat-value { font-size: 20px; } } /* ========================================================================== PAGE TITLE / BREADCRUMB — hidden on desktop only Every dashboard page (New Order, Fund, Profile, Tickets, Orders, Referral, etc.) renders the same ".pagetitle" block (an

+ a large breadcrumb