.finance-page {
    background: #f5f7fb;
    min-height: calc(100vh - 56px);
    padding: 24px;
}

.finance-dashboard-page,
.finance-operational-page {
    align-content: start;
    display: grid;
    gap: 18px;
    grid-auto-rows: max-content;
}

.finance-hero,
.finance-filter-card,
.finance-page-title,
.finance-panel,
.finance-metric-card {
    background: #fff;
    border: 1px solid #edf1f7;
    border-radius: 8px;
    box-shadow: 0 16px 38px rgba(16, 24, 40, .06);
}

.finance-hero {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(360px, 520px);
    min-height: 188px;
    overflow: hidden;
    padding: 36px 42px;
    position: relative;
}

.finance-hero::after {
    background: linear-gradient(135deg, rgba(91, 65, 255, .08), rgba(91, 65, 255, .18));
    content: "";
    inset: 0 0 0 auto;
    position: absolute;
    width: 36%;
}

.finance-hero-copy,
.finance-hero-art {
    position: relative;
    z-index: 1;
}

.finance-hero-copy span,
.finance-page-title span {
    color: #4b3cff;
    display: block;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 14px;
}

.finance-hero-copy h1,
.finance-page-title h1 {
    color: #111827;
    font-size: 38px;
    font-weight: 900;
    line-height: 1.05;
    margin: 0 0 14px;
}

.finance-hero-copy p,
.finance-page-title p {
    color: #667085;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.finance-hero-art {
    min-height: 150px;
}

.finance-bars {
    align-items: end;
    bottom: 30px;
    display: flex;
    gap: 14px;
    left: 92px;
    position: absolute;
}

.finance-bars i {
    background: linear-gradient(180deg, #8068ff, #4b3cff);
    border-radius: 8px 8px 2px 2px;
    box-shadow: 0 16px 24px rgba(75, 60, 255, .28);
    display: block;
    width: 24px;
}

.finance-bars i:nth-child(1) { height: 60px; }
.finance-bars i:nth-child(2) { height: 84px; }
.finance-bars i:nth-child(3) { height: 112px; }
.finance-bars i:nth-child(4) { height: 132px; }

.finance-card-art {
    background: linear-gradient(135deg, #4b3cff, #765dff);
    border-radius: 18px;
    bottom: 18px;
    box-shadow: 0 22px 38px rgba(75, 60, 255, .35);
    color: #fff;
    display: grid;
    gap: 10px;
    grid-template-columns: 46px 1fr;
    height: 94px;
    padding: 20px;
    position: absolute;
    right: 34px;
    width: 210px;
}

.finance-card-art b {
    font-size: 38px;
    grid-row: span 2;
    line-height: 1;
}

.finance-card-art span {
    background: rgba(255, 255, 255, .42);
    border-radius: 999px;
    display: block;
    height: 10px;
    margin-top: 8px;
}

.finance-card-art span + span { opacity: .72; width: 74%; }

.finance-pie-art {
    background: conic-gradient(#4b3cff 0 68%, #9d8dff 68% 100%);
    border-radius: 50%;
    bottom: 10px;
    height: 82px;
    position: absolute;
    right: 235px;
    width: 82px;
}

.finance-hero-art svg {
    height: 120px;
    position: absolute;
    right: 90px;
    top: 8px;
    width: 220px;
}

.finance-hero-art svg path,
.finance-hero-art svg circle {
    fill: none;
    stroke: #9d8dff;
    stroke-linecap: round;
    stroke-width: 4;
}

.finance-hero-art svg circle { fill: #765dff; }

.finance-filter-card {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr auto;
    padding: 24px 28px;
}

.finance-filter-card.dashboard-filter {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) auto;
}

.finance-filter-card.dashboard-filter .finance-period-actions {
    grid-column: 1;
    grid-row: 1;
}

.finance-filter-card.dashboard-filter .finance-new-button {
    align-self: start;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

.finance-filter-card.dashboard-filter .finance-period-summary {
    grid-column: 1 / -1;
    grid-row: 2;
}

.finance-filter-card.compact {
    align-items: start;
    grid-template-columns: 1fr;
    padding: 20px 24px;
}

.finance-operational-cash-flow .finance-filter-card.compact,
.finance-operational-reports .finance-filter-card.compact {
    gap: 8px;
    padding: 16px 20px;
}

.finance-period-actions,
.finance-custom-period,
.finance-inline-form,
.finance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.finance-custom-period {
    align-items: center;
}

.finance-custom-period.custom-open {
    align-items: end;
}

.finance-custom-period label {
    display: grid;
    gap: 6px;
    margin: 0;
    min-width: 170px;
}

.finance-custom-period label span {
    color: #52617d;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.finance-period-actions button,
.finance-custom-period button,
.finance-new-button,
.finance-page button {
    align-items: center;
    background: #fff;
    border: 1px solid #d9e1ee;
    border-radius: 8px;
    color: #344054;
    display: inline-flex;
    font-weight: 800;
    gap: 10px;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
}

.finance-period-actions button.active,
.finance-new-button,
.finance-page button.primary {
    background: linear-gradient(135deg, #4b3cff, #654cff);
    border-color: #4b3cff;
    box-shadow: 0 12px 24px rgba(75, 60, 255, .22);
    color: #fff;
}

.finance-page input,
.finance-page select,
.finance-page textarea {
    background: #fff;
    border: 1px solid #d9e1ee;
    border-radius: 8px;
    color: #111827;
    font-weight: 700;
    min-height: 42px;
    padding: 0 12px;
}

.finance-page textarea {
    min-height: 96px;
    padding: 12px;
    resize: vertical;
}

.finance-period-summary {
    color: #667085;
    font-size: 13px;
    font-weight: 700;
}

.finance-period-summary i { color: #4b3cff; margin-right: 8px; }

.finance-new-button {
    grid-row: span 2;
    justify-self: end;
}

.finance-metric-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(4, minmax(260px, 1fr));
}

.finance-metric-card {
    align-items: center;
    display: flex;
    gap: 16px;
    min-height: 104px;
    overflow: hidden;
    padding: 18px 22px;
    position: relative;
}

.finance-metric-card .metric-icon {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 52px;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.finance-metric-card .metric-icon.blue { background: #eaf3ff; color: #1d73d8; }
.finance-metric-card .metric-icon.green { background: #eaf8f1; color: #148f5a; }
.finance-metric-card .metric-icon.purple,
.finance-metric-card .metric-icon.violet { background: #f1eaff; color: #654cff; }
.finance-metric-card .metric-icon.orange { background: #fff2e7; color: #d35c13; }
.finance-metric-card .metric-icon.red { background: #fff1f1; color: #d92d20; }

.finance-metric-card span:not(.metric-icon) {
    color: #344054;
    display: block;
    font-size: 13px;
    font-weight: 800;
}

.finance-metric-card strong {
    color: #101828;
    display: block;
    font-size: 22px;
    line-height: 1.1;
    margin: 4px 0;
}

.finance-metric-card small {
    color: #667085;
    font-size: 12px;
}

.finance-sparkline {
    bottom: 18px;
    height: 36px;
    position: absolute;
    right: 20px;
    width: 96px;
}

.finance-sparkline path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.finance-sparkline.blue path { stroke: #4b6bff; }
.finance-sparkline.green path { stroke: #20b15a; }
.finance-sparkline.orange path { stroke: #ff7a1a; }
.finance-sparkline.red path { stroke: #f04438; }
.finance-sparkline.purple path,
.finance-sparkline.violet path { stroke: #654cff; }

.finance-dashboard-bottom,
.finance-two-columns {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
}

.finance-stack {
    display: grid;
    gap: 18px;
}

.finance-two-columns.wide-left {
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
}

.finance-cashflow-panel {
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(280px, .9fr) minmax(360px, 1fr);
}

.finance-panel {
    overflow: hidden;
}

.finance-panel header {
    border-bottom: 1px solid #edf1f7;
    min-height: 64px;
    padding: 18px 22px;
}

.finance-panel h2 {
    color: #101828;
    font-size: 20px;
    font-weight: 900;
    margin: 0;
}

.finance-panel > div,
.finance-page-title {
    padding: 22px;
}

.finance-page-title {
    margin-bottom: 18px;
    min-height: 0;
}

.finance-operational-page .finance-page-title {
    padding: 20px 24px;
}

.finance-operational-categories .finance-page-title,
.finance-operational-cost-centers .finance-page-title,
.finance-operational-cash-flow .finance-page-title,
.finance-operational-reports .finance-page-title {
    margin-bottom: 12px;
    padding: 18px 22px;
}

.finance-operational-categories .finance-page-title h1,
.finance-operational-cost-centers .finance-page-title h1,
.finance-operational-cash-flow .finance-page-title h1,
.finance-operational-reports .finance-page-title h1 {
    font-size: 30px;
    margin-bottom: 10px;
}

.finance-form,
.finance-report-total {
    display: grid;
    gap: 12px;
}

.finance-form {
    align-content: start;
}

.finance-form > label {
    display: grid;
    gap: 7px;
    margin: 0;
}

.finance-form > label span {
    color: #52617d;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.finance-form-grid {
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(180px, 1fr)) auto;
    margin-bottom: 18px;
}

.finance-account-form {
    grid-template-columns: minmax(190px, .8fr) repeat(5, minmax(160px, 1fr)) auto;
}

.finance-alert-rule-form {
    grid-template-columns: minmax(240px, 1.2fr) minmax(220px, 1fr) minmax(120px, .5fr) minmax(160px, .7fr) auto;
}

.finance-form-grid label {
    display: grid;
    gap: 6px;
    margin: 0;
}

.finance-form-grid label span {
    color: #52617d;
    font-size: 12px;
    font-weight: 900;
    margin: 2px 0 -4px;
    text-transform: uppercase;
}

.finance-form-grid button {
    min-width: 110px;
}

.finance-attachment-list {
    background: #f8fafc;
    border: 1px solid #e5eaf2;
    border-radius: 8px;
    display: grid;
    gap: 6px;
    padding: 10px 12px;
}

.finance-attachment-list span {
    color: #344054;
    font-size: 13px;
    font-weight: 700;
}

.finance-row-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.finance-row-attachments button {
    font-size: 12px;
    min-height: 32px;
    padding: 0 10px;
}

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

.finance-table th,
.finance-table td {
    border-bottom: 1px solid #edf1f7;
    color: #344054;
    padding: 14px 12px;
    text-align: left;
    vertical-align: top;
}

.finance-table th {
    color: #667085;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.finance-table td strong {
    color: #101828;
    display: block;
}

.finance-table td span,
.finance-alerts small {
    color: #667085;
    display: block;
    font-size: 12px;
}

.finance-status-badge {
    align-items: center;
    border-radius: 999px;
    display: inline-flex !important;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    padding: 7px 10px;
    width: fit-content;
}

.finance-status-badge.paid {
    background: #dcfae6;
    color: #067647;
}

.finance-status-badge.open {
    background: #fff4e5;
    color: #b54708;
}

.finance-status-badge.overdue {
    background: #fee4e2;
    color: #b42318;
}

.finance-status-badge.neutral {
    background: #eef2f6;
    color: #475467;
}

.finance-table .finance-status-select {
    font-size: 13px;
    min-height: 36px;
    min-width: 132px;
    padding: 0 34px 0 12px;
}

.finance-pagination {
    align-items: center;
    border-top: 1px solid #edf1f7;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 14px 22px 18px;
}

.finance-pagination span,
.finance-pagination strong {
    color: #52617d;
    font-size: 13px;
    font-weight: 800;
}

.finance-pagination div {
    align-items: center;
    display: flex;
    gap: 10px;
}

.finance-pagination button {
    min-height: 36px;
}

.finance-modal-backdrop {
    align-items: center;
    background: rgba(15, 23, 42, .5);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 3000;
}

.finance-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    display: grid;
    max-height: 90vh;
    max-width: 1040px;
    overflow: hidden;
    width: min(1040px, 100%);
}

.finance-modal header,
.finance-modal footer {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 16px 20px;
}

.finance-modal header {
    border-bottom: 1px solid #edf1f7;
}

.finance-modal footer {
    border-top: 1px solid #edf1f7;
    justify-content: flex-end;
}

.finance-modal header span {
    color: #4b3cff;
    display: block;
    font-size: 12px;
    font-weight: 900;
}

.finance-modal header h3 {
    color: #101828;
    font-size: 18px;
    font-weight: 900;
    margin: 4px 0 0;
    overflow-wrap: anywhere;
}

.finance-modal .icon-button {
    border-radius: 50%;
    min-height: 38px;
    padding: 0;
    width: 38px;
}

.finance-attachment-preview {
    align-items: center;
    background: #f8fafc;
    display: flex;
    justify-content: center;
    min-height: 520px;
    padding: 16px;
}

.finance-attachment-preview img,
.finance-attachment-preview iframe {
    background: #fff;
    border: 1px solid #e5eaf2;
    border-radius: 8px;
    height: min(68vh, 680px);
    max-width: 100%;
    object-fit: contain;
    width: 100%;
}

.finance-alerts {
    display: grid;
    gap: 12px;
}

.finance-alerts article {
    background: #fff8ed;
    border: 1px solid #fedf89;
    border-radius: 8px;
    color: #101828;
    padding: 14px 16px;
}

.finance-empty {
    background: #fff;
    border: 1px dashed #cfd8e6;
    border-radius: 8px;
    color: #52617d;
    font-weight: 800;
    padding: 34px;
    text-align: center;
}

.finance-chart svg {
    height: 210px;
    width: 100%;
}

.finance-chart .area { fill: url(#financeArea); }
.finance-chart .line { fill: none; stroke: #4b3cff; stroke-width: 4; }
.finance-chart .dash { fill: none; stroke: #98a2b3; stroke-dasharray: 8 8; stroke-width: 3; }

@media (max-width: 1200px) {
    .finance-hero,
    .finance-filter-card,
    .finance-metric-grid,
    .finance-dashboard-bottom,
    .finance-cashflow-panel,
    .finance-two-columns,
    .finance-two-columns.wide-left {
        grid-template-columns: 1fr;
    }

    .finance-new-button {
        grid-row: auto;
        justify-self: start;
    }
}

@media (max-width: 700px) {
    .finance-page {
        padding: 16px;
    }

    .finance-hero {
        padding: 28px 24px;
    }

    .finance-hero::after,
    .finance-hero-art {
        display: none;
    }

    .finance-hero-copy h1,
    .finance-page-title h1 {
        font-size: 30px;
    }

    .finance-period-actions,
    .finance-custom-period,
    .finance-inline-form,
    .finance-actions,
    .finance-page input,
    .finance-page select,
    .finance-page button {
        width: 100%;
    }
}