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


@layer base {
  :root {
    --rounded-box: 0.5rem;
    --rounded-btn: 0.375rem;
    --rounded-badge: 0.25rem;
    --animation-btn: 0.25s;
    --animation-input: 0.2s;
    --btn-focus-scale: 0.95;
    --border-btn: 1px;
    --tab-border: 1px;
    --tab-radius: 0.5rem;
  }
}

@layer components {
  /* Custom component overrides */
  .btn {
    @apply font-medium;
  }

  .card {
    @apply shadow-md;
  }

  /* Modern Form Styling - Best practices for beautiful forms */

  /* Text inputs and textareas */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="week"],
  input[type="time"],
  textarea {
    @apply block w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-gray-900 placeholder-gray-400 shadow-sm transition-colors duration-200;
    @apply focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-0;
    @apply hover:border-gray-400;
  }

  /* Select dropdowns */
  select {
    @apply block w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 pr-10 text-gray-900 shadow-sm transition-colors duration-200;
    @apply focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-0;
    @apply hover:border-gray-400 appearance-none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
  }

  /* Textarea specific styling */
  textarea {
    @apply min-h-[120px] resize-y;
  }

  /* Checkboxes */
  input[type="checkbox"] {
    @apply h-4 w-4 rounded border-gray-300 bg-white text-indigo-600 transition-colors duration-200;
    @apply focus:ring-2 focus:ring-indigo-500 focus:ring-offset-0;
    @apply hover:border-gray-400 cursor-pointer;
  }

  /* Radio buttons */
  input[type="radio"] {
    @apply h-4 w-4 border-gray-300 bg-white text-indigo-600 transition-colors duration-200;
    @apply focus:ring-2 focus:ring-indigo-500 focus:ring-offset-0;
    @apply hover:border-gray-400 cursor-pointer;
  }

  /* Disabled state */
  input:disabled,
  select:disabled,
  textarea:disabled {
    @apply bg-gray-50 text-gray-500 cursor-not-allowed opacity-60;
    @apply hover:border-gray-300;
  }

  /* Invalid state */
  input:invalid:not(:placeholder-shown),
  select:invalid:not(:placeholder-shown),
  textarea:invalid:not(:placeholder-shown) {
    @apply border-red-300 text-red-900;
    @apply focus:border-red-500 focus:ring-red-500;
  }

  /* Labels */
  label {
    @apply block text-sm font-medium leading-6 text-gray-900 mb-2;
  }

  /* Help text that appears under form fields */
  .form-help {
    @apply mt-2 text-sm text-gray-500;
  }

  /* Error messages */
  .form-error {
    @apply mt-2 text-sm text-red-600;
  }

  /* Form field wrapper for consistent spacing */
  .form-field {
    @apply mb-6;
  }

  /* Optional: Smaller variant for compact forms */
  .form-input-sm {
    @apply px-3 py-1.5 text-sm;
  }

  /* Optional: Larger variant for prominent forms */
  .form-input-lg {
    @apply px-5 py-3 text-lg;
  }

  /* File inputs */
  input[type="file"] {
    @apply block w-full text-sm text-gray-900 file:mr-4 file:py-2 file:px-4;
    @apply file:rounded-lg file:border-0 file:bg-indigo-50 file:text-indigo-700;
    @apply file:font-medium file:text-sm hover:file:bg-indigo-100 file:cursor-pointer;
  }

  /* Trix Editor Customizations */
  trix-editor {
    @apply min-h-[300px] p-4 bg-white rounded-md;
  }

  trix-editor:focus {
    @apply outline-none ring-2 ring-indigo-500 border-indigo-500;
  }

  trix-toolbar .trix-button-group {
    @apply border-gray-300;
  }

  trix-toolbar .trix-button {
    @apply text-gray-700 hover:bg-gray-100;
  }

  trix-toolbar .trix-button--icon {
    @apply text-gray-600;
  }

  trix-toolbar .trix-button.trix-active {
    @apply bg-indigo-100 text-indigo-700;
  }

  /* Prose styling for rich text content */
  .prose {
    @apply text-gray-900 max-w-none;
  }

  .prose p {
    @apply mb-4;
  }

  .prose strong {
    @apply font-bold;
  }

  .prose em {
    @apply italic;
  }

  .prose ul {
    @apply list-disc pl-6 mb-4;
  }

  .prose ol {
    @apply list-decimal pl-6 mb-4;
  }

  .prose a {
    @apply text-indigo-600 underline hover:text-indigo-800;
  }
}