@import "tailwindcss";
@import "tom-select/dist/css/tom-select.css";

@layer components {
  .form-input {
    @apply block w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 placeholder-neutral-400 focus:border-neutral-900 focus:outline-none focus:ring-1 focus:ring-neutral-900;
  }

  .form-label {
    @apply text-xs font-medium uppercase tracking-wider text-neutral-500;
  }

  .btn {
    @apply inline-flex cursor-pointer items-center justify-center rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-2;
  }

  .btn-secondary {
    @apply inline-flex cursor-pointer items-center justify-center rounded-md border border-neutral-300 bg-white px-4 py-2 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-100 focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-2;
  }

  .card {
    @apply rounded-xl border border-neutral-200 bg-white shadow-sm;
  }

  .page-title {
    @apply text-2xl font-semibold tracking-tight text-neutral-900;
  }
}

/*
 * Tom Select overrides to match the monochrome form theme. Kept unlayered so
 * they win over Tom Select's own (unlayered) base styles.
 */
.ts-wrapper.single .ts-control,
.ts-wrapper.single .ts-control input {
  @apply text-sm text-neutral-900;
}

/* Strip the copied form-input border/padding so only the inner control frames the field. */
.ts-wrapper.form-input {
  @apply border-0 p-0 shadow-none;
}

.ts-wrapper .ts-control {
  @apply min-h-0 rounded-md border border-neutral-300 bg-white px-3 py-2 shadow-none;
}

.ts-wrapper.focus .ts-control {
  @apply border-neutral-900 ring-1 ring-neutral-900;
}

.ts-wrapper .ts-control input::placeholder {
  @apply text-neutral-400;
}

.ts-dropdown {
  @apply mt-1 rounded-md border border-neutral-200 text-sm text-neutral-900 shadow-lg;
}

.ts-dropdown .optgroup-header {
  @apply bg-white px-3 py-1 text-xs font-semibold uppercase tracking-wider text-neutral-500;
}

.ts-dropdown .option {
  @apply px-3 py-2;
}

.ts-dropdown .option.active {
  @apply bg-neutral-900 text-white;
}