/* =================================================================
 * Page Specific Styles for Credit Card Breakeven Calculator
 * ================================================================= */

/* 結果表示エリアを追従させる */
.preview-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    /* ヘッダーの高さ + 余白 */
}

/* 総合判定エリアのスタイル */
#final-judgement {
    transition: all 0.3s ease;
}

/* 入力欄の微調整 (単位などのラベル幅を固定して揃える) */
.input-group-text {
    width: 45px;
    justify-content: center;
}

/* =================================================================
 * UX Improvements: 入力エリアの視認性向上（ハイコントラスト版）
 * ================================================================= */

/* 共通設定：トランジションで滑らかに */
#calculator-form .form-control,
#calculator-form .form-select,
#calculator-form .input-group-text {
    transition: all 0.2s ease-in-out;
}

/* --- ライトモード時の調整 --- */
/* 入力欄の背景は純白、枠線を少し濃くして境界をくっきりさせる */
#calculator-form .form-control,
#calculator-form .form-select {
    background-color: #ffffff;
    border: 1px solid #adb5bd; /* Bootstrap標準より一段階濃いグレー */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); /* ごく僅かな凹み */
    color: var(--bs-body-color);
}

/* 単位ラベル（円、％など） */
#calculator-form .input-group-text {
    background-color: #f1f3f5; /* 少し色を付けて入力欄の白と明確に分ける */
    border: 1px solid #adb5bd;
    color: #495057;
}

/* ホバー時（マウスを乗せた時） */
#calculator-form .form-control:hover,
#calculator-form .form-select:hover {
    border-color: #6c757d; /* マウスを乗せたら枠をさらに濃くして反応させる */
}

/* フォーカス時（入力中） */
#calculator-form .form-control:focus,
#calculator-form .form-select:focus {
    background-color: #ffffff;
    border-color: #0d6efd; /* Bootstrap標準のPrimary Blue */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05), 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}


/* --- ダークモード時の調整 --- */
/* ダークモードでは、入力欄を背景より「少し明るく」して浮き立たせるのがセオリー */
[data-bs-theme="dark"] #calculator-form .form-control,
[data-bs-theme="dark"] #calculator-form .form-select {
    background-color: rgba(255, 255, 255, 0.06); /* 真っ黒ではなく、わずかに白を混ぜて浮き上がらせる */
    border: 1px solid #6c757d; /* 枠線を少し明るめのグレーにして境界をはっきりさせる */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #f8f9fa;
}

/* ダークモードの単位ラベル */
[data-bs-theme="dark"] #calculator-form .input-group-text {
    background-color: rgba(0, 0, 0, 0.2); /* 単位ラベルは逆に少し沈ませてメリハリを */
    border: 1px solid #6c757d;
    color: #ced4da;
}

/* ホバー時（マウスを乗せた時） */
[data-bs-theme="dark"] #calculator-form .form-control:hover,
[data-bs-theme="dark"] #calculator-form .form-select:hover {
    border-color: #adb5bd; /* ホバーでさらに枠線を明るく */
    background-color: rgba(255, 255, 255, 0.09); /* 背景も少し明るくして反応させる */
}

/* フォーカス時（入力中） */
[data-bs-theme="dark"] #calculator-form .form-control:focus,
[data-bs-theme="dark"] #calculator-form .form-select:focus {
    background-color: rgba(255, 255, 255, 0.09);
    border-color: #86b7fe; /* フォーカス時は青枠 */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* =================================================================
 * Custom Utilities (Inline style replacements)
 * ================================================================= */
.label-width-70 {
    width: 70px;
}

.input-width-120 {
    width: 120px;
}

.text-heading {
    color: var(--bs-heading-color) !important;
}

.btn-remove-sm {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}