/**
 * Mobile Dashboard Icon Fix
 * This CSS file fixes the issue with Font Awesome icons not displaying on mobile devices
 */

/* Ensure Font Awesome icons are properly displayed on mobile */
@media (max-width: 767.98px) {
  /* Force Font Awesome icons to display properly */
  .fas {
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -moz-osx-font-smoothing: grayscale !important;
    -webkit-font-smoothing: antialiased !important;
    font-family: 'Font Awesome 5 Solid', 'Font Awesome 5 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
  }

  /* Fix for dashboard card icons */
  .flex-shrink-0 .fas, .dashboard-card-icon .fas {
    font-size: 1.5rem !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Ensure the icon container is properly sized and centered */
  .flex-shrink-0.bg-opacity-10.rounded-circle, .dashboard-card-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 3rem !important;
    height: 3rem !important;
    min-width: 3rem !important;
  }

  /* Additional fix for Font Awesome icon display */
  [class^="fa-"], [class*=" fa-"],
  [class^="fas-"], [class*=" fas-"] {
    display: inline-block !important;
    visibility: visible !important;
  }

  /* Ensure icon fonts are loaded correctly */
  @font-face {
    font-family: 'Font Awesome 5 Solid';
    font-display: block;
    font-weight: 900;
    font-style: normal;
    font-display: auto;
    src: url('../frontend/fonts/fontawesome/fa-solid-900.woff2') format('woff2'),
         url('../frontend/fonts/fontawesome/fa-solid-900.woff') format('woff'),
         url('../frontend/fonts/fontawesome/fa-solid-900.ttf') format('truetype');
  }
}