/* Sidebar visual refresh layer.
 * Scope-only design with no template/JS behavior changes.
 * Applied via SideBar.tpl class: .sf-sidebar-modern
 */

.sf-sidebar-modern {
    background: linear-gradient(180deg, #f8fbff 0%, #f2f6fa 100%);
    border-right: 1px solid #dbe3ec;
}

/* 2026-04-05: Sidebar scroll fix — explicit height instead of top+bottom implicit.
   top+bottom on position:fixed does not reliably constrain height for overflow
   in all rendering modes. calc(100vh - 52px) gives an explicit pixel height. */
.page-sidebar.sf-sidebar-modern {
    position: fixed !important;
    top: 3.25rem !important;  /* 52px → rem for zoom scaling */
    left: 0 !important;
    bottom: 0 !important;
    height: calc(100dvh - 3.25rem) !important;  /* dvh: mobile address bar aware; rem: zoom-safe */
    width: 235px !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 999 !important;
}

/* 2026-03-16: Sidebar logo — sticky so it stays fixed during scroll */
.sf-sidebar-logo {
    position: sticky;
    top: 0;
    z-index: 5;
    text-align: center;
    padding: 8px 12px 6px;
    margin: 0 !important;
    background: linear-gradient(180deg, #f8fbff 0%, #f2f6fa 100%);
    border-bottom: 1px solid #e4ebf2;
}

/* Ensure premium-polish sidebar bg matches logo bg */
body.page-header-fixed .sf-sidebar-modern .sf-sidebar-logo {
    background: linear-gradient(180deg, #f8fbff 0%, #edf3f9 100%);
}

/* 2026-04-29: Switched to horizontal banner SVG (skyfilter.svg, 7.38:1 aspect).
 * Old `height: 145px` was sized for the previous square logo.png; with the
 * banner SVG it computed to ~1070px width and overflowed the 235px sidebar.
 * Width-driven sizing keeps aspect ratio and respects sidebar padding. */
.sf-sidebar-logo img {
    width: 100%;
    max-width: 200px;
    height: auto;
    filter: drop-shadow(0 2px 5px rgba(20, 40, 60, 0.10));
}

.sf-sidebar-modern .page-sidebar-menu {
    padding: 12px 10px 14px 10px;
}

.sf-sidebar-modern .page-sidebar-menu > li {
    margin-bottom: 4px;
}

/* Legacy utility class from template creates an extra top gap
 * above Overview in mobile/compact sidebar. Neutralize it in modern skin. */
.sf-sidebar-modern .page-sidebar-menu > li.start.margin-top-30 {
    margin-top: 0 !important;
}

.sf-sidebar-modern .page-sidebar-menu > li > a {
    border-top: 0 !important;
    border: 1px solid #d7e1ec;
    border-left: 4px solid transparent; /* consistent 4px reserve — prevents 3px shift on active */
    border-radius: 12px !important;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #2f3b47;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9fd 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sf-sidebar-modern .page-sidebar-menu > li > a > i {
    color: #5f7286;
    margin-right: 8px;
}

.sf-sidebar-modern .page-sidebar-menu > li:hover > a,
.sf-sidebar-modern .page-sidebar-menu > li.open > a {
    background: linear-gradient(180deg, #ffffff 0%, #f1f7fd 100%);
    border-color: #cad7e6;
    color: #2b3743;
}

.sf-sidebar-modern .page-sidebar-menu > li.active > a,
.sf-sidebar-modern .page-sidebar-menu > li.active.open > a {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
    border: 1px solid #ced9e6 !important;
    border-left: 4px solid var(--sf-color-brand) !important;
    color: #202b36 !important;
    box-shadow: 0 4px 10px rgba(35, 49, 65, 0.12);
}

.sf-sidebar-modern .page-sidebar-menu > li.active > a > i,
.sf-sidebar-modern .page-sidebar-menu > li.active.open > a > i {
    color: var(--sf-color-brand) !important;
}

.sf-sidebar-modern .page-sidebar-menu > li > a > .arrow:before {
    color: #8a98a8;
}

.sf-sidebar-modern .page-sidebar-menu > li:hover > a > .arrow:before,
.sf-sidebar-modern .page-sidebar-menu > li.open > a > .arrow:before,
.sf-sidebar-modern .page-sidebar-menu > li.active > a > .arrow:before {
    color: #5e6d7d !important;
}

.sf-sidebar-modern .page-sidebar-menu .sub-menu {
    background: transparent !important;
    margin: 6px 0 10px 10px;
    padding: 3px 0 3px 8px;
    border-left: 1px solid #dce5ef;
}

.sf-sidebar-modern .page-sidebar-menu .sub-menu > li > a {
    border-top: 0 !important;
    border: 1px solid #d8e2ee;
    border-left: 4px solid transparent; /* consistent with parent — prevents layout shift */
    border-radius: 999px !important;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #4e5f71;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    margin-bottom: 6px;
}

.sf-sidebar-modern .page-sidebar-menu .sub-menu > li:hover > a,
.sf-sidebar-modern .page-sidebar-menu .sub-menu > li.open > a {
    background: linear-gradient(180deg, #ffffff 0%, #eef5fc 100%) !important;
    border-color: #cbd9e9;
    color: #2f3b47 !important;
}

.sf-sidebar-modern .page-sidebar-menu .sub-menu > li.active > a {
    background: linear-gradient(180deg, #fef7f8 0%, #fbeef1 100%) !important;
    border-color: #e4c2c8;
    color: var(--sf-color-brand) !important;
    font-weight: 700;
}

.sf-sidebar-modern .page-sidebar-menu .sub-menu > li > .sub-menu {
    margin-left: 8px;
    padding-left: 6px;
}

.sf-sidebar-modern .page-sidebar-menu .sub-menu > li > .sub-menu > li > a {
    border-radius: 10px !important;
    padding: 6px 10px;
}

.sf-sidebar-modern .page-sidebar-menu .sub-menu > li > a > .arrow:before {
    color: #91a0af;
}

@media (max-width: 991px) {
    .sf-sidebar-modern {
        border-right: 0;
    }

    .sf-sidebar-modern .page-sidebar-menu {
        padding: 8px 8px 10px 8px;
    }

    .sf-sidebar-modern .page-sidebar-menu > li > a {
        border-radius: 8px !important;
        padding: 9px 10px;
    }
}