/* ── JePS menu-items.css ── Adapted from JBAS menu-items.css (indigo → JePS primary #4361ee). Dark mode: [data-theme="dark"] on (Trezo convention), light is default. Covers: .menu-item, .menu-link, .menu-title section headers, .menu-sub, dark mode, logo. */ /* ══════════════════════════════════════════════════════════════════════ 1. Base item ══════════════════════════════════════════════════════════════════════ */ .menu-item { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 4px; margin: 1px 0 !important; margin-right: 0 !important; margin-left: 0 !important; width: 100%; } /* ── Layout-menu full-width reset ── */ .sidebar-area .layout-menu, .sidebar-area .layout-menu .menu-inner { padding-left: 0 !important; padding-right: 0 !important; width: 100%; } [sidebar-data-theme=sidebar-hide] .sidebar-area .layout-menu, [sidebar-data-theme=sidebar-hide] .sidebar-area:hover .layout-menu { padding-left: 0 !important; padding-right: 0 !important; } @media only screen and (max-width: 1199px) { .sidebar-area .layout-menu { padding-left: 0 !important; padding-right: 0 !important; } } /* ══════════════════════════════════════════════════════════════════════ 2. Active item ══════════════════════════════════════════════════════════════════════ */ .menu-item.active { transform: translateX(2px); box-shadow: none; background-color: rgba(67, 97, 238, 0.15); border-left: 3px solid #4361ee; } .menu-item.active .title { color: inherit; font-weight: 600; transform: scale(1.02); } .menu-item.active .menu-icon { color: inherit; transform: scale(1.1); } /* Active item: link background + text color */ .menu-vertical .menu-item.active .menu-link { background-color: rgba(67, 97, 238, 0.15); color: #1e3a8a; } .menu-vertical .menu-item.active .menu-link .title, .menu-vertical .menu-item.active .menu-link .menu-icon, .menu-vertical .menu-item.active .menu-link .menu-icon i { color: inherit; } /* ══════════════════════════════════════════════════════════════════════ 3. Link ══════════════════════════════════════════════════════════════════════ */ .menu-link { padding: 8px 14px; display: flex; align-items: center; text-decoration: none; color: #333; border-radius: 4px; transition: all 0.2s ease; width: 100%; margin-right: 0 !important; } /* Color-inheritance chain — everything flows through .menu-link */ .menu-link .title, .menu-link .menu-icon, .menu-link .menu-icon i { color: inherit; } .menu-link:hover { background-color: rgba(67, 97, 238, 0.15); color: #1e3a8a; } .menu-vertical .menu-item .menu-link { font-size: 13px; padding-top: 6px; padding-bottom: 6px; width: 100%; margin-right: 0 !important; } .menu-vertical .menu-item .menu-link:hover { background-color: rgba(67, 97, 238, 0.15); color: #1e3a8a; } .menu-vertical .menu-item .menu-link:hover .title, .menu-vertical .menu-item .menu-link:hover .menu-icon, .menu-vertical .menu-item .menu-link:hover .menu-icon i { color: inherit; } /* ══════════════════════════════════════════════════════════════════════ 4. Menu groups & sub-menus ══════════════════════════════════════════════════════════════════════ */ .menu-vertical .menu-item.menu-group { margin: 2px 0 2px; } .menu-vertical .menu-item.menu-group > .menu-sub { margin-top: 2px; } .menu-vertical .menu-sub { opacity: 1; position: unset; } /* Remove default Trezo sub-menu leading indicator */ .menu-vertical .menu-sub .menu-item .menu-link::before { content: none !important; display: none !important; } .menu-vertical .menu-sub .menu-item { margin: 0 0 2px !important; } .menu-vertical .menu-sub .menu-item .menu-link { padding: 6px 16px; padding-left: 24px; font-size: 13px; margin-right: 0 !important; } /* ══════════════════════════════════════════════════════════════════════ 5. Section headers (.menu-title) — bordered-gradient eyebrow ══════════════════════════════════════════════════════════════════════ */ .menu-vertical .menu-title { position: relative; display: flex; align-items: center; justify-content: center; gap: 3px; width: 100%; box-sizing: border-box; padding: 6px 0; margin: 5px 0 4px !important; margin-right: 0 !important; margin-left: 0 !important; border-top: 3px solid #bac4ee; border-bottom: 3px solid #bac4ee; border-left: 0; border-right: 0; border-radius: 0; background: linear-gradient(180deg, #f2f4ff 0%, #e7ebff 100%); color: #1e3a8a; box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04); } .menu-vertical .menu-title .menu-title-text { padding: 0 8px; color: inherit; display: block; margin-bottom: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .menu-vertical .menu-title .menu-title-icon { margin-left: 8px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px; border-radius: 999px; background: rgba(30, 58, 138, 0.08); color: inherit; } .menu-vertical .menu-title .menu-title-icon i { font-size: 10px; line-height: 1; } /* Active section variant */ .menu-vertical .menu-title.active { background: linear-gradient(180deg, #ebefff 0%, #dfe5ff 100%); border-top-color: #a6b3de; border-bottom-color: #a6b3de; box-shadow: 0 8px 18px rgba(30, 58, 138, 0.08); } .menu-vertical .menu-title.active .menu-title-text, .menu-vertical .menu-title.active .menu-title-icon { color: #1e3a8a; } /* ══════════════════════════════════════════════════════════════════════ 6. Dark mode — [data-theme="dark"] on ══════════════════════════════════════════════════════════════════════ */ /* Section headers — dark */ [data-theme="dark"] .menu-vertical .menu-title { background: linear-gradient(180deg, rgba(20, 29, 43, 0.98) 0%, rgba(16, 24, 37, 0.98) 100%); border-top-color: rgba(148, 163, 184, 0.2); border-bottom-color: rgba(148, 163, 184, 0.2); color: #c7d2fe; } [data-theme="dark"] .menu-vertical .menu-title .menu-title-icon { background: rgba(199, 210, 254, 0.08); } [data-theme="dark"] .menu-vertical .menu-title .menu-title-text { color: inherit; font-weight: 800; } /* Active item — dark */ [data-theme="dark"] .menu-vertical .menu-item.active .menu-link .menu-icon, [data-theme="dark"] .menu-vertical .menu-item.active .menu-link .title { color: #c7d2fe; } [data-theme="dark"] .menu-vertical .menu-item.active:hover .menu-link .menu-icon, [data-theme="dark"] .menu-vertical .menu-item.active:hover .menu-link .title { color: #eef2ff; } /* Hover — dark */ [data-theme="dark"] .menu-item .menu-link:hover { background-color: rgba(67, 97, 238, 0.25) !important; color: #eef2ff; } [data-theme="dark"] .menu-vertical .menu-item .menu-link:hover { background-color: rgba(67, 97, 238, 0.25); color: #eef2ff; } /* Active-link background — dark */ [data-theme="dark"] .menu-vertical .menu-item.active .menu-link { background-color: rgba(67, 97, 238, 0.2); color: #c7d2fe; } /* ══════════════════════════════════════════════════════════════════════ 7. Sidebar logo ══════════════════════════════════════════════════════════════════════ */ /* Make .logo flex so the close button sits to the right of the link */ .sidebar-area .logo { display: flex; align-items: center; justify-content: space-between; } /* Center two-line text vertically next to the 38px icon. Keeps theme's position:absolute — only overrides top/left. */ .sidebar-area .logo .logo-text { top: 50%; transform: translateY(-50%); left: 46px; /* 38px icon + 8px gap */ } /* Restore left when sidebar re-expands from hover */ [sidebar-data-theme=sidebar-hide] .sidebar-area:hover .logo .logo-text { left: 46px; }