/* Portal Layout */
:root {
    /* Core Monochrome Palette */
    --br-bg-main: #ffffff;
    --br-bg-sidebar: #fbfbfd;
    --br-bg-topbar: rgba(255, 255, 255, 0.85);
    --br-bg-hover: #f5f5f7;
    --br-border: rgba(0, 0, 0, 0.08);
    /* Typography */
    --br-text-primary: #1d1d1f;
    --br-text-secondary: #424245;
    --br-text-muted: #86868b;
    --br-accent: #0071e3;
}

/* Layout Structure */
.br-layout-wrapper {
    display: flex;
    flex-direction: column;
    /*h-screen;*/
    overflow: hidden;
    font-family: -apple-system, system-ui, sans-serif;
    background: var(--br-bg-main);
    color: var(--br-text-primary);
}

.br-top-bar {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid var(--br-border);
    background: var(--br-bg-topbar);
    backdrop-filter: blur(20px);
    z-index: 100;
}

.br-content-container {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* Sidebar must be h-screen to go all the way down */
.br-sidebar {
    background: var(--br-bg-sidebar);
    border-right: 1px solid var(--br-border);
    height: 100vh;
    display: flex;
    flex-direction: column;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    overflow: hidden;
}

.br-sidebar-inner {
    width: 256px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.br-logo-box {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
}

/* Hamburger Animation */
.br-hamburger {
    width: 24px;
    height: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}

    .br-hamburger span {
        display: block;
        height: 2px;
        width: 100%;
        background: var(--br-text-primary);
        border-radius: 2px;
        transition: all 0.3s;
        transform-origin: left center;
    }

    .br-hamburger.is-open span:nth-child(1) {
        transform: rotate(45deg);
        width: 20px;
    }

    .br-hamburger.is-open span:nth-child(2) {
        opacity: 0;
        width: 0;
    }

    .br-hamburger.is-open span:nth-child(3) {
        transform: rotate(-45deg);
        width: 20px;
    }

/* Dropdown Menus */
.br-dropdown {
    position: absolute;
    top: 56px;
    background: white;
    border: 1px solid var(--br-border);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    padding: 6px;
    min-width: 200px;
}

.br-dropdown-item {
    display: block;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--br-text-secondary);
    text-decoration: none;
    border-radius: 6px;
    transition: 0.2s;
}

    .br-dropdown-item:hover {
        background: var(--br-bg-hover);
        color: var(--br-text-primary);
    }

/* Fix for the massive chevrons */
.br-icon-chevron {
    width: 12px !important;
    height: 12px !important;
    stroke-width: 3px;
    margin-left: 6px;
    color: var(--br-text-muted);
    transition: transform 0.2s ease;
}

/* Align User Info inline */
.br-profile-trigger {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 20px;
    margin-left: 16px;
}

    .br-profile-trigger:hover {
        background: rgba(0,0,0,0.04);
    }

.br-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-right: 10px;
}

/* Main Content Area */
Yes, we can absolutely pull that high-end website aesthetic into the portal. That specific look uses Blob UI—soft, animated light orbs that sit behind the content to give the "High-Key Studio" some personality without breaking the monochrome professional feel.

Since we are moving to a framework-agnostic setup, we will convert those Tailwind utility classes into a clean, reusable CSS "Stage."

                                                                                                                                                                                                 1. The "Studio Stage" CSS (app.css)
This CSS creates the soft, pulsing background orbs. By using fixed, the blobs stay in place while your dashboard content scrolls over them, just like on the main site.

CSS
/* Brilliance One Studio Stage */
.br-main-view {
    position: relative;
    flex: 1;
    overflow-y: auto;
    padding: 40px 48px;
    background-color: #fbfbfd; /* Base Apple Off-White */
    z-index: 1;
}

/* Background Blobs */
.br-stage-blob {
    position: fixed;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.4;
}

.br-blob-1 {
    top: -10%;
    left: -10%;
    width: 40vw;
    height: 40vw;
    background: rgba(96, 165, 250, 0.2); /* Soft Blue */
    animation: br-pulse 8s infinite alternate;
}

.br-blob-2 {
    bottom: 10%;
    right: -5%;
    width: 35vw;
    height: 35vw;
    background: rgba(103, 232, 249, 0.2); /* Soft Cyan */
}

@keyframes br-pulse {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }

    100% {
        transform: scale(1.1);
        opacity: 0.5;
    }
}
/* Ensure the main view is transparent so blobs show through */
.br-main-view {
    flex: 1;
    overflow-y: auto;
    padding: 40px 48px;
    background: transparent; /* Changed from #fbfbfd */
    position: relative;
}

/* Update the Wrapper for the Body */
.br-page-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* Make Blobs more visible */
.br-stage-blob {
    position: fixed;
    pointer-events: none;
    z-index: 0; /* Behind everything */
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.6; /* Increased opacity */
}

/* Ensure the layout wrapper has the base white color */
.br-layout-wrapper {
    background-color: #fbfbfd;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* --- Hamburger Icon --- */
/* Light Monochrome Sidebar & TopBar */
.portal-bg-main {
    background-color: #FFFFFF;
}

.portal-bg-sidebar {
    background-color: #FBFBFD;
}

.portal-border {
    border-color: rgba(0, 0, 0, 0.08);
}

/* Updated Nav Icon for Light Mode */
.nav-icon span {
    background: #1D1D1F !important;
}

/* Refined Separator for White Theme */
.nav-divider {
    height: 1px;
    width: 100%;
    margin: 12px 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0) 100%);
}

.nav-item-active {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Animated Hamburger to X */
/* Fixed 2026 Monochrome Hamburger */
.nav-icon {
    width: 24px;
    height: 19px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures even spacing */
    cursor: pointer;
    transition: transform .5s ease-in-out;
}

    .nav-icon span {
        display: block;
        height: 2px; /* Forced 2px thickness */
        width: 100%;
        background: #1D1D1F; /* Pure Monochrome Black */
        border-radius: 2px;
        transition: all .25s ease-in-out;
        transform-origin: left center;
    }

    /* Morphing to X */
    .nav-icon.open span:nth-child(1) {
        transform: rotate(45deg);
        width: 125%; /* Adjusts for the diagonal length */
    }

    .nav-icon.open span:nth-child(2) {
        width: 0%;
        opacity: 0;
    }

    .nav-icon.open span:nth-child(3) {
        transform: rotate(-45deg);
        width: 125%;
    }

/* Ensure the sidebar container has that deep, matte black feel */
aside {
    background-color: #0A0A0B;
}

/* Custom scrollbar for a cleaner look */
.custom-scrollbar::-webkit-scrollbar {
    width: 3px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* --- Navigation Menu Items --- */
.br-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--br-text-secondary);
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}

    .br-nav-link:hover {
        background: var(--br-bg-hover);
        color: var(--br-text-primary);
    }

    .br-nav-link.active {
        background: var(--br-text-primary);
        color: #ffffff;
    }

        .br-nav-link.active svg {
            color: #ffffff !important;
        }

.br-nav-chevron {
    width: 14px;
    height: 14px;
    color: var(--br-text-muted);
    transition: transform 0.2s;
}

    .br-nav-chevron.expanded {
        transform: rotate(90deg);
    }

.br-child-container {
    margin-left: 16px;
    margin-top: 2px;
    border-left: 1px solid var(--br-border);
    padding-left: 4px;
}




/* Sidebar Menu Specifics */
.br-menu-wrapper {
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.br-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--br-text-secondary);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: all 0.2s ease;
}

    .br-nav-link:hover {
        background-color: var(--br-bg-hover);
        color: var(--br-text-primary);
    }

    .br-nav-link.br-active {
        background-color: var(--br-text-primary);
        color: #ffffff;
    }

/* Chevron and Icon Scaling */
.br-nav-chevron {
    width: 12px;
    height: 12px;
    stroke-width: 3px;
    transition: transform 0.2s ease;
}

    .br-nav-chevron.expanded {
        transform: rotate(90deg);
    }

.br-nav-icon {
    width: 16px;
    height: 16px;
    stroke-width: 2px;
}

/* Child Indentation */
.br-child-container {
    margin-left: 14px;
    margin-top: 2px;
    border-left: 1px solid var(--br-border);
    padding-left: 4px;
}

/* Sidebar Separator */
.br-nav-divider {
    height: 1px;
    width: 90%;
    margin: 12px auto;
    background: linear-gradient(90deg, transparent 0%, var(--br-border) 50%, transparent 100%);
}




/* Dropdown Positioning & Style */
.br-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    background: #ffffff;
    border: 1px solid var(--br-border);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
    min-width: 220px;
    padding: 8px;
    z-index: 1000;
}

.br-dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--br-text-secondary);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s ease;
}

    .br-dropdown-item:hover {
        background-color: var(--br-bg-hover);
        color: var(--br-text-primary);
    }

.br-dropdown-header {
    padding: 8px 14px 4px 14px;
    font-size: 10px;
    font-weight: 700;
    color: var(--br-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.br-avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--br-bg-hover);
    border: 1px solid var(--br-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--br-text-primary);
}

/* Reconnect Modal Base */
#components-reconnect-modal {
    border: none;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    display: none; /* Blazor handles showing it via 'display: block' */
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

    /* Shown state */
    #components-reconnect-modal.components-reconnect-show {
        display: flex;
    }

.br-reconnect-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* Logo & Pulse Animation */
.br-reconnect-logo {
    position: relative;
    width: 120px;
    height: 120px;
}

    .br-reconnect-logo img {
        width: 120px;
        height: 120px;
        position: relative;
        z-index: 2;
    }

.br-reconnect-spinner {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 3px solid var(--br-border);
    border-top-color: var(--br-text-primary);
    border-radius: 50%;
    animation: br-spin 1s linear infinite;
    z-index: 1;
}

@keyframes br-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Typography & Buttons */
.br-reconnect-messages p {
    font-size: 16px;
    font-weight: 600;
    color: var(--br-text-primary);
    margin: 0;
}

.br-btn-primary {
    background: var(--br-text-primary);
    color: white;
    padding: 10px 24px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    margin: 5px;
}

.br-btn-secondary {
    background: transparent;
    color: var(--br-text-muted);
    padding: 10px 24px;
    border: 1px solid var(--br-border);
    border-radius: 8px;
    cursor: pointer;
}

/* Glass Card */
.br-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.br-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px #000000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* Dashboard Grid System */
.br-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    width: 100%;
}

/* 2026 Monochrome Card Style */
.br-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.br-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

.br-card-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--br-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.br-card-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--br-text-primary);
    line-height: 1;
}

.br-card-status {
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}