/*
 * This is a manifest file that'll be compiled into application.css.
 * CSS files have been combined to avoid import issues with Propshaft
 * Updated: 2024-01-11 to fix import errors
 */

/* Utility classes for toggle animations */
.rotate-180 {
  transform: rotate(180deg);
}

.transition-transform {
  transition: transform 200ms ease-in-out;
}

/* Voice recording animation */
@keyframes voice-wave {
  0%, 100% {
    height: 8px;
  }
  50% {
    height: 24px;
  }
}

.animate-voice-wave {
  animation: voice-wave 1s ease-in-out infinite;
}

/* Sleep slider styling */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #3B82F6;
  cursor: grab;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: #2563EB;
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

input[type="range"]:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.15);
  background: #1D4ED8;
}

input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #3B82F6;
  cursor: grab;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

input[type="range"]::-moz-range-thumb:hover {
  background: #2563EB;
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

input[type="range"]:active::-moz-range-thumb {
  cursor: grabbing;
  transform: scale(1.15);
  background: #1D4ED8;
}

/* Range track styling */
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12px;
  background: #E5E7EB;
  border-radius: 6px;
  transition: background 0.3s ease;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 12px;
  background: #E5E7EB;
  border-radius: 6px;
  transition: background 0.3s ease;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
  background: #D1D5DB;
}

/* ===== Overlay Fix Styles ===== */
/* Fixes for gray overlay issues */

/* Remove incorrect ::before pseudo elements */
button::before,
a::before,
.touchable::before {
  content: none !important;
  display: none !important;
}

/* Alternative touch area expansion using padding */
button, 
a.button,
.touchable {
  padding: 12px 16px;
  position: static;
}

/* Hide lingering modal backdrops */
.modal-backdrop,
.overlay,
.loading-overlay,
#voice-input-modal.hidden {
  display: none !important;
  pointer-events: none !important;
}

/* z-index cleanup */
.fixed.inset-0 {
  pointer-events: none;
}

/* Active modals only */
#voice-input-modal:not(.hidden) {
  pointer-events: auto;
}

/* Safe touch area expansion for mobile */
@media (max-width: 768px) {
  button,
  a.button,
  .touchable {
    padding: 16px 20px;
    min-width: 48px;
    min-height: 48px;
  }
  
  a:not(.button) {
    display: inline-block;
    padding: 8px;
  }
}

/* Remove Turbo overlays */
turbo-frame[busy]::before,
.turbo-progress-bar {
  display: none !important;
}

/* Remove PWA loading screens */
.pwa-loading,
.splash-screen {
  display: none !important;
}

/* ===== Mobile Touch Fix Styles ===== */
/* Mobile touch UX improvements */

/* Touch feedback for clickable elements */
a, button, 
.clickable,
.cursor-pointer,
[role="button"],
input[type="submit"],
input[type="button"] {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* Visual feedback on touch */
a:active, 
button:active,
.clickable:active,
.cursor-pointer:active {
  transform: scale(0.98);
  opacity: 0.9;
}

/* Block links for full card clicking */
a.block {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Minimum touch target sizes for mobile */
@media (max-width: 768px) {
  button, 
  a.button,
  input[type="submit"],
  input[type="button"],
  .btn {
    min-height: 48px;
    min-width: 48px;
    padding: 12px 20px;
  }
  
  button.icon-button,
  a.icon-button {
    width: 48px;
    height: 48px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    min-height: 56px;
    padding: 16px;
    font-size: 16px;
  }
  
  .card,
  .bg-white.rounded-xl {
    padding: 20px;
  }
}

/* Improved scrolling */
.scrollable,
main,
.overflow-y-auto {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Disabled state */
button[disabled],
a.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading animation */
button.loading::after {
  content: "...";
  animation: dots 1.5s infinite;
}

@keyframes dots {
  0%, 20% { content: "."; }
  40% { content: ".."; }
  60%, 100% { content: "..."; }
}

/* Modal touch handling */
.modal,
.fixed.inset-0 {
  touch-action: none;
}

.modal-content {
  touch-action: pan-y;
}

/* Bottom nav safe area */
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Prevent double submission */
form.submitting button[type="submit"] {
  pointer-events: none;
  opacity: 0.7;
}

/* Touch device specific */
@media (hover: none) and (pointer: coarse) {
  .hover\:shadow-xl:hover {
    box-shadow: none;
  }
  
  .hover\:shadow-xl:active {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
}

/* Senior-friendly touch areas */
.senior-touch {
  min-height: 60px;
  padding: 16px 24px;
  font-size: 18px;
  font-weight: 500;
}

/* Error shake animation */
.error-shake {
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}