/*
 * 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 styles for menu item cards */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* QR Code high-DPI rendering */
.qr-code canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: 100%;
  height: auto;
}

.card:hover {
  transform: translateY(-2px);
}

.card-title {
  line-height: 1.3;
}

/* Responsive grid adjustments */
@media (max-width: 768px) {
  .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Gradient text for branding */
.gradient-text {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Mobile-first responsive adjustments for auth pages */
@media (max-width: 640px) {
  .auth-form-container {
    margin: 0 1rem;
    padding: 1.5rem;
  }

  .auth-marketing-content {
    margin-top: 2rem;
    padding: 1rem;
  }

  .auth-form-spacing {
    gap: 1rem;
  }
}

/* Ensure proper touch targets on mobile */
@media (max-width: 768px) {
  .auth-button {
    min-height: 48px;
    padding: 0.75rem 1rem;
  }

  .auth-input {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* Improve readability on smaller screens */
@media (max-width: 480px) {
  .auth-title {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  .auth-subtitle {
    font-size: 0.875rem;
    line-height: 1.4;
  }
}