/* basis-fx tools — 複利計算シミュレーター固有のスタイル
 * build ct-20260804
 * 共通部分は bfx-base.css。ここにはこのツールにしか出てこないものだけを置く。
 */

/* ---- ダイナミックレバレッジの段設定 ---- */
.bfx-tool .bfx-tiergroup { grid-column: 1 / -1; gap: .55rem; }
/* オフのときは操作できないことを見た目でも示す */
.bfx-tool .bfx-tiergroup.bfx-off .bfx-tiers,
.bfx-tool .bfx-tiergroup.bfx-off .bfx-tieradd { opacity: .4; pointer-events: none; }

.bfx-tool .bfx-switch {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--bfx-jp); font-size: .85rem; letter-spacing: normal;
  color: var(--bfx-ink-soft); cursor: pointer; text-transform: none;
}
.bfx-tool .bfx-switch input { width: auto; cursor: pointer; }

.bfx-tool .bfx-tiers { display: flex; flex-direction: column; gap: .4rem; }
.bfx-tool .bfx-tier {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem;
  font-family: var(--bfx-mono); font-variant-numeric: tabular-nums; font-size: .82rem;
  color: var(--bfx-ink-soft);
}
/* 下限は表示専用。右揃えにして、上の段の上限と桁を揃える。
   ここは「どの残高帯の設定か」を示す唯一の手がかりなので、薄くしない。
   ink-faint は短いラベル専用の色だが、この行では本文と同じ重みで読ませたい。 */
.bfx-tool .bfx-tier-lo {
  min-width: 7.5rem; text-align: right;
  color: var(--bfx-ink); font-size: .88rem; font-weight: 600;
}
.bfx-tool .bfx-tier-inf { width: 8rem; text-align: center; color: var(--bfx-ink); font-size: .88rem; font-weight: 600; }
.bfx-tool .bfx-tier-u { color: var(--bfx-ink-soft); }
.bfx-tool .bfx-tier-arrow { color: var(--bfx-accent); padding: 0 .2rem; }

/* 入力欄は .bfx-field 配下ではないので、見た目を個別に揃える。
   テーマは input に width:100% を当てており、詳細度もテーマ側が上になりやすい
   （SWELLで実際に負け、段の入力欄が縦積みになった）。
   型セレクタを足して詳細度を上げる。ここは !important を使わずに勝てる。 */
.bfx-tool .bfx-tiers input.bfx-tier-cap,
.bfx-tool .bfx-tiers input.bfx-tier-lev {
  font-family: var(--bfx-mono); font-variant-numeric: tabular-nums; font-size: .82rem;
  color: var(--bfx-ink); background: var(--bfx-ground);
  border: 1px solid var(--bfx-line); border-radius: 3px;
  padding: .3rem .45rem; height: auto; margin: 0; box-shadow: none;
  flex: none; display: inline-block; vertical-align: middle;
}
.bfx-tool .bfx-tiers input.bfx-tier-cap { width: 8rem; }
.bfx-tool .bfx-tiers input.bfx-tier-lev { width: 5.5rem; }
.bfx-tool .bfx-tiers input.bfx-tier-cap:focus-visible,
.bfx-tool .bfx-tiers input.bfx-tier-lev:focus-visible {
  outline: 2px solid var(--bfx-accent); outline-offset: 1px; border-color: var(--bfx-accent);
}

.bfx-tool .bfx-tiers button.bfx-tier-del {
  margin-left: auto; padding: .1rem .45rem; width: auto;
  font-family: var(--bfx-mono); font-size: .9rem; line-height: 1.4;
  color: var(--bfx-ink-faint); background: transparent;
  border: 1px solid var(--bfx-line); border-radius: 3px; cursor: pointer;
}
.bfx-tool .bfx-tiers button.bfx-tier-del:hover:not(:disabled) { color: var(--bfx-danger); border-color: var(--bfx-danger); filter: none; }
.bfx-tool .bfx-tiers button.bfx-tier-del:disabled { opacity: .3; cursor: default; }
.bfx-tool .bfx-btn.bfx-small { font-size: .82rem; padding: .32rem .7rem; }

/* ---- 表 ---- */
/* 発注 Lot は既定でアクセント色（.bfx-hit）。上限で頭打ちになった行だけ警告色に上書きする。
   同じセルに 2 つのクラスが付くので、後勝ちにならないよう明示的に書く。 */
.bfx-tool .bfx-scroller td.bfx-hit.bfx-over {
  color: var(--bfx-warn); background: var(--bfx-warn-soft);
}
/* ダイナミックレバレッジで倍率が下がった行の「適用レバ」 */
.bfx-tool .bfx-scroller td.bfx-drop {
  color: var(--bfx-danger); background: var(--bfx-danger-soft); font-weight: 600;
}

/* スマホ専用の2行目。
   スマホでは列を落とさないと横スクロールになるが、落とすと情報が消える。
   そこで「落とす列の値を、隣の列のセル内に2行目として入れる」形にした。
   PC では対応する独立した列があるので表示しない（重複させない）。

     利益      の2行目 … 実際の利率
     証拠金維持率 の2行目 … ロスカットまで pips
     終了残高    の2行目 … もう一方の通貨

   見出し（th）にも同じ仕組みで2行目が入る。 */
.bfx-tool .bfx-scroller .bfx-sp-sub { display: none; }
.bfx-tool .bfx-scroller thead th .bfx-sp-sub {
  color: var(--bfx-ink-faint); font-weight: 400; font-size: .92em;
}
/* 2行目に付く警告色。span.bfx-sub の色指定より詳細度を上げる必要がある。
   列ごと消えると警告も消えてしまうため、2行目側にも同じ色を持たせる。 */
.bfx-tool .bfx-scroller tbody td span.bfx-sp-sub.bfx-over { color: var(--bfx-warn); }
.bfx-tool .bfx-scroller tbody td span.bfx-sp-sub.bfx-tight { color: var(--bfx-danger); }

@media (max-width: 640px) {
  .bfx-tool .bfx-scroller .bfx-sp-sub { display: block; }
  /* 列幅は「表全体で一番長い値」で決まる。この表は残高が 1 億まで伸びるので、
     終了残高だけで 11 桁になる。5列でも余白と文字を詰めないと 414px 端末に収まらない。
     共通CSS（bfx-base.css）より後に読み込まれるので、同じ詳細度で上書きできる。 */
  .bfx-tool .bfx-scroller table { font-size: .8rem; }
  .bfx-tool .bfx-scroller thead th { padding-left: .35rem; padding-right: .35rem; }
  .bfx-tool .bfx-scroller tbody td { padding-left: .35rem; padding-right: .35rem; }
  /* スマホは行の高さが違う（1行=2段）ので、行数固定ではなく画面基準の base 側の値でよい */
}

@media (max-width: 480px) {
  .bfx-tool .bfx-tier-lo { min-width: 4.5rem; }
  .bfx-tool .bfx-tier-inf { width: 6rem; }
  .bfx-tool .bfx-tiers input.bfx-tier-cap { width: 6.5rem; }
  .bfx-tool .bfx-tiers input.bfx-tier-lev { width: 4.5rem; }
}