/**
 * Professional Icon Classes for Insights & Analytics
 * Replace Unicode emojis with Font Awesome icons
 * 
 * Usage: Add Font Awesome CDN to your layout, then use the icon classes
 * in blade templates like: <i class="fas fa-{{ $insight['icon'] }}"></i>
 */

/* Icon mapping for insight types */
.icon-check-circle::before {
    content: "\f050"; /* Font Awesome check-circle */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #10b981; /* Success green */
}

.icon-alert-triangle::before {
    content: "\f071"; /* Font Awesome exclamation-triangle */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #f59e0b; /* Warning amber */
}

.icon-lightbulb::before {
    content: "\f0eb"; /* Font Awesome lightbulb */
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    color: #3b82f6; /* Info blue */
}

.icon-stopwatch::before {
    content: "\f2f2"; /* Font Awesome stopwatch */
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    color: #8b5cf6; /* Purple */
}

.icon-document-lines::before {
    content: "\f302"; /* Font Awesome document-lines (file-alt) */
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    color: #6366f1; /* Indigo */
}

.icon-chart-bar::before {
    content: "\f080"; /* Font Awesome chart-bar */
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    color: #8b5cf6; /* Purple */
}

.icon-users::before {
    content: "\f0c0"; /* Font Awesome users */
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    color: #0891b2; /* Cyan */
}

.icon-circle-question::before {
    content: "\f059"; /* Font Awesome circle-question */
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    color: #3b82f6; /* Blue */
}

.icon-clipboard::before {
    content: "\f328"; /* Font Awesome clipboard */
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    color: #6366f1; /* Indigo */
}

/* Alternative: Use these with i tags directly */
.insight-icon {
    margin-right: 8px;
    font-size: 18px;
}

.insight-icon.success {
    color: #10b981;
}

.insight-icon.warning {
    color: #f59e0b;
}

.insight-icon.info {
    color: #3b82f6;
}

.insight-icon.time {
    color: #8b5cf6;
}

/* Strength indicator style */
.strength-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #ecfdf5;
    color: #059669;
    font-size: 14px;
}

.strength-indicator i {
    font-size: 16px;
}

/* Weakness/Alert indicator style */
.alert-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #fffbeb;
    color: #b45309;
    font-size: 14px;
}

.alert-indicator i {
    font-size: 16px;
}

/* Insight badge styling */
.insight-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
}

.insight-badge.strength {
    background-color: #dbeafe;
    color: #1e40af;
}

.insight-badge.weakness {
    background-color: #fed7aa;
    color: #92400e;
}

.insight-badge.time {
    background-color: #e9d5ff;
    color: #581c87;
}

.insight-badge i {
    font-size: 16px;
}