@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --header-height: 6.5rem;
  }

  summary {
    @apply list-none;
  }

  summary::-webkit-details-marker {
    @apply hidden;
  }

  turbo-frame {
    @apply w-full;
  }
}

.flash--notice {
  @apply text-green-700 bg-green-100
}

.flash--alert {
  @apply text-red-700 bg-red-100
}

.form--input-error {
  @apply border-red-600 border focus:outline-none
}

.form--error-message {
  @apply mt-1 text-sm text-red-600
}

.form--label-error {
  @apply text-red-600
}

.field_with_errors label {
  @apply text-red-500
}

.field_with_errors input {
  @apply focus:!ring-red-600;
}

:not(:defined) > * {
  @apply hidden;
}

@layer components {
  .button-primary {
    @apply bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition shadow-sm;
  }

  .button-secondary {
    @apply bg-white hover:bg-gray-100 text-gray-800 font-medium py-2 px-4 rounded-lg transition shadow-sm border border-gray-300;
  }

  .button-text {
    @apply text-blue-600 hover:text-blue-700 hover:bg-blue-50 font-medium py-2 px-4 rounded-lg transition;
  }

  .form-input {
    @apply mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm text-sm;
  }

  .form-select {
    @apply mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm text-sm;
  }

  .form-label {
    @apply block text-sm font-medium text-gray-700 mt-2 mb-1;
  }

  .flash-notice {
    @apply bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 rounded mb-4;
  }

  .flash-alert {
    @apply bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded mb-4;
  }
}