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



@layer components {

  .link {
    @apply whitespace-nowrap px-1 text-sm font-medium
    text-indigo-600
    hover:text-indigo-900
    transition-colors duration-200;
  }

  .btn-link {
    @apply whitespace-nowrap inline-flex items-center rounded-md px-4 py-2 text-sm font-medium self-center
      bg-blue-100
      hover:bg-blue-200 hover:text-indigo-900
      transition-colors duration-200;
  }

  .btn-disable {
    @apply whitespace-nowrap inline-flex items-center rounded-md px-4 py-2 text-sm font-medium self-center
      bg-gray-100 text-gray-400 cursor-not-allowed;
  }

  .link-back {
    @apply inline-flex whitespace-nowrap text-indigo-600 hover:text-indigo-900;
  }

  .btn-cancel {
    @apply whitespace-nowrap inline-flex items-center rounded-md px-4 py-2 text-sm font-medium self-center
      text-gray-600 bg-gray-100
      hover:bg-gray-200
      transition-colors duration-200;
  }

  .btn-submit {
    @apply whitespace-nowrap inline-flex items-center rounded-md px-4 py-2 text-sm font-medium self-center
      text-white bg-indigo-600
      hover:bg-indigo-500
      transition-colors duration-200
      focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2;
  }

  .btn-action {
    @apply whitespace-nowrap inline-flex items-center rounded-full border-2 px-2 py-0.5 text-[10px] font-normal self-center
      text-gray-600 bg-transparent border-blue-400
      hover:border-blue-500
      transition-colors duration-200
      focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-offset-1;
  }

  .btn-confirm {
    @apply whitespace-nowrap inline-flex items-center rounded-md px-4 py-2 text-sm font-medium self-center
      text-white bg-red-600
      hover:bg-red-500
      transition-colors duration-200
      focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2;
  }

  .btn-tool {
    @apply whitespace-nowrap inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium
      w-20 text-gray-600 bg-gray-100
      hover:bg-gray-200
      transition-colors duration-200;
  }

  .form-input {
    @apply block w-full rounded-md border-gray-300 shadow-sm
      focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm
      py-2 px-3;
  }

  .form-select {
    @apply block w-full rounded-md border-gray-300 shadow-sm
      focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm
      py-2 px-3;
  }

  .form-textarea {
    @apply block w-full rounded-md border-gray-300 shadow-sm
      focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm
      py-2 px-3;
  }

  .form-checkbox {
    @apply rounded border-gray-300 text-indigo-600 shadow-sm
      focus:border-indigo-500 focus:ring-indigo-500;
  }

  .form-radio {
    @apply border-gray-300 text-indigo-600 shadow-sm
      focus:border-indigo-500 focus:ring-indigo-500;
  }




  /* required属性を持つ入力フィールドに必須マークを表示 */
  label:has(+ input[required])::after,
  label:has(+ textarea[required])::after,
  label:has(+ select[required])::after {
    content: '必須';
    margin-left: 0.25rem;
    font-size: 0.75rem;
    color: theme('colors.red.500');
    background-color: theme('colors.red.100');
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
  }

  /* マニュアルページ専用スタイル */
  .manual-content h1 {
    @apply text-3xl font-bold text-gray-900 mb-4 mt-0;
  }

  .manual-content h2 {
    @apply text-2xl font-semibold text-gray-800 mb-4 mt-8;
    border-bottom: 2px solid #000;
    padding-bottom: 0.5rem;
  }

  .manual-content h3 {
    @apply text-lg font-medium text-gray-800 mb-2 mt-6 pt-2 pb-2 pl-3;
    background-color: #f3f4f6;
    border-left: 4px solid #6366f1;
  }

  .manual-content h4 {
    @apply text-base font-medium text-gray-700 mb-2 mt-4;
  }

  .manual-content p {
    @apply text-gray-700 mb-4 leading-7;
  }

  .manual-content ul {
    @apply list-disc list-inside text-gray-700 space-y-1 mb-4 pl-0;
  }

  .manual-content ol {
    @apply list-decimal list-inside text-gray-700 space-y-1 mb-4 pl-0;
  }

  .manual-content li {
    @apply my-1;
  }

  .manual-content strong {
    @apply font-semibold text-gray-900;
  }

  .manual-content a {
    @apply text-indigo-600 font-medium underline;
  }

  .manual-content a:hover {
    @apply text-indigo-800;
  }

  .manual-content code {
    @apply bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono text-pink-600;
  }

  .manual-content pre {
    @apply bg-gray-900 text-gray-100 rounded-lg p-4 mb-4 overflow-x-auto;
  }

  .manual-content pre code {
    @apply bg-transparent text-gray-100 p-0;
  }

  .manual-content blockquote {
    @apply border-l-4 border-yellow-400 bg-yellow-50 py-3 px-5 my-4 rounded-r;
  }

  .manual-content blockquote p {
    @apply text-sm text-yellow-700 mb-0;
  }

  .manual-content hr {
    @apply border-gray-300 my-8;
  }

  .manual-content table {
    @apply border-collapse w-full my-6;
  }

  .manual-content th {
    @apply border border-gray-300 bg-gray-100 px-4 py-2 font-semibold text-left;
  }

  .manual-content td {
    @apply border border-gray-300 px-4 py-2;
  }

  /* Markdown内でHTMLの情報ボックスを使う場合のスタイル */
  .manual-content .info-box {
    @apply p-4 mb-4 border-l-4 rounded-r flex items-center;
  }

  .manual-content .info-box.info {
    @apply bg-blue-50 border-blue-400;
  }

  .manual-content .info-box.info p {
    @apply text-sm text-blue-700 mb-0;
  }

  .manual-content .info-box.warning {
    @apply bg-yellow-50 border-yellow-400;
  }

  .manual-content .info-box.warning p {
    @apply text-sm text-yellow-700 mb-0;
  }

  .manual-content .info-box.error {
    @apply bg-red-50 border-red-400;
  }

  .manual-content .info-box.error p {
    @apply text-sm text-red-700 mb-0;
  }

  .manual-content .info-box.success {
    @apply bg-green-50 border-green-400;
  }

  .manual-content .info-box.success p {
    @apply text-sm text-green-700 mb-0;
  }

}