@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.
   Matches by exclusion so that inputs with no explicit type (which default to
   text) are covered too — `input[type="text"]` does not match `<input>`. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
textarea,
select {
  @apply border border-gray-300;
}

/* Native select chrome is OS-specific and clashes with everything around it.
   Draw our own chevron so selects match the text inputs beside them. */
select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  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.5rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem 1.25rem;
  padding-right: 2.25rem;
  print-color-adjust: exact;
}

select:disabled {
  @apply cursor-not-allowed bg-gray-50 text-gray-500;
}