/* Native Mobile App Styling for Capacitor WebView */

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

/* Global Native App Reset */
html, body {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Allow text selection inside inputs, textareas and selectable areas */
input, textarea, select, [contenteditable="true"], .selectable-text {
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* Disable context menus and image saving drag highlights */
img, svg, a, button {
  -webkit-user-drag: none !important;
  -webkit-touch-callout: none !important;
}

/* Body Safe Area Padding for Notch & Home Bar */
body {
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
}

/* Native Pull-to-Refresh Container & Visual Indicator */
#ptr-indicator {
  position: fixed;
  top: var(--safe-area-top);
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  width: 42px;
  height: 42px;
  background-color: #ffffff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;
  opacity: 0;
  pointer-events: none;
}

#ptr-indicator.visible {
  opacity: 1;
}

#ptr-indicator .ptr-spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(4, 120, 87, 0.2);
  border-top-color: #047857;
  border-radius: 50%;
  transition: transform 0.1s linear;
}

#ptr-indicator.refreshing .ptr-spinner {
  animation: ptr-spin 0.75s linear infinite;
}

@keyframes ptr-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Hide scrollbars for native feel while keeping functionality */
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent;
}