/*
|--------------------------------------------------------------------------
| Panel chrome — sidebar, topbar, page shell
|--------------------------------------------------------------------------
*/

.fi-main,
.fi-body {
    background:
        radial-gradient(1200px 480px at 0% -10%, color-mix(in srgb, var(--sindibad-primary, #143588) 10%, transparent), transparent 60%),
        radial-gradient(900px 420px at 100% 0%, color-mix(in srgb, var(--sindibad-secondary, #c9a45c) 12%, transparent), transparent 55%),
        var(--portal-surface);
}

.fi-sidebar {
    border-inline-end: 1px solid var(--portal-border);
    background: color-mix(in srgb, var(--portal-surface-raised) 92%, transparent);
    backdrop-filter: blur(10px);
}

.fi-sidebar-item-button {
    border-radius: var(--portal-radius-sm);
}

.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background: color-mix(in srgb, var(--sindibad-primary, #143588) 12%, transparent);
    box-shadow: inset 3px 0 0 var(--sindibad-primary, #143588);
}

/* Client panel — quieter chrome, stronger focus on content */
.fi-panel-client .fi-main,
.fi-panel-client .fi-body {
    background:
        radial-gradient(900px 420px at 10% -5%, color-mix(in srgb, var(--sindibad-secondary, #c9a45c) 14%, transparent), transparent 55%),
        radial-gradient(700px 360px at 100% 0%, color-mix(in srgb, var(--sindibad-primary, #143588) 10%, transparent), transparent 50%),
        var(--portal-surface);
}

.fi-panel-client .fi-header-heading {
    font-size: 1.75rem;
    font-weight: 700;
}

.fi-topbar {
    border-bottom: 1px solid var(--portal-border);
    background: color-mix(in srgb, var(--portal-surface-raised) 88%, transparent);
    backdrop-filter: blur(10px);
}

.fi-header-heading {
    letter-spacing: -0.02em;
}

.fi-page-header-main-ctn {
    gap: 0.75rem;
}