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

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

  /* フィルタセクション開閉 */
  .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);
  }
}