/**
 * Cross-Browser Compatibility Fixes
 * Ensures consistent rendering across:
 * - Chrome, Firefox, Safari, Edge, Opera
 * - Desktop and Mobile devices
 * - Modern and Legacy browsers
 *
 * Load this AFTER other CSS files for best effect
 */

/* ============================================================================
   FALLBACK COLORS FOR GRADIENT TEXT (Firefox compatibility)
   ============================================================================ */

/* Ensure gradient text has a fallback color for Firefox */
.stat-value {
  /* Fallback: Use solid color in browsers that don't support text gradients */
  color: #5b7fff;
}

/* Only override with transparent color if browser supports -webkit-background-clip: text */
@supports (-webkit-background-clip: text) {
  .stat-value {
    color: transparent;
  }
}

/* ============================================================================
   ANIMATION OPTIMIZATION
   ============================================================================ */

/* Reduce animation complexity for better performance on lower-end devices */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Use will-change sparingly for hardware acceleration (used only when needed) */
.stat-card:hover,
.btn:hover,
.dropdown-item:hover {
  will-change: transform;
}

/* Remove will-change after animation completes */
.stat-card,
.btn,
.dropdown-item {
  will-change: auto;
}

/* ============================================================================
   TRANSFORM VENDOR PREFIXES (for older browsers)
   ============================================================================ */

/* Add -webkit- prefix support for older Safari/Mobile Safari */
.stat-card:hover,
.btn:hover,
.dropdown-item:hover,
.modal-close:hover {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}

.stat-card:hover .stat-icon {
  -webkit-transform: scale(1.15) rotate(10deg);
  transform: scale(1.15) rotate(10deg);
}

/* ============================================================================
   BACKDROP FILTER FALLBACK
   ============================================================================ */

/* Ensure backdrop blur has fallback for browsers that don't support it */
.modal {
  /* Fallback for browsers without backdrop-filter support */
  background-color: rgba(0, 0, 0, 0.7);

  /* Modern browsers with support */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ============================================================================
   SELECT AND INPUT STYLING CONSISTENCY
   ============================================================================ */

/* Normalize select element styling across browsers */
select,
input[type="select"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="tel"],
textarea {
  /* Remove iOS rounded corners in input fields */
  border-radius: 4px;

  /* Prevent iOS from zooming when input is focused */
  font-size: 16px;
}

/* ============================================================================
   FONT RENDERING OPTIMIZATION
   ============================================================================ */

/* Optimize font rendering across browsers */
body,
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================================
   USER SELECTION FIXES
   ============================================================================ */

/* Ensure user-select works consistently */
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ============================================================================
   PLACEHOLDER STYLING CONSISTENCY
   ============================================================================ */

/* Normalize placeholder text color across browsers */
input::placeholder,
textarea::placeholder {
  color: inherit;
  opacity: 0.6;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.6;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: inherit;
  opacity: 0.6;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: inherit;
  opacity: 0.6;
}

/* ============================================================================
   SCROLLBAR STYLING
   ============================================================================ */

/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.5);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 128, 128, 0.7);
}

/* Firefox scrollbar styling (limited support) */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
}

/* ============================================================================
   BOX MODEL CONSISTENCY
   ============================================================================ */

/* Ensure border-box sizing for all elements */
* {
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

/* ============================================================================
   TOUCH OPTIMIZATION
   ============================================================================ */

/* Remove tap highlight color on mobile devices */
button,
a,
input[type="button"],
input[type="submit"],
[role="button"],
.btn {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   FLEXBOX ALIGNMENT FIXES
   ============================================================================ */

/* Ensure flex alignment works consistently */
.flex-center {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

/* ============================================================================
   GRADIENT FALLBACK COLORS
   ============================================================================ */

/* Provide fallback colors for gradient backgrounds */
[style*="gradient"] {
  /* Fallback to first gradient color */
  background-color: #1a1f2e;
  background-image: linear-gradient(135deg, #1a1f2e, #00d4ff);
}

/* ============================================================================
   FOCUS STATES FOR ACCESSIBILITY
   ============================================================================ */

/* Ensure focus states are visible in all browsers */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}

/* ============================================================================
   EDGE CASES AND QUIRKS
   ============================================================================ */

/* Fix for IE11 and older Edge (if needed) */
@supports (-ms-ime-align: auto) {
  body {
    -ms-touch-action: pan-x pan-y;
  }
}

/* Fix for Safari scrollbar jank */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ============================================================================
   PRINT STYLES (Bonus)
   ============================================================================ */

@media print {
  /* Hide interactive elements when printing */
  .mobile-menu-toggle,
  .modal,
  .dropdown,
  .modal-close,
  .btn-close {
    display: none !important;
  }

  /* Improve readability */
  body {
    background: white;
    color: black;
  }
}