/* Tighter space between page header (with subheading) and header widgets / content. */
.fi-page-header-main-ctn:has(.fi-header-subheading) {
    row-gap: 1rem;
}

/*
 * Match chart section header divider (border-gray-200 / dark:border-white/10)
 * under the monthly summary month label, edge-to-edge of the card.
 */
.fi-wi-stats-overview-stat:has(.fi-transactions-monthly-summary-stat-label) .fi-wi-stats-overview-stat-label-ctn,
.fi-wi-stats-overview-stat:has(.fi-transactions-monthly-summary-stat-label) .fi-wi-stats-overview-stat-label {
    display: block;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
}

.fi-wi-stats-overview-stat .fi-transactions-monthly-summary-stat-label {
    position: relative;
    width: 100%;
    padding-bottom: 1rem;
}

.fi-wi-stats-overview-stat .fi-transactions-monthly-summary-stat-separator {
    position: absolute;
    inset-inline: -1.5rem;
    bottom: 0;
    display: block;
    width: auto;
    margin: 0;
    border-top: 1px solid rgb(229 231 235);
}

.dark .fi-wi-stats-overview-stat .fi-transactions-monthly-summary-stat-separator {
    border-top-color: rgb(255 255 255 / 0.1);
}

.fi-wi-stats-overview-stat:has(.fi-month-type-summary-stat-descriptions) .fi-wi-stats-overview-stat-value,
.fi-wi-stats-overview-stat:has(.fi-month-type-summary-stat-descriptions) .fi-wi-stats-overview-stat-placeholder {
    display: none;
}

/*
 * Filament puts title + actions side-by-side from sm up. On tablet that crowds
 * long labels. Keep the stacked header until lg, but let actions wrap like mobile
 * instead of forcing one full-width button per row.
 */
@media (min-width: 640px) and (max-width: 1023px) {
    .fi-header {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .fi-header.fi-header-has-breadcrumbs .fi-header-actions-ctn {
        margin-top: 0;
    }

    /*
     * Equal-height summary + category chart when they share a row.
     * Do not override `.fi-hidden` or hidden currency charts become visible.
     */
    .fi-wi-stats-overview.fi-grid-col:not(.fi-hidden),
    .fi-wi-chart.fi-grid-col:not(.fi-hidden) {
        display: flex;
        flex-direction: column;
        align-self: stretch;
        height: 100%;
    }

    .fi-wi-stats-overview.fi-grid-col:not(.fi-hidden) > .fi-grid,
    .fi-wi-stats-overview.fi-grid-col:not(.fi-hidden) .fi-sc,
    .fi-wi-stats-overview.fi-grid-col:not(.fi-hidden) .fi-sc-component,
    .fi-wi-stats-overview.fi-grid-col:not(.fi-hidden) .fi-sc-section,
    .fi-wi-stats-overview.fi-grid-col:not(.fi-hidden) .fi-section,
    .fi-wi-stats-overview.fi-grid-col:not(.fi-hidden) .fi-section-content-ctn,
    .fi-wi-stats-overview.fi-grid-col:not(.fi-hidden) .fi-section-content {
        height: 100%;
    }

    .fi-wi-stats-overview.fi-grid-col:not(.fi-hidden) .fi-wi-stats-overview-stat {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .fi-wi-chart.fi-grid-col:not(.fi-hidden) > .fi-section {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        height: 100%;
    }

    .fi-wi-chart.fi-grid-col:not(.fi-hidden) .fi-section-content-ctn,
    .fi-wi-chart.fi-grid-col:not(.fi-hidden) .fi-section-content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        justify-content: center;
    }
}