@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Poppins:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --hrm-blue: #0136a2;
    --hrm-cyan: #30c6ff;
}

body,
.fi-body {
    font-family: 'Outfit', 'Poppins', sans-serif;
}

.fi-header-heading,
.fi-sidebar-header,
.fi-section-header-heading {
    font-family: 'Space Grotesk', sans-serif;
}

.fi-sidebar-item-active {
    background: color-mix(in srgb, var(--hrm-blue) 10%, transparent);
}

.fi-btn-color-primary {
    box-shadow: 0 6px 18px color-mix(in srgb, var(--hrm-blue) 16%, transparent);
}

.report-page { display: grid; gap: 1.25rem; }
.report-intro, .report-filters, .report-rank-card, .report-unallocated, .report-table-shell { border: 1px solid #e4eaf2; border-radius: 1rem; background: #fff; box-shadow: 0 4px 16px rgb(16 24 40 / 4%); }
.report-intro { align-items: end; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding: 1.5rem; }
.report-intro h2 { color: #15213b; font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; font-weight: 700; letter-spacing: -.03em; margin: 0; }
.report-intro p:not(.eyebrow) { color: #667085; font-size: .875rem; margin: .4rem 0 0; max-width: 52rem; }
.eyebrow { color: #0136a2; font-size: .7rem; font-weight: 700; letter-spacing: .08em; margin: 0 0 .35rem; text-transform: uppercase; }
.report-mode, .filter-toggle { background: #f2f6fb; border-radius: .7rem; display: inline-flex; gap: .2rem; padding: .25rem; }
.report-mode button, .filter-toggle button { background: transparent; border: 0; border-radius: .55rem; color: #475467; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 600; padding: .6rem .85rem; }
.report-mode button.is-active, .filter-toggle button.is-active { background: #fff; box-shadow: 0 1px 3px rgb(16 24 40 / 12%); color: #0136a2; }
.report-filters { align-items: end; display: flex; flex-wrap: wrap; gap: .85rem; padding: 1rem 1.25rem; }
.report-filters label { color: #667085; display: grid; font-size: .72rem; font-weight: 600; gap: .35rem; }
.report-filters input, .report-filters select { background: #fff; border: 1px solid #d0d8e5; border-radius: .55rem; color: #17233b; font: inherit; font-size: .85rem; min-height: 2.45rem; padding: .45rem .65rem; }
.report-rankings { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.report-rank-card { display: grid; gap: .25rem; padding: 1rem 1.1rem; }
.report-rank-card strong { color: #17233b; font-family: 'Space Grotesk', sans-serif; font-size: 1rem; }
.report-rank-card > span:last-child { color: #475467; font-size: .8rem; }
.report-rank-positive { border-top: 3px solid #12b76a; }
.report-rank-negative { border-top: 3px solid #f04438; }
.report-unallocated { display: grid; gap: .35rem; padding: 1rem 1.25rem; }
.report-unallocated strong { color: #17233b; font-size: .9rem; }
.report-unallocated > span { color: #667085; font-size: .8rem; }
.report-currency-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.report-currency-list span { background: #fff7e8; border: 1px solid #f8dfb3; border-radius: 99px; color: #8a4b08; font-size: .75rem; padding: .25rem .6rem; }
.report-table-shell { overflow: hidden; }
.report-table-heading { align-items: center; display: flex; gap: 1rem; justify-content: space-between; padding: 1.25rem 1.4rem; }
.report-table-heading h3 { color: #17233b; font-family: 'Space Grotesk', sans-serif; font-size: 1rem; margin: 0; }
.report-table-heading p, .report-footnote { color: #667085; font-size: .75rem; margin: .25rem 0 0; }
.report-record-count { background: #eff6ff; border-radius: 99px; color: #0136a2; font-size: .72rem; font-weight: 600; padding: .35rem .65rem; white-space: nowrap; }
.report-table-scroll { overflow-x: auto; }
.report-table { border-collapse: collapse; min-width: 800px; text-align: left; width: 100%; }
.report-table thead { background: #f7f9fc; color: #667085; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.report-table th, .report-table td { padding: .9rem 1rem; }
.report-table th { font-weight: 700; white-space: nowrap; }
.report-table tbody tr { border-top: 1px solid #edf0f5; color: #344054; font-size: .82rem; }
.report-table tbody tr:hover { background: #fafcff; }
.table-subtext { color: #667085; display: block; font-size: .72rem; margin-top: .2rem; }
.is-profit { color: #07834f !important; white-space: nowrap; }
.is-loss { color: #c43228 !important; white-space: nowrap; }
.report-empty { color: #667085 !important; padding: 3.5rem 1rem !important; text-align: center; }
.report-footnote { line-height: 1.5; }
.report-link { color: #0136a2; font-weight: 600; text-decoration: none; }
.report-link:hover { text-decoration: underline; }

.dark .report-intro, .dark .report-filters, .dark .report-rank-card, .dark .report-unallocated, .dark .report-table-shell { background: #101828; border-color: #344054; }
.dark .report-intro h2, .dark .report-rank-card strong, .dark .report-unallocated strong, .dark .report-table-heading h3 { color: #f9fafb; }
.dark .report-intro p:not(.eyebrow), .dark .report-rank-card > span:last-child, .dark .report-unallocated > span, .dark .report-table-heading p, .dark .report-footnote, .dark .table-subtext { color: #98a2b3; }
.dark .report-mode, .dark .filter-toggle { background: #1d2939; }
.dark .report-mode button.is-active, .dark .filter-toggle button.is-active { background: #344054; color: #7cc8ff; }
.dark .report-filters input, .dark .report-filters select { background: #1d2939; border-color: #475467; color: #f9fafb; }
.dark .report-table thead { background: #1d2939; color: #98a2b3; }
.dark .report-table tbody tr { border-color: #344054; color: #d0d5dd; }
.dark .report-table tbody tr:hover { background: #172033; }
.dark .report-rank-card strong { color: #f9fafb; }

.dashboard-overview { display: grid; gap: 1.25rem; }
.dashboard-overview-heading, .dashboard-chart-heading { align-items: end; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
.dashboard-period-label { color: #667085; font-size: .875rem; margin: .25rem 0 0; }
.dashboard-filters { align-items: center; display: flex; flex-wrap: wrap; gap: .6rem; }
.dashboard-date-filter input { background: #fff; border: 1px solid #d0d8e5; border-radius: .65rem; color: #17233b; font: inherit; font-size: .85rem; min-height: 2.7rem; padding: .45rem .7rem; }
.dashboard-range-separator { color: #667085; font-size: .8rem; }
.dashboard-stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-stat-card, .dashboard-chart-section, .dashboard-chart-card { background: #fff; border: 1px solid #e4eaf2; border-radius: 1rem; box-shadow: 0 4px 16px rgb(16 24 40 / 4%); }
.dashboard-stat-card { border-top: 3px solid #30c6ff; display: grid; gap: .65rem; min-height: 9.5rem; padding: 1.2rem 1.35rem; }
.dashboard-stat-card h2 { color: #667085; font-size: .9rem; font-weight: 600; margin: 0; }
.dashboard-stat-card strong { color: #101828; font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.1rem, 1.7vw, 1.6rem); overflow-wrap: anywhere; }
.dashboard-stat-card p { color: #667085; font-size: .78rem; margin: 0; }
.dashboard-stat-green { border-top-color: #12b76a; }
.dashboard-stat-orange { border-top-color: #f79009; }
.dashboard-stat-red { border-top-color: #f04438; }
.dashboard-chart-section { display: grid; gap: 1rem; padding: 1.25rem; }
.dashboard-chart-heading h2 { color: #15213b; font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; font-weight: 700; margin: 0; }
.dashboard-chart-heading p { color: #667085; font-size: .8rem; margin: .3rem 0 0; }
.dashboard-chart-card { box-shadow: none; padding: 1rem; }
.dashboard-chart-card h3 { color: #17233b; font-family: 'Space Grotesk', sans-serif; font-size: .95rem; margin: 0 0 .5rem; }
.dashboard-chart-scroll { overflow-x: auto; }
.dashboard-chart { display: block; height: auto; min-width: 620px; overflow: visible; width: 100%; }
.dashboard-chart-gridline { stroke: #edf0f5; stroke-dasharray: 4 5; stroke-width: 1; }
.dashboard-chart-zero { stroke: #98a2b3; stroke-width: 1.2; }
.dashboard-chart-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.dashboard-chart-dot { stroke: #fff; stroke-width: 1.5; }
.dashboard-chart-revenue { background: #30c6ff; color: #30c6ff; fill: #30c6ff; stroke: #30c6ff; }
.dashboard-chart-expenses { background: #f79009; color: #f79009; fill: #f79009; stroke: #f79009; }
.dashboard-chart-profit { background: #12b76a; color: #12b76a; fill: #12b76a; stroke: #12b76a; }
.dashboard-chart-line.dashboard-chart-revenue, .dashboard-chart-line.dashboard-chart-expenses, .dashboard-chart-line.dashboard-chart-profit { fill: none; }
.dashboard-chart-label { fill: #667085; font-family: 'Outfit', sans-serif; font-size: 11px; }
.dashboard-chart-legend { display: flex; flex-wrap: wrap; gap: 1rem; }
.dashboard-chart-legend span { align-items: center; color: #475467; display: inline-flex; font-size: .75rem; gap: .4rem; }
.dashboard-chart-legend i { border-radius: 50%; height: .6rem; width: .6rem; }
.dashboard-chart-data { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.dashboard-chart-data div { border-top: 1px solid #edf0f5; color: #667085; display: grid; font-size: .7rem; gap: .2rem; padding-top: .55rem; }
.dashboard-chart-data strong { color: #17233b; font-size: .75rem; }
.dashboard-chart-empty { color: #667085; margin: 0; padding: 1.5rem; text-align: center; }
.dark .dashboard-stat-card, .dark .dashboard-chart-section, .dark .dashboard-chart-card { background: #101828; border-color: #344054; }
.dark .dashboard-stat-card strong, .dark .dashboard-chart-heading h2, .dark .dashboard-chart-card h3, .dark .dashboard-chart-data strong { color: #f9fafb; }
.dark .dashboard-stat-card h2, .dark .dashboard-stat-card p, .dark .dashboard-period-label, .dark .dashboard-chart-heading p, .dark .dashboard-chart-legend span, .dark .dashboard-chart-data div { color: #98a2b3; }
.dark .dashboard-date-filter input { background: #1d2939; border-color: #475467; color: #f9fafb; }

@media (max-width: 640px) {
    .report-intro { align-items: start; padding: 1.1rem; }
    .report-filters { align-items: stretch; }
    .report-filters label { flex: 1 1 130px; }
    .report-table-heading { align-items: start; padding: 1rem; }
    .report-table th, .report-table td { padding: .8rem; }
    .dashboard-overview-heading { align-items: start; }
    .dashboard-filters { width: 100%; }
    .dashboard-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-stat-card { min-height: 8rem; padding: 1rem; }
}