/* ============================================
   SafetyPro — Mobile App Styles
   Applied only when running inside Capacitor
   ============================================ */

/* Native app shell adjustments */
body.is-native-app {
  /* Safe area padding for notched phones */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  /* Disable text selection for app feel */
  -webkit-user-select: none;
  user-select: none;
  /* Prevent pull-to-refresh */
  overscroll-behavior: none;
}

/* Allow text selection in inputs and textareas */
body.is-native-app input,
body.is-native-app textarea,
body.is-native-app [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

/* Status bar spacer — push content below the status bar */
body.is-native-app .topbar {
  padding-top: env(safe-area-inset-top);
}

/* ─── Force mobile layout regardless of screen width ───
   The web responsive kicks in at 768px, but the emulator
   or tablet may be wider.  Force mobile layout in-app. */
body.is-native-app .sidebar {
  position: fixed;
  z-index: 200;
  transform: translateX(-100%);
  width: var(--sidebar-width, 260px);
  transition: transform 0.3s ease;
}

body.is-native-app .sidebar.mobile-open {
  transform: translateX(0);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
}

/* Main content — full width, no sidebar offset */
body.is-native-app .main-content {
  margin-inline-start: 0 !important;
  width: 100% !important;
}

/* Always show hamburger menu button */
body.is-native-app .mobile-menu-btn {
  display: block !important;
}

/* Sidebar backdrop for closing */
body.is-native-app .sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 199;
}

body.is-native-app .sidebar-backdrop.active {
  display: block;
}

/* Larger touch targets */
body.is-native-app .btn,
body.is-native-app button {
  min-height: 44px;
}

body.is-native-app .nav-item {
  min-height: 48px;
  padding: 12px 16px;
}

/* Table rows — bigger tap targets */
body.is-native-app .data-table td {
  padding: 14px 12px;
}

/* Cards — more spacing for touch */
body.is-native-app .card {
  margin-bottom: 16px;
}

/* Responsive grids forced to mobile */
body.is-native-app .kpi-grid {
  grid-template-columns: 1fr 1fr;
}

body.is-native-app .page-content {
  padding: 16px;
}

/* Bottom safe area */
body.is-native-app {
  padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
}

/* Hide elements not needed on mobile */
body.is-native-app .desktop-only {
  display: none !important;
}

/* Hide topbar search on mobile */
body.is-native-app .topbar-search {
  display: none;
}

/* iOS-specific */
body.is-native-app.platform-ios {
  -webkit-overflow-scrolling: touch;
}

/* Android-specific */
body.is-native-app.platform-android .topbar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Smooth scrolling — native app
   ============================================
   - scroll-behavior: smooth animates programmatic
     scrolls (chat auto-scroll to bottom, "scroll to
     panel" navigations, anchor jumps) instead of
     teleporting.
   - -webkit-overflow-scrolling: touch gives iOS and
     older Android WebViews the momentum/inertia
     feel you get in native apps.
   - overscroll-behavior: contain on inner scrollers
     stops scroll-chaining into the body (the body
     is already locked to no pull-to-refresh).
   - touch-action: pan-y tells the browser we only
     scroll vertically, which kills the 300ms click
     delay and makes taps feel instant.
   ============================================ */

body.is-native-app {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

body.is-native-app .main-content,
body.is-native-app .sidebar-nav,
body.is-native-app .modal-body,
body.is-native-app .chat-list,
body.is-native-app .chat-messages,
body.is-native-app .sb-messages,
body.is-native-app .sb-sidebar-body,
body.is-native-app .sb-tab-kb,
body.is-native-app .ps-ai-messages,
body.is-native-app .aix-messages,
body.is-native-app .cb-sidebar,
body.is-native-app .tpl-builder-config,
body.is-native-app .prof-activity-feed,
body.is-native-app .kb-detail-content,
body.is-native-app .worker-dropdown,
body.is-native-app .hazard-dropdown {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Thin, subtle scrollbars for the native-app feel.
   Webkit handles the styling; iOS & Android WebView
   both respect these pseudo-elements. */
body.is-native-app ::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
body.is-native-app ::-webkit-scrollbar-track {
  background: transparent;
}
body.is-native-app ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}
body.is-native-app ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.32);
}

/* Dark sidebar needs a light thumb to stay visible */
body.is-native-app .sidebar ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
}
body.is-native-app .sidebar ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.38);
}

/* Respect the user's reduced-motion preference —
   if enabled, fall back to instant scrolls. */
@media (prefers-reduced-motion: reduce) {
  body.is-native-app,
  body.is-native-app * {
    scroll-behavior: auto !important;
  }
}

/* ── Mobile web (non-native) also benefits ──
   Small viewports get the same treatment so the
   behaviour is consistent between the native app
   and the safetypro24.com mobile site. */
@media (max-width: 768px) {
  html {
    scroll-behavior: smooth;
  }
  .main-content,
  .modal-body,
  .sidebar-nav,
  .chat-messages,
  .sb-messages {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }
}

/* ============================================
   Pull-to-Refresh Indicator
   ============================================
   A small floating circle that appears when the
   user pulls down at the top of the page. The
   spinner rotates 180° when the pull passes the
   threshold (visual cue = "let go now"), and
   spins continuously while reloading.
   Handled by js/pull-to-refresh.js.
   ============================================ */
.pull-refresh-indicator {
  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 50%;
  width: 40px;
  height: 40px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15),
              0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%) translateY(-60px);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.22s ease;
  z-index: 9999;
  pointer-events: none;
}

.pull-refresh-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #E2E8F0;
  border-top-color: #F7941D;       /* SafetyPro orange */
  border-radius: 50%;
  transition: transform 0.18s ease, border-top-color 0.18s ease;
}

/* Pull has passed the threshold — flip the arrow
   and change to navy to signal "release to refresh". */
.pull-refresh-indicator.ready .pull-refresh-spinner {
  border-top-color: #1B2A4A;       /* SafetyPro navy */
  transform: rotate(180deg);
}

/* Refreshing — spinner rotates continuously while
   the page reloads. */
.pull-refresh-indicator.refreshing .pull-refresh-spinner {
  border-top-color: #F7941D;
  animation: pull-refresh-spin 0.8s linear infinite;
}

@keyframes pull-refresh-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Reduced motion — skip the smooth transitions and
   spin animation. The indicator still appears, just
   without the flair. */
@media (prefers-reduced-motion: reduce) {
  .pull-refresh-indicator,
  .pull-refresh-spinner {
    transition: none !important;
  }
  .pull-refresh-indicator.refreshing .pull-refresh-spinner {
    animation: none !important;
  }
}