/* ─────────────────────────────────────────────────────────────────────
   SceneLink Mobile / PWA / Native Polish
   - iOS safe-area insets
   - Momentum scroll + smooth behaviors
   - Tap-highlight removal
   - Keyboard-avoid
   - Dark-mode viewport background (prevents white flash)
   ───────────────────────────────────────────────────────────────────── */

:root {
  --sl-safe-top: env(safe-area-inset-top, 0px);
  --sl-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sl-safe-left: env(safe-area-inset-left, 0px);
  --sl-safe-right: env(safe-area-inset-right, 0px);
}

html {
  background: #0a0a0a;
  /* Prevent white flash on page load inside a WebView */
  -webkit-tap-highlight-color: transparent;
}

body {
  background: #0a0a0a;
  /* Inertial scroll on iOS */
  -webkit-overflow-scrolling: touch;
  /* Prevent pull-to-refresh bounce inside native shell */
  overscroll-behavior-y: contain;
  /* Tap highlight */
  -webkit-tap-highlight-color: rgba(212, 175, 55, 0.12);
}

/* ── Safe-area-aware fixed headers ─────────────────────────────────── */
header,
.sl-header,
.site-header,
nav.navbar,
.nav-bar {
  padding-top: max(var(--sl-safe-top), 0px);
}

/* iOS: fixed top nav bar with notch padding */
@supports (padding: env(safe-area-inset-top)) {
  header.fixed-top,
  .sl-header.fixed,
  .sl-sticky-top {
    padding-top: env(safe-area-inset-top);
  }
}

/* ── Safe-area-aware modals / overlays ─────────────────────────────── */
.modal,
.sl-modal,
.sl-overlay,
.sl-rep-m,
.sl-acct-m {
  padding-top: max(env(safe-area-inset-top), 20px);
  padding-bottom: max(env(safe-area-inset-bottom), 20px);
}

/* ── Touch targets: ensure min 44×44 (iOS) / 48×48 (Android) ───────── */
button,
.btn,
a.nav-link,
.sl-header a {
  min-height: 40px;
}
@media (pointer: coarse) {
  button,
  .btn,
  a[role="button"] {
    min-height: 44px;
  }
}

/* ── Remove default touch callouts on images/icons ────────────────── */
img, i, svg {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* ── Smooth native-like scrolling ──────────────────────────────────── */
.sl-scroll-smooth,
main,
.scroll-container {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ── Keyboard-avoid: inputs should scroll into view, not be covered ── */
input, textarea, select {
  scroll-margin-top: 20vh;
  scroll-margin-bottom: 20vh;
}

/* ── Disable pinch-zoom on controls (still allowed on images) ──────── */
button, a, .btn, .sl-header, nav {
  touch-action: manipulation;
}

/* ── Print / share friendly: ensure readable text in reports / reviews ── */
@media print {
  .sl-bottom-tabs, .sl-header, nav, footer { display: none !important; }
}

/* ── "Standalone" PWA / native-app mode tweaks ─────────────────────── */
@media (display-mode: standalone) {
  /* Hide anything tagged as "web-only" */
  .sl-web-only { display: none !important; }
  /* Slightly stronger top padding so page content doesn't hide under notch */
  body { padding-top: var(--sl-safe-top); }
}

/* ── Capacitor native app body class (set by sl-capacitor-bridge.js) ── */
body.sl-native {
  /* Lock overall body scroll; content scrolls within containers. Prevents bounce */
}
body.sl-native .sl-web-only { display: none !important; }

/* ── Fix: viewport-fit cover on iOS leaves black bars if bg missing ── */
@media (max-width: 860px) {
  html, body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
}

/* ── Reduce motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Focus visibility (a11y baseline) ─────────────────────────────── */
:focus-visible {
  outline: 2px solid #D4AF37;
  outline-offset: 2px;
}
button:focus-visible {
  outline-offset: 3px;
}