/* =========================================================
   VOIDVPN — COMMON CABINET SIDEBAR
   ========================================================= */

.cabinet-sidebar {
    z-index: 3001;
}

.cabinet-sidebar-overlay {
    display: none;
}

@media (min-width: 921px) {
    .devices-main,
    .billing-main,
    .settings-main,
    .download-main {
        margin-left: 280px !important;
    }
}

@media (max-width: 920px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    body.cabinet-sidebar-open {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    .devices-main,
    .billing-main,
    .settings-main,
    .download-main,
    .dashboard-main {
        width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }

    .cabinet-sidebar {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        z-index: 3001 !important;

        width: min(86vw, 320px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;

        margin: 0 !important;
        padding:
            calc(18px + env(safe-area-inset-top))
            16px
            calc(18px + env(safe-area-inset-bottom))
            !important;

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

        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;

        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;

        transform: translate3d(-105%, 0, 0) !important;

        background:
            radial-gradient(
                circle at 15% 0%,
                rgba(133, 78, 255, 0.21),
                transparent 35%
            ),
            linear-gradient(
                180deg,
                rgba(16, 13, 25, 0.995),
                rgba(7, 6, 12, 0.998)
            ) !important;

        border-right:
            1px solid rgba(188, 150, 255, 0.17) !important;

        box-shadow:
            35px 0 90px rgba(0, 0, 0, 0.66),
            inset -1px 0 rgba(255, 255, 255, 0.03)
            !important;

        transition:
            transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 190ms ease,
            visibility 260ms ease !important;

        will-change: transform;
    }

    .cabinet-sidebar.is-open {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .cabinet-sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;
        z-index: 3000 !important;

        display: block !important;

        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        border: 0 !important;

        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;

        background: rgba(2, 2, 7, 0.76) !important;

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

        transition:
            opacity 220ms ease,
            visibility 220ms ease !important;
    }

    .cabinet-sidebar-overlay.is-visible {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .cabinet-brand {
        width: 100% !important;
        min-height: 54px !important;

        margin: 0 0 20px !important;
        padding: 4px 58px 4px 4px !important;

        display: flex !important;
        align-items: center !important;
        gap: 11px !important;
    }

    .cabinet-brand .dashboard-brand-logo {
        width: 43px !important;
        height: 43px !important;
        min-width: 43px !important;
        border-radius: 14px !important;
    }

    .cabinet-brand strong {
        font-size: 21px !important;
        letter-spacing: -0.04em !important;
    }

    .cabinet-sidebar-close {
        position: absolute !important;
        top: calc(18px + env(safe-area-inset-top)) !important;
        right: 16px !important;
        left: auto !important;
        z-index: 10 !important;

        width: 42px !important;
        height: 42px !important;

        display: grid !important;
        place-items: center !important;

        padding: 0 !important;

        color: rgba(255, 255, 255, 0.9) !important;
        background: rgba(255, 255, 255, 0.065) !important;

        border:
            1px solid rgba(255, 255, 255, 0.11) !important;
        border-radius: 14px !important;

        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        cursor: pointer;
        touch-action: manipulation;
    }

    .cabinet-sidebar-close:active {
        transform: scale(0.93);
    }

    .cabinet-sidebar-close svg {
        width: 20px !important;
        height: 20px !important;
    }

    .cabinet-navigation {
        width: 100% !important;
        margin: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        gap: 7px !important;
    }

    .cabinet-navigation .dashboard-nav-link {
        position: relative;

        width: 100% !important;
        min-height: 54px !important;

        margin: 0 !important;
        padding: 9px 13px !important;

        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 11px !important;

        color: rgba(235, 231, 247, 0.68) !important;
        background: rgba(255, 255, 255, 0.025) !important;

        border:
            1px solid rgba(255, 255, 255, 0.045) !important;
        border-radius: 16px !important;

        text-decoration: none !important;
    }

    .cabinet-navigation .dashboard-nav-link svg {
        width: 19px !important;
        height: 19px !important;
        justify-self: center;
    }

    .cabinet-navigation .dashboard-nav-link span {
        min-width: 0;

        font-size: 13px !important;
        font-weight: 650 !important;

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

    .cabinet-navigation .dashboard-nav-link.is-active {
        color: #ffffff !important;

        background:
            linear-gradient(
                135deg,
                rgba(139, 83, 255, 0.3),
                rgba(91, 45, 190, 0.12)
            ) !important;

        border-color:
            rgba(170, 125, 255, 0.3) !important;

        box-shadow:
            inset 0 1px rgba(255, 255, 255, 0.06),
            0 10px 28px rgba(85, 39, 170, 0.14)
            !important;
    }

    .cabinet-navigation .dashboard-nav-link.is-active::before {
        content: "";

        position: absolute;
        top: 13px;
        bottom: 13px;
        left: -1px;

        width: 3px;

        border-radius: 0 999px 999px 0;

        background:
            linear-gradient(180deg, #c2a3ff, #8152ef);

        box-shadow:
            0 0 14px rgba(166, 119, 255, 0.75);
    }

    .cabinet-sidebar-plan {
        width: 100% !important;

        margin: auto 0 10px !important;
        padding: 15px !important;

        border-radius: 19px !important;

        background:
            radial-gradient(
                circle at 0 0,
                rgba(167, 112, 255, 0.18),
                transparent 52%
            ),
            rgba(255, 255, 255, 0.035) !important;

        border:
            1px solid rgba(181, 144, 255, 0.15) !important;
    }

    .cabinet-sidebar-plan p {
        margin: 6px 0 12px !important;
        font-size: 10px !important;
        line-height: 1.45 !important;
    }

    .cabinet-sidebar-plan a {
        width: 100% !important;
        min-height: 40px !important;

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

        padding: 9px 12px !important;
        border-radius: 13px !important;
        font-size: 11px !important;
    }

    .cabinet-system-status {
        width: 100% !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 10px 12px !important;

        display: flex !important;
        align-items: center !important;
        gap: 8px !important;

        border-radius: 14px !important;
        font-size: 10px !important;
    }

    .devices-mobile-menu,
    .settings-mobile-menu,
    .download-mobile-menu,
    .billing-mobile-menu,
    .dashboard-mobile-menu {
        display: grid !important;
        place-items: center !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;

        padding: 0 !important;
        border-radius: 14px !important;

        cursor: pointer;
        touch-action: manipulation;
    }
}

@media (max-width: 380px) {
    .cabinet-sidebar {
        width: min(89vw, 304px) !important;
        padding-right: 13px !important;
        padding-left: 13px !important;
    }

    .cabinet-sidebar-close {
        right: 13px !important;
    }

    .cabinet-navigation .dashboard-nav-link {
        min-height: 51px !important;
        padding: 8px 11px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cabinet-sidebar,
    .cabinet-sidebar-overlay {
        transition: none !important;
    }
}


/* =========================================================
   VOIDVPN CABINET — COMMON MOBILE TOPBAR ACTIONS
   ========================================================= */

.cabinet-mobile-actions {
    display: none;
}


@media (max-width: 920px) {

    .cabinet-mobile-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;

        flex: 0 0 auto !important;
    }


    /* PURPLE MENU BUTTON */

    .cabinet-mobile-menu-button {
        appearance: none !important;
        -webkit-appearance: none !important;

        display: grid !important;
        place-items: center !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;

        background:
            linear-gradient(
                145deg,
                #9639e9,
                #7c2bd1 55%,
                #6721b4
            ) !important;

        border:
            1px solid rgba(226, 195, 255, 0.35)
            !important;

        border-radius: 13px !important;

        box-shadow:
            0 10px 28px rgba(126, 34, 206, 0.34),
            inset 0 1px 0 rgba(255, 255, 255, 0.2)
            !important;

        outline: none !important;

        cursor: pointer;
        touch-action: manipulation;

        transition:
            transform 160ms ease,
            filter 160ms ease,
            box-shadow 160ms ease
            !important;
    }

    .cabinet-mobile-menu-button svg {
        width: 21px !important;
        height: 21px !important;

        stroke: currentColor !important;
        stroke-width: 2.1 !important;
    }

    .cabinet-mobile-menu-button:active {
        transform: scale(0.93) !important;
        filter: brightness(1.12);
    }


    /* BACK BUTTON */

    .cabinet-mobile-back-button {
        display: grid !important;
        place-items: center !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        color:
            rgba(235, 230, 245, 0.68)
            !important;

        background:
            linear-gradient(
                145deg,
                rgba(28, 23, 41, 0.94),
                rgba(15, 12, 24, 0.98)
            ) !important;

        border:
            1px solid rgba(255, 255, 255, 0.085)
            !important;

        border-radius: 13px !important;

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 9px 25px rgba(0, 0, 0, 0.22)
            !important;

        text-decoration: none !important;

        cursor: pointer;
        touch-action: manipulation;

        transition:
            color 160ms ease,
            border-color 160ms ease,
            background 160ms ease,
            transform 160ms ease
            !important;
    }

    .cabinet-mobile-back-button svg {
        width: 18px !important;
        height: 18px !important;

        stroke: currentColor !important;
        stroke-width: 1.8 !important;
    }

    .cabinet-mobile-back-button:active {
        color: #ffffff !important;

        background:
            rgba(129, 73, 230, 0.18)
            !important;

        border-color:
            rgba(183, 142, 255, 0.23)
            !important;

        transform: scale(0.93) !important;
    }


    /* HIDE OLD PAGE-SPECIFIC BUTTONS */

    .dashboard-topbar
        > .dashboard-mobile-menu,

    .devices-topbar
        > .devices-mobile-menu,

    .devices-topbar
        > .devices-back,

    .billing-topbar
        > .billing-mobile-menu,

    .billing-topbar
        > .billing-back,

    .settings-topbar
        > .settings-mobile-menu,

    .download-topbar
        > .download-mobile-menu {
        display: none !important;
    }


    /* TOPBAR ALIGNMENT */

    .dashboard-topbar,
    .devices-topbar,
    .billing-topbar,
    .settings-topbar,
    .download-topbar {
        justify-content: flex-start !important;
    }

    .dashboard-topbar-actions,
    .devices-user,
    .billing-user,
    .settings-user,
    .download-user {
        margin-left: auto !important;
    }
}


@media (max-width: 360px) {

    .cabinet-mobile-actions {
        gap: 6px !important;
    }

    .cabinet-mobile-menu-button,
    .cabinet-mobile-back-button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;

        border-radius: 12px !important;
    }
}


/* =========================================================
   CABINET SIDEBAR CLOSE — DESKTOP FIX
   ========================================================= */

/* На ПК кнопка закрытия полностью скрыта */

.cabinet-sidebar-close,
#cabinetSidebarClose,
.dashboard-sidebar-close {
    display: none !important;
}


/* Показываем её только на телефоне и планшете */

@media (max-width: 920px) {

    .cabinet-sidebar-close,
    #cabinetSidebarClose {
        appearance: none !important;
        -webkit-appearance: none !important;

        position: absolute !important;
        top:
            calc(
                18px
                + env(safe-area-inset-top)
            ) !important;
        right: 16px !important;
        left: auto !important;
        z-index: 20 !important;

        display: grid !important;
        place-items: center !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;

        background:
            linear-gradient(
                145deg,
                rgba(37, 29, 54, 0.98),
                rgba(17, 13, 27, 0.98)
            ) !important;

        border:
            1px solid rgba(196, 157, 255, 0.22)
            !important;

        border-radius: 14px !important;

        box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.34),
            inset 0 1px 0 rgba(255, 255, 255, 0.07)
            !important;

        outline: none !important;

        cursor: pointer;
        pointer-events: auto !important;
        touch-action: manipulation;
    }

    .cabinet-sidebar-close svg,
    #cabinetSidebarClose svg {
        display: block !important;

        width: 20px !important;
        height: 20px !important;

        color: currentColor !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
    }

    .cabinet-sidebar-close:active,
    #cabinetSidebarClose:active {
        transform: scale(0.93) !important;
    }
}


/* =========================================================
   CABINET DESKTOP TOPBAR — FINAL
   ========================================================= */

.cabinet-desktop-back {
    display: none;
}


@media (min-width: 921px) {

    /* Убираем все гамбургеры на ПК */

    .dashboard-mobile-menu,
    .devices-mobile-menu,
    .billing-mobile-menu,
    .settings-mobile-menu,
    .download-mobile-menu,
    .cabinet-mobile-actions,
    [data-cabinet-menu],
    [data-cabinet-sidebar-open] {
        display: none !important;
    }


    /* Убираем старые отдельные кнопки назад */

    .devices-back,
    .billing-back {
        display: none !important;
    }


    /* Общая кнопка Назад в панель */

    .cabinet-desktop-back {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 9px !important;

        min-height: 42px !important;

        margin: 0 !important;
        padding: 0 15px !important;

        color:
            rgba(238, 234, 247, 0.72)
            !important;

        background:
            linear-gradient(
                145deg,
                rgba(31, 25, 44, 0.88),
                rgba(15, 12, 23, 0.94)
            ) !important;

        border:
            1px solid rgba(255, 255, 255, 0.08)
            !important;

        border-radius: 13px !important;

        box-shadow:
            inset 0 1px 0
            rgba(255, 255, 255, 0.045),
            0 9px 25px rgba(0, 0, 0, 0.18)
            !important;

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

        text-decoration: none !important;
        white-space: nowrap !important;

        transition:
            color 180ms ease,
            border-color 180ms ease,
            background 180ms ease,
            transform 180ms ease
            !important;
    }

    .cabinet-desktop-back svg {
        width: 17px !important;
        height: 17px !important;

        stroke-width: 1.9 !important;
    }

    .cabinet-desktop-back:hover {
        color: #ffffff !important;

        background:
            linear-gradient(
                145deg,
                rgba(112, 62, 205, 0.24),
                rgba(25, 18, 41, 0.96)
            ) !important;

        border-color:
            rgba(180, 137, 255, 0.22)
            !important;

        transform: translateY(-1px);
    }


    /* Выравнивание содержимого справа */

    .devices-user,
    .billing-user,
    .settings-user,
    .download-user {
        margin-left: auto !important;
    }
}


/* На телефоне показываем только мобильные кнопки */

@media (max-width: 920px) {

    .cabinet-desktop-back {
        display: none !important;
    }
}