/* ==============================
   CROSS-PLATFORM FRIENDLINESS
   iOS Safari + Android Chrome + Touch UX + Responsive
   Loaded globally on every page.
   ============================== */

/* ---------- 1. Universal resets & rendering ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: contain;
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 2. Viewport height that respects mobile chrome ----------
   100vh on iOS Safari and Android Chrome includes the browser UI,
   so full-height layouts overflow. Use dynamic viewport units when
   available, fallback to 100vh. */
:root {
  --app-vh: 100vh;
}

@supports (height: 100dvh) {
  :root {
    --app-vh: 100dvh;
  }
}

html, body {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Helper for any container that should fill the screen */
.full-height,
.page-centered,
.dashboard,
.page-wrapper,
.main-wrapper {
  min-height: var(--app-vh);
}

/* ---------- 3. Safe-area insets (iPhone notch, home indicator, Android cutouts) ---------- */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Fixed-position UI: shift away from notch/home bar */
  .language-toggle,
  .text-size-controls,
  .dashboard-overlay,
  .top-bar,
  .header-fixed {
    top: calc(12px + env(safe-area-inset-top)) !important;
  }

  .bottom-bar,
  .footer-fixed,
  .controls-container {
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
}

/* ---------- 4. Touch targets (Apple HIG: 44x44, Android Material: 48x48) ---------- */
button,
.btn,
.menu-btn,
.back-button,
.stat-card,
.card-interactive,
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
select,
a.btn,
.password-toggle,
.language-toggle,
.text-size-toggle {
  min-height: 44px;
  touch-action: manipulation; /* eliminates 300ms double-tap-zoom delay */
}

/* Plain text links inside copy shouldn't be inflated; only button-like links */
a.btn,
a.menu-btn,
a.back-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* ---------- 5. Form inputs ---------- */
/* iOS Safari zooms when an input < 16px receives focus. Force >= 16px. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input:not([type]),
textarea,
select {
  font-size: max(16px, 1rem);
  -webkit-appearance: none;
  appearance: none;
  border-radius: inherit;
}

/* Restore native checkbox/radio appearance (the rule above blanket-removed it) */
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: auto;
  appearance: auto;
  font-size: inherit;
}

/* iOS autofill: kill the yellow background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: inherit;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* iOS adds rounded corners + inner shadow to inputs by default */
input,
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
}

/* Placeholder color consistent across browsers */
::placeholder {
  color: #94a3b8;
  opacity: 1; /* Firefox lowers it by default */
}

/* ---------- 6. Scrolling ---------- */
.scrollable,
.container,
.page-container,
.dashboard-container,
.modal-body,
.scroll-area,
[data-scrollable] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Prevent body scroll bouncing on iOS while still allowing normal scrolling */
html {
  -webkit-overflow-scrolling: touch;
}

/* ---------- 7. Image & media defaults ---------- */
img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
  -webkit-user-drag: none;
}

video {
  background: #000;
}

/* ---------- 8. Prevent layout breakage from long words/URLs ---------- */
p, h1, h2, h3, h4, h5, h6, li, td, th, span, a, label {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ---------- 9. Touch device tweaks (no-hover devices) ---------- */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover-driven motion on touch — it triggers on tap and feels janky */
  *:hover {
    transition-duration: 0s !important;
  }

  /* Tap feedback via :active instead */
  button:active,
  .btn:active,
  .menu-btn:active,
  a.btn:active,
  .stat-card:active,
  .card-interactive:active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
  }

  /* No text selection on tap for interactive elements */
  button,
  .btn,
  .menu-btn,
  .stat-card,
  .card-interactive,
  .back-button {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

/* ---------- 10. Small phone (<= 480px) sanity ---------- */
@media (max-width: 480px) {
  html {
    font-size: 15px;
  }

  body {
    font-size: 1rem;
  }

  /* Avoid horizontal scroll surprises */
  body, html {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Modals/cards shouldn't stick to edges on small screens */
  .modal,
  .dialog,
  .popup {
    margin: 12px !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* Buttons go full-width when stacked */
  .btn-stack > .btn,
  .btn-stack > button {
    width: 100%;
  }
}

/* ---------- 11. Tablet & landscape phone (481px-1024px) ---------- */
@media (min-width: 481px) and (max-width: 1024px) {
  /* Generous touch targets on tablets */
  button,
  .btn,
  .menu-btn,
  a.btn {
    min-height: 48px;
  }
}

/* ---------- 12. Landscape orientation small height ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .login-container,
  .modal {
    margin-top: 0;
    margin-bottom: 0;
    max-height: 100vh;
    overflow-y: auto;
  }
}

/* ---------- 13. PWA / standalone mode (added to home screen) ---------- */
@media (display-mode: standalone) {
  body {
    /* No browser chrome — extend padding for status bar */
    padding-top: max(env(safe-area-inset-top), 12px);
  }
}

/* ---------- 14. Print friendliness ---------- */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  button, .btn, .back-button, .language-toggle {
    display: none !important;
  }
}

/* ---------- 15. Reduced motion (system preference) ---------- */
@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;
  }
}

/* ---------- 16. High contrast / forced colors (Windows, accessibility) ---------- */
@media (forced-colors: active) {
  button,
  .btn,
  .menu-btn,
  .back-button,
  .stat-card {
    border: 1px solid CanvasText;
  }
}

/* ---------- 17. Selection color consistent across platforms ---------- */
::selection {
  background: rgba(47, 201, 255, 0.35);
  color: inherit;
}
::-moz-selection {
  background: rgba(47, 201, 255, 0.35);
  color: inherit;
}

/* ---------- 18. iOS sticky position fix ---------- */
.sticky,
[style*="position: sticky"],
[style*="position:sticky"] {
  position: -webkit-sticky;
  position: sticky;
}

/* ---------- 19. Disable iOS callout / share menu on long press for buttons ---------- */
button,
.btn,
.menu-btn,
.back-button,
img.no-callout {
  -webkit-touch-callout: none;
}

/* ---------- 20. Focus-visible: keyboard users get a ring, mouse users don't ---------- */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 3px solid #2fc9ff;
  outline-offset: 2px;
}