/* Base Card Styles - Use variables selectively */
.immo-card {
    /* Glassmorphism Effect */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);

    position: relative;
    /* For side strips */
    border-radius: var(--immo-radius-lg);
    overflow: hidden;
    transition: all var(--immo-transition);
    font-family: var(--immo-font-family);
    color: var(--immo-text-primary);
    /* Ensure all text is readable black */
}

.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-text-primary);
}

.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-primary);
    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 */
/* Color Variants - Glass Side & Tint */
/* Common Side Strip */
.immo-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    z-index: 1;
    opacity: 0.75;
    /* Glass transparency for the strip */
    backdrop-filter: blur(4px);
}

.card-primary {
    border-left: none;
    background: linear-gradient(135deg, rgba(60, 145, 230, 0.1), rgba(60, 145, 230, 0.02));
}

.card-primary::after {
    background: var(--immo-primary);
}

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

.card-success {
    border-left: none;
    background: linear-gradient(135deg, rgba(33, 161, 121, 0.1), rgba(33, 161, 121, 0.02));
}

.card-success::after {
    background: var(--immo-success);
}

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

.card-danger {
    border-left: none;
    background: linear-gradient(135deg, rgba(254, 74, 73, 0.1), rgba(254, 74, 73, 0.02));
}

.card-danger::after {
    background: var(--immo-danger);
}

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

.card-info {
    border-left: none;
    background: linear-gradient(135deg, rgba(57, 162, 174, 0.1), rgba(57, 162, 174, 0.02));
}

.card-info::after {
    background: var(--immo-info);
}

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

.card-secondary {
    border-left: none;
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.1), rgba(107, 114, 128, 0.02));
}

.card-secondary::after {
    background: var(--immo-secondary);
}

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

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

.card-neutral::after {
    content: none;
}

/* No strip for neutral */
.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;
    }
}