.finance-dashboard {
  --finance-primary: #1783e6;
  display: grid;
  gap: 10px;
  color: #0a2540;
}

.finance-page-heading {
  align-items: center;
  gap: 14px;
}

.finance-page-heading h2 {
  margin: 1px 0 3px;
  font-size: clamp(24px, 2vw, 28px);
  line-height: 1.08;
}

.finance-page-heading p {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
}

.finance-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}

.finance-heading-actions {
  gap: 8px;
  flex-wrap: nowrap;
}

.finance-heading-actions .primary-action,
.finance-heading-actions .outline-action {
  min-height: 36px;
  padding-inline: 13px;
  font-size: 12px;
  white-space: nowrap;
}

.finance-filter-panel,
.finance-kpi-card,
.finance-action-card,
.finance-chart-card,
.finance-table-card {
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(10, 37, 64, .045);
}

.finance-filter-panel {
  gap: 8px;
  padding: 10px 11px;
}

.finance-filter-grid {
  grid-template-columns: repeat(4, minmax(120px, 1fr)) minmax(230px, auto);
  gap: 9px;
}

.finance-filter-grid label,
.finance-advanced-filters > label,
.finance-custom-period label {
  display: grid;
  gap: 4px;
  color: #475569;
  font-size: 10px;
  font-weight: 600;
}

.finance-filter-grid select,
.finance-advanced-filters select,
.finance-custom-period input {
  width: 100%;
  height: 36px;
  min-height: 36px;
  border: 1px solid #bfd7ea;
  border-radius: 7px;
  padding: 0 31px 0 10px;
  color: #0a2540;
  background-color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.finance-filter-actions {
  gap: 7px;
}

.finance-filter-actions button {
  min-height: 36px;
  padding-inline: 11px;
  font-size: 11px;
  white-space: nowrap;
}

.finance-filter-actions .outline-action.active {
  border-color: var(--finance-primary);
  color: var(--finance-primary);
  background: #eef7ff;
}

.finance-custom-period,
.finance-advanced-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 9px;
  align-items: end;
  padding-top: 8px;
  border-top: 1px solid #e3edf5;
}

.finance-custom-period {
  grid-template-columns: minmax(150px, 220px) minmax(150px, 220px) auto;
  justify-content: start;
}

.finance-advanced-filters[hidden] {
  display: none;
}

.finance-filter-checks {
  display: grid;
  gap: 5px;
  align-self: stretch;
  align-content: center;
}

.finance-filter-checks label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #42566c;
  font-size: 11px;
  font-weight: 500;
}

.finance-filter-checks input {
  width: 15px;
  height: 15px;
  accent-color: var(--finance-primary);
}

.finance-reset-filters {
  min-height: 36px;
  font-size: 11px;
}

.finance-context-label {
  width: 100%;
  padding: 6px 9px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
}

.finance-context-label > span {
  margin-inline: 5px;
  color: #8aa3b8;
}

.finance-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.finance-kpi-card {
  min-height: 100px;
  align-content: stretch;
  gap: 8px;
  padding: 11px 12px 9px;
}

.finance-kpi-content {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.finance-kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
}

.finance-kpi-icon svg {
  width: 20px;
  height: 20px;
}

.finance-kpi-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.finance-kpi-copy small,
.finance-kpi-copy em,
.finance-kpi-card .finance-kpi-copy strong {
  overflow: hidden;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-kpi-copy small {
  color: #52677d;
  font-size: 11px;
  font-weight: 600;
}

.finance-kpi-card .finance-kpi-copy strong {
  color: #0a2540;
  font-size: clamp(14px, 1.35vw, 19px);
  font-variant-numeric: tabular-nums;
}

.finance-kpi-copy em {
  color: var(--tone);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
}

.finance-kpi-progress {
  height: 4px;
  align-self: end;
}

.finance-actions-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0 7px;
  border: 1px solid #d6e6f5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(10, 37, 64, .04);
}

.finance-action-card {
  min-height: 66px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 9px;
  padding: 8px 12px;
  border: 0;
  border-right: 1px solid #dce8f1;
  border-radius: 0;
  box-shadow: none;
}

.finance-action-card:last-child {
  border-right: 0;
}

.finance-action-card span {
  width: 34px;
  height: 34px;
  border-radius: 7px;
}

.finance-action-card span svg {
  width: 18px;
  height: 18px;
}

.finance-action-card strong {
  font-size: 11px;
}

.finance-action-card small {
  overflow: hidden;
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-analytics-primary,
.finance-analytics-secondary {
  min-width: 0;
  display: grid;
  gap: 9px;
}

.finance-analytics-primary {
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .95fr);
}

.finance-analytics-secondary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.finance-chart-card,
.finance-table-card {
  min-width: 0;
  padding: 10px;
}

.finance-analytics-primary > .finance-chart-card {
  min-height: 238px;
}

.finance-analytics-secondary > .finance-chart-card {
  min-height: 220px;
}

.finance-card-title {
  min-height: 20px;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.finance-dashboard .finance-card-title h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-card-title span,
.finance-card-title button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 500;
}

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

.finance-line-chart line {
  stroke: #e3edf5;
  stroke-width: 1;
}

.finance-line-area {
  fill: rgba(23, 131, 230, .12);
}

.finance-line-path {
  fill: none;
  stroke: var(--finance-primary);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.finance-line-chart circle {
  fill: var(--finance-primary);
  stroke: #fff;
  stroke-width: 2;
}

.finance-line-labels {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2px;
  margin-top: -5px;
  color: #64748b;
  font-size: 9px;
  text-align: center;
}

.finance-donut-layout {
  grid-template-columns: 122px minmax(0, 1fr);
  gap: 13px;
  min-height: 178px;
}

.finance-donut {
  width: 122px;
  height: 122px;
}

.finance-donut::after {
  inset: 25px;
}

.finance-donut strong {
  font-size: 20px;
}

.finance-donut-legend {
  gap: 7px;
}

.finance-donut-legend span,
.finance-donut-legend b {
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
}

.finance-donut-legend .exempt {
  background: #8b5cf6;
}

.finance-horizontal-bars,
.finance-category-list {
  gap: 8px;
}

.horizontal-bar-row,
.category-row {
  gap: 4px;
}

.horizontal-bar-row strong,
.category-row strong {
  overflow: hidden;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.horizontal-bar-row span,
.category-row span,
.category-row em {
  font-size: 9px;
}

.horizontal-bar-row b,
.category-row b,
.finance-rate-cell b {
  height: 5px;
}

.category-row {
  grid-template-columns: minmax(0, 1fr) minmax(52px, 92px) 34px;
}

.finance-bottom-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.finance-table-card {
  min-height: 218px;
  display: flex;
  flex-direction: column;
}

.finance-table-card .scrollable-data-table,
.finance-table-card .csn-table-wrap {
  min-width: 0;
  margin-top: 0;
  overflow-x: auto;
}

.finance-table-card .csn-data-table {
  min-width: 360px;
  font-size: 9px;
}

.finance-table-card .csn-data-table th,
.finance-table-card .csn-data-table td {
  padding: 6px 7px;
  white-space: nowrap;
}

.finance-table-card .csn-data-table th {
  font-size: 9px;
}

.finance-table-card footer {
  margin-top: auto;
  padding: 8px 4px 1px;
  color: #52677d;
  font-size: 9px;
  text-align: right;
}

.finance-table-card footer strong {
  color: var(--finance-primary);
}

.finance-rate-cell {
  min-width: 92px;
  gap: 3px;
}

.finance-rate-cell span {
  font-size: 9px;
}

@media (max-width: 1200px) {
  .finance-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-filter-actions {
    grid-column: 1 / -1;
  }

  .finance-analytics-primary {
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  }

  .finance-analytics-secondary,
  .finance-bottom-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-analytics-secondary > :last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 780px) {
  .finance-page-heading {
    display: grid;
  }

  .finance-heading-actions {
    justify-content: stretch;
  }

  .finance-heading-actions > * {
    flex: 1 1 0;
  }

  .finance-advanced-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-analytics-primary,
  .finance-analytics-secondary {
    grid-template-columns: 1fr;
  }

  .finance-analytics-secondary > :last-child {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .finance-page-heading h2 {
    font-size: 23px;
  }

  .finance-heading-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .finance-heading-actions > * {
    min-width: 0;
    padding-inline: 7px;
  }

  .finance-filter-grid,
  .finance-advanced-filters,
  .finance-custom-period,
  .finance-kpi-grid,
  .finance-bottom-grid {
    grid-template-columns: 1fr;
  }

  .finance-filter-actions {
    grid-column: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-actions-grid {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .finance-action-card,
  .finance-action-card:last-child {
    border-right: 0;
    border-bottom: 1px solid #dce8f1;
  }

  .finance-action-card:last-child {
    border-bottom: 0;
  }

  .finance-line-chart {
    overflow-x: auto;
  }

  .finance-line-chart svg,
  .finance-line-labels {
    min-width: 650px;
  }

  .finance-donut-layout {
    grid-template-columns: 112px minmax(0, 1fr);
    justify-items: stretch;
  }

  .finance-donut {
    width: 112px;
    height: 112px;
  }

  .finance-compare-layout {
    grid-template-columns: 1fr;
  }

  .finance-compare-layout dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 8px 0 0;
    border-top: 1px solid #e1ebf3;
    border-left: 0;
  }
}

@media print {
  .finance-heading-actions,
  .finance-actions-grid,
  .global-quick-actions {
    display: none !important;
  }

  .finance-kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .finance-analytics-primary,
  .finance-analytics-secondary,
  .finance-bottom-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .finance-chart-card,
  .finance-table-card,
  .finance-kpi-card {
    break-inside: avoid;
    box-shadow: none;
  }
}