@layer components {
    .dashboard-section {
            padding: var(--dashboard-section-padding-y) var(--dashboard-section-padding-x);
        }

    .dashboard-section--compact {
            padding-bottom: 0.875rem;
            padding-top: 0.875rem;
        }

    .dashboard-section--spacious {
            padding: 0;
        }

    .dashboard-section--flush {
            padding: 0;
        }

    .dashboard-section--sticky-nav {
            background: var(--dashboard-color-surface);
            border-bottom: 1px solid var(--dashboard-color-border);
            position: sticky;
            top: 0;
            z-index: 30;
        }

    .dashboard-section--sticky-nav + .portfolio-dashboard__section {
            border-top: 0;
        }

    .portfolio-dashboard__section:has(.dashboard-section-header) + .portfolio-dashboard__section {
            border-top: 0;
        }

    .dashboard-section-header {
            align-items: center;
            border-bottom: 1px solid var(--dashboard-color-border);
            display: flex;
            gap: 1rem;
            justify-content: space-between;
            padding: var(--dashboard-section-header-padding-y) var(--dashboard-section-padding-x);
        }

    .dashboard-section-header > .dashboard-panel-title {
            flex: 1 1 auto;
            min-width: 0;
        }

    .dashboard-section-header__actions {
            align-items: center;
            display: flex;
            flex-shrink: 0;
            flex-wrap: nowrap;
            gap: 0.5rem;
            justify-content: flex-end;
            width: auto;
        }

    .dashboard-section-footer {
            align-items: center;
            background: var(--dashboard-color-surface);
            border-top: 1px solid var(--dashboard-color-border);
            display: flex;
            gap: 1rem;
            justify-content: space-between;
            padding: 0.875rem var(--dashboard-section-padding-x);
        }

    .dashboard-section-footer__meta {
            color: var(--dashboard-color-text-muted);
            font-size: 0.875rem;
            line-height: 1.5;
        }

    .dashboard-section-footer__meta--optional {
            display: none;
        }

    @media (min-width: 48rem) {
        .dashboard-section-footer__meta--optional {
                    display: block;
                }
    }

    .dashboard-section-footer__actions {
            align-items: center;
            display: flex;
            flex: 1 1 auto;
            justify-content: flex-end;
        }

    .dashboard-section-tabs {
            border-bottom: 1px solid var(--dashboard-color-border);
            overflow-x: auto;
            padding: 0.875rem var(--dashboard-section-padding-x) 0.875rem var(--dashboard-pill-rail-padding-x);
            scrollbar-width: none;
        }

    .dashboard-section-tabs::-webkit-scrollbar {
            display: none;
        }

    @media (min-width: 48rem) {
        .dashboard-section {
                    padding: var(--dashboard-section-padding-y-lg) var(--dashboard-section-padding-x-lg);
                }
    }

    @media (min-width: 48rem) {
        .dashboard-section--compact {
                    padding-bottom: 1rem;
                    padding-top: 1rem;
                }
    }

    @media (min-width: 48rem) {
        .dashboard-section--spacious,
                .dashboard-section--flush {
                    padding: 0;
                }
    }

    @media (min-width: 48rem) {
        .dashboard-section-header {
                    padding: var(--dashboard-section-header-padding-y-lg) var(--dashboard-section-padding-x-lg);
                }
    }

    @media (min-width: 48rem) {
        .dashboard-section-footer {
                    padding-left: var(--dashboard-section-padding-x-lg);
                    padding-right: var(--dashboard-section-padding-x-lg);
                }
    }

    @media (min-width: 48rem) {
        .dashboard-section-tabs {
                    padding-left: var(--dashboard-pill-rail-padding-x-lg);
                    padding-right: var(--dashboard-section-padding-x-lg);
                }
    }
}