/**
 * Global Font Awesome fixes
 * This file provides consistent styling for Font Awesome icons across the application
 * and includes emergency fallbacks for when Font Awesome fails to load
 */

/* Basic icon rendering fixes */
.fa, .fas, .far, .fab, .fal, .fad,
.fa-solid, .fa-regular, .fa-brands {
  display: inline-block !important;
  font-style: normal !important;
  font-variant: normal !important;
  text-rendering: auto !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure correct font families */
.fa, .fas, .fa-solid {
  font-family: "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
  font-weight: 900 !important;
}

.far, .fa-regular {
  font-family: "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
  font-weight: 400 !important;
}

.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands", "FontAwesome", sans-serif !important;
  font-weight: 400 !important;
}

/* Force specific icon sizes for common UI elements */
.nav-link i, .sidebar-menu i, .sidebar-header i {
  font-size: 1.2em !important;
  width: 1.5em !important;
  text-align: center !important;
}

.card-icon i, .stat-card-icon i, .action-icon i {
  font-size: 1.5em !important; 
}

/* Fix icon spacing with text */
i + span, i + div {
  margin-left: 0.5em !important;
}

/* Ensure icons inside buttons have proper alignment */
button i, .btn i {
  vertical-align: middle !important;
}

/* Fix common header icons - icon content fix */
.fa-bell:before { content: "\f0f3" !important; }
.fa-user:before { content: "\f007" !important; }
.fa-cog:before { content: "\f013" !important; }
.fa-history:before { content: "\f1da" !important; }
.fa-heart:before { content: "\f004" !important; }
.fa-question-circle:before { content: "\f059" !important; }
.fa-sign-out-alt:before { content: "\f2f5" !important; }
.fa-chevron-down:before { content: "\f078" !important; }
.fa-coins:before { content: "\f51e" !important; }
.fa-bell-slash:before { content: "\f1f6" !important; }
.fa-home:before { content: "\f015" !important; }
.fa-palette:before { content: "\f53f" !important; }
.fa-gear:before { content: "\f013" !important; }
.fa-shield-alt:before { content: "\f3ed" !important; }
.fa-envelope:before { content: "\f0e0" !important; }
.fa-save:before { content: "\f0c7" !important; }
.fa-times:before { content: "\f00d" !important; }
.fa-check:before { content: "\f00c" !important; }
.fa-circle:before { content: "\f111" !important; }
.fa-circle-notch:before { content: "\f1ce" !important; }

/* Emoji fallbacks for common icons */
.icon-fallback {
    display: none;
}

/* Only show icon fallbacks if Font Awesome fails */
i.fas:not(:before) ~ .icon-fallback,
i.far:not(:before) ~ .icon-fallback,
i.fab:not(:before) ~ .icon-fallback,
i.fa:not(:before) ~ .icon-fallback {
    display: inline;
}

/* Common fallback emojis for different contexts */
.header-button i.fas.fa-bell:empty:before { content: "🔔" !important; }
.profile-button i.fas.fa-chevron-down:empty:before { content: "▼" !important; }
.menu-list a i.fas.fa-user:empty:before { content: "👤" !important; }
.menu-list a i.fas.fa-cog:empty:before,
.menu-list a i.fas.fa-gear:empty:before { content: "⚙️" !important; }
.menu-list a i.fas.fa-history:empty:before { content: "🕒" !important; }
.menu-list a i.fas.fa-heart:empty:before { content: "❤️" !important; }
.menu-list a i.fas.fa-question-circle:empty:before { content: "❓" !important; }
.logout-button i.fas.fa-sign-out-alt:empty:before { content: "🚪" !important; }
.credit-display i.fas.fa-coins:empty:before { content: "💰" !important; }
.empty-notification i.fas.fa-bell-slash:empty:before { content: "🔕" !important; }
.sidebar__icon--home i.fas.fa-home:empty:before { content: "🏠" !important; }
.sidebar__icon--coloring i.fas.fa-palette:empty:before { content: "🎨" !important; }
.sidebar__icon--account i.fas.fa-gear:empty:before { content: "⚙️" !important; }
.sidebar__icon--logout i.fas.fa-sign-out-alt:empty:before { content: "🚪" !important; }

/* Fix menu icon alignment inside the header menu */
.menu-icon i,
.menu-icon .fas,
.menu-icon .far,
.menu-icon .fab {
    font-size: 14px !important;
    display: inline-block !important;
    text-align: center !important;
    width: 1em !important;
    height: 1em !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Better icon fallbacks for menu icons */
.menu-icon i.fas.fa-user:empty:before { content: "👤" !important; }
.menu-icon i.fas.fa-cog:empty:before,
.menu-icon i.fas.fa-gear:empty:before { content: "⚙️" !important; }
.menu-icon i.fas.fa-history:empty:before { content: "🕒" !important; }
.menu-icon i.fas.fa-heart:empty:before { content: "❤️" !important; }
.menu-icon i.fas.fa-question-circle:empty:before { content: "❓" !important; }