/* ============================================================================
   FINANCIAL PLANNING UNIFIED LAYOUT
   One enterprise shell for all FP pages (model, mapping, reports, setup).
   ============================================================================ */

:root {
    --fp-u-page-bg: var(--fp-background, #f1f5f9);
    --fp-u-text: var(--fp-text-primary, #0f172a);
    --fp-u-surface: var(--fp-surface, #ffffff);
    --fp-u-border: var(--fp-border, #e2e8f0);
    --fp-u-shadow: var(--fp-shadow-md, 0 10px 24px rgba(15, 23, 42, 0.08));
    --fp-u-radius: var(--fp-radius-2xl, 16px);
    --fp-u-content-max: 1920px;
    --fp-u-page-px: clamp(12px, 2.2vw, 34px);
    --fp-u-gap: clamp(12px, 1.6vw, 22px);
}

.fp-unified-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: var(--fp-u-page-px);
    padding-right: var(--fp-u-page-px);
    color: var(--fp-u-text);
    background: var(--fp-u-page-bg);
}

.fp-unified-page.fp-unified-page--contained {
    max-width: var(--fp-u-content-max);
    margin-left: auto;
    margin-right: auto;
}

.fp-unified-page.fp-unified-page--full {
    min-height: calc(100vh - 56px);
}

.fp-unified-hero,
.fp-unified-workspace,
.fp-unified-surface {
    border-radius: var(--fp-u-radius);
    box-shadow: var(--fp-u-shadow);
}

.fp-unified-commandbar,
.fp-unified-tabs,
.fp-unified-kpis {
    gap: var(--fp-u-gap);
}

.fp-unified-workspace {
    border: 1px solid var(--fp-u-border);
    background: var(--fp-u-surface);
}

.fp-unified-sidebar {
    min-width: 0;
    border-right: 1px solid color-mix(in srgb, var(--fp-u-border) 90%, #ffffff 10%);
    background: color-mix(in srgb, var(--fp-u-page-bg) 76%, #ffffff 24%);
}

.fp-unified-main {
    min-width: 0;
    background: var(--fp-u-surface);
}

@media (max-width: 980px) {
    .fp-unified-page {
        padding-left: 12px;
        padding-right: 12px;
    }

    .fp-unified-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--fp-u-border);
    }
}