@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles for clickable issue rows */
.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

/* Drag and drop styles */
.draggable {
  cursor: grab;
}

.draggable:hover {
  @apply bg-gray-50;
}

.dragging {
  cursor: grabbing;
  @apply opacity-50 bg-gray-100;
}

.drag-over {
  @apply border-2 border-blue-500 bg-blue-50;
}

/* Import Trix */
@import "trix/dist/trix";

/* Custom form styles to work with Devise forms */
@layer components {
  .form-input {
    @apply block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6;
  }

  .form-label {
    @apply block text-sm font-medium leading-6 text-gray-900;
  }

  .btn-primary {
    @apply flex w-full justify-center rounded-md bg-blue-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600;
  }

  /* Add Action Text styles */
  .trix-content {
    @apply max-w-none;
  }

  .trix-button-group {
    @apply border border-gray-300 rounded-md overflow-hidden;
  }

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

  .trix-button--icon {
    @apply w-5 h-5;
  }

  .trix-button--active {
    @apply bg-gray-200;
  }

  .trix-content ul {
    @apply list-disc pl-5;
  }

  .trix-content ol {
    @apply list-decimal pl-5;
  }

  .btn-danger {
    @apply inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
  }

  .btn-success {
    @apply inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500;
  }

  .auth-container {
    @apply flex min-h-full flex-col justify-center px-6 py-12 lg:px-8;
  }

  .auth-form-container {
    @apply mt-10 sm:mx-auto sm:w-full sm:max-w-sm;
  }

  .auth-heading {
    @apply mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900;
  }

  /* Navigation toolbar styles */
  .nav-container {
    @apply bg-white shadow;
  }

  .nav-link {
    @apply inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium;
  }

  .nav-link-active {
    @apply border-blue-500 text-gray-900;
  }

  .nav-link-inactive {
    @apply border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700;
  }

  /* Breadcrumb styles */
  .breadcrumbs {
    @apply bg-white px-4 py-3 flex items-center border-b border-gray-200;
  }

  .breadcrumb-item {
    @apply inline-flex items-center text-sm font-medium;
  }

  .breadcrumb-active {
    @apply text-gray-500;
  }

  .breadcrumb-link {
    @apply text-gray-700 hover:text-blue-600;
  }
}

/* Additional styles for all input fields to ensure proper padding */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  @apply px-3;
}