/* Icons Fallback CSS - Ensures icons display correctly */

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

/* Alternative Font Awesome CDN */
@import url('https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css');

/* Ensure proper font loading */
@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");
}

@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");
}

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

/* Icon base classes with fallback */
.fas, .fa-solid {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  display: inline-block !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.far, .fa-regular {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  display: inline-block !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  display: inline-block !important;
  text-rendering: auto !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Common icon styles */
.fa, .fas, .far, .fab, .fal, .fad, .fak {
  -moz-osx-font-smoothing: grayscale !important;
  -webkit-font-smoothing: antialiased !important;
  display: inline-block !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
}

/* Unicode fallbacks for most common icons */
.fa-home::before, .fa-house::before { content: "🏠" !important; }
.fa-user::before { content: "👤" !important; }
.fa-users::before { content: "👥" !important; }
.fa-settings::before, .fa-gear::before, .fa-cog::before { content: "⚙️" !important; }
.fa-edit::before, .fa-pen::before { content: "✏️" !important; }
.fa-trash::before { content: "🗑️" !important; }
.fa-search::before { content: "🔍" !important; }
.fa-plus::before { content: "➕" !important; }
.fa-minus::before { content: "➖" !important; }
.fa-check::before { content: "✅" !important; }
.fa-times::before, .fa-close::before { content: "❌" !important; }
.fa-arrow-left::before { content: "⬅️" !important; }
.fa-arrow-right::before { content: "➡️" !important; }
.fa-arrow-up::before { content: "⬆️" !important; }
.fa-arrow-down::before { content: "⬇️" !important; }
.fa-eye::before { content: "👁️" !important; }
.fa-heart::before { content: "❤️" !important; }
.fa-star::before { content: "⭐" !important; }
.fa-calendar::before { content: "📅" !important; }
.fa-clock::before { content: "🕐" !important; }
.fa-envelope::before, .fa-mail::before { content: "✉️" !important; }
.fa-phone::before { content: "📞" !important; }
.fa-download::before { content: "⬇️" !important; }
.fa-upload::before { content: "⬆️" !important; }
.fa-save::before { content: "💾" !important; }
.fa-file::before { content: "📄" !important; }
.fa-folder::before { content: "📁" !important; }
.fa-image::before { content: "🖼️" !important; }
.fa-video::before { content: "🎥" !important; }
.fa-music::before { content: "🎵" !important; }
.fa-link::before { content: "🔗" !important; }
.fa-share::before { content: "📤" !important; }
.fa-copy::before { content: "📋" !important; }
.fa-print::before { content: "🖨️" !important; }
.fa-info::before { content: "ℹ️" !important; }
.fa-warning::before, .fa-exclamation-triangle::before { content: "⚠️" !important; }
.fa-question::before { content: "❓" !important; }
.fa-bell::before { content: "🔔" !important; }
.fa-lock::before { content: "🔒" !important; }
.fa-unlock::before { content: "🔓" !important; }
.fa-key::before { content: "🔑" !important; }
.fa-shield::before, .fa-shield-alt::before { content: "🛡️" !important; }
.fa-chart-bar::before { content: "📊" !important; }
.fa-chart-line::before { content: "📈" !important; }
.fa-chart-pie::before { content: "📊" !important; }
.fa-database::before { content: "🗄️" !important; }
.fa-server::before { content: "🖥️" !important; }
.fa-network-wired::before { content: "🌐" !important; }
.fa-wifi::before { content: "📶" !important; }
.fa-signal::before { content: "📶" !important; }
.fa-battery-full::before { content: "🔋" !important; }
.fa-plug::before { content: "🔌" !important; }
.fa-power-off::before { content: "⏻" !important; }
.fa-refresh::before, .fa-sync::before { content: "🔄" !important; }
.fa-undo::before { content: "↩️" !important; }
.fa-redo::before { content: "↪️" !important; }
.fa-history::before { content: "🕐" !important; }
.fa-bookmark::before { content: "🔖" !important; }
.fa-tag::before { content: "🏷️" !important; }
.fa-tags::before { content: "🏷️" !important; }
.fa-comment::before { content: "💬" !important; }
.fa-comments::before { content: "💬" !important; }
.fa-thumbs-up::before { content: "👍" !important; }
.fa-thumbs-down::before { content: "👎" !important; }
.fa-like::before { content: "👍" !important; }
.fa-dislike::before { content: "👎" !important; }

/* Force fallback when Font Awesome doesn't load */
.fa:not([class*="fa-"])::before {
  content: "▪" !important;
  color: #666 !important;
}

/* Loading state for icons */
.fa-loading::before {
  content: "⏳" !important;
  animation: fa-spin 1s infinite linear;
}

/* Spin animation */
@keyframes fa-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

.icon-error::before {
  content: "❌" !important;
}

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

.icon-success::before {
  content: "✅" !important;
}