.card.card-shadow {
    box-shadow: 0 4px 10px 0 #0000001F;
    border: none;
    padding: 0.5rem;
}

.card.card-shadow .card-header {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.5rem;
}

.card.card-shadow .card-header,
.card.card-shadow .card-footer {
    background: var(--bs-body-bg);
}

/* The vendored Bootstrap (lib/bootstrap/css/custom.css) wires .text-secondary to
   the brand --bs-secondary-rgb. In themes that intentionally use a dark gray as
   --bs-secondary (so white-on-bg-secondary badges meet AAA), that makes
   .text-secondary unreadable on dark backgrounds. Re-wire to the body-secondary
   text variable, matching upstream Bootstrap 5.3 convention. */
.text-secondary {
    color: var(--bs-secondary-color) !important;
}

/* Bootstrap's .badge picks white/black via color-contrast(), which fails for
   themes whose semantic backgrounds sit in the middle luminance range. Wire
   each badge color to a theme-controlled variable (emitted by ThemeCssGenerator)
   so admins can choose explicitly. !important is needed to win over the
   utility rule in lib/bootstrap/css/custom.css. */
.badge.bg-primary { color: var(--bs-primary-badge-color) !important; }
.badge.bg-secondary { color: var(--bs-secondary-badge-color) !important; }
.badge.bg-success { color: var(--bs-success-badge-color) !important; }
.badge.bg-danger { color: var(--bs-danger-badge-color) !important; }
.badge.bg-warning { color: var(--bs-warning-badge-color) !important; }
.badge.bg-info { color: var(--bs-info-badge-color) !important; }