/* ═══════════════════════════════════════════════════════════════ Aqua Theme — Customizer Layout CSS Controls layout modes via data-layout attribute on . NavMenu (.panelx-navbar) serves as topbar (horizontal) or fixed sidebar (vertical/semibox). No separate sidebar component. Scoped to [data-onlinemes-theme="aqua"] — Classic unaffected. ═══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 1. HORIZONTAL LAYOUT (default) ══════════════════════════════════════════════════════════════ */ [data-layout="horizontal"] .aqua-main-content { margin-left: 0; width: 100%; } /* ══════════════════════════════════════════════════════════════ 2. VERTICAL / SEMIBOX LAYOUT — navbar → sidebar transform Semibox inherits all vertical rules via :is() selector. ══════════════════════════════════════════════════════════════ */ :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper { display: flex; min-height: 100vh; } /* --- 2.1 Navbar → Fixed Sidebar ----------------------------- */ :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar { position: fixed; top: 0; left: 0; bottom: 0; right: auto; width: 250px; height: 100vh; flex-direction: column; align-items: stretch; overflow-y: auto; overflow-x: hidden; z-index: 1040; border-bottom: none; border-right: 1px solid var(--border, rgba(255,255,255,.08)); transition: width 0.2s ease; } /* --- 2.2 Brand / Logo (CSS pseudo-element) ------------------ */ :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar::before { content: 'OnlineMes'; display: block; padding: 16px 20px; font-size: 1.1rem; font-weight: 600; color: var(--text-primary, #e2e8f0); border-bottom: 1px solid var(--border, rgba(255,255,255,.1)); flex-shrink: 0; } /* --- 2.3 Container-fluid → column --------------------------- */ :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .container-fluid { flex-direction: column; align-items: stretch; padding: 0; height: 100%; overflow: hidden; } /* --- 2.4 Navbar collapse — always visible, vertical --------- */ :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .navbar-collapse { display: flex !important; flex-direction: column; flex: 1; overflow-y: auto; overflow-x: hidden; align-items: stretch; } /* --- 2.5 Nav items → vertical stack ------------------------- */ :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav { flex-direction: column !important; width: 100%; } :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item { width: 100%; } :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > .nav-link, :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > a { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 20px !important; font-size: 12px; white-space: nowrap; border-radius: 0; transition: background 0.15s ease; } :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > .nav-link:hover, :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > a:hover { background: rgba(255,255,255,0.06); } /* --- 2.6 Dropdown menus → inline expand --------------------- */ :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu { position: static !important; float: none; width: 100%; box-shadow: none; border: none; border-radius: 0; background: rgba(0,0,0,0.08); margin: 0; padding: 0 0 0 1rem; display: none; } :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu.show { display: block !important; } :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu .dropdown-item { padding: 6px 16px; font-size: 11px; white-space: nowrap; color: inherit; } :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu .dropdown-item:hover { background: rgba(255,255,255,0.05); } /* --- 2.7 Nested submenus → right flyout on desktop ---------- */ @media (min-width: 992px) { :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar, :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .container-fluid, :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .navbar-collapse { overflow-x: visible; } :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu { position: relative; } :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu > .dropdown-menu { position: absolute !important; top: 0; left: 100%; display: none !important; visibility: hidden !important; opacity: 0 !important; min-width: 200px; margin: 0; padding: 0; background: var(--bg-card); border-left: 6px solid rgba(148, 163, 184, 0.12); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.24); transition: opacity 0.15s ease, visibility 0.15s ease; z-index: 1060; } :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu .dropdown-item { padding-left: 20px; } :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu:hover > .dropdown-menu, :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu > .dropdown-menu.show { display: block !important; visibility: visible !important; opacity: 1 !important; } :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu > a::after { border-left-color: #ccc; border-top-color: transparent; border-width: 5px 0 5px 5px; border-style: solid; margin-top: 5px; transform: none; } } /* Dropdown toggle caret → down direction (already default, but ensure) */ :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-toggle::after { margin-left: auto; } /* --- 2.8 Right-side nav items (ms-auto) → sidebar bottom ---- */ :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav.ms-auto { margin-top: auto !important; margin-left: 0 !important; border-top: 1px solid var(--border, rgba(255,255,255,.08)); padding-top: 4px; } /* --- 2.9 Toggler — hide on desktop, show on mobile ---------- */ :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .navbar-toggler { display: none; } /* --- 2.10 Main content push --------------------------------- */ :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-main-content { margin-left: 250px; width: calc(100% - 250px); min-height: 100vh; transition: margin-left 0.2s ease, width 0.2s ease; } /* --- 2.10a Remove top-bar padding when navbar is sidebar ---- */ :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-main-content .content { padding-top: 0 !important; } /* --- 2.11 Footer push --------------------------------------- */ :is([data-layout="vertical"], [data-layout="semibox"]) #site-bottom-bar { left: 250px; width: calc(100% - 250px); transition: left 0.2s ease, width 0.2s ease; } /* ══════════════════════════════════════════════════════════════ 3. SIDEBAR SIZE (vertical / semibox) ══════════════════════════════════════════════════════════════ */ /* --- lg (250px — default) ----------------------------------- */ :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="lg"] .aqua-layout-wrapper > .panelx-navbar { width: 250px; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="lg"] .aqua-main-content { margin-left: 250px; width: calc(100% - 250px); } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="lg"] #site-bottom-bar { left: 250px; width: calc(100% - 250px); } /* --- md (180px) --------------------------------------------- */ :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="md"] .aqua-layout-wrapper > .panelx-navbar { width: 180px; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="md"] .aqua-main-content { margin-left: 180px; width: calc(100% - 180px); } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="md"] #site-bottom-bar { left: 180px; width: calc(100% - 180px); } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="md"] .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > .nav-link, :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="md"] .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > a { font-size: 11px; padding: 6px 12px !important; } /* --- sm-hover (70px → 250px on hover) ----------------------- */ :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar { width: 70px; transition: width 0.2s ease; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover { width: 250px; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-main-content { margin-left: 70px; width: calc(100% - 70px); } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] #site-bottom-bar { left: 70px; width: calc(100% - 70px); } /* Collapsed state: hide text — !important needed to beat site.css (color: #fff !important) */ :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > .nav-link, :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > a { justify-content: center; font-size: 0 !important; color: transparent !important; overflow: hidden; white-space: nowrap; gap: 0; padding: 10px 0 !important; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > .nav-link > i, :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > a > i { font-size: 22px !important; display: inline-block; line-height: 1; color: rgba(255,255,255,0.7) !important; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar .dropdown-menu { display: none !important; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar .dropdown-toggle::after, :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar .caret { display: none !important; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar::before { content: 'OM'; font-size: 14px !important; font-weight: 700; text-align: center; padding: 14px 0; color: rgba(255,255,255,0.85) !important; } /* Expanded state on hover: restore text */ :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover .navbar-nav > .nav-item > .nav-link, :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover .navbar-nav > .nav-item > a { justify-content: flex-start; font-size: 12px !important; color: rgba(255,255,255,0.85) !important; white-space: nowrap; gap: 8px; padding: 8px 20px !important; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover .navbar-nav > .nav-item > .nav-link > i, :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover .navbar-nav > .nav-item > a > i { font-size: 18px !important; color: rgba(255,255,255,0.85) !important; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover .dropdown-menu.show { display: block !important; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover .dropdown-toggle::after { display: inline-block !important; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover .caret { display: inline !important; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover::before { content: 'OnlineMes'; font-size: 1.1rem !important; font-weight: 600; padding: 16px 20px; color: rgba(255,255,255,0.85) !important; } /* ══════════════════════════════════════════════════════════════ 4. SIDEBAR COLOR (vertical / semibox) ══════════════════════════════════════════════════════════════ */ /* --- theme (uses CSS variables from active theme, no override needed) --- */ /* --- gradient ----------------------------------------------- */ :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient"] .aqua-layout-wrapper > .panelx-navbar { background: linear-gradient(to bottom, #405189, #0ab39c) !important; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient"] .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > a, :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient"] .aqua-layout-wrapper > .panelx-navbar .dropdown-item { color: rgba(255,255,255,0.85) !important; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient"] .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > a:hover, :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient"] .aqua-layout-wrapper > .panelx-navbar .dropdown-item:hover { background: rgba(255,255,255,0.1); } /* --- gradient-2 (info → secondary: cyan → gray) ------------ */ :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient-2"] .aqua-layout-wrapper > .panelx-navbar { background: linear-gradient(to bottom, #299cdb, #6c757d) !important; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient-2"] .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > a, :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient-2"] .aqua-layout-wrapper > .panelx-navbar .dropdown-item { color: rgba(255,255,255,0.85) !important; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient-2"] .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > a:hover, :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient-2"] .aqua-layout-wrapper > .panelx-navbar .dropdown-item:hover { background: rgba(255,255,255,0.1); } /* --- gradient-3 (info → success: cyan → green) -------------- */ :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient-3"] .aqua-layout-wrapper > .panelx-navbar { background: linear-gradient(to bottom, #299cdb, #0ab39c) !important; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient-3"] .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > a, :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient-3"] .aqua-layout-wrapper > .panelx-navbar .dropdown-item { color: rgba(255,255,255,0.85) !important; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient-3"] .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > a:hover, :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient-3"] .aqua-layout-wrapper > .panelx-navbar .dropdown-item:hover { background: rgba(255,255,255,0.1); } /* --- gradient-4 (dark → primary: dark → blue) --------------- */ :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient-4"] .aqua-layout-wrapper > .panelx-navbar { background: linear-gradient(to bottom, #1a1d21, #405189) !important; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient-4"] .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > a, :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient-4"] .aqua-layout-wrapper > .panelx-navbar .dropdown-item { color: rgba(255,255,255,0.85) !important; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient-4"] .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > a:hover, :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar="gradient-4"] .aqua-layout-wrapper > .panelx-navbar .dropdown-item:hover { background: rgba(255,255,255,0.1); } /* ══════════════════════════════════════════════════════════════ 5. SIDEBAR VIEW (vertical / semibox) ══════════════════════════════════════════════════════════════ */ /* --- detached ----------------------------------------------- */ :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-view="detached"] .aqua-layout-wrapper > .panelx-navbar { margin: 16px; height: calc(100vh - 32px); border-radius: 8px; box-shadow: var(--shadow, 0 4px 24px rgba(0,0,0,.28)); } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-view="detached"] .aqua-main-content { margin-left: calc(250px + 32px); width: calc(100% - 250px - 32px); } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-view="detached"] #site-bottom-bar { left: calc(250px + 32px); width: calc(100% - 250px - 32px); } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-view="detached"][data-sidebar-size="md"] .aqua-main-content { margin-left: calc(180px + 32px); width: calc(100% - 180px - 32px); } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-view="detached"][data-sidebar-size="md"] #site-bottom-bar { left: calc(180px + 32px); width: calc(100% - 180px - 32px); } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-view="detached"][data-sidebar-size="sm-hover"] .aqua-main-content { margin-left: calc(70px + 32px); width: calc(100% - 70px - 32px); } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-view="detached"][data-sidebar-size="sm-hover"] #site-bottom-bar { left: calc(70px + 32px); width: calc(100% - 70px - 32px); } /* ══════════════════════════════════════════════════════════════ 6. SIDEBAR IMAGE OVERLAYS (vertical / semibox) ══════════════════════════════════════════════════════════════ */ :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-image]:not([data-sidebar-image="none"]) .aqua-layout-wrapper > .panelx-navbar::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background-size: cover; background-position: center; opacity: 0.07; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-image]:not([data-sidebar-image="none"]) .aqua-layout-wrapper > .panelx-navbar > * { position: relative; z-index: 1; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-image="img-1"] .aqua-layout-wrapper > .panelx-navbar::after { background-image: url('/images/sidebar/img-1.jpg'); } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-image="img-2"] .aqua-layout-wrapper > .panelx-navbar::after { background-image: url('/images/sidebar/img-2.jpg'); } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-image="img-3"] .aqua-layout-wrapper > .panelx-navbar::after { background-image: url('/images/sidebar/img-3.jpg'); } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-image="img-4"] .aqua-layout-wrapper > .panelx-navbar::after { background-image: url('/images/sidebar/img-4.jpg'); } /* ══════════════════════════════════════════════════════════════ 8. SEMI-BOX LAYOUT OVERRIDES Semibox behaves like vertical (inherited via :is() selector). At ≥1440px, adds margin/border-radius to sidebar and internal padding to content for a "semi-boxed" appearance. ══════════════════════════════════════════════════════════════ */ @media (min-width: 1440px) { [data-layout="semibox"] .aqua-layout-wrapper > .panelx-navbar { margin: 25px; height: calc(100vh - 50px); border-radius: 8px; } [data-layout="semibox"] .aqua-main-content { margin-left: calc(250px + 50px); width: calc(100% - 250px - 50px); } [data-layout="semibox"] .aqua-main-content > .content-wrapper { max-width: 1300px; margin-left: auto !important; margin-right: auto !important; padding: 0 1.5rem; } } /* ══════════════════════════════════════════════════════════════ 9. LIGHT THEME SIDEBAR ADJUSTMENTS When light theme is active, sidebar needs dark-on-light colors. ══════════════════════════════════════════════════════════════ */ /* Sidebar background: use dark sidebar even in light theme */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar { background: var(--bg-nav, #ffffff) !important; border-right-color: var(--border, rgba(0,0,0,.1)); } /* Nav links: dark text on light bg */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > .nav-link, [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > a { color: var(--text-body, #34495e) !important; } [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > .nav-link:hover, [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > a:hover { background: var(--bg-row-hover, rgba(41,121,176,.045)); color: var(--text-primary, #1a2d45) !important; } /* Brand text */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar::before { color: var(--text-primary, #1a2d45); border-bottom-color: var(--border, rgba(0,0,0,.1)); } /* Dropdown menus */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu { background: var(--bg-card-alt, #f7fafc); } [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu .dropdown-item { color: var(--text-body, #34495e) !important; } [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu .dropdown-item:hover { background: var(--bg-row-hover, rgba(41,121,176,.045)); color: var(--text-primary, #1a2d45) !important; } /* ms-auto bottom group border */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav.ms-auto { border-top-color: var(--border, rgba(0,0,0,.1)); } /* SM-Hover collapsed icons: dark color for light theme */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > .nav-link > i, [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > a > i { color: var(--text-dim, #7f8c8d) !important; } /* SM-Hover expanded on hover: dark text */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover .navbar-nav > .nav-item > .nav-link, [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover .navbar-nav > .nav-item > a { color: var(--text-body, #34495e) !important; } [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover .navbar-nav > .nav-item > .nav-link > i, [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover .navbar-nav > .nav-item > a > i { color: var(--text-body, #34495e) !important; } /* SM-Hover brand */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar::before { color: var(--text-primary, #1a2d45) !important; } [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover::before { color: var(--text-primary, #1a2d45) !important; } /* Gradient sidebar overrides light adjustments — stay white text */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > .nav-link, [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > a { color: rgba(255,255,255,0.85) !important; } [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu .dropdown-item { color: rgba(255,255,255,0.85) !important; } [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar::before { color: rgba(255,255,255,0.85); } /* Gradient sidebar — light theme: hover state (white text + subtle overlay bg) */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > .nav-link:hover, [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > a:hover { background: rgba(255,255,255,0.1) !important; color: #fff !important; } /* Gradient sidebar — light theme: dropdown menu bg */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu { background: rgba(0,0,0,0.25) !important; } /* Gradient sidebar — light theme: dropdown item hover */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu .dropdown-item:hover { background: rgba(255,255,255,0.18) !important; color: #fff !important; } /* Gradient sidebar — light theme: dropdown item ICONS (overrides aqua-theme-variables.css) */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu .dropdown-item i { color: rgba(255,255,255,0.85) !important; } /* Gradient sidebar — light theme: submenu caret */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu > a::after { border-left-color: rgba(255,255,255,0.5) !important; } /* Gradient sidebar — flyout submenu needs solid opaque bg + correct text color because it pops out over page content (not inside the gradient sidebar) */ @media (min-width: 992px) { :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu > .dropdown-menu { background: #1e2a3a !important; border-left: 6px solid rgba(37, 181, 181, 0.35); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35); } :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu > .dropdown-menu .dropdown-item { color: rgba(255,255,255,0.88) !important; } :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu > .dropdown-menu .dropdown-item:hover { background: rgba(255,255,255,0.12) !important; color: #fff !important; } :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu > .dropdown-menu .dropdown-item i { color: rgba(255,255,255,0.7) !important; } /* Light theme + gradient: flyout also needs dark bg override */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu > .dropdown-menu { background: #1e2a3a !important; } [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu > .dropdown-menu .dropdown-item { color: rgba(255,255,255,0.88) !important; } [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu > .dropdown-menu .dropdown-item:hover { background: rgba(255,255,255,0.12) !important; color: #fff !important; } [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu > .dropdown-menu .dropdown-item i { color: rgba(255,255,255,0.7) !important; } } /* Gradient sidebar — light theme: brand border-bottom */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar::before { color: rgba(255,255,255,0.85) !important; border-bottom-color: rgba(255,255,255,0.1) !important; } /* Gradient sidebar — light theme: ms-auto section border */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav.ms-auto { border-top-color: rgba(255,255,255,0.1) !important; } /* Gradient sidebar — light theme + SM-Hover: collapsed icons */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > .nav-link > i, [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item > a > i { color: rgba(255,255,255,0.7) !important; } /* Gradient sidebar — light theme + SM-Hover: expanded text */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover .navbar-nav > .nav-item > .nav-link, [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover .navbar-nav > .nav-item > a { color: rgba(255,255,255,0.85) !important; } /* Gradient sidebar — light theme + SM-Hover: expanded icons */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover .navbar-nav > .nav-item > .nav-link > i, [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover .navbar-nav > .nav-item > a > i { color: rgba(255,255,255,0.85) !important; } /* Gradient sidebar — light theme + SM-Hover: brand text (collapsed + expanded) */ [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar::before, [data-theme="light"]:is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover::before { color: rgba(255,255,255,0.85) !important; } /* ══════════════════════════════════════════════════════════════ 9.5 OPEN / ACTIVE SUBMENU VISIBILITY Make the expanded path obvious without changing layout behavior. ══════════════════════════════════════════════════════════════ */ :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .nav-link.show) > .nav-link, :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> a.show) > a, :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .dropdown-menu.show) > .nav-link, :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .dropdown-menu.show) > a, :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .dropdown-menu .dropdown-item.active) > .nav-link, :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .dropdown-menu .dropdown-item.active) > a, :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu:has(> .dropdown-menu.show) > a, :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu:has(> .dropdown-menu .dropdown-item.active) > a, :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu > li.active > a, :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu .dropdown-item.active { background: rgba(41,121,176,0.14) !important; color: var(--text-primary, #e2e8f0) !important; box-shadow: inset 3px 0 0 var(--blue-lt, #3a9fd8); } :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .nav-link.show) > .nav-link > i, :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> a.show) > a > i, :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .dropdown-menu.show) > .nav-link > i, :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .dropdown-menu.show) > a > i, :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .dropdown-menu .dropdown-item.active) > .nav-link > i, :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .dropdown-menu .dropdown-item.active) > a > i, :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu:has(> .dropdown-menu.show) > a > i, :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu:has(> .dropdown-menu .dropdown-item.active) > a > i, :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu > li.active > a > i, :is([data-layout="vertical"], [data-layout="semibox"]):not([data-sidebar^="gradient"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu .dropdown-item.active > i { color: var(--blue-lt, #3a9fd8) !important; } :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .nav-link.show) > .nav-link, :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> a.show) > a, :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .dropdown-menu.show) > .nav-link, :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .dropdown-menu.show) > a, :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .dropdown-menu .dropdown-item.active) > .nav-link, :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .dropdown-menu .dropdown-item.active) > a, :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu:has(> .dropdown-menu.show) > a, :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu:has(> .dropdown-menu .dropdown-item.active) > a, :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu > li.active > a, :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu .dropdown-item.active { background: rgba(255,255,255,0.14) !important; color: rgba(255,255,255,0.95) !important; box-shadow: inset 3px 0 0 rgba(255,255,255,0.55); } :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .nav-link.show) > .nav-link > i, :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> a.show) > a > i, :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .dropdown-menu.show) > .nav-link > i, :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .dropdown-menu.show) > a > i, :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .dropdown-menu .dropdown-item.active) > .nav-link > i, :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .navbar-nav > .nav-item:has(> .dropdown-menu .dropdown-item.active) > a > i, :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu:has(> .dropdown-menu.show) > a > i, :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu:has(> .dropdown-menu .dropdown-item.active) > a > i, :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu > li.active > a > i, :is([data-layout="vertical"], [data-layout="semibox"]):is([data-sidebar="gradient"], [data-sidebar="gradient-2"], [data-sidebar="gradient-3"], [data-sidebar="gradient-4"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-menu .dropdown-item.active > i { color: rgba(255,255,255,0.95) !important; } /* ══════════════════════════════════════════════════════════════ 10. THEME SWITCHER IN SIDEBAR ══════════════════════════════════════════════════════════════ */ /* --- 10.1 Vertical / Semibox — full sidebar (250px) --------- */ :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .theme-switcher { flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; border-radius: 8px; padding: 0.25rem; gap: 0.25rem; } /* Less padding on the nav-link wrapper hosting the switcher */ :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .ms-auto .nav-item .nav-link:has(.theme-switcher) { padding: 4px 12px !important; } /* --- 10.2 SM-Hover collapsed (icon-only 70px) --------------- */ :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar .theme-switcher { flex-direction: column; border-radius: 6px; padding: 0.15rem; gap: 0.15rem; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar .theme-switcher__label { display: none; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar .theme-switcher__option span { display: none !important; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar .theme-switcher__separator { width: 80%; height: 1px; margin: 0.1rem auto; } /* --- 10.3 SM-Hover expanded on hover — restore labels ------- */ :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover .theme-switcher { flex-direction: row; flex-wrap: wrap; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover .theme-switcher__label { display: inline-flex; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover .theme-switcher__option span { display: inline !important; } :is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"] .aqua-layout-wrapper > .panelx-navbar:hover .theme-switcher__separator { width: 1px; height: 1.2rem; margin: 0 0.15rem; } /* ══════════════════════════════════════════════════════════════ 11. RESPONSIVE (was §9) ══════════════════════════════════════════════════════════════ */ @media (max-width: 991.98px) { /* Vertical/Semibox sidebar → off-canvas */ :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar { transform: translateX(-100%); z-index: 1050; transition: transform 0.25s ease; } :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar.show { transform: translateX(0); } /* Show toggler on mobile */ :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .navbar-toggler { display: block; position: fixed; top: 4px; left: 4px; z-index: 1060; } /* Main content full width */ :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-main-content { margin-left: 0 !important; width: 100% !important; } /* Footer full width (sidebar is off-canvas on mobile) */ :is([data-layout="vertical"], [data-layout="semibox"]) #site-bottom-bar { left: 0 !important; width: 100% !important; } /* Backdrop */ .aqua-sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1045; } .aqua-sidebar-backdrop.show { display: block; } :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu > .dropdown-menu { position: static !important; display: none !important; visibility: visible !important; opacity: 1 !important; left: auto; top: auto; min-width: 0; padding-left: 1rem; background: rgba(0,0,0,0.04); transition: none; } :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu:hover > .dropdown-menu, :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu > .dropdown-menu.show { display: block !important; } :is([data-layout="vertical"], [data-layout="semibox"]) .aqua-layout-wrapper > .panelx-navbar .dropdown-submenu > a::after { border-left-color: transparent; border-top-color: #ccc; border-width: 5px 5px 0 5px; border-style: solid; margin-top: 7px; transform: none; } } /* ══════════════════════════════════════════════════════════════ 12. CONTAINER WIDTH ══════════════════════════════════════════════════════════════ */ /* --- full (default — no constraint) ------------------------- */ [data-container-width="full"] .aqua-main-content > .content-wrapper { max-width: none; } /* --- mid ---------------------------------------------------- */ [data-container-width="mid"] .aqua-main-content > .content-wrapper { width: 100%; max-width: 1300px; margin-left: auto !important; margin-right: auto !important; } /* --- compact ------------------------------------------------ */ [data-container-width="compact"] .aqua-main-content > .content-wrapper { width: 100%; max-width: 1000px; margin-left: auto !important; margin-right: auto !important; } /* --- form-panel: breakout içinde container genişliğine dön --- */ [data-container-width="mid"] .aqua-results-breakout .form-panel { max-width: 1300px; margin-left: auto; margin-right: auto; } [data-container-width="compact"] .aqua-results-breakout .form-panel { max-width: 1000px; margin-left: auto; margin-right: auto; }