/* =========================================================
 * JPCC Theme: Royal Navy — 共通ベース (全レイアウト共通)
 *
 * Bootstrap 5.3+ の --bs-* CSS 変数を上書きする方式。
 * Bootstrap 本体の CSS の「後ろ」に読み込むこと。
 *
 * 値は Figma 納品(ログイン 01_login)実測:
 *   primary #0A254F / gold #D4AF37 / border #D8D3C8 / grey #6B7280
 *
 * ※ ログイン等シングルレイアウト固有のスタイルは jpcc-single.css へ。
 *    メニューありレイアウト固有は jpcc-app.css へ(別途)。
 * ========================================================= */

:root {
  /* --- コア(Figma 実測) --- */
  --bs-primary:       #0A254F;
  --bs-primary-rgb:   10, 37, 79;
  --bs-secondary:     #0C2C5C;
  --bs-secondary-rgb: 12, 44, 92;
  --bs-success:       #1F8A5C;
  --bs-success-rgb:   31, 138, 92;
  --bs-danger:        #B5253A;
  --bs-danger-rgb:    181, 37, 58;
  --bs-warning:       #D4AF37;
  --bs-warning-rgb:   212, 175, 55;
  --bs-info:          #378ADD;
  --bs-info-rgb:      55, 138, 221;
  --bs-light:         #F4F6FA;
  --bs-light-rgb:     244, 246, 250;
  --bs-dark:          #0A254F;
  --bs-dark-rgb:      10, 37, 79;
  --bs-body-color:    #2C2C2A;
  --bs-body-bg:       #FFFFFF;
  --bs-border-color:  #D8D3C8;
  --bs-border-radius:    .3125rem;  /* 5px(入力・ボタン) */
  --bs-border-radius-sm: .25rem;
  --bs-border-radius-lg: .375rem;   /* 6px(カード) */
  --bs-body-font-size:   0.8125rem; /* 13px ベース(merchant と統一・row-form 等と一致) */

  /* --- JPCC 拡張トークン --- */
  --jpcc-navy-900:       #020817;  /* navy grad 最暗 */
  --jpcc-navy-800:       #071A37;  /* navy grad 中間 / press */
  --jpcc-navy-700:       #0C2C5C;  /* navy grad 最明 / hover */
  --jpcc-gold:           #D4AF37;
  --jpcc-gold-rgb:       212, 175, 55;
  --jpcc-gold-700:       #B8941F;  /* gold hover */
  --jpcc-grey:           #6B7280;
  --jpcc-input-focus-bg: #FFFDF8;
  --jpcc-navy-grad:      linear-gradient(173deg, #020817 0%, #071A37 45%, #0C2C5C 100%);
}

/* タイポグラフィ: Inter + 日本語システムフォント(Figma 準拠) */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN',
               'Noto Sans JP', Meiryo, sans-serif;
  font-size: 0.8125rem;   /* 13px ベース */
  line-height: 1.5;
}

/* Primary ボタン: 指定のネイビーグラデーション + 影(Figma 準拠) */
.btn-primary {
  --bs-btn-bg:                 #0A254F;
  --bs-btn-border-color:       #0A254F;
  --bs-btn-hover-bg:           #0C2C5C;
  --bs-btn-hover-border-color: #0C2C5C;
  --bs-btn-active-bg:          #071A37;
  --bs-btn-active-border-color:#071A37;
  background-image: var(--jpcc-navy-grad);
  border: 0;
  box-shadow: 0 12px 20px -12px rgba(0, 15, 41, .2);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background-image: var(--jpcc-navy-grad);
}

.btn-outline-primary {
  --bs-btn-color:              #0A254F;
  --bs-btn-border-color:       #0A254F;
  --bs-btn-hover-bg:           #0A254F;
  --bs-btn-hover-border-color: #0A254F;
}

/* Gold accent */
.bg-gold     { background-color: #D4AF37 !important; color: #4A1B0C; }
.text-gold   { color: #D4AF37 !important; }
.border-gold { border-color: #D4AF37 !important; }

.btn-gold {
  --bs-btn-color:              #4A1B0C;
  --bs-btn-bg:                 #D4AF37;
  --bs-btn-border-color:       #D4AF37;
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           #B8941F;
  --bs-btn-hover-border-color: #B8941F;
}

/* JPCC 独自コンポーネント */
.brand-jpcc {
  font-weight: 700;
  letter-spacing: -.01em;
  color: #0A254F;             /* 白背景はネイビー。濃ネイビー背景上では .text-gold を併用 */
}
.amount-display {
  font-size: 1.75rem;
  font-weight: 500;
  color: #2C2C2A;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.badge-trust {
  background-color: #1F8A5C;
  color: #fff;
  font-weight: 500;
  font-size: .75rem;
  padding: .25rem .625rem;
  border-radius: 50rem;
}
.badge-premium {
  background-color: #D4AF37;
  color: #4A1B0C;
  font-weight: 500;
  font-size: .75rem;
  padding: .25rem .625rem;
  border-radius: 50rem;
}
.card-jpcc {
  background-color: #FFFFFF;
  border: 1.2px solid #D8D3C8;
  border-radius: .375rem;
}

/* ---- アクションドロップダウンを table-responsive から逃がす ----
 * .table-responsive の overflow-x:auto は、テーブル内のドロップダウンメニューを
 * クリップしてしまうため、card-jpcc 配下では overflow を解放する。
 * (横スクロールの代わりにテーブル全体が card 幅を超える可能性があるが、
 *  管理画面のテーブル幅では実用上問題にならない。) */
.card-jpcc > .table-responsive,
.card-jpcc .table-responsive {
  overflow: visible;
}
/* ドロップダウンメニュー自体の z-index を確保 */
.table .dropdown-menu {
  z-index: 1050;
}

/* 入力欄: 通常はニュートラル枠、focus でゴールド枠 + クリーム背景(Figma 準拠) */
.form-control,
.form-select {
  border: 1.2px solid #D8D3C8;
}
.form-control:focus,
.form-select:focus {
  border-color: #D4AF37;
  background-color: #FFFDF8;
  box-shadow: 0 0 0 .2rem rgba(212, 175, 55, .15);
}

/* =========================================================
 * 入力サイズ統一(コンパクト・全画面) — height/padding/font を sm 相当に固定
 * ※ api は対象外(SP表示で font<16px だとズームするため別管理)
 * ========================================================= */
.form-control,
.form-select {
  font-size: .8125rem;
  padding: .25rem .5rem;
  min-height: 31px;
  height: 31px;
}
/* 複数行・複数選択・サイズ指定セレクト・sm/lg は高さ固定しない */
textarea.form-control,
.form-select[multiple],
.form-select[size]:not([size="1"]),
.form-control-sm, .form-select-sm,
.form-control-lg, .form-select-lg {
  height: auto;
}
.input-group-text {
  font-size: .8125rem;
  padding: .25rem .5rem;
}

/* =========================================================
 * 後ログイン アプリシェル (Figma 02_dashboard 準拠)
 *   ・サイドバー: ネイビーグラデ(固定 225px)
 *   ・トップバー: 白(検索 + 通知 + プロフィール)
 *   ・コンテンツ: ライトグレー背景
 * ========================================================= */
:root {
  --jpcc-sidebar-w:    225px;
  --jpcc-topbar-h:     60px;
  --jpcc-app-bg:       #F4F6FA;
  --jpcc-navy-grad-sidebar: linear-gradient(103.455deg, #020817 0%, #071A37 45%, #0C2C5C 100%);
}

.app-shell {
  min-height: 100vh;
  background-color: var(--jpcc-app-bg);
}

/* ---- サイドバー(ネイビー・固定) ---- */
.app-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--jpcc-sidebar-w);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  background-color: #071A37;
  background-image: var(--jpcc-navy-grad-sidebar);
  box-shadow: 12px 0 28px -18px rgba(0, 13, 36, .24);
  isolation: isolate;        /* ::after の薄ロゴを子の背面へ */
}
/* BS5 の .offcanvas-lg .offcanvas-body { padding:0 } を上書き(Figma: pt-20 px-25 pb-25) */
.app-sidebar .offcanvas-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 25px 25px;
}
/* 薄ロゴ(opacity .4): 右下にロゴの左上 1/4(≒25%)だけを表示
 * 配置領域は右下、background は top left/200% で画像の左上クォーターを切り出す */
.app-sidebar::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--jpcc-sidebar-w);
  height: var(--jpcc-sidebar-w);
  background: url('/img/login-bg-pattern.png') no-repeat top left;
  background-size: 200% 200%;
  opacity: .4;
  pointer-events: none;
  z-index: -1;
}

/* ロゴ lockup */
.sidebar-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: .25rem .5rem;
  text-decoration: none;
}
.sidebar-brand-chip { height: 23px; width: auto; display: block; }
.sidebar-brand-word { height: 17px; width: auto; display: block; }
.sidebar-brand-caption {
  font-size: .625rem;
  color: rgba(255, 255, 255, .7);
  letter-spacing: .02em;
  padding: .25rem .5rem 0;
  margin-bottom: 25px;
}

/* ナビ — グループ間 25px (Figma gap-25) */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 10px;                       /* label ↔ list / item間 (Figma) */
}
.sidebar-group-label {
  font-size: .6875rem;            /* 11px */
  color: #8595AA;
  letter-spacing: .02em;
  margin: 0;
}
.sidebar-group-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sidebar-group-list > li { padding: 0; }

/* メニューアイテム (Figma "Menu status")
 *   通常   : 透明
 *   hover  : 白 6%
 *   現在ページ(active): 白 11% + 薄青枠 + ゴールド左バー
 * ジオメトリ: h40 / pr32・pl0 / indicator↔body gap15 / icon↔text gap10 / rounded5 */
.sidebar-group-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px 0 0;
  color: #FFFFFF;
  text-decoration: none;
  font-size: .75rem;              /* 12px */
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 5px;
  transition: background-color .12s ease, border-color .12s ease;
}
.sidebar-group-item:hover {
  background-color: rgba(255, 255, 255, .06);
}
.sidebar-group-item.active {
  background-color: rgba(255, 255, 255, .11);
  border-color: rgba(126, 200, 255, .22);
}
/* icon + text のまとまり (gap10) */
.sidebar-item-body {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.sidebar-item-body > i {
  width: 16px;
  text-align: center;
  font-size: .9rem;
  color: #FFFFFF;
  flex-shrink: 0;
}
.sidebar-item-body > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ゴールドのアクティブインジケータ(左の縦バー) */
.sidebar-indicator {
  width: 3px;
  height: 28px;
  border-radius: 2px;
  background-color: transparent;
  flex-shrink: 0;
}
.sidebar-group-item.active .sidebar-indicator {
  background-color: var(--jpcc-gold);
}
.sidebar-group-item-static {
  color: rgba(255, 255, 255, .5);
  cursor: default;
}
.sidebar-group-item-static:hover { background-color: transparent; }

/* 折りたたみトグル (3段目を持つ2段目) */
.sidebar-caret {
  flex-shrink: 0;
  font-size: .7rem;
  color: rgba(255, 255, 255, .55);
  transition: transform .18s ease;
}
.sidebar-group-toggle:not(.collapsed) .sidebar-caret {
  transform: rotate(180deg);
}

/* node1 グループ見出しも折りたたみトグル化 */
a.sidebar-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
}
a.sidebar-group-label:hover { color: #B9C5D6; }
a.sidebar-group-label .sidebar-caret { font-size: .6rem; }
.sidebar-group-label:not(.collapsed) .sidebar-caret { transform: rotate(180deg); }

/* 第3階層 (折りたたみ) — Figma に無いため独自。インデント + 左ライン */
.sidebar-subgroup-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 2px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 1px solid rgba(255, 255, 255, .12);
  margin-left: 9px;               /* indicator 中心あたりに線 */
  padding-left: 14px;
}
.sidebar-subgroup-item {
  height: 34px;
  font-size: .75rem;              /* 12px */
  font-weight: 400;
  color: rgba(255, 255, 255, .8);
  padding-right: 12px;
}
.sidebar-subgroup-item.active {
  color: #FFFFFF;
}

/* 下部 footer (logout + copyright) */
.sidebar-footer { margin-top: auto; padding-top: 1.25rem; }
.sidebar-copyright {
  font-size: .6875rem;
  color: rgba(255, 255, 255, .65);
  text-align: center;
  margin-top: 1rem;
}

/* オフキャンバス(モバイル) */
@media (max-width: 991.98px) {
  .app-sidebar.offcanvas-lg { width: 260px; z-index: 1045; }
}

/* ---- トップバー(白) ---- */
.app-topbar {
  height: var(--jpcc-topbar-h);
  margin-left: var(--jpcc-sidebar-w);
  background-color: #FFFFFF;
  border-bottom: 1px solid #E7E9EF;
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
}
.app-topbar .btn-link {
  color: #4A5159;
  text-decoration: none;
}
.app-topbar .btn-link:hover { color: var(--bs-primary); }
.topbar-search {
  position: relative;
  width: 100%;
  max-width: 420px;
}
.topbar-search > i {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
  font-size: .85rem;
  pointer-events: none;
}
.topbar-search .form-control {
  height: 38px;
  padding-left: 2.25rem;
  background-color: var(--jpcc-app-bg);
  border-color: #E7E9EF;
  font-size: .8125rem;
}
.topbar-search .form-control:focus {
  background-color: #FFFFFF;
}
/* システム識別ラベル(admin/merchant/agency 判別) */
.topbar-context {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .8rem;
  border-radius: 50rem;
  background-color: #F0F3F8;
  color: var(--bs-primary);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.topbar-context > i {
  font-size: .85rem;
  color: var(--jpcc-gold);
}

.topbar-user-name {
  font-size: .8125rem;
  font-weight: 600;
  color: #2C2C2A;
  line-height: 1.15;
}
.topbar-user-role {
  font-size: .6875rem;
  color: #9CA3AF;
  line-height: 1.1;
}

/* ---- コンテンツ ---- */
.app-content {
  margin-left: var(--jpcc-sidebar-w);
  padding: 1.5rem;
  min-height: calc(100vh - var(--jpcc-topbar-h));
}
@media (max-width: 991.98px) {
  .app-topbar,
  .app-content { margin-left: 0; }
}

/* ---- ページヘッダー(タイトル + ゴールド下線) ---- */
.page-header {
  position: relative;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #E7E9EF;
}
.page-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 32px;
  height: 2px;
  background-color: var(--jpcc-gold);
}
.page-header-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--bs-primary);
  margin: 0;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.page-header-subtitle {
  font-size: .8125rem;
  color: #6F7785;
  margin-top: .375rem;
}

/* レガシー alert dropdown の informer ドット */
.informer.informer-pulsate { font-size: .625rem !important; }

/* カード内セクション見出し(ゴールドの縦バー + ネイビー見出し) */
.card-title-jpcc {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--bs-primary);
  letter-spacing: -.01em;
}
.card-title-jpcc::before {
  content: '';
  flex: 0 0 auto;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background-color: var(--jpcc-gold);
}
.card-subtitle-jpcc {
  font-size: .8125rem;
  color: #6F7785;
  margin-top: .25rem;
}

/* BS5 で廃止された btn-xs の互換(レガシー JS が付与する) */
.btn-xs {
  padding: .15rem .45rem;
  font-size: .75rem;
  border-radius: .2rem;
  line-height: 1.4;
}

/* =========================================================
 * BS3 / 旧テーマ → BS5 互換レイヤ【暫定】
 *   既存 274 画面のレガシーマークアップを BS5 シェル内で
 *   破綻なく表示するための暫定 CSS。各画面を本格 BS5 化
 *   したら、その画面分は不要になる(段階的に削除)。
 * ========================================================= */

/* ---- .block / .panel をカード化 ---- */
.block,
.panel {
  background-color: #FFFFFF;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  margin-bottom: 1.5rem;
}
.block-head,
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .875rem 1.25rem;
  background-color: transparent;
  border-bottom: 1px solid var(--bs-border-color);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.block-title,
.panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--bs-primary);
  letter-spacing: -.01em;
}
.block-content,
.panel-body { padding: 1.25rem; }
.block-content.np,
.block-content.no-padding { padding: 0; }
.panel-footer {
  padding: .875rem 1.25rem;
  background-color: #F9FAFB;
  border-top: 1px solid var(--bs-border-color);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* ---- btn-default → outline-secondary 風 ---- */
.btn-default {
  --bs-btn-color:              #2C2C2A;
  --bs-btn-bg:                 #FFFFFF;
  --bs-btn-border-color:       var(--bs-border-color);
  --bs-btn-hover-color:        var(--bs-primary);
  --bs-btn-hover-bg:           #F4F6FA;
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-active-bg:          #ECEFF4;
  --bs-btn-active-border-color: var(--bs-border-color);
}

/* ---- BS3 .label(コンテキストバッジ) → BS5 badge 風 ---- */
.label {
  display: inline-block;
  padding: .28em .55em;
  font-size: .75em;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .35rem;
}
.label-default { background-color: #6F7785; }
.label-primary { background-color: var(--bs-primary); }
.label-success { background-color: var(--bs-success); }
.label-info    { background-color: var(--bs-info); }
.label-warning { background-color: var(--bs-warning); color: #4A1B0C; }
.label-danger  { background-color: var(--bs-danger); }

/* ---- form-group / control-label / help-block / has-error ---- */
.form-group { margin-bottom: 1rem; }
/* フォームラベル(検索フィルタ .form-label / ヘルパー .control-label) — 太字・小さめ・ネイビー */
.form-label,
.control-label {
  display: inline-block;
  margin-bottom: .35rem;
  font-size: .75rem;          /* 12px */
  font-weight: 600;           /* SemiBold(Figma) */
  letter-spacing: .02em;
  color: var(--bs-primary);
  line-height: 1.3;
}
.help-block {
  display: block;
  margin-top: .25rem;
  font-size: .8125rem;
  color: #6F7785;
}
.has-error .form-control { border-color: var(--bs-danger); }
.has-error .control-label,
.has-error .help-block { color: var(--bs-danger); }

/* ---- input-group-addon → input-group-text 風 ---- */
.input-group-addon {
  display: flex;
  align-items: center;
  flex: 0 0 auto;          /* flex 子として縮まない（折り返し防止） */
  white-space: nowrap;
  height: 31px;            /* form-control(31px) と高さを揃える */
  padding: .25rem .5rem;
  font-size: .8125rem;
  color: #4A5159;
  background-color: #F4F6FA;
  border: 1.2px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
/* addon を含む input-group は折り返さない（input が縮んで addon が右に並ぶ） */
.input-group:has(> .input-group-addon) { flex-wrap: nowrap; }
.input-group > .input-group-addon ~ .form-control,
.input-group > .form-control { min-width: 0; }
.input-group > .input-group-addon:first-child {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > .input-group-addon:last-child {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ---- card-header の見出し: BS5既定の特大 h2 を抑える ---- */
.card-header h1,
.card-header h2,
.card-header h3 {
  margin: 0;
  font-size: 1.0625rem;   /* ~17px */
  font-weight: 600;
  line-height: 1.4;
  color: var(--bs-primary);
}

/* ---- BS3 ユーティリティ ---- */
.pull-left  { float: left !important; }
.pull-right { float: right !important; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.hidden { display: none !important; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.table-condensed > :not(caption) > * > * { padding: .3rem .5rem; }
.well {
  padding: 1rem 1.25rem;
  background-color: #F4F6FA;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
}

/* ---- 旧テーマ: page-toolbar / widget-pie ---- */
.page-toolbar { margin-bottom: 1rem; }
.page-toolbar-title { font-size: 1.25rem; font-weight: 700; color: var(--bs-primary); }
.page-toolbar-subtitle { font-size: .8125rem; color: #6F7785; }
.widget-pie { display: flex; align-items: center; gap: .75rem; }
.widget-pie-info-num { font-weight: 600; color: #2C2C2A; }
.widget-pie-info-text { font-size: .8125rem; color: #6F7785; }

/* ---- helper *Block の行レイアウト(.row-form = ラベル/入力の横並び) ---- */
.row-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 1rem;
  --bs-gutter-x: 1.5rem;
}
.row-form > [class*="col-"] {
  padding-right: calc(var(--bs-gutter-x) * .5);
  padding-left: calc(var(--bs-gutter-x) * .5);
}
.row-form > [class*="col-"]:first-child {
  padding-top: .45rem;
  font-size: .8125rem;
}
.row-form strong { font-weight: 600; color: var(--bs-primary); }
.input-description { font-size: .75rem; color: #6F7785; margin-top: .25rem; }

/* BS4 custom-control(ラジオ/チェック) → BS5 form-check 風 */
.checkbox-inline,
.radio-inline {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-right: 1.25rem;
}
.custom-control-input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--bs-primary);
}
.custom-control-label { margin: 0; font-size: .8125rem; }

/* select(form-control / select2) に BS5 のドロップダウン矢印を付与 */
select.form-control,
select.select2,
.row-form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236F7785' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
}

/* ---- ページネーション(helper.pagination 出力) ---- */
.pagination-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding: .75rem 1.25rem;
}
.pagination-info {
  font-size: .8125rem;
  color: #6F7785;
}
.pagination-info b { color: var(--bs-primary); font-weight: 600; }
.pagination-info font { color: inherit; }
.pagination-pager .pagination { margin: 0; }

/* BS5 pagination を JPCC テーマ化(間隔ありのピル型) */
.pagination {
  --bs-pagination-color:              var(--bs-primary);
  --bs-pagination-bg:                 #FFFFFF;
  --bs-pagination-border-color:       var(--bs-border-color);
  --bs-pagination-border-radius:      .375rem;
  --bs-pagination-hover-color:        var(--bs-primary);
  --bs-pagination-hover-bg:           #F0F3F8;
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-color:        var(--bs-primary);
  --bs-pagination-focus-box-shadow:   0 0 0 .2rem rgba(10, 37, 79, .12);
  --bs-pagination-active-bg:          var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-disabled-color:     #B7BDC7;
  --bs-pagination-disabled-bg:        #FFFFFF;
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  --bs-pagination-padding-x:          .7rem;
  --bs-pagination-padding-y:          .35rem;
  --bs-pagination-font-size:          .8125rem;
  gap: .25rem;
}
.pagination .page-link {
  border-radius: .375rem;
  transition: background-color .12s ease, color .12s ease;
}
.pagination .page-item.active .page-link {
  background-image: var(--jpcc-navy-grad);
  border-color: transparent;
  box-shadow: 0 6px 14px -8px rgba(10, 37, 79, .55);
}

/* ---- 決済可能金額設定: 通貨ブロック ---- */
/* 通貨（JPY/USD/EUR）ごとの区切りブロック。枠線は既存 border-color 準拠 */
.currency-block {
  border-color: var(--bs-border-color) !important;
  border-radius: var(--bs-border-radius-lg) !important;
  background-color: #FAFBFC;
}
/* 通貨ラベル(「JPY（日本円）」等) */
.currency-block-label {
  color: var(--jpcc-grey) !important;
  margin: 0;
}
/* currency-block 内の row-form: 下マージンを詰める */
.currency-block .row-form {
  margin-bottom: .5rem;
}

/* =========================================================
 * メニューハブ画面 (.jpcc-menu-*)
 *   merchant/menu.html と shop/menu.html 共通。
 *   Royal Navy ハブヘッダー + セクションカードグリッド。
 * ========================================================= */

/* --- ハブヘッダー --- */
.jpcc-menu-hub-header {
  border-radius: .375rem;
  overflow: hidden;
}
.jpcc-menu-hub-header-inner {
  background-image: var(--jpcc-navy-grad);
  padding: 1.25rem 1.5rem 0;
  position: relative;
}
.jpcc-menu-hub-context {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.25rem;
}
.jpcc-menu-hub-context-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: .375rem;
  background-color: rgba(255, 255, 255, .1);
  color: var(--jpcc-gold);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.jpcc-menu-hub-label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .6);
  text-transform: uppercase;
  margin-bottom: .2rem;
}
.jpcc-menu-hub-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -.01em;
  line-height: 1.25;
}
/* ヘッダー上段: 店舗情報(左) と ステータス/ボタン(右) を両端寄せ */
.jpcc-menu-hub-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
}
.jpcc-menu-hub-top .jpcc-menu-hub-context {
  padding-bottom: 0;
}
.jpcc-menu-hub-actions {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-shrink: 0;
}
/* 決済可否バッジ */
.jpcc-pay-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .35rem .75rem;
  border-radius: 50rem;
  white-space: nowrap;
  line-height: 1;
}
.jpcc-pay-badge-on  { background-color: #1F8A5C; color: #fff; }
.jpcc-pay-badge-off { background-color: #B5253A; color: #fff; }
/* ネイビー背景で視認できる淡いアウトラインボタン */
.jpcc-menu-hub-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  padding: .4rem .85rem;
  border-radius: .3125rem;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  background-color: rgba(255, 255, 255, .07);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background-color .15s ease, border-color .15s ease;
}
.jpcc-menu-hub-btn:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .6);
}
/* 有効化(緑) / 停止(赤) の明示アクション */
.jpcc-menu-hub-btn-enable {
  background-color: #1F8A5C;
  border-color: #1F8A5C;
}
.jpcc-menu-hub-btn-enable:hover {
  background-color: #1A744E;
  border-color: #1A744E;
}
.jpcc-menu-hub-btn-disable {
  background-color: rgba(181, 37, 58, .18);
  border-color: rgba(255, 255, 255, .35);
}
.jpcc-menu-hub-btn-disable:hover {
  background-color: rgba(181, 37, 58, .4);
  border-color: rgba(255, 255, 255, .55);
}

/* ゴールドのアクセントバー(下端) */
.jpcc-menu-hub-accent-bar {
  height: 3px;
  background-color: var(--jpcc-gold);
  margin: 0 -1.5rem;
  border-radius: 0;
  opacity: .85;
}

/* --- 整合チェックエラー(決済可能化ゲート) --- */
.jpcc-gate-errors {
  border: 1.2px solid rgba(181, 37, 58, .28);
  border-left: 4px solid #B5253A;
  border-radius: .375rem;
  background-color: #FDF4F5;
  overflow: hidden;
}
.jpcc-gate-errors-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1rem;
  background-color: rgba(181, 37, 58, .07);
  border-bottom: 1px solid rgba(181, 37, 58, .16);
  color: #8E1C2E;
  font-weight: 700;
  font-size: .9rem;
}
.jpcc-gate-errors-header-icon { color: #B5253A; }
.jpcc-gate-errors-note {
  padding: .5rem 1rem;
  font-size: .8rem;
  color: #8E1C2E;
  background-color: rgba(181, 37, 58, .04);
  border-bottom: 1px solid rgba(181, 37, 58, .12);
}
.jpcc-gate-errors-count {
  margin-left: auto;
  min-width: 1.4rem;
  text-align: center;
  background-color: #B5253A;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .1rem .45rem;
  border-radius: 50rem;
}
.jpcc-gate-errors-list {
  list-style: none;
  margin: 0;
  padding: .35rem .5rem;
}
.jpcc-gate-errors-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .55rem;
  border-radius: .25rem;
}
.jpcc-gate-errors-item + .jpcc-gate-errors-item {
  border-top: 1px solid rgba(181, 37, 58, .1);
}
.jpcc-gate-errors-item:hover { background-color: rgba(181, 37, 58, .05); }
.jpcc-gate-errors-tag {
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #8E1C2E;
  background-color: rgba(181, 37, 58, .1);
  border: 1px solid rgba(181, 37, 58, .22);
  padding: .12rem .5rem;
  border-radius: .25rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.jpcc-gate-errors-msg {
  color: #2C2C2A;
  font-size: .875rem;
  line-height: 1.4;
}
.jpcc-gate-errors-fix {
  margin-left: auto;
  flex-shrink: 0;
  font-size: .8rem;
  font-weight: 600;
  color: #B5253A;
  text-decoration: none;
  white-space: nowrap;
}
.jpcc-gate-errors-fix:hover { color: #8E1C2E; text-decoration: underline; }

/* --- セクションカード --- */
.jpcc-menu-card {
  background-color: #FFFFFF;
  border: 1.2px solid var(--bs-border-color);
  border-radius: .375rem;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* カードヘッダー: 薄い navy 背景 + ゴールド縦バー */
.jpcc-menu-card-header {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .75rem 1rem;
  background-color: #F0F3F8;
  border-bottom: 1.2px solid var(--bs-border-color);
  position: relative;
}
.jpcc-menu-card-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: .5rem;
  bottom: .5rem;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background-color: var(--jpcc-gold);
}
.jpcc-menu-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: .3125rem;
  background-color: var(--bs-primary);
  color: #FFFFFF;
  font-size: .75rem;
  flex-shrink: 0;
}
.jpcc-menu-card-title {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--bs-primary);
  letter-spacing: -.01em;
  line-height: 1.3;
}

/* カードリスト */
.jpcc-menu-card-list {
  list-style: none;
  margin: 0;
  padding: .375rem 0;
  flex: 1 1 auto;
}
.jpcc-menu-card-item {
  border-bottom: 1px solid #F0F1F3;
}
.jpcc-menu-card-item:last-child {
  border-bottom: none;
}

/* リンク行 */
.jpcc-menu-card-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  font-size: .8125rem;
  font-weight: 400;
  color: #2C2C2A;
  text-decoration: none;
  transition: background-color .1s ease, color .1s ease, border-left-color .1s ease;
  border-left: 3px solid transparent;
}
.jpcc-menu-card-link:hover {
  background-color: #F4F6FA;
  color: var(--bs-primary);
  border-left-color: var(--jpcc-gold);
  text-decoration: none;
}
.jpcc-menu-card-link:focus-visible {
  outline: 2px solid var(--jpcc-gold);
  outline-offset: -2px;
  border-radius: 0;
}
.jpcc-menu-card-link-arrow {
  font-size: .625rem;
  color: #B7BDC7;
  flex-shrink: 0;
  transition: color .1s ease;
}
.jpcc-menu-card-link:hover .jpcc-menu-card-link-arrow {
  color: var(--jpcc-gold);
}
/* リンクテキスト: flex-grow で残幅を埋める */
.jpcc-menu-card-link > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 外部リンクアイコン(target=_blank) */
.jpcc-menu-card-ext {
  font-size: .6rem;
  color: #B7BDC7;
  flex-shrink: 0;
}

/* ---- テーブル(JPCC / コンパクト・Figma ヘッダー準拠) ---- */
.table {
  --bs-table-border-color: #EEF1F5;
  --bs-table-hover-bg:     #F7F9FC;
  font-size: .75rem;            /* 12px(本文より小さく) */
  color: var(--bs-body-color);
  vertical-align: middle;
}
/* セルのパディングをコンパクトに */
.table > :not(caption) > * > * {
  padding: .55rem .75rem;
}
/* ヘッダー: 薄グレー背景・小さめグレーのラベル(Figma) */
.table > thead > tr > th {
  background-color: #F4F6FA;
  color: #6F7785;
  font-weight: 600;
  font-size: .6875rem;         /* 11px */
  letter-spacing: .02em;
  white-space: nowrap;
  vertical-align: middle;
  border-bottom: 1px solid var(--bs-border-color);
}

/* ---- 銀行検索モーダル (bankModal in app-common.js)
 * BS5 layout は app.css を読まないため、必要な CSS をここに集約する。 */
#bank-search-modal-bg {
  position: fixed;
  z-index: 999999;
  width: 100%;
  height: 100%;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0,0,0,0.4);
  color: #fff;
  text-align: center;
}
#bank-search-modal-wrap {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
#bank-search-modal {
  width: 80%;
  max-width: 620px;
  display: inline-block;
  height: 420px;
  border-radius: 4px;
  background-color: #fff;
  position: relative;
}
#bank-search-modal-footer {
  position: absolute;
  border-top: 1px solid #ccc;
  height: 50px;
  width: 100%;
  background-color: #efefef;
  left: 0;
  bottom: 0;
  border-radius: 0 0 4px 4px;
  text-align: right;
  padding: 10px 10px 0;
}
#bank-search-modal-main {
  width: 100%;
  height: 100%;
  padding-bottom: 50px;
  color: #333;
}
.bank-search-modal-main-left {
  float: left;
  width: 420px;
  height: 100%;
  border-right: 1px solid #ccc;
}
.bank-search-modal-main-right {
  float: left;
  width: 200px;
  height: 100%;
}
.bank-search-modal-main-scroller {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.char-table {
  width: 100%;
}
.char-table ul {
  list-style: none;
  padding: 0;
  width: 9%;
  margin: 0 0 0 0.5%;
  float: left;
}
.char-table ul:first-child {
  margin: 0 0 0 2.5%;
}
.char-table ul li {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  border: 1px solid #ccc;
  margin-bottom: 3px;
  cursor: pointer;
  transition: 0.5s;
}
.char-table ul li:hover {
  background-color: var(--bs-primary, #0A254F);
  color: #fff;
}
.char-table ul li.disabled {
  background-color: #e0e0e0;
  cursor: default !important;
  color: #999;
}
#bank-search-modal h2.modal-title {
  font-size: 16px;
  font-weight: bold;
  line-height: 32px;
  color: #fff;
  background: var(--bs-primary, #0A254F);
  border-bottom: 2px solid var(--jpcc-gold, #D4AF37);
}
#bank-search-modal h4.modal-sub-title {
  font-size: 12px;
  font-weight: bold;
  line-height: 24px;
  border-bottom: 1px solid #ccc;
  text-align: left;
  padding-left: 20px;
}
#bank-search-modal-main-bank {
  list-style: none;
  padding: 0 2.5%;
}
#bank-search-modal-main-bank li {
  margin: 0;
  font-size: 12px;
  float: left;
  line-height: 24px;
  border: 1px solid #ccc;
  margin-bottom: 3px;
  margin-left: 3px;
  padding: 0px 5px;
  cursor: pointer;
  transition: 0.5s;
}
#bank-search-modal-main-bank li:hover {
  background-color: var(--bs-primary, #0A254F);
  color: #fff;
}
#bank-result {
  padding: 0;
  list-style: none;
}
/* ===== Breadcrumb (JPCC: navy リンク + 控えめ) ===== */
.jpcc-breadcrumb-nav { margin-bottom: .75rem; }
.jpcc-breadcrumb-nav .breadcrumb { margin-bottom: 0; font-size: .8125rem; }
.jpcc-breadcrumb-nav .breadcrumb-item a {
  color: var(--bs-primary);
  text-decoration: none;
}
.jpcc-breadcrumb-nav .breadcrumb-item a:hover {
  color: var(--bs-secondary);
  text-decoration: underline;
}
.jpcc-breadcrumb-nav .breadcrumb-item.active { color: var(--jpcc-grey); }

/* =========================================================
 * select2 を BS5 のフォーム入力に馴染ませる(高さ・枠・フォーカス)
 * ※ select2 本体は layout_bs5 で共通読込し、.select2 を自動バインド
 * ========================================================= */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single {
  height: 31px;
  min-height: 31px;
  border: 1.2px solid var(--bs-border-color, #D8D3C8);
  border-radius: var(--bs-border-radius, .3125rem);
  display: flex;
  align-items: center;
  padding: 0 .25rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 29px;
  font-size: .8125rem;
  padding-left: .5rem;
  color: var(--bs-body-color, #2C2C2A);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--jpcc-grey, #6B7280);
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 29px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--jpcc-gold, #D4AF37);
  box-shadow: 0 0 0 .2rem rgba(212, 175, 55, .15);
}
.select2-dropdown { border-color: var(--bs-border-color, #D8D3C8); }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--bs-primary, #0A254F);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--bs-border-color, #D8D3C8);
  border-radius: .25rem;
}

/* =========================================================
 * admin tran 画面固有スタイル
 *   ・tran/index.html  (取引一覧)
 *   ・tran/detail.html (取引詳細)
 * 旧 app.css / styles.css 由来の管理画面固有クラスを
 * JPCC トークンで再定義。
 * ========================================================= */

/* ---- .tbl-detail: 詳細明細テーブル(th=ラベル列 / td=値列) ---- */
.tbl-detail {
  width: 100%;
  border-collapse: collapse;
}
.tbl-detail tr {
  border-bottom: 1px solid var(--bs-border-color, #D8D3C8);
}
.tbl-detail tr:last-child {
  border-bottom: none;
}
.tbl-detail th {
  width: 15%;
  background-color: var(--bs-light, #F4F6FA);
  color: var(--bs-primary, #0A254F);
  font-weight: 600;        /* SemiBold(Figma) */
  font-size: .75rem;       /* 12px */
  padding: .625rem .875rem;
  border-right: 1px solid var(--bs-border-color, #D8D3C8);
  border-left: 1px solid var(--bs-border-color, #D8D3C8);
  vertical-align: middle;
}
.tbl-detail th:first-child {
  border-left: none;
}
.tbl-detail td {
  width: 35%;
  padding: .625rem .875rem;
  font-size: .8125rem;
  vertical-align: middle;
  line-height: 1.6;
}

/* ---- .table-trans: 取引一覧テーブル(Figma ダッシュボード Table Row 準拠) ---- */
/* 全方位罫線(table-bordered)を廃止し、行下のみ細い区切り線 + hover の軽いテーブル */
.table-trans {
  border-collapse: collapse;
}
.table-trans > thead > tr > th {
  background-color: #F4F6FA;
  color: var(--jpcc-grey, #6B7280);
  font-size: .6875rem;       /* 11px */
  font-weight: 600;
  letter-spacing: .02em;
  white-space: normal;       /* 複数行ヘッダを折り返す */
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 2px solid var(--bs-border-color, #D8D3C8);
  padding: .5rem .625rem;
}
/* 最初の th / td は左端の border を消す */
.table-trans > thead > tr > th:first-child,
.table-trans > tbody > tr > td:first-child {
  border-left: none;
}
.table-trans > thead > tr > th:last-child,
.table-trans > tbody > tr > td:last-child {
  border-right: none;
}
/* tbody: 行下のみ区切り線(左右の border なし) */
.table-trans > tbody > tr > td {
  vertical-align: top;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #EEF1F5;
  padding: .5rem .625rem;
  font-size: .75rem;
}
.table-trans > tbody > tr:last-child > td {
  border-bottom: none;
}
/* hover 行: 軽いハイライト(Figma テーブル行 hover) */
.table-trans > tbody > tr:hover > td {
  background-color: #F7F9FC;
}
/* 同じ関連No(group_code)の行をホバー時に薄黄色でハイライト(徐々にフェード) */
.table-trans > tbody > tr > td { transition: background-color .5s ease; }
.table-trans > tbody > tr.tran-row-related > td { background-color: #FEF9C3 !important; }

/* データセル内のリンク(関連No/取引No/電話/Email): リンクと分かる青・下線は hover 時のみ。
   取引一覧(.table-trans)だけでなく、admin の各一覧テーブル(.table.table-hover、
   /merchant の店舗名など)のセル内リンクも同じスタイルに統一する。
   アクション列の .btn / .dropdown-item / バッジは除外。 */
.table-trans tbody a:not(.dropdown-item),
.table.table-hover > tbody a:not(.dropdown-item):not(.btn):not(.badge) {
  color: var(--bs-info, #378ADD);
  text-decoration: none;
  font-weight: 500;
}
.table-trans tbody a:not(.dropdown-item):hover,
.table.table-hover > tbody a:not(.dropdown-item):not(.btn):not(.badge):hover {
  color: #2A6FB5;
  text-decoration: underline;
}

/* ---- .tran-col-*: 列幅ヒント ---- */
.tran-col-no     { width: 36px; font-size: .6875rem; color: var(--jpcc-grey); }
.tran-col-code   { font-size: .75rem; }
.tran-col-merchant { max-width: 160px; }
.tran-col-date   { white-space: nowrap; font-size: .75rem; }
.tran-col-method { white-space: nowrap; }
.tran-col-amount { min-width: 110px; }
.tran-col-card   { font-size: .75rem; }
.tran-col-ref    { font-size: .75rem; max-width: 160px; }
.tran-col-test   { width: 44px; }
.tran-col-dates  { white-space: nowrap; font-size: .75rem; }

/* 一覧テーブルの金額: 行内の他データ(種別/ステータス/コード等 .75rem)と完全統一。
   .table.table-trans で .table .amount-display(.9375rem) より高詳細度にして勝たせる。 */
.table.table-trans .amount-display {
  font-size: .75rem;   /* 12px: 行内の他セルと統一 */
  font-weight: 600;
}

/* 商品名: 補助情報として小さめ(色は本文と同じ) */
.tran-product-name {
  font-size: .6875rem;
}

/* ---- 種別・ステータス: 色付きテキスト(バッジではなく文字色で区別) ---- */
.tran-method {
  font-weight: 600;
  font-size: .75rem;
  line-height: 1.4;
}
.tran-status {
  font-weight: 600;
  font-size: .75rem;
  line-height: 1.4;
  margin-top: 2px;
}

/* ---- 状態列: 返金 / (将来)キャプチャ済み・Void済み 等。色付きテキスト ---- */
.tran-col-state { white-space: nowrap; font-size: .6875rem; }
.tran-state {
  font-weight: 600;
  font-size: .6875rem;
  line-height: 1.35;
}
.tran-state-refund-full { color: var(--bs-danger, #B5253A); }
.tran-state-refund-partial { color: #8C6800; }

/* ---- TEST バッジ ---- */
.tran-test-badge {
  display: inline-block;
  padding: .15rem .4rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: #4A5159;
  background-color: #E8EBF0;
  border: 1px solid #C8CDD8;
  border-radius: 3px;
  line-height: 1.4;
}

/* ---- 紛争リンク(取引一覧の専用列) ---- */
.tran-col-dispute { white-space: nowrap; }
.tran-dispute-link {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.5;
  color: #B5253A;
  text-decoration: none;
  white-space: nowrap;
}
.tran-dispute-link:hover {
  color: #8C1C2C;
  text-decoration: underline;
}

/* ---- 機能メニューの三角 after を非表示(ケバブアイコンと二重にならないよう) ---- */
.dropdown-toggle-no-caret::after {
  display: none !important;
}

/* ---- .dummy-checkbox: テスト/リト/除外 列の✔表示 ---- */
.dummy-checkbox {
  border: 2px solid var(--bs-border-color, #D8D3C8);
  height: 18px;
  width: 18px;
  border-radius: 4px;
  display: inline-block;
  text-align: center;
  position: relative;
}
.dummy-checkbox.checked {
  border-color: var(--bs-primary, #0A254F);
}
.dummy-checkbox.checked::after {
  content: '✔';
  position: absolute;
  color: var(--bs-primary, #0A254F);
  left: 2px;
  line-height: 14px;
  font-size: 12px;
  top: 1px;
}

/* ---- .data-list-action: 操作列の幅 ---- */
.data-list-action {
  width: 70px;
  text-align: center;
}

/* ---- .switch-radio-wrap: jQuery validate のエラー差し込み先 ---- */
.switch-radio-wrap .checkbox-inline:first-child {
  padding-left: 0;
}
/* エラーラベルを wrap 内に収める */
.switch-radio-wrap .error {
  display: block;
  color: var(--bs-danger, #B5253A);
  font-size: .75rem;
  margin-top: .25rem;
}

/* ---- 検索フォーム開閉クラス ---- */
/* .search-form-extendable: form ラッパー(スタイル上は何もしない、JS 参照用) */
/* .search-body-extendable: card-body 相当(panel-body のエイリアス) */
.search-body-extendable {
  padding: 1.25rem;
}
/* .extendable-form: tran/index.html のフィルタ追加 UI 刷新(2026-06)により
 * 旧「詳細検索トグル」は撤去済み。この定義は他画面が同クラスを使う場合の
 * 保険として残す(無害)。 */
.extendable-form {
  display: block;
}

/* ---- 検索フォーム: グループ見出し・区切り・card-header アイコン ---- */
/* card-header のアイコンバッジ: 小さいネイビー背景の正方形アイコン(一覧/詳細 共通) */
.tran-search-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: .25rem;
  background-image: var(--jpcc-navy-grad);
  color: var(--jpcc-gold);
  font-size: .6875rem;
  flex-shrink: 0;
}

/* tran 一覧/詳細の card-header 見出し: コンパクト・スマートに(既定 ~17px → 13px) */
.card-header .tran-card-title {
  font-size: .8125rem;     /* 13px */
  font-weight: 600;
  letter-spacing: 0;
}

/* グループ小見出し(期間・コード / 加盟店・店舗 / カード情報 etc.) */
.tran-search-group-label {
  font-size: .6875rem;        /* 11px */
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--jpcc-grey);
  text-transform: uppercase;
  margin: 0 0 .625rem;
  display: flex;
  align-items: center;
  gap: .25rem;
}
.tran-search-group-label > i {
  color: var(--bs-primary);
  font-size: .75rem;
}

/* グループ間の区切り線 */
.tran-search-divider {
  border: 0;
  border-top: 1px solid var(--bs-border-color, #D8D3C8);
  margin: 1rem 0 1rem;
  opacity: 1;
}

/* ---- テーブル内 .amount-display: 行セル内では小さめに ---- */
/* .amount-display の基底は 1.75rem だが、一覧テーブルのセル内では
 * 行の高さが崩れるため 0.9375rem(15px 相当)に抑える */
.table .amount-display {
  font-size: .9375rem;
}
/* .tbl-detail(詳細明細)内でも同様にサイズを抑える(取引概要の金額行) */
.tbl-detail .amount-display {
  font-size: 1.125rem;  /* 18px: 基底より小さいが視認性を確保 */
}

/* ---- modal-header にネイビーグラデを使う場合の border-radius 継承 ---- */
/* BS5 の .modal-header は border-radius なし。上辺の角丸を modal-content から継承させる */
.modal-header[style*="background-image"] {
  border-top-left-radius:  calc(var(--bs-modal-inner-border-radius, .3rem) - 1px);
  border-top-right-radius: calc(var(--bs-modal-inner-border-radius, .3rem) - 1px);
}

/* ---- フィルタ追加 UI (.filter-field / ＋ドロップダウン) ---- */

/* オプション項目ラッパー: 共有 #filter-fields-row(.row) の col-* として機能する。
 * 装飾(金バー・特別背景・余分な padding/margin)はなし。デフォルト col と同じ見た目。
 * 表示/非表示は .active クラスのみで制御し、JS では inline display を当てない。 */
.filter-field {
  display: none;          /* JS が .active を付与するまで隠す */
}
.filter-field.active {
  display: block;         /* col-* として flex アイテムに正しく参加する */
}

/* ✕(削除)ボタン: 小さく、目立ちすぎない */
.filter-remove-btn {
  --bs-btn-color:              var(--jpcc-grey, #6B7280);
  --bs-btn-border-color:       var(--bs-border-color, #D8D3C8);
  --bs-btn-hover-color:        var(--bs-danger, #B5253A);
  --bs-btn-hover-border-color: var(--bs-danger, #B5253A);
  --bs-btn-hover-bg:           #FFF5F6;
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  flex-shrink: 0;
}

/* =========================================================
 * 検索フォーム: コンパクトモード
 * .search-body-extendable 配下に限定。他画面に波及させない。
 * ========================================================= */

/* ラベル: 小さく・グレー・細め */
.search-body-extendable .form-group label,
.search-body-extendable .form-group .form-label,
.search-body-extendable .filter-field > label {
  font-size: .7rem;
  font-weight: 500;
  color: var(--jpcc-grey, #6B7280);
  letter-spacing: .03em;
  margin-bottom: 2px;
}

/* 入力・セレクト: sm 相当に縮小 */
.search-body-extendable .form-control,
.search-body-extendable .form-select {
  padding: .25rem .5rem;
  font-size: .8125rem;
  min-height: 31px;
  height: 31px;
}

/* textarea は高さ固定しない(rows="3" に委ねる) */
.search-body-extendable textarea.form-control {
  height: auto;
  min-height: unset;
}

/* input-group-text も揃える */
.search-body-extendable .input-group-text {
  padding: .25rem .5rem;
  font-size: .8125rem;
}

/* select2 single: 高さを ~31px に揃える */
.search-body-extendable .select2-container--default .select2-selection--single {
  height: 31px;
  min-height: 31px;
}
.search-body-extendable .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 29px;
  font-size: .8125rem;
}
.search-body-extendable .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 29px;
}

/* form-group 下マージンを詰める */
.search-body-extendable .form-group {
  margin-bottom: .5rem;
}


/* ＋条件を追加 ボタン: ネイビー控えめ */
#btn-add-filter {
  font-size: .8125rem;
  color: var(--bs-primary, #0A254F);
  border-color: var(--bs-border-color, #D8D3C8);
}
#btn-add-filter:hover:not(.disabled) {
  background-color: #F0F3F8;
  color: var(--bs-primary, #0A254F);
  border-color: var(--bs-primary, #0A254F);
}
#btn-add-filter.disabled {
  opacity: .45;
  pointer-events: none;
}

/* ドロップダウンメニュー: ヘッダーを上品に */
.dropdown-menu .dropdown-header {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--jpcc-grey, #6B7280);
  text-transform: uppercase;
  padding-top: .5rem;
}
.dropdown-menu .dropdown-item {
  font-size: .8125rem;
  padding: .35rem 1rem;
}
.dropdown-menu .dropdown-item:hover {
  background-color: #F0F3F8;
  color: var(--bs-primary, #0A254F);
}

/* =========================================================
 * 集計パネル (.summary-*)
 * 構成: KPI 常時表示(上) + 詳細内訳 折りたたみ(下)
 * ========================================================= */

/* ── 通貨カード全体 ── */
.summary-currency-card {
  overflow: hidden;
}

/* ── カードヘッダー ── */
.summary-card-header {
  background-color: var(--bs-primary, #0A254F);
  color: #fff;
  border-bottom: none;
}
.summary-card-header .text-secondary {
  color: rgba(255,255,255,.6) !important;
}

/* 通貨バッジ: ゴールド小文字ラベル */
.summary-currency-badge {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: .15rem .55rem;
  border-radius: 50rem;
  background-color: var(--jpcc-gold, #D4AF37);
  color: #4A1B0C;
  line-height: 1.4;
}

/* ── KPI エリア ── */
.summary-kpi-body {
  background-color: #fff;
  border-bottom: 1px solid var(--bs-border-color, #D8D3C8);
}

/* KPI セル: 各指標ブロック */
.summary-kpi-cell {
  padding: .4rem .6rem;
  border: 1px solid var(--bs-border-color, #D8D3C8);
  border-radius: var(--bs-border-radius, .3125rem);
  background-color: var(--bs-light, #F4F6FA);
  height: 100%;
}

/* 差引(net_sales)セル: ゴールド左線でハイライト */
.summary-kpi-cell--net {
  border-left: 3px solid var(--jpcc-gold, #D4AF37);
  background-color: #FFFDF8;
}

/* KPI ラベル行 */
.summary-kpi-label {
  font-size: .625rem;
  font-weight: 600;
  color: var(--jpcc-grey, #6B7280);
  letter-spacing: .03em;
  margin-bottom: .1rem;
  white-space: nowrap;
}

/* 金額エリア(通常 KPI) */
.summary-kpi-amount {
  display: flex;
  align-items: baseline;
  gap: .2rem;
  flex-wrap: wrap;
}

/* 差引 金額エリア */
.summary-kpi-net-amount {
  display: flex;
  align-items: baseline;
  gap: .25rem;
  flex-wrap: wrap;
  margin-top: .125rem;
}

/* amount-display サイズ変形クラス */
/* KPI 内(コンパクト) */
.summary-amount-sm {
  font-size: 1rem !important;  /* 16px: 基底(1.75rem)より小さく、存在感は保つ */
}
/* 差引(net_sales): 最も大きく */
.summary-amount-net {
  font-size: 1.25rem !important;   /* 20px */
  font-weight: 600 !important;
}

/* 通貨単位テキスト */
.summary-currency-unit {
  font-size: .6875rem;
  color: var(--jpcc-grey, #6B7280);
  flex-shrink: 0;
}
.summary-currency-unit--net {
  font-size: .8125rem;
  color: var(--jpcc-grey, #6B7280);
}

/* 補足ヒント(括弧内の小さい説明) */
.summary-kpi-hint {
  font-size: .5625rem;
  font-weight: 400;
  color: var(--jpcc-grey, #6B7280);
  letter-spacing: 0;
}

/* =========================================================
 * tran/detail.html — サマリーヘッダー + タブレイアウト
 * ========================================================= */

/* ---- サマリーヘッダーカード ---- */
.tran-summary-header {
  /* card-jpcc との合成: 上辺ゴールドアクセントライン */
  border-top: 3px solid var(--jpcc-gold);
}

/* 金額ラベル(小さいグレーラベル) */
.tran-summary-amount-label {
  font-size: .6875rem;
  font-weight: 600;
  color: var(--jpcc-grey, #6B7280);
  letter-spacing: .03em;
  margin-bottom: .1rem;
}

/* サマリー金額: .amount-display より一回り大きく */
.tran-summary-amount-value {
  font-size: 2rem !important;
  font-weight: 600 !important;
}

/* 通貨単位 */
.tran-summary-currency {
  font-size: .875rem;
  color: var(--jpcc-grey, #6B7280);
  font-weight: 500;
}

/* ステータス文字 */
.tran-summary-status {
  font-size: .8125rem;
  font-weight: 700;
}

/* 取引種別文字 */
.tran-summary-method {
  font-size: .8125rem;
  font-weight: 600;
}

/* セパレーター */
.tran-summary-sep {
  color: var(--bs-border-color, #D8D3C8);
  font-size: .75rem;
}

/* 下段メタ情報: ラベル + 値のペア */
.tran-summary-meta-label {
  font-size: .6875rem;
  font-weight: 600;
  color: var(--jpcc-grey, #6B7280);
  letter-spacing: .03em;
  margin-right: .25rem;
}
.tran-summary-meta-value {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--bs-body-color, #2C2C2A);
  margin-right: 1rem;
}

/* ---- タブ本体 ---- */
.tran-detail-tabs {
  border-bottom: none; /* カード上辺と接続するため BS5 既定の下辺を非表示 */
}
.tran-detail-tabs .nav-link {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--jpcc-grey, #6B7280);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: .375rem .375rem 0 0;
  padding: .5rem 1rem;
}
.tran-detail-tabs .nav-link:hover {
  color: var(--bs-primary, #0A254F);
  background-color: #F4F6FA;
  border-color: var(--bs-border-color, #D8D3C8) var(--bs-border-color, #D8D3C8) transparent;
}
.tran-detail-tabs .nav-link.active {
  color: var(--bs-primary, #0A254F);
  font-weight: 700;
  background-color: #FFFFFF;
  border-color: var(--bs-border-color, #D8D3C8) var(--bs-border-color, #D8D3C8) #FFFFFF;
}

/* タブコンテンツ外枠 */
.tran-detail-tab-content {
  border: 1px solid var(--bs-border-color, #D8D3C8);
  border-radius: 0 .375rem .375rem .375rem;
  background-color: var(--jpcc-app-bg, #F4F6FA);
}

/* タブペイン内のカード: タブ枠と境界を重ねないよう border-top を落とす */
.tran-detail-tab-content .card-jpcc {
  border-radius: 0;
  border-left: none;
  border-right: none;
}
/* 最初のカード: 上辺も落とす */
.tran-detail-tab-content .tab-pane > .card-jpcc:first-child {
  border-top: none;
}
/* 最後のカード: border-bottom を復活させ、タブ外枠の内側に収める */
.tran-detail-tab-content .tab-pane > .card-jpcc:last-child {
  border-bottom: 1px solid var(--bs-border-color, #D8D3C8);
  border-radius: 0 0 .375rem .375rem;
}

/* タブ内で border-bottom-0 を明示したカードのフォールバック */
.tran-detail-tab-content .card.border-bottom-0 {
  border-bottom: none !important;
}

/* セクション見出しの上に区切り線(視認性向上)。各タブ先頭カードは除外 */
.tran-detail-tab-content .card-jpcc > .card-header {
  border-top: 1px solid var(--bs-border-color, #D8D3C8);
}
.tran-detail-tab-content .tab-pane > .card-jpcc:first-child > .card-header {
  border-top: none;
}

/* タブ内 .tbl-detail はパディングを詰めてコンパクトに */
.tran-detail-tab-content .tbl-detail th,
.tran-detail-tab-content .tbl-detail td {
  padding: .375rem .75rem;
  line-height: 1.45;
}

/* ---- 3DS エントリ間の区切り ---- */
.tran-3ds-entry + .tran-3ds-entry {
  border-top: 2px dashed var(--bs-border-color, #D8D3C8);
}

/* ---- 3DS 生レスポンスのフラット展開テーブル ---- */
/* キー列を広めに取り、長いキー/値(acs_url等)を確実に折り返す */
/* 上のメタ表(認証コード/登録日時)との境界線 */
.tran-3ds-flat {
  border-top: 1px solid var(--bs-border-color, #D8D3C8);
}
.tran-3ds-flat th {
  width: 30%;
  white-space: normal;
  word-break: break-all;
  font-family: 'Menlo', 'Consolas', 'Monaco', monospace;
  font-weight: 500;
}
.tran-3ds-flat td {
  width: 70%;
  white-space: normal;
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* ---- Webhook URL 折り返し ---- */
.tran-webhook-url {
  max-width: 280px;
  word-break: break-all;
}

/* ---- インライン code (token / URL / コードなど) ---- */
.tran-code-inline {
  font-family: 'Menlo', 'Consolas', 'Monaco', monospace;
  font-size: .75rem;
  color: var(--bs-primary, #0A254F);
  background-color: #F0F3F8;
  border: 1px solid var(--bs-border-color, #D8D3C8);
  border-radius: .25rem;
  padding: .1em .35em;
  word-break: break-all;
}

/* ---- 生レスポンス pre ---- */
.tran-raw-pre {
  max-height: 200px;
  overflow: auto;
  font-size: .6875rem;
  background: var(--bs-light, #F4F6FA);
  border: 1px solid var(--bs-border-color, #D8D3C8);
  padding: .5rem .625rem;
  border-radius: .25rem;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ---- NO DATA / 情報なしメッセージ ---- */
.tran-nodata-msg {
  padding: 1.25rem 1.5rem;
  font-size: .8125rem;
  color: var(--jpcc-grey, #6B7280);
}

/* ---- カードブロック登録フォームエリア: 淡い危険色背景 ---- */
/* detail.html の "未ブロック" 時にフォームを目立たせる。
 * 派手にならないよう赤みを最小限に抑えた薄クリーム赤。 */
.block-form-area {
  background-color: #FFF8F8;
  border-bottom: 1px solid var(--bs-border-color, #D8D3C8);
}

/* =========================================================
 * ▲ admin tran 画面固有スタイル ここまで
 * ========================================================= */

/* ===== フラッシュメッセージ(保存しました等)を右上トースト化 ===== */
.flash-toast-area {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1090;
  width: auto;
  max-width: 420px;
  padding: 0;
  pointer-events: none;
}
.flash-toast-area .alert {
  pointer-events: auto;
  min-width: 260px;
  margin-bottom: .5rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 15, 41, .18);
}

/* =========================================================
 * ローディングモーダル(loaderModal / app-common.js)
 * BS5 レイアウトは旧 app.css / styles.css を読み込まないため、
 * 進捗オーバーレイとスピナーがここに無いと「進捗が見えない」状態になる。
 * 例: /system/bank の金融機関取得の進捗表示。
 * ========================================================= */
#model-loader {
  position: fixed;
  z-index: 100000;     /* BS5 modal(1055)より上 */
  inset: 0;
  background-color: rgba(7, 26, 55, .55);   /* JPCC ネイビーの半透明 */
  color: #fff;
  text-align: center;
}
#model-loader .innner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#model-loader .ml-content {
  background: var(--jpcc-navy-grad, #071A37);
  border: 1px solid rgba(212, 175, 55, .35);   /* ゴールド細枠 */
  border-radius: .5rem;
  padding: 1.5rem 2rem;
  min-width: 260px;
  box-shadow: 0 1rem 2.5rem rgba(0, 15, 41, .45);
}
#model-loader .msg-area {
  margin-top: .75rem;
  font-weight: 600;
  font-size: .95rem;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
 * dispute/detail.html — チャットバブルUI
 *   #section-messages-public : やり取り(左右バブル)
 *   #section-messages-memo   : 社内メモ(単一カラム・warning系)
 * ========================================================= */

/* ---- やり取りスクロール領域 ---- */
.dispute-chat {
  max-height: 420px;
  overflow-y: auto;
  padding: .75rem .875rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  background-color: #F8F9FB;
}

/* ---- チャット行(1メッセージ分のコンテナ) ---- */
.chat-row {
  display: flex;
}
.chat-row-self  { justify-content: flex-end; }
.chat-row-other { justify-content: flex-start; }

/* バブルと meta をまとめる縦積みコンテナ */
.chat-row-inner {
  display: flex;
  flex-direction: column;
  max-width: 80%;
  gap: .2rem;
}

/* ---- メタ情報(発信者ラベル + 日時) ---- */
.chat-meta {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .6875rem;
  color: var(--jpcc-grey, #6B7280);
}
.chat-meta-self {
  justify-content: flex-end;
}
.chat-sender-label {
  font-weight: 600;
  font-size: .6875rem;
  color: var(--bs-primary, #0A254F);
}
.chat-row-self .chat-sender-label {
  color: var(--jpcc-navy-700, #0C2C5C);
}
.chat-time {
  font-size: .6rem;
  color: var(--jpcc-grey, #6B7280);
}

/* ---- バブル本体 ---- */
.chat-bubble {
  padding: .5rem .75rem;
  border-radius: .375rem;
  font-size: .8125rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
/* 自社(admin) — ネイビー系 */
.chat-bubble-self {
  background-color: var(--bs-primary, #0A254F);
  color: #FFFFFF;
  border-bottom-right-radius: .125rem;
}
/* 加盟店/店舗 — グレー系 */
.chat-bubble-other {
  background-color: #FFFFFF;
  color: var(--bs-body-color, #2C2C2A);
  border: 1px solid var(--bs-border-color, #D8D3C8);
  border-bottom-left-radius: .125rem;
}

/* ---- 投稿フォームエリア(共通) ---- */
.chat-compose-area {
  padding: .625rem .875rem;
  background-color: #FFFFFF;
}
.chat-template-row {
  margin-bottom: .5rem;
}
.chat-input-row {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
}
.chat-textarea {
  flex: 1 1 auto;
  resize: none;
}
.chat-send-btn {
  flex-shrink: 0;
  align-self: flex-end;
  min-width: 2.25rem;
}

/* ---- 社内メモスクロール領域 ---- */
.dispute-memo {
  max-height: 320px;
  overflow-y: auto;
  padding: .75rem .875rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background-color: #FFFEF5;
}

/* ---- メモ行 ---- */
.memo-row {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.memo-meta {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .6875rem;
}
.memo-user {
  font-weight: 600;
  color: var(--bs-primary, #0A254F);
  font-size: .6875rem;
}
.memo-time {
  font-size: .6rem;
  color: var(--jpcc-grey, #6B7280);
}
.memo-bubble {
  padding: .45rem .75rem;
  border-radius: .3125rem;
  background-color: #FFF8D6;
  border: 1px solid #E8D87A;
  color: var(--bs-body-color, #2C2C2A);
  font-size: .8125rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- 社内メモ非表示通知バー ---- */
.chat-memo-notice {
  padding: .35rem .875rem;
  font-size: .75rem;
  color: #7A5F00;
  background-color: #FFFBEB;
  border-bottom: 1px solid #E8D87A;
}

/* スピナー(SpinKit stretchdelay) */
.spinner {
  margin: 0 auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}
.spinner > div {
  background-color: var(--jpcc-gold, #D4AF37);
  height: 100%;
  width: 6px;
  display: inline-block;
  margin-left: 1.5px;
  animation: jpcc-sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 { animation-delay: -1.1s; }
.spinner .rect3 { animation-delay: -1.0s; }
.spinner .rect4 { animation-delay: -0.9s; }
.spinner .rect5 { animation-delay: -0.8s; }
@keyframes jpcc-sk-stretchdelay {
  0%, 40%, 100% { transform: scaleY(0.4); }
  20%           { transform: scaleY(1.0); }
}

/* =========================================================
 * dispute/detail.html — タグチップUI (BPM仕様)
 *   付与済みタグを「#名前 ×」の小さなチップで表示。
 *   入力フォームはインライン。候補ドロップダウンは
 *   #dispute-tag-suggest(絶対配置)。
 * ========================================================= */

/* ---- タグチップ本体 ---- */
.dispute-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  border-radius: 50rem;
  background-color: #E8EDF5;          /* デフォルト: 薄ネイビー */
  color: var(--bs-primary, #0A254F);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid rgba(10, 37, 79, .15);
  cursor: default;
  transition: box-shadow .1s ease;
}
.dispute-tag-chip:hover {
  box-shadow: 0 0 0 .15rem rgba(10, 37, 79, .12);
}

/* ---- × (削除)アイコン ---- */
.tag-chip-rm {
  font-size: .6rem;
  color: inherit;
  opacity: .6;
  cursor: pointer;
  padding: .1rem;
  border-radius: 50%;
  transition: opacity .1s ease, background-color .1s ease;
  flex-shrink: 0;
}
.tag-chip-rm:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, .12);
}

/* ---- タグ入力フィールド ---- */
#dispute-tag-input {
  max-width: 260px;
  font-size: .8125rem;
}

/* ---- 候補ドロップダウン ---- */
#dispute-tag-suggest {
  box-shadow: 0 .25rem .75rem rgba(0, 15, 41, .12);
  border-color: var(--bs-border-color, #D8D3C8);
  border-radius: var(--bs-border-radius, .3125rem);
  max-height: 200px;
  overflow-y: auto;
}
#dispute-tag-suggest .list-group-item {
  font-size: .8125rem;
  color: var(--bs-body-color, #2C2C2A);
  border-left: none;
  border-right: none;
}
#dispute-tag-suggest .list-group-item:first-child {
  border-top: none;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
#dispute-tag-suggest .list-group-item:last-child {
  border-bottom: none;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
#dispute-tag-suggest .list-group-item:hover,
#dispute-tag-suggest .list-group-item:focus {
  background-color: #F0F3F8;
  color: var(--bs-primary, #0A254F);
}


/* text-bg-info は既定でコントラスト文字(黒)になり読みづらいため、全画面で白文字に統一 */
.text-bg-info { color: #fff !important; }