/* 純資産（照会・為替の影響・残高入力） */

/* ── 純資産の残高入力：表は左に詰め、余った幅は前月比のバーが引き取る ──────────
   ここは「6行に数字を打つ」画面なので、口座名から入力欄までの距離がそのまま
   打ちやすさになる。列を均等に伸ばすと名前と入力欄が1000px以上離れていた。
   最後の列だけを `width:100%` にして余りを全部そこへ寄せ、他の列は中身のぶんへ縮める。 */
.na-bulk-table th:last-child, .na-bulk-table td:last-child { width: 100%; }
.na-bulk-table th:not(:last-child), .na-bulk-table td:not(:last-child) { white-space: nowrap; }
/* 現金の行にだけ出る「前月 −現金支出 ¥3,300」＝見込みの出どころ。口座名の右に小さく置く
   （別の列にすると、その列が現金以外の行で空になる） */
.na-bulk-hint {
  font-style: normal; font-weight: var(--fw-normal); font-size: var(--text-2xs);
  color: var(--color-text-subtle); margin-left: 8px;
}

.na-dcell { display: flex; align-items: center; gap: 12px; }
/* 数字は入力欄のすぐ隣に固定幅で置く＝行ごとに位置がずれない */
.na-dval { flex: 0 0 108px; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
/* 見出しも数字と同じ108pxの枠に載せる＝右端に飛ばすとバーの上に来て何の列か読めない */
.na-bulk-table thead th:last-child { text-align: left; }
.na-dhead { display: inline-block; width: 108px; text-align: right; }
.na-dnone { color: var(--color-border); }
/* バーは中央が0で、増えたら右・減ったら左。目盛りはその月の最大変動＝行どうしの比較 */
.na-dbar {
  position: relative; flex: 1 1 auto; min-width: 60px; height: 8px;
  border-radius: var(--radius-sm); background: var(--color-bg);
}
.na-dbar::before {
  content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px;
  width: 1px; background: var(--color-border);
}
.na-dbar i { position: absolute; top: 0; height: 8px; border-radius: var(--radius-sm); }
.na-dbar i.pos { background: #10b981; }
.na-dbar i.neg { background: #ef4444; }

/* 合計行。**この表で入れているぶんの合計**（投信は含まない）と断っておく＝
   右の相棒が出す「純資産」と桁が違うので、黙って並べると読み違える */
.na-bulk-total td {
  border-top: 2px solid var(--color-text); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums; background: var(--color-bg);
}
.na-bulk-total td:first-child { white-space: nowrap; }
.na-bulk-total em {
  display: block; font-style: normal; font-weight: var(--fw-medium);
  font-size: var(--text-2xs); color: var(--color-text-subtle);
}

/* 相棒カード：この表で入れているのは銀行とFXだけで、純資産はそこに投信を足したもの。
   説明文にしか出ていなかった「投信は自動参照」を数字にして、打っている最中に見せる。 */
.na-side {
  border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  background: var(--color-surface); padding: var(--sp-5);
}
.na-side--empty { color: var(--color-text-subtle); font-size: var(--text-sm); line-height: 1.7; }
.na-side-h {
  display: flex; align-items: baseline; gap: 8px;
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text-muted);
}
.na-side-h span { font-size: var(--text-2xs); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.na-side-net {
  font-size: var(--text-2xl); font-weight: var(--fw-bold); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; margin-top: 4px;
}
.na-side-delta { font-size: var(--text-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.na-side-delta em { font-style: normal; font-weight: var(--fw-medium); }
.na-side-bar {
  display: flex; height: 10px; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--color-bg); margin: 14px 0 10px;
}
.na-side-bar i.na-bank { background: #4b7cf3; }
.na-side-bar i.na-inv  { background: #10b981; }
.na-side-bar i.na-fx   { background: #9b6ef3; }
.na-side-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.na-side-row:last-child { border-bottom: none; }
.na-side-row i { width: 8px; height: 8px; border-radius: var(--radius-circle); flex: 0 0 auto; }
.na-side-row i.na-bank { background: #4b7cf3; }
.na-side-row i.na-inv  { background: #10b981; }
.na-side-row i.na-fx   { background: #9b6ef3; }
.na-side-row span { color: var(--color-text-muted); }
.na-side-row b { margin-left: auto; font-variant-numeric: tabular-nums; }
.na-side-row em {
  font-style: normal; font-size: var(--text-2xs); color: var(--color-text-subtle);
  width: 32px; text-align: right; font-variant-numeric: tabular-nums;
}
.na-side-note { font-size: var(--text-2xs); color: var(--color-text-subtle); line-height: 1.6; margin: 12px 0 0; }

/* ============================================================
   純資産: 保有の一覧（口座・投資信託・FX を金額順に）
   カード8枚をやめた理由は2つ。①銀行合計/投資信託/FX の3枚がヒーローの内訳バーと
   完全に重複していた ②残高¥22の口座が¥4,026,265の口座と同じ大きさで、大小がまったく
   読めなかった。1行1保有にして金額順に並べ、構成比をバーで見せる。
   資産クラスの合計はヒーローが持ち、ここは個々の保有だけを持つ。
   ============================================================ */
.na-holds {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.na-hold {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto minmax(70px, 200px) 44px;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  border-top: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
}
.na-hold:first-child { border-top: none; }
.na-hold:hover { background: var(--color-row-hover); }
.na-hold-dot { width: 8px; height: 8px; border-radius: var(--radius-xs); justify-self: center; }
.na-hold-dot.na-bank { background: #4b7cf3; }
/* 現金は銀行の隣の色にする＝同じ「現預金」の仲間だと分かる濃さ違い（別系統の色にすると
   資産クラスが4つあるように見える。ヒーローの内訳バーでは2つを1本に束ねている） */
.na-hold-dot.na-cash { background: #38bdf8; }
.na-hold-dot.na-inv  { background: #10b981; }
.na-hold-dot.na-fx   { background: #9b6ef3; }
.na-hold-name {
  font-size: var(--text-xs); color: var(--color-text); font-weight: var(--fw-semibold); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.na-hold-name em {
  font-style: normal; font-weight: var(--fw-normal); font-size: var(--text-2xs);
  color: var(--color-text-subtle); margin-left: 8px;
}
.na-hold-val { font-size: var(--text-base); font-weight: var(--fw-bold); color: var(--color-text); white-space: nowrap; line-height: 1.5; }
.na-hold-bar { height: 5px; border-radius: var(--radius-xs); background: var(--color-bg); overflow: hidden; }
.na-hold-bar i { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); }
.na-hold:has(.na-hold-dot.na-cash) .na-hold-bar i { background: #38bdf8; }
.na-hold:has(.na-hold-dot.na-inv) .na-hold-bar i { background: #10b981; }
.na-hold:has(.na-hold-dot.na-fx) .na-hold-bar i { background: #9b6ef3; }
.na-hold-pct { font-size: var(--text-2xs); color: var(--color-text-muted); text-align: right; }

@media (max-width: 820px) {
  .na-hold { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .na-hold-bar, .na-hold-pct { display: none; }
}

/* チャートの高さ枠。Chart.js は `responsive: true` だけだと幅に対して比率を保って
   伸びるため、横長のカードに置くと 600px 級の巨大なチャートになる。高さはここで
   決め、チャート側は `maintainAspectRatio: false` にする（両方揃えないと、縦を
   詰めたぶん横まで縮んで中央に寄る）。 */
.chart-box { position: relative; height: 320px; }
/* カテゴリ別ドーナツの凡例はカテゴリの数だけ縦に伸びる（17件＋未分類）。
   320px だとちょうど使い切っていて、1件増えると右下に折り返して浮くので余白を持たせる。 */
.chart-box:has(> #chartCategory) { height: 360px; }
.chart-box canvas { max-height: 100%; }
@media (max-width: 700px) { .chart-box { height: 260px; } }
/* ヒーローの as-of 補足（銀行残高が繰越であることの明示） */
.ahero-carry {
  font-size: var(--text-3xs); letter-spacing: 0;
  background: rgba(255,255,255,0.10); border-radius: var(--radius-pill);
  padding: 2px 9px; color: rgba(255,255,255,0.7); margin-left: 6px;
}

/* ============================================================
   為替の影響（純資産タブのサブモード）
   円建ての基準価額だけを見ていると、運用益のうち円安ぶんも、資産のドル連動も、
   円高になったときの目減りも見えない。この画面はその3つだけを扱う。
   ============================================================ */
/* ヒーローのゲージは**純資産を100%の上限**として読む（NISA枠の生涯枠と同じ）。
   レバレッジで100%を超えうるので、超えた分は色を変えて溢れを見せる。 */
.fxe-bar .seg.fxe-usd  { background: #7fa9ff; }
.fxe-bar .seg.fxe-over { background: var(--color-danger-on-dark); }
.ahero-legend .dot.fxe-usd  { background: #7fa9ff; }
.ahero-legend .dot.fxe-over { background: var(--color-danger-on-dark); }
.ahero-legend .fxe-base { color: rgba(255,255,255,0.45); }
.fxe-note {
  font-size: var(--text-2xs); color: rgba(255,255,255,0.62); line-height: 1.75;
  text-align: right;
}
.fxe-note b { color: var(--color-danger-on-dark); font-weight: var(--fw-bold); }

.fxe-card { margin-bottom: 16px; }
.fxe-dec-total {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--color-success-text);
  font-variant-numeric: tabular-nums; margin: 4px 0 12px;
}
.fxe-dec-total span {
  font-size: var(--text-2xs); font-weight: var(--fw-normal); color: var(--color-text-muted);
}
.fxe-dec-bar {
  display: flex; height: 12px; border-radius: var(--radius-pill);
  background: var(--color-bg); overflow: hidden;
}
.fxe-dec-bar i { display: block; height: 100%; }
.fxe-dec-idx { background: #4b7cf3; }
.fxe-dec-fx  { background: #f0a04b; }
.fxe-dec-legend {
  display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 12px;
  font-size: var(--text-xs); color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.fxe-dec-legend b { color: var(--color-text); font-weight: var(--fw-bold); margin-left: 2px; }
.fxe-dec-legend em { font-style: normal; color: var(--color-text-subtle); margin-left: 6px; font-size: var(--text-2xs); }
.fxe-dec-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: var(--radius-xs); margin-right: 6px; vertical-align: middle; }
.fxe-dec-legend .dot.fxe-idx { background: #4b7cf3; }
.fxe-dec-legend .dot.fxe-fx  { background: #f0a04b; }
.fxe-caption {
  margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--color-border);
  font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.8;
}
.fxe-caption b { color: var(--color-text); font-weight: var(--fw-bold); }

.fxe-table tbody tr.fxe-now { background: var(--color-primary-light); }
.fxe-table tbody tr.fxe-now td { font-weight: var(--fw-bold); }
.fxe-nowtag {
  margin-left: 8px; font-size: var(--text-3xs); font-weight: var(--fw-bold);
  background: var(--color-primary); color: var(--color-text-on-accent);
  border-radius: var(--radius-md); padding: 1px 6px;
}
@media (max-width: 900px) { .fxe-note { text-align: left; } }
/* 「開始前」＝まだ1回も積み立てていない銘柄。チップと表で同じ札を使う */
.inv-state-soon { margin-left: 6px; }

/* 為替の影響: 前提（銘柄ごとの USD 連動比率）。設定に依存する画面なので設定を隠さない */
/* 前提の表は隣のシナリオ表と同じ `balance-table`＝行の高さも見出しの帯も揃う。
   銘柄名だけは長くなりうるので、折り返しを許して横スクロールを出さない。 */
.fxe-assume-table td:first-child { white-space: normal; line-height: 1.45; }
.fxe-assume-table td { font-variant-numeric: tabular-nums; }
.fxe-assume-def {
  font-size: var(--text-3xs); font-weight: var(--fw-semibold); color: var(--color-text-subtle);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 4px;
  margin-left: 6px;
}