/* Utilities - Reusable utility classes */

/* Border utilities */
.border-left-primary {
    border-left: 4px solid var(--primary-color) !important;
}

.border-left-secondary {
    border-left: 4px solid var(--secondary-color) !important;
}

.border-left-success {
    border-left: 4px solid var(--success-color) !important;
}

.border-left-warning {
    border-left: 4px solid var(--warning-color) !important;
}

.border-left-danger {
    border-left: 4px solid var(--danger-color) !important;
}

.border-left-info {
    border-left: 4px solid var(--info-color) !important;
}

/* Icon background utility classes */
.icon-bg-primary {
    background: linear-gradient(135deg, rgba(145, 152, 204, 0.1) 0%, rgba(145, 152, 204, 0.2) 100%);
    color: var(--primary-color);
}

.icon-bg-secondary {
    background: linear-gradient(135deg, rgba(207, 156, 132, 0.1) 0%, rgba(207, 156, 132, 0.2) 100%);
    color: var(--secondary-color);
}

.icon-bg-success {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(78, 205, 196, 0.2) 100%);
    color: var(--success-color);
}

.icon-bg-warning {
    background: linear-gradient(135deg, rgba(255, 191, 59, 0.1) 0%, rgba(255, 191, 59, 0.2) 100%);
    color: var(--warning-color);
}

.icon-bg-danger {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, rgba(255, 107, 107, 0.2) 100%);
    color: var(--danger-color);
}

.icon-bg-info {
    background: linear-gradient(135deg, rgba(145, 152, 204, 0.1) 0%, rgba(145, 152, 204, 0.2) 100%);
    color: var(--info-color);
}

/* Text color utilities that work with hover states */
.text-primary-custom {
    color: var(--primary-color);
}

.text-success-custom {
    color: var(--success-color);
}

.text-warning-custom {
    color: var(--warning-color);
}

.text-danger-custom {
    color: var(--danger-color);
}

/* Card styling with colored borders */
.card-primary {
    border-left: 4px solid var(--primary-color) !important;
}

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

.card-accent {
    border-left: 4px solid var(--accent-color) !important;
}

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

.card-warning {
    border-left: 4px solid var(--warning-color) !important;
}

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

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

/* Card animation utilities */
.card-animated {
    transition: all 0.3s ease;
}

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

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}