/*
 * 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;
}

/* Allow pull-to-refresh on main body, contain in scroll containers */
.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 */
html {
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  height: 100%;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
  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-specific active state */
  [data-controller="tile"]:active {
    opacity: 0.9;
  }
}

/* Prevent zoom on double tap for specific elements */
button, a, nav, [data-controller="tile"] {
  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;
}