/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (not including Tailwind utilities) should go in separate files under app/assets/stylesheets.
 */

/* Custom styles on top of Tailwind */

/* Smooth transitions for flash messages */
#flash-container {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Touch-friendly tap targets */
@media (hover: none) {
  button, a, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Center dialog modals vertically and horizontally */
dialog {
  margin: auto;
  max-width: 28rem;
  width: calc(100% - 2rem);
}

/* OTP code input styling */
input[inputmode="numeric"] {
  -webkit-text-security: none;
  caret-color: #6366f1;
}