.app-ui .card {
    --bs-card-border-color: var(--ac-border);
    --bs-card-border-radius: var(--ac-radius);
    --bs-card-inner-border-radius: calc(var(--ac-radius) - 1px);
    --bs-card-cap-bg: var(--ac-surface);
    --bs-card-cap-color: var(--ac-text);
    --bs-card-cap-padding-y: .75rem;
    --bs-card-cap-padding-x: 1.125rem;
}

/* Borderless cards get the border as a ring; cards with a real border
   only keep a faint shadow, otherwise they would show a double line. */
.app-ui .card.border-0.shadow-sm,
.app-ui .card.border-0.shadow {
    box-shadow: 0 0 0 1px var(--ac-border), 0 1px 2px rgba(16, 27, 43, .04) !important;
}
.app-ui .card.shadow-sm:not(.border-0),
.app-ui .card.shadow:not(.border-0) {
    box-shadow: 0 1px 2px rgba(16, 27, 43, .04) !important;
}

/* Content with its own background (grey body, table cells) would cover the
   rounded corners. Cards clip it, except those holding dropdowns or sticky
   elements, which clipping would cut off. */
.app-ui .card:not(:has(.dropdown, .dropup, .dropstart, .dropend, [data-bs-toggle="dropdown"], .sticky-top, .position-sticky)) {
    overflow: hidden;
}
.app-ui .card > :last-child:not(.card-header) {
    border-bottom-right-radius: var(--bs-card-inner-border-radius);
    border-bottom-left-radius: var(--bs-card-inner-border-radius);
}
.app-ui .card > .card-header:first-child {
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
}

.app-ui .card-header {
    border-bottom-color: var(--ac-border);
    font-size: var(--ac-fs-base);
    font-weight: 600;
}
.app-ui .card-header :where(h1, h2, h3, h4, h5, h6):where(:not([class*="display-"], .page-title)) {
    font-size: var(--ac-fs-md);
}

.app-ui .card-footer {
    --bs-card-cap-bg: var(--ac-surface-2);
}

.app-ui .offcanvas-header {
    background-color: var(--ac-shell);
    border-bottom: 0;
    color: #fff;
}
.app-ui .offcanvas-header .offcanvas-title,
.app-ui .offcanvas-header h1, .app-ui .offcanvas-header h2, .app-ui .offcanvas-header h3,
.app-ui .offcanvas-header h4, .app-ui .offcanvas-header h5, .app-ui .offcanvas-header h6 {
    color: #fff;
    font-size: var(--ac-fs-md);
    font-weight: 600;
}
.app-ui .offcanvas-header .btn-close {
    filter: var(--bs-btn-close-white-filter);
}

.app-ui .modal-header .modal-title {
    font-size: var(--ac-fs-md);
    font-weight: 600;
}

.app-ui .nav-tabs {
    --bs-nav-tabs-border-color: var(--ac-border);
    --bs-nav-tabs-link-hover-border-color: var(--ac-border) var(--ac-border) var(--ac-border);
    --bs-nav-tabs-link-active-color: var(--ac-text);
    --bs-nav-tabs-link-active-border-color: var(--ac-border) var(--ac-border) var(--ac-surface);
}
.app-ui .nav-link {
    font-weight: 500;
}

.app-ui .accordion-button {
    font-size: var(--ac-fs-base);
}

.app-ui .badge {
    --bs-badge-font-weight: 600;
}