@charset "UTF-8";
/* =============================================================
   管理画面(_backend)のフォーム部品を「見える」状態に戻す。

   ★症状: 入力欄の枠線と余白が消え、ラベルだけ並んでいるように見える
     (/add/freeSpace/add や /add/notification/add など管理画面の全フォーム)。

   ★原因: tailwind.css の preflight がレイヤ無しで
       input, select, textarea { border-width: 0; padding: 0; ... }
     を当てており、mase.css の入力欄スタイルは `@layer mase` の中にあるため
     セレクタの詳細度に関係なくレイヤ規則で負ける。
     公開側は各テンプレで `frontend/_tailwind_form_style.html.twig` を読み込んで
     個別に作り直しているが、管理画面(97ルート)には入っていなかった。

   ★方針: レイヤ外(このファイル)で枠線/余白/角丸/フォーカスだけを宣言する。
     幅(width)は mase 側が項目ごとに指定しているので**触らない**
     (触ると `table.u.row tr.s` の 10em 指定などが崩れる)。
     box-sizing は preflight が border-box にしているので padding を足しても
     外形の幅は変わらない。

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

._z._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
) {
  border: 1px solid #cbd5e1;   /* slate-300 */
  border-radius: 6px;
  padding: .45em .7em;
  background-color: #fff;
  color: #1e293b;              /* slate-800 */
  line-height: 1.5;
}

._z._backend :where(input, select, textarea):focus {
  outline: none;
  border-color: #0d9488;       /* wp */
  box-shadow: 0 0 0 3px rgba(94, 234, 212, .45); /* wp-light のリング */
}

._z._backend :where(input, select, textarea)[disabled],
._z._backend :where(input, select, textarea)[readonly] {
  background-color: #f1f5f9;   /* slate-100 */
  color: #64748b;
}

/* select の三角(appearance)も preflight で消えるので戻す */
._z._backend select {
  appearance: revert;
  -webkit-appearance: revert;
}

/* チェックボックス/ラジオは preflight で潰れると位置も分からなくなるため既定描画に戻す */
._z._backend :where(input[type="checkbox"], input[type="radio"]) {
  appearance: revert;
  -webkit-appearance: revert;
  width: revert;
  height: revert;
  margin-right: .35em;
  vertical-align: middle;
  accent-color: #0d9488;
}

/* 必須マーク(mase の `*`)とエラー文がピンクのままだと wp の色から浮くので rose に寄せる */
._z._backend .required::before,
._z._backend .u-required { color: #e11d48; }  /* rose-600 */

/* ファイル選択(添付)も枠が消えて押せる場所が分からなくなるため枠を戻す */
._z._backend input[type="file"] {
  border: 1px dashed #94a3b8;
  border-radius: 8px;
  padding: .5em .7em;
  background-color: #f8fafc;
}

/* =============================================================
   ここから: 管理画面の下階層(一覧 / 新規作成 / 編集 / 確認)のレイアウト崩れ対応
   (2026-07-30 指摘「管理者ページの下階層のスタイル崩れ」)

   個別テンプレは触らず、`._z._backend` スコープのレイヤ外CSSで一括して整える
   (mase.css は @layer mase 内なのでレイヤ規則でこちらが勝つ)。
   ============================================================= */

/* --- 送信ボタンが本文に重なる(最重要) ---
   mase.css の `.u-formFooter` は position:sticky だが bottom を持たないため、
   フォームの途中(CKEditor の本文欄の上)に張り付いてしまう。
   管理画面の編集画面は全部このマークアップなので、static に戻して
   フォーム末尾に置き、上に区切り線を入れる。 */
._z._backend .u-formFooter {
  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._backend ._f > main,
._z._backend ._defgh > main { padding-bottom: 3rem; }

._z._backend h2.u {
  margin: 0 0 1.25rem;
  padding-left: .625rem;
  border-left: 4px solid #0d9488;
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
}

/* --- 入力グループ(多言語タブ等の fieldset)を白カードにする ---
   既定は枠線が細く、どこからどこまでが1グループか分からない。 */
._z._backend fieldset {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}

/* legend は多言語の言語コード([ja] など)が小さく潰れて読めないのでバッジにする */
._z._backend fieldset > legend {
  display: inline-block;
  margin-bottom: .25rem;
  padding: .2rem .75rem;
  border-radius: 999px;
  background: #f0fdfa;
  color: #0f766e;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.6;
}

/* --- 入力テーブル(縦並びの項目行) --- */
._z._backend table.u.row {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}
._z._backend fieldset table.u.row { border: 0; border-radius: 0; }

._z._backend table.u.row > tbody > tr > th,
._z._backend table.u.row > tbody > tr > td {
  padding: .875rem 1rem;
  border-bottom: 1px solid #eef2f6;
  /* ラベルは上揃え。CKEditor など背の高い入力の隣で中央に浮くのを避ける */
  vertical-align: top;
  text-align: left;
}
._z._backend table.u.row > tbody > tr:last-child > th,
._z._backend table.u.row > tbody > tr:last-child > td { border-bottom: 0; }

._z._backend table.u.row > tbody > tr > th {
  width: 15rem;
  background: #f8fafc;
  color: #334155;
  font-weight: 700;
  font-size: .875rem;
}
@media (max-width: 900px) {
  /* 狭い画面ではラベルを上に積む(横並びだと入力欄が潰れる) */
  ._z._backend table.u.row > tbody > tr > th,
  ._z._backend table.u.row > tbody > tr > td { display: block; width: auto; }
  ._z._backend table.u.row > tbody > tr > th { border-bottom: 0; }
}

/* --- 一覧テーブル(`table.u.col`)には触らない ---
   mase.css は一覧を「1件=1カード」の block 型で組んでおり(thead を見出しラベルとして
   使い、行を縦に積む)、`display:table` や `border-collapse` をこちらから指定すると
   1件ぶんが縦に伸びて崩れる(ユーザ一覧の高さが2.3倍になった)。
   一覧の体裁は mase 既定 + wp-btn.css のボタン/ページャ色に任せる。 */

/* --- 検索フォーム(一覧上部)の並び --- */
._z._backend form.u-searchForm,
._z._backend .u-formHeader {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}

/* --- 確認画面(内容の読み取り表示) --- */
._z._backend ._conf table.u.row > tbody > tr > td { color: #1e293b; }

/* --- フラッシュメッセージ --- */
._z._backend .u-invalidInfo:not(:empty) {
  margin-bottom: 1.25rem;
  padding: .875rem 1rem;
  border: 1px solid #fecdd3;
  border-radius: 10px;
  background: #fff1f2;
  color: #be123c;
}

/* --- CKEditor は幅いっぱいに(狭いと編集しづらい) --- */
._z._backend .ck-editor__editable { min-height: 18rem; }
._z._backend .cke, ._z._backend .ck-editor { max-width: 100%; }