.financial-dashboard {
    --fd-navy: #12233f;
    --fd-primary: #24446e;
    --fd-teal: #20b8b2;
    --fd-green: #27b67d;
    --fd-red: #ff4f5f;
    --fd-orange: #f5a019;
    --fd-muted: #72829c;
    --fd-border: #e4eaf2;
    display: grid;
    gap: 22px;
    color: var(--fd-navy);
    padding-bottom: 28px;
}

.financial-dashboard__header,
.financial-dashboard__toolbar,
.financial-card__heading,
.financial-dashboard__header-actions,
.financial-dashboard__toolbar-actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.financial-dashboard__header h1 {
    font-size: clamp(1.9rem, 3vw, 2.45rem);
    font-weight: 800;
    letter-spacing: -.04em;
    margin: 0 0 4px;
}

.financial-dashboard__header p,
.financial-card__heading p,
.financial-card__note {
    color: var(--fd-muted);
    margin: 0;
}

.financial-dashboard__header-actions,
.financial-dashboard__toolbar-actions {
    gap: 10px;
}

.financial-dashboard__header select,
.financial-dashboard__icon-button,
.financial-dashboard__toolbar-actions span,
.financial-dashboard__toolbar-actions a {
    align-items: center;
    background: #fff;
    border: 1px solid var(--fd-border);
    border-radius: 14px;
    color: var(--fd-navy);
    display: inline-flex;
    min-height: 42px;
    padding: 9px 14px;
    text-decoration: none;
}

.financial-dashboard__icon-button,
.financial-dashboard__toolbar-actions a {
    justify-content: center;
    width: 42px;
}

.financial-dashboard__toolbar {
    background: #fff;
    border: 1px solid var(--fd-border);
    border-radius: 22px;
    box-shadow: 0 12px 30px rgba(25, 48, 78, .06);
    padding: 14px 16px;
}

.financial-dashboard__periods {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.financial-dashboard__periods a {
    background: #f5f7fa;
    border: 1px solid var(--fd-border);
    border-radius: 999px;
    color: var(--fd-muted);
    font-size: .88rem;
    font-weight: 700;
    padding: 9px 15px;
    text-decoration: none;
}

.financial-dashboard__periods a.is-active {
    background: #635BFF;
    border-color: #635BFF;
    color: #fff;
}

.financial-dashboard__kpis,
.financial-dashboard__mini-kpis,
.financial-dashboard__two-columns,
.financial-dashboard__three-stats,
.financial-dashboard__two-stats,
.financial-dashboard__receivables,
.financial-dashboard__alerts,
.financial-dashboard__quick-actions {
    display: grid;
    gap: 16px;
}

.financial-dashboard__kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.financial-dashboard__mini-kpis {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.financial-card {
    background: #fff;
    border: 1px solid rgba(226, 233, 242, .95);
    border-radius: 26px;
    box-shadow: 0 15px 38px rgba(26, 49, 80, .07);
    min-width: 0;
    overflow: hidden;
    padding: 22px;
    position: relative;
}

.financial-kpi {
    min-height: 155px;
}

.financial-label {
    color: var(--fd-muted);
    display: block;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .025em;
    margin-bottom: 12px;
    padding-right: 58px;
    text-transform: uppercase;
}

.financial-kpi > strong,
.financial-mini-kpi > strong {
    display: block;
    font-size: clamp(1.6rem, 2.3vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.1;
}

.financial-kpi small,
.financial-mini-kpi small {
    color: var(--fd-muted);
    display: block;
    margin-top: 12px;
}

.financial-kpi--highlight,
.financial-card--highlight {
    background: linear-gradient(145deg, #164060, #19aaa8);
    color: #fff;
}

.financial-kpi--highlight .financial-label,
.financial-kpi--highlight small,
.financial-card--highlight p,
.financial-card--highlight span {
    color: rgba(255, 255, 255, .78);
}

.financial-card--highlight h2,
.financial-card--highlight .financial-card__total,
.financial-card--highlight strong {
    color: #fff;
}

.financial-trend {
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 800;
    padding: 6px 9px;
    position: absolute;
    right: 16px;
    top: 16px;
}

.financial-trend--up { background: #e9faef; color: var(--fd-green); }
.financial-trend--down { background: #fff0f2; color: var(--fd-red); }
.financial-trend--neutral { background: #f0f3f7; color: var(--fd-muted); }
.financial-kpi--highlight .financial-trend { background: rgba(255,255,255,.16); color: #fff; }

.financial-mini-kpi {
    padding: 18px;
}

.financial-mini-kpi .financial-label {
    margin-bottom: 8px;
    padding: 0;
}

.financial-mini-kpi > strong {
    font-size: 1.28rem;
}

.financial-card__heading {
    gap: 16px;
    margin-bottom: 18px;
}

.financial-card__heading h2 {
    font-size: 1.42rem;
    font-weight: 800;
    letter-spacing: -.025em;
    margin: 0 0 3px;
}

.financial-card__heading a {
    color: #105c6a;
    flex: 0 0 auto;
    font-size: .88rem;
    font-weight: 800;
    text-decoration: none;
}

.financial-chart {
    min-height: 250px;
}

.financial-chart--large {
    min-height: 330px;
}

.financial-dashboard__two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.financial-dashboard__three-stats {
    border-top: 1px solid #edf1f6;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 10px;
    padding-top: 18px;
}

.financial-dashboard__two-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

.financial-dashboard__three-stats strong,
.financial-dashboard__three-stats span,
.financial-dashboard__two-stats strong,
.financial-dashboard__two-stats span {
    display: block;
}

.financial-dashboard__three-stats span,
.financial-dashboard__two-stats span {
    color: var(--fd-muted);
    font-size: .82rem;
    margin-top: 3px;
}

.financial-dashboard__receivables {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 18px;
}

.financial-dashboard__receivables article {
    border: 1px solid;
    border-radius: 18px;
    padding: 17px;
}

.financial-dashboard__receivables article > span,
.financial-dashboard__receivables article > strong,
.financial-dashboard__receivables article > small {
    display: block;
}

.financial-dashboard__receivables article > span {
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.financial-dashboard__receivables article > strong {
    font-size: 1.75rem;
    margin: 5px 0;
}

.financial-dashboard__receivables article > small { color: var(--fd-muted); }
.financial-dashboard__receivables .is-danger { background: #fff8f8; border-color: #ffd4d8; }
.financial-dashboard__receivables .is-warning { background: #fffaf1; border-color: #ffe0aa; }
.financial-dashboard__receivables .is-success { background: #f1fcf8; border-color: #bcebdd; }

.financial-table {
    border-collapse: collapse;
    width: 100%;
}

.financial-table th {
    border-bottom: 1px solid #edf1f6;
    color: #8090a8;
    font-size: .75rem;
    letter-spacing: .02em;
    padding: 12px;
    text-align: left;
    text-transform: uppercase;
}

.financial-table td {
    border-bottom: 1px solid #f0f3f7;
    padding: 15px 12px;
}

.financial-table__empty {
    color: var(--fd-muted);
    padding: 28px !important;
    text-align: center;
}

.financial-status {
    border-radius: 999px;
    display: inline-flex;
    font-size: .76rem;
    font-weight: 800;
    padding: 6px 10px;
}

.financial-status--danger { background: #fff0f2; color: var(--fd-red); }
.financial-status--warning { background: #fff5e7; color: #df8700; }
.financial-status--success { background: #eaf9f0; color: var(--fd-green); }

.financial-expense-layout {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(210px, .8fr) minmax(220px, 1.2fr);
}

.financial-list,
.financial-dashboard__stack {
    display: grid;
    gap: 12px;
}

.financial-list__row {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #edf1f6;
    border-radius: 15px;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 13px 14px;
}

.financial-list__row > span,
.financial-list__row--client > span {
    align-items: center;
    display: flex;
    gap: 10px;
}

.financial-list__row small,
.financial-list__row--client span > span,
.financial-list__row--client span > span strong {
    display: block;
}

.financial-list__row small {
    color: var(--fd-muted);
    margin-top: 2px;
}

.financial-dot {
    background: var(--dot-color);
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    width: 10px;
}

.financial-avatar,
.financial-expense-icon,
.financial-dashboard__round-icon {
    align-items: center;
    background: #e7f7f5;
    border-radius: 12px;
    color: #168b87;
    display: inline-flex !important;
    flex: 0 0 38px;
    font-size: .82rem;
    font-style: normal;
    font-weight: 800;
    height: 38px;
    justify-content: center;
    width: 38px;
}

.financial-expense-icon {
    background: #edf3ff;
    color: #4268bf;
}

.financial-dashboard__round-icon {
    background: #edf3ff;
    color: #4268bf;
}

.financial-card--highlight .financial-dashboard__round-icon {
    background: rgba(255,255,255,.16);
    color: #fff;
}

.financial-card__total {
    display: block;
    font-size: 2rem;
    letter-spacing: -.04em;
    margin-bottom: 6px;
}

.financial-dashboard__alerts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.financial-alert {
    border: 1px solid;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    min-height: 205px;
    padding: 18px;
}

.financial-alert > span {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.financial-alert h3 {
    font-size: 1.08rem;
    font-weight: 800;
    margin: 9px 0 6px;
}

.financial-alert p {
    color: var(--fd-muted);
    flex: 1;
}

.financial-alert a {
    border-radius: 12px;
    color: #fff;
    display: block;
    font-size: .84rem;
    font-weight: 800;
    padding: 10px 14px;
    text-align: center;
    text-decoration: none;
}

.financial-alert--danger { background: #fff8f8; border-color: #ffc6cc; }
.financial-alert--danger > span { color: var(--fd-red); }
.financial-alert--danger a { background: var(--fd-red); }
.financial-alert--warning { background: #fffaf3; border-color: #ffdaa0; }
.financial-alert--warning > span { color: #dc8700; }
.financial-alert--warning a { background: var(--fd-orange); }
.financial-alert--info { background: #f5f8ff; border-color: #cbd9ff; }
.financial-alert--info > span { color: #4268bf; }
.financial-alert--info a { background: #4d7cff; }

.financial-empty {
    color: var(--fd-muted);
    margin: 16px 0;
    text-align: center;
}

.financial-dashboard__quick-actions {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.financial-dashboard__quick-actions a {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #edf1f6;
    border-radius: 17px;
    color: var(--fd-navy);
    display: flex;
    flex-direction: column;
    font-size: .85rem;
    font-weight: 700;
    gap: 11px;
    justify-content: center;
    min-height: 108px;
    padding: 12px;
    text-align: center;
    text-decoration: none;
}

.financial-dashboard__quick-actions i {
    align-items: center;
    border-radius: 13px;
    color: #fff;
    display: flex;
    font-size: 1.1rem;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.financial-dashboard__quick-actions .is-teal i { background: var(--fd-teal); }
.financial-dashboard__quick-actions .is-navy i { background: var(--fd-primary); }
.financial-dashboard__quick-actions .is-orange i { background: var(--fd-orange); }
.financial-dashboard__quick-actions .is-red i { background: var(--fd-red); }
.financial-dashboard__quick-actions .is-purple i { background: #8558df; }
.financial-dashboard__quick-actions .is-gray i { background: #657186; }

@media (max-width: 1399px) {
    .financial-dashboard__mini-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .financial-dashboard__quick-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1199px) {
    .financial-dashboard__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .financial-dashboard__mini-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .financial-dashboard__header,
    .financial-dashboard__toolbar,
    .financial-card__heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .financial-dashboard__kpis,
    .financial-dashboard__mini-kpis,
    .financial-dashboard__two-columns,
    .financial-dashboard__receivables,
    .financial-dashboard__alerts,
    .financial-dashboard__quick-actions,
    .financial-expense-layout {
        grid-template-columns: 1fr;
    }

    .financial-dashboard__header-actions,
    .financial-dashboard__toolbar-actions {
        width: 100%;
    }

    .financial-dashboard__header select,
    .financial-dashboard__toolbar-actions span {
        flex: 1;
    }

    .financial-card { border-radius: 20px; padding: 17px; }
    .financial-dashboard__three-stats { grid-template-columns: 1fr; }
}