/* 投資信託（照会・銘柄の設定・基準価額の取り込み・月次入力） */

/* **`display:flex` は `td` ではなく中の入れ物に置く。** セルそのものを flex にすると
   表のセルではなくなり、行の高さいっぱいに伸びない＝この列だけ罫線が数px上にずれる
   （副行を足して行が高くなり、そのズレが目に見えるようになった）。 */
.inv-share-cell { min-width: 130px; }
.inv-share-wrap { display: flex; align-items: center; gap: 8px; }
.inv-share-track {
  flex: 1; height: 6px; border-radius: var(--radius-xs); background: var(--color-bg);
  overflow: hidden; display: block; min-width: 44px;
}
.inv-share-track i { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; }
.inv-share-pct {
  font-size: var(--text-2xs); color: var(--color-text-muted);
  font-variant-numeric: tabular-nums; min-width: 38px; text-align: right;
}
/* **省略していいのは銘柄名だけ。** セルごと `text-overflow: ellipsis` にしていたため、
   名前が長い行では末尾に付く「開始前」の札が切れ、構成比の列に赤みだけがはみ出して
   見えていた。名前を伸び縮みする箱に入れ、両端の札は縮ませない。
   `display:flex` は `td` ではなく中の入れ物に置く（`.inv-share-wrap` と同じ理由＝
   セルを flex にすると行の高さいっぱいに伸びず、この列だけ罫線がずれる）。 */
.inv-name-cell { max-width: 22em; }
.inv-name-wrap { display: flex; align-items: center; min-width: 0; }
.inv-name-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.inv-name-wrap > .fund-badge, .inv-name-wrap > .inv-chip-state { flex: 0 0 auto; }
/* 全銘柄テーブルの副行。**1列＝主役の数字1つ ＋ その別の見方1つ**という形にそろえる
   （積立額↓口数と取得単価／評価額↓現在値／前日比↓率／損益↓損益率）。追加の指標に
   1列ずつ与えると `--w-shell` に収まらず横スクロールが常設になる。定期の支払いの表の
   `.sub-meta` と同じ「主役の数字の下に素性を添える」形。 */
.inv-cell-sub {
  font-size: var(--text-2xs); font-weight: var(--fw-normal);
  color: var(--color-text-subtle); margin-top: 2px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* 区切りの中黒は文字より薄く＝2つの数字の切れ目が分かればよく、自分は読ませない */
.inv-cell-sub i { font-style: normal; opacity: 0.45; margin: 0 4px; }
.inv-cell-sub b { font-weight: var(--fw-semibold); }
/* **主役の数字は行の中で1本の線にそろえる。** 副行を持つのは8列のうち4列なので、
   既定の中央寄せだとその4列だけ 13px 持ち上がり、IRR・期間と段違いになる。
   `baseline` なら1行目どうしがそろい、副行は下へ垂れる。 */
#inv-all-table tbody td { vertical-align: baseline; }
/* 銘柄チップの状態（終了/停止）。色より先に名前が読めることを優先し、控えめに */
.inv-chip-state {
  margin-left: 6px; font-size: var(--text-3xs); font-weight: var(--fw-bold);
  color: var(--color-warning-text); background: rgba(245,158,11,0.14);
  border-radius: var(--radius-md); padding: 1px 5px; vertical-align: middle;
}

/* **選択中のチップの上では札を白地に置き直す。** チップが選ばれると面が
   `--color-primary` のベタ塗りになるので、青地の「特定」バッジも、淡い橙地の
   「開始前 / 停止 / 終了」も面に溶けて読めなくなっていた（色を薄くするのではなく
   地を反転させる＝新NISA/旧NISA/特定の区別はそのまま残す）。 */
.period-chips button.active .fund-badge { background: var(--color-surface); }
.period-chips button.active .fund-badge.new-nisa { color: var(--color-danger); }
.period-chips button.active .fund-badge.old-nisa { color: var(--color-text-muted); }
.period-chips button.active .fund-badge.non-nisa { color: var(--color-primary); }
.period-chips button.active .inv-chip-state {
  background: var(--color-surface); color: var(--color-warning-text);
}

/* NISA枠別内訳バー（ドーナツ下） */
.inv-nisa-bar { display: flex; height: 12px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--color-border); }
.inv-nisa-seg { height: 100%; }

@media (max-width: 768px) {
  .kpi-card.kpi-hero { grid-column: span 1; }
}

/* ============================================================
   銘柄の設定モーダル（投資信託）
   期間・取得コード・積立・NISA枠を1枚で扱うので、節ごとに見出しと短い説明を置く。
   説明を添えるのは、協会コードと ISIN の役割が違う（取り違えが静かに通る）ことを
   画面で伝えないと事故になるため。枠と節は共通部品（css/parts/modal.css の .md / .md-sec）で、
   ここに置くのは検証結果の表示だけ。
   ============================================================ */
.fs-sub { display: flex; align-items: center; gap: 8px; }
.fs-verify-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.fs-verify { white-space: nowrap; padding: 8px 16px; font-size: var(--text-xs); }
.fs-verify-out {
  flex: 1; min-width: 220px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: var(--text-2xs); line-height: 1.6;
  border-radius: var(--radius-md); padding: 0;
}
.fs-verify-out:not(:empty) { padding: 8px 11px; }
.fs-verify-out b { font-size: var(--text-xs); font-weight: var(--fw-bold); }
.fs-vg-ok { background: var(--color-success-light); color: #0d7a5f; }
.fs-vg-ok b { color: var(--color-success-text); }
.fs-vg-ng { background: var(--color-danger-light); color: #a12b2b; }
.fs-vg-ng b { color: var(--color-danger-text); display: block; }
.fs-vg-wait { background: var(--color-bg); color: var(--color-text-muted); flex-direction: row; align-items: center; gap: 7px; }
.fs-vg-warn { color: var(--color-warning-text); }
.fs-spin {
  width: 12px; height: 12px; border-radius: var(--radius-circle); flex: 0 0 auto;
  border: 2px solid var(--color-border); border-top-color: var(--color-primary);
  animation: fsSpin 0.7s linear infinite;
}
@keyframes fsSpin { to { transform: rotate(360deg); } }

/* KPI の「いつ時点か」。数字のすぐ下に小さく置く＝T+1 であることを隠さない */
.kpi-asof { display: block; color: var(--color-text-subtle); font-size: var(--text-3xs); margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .fs-spin { animation-duration: 2s; }
}

/* ============================================================
   基準価額の取り込み状態 / 確認待ち（投資信託 月次入力タブ）
   ============================================================ */
.fn-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.fn-card-pending { border-color: rgba(245, 158, 11, 0.45); background: linear-gradient(180deg, rgba(245,158,11,0.05), var(--color-surface) 60%); }
.fn-card-warn { color: var(--color-danger-text); }
.fn-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.fn-t { font-size: var(--text-base); font-weight: var(--fw-bold); color: var(--color-text); }
/* 説明文の折り返し。**ch は半角基準**なので日本語に使うと約半分の文字数で折り返し、
   文の途中で改行されてしまう。幅は flex 側で決めさせ、ここでは指定しない。 */
.fn-d { font-size: var(--text-2xs); color: var(--color-text-muted); line-height: 1.7; margin-top: 4px; }
.fn-head-text { flex: 1 1 340px; min-width: 0; }
.fn-d b { color: var(--color-text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

.fn-funds { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.fn-fund {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--text-xs); padding: 6px 10px;
  background: var(--color-bg); border-radius: var(--radius-md);
}
.fn-dot { width: 7px; height: 7px; border-radius: var(--radius-circle); flex: 0 0 auto; background: var(--color-text-subtle); }
.fn-dot-ok { background: var(--color-success); box-shadow: 0 0 0 3px var(--color-success-light); }
.fn-dot-off { background: var(--color-warning); box-shadow: var(--shadow-xs); }
.fn-fname { color: var(--color-text); font-weight: var(--fw-semibold); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-fmeta { color: var(--color-text-subtle); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; white-space: nowrap; }

.fn-note {
  margin-top: 12px; padding: 9px 12px; border-radius: var(--radius-md);
  font-size: var(--text-2xs); line-height: 1.7;
}
.fn-note b { display: block; font-weight: var(--fw-bold); margin-bottom: 2px; }
.fn-note-warn { background: rgba(245,158,11,0.10); color: #8a5a08; }
.fn-note-err { background: var(--color-danger-light); color: #a12b2b; }

.fn-plist { margin-top: 14px; border-top: 1px solid var(--color-border); padding-top: 10px; }
/* 行はその月の表を開くボタン（確定は表の下で）。button の既定の見た目を外して行に見せる */
.fn-prow {
  display: grid; grid-template-columns: 68px 1fr auto auto;
  gap: 12px; align-items: center; width: 100%;
  padding: 5px 6px; margin: 0; font: inherit; font-size: var(--text-xs);
  color: inherit; text-align: left; cursor: pointer;
  background: none; border: none; border-bottom: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
}
.fn-prow:hover { background: var(--color-bg); }
.fn-prow:last-of-type { border-bottom: none; }
.fn-pym { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.fn-pname { color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-pnum { font-variant-numeric: tabular-nums; text-align: right; }
.fn-pmuted { color: var(--color-text-subtle); font-size: var(--text-2xs); }
.fn-pmore { font-size: var(--text-2xs); color: var(--color-text-subtle); padding-top: 6px; }
.fn-ptotal {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-border);
  text-align: right; font-size: var(--text-xs); font-weight: var(--fw-bold);
  color: var(--color-text); font-variant-numeric: tabular-nums;
}

/* 月次入力テーブルの未確認バッジ */
.inv-unconf {
  display: inline-block; font-size: var(--text-3xs); font-weight: var(--fw-bold);
  background: rgba(245,158,11,0.16); color: #8a5a08;
  border-radius: var(--radius-md); padding: 1px 6px; margin-left: 6px; vertical-align: middle;
}

/* チャート見出しの補足（測り方など、数字の読み違えを防ぐ一言） */
.chart-note {
  display: block; margin-top: 2px;
  font-size: var(--text-2xs); font-weight: var(--fw-normal); color: var(--color-text-subtle);
}
/* 同じ商品を複数の銘柄行で持っているときの印 */
.fn-holders {
  margin-left: 6px; font-size: var(--text-3xs); font-weight: var(--fw-semibold);
  color: var(--color-text-subtle); background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0 5px;
}
.nisa-ring-hint.nisa-ring-idle { color: var(--color-text-subtle); background: var(--color-bg); }
/* 月次入力: 基準価額から算出している列（入力欄ではないことを見た目で分ける） */
.inv-derived {
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  background: linear-gradient(var(--color-bg), var(--color-bg)) padding-box;
}

/* ============================================================
   投資信託 月次入力
   主役はその月の表。上に積む情報（取り込み状態）は1行に畳み、月の移動は表の直上で
   完結させる（一覧まで縦スクロールして目的の月を探す、をやめる）。
   ============================================================ */
.fn-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 9px 12px 9px 14px;
  margin-bottom: 12px;
  font-size: var(--text-xs);
}
.fn-bar-t { font-weight: var(--fw-semibold); color: var(--color-text); }
.fn-bar-m { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.fn-bar-m b { color: var(--color-text); font-weight: var(--fw-semibold); }
.fn-bar-warn {
  color: #8a5a08; background: rgba(245,158,11,0.12);
  border-radius: var(--radius-pill); padding: 2px 10px;
  font-size: var(--text-2xs); font-weight: var(--fw-semibold); text-decoration: none;
}
.fn-bar-warn:hover { background: rgba(245,158,11,0.2); }
.fn-bar-err { color: var(--color-danger-text); font-size: var(--text-2xs); }
.fn-bar-btn { margin-left: auto; white-space: nowrap; padding: 5px 12px; font-size: var(--text-2xs); }

.btn.btn-ghost {
  background: none; border: 1px solid var(--color-border);
  color: var(--color-text-muted); font-weight: var(--fw-semibold);
}
.btn.btn-ghost:hover { background: var(--color-bg); color: var(--color-text); }

.fn-detail, .bkm-hist { margin-bottom: 14px; }
.fn-detail > summary, .bkm-hist > summary {
  cursor: pointer; font-size: var(--text-2xs); color: var(--color-text-muted);
  padding: 4px 2px; list-style: none; user-select: none;
}
.fn-detail > summary::-webkit-details-marker, .bkm-hist > summary::-webkit-details-marker { display: none; }
.fn-detail > summary::before, .bkm-hist > summary::before { content: "▸ "; }
.fn-detail[open] > summary::before, .bkm-hist[open] > summary::before { content: "▾ "; }
.fn-detail > summary:hover, .bkm-hist > summary:hover { color: var(--color-text); }
.bkm-hist { margin-top: 18px; }

/* 月ナビゲーター＋その月の合計＋保存 */
.bkm {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: 12px;
}
.bkm-nav { display: flex; align-items: center; gap: 6px; }
.bkm-step {
  width: 30px; height: 30px; flex: 0 0 auto;
  border: 1px solid var(--color-border); background: var(--color-surface);
  border-radius: var(--radius-md); color: var(--color-text-muted);
  font-size: var(--text-md); line-height: 1; cursor: pointer; transition: all 0.15s;
}
.bkm-step:hover { background: var(--color-bg); color: var(--color-text); border-color: var(--color-primary-border); }
.bkm-sum {
  display: flex; align-items: baseline; gap: 10px;
  font-variant-numeric: tabular-nums;
}
.bkm-sum b { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--color-text); }
.bkm-sum span { font-size: var(--text-2xs); color: var(--color-text-muted); }
.bkm-sum .bkm-unconf {
  color: #8a5a08; background: rgba(245,158,11,0.16);
  border-radius: var(--radius-pill); padding: 1px 8px; font-weight: var(--fw-bold);
}
.bkm-sum .bkm-none { color: var(--color-text-subtle); }
.bkm-act { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.bkm-settings { padding: 7px 14px; font-size: var(--text-xs); }

/* 純資産ヒーローの内訳（銀行 / 投資信託 / FX）。凡例の点とバーの色を対にする */
#na-hero { margin-bottom: 16px; }
.ahero-bar .seg.na-bank { background: #7fa9ff; }
.ahero-bar .seg.na-inv  { background: var(--color-success-on-dark); }
.ahero-bar .seg.na-fx   { background: #c4a2ff; }
.ahero-legend .dot.na-bank { background: #7fa9ff; }
.ahero-legend .dot.na-inv  { background: var(--color-success-on-dark); }
.ahero-legend .dot.na-fx   { background: #c4a2ff; }
/* FXヒーローの内訳（元本＝入金−出金 / 通算損益） */
#fx-hero:not(:empty) { margin-bottom: 14px; }
.ahero-bar .seg.fx-in   { background: #7fa9ff; }
.ahero-bar .seg.fx-gain { background: var(--color-success-on-dark); }
.ahero-legend .dot.fx-in   { background: #7fa9ff; }
.ahero-legend .dot.fx-gain { background: var(--color-success-on-dark); }
/* 内訳バーの損失セグメント（投入・元本のほうが大きいとき、目減りぶんを示す） */
.ahero-bar .seg.loss, .ahero-bar .seg.fx-loss { background: var(--color-danger-on-dark); }
.ahero-legend .dot.loss, .ahero-legend .dot.fx-loss { background: var(--color-danger-on-dark); }
/* 収支サマリーのヒーロー内訳（収入 → 支出 / 貯金） */
#bal-hero:not(:empty) { margin-bottom: 14px; }
.ahero-bar .seg.bal-spd  { background: #7fa9ff; }
.ahero-bar .seg.bal-sav  { background: var(--color-success-on-dark); }
.ahero-bar .seg.bal-inc  { background: #7fa9ff; }
.ahero-bar .seg.bal-over { background: var(--color-danger-on-dark); }
.ahero-legend .dot.bal-spd  { background: #7fa9ff; }
.ahero-legend .dot.bal-sav  { background: var(--color-success-on-dark); }
.ahero-legend .dot.bal-inc  { background: #7fa9ff; }
.ahero-legend .dot.bal-over { background: var(--color-danger-on-dark); }
/* ヒーローのバーに立てる目標マーカー（NISA枠の目盛りと同じ役割＝目標の位置を示す） */
.ahero-bar { position: relative; }
.ahero-target {
  position: absolute; top: -3px; bottom: -3px; width: 2px;
  background: #ffd479; border-radius: var(--radius-xs); transform: translateX(-1px);
  box-shadow: var(--shadow-xs);
}
/* 「目標まであといくら」＝結果の再掲で終わらせず、次の行動を出す */
.ahero-goal {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: var(--text-2xs); font-weight: var(--fw-semibold);
  color: #ffd479; background: rgba(255,212,121,0.14);
  border-radius: var(--radius-pill); padding: 2px 10px;
}
.ahero-goal b { color: var(--color-text-on-accent); font-weight: var(--fw-bold); }
.ahero-goal em { font-style: normal; color: rgba(255,255,255,0.55); font-weight: var(--fw-normal); }
.ahero-goal--done { color: var(--color-success-on-dark); background: rgba(94,233,181,0.14); }
.ahero-legend .dot.bal-inc-line { background: rgba(255,255,255,0.45); }

/* **中身が無いときは場所を取らない**。サマリー枠は空でも margin を持つため、
   使わないモード（FXの約定一覧・アラート・資金管理）で 32px の空白が残っていた。 */
.summary:empty, .astrip:empty, .kpi-strip:empty { display: none; margin: 0; }
#fx-summary { margin-top: 12px; }

/* 純資産推移のチャート。**4点しか無いデータに 608px は過大**だったので、他のチャート
   （300px）と揃う高さに抑える。canvas を直に指定せず wrapper の高さで決める。 */
.na-chart-card { position: relative; height: 320px; }
.na-chart-card canvas { max-height: 100%; }

/* 目標までの距離。グラフの目標線だけでは「あとどれだけか」が読み取れない */
.na-goal-note {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 10px 2px 0; font-size: var(--text-xs);
  color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.na-goal-note:empty { display: none; }
.na-goal-name { font-weight: var(--fw-semibold); color: var(--color-text); }
.na-goal-bar {
  flex: 1 1 160px; min-width: 120px; max-width: 420px; height: 6px;
  background: var(--color-bg); border-radius: var(--radius-xs); overflow: hidden;
}
.na-goal-bar i { display: block; height: 100%; background: var(--color-warning); border-radius: inherit; }
.na-goal-num b { color: var(--color-text); font-weight: var(--fw-bold); margin-right: 2px; }
.na-goal-rest {
  color: #8a5a08; background: rgba(245,158,11,0.12);
  border-radius: var(--radius-pill); padding: 2px 10px; font-size: var(--text-2xs); font-weight: var(--fw-semibold);
}
.na-goal-rest.na-goal-done { color: var(--color-success-text); background: var(--color-success-light); }