/* ==========================================================
   VOIDVPN — UNIFIED CABINET THEME
   Visual system based on the public landing page
========================================================== */

:root {
    --void-bg: #050508;
    --void-bg-soft: #09080f;

    --void-surface:
        rgba(12, 10, 20, 0.74);

    --void-surface-strong:
        rgba(13, 10, 23, 0.92);

    --void-border:
        rgba(192, 132, 252, 0.13);

    --void-border-hover:
        rgba(192, 132, 252, 0.28);

    --void-purple: #a855f7;
    --void-purple-light: #d8b4fe;
    --void-purple-dark: #6d28d9;

    --void-text: #ffffff;
    --void-text-soft:
        rgba(255, 255, 255, 0.68);

    --void-text-muted:
        rgba(255, 255, 255, 0.42);

    --void-radius-sm: 14px;
    --void-radius-md: 18px;
    --void-radius-lg: 24px;

    --void-shadow:
        0 24px 70px rgba(0, 0, 0, 0.38);

    --void-glow:
        0 18px 50px rgba(109, 40, 217, 0.13);
}


/* ==========================================================
   PAGE FOUNDATION
========================================================== */

.dashboard-body,
.devices-body,
.billing-body,
.download-body,
.settings-body {
    min-height: 100vh !important;

    color: var(--void-text) !important;

    background:
        radial-gradient(
            circle at 80% 12%,
            rgba(126, 34, 206, 0.13),
            transparent 29%
        ),
        radial-gradient(
            circle at 18% 88%,
            rgba(79, 70, 229, 0.075),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #050508,
            #06050a 55%,
            #040407
        ) !important;
}


/* ==========================================================
   MAIN CONTENT
========================================================== */

.dashboard-main,
.devices-main,
.billing-main,
.download-main,
.settings-main {
    position: relative !important;
    z-index: 2 !important;

    min-height: 100vh !important;

    padding:
        20px 26px 48px !important;
}


/* ==========================================================
   TOPBAR
========================================================== */

.dashboard-topbar,
.devices-topbar,
.billing-topbar,
.download-topbar,
.settings-topbar {
    position: relative !important;

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

    min-height: 68px !important;

    margin-bottom: 24px !important;
    padding: 10px 14px 10px 18px !important;

    border:
        1px solid var(--void-border) !important;

    border-radius:
        var(--void-radius-md) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.04),
            rgba(255, 255, 255, 0.012)
        ),
        rgba(8, 6, 18, 0.76) !important;

    box-shadow:
        var(--void-shadow),
        var(--void-glow),
        inset 0 1px 0
        rgba(255, 255, 255, 0.045) !important;

    backdrop-filter:
        blur(22px) saturate(130%) !important;

    -webkit-backdrop-filter:
        blur(22px) saturate(130%) !important;

    isolation: isolate;
}

.dashboard-topbar::before,
.devices-topbar::before,
.billing-topbar::before,
.download-topbar::before,
.settings-topbar::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -1;

    border-radius: inherit;

    background:
        radial-gradient(
            circle at 14% 50%,
            rgba(168, 85, 247, 0.09),
            transparent 32%
        ),
        radial-gradient(
            circle at 86% 50%,
            rgba(99, 102, 241, 0.055),
            transparent 32%
        );

    pointer-events: none;
}


/* ==========================================================
   PAGE HEADINGS
========================================================== */

.dashboard-main h1,
.devices-main h1,
.billing-main h1,
.download-main h1,
.settings-main h1 {
    margin-top: 0 !important;

    color: #ffffff !important;

    font-size:
        clamp(26px, 3vw, 42px) !important;

    font-weight: 850 !important;
    letter-spacing: -1.4px !important;
    line-height: 1.08 !important;
}

.dashboard-main h2,
.devices-main h2,
.billing-main h2,
.download-main h2,
.settings-main h2 {
    color: #ffffff !important;

    font-weight: 800 !important;
    letter-spacing: -0.6px !important;
}

.dashboard-main p,
.devices-main p,
.billing-main p,
.download-main p,
.settings-main p {
    color:
        var(--void-text-soft);
}


/* ==========================================================
   UNIVERSAL CABINET PANELS
========================================================== */

.dashboard-panel,
.dashboard-stat-card,
.dashboard-welcome,
.dashboard-app-card-v2,
.devices-panel,
.devices-card,
.devices-empty,
.billing-panel,
.billing-card,
.billing-plan-card,
.download-panel,
.download-card,
.download-app-card,
.download-details,
.settings-panel,
.settings-card,
.settings-section {
    border:
        1px solid var(--void-border) !important;

    border-radius:
        var(--void-radius-lg) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.038),
            rgba(255, 255, 255, 0.01)
        ),
        rgba(10, 8, 17, 0.72) !important;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.28),
        0 10px 44px rgba(88, 28, 135, 0.07),
        inset 0 1px 0
        rgba(255, 255, 255, 0.035) !important;

    backdrop-filter:
        blur(20px) saturate(120%) !important;

    -webkit-backdrop-filter:
        blur(20px) saturate(120%) !important;

    transition:
        border-color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease !important;
}

.dashboard-stat-card:hover,
.dashboard-app-card-v2:hover,
.devices-card:hover,
.billing-plan-card:hover,
.download-app-card:hover,
.settings-card:hover {
    border-color:
        var(--void-border-hover) !important;

    transform:
        translateY(-2px) !important;

    box-shadow:
        0 30px 78px rgba(0, 0, 0, 0.34),
        0 16px 48px rgba(109, 40, 217, 0.1),
        inset 0 1px 0
        rgba(255, 255, 255, 0.05) !important;
}


/* ==========================================================
   ICON CONTAINERS
========================================================== */

.dashboard-stat-icon,
.dashboard-app-icon-v2,
.devices-card-icon,
.devices-empty-icon,
.billing-card-icon,
.billing-plan-icon,
.download-app-card-icon,
.download-details-icon,
.settings-card-icon,
.settings-section-icon {
    display: grid !important;
    place-items: center !important;

    border:
        1px solid rgba(192, 132, 252, 0.18) !important;

    color:
        var(--void-purple-light) !important;

    background:
        linear-gradient(
            135deg,
            rgba(168, 85, 247, 0.22),
            rgba(109, 40, 217, 0.08)
        ) !important;

    box-shadow:
        0 0 30px rgba(168, 85, 247, 0.11),
        inset 0 1px 0
        rgba(255, 255, 255, 0.04) !important;
}


/* ==========================================================
   BUTTONS
========================================================== */

.dashboard-primary-button,
.devices-primary-button,
.devices-add-button,
.billing-primary-button,
.billing-plan-button,
.download-primary,
.download-app-button,
.settings-primary-button,
.settings-save-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;

    min-height: 46px !important;
    padding:
        0 18px !important;

    border:
        1px solid rgba(216, 180, 254, 0.3) !important;

    border-radius:
        var(--void-radius-sm) !important;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            #a855f7,
            #7c3aed 58%,
            #6d28d9
        ) !important;

    box-shadow:
        0 14px 34px rgba(109, 40, 217, 0.3),
        inset 0 1px 0
        rgba(255, 255, 255, 0.2) !important;

    font-weight:
        800 !important;

    text-decoration:
        none !important;

    cursor:
        pointer !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease !important;
}

.dashboard-primary-button:hover,
.devices-primary-button:hover,
.devices-add-button:hover,
.billing-primary-button:hover,
.billing-plan-button:hover,
.download-primary:hover,
.download-app-button:hover,
.settings-primary-button:hover,
.settings-save-button:hover {
    transform:
        translateY(-2px) !important;

    filter:
        brightness(1.08) !important;

    box-shadow:
        0 18px 42px rgba(109, 40, 217, 0.4),
        inset 0 1px 0
        rgba(255, 255, 255, 0.25) !important;
}


/* Secondary buttons */

.dashboard-secondary-button,
.devices-secondary-button,
.billing-secondary-button,
.download-secondary,
.settings-secondary-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    min-height: 44px !important;
    padding:
        0 16px !important;

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

    border-radius:
        var(--void-radius-sm) !important;

    color:
        rgba(255, 255, 255, 0.76) !important;

    background:
        rgba(255, 255, 255, 0.025) !important;

    text-decoration:
        none !important;

    cursor:
        pointer !important;
}

.dashboard-secondary-button:hover,
.devices-secondary-button:hover,
.billing-secondary-button:hover,
.download-secondary:hover,
.settings-secondary-button:hover {
    color:
        #ffffff !important;

    border-color:
        rgba(192, 132, 252, 0.22) !important;

    background:
        rgba(168, 85, 247, 0.075) !important;
}


/* ==========================================================
   INPUTS
========================================================== */

.dashboard-main input,
.dashboard-main select,
.dashboard-main textarea,
.devices-main input,
.devices-main select,
.devices-main textarea,
.billing-main input,
.billing-main select,
.billing-main textarea,
.download-main input,
.download-main select,
.download-main textarea,
.settings-main input,
.settings-main select,
.settings-main textarea {
    min-height:
        46px !important;

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

    border-radius:
        var(--void-radius-sm) !important;

    color:
        #ffffff !important;

    background:
        rgba(4, 4, 9, 0.68) !important;

    outline:
        none !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.025) !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease !important;
}

.dashboard-main input:focus,
.dashboard-main select:focus,
.dashboard-main textarea:focus,
.devices-main input:focus,
.devices-main select:focus,
.devices-main textarea:focus,
.billing-main input:focus,
.billing-main select:focus,
.billing-main textarea:focus,
.download-main input:focus,
.download-main select:focus,
.download-main textarea:focus,
.settings-main input:focus,
.settings-main select:focus,
.settings-main textarea:focus {
    border-color:
        rgba(192, 132, 252, 0.48) !important;

    box-shadow:
        0 0 0 4px
        rgba(168, 85, 247, 0.09) !important;
}


/* ==========================================================
   BADGES
========================================================== */

.dashboard-badge,
.devices-badge,
.billing-badge,
.download-app-card-badge,
.settings-badge {
    display: inline-flex !important;
    align-items: center !important;

    min-height: 28px !important;
    padding:
        0 10px !important;

    border:
        1px solid rgba(192, 132, 252, 0.16) !important;

    border-radius:
        999px !important;

    color:
        var(--void-purple-light) !important;

    background:
        rgba(168, 85, 247, 0.08) !important;

    font-size:
        11px !important;

    font-weight:
        800 !important;
}


/* ==========================================================
   SCROLLBAR
========================================================== */

.dashboard-body,
.devices-body,
.billing-body,
.download-body,
.settings-body {
    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(168, 85, 247, 0.34)
        transparent;
}

.dashboard-body::-webkit-scrollbar,
.devices-body::-webkit-scrollbar,
.billing-body::-webkit-scrollbar,
.download-body::-webkit-scrollbar,
.settings-body::-webkit-scrollbar {
    width:
        8px;
}

.dashboard-body::-webkit-scrollbar-thumb,
.devices-body::-webkit-scrollbar-thumb,
.billing-body::-webkit-scrollbar-thumb,
.download-body::-webkit-scrollbar-thumb,
.settings-body::-webkit-scrollbar-thumb {
    border-radius:
        999px;

    background:
        rgba(168, 85, 247, 0.32);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 920px) {
    .dashboard-main,
    .devices-main,
    .billing-main,
    .download-main,
    .settings-main {
        width:
            100% !important;

        margin-left:
            0 !important;

        padding:
            12px 12px 36px !important;
    }

    .dashboard-topbar,
    .devices-topbar,
    .billing-topbar,
    .download-topbar,
    .settings-topbar {
        min-height:
            60px !important;

        margin-bottom:
            18px !important;

        padding:
            8px 10px !important;

        border-radius:
            16px !important;
    }

    .dashboard-panel,
    .dashboard-stat-card,
    .dashboard-welcome,
    .dashboard-app-card-v2,
    .devices-panel,
    .devices-card,
    .devices-empty,
    .billing-panel,
    .billing-card,
    .billing-plan-card,
    .download-panel,
    .download-card,
    .download-app-card,
    .download-details,
    .settings-panel,
    .settings-card,
    .settings-section {
        border-radius:
            19px !important;
    }
}