/*
 * FGENIO_MAIN_SIDEBAR_SINGLE_SOURCE_V17
 *
 * Canonical visual contract for the shared FGenio application sidebar.
 *
 * Markup source of truth:
 *   resources/views/social/layouts/sidebar.blade.php
 *
 * This file owns ONLY shared application-sidebar presentation.
 * Page styles must not redefine .app-menu.navbar-menu / #navbar-nav.
 */


/* =========================================================
 * SHELL
 * ========================================================= */

body .app-menu.navbar-menu {
    --fgen-sidebar-item-padding-y: 0.55rem;
    /*
     * FGENIO MAIN SIDEBAR — SINGLE CONFIGURATION CONTRACT
     *
     * Change ONLY these values for menu sizing / spacing.
     */
    --fgen-sidebar-label-size: 18px;
    --fgen-sidebar-icon-size: 25px;
    --fgen-sidebar-item-padding-start: 1.5rem;
    --fgen-sidebar-item-padding-end: 1rem;
    --fgen-sidebar-icon-gap: 1.05rem;


    background: var(--vz-body-bg) !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;
}


/* =========================================================
 * SCROLL / VERTICAL POSITION
 * ========================================================= */

.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 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

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


/* =========================================================
 * BRAND
 * ========================================================= */

.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;
}


/* =========================================================
 * FGENIO MAIN SIDEBAR — CLEAN ISOLATED CONTRACT V17
 *
 * Velzon may control sidebar shell/open/collapse behavior.
 * It does NOT control FGenio menu typography or spacing.
 *
 * No fixed icon box dimensions.
 * No forced max-height.
 * No scale/zoom hacks.
 * ========================================================= */


/* NAV */

html body
#layout-wrapper
.app-menu.navbar-menu.fgen-main-sidebar
#navbar-nav.fgen-sidebar-nav {
    margin: 0 !important;
    padding: 0 !important;
}


/* ITEM */

html body
#layout-wrapper
.app-menu.navbar-menu.fgen-main-sidebar
#navbar-nav.fgen-sidebar-nav
> li.fgen-sidebar-item {
    margin: 0 !important;
    padding: 0 !important;
}


/* LINK */

html body
#layout-wrapper
.app-menu.navbar-menu.fgen-main-sidebar
#navbar-nav.fgen-sidebar-nav
> li.fgen-sidebar-item
> a.fgen-sidebar-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    margin: 0 !important;

    padding-block:
        var(--fgen-sidebar-item-padding-y) !important;

    padding-inline-start:
        var(--fgen-sidebar-item-padding-start) !important;

    padding-inline-end:
        var(--fgen-sidebar-item-padding-end) !important;

    font-size:
        var(--fgen-sidebar-label-size) !important;

    line-height: 1.25 !important;

    text-align: start !important;
}


/* ICON */

html body
#layout-wrapper
.app-menu.navbar-menu.fgen-main-sidebar
#navbar-nav.fgen-sidebar-nav
> li.fgen-sidebar-item
> a.fgen-sidebar-link
> i.fgen-sidebar-icon {
    display: inline-block !important;

    flex: 0 0 auto !important;

    margin-block: 0 !important;
    margin-inline-start: 0 !important;

    margin-inline-end:
        var(--fgen-sidebar-icon-gap) !important;

    padding: 0 !important;

    font-size:
        var(--fgen-sidebar-icon-size) !important;

    line-height: 1 !important;
}


/* REMIX GLYPH */

html body
#layout-wrapper
.app-menu.navbar-menu.fgen-main-sidebar
#navbar-nav.fgen-sidebar-nav
> li.fgen-sidebar-item
> a.fgen-sidebar-link
> i.fgen-sidebar-icon::before {
    font-size:
        var(--fgen-sidebar-icon-size) !important;

    line-height: 1 !important;
}


/* LABEL */

html body
#layout-wrapper
.app-menu.navbar-menu.fgen-main-sidebar
#navbar-nav.fgen-sidebar-nav
> li.fgen-sidebar-item
> a.fgen-sidebar-link
> span.fgen-sidebar-label {
    margin: 0 !important;
    padding: 0 !important;

    font-size:
        var(--fgen-sidebar-label-size) !important;

    line-height: 1.25 !important;
}


/*
 * FGENIO_SIDEBAR_COLLAPSED_ICON_SIZE_V17
 *
 * Velzon forces sidebar icons to 22px in sm-hover states.
 * Keep the canonical FGenio icon size (25px) in those real runtime states.
 */
:is(
    html[data-layout="vertical"],
    html[data-layout="semibox"]
)[data-sidebar-size="sm-hover"]
#layout-wrapper
.fgen-main-sidebar
.fgen-sidebar-link
> i.fgen-sidebar-icon,

:is(
    html[data-layout="vertical"],
    html[data-layout="semibox"]
)[data-sidebar-size="sm-hover-active"]
#layout-wrapper
.fgen-main-sidebar
.fgen-sidebar-link
> i.fgen-sidebar-icon {
    font-size: var(--fgen-sidebar-icon-size) !important;
}

:is(
    html[data-layout="vertical"],
    html[data-layout="semibox"]
)[data-sidebar-size="sm-hover"]
#layout-wrapper
.fgen-main-sidebar
.fgen-sidebar-link
> i.fgen-sidebar-icon::before,

:is(
    html[data-layout="vertical"],
    html[data-layout="semibox"]
)[data-sidebar-size="sm-hover-active"]
#layout-wrapper
.fgen-main-sidebar
.fgen-sidebar-link
> i.fgen-sidebar-icon::before {
    font-size: var(--fgen-sidebar-icon-size) !important;
}


/* =========================================================
 * PROFILE AVATAR
 * ========================================================= */

.app-menu.navbar-menu
    .social-menu-profile-avatar {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    transform: translate(-4px, 2px);
}


/* =========================================================
 * SYSTEM THEME CONTROL
 * ========================================================= */

.app-menu.navbar-menu
    .social-system-theme-indicator {
    position: absolute;
    top: 74px;
    left: 27px;
    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);

    border: 0;
    padding: 0;
    background: transparent;

    cursor: pointer;
    pointer-events: auto;
}

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


/* =========================================================
 * LIGHT THEME
 * ========================================================= */

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;
}

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;
}


/* =========================================================
 * HOVER
 * ========================================================= */

.app-menu.navbar-menu
    #navbar-nav
    > .nav-item
    > .nav-link.menu-link:hover {
    background-color: var(--vz-body-bg) !important;
}


/* =========================================================
 * MOBILE
 *
 * Follow standard Velzon/User dashboard drawer behavior.
 * ========================================================= */

@media (max-width: 767.98px) {

    body .app-menu.navbar-menu {
        background: var(--vz-vertical-menu-bg) !important;
        border-right-color: var(--vz-vertical-menu-border) !important;
    }

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

    .app-menu.navbar-menu #scrollbar {
        display: block;
    }

    .app-menu.navbar-menu #scrollbar .simplebar-content {
        display: block;
        position: static;
    }

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

    .app-menu.navbar-menu .social-menu-brand {
        position: static;
        display: block;
        width: auto;
        margin: 18px 24px 20px;
        overflow: visible;
    }

    .app-menu.navbar-menu .social-system-theme-indicator {
        position: static;
        margin: 0 24px 12px;
    }

}