@tailwind base;
@tailwind components;
@tailwind utilities;

/* フォーム要素のデフォルトスタイル */
@layer base {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="url"],
  select,
  textarea {
    @apply w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm
           focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500;
  }

  select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1.25rem;
    @apply pr-8;
  }

  select:disabled {
    @apply bg-gray-100 cursor-not-allowed;
    color: #9ca3af;
    -webkit-text-fill-color: #9ca3af;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  }

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

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

  th {
    @apply whitespace-nowrap;
  }

  thead {
    @apply sticky top-0 z-10;
  }
}

/* トグルスイッチ */
@layer components {
  .toggle-switch {
    @apply relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full
           border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out;
  }
  .toggle-switch::after {
    content: "";
    @apply pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0
           transition-transform duration-200 ease-in-out translate-x-0;
  }
  .toggle-checkbox {
    @apply sr-only;
  }
  .toggle-checkbox:checked + .toggle-switch {
    @apply bg-emerald-500;
  }
  .toggle-checkbox:checked + .toggle-switch::after {
    @apply translate-x-5;
  }
  .toggle-checkbox:focus + .toggle-switch {
    @apply ring-2 ring-emerald-500 ring-offset-2;
  }

  /* 新規リサーチボタン - パルスアニメーション */
  .btn-new-research {
    @apply inline-flex items-center gap-2 rounded-full
           bg-gradient-to-r from-blue-600 via-indigo-600 to-purple-600
           px-8 py-3.5 text-lg font-bold text-white
           shadow-lg shadow-blue-500/30
           hover:from-blue-700 hover:via-indigo-700 hover:to-purple-700
           hover:shadow-xl hover:shadow-blue-500/40 hover:scale-105
           focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2
           cursor-pointer
           disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100
           transition-all duration-200;
    animation: cta-glow 2s ease-in-out infinite;
  }

  .btn-new-research:disabled {
    animation: none;
  }

  @keyframes cta-glow {
    0%, 100% {
      box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3),
                  0 0 0 0 rgba(99, 102, 241, 0.0);
    }
    50% {
      box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45),
                  0 0 0 4px rgba(99, 102, 241, 0.15);
    }
  }

  /* ロケーションフィルタ セグメントボタン */
  .segment-btn {
    @apply inline-block px-4 py-1 text-xs font-medium rounded
           text-gray-500 transition-all duration-150 select-none;
  }

  /* フィルタセクション開閉 */
  .filter-section summary::-webkit-details-marker {
    display: none;
  }
  .filter-section[open] > summary .chevron-icon {
    transform: rotate(180deg);
  }
  .filter-section:not([open]) > summary .chevron-icon {
    transform: rotate(0deg);
  }

  /* カテゴリ 3段カスケード: 常に3列横並び（select の最小幅で flex が折り返さないようにする） */
  .category-filter-selects {
    @apply grid gap-2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .category-filter-selects > * {
    min-width: 0;
  }
  @media (min-width: 1024px) {
    .category-filter-selects {
      gap: 0.75rem;
      grid-template-columns: minmax(11rem, 1.05fr) minmax(12rem, 1fr) minmax(12rem, 1fr);
    }
  }

}