@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;
}

/* 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;
  }

  .mention {
    @apply text-indigo-600 font-semibold;
  }

  .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;
  }

  /* Full-screen modal transitions */
  .modal-panel {
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 1;
    transform: translateY(0);
  }

  .modal-entering .modal-panel {
    opacity: 0;
    transform: translateY(40px);
  }

  .modal-entered .modal-panel {
    opacity: 1;
    transform: translateY(0);
  }

  .modal-exiting .modal-panel {
    opacity: 0;
    transform: translateY(40px);
    transition-duration: 200ms;
  }
}

/* Ensure all form controls have visible borders in Tailwind v4 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  @apply border border-gray-300;
}