/**
 * Common button styles
 * 全画面共通ボタンカラー設定
 * Figma A案トンマナ準拠
 *
 * カラーパレット:
 * Blues: #007DD7(Default) → #007AC7(Hover) → #006EB3(Pressed)
 * Reds:  #D72F3C(Default) → #D32F2F(Hover) → #B71C1C(Pressed)
 * Success: #23A455(Default)
 * Neutrals: #FFFFFF, #F6F7F9(Background), #E4E7EC(Border), #98A2B3(Disabled text)
 * Border-radius: 8px（角丸8px）
 */

/* ==========================================
   共通ボタン角丸設定
   ========================================== */
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-success,
.btn-info,
.btn-warning,
.btn-link,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger {
    border-radius: 8px;
}

/* ==========================================
   Primary Button
   ========================================== */
.btn-primary {
    --bs-btn-bg: #007DD7;
    --bs-btn-border-color: #007DD7;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #007AC7;
    --bs-btn-hover-border-color: #007AC7;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #006EB3;
    --bs-btn-active-border-color: #006EB3;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: #E4E7EC;
    --bs-btn-disabled-border-color: #E4E7EC;
    --bs-btn-disabled-color: #98A2B3;
    background-color: #007DD7;
    border-color: #007DD7;
    color: white;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #007AC7;
    border-color: #007AC7;
    color: white;
}

.btn-primary:active,
.btn-primary.active {
    background-color: #006EB3;
    border-color: #006EB3;
    color: white;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: #E4E7EC;
    border-color: #E4E7EC;
    color: #98A2B3;
}

/* ==========================================
   Secondary Button (Figma A案: 白背景+青ボーダー)
   ========================================== */
.btn-secondary {
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: #007DD7;
    --bs-btn-color: #007DD7;
    --bs-btn-hover-bg: #F6F7F9;
    --bs-btn-hover-border-color: #007AC7;
    --bs-btn-hover-color: #007AC7;
    --bs-btn-active-bg: #E4E7EC;
    --bs-btn-active-border-color: #006EB3;
    --bs-btn-active-color: #006EB3;
    --bs-btn-disabled-bg: #FFFFFF;
    --bs-btn-disabled-border-color: #E4E7EC;
    --bs-btn-disabled-color: #98A2B3;
    background-color: #FFFFFF;
    border: 1px solid #007DD7;
    color: #007DD7;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #F6F7F9;
    border-color: #007AC7;
    color: #007AC7;
}

.btn-secondary:active,
.btn-secondary.active {
    background-color: #E4E7EC;
    border-color: #006EB3;
    color: #006EB3;
}

.btn-secondary:disabled,
.btn-secondary.disabled {
    background-color: #FFFFFF;
    border-color: #E4E7EC;
    color: #98A2B3;
}

/* ==========================================
   Danger / Destructive Button
   ========================================== */
.btn-danger {
    --bs-btn-bg: #D72F3C;
    --bs-btn-border-color: #D72F3C;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #D32F2F;
    --bs-btn-hover-border-color: #D32F2F;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #B71C1C;
    --bs-btn-active-border-color: #B71C1C;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: #E4E7EC;
    --bs-btn-disabled-border-color: #E4E7EC;
    --bs-btn-disabled-color: #98A2B3;
    background-color: #D72F3C;
    border-color: #D72F3C;
    color: white;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #D32F2F;
    border-color: #D32F2F;
    color: white;
}

.btn-danger:active,
.btn-danger.active {
    background-color: #B71C1C;
    border-color: #B71C1C;
    color: white;
}

.btn-danger:disabled,
.btn-danger.disabled {
    background-color: #E4E7EC;
    border-color: #E4E7EC;
    color: #98A2B3;
}

/* ==========================================
   Success Button (Figma: #23A455)
   ========================================== */
.btn-success {
    --bs-btn-bg: #23A455;
    --bs-btn-border-color: #23A455;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #1E8F4A;
    --bs-btn-hover-border-color: #1E8F4A;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #197A3F;
    --bs-btn-active-border-color: #197A3F;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: #E4E7EC;
    --bs-btn-disabled-border-color: #E4E7EC;
    --bs-btn-disabled-color: #98A2B3;
    background-color: #23A455;
    border-color: #23A455;
    color: white;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #1E8F4A;
    border-color: #1E8F4A;
    color: white;
}

.btn-success:active,
.btn-success.active {
    background-color: #197A3F;
    border-color: #197A3F;
    color: white;
}

.btn-success:disabled,
.btn-success.disabled {
    background-color: #E4E7EC;
    border-color: #E4E7EC;
    color: #98A2B3;
}

/* ==========================================
   Info Button (モック準拠: ニュートラルグレー)
   モックではbtn-infoに色定義なし＝ブラウザデフォルトのグレー表示
   ========================================== */
.btn-info {
    --bs-btn-bg: #E4E7EC;
    --bs-btn-border-color: #E4E7EC;
    --bs-btn-color: #181D27;
    --bs-btn-hover-bg: #D0D5DD;
    --bs-btn-hover-border-color: #D0D5DD;
    --bs-btn-hover-color: #181D27;
    --bs-btn-active-bg: #98A2B3;
    --bs-btn-active-border-color: #98A2B3;
    --bs-btn-active-color: #181D27;
    --bs-btn-disabled-bg: #E4E7EC;
    --bs-btn-disabled-border-color: #E4E7EC;
    --bs-btn-disabled-color: #98A2B3;
    background-color: #E4E7EC;
    border-color: #E4E7EC;
    color: #181D27;
}

.btn-info:hover,
.btn-info:focus {
    background-color: #D0D5DD;
    border-color: #D0D5DD;
    color: #181D27;
}

.btn-info:active,
.btn-info.active {
    background-color: #98A2B3;
    border-color: #98A2B3;
    color: #181D27;
}

.btn-info:disabled,
.btn-info.disabled {
    background-color: #E4E7EC;
    border-color: #E4E7EC;
    color: #98A2B3;
}

/* ==========================================
   Warning Button (Figma: ニュートラルグレー)
   ========================================== */
.btn-warning {
    --bs-btn-bg: #E4E7EC;
    --bs-btn-border-color: #E4E7EC;
    --bs-btn-color: #181D27;
    --bs-btn-hover-bg: #D0D5DD;
    --bs-btn-hover-border-color: #D0D5DD;
    --bs-btn-hover-color: #181D27;
    --bs-btn-active-bg: #98A2B3;
    --bs-btn-active-border-color: #98A2B3;
    --bs-btn-active-color: #181D27;
    --bs-btn-disabled-bg: #E4E7EC;
    --bs-btn-disabled-border-color: #E4E7EC;
    --bs-btn-disabled-color: #98A2B3;
    background-color: #E4E7EC;
    border-color: #E4E7EC;
    color: #181D27;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #D0D5DD;
    border-color: #D0D5DD;
    color: #181D27;
}

.btn-warning:active,
.btn-warning.active {
    background-color: #98A2B3;
    border-color: #98A2B3;
    color: #181D27;
}

.btn-warning:disabled,
.btn-warning.disabled {
    background-color: #E4E7EC;
    border-color: #E4E7EC;
    color: #98A2B3;
}

/* ==========================================
   Text Button (btn-link)
   Figma Text Button デザインに基づく
   ========================================== */
.btn-link {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-color: #007DD7;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-hover-color: #007AC7;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-color: #006EB3;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-disabled-color: #98A2B3;
    background-color: transparent;
    border-color: transparent;
    color: #007DD7;
    text-decoration: none;
}

.btn-link:hover,
.btn-link:focus {
    background-color: transparent;
    border-color: transparent;
    color: #007AC7;
    text-decoration: none;
}

.btn-link:active,
.btn-link.active {
    background-color: transparent;
    border-color: transparent;
    color: #006EB3;
    text-decoration: none;
}

.btn-link:disabled,
.btn-link.disabled {
    background-color: transparent;
    border-color: transparent;
    color: #98A2B3;
    text-decoration: none;
}

/* ==========================================
   Outline Buttons
   Figma カラーパレットに基づく
   ========================================== */
.btn-outline-primary {
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: #007DD7;
    --bs-btn-color: #007DD7;
    --bs-btn-hover-bg: #F5F5F5;
    --bs-btn-hover-border-color: #007AC7;
    --bs-btn-hover-color: #007AC7;
    --bs-btn-active-bg: #E4E7EC;
    --bs-btn-active-border-color: #006EB3;
    --bs-btn-active-color: #006EB3;
    --bs-btn-disabled-bg: #FFFFFF;
    --bs-btn-disabled-border-color: #E4E7EC;
    --bs-btn-disabled-color: #98A2B3;
    background-color: #FFFFFF;
    border: 1px solid #007DD7;
    color: #007DD7;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: #F5F5F5;
    border-color: #007AC7;
    color: #007AC7;
}

.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: #E4E7EC;
    border-color: #006EB3;
    color: #006EB3;
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    background-color: #FFFFFF;
    border-color: #E4E7EC;
    color: #98A2B3;
}

.btn-outline-secondary {
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: #98A2B3;
    --bs-btn-color: #666666;
    --bs-btn-hover-bg: #F5F5F5;
    --bs-btn-hover-border-color: #9E9E9E;
    --bs-btn-hover-color: #181D27333;
    --bs-btn-active-bg: #E4E7EC;
    --bs-btn-active-border-color: #757575;
    --bs-btn-active-color: #212121;
    --bs-btn-disabled-bg: #FFFFFF;
    --bs-btn-disabled-border-color: #E4E7EC;
    --bs-btn-disabled-color: #98A2B3;
    background-color: #FFFFFF;
    border: 1px solid #98A2B3;
    color: #666666;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: #F5F5F5;
    border-color: #9E9E9E;
    color: #181D27333;
}

.btn-outline-secondary:active,
.btn-outline-secondary.active {
    background-color: #E4E7EC;
    border-color: #757575;
    color: #212121;
}

.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
    background-color: #FFFFFF;
    border-color: #E4E7EC;
    color: #98A2B3;
}

.btn-outline-danger {
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: #D72F3C;
    --bs-btn-color: #D72F3C;
    --bs-btn-hover-bg: #F5F5F5;
    --bs-btn-hover-border-color: #D32F2F;
    --bs-btn-hover-color: #D32F2F;
    --bs-btn-active-bg: #E4E7EC;
    --bs-btn-active-border-color: #B71C1C;
    --bs-btn-active-color: #B71C1C;
    --bs-btn-disabled-bg: #FFFFFF;
    --bs-btn-disabled-border-color: #E4E7EC;
    --bs-btn-disabled-color: #98A2B3;
    background-color: #FFFFFF;
    border: 1px solid #D72F3C;
    color: #D72F3C;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background-color: #F5F5F5;
    border-color: #D32F2F;
    color: #D32F2F;
}

.btn-outline-danger:active,
.btn-outline-danger.active {
    background-color: #E4E7EC;
    border-color: #B71C1C;
    color: #B71C1C;
}

.btn-outline-danger:disabled,
.btn-outline-danger.disabled {
    background-color: #FFFFFF;
    border-color: #E4E7EC;
    color: #98A2B3;
}

/* ==========================================
   Login Button
   ========================================== */
.login-form .btn-login {
    background-color: #007DD7;
    border-color: #007DD7;
    color: white;
}

.login-form .btn-login:hover,
.login-form .btn-login:focus {
    background-color: #007AC7;
    border-color: #007AC7;
    color: white;
}

.login-form .btn-login:active,
.login-form .btn-login.active {
    background-color: #006EB3;
    border-color: #006EB3;
    color: white;
}

.login-form .btn-login:disabled,
.login-form .btn-login.disabled {
    background-color: #E4E7EC;
    border-color: #E4E7EC;
    color: #98A2B3;
}