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

@import "tailwind/application.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .input-field {
    @apply shadow-sm focus:ring-[#34eb8c] focus:border-[#34eb8c] block w-full sm:text-sm border-gray-300 rounded-md;
  }

  .field_with_errors .input-field {
    @apply border-red-500 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500;
  }

  /* Custom form styles for better visual hierarchy */
  .form-card {
    @apply bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden;
  }

  .form-card-header {
    @apply px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-gray-100;
  }

  .form-card-body {
    @apply px-6 py-6;
  }

  /* Enhanced button styles */
  .btn-primary {
    @apply inline-flex items-center px-6 py-3 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-[#34eb8c] to-[#2dd47a] hover:from-[#2dd47a] hover:to-[#28c06f] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#34eb8c] transition-all duration-200 transform hover:scale-105;
  }

  .btn-secondary {
    @apply inline-flex items-center px-6 py-3 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#34eb8c] transition-colors duration-200;
  }

  /* Enhanced input styles */
  .form-input {
    @apply block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#34eb8c] focus:border-[#34eb8c] transition-colors duration-200;
  }

  .form-select {
    @apply block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#34eb8c] focus:border-[#34eb8c] transition-colors duration-200;
  }

  .form-textarea {
    @apply block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#34eb8c] focus:border-[#34eb8c] transition-colors duration-200;
  }

  /* Toggle switch styles */
  .toggle-switch {
    @apply relative inline-block w-12 align-middle select-none transition duration-200 ease-in;
  }

  .toggle-checkbox {
    @apply absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer transition-transform duration-200 ease-in-out;
  }

  .toggle-checkbox:checked {
    transform: translateX(1.5rem);
  }

  .toggle-label {
    @apply block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer;
  }

  .toggle-checkbox:checked + .toggle-label {
    background-color: #34eb8c;
  }

  /* Enhanced focus states for better accessibility */
  .focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-[#34eb8c] focus:ring-offset-2;
  }

  /* Gradient backgrounds */
  .gradient-primary {
    background: linear-gradient(135deg, #34eb8c 0%, #2dd47a 100%);
  }

  .gradient-primary-hover {
    background: linear-gradient(135deg, #2dd47a 0%, #28c06f 100%);
  }
}