@layer components {
    .app-card {
            background: var(--dashboard-color-surface);
            border: 1px solid var(--dashboard-color-border);
            border-radius: 0;
            box-shadow: none;
            overflow: hidden;
        }

    .app-card__body,
        .app-card__footer {
            padding: var(--dashboard-section-padding-y) var(--dashboard-section-padding-x);
        }

    .app-card__header,
        .app-card__footer {
            border-color: var(--dashboard-color-border);
        }

    .app-card__header {
            border-bottom: 1px solid var(--dashboard-color-border);
            padding: var(--dashboard-section-header-padding-y) var(--dashboard-section-padding-x);
        }

    .app-card__footer {
            border-top: 1px solid var(--dashboard-color-border);
        }

    .app-card__title,
        .app-page__title {
            color: var(--dashboard-color-text);
            font-weight: 700;
            letter-spacing: 0;
            line-height: 1.2;
        }

    .app-card__title {
            font-size: 1.125rem;
        }

    .app-card .dashboard-table th,
        .app-card .dashboard-table td {
            border-bottom: 1px solid var(--dashboard-color-border);
            padding: 0.875rem var(--dashboard-section-padding-x);
        }

    .app-card .dashboard-table tbody tr:last-child td {
            border-bottom: 0;
        }

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

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

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