/* チャート ツールチップ — dev_block_list_training_tab_chart_cyber / _ss、本番は block_list_training_tab_chart_all で使用
 * 参照先: /assets/templates/first/css/dev_chart_tooltip.css (本番: /assets/templates/first/css/chart_tooltip.css)
 * 対になるJS: /assets/chart/dev_chart_tooltip.js (本番: chart_tooltip.js)
 * 本番には dev_ を外した名前で上げる。
 * ========================================
 * 1. グループ枠内ポップアップの表示モーション (ISO26262タブのスマホ)
 * 2. 浮動ツールチップ (他タブ、ISO26262タブのPC)
 * ======================================== */


/* ========================================
   1. グループ枠内ポップアップの表示モーション
   ======================================== */

/* 表示: ふわっと浮き上がる / ボタン間の移動: フェードのみ / 非表示: すっと沈む
 * .is-swap / .is-leaving は dev_chart_tooltip.js が付与する
 * chart.css 側の transform と干渉しないよう translate プロパティで動かす */
.inner-summary-block .dg-chart-popup {
  animation: oj-popup-in 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}
.inner-summary-block .dg-chart-popup.is-swap {
  animation: oj-popup-swap 0.2s ease-out;
}
.inner-summary-block .dg-chart-popup.is-leaving {
  animation: oj-popup-out 0.14s ease-in forwards;
  pointer-events: none;
}
@keyframes oj-popup-in {
  from { opacity: 0; translate: 0 8px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes oj-popup-swap {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}
@keyframes oj-popup-out {
  from { opacity: 1; translate: 0 0; }
  to   { opacity: 0; translate: 0 4px; }
}


/* ========================================
   2. 浮動ツールチップ
   ======================================== */

/* body 直下に dev_chart_tooltip.js が生成する。
 * 位置と幅 (position / left / top / width) と --oj-tip-arrow-x (矢印の位置) は
 * JSがインラインで設定するので、ここでは見た目だけを定義する。
 * .is-below = ボタンの下に出すとき / .is-in .is-swap .is-leaving = モーション */
.oj-chart-tip {
  --oj-tip-shift: 6px; /* 出入りの方向。ボタン側から離れる向きに動く */
  padding: 18px 20px 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 16px 36px -10px rgba(15, 23, 42, 0.28);
  font-size: 14px;
  line-height: 1.75;
  color: #475569;
  text-align: left;
  pointer-events: none; /* 下にあるボタンのホバーを妨げない */
}
.oj-chart-tip.is-below {
  --oj-tip-shift: -6px;
}

/* 吹き出しの矢印 */
.oj-chart-tip::after {
  content: "";
  position: absolute;
  left: var(--oj-tip-arrow-x, 50%);
  bottom: -7px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: #fff;
  border: solid rgba(15, 23, 42, 0.08);
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}
.oj-chart-tip.is-below::after {
  top: -7px;
  bottom: auto;
  border-width: 1px 0 0 1px;
}

/* 中身 */
.oj-chart-tip-title {
  margin: 0 0 8px;
  padding-left: 10px;
  border-left: 3px solid #3f6b92;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1e293b;
}
/* ピル型ラベルがあるとき、タイトルはラベル + タイトル文字だけにする (左の線なし)
 * (.has-label と --oj-tip-label-fg は dev_chart_tooltip.js が設定する。
 *  data-tip-category を付けたチャートとISO26262タブで、コースカードのカテゴリから読み取る) */
.oj-chart-tip.has-label .oj-chart-tip-title {
  padding-left: 0;
  border-left: 0;
}
/* ピル型ラベル (研修スケジュール一覧のカテゴリ)。タイトル文字の上に1行で置く */
.oj-chart-tip-course-label {
  display: table; /* 1行を占めつつ幅は文字分 */
  margin: 0 0 6px;
  padding: 0 10px;
  border: 1px solid currentColor; /* 白地のツールチップ上でも形が見えるよう文字色で縁取り */
  border-radius: 999px;
  background: #fff;
  color: var(--oj-tip-label-fg, #1e293b);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.oj-chart-tip-summary {
  font-size: 13px;
}
.oj-chart-tip-summary > :first-child { margin-top: 0; }
.oj-chart-tip-summary > :last-child  { margin-bottom: 0; }
.oj-chart-tip-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eef2f6;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}
.oj-chart-tip-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* 「時間」と「受講料」のラベル幅をそろえる */
.oj-chart-tip-label {
  display: inline-block;
  min-width: 5em;
  text-align: center;
  padding: 1px 10px;
  border-radius: 999px;
  background: #eaf0f6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #3f6b92;
}

/* モーション (表示: ボタン側からふわっと出る / ボタン間の移動: フェードのみ / 非表示: ボタン側へ戻る) */
.oj-chart-tip.is-in {
  animation: oj-tip-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.oj-chart-tip.is-swap {
  animation: oj-tip-swap 0.18s ease-out;
}
.oj-chart-tip.is-leaving {
  animation: oj-tip-out 0.12s ease-in forwards;
}
@keyframes oj-tip-in {
  from { opacity: 0; transform: translateY(var(--oj-tip-shift)); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes oj-tip-swap {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}
@keyframes oj-tip-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(var(--oj-tip-shift)); }
}

/* ISO26262タブのグループ枠: PCはツールチップを浮かせて出すので、枠内のポップアップ用に
 * 確保していた高さ (chart_iso26262_2023_202508.css の min-height: 400px) をなくす。
 * スマホは枠内に表示するので確保したまま (境界はJSの isMobile と同じ 767px) */
@media (min-width: 768px) {
  #TrainingChart .groupblock {
    min-height: 0;
  }
}


@media (prefers-reduced-motion: reduce) {
  .inner-summary-block .dg-chart-popup,
  .inner-summary-block .dg-chart-popup.is-swap,
  .inner-summary-block .dg-chart-popup.is-leaving,
  .oj-chart-tip.is-in,
  .oj-chart-tip.is-swap,
  .oj-chart-tip.is-leaving {
    animation: none;
  }
}