/* Shared card system: aliases real card classes — .card (admin + both themes, Bootstrap-style), SmmDadPrime's component-card/app-card, admin's admin-card. Additive only. */ .card, .component-card, .app-card, .admin-card { padding: var(--space-5); border-radius: var(--ds-radius-md); background: var(--table-body-bg); border: 1px solid var(--table-border-color); box-shadow: var(--ds-shadow-sm); } .card + .card, .component-card + .component-card, .app-card + .app-card, .admin-card + .admin-card { margin-top: var(--space-4); } /* This file loads after app.css/saas-refresh.css (admin/views/layout.php order) with equal selector specificity, so its unconditional padding above was silently winning at every viewport and nullifying app.css's intended @media(max-width:767.98px){.admin-card{padding:14px}} mobile tightening. Restore it here where it actually takes effect. */ @media (max-width: 767.98px) { .card, .component-card, .app-card, .admin-card { padding: 14px; } } .card-header, .component-card-header { padding-bottom: var(--space-3); margin-bottom: var(--space-3); border-bottom: 1px solid var(--table-border-color); font-weight: var(--font-weight-semibold); } .card-body, .component-card-body { padding: 0; } .card-footer, .component-card-footer { padding-top: var(--space-3); margin-top: var(--space-3); border-top: 1px solid var(--table-border-color); } .card-actions, .component-card-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); } /* Utility for cards needing extra breathing room beyond the default .card padding (e.g. rich-text content blocks) — pairs with the existing .mb- / .mt- spacing utilities for margin. */ .card--padded-lg { padding: var(--space-5) var(--space-6); }