/* ==========================================================
  masterhub 用 Bootstrap/AdminLTE 上書き
  - メイン：淡いパープル
  - サブ：ペリウィンクルブルー
========================================================== */

/* パレット管理 */
:root {
  /* ベース */
  --bg-base: #faf7fb;
  /* コンテンツ背景 */
  --bg-surface: #f8f8f8;
  --bg-subtle: #f4eff7;

  /* 文字色 */
  --text-main: #4a4458;
  --text-muted: #6d667a;

  /* Primary（紫） */
  --pri-50: #f6f2fb;
  --pri-100: #ede5f7;
  --pri-200: #dbcbee;
  --pri-300: #c3a9e2;
  --pri-400: #ac87d6;
  --pri-500: #9666cb;
  /* 基本トーン（ボタン/見出し） */
  --pri-600: #824fbf;
  --pri-700: #6f41ae;
  /* ホバー/強調 */
  --pri-800: #5c3595;
  --pri-900: #4b2c7b;

  /* Secondary: ペリウィンクルブルー */
  --sec-50: #f6f8fe;
  --sec-100: #e7edfb;
  --sec-200: #d2dbf7;
  --sec-300: #b3c2f0;
  --sec-400: #91a4e8;
  --sec-500: #7387df;
  /* メイン */
  --sec-600: #5c6dc5;
  --sec-700: #4958a1;
  /* 強調 */
  --sec-800: #38447d;
  --sec-900: #2b3560;

  /* 補助：シンプルなグレー */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;


  /* 状態色（柔らかめに調整） */
  --succ-100: #e3f4e9;
  --succ-500: #4cb162;
  --succ-700: #2d8340;

  --warn-100: #fff4db;
  --warn-300: #eec265;
  --warn-500: #e8b13a;
  --warn-700: #c69217;

  --dang-100: #fbe6e6;
  --dang-500: #d16565;
  --dang-700: #bd4a4a;

  --info-100: #e6f5f7;
  --info-500: #6cb9c6;
  --info-700: #4a96a3;

  /* 枠線/区切り/カード */
  --line-soft: #e7e1ef;
  --card-edge: var(--pri-200);
  --chip-bg: var(--pri-100);

  /* ページネーション */
  --page-bg: var(--sec-100);
  --page-hover: var(--sec-200);
  --page-active: var(--sec-400);
  --page-text: var(--text-main);

  /* テーブル */
  --tbl-header-bg-light: var(--gray-50);
  --tbl-header-bg: var(--gray-100);
  --tbl-header-text: var(--gray-700);
  --tbl-header-border: var(--gray-200);


}


/* --------------------------------
  ベース
-------------------------------- */
body {
  background: var(--bg-base);
  color: var(--text-main);
}

.content-wrapper {
  background: var(--bg-surface);
}

/* tables */
table {
  background: #fff;
}

/* --------------------------------
    ヘッダー nav
-------------------------------- */
.main-header {
  background: var(--bg-subtle);
  color: var(--text-main);
}

.main-header .navbar-nav>.nav-item>.nav-link {
  color: var(--text-main);
  transition: color 0.2s ease;
}

.main-header .navbar-nav>.nav-item>.nav-link:hover {
  color: var(--pri-700);
}

/* --------------------------------
    サイドバー nav
-------------------------------- */
.main-sidebar {
  background: var(--bg-subtle);
  color: var(--text-main);
}

.main-sidebar .brand-link {
  background: var(--bg-subtle);
  color: var(--text-main);
}

.main-sidebar .nav-item>.nav-link {
  color: var(--text-main);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.main-sidebar .nav-item>.nav-link:hover {
  background: var(--sec-100);
  color: var(--sec-700);
}

.main-sidebar .nav-header {
  border-top: 1px solid #dee2e6;
  padding-top: 6px;
  margin-top: 12px;
}

.user-panel {
  border-bottom: 1px solid #dee2e6;
}

/* --------------------------------
    nav-pills
-------------------------------- */
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: #fff;
  background-color: var(--sec-400);
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.nav-pills .nav-link:not(.active):hover {
  color: var(--sec-700);
  background-color: var(--sec-100);
  border-radius: 4px;
}

/* --------------------------------
    リンク
-------------------------------- */
a {
  color: var(--pri-500);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--sec-600);
}

/* --------------------------------
    アイコンリンクボタン
-------------------------------- */
.btn-link-icon {
  --icon-hover-bg: var(--pri-100);
  --icon-hover-fg: var(--pri-600);

  background: transparent !important;
  border: 0 !important;
  color: var(--text-muted, #6c757d) !important;
  padding: .25rem !important;
  line-height: 1 !important;
  border-radius: .5rem !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
}

.btn-link-icon:hover,
.btn-link-icon:focus {
  background: var(--icon-hover-bg) !important;
  color: var(--icon-hover-fg) !important;
}

.btn-link-icon:active {
  transform: none !important;
  box-shadow: none !important;
}

.btn-link-icon-danger {
  --icon-hover-bg: rgba(220, 53, 69, .12);
  --icon-hover-fg: #83333b;
  color: #df5663 !important;
}

.btn-link-icon-sm {
  padding: .125rem !important;
  border-radius: .375rem !important;
}

.btn-link-icon-lg {
  padding: .5rem !important;
  border-radius: .75rem !important;
}

.btn-link-icon[disabled],
.btn-link-icon.disabled {
  opacity: .3;
}

.btn-link-icon+.btn-link-icon {
  margin-left: .5rem;
}

/* --------------------------------
    テキスト
-------------------------------- */
.text-orange {
  color: #da7715;
}


/* --------------------------------
    ボタン（filled）
-------------------------------- */
.btn-system-default {
  background-color: #f8f9fa !important;
  border-color: #ddd !important;
  color: #444 !important;
}

.btn-system-default:hover {
  background-color: #e9ecef !important;
  color: #2b2b2b !important;
}

.btn-default {
  background: var(--pri-100) !important;
  border-color: var(--pri-100) !important;
  color: var(--text-main) !important;
}

.btn-default:hover {
  background: var(--pri-200) !important;
  border-color: var(--pri-200) !important;
}

.btn-primary {
  background: var(--pri-500) !important;
  border-color: var(--pri-500) !important;
  color: #fff !important;
}

.btn-primary:hover {
  background: var(--pri-700) !important;
  border-color: var(--pri-700) !important;
}

.btn-secondary {
  background: #9b9aa3 !important;
  border-color: #9b9aa3 !important;
  color: #fff !important;
}

.btn-secondary:hover {
  background: #7f7a8f !important;
  border-color: #7f7a8f !important;
}

.btn-info {
  background: var(--succ-500) !important;
  border-color: var(--succ-500) !important;
  color: #fff !important;
}

.btn-info:hover {
  background: var(--succ-700) !important;
  border-color: var(--succ-700) !important;
}

.btn-danger {
  background: var(--dang-500) !important;
  border-color: var(--dang-500) !important;
  color: #fff !important;
}

.btn-danger:hover {
  background: var(--dang-700) !important;
  border-color: var(--dang-700) !important;
}

.btn-warning {
  background: var(--warn-500) !important;
  border-color: var(--warn-500) !important;
  color: #352f2a !important;
}

.btn-warning:hover {
  background: var(--warn-700) !important;
  border-color: var(--warn-700) !important;
  color: #fff !important;
}

.btn-info {
  background: var(--info-500) !important;
  border-color: var(--info-500) !important;
  color: #fff !important;
}

.btn-info:hover {
  background: var(--info-700) !important;
  border-color: var(--info-700) !important;
}

.btn-light {
  background: var(--pri-50) !important;
  border-color: var(--pri-100) !important;
  color: var(--text-main) !important;
}

.btn-light:hover {
  background: var(--pri-100) !important;
  border-color: var(--pri-200) !important;
}

.btn-dark {
  background: var(--pri-900) !important;
  border-color: var(--pri-900) !important;
  color: #fff !important;
}

.btn-dark:hover {
  background: var(--pri-800) !important;
  border-color: var(--pri-800) !important;
}

/* --------------------------------
    ボタン（outline）
-------------------------------- */
.btn-outline-default {
  color: var(--text-main) !important;
  border-color: var(--pri-200) !important;
  background: transparent !important;
}

.btn-outline-default:hover {
  background: var(--pri-100) !important;
  border-color: var(--pri-200) !important;
}

.btn-outline-primary {
  color: var(--pri-600) !important;
  border-color: var(--pri-400) !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  background: var(--pri-500) !important;
  border-color: var(--pri-500) !important;
  color: #fff !important;
}

.btn-outline-secondary {
  color: #7f7a8f !important;
  border-color: #ced4da !important;
  background: transparent !important;
}

.btn-outline-secondary:hover {
  background: #8e9397 !important;
  border-color: #8e9397 !important;
  color: #fff !important;
}

.btn-outline-success {
  color: var(--succ-500) !important;
  border-color: var(--succ-500) !important;
  background: transparent !important;
}

.btn-outline-success:hover {
  background: var(--succ-500) !important;
  border-color: var(--succ-700) !important;
  color: #fff !important;
}

.btn-outline-danger {
  color: var(--dang-500) !important;
  border-color: var(--dang-500) !important;
  background: transparent !important;
}

.btn-outline-danger:hover {
  background: var(--dang-500) !important;
  border-color: var(--dang-700) !important;
  color: #fff !important;
}

.btn-outline-warning {
  color: var(--warn-500) !important;
  border-color: var(--warn-500) !important;
  background: transparent !important;
}

.btn-outline-warning:hover {
  background: var(--warn-500) !important;
  border-color: var(--warn-500) !important;
  color: #352f2a !important;
}

.btn-outline-info {
  color: var(--info-500) !important;
  border-color: var(--info-500) !important;
  background: transparent !important;
}

.btn-outline-info:hover {
  background: var(--info-500) !important;
  border-color: var(--info-700) !important;
  color: #fff !important;
}

/* --------------------------------
    カード
-------------------------------- */
/* スリム化 */
@media (max-width: 767.98px) {
  .card-header {
    padding: .5rem .75rem;
  }

  .card-title {
    font-size: 1rem;
    margin: 0;
    line-height: 1.25;
  }

  .card-header .btn,
  .card-tools .btn {
    padding: .25rem .5rem;
    font-size: .875rem;
  }
}

.card-primary {
  background: #fcfcfc !important;
  border-color: var(--pri-400) !important;
  color: var(--text-main) !important;
}

.card-primary .card-header {
  background: var(--pri-500) !important;
  color: #fff !important;
}

.card-secondary {
  background: #fcfcfc !important;
  border-color: #b9b4c8 !important;
  color: var(--text-main) !important;
}

.card-secondary .card-header {
  background: #9a96a8 !important;
  color: #fff !important;
}

.card-success {
  background: #fcfcfc !important;
  border-color: var(--succ-500) !important;
}

.card-success .card-header {
  background: var(--succ-700) !important;
  color: #fff !important;
}

.card-danger {
  background: #fcfcfc !important;
  border-color: var(--dang-500) !important;
}

.card-danger .card-header {
  background: var(--dang-700) !important;
  color: #fff !important;
}

.card-warning {
  background: #fcfcfc !important;
  border-color: var(--warn-500) !important;
  color: var(--text-main) !important;
}

.card-warning .card-header {
  background: var(--warn-500) !important;
  color: #352f2a !important;
}

.card-info {
  background: #fcfcfc !important;
  border-color: var(--info-500) !important;
}

.card-info .card-header {
  background: var(--info-700) !important;
  color: #fff !important;
}

.card-light {
  background: #fcfcfc !important;
  border-color: var(--line-soft) !important;
  color: var(--text-main) !important;
}

.card-light .card-header {
  background: var(--pri-100) !important;
}

.card-dark {
  background: #fcfcfc !important;
  border-color: var(--pri-900) !important;
  color: #fff !important;
}

.card-dark .card-header {
  background: var(--pri-800) !important;
}

/* アウトライン */
.card-outline-default {
  background: #fcfcfc !important;
  border-top: 3px solid var(--pri-100) !important;
}

.card-outline-primary {
  background: #fcfcfc !important;
  border-top: 3px solid var(--pri-500) !important;
}

.card-outline-secondary {
  background: #fcfcfc !important;
  border-top: 3px solid #b9b4c8 !important;
}

.card-outline-success {
  background: #fcfcfc !important;
  border-top: 3px solid var(--succ-500) !important;
}

.card-outline-danger {
  background: #fcfcfc !important;
  border-top: 3px solid var(--dang-500) !important;
}

.card-outline-warning {
  background: #fcfcfc !important;
  border-top: 3px solid var(--warn-300) !important;
}

.card-outline-info {
  background: #fcfcfc !important;
  border-top: 3px solid var(--info-500) !important;
}

.card-outline-dark {
  background: #fcfcfc !important;
  border-top: 3px solid var(--pri-800) !important;
}

.card-outline-purple {
  background: #fcfcfc !important;
  border-top: 3px solid var(--pri-400) !important;
}

/* --------------------------------
    テーブル
-------------------------------- */

.table thead th {
  background-color: var(--tbl-header-bg);
  color: var(--tbl-header-text);
  /* border-bottom: 1px solid var(--tbl-header-border); */
}

.table thead.thead-light th {
  background-color: var(--tbl-header-bg-light);
  color: var(--tbl-header-text);
}

.table-default {
  background: var(--pri-50) !important;
  color: var(--text-main) !important;
}

.table-primary {
  background: var(--pri-50) !important;
  color: var(--text-main) !important;
}

.table-secondary {
  background: var(--pri-100) !important;
  color: var(--text-main) !important;
}

/* --------------------------------
    背景ユーティリティ
-------------------------------- */
.bg-default {
  background: var(--pri-100) !important;
  color: var(--text-main) !important;
}

.bg-primary {
  background: var(--pri-500) !important;
  color: #fff !important;
}

.bg-secondary {
  background: #eee9f2 !important;
  color: var(--text-main) !important;
}

.bg-success {
  background: var(--succ-500) !important;
  color: #fff !important;
}

.bg-danger {
  background: var(--dang-500) !important;
  color: #fff !important;
}

.bg-warning {
  background: var(--warn-500) !important;
  color: #352f2a !important;
}

.bg-info {
  background: var(--info-500) !important;
  color: #fff !important;
}

.bg-light {
  background: #f9f7fb !important;
  color: var(--text-main) !important;
}

.bg-dark {
  background: var(--pri-900) !important;
  color: #fff !important;
}

.bg-super-light {
  background: var(--gray-50) !important;
  color: var(--text-main) !important;
}

/* --------------------------------
    アラート
-------------------------------- */
.alert-primary {
  background: var(--pri-500) !important;
  border-color: var(--pri-500) !important;
  color: #fff !important;
}

.alert-secondary {
  background: #9a96a8 !important;
  border-color: #9a96a8 !important;
  color: #fff !important;
}

.alert-success {
  background: var(--succ-500) !important;
  border-color: var(--succ-500) !important;
  color: #fff !important;
}

.alert-danger {
  background: var(--dang-500) !important;
  border-color: var(--dang-500) !important;
  color: #fff !important;
}

.alert-warning {
  background: var(--warn-500) !important;
  border-color: var(--warn-500) !important;
  color: #352f2a !important;
}

.alert-info {
  background: var(--info-500) !important;
  border-color: var(--info-500) !important;
  color: #fff !important;
}

/* --------------------------------
    バッジ
-------------------------------- */
/* 大きめバッジ */
.badge-lg {
  font-size: 1rem !important;
  padding: .35rem;
  border-radius: .5rem;
  /* line-height: 1.1; */
}

/* 小さめバッジ */
.badge-sm {
  font-size: 0.8rem !important;
  padding: .15rem;
  border-radius: .5rem;
  /* line-height: 1.1; */
}

.badge-primary {
  background: var(--pri-500) !important;
  color: #fff !important;
}

.badge-secondary {
  background: #d6d3df !important;
  color: #4f4a5a !important;
}

.badge-success {
  background: var(--succ-500) !important;
  color: #fff !important;
}

.badge-danger {
  background: var(--dang-500) !important;
  color: #fff !important;
}

.badge-warning {
  background: var(--warn-500) !important;
  color: #352f2a !important;
}

.badge-info {
  background: var(--info-500) !important;
  color: #fff !important;
}

.badge-light {
  background: var(--pri-50) !important;
  color: var(--gray-400) !important;
}

.badge-dark {
  background: var(--pri-900) !important;
  color: #fff !important;
}

/* --------------------------------
    リスト/ラベル他
-------------------------------- */
.list-group-item-default {
  background: var(--pri-50) !important;
  border-color: var(--pri-200) !important;
  color: var(--text-main) !important;
}

.label-default {
  background: var(--chip-bg) !important;
  color: var(--text-main) !important;
  border-radius: 5px;
  padding: .3rem .6rem;
  font-size: .85rem;
}

/* --------------------------------
    ページネーション
-------------------------------- */
.page-link {
  color: var(--text-main);
}

.page-link:hover {
  color: #fff;
  background: var(--page-hover);
  border-color: var(--page-hover);
}

.page-item.active .page-link {
  color: #fff;
  background: var(--page-active);
  border-color: var(--page-active);
}

.page-item.disabled .page-link {
  color: var(--text-muted);
  pointer-events: none;
  background: var(--pri-50);
  border-color: var(--pri-100);
}

/* DataTables互換 */
.paginate_button.default {
  background: var(--page-bg) !important;
  border-color: var(--pri-200) !important;
  color: var(--text-main) !important;
}

.paginate_button.default:hover {
  background: var(--page-hover) !important;
  color: #fff !important;
}

/* --------------------------------
    Bootstrap Switch
-------------------------------- */
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger {
  background: var(--dang-500);
  color: #fff;
}

.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
  background: var(--succ-500);
  color: #fff;
}

/* --------------------------------
    モバイル調整
-------------------------------- */
@media (max-width: 768px) {

  .card-outline-default .card-header,
  .card-outline-primary .card-header,
  .card-outline-secondary .card-header,
  .card-outline-success .card-header,
  .card-outline-danger .card-header,
  .card-outline-warning .card-header,
  .card-outline-info .card-header,
  .card-outline-dark .card-header,
  .card-outline-light .card-header {
    padding: .5rem 1rem;
    font-size: .9rem;
  }

  .card-outline-default .card-header .card-title,
  .card-outline-primary .card-header .card-title,
  .card-outline-secondary .card-header .card-title,
  .card-outline-success .card-header .card-title,
  .card-outline-danger .card-header .card-title,
  .card-outline-warning .card-header .card-title,
  .card-outline-info .card-header .card-title,
  .card-outline-dark .card-header .card-title,
  .card-outline-light .card-header .card-title {
    font-size: 1rem;
  }

  .card-tools .btn-tool {
    font-size: .8rem;
    padding: .2rem .5rem;
  }
}

@media (max-width: 575.98px) {
  .fs-xs-90 {
    font-size: 90%;
  }

  .fs-xs-80 {
    font-size: 80%;
  }

  .fs-xs-70 {
    font-size: 70%;
  }
}