/* Icon Fix CSS - Ensures icons are always visible */
/* Add this to fix icon loading issues across the site */

/* Force Font Awesome to load properly */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* Backup import for Font Awesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* Ensure icon fonts are loaded with fallbacks */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2') format('woff2'),
         url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff') format('woff');
}

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.woff2') format('woff2'),
         url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-regular-400.woff') format('woff');
}

/* Force proper icon rendering */
.fas, .fa-solid {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome', Arial, sans-serif !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

.far, .fa-regular {
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome', Arial, sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

.fab, .fa-brands {
    font-family: 'Font Awesome 6 Brands', 'Font Awesome 5 Brands', 'FontAwesome', Arial, sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

/* Ensure icons are always visible */
i[class*="fa-"], 
span[class*="fa-"],
.fas, .far, .fab, .fa {
    display: inline-block !important;
    min-width: 1em !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Loading state for icons */
i[class*="fa-"]:not([class*="fa-"]:before) {
    position: relative;
}

i[class*="fa-"]:not([class*="fa-"]:before)::after {
    content: '⏳';
    font-family: Arial, sans-serif;
    animation: pulse 1s infinite;
}

/* CSP-safe icon rendering */
.icon-safe {
    font-family: Arial, sans-serif !important;
    font-style: normal !important;
    text-decoration: none !important;
    display: inline-block !important;
    min-width: 1em !important;
    text-align: center !important;
}

/* Critical icon fallbacks */
.fa-user:not(:before) { content: '👤'; }
.fa-home:not(:before) { content: '🏠'; }
.fa-search:not(:before) { content: '🔍'; }
.fa-star:not(:before) { content: '⭐'; }
.fa-check:not(:before) { content: '✅'; }
.fa-times:not(:before) { content: '❌'; }
.fa-cog:not(:before) { content: '⚙️'; }
.fa-shopping-bag:not(:before) { content: '🛒'; }

/* Responsive icon sizes */
@media (max-width: 768px) {
    i[class*="fa-"] {
        font-size: 1.1em !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    i[class*="fa-"] {
        text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
    }
}

/* Print styles */
@media print {
    i[class*="fa-"]::before {
        content: "[icon]" !important;
        font-family: Arial, sans-serif !important;
    }
}

/* Animation for loading icons */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Force icon visibility after load */
.icons-loaded i[class*="fa-"] {
    opacity: 1 !important;
    transition: opacity 0.3s ease-in-out;
}

/* Error state for failed icons */
.icon-error {
    color: #dc3545 !important;
}

.icon-error::before {
    content: '❌' !important;
    font-family: Arial, sans-serif !important;
}

/* Success state for loaded icons */
.icon-success {
    color: #28a745 !important;
}

/* Fix for specific problematic icons */
.fa-tachometer-alt::before { content: '\f3fd' !important; }
.fa-clipboard-list::before { content: '\f46d' !important; }
.fa-graduation-cap::before { content: '\f19d' !important; }
.fa-rupee-sign::before { content: '\f156' !important; }
.fa-sign-out-alt::before { content: '\f2f5' !important; }

/* Ensure Unicode fallback works */
@supports not (content: attr(data-icon)) {
    .fa-user::before { content: '👤' !important; font-family: Arial !important; }
    .fa-star::before { content: '⭐' !important; font-family: Arial !important; }
    .fa-home::before { content: '🏠' !important; font-family: Arial !important; }
}