/**
 * @file
 * Vacancy Listing Component Styles
 *
 * About You inspired filter design:
 * - Clean, minimal aesthetic
 * - Bordered dropdowns
 * - Inline filter layout
 *
 * Source: https://corporate.aboutyou.de/en/our-jobs
 */

/* Filter Form Container */
.jobs-filter-form {
  @apply w-full;
}

/* Form element wrapper - makes elements inline */
.jobs-filter-form__fields .form-item {
  @apply mb-0 flex-1 min-w-40;
}

/* Labels inside form items */
.jobs-filter-form__fields .form-item label {
  @apply text-xs font-semibold uppercase tracking-wider text-gray-500 mb-1.5 block;
}

/* Select dropdowns - About You style */
.jobs-filter-form__fields select,
.vacancy-listing__filters select {
  @apply w-full px-4 py-2.5 text-sm text-gray-900 bg-white
         border border-gray-300 rounded-md
         appearance-none cursor-pointer
         hover:border-gray-400
         focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:outline-none
         transition-all duration-200;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

/* Text inputs - Search style */
.jobs-filter-form__fields input[type="text"],
.jobs-filter-form__fields input[type="search"] {
  @apply w-full px-4 py-2.5 text-sm text-gray-900 bg-white
         border border-gray-300 rounded-md
         placeholder:text-gray-400
         hover:border-gray-400
         focus:border-primary-500 focus:ring-2 focus:ring-primary-500/20 focus:outline-none
         transition-all duration-200;
}

/* Submit button */
.jobs-filter-form__fields input[type="submit"],
.jobs-filter-form__fields button[type="submit"],
.vacancy-listing__filters input[type="submit"] {
  @apply px-6 py-2.5 text-sm font-semibold text-white
         bg-primary-600 border border-transparent rounded-md
         hover:bg-primary-700
         focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500
         transition-all duration-200 cursor-pointer shrink-0;
}

/* Reset button */
.jobs-filter-form__fields input[type="reset"],
.vacancy-listing__filters input[type="reset"] {
  @apply px-4 py-2.5 text-sm font-medium text-gray-700
         bg-white border border-gray-300 rounded-md
         hover:bg-gray-50
         focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500
         transition-all duration-200 cursor-pointer;
}

/* Hide descriptions in compact filter view */
.jobs-filter-form__fields .form-item .description {
  @apply hidden;
}

/* Form actions wrapper */
.jobs-filter-form__fields .form-actions {
  @apply flex gap-2 items-end shrink-0;
}

/* Table header styling */
.vacancy-listing__header {
  @apply rounded-t-lg;
}

/* Ensure rows have proper rounded corners */
.vacancy-listing__rows {
  @apply border border-gray-200;
}

/* Responsive adjustments */
@media (max-width: 1023px) {
  .jobs-filter-form__fields .form-item {
    @apply w-full;
  }
}