﻿/* =========================================================
   LIFTRIX Shared Buttons
   全画面共通ボタンカラー / ボタン基準デザイン
========================================================= */

:root{
  /* Primary / 保存・作成・追加・登録・予約 */
  --liftrix-btn-primary-bg:
    linear-gradient(180deg, #1E4FD8 0%, #153A9A 100%);
  --liftrix-btn-primary-hover:
    linear-gradient(180deg, #245AE6 0%, #183FA8 100%);
  --liftrix-btn-primary-border: rgba(63,169,255,0.24);
  --liftrix-btn-primary-shadow: 0 12px 26px rgba(15,58,160,0.26);
  --liftrix-btn-primary-text: #FFFFFF;

  /* Secondary / 戻る・閉じる・編集 */
  --liftrix-btn-secondary-bg: rgba(255,255,255,0.045);
  --liftrix-btn-secondary-hover: rgba(255,255,255,0.075);
  --liftrix-btn-secondary-border: rgba(255,255,255,0.13);
  --liftrix-btn-secondary-text: rgba(247,251,255,0.92);

  /* Ghost / キャンセル・下書き */
  --liftrix-btn-ghost-bg: rgba(255,255,255,0.025);
  --liftrix-btn-ghost-hover: rgba(255,255,255,0.060);
  --liftrix-btn-ghost-border: rgba(255,255,255,0.10);
  --liftrix-btn-ghost-text: rgba(247,251,255,0.88);

  /* Danger / 削除・キャンセル */
  --liftrix-btn-danger-bg: rgba(255,92,112,0.075);
  --liftrix-btn-danger-hover: rgba(255,92,112,0.120);
  --liftrix-btn-danger-border: rgba(255,92,112,0.38);
  --liftrix-btn-danger-text: #FF8A9A;

  /* Button Shape */
  --liftrix-btn-radius: 12px;
  --liftrix-btn-height: 38px;
  --liftrix-btn-padding-x: 16px;
}

/* =========================================================
   Base Button Shape
========================================================= */

.btn,
.btnPrimary,
.primaryBtn,
.btnPrimaryTop,
.btnPrimaryBottom,
.btnAddExercise,
.previewAddBtn,
.assignBtn,
.assignToolbarBtn,
.saveBtn,
.submitBtn,
.createBtn,
.addBtn,
.registerBtn,
.formSubmitBtn,
.modalSubmitBtn,
.modalActionBtn,
.calendarCreateBtn,
.graphTopActionBtn{
  min-height: var(--liftrix-btn-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  padding: 0 var(--liftrix-btn-padding-x);
  border-radius: var(--liftrix-btn-radius);

  font-family: inherit;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;
  user-select: none;
  transition:
    transform .16s ease,
    filter .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    color .16s ease;
}

.btn:hover,
.btnPrimary:hover,
.primaryBtn:hover,
.btnPrimaryTop:hover,
.btnPrimaryBottom:hover,
.btnAddExercise:hover,
.previewAddBtn:hover,
.assignBtn:hover,
.assignToolbarBtn:hover,
.saveBtn:hover,
.submitBtn:hover,
.createBtn:hover,
.addBtn:hover,
.registerBtn:hover,
.formSubmitBtn:hover,
.modalSubmitBtn:hover,
.modalActionBtn:hover,
.calendarCreateBtn:hover,
.graphTopActionBtn:hover{
  transform: translateY(-1px);
}

.btn:disabled,
.btnPrimary:disabled,
.primaryBtn:disabled,
.btnPrimaryTop:disabled,
.btnPrimaryBottom:disabled,
.btnAddExercise:disabled,
.previewAddBtn:disabled,
.assignBtn:disabled,
.assignToolbarBtn:disabled,
.saveBtn:disabled,
.submitBtn:disabled,
.createBtn:disabled,
.addBtn:disabled,
.registerBtn:disabled,
.formSubmitBtn:disabled,
.modalSubmitBtn:disabled,
.calendarCreateBtn:disabled,
.graphTopActionBtn:disabled{
  opacity: .48;
  cursor: not-allowed;
  transform: none;
}

/* =========================================================
   Primary Buttons
   保存 / 作成 / 追加 / 登録 / 予約
========================================================= */

.btn-primary,
.btnPrimary,
.primaryBtn,
.btnPrimaryTop,
.btnPrimaryBottom,
.btnAddExercise,
.previewAddBtn,
.assignBtn--primary,
.saveBtn,
.submitBtn,
.createBtn,
.addBtn,
.registerBtn,
.formSubmitBtn,
.modalSubmitBtn,
.calendarCreateBtn{
  color: var(--liftrix-btn-primary-text) !important;
  border: 1px solid var(--liftrix-btn-primary-border) !important;
  background: var(--liftrix-btn-primary-bg) !important;
  box-shadow: var(--liftrix-btn-primary-shadow) !important;
}

.btn-primary:hover,
.btnPrimary:hover,
.primaryBtn:hover,
.btnPrimaryTop:hover,
.btnPrimaryBottom:hover,
.btnAddExercise:hover,
.previewAddBtn:hover,
.assignBtn--primary:hover,
.saveBtn:hover,
.submitBtn:hover,
.createBtn:hover,
.addBtn:hover,
.registerBtn:hover,
.formSubmitBtn:hover,
.modalSubmitBtn:hover,
.calendarCreateBtn:hover{
  background: var(--liftrix-btn-primary-hover) !important;
  filter: brightness(1.03);
}

/* =========================================================
   Secondary Buttons
   戻る / 閉じる / 編集 / 詳細
========================================================= */

.btn-secondary,
.assignBtn--secondary,
.assignToolbarBtn--ghost,
.modalActionBtn,
.clientAccountManageBtn,
.clientManageActionBtn,
.trainerManageActionBtn,
.accountManageBtn{
  color: var(--liftrix-btn-secondary-text) !important;
  border: 1px solid var(--liftrix-btn-secondary-border) !important;
  background: var(--liftrix-btn-secondary-bg) !important;
  box-shadow: none !important;
}

.btn-secondary:hover,
.assignBtn--secondary:hover,
.assignToolbarBtn--ghost:hover,
.modalActionBtn:hover,
.clientAccountManageBtn:hover,
.clientManageActionBtn:hover,
.trainerManageActionBtn:hover,
.accountManageBtn:hover{
  background: var(--liftrix-btn-secondary-hover) !important;
  filter: brightness(1.03);
}

/* =========================================================
   Ghost Buttons
   キャンセル / 下書き / 控えめな操作
========================================================= */

.btn-ghost,
.btnGhostTop,
.btnGhostBottom,
.modalBtn,
.miniBtn{
  color: var(--liftrix-btn-ghost-text) !important;
  border: 1px solid var(--liftrix-btn-ghost-border) !important;
  background: var(--liftrix-btn-ghost-bg) !important;
  box-shadow: none !important;
}

.btn-ghost:hover,
.btnGhostTop:hover,
.btnGhostBottom:hover,
.modalBtn:hover,
.miniBtn:hover{
  background: var(--liftrix-btn-ghost-hover) !important;
  filter: brightness(1.03);
}

/* =========================================================
   Danger Buttons
   削除 / 取消 / キャンセル
========================================================= */

.btn-danger,
.btnDangerGhost,
.assignBtn--danger,
.dangerBtn{
  color: var(--liftrix-btn-danger-text) !important;
  border: 1px solid var(--liftrix-btn-danger-border) !important;
  background: var(--liftrix-btn-danger-bg) !important;
  box-shadow: none !important;
}

.btn-danger:hover,
.btnDangerGhost:hover,
.assignBtn--danger:hover,
.dangerBtn:hover{
  background: var(--liftrix-btn-danger-hover) !important;
  filter: brightness(1.03);
}

/* =========================================================
   Small Buttons
========================================================= */

.btn-sm,
.compactActionBtn{
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
}

/* =========================================================
   Graph / Toggle 系
   active 状態のみLIFTRIX Blueへ寄せる
========================================================= */

.graphStateButton.is-active,
.graphChip.is-active,
.calendarViewBtn.is-active,
.modeSwitchBtn.is-active,
.inputTabBtn.is-active,
.inputTabBtn.active{
  color: #FFFFFF !important;
  border-color: var(--liftrix-btn-primary-border) !important;
  background: var(--liftrix-btn-primary-bg) !important;
  box-shadow: 0 10px 22px rgba(15,58,160,0.22) !important;
}

/* =========================================================
   モバイル / カレンダー系の主要作成ボタン
========================================================= */

.createSlotModeInline input:checked + span,
.weekdayToggle input:checked + .weekdayChip{
  color: #FFFFFF !important;
  border-color: var(--liftrix-btn-primary-border) !important;
  background: var(--liftrix-btn-primary-bg) !important;
  box-shadow: 0 10px 22px rgba(15,58,160,0.22) !important;
}

/* =========================================================
   Legacy Button Compatibility
   app_ui.css から移管
========================================================= */

.btn{
  height:var(--control-h);
  padding:0 14px;
  border-radius:var(--control-radius);
  border:1px solid var(--border);

  background:
    linear-gradient(
      180deg,
      rgba(30, 44, 72, 0.90) 0%,
      rgba(20, 33, 58, 0.96) 100%
    );
  color:var(--text-main);

  font-size:13px;
  font-weight:var(--font-weight-button);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}

.btn:hover{
  background:
    linear-gradient(
      180deg,
      rgba(34, 53, 87, 0.94) 0%,
      rgba(26, 41, 69, 0.98) 100%
    );
  border-color:var(--border-strong);
}

.btn:focus-visible{
  outline:none;
  box-shadow:var(--shadow-focus);
}

.btnPrimary,
.btn-primary{
  background:
    linear-gradient(
      180deg,
      #56B9FF 0%,
      var(--primary) 42%,
      var(--primary-strong) 100%
    );
  border-color:rgba(63, 169, 255, 0.34);
  color:#F8FBFF;
  box-shadow:
    0 10px 24px rgba(13, 33, 76, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.10);
}

.btnPrimary:hover,
.btn-primary:hover{
  background:
    linear-gradient(
      180deg,
      #6BC3FF 0%,
      #49B1FF 42%,
      #245BE5 100%
    );
  border-color:rgba(63, 169, 255, 0.44);
}

.btn-danger{
  background:
    linear-gradient(
      180deg,
      rgba(116, 36, 45, 0.94) 0%,
      rgba(82, 28, 35, 0.98) 100%
    );
  border-color:rgba(255, 125, 135, 0.18);
}

.btn-danger:hover{
  background:
    linear-gradient(
      180deg,
      rgba(138, 43, 54, 0.96) 0%,
      rgba(98, 33, 41, 1) 100%
    );
  border-color:rgba(255, 125, 135, 0.28);
}