/* --- グローバル設定 --- */
body {
    transition: background-color 0.3s, color 0.3s;
}

body.dark-mode {
    background-color: #343a40 !important;
    color: #ffffff !important;
}

/* --- ヘッダー --- */
.main-header {
    background-color: #f8f9fa;
    color: #212529;
}

body.dark-mode .main-header {
    background-color: #23272b !important;
    color: #ffffff !important;
}

/* --- サイドバー --- */
.main-sidebar {
    background-color: #f8f9fa;
}

body.dark-mode .main-sidebar {
    background-color: #23272b !important;
}

body.dark-mode .main-sidebar .nav-link {
    color: #c2c7d0 !important;
}

body.dark-mode .main-sidebar .nav-link:hover,
body.dark-mode .main-sidebar .nav-link.active {
    background-color: #495057 !important;
    color: #ffffff !important;
}

/* --- コンテンツエリア --- */
.content-wrapper {
    background-color: #ffffff;
    color: #212529;
}

body.dark-mode .content-wrapper {
    background-color: #343a40 !important;
    color: #ffffff !important;
}

/* --- フォーム --- */
input, textarea, select {
    background-color: #ffffff;
    color: #212529;
    border: 1px solid #ced4da;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background-color: #23272b !important;
    color: #ffffff !important;
    border: 1px solid #495057 !important;
}

/* --- ボタン --- */
.btn {
    background-color: #007bff;
    color: #ffffff;
    border: 1px solid #007bff;
}

body.dark-mode .btn {
    background-color: #495057 !important;
    color: #ffffff !important;
    border: 1px solid #6c757d !important;
}

/* --- パンくずリスト --- */
.breadcrumb {
    background-color: #f8f9fa;
    color: #212529;
}

body.dark-mode .breadcrumb {
    background-color: #343a40 !important;
    color: #ffffff !important;
}

/* --- テーブル --- */
.table-dark {
    background-color: #454d55 !important;
    color: #ffffff !important;
    border: 1px solid #6c757d !important;
}

/* --- モーダル --- */
.modal-content {
    background-color: #ffffff;
    color: #212529;
}

body.dark-mode .modal-content {
    background-color: #23272b !important;
    color: #ffffff !important;
}

/* --- スクロールバー --- */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color: #343a40;
}

::-webkit-scrollbar-thumb {
    background-color: #495057;
    border-radius: 5px;
}

/* --- カード --- */
.card {
    background-color: #ffffff;
    color: #212529;
}

body.dark-mode .card {
    background-color: #454d55 !important;
    color: #ffffff !important;
    border: 1px solid #6c757d !important;
}

/* --- タブ --- */
.nav-tabs .nav-link {
    background-color: #f8f9fa;
    color: #212529;
    border: 1px solid #dee2e6;
}

body.dark-mode .nav-tabs .nav-link {
    background-color: #343a40 !important;
    color: #c2c7d0 !important;
    border: 1px solid #495057 !important;
}

/* --- ラジオボタン＆チェックボックス --- */
.form-check-input {
    background-color: #ffffff;
    border-color: #ced4da;
}

body.dark-mode .form-check-input {
    background-color: #23272b !important;
    border-color: #495057 !important;
}




/* --- ヘッダー --- */
.navbar {
    background-color: #f8f9fa;
    color: #212529;
    transition: background-color 0.3s, color 0.3s;
}

body.dark-mode .navbar {
    background-color: #23272b !important;
    color: #ffffff !important;
}

body.dark-mode .navbar .nav-link {
    color: #c2c7d0 !important;
}

body.dark-mode .navbar .nav-link:hover {
    color: #ffffff !important;
}

/* --- フッター --- */
.app-footer {
    background-color: #f8f9fa;
    color: #212529;
    padding: 15px;
    border-top: 1px solid #dee2e6;
    transition: background-color 0.3s, color 0.3s;
}

body.dark-mode .app-footer {
    background-color: #23272b !important;
    color: #c2c7d0 !important;
    border-top: 1px solid #495057 !important;
}

/* --- サイドバー --- */
.app-sidebar {
    background-color: #f8f9fa;
    color: #212529;
}

body.dark-mode .app-sidebar {
    background-color: #23272b !important;
    color: #ffffff !important;
}

body.dark-mode .app-sidebar .nav-link {
    color: #c2c7d0 !important;
}

body.dark-mode .app-sidebar .nav-link:hover,
body.dark-mode .app-sidebar .nav-link.active {
    background-color: #495057 !important;
    color: #ffffff !important;
}







/* --- 通常モードのパンくずリスト --- */
.breadcrumb .breadcrumb-item {
    color: #6c757d; /* 非アクティブなパンくずの文字色（通常モード） */
}

.breadcrumb .breadcrumb-item a {
    color: #007bff; /* リンクの文字色（通常モード） */
}

.breadcrumb .breadcrumb-item.active {
    color: #343a40; /* 現在のページの文字色（通常モード） */
}

/* --- ダークモードのパンくずリスト --- */
body.dark-mode .breadcrumb .breadcrumb-item {
    color: #c2c7d0; /* 非アクティブなパンくずの文字色（ダークモード） */
}

body.dark-mode .breadcrumb .breadcrumb-item a {
    color: #9cb3c9; /* リンクの文字色（ダークモード） */
}

body.dark-mode .breadcrumb .breadcrumb-item.active {
    color: #ffffff; /* 現在のページの文字色（ダークモード） */
}






/* --- 通常モードのタブスタイル --- */
.nav-tabs .nav-link {
    color: #343a40; /* 非アクティブタブの文字色 */
    background-color: #f8f9fa; /* 非アクティブタブの背景色 */
    border: 1px solid #dee2e6; /* 境界線の色 */
}

.nav-tabs .nav-link:hover {
    background-color: #e9ecef; /* 非アクティブタブのホバー背景色 */
    border-color: #ced4da;
}

.nav-tabs .nav-link.active {
    color: #ffffff; /* アクティブタブの文字色（通常モード） */
    background-color: #343a40; /* アクティブタブの背景色（通常モード） */
    border-color: #343a40 #343a40 #ffffff;
}

/* --- ダークモードのタブスタイル --- */
body.dark-mode .nav-tabs .nav-link {
    color: #c2c7d0; /* 非アクティブタブの文字色（ダークモード） */
    background-color: #343a40; /* 非アクティブタブの背景色（ダークモード） */
    border: 1px solid #495057; /* 境界線の色 */
}

body.dark-mode .nav-tabs .nav-link:hover {
    background-color: #495057; /* 非アクティブタブのホバー背景色（ダークモード） */
    border-color: #6c757d;
}

body.dark-mode .nav-tabs .nav-link.active {
    color: #343a40 !important; /* アクティブタブの文字色（ダークモード） */
    background-color: #ffffff !important; /* アクティブタブの背景色（ダークモード） */
    border-color: #ffffff #ffffff #343a40 !important; /* 境界線の色 */
}