/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ================================================
   PWA Native Feel Styles
   ================================================ */

/* Prevent horizontal overscroll but allow vertical (for pull-to-refresh) */
html, body {
  overscroll-behavior-x: none;
}

/* Prevent text selection on UI elements */
button,
a,
nav,
.no-select {
  -webkit-user-select: none;
  user-select: none;
}

/* Allow text selection on content areas */
p, h1, h2, h3, h4, h5, h6, span, li, td, th, label, input, textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* Disable tap highlight on iOS */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Prevent callout on long press (iOS) */
a, img, button {
  -webkit-touch-callout: none;
}

/* Smooth scrolling for scrollable areas */
.overflow-y-auto,
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Contain overscroll in sub-containers (track panel, modals) so pull-to-refresh only fires at document level */
.overflow-y-auto {
  overscroll-behavior-y: contain;
}

/* Fix iOS input zoom - ensure inputs are at least 16px */
input, select, textarea {
  font-size: 16px;
}

/* Better touch targets - minimum 44px for standalone buttons */
button:not(.btn-sm):not([class*="text-"]),
[role="button"]:not(.btn-sm) {
  min-height: 44px;
}

/* Prevent horizontal scroll on the entire app; let the document scroll vertically for pull-to-refresh */
html {
  overflow-x: hidden;
  width: 100%;
}

body {
  overflow-x: hidden;
  width: 100%;
  min-height: 100%;
}

/* Allow vertical scrolling in scroll containers */
.overflow-y-auto {
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* Prevent text size adjustment on orientation change */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Disable image dragging */
img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Active states for buttons - native feel (only on touch devices) */
@media (hover: none) and (pointer: coarse) {
  button:active:not(:disabled),
  [role="button"]:active:not(:disabled) {
    opacity: 0.8;
  }

  /* Tile active state handled by Tailwind active:scale-95 */
}

/* Prevent zoom on double tap for buttons/links (not tiles — they need default
   touch-action so pull-to-refresh works when starting on a tile) */
button, a, nav {
  touch-action: manipulation;
}

/* Marquee animation for track info on mobile */
.marquee-container {
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}

.marquee-text {
  display: inline-block;
}

.marquee-text.scrolling {
  animation: marquee 8s linear infinite;
  padding-right: 3rem;
}

.marquee-dupe {
  display: inline-block;
  animation: marquee 8s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* Safe area utilities for PWA */
.pt-safe {
  padding-top: env(safe-area-inset-top);
}

.pb-safe {
  padding-bottom: max(env(safe-area-inset-bottom), 8px);
}

.pl-safe {
  padding-left: env(safe-area-inset-left);
}

.pr-safe {
  padding-right: env(safe-area-inset-right);
}

/* ================================================
   Turbo Navigation Transitions
   ================================================ */

/* Smooth page transitions */
[data-turbo-preview] {
  opacity: 0.8;
  pointer-events: none;
}

/* Instant feedback on tappable elements */
[data-action*="click"] {
  cursor: pointer;
}

/* Faster transitions for interactive elements */
.transition {
  transition-duration: 150ms !important;
}

/* Skeleton loading states */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

.dark .skeleton {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 200% 100%;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Turbo frame loading state */
turbo-frame[busy] {
  opacity: 0.6;
  pointer-events: none;
}

/* ================================================
   Pull-to-Refresh Indicator
   ================================================ */

#pull-refresh-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  background: transparent;
}

.pull-refresh-spinner {
  width: 36px;
  height: 36px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.dark .pull-refresh-spinner {
  background: #374151;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}