@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
      disabled:bg-gray-400 disabled:cursor-not-allowed disabled:hover:bg-gray-400;
  }

  .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,
  label:has(+ [data-controller~="searchable-select"] input[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;
  }

  /* Jobフォーム内の未選択 select（value="" がchecked）を警告色で目立たせる */
  .survey-job-form select:has(option[value=""]:checked) {
    color: theme('colors.yellow.700');
    background-color: theme('colors.yellow.50');
    border-color: theme('colors.yellow.400');
  }

  /* マニュアルページ専用スタイル */
  .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;
  }

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

  .logic-group-header__cell {
    @apply py-2 px-4 text-sm font-semibold text-gray-700 bg-gray-100 border-b border-gray-300;
  }

  /* FastEntry テーブルモード（一括入力ダイアログ内 jspreadsheet） */
  .fast-entry-mode-switcher {
    @apply flex gap-2 mb-2;
  }

  .fast-entry-mode-switcher__btn {
    @apply whitespace-nowrap inline-flex items-center rounded-md px-3 py-1 text-sm font-medium
      text-gray-600 bg-gray-100
      hover:bg-gray-200
      transition-colors duration-200;
  }

  .fast-entry-mode-switcher__btn--active {
    @apply bg-indigo-100 text-indigo-700;
  }

  /* テキスト入力モードの textarea（fast_entry_finished.js の rows: 25）と高さを揃える固定高。
     ★rows: 25 と連動。変更時は両方調整（textarea は padding 分やや高いが差は許容）。

     幅は w-max（表の自然幅に追従）。モーダルの枠は中身の幅で決まるため、表の全列
     （右端の visibleIf 列まで）が横スクロールなしで見え、画面幅の上限に達したときだけ
     max-w-full が効いて overflow-x-auto の内側スクロールにフォールバックする。
     縦スクロールバーは overflow-y-scroll で常時表示にし、行数が増えたときに後から
     スクロールバーが出てその幅の分だけ横スクロールが発生するのを防ぐ。 */
  .fast-entry-table {
    @apply h-[600px] w-max min-w-full max-w-full overflow-x-auto overflow-y-scroll border border-gray-300 rounded-md;
  }

  /* jspreadsheet の align:'left' はデータセルだけでなくヘッダー(thead)にも効いてしまう。
     ヘッダーは中央寄せが見やすいので戻す。jspreadsheet が inline style を付与するため
     !important で上書きする必要がある。 */
  .fast-entry-table thead td {
    text-align: center !important;
  }

  /* 排他 checkbox は native の既定サイズ（約13px）が小さく押しづらいため拡大する。
     width/height は一部ブラウザ（Safari 等）で効かないので transform: scale を使う。 */
  .fast-entry-table input[type='checkbox'] {
    transform: scale(1.5);
    cursor: pointer;
  }

  /* 列リサイズグリップ：ヘッダー右端に重ねる掴みやすい領域。
     jspreadsheet 標準の判定は列境界 6px と狭いため、内側 14px を掴めるようにする。
     ヘッダー td は overflow:hidden なので、はみ出さないよう right:0 でセル内に収める。 */
  .fast-entry-col-grip {
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 100%;
    z-index: 3;
    cursor: col-resize;
  }

  /* 青い提示線：セル右境界に沿った縦線。hover / ドラッグ中(--active)のみ表示して
     「ここで列幅を変えられる」ことを示す。 */
  .fast-entry-col-grip::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    @apply bg-transparent transition-colors duration-150;
  }

  .fast-entry-col-grip:hover::after,
  .fast-entry-col-grip--active::after {
    @apply bg-blue-500;
  }

  /* ドラッグ中に確定位置を示す青い縦ガイド線。body 直下に fixed 配置するため、
     ダイアログより手前に出るよう z-index を高く取る（クリックは透過）。 */
  .fast-entry-col-guide {
    position: fixed;
    width: 2px;
    z-index: 100000;
    pointer-events: none;
    @apply bg-blue-500;
  }

  .fast-entry-hidden {
    @apply hidden;
  }

  .fast-entry-error-bar {
    @apply mb-2 px-3 py-2 text-sm rounded-md
      text-red-700 bg-red-50 border border-red-300;
  }

}