/* 
 * ChatMinder Utility Classes
 * Reusable classes for common UI patterns
 */

/* Circle Badge Numbers (used for step indicators, counts, etc.) */
.circle-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    transition: all var(--transition-base);
}

.circle-badge-sm {
    width: var(--circle-badge-sm);
    height: var(--circle-badge-sm);
    font-size: var(--font-size-lg);
}

.circle-badge-md {
    width: var(--circle-badge-md);
    height: var(--circle-badge-md);
    font-size: var(--font-size-2xl);
}

.circle-badge-lg {
    width: var(--circle-badge-lg);
    height: var(--circle-badge-lg);
    font-size: var(--font-size-3xl);
}

/* Icon Sizes */
.icon-sm {
    font-size: var(--icon-size-sm);
}

.icon-md {
    font-size: var(--icon-size-md);
}

.icon-lg {
    font-size: var(--icon-size-lg);
}

.icon-xl {
    font-size: var(--icon-size-xl);
}

/* Text Colors using variables */
.text-primary-color {
    color: var(--color-primary) !important;
}

.text-secondary-color {
    color: var(--color-text-secondary) !important;
}

.text-muted-color {
    color: var(--color-text-muted) !important;
}

/* Background Colors using variables */
.bg-primary-color {
    background-color: var(--color-primary) !important;
}

.bg-info-light {
    background-color: var(--color-background-info) !important;
}

.bg-gray-light {
    background-color: var(--color-background-gray) !important;
}

/* Gradient Backgrounds */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--color-secondary-gradient-start) 0%, var(--color-secondary-gradient-end) 100%);
}

/* Card Enhancements */
.card-hover {
    transition: all var(--transition-base);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* User Avatar Styles */
.user-avatar {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    background-color: var(--color-avatar-blue);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 600;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 10px var(--color-avatar-shadow);
    text-transform: uppercase;
    overflow: hidden;
    flex-shrink: 0;
}

/* Button with gradient background */
.btn-gradient {
    background: linear-gradient(135deg, var(--color-secondary-gradient-start) 0%, var(--color-secondary-gradient-end) 100%);
    color: var(--color-white);
    border: none;
    transition: all var(--transition-base);
}

.btn-gradient:hover {
    background: linear-gradient(135deg, var(--color-secondary-dark) 0%, var(--color-secondary-gradient-end) 100%);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
}