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

/* Mobile-friendly touch targets */
@media (max-width: 1023px) {
  /* Ensure minimum touch target sizes */
  button, a, [role="button"] {
    min-height: 44px;
  }
  
  /* Better touch feedback */
  button:active, a:active {
    opacity: 0.7;
  }
}

/* Safe area insets for notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  /* Sidebar safe areas */
  .fixed.inset-y-0.left-0 {
    padding-top: env(safe-area-inset-top);
  }
}

/* Improve scrolling on mobile */
.overflow-x-auto,
.overflow-y-auto {
  -webkit-overflow-scrolling: touch;
}

/* Prevent text selection on UI elements */
nav, button, [role="button"] {
  -webkit-user-select: none;
  user-select: none;
}

/* Hide scrollbar on mobile sidebar */
@media (max-width: 1023px) {
  nav.overflow-y-auto::-webkit-scrollbar {
    display: none;
  }
  nav.overflow-y-auto {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}