/* Shared MosVPN application shell for both admin and customer menus. */
body.mosvpn-shell {
    background: var(--mos-color-bg) !important;
    color: var(--mos-color-text);
    /* Keep wide data tables scrollable in their own containers without
       letting a legacy page-level overflow shift the whole application. */
    overflow-x: hidden;
}

body.mosvpn-shell #page-container {
    background: var(--mos-color-bg) !important;
    transition: none;
}

body.mosvpn-shell #sidebar {
    background: var(--mos-color-surface) !important;
    border-right: var(--mos-border-width) solid var(--mos-color-border);
    box-shadow: none !important;
    color: var(--mos-color-text);
    width: var(--mos-sidebar-width) !important;
}

/*
 * OneUI keeps a 450ms transform transition on the sidebar even when the
 * desktop shell is permanently open. The legacy menu also renders every item
 * with an unstable key, so route changes recreate the whole list and restart
 * those transitions. Disable them for shell internals; the mobile drawer
 * keeps one transform transition on the stable outer sidebar only.
 */
body.mosvpn-shell #sidebar .content-header,
body.mosvpn-shell #sidebar .content-side,
body.mosvpn-shell #sidebar .nav-main,
body.mosvpn-shell #sidebar .nav-main .nav-main-link-icon,
body.mosvpn-shell #sidebar .nav-main .nav-main-heading,
body.mosvpn-shell #sidebar .nav-main .nav-main-link-badge,
body.mosvpn-shell #sidebar .nav-main .nav-main-link-name {
    transition: none !important;
}

@media (min-width: 1024px) {
    body.mosvpn-shell #sidebar {
        transition: none !important;
    }
}

body.mosvpn-shell #sidebar .bg-header-dark,
body.mosvpn-shell #sidebar .bg-black-10,
body.mosvpn-shell #sidebar .bg-white-10 {
    background: var(--mos-color-surface) !important;
}

body.mosvpn-shell #sidebar .content-header {
    border-bottom: var(--mos-border-width) solid var(--mos-color-border);
    height: var(--mos-topbar-height) !important;
    justify-content: space-between !important;
    padding: 0 var(--mos-space-3) !important;
    width: var(--mos-sidebar-width) !important;
}

body.mosvpn-shell #sidebar .content-side {
    width: var(--mos-sidebar-width) !important;
}

body.mosvpn-shell #sidebar .content-side-full {
    padding: var(--mos-space-4) var(--mos-space-3) var(--mos-space-6) !important;
}

body.mosvpn-shell #sidebar .mosvpn-shell-brand,
body.mosvpn-shell #sidebar .link-fx {
    align-items: center;
    color: var(--mos-color-text) !important;
    display: inline-flex;
    font-size: var(--mos-font-size-body) !important;
    font-weight: var(--mos-font-weight-bold);
    gap: var(--mos-space-2);
    letter-spacing: var(--mos-letter-spacing-heading);
    min-width: 0;
}

body.mosvpn-shell #sidebar .mosvpn-shell-brand::before,
body.mosvpn-shell #sidebar .link-fx::before {
    background-color: var(--mos-color-red-500) !important;
    background-image: url('/assets/brand/mosvpn-mark-light.svg') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: var(--mos-space-6) var(--mos-space-6) !important;
    border-radius: var(--mos-radius-control);
    content: "";
    flex: 0 0 var(--mos-space-8);
    height: var(--mos-space-8);
    margin: 0 !important;
    width: var(--mos-space-8);
}

body.mosvpn-shell #sidebar .mosvpn-shell-brand-name {
    color: var(--mos-color-text) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mosvpn-sidebar-collapse {
    align-items: center;
    background: transparent;
    border: var(--mos-border-width) solid var(--mos-color-border);
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-text-muted);
    display: inline-flex;
    flex: 0 0 var(--mos-space-8);
    height: var(--mos-space-8);
    justify-content: center;
    padding: 0;
    transition: background-color var(--mos-motion-fast), color var(--mos-motion-fast);
    width: var(--mos-space-8);
}

.mosvpn-sidebar-collapse:hover {
    background: var(--mos-color-surface-muted);
    color: var(--mos-color-text);
}

body.mosvpn-shell #sidebar .nav-main-heading {
    color: var(--mos-color-text-subtle) !important;
    font-size: var(--mos-font-size-caption);
    font-weight: var(--mos-font-weight-bold);
    letter-spacing: var(--mos-letter-spacing-caption);
    margin: var(--mos-space-6) 0 var(--mos-space-2);
    padding: 0 var(--mos-space-3);
}

body.mosvpn-shell #sidebar .nav-main-link {
    border-radius: var(--mos-radius-control) !important;
    color: var(--mos-color-text-muted) !important;
    gap: var(--mos-space-3);
    margin-bottom: var(--mos-space-1);
    min-height: var(--mos-space-12);
    padding: var(--mos-space-3);
    position: relative;
    touch-action: manipulation;
    transition: background-color var(--mos-motion-fast), color var(--mos-motion-fast);
}

body.mosvpn-shell #sidebar .nav-main-link:hover {
    background: var(--mos-color-surface-muted) !important;
    color: var(--mos-color-text) !important;
    transform: none !important;
}

body.mosvpn-shell #sidebar .nav-main-link:active {
    opacity: var(--mos-pressed-opacity);
    transition-duration: 0s;
}

body.mosvpn-shell #sidebar .nav-main-link.active {
    background: var(--mos-color-red-50) !important;
    box-shadow: inset var(--mos-active-indicator-width) 0 0 var(--mos-color-red-500) !important;
    color: var(--mos-color-red-700) !important;
    font-weight: var(--mos-font-weight-bold);
}

body.mosvpn-shell #sidebar .nav-main-link-icon,
body.mosvpn-shell #sidebar .nav-main-link:hover .nav-main-link-icon,
body.mosvpn-shell #sidebar .nav-main-link.active .nav-main-link-icon {
    color: currentColor !important;
    flex: 0 0 var(--mos-icon-size);
    font-size: 0 !important;
    height: var(--mos-icon-size);
    line-height: 1;
    margin: 0 !important;
    width: var(--mos-icon-size);
}

/* The legacy customer theme shipped a high-specificity navy sidebar. Keep the
   same shared shell contract by overriding it with token surfaces. */
body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar {
    background: var(--mos-color-surface) !important;
    border-right-color: var(--mos-color-border) !important;
}

body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-heading {
    color: var(--mos-color-text-subtle) !important;
}

body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link,
body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link .nav-main-link-icon {
    color: var(--mos-color-text-muted) !important;
}

body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link:hover {
    background: var(--mos-color-surface-muted) !important;
    color: var(--mos-color-text) !important;
}

body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link.active {
    background: var(--mos-color-red-50) !important;
    box-shadow: inset var(--mos-active-indicator-width) 0 0 var(--mos-color-red-500) !important;
    color: var(--mos-color-red-700) !important;
}

body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link.active .nav-main-link-icon,
body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link:hover .nav-main-link-icon {
    color: currentColor !important;
}

body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .v2board-copyright {
    color: var(--mos-color-text-subtle) !important;
}

.mosvpn-lucide,
.mosvpn-lucide svg {
    color: currentColor !important;
    display: inline-block;
    height: var(--mos-icon-size);
    stroke-width: var(--mos-icon-stroke);
    vertical-align: middle;
    width: var(--mos-icon-size);
}

.mosvpn-lucide svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.mosvpn-shell #page-header {
    background: color-mix(in srgb, var(--mos-color-surface) 94%, transparent) !important;
    border-bottom: var(--mos-border-width) solid var(--mos-color-border);
    box-shadow: none !important;
    min-height: var(--mos-topbar-height);
    position: sticky;
    top: 0;
}

body.mosvpn-shell:not(.mosvpn-auth-active) #main-container {
    padding-top: var(--mos-topbar-height) !important;
}

body.mosvpn-shell #page-header .content-header {
    gap: var(--mos-space-3);
    height: var(--mos-topbar-height) !important;
    max-width: none !important;
    padding: 0 var(--mos-space-6) !important;
}

body.mosvpn-shell #page-header .v2board-container-title {
    display: none !important;
}

#mosvpn-shell-topbar {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: var(--mos-space-4);
    min-width: 0;
}

.mosvpn-shell-breadcrumb {
    align-items: center;
    color: var(--mos-color-text-subtle);
    display: flex;
    flex: 1 1 auto;
    font-size: var(--mos-font-size-small);
    gap: var(--mos-space-2);
    min-width: 0;
}

.mosvpn-shell-breadcrumb a {
    align-items: center;
    color: var(--mos-color-text-subtle) !important;
    display: inline-flex;
    gap: var(--mos-space-2);
}

.mosvpn-shell-breadcrumb strong {
    color: var(--mos-color-text);
    font-weight: var(--mos-font-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mosvpn-shell-search {
    align-items: center;
    background: var(--mos-color-surface-muted);
    border: var(--mos-border-width) solid transparent;
    border-radius: var(--mos-radius-control);
    color: var(--mos-color-text-subtle);
    display: flex;
    flex: 0 1 var(--mos-search-width);
    gap: var(--mos-space-2);
    min-height: var(--mos-control-height-sm);
    padding: 0 var(--mos-space-3);
    transition: border-color var(--mos-motion-fast), background-color var(--mos-motion-fast);
}

.mosvpn-shell-search:focus-within {
    background: var(--mos-color-surface);
    border-color: var(--mos-color-red-300);
    box-shadow: var(--mos-focus-ring);
}

.mosvpn-shell-search input {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--mos-color-text) !important;
    flex: 1;
    font-size: var(--mos-font-size-small);
    min-height: 0 !important;
    min-width: 0;
    outline: 0;
    padding: 0 !important;
}

.mosvpn-shell-locale {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
}

.mosvpn-shell-locale #v2board-admin-locale-switcher {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    max-width: none;
    padding: 0;
    position: static !important;
}

.mosvpn-shell-locale #v2board-admin-locale-switcher select {
    background: var(--mos-color-surface) !important;
    border: var(--mos-border-width) solid var(--mos-color-border) !important;
    border-radius: var(--mos-radius-control) !important;
    color: var(--mos-color-text) !important;
    font-size: var(--mos-font-size-small);
    height: var(--mos-control-height-sm);
}

.mosvpn-shell-duplicate-language {
    display: none !important;
}

body.mosvpn-shell .mosvpn-control-hero .mosvpn-locale-control {
    display: none !important;
}

body.mosvpn-shell #page-header .btn {
    align-items: center;
    background: transparent !important;
    border: var(--mos-border-width) solid transparent !important;
    border-radius: var(--mos-radius-control) !important;
    box-shadow: none !important;
    color: var(--mos-color-text-muted) !important;
    display: inline-flex;
    justify-content: center;
    min-height: var(--mos-control-height-sm);
    transition: background-color var(--mos-motion-fast), color var(--mos-motion-fast);
}

body.mosvpn-shell #page-header .btn:hover,
body.mosvpn-shell #page-header .btn:focus {
    background: var(--mos-color-surface-muted) !important;
    color: var(--mos-color-text) !important;
}

body.mosvpn-shell #main-container > .content,
body.mosvpn-shell #main-container .content:not(.content-header),
body.mosvpn-shell .mosvpn-control-center {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: var(--mos-content-max-width) !important;
    padding-left: var(--mos-content-padding) !important;
    padding-right: var(--mos-content-padding) !important;
    width: 100%;
}

body.mosvpn-shell #page-container.sidebar-o {
    padding-left: var(--mos-sidebar-width) !important;
}

/*
 * OneUI's legacy `sidebar-mini` state applies a negative transform to the
 * sidebar and a compensating transform to its inner columns. The MosVPN
 * shell owns the desktop sidebar width/state, so inheriting that transform
 * can leave every menu label clipped on the left after a refresh or route
 * change. Reset the outer and inner transforms for desktop; the drawer
 * transforms below intentionally take over on smaller screens.
 */
@media (min-width: 1024px) {
    body.mosvpn-shell #page-container.sidebar-o #sidebar,
    body.mosvpn-shell #page-container.sidebar-o #sidebar .content-header,
    body.mosvpn-shell #page-container.sidebar-o #sidebar .content-side,
    body.mosvpn-shell #page-container.sidebar-o #sidebar .nav-main,
    body.mosvpn-shell #page-container.sidebar-o #sidebar .nav-main .nav-main-link-icon {
        transform: translateX(0) translateY(0) translateZ(0) !important;
    }

    /* Also undo the legacy mini-sidebar fade while the shared shell is in
       its expanded state. The custom collapsed class below remains the
       single source of truth for intentionally hiding labels. */
    body.mosvpn-shell:not(.mosvpn-sidebar-collapsed) #page-container.sidebar-o.sidebar-mini #sidebar .nav-main-heading,
    body.mosvpn-shell:not(.mosvpn-sidebar-collapsed) #page-container.sidebar-o.sidebar-mini #sidebar .nav-main-link-name,
    body.mosvpn-shell:not(.mosvpn-sidebar-collapsed) #page-container.sidebar-o.sidebar-mini #sidebar .nav-main-link-badge {
        opacity: 1 !important;
    }
}

body.mosvpn-shell #page-container.page-header-fixed.sidebar-o #page-header,
body.mosvpn-shell #page-container.page-header-glass.sidebar-o #page-header {
    padding-left: var(--mos-sidebar-width) !important;
    transition: none;
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar {
    width: var(--mos-sidebar-collapsed-width) !important;
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .content-header,
body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .content-side {
    width: var(--mos-sidebar-collapsed-width) !important;
}

/* The legacy side-scroll layout has a more specific 250px rule on desktop.
   Match that specificity so the shared collapsed state cannot leave a wide
   content column hanging out of the 64px sidebar. */
@media (min-width: 1024px) {
    body.mosvpn-shell.mosvpn-sidebar-collapsed #page-container.side-scroll #sidebar .content-header,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #page-container.side-scroll #sidebar .content-side {
        width: var(--mos-sidebar-collapsed-width) !important;
    }
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .content-header {
    justify-content: center !important;
    padding: 0 !important;
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .mosvpn-shell-brand-name,
body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .nav-main-heading,
body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .nav-main-link-name,
body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .v2board-copyright {
    display: none !important;
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .mosvpn-shell-brand,
body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .link-fx {
    font-size: 0 !important;
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .mosvpn-sidebar-collapse {
    bottom: var(--mos-space-3);
    left: var(--mos-space-4);
    position: fixed;
    z-index: 1;
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .content-side-full {
    padding: var(--mos-space-4) var(--mos-space-2) var(--mos-space-12) !important;
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .nav-main-link {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: var(--mos-space-3) !important;
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #page-container.sidebar-o {
    padding-left: var(--mos-sidebar-collapsed-width) !important;
}

body.mosvpn-shell.mosvpn-sidebar-collapsed #page-container.page-header-fixed.sidebar-o #page-header,
body.mosvpn-shell.mosvpn-sidebar-collapsed #page-container.page-header-glass.sidebar-o #page-header {
    padding-left: var(--mos-sidebar-collapsed-width) !important;
}

.mosvpn-responsive-table td[data-mosvpn-numeric="true"],
.mosvpn-responsive-table th[data-mosvpn-numeric="true"] {
    font-variant-numeric: var(--mos-tabular-nums);
    text-align: right;
}

@media (max-width: 1023.98px) {
    body.mosvpn-shell #page-container.sidebar-o,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #page-container.sidebar-o {
        padding-left: 0 !important;
    }

    body.mosvpn-shell #page-container.page-header-fixed.sidebar-o #page-header,
    body.mosvpn-shell #page-container.page-header-glass.sidebar-o #page-header,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #page-container.page-header-fixed.sidebar-o #page-header {
        padding-left: 0 !important;
    }

    body.mosvpn-shell #sidebar,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar {
        transform: translateX(-100%) translateY(0) translateZ(0) !important;
        transition: transform var(--mos-motion-emphasized) !important;
        width: var(--mos-drawer-width) !important;
    }

    body.mosvpn-shell #page-container.sidebar-o-xs #sidebar,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #page-container.sidebar-o-xs #sidebar {
        transform: translateX(0) translateY(0) translateZ(0) !important;
        z-index: 1032 !important;
    }

    body.mosvpn-shell #sidebar .content-header,
    body.mosvpn-shell #sidebar .content-side,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .content-header,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .content-side {
        width: 100% !important;
    }

    body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .mosvpn-shell-brand-name,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .nav-main-heading,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .nav-main-link-name,
    body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .v2board-copyright {
        display: initial !important;
    }

    body.mosvpn-shell.mosvpn-sidebar-collapsed #sidebar .nav-main-link {
        justify-content: flex-start;
    }

    .mosvpn-sidebar-collapse {
        display: none;
    }

    body.mosvpn-shell .v2board-nav-mask {
        background: var(--mos-color-overlay);
        inset: 0;
        position: fixed;
        z-index: 1031;
    }

    body.mosvpn-shell #page-header .content-header {
        padding: 0 var(--mos-space-4) !important;
    }

    body.mosvpn-shell #main-container > .content,
    body.mosvpn-shell #main-container .content:not(.content-header),
    body.mosvpn-shell .mosvpn-control-center {
        padding-left: var(--mos-space-4) !important;
        padding-right: var(--mos-space-4) !important;
    }

    .mosvpn-shell-search {
        display: none;
    }

    .mosvpn-responsive-table {
        background: transparent !important;
        border: 0 !important;
        display: block;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
        width: 100% !important;
    }

    .mosvpn-table-fixed-clone {
        display: none !important;
    }

    .mosvpn-table-scroll-wrap {
        overflow-x: auto !important;
    }

    .mosvpn-table-scroll {
        min-width: var(--mos-complex-table-min-width) !important;
    }

    .mosvpn-responsive-table thead {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .mosvpn-responsive-table tbody,
    .mosvpn-responsive-table tr,
    .mosvpn-responsive-table td {
        display: block;
        width: 100%;
    }

    .mosvpn-responsive-table tbody tr {
        background: var(--mos-color-surface);
        border: var(--mos-border-width) solid var(--mos-color-border);
        border-radius: var(--mos-radius-card);
        margin-bottom: var(--mos-space-3);
        overflow: hidden;
        padding: var(--mos-space-2) var(--mos-space-4);
    }

    .mosvpn-responsive-table tbody td {
        align-items: flex-start;
        background: transparent !important;
        border: 0 !important;
        display: flex;
        gap: var(--mos-space-3);
        justify-content: space-between;
        min-width: 0 !important;
        padding: var(--mos-space-2) 0 !important;
        text-align: right !important;
    }

    .mosvpn-responsive-table .ant-table-fixed-columns-in-body,
    .mosvpn-responsive-table .ant-table-fixed-columns-in-body > * {
        visibility: visible !important;
    }

    .mosvpn-responsive-table tbody td::before {
        color: var(--mos-color-text-subtle);
        content: attr(data-mosvpn-label);
        flex: 0 0 var(--mos-table-label-width);
        font-size: var(--mos-font-size-caption);
        font-weight: var(--mos-font-weight-semibold);
        text-align: left;
    }
}

@media (min-width: 992px) and (max-width: 1023.98px) {
    body.mosvpn-shell #page-header .sidebar-toggle,
    body.mosvpn-shell #page-header .d-lg-none {
        display: flex !important;
    }
}

@media (max-width: 575.98px) {
    .mosvpn-shell-breadcrumb > a,
    .mosvpn-shell-breadcrumb > .mosvpn-breadcrumb-separator,
    .mosvpn-shell-locale .v2board-admin-locale-icon {
        display: none !important;
    }

    .mosvpn-shell-locale #v2board-admin-locale-switcher select {
        max-width: var(--mos-locale-width-mobile);
    }
}

html[data-mosvpn-theme="dark"] body.mosvpn-shell #sidebar .nav-main-link.active,
html.mosvpn-dark body.mosvpn-shell #sidebar .nav-main-link.active {
    background: var(--mos-red-soft) !important;
    color: var(--mos-color-red-300) !important;
}