/* Collapsed sidebar (body.vertical-collpsed): hover fly-out.
   app.min.css forces every fly-out link to the brand colour (!important) and keeps the expanded-mode
   2.6rem indent, so the list looks all-active and does not line up with its parent row. This file only
   restyles the collapsed fly-out; the expanded sidebar is untouched. Loaded after app.min.css / style.css. */
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
    width: 252px;                         /* parent row and list share the same right edge (8px margin + 252 = 70 + 190) */
}
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a:not(.active):not(.mm-active) {
    background: #fff; color: #031B4E; border-radius: 10px 10px 0 0;
    box-shadow: 0 6px 24px rgba(3, 27, 78, .12);
}
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a:not(.active):not(.mm-active) i { color: var(--primary-bg-color); }
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu {
    left: 70px; width: 190px; padding: 6px;
    border-radius: 0 0 10px 10px; background: #fff;
    box-shadow: 0 12px 24px rgba(3, 27, 78, .12), 0 1px 2px rgba(3, 27, 78, .08);
}
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu li a {
    width: auto !important; margin: 0 0 2px !important; padding: 8px 12px !important; border-radius: 6px;
    font-size: 14px; font-weight: 400; line-height: 1.35; white-space: normal;
    color: #4C516D !important; background: transparent;
}
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu li a:hover {
    color: #031B4E !important; background: #F8F8FC;
}
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu li a.active,
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu li.mm-active > a {
    color: var(--primary-bg-color) !important; background: #FBEEF1; font-weight: 500;
}