/* ==========================================================================
   Cross-Browser & Device Compatibility Fixes
   Targets: Chrome 80+, Firefox 78+, Safari 13+, Edge 80+, iOS Safari 13+
   ========================================================================== */

/* ---- Webkit scrollbar styling ---- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-secondary, #f5f5f5);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-dark, #aaa);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-light, #666);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-dark, #aaa) var(--color-bg-secondary, #f5f5f5);
}

/* ---- Safari flexbox gap fallback ---- */
@supports not (gap: 1px) {
  .dashboard-stats > * + *,
  .dashboard-cards > * + *,
  .filter-actions > * + * {
    margin-left: var(--space-md, 16px);
  }
  .needs-cards > * + * {
    margin-top: var(--space-md, 16px);
  }
}

/* ---- iOS Safari: prevent zoom on input focus ---- */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 768px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    font-size: 1rem !important;
  }
}

/* ---- iOS safe area insets ---- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .site-footer {
    padding-bottom: calc(var(--space-md, 16px) + env(safe-area-inset-bottom));
  }

  #chatbot-fab {
    bottom: calc(24px + env(safe-area-inset-bottom));
  }

  #voice-control-bar {
    bottom: calc(0px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }

  #offline-banner {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

/* ---- Webkit vendor prefixes for older browsers ---- */
.dashboard-hero,
.about-hero,
.download-hero,
.resources-hero,
.q-hero {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ---- Touch action for map on mobile ---- */
#map {
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* ---- Fixed header: reinforce for Safari ---- */
.site-header {
  position: fixed;
}

/* ---- Appearance reset for cross-browser form elements ---- */
input,
select,
textarea,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}

button {
  cursor: pointer;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%23666'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* ---- Firefox: remove inner focus ring on buttons ---- */
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* ---- Smooth scrolling: respect user preferences ---- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---- Dark mode media query support ---- */
@media (prefers-color-scheme: dark) {
  :root:not(.high-contrast) {
    color-scheme: light;
  }
}

/* ---- Print compat ---- */
@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}