/* FGenio Trading Social Home — social layout only */

body .app-menu.navbar-menu {
    background: transparent !important;
    border-right-color: transparent !important;
    box-shadow: none !important;
}

body .app-menu.navbar-menu .navbar-brand-box {
    background: transparent !important;
    box-shadow: none !important;
}

body .app-menu.navbar-menu .sidebar-background {
    display: none !important;
}

/* Keep collapsed social navigation icons centered. */
html[data-sidebar-size="sm-hover"]
    .app-menu.navbar-menu
    #navbar-nav
    > .nav-item
    > .nav-link.menu-link {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html[data-sidebar-size="sm-hover"]
    .app-menu.navbar-menu
    #navbar-nav
    > .nav-item
    > .nav-link.menu-link
    > i {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Restore normal alignment while Velzon expands the sidebar. */
html[data-sidebar-size="sm-hover-active"]
    .app-menu.navbar-menu
    #navbar-nav
    > .nav-item
    > .nav-link.menu-link {
    justify-content: flex-start;
}

/* Vertically center the social navigation in the space below the logo. */
.app-menu.navbar-menu #scrollbar {
    display: flex;
    flex-direction: column;
}

.app-menu.navbar-menu #scrollbar > .simplebar-wrapper,
.app-menu.navbar-menu #scrollbar .simplebar-mask,
.app-menu.navbar-menu #scrollbar .simplebar-offset,
.app-menu.navbar-menu #scrollbar .simplebar-content-wrapper,
.app-menu.navbar-menu #scrollbar .simplebar-content {
    height: 100%;
}

.app-menu.navbar-menu #scrollbar .simplebar-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.app-menu.navbar-menu #scrollbar .container-fluid {
    width: 100%;
}


/* Brand stays at the top; only navigation is vertically centered. */
.app-menu.navbar-menu #scrollbar .simplebar-content {
    position: relative;
}

.app-menu.navbar-menu .social-menu-brand {
    position: absolute;
    top: 16px;
    left: 24px;
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    z-index: 2;
}

.app-menu.navbar-menu .social-menu-brand-image {
    display: block;
    width: auto;
    max-width: none;
}

.app-menu.navbar-menu #scrollbar .container-fluid {
    margin-top: auto;
    margin-bottom: auto;
}

/* Social navigation visual scale. */
.app-menu.navbar-menu
    #navbar-nav
    > .nav-item
    > .nav-link.menu-link {
    font-size: 25px !important;
}

.app-menu.navbar-menu
    #navbar-nav
    > .nav-item
    > .nav-link.menu-link
    > i {
    font-size: 25px !important;
}

.app-menu.navbar-menu
    #navbar-nav
    > .nav-item
    > .nav-link.menu-link
    > span {
    font-size: 25px !important;
}

.app-menu.navbar-menu
    .social-menu-profile-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

/* Override Velzon's 22px sm-hover icon rule. */
:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover"]
    .navbar-menu
    .navbar-nav
    .nav-link
    i,
:is([data-layout="vertical"], [data-layout="semibox"])[data-sidebar-size="sm-hover-active"]
    .navbar-menu
    .navbar-nav
    .nav-link
    i {
    font-size: 25px !important;
}

/* System-theme indicator below the Social brand. */
.app-menu.navbar-menu
    .social-system-theme-indicator {
    position: absolute;
    top: 62px;
    left: 17px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    font-size: 22px;
    line-height: 1;
    color: var(--vz-vertical-menu-item-color);
    pointer-events: none;
}

.app-menu.navbar-menu
    .social-system-theme-indicator
    > i {
    font-size: 25px;
    line-height: 1;
}

/* Theme control is manual only for the current page lifecycle. */
.app-menu.navbar-menu
    .social-system-theme-indicator {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
}

/* Social menu icon horizontal alignment. */
.app-menu.navbar-menu
    #navbar-nav
    > .nav-item
    > .nav-link.menu-link
    > i,
.app-menu.navbar-menu
    #navbar-nav
    > .nav-item
    > .nav-link.menu-link
    > .social-menu-profile-avatar {
    transform: translateX(13px);
}

/* Keep the system-theme control aligned with menu icons. */
.app-menu.navbar-menu
    .social-system-theme-indicator {
    transform: translateX(13px);
}

/*
 * Social Light Theme
 * Sidebar is transparent, so inherit Velzon's normal foreground
 * instead of the sidebar foreground intended for colored sidebars.
 */
html[data-bs-theme="light"]
    .app-menu.navbar-menu
    #navbar-nav
    > .nav-item
    > .nav-link.menu-link,
html[data-bs-theme="light"]
    .app-menu.navbar-menu
    #navbar-nav
    > .nav-item
    > .nav-link.menu-link
    > i,
html[data-bs-theme="light"]
    .app-menu.navbar-menu
    .social-system-theme-indicator {
    color: var(--vz-body-color) !important;
}

/* Keep Velzon's active state visually distinct in light mode. */
html[data-bs-theme="light"]
    .app-menu.navbar-menu
    #navbar-nav
    > .nav-item
    > .nav-link.menu-link.active,
html[data-bs-theme="light"]
    .app-menu.navbar-menu
    #navbar-nav
    > .nav-item
    > .nav-link.menu-link:hover {
    color: var(--vz-primary) !important;
}