/* ------------------------------------------------------
   Card Grid
-------------------------------------------------------*/
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
}

.model-card {
    width: 100%;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 16px;
    border: 1px solid var(--color-border);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: flex; /* Use flexbox for internal layout */
    flex-direction: column; /* Stack header, body, footer vertically */
    justify-content: space-between; /* Distribute space */
}
    /* Blue Accent Strip */
    .model-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--color-primary); /* was missing - strip had no color */
    }
    /* Hover Elevation */
    .model-card:hover {
        transform: translateY(-4px);
        border-color: var(--color-primary-light);
        box-shadow: var(--shadow-md);
    }
    /* Make the card body scrollable if content overflows */
    .model-card .card-body {
        flex-grow: 1; /* Allow body to take available space */
        overflow-y: auto; /* Enable vertical scrollbar */
        padding-right: 8px; /* Add some padding for the scrollbar */
        margin-top: 10px;
    }
/* Header */
.card-header h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.card-header .sub {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-top: 4px;
}

.card-body .value {
    display: block;
}
/* Footer Actions */
.card-footer {
    display: flex;
    justify-content: space-between;
}
/* Ensure footer stays at the bottom */
.model-card .card-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}
    /* Base button style override to normalize sizes */
    /* Base footer button style */
    .model-card .card-footer button {
        width: 100%;
        padding: 10px 0;
        font-size: 0.85rem;
        border-radius: var(--radius-sm);
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 1px solid transparent;
        color: var(--color-surface);
    }