JobApplicationForm_WatercolorArtistic

<div class="min-h-screen bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-gray-900 dark:via-purple-950 dark:to-teal-950 p-4 sm:p-6 lg:p-8 font-sans relative overflow-hidden">

  <!-- Background Artistic Elements (Subtle on light, more pronounced on dark) -->
  <div class="absolute inset-0 z-0 opacity-30 dark:opacity-20 pointer-events-none">
    <div class="absolute top-0 left-1/4 w-96 h-96 bg-gradient-to-br from-purple-200 to-pink-200 dark:from-purple-800 dark:to-pink-800 rounded-full mix-blend-multiply opacity-50 blur-3xl animate-blob"></div>
    <div class="absolute bottom-0 right-1/4 w-80 h-80 bg-gradient-to-br from-blue-200 to-green-200 dark:from-blue-800 dark:to-green-800 rounded-full mix-blend-multiply opacity-50 blur-3xl animate-blob animation-delay-2000"></div>
    <div class="absolute top-1/3 right-0 w-72 h-72 bg-gradient-to-br from-red-200 to-orange-200 dark:from-red-800 dark:to-orange-800 rounded-full mix-blend-multiply opacity-50 blur-3xl animate-blob animation-delay-4000"></div>
  </div>

  <style>
    @keyframes blob {
      0% { transform: translate(0px, 0px) scale(1); }
      33% { transform: translate(30px, -50px) scale(1.1); }
      66% { transform: translate(-20px, 20px) scale(0.9); }
      100% { transform: translate(0px, 0px) scale(1); }
    }
    .animate-blob {
      animation: blob 7s infinite;
    }
    .animation-delay-2000 { animation-delay: 2s; }
    .animation-delay-4000 { animation-delay: 4s; }
    /* Custom scrollbar for dark mode */
    .dark ::-webkit-scrollbar-track {
      background: #2a0044; /* Darker purple */
    }
    .dark ::-webkit-scrollbar-thumb {
      background-color: #6a00ff; /* Brighter purple for thumb */
      border-radius: 20px;
      border: 3px solid #2a0044;
    }
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px; /* For horizontal scrollbars */
    }
    ::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 10px;
    }
    ::-webkit-scrollbar-thumb {
        background-color: #d1d5db; /* Light gray */
        border-radius: 10px;
        border: 2px solid #f0f0f0;
    }
  </style>

  <div class="relative z-10 max-w-5xl mx-auto bg-white/70 dark:bg-gray-800/80 backdrop-filter backdrop-blur-lg rounded-3xl shadow-xl border border-white/50 dark:border-gray-700/50 p-6 sm:p-8 lg:p-10 transform transition-all duration-300 hover:shadow-2xl">
    <div class="text-center mb-8">
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400 mb-3 drop-shadow-lg leading-tight">
        Join Our Visionary Team
      </h1>
      <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 max-w-2xl mx-auto leading-relaxed">
        Embark on a creative journey with us. Fill out this form to apply for exciting opportunities.
      </p>
    </div>

    <form class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 lg:gap-10">

      <!-- Section: Personal Details -->
      <section class="md:col-span-2 p-5 sm:p-6 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl border border-blue-200/50 dark:border-gray-600/50 shadow-inner group">
        <h2 class="text-2xl font-bold mb-5 text-gray-800 dark:text-gray-100 flex items-center">
          Personal Details
          <span class="ml-2 text-blue-500 dark:text-blue-400 group-hover:rotate-3 transition-transform duration-300">✨</span>
        </h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <label for="first-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">First Name</label>
            <input type="text" id="first-name" name="first-name" placeholder="e.g., Aurora" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-purple-200 dark:focus:shadow-purple-900/50">
          </div>
          <div>
            <label for="last-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Last Name</label>
            <input type="text" id="last-name" name="last-name" placeholder="e.g., Rivers" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-purple-200 dark:focus:shadow-purple-900/50">
          </div>
          <div class="sm:col-span-2">
            <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
            <input type="email" id="email" name="email" placeholder="e.g., [email protected]" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-purple-200 dark:focus:shadow-purple-900/50">
          </div>
          <div class="sm:col-span-2">
            <label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone Number (Optional)</label>
            <input type="tel" id="phone" name="phone" placeholder="e.g., +1 (555) 123-4567" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-purple-200 dark:focus:shadow-purple-900/50">
          </div>
        </div>
      </section>

      <!-- Section: Experience -->
      <section class="md:col-span-2 p-5 sm:p-6 bg-gradient-to-br from-pink-50 to-orange-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl border border-pink-200/50 dark:border-gray-600/50 shadow-inner group">
        <h2 class="text-2xl font-bold mb-5 text-gray-800 dark:text-gray-100 flex items-center">
          Work Experience
          <span class="ml-2 text-pink-500 dark:text-pink-400 group-hover:rotate-6 transition-transform duration-300">🖌️</span>
        </h2>
        <div id="experience-container" class="space-y-6">
          <!-- Experience Entry 1 (Default) -->
          <div class="bg-white/60 dark:bg-gray-900/50 p-4 rounded-xl border border-white/70 dark:border-gray-700/70 shadow-sm flex flex-col sm:flex-row gap-4 items-start sm:items-end">
            <div class="flex-grow grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <label for="job-title-1" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Job Title</label>
                <input type="text" id="job-title-1" name="job-title-1" placeholder="e.g., Lead Designer" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
              </div>
              <div>
                <label for="company-1" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Company</label>
                <input type="text" id="company-1" name="company-1" placeholder="e.g., Creative Canvas Studio" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
              </div>
              <div class="col-span-1 sm:col-span-2">
                <label for="job-description-1" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Key Responsibilities/Achievements</label>
                <textarea id="job-description-1" name="job-description-1" rows="3" placeholder="Describe your role and impact..." class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm resize-y"></textarea>
              </div>
            </div>
            <button type="button" class="mt-2 sm:mt-0 px-4 py-2 bg-red-400 text-white rounded-lg shadow hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200 text-sm align-bottom flex-shrink-0">
              Remove
            </button>
          </div>
        </div>
        <button type="button" id="add-experience" class="mt-6 px-6 py-3 bg-gradient-to-r from-orange-400 to-red-400 text-white rounded-xl shadow-lg hover:shadow-xl hover:from-orange-500 hover:to-red-500 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 transition-all duration-300 transform hover:-translate-y-0.5 text-base font-semibold">
          Add More Experience <span aria-hidden="true">+</span>
        </button>
      </section>

      <!-- Section: Education -->
      <section class="md:col-span-2 p-5 sm:p-6 bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl border border-green-200/50 dark:border-gray-600/50 shadow-inner group">
        <h2 class="text-2xl font-bold mb-5 text-gray-800 dark:text-gray-100 flex items-center">
          Education Background
          <span class="ml-2 text-green-500 dark:text-green-400 group-hover:scale-105 transition-transform duration-300">🎓</span>
        </h2>
        <div id="education-container" class="space-y-6">
          <!-- Education Entry 1 (Default) -->
          <div class="bg-white/60 dark:bg-gray-900/50 p-4 rounded-xl border border-white/70 dark:border-gray-700/70 shadow-sm flex flex-col sm:flex-row gap-4 items-start sm:items-end">
            <div class="flex-grow grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div>
                <label for="degree-1" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Degree/Program</label>
                <input type="text" id="degree-1" name="degree-1" placeholder="e.g., MFA in Digital Arts" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-green-500 focus:border-green-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
              </div>
              <div>
                <label for="university-1" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">University/Institution</label>
                <input type="text" id="university-1" name="university-1" placeholder="e.g., Evergreen Arts Institute" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-green-500 focus:border-green-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
              </div>
            </div>
            <button type="button" class="mt-2 sm:mt-0 px-4 py-2 bg-red-400 text-white rounded-lg shadow hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200 text-sm align-bottom flex-shrink-0">
              Remove
            </button>
          </div>
        </div>
        <button type="button" id="add-education" class="mt-6 px-6 py-3 bg-gradient-to-r from-green-400 to-teal-400 text-white rounded-xl shadow-lg hover:shadow-xl hover:from-green-500 hover:to-teal-500 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700 transition-all duration-300 transform hover:-translate-y-0.5 text-base font-semibold">
          Add More Education <span aria-hidden="true">+</span>
        </button>
      </section>

      <!-- Section: Skills & Portfolio -->
      <section class="p-5 sm:p-6 bg-gradient-to-br from-yellow-50 to-orange-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl border border-yellow-200/50 dark:border-gray-600/50 shadow-inner group">
        <h2 class="text-2xl font-bold mb-5 text-gray-800 dark:text-gray-100 flex items-center">
          Skills & Portfolio
          <span class="ml-2 text-yellow-500 dark:text-yellow-400 group-hover:animate-bounce transition-transform duration-300">⭐</span>
        </h2>
        <div class="space-y-4">
          <div>
            <label for="skills" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Key Skills (comma-separated)</label>
            <input type="text" id="skills" name="skills" placeholder="e.g., UI/UX Design, Oil Painting, Animation" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-yellow-500 focus:border-yellow-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-yellow-200 dark:focus:shadow-yellow-900/50">
          </div>
          <div>
            <label for="portfolio-link" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Portfolio Link (Optional)</label>
            <input type="url" id="portfolio-link" name="portfolio-link" placeholder="e.g., https://yourportfolio.com" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-yellow-500 focus:border-yellow-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-yellow-200 dark:focus:shadow-yellow-900/50">
          </div>
        </div>
      </section>

      <!-- Section: Upload Files -->
      <section class="p-5 sm:p-6 bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl border border-purple-200/50 dark:border-gray-600/50 shadow-inner group">
        <h2 class="text-2xl font-bold mb-5 text-gray-800 dark:text-gray-100 flex items-center">
          Upload Your Artwork
          <span class="ml-2 text-purple-500 dark:text-purple-400 group-hover:rotate-12 transition-transform duration-300">🖼️</span>
        </h2>
        <div class="space-y-4">
          <div>
            <label for="resume" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Resume/CV (PDF preferred)</label>
            <input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" class="block w-full text-sm text-gray-700 dark:text-gray-300
              file:mr-4 file:py-2 file:px-4
              file:rounded-full file:border-0
              file:text-sm file:font-semibold
              file:bg-purple-100 file:text-purple-700
              hover:file:bg-purple-200 dark:file:bg-gray-600 dark:file:text-purple-300 dark:hover:file:bg-gray-700
              transition-colors duration-200 cursor-pointer">
          </div>
          <div>
            <label for="cover-letter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Cover Letter (Optional)</label>
            <input type="file" id="cover-letter" name="cover-letter" accept=".pdf,.doc,.docx" class="block w-full text-sm text-gray-700 dark:text-gray-300
              file:mr-4 file:py-2 file:px-4
              file:rounded-full file:border-0
              file:text-sm file:font-semibold
              file:bg-indigo-100 file:text-indigo-700
              hover:file:bg-indigo-200 dark:file:bg-gray-600 dark:file:text-indigo-300 dark:hover:file:bg-gray-700
              transition-colors duration-200 cursor-pointer">
          </div>
        </div>
      </section>

      <!-- Section: Additional Information -->
      <section class="md:col-span-2 p-5 sm:p-6 bg-gradient-to-br from-teal-50 to-cyan-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl border border-teal-200/50 dark:border-gray-600/50 shadow-inner group">
        <h2 class="text-2xl font-bold mb-5 text-gray-800 dark:text-gray-100 flex items-center">
          Creative Insights
          <span class="ml-2 text-teal-500 dark:text-teal-400 group-hover:rotate-6 transition-transform duration-300">💡</span>
        </h2>
        <div class="space-y-4">
          <div>
            <label for="desired-salary" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Desired Salary (USD/Year)</label>
            <input type="number" id="desired-salary" name="desired-salary" placeholder="e.g., 75000" min="0" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-teal-500 focus:border-teal-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-teal-200 dark:focus:shadow-teal-900/50">
          </div>
          <div>
            <label for="availability" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">When can you start?</label>
            <input type="date" id="availability" name="availability" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-teal-500 focus:border-teal-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-teal-200 dark:focus:shadow-teal-900/50">
          </div>
          <div>
            <label for="about-you" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tell us about your creative philosophy or what inspires you.</label>
            <textarea id="about-you" name="about-you" rows="4" placeholder="Your unique vision..." class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-teal-500 focus:border-teal-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-teal-200 dark:focus:shadow-teal-900/50 resize-y"></textarea>
          </div>
          <div class="flex items-center">
            <input type="checkbox" id="terms" name="terms" class="h-5 w-5 text-teal-600 dark:text-teal-400 border-gray-300 dark:border-gray-600 rounded focus:ring-teal-500 dark:focus:ring-teal-400 cursor-pointer">
            <label for="terms" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">I agree to the <a href="#" class="text-teal-600 hover:text-teal-800 dark:text-teal-400 dark:hover:text-teal-200 font-medium hover:underline">terms and conditions</a>.</label>
          </div>
        </div>
      </section>

      <!-- Submit Button -->
      <div class="md:col-span-2 text-center mt-6 sm:mt-8">
        <button type="submit" class="px-10 py-4 bg-gradient-to-r from-purple-500 via-indigo-500 to-blue-500 text-white font-bold text-lg rounded-full shadow-2xl hover:shadow-purple-400/50 dark:hover:shadow-purple-900/50 hover:scale-105 transition-all duration-300 ease-out transform focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-700 group relative overflow-hidden">
          <span class="relative z-10">Submit Application</span>
          <span class="absolute inset-0 bg-gradient-to-r from-pink-400 via-purple-300 to-blue-300 opacity-0 group-hover:opacity-100 transition-opacity duration-300 mix-blend-overlay"></span>
          <span class="absolute inset-0 rounded-full border-2 border-white/50 dark:border-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
        </button>
      </div>

    </form>
  </div>

  <!-- Sample JavaScript for 'Add More' functionality (not part of the HTML requirement, but for completeness) -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      let experienceCount = 1;
      let educationCount = 1;

      document.getElementById('add-experience')?.addEventListener('click', function() {
        experienceCount++;
        const container = document.getElementById('experience-container');
        const newEntry = document.createElement('div');
        newEntry.className = 'bg-white/60 dark:bg-gray-900/50 p-4 rounded-xl border border-white/70 dark:border-gray-700/70 shadow-sm flex flex-col sm:flex-row gap-4 items-start sm:items-end';
        newEntry.innerHTML = `
          <div class="flex-grow grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label for="job-title-${experienceCount}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Job Title</label>
              <input type="text" id="job-title-${experienceCount}" name="job-title-${experienceCount}" placeholder="e.g., Lead Designer" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
            </div>
            <div>
              <label for="company-${experienceCount}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Company</label>
              <input type="text" id="company-${experienceCount}" name="company-${experienceCount}" placeholder="e.g., Creative Canvas Studio" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
            </div>
            <div class="col-span-1 sm:col-span-2">
              <label for="job-description-${experienceCount}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Key Responsibilities/Achievements</label>
              <textarea id="job-description-${experienceCount}" name="job-description-${experienceCount}" rows="3" placeholder="Describe your role and impact..." class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm resize-y"></textarea>
            </div>
          </div>
          <button type="button" class="mt-2 sm:mt-0 px-4 py-2 bg-red-400 text-white rounded-lg shadow hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200 text-sm align-bottom flex-shrink-0 remove-item">
            Remove
          </button>
        `;
        container.appendChild(newEntry);

        newEntry.querySelector('.remove-item')?.addEventListener('click', function() {
          newEntry.remove();
        });
      });

      document.getElementById('add-education')?.addEventListener('click', function() {
        educationCount++;
        const container = document.getElementById('education-container');
        const newEntry = document.createElement('div');
        newEntry.className = 'bg-white/60 dark:bg-gray-900/50 p-4 rounded-xl border border-white/70 dark:border-gray-700/70 shadow-sm flex flex-col sm:flex-row gap-4 items-start sm:items-end';
        newEntry.innerHTML = `
          <div class="flex-grow grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label for="degree-${educationCount}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Degree/Program</label>
              <input type="text" id="degree-${educationCount}" name="degree-${educationCount}" placeholder="e.g., MFA in Digital Arts" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-green-500 focus:border-green-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
            </div>
            <div>
              <label for="university-${educationCount}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">University/Institution</label>
              <input type="text" id="university-${educationCount}" name="university-${educationCount}" placeholder="e.g., Evergreen Arts Institute" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-green-500 focus:border-green-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
            </div>
          </div>
          <button type="button" class="mt-2 sm:mt-0 px-4 py-2 bg-red-400 text-white rounded-lg shadow hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200 text-sm align-bottom flex-shrink-0 remove-item">
            Remove
          </button>
        `;
        container.appendChild(newEntry);

        newEntry.querySelector('.remove-item')?.addEventListener('click', function() {
          newEntry.remove();
        });
      });

      // Initial setup for existing remove buttons (if they were generated by server)
      document.querySelectorAll('.remove-item').forEach(button => {
        button.addEventListener('click', function() {
          button.closest('.flex.flex-col.sm\:flex-row')?.remove();
        });
      });
    });
  </script>
</div>