/*
 * My-Seedbox Design v3 -- shared application shell.
 *
 * Load after design-v3.css. Every rule is opt-in and leaves the legacy theme
 * untouched. This file owns only the header, client page frame/sidebar and
 * footer; view-specific cards, tables and forms stay in design-v3.css.
 */

html.design-v3 {
    --v3-shell-max: 1200px;
    --v3-shell-gutter: 24px;
    --v3-shell-sidebar: 276px;
    --v3-shell-gap: 32px;
    --v3-shell-top: 44px;
    --v3-shell-bottom: 72px;
    --v3-shell-sidebar-pad-x: 22px;
    --v3-shell-sidebar-pad-y: 26px;
}

html.design-v3 body,
html.design-v3 #root {
    min-width: 0;
}

/* The legacy root clips wide descendants and can truncate menus/tables. */
html.design-v3 #root {
    overflow: visible;
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

html.design-v3 #top {
    box-sizing: border-box;
    width: 100%;
    height: 72px;
}

html.design-v3 #top::after {
    display: none;
    content: none;
}

html.design-v3 #top h1 {
    box-sizing: border-box;
    width: min(var(--v3-shell-max), calc(100% - var(--v3-shell-gutter) - var(--v3-shell-gutter)));
    height: 72px;
    margin: 0 auto;
    padding: 14px 0;
}

html.design-v3 #nav {
    right: max(var(--v3-shell-gutter), calc((100% - var(--v3-shell-max)) / 2));
    top: 0;
    margin: 0;
}

/* This commercial destination is intentionally absent from the V3 header.
 * Hiding its owning item removes both the visual slot and the tab stop while
 * leaving the production legacy navigation untouched. */
html.design-v3 #top #nav > ul > li:has(> a[href="https://pulseheberg.com/baremetal"]) {
    display: none !important;
}

html.design-v3 #top > .fit-a {
    display: none;
}

/* -------------------------------------------------------------------------
 * Shared desktop page frame
 * ---------------------------------------------------------------------- */

html.design-v3 #content.v3-client-shell,
html.design-v3 #content.v3-vpn-client-manager,
html.design-v3 #content.seedbox-manager-v3,
html.design-v3 #content.v3-account-profile,
html.design-v3 #content.v3-support,
html.design-v3 #content.v3-affiliate-page,
html.design-v3 #content.v3-billing-page,
html.design-v3 #content.v3-payment-page {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--v3-shell-sidebar) !important;
    align-items: start;
    gap: var(--v3-shell-gap) !important;
    box-sizing: border-box;
    width: min(var(--v3-shell-max), calc(100% - var(--v3-shell-gutter) - var(--v3-shell-gutter))) !important;
    max-width: none !important;
    min-height: 620px;
    margin: 0 auto !important;
    padding: var(--v3-shell-top) 0 var(--v3-shell-bottom) !important;
    overflow: visible;
}

/* Clearfix pseudo-elements become extra grid cells in modern layout. */
html.design-v3 #content.v3-client-shell::before,
html.design-v3 #content.v3-client-shell::after,
html.design-v3 #content.v3-vpn-client-manager::before,
html.design-v3 #content.v3-vpn-client-manager::after,
html.design-v3 #content.seedbox-manager-v3::before,
html.design-v3 #content.seedbox-manager-v3::after,
html.design-v3 #content.v3-account-profile::before,
html.design-v3 #content.v3-account-profile::after,
html.design-v3 #content.v3-support::before,
html.design-v3 #content.v3-support::after,
html.design-v3 #content.v3-affiliate-page::before,
html.design-v3 #content.v3-affiliate-page::after,
html.design-v3 #content.v3-billing-page::before,
html.design-v3 #content.v3-billing-page::after,
html.design-v3 #content.v3-payment-page::before,
html.design-v3 #content.v3-payment-page::after {
    display: none !important;
    content: none !important;
}

html.design-v3 #content.v3-client-shell > .v3-client-main,
html.design-v3 #content.v3-vpn-client-manager > .v3-vpn-client-manager__main,
html.design-v3 #content.seedbox-manager-v3 > article,
html.design-v3 #content.v3-account-profile > article,
html.design-v3 #content.v3-support > article,
html.design-v3 #content.v3-affiliate-page > .v3-affiliate-main,
html.design-v3 #content.v3-billing-page > .v3-billing-main,
html.design-v3 #content.v3-payment-page > .v3-payment-main {
    float: none !important;
    width: auto !important;
    min-width: 0;
    max-width: none;
    margin: 0 !important;
}

/* VPN list keeps its shell grid one level below its Bootstrap container. */
html.design-v3 .v3-vpn-client-list {
    box-sizing: border-box;
    width: min(var(--v3-shell-max), calc(100% - var(--v3-shell-gutter) - var(--v3-shell-gutter))) !important;
    max-width: none !important;
    min-height: 620px;
    margin: 0 auto !important;
    padding: var(--v3-shell-top) 0 var(--v3-shell-bottom) !important;
    overflow: visible;
}

html.design-v3 .v3-vpn-client-list .v3-vpn-client-list__layout,
html.design-v3 .v3-vpn-client-list .v3-vpn-client-list__frame {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

html.design-v3 .v3-vpn-client-list .v3-vpn-client-list__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--v3-shell-sidebar) !important;
    align-items: start;
    gap: var(--v3-shell-gap) !important;
    width: 100%;
    margin: 0 !important;
}

html.design-v3 .v3-vpn-client-list .v3-vpn-client-list__layout::before,
html.design-v3 .v3-vpn-client-list .v3-vpn-client-list__layout::after,
html.design-v3 .v3-vpn-client-list .v3-vpn-client-list__grid::before,
html.design-v3 .v3-vpn-client-list .v3-vpn-client-list__grid::after {
    display: none !important;
    content: none !important;
}

html.design-v3 .v3-vpn-client-list .v3-vpn-client-list__main {
    float: none !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
}

/* Migration and compensation also keep their grid inside Bootstrap rows. */
html.design-v3 .v3-account-migration,
html.design-v3 .v3-account-compensation {
    box-sizing: border-box;
    width: min(var(--v3-shell-max), calc(100% - var(--v3-shell-gutter) - var(--v3-shell-gutter))) !important;
    max-width: none !important;
    min-height: 620px;
    margin: 0 auto !important;
    padding: var(--v3-shell-top) 0 var(--v3-shell-bottom) !important;
    overflow: visible;
}

html.design-v3 .v3-account-migration > .row,
html.design-v3 .v3-account-compensation > .row,
html.design-v3 .v3-account-migration > .row > .col-md-12,
html.design-v3 .v3-account-compensation > .row > .col-md-12 {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

html.design-v3 .v3-account-migration > .row > .col-md-12 > .margin-bottom-80,
html.design-v3 .v3-account-compensation > .row > .col-md-12 > .margin-bottom-80 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--v3-shell-sidebar) !important;
    align-items: start;
    gap: var(--v3-shell-gap) !important;
    width: 100%;
    margin: 0 !important;
}

html.design-v3 .v3-account-migration > .row::before,
html.design-v3 .v3-account-migration > .row::after,
html.design-v3 .v3-account-compensation > .row::before,
html.design-v3 .v3-account-compensation > .row::after,
html.design-v3 .v3-account-migration > .row > .col-md-12 > .margin-bottom-80::before,
html.design-v3 .v3-account-migration > .row > .col-md-12 > .margin-bottom-80::after,
html.design-v3 .v3-account-compensation > .row > .col-md-12 > .margin-bottom-80::before,
html.design-v3 .v3-account-compensation > .row > .col-md-12 > .margin-bottom-80::after {
    display: none !important;
    content: none !important;
}

html.design-v3 .v3-account-migration > .row > .col-md-12 > .margin-bottom-80 > .col-md-9,
html.design-v3 .v3-account-compensation > .row > .col-md-12 > .margin-bottom-80 > .col-md-9 {
    float: none !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

/* -------------------------------------------------------------------------
 * One sidebar surface for every client view
 * ---------------------------------------------------------------------- */

html.design-v3 #content.v3-client-shell > aside.v3-client-sidebar,
html.design-v3 #content.v3-vpn-client-manager > aside.v3-vpn-client-sidebar,
html.design-v3 .v3-vpn-client-list .v3-vpn-client-sidebar,
html.design-v3 #content.seedbox-manager-v3 > aside,
html.design-v3 #content.v3-account-profile > aside,
html.design-v3 #content.v3-support > aside,
html.design-v3 #content.v3-affiliate-page > aside.v3-affiliate-aside,
html.design-v3 #content.v3-billing-page > aside.v3-billing-aside,
html.design-v3 #content.v3-payment-page > aside.v3-payment-aside,
html.design-v3 .v3-account-migration > .row > .col-md-12 > .margin-bottom-80 > .col-md-3,
html.design-v3 .v3-account-compensation > .row > .col-md-12 > .margin-bottom-80 > .col-md-3 {
    position: relative !important;
    inset: auto !important;
    z-index: 2;
    float: none !important;
    align-self: start;
    box-sizing: border-box;
    width: var(--v3-shell-sidebar) !important;
    min-width: 0;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0 !important;
    padding: var(--v3-shell-sidebar-pad-y) var(--v3-shell-sidebar-pad-x) !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background: linear-gradient(155deg, var(--v3-navy-900, #0f1b2d), var(--v3-navy-800, #16263c));
    box-shadow: 0 18px 46px rgba(8, 17, 31, 0.16);
    color: #aebbd0;
}

html.design-v3 #content.seedbox-manager-v3 > aside {
    grid-column: 2;
    grid-row: 1;
}

/* Reset the shared menu once, including the optional admin navigation. */
html.design-v3 #root .v3-client-nav,
html.design-v3 #root .v3-client-nav + nav {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
}

html.design-v3 #root .v3-client-nav + nav {
    margin-top: 28px;
}

html.design-v3 #root .v3-client-nav__title,
html.design-v3 #root .v3-client-nav + nav > h3,
html.design-v3 #root .v3-client-account__title {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 14px;
    padding: 0;
    color: var(--v3-white, #ffffff);
    font-family: Inter, "Open Sans", "Segoe UI", Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
    text-transform: none;
}

html.design-v3 #root .v3-client-nav__title::before,
html.design-v3 #root .v3-client-nav__title::after,
html.design-v3 #root .v3-client-nav + nav > h3::before,
html.design-v3 #root .v3-client-nav + nav > h3::after,
html.design-v3 #root .v3-client-account__title::before,
html.design-v3 #root .v3-client-account__title::after {
    display: none;
    content: none;
}

html.design-v3 #root .v3-client-nav__title span,
html.design-v3 #root .v3-client-nav + nav > h3 span,
html.design-v3 #root .v3-client-account__title span {
    color: var(--v3-green, #76c043);
}

html.design-v3 #root .v3-client-nav__list,
html.design-v3 #root .v3-client-nav + nav > .list-e,
html.design-v3 #root .v3-client-account__list {
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

html.design-v3 #root .v3-client-nav__list,
html.design-v3 #root .v3-client-nav + nav > .list-e {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
}

html.design-v3 #root .v3-client-nav__list li,
html.design-v3 #root .v3-client-nav + nav > .list-e li {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.3;
}

html.design-v3 #root .v3-client-nav__list li::before,
html.design-v3 #root .v3-client-nav__list li::after,
html.design-v3 #root .v3-client-nav + nav > .list-e li::before,
html.design-v3 #root .v3-client-nav + nav > .list-e li::after,
html.design-v3 #root .v3-client-account__list li::before,
html.design-v3 #root .v3-client-account__list li::after {
    display: none;
    content: none;
}

html.design-v3 #root .v3-client-nav__list li > .fa,
html.design-v3 #root .v3-client-nav + nav > .list-e li > .fa {
    position: absolute;
    left: 13px;
    top: 50%;
    z-index: 2;
    width: 18px;
    color: #8fa1b9;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    transform: translateY(-50%);
    pointer-events: none;
}

html.design-v3 #root .v3-client-nav__list li > a,
html.design-v3 #root .v3-client-nav + nav > .list-e li > a {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding: 11px 12px 11px 42px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #c7d1df;
    font-family: Inter, "Open Sans", "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

html.design-v3 #root .v3-client-nav__list li > a:hover,
html.design-v3 #root .v3-client-nav + nav > .list-e li > a:hover {
    border-color: rgba(118, 192, 67, 0.24);
    background: rgba(118, 192, 67, 0.1);
    color: var(--v3-white, #ffffff);
}

html.design-v3 #root .v3-client-nav__list li > a:focus,
html.design-v3 #root .v3-client-nav__list li > a:focus-visible,
html.design-v3 #root .v3-client-nav + nav > .list-e li > a:focus,
html.design-v3 #root .v3-client-nav + nav > .list-e li > a:focus-visible {
    border-color: rgba(118, 192, 67, 0.42);
    outline: 3px solid var(--v3-blue, #2f80ed);
    outline-offset: 2px;
}

html.design-v3 #root .v3-client-account__title {
    margin-top: 30px;
}

html.design-v3 #root .v3-client-account__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
}

html.design-v3 #root .v3-client-account__list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.035);
    color: #aebbd0 !important;
    font-size: 12px;
    line-height: 1.4;
}

html.design-v3 #root .v3-client-account__list .scheme-e {
    flex: 0 0 auto;
    color: var(--v3-green, #76c043);
    font-size: 13px;
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

html.design-v3 #footer li:has(> a[href="https://pulsebox.tech/"]) {
    display: none !important;
}

html.design-v3 #footer > div,
html.design-v3 #footer > p {
    width: min(var(--v3-shell-max), calc(100% - var(--v3-shell-gutter) - var(--v3-shell-gutter)));
    max-width: none;
}

html.design-v3 #footer > div > *,
html.design-v3 #footer > div > *:first-child {
    overflow: visible;
}

html.design-v3 #footer > div > nav > * {
    clear: none;
}

/* -------------------------------------------------------------------------
 * Responsive shell
 * ---------------------------------------------------------------------- */

/* The signed-in navigation is wider than the public one. Keep the same safe
 * breakpoint for both, so the logo is never covered around 1024px. */
@media only screen and (max-width: 1100px) {
    html.design-v3 #nav {
        right: 0;
        top: 100%;
        display: none;
        visibility: hidden;
        width: 100%;
        height: auto;
        max-height: none;
        margin: 0;
        padding: 10px 0 14px;
        overflow: visible;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        background: var(--v3-navy-900, #0f1b2d);
        box-shadow: 0 20px 40px rgba(8, 17, 31, 0.24);
        text-align: left;
    }

    html.design-v3 #top.active #nav {
        top: 100%;
        display: block;
        visibility: visible;
    }

    html.design-v3 #top > .fit-a {
        right: var(--v3-shell-gutter);
        top: 0;
        display: block;
        width: 56px;
        height: 72px;
        margin: 0;
    }

    html.design-v3 #root #nav > ul,
    html.design-v3 #root #nav > #user {
        display: block;
        width: min(720px, calc(100% - 32px));
        height: auto;
        margin: 0 auto;
        padding: 0;
    }

    html.design-v3 #root #nav > #user {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-left: 0;
    }

    html.design-v3 #root #nav > ul > li,
    html.design-v3 #root #nav > #user > li {
        float: none;
        margin: 0;
        padding: 0;
    }

    html.design-v3 #root #nav > ul > li > a,
    html.design-v3 #root #nav > #user > li > a {
        float: none;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        min-height: 46px;
        padding: 12px 14px;
        border: 0;
        border-radius: 8px;
        line-height: 22px;
    }
}

@media only screen and (max-width: 899px) {
    html.design-v3 {
        --v3-shell-gutter: 20px;
        --v3-shell-top: 36px;
        --v3-shell-bottom: 56px;
    }

    html.design-v3 #content.v3-client-shell,
    html.design-v3 #content.v3-vpn-client-manager,
    html.design-v3 #content.seedbox-manager-v3,
    html.design-v3 #content.v3-account-profile,
    html.design-v3 #content.v3-support,
    html.design-v3 #content.v3-affiliate-page,
    html.design-v3 #content.v3-billing-page,
    html.design-v3 #content.v3-payment-page,
    html.design-v3 .v3-vpn-client-list .v3-vpn-client-list__grid,
    html.design-v3 .v3-account-migration > .row > .col-md-12 > .margin-bottom-80,
    html.design-v3 .v3-account-compensation > .row > .col-md-12 > .margin-bottom-80 {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 28px !important;
    }

    html.design-v3 #content.v3-client-shell,
    html.design-v3 #content.v3-vpn-client-manager,
    html.design-v3 #content.seedbox-manager-v3,
    html.design-v3 #content.v3-account-profile,
    html.design-v3 #content.v3-support,
    html.design-v3 #content.v3-affiliate-page,
    html.design-v3 #content.v3-billing-page,
    html.design-v3 #content.v3-payment-page,
    html.design-v3 .v3-vpn-client-list,
    html.design-v3 .v3-account-migration,
    html.design-v3 .v3-account-compensation {
        width: min(720px, calc(100% - var(--v3-shell-gutter) - var(--v3-shell-gutter))) !important;
        min-height: 0;
    }

    html.design-v3 #content.seedbox-manager-v3 > aside {
        grid-column: 1;
        grid-row: auto;
    }

    html.design-v3 #content.v3-client-shell > aside.v3-client-sidebar,
    html.design-v3 #content.v3-vpn-client-manager > aside.v3-vpn-client-sidebar,
    html.design-v3 .v3-vpn-client-list .v3-vpn-client-sidebar,
    html.design-v3 #content.seedbox-manager-v3 > aside,
    html.design-v3 #content.v3-account-profile > aside,
    html.design-v3 #content.v3-support > aside,
    html.design-v3 #content.v3-affiliate-page > aside.v3-affiliate-aside,
    html.design-v3 #content.v3-billing-page > aside.v3-billing-aside,
    html.design-v3 #content.v3-payment-page > aside.v3-payment-aside,
    html.design-v3 .v3-account-migration > .row > .col-md-12 > .margin-bottom-80 > .col-md-3,
    html.design-v3 .v3-account-compensation > .row > .col-md-12 > .margin-bottom-80 > .col-md-3 {
        width: 100% !important;
    }

    html.design-v3 #root .v3-client-nav__list,
    html.design-v3 #root .v3-client-nav + nav > .list-e {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 599px) {
    html.design-v3 {
        --v3-shell-gutter: 14px;
        --v3-shell-top: 24px;
        --v3-shell-bottom: 48px;
        --v3-shell-sidebar-pad-x: 16px;
        --v3-shell-sidebar-pad-y: 20px;
    }

    html.design-v3 #root {
        padding-top: 0;
    }

    html.design-v3 #top,
    html.design-v3 #top h1 {
        height: 64px;
    }

    html.design-v3 #top h1 {
        width: calc(100% - var(--v3-shell-gutter) - var(--v3-shell-gutter));
        padding: 10px 0;
    }

    html.design-v3 #top h1 a {
        width: 146px;
        height: 44px;
        transform: none;
    }

    html.design-v3 #top > .fit-a {
        right: var(--v3-shell-gutter);
        height: 64px;
    }

    html.design-v3 #root .v3-client-nav__list,
    html.design-v3 #root .v3-client-nav + nav > .list-e {
        grid-template-columns: minmax(0, 1fr);
    }

    html.design-v3 #footer > div,
    html.design-v3 #footer > p {
        width: calc(100% - var(--v3-shell-gutter) - var(--v3-shell-gutter));
    }

    html.design-v3 #footer > div > nav {
        grid-template-columns: minmax(0, 1fr);
    }

    html.design-v3 #footer > div > nav > .social-a {
        grid-column: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.design-v3 #root .v3-client-nav__list li > a,
    html.design-v3 #root .v3-client-nav + nav > .list-e li > a {
        transition: none;
    }
}