/* =========================================================
   VOIDVPN STATUS — CLEAN TOPBAR
   ========================================================= */

.status-topbar,
.status-topbar * {
    box-sizing: border-box;
}

.status-topbar {
    position: fixed;
    top: 14px;
    left: 0;
    right: 0;
    z-index: 5000;

    width: 100%;
    padding: 0 24px;

    pointer-events: none;
}

.status-topbar-shell {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) 150px;
    align-items: center;
    gap: 20px;

    width: min(1180px, 100%);
    height: 64px;

    margin: 0 auto;
    padding: 0 10px 0 18px;

    background:
        linear-gradient(
            135deg,
            rgba(30, 19, 44, 0.94),
            rgba(12, 9, 20, 0.94)
        );

    border: 1px solid rgba(199, 145, 255, 0.14);
    border-radius: 18px;

    box-shadow:
        0 22px 64px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);

    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);

    pointer-events: auto;
}


/* LEFT — LOGO */

.status-topbar-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    justify-self: start;

    width: 48px;
    height: 48px;

    margin: 0;
    padding: 0;

    text-decoration: none;
}

.status-topbar-logo img {
    display: block;

    width: 42px;
    height: 42px;

    margin: 0;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 16px rgba(181, 92, 255, 0.46)
        );
}


/* CENTER — NAVIGATION */

.status-topbar-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: stretch;
    gap: 3px;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
}

.status-topbar-nav a {
    position: relative;

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

    height: 42px;
    padding: 0 13px;

    color: rgba(239, 231, 247, 0.58);
    background: transparent;

    border: 1px solid transparent;
    border-radius: 12px;

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

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

.status-topbar-nav a:hover {
    color: #ffffff;
    background: rgba(169, 79, 234, 0.08);
}

.status-topbar-nav a.is-active {
    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            rgba(158, 69, 228, 0.20),
            rgba(85, 30, 140, 0.12)
        );

    border-color: rgba(204, 152, 255, 0.14);
}

.status-topbar-nav a.is-active::after {
    content: "";

    position: absolute;
    right: 12px;
    bottom: 5px;
    left: 12px;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c77cff,
            transparent
        );

    border-radius: 999px;
}


/* RIGHT — CABINET */

.status-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;

    width: 150px;

    margin: 0;
    padding: 0;
}

.status-topbar-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    height: 44px;
    padding: 0 15px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #aa43ef,
            #7626d2
        );

    border: 1px solid rgba(231, 199, 255, 0.22);
    border-radius: 13px;

    box-shadow:
        0 14px 34px rgba(111, 29, 192, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.17);

    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    transition:
        transform 170ms ease,
        filter 170ms ease;
}

.status-topbar-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
}

.status-topbar-primary svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}


/* CONTENT OFFSET */

.status-main {
    padding-top: 102px !important;
}


/* TABLET */

@media (max-width: 900px) {

    .status-topbar {
        top: 10px;
        padding: 0 14px;
    }

    .status-topbar-shell {
        display: flex;
        justify-content: space-between;

        height: 60px;
        padding: 0 10px 0 14px;
    }

    .status-topbar-nav {
        display: none;
    }

    .status-topbar-actions {
        width: auto;
        margin-left: auto;
    }
}


/* MOBILE */

@media (max-width: 560px) {

    .status-topbar {
        top: 8px;
        padding: 0 9px;
    }

    .status-topbar-shell {
        height: 56px;

        padding: 0 8px 0 12px;

        border-radius: 15px;
    }

    .status-topbar-logo {
        width: 40px;
        height: 40px;
    }

    .status-topbar-logo img {
        width: 36px;
        height: 36px;
    }

    .status-topbar-primary {
        height: 40px;
        padding: 0 12px;

        font-size: 11px;
    }

    .status-main {
        padding-top: 82px !important;
    }
}


/* TOPBAR — MATCH STATUS CARDS WIDTH */

.status-topbar-shell {
    width: min(1280px, 100%) !important;
    max-width: 1280px !important;

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

@media (min-width: 1400px) {

    .status-topbar-shell {
        width: min(1380px, 100%) !important;
        max-width: 1380px !important;
    }
}