/***************************************************************/
/* MODERN KEY NUMBERS                                          */
/* Generic key-number component                                */
/***************************************************************/

.key-numbers {
    width: 100%;
    margin-top: 20px;
    --key-number-border: var(--positions-border, #e2e8ef);
    --key-number-background: var(--positions-background, #ffffff);
    --key-number-background-soft: var(--positions-background-soft, #f7f9fb);
    --key-number-title: var(--positions-title, #263746);
    --key-number-text: var(--positions-text, #475569);
    --key-number-muted: var(--positions-muted, #7b8794);
    --key-number-accent: var(--positions-accent, #b18849);
    --key-number-positive: var(--positions-positive, #258457);
    --key-number-positive-background: var(--positions-positive-background, #edf8f2);
    --key-number-negative: var(--positions-negative, #b64c4c);
    --key-number-negative-background: var(--positions-negative-background, #fdf1f1);
}


/***************************************************************/
/* HEADER                                                      */
/***************************************************************/

.key-numbers-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.key-numbers-title {
    margin: 0 0 4px 0;
    color: var(--key-number-title);
    font-size: 1.35em;
    font-weight: 650;
    line-height: 1.3;
    text-transform: none;
}

.key-numbers-subtitle {
    margin: 0;
    color: var(--key-number-muted);
    font-size: 0.9em;
    line-height: 1.45;
}


/***************************************************************/
/* GRID                                                        */
/***************************************************************/

.key-numbers-grid {
    display: flex;
    flex-wrap: wrap;
    margin-right: -8px;
    margin-left: -8px;
}

    .key-numbers-grid > [class*="col-"] {
        display: flex;
        padding-right: 8px;
        padding-left: 8px;
        margin-bottom: 16px;
    }


/***************************************************************/
/* CARD                                                        */
/***************************************************************/

.key-number-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    min-height: 126px;
    padding: 18px;
    overflow: hidden;
    background-color: var(--key-number-card-soft, var(--key-number-background-soft));
    border: 1px solid var(--key-number-card-border, var(--key-number-border));
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(31, 45, 61, 0.055);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

    .key-number-card::before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 4px;
        content: "";
        background-color: var(--key-number-card-accent, #94a3b8);
    }

    .key-number-card:hover {
        transform: translateY(-2px);
        border-color: #d4dce5;
        box-shadow: 0 7px 20px rgba(31, 45, 61, 0.09);
    }


/***************************************************************/
/* ICON                                                        */
/***************************************************************/

.key-number-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--key-number-card-accent, #64748b);
    background-color: var(--key-number-card-soft, #eef2f6);
    border: 1px solid var(--key-number-card-border, #e0e6ec);
    border-radius: 13px;
    font-size: 1.1em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 5px rgba(31, 45, 61, 0.04);
}


/***************************************************************/
/* CONTENT                                                     */
/***************************************************************/

.key-number-content {
    flex: 1 1 auto;
    min-width: 0;
}

.key-number-label {
    min-height: 18px;
    margin-bottom: 6px;
    overflow: hidden;
    color: var(--key-number-muted);
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.035em;
    line-height: 1.3;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.key-number-value {
    margin-bottom: 6px;
    color: var(--key-number-value-color, var(--key-number-title));
    font-size: 2em;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.key-number-detail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 20px;
    color: var(--key-number-muted);
    font-size: 0.78em;
    line-height: 1.35;
}

.key-number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 7px;
    color: var(--key-number-card-accent, #64748b);
    background-color: var(--key-number-card-soft, #eef2f6);
    border: 1px solid var(--key-number-card-border, #e0e6ec);
    border-radius: 999px;
    font-size: 0.95em;
    font-weight: 700;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}


/***************************************************************/
/* GENERIC STATES                                              */
/***************************************************************/

.key-number-card.is-positive {
    --key-number-card-accent: var(--key-number-positive);
    --key-number-card-soft: var(--key-number-positive-background);
    --key-number-card-border: #d7eee1;
    --key-number-value-color: var(--key-number-positive);
}

.key-number-card.is-negative {
    --key-number-card-accent: var(--key-number-negative);
    --key-number-card-soft: var(--key-number-negative-background);
    --key-number-card-border: #f0dada;
    --key-number-value-color: var(--key-number-negative);
}

.key-number-card.is-neutral {
    --key-number-card-accent: #718096;
    --key-number-card-soft: #f0f3f6;
    --key-number-card-border: #e0e6ec;
}


/***************************************************************/
/* SEMANTIC VARIANTS                                           */
/***************************************************************/

.key-number-card.is-risk {
    --key-number-card-accent: #66768a;
    --key-number-card-soft: #eef2f6;
    --key-number-card-border: #dfe6ed;
}

.key-number-card.is-expected {
    --key-number-card-accent: #7886a5;
    --key-number-card-soft: #f0f2f8;
    --key-number-card-border: #e0e4ef;
}

.key-number-card.is-performance {
    --key-number-card-accent: #718096;
    --key-number-card-soft: #f0f3f6;
    --key-number-card-border: #e0e6ec;
}

.key-number-card.is-results {
    --key-number-card-accent: #4f7c8d;
    --key-number-card-soft: #edf5f7;
    --key-number-card-border: #d9eaee;
}

.key-number-card.is-activity {
    --key-number-card-accent: #4f7c8d;
    --key-number-card-soft: #edf5f7;
    --key-number-card-border: #d9eaee;
}

.key-number-card.is-fees {
    --key-number-card-accent: #9a7745;
    --key-number-card-soft: #faf5ec;
    --key-number-card-border: #ece0ce;
}

.key-number-card.is-drawdown {
    --key-number-card-accent: var(--key-number-negative);
    --key-number-card-soft: var(--key-number-negative-background);
    --key-number-card-border: #f0dada;
    --key-number-value-color: var(--key-number-negative);
}


/***************************************************************/
/* COMBINED STATES                                             */
/***************************************************************/

.key-number-card.is-performance.is-positive {
    --key-number-card-accent: var(--key-number-positive);
    --key-number-card-soft: var(--key-number-positive-background);
    --key-number-card-border: #d7eee1;
    --key-number-value-color: var(--key-number-positive);
}

.key-number-card.is-performance.is-negative {
    --key-number-card-accent: var(--key-number-negative);
    --key-number-card-soft: var(--key-number-negative-background);
    --key-number-card-border: #f0dada;
    --key-number-value-color: var(--key-number-negative);
}

.key-number-card.is-performance.is-neutral {
    --key-number-card-accent: #718096;
    --key-number-card-soft: #f0f3f6;
    --key-number-card-border: #e0e6ec;
}


/***************************************************************/
/* EXPECTED VALUES                                             */
/***************************************************************/

.key-number-card .expected-stddev,
.key-number-card .expected-srri {
    font-variant-numeric: tabular-nums;
}

    .key-number-card .expected-stddev:empty::before,
    .key-number-card .expected-srri:empty::before {
        content: "—";
    }


/***************************************************************/
/* RESPONSIVE                                                  */
/***************************************************************/

@media (max-width: 1200px) {

    .key-number-card {
        min-height: 120px;
    }

    .key-number-value {
        font-size: 1.85em;
    }
}

@media (max-width: 767px) {

    .key-numbers {
        margin-top: 16px;
    }

    .key-numbers-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }

    .key-numbers-title {
        font-size: 1.2em;
    }

    .key-numbers-subtitle {
        font-size: 0.85em;
    }

    .key-numbers-grid > [class*="col-"] {
        width: 100%;
    }

    .key-number-card {
        min-height: 108px;
        padding: 15px;
        border-radius: 10px;
    }

    .key-number-icon {
        width: 40px;
        height: 40px;
        border-radius: 11px;
    }

    .key-number-value {
        font-size: 1.7em;
    }
}