/* GLOBAL stylesheet: key-financials layout only.
   Replace the previous key-financials CSS block with this complete block.
   Load after the Radzen theme. Do not place in an isolated .razor.css file.
   Numeric controls keep the application's native padding, border, colors,
   fonts and disabled appearance. No numeric-grid reset-button slots are used.
*/

.ff-financials {
    --ff-fin-border: #dfe8e5;
    --ff-fin-text: #203c40;
    --ff-fin-muted: #607579;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 460px;
    padding: 26px;
    border: 1px solid var(--ff-fin-border);
    border-radius: 10px;
    background: #fff;
    /* No inherited font/color changes: inputs retain application styling. */
    container: ff-financials / inline-size;
}

    .ff-financials > .ff-fin-notices {
        --notice-text: #465264;
        --notice-title: #253241;
        --notice-info: #116471;
        --notice-info-bg: #f5f8f9;
        --notice-warning: #905411;
        --notice-warning-bg: #fff7eb;
        --notice-danger: #a93650;
        --notice-danger-bg: #fff1f4;
        --notice-success: #276d47;
        --notice-success-bg: #eff7f2;
        --notice-focus: #116471;
    }

        .ff-financials > .ff-fin-notices:has(> .rz-alert) {
            margin-bottom: 19px;
        }

    .ff-financials > .ff-fin-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        padding: 21px 22px;
        margin-bottom: 23px;
        border: 1px solid var(--ff-fin-border);
        border-radius: 7px;
        background: #fafbfc;
        color: var(--ff-fin-text);
    }

.ff-fin-controls .ff-fin-controls-copy {
    min-width: 0;
}

.ff-fin-controls .ff-fin-panel-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}

.ff-fin-controls .ff-fin-section-number {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 23px;
    height: 23px;
    box-sizing: border-box;
    border: 1px solid #ccdfd2;
    border-radius: 4px;
    color: #557566;
    font-size: 10px;
}

.ff-fin-controls .ff-fin-panel-heading h3,
.ff-fin-data .ff-fin-table-heading h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--ff-fin-text);
}

.ff-fin-controls .ff-fin-controls-copy > p {
    margin: 0;
    font-size: 12px;
    line-height: 1.75;
    color: var(--ff-fin-muted);
}

.ff-fin-controls .ff-fin-switch-block {
    min-width: 235px;
    padding-left: 28px;
    border-left: 1px solid #d9e4df;
}

.ff-fin-controls .ff-fin-switch-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .ff-fin-controls .ff-fin-switch-line > .rz-switch {
        flex-shrink: 0;
    }

    .ff-fin-controls .ff-fin-switch-line > .rz-label {
        font-size: 12px;
        line-height: 1.6;
    }

.ff-fin-controls .ff-fin-switch-block > p {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.6;
    color: var(--ff-fin-muted);
}

.ff-fin-data {
    min-width: 0;
}

    .ff-fin-data .ff-fin-table-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 15px;
    }

        .ff-fin-data .ff-fin-table-heading h3 {
            margin-bottom: 5px;
        }

        .ff-fin-data .ff-fin-table-heading p {
            margin: 0;
            font-size: 11px;
            line-height: 1.6;
            color: var(--ff-fin-muted);
        }

    .ff-fin-data .ff-fin-legend {
        display: flex;
        align-items: center;
        gap: 18px;
        font-size: 11px;
        color: var(--ff-fin-muted);
    }

        .ff-fin-data .ff-fin-legend > span {
            display: flex;
            align-items: center;
            gap: 7px;
            white-space: nowrap;
        }

        .ff-fin-data .ff-fin-legend i {
            display: inline-block;
            height: 10px;
            width: 10px;
            border: 1px solid #dce3e0;
        }

    .ff-fin-data .ff-fin-scroll {
        overflow-x: auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        border: 0;
        border-radius: 6px;
        box-sizing: border-box;
    }

        .ff-fin-data .ff-fin-scroll:focus-visible {
            outline: 2px solid #946348;
            outline-offset: 3px;
        }

    .ff-fin-data .ff-fin-matrix {
        width: 100%;
    }

/* Keep the same native flex tracks in the header and each metric row.
   Inline styles supplied by the parent control column widths and colors. */
.ff-fin-matrix > .rz-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin: 0;
    width: 100%;
    min-width: 0;
    border-bottom: 0;
    box-sizing: border-box;
}

    .ff-fin-matrix > .rz-row:last-child {
        border-bottom: 0;
    }

    /* RadzenColumn without Size renders .rz-col, not .rz-column. */
    .ff-fin-matrix > .rz-row > .rz-col {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        width: auto !important;
        padding: 12px 14px;
        margin: 0;
        min-height: 64px;
        /* Preserve inline flex/min-width/background from the parent. */
    }

        .ff-fin-matrix > .rz-row > .rz-col > .rz-text {
            margin: 0;
            width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }

.ff-fin-matrix > .ff-fin-header > .rz-col {
    min-height: 55px;
}

    .ff-fin-matrix > .ff-fin-header > .rz-col:nth-child(-n+2) {
        background: #fafbfc;
    }

    .ff-fin-matrix > .ff-fin-header > .rz-col > .rz-text {
        font-size: 12px;
        font-weight: 600;
        color: #52676c;
    }

    /* Match the header's text inset to the numeric theme's padding tokens.
   These rules change the header only, not the numeric input padding. */
    .ff-fin-matrix > .ff-fin-header > .rz-col > .ff-fin-period-label {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        margin: 0;
        text-align: right;
        padding-inline: var(--rz-numeric-input-padding-inline, var(--rz-input-padding-inline));
        padding-block: var(--rz-numeric-input-padding-block, var(--rz-input-padding-block));
        font-weight: bold;
    }

/* Full-width controls, without overriding native input presentation. */
.ff-fin-matrix > .rz-row > .rz-col > .rz-numeric,
.ff-fin-matrix > .rz-row > .rz-col > .rz-dropdown {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.ff-fin-data > .ff-fin-data-note {
    margin: 14px 0 0;
    color: var(--ff-fin-muted);
    font-size: 11px;
    line-height: 1.7;
}

.ff-financials > .ff-fin-empty {
    border: 1px dashed #d3dfda;
    border-radius: 6px;
    background: #fafcfb;
    text-align: center;
    padding: 55px 24px;
}

.ff-fin-empty h3 {
    margin: 0 0 9px;
    font-size: 16px;
    font-weight: 500;
    color: var(--ff-fin-text);
}

.ff-fin-empty p {
    margin: 0;
    font-size: 12px;
    line-height: 1.8;
    color: var(--ff-fin-muted);
}

@container ff-financials (max-width: 800px) {
    .ff-financials > .ff-fin-controls {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
    }

    .ff-fin-controls .ff-fin-switch-block {
        min-width: 0;
        padding: 17px 0 0;
        border-left: 0;
        border-top: 1px solid #d9e4df;
    }
}

@media (max-width: 600px) {
    .ff-financials {
        padding: 15px 12px;
    }

        .ff-financials > .ff-fin-controls {
            padding: 18px;
            align-items: stretch;
            flex-direction: column;
            gap: 18px;
        }

    .ff-fin-controls .ff-fin-switch-block {
        min-width: 0;
        padding: 17px 0 0;
        border-left: 0;
        border-top: 1px solid #d9e4df;
    }

    .ff-fin-data .ff-fin-table-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
}