/* =========================================================
   VETEROK KB15 — EMPLOYEE SOCIAL SHELL V1
   ========================================================= */

body.vk-employee-shell {
    min-height: 100vh !important;
    margin: 0 !important;
    background:
        radial-gradient(
            circle at 86% -8%,
            var(--vk-accent-soft),
            transparent 32rem
        ),
        var(--vk-bg) !important;
}


/*
 * Старый верхний логотип portal.js
 * внутри новой оболочки больше не нужен.
 */

body.vk-employee-shell
> .vk-portal-brand {
    display: none !important;
}


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

.vk-employee-layout {
    min-height: 100vh;

    display: grid;

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


.vk-employee-sidebar {
    min-height: 100vh;

    position: sticky;
    top: 0;

    align-self: start;

    height: 100vh;

    display: flex;
    flex-direction: column;

    padding:
        24px 17px
        16px;

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

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

    overflow-y: auto;

    z-index: 30;
}


.vk-employee-main {
    min-width: 0;

    padding:
        30px 34px
        50px;
}


/*
 * Старая .page теперь живёт
 * внутри main-контента.
 */

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

    margin:
        0 auto !important;

    padding:
        0 !important;
}


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

.vk-employee-brand {
    display: flex;
    align-items: center;

    min-height: 63px;

    padding:
        0 8px 18px;

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


.vk-employee-brand img {
    width: 155px;
    height: auto;

    display: block;
}


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

.vk-employee-person {
    display: grid;

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

    gap: 10px;

    align-items: center;

    margin:
        17px 1px
        15px;

    padding:
        10px;

    border-radius:
        13px;

    background:
        color-mix(
            in srgb,
            var(--vk-surface-2) 55%,
            transparent
        );
}


.vk-employee-person-avatar {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

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

    color: #1b0f08;

    font-size: 14px;
    font-weight: 850;

    letter-spacing: -.03em;
}


.vk-employee-person-body {
    min-width: 0;
}


.vk-employee-person-name {
    overflow: hidden;

    color:
        var(--vk-text);

    font-size: 11.5px;
    font-weight: 780;

    line-height: 1.25;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.vk-employee-person-role {
    margin-top: 3px;

    overflow: hidden;

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

    font-size: 9.5px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


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

.vk-employee-nav {
    display: grid;

    gap: 4px;
}


.vk-employee-nav a {
    min-height: 44px;

    display: grid;

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

    gap: 11px;

    align-items: center;

    padding:
        0 11px;

    border:
        1px solid transparent;

    border-radius:
        11px;

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

    text-decoration: none;

    font-size: 11.5px;
    font-weight: 680;

    transition:
        background var(--vk-transition),
        border-color var(--vk-transition),
        color var(--vk-transition);
}


.vk-employee-nav a:hover {
    color:
        var(--vk-text);

    background:
        color-mix(
            in srgb,
            var(--vk-surface-2) 60%,
            transparent
        );
}


.vk-employee-nav a.is-active {
    color:
        var(--vk-accent);

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

    border-color:
        color-mix(
            in srgb,
            var(--vk-accent) 27%,
            transparent
        );

    box-shadow:
        inset 3px 0 0
        var(--vk-accent);
}


.vk-employee-nav-icon {
    width: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
}


.vk-employee-nav-label {
    min-width: 0;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =========================================================
   SEPARATOR / FOOTER
   ========================================================= */

.vk-employee-nav-separator {
    height: 1px;

    margin:
        12px 0;

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


.vk-employee-sidebar-footer {
    margin-top: auto;

    padding-top: 14px;
}


.vk-employee-theme-title {
    margin:
        0 4px
        6px;

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

    font-size: 9px;
    font-weight: 650;
}


.vk-employee-theme {
    display: grid;

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

    gap: 2px;

    padding: 2px;

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

    border-radius: 9px;

    background:
        color-mix(
            in srgb,
            var(--vk-surface-2) 45%,
            transparent
        );
}


.vk-employee-theme button {
    height: 25px;

    margin: 0;
    padding: 0 3px;

    border: 0;
    border-radius: 6px;

    background: transparent;

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

    font-size: 9px;
    font-weight: 650;

    cursor: pointer;
}


.vk-employee-theme button:hover {
    color:
        var(--vk-text);
}


.vk-employee-theme button.is-active {
    color:
        var(--vk-accent);

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

    box-shadow:
        inset 0 0 0 1px
        color-mix(
            in srgb,
            var(--vk-accent) 25%,
            transparent
        );
}


/* =========================================================
   PROFILE SOCIALIZATION
   ========================================================= */

/*
 * Центральную карточку делаем спокойнее.
 * Это первая стадия — существующие id/JS остаются.
 */

body.vk-employee-shell
.profile {
    margin-bottom:
        12px !important;

    padding:
        20px !important;

    border-radius:
        18px !important;

    box-shadow:
        none !important;
}


body.vk-employee-shell
.profile-content {
    gap:
        14px !important;
}


body.vk-employee-shell
.avatar {
    width:
        66px !important;

    height:
        66px !important;

    flex-basis:
        66px !important;

    border-radius:
        18px !important;
}


body.vk-employee-shell
.profile-name {
    font-size:
        clamp(
            22px,
            3vw,
            30px
        ) !important;

    letter-spacing:
        -.035em !important;
}


/*
 * Огромные старые плитки навигации
 * скрываем — их функцию теперь выполняет sidebar.
 */

body.vk-employee-shell
.profile-menu {
    display:
        none !important;
}


/*
 * Инфо-блоки становятся компактнее,
 * ближе к social-dashboard.
 */

body.vk-employee-shell
.dashboard {
    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        ) !important;

    gap:
        9px !important;

    margin-bottom:
        12px !important;
}


body.vk-employee-shell
.dashboard
.card {
    min-height:
        92px;

    padding:
        14px !important;

    border-radius:
        14px !important;

    box-shadow:
        none !important;
}


body.vk-employee-shell
.card-label {
    margin-bottom:
        7px !important;

    font-size:
        10px !important;
}


body.vk-employee-shell
.card-value {
    font-size:
        21px !important;
}


body.vk-employee-shell
.section {
    padding:
        15px !important;

    margin-bottom:
        10px !important;

    border-radius:
        15px !important;

    box-shadow:
        none !important;
}


body.vk-employee-shell
.section-title {
    font-size:
        14px !important;
}


body.vk-employee-shell
.row {
    min-height:
        49px;

    padding:
        10px 11px !important;

    border-radius:
        10px !important;
}


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

.vk-employee-mobile-bar {
    display: none;
}


@media (max-width: 820px) {

    .vk-employee-layout {
        display: block;

        padding-bottom:
            calc(
                70px
                + env(safe-area-inset-bottom)
            );
    }


    .vk-employee-sidebar {
        display: none;
    }


    .vk-employee-main {
        padding:
            16px 12px
            24px;
    }


    .vk-employee-mobile-bar {
        position: fixed;

        left: 10px;
        right: 10px;
        bottom:
            calc(
                8px
                + env(safe-area-inset-bottom)
            );

        z-index: 90;

        min-height: 58px;

        display: grid;

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

        gap: 2px;

        padding: 4px;

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

        border-radius:
            16px;

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

        box-shadow:
            0 12px 35px
            rgba(0,0,0,.22);

        backdrop-filter:
            blur(16px);

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


    .vk-employee-mobile-bar a {
        min-width: 0;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 3px;

        border-radius:
            11px;

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

        text-decoration: none;

        font-size:
            8px;

        font-weight:
            650;
    }


    .vk-employee-mobile-bar a.is-active {
        color:
            var(--vk-accent);

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


    .vk-employee-mobile-icon {
        font-size:
            16px;

        line-height:
            1;
    }


    body.vk-employee-shell
    .dashboard {
        grid-template-columns:
            1fr !important;
    }
}


@media (max-width: 460px) {

    .vk-employee-main {
        padding:
            12px 10px
            20px;
    }


    body.vk-employee-shell
    .profile {
        padding:
            15px !important;
    }


    body.vk-employee-shell
    .avatar {
        width:
            54px !important;

        height:
            54px !important;

        flex-basis:
            54px !important;
    }


    body.vk-employee-shell
    .profile-name {
        font-size:
            20px !important;
    }
}


/* =========================================================
   EMPLOYEE PROFILE V3 — SOCIAL CONTENT V1
   ========================================================= */


/* ---------------------------------------------------------
   ADMIN PREVIEW
   --------------------------------------------------------- */

/*
 * Старый широкий системный баннер больше
 * не занимает отдельную строку над профилем.
 */

body.vk-employee-shell
.admin-banner {
    position: absolute !important;

    top: 14px !important;
    right: 16px !important;

    z-index: 5 !important;

    width: auto !important;

    margin: 0 !important;

    padding: 5px 8px !important;

    border-radius: 999px !important;

    background:
        color-mix(
            in srgb,
            var(--vk-info) 10%,
            transparent
        ) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--vk-info) 18%,
            transparent
        ) !important;

    color:
        var(--vk-info) !important;

    font-size: 9px !important;
    font-weight: 700 !important;

    box-shadow: none !important;
}


/* ---------------------------------------------------------
   PROFILE HEADER
   --------------------------------------------------------- */

body.vk-employee-shell
.profile {
    min-height: 132px;

    display: flex;

    align-items: center;

    padding:
        21px 22px !important;

    border-radius:
        17px !important;
}


body.vk-employee-shell
.profile::after {
    width:
        150px !important;

    height:
        150px !important;

    right:
        -52px !important;

    top:
        -62px !important;

    opacity:
        .7;
}


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

    display: grid !important;

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

    align-items: center !important;

    gap:
        17px !important;
}


body.vk-employee-shell
.avatar {
    width:
        70px !important;

    height:
        70px !important;

    flex-basis:
        70px !important;

    border-radius:
        18px !important;

    font-size:
        22px !important;
}


body.vk-employee-shell
.profile-body {
    min-width: 0;
}


body.vk-employee-shell
.profile-name {
    font-size:
        clamp(
            24px,
            3.4vw,
            32px
        ) !important;

    line-height:
        1.08 !important;
}


body.vk-employee-shell
.profile-position {
    margin-top:
        5px !important;

    font-size:
        12px !important;
}


body.vk-employee-shell
.status {
    margin-top:
        8px !important;

    padding:
        5px 8px !important;

    font-size:
        9.5px !important;
}


body.vk-employee-shell
.work-link {
    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        38px;

    padding:
        0 13px !important;

    border-radius:
        10px !important;

    font-size:
        10.5px !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   SOCIAL STATS
   --------------------------------------------------------- */

/*
 * Старый dashboard превращаем
 * в компактную строку показателей.
 */

body.vk-employee-shell
.dashboard {
    display: grid !important;

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

    gap:
        8px !important;

    margin-bottom:
        10px !important;
}


body.vk-employee-shell
.dashboard
.card {
    min-height:
        78px !important;

    padding:
        12px 13px !important;

    border-radius:
        13px !important;

    box-shadow:
        none !important;
}


body.vk-employee-shell
.card-label {
    margin-bottom:
        5px !important;

    color:
        var(--vk-text-muted) !important;

    font-size:
        9.5px !important;
}


body.vk-employee-shell
.card-value {
    font-size:
        19px !important;

    line-height:
        1.1 !important;
}


body.vk-employee-shell
.card-small {
    margin-top:
        4px !important;

    font-size:
        9px !important;
}


body.vk-employee-shell
.task-numbers {
    gap:
        17px !important;
}


body.vk-employee-shell
.task-number strong {
    font-size:
        19px !important;
}


body.vk-employee-shell
.task-number span {
    font-size:
        8.5px !important;
}


/* ---------------------------------------------------------
   SOCIAL TODAY
   --------------------------------------------------------- */

.vk-social-today {
    margin-bottom:
        10px;

    padding:
        15px;

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

    border-radius:
        15px;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--vk-surface) 97%,
                transparent
            ),
            color-mix(
                in srgb,
                var(--vk-surface-2) 78%,
                transparent
            )
        );
}


.vk-social-today-head {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom:
        10px;
}


.vk-social-today-title {
    font-size:
        14px;

    font-weight:
        780;
}


.vk-social-today-date {
    color:
        var(--vk-text-muted);

    font-size:
        9.5px;
}


.vk-social-today-grid {
    display: grid;

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

    gap:
        7px;
}


.vk-social-today-item {
    min-height:
        58px;

    padding:
        10px 11px;

    border-radius:
        10px;

    background:
        color-mix(
            in srgb,
            var(--vk-surface-2) 53%,
            transparent
        );
}


.vk-social-today-label {
    color:
        var(--vk-text-muted);

    font-size:
        8.5px;
}


.vk-social-today-value {
    margin-top:
        5px;

    color:
        var(--vk-text);

    font-size:
        11px;

    font-weight:
        750;

    line-height:
        1.3;
}


.vk-social-today-value.attention {
    color:
        var(--vk-accent);
}


.vk-social-today-value.good {
    color:
        var(--vk-success);
}


/* ---------------------------------------------------------
   SECTION LAYOUT
   --------------------------------------------------------- */

body.vk-employee-shell
.section {
    padding:
        14px !important;

    margin-bottom:
        10px !important;

    border-radius:
        14px !important;
}


body.vk-employee-shell
.section-head {
    margin-bottom:
        9px !important;
}


body.vk-employee-shell
.section-title {
    font-size:
        13px !important;
}


body.vk-employee-shell
.section-link {
    font-size:
        9.5px !important;

    color:
        var(--vk-accent) !important;
}


/* ---------------------------------------------------------
   SCHEDULE
   --------------------------------------------------------- */

/*
 * Показываем только первые 3 строки.
 * Сам список остаётся полноценным в DOM,
 * backend/JS не меняем.
 */

body.vk-employee-shell
#scheduleList
.row:nth-child(n+4) {
    display:
        none !important;
}


body.vk-employee-shell
#scheduleList {
    gap:
        5px !important;
}


body.vk-employee-shell
#scheduleList
.row {
    min-height:
        50px !important;

    padding:
        9px 11px !important;

    border-radius:
        9px !important;
}


body.vk-employee-shell
#scheduleList
.row-title {
    font-size:
        11px !important;
}


body.vk-employee-shell
#scheduleList
.row-description {
    font-size:
        8.5px !important;
}


body.vk-employee-shell
#scheduleList
.row-value {
    font-size:
        10.5px !important;
}


/* ---------------------------------------------------------
   TASK LIST
   --------------------------------------------------------- */

body.vk-employee-shell
.list {
    gap:
        5px !important;
}


body.vk-employee-shell
.list
.row {
    min-height:
        49px !important;

    padding:
        9px 11px !important;

    border-radius:
        9px !important;
}


body.vk-employee-shell
.row-title {
    font-size:
        11px !important;
}


body.vk-employee-shell
.row-description {
    font-size:
        8.5px !important;
}


body.vk-employee-shell
.row-value {
    font-size:
        10px !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 720px) {

    body.vk-employee-shell
    .profile-content {
        grid-template-columns:
            56px
            minmax(0,1fr) !important;

        gap:
            12px !important;
    }


    body.vk-employee-shell
    .avatar {
        width:
            56px !important;

        height:
            56px !important;

        flex-basis:
            56px !important;

        border-radius:
            15px !important;
    }


    body.vk-employee-shell
    .work-link {
        grid-column:
            1 / -1;

        width:
            100%;
    }


    body.vk-employee-shell
    .dashboard {
        grid-template-columns:
            1fr 1fr !important;
    }


    body.vk-employee-shell
    .dashboard
    .card:first-child {
        grid-column:
            1 / -1;
    }


    .vk-social-today-grid {
        grid-template-columns:
            1fr !important;
    }


    .vk-social-today-item {
        min-height:
            48px;
    }
}


@media (max-width: 430px) {

    body.vk-employee-shell
    .profile {
        padding:
            14px !important;
    }


    body.vk-employee-shell
    .dashboard {
        grid-template-columns:
            1fr !important;
    }


    body.vk-employee-shell
    .dashboard
    .card:first-child {
        grid-column:
            auto;
    }
}



/* =========================================================
   PROFILE V3 — SOCIAL POLISH V2
   ========================================================= */


/* ---------------------------------------------------------
   1. Старые три карточки больше не показываем.
   Они остаются в DOM, чтобы существующий JS мог
   продолжать записывать в них данные.
   --------------------------------------------------------- */

body.vk-employee-shell
.dashboard {
    display: none !important;
}


/* ---------------------------------------------------------
   2. PROFILE HEADER
   --------------------------------------------------------- */

body.vk-employee-shell
.profile {
    min-height: 126px !important;

    padding:
        20px 22px !important;

    margin-bottom:
        10px !important;
}


body.vk-employee-shell
.profile-content {
    grid-template-columns:
        76px
        minmax(0,1fr)
        auto !important;

    gap:
        18px !important;
}


body.vk-employee-shell
.avatar {
    width:
        76px !important;

    height:
        76px !important;

    flex-basis:
        76px !important;

    border-radius:
        20px !important;

    font-size:
        23px !important;
}


body.vk-employee-shell
.profile-name {
    font-size:
        clamp(
            25px,
            3.5vw,
            34px
        ) !important;

    letter-spacing:
        -.04em !important;
}


body.vk-employee-shell
.profile-position {
    margin-top:
        5px !important;

    font-size:
        11px !important;
}


/* ---------------------------------------------------------
   3. Статусы под ФИО
   --------------------------------------------------------- */

.vk-profile-meta {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap:
        6px;

    margin-top:
        8px;
}


body.vk-employee-shell
.status {
    margin:
        0 !important;

    min-height:
        23px;

    padding:
        0 8px !important;

    display:
        inline-flex !important;

    align-items:
        center;

    border-radius:
        999px !important;

    font-size:
        9px !important;

    line-height:
        1 !important;
}


/* Администраторский просмотр теперь небольшой badge,
   а не отдельный баннер сверху страницы. */

body.vk-employee-shell
.admin-banner {
    position:
        static !important;

    display:
        none;

    width:
        auto !important;

    margin:
        0 !important;

    padding:
        0 8px !important;

    min-height:
        23px;

    align-items:
        center;

    border-radius:
        999px !important;

    background:
        color-mix(
            in srgb,
            var(--vk-info) 9%,
            transparent
        ) !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--vk-info) 18%,
            transparent
        ) !important;

    color:
        var(--vk-info) !important;

    font-size:
        8.5px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    box-shadow:
        none !important;
}


/* Когда старый JS включает banner через display:block,
   после переноса всё равно делаем его inline-flex. */

body.vk-employee-shell
.admin-banner[style*="display: block"],
body.vk-employee-shell
.admin-banner[style*="display:block"] {
    display:
        inline-flex !important;
}


/* ---------------------------------------------------------
   4. Рабочая страница — secondary action
   --------------------------------------------------------- */

body.vk-employee-shell
.work-link {
    min-height:
        35px !important;

    padding:
        0 12px !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--vk-accent) 25%,
            transparent
        ) !important;

    border-radius:
        9px !important;

    background:
        color-mix(
            in srgb,
            var(--vk-accent) 11%,
            transparent
        ) !important;

    color:
        var(--vk-accent) !important;

    font-size:
        9.5px !important;

    font-weight:
        750 !important;

    box-shadow:
        none !important;
}


body.vk-employee-shell
.work-link:hover {
    background:
        color-mix(
            in srgb,
            var(--vk-accent) 17%,
            transparent
        ) !important;
}


/* ---------------------------------------------------------
   5. TODAY — главный информационный блок
   --------------------------------------------------------- */

.vk-social-today {
    margin-bottom:
        10px !important;

    padding:
        14px !important;

    border-radius:
        14px !important;
}


.vk-social-today-head {
    margin-bottom:
        8px !important;
}


.vk-social-today-title {
    font-size:
        13px !important;
}


.vk-social-today-date {
    font-size:
        8.5px !important;
}


.vk-social-today-grid {
    gap:
        6px !important;
}


.vk-social-today-item {
    min-height:
        55px !important;

    padding:
        9px 10px !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--vk-border) 65%,
            transparent
        );

    border-radius:
        9px !important;
}


.vk-social-today-label {
    font-size:
        8px !important;
}


.vk-social-today-value {
    margin-top:
        4px !important;

    font-size:
        10.5px !important;

    line-height:
        1.25 !important;
}


/* ---------------------------------------------------------
   6. Ближайшие смены
   --------------------------------------------------------- */

body.vk-employee-shell
#scheduleSection {
    margin-bottom:
        10px !important;
}


body.vk-employee-shell
#scheduleList
.row {
    min-height:
        46px !important;

    padding:
        8px 10px !important;
}


/* ---------------------------------------------------------
   7. MOBILE
   --------------------------------------------------------- */

@media (max-width: 720px) {

    body.vk-employee-shell
    .profile-content {
        grid-template-columns:
            58px
            minmax(0,1fr) !important;
    }


    body.vk-employee-shell
    .avatar {
        width:
            58px !important;

        height:
            58px !important;

        flex-basis:
            58px !important;

        border-radius:
            16px !important;
    }


    body.vk-employee-shell
    .profile-name {
        font-size:
            21px !important;
    }


    body.vk-employee-shell
    .work-link {
        grid-column:
            1 / -1;

        width:
            auto !important;

        justify-self:
            start;
    }


    .vk-social-today-grid {
        grid-template-columns:
            1fr !important;
    }

}



/* =========================================================
   EMPLOYEE SHELL — FOUC FIX V1
   ========================================================= */

/*
 * Пока employee shell не построен,
 * исходная старая .page вообще не показывается.
 *
 * Фон приложения при этом уже виден,
 * поэтому никакого вспыхивания старого UI нет.
 */

body.vk-employee-shell.vk-shell-pending
> .page {
    visibility: hidden !important;
    opacity: 0 !important;
}


/*
 * Также прячем старый portal-brand,
 * если veterok-portal.js успеет вставить его раньше shell.
 */

body.vk-employee-shell.vk-shell-pending
> .vk-portal-brand {
    display: none !important;
}


/*
 * После построения shell центральный интерфейс
 * появляется мягко, но почти мгновенно.
 */

body.vk-employee-shell
.vk-employee-layout {
    opacity: 1;
}


body.vk-employee-shell.vk-shell-pending
.vk-employee-layout {
    opacity: 0;
}


body.vk-employee-shell.vk-shell-ready
.vk-employee-layout {
    animation:
        vkEmployeeShellAppear
        .12s ease-out
        both;
}


@keyframes vkEmployeeShellAppear {

    from {
        opacity: 0;
        transform: translateY(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* =========================================================
   PROFILE V3 — MONTHLY STAR RATING
   ========================================================= */

.vk-profile-rating {
    margin-bottom: 10px;
    padding: 15px;

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

    border-radius:
        15px;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--vk-surface) 97%,
                transparent
            ),
            color-mix(
                in srgb,
                var(--vk-surface-2) 75%,
                transparent
            )
        );
}


.vk-profile-rating-head {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;

    margin-bottom: 12px;
}


.vk-profile-rating-title {
    font-size: 14px;
    font-weight: 800;
}


.vk-profile-rating-subtitle {
    margin-top: 3px;

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

    font-size: 9px;
}


.vk-profile-rating-main {
    display: flex;

    align-items: baseline;

    gap: 8px;
}


.vk-profile-rating-stars {
    color:
        var(--vk-accent);

    font-size: 27px;
    font-weight: 850;

    letter-spacing: -.04em;
}


.vk-profile-rating-place {
    color:
        var(--vk-text-muted);

    font-size: 9.5px;
}


.vk-profile-rating-grid {
    display: grid;

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

    gap: 6px;
}


.vk-profile-rating-stat {
    min-height: 58px;

    padding: 9px 10px;

    border-radius: 9px;

    background:
        color-mix(
            in srgb,
            var(--vk-surface-2) 55%,
            transparent
        );
}


.vk-profile-rating-stat-label {
    color:
        var(--vk-text-muted);

    font-size: 8px;
}


.vk-profile-rating-stat-value {
    margin-top: 5px;

    font-size: 13px;
    font-weight: 800;
}


.vk-profile-rating-period {
    display: flex;

    flex-wrap: wrap;

    align-items: center;
    justify-content: space-between;

    gap: 8px 16px;

    margin-top: 10px;
    padding-top: 10px;

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


.vk-profile-rating-period-label {
    color:
        var(--vk-text-muted);

    font-size: 8px;
}


.vk-profile-rating-period-value {
    margin-top: 3px;

    font-size: 9.5px;
    font-weight: 700;
}


.vk-profile-rating-reset {
    color:
        var(--vk-accent);

    font-size: 9px;
    font-weight: 700;
}


/* =========================================================
   AWARD HISTORY
   ========================================================= */

.vk-rating-history {
    margin-bottom: 10px;
    padding: 14px;

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

    border-radius:
        14px;

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


.vk-rating-history-head {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 8px;
}


.vk-rating-history-title {
    font-size: 13px;
    font-weight: 780;
}


.vk-rating-history-list {
    display: grid;
    gap: 5px;
}


.vk-rating-history-row {
    min-height: 44px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 8px 10px;

    border-radius: 9px;

    background:
        color-mix(
            in srgb,
            var(--vk-surface-2) 48%,
            transparent
        );
}


.vk-rating-history-main {
    min-width: 0;
}


.vk-rating-history-category {
    font-size: 10px;
    font-weight: 750;
}


.vk-rating-history-date {
    margin-top: 2px;

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

    font-size: 8px;
}


.vk-rating-history-stars {
    flex: 0 0 auto;

    color:
        var(--vk-accent);

    font-size: 11px;
    font-weight: 800;
}


.vk-rating-empty {
    padding: 14px;

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

    text-align: center;

    font-size: 9.5px;
}


@media (max-width: 680px) {

    .vk-profile-rating-grid {
        grid-template-columns: 1fr;
    }


    .vk-profile-rating-head {
        display: block;
    }


    .vk-profile-rating-main {
        margin-top: 8px;
    }

}



/* =========================================================
   WAITER WORK PAGE — EMPLOYEE SHELL V1
   ========================================================= */


/*
 * Старую portal brand скрываем.
 */

body.vk-work-waiter
> .vk-portal-brand {
    display: none !important;
}


/*
 * До полной сборки shell
 * старую страницу не показываем.
 */

body.vk-work-waiter.vk-shell-pending
> .page {
    visibility: hidden !important;
    opacity: 0 !important;
}


/*
 * Рабочая область.
 */

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

    max-width: 1180px !important;

    margin:
        0 auto !important;

    padding:
        0 !important;
}


/* =========================================================
   HEADER
   ========================================================= */

body.vk-work-waiter
.top {
    display: flex !important;

    align-items: flex-start !important;
    justify-content: space-between !important;

    gap: 16px !important;

    margin-bottom: 14px !important;
}


body.vk-work-waiter
.top h1 {
    margin: 0 !important;

    font-size:
        clamp(
            27px,
            3.3vw,
            36px
        ) !important;

    letter-spacing:
        -.04em !important;

    line-height:
        1.05 !important;
}


body.vk-work-waiter
.top .subtitle {
    margin-top: 6px !important;

    color:
        var(--vk-text-muted) !important;

    font-size:
        11px !important;
}


/*
 * Режим администратора —
 * небольшой badge, а не отдельный крупный блок.
 */

body.vk-work-waiter
.admin-mode {
    min-height: 25px !important;

    display: inline-flex !important;

    align-items: center !important;

    margin: 3px 0 0 !important;

    padding:
        0 9px !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--vk-info) 18%,
            transparent
        ) !important;

    border-radius:
        999px !important;

    background:
        color-mix(
            in srgb,
            var(--vk-info) 9%,
            transparent
        ) !important;

    color:
        var(--vk-info) !important;

    font-size:
        8.5px !important;

    font-weight:
        700 !important;

    white-space:
        nowrap !important;

    box-shadow:
        none !important;
}


/* =========================================================
   SHIFT / TASK SUMMARY
   ========================================================= */

body.vk-work-waiter
.grid {
    display: grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        ) !important;

    gap:
        9px !important;

    margin-bottom:
        10px !important;
}


body.vk-work-waiter
.grid > .card {
    min-height:
        92px !important;

    margin:
        0 !important;

    padding:
        14px 15px !important;

    border-radius:
        14px !important;

    box-shadow:
        none !important;
}


body.vk-work-waiter
.card-title {
    margin-bottom:
        8px !important;

    font-size:
        13px !important;

    font-weight:
        780 !important;
}


body.vk-work-waiter
.big {
    font-size:
        22px !important;

    line-height:
        1.15 !important;

    letter-spacing:
        -.025em !important;
}


body.vk-work-waiter
.grid .subtitle {
    font-size:
        9.5px !important;

    color:
        var(--vk-text-muted) !important;
}


/* =========================================================
   TASKS CARD
   ========================================================= */

body.vk-work-waiter
.page > .card {
    margin:
        0 !important;

    padding:
        14px !important;

    border-radius:
        14px !important;

    box-shadow:
        none !important;
}


body.vk-work-waiter
.task-list {
    display:
        grid !important;

    gap:
        6px !important;
}


body.vk-work-waiter
.task-list > * {
    margin:
        0 !important;
}


/*
 * Строки задач визуально приводим
 * к профилю.
 */

body.vk-work-waiter
.task-item,
body.vk-work-waiter
.task,
body.vk-work-waiter
.task-row {
    min-height:
        52px !important;

    padding:
        9px 11px !important;

    border-radius:
        9px !important;

    box-shadow:
        none !important;
}


/* =========================================================
   УБИРАЕМ ВЕРХНИЙ THEME SWITCHER ОТ PORTAL.JS
   ========================================================= */

/*
 * На рабочей странице тема теперь
 * управляется только из sidebar.
 */

body.vk-work-waiter
> .vk-theme-switcher,
body.vk-work-waiter
> [data-vk-theme-switcher],
body.vk-work-waiter
.vk-portal-theme-switcher {
    display:
        none !important;
}


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

@media (max-width: 720px) {

    body.vk-work-waiter
    .top {
        display:
            block !important;
    }


    body.vk-work-waiter
    .admin-mode {
        margin-top:
            10px !important;
    }


    body.vk-work-waiter
    .grid {
        grid-template-columns:
            1fr !important;
    }

}



/* =========================================================
   COOK + BARTENDER — EMPLOYEE SHELL V1
   ========================================================= */

body:is(
    .vk-work-cook,
    .vk-work-bartender
)
> .vk-portal-brand {
    display: none !important;
}


body:is(
    .vk-work-cook,
    .vk-work-bartender
).vk-shell-pending
> .page {
    visibility: hidden !important;
    opacity: 0 !important;
}


/* ---------------------------------------------------------
   MAIN
   --------------------------------------------------------- */

body:is(
    .vk-work-cook,
    .vk-work-bartender
)
.vk-employee-main
> .page {
    width: 100% !important;
    max-width: 1180px !important;

    margin: 0 auto !important;
    padding: 0 !important;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

body:is(
    .vk-work-cook,
    .vk-work-bartender
)
.top {
    display: flex !important;

    align-items: flex-start !important;
    justify-content: space-between !important;

    gap: 16px !important;

    margin-bottom: 14px !important;
}


body:is(
    .vk-work-cook,
    .vk-work-bartender
)
.top h1 {
    margin: 0 !important;

    font-size:
        clamp(
            27px,
            3.3vw,
            36px
        ) !important;

    line-height: 1.05 !important;
    letter-spacing: -.04em !important;
}


body:is(
    .vk-work-cook,
    .vk-work-bartender
)
.top .subtitle {
    margin-top: 6px !important;

    color:
        var(--vk-text-muted) !important;

    font-size: 11px !important;
}


/* ---------------------------------------------------------
   ADMIN MODE
   --------------------------------------------------------- */

body:is(
    .vk-work-cook,
    .vk-work-bartender
)
.admin-mode {
    min-height: 25px !important;

    display: inline-flex !important;

    align-items: center !important;

    margin: 3px 0 0 !important;

    padding:
        0 9px !important;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--vk-info) 18%,
            transparent
        ) !important;

    border-radius:
        999px !important;

    background:
        color-mix(
            in srgb,
            var(--vk-info) 9%,
            transparent
        ) !important;

    color:
        var(--vk-info) !important;

    font-size:
        8.5px !important;

    font-weight:
        700 !important;

    white-space:
        nowrap !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   SUMMARY
   --------------------------------------------------------- */

body:is(
    .vk-work-cook,
    .vk-work-bartender
)
.grid {
    display: grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        ) !important;

    gap: 9px !important;

    margin-bottom: 10px !important;
}


body:is(
    .vk-work-cook,
    .vk-work-bartender
)
.grid > .card {
    min-height: 92px !important;

    margin: 0 !important;

    padding:
        14px 15px !important;

    border-radius:
        14px !important;

    box-shadow:
        none !important;
}


body:is(
    .vk-work-cook,
    .vk-work-bartender
)
.card-title {
    margin-bottom:
        8px !important;

    font-size:
        13px !important;

    font-weight:
        780 !important;
}


body:is(
    .vk-work-cook,
    .vk-work-bartender
)
.big {
    font-size:
        22px !important;

    line-height:
        1.15 !important;

    letter-spacing:
        -.025em !important;
}


body:is(
    .vk-work-cook,
    .vk-work-bartender
)
.grid .subtitle {
    color:
        var(--vk-text-muted) !important;

    font-size:
        9.5px !important;
}


/* ---------------------------------------------------------
   TASKS
   --------------------------------------------------------- */

body:is(
    .vk-work-cook,
    .vk-work-bartender
)
.page > .card {
    margin:
        0 !important;

    padding:
        14px !important;

    border-radius:
        14px !important;

    box-shadow:
        none !important;
}


body:is(
    .vk-work-cook,
    .vk-work-bartender
)
.task-list {
    display:
        grid !important;

    gap:
        6px !important;
}


body:is(
    .vk-work-cook,
    .vk-work-bartender
)
.task-list > * {
    margin:
        0 !important;
}


body:is(
    .vk-work-cook,
    .vk-work-bartender
)
.task-item,
body:is(
    .vk-work-cook,
    .vk-work-bartender
)
.task,
body:is(
    .vk-work-cook,
    .vk-work-bartender
)
.task-row {
    min-height:
        52px !important;

    padding:
        9px 11px !important;

    border-radius:
        9px !important;

    box-shadow:
        none !important;
}


/* ---------------------------------------------------------
   REMOVE OLD TOP THEME SWITCHER
   --------------------------------------------------------- */

body:is(
    .vk-work-cook,
    .vk-work-bartender
)
> .vk-theme-switcher,

body:is(
    .vk-work-cook,
    .vk-work-bartender
)
> [data-vk-theme-switcher],

body:is(
    .vk-work-cook,
    .vk-work-bartender
)
.vk-portal-theme-switcher {
    display:
        none !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 720px) {

    body:is(
        .vk-work-cook,
        .vk-work-bartender
    )
    .top {
        display:
            block !important;
    }


    body:is(
        .vk-work-cook,
        .vk-work-bartender
    )
    .admin-mode {
        margin-top:
            10px !important;
    }


    body:is(
        .vk-work-cook,
        .vk-work-bartender
    )
    .grid {
        grid-template-columns:
            1fr !important;
    }

}




/* =====================================================
   EMPLOYEE LOGOUT V1.1
   ===================================================== */

.vk-employee-logout {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 11px;

    min-height: 44px;

    padding:
        10px 12px;

    margin:
        0 0 14px;

    border:
        1px solid
        rgba(239, 68, 68, .18);

    border-radius:
        12px;

    background:
        rgba(239, 68, 68, .055);

    color:
        #ef4444;

    font: inherit;
    font-size: 14px;
    font-weight: 700;

    text-align: left;

    cursor: pointer;

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


.vk-employee-logout:hover {
    background:
        rgba(239, 68, 68, .10);

    border-color:
        rgba(239, 68, 68, .30);
}


.vk-employee-logout:active {
    transform:
        scale(.985);
}


.vk-employee-logout:disabled {
    opacity: .55;

    cursor: wait;
}


.vk-employee-logout
.vk-employee-nav-icon {
    display: grid;

    place-items: center;

    width: 22px;

    flex:
        0 0 22px;

    font-size: 17px;
}


.vk-employee-logout.is-loading
.vk-employee-nav-label {
    opacity: .65;
}


.vk-employee-footer-separator {
    height: 1px;

    margin:
        0 0 14px;

    background:
        rgba(127, 127, 127, .12);
}


/* DARK */

html[data-theme="dark"]
.vk-employee-logout {

    background:
        rgba(239, 68, 68, .07);

    border-color:
        rgba(248, 113, 113, .18);

    color:
        #f87171;
}


html[data-theme="dark"]
.vk-employee-logout:hover {

    background:
        rgba(239, 68, 68, .12);
}