/* ============================================
   Andres Automotive - Card Components
   Global reusable card styles
   Fixed colors - no theme switching
   All values use CSS variables from aa-variables.css
   ============================================ */

/* ========================================
   Base Card Styles
   ======================================== */

.aa-card {
    background-color: var(--aa-bg-light);
    border: var(--aa-border-width) solid var(--aa-border-color);
    border-radius: var(--aa-card-border-radius);
    overflow: hidden;
    box-shadow: var(--aa-card-shadow);
    transition: var(--aa-transition-all);
}

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

/* ========================================
   Card Header Variants
   ======================================== */

.aa-card-header {
    padding: var(--aa-spacing-4);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--aa-spacing-2);
}

.aa-card-header i {
    font-size: var(--aa-font-size-xl);
}

.aa-card-header h5 {
    margin: 0;
    font-weight: var(--aa-font-weight-semibold);
}

/* Primary Header (Red) */
.aa-card-header-primary {
    background-color: var(--aa-primary);
    color: var(--aa-white);
}

.aa-card-header-primary i,
.aa-card-header-primary h5 {
    color: var(--aa-white);
}

/* Secondary Header (Gray) */
.aa-card-header-secondary {
    background-color: var(--aa-gray-600);
    color: var(--aa-white);
}

.aa-card-header-secondary i,
.aa-card-header-secondary h5 {
    color: var(--aa-white);
}

/* Dark Header (Dark Green) */
.aa-card-header-dark {
    background-color: var(--aa-gray-800);
    color: var(--aa-white);
}

.aa-card-header-dark i,
.aa-card-header-dark h5 {
    color: var(--aa-white);
}

/* Success Header (Green) */
.aa-card-header-success {
    background-color: var(--aa-success);
    color: var(--aa-white);
}

.aa-card-header-success i,
.aa-card-header-success h5 {
    color: var(--aa-white);
}

/* Light Header */
.aa-card-header-light {
    background-color: var(--aa-gray-100);
    color: var(--aa-text-primary);
    border-bottom: var(--aa-border-width) solid var(--aa-border-color);
}

.aa-card-header-light i,
.aa-card-header-light h5 {
    color: var(--aa-text-primary);
}

/* ========================================
   Card Body
   ======================================== */

.aa-card-body {
    padding: var(--aa-spacing-6);
    background-color: var(--aa-bg-light);
}

.aa-card-body-center {
    padding: var(--aa-spacing-6);
    text-align: center;
    background-color: var(--aa-bg-light);
}

.aa-card-body p {
    color: var(--aa-text-secondary);
    margin-bottom: var(--aa-spacing-4);
}

.aa-card-body p:last-child {
    margin-bottom: 0;
}

/* ========================================
   Card Footer
   ======================================== */

.aa-card-footer {
    padding: var(--aa-spacing-4);
    background-color: var(--aa-bg-body);
    border-top: var(--aa-border-width) solid var(--aa-border-color);
}

/* ========================================
   Specialized Card Types
   ======================================== */

/* Admin Card */
.admin-card {
    background-color: var(--aa-bg-light);
    border: var(--aa-border-width) solid var(--aa-border-color);
    border-radius: var(--aa-card-border-radius);
    overflow: hidden;
    box-shadow: var(--aa-card-shadow);
    transition: var(--aa-transition-all);
}

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

.admin-card-header {
    background-color: var(--aa-primary);
    color: var(--aa-white);
    padding: var(--aa-spacing-4);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--aa-spacing-2);
}

.admin-card-header i {
    font-size: var(--aa-font-size-xl);
    color: var(--aa-white);
}

.admin-card-header h5 {
    margin: 0;
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-white);
}

.admin-card-body {
    padding: var(--aa-spacing-6);
    text-align: center;
    background-color: var(--aa-bg-light);
}

.admin-card-body p {
    color: var(--aa-text-secondary);
    margin-bottom: var(--aa-spacing-4);
}

/* Login Card */
.login-card {
    background-color: var(--aa-bg-light);
    border: var(--aa-border-width) solid var(--aa-border-color);
    border-radius: var(--aa-card-border-radius);
    overflow: hidden;
    box-shadow: var(--aa-card-shadow);
    transition: var(--aa-transition-all);
}

.login-card:hover {
    box-shadow: var(--aa-card-shadow-hover);
}

.login-card-header {
    background-color: var(--aa-gray-800);
    color: var(--aa-white);
    padding: var(--aa-spacing-4);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--aa-spacing-2);
}

.login-card-header i {
    font-size: var(--aa-font-size-xl);
    color: var(--aa-white);
}

.login-card-header h5 {
    margin: 0;
    font-weight: var(--aa-font-weight-semibold);
    color: var(--aa-white);
}

.login-card-body {
    padding: var(--aa-spacing-6);
    text-align: center;
    background-color: var(--aa-bg-light);
}

.login-card-body p {
    color: var(--aa-text-secondary);
    margin-bottom: var(--aa-spacing-4);
}

/* ========================================
   Card Variations
   ======================================== */

/* Card with border accent */
.aa-card-accent-left {
    border-left: var(--aa-spacing-1) solid var(--aa-primary);
}

.aa-card-accent-left-success {
    border-left: var(--aa-spacing-1) solid var(--aa-success);
}

.aa-card-accent-left-danger {
    border-left: var(--aa-spacing-1) solid var(--aa-danger);
}

/* Flat card (no shadow) */
.aa-card-flat {
    box-shadow: none;
}

.aa-card-flat:hover {
    box-shadow: var(--aa-shadow-sm);
}

/* Elevated card (more shadow) */
.aa-card-elevated {
    box-shadow: var(--aa-shadow-lg);
}

.aa-card-elevated:hover {
    box-shadow: var(--aa-shadow-xl);
}

/* Compact card (less padding) */
.aa-card-compact .aa-card-body {
    padding: var(--aa-spacing-4);
}

/* ========================================
   Interactive Cards
   ======================================== */

.aa-card-clickable {
    cursor: pointer;
    transition: var(--aa-transition-all);
}

.aa-card-clickable:hover {
    box-shadow: var(--aa-shadow-lg);
}

.aa-card-clickable:active {
    transform: translateY(0);
}

/* ========================================
   Card Grid/Layout
   ======================================== */

.aa-card-grid {
    display: grid;
    gap: var(--aa-spacing-6);
    grid-template-columns: repeat(auto-fill, minmax(var(--aa-container-sm), 1fr));
}

.aa-card-grid-2 {
    display: grid;
    gap: var(--aa-spacing-6);
    grid-template-columns: repeat(2, 1fr);
}

.aa-card-grid-3 {
    display: grid;
    gap: var(--aa-spacing-6);
    grid-template-columns: repeat(3, 1fr);
}

/* Responsive card grids */
@media (max-width: 991.98px) {
    .aa-card-grid-2,
    .aa-card-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .aa-card-grid,
    .aa-card-grid-2,
    .aa-card-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Card Icon Containers
   ======================================== */

.aa-card-icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--aa-spacing-12);
    height: var(--aa-spacing-12);
    border-radius: var(--aa-border-radius-lg);
    margin-bottom: var(--aa-spacing-3);
}

.aa-card-icon-container-primary {
    background-color: var(--aa-primary);
    color: var(--aa-white);
}

.aa-card-icon-container-secondary {
    background-color: var(--aa-gray-200);
    color: var(--aa-text-primary);
}

.aa-card-icon-container-success {
    background-color: var(--aa-success);
    color: var(--aa-white);
}