@layer components {
    .portfolio-dashboard {
            background: var(--dashboard-color-surface);
            color: var(--dashboard-color-text);
            margin: 0;
            max-width: 100%;
            min-width: 0;
            overflow-x: clip;
            width: 100%;
        }

    .portfolio-dashboard__section + .portfolio-dashboard__section {
            border-top: 1px solid var(--dashboard-color-border);
        }

    .portfolio-dashboard__section#tax {
            border-top: 0;
        }

    .portfolio-dashboard__section--padded {
            padding: var(--dashboard-section-padding-y) var(--dashboard-section-padding-x);
        }

    .portfolio-dashboard__toolbar {
            align-items: flex-start;
            display: flex;
            flex-direction: column;
            gap: 0;
            justify-content: space-between;
        }

    .portfolio-dashboard__nav-row {
            align-items: stretch;
            display: flex;
            flex-direction: column;
            gap: 0.875rem;
            justify-content: space-between;
            min-width: 0;
            padding-bottom: 0.875rem;
            width: 100%;
        }

    .portfolio-dashboard__toolbar:not(:has(.portfolio-dashboard__period-row)) .portfolio-dashboard__nav-row {
            padding-bottom: 0;
        }

    .portfolio-dashboard__nav-row .breadcrumb-nav {
            flex: 1 1 auto;
            min-width: 0;
        }

    .portfolio-dashboard__nav-controls {
            align-items: center;
            display: flex;
            flex: 1 1 auto;
            gap: 0.5rem;
            min-width: 0;
            overflow: hidden;
        }

    .portfolio-dashboard__actions {
            display: flex;
            flex: 0 0 auto;
            flex-wrap: nowrap;
            gap: 0.5rem;
            justify-content: flex-end;
        }

    .portfolio-dashboard__period-row {
            align-items: center;
            align-self: stretch;
            border-top: 1px solid var(--dashboard-color-border);
            display: flex;
            flex-direction: row;
            gap: 0.5rem;
            justify-content: space-between;
            margin-left: calc(var(--dashboard-section-padding-x) * -1);
            margin-right: calc(var(--dashboard-section-padding-x) * -1);
            min-width: 0;
            padding: 0.875rem var(--dashboard-section-padding-x) 0 var(--dashboard-pill-rail-padding-x);
        }

    .portfolio-dashboard__period-selector {
            flex: 1 1 auto;
            min-width: 0;
            width: auto;
        }

    .portfolio-dashboard__period-selector > div {
            justify-content: flex-start;
        }

    .portfolio-dashboard__period-selector .segmented-control {
            margin-left: 0;
            margin-right: 0;
        }

    .portfolio-dashboard .dashboard-panel,
        .portfolio-dashboard .dashboard-panel-spacious {
            border: 0;
        }

    .portfolio-dashboard .dashboard-table th,
        .portfolio-dashboard .dashboard-table td {
            border-bottom-width: 0;
            border-left-width: 0;
            border-right-width: 0;
            border-top-width: 0;
            padding-left: var(--dashboard-section-padding-x);
            padding-right: var(--dashboard-section-padding-x);
        }

    .portfolio-dashboard .dashboard-table tbody > :not([hidden]) ~ :not([hidden]) {
            border-bottom-width: 0;
            border-top-width: 0;
        }

    .portfolio-dashboard .dashboard-table th {
            padding-bottom: 0.875rem;
            padding-top: 0.875rem;
        }

    .portfolio-dashboard .dashboard-table td {
            padding-bottom: 0.75rem;
            padding-top: 0.75rem;
        }

    .portfolio-dashboard .dashboard-table__head-cell,
        .portfolio-dashboard .dashboard-table__cell {
            padding-left: var(--dashboard-section-padding-x);
            padding-right: var(--dashboard-section-padding-x);
        }

    .portfolio-dashboard .dashboard-table--holdings th,
        .portfolio-dashboard .dashboard-table--holdings td {
            padding-left: var(--dashboard-section-padding-x);
            padding-right: var(--dashboard-section-padding-x);
        }

    @media (min-width: 48rem) {
        .portfolio-dashboard__toolbar {
                    align-items: stretch;
                    flex-direction: column;
                }
    }

    @media (min-width: 48rem) {
        .portfolio-dashboard__nav-controls {
                    flex: 1 1 auto;
                    justify-content: flex-start;
                }
    }

    @media (min-width: 48rem) {
        .portfolio-dashboard__period-row {
                    margin-left: calc(var(--dashboard-section-padding-x-lg) * -1);
                    margin-right: calc(var(--dashboard-section-padding-x-lg) * -1);
                    padding-left: var(--dashboard-pill-rail-padding-x-lg);
                    padding-right: var(--dashboard-section-padding-x-lg);
                }
    }

    @media (min-width: 48rem) {
        .portfolio-dashboard .dashboard-table th,
                .portfolio-dashboard .dashboard-table td {
                    padding-left: var(--dashboard-section-padding-x-lg);
                    padding-right: var(--dashboard-section-padding-x-lg);
                }

        .portfolio-dashboard .dashboard-table--holdings th:first-child,
                .portfolio-dashboard .dashboard-table--holdings td:first-child {
                    padding-left: var(--dashboard-section-padding-x-lg);
                }

        .portfolio-dashboard .dashboard-table--holdings th:last-child,
                .portfolio-dashboard .dashboard-table--holdings td:last-child {
                    padding-right: var(--dashboard-section-padding-x-lg);
                }
    }

    @media (min-width: 64rem) {
        .portfolio-dashboard__nav-row {
                    align-items: center;
                    gap: 1.5rem;
                    flex-direction: row;
                }
    }

    @media (min-width: 64rem) {
        .portfolio-dashboard__nav-row .breadcrumb-nav {
                    flex: 0 1 auto;
                    max-width: 34%;
                }
    }

    @media (min-width: 64rem) {
        .portfolio-dashboard__nav-controls {
                    justify-content: flex-end;
                }
    }
}