/*
 * NurseLink — button.css
 * ============================================================
 * 【ボタンの唯一の真実（Single Source of Truth）】
 *   汎用ボタンの「現行・正式」体系はこのファイルだけにある。
 *   ボタンを使う／直す／増やすときは、まずここを見る。
 *
 * ------------------------------------------------------------
 * このファイルが持つもの（＝現行の正式ボタン）
 *   A) .ui-btn          … Bootstrap .btn への「足し」クラス（.btn 併用前提）
 *   B) .ui-btn-*        … Bootstrap 非依存の自己完結ボタン（primary/secondary/dark/outline）
 *   C) .ui-btn-text     … テキストボタン（キャンセル・削除などの軽量アクション）
 *   ＋ 共通サイズ（--sm/--md/--lg）・全幅（--block）・角丸（--rounded）・disabled
 *
 * このファイルが持たないもの（意図的に除外）
 *   × .btn-primary-app / .btn-apple / .btn-tinted / .btn-dark-app …
 *       → 旧世代（DEPRECATED）。common.css に残置（既存HTML互換のため）。
 *         新規では使わない。下の「移行マッピング」に従って置き換える。
 *   × .sort-btn / .tab-btn / .booking-*-btn / .slot-date-btn / .row-action-btn …
 *       → 特定UIの構成部品。汎用ボタンではないので common.css のまま。
 *   × .tb-btn（editor.css）/ .aedit-*-btn（admin-edit.css）/ front.css の各種
 *       → ページ固有ボタン。各ページCSSが正しい置き場所。
 *
 * ------------------------------------------------------------
 * どっちを使う？（迷ったらこれ）
 *   ・Bootstrap の色機構（.btn-primary 等）に乗りたい → A) .ui-btn
 *       <button class="btn btn-primary ui-btn">保存</button>
 *   ・Bootstrap に依存せず単体で完結させたい        → B) .ui-btn-primary 等
 *       <button class="ui-btn-primary">保存</button>
 *   ・塗りも枠もない静かな副次アクション            → C) .ui-btn-text
 *       <button class="ui-btn-text ui-btn-text-danger">削除</button>
 *
 * ------------------------------------------------------------
 * 旧クラスからの移行マッピング（DEPRECATED → 正式）
 *   .btn-primary-app   → <button class="btn btn-primary ui-btn">  または .ui-btn-primary
 *   .btn-light-app     → <button class="btn btn-light   ui-btn">
 *   .btn-dark-app      → <button class="btn btn-dark     ui-btn ui-btn--sm">  または .ui-btn-dark
 *   .btn-outline-app   → <button class="btn btn-outline-primary ui-btn">      または .ui-btn-outline
 *   .btn-tinted        → .ui-btn-secondary（ティント・薄青）
 *   .btn-register      → <button class="btn btn-dark ui-btn">
 *   .btn-apple/.btn-post→ 旧エイリアス。上記いずれかへ
 *   ※ .btn-filter / .btn-action / .btn-cancel は行内操作・絞込み専用UIのため
 *     当面 common.css に存置（汎用ボタン体系の対象外）。
 *
 * ------------------------------------------------------------
 * トークンは tokens.css 由来（--ui-* / --text-* / --font-*）。
 * ここでは色・角丸・影をハードコードしない。
 *
 * 読み込み順:
 *   1. bootstrap.min.css
 *   2. tokens.css
 *   3. common.css
 *   4. overrides.css
 *   5. forms.css       （フォームがあるページのみ）
 *   6. button.css      ← このファイル（common.css のボタン定義より後）
 *   7. utilities.css   ← 必ず最後
 * ============================================================
 */


/* ============================================================
   A) ui-btn — Bootstrap .btn への「足し」クラス（.btn 併用前提）
   ------------------------------------------------------------
   使い方: <button class="btn btn-primary ui-btn">保存</button>
   pill形状・中央揃え・Appleトランジションを付与。色は Bootstrap の
   .btn-* が担当。Bootstrap .btn の line-height:1.5 を無効化し、
   inline-flex + align-items:center とあわせてテキストを完全中央化する。
============================================================ */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1 !important;   /* Bootstrap .btn の line-height:1.5 を無効化 */
    border-radius: var(--ui-radius-pill);
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: all var(--ui-transition);
}
/* ホバー時のグロー（色は .btn-* の現在色を活かす） */
.ui-btn:hover { box-shadow: 0 4px 12px rgba(var(--ui-accent-rgb), 0.28); }


/* ============================================================
   B) ui-btn-* — 自己完結型ボタン体系（.btn 非依存・併存）
   ------------------------------------------------------------
   Bootstrap .btn を使わずに形状・色・hover まで完結する正式体系。
     .ui-btn-primary    塗り・青（主アクション）
     .ui-btn-secondary  ティント・薄青（副アクション）
     .ui-btn-dark       塗り・黒
     .ui-btn-outline    枠線・アクセント
     .ui-btn-text       テキストのみ（下部に定義）
   使い方: <button class="ui-btn-primary">保存</button>
============================================================ */
.ui-btn-primary,
.ui-btn-secondary,
.ui-btn-dark,
.ui-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 20px;
    border-radius: var(--ui-radius-pill);
    font-family: inherit;
    font-size: var(--text-subheadline);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--ui-transition);
    -webkit-tap-highlight-color: transparent;
}
.ui-btn-primary:disabled,
.ui-btn-secondary:disabled,
.ui-btn-dark:disabled,
.ui-btn-outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* Primary（塗り・青） */
.ui-btn-primary {
    background: var(--ui-accent);
    color: #fff;
}
.ui-btn-primary:hover,
.ui-btn-primary:focus-visible {
    background: var(--ui-accent-hover);
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--ui-accent-rgb), 0.35);
}
.ui-btn-primary:active { background: var(--ui-accent-hover); }

/* Secondary（ティント・薄青） */
.ui-btn-secondary {
    background: rgba(var(--ui-accent-rgb), 0.10);
    color: var(--ui-accent);
}
.ui-btn-secondary:hover,
.ui-btn-secondary:focus-visible {
    background: rgba(var(--ui-accent-rgb), 0.16);
    color: var(--ui-accent);
}
.ui-btn-secondary:active { background: rgba(var(--ui-accent-rgb), 0.20); }

/* Dark（塗り・黒） */
.ui-btn-dark {
    background: var(--ui-text);
    color: #f5f5f7;
}
.ui-btn-dark:hover,
.ui-btn-dark:focus-visible {
    background: #2c2c2e;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}
.ui-btn-dark:active { background: #000; }

/* Outline（枠線・アクセント） */
.ui-btn-outline {
    background: transparent;
    color: var(--ui-accent);
    border: 1.5px solid var(--ui-accent);
}
.ui-btn-outline:hover,
.ui-btn-outline:focus-visible {
    background: var(--ui-accent-lt);
    color: var(--ui-accent);
}
.ui-btn-outline:active { background: rgba(var(--ui-accent-rgb), 0.14); }


/* ============================================================
   C) ui-btn-text — テキストボタン（副次アクション用）
   ------------------------------------------------------------
   削除・キャンセル・戻る等の軽量な副次アクション向け。
   塗り/枠なしの静かな見た目で、hover時のみ下線＋色を強める
   （Apple風の控えめな破壊的アクション）。
     <button class="ui-btn-text">キャンセル</button>
     <button class="ui-btn-text ui-btn-text-danger">削除</button>
============================================================ */
.ui-btn-text {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: none;
    border: none;
    color: var(--ui-text-muted);
    font-size: var(--text-caption-1);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--ui-transition);
}
.ui-btn-text:hover {
    color: var(--ui-text);
    text-decoration: underline;
}

/* 危険操作（削除など） */
.ui-btn-text-danger {
    color: var(--ui-danger);
}
.ui-btn-text-danger:hover {
    color: var(--ui-danger);
    text-decoration: underline;
}


/* ============================================================
   共通モディファイア（A/B 両体系で使用可）
   ------------------------------------------------------------
   サイズ:  .ui-btn--sm / --md / --lg
   全幅:    .ui-btn--block
   角丸:    .ui-btn--rounded（pill ではなくカード角丸 10px）
   ※ Bootstrap の .btn-sm / .btn-lg とは衝突しない独自モディファイア。
============================================================ */
.ui-btn--sm { height: 28px; font-size: var(--text-footnote); padding: 0 14px; }
.ui-btn--md { height: 36px; padding: 0 20px; }
.ui-btn--lg { height: 48px; font-size: var(--text-callout); padding: 0 28px; }

.ui-btn--block { display: flex; width: 100%; }

.ui-btn--rounded { border-radius: var(--ui-radius-sm); }


/* ============================================================
   disabled / loading 共通（自己完結体系 ui-btn-*）
   ------------------------------------------------------------
   .ui-btn（A）は Bootstrap .btn:disabled に従うため個別指定不要。
============================================================ */
.ui-btn-text:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Livewire ローディング中の見た目（自己完結体系） */
.ui-btn-primary[wire\:loading],
.ui-btn-secondary[wire\:loading],
.ui-btn-dark[wire\:loading],
.ui-btn-outline[wire\:loading] {
    opacity: 0.6;
    cursor: wait;
    pointer-events: none;
}

/* ============================================================
   ▽▽▽ DEPRECATED — 旧ボタン（新規利用は禁止）▽▽▽
   ------------------------------------------------------------
   ここから下は旧世代のボタン。既存HTMLとの互換のためだけに残す。
   common.css から物理移動（2025リファクタ）。新規ページでは使わず、
   上の「現行の正式ボタン」と冒頭の移行マッピングに従って置き換える。

   含まれるクラス:
     .btn-primary-app / .btn-apple        （青塗り・旧）
     .btn-light-app   / .btn-post         （白・旧）
     .btn-tinted                          （薄青・小）
     .btn-dark-app    / .btn-register     （黒・小）
     .btn-outline-app                     （枠線）
     .btn-filter                          （絞込み・行内専用／当面存続）
     .btn-action                          （全幅・行内操作／当面存続）
     .btn-cancel                          （グレー・キャンセル／当面存続）
     ＋ サイズ(.btn--sm/--xs) / 角丸(.btn--r) / disabled / wire:loading

   ※ .btn-filter / .btn-action / .btn-cancel は Bootstrap .btn に同等物が
     ない「行内操作・絞込み」専用UI。DEPRECATED ではなく当面の正規部品だが、
     ボタン定義として本ファイルに集約する。
============================================================ */

/* ------------------------------------------------------------
   共通: テキスト・アイコンを中央揃え（旧 .btn-* 系のデフォルト）
------------------------------------------------------------ */
/* ------------------------------------------------------------
   共通: テキスト・アイコンを中央揃え（要望対応）
   全 .btn-* 系ボタンのデフォルトを中央寄せに統一。
   width:100% 等で横幅が広がっても中央に配置されるため、
   HTML 側の style="justify-content:center" は不要。
   （gap / align-items は各定義側にもあるが、ここで横並び中央を担保）
------------------------------------------------------------ */
.btn-primary-app,
.btn-apple,
.btn-light-app,
.btn-post,
.btn-tinted,
.btn-dark-app,
.btn-register,
.btn-outline-app,
.btn-cancel,
.btn-filter,
.btn-action {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* ------------------------------------------------------------
   旧ボタン本体（青/白/薄青/黒/枠線/絞込み/全幅）
------------------------------------------------------------ */
.btn-primary-app {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 20px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-accent);
    color: #fff;
    font-size: var(--text-subheadline);
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--ui-transition);
    font-family: inherit;
}
/* hover: 通常時の青より少し濃い青へ自然に変化。
   Bootstrap の .btn:hover（--bs-btn-hover-bg）に負けて背景が透明化する事象を
   確実に防ぐため、要素修飾セレクタ＋!important で優先度を担保する。
   ※ .btn-primary-app は元々 .btn を使わない独自ボタンのため、
     ここでの !important は他コンポーネントへ波及しない。 */
button.btn-primary-app:hover,
button.btn-primary-app:focus,
button.btn-primary-app:focus-visible,
button.btn-primary-app:active,
a.btn-primary-app:hover,
a.btn-primary-app:focus,
a.btn-primary-app:active,
.btn.btn-primary-app:hover,
.btn.btn-primary-app:focus,
.btn.btn-primary-app:active,
.btn-primary-app:hover,
.btn-primary-app:focus,
.btn-primary-app:focus-visible,
.btn-primary-app:active {
    background-color: var(--ui-accent-hover) !important;
    color: #fff !important;
    border-color: var(--ui-accent-hover) !important;
    box-shadow: 0 4px 12px rgba(var(--ui-accent-rgb), 0.35);
    text-decoration: none;
}

/* 廃止予定エイリアス（既存HTMLとの互換。新規では btn-primary-app を使うこと） */
.btn-apple {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 20px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-accent); color: #fff;
    font-size: var(--text-subheadline); font-weight: 600;
    text-decoration: none; border: none; cursor: pointer;
    transition: all var(--ui-transition); font-family: inherit;
}
.btn-apple:hover { background: var(--ui-accent-hover); color: #fff; box-shadow: 0 4px 12px rgba(var(--ui-accent-rgb), 0.35); text-decoration: none; }

/* ライト（白背景・影） */
.btn-light-app {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 20px;
    border-radius: var(--ui-radius-pill);
    background: rgba(255, 255, 255, 0.95);
    color: var(--ui-text);
    font-size: var(--text-subheadline);
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--ui-transition);
    font-family: inherit;
}
.btn-light-app:hover {
    background: #fff;
    color: var(--ui-text);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
    text-decoration: none;
}

/* 廃止予定エイリアス（既存HTMLとの互換。新規では btn-light-app を使うこと） */
.btn-post {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 20px;
    border-radius: var(--ui-radius-pill);
    background: rgba(255,255,255,.95); color: var(--ui-text);
    font-size: var(--text-subheadline); font-weight: 600;
    text-decoration: none; border: none; cursor: pointer;
    transition: all var(--ui-transition); font-family: inherit;
}
.btn-post:hover { background: #fff; color: var(--ui-text); box-shadow: 0 4px 16px rgba(0,0,0,.22); text-decoration: none; }

/* ティント（薄青・小） */
.btn-tinted {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 16px;
    border-radius: var(--ui-radius-pill);
    background: rgba(var(--ui-accent-rgb), 0.10);
    color: var(--ui-accent);
    font-size: var(--text-footnote);
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--ui-transition);
    font-family: inherit;
}
.btn-tinted:hover {
    background: rgba(var(--ui-accent-rgb), 0.15);
    color: var(--ui-accent);
    text-decoration: none;
}

/* ダーク（黒塗り・小） */
.btn-dark-app {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 16px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-text);
    color: #f5f5f7;
    font-size: var(--text-footnote);
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--ui-transition);
    font-family: inherit;
}
.btn-dark-app:hover {
    background: #2c2c2e;
    color: #fff;
    text-decoration: none;
}

/* 廃止予定エイリアス（既存HTMLとの互換。新規では btn-dark-app を使うこと） */
.btn-register {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 16px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-text); color: #f5f5f7;
    font-size: var(--text-footnote); font-weight: 600;
    text-decoration: none; border: none; cursor: pointer;
    transition: all var(--ui-transition); font-family: inherit;
}
.btn-register:hover { background: #2c2c2e; color: #fff; text-decoration: none; }

/* アウトライン */
.btn-outline-app {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 20px;
    border-radius: var(--ui-radius-pill);
    background: transparent;
    color: var(--ui-accent);
    font-size: var(--text-subheadline);
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid var(--ui-accent);
    cursor: pointer;
    transition: all var(--ui-transition);
    font-family: inherit;
}
.btn-outline-app:hover {
    background: rgba(0, 113, 227, 0.06);
    color: var(--ui-accent);
    text-decoration: none;
}

/* フィルターボタン（小・ボーダー） */
.btn-filter {
    height: 30px;
    padding: 0 12px;
    border-radius: var(--ui-radius-sm);
    border: 0.5px solid rgba(0, 0, 0, 0.15);
    background: var(--ui-surface);
    color: var(--ui-text-sub);
    font-size: var(--text-footnote);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all var(--ui-transition);
    box-shadow: var(--ui-shadow-xs);
    font-family: inherit;
}
.btn-filter:hover { background: var(--ui-surface-2); color: var(--ui-text); }

/* アクションボタン（全幅・行内操作用） */
.btn-action {
    width: 100%;
    height: 36px;
    border-radius: var(--ui-radius-sm);
    border: 0.5px solid var(--ui-border-2);
    background: var(--ui-surface);
    color: var(--ui-text);
    font-size: var(--text-footnote);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    transition: all var(--ui-transition);
    font-family: inherit;
    text-decoration: none;
}
.btn-action:hover          { background: var(--ui-surface-3); color: var(--ui-text); }
.btn-action.danger         { color: var(--ui-danger); }
.btn-action.danger:hover   { background: rgba(255, 59, 48, 0.06); border-color: rgba(255, 59, 48, 0.2); }
.btn-action.primary        { background: rgba(0, 113, 227, 0.06); color: var(--ui-accent); border-color: rgba(var(--ui-accent-rgb), 0.20); }
.btn-action.primary:hover  { background: rgba(var(--ui-accent-rgb), 0.10); }

/* ── ボタンサイズバリアント ── */
/* 使い方: <button class="btn-primary-app btn--sm"> */
.btn-primary-app.btn--sm,
.btn-tinted.btn--sm,
.btn-dark-app.btn--sm,
.btn-outline-app.btn--sm,
.btn-cancel.btn--sm,
.btn-light-app.btn--sm,
.btn-action.btn--sm {
    height: 28px;
    padding: 0 12px;
    font-size: var(--text-caption-1);
    gap: 4px;
}
/* 使い方: <button class="btn-primary-app btn--xs"> */
.btn-primary-app.btn--xs,
.btn-tinted.btn--xs,
.btn-dark-app.btn--xs,
.btn-outline-app.btn--xs,
.btn-cancel.btn--xs,
.btn-light-app.btn--xs,
.btn-action.btn--xs {
    height: 22px;
    padding: 0 8px;
    font-size: var(--text-caption-2);
    gap: 3px;
}

/* ── ボタン小Rバリアント（border-radius: --ui-radius-sm = 10px） ── */
/* 使い方: <button class="btn-primary-app btn--r"> */
.btn-primary-app.btn--r,
.btn-tinted.btn--r,
.btn-dark-app.btn--r,
.btn-outline-app.btn--r,
.btn-cancel.btn--r,
.btn-light-app.btn--r,
.btn-action.btn--r { border-radius: var(--ui-radius-sm); }

/* ============================================================
   disabled 共通（全ボタンに適用）
============================================================ */
.btn-primary-app:disabled,
.btn-tinted:disabled,
.btn-dark-app:disabled,
.btn-outline-app:disabled,
.btn-cancel:disabled,
.btn-light-app:disabled,
.btn-filter:disabled,
.btn-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;  /* ホバーエフェクトも無効化 */
}

/* wire:loading 中も同じ見た目に */
.btn-primary-app[wire\:loading],
.btn-tinted[wire\:loading],
.btn-dark-app[wire\:loading],
.btn-cancel[wire\:loading] {
    opacity: 0.6;
    cursor: wait;
    pointer-events: none;
}

/* ------------------------------------------------------------
   キャンセル・グレーボタン（旧 common.css 24章より移動）
------------------------------------------------------------ */
.btn-cancel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 20px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-surface-3);
    color: var(--ui-text-sub);
    font-size: var(--text-subheadline);
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--ui-transition);
    font-family: inherit;
}
.btn-cancel:hover {
    background: #dcdce0;
    color: var(--ui-text);
}

/* ============================================================
   確認モーダル（confirm-modal）— サイズについて
   ------------------------------------------------------------
   幅は common.css「30. 確認モーダル」で1種類（880px）に統一した。
   以前ここにあった --sm/--lg/--xl/--xxl は廃止している。
   読み込み順に依存して効いたり効かなかったりし、
   画面ごとに幅が違うことも使う人には分かりにくかったため。

   広さが要る画面（表を含むものなど）は、モーダルにせずページにする。
============================================================ */