/**
 * Card Component
 *
 * Reusable card containers for dashboard widgets and content blocks.
 */

@layer admin-components {
    .admin-card {
        background-color: var(--admin-content-bg);
        border: 1px solid var(--admin-border-light);
        border-radius: var(--admin-radius-lg);
        box-shadow: var(--admin-shadow-sm);
        overflow: hidden;
        transition: box-shadow var(--admin-transition-base);
    }

    .admin-card:hover {
        box-shadow: var(--admin-shadow-md);
    }

    .admin-card__header {
        padding: var(--admin-spacing-lg);
        border-bottom: 1px solid var(--admin-border-light);
        background-color: var(--admin-bg-secondary);
    }

    .admin-card__title {
        font-size: var(--admin-font-size-lg);
        font-weight: var(--admin-font-weight-semibold);
        color: var(--admin-content-text);
        margin: 0;
    }

    .admin-card__content {
        padding: var(--admin-spacing-lg);
    }

    .admin-card__footer {
        padding: var(--admin-spacing-md) var(--admin-spacing-lg);
        border-top: 1px solid var(--admin-border-light);
        background-color: var(--admin-bg-secondary);
    }

    /* Card variants */
    .admin-card--highlighted {
        border-color: var(--admin-accent-primary);
        box-shadow: 0 0 0 1px var(--admin-accent-primary), var(--admin-shadow-sm);
    }

    .admin-card--success {
        border-color: var(--admin-accent-success);
    }

    .admin-card--warning {
        border-color: var(--admin-accent-warning);
    }

    .admin-card--error {
        border-color: var(--admin-accent-error);
    }
}