/**
 * Card Component Styles
 * Compact, modern card layout with density variants
 */

/* Base Card */
.card {
    background: var(--ds-color-neutral-0);
    border: 1px solid var(--ds-color-border-primary, #e5e7eb);
    border-radius: 8px; /* Reduced from typical 12-18px for more angular look */
    box-shadow: var(--ds-shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: var(--ds-transition-base);
}

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

/* Card Header */
.card__header,
.card-header {
    padding: var(--card-padding, var(--ds-space-sm)) var(--ds-space-md);
    border-bottom: 1px solid var(--ds-color-border-primary, #e5e7eb);
    background-color: var(--ds-color-neutral-50);
    min-height: 2.5rem; /* Reduced from 3rem */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card__title,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    font-size: var(--ds-font-size-base);
    line-height: var(--ds-line-height-snug, 1.25);
    margin: 0;
    font-weight: var(--ds-font-weight-semibold);
    color: var(--ds-color-text-primary);
}

.card__actions {
    display: flex;
    gap: var(--ds-space-2xs);
    align-items: center;
}

/* Card Body */
.card__body,
.card-body {
    padding: var(--card-padding, var(--ds-space-sm)) var(--ds-space-md);
    flex: 1;
    color: var(--ds-color-text-primary);
}

.card__body > *:last-child,
.card-body > *:last-child {
    margin-bottom: 0;
}

/* Card Footer */
.card__footer,
.card-footer {
    padding: var(--card-gap, var(--ds-space-xs)) var(--ds-space-md);
    border-top: 1px solid var(--ds-color-border-primary, #e5e7eb);
    background-color: var(--ds-color-neutral-50);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ds-space-xs);
}

/* Card Density Variants */

/* Compact: Tighter spacing for data-dense UIs */
.card--compact .card__header,
.card--compact.card .card-header {
    padding: var(--ds-space-xs) var(--ds-space-sm);
    min-height: 2rem;
}

.card--compact .card__body,
.card--compact.card .card-body {
    padding: var(--ds-space-xs) var(--ds-space-sm);
}

.card--compact .card__footer,
.card--compact.card .card-footer {
    padding: var(--ds-space-2xs) var(--ds-space-sm);
}

/* Dense: Maximum density for dashboards */
.card--dense .card__header,
.card--dense.card .card-header {
    padding: var(--ds-space-2xs) var(--ds-space-xs);
    min-height: 1.75rem;
    font-size: var(--ds-font-size-sm);
}

.card--dense .card__body,
.card--dense.card .card-body {
    padding: var(--ds-space-2xs) var(--ds-space-xs);
    font-size: var(--ds-font-size-sm);
}

.card--dense .card__footer,
.card--dense.card .card-footer {
    padding: var(--ds-space-2xs) var(--ds-space-xs);
}

/* Comfortable: Standard spacing (default) */
.card--comfortable .card__header,
.card--comfortable.card .card-header {
    padding: var(--ds-space-md) var(--ds-space-lg);
    min-height: 3rem;
}

.card--comfortable .card__body,
.card--comfortable.card .card-body {
    padding: var(--ds-space-md) var(--ds-space-lg);
}

.card--comfortable .card__footer,
.card--comfortable.card .card-footer {
    padding: var(--ds-space-sm) var(--ds-space-lg);
}

/* Card without borders */
.card--borderless {
    border: none;
    box-shadow: none;
}

.card--borderless .card__header,
.card--borderless.card .card-header {
    border-bottom: none;
}

.card--borderless .card__footer,
.card--borderless.card .card-footer {
    border-top: none;
}

/* Card with no padding on body (for full-width content) */
.card__body--no-padding,
.card-body--no-padding {
    padding: 0;
}

/* Card hover effect */
.card--hoverable {
    cursor: pointer;
}

.card--hoverable:hover {
    border-color: var(--ds-color-primary-300);
    transform: translateY(-2px);
    box-shadow: var(--ds-shadow-lg);
}

/* Card states */
.card--selected {
    border-color: var(--ds-color-primary-500);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.card--disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
    .card {
        border-radius: 0; /* Full width on mobile */
    }

    .card__header,
    .card-header {
        padding: var(--ds-space-xs) var(--ds-space-sm);
    }

    .card__body,
    .card-body {
        padding: var(--ds-space-xs) var(--ds-space-sm);
    }

    .card__footer,
    .card-footer {
        padding: var(--ds-space-xs) var(--ds-space-sm);
    }
}