/**
 * Font Awesome Integration
 *
 * This file loads Font Awesome icons for the 4Square dashboard.
 * Using a separate CSS file for Font Awesome allows for better organization
 * and easier updates when new versions are released.
 *
 * We're using the CDN approach for simplicity, but this could be replaced
 * with self-hosted files for better performance in production.
 *
 * Font Awesome Version: 5.15.4 (more stable with fewer glyph errors than 6.0.0)
 * Source: https://fontawesome.com/
 */

/* Import Font Awesome from CDN - downgraded to 5.15.4 to reduce glyph errors */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* 
 * Font Family Compatibility Layer
 * This ensures that both 'Font Awesome 5 Free' and 'FontAwesome' refer to the same font,
 * reducing conflicts and errors across different parts of the codebase.
 */
@font-face {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/webfonts/fa-solid-900.woff2") format("woff2");
}

/* 
 * Icon Class Mappings
 * 
 * These classes can be used as alternatives to the font-awesome module.
 * We're providing some common icon mappings as CSS classes that match
 * our application needs.
 */

/* Points earned icon (arrow up) */
.icon-points-earned:before {
  font-family: 'Font Awesome 5 Free';
  content: '\f062'; /* Arrow up icon */
  font-weight: 900; /* Required for solid icons */
  display: inline-block;
}

/* Points spent icon (arrow down) */
.icon-points-spent:before {
  font-family: 'Font Awesome 5 Free';
  content: '\f063'; /* Arrow down icon */
  font-weight: 900;
  display: inline-block;
}

/* Rewards icon (gift) */
.icon-rewards:before {
  font-family: 'Font Awesome 5 Free';
  content: '\f06b'; /* Gift icon */
  font-weight: 900;
  display: inline-block;
}

/* Wallet icon (wallet) */
.icon-wallet:before {
  font-family: 'Font Awesome 5 Free';
  content: '\f555'; /* Wallet icon */
  font-weight: 900;
  display: inline-block;
}

/* User account icon (user) */
.icon-user:before {
  font-family: 'Font Awesome 5 Free';
  content: '\f007'; /* User icon */
  font-weight: 900;
  display: inline-block;
}

/* Settings icon (cog) */
.icon-settings:before {
  font-family: 'Font Awesome 5 Free';
  content: '\f013'; /* Cog icon */
  font-weight: 900;
  display: inline-block;
}

/* Shop/store icon (store) */
.icon-shop:before {
  font-family: 'Font Awesome 5 Free';
  content: '\f54e'; /* Store icon */
  font-weight: 900;
  display: inline-block;
}