@charset "UTF-8";
/* =============================================================
   公開側(_backend 以外)のフォームを「見える」状態に戻す。

   ★症状: 入力欄の枠線と余白が消え、項目名と入力値が地続きに見える。
     送信ボタンがフォームの途中(本文エディタの上)に重なる。
     例: イベント編集 `/event/eventmanage/edit/{id}`、メモ編集、コメント編集など。

   ★原因: 管理画面と同じ @layer の罠。tailwind.css の preflight は
       input, select, textarea { border-width: 0; padding: 0; ... }
     をレイヤ無しで当てており、mase.css の入力欄スタイルは `@layer mase` の
     中にあるため、詳細度に関係なくレイヤ規則で負ける。
     作り込んだページは `frontend/_tailwind_form_style.html.twig`(tw-form-shell)で
     個別に復元しているが、そこに載っていないフォームが素のまま残っていた。

   ★方針: レイヤ外(このファイル)で枠線/余白/角丸/フォーカスだけを宣言する。
     - **width は触らない**(mase が項目ごとに指定しており、触ると `tr.s` の
       10em 指定や日付の3連プルダウンが崩れる)。
     - `tw-form-shell` 配下は既に作り込み済みなので対象から除く
       (`:not(.tw-form-shell *)`)。二重に当てて食い違うのを避ける。

   ※ 読み込みは partial/_head_tailwind.html.twig。
   ============================================================= */

._z:not(._backend) :where(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input:not([type]),
  select,
  textarea
):not(.tw-form-shell *):not(.wp-search-form *) {
  border: 1px solid #cbd5e1;   /* slate-300 */
  border-radius: 6px;
  padding: .45em .7em;
  background-color: #fff;
  color: #1e293b;
  line-height: 1.5;
}

._z:not(._backend) :where(input, select, textarea):not(.tw-form-shell *):not(.wp-search-form *):focus {
  outline: none;
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(94, 234, 212, .45);
}

._z:not(._backend) :where(input, select, textarea):not(.tw-form-shell *)[disabled],
._z:not(._backend) :where(input, select, textarea):not(.tw-form-shell *)[readonly] {
  background-color: #f1f5f9;
  color: #64748b;
}

/* select の三角、チェックボックス/ラジオの既定描画を戻す(preflight で消える)

   ★`.appearance-none` を除外する理由
     テンプレート側で自前の三角(ph-caret-down)を重ねている select は
     `appearance-none pr-10` を付けて既定の三角を消す作りになっている。
     ここで無条件に `appearance: revert` を当てると既定の三角が復活し、
     自前の三角と合わせて**矢印が2つ**出ていた(問い合わせの項目選択で報告)。
     opt-out しているものは尊重する。 */
._z:not(._backend) select:not(.tw-form-shell *):not(.appearance-none) {
  appearance: revert;
  -webkit-appearance: revert;
}

._z:not(._backend) :where(input[type="checkbox"], input[type="radio"]):not(.tw-form-shell *):not(.wp-search-form *) {
  appearance: revert;
  -webkit-appearance: revert;
  width: revert;
  height: revert;
  border: 0;
  padding: 0;
  margin-right: .35em;
  vertical-align: middle;
  accent-color: #0d9488;
}

._z:not(._backend) input[type="file"]:not(.tw-form-shell *) {
  border: 1px dashed #94a3b8;
  border-radius: 8px;
  padding: .5em .7em;
  background-color: #f8fafc;
}

/* --- 送信ボタンがフォームの途中に重なる(最重要) ---
   mase.css の `.u-formFooter` は position:sticky だが bottom を持たないため、
   本文エディタなど背の高い項目の上に張り付いてしまう。
   作り込み済みのページはインラインのフッターに置き換えてあるが、
   素のままのページ(イベント編集など)はこれで救う。 */
._z:not(._backend) .u-formFooter:not(.tw-form-shell *) {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
  background: none;
  box-shadow: none;
}

/* --- 項目名と入力欄の間隔(地続きに見えるのを防ぐ) --- */
._z:not(._backend) table.u.row:not(.tw-form-shell *):not(.wp-search-form *) > tbody > tr > th,
._z:not(._backend) table.u.row:not(.tw-form-shell *):not(.wp-search-form *) > tbody > tr > td {
  padding: .75rem .75rem;
  vertical-align: top;
}
._z:not(._backend) table.u.row:not(.tw-form-shell *):not(.wp-search-form *) > tbody > tr > th {
  color: #334155;
  font-weight: 700;
  text-align: left;
}

/* 単位(`<small class="unit">`)が入力欄の下に落ちるのを防ぐ(定員の「名」など) */
._z:not(._backend) .unit:not(.tw-form-shell *) {
  display: inline-block;
  margin-left: .5rem;
  color: #334155;
  font-size: .875rem;
  vertical-align: middle;
}

/* --- 入力グループ(fieldset)の区切り ---
   検索サイドバー(.wp-search-form)は外側がすでに白カードなので、
   中の fieldset に枠を付けると二重枠になる。除外する。 */
._z:not(._backend) form fieldset:not(.tw-form-shell *):not(.wp-search-form *) {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}

._z:not(._backend) form fieldset:not(.tw-form-shell *):not(.wp-search-form *) > legend {
  display: inline-block;
  margin-bottom: .25rem;
  padding: .2rem .75rem;
  border-radius: 999px;
  background: #f0fdfa;
  color: #0f766e;
  font-size: .8125rem;
  font-weight: 700;
}

/* エラー表示 */
._z:not(._backend) .u-invalidInfo:not(:empty):not(.tw-form-shell *) {
  margin-bottom: 1.25rem;
  padding: .875rem 1rem;
  border: 1px solid #fecdd3;
  border-radius: 10px;
  background: #fff1f2;
  color: #be123c;
}

/* --- セレクトの未選択時をプレースホルダらしい色にする ---
   input は preflight の `::placeholder { color:#9ca3af }` で薄いグレーになるが、
   select の先頭は普通の <option> なので通常の文字色で描画され、
   「勤務開始時間」「選択してください」などが入力済みの値と同じ濃さに見えていた。

   MASE はプレースホルダの option に `data-mase_placeholder` を付けている
   (form/fields.html.twig)。それが選ばれている間だけ input と同じ薄さにし、
   実際に選択したら通常の文字色に戻す。
   ※ tw-form-shell の内外どちらのフォームにも同じ症状が出ていたため、
     このファイルの他ルールと違い `:not(.tw-form-shell *)` で絞らない。 */
._z:not(._backend) select:has(option[data-mase_placeholder]:checked) {
  color: #9ca3af;
}
/* 展開したリスト側の選択肢は読みやすい色のままにする */
._z:not(._backend) select option {
  color: #0f172a;
}