/* Refined balance v1.1 - shared GLOBAL stylesheet, not a .razor.css file.
   Load after Radzen/DevExpress and application styles. All rules are locally
   scoped; no generic .ff-refined rule changes your existing football-field view.
   No JavaScript, external fonts or new library dependencies are required. */

.ff-rb-shell,
.ff-rb-dcf {
    --ff-rb-accent: #236f70;
    --ff-rb-text: #203c40;
    --ff-rb-muted: #607579;
    --ff-rb-border: #dfe8e5;
    --ff-rb-panel: #fafbfc;
    --ff-rb-focus: #946348;
    color: var(--ff-rb-text);
    font-family: Inter, var(--rz-text-font-family, system-ui), sans-serif;
    line-height: 1.5;
    min-width: 0;
}

    .ff-rb-shell .ff-rb-page-card {
        padding: clamp(16px, 2vw, 26px);
        background: #fff;
        min-height: 60vh;
        position: relative;
        border: 1px solid var(--ff-rb-border);
        border-radius: 12px;
        box-shadow: none;
        min-width: 0;
        /* Deliberately do not clip menus, focus rings or popovers. */
        overflow: visible;
    }

    .ff-rb-shell .ff-rb-expert-notice {
        margin-bottom: 12px;
    }

        .ff-rb-shell .ff-rb-expert-notice .rz-alert {
            margin: 0;
            border-radius: 6px;
        }

    .ff-rb-shell .ff-rb-toolbar-row {
        margin: 0 0 22px;
    }

    .ff-rb-shell .ff-rb-toolbar {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 8px;
    }

        .ff-rb-shell .ff-rb-toolbar .rz-button {
            max-width: 100%;
            height: auto;
            min-height: 38px;
            padding: 9px 13px;
            border-radius: 5px;
            font-size: 12px;
            line-height: 1.5;
            text-align: left;
            /* Preserve native button variant, disabled and permission behavior. */
        }

            .ff-rb-shell .ff-rb-toolbar .rz-button .rz-button-text {
                white-space: normal;
                overflow-wrap: anywhere;
            }

    .ff-rb-shell .ff-rb-custom-model-notice {
        margin-bottom: 16px;
    }

        .ff-rb-shell .ff-rb-custom-model-notice .rz-alert {
            margin: 0;
        }

    .ff-rb-shell .ff-rb-tab-host {
        min-width: 0;
    }

    .ff-rb-shell .ff-rb-tabs > .rz-tabview-nav {
        border-bottom: 1px solid var(--ff-rb-border);
        flex-wrap: wrap;
        gap: 0 14px;
        background: #fff;
    }

        .ff-rb-shell .ff-rb-tabs > .rz-tabview-nav > li > a {
            font-size: 13px;
            line-height: 1.5;
            padding: 13px 10px;
        }

        .ff-rb-shell .ff-rb-tabs > .rz-tabview-nav > li.rz-tabview-selected {
            border-bottom-color: var(--ff-rb-accent);
        }

    .ff-rb-shell .ff-rb-tabs > .rz-tabview-panels {
        padding: 22px 0 0;
        border: 0;
        background: transparent;
        min-width: 0;
    }

.ff-refined.ff-rb-dcf {
    --rz-primary: #236f70;
    --rz-primary-light: #e1eeea;
    --rz-primary-lighter: #eef5f2;
    --rz-on-primary: #ffffff;
    width: 100%;
    min-width: 0;
    padding: clamp(16px, 1.7vw, 26px);
    margin: 0;
    border: 1px solid var(--ff-rb-border);
    border-radius: 12px;
    background: #fff;
    box-sizing: border-box;
    container-type: inline-size;
    container-name: ff-rb-page;
}

.ff-rb-dcf *, .ff-rb-dcf *::before, .ff-rb-dcf *::after {
    box-sizing: border-box;
}

/* A single column is the safe baseline. Named container queries respond to
   actual tab width, not just a wide screen containing a narrow application pane. */
.ff-rb-dcf .ff-rb-dcf-layout.rz-row {
    /* Override Radzen row utility classes, only on our grid rows. */
    display: grid !important;
    justify-content: stretch !important;
    align-items: start !important;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 28px;
    margin: 0;
    width: 100%;
}

.ff-rb-dcf .ff-rb-dcf-layout > .ff-rb-input-column,
.ff-rb-dcf .ff-rb-dcf-layout > .ff-rb-results {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    justify-self: stretch;
    margin: 0;
    padding: 0;
    flex: initial;
    align-self: start;
}

.ff-rb-dcf .ff-rb-input-panel {
    background: var(--ff-rb-panel);
    border: 1px solid var(--ff-rb-border);
    border-radius: 8px;
    padding: 22px;
    min-width: 0;
    height: auto;
    max-height: none;
    overflow: visible;
    /* Not sticky; no nested scroll area. Any number of manual inputs may grow. */
}

.ff-rb-dcf .ff-rb-eyebrow {
    margin: 0 0 18px;
    color: var(--ff-rb-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 1.5;
    text-transform: uppercase;
}

.ff-rb-dcf .ff-rb-input-notices {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 26px;
}

    .ff-rb-dcf .ff-rb-input-notices .rz-alert {
        margin: 0;
        font-size: 12px;
        line-height: 1.6;
        border-radius: 5px;
        overflow-wrap: anywhere;
    }

.ff-rb-dcf .ff-rb-input-blocks {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

    .ff-rb-dcf .ff-rb-input-blocks > .ff-rb-assumption-block + .ff-rb-assumption-block {
        border-top: 1px solid var(--ff-rb-border);
        padding-top: 24px;
    }

.ff-rb-dcf .ff-rb-assumption-block {
    min-width: 0;
}

.ff-rb-dcf .ff-rb-section-title {
    margin: 0 0 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--ff-rb-text);
}

.ff-rb-dcf .ff-rb-form-stack {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.ff-rb-dcf .ff-rb-form-row.rz-row {
    /* Override Radzen row utility classes, only on our grid rows. */
    display: grid !important;
    justify-content: stretch !important;
    align-items: start !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px 18px;
    width: 100%;
    margin: 0;
    align-items: start;
}

.ff-rb-dcf .ff-rb-form-row > .ff-rb-form-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch;
    margin: 0;
    padding: 0;
    align-self: start;
}

.ff-rb-dcf .ff-rb-field {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    font-size: 13px;
    /* No box-shadow rule: original guidance shadows are preserved. */
}

.ff-rb-dcf .ff-rb-manual-field {
    margin-top: 12px;
    /* A SEPARATE form field under the selector, never a second inline input. */
}

.ff-rb-dcf .ff-rb-field .rz-dropdown,
.ff-rb-dcf .ff-rb-field .rz-numeric,
.ff-rb-dcf .ff-rb-field .rz-datepicker {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    font-size: 13px;
}

.ff-rb-dcf .ff-rb-field .rz-inputtext,
.ff-rb-dcf .ff-rb-field .rz-numeric-input,
.ff-rb-dcf .ff-rb-field .rz-dropdown-label {
    min-width: 0;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.ff-rb-dcf .ff-rb-field .rz-form-field-label {
    font-size: 12px;
    max-width: calc(100% - 24px);
}
/* Original guidance icons, helpers, previous-value labels and validation styles
   are intentionally not hidden or recolored. No overrides affect popup portals. */

.ff-rb-dcf .ff-rb-results {
    container-type: inline-size;
    container-name: ff-rb-results;
}

.ff-rb-dcf .ff-rb-result-summary {
    margin: 0 0 28px;
}

    .ff-rb-dcf .ff-rb-result-summary:empty {
        display: none;
    }

.ff-rb-dcf .ff-rb-result-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 3px 0 24px;
}

    .ff-rb-dcf .ff-rb-result-heading h3 {
        margin: 0;
        color: var(--ff-rb-muted);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.5;
        text-transform: uppercase;
        letter-spacing: .09em;
    }

.ff-rb-dcf .ff-rb-badge {
    padding: 4px 8px;
    background: var(--ff-rb-panel);
    border-radius: 4px;
    color: var(--ff-rb-muted);
    font-size: 11px;
}

.ff-rb-dcf .ff-rb-hero-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--ff-rb-border);
}

.ff-rb-dcf .ff-rb-hero-value {
    min-width: 0;
}

    .ff-rb-dcf .ff-rb-hero-value + .ff-rb-hero-value {
        padding-left: 24px;
        border-left: 1px solid var(--ff-rb-border);
    }

    .ff-rb-dcf .ff-rb-hero-value > span {
        display: block;
        margin-bottom: 10px;
        color: var(--ff-rb-muted);
        font-size: 13px;
        line-height: 1.6;
    }

    .ff-rb-dcf .ff-rb-hero-value > strong {
        display: block;
        color: var(--ff-rb-text);
        font-size: clamp(28px, 3vw, 43px);
        font-weight: 600;
        letter-spacing: -.04em;
        line-height: 1.2;
        font-variant-numeric: tabular-nums;
        overflow-wrap: anywhere;
    }

    .ff-rb-dcf .ff-rb-hero-value:first-child > strong {
        color: var(--ff-rb-accent);
    }

.ff-rb-dcf .ff-rb-methods.rz-row {
    /* Override Radzen row utility classes, only on our grid rows. */
    display: grid !important;
    justify-content: stretch !important;
    align-items: start !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
    align-items: start;
    gap: 18px;
    width: 100%;
    margin: 22px 0 0;
}

.ff-rb-dcf .ff-rb-methods > .ff-rb-method {
    width: 100% !important;
    min-width: 0;
    max-width: 100% !important;
    justify-self: stretch;
    padding: 0 0 0 12px;
    margin: 0;
    border-left: 1px solid var(--ff-rb-border);
}

.ff-rb-dcf .ff-rb-method > span {
    display: block;
    font-size: 11px;
    line-height: 1.6;
    color: var(--ff-rb-muted);
}

.ff-rb-dcf .ff-rb-method > strong {
    display: block;
    margin-top: 7px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.ff-rb-dcf .ff-rb-status-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}

    .ff-rb-dcf .ff-rb-status-messages .rz-alert {
        margin: 0;
        border-radius: 6px;
        font-size: 13px;
        line-height: 1.7;
        overflow-wrap: anywhere;
    }

.ff-rb-dcf .ff-rb-charts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}

.ff-rb-dcf .ff-rb-chart-section {
    min-width: 0;
    border-top: 1px solid var(--ff-rb-border);
    padding-top: 20px;
}

.ff-rb-dcf .ff-rb-chart-heading {
    margin-bottom: 16px;
}

    .ff-rb-dcf .ff-rb-chart-heading h3 {
        margin: 0;
        color: var(--ff-rb-text);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.55;
    }

    .ff-rb-dcf .ff-rb-chart-heading p {
        margin: 5px 0 0;
        color: var(--ff-rb-muted);
        font-size: 12px;
        line-height: 1.6;
    }

.ff-rb-dcf .ff-rb-chart-scroll {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding: 4px;
}

.ff-rb-dcf .ff-rb-chart-canvas {
    width: 100%;
}

.ff-rb-dcf .ff-rb-chart-canvas-assumptions {
    min-width: 370px;
}

.ff-rb-dcf .ff-rb-chart-canvas-financials {
    min-width: 440px;
}
/* Optional DevExtreme renderer enhancement. Unmatched classes fall back to theme
   grid colors; no series paths, reference values or axis ranges are affected. */
.ff-rb-dcf .ff-rb-chart-canvas .dxc-val-grid path,
.ff-rb-dcf .ff-rb-chart-canvas .dxc-val-grid line {
    stroke: #e9eeec;
}

.ff-rb-dcf :focus-visible,
.ff-rb-shell .ff-rb-toolbar :focus-visible {
    outline: 2px solid var(--ff-rb-focus);
    outline-offset: 3px;
}

@container ff-rb-page (min-width: 1050px) {
    .ff-rb-dcf .ff-rb-dcf-layout.rz-row {
        grid-template-columns: minmax(360px, 400px) minmax(0, 1fr);
        gap: 30px;
    }
}

@container ff-rb-results (min-width: 900px) {
    .ff-rb-dcf .ff-rb-charts {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        gap: 26px;
    }

    .ff-rb-dcf .ff-rb-chart-heading {
        min-height: 72px;
    }
}

@container ff-rb-results (max-width: 450px) {
    .ff-rb-dcf .ff-rb-hero-values {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .ff-rb-dcf .ff-rb-hero-value + .ff-rb-hero-value {
        padding-left: 0;
        border-left: 0;
    }

    .ff-rb-dcf .ff-rb-hero-value > strong {
        font-size: 32px;
    }
}

@media (max-width: 600px) {
    .ff-rb-shell .ff-rb-page-card {
        padding: 14px;
        border-radius: 8px;
    }

    .ff-refined.ff-rb-dcf {
        padding: 14px;
        border-radius: 8px;
    }

    .ff-rb-dcf .ff-rb-input-panel {
        padding: 16px;
    }

    .ff-rb-shell .ff-rb-toolbar {
        flex-direction: column;
    }

        .ff-rb-shell .ff-rb-toolbar .rz-button {
            width: 100%;
        }
}

@media (prefers-reduced-motion: reduce) {
    .ff-rb-dcf *, .ff-rb-shell .ff-rb-toolbar * {
        scroll-behavior: auto;
    }
}

/* v1.1: equal visible control widths, not just equal outer columns.
   The field's content wrapper must stretch as well as its input component.
   Keep guidance shadows, icon colors, disabled states and popups unchanged. */
.ff-rb-dcf .ff-rb-form-cell > .ff-rb-field {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch;
}

.ff-rb-dcf .ff-rb-field .rz-form-field-content {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.ff-rb-dcf .ff-rb-field .rz-dropdown,
.ff-rb-dcf .ff-rb-field .rz-numeric,
.ff-rb-dcf .ff-rb-field .rz-datepicker {
    flex: 1 1 0%;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
}

    .ff-rb-dcf .ff-rb-field .rz-numeric-input,
    .ff-rb-dcf .ff-rb-field .rz-datepicker > input {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
/* Finance values remain intact, not one digit per line. Exceptional long
   values can scroll within their metric without expanding the page. */
.ff-rb-dcf .ff-rb-hero-value > strong,
.ff-rb-dcf .ff-rb-method > strong {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    max-width: 100%;
    overflow-x: auto;
}

/* Refined Balance: equal-height inputs panel on the two-column layout.
   Append to the END of your corrected shared global stylesheet,
   or load this file after it. No Razor/code-behind changes required.
   Uses the same named container and breakpoint as the existing layout. */

@container ff-rb-page (min-width: 1050px) {
    .ff-rb-dcf .ff-rb-dcf-layout > .ff-rb-input-column {
        /* Override the existing align-self: start on this column only.
           The grid row's height remains driven by whichever side is taller. */
        align-self: stretch !important;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

        .ff-rb-dcf .ff-rb-dcf-layout > .ff-rb-input-column > .ff-rb-input-panel {
            /* Fill the column without fixed heights or JavaScript measurements.
           Inputs remain at the top; only the panel background/border extends. */
            flex: 1 1 auto;
            width: 100%;
            height: auto;
            max-height: none;
            overflow: visible;
        }
}

/* Below 1050px, the existing single-column layout and natural panel height
   are unchanged. Opening a chart-data table on desktop increases the grid
   row height, so the input panel stretches with it automatically. */