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

@layer utilities {
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
  }

  .scrollbar-thumb-gray-300::-webkit-scrollbar-thumb {
    background-color: rgb(209 213 219);
    border-radius: 3px;
  }

  .dark .scrollbar-thumb-gray-700::-webkit-scrollbar-thumb {
    background-color: rgb(55 65 81);
  }

  .scrollbar-track-transparent::-webkit-scrollbar-track {
    background-color: transparent;
  }
}

/* Prevent scrollbar jitter - reserve space but hide until needed */
html {
  scrollbar-gutter: stable;
}

/* Custom scrollbar styling - emerald green */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #10b981;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #059669;
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: #10b981 transparent;
}

/* ==========================================================================
   Mobile-First Touch Target Utilities
   ========================================================================== */
@layer utilities {
  /* Minimum touch target utility - 44x44px per WCAG 2.1 AAA */
  .touch-target {
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Large touch target for primary actions - 56x56px */
  .touch-target-lg {
    min-width: 56px;
    min-height: 56px;
    padding: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Container query utilities (requires @tailwindcss/container-queries) */
  @container (max-width: 640px) {
    .cq-sm\:hidden {
      display: none;
    }
  }
}

/* ==========================================================================
   Mobile Viewport and Text Adjustment
   ========================================================================== */
/* Prevent text size adjustment on mobile (iOS zoom on input focus) */
@media screen and (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
  }

  /* Ensure inputs don't zoom on focus (iOS) - use font-size: 16px minimum */
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px;
  }
}