/* =========================================================
   VETEROK KB15 — EMPLOYEE TOP NAVIGATION V1
   ========================================================= */


/* =========================================================
   LAYOUT
   ========================================================= */

body.vk-employee-shell {
    min-height: 100vh;
}


body.vk-employee-shell
.vk-employee-layout {
    display: block !important;

    min-height: 100vh !important;
}


body.vk-employee-shell
.vk-employee-main {
    width: 100%;

    min-width: 0;

    padding:
        28px 24px
        60px !important;
}


body.vk-employee-shell
.vk-employee-main
> .page {
    width: 100% !important;

    max-width: 1180px !important;

    margin:
        0 auto !important;

    padding:
        0 !important;
}


/* =========================================================
   OLD SIDEBAR -> TOP BAR
   ========================================================= */

body.vk-employee-shell
.vk-employee-sidebar {

    position: sticky !important;

    top: 0 !important;

    z-index: 100 !important;

    width: 100% !important;
    height: auto !important;

    min-height: 68px !important;

    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;

    gap: 18px;

    padding:
        9px
        max(
            18px,
            calc(
                (100vw - 1240px)
                / 2
            )
        ) !important;

    overflow: visible !important;

    border-right: 0 !important;

    border-bottom:
        1px solid
        var(--vk-border) !important;

    background:
        color-mix(
            in srgb,
            var(--vk-sidebar-bg) 92%,
            transparent
        ) !important;

    box-shadow:
        0 8px 28px
        rgba(0,0,0,.08);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);
}


/* =========================================================
   LOGO
   ========================================================= */

body.vk-employee-shell
.vk-employee-brand {

    min-width: 154px;
    min-height: 0 !important;

    flex:
        0 0 auto;

    padding:
        0 !important;

    border:
        0 !important;
}


body.vk-employee-shell
.vk-employee-brand img {

    width:
        142px !important;

    max-height:
        42px;
}


/* =========================================================
   TOP NAV
   ========================================================= */

body.vk-employee-shell
.vk-employee-sidebar
> .vk-employee-nav:first-of-type {

    min-width: 0;

    display: flex !important;

    align-items: center;

    gap: 4px !important;

    flex: 1;

    overflow-x: auto;

    scrollbar-width: none;
}


body.vk-employee-shell
.vk-employee-sidebar
> .vk-employee-nav:first-of-type::-webkit-scrollbar {
    display: none;
}


body.vk-employee-shell
.vk-employee-sidebar
> .vk-employee-nav:first-of-type
a {

    min-width: max-content;

    min-height:
        40px !important;

    display: flex !important;

    align-items: center;

    gap: 7px !important;

    padding:
        0 11px !important;

    border-radius:
        11px !important;

    font-size:
        11px !important;

    white-space: nowrap;
}


body.vk-employee-shell
.vk-employee-sidebar
> .vk-employee-nav:first-of-type
a.is-active {

    box-shadow:
        none !important;
}


body.vk-employee-shell
.vk-employee-sidebar
> .vk-employee-nav:first-of-type
.vk-employee-nav-icon {

    width:
        auto !important;

    font-size:
        13px !important;
}


/*
 * Медкнижку перенесём в dropdown профиля.
 */

body.vk-employee-shell
.vk-employee-sidebar
> .vk-employee-nav:nth-of-type(2),

body.vk-employee-shell
.vk-employee-sidebar
> .vk-employee-nav-separator {

    display:
        none !important;
}


/* =========================================================
   MINI PROFILE BUTTON
   ========================================================= */

body.vk-employee-shell
.vk-employee-person {

    order: 20;

    position: relative;

    min-width: 0;

    flex:
        0 0 auto;

    grid-template-columns:
        38px
        minmax(0, 132px)
        18px !important;

    gap:
        9px !important;

    align-items: center;

    margin:
        0 !important;

    padding:
        5px 8px !important;

    border:
        1px solid
        transparent;

    border-radius:
        13px !important;

    background:
        transparent !important;

    cursor:
        pointer;

    user-select:
        none;

    transition:
        background .15s ease,
        border-color .15s ease;
}


body.vk-employee-shell
.vk-employee-person:hover,

body.vk-employee-shell
.vk-employee-person.is-open {

    background:
        var(--vk-surface-2) !important;

    border-color:
        var(--vk-border);
}


body.vk-employee-shell
.vk-employee-person-avatar {

    width:
        38px !important;

    height:
        38px !important;

    border-radius:
        50% !important;

    flex:
        0 0 38px;

    overflow: hidden;
}


body.vk-employee-shell
.vk-employee-person-name {

    font-size:
        11px !important;

    font-weight:
        760 !important;
}


body.vk-employee-shell
.vk-employee-person-role {

    font-size:
        9px !important;
}


.vk-topnav-chevron {

    display:
        grid;

    place-items:
        center;

    color:
        var(--vk-sidebar-muted);

    font-size:
        12px;

    transition:
        transform .15s ease;
}


.vk-employee-person.is-open
.vk-topnav-chevron {

    transform:
        rotate(180deg);
}


/* =========================================================
   OLD FOOTER
   ========================================================= */

/*
 * Тема и logout теперь находятся
 * внутри dropdown профиля.
 */

body.vk-employee-shell
.vk-employee-sidebar-footer {

    display:
        none !important;
}


/* =========================================================
   PROFILE DROPDOWN
   ========================================================= */

.vk-topnav-dropdown {

    position:
        fixed;

    z-index:
        400;

    width:
        min(
            290px,
            calc(100vw - 24px)
        );

    padding:
        8px;

    border:
        1px solid
        var(--vk-border);

    border-radius:
        16px;

    background:
        color-mix(
            in srgb,
            var(--vk-sidebar-bg) 97%,
            transparent
        );

    box-shadow:
        0 18px 55px
        rgba(0,0,0,.22);

    backdrop-filter:
        blur(22px);

    -webkit-backdrop-filter:
        blur(22px);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-5px)
        scale(.985);

    transform-origin:
        top right;

    transition:
        opacity .14s ease,
        transform .14s ease,
        visibility .14s ease;
}


.vk-topnav-dropdown.is-open {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0)
        scale(1);
}


.vk-topnav-dropdown-profile {

    display:
        grid;

    grid-template-columns:
        46px
        minmax(0,1fr);

    gap:
        11px;

    align-items:
        center;

    padding:
        9px 9px 12px;
}


.vk-topnav-dropdown-avatar {

    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            var(--vk-accent),
            var(--vk-accent-hover)
        );

    color:
        #1b0f08;

    font-size:
        14px;

    font-weight:
        850;
}


.vk-topnav-dropdown-name {

    overflow:
        hidden;

    color:
        var(--vk-text);

    font-size:
        13px;

    font-weight:
        800;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;
}


.vk-topnav-dropdown-role {

    margin-top:
        3px;

    color:
        var(--vk-sidebar-muted);

    font-size:
        10px;
}


.vk-topnav-dropdown-separator {

    height:
        1px;

    margin:
        4px 3px;

    background:
        var(--vk-border);
}


.vk-topnav-dropdown-link,

.vk-topnav-dropdown-button {

    width:
        100%;

    min-height:
        42px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        0 11px;

    border:
        0;

    border-radius:
        11px;

    background:
        transparent;

    color:
        var(--vk-text);

    text-decoration:
        none;

    font:
        inherit;

    font-size:
        11.5px;

    font-weight:
        680;

    text-align:
        left;

    cursor:
        pointer;
}


.vk-topnav-dropdown-link:hover,

.vk-topnav-dropdown-button:hover {

    background:
        var(--vk-surface-2);
}


.vk-topnav-dropdown-icon {

    width:
        25px;

    display:
        grid;

    place-items:
        center;

    color:
        var(--vk-sidebar-muted);

    font-size:
        14px;
}


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

.vk-topnav-theme {

    padding:
        9px 10px;
}


.vk-topnav-theme-title {

    margin-bottom:
        7px;

    color:
        var(--vk-sidebar-muted);

    font-size:
        9px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .05em;
}


.vk-topnav-theme-options {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:
        3px;

    padding:
        3px;

    border:
        1px solid
        var(--vk-border);

    border-radius:
        10px;

    background:
        var(--vk-surface-2);
}


.vk-topnav-theme-options button {

    height:
        29px;

    border:
        0;

    border-radius:
        7px;

    background:
        transparent;

    color:
        var(--vk-sidebar-muted);

    font:
        inherit;

    font-size:
        9px;

    font-weight:
        700;

    cursor:
        pointer;
}


.vk-topnav-theme-options button.is-active {

    color:
        var(--vk-accent);

    background:
        var(--vk-accent-soft);
}


/* =========================================================
   LOGOUT
   ========================================================= */

.vk-topnav-logout {

    color:
        #ef4444 !important;
}


/* =========================================================
   COMPACT PROFILE HEADER
   ========================================================= */

body.vk-employee-shell
.profile {

    min-height:
        0 !important;

    padding:
        15px 17px !important;

    border-radius:
        15px !important;
}


body.vk-employee-shell
.profile::after {

    width:
        105px !important;

    height:
        105px !important;
}


body.vk-employee-shell
.profile-content {

    grid-template-columns:
        52px
        minmax(0,1fr)
        auto !important;

    gap:
        12px !important;
}


body.vk-employee-shell
.profile
.avatar {

    width:
        52px !important;

    height:
        52px !important;

    flex-basis:
        52px !important;

    border-radius:
        50% !important;

    font-size:
        17px !important;
}


body.vk-employee-shell
.profile-name {

    font-size:
        clamp(
            18px,
            2vw,
            22px
        ) !important;
}


body.vk-employee-shell
.profile-position {

    margin-top:
        2px !important;

    font-size:
        11px !important;
}


body.vk-employee-shell
.profile
.status {

    margin-top:
        6px !important;

    padding:
        4px 7px !important;

    font-size:
        9px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
    max-width: 900px
) {

    body.vk-employee-shell
    .vk-employee-sidebar {

        gap:
            10px;

        min-height:
            62px !important;

        padding:
            8px 12px !important;
    }


    body.vk-employee-shell
    .vk-employee-brand {

        min-width:
            auto;
    }


    body.vk-employee-shell
    .vk-employee-brand img {

        width:
            112px !important;
    }


    body.vk-employee-shell
    .vk-employee-person {

        grid-template-columns:
            36px
            16px !important;

        padding:
            4px 6px !important;
    }


    body.vk-employee-shell
    .vk-employee-person-avatar {

        width:
            36px !important;

        height:
            36px !important;

        flex-basis:
            36px;
    }


    body.vk-employee-shell
    .vk-employee-person-body {

        display:
            none;
    }


    body.vk-employee-shell
    .vk-employee-main {

        padding:
            16px 12px
            28px !important;
    }


    /*
     * Старый нижний mobile bar больше не нужен:
     * навигация уже сверху.
     */

    body.vk-employee-shell
    .vk-employee-mobile-bar {

        display:
            none !important;
    }


    body.vk-employee-shell
    .vk-employee-layout {

        padding-bottom:
            0 !important;
    }

}


@media (
    max-width: 620px
) {

    body.vk-employee-shell
    .vk-employee-sidebar {

        gap:
            7px;
    }


    body.vk-employee-shell
    .vk-employee-brand img {

        width:
            94px !important;
    }


    body.vk-employee-shell
    .vk-employee-sidebar
    > .vk-employee-nav:first-of-type
    a {

        min-height:
            38px !important;

        padding:
            0 9px !important;

        font-size:
            10px !important;
    }


    body.vk-employee-shell
    .vk-employee-sidebar
    > .vk-employee-nav:first-of-type
    .vk-employee-nav-label {

        display:
            none;
    }


    body.vk-employee-shell
    .vk-employee-sidebar
    > .vk-employee-nav:first-of-type
    .vk-employee-nav-icon {

        font-size:
            15px !important;
    }


    body.vk-employee-shell
    .profile-content {

        grid-template-columns:
            48px
            minmax(0,1fr)
            auto !important;
    }


    body.vk-employee-shell
    .profile
    .avatar {

        width:
            48px !important;

        height:
            48px !important;

        flex-basis:
            48px !important;
    }

}



/* =========================================================
   PROFILE PHOTO V1
   ========================================================= */

.vk-employee-person-avatar img,
.vk-topnav-dropdown-avatar img,
body.vk-employee-shell
.profile
.avatar img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.vk-employee-person-avatar,
.vk-topnav-dropdown-avatar,
body.vk-employee-shell
.profile
.avatar {

    overflow: hidden;
}