﻿body {
}


:root {
    /* メインの青を指定の色で上書き */
    --bs-primary: #053b66; /*#0a73c9;*/
    /* 必要に応じて、RGB形式も上書きしておくと透過背景などで役立ちます */
    --bs-primary-rgb: 5, 59, 102; /*10, 115, 201;*/
    /* メインカラーの薄いバージョン（subtle）を定義 */
    --bs-primary-subtle: #e6edf3;
    /* Subtle系に合わせる文字色 */
    --bs-primary-emphasis: #053b66;
    /* メインの緑を指定の色で上書き */
    --bs-success: #018c5f;
    --bs-success-rgb: 1, 140, 95;
}


/* テーブル内の文字色の既定値を変更 */
.table td {
    color: #4d4c4b !important;
}


/*---   primary   ---*/

.text-primary {
    color: var(--bs-primary) !important;
}

/* クラスとして上書き（!importantを入れて確実に反映させる） */
.bg-primary-subtle {
    background-color: var(--bs-primary-subtle) !important;
}

/* Subtle系とセットで使う文字色クラスも上書き */
.text-primary-emphasis {
    color: var(--bs-primary-emphasis) !important;
}
/* 全体の青色を少しグレーに寄せる */
.bg-custom-primary {
    background-color: var(--bs-primary) !important;
    filter: saturate(0.7) brightness(0.9); /* 彩度を半分、明度を少し下げる */
    color: white;
}

/* カードの枠線などもPrimaryに合わせる場合 */
.border-primary {
    border-color: var(--bs-primary) !important;
}

/* ボタンの基本色とホバー時の色を調整 */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

    .btn-primary:hover {
        /* ホバー時は少しだけ暗くして「押せる感」を出す */
        background-color: #085da5 !important;
        border-color: #085da5 !important;
        filter: saturate(0.8);
    }

/* アウトラインボタンの基本状態 */
.btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

    /* ホバー時の挙動をカスタマイズ */
    .btn-outline-primary:hover,
    .btn-outline-primary:active,
    .btn-outline-primary:focus {
        background-color: var(--bs-primary) !important;
        border-color: var(--bs-primary) !important;
        /*filter: saturate(0.7) brightness(0.7);*/ /*くすみ設定*/
        color: #ffffff !important;
    }

/* チェックボックス（稼働/非稼働）などの選択状態も合わせる */
.btn-check:checked + .btn-outline-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    filter: saturate(0.7) brightness(0.7);
}


/* primary基準に紺より */
.bg-settled-navy {
    background-color: var(--bs-primary) !important;
    /* saturateで彩度を落とし、brightnessで暗くして紺色に寄せる */
    filter: saturate(0.6) brightness(0.6);
    color: #f8f9fa; /* 文字色は少しだけグレーの入った白が合います */
}


/* 入力欄（input）にフォーカスが当たった時の青い光を調整 */
.form-control:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(10, 115, 201, 0.25);
}
/* -------------------- */

/*----- success -----*/
/* ボタンの基本色とホバー時の色を調整 */
.btn-success {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
}

    .btn-success:hover {
        /* ホバー時は少しだけ暗くして「押せる感」を出す */
        background-color: #014f35 !important;
        border-color: #014f35 !important;
        filter: saturate(0.8);
    }

/*-------------------*/


/*---- スイッチ ----*/

/* スイッチ本体に初期状態でシャドウを追加 */
.form-switch .form-check-input {
    /* 1. ほんのりグレーの影（立体感が出ます） */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    /* 2. 枠線の色も少し調整 */
    border-color: #dee2e6;
    /* スムーズに色が変わるようにアニメーションを追加 */
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}


/* チェックが入った時の色を上書き */
.form-switch-success .form-check-input:checked {
    background-color: #198754; /* 緑色 */
    border-color: #198754;
}

/* フォーカス時の影も緑っぽくするとより自然です */
.form-switch-success .form-check-input:focus {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/* -------------------- */
