/* Base Card Styles - Use variables selectively */
.immo-card {
    background: var(--immo-card);
    border-radius: var(--immo-radius-lg);
    box-shadow: var(--immo-shadow);
    overflow: hidden;
    transition: all var(--immo-transition);
    border: 1px solid var(--immo-border-light);
    font-family: var(--immo-font-family);
}

.immo-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    /* Component-specific enhanced shadow */
}

/* Clickable Cards */
.card-clickable {
    cursor: pointer;
}

.card-clickable:hover {
    transform: translateY(-2px);
    /* Component-specific animation */
}

/* Card Header - More specific to override Bootstrap */
.immo-card .card-header {
    padding: 1rem 1.25rem 0.5rem !important;
    /* Component-specific spacing */
    background-color: transparent !important;
    border-bottom: none !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.card-title {
    margin: 0;
    font-size: 1rem;
    /* Component-specific size */
    font-weight: var(--immo-font-weight-semibold);
    color: var(--immo-heading);
}

.card-icon {
    font-size: 1.25rem;
    /* Component-specific size */
    color: var(--immo-text-secondary);
}

/* Card Body - More specific to override Bootstrap */
.immo-card .card-body {
    padding: 0.5rem 1.25rem 1rem !important;
    /* Component-specific spacing */
}

.card-value {
    font-size: 2rem;
    /* Component-specific size */
    font-weight: var(--immo-font-weight-bold);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.card-subtitle {
    font-size: 0.875rem;
    /* Component-specific size */
    color: var(--immo-text-secondary);
    margin-bottom: 0.5rem;
}

.card-content {
    font-size: 0.875rem;
    /* Component-specific size */
    line-height: 1.5;
    color: var(--immo-text-primary);
}

/* Card Footer */
.card-footer {
    padding: 0.75rem 1.25rem;
    /* Component-specific spacing */
    background-color: var(--immo-bg-gray-light);
    border-top: 1px solid var(--immo-border-light);
}

/* Size Variants - Keep component-specific measurements */
.card-sm {
    min-width: 200px;
}

.immo-card.card-sm .card-header {
    padding: 0.75rem 1rem 0.25rem !important;
}

.immo-card.card-sm .card-body {
    padding: 0.25rem 1rem 0.75rem !important;
}

.card-sm .card-value {
    font-size: 1.5rem;
}

.card-sm .card-title {
    font-size: 0.875rem;
}

.card-md {
    min-width: 250px;
}

.card-lg {
    min-width: 300px;
}

.immo-card.card-lg .card-header {
    padding: 1.25rem 1.5rem 0.75rem !important;
}

.immo-card.card-lg .card-body {
    padding: 0.75rem 1.5rem 1.25rem !important;
}

.card-lg .card-value {
    font-size: 2.5rem;
}

.card-lg .card-title {
    font-size: 1.125rem;
}

/* Color Variants - Use centralized colors */
.card-primary {
    border-left: 4px solid var(--immo-primary);
}

.card-primary .card-value {
    color: var(--immo-primary);
}

.card-primary .card-icon {
    color: var(--immo-primary);
}

.card-success {
    border-left: 4px solid var(--immo-success);
}

.card-success .card-value {
    color: var(--immo-success);
}

.card-success .card-icon {
    color: var(--immo-success);
}

.card-danger {
    border-left: 4px solid var(--immo-danger);
}

.card-danger .card-value {
    color: var(--immo-danger);
}

.card-danger .card-icon {
    color: var(--immo-danger);
}

.card-info {
    border-left: 4px solid var(--immo-info);
}

.card-info .card-value {
    color: var(--immo-info);
}

.card-info .card-icon {
    color: var(--immo-info);
}

.card-secondary {
    border-left: 4px solid var(--immo-secondary);
}

.card-secondary .card-value {
    color: var(--immo-secondary);
}

.card-secondary .card-icon {
    color: var(--immo-secondary);
}

.card-neutral {
    border-left: none;
}

.card-neutral .card-value {
    color: var(--immo-text-primary);
}

.card-neutral .card-icon {
    color: var(--immo-text-secondary);
}

.card-neutral .card-title {
    color: var(--immo-heading);
}

/* Responsive Design */
@media (max-width: 768px) {
    .immo-card {
        min-width: auto;
        width: 100%;
    }

    /* Compact metric cards - inline layout */
    .immo-card .card-header {
        padding: var(--immo-space-sm) var(--immo-space-md);
        margin-bottom: 0;
    }
    
    /* Inline layout for metric cards (cards with value + subtitle) */
    .immo-card .card-body {
        padding: var(--immo-space-xs) var(--immo-space-md) var(--immo-space-sm);
    }
    
    /* When card has both value and subtitle, display inline */
    .immo-card .card-value + .card-subtitle {
        display: inline;
        margin-left: var(--immo-space-sm);
    }
    
    .immo-card .card-value {
        font-size: 1.5rem;
        margin-bottom: 0;
        line-height: 1.2;
        display: inline;
    }
    
    .immo-card .card-subtitle {
        font-size: 0.875rem;
        margin-bottom: 0;
        line-height: 1.2;
    }
    
    /* Regular cards */
    .card-value {
        font-size: 1.75rem;
    }

    .card-lg .card-value {
        font-size: 2rem;
    }
    
    /* Better mobile card padding */
    .card-header {
        padding: var(--immo-space-md) var(--immo-space-lg) var(--immo-space-xs);
    }
    
    .card-body {
        padding: var(--immo-space-xs) var(--immo-space-lg) var(--immo-space-md);
    }
    
    /* Optimize card icon size for mobile */
    .card-icon {
        font-size: 1.25rem;
    }
    
    /* Better mobile card title */
    .card-title {
        font-size: 0.875rem;
        line-height: 1.2;
    }
    
    /* Improve card subtitle readability */
    .card-subtitle {
        font-size: 0.8125rem;
        line-height: 1.3;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .immo-card .card-value {
        font-size: 1.375rem;
    }
    
    .immo-card .card-subtitle {
        font-size: 0.8125rem;
    }
    
    .immo-card .card-header {
        padding: 6px var(--immo-space-sm);
    }
    
    .immo-card .card-body {
        padding: 4px var(--immo-space-sm) 6px;
    }
    
    .card-icon {
        font-size: 1.125rem;
    }
    
    .card-title {
        font-size: 0.8125rem;
    }
}