/*
 * 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.
 */

/* Custom touch utilities for mobile optimization */
@media (hover: none) {
  /* Touch-specific hover states */
  .hover\:scale-110:active {
    transform: scale(1.1);
  }
  
  .hover\:bg-gray-300:active {
    background-color: rgb(209 213 219);
  }
  
  .hover\:bg-blue-700:active {
    background-color: rgb(29 78 216);
  }
}

/* Prevent double-tap zoom on touch devices */
.touch-manipulation {
  touch-action: manipulation;
}

/* Improve tap target size on mobile */
@media (max-width: 768px) {
  button, 
  a,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Photo modal styles */
.photo-modal-backdrop {
  backdrop-filter: blur(4px);
}


/* Recent color hover effect */
[data-map-target="recentColors"] > div[data-color]:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Prevent text selection and popups on mobile for map elements */
svg {
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

svg * {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

svg text {
  pointer-events: none !important;
}

svg path {
  -webkit-tap-highlight-color: transparent !important;
}

/* Prevent iOS magnifying glass and text selection */
@media (pointer: coarse) {
  svg, svg * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
  }
  
  [data-map-target="container"] {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
  }
}

/* Edge-to-Edge display support for Android 15+ */
@supports (padding: env(safe-area-inset-top)) {
  /* Body to fill entire viewport */
  body {
    min-height: 100vh;
    min-height: 100dvh;
  }
  
  /* Navigation bar safe area */
  nav {
    padding-top: env(safe-area-inset-top);
  }
  
  /* Adjust nav container for safe areas */
  nav > div {
    padding-left: max(0.5rem, env(safe-area-inset-left));
    padding-right: max(0.5rem, env(safe-area-inset-right));
  }
  
  /* Hamburger menu adjustments */
  [data-hamburger-menu-target="menu"] {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    height: 100vh;
    height: 100dvh;
  }
  
  /* Map container adjustments - only when user is signed in */
  body:has(nav) main {
    height: calc(100vh - 4rem - env(safe-area-inset-top));
    height: calc(100dvh - 4rem - env(safe-area-inset-top));
  }
  
  /* Flash messages positioning */
  [data-controller="flash"] {
    top: calc(1rem + env(safe-area-inset-top));
    right: calc(1rem + env(safe-area-inset-right));
  }
  
  /* Home page sections for safe areas */
  .safe-x {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  
  .safe-bottom {
    padding-bottom: max(30px, env(safe-area-inset-bottom));
  }
  
  /* Privacy and other pages */
  body:not(:has(nav)) {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}