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

@layer base {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select {
    @apply block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 focus:outline-none sm:text-sm;
  }

  input[type="checkbox"] {
    @apply h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500;
  }

  label {
    @apply block text-sm font-medium text-gray-700;
  }
}

/* バウンスドットローダー共通スタイル */
@keyframes bounce-dot {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(-12px); opacity: 1; }
}

.bounce-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.bounce-loader .dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  animation: bounce-dot 1.2s ease-in-out infinite;
}

.bounce-loader .dot:nth-child(1) { background-color: #818cf8; animation-delay: 0s; }
.bounce-loader .dot:nth-child(2) { background-color: #6366f1; animation-delay: 0.1s; }
.bounce-loader .dot:nth-child(3) { background-color: #4f46e5; animation-delay: 0.2s; }
.bounce-loader .dot:nth-child(4) { background-color: #6366f1; animation-delay: 0.3s; }
.bounce-loader .dot:nth-child(5) { background-color: #818cf8; animation-delay: 0.4s; }

/* Kaminari ページネーション */
nav.pagination {
  @apply flex items-center justify-center gap-1;

  span, em, a {
    @apply inline-flex items-center justify-center min-w-[2rem] h-8 px-2 text-sm rounded-md;
  }

  a {
    @apply text-gray-700 hover:bg-gray-100 transition-colors;
  }

  em {
    @apply not-italic;
  }

  span.current {
    @apply bg-indigo-600 text-white font-semibold;
  }

  span.gap {
    @apply text-gray-400;
  }

  span.prev, span.next, span.first, span.last {
    a {
      @apply text-gray-500 hover:text-gray-700;
    }
  }

  span.prev.disabled, span.next.disabled,
  span.first.disabled, span.last.disabled {
    @apply text-gray-300 cursor-default;
  }
}

.ts-wrapper {
  @apply w-full;

  &.single .ts-control {
    @apply rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm;
    min-height: 38px;
  }

  &.single .ts-control:after {
    border-width: 4px 4px 0;
    border-color: #9ca3af transparent transparent;
    margin-top: -2px;
  }

  &.focus .ts-control {
    @apply border-indigo-500 ring-2 ring-indigo-500/20 outline-none shadow-sm;
  }

  .ts-control > input {
    @apply text-sm;
  }

  .ts-control > input::placeholder {
    @apply text-gray-400;
  }

  .ts-dropdown {
    @apply rounded-lg border border-gray-200 bg-white shadow-lg mt-1 text-sm;
  }

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

  .ts-dropdown .active {
    @apply bg-indigo-50 text-indigo-700;
  }

  .ts-dropdown .no-results {
    @apply px-3 py-2 text-gray-400 text-sm;
  }

  .clear-button {
    @apply text-gray-400 text-base;
  }
}