/* ==========================================================================
   ui-buttons.css ── ボタンの見た目を1箇所に集約する（2026-08-06）
   --------------------------------------------------------------------------
   背景：同じ役割のボタンが画面ごとに違う色・大きさで出ていた。
     .btn-edit   … #007bff / #2563eb / #f8fafc の3種
     .btn-delete … #dc3545 / #d9534f / 透明 の3種
     骨格も 角丸4px・1em と 角丸7px・13px太字 の2系統
     定義は15ファイルに100箇所以上（.btn-save だけで28定義）。
     各ページが自前の <style> で再定義しているため、片方を直すと片方が古いまま残った。

   方針：クラス名は1つも変えない（HTML/JSは触らない）。
         役割ごとの見た目はこのファイルだけに書き、各ページで最後に読み込む。

   詳細度：既存に #set-modal .set-pane .btn-save のようなIDを含む定義があるため、
         すべてのセレクタに body を前置して必ず勝つようにしている。
           body .btn-save                                    0,1,1 > 0,1,0
           body #set-modal .set-pane .btn-save               1,2,1 > 1,2,0
           body #set-modal .set-pane .list-item .btn-edit    1,3,1 > 1,3,0

   役割は5つ（2026-08-06 GPTの判断でB案を採用）：
     ① 実行   保存・送信・ログイン・同期   青 #2563eb の塗り
     ② 決定   承認                        緑 #16a34a の塗り
     ③ 編集                                青の枠線
     ④ 追加・補助                          グレーの枠線
     ⑤ 危険   削除・取消・却下・停止      赤 #dc2626 の枠線（塗らない）

   緑は「相手に対する肯定的な決定（承認）」だけに限定する。
   保存は毎日押す日常の実行なので送信・ログインと同じ青へ統合。
   teal #0f766e は運行の打刻「次に押す」で使用済みのため、ここでは使わない。
   ========================================================================== */

/* ---- 共通の骨格 ---- */
body .btn-save, body .btn-approve,
body .btn-send, body .btn-login, body .btn-sync,
body .btn-edit,
body .btn-add, body .btn-add-row, body .btn-area-toggle, body .btn-ghost,
body .btn-delete, body .btn-delete-row, body .btn-danger, body .btn-deny, body .btn-suspend{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:0 18px;
  border:1px solid transparent; border-radius:8px;
  background:#fff; color:#334155;
  font-size:14px; font-weight:700; line-height:1.3;
  text-decoration:none; cursor:pointer; box-sizing:border-box;
  white-space:normal; word-break:normal; overflow-wrap:anywhere;
  -webkit-tap-highlight-color:transparent;
}
/* 行の中などで使う小さめ。押せる大きさは保つ */
body .btn-add-row, body .btn-area-toggle, body .btn-delete-row,
body .btn-edit, body .btn-delete{
  min-height:40px; padding:0 14px; font-size:13px;
}

/* ① 実行：保存・送信・ログイン・同期 -------------------------------- */
body .btn-save, body .btn-send, body .btn-login, body .btn-sync{
  background:#2563eb; color:#fff; border-color:#2563eb;
}

/* ② 決定：承認（緑はこれだけ。相手に対する肯定的な決定） -------------- */
body .btn-approve{ background:#16a34a; color:#fff; border-color:#16a34a; }

/* ③ 編集 ------------------------------------------------------------ */
body .btn-edit{ background:#fff; color:#1d4ed8; border-color:#2563eb; }

/* ④ 追加・補助 ------------------------------------------------------ */
body .btn-add, body .btn-add-row, body .btn-area-toggle, body .btn-ghost{
  background:#fff; color:#475569; border-color:#dfe4ea;
}

/* ⑤ 危険：削除・取消（塗らない） ------------------------------------ */
body .btn-delete, body .btn-delete-row, body .btn-danger,
body .btn-deny, body .btn-suspend{
  background:#fff; color:#dc2626; border-color:#dc2626;
}

/* 無効 -------------------------------------------------------------- */
body .btn-save:disabled, body .btn-send:disabled, body .btn-login:disabled,
body .btn-add:disabled, body .btn-edit:disabled, body .btn-delete:disabled{
  opacity:.45; cursor:default;
}

/* hover（PCのみ） --------------------------------------------------- */
@media (hover:hover){
  body .btn-save:hover, body .btn-send:hover, body .btn-login:hover,
  body .btn-sync:hover, body .btn-approve:hover{ filter:brightness(.94); }
  body .btn-edit:hover{ background:#eff4ff; }
  body .btn-add:hover, body .btn-add-row:hover,
  body .btn-area-toggle:hover, body .btn-ghost:hover{ background:#f1f5f9; }
  body .btn-delete:hover, body .btn-delete-row:hover, body .btn-danger:hover,
  body .btn-deny:hover, body .btn-suspend:hover{ background:rgba(220,38,38,.06); }
}

/* ==========================================================================
   設定モーダル内：既存の #set-modal .set-pane .btn-* （詳細度1,2,0）に勝つ
   ========================================================================== */
body #set-modal .set-pane .btn-save,
body #set-modal .set-pane .btn-send{ background:#2563eb; color:#fff; border-color:#2563eb; }
body #set-modal .set-pane .btn-approve{ background:#16a34a; color:#fff; border-color:#16a34a; }
body #set-modal .set-pane .btn-edit{ background:#fff; color:#1d4ed8; border-color:#2563eb; }
body #set-modal .set-pane .btn-add,
body #set-modal .set-pane .btn-add-row,
body #set-modal .set-pane .btn-area-toggle{ background:#fff; color:#475569; border-color:#dfe4ea; }
body #set-modal .set-pane .btn-delete,
body #set-modal .set-pane .btn-delete-row{ background:#fff; color:#dc2626; border-color:#dc2626; }

/* 一覧行の中（詳細度1,3,0）に勝つ。並べ替えの ↑ ↓ はアイコン扱いのまま残す */
body #set-modal .set-pane .list-item .btn-edit{ background:#fff; color:#1d4ed8; border-color:#2563eb; flex:1 1 auto; }
body #set-modal .set-pane .list-item .btn-delete{ background:#fff; color:#dc2626; border-color:#dc2626; }
body #set-modal .set-pane .list-item .btn-edit[onclick*="move"],
body #set-modal .set-pane .list-item .btn-edit[onclick*="Move"]{
  flex:0 0 auto; width:44px; min-width:44px; padding:0;
  background:#f8fafc; color:#475569; border-color:#dfe4ea; font-size:17px;
}

/* パスワード変更・運営へ連絡のペイン（#set-pane-* 直下＝詳細度1,1,0）に勝つ */
body #set-pane-password .btn-save{ background:#2563eb; color:#fff; border-color:#2563eb; }
body #set-pane-contact .btn-send{ background:#2563eb; color:#fff; border-color:#2563eb; }