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

@layer components {
  /* TinyMCE Styling */
  .tox-tinymce {
    border-radius: 0.5rem !important;
  }
  
  /* Make sure the TinyMCE content area fills the available height */
  .tox-tinymce iframe {
    min-height: 100% !important;
  }
  
  /* Specific styling for content editor which should be larger */
  #document_content_ifr {
    min-height: 550px !important;
  }
  
  /* Styling for select options */
  .ts-wrapper {
    @apply w-full;
  }

  .ts-wrapper.multi {
    @apply relative;
  }

  .ts-wrapper.multi .ts-control {
    @apply flex flex-wrap gap-2 p-2 bg-white border border-gray-300 rounded-lg shadow-sm min-h-[42px];
  }

  .ts-wrapper.multi.focus .ts-control {
    @apply outline-2 outline outline-offset-2 outline-blue-500 border-blue-500;
  }

  .ts-wrapper.multi .ts-control > input {
    @apply bg-transparent border-none shadow-none outline-none p-0 m-0 text-sm flex-grow min-w-[60px];
  }

  .ts-dropdown {
    @apply absolute z-50 w-full bg-white mt-1 rounded-lg border border-gray-200 shadow-lg;
  }

  .ts-dropdown-content {
    @apply max-h-64 overflow-y-auto;
  }

  .ts-dropdown .option {
    @apply px-3 py-2 flex items-center gap-2 cursor-pointer hover:bg-blue-50;
  }

  .ts-dropdown .active {
    @apply bg-gray-100;
  }

  .ts-dropdown .create {
    @apply px-4 py-2 text-gray-500;
  }

  .ts-wrapper.multi .ts-control > div {
    @apply inline-flex items-center bg-gray-100 text-gray-900 rounded-full px-3 py-1 text-sm;
  }

  .ts-wrapper.multi .ts-control > div.active {
    @apply bg-blue-50 text-blue-700;
  }

  .ts-wrapper.plugin-remove_button .item .remove {
    @apply border-l-0 pl-1.5 text-gray-400 hover:text-gray-600;
  }

  .checkbox-container {
    @apply inline-flex items-center justify-center w-4 h-4 border rounded-sm border-gray-300;
  }

  .ts-dropdown .option.selected .checkbox-container {
    @apply bg-blue-500 border-blue-500;
  }

  .ts-hidden-accessible {
    @apply sr-only;
  }
}