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

/* ENQ-1131: iOS Safari の長押しメニュー（リンクの「新規タブで開く」／画像の「写真に追加」）を抑止する。
   iOS はリンク・画像の長押しで contextmenu を発火せず独自のプレビュー／アクションメニューを出すため、
   prevent_context_menu_controller の preventDefault では止まらない。実際にメニューを出させないのは
   この CSS の役割で、コントローラ側の長押し検出は理由を伝えるアラートだけを担当する。

   【置き場所】
   custom_survey_js.css ではなくここに置く。custom_survey_js.css を読むのは survey / private_survey
   レイアウトだけで、完了画面（survey_completed）は tailwind しか読まない。あちらにも
   data-controller="prevent-context-menu" が付いており「回答を編集する」リンクがあるため、
   custom_survey_js.css に書くと完了画面だけ「アラートは出るがメニューも出る」非対称になる。

   【適用範囲】
   セレクタで回答画面（survey / survey_completed レイアウトの body）だけに限定する。管理画面には当てない。
   入力欄（input / textarea）には当てないこと。長押しのカーソル移動・選択・貼り付けが出なくなり、
   FA（自由回答）設問の入力が著しく不便になる。
   なお a / img 全体が対象なので、ファイル設問で回答者自身がアップロードしたプレビュー画像・
   ダウンロードリンクも長押しメニューが出なくなる（通常タップでのダウンロードは従来どおり可能）。 */
[data-controller~='prevent-context-menu'] a,
[data-controller~='prevent-context-menu'] img {
  -webkit-touch-callout: none;
}

/* 音声用シンプルプレイヤー（ENQ-1005 / <audio class="no-seek">）。
   index.js の setupSimpleAudio が挿す再生ボタンと、読み込み失敗時にそれと差し替える案内。

   custom_survey_js.css ではなくここに置くのは、読み込み順がレイアウトで変わるため。
   application レイアウトは custom_survey_js.css（stylesheet_link_tag :app が
   app/assets 配下の全 CSS を展開して含む）を survey-core より**前**に読むが、
   survey / private_survey レイアウトは survey-core より**後**に読む。
   tailwind は全レイアウトで survey-core より前に固定なので、こちらに置けば
   「survey-core より先に読まれる＝詳細度で勝つ必要がある」という前提を一つにできる
   （デザイナ・プレビュー・回答画面で同じ見た目にする）。
   @layer components には入れないこと。走査結果に依存させないため外に置く
   （クラス名を付けるのは実行時のJSで、走査の設定次第で出力から外れうる位置にある）。

   セレクタを2本書くのは survey-core の `.sd-html button`（0,1,1）に勝つため。HTML設問の中身は
   必ず .sd-html 配下に描画されるので、`.simple-audio-btn` 単体（0,1,0）ではテーマ色のボタンに
   戻ってしまう。tailwind は survey-core より先に読まれ同点だと負けるので、`:hover` / `:focus`
   （どちらも 0,2,1 の規則がある）にも `.sd-html button.simple-audio-btn:…`（0,3,1）を併記する。
   !important は使わない。
   `.sd-html button` が指定するプロパティは .sd-html の内外で見た目を揃えるためすべて明示する
   （align-items は inline-block では効かず、transition: box-shadow は box-shadow を none 固定に
   しているので動かないため、この2つだけ書かない）。

   見た目は角丸の矩形・中立色（ピル型／アイコン案は不採用。
   ENQ-1005 スレッドでのPO判断・2026-09-09。コメント 809754145）。
   テーマの主要色（--sjs-primary-backcolor）は使わない: 「次へ」等と同色だと送信ボタンに見える。 */
.simple-audio-btn,
.sd-html button.simple-audio-btn {
  display: inline-block;
  /* 文言が「再生する」⇔「一時停止」と入れ替わってもボタン幅が動かないようにする */
  min-width: 9em;
  padding: 8px 20px;
  border: 1px solid #bdbdbd;
  border-radius: 4px;
  /* フォーカス表示は :focus-visible の outline だけに任せる */
  outline: none;
  background-color: #e0e0e0;
  box-shadow: none;
  color: #222;
  /* .sd-html button はテーマのフォント変数を当てるので、周囲の文章に揃え直す */
  font-family: inherit;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  vertical-align: baseline;
  user-select: none;
  cursor: pointer;
}

.simple-audio-btn:hover,
.sd-html button.simple-audio-btn:hover {
  background-color: #d0d0d0;
}

/* survey-core の `.sd-html button:focus` が出すテーマ主要色のリングを打ち消す
   （マウスクリックでも出るうえ主要導線と同色）。表示は下の :focus-visible が受け持つ */
.simple-audio-btn:focus,
.sd-html button.simple-audio-btn:focus {
  box-shadow: none;
}

/* キーボード操作時のフォーカス位置を見せる。マウスクリックでは出したくないので :focus-visible */
.simple-audio-btn:focus-visible,
.sd-html button.simple-audio-btn:focus-visible {
  outline: 2px solid #333;
  outline-offset: 2px;
}

/* 読み込み失敗時の案内。setupSimpleAudio が再生ボタンを外し、その位置へ入れる <p>。
   色は同じ「メディアを再生できなかった」場面の先例 ENQ-1012（external_video.js の buildNotice）
   に揃えた。あちらは inline style でクラスが無いため流用できるのは値だけ。
   バリデーションの .sd-question__erbox は質問枠に密結合したレイアウト規則（position: sticky・
   負のマージン）を伴い、ボタンの位置へ置くと崩れるので使わない。
   併記は `.sd-html p`（0,1,1）が font-size / line-height を奪うため（上のボタンと同じ理由）。 */
.simple-audio-error,
.sd-html .simple-audio-error {
  margin: 0.5em 0 0;
  color: #b45309;
  font-size: 0.9em;
  line-height: 1.6;
}

/* controls を外した <audio> は中身の無い箱として残るため隠す。付けるのは装着が最後まで
   成功した要素だけ（失敗時も付けたまま。読み込めていない以上 controls を戻しても鳴らない）。
   audio.no-seek を静的に隠してはいけない: JS が動かない環境で再生手段ごと消える。 */
audio.simple-audio-ready {
  display: none;
}

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

  .btn-tool {
    @apply whitespace-nowrap inline-flex items-center justify-center rounded-md px-3 py-1.5 text-sm font-medium
      min-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;
  }

}