/* ==========================================================================
   Theme colors / Bootstrap overrides
   ========================================================================== */

:root {
    --bs-primary: #ea4b4b;
    --bs-primary-rgb: 234, 75, 75;

    /* テーマに馴染むウォームグレーで secondary を上書き */
    --bs-secondary: #8a7878;
    --bs-secondary-rgb: 138, 120, 120;
    --bs-secondary-color: #8a7878;
}

/* ===== Primary (theme) ===== */
.bg-primary {
    background-color: #ea4b4b !important;
}

.btn-primary {
    --bs-btn-bg: #ea4b4b;
    --bs-btn-border-color: #ea4b4b;
    --bs-btn-hover-bg: #d33e3e;
    --bs-btn-hover-border-color: #d33e3e;
    --bs-btn-active-bg: #bd3232;
    --bs-btn-active-border-color: #bd3232;
    --bs-btn-disabled-bg: #ea4b4b;
    --bs-btn-disabled-border-color: #ea4b4b;
}

.btn-outline-primary {
    --bs-btn-color: #ea4b4b;
    --bs-btn-border-color: #ea4b4b;
    --bs-btn-hover-bg: #ea4b4b;
    --bs-btn-hover-border-color: #ea4b4b;
    --bs-btn-active-bg: #ea4b4b;
    --bs-btn-active-border-color: #ea4b4b;
}

/* ===== Secondary (warm gray) ===== */
.text-secondary {
    color: #8a7878 !important;
}

.bg-secondary {
    background-color: #8a7878 !important;
}

.btn-secondary {
    --bs-btn-bg: #8a7878;
    --bs-btn-border-color: #8a7878;
    --bs-btn-hover-bg: #756464;
    --bs-btn-hover-border-color: #756464;
    --bs-btn-active-bg: #5f5252;
    --bs-btn-active-border-color: #5f5252;
    --bs-btn-disabled-bg: #8a7878;
    --bs-btn-disabled-border-color: #8a7878;
}

.btn-outline-secondary {
    --bs-btn-color: #8a7878;
    --bs-btn-border-color: #8a7878;
    --bs-btn-hover-bg: #8a7878;
    --bs-btn-hover-border-color: #8a7878;
    --bs-btn-active-bg: #8a7878;
    --bs-btn-active-border-color: #8a7878;
}

/* ===== Cool (subtle blue) ===== */
.btn-outline-cool {
    --bs-btn-color: #2c5e82;
    --bs-btn-bg: #e4f2f9;
    --bs-btn-border-color: #b9cbdb;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2c5e82;
    --bs-btn-hover-border-color: #2c5e82;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #2c5e82;
    --bs-btn-active-border-color: #2c5e82;
    --bs-btn-disabled-color: #2c5e82;
    --bs-btn-disabled-bg: #e4f2f9;
    --bs-btn-disabled-border-color: #b9cbdb;
}

/* ===== Theme color utility classes ===== */
.bg-theme {
    background-color: #ea4b4b;
}

.bg-theme-subtle {
    background-color: #ffeeee;
}

.bg-theme-warm {
    background-color: #ffebdc;
}

.bg-theme-cool {
    background-color: #e4f2f9;
}

.text-theme {
    color: #ea4b4b;
}

/* ===== Form label 統一スタイル ===== */
.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.4rem;
}

/* ===== 中央寄せアコーディオンヘッダー（矢印を fa-angle-down に、展開で上向き） ===== */
.accordion-button-centered::after {
    background-image: none !important;
    content: "\f107"; /* fa-angle-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    width: auto;
    height: auto;
    margin-left: 1rem;
    transition: transform 0.2s ease-in-out;
}

.accordion-button-centered:not(.collapsed)::after {
    transform: rotate(180deg);
}

/* ===== Form プレースホルダーを薄めに ===== */
.form-control::placeholder,
.form-select::placeholder {
    color: #c0b0b0 !important;
    opacity: 1;
}

/* ===== ラジオ・チェックボックス（テーマカラー対応） ===== */
.form-check-input[type="radio"],
.form-check-input[type="checkbox"] {
    width: 1.15em;
    height: 1.15em;
    margin-top: 0.2em;
    cursor: pointer;
    border-color: #c0b0b0;
}

.form-check-input[type="radio"]:checked,
.form-check-input[type="checkbox"]:checked {
    background-color: #ea4b4b;
    border-color: #ea4b4b;
}

.form-check-input:focus {
    border-color: #ea4b4b;
    box-shadow: 0 0 0 0.2rem rgba(234, 75, 75, 0.2);
}

.form-check-label {
    cursor: pointer;
    padding-left: 0.25rem;
    color: #5a3838;
}

.form-check-inline {
    margin-bottom: 0.4rem;
}

/* ===== 問診票のラジオ・チェックボックスをボタン風に ===== */
.interview-input-group .form-check {
    padding-left: 0;
    min-height: 0;
    margin-bottom: 0;
}

.interview-input-group .form-check-inline {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0;
}

.interview-input-group .form-check-input[type="radio"],
.interview-input-group .form-check-input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    margin: 0;
    float: none;
}

.interview-input-group label {
    display: inline-block;
    padding: 0.4rem 1.1rem;
    border: 1px solid #d6cccc;
    border-radius: 50rem;
    background-color: #fff;
    color: #5a3838;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    font-size: 0.875rem;
    margin: 0;
}

.interview-input-group label:hover {
    border-color: #8a7878;
    color: #8a7878;
}

.interview-input-group label:has(input:checked) {
    background-color: #8a7878;
    border-color: #8a7878;
    color: #fff;
}

.interview-input-group label:has(input:focus) {
    box-shadow: 0 0 0 0.2rem rgba(138, 120, 120, 0.2);
}

/* ===== レスポンシブカード（スマホでは画面いっぱい） ===== */
@media (max-width: 767.98px) {
    body.bg-theme-subtle {
        background-color: #fff !important;
    }
    .card-responsive {
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .card-responsive-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 1rem !important;
    }
}