/* FX（レポート〜アラート）。アラートの色 --fx-al-* は server/fx_watch.py の LEVELS と対 */

/* ============================================================
   FX タブ ハイブリッドテーマ
   土台は他タブと同じライト。チャート/カレンダーのみダークな
   「計器パネル」。KPIはライトカード＋カラーアクセント。
   （#fxPanel とFX分析用クラスにスコープ）
   ============================================================ */

/* 金融数字は等幅で桁揃え */
#fxPanel .balance-table td,
#fxPanel .balance-table th,
#fxPanel .summary-card .value,
.fx-kpi-val,
.fx-cal-cell { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* テーブルヘッダのスティッキー化（ライトのまま） */
#fxPanel .balance-table th { position: sticky; top: 0; z-index: 2; }

/* KPIストリップ（ライトカード＋左アクセントバー） */
.fx-kpi-strip {
  display: grid;
  /* 8枚を横一列に詰めると「プロフィットファクター」「ベスト / ワースト」が
     ラベルも値も折り返す。**4列×2段**にして1枚あたりの幅を確保する
     （枚数が変わっても auto-fit で素直に流れる）。 */
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
@media (min-width: 1100px) { .fx-kpi-strip { grid-template-columns: repeat(4, 1fr); } }
.fx-kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 12px 14px;
  position: relative;
  overflow: hidden;
}
.fx-kpi::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--kpi-accent, var(--color-primary));
}
.fx-kpi-label { font-size: var(--text-2xs); color: var(--color-text-muted); letter-spacing: 0.02em; margin-bottom: 5px; }
.fx-kpi-val { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--color-text); line-height: 1.15; }
.fx-kpi-sub { font-size: var(--text-2xs); color: var(--color-text-subtle); margin-top: 3px; }
.fx-pos { color: var(--color-success-text) !important; }
.fx-neg { color: var(--color-danger-text) !important; }
.fx-kpi.kpi-pos { --kpi-accent: var(--color-success); }
.fx-kpi.kpi-neg { --kpi-accent: var(--color-danger); }

/* レポートチャートパネル（ライト。他タブのチャートと統一）
   ※ 市場チャート（ポジション照会のレート足）のみダーク（HTML側でインライン指定） */
.fx-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 16px;
}
.fx-sec-title { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--fw-semibold); margin: 2px 0 12px; letter-spacing: 0.02em; }
.fx-analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* 損益カレンダーヒートマップ（ライト） */
.fx-cal { width: 100%; border-collapse: separate; border-spacing: 3px; }
.fx-cal th { font-size: var(--text-3xs); color: var(--color-text-subtle); font-weight: var(--fw-medium); padding: 2px; text-align: center; }
/* 列の型（parts/data-views.css の th.c-r）は列の性質なのでこちらより優先（分割前の並び順での勝ち方を保つ） */
.fx-cal th.c-r { text-align: right; }
.fx-cal td.fx-cal-year { font-size: var(--text-2xs); color: var(--color-text-muted); text-align: right; padding-right: 6px; white-space: nowrap; }
.fx-cal-cell {
  height: 26px; border-radius: var(--radius-sm); text-align: center;
  font-size: var(--text-3xs); color: var(--color-text); cursor: default;
}
.fx-cal-cell.empty { background: var(--color-bg); }


/* 売買バッジ・通貨ペアチップ（ライト用） */
.fx-badge {
  display: inline-block; font-size: var(--text-2xs); font-weight: var(--fw-semibold);
  padding: 1px 7px; border-radius: var(--radius-sm); line-height: 1.5;
}
.fx-badge.buy { color: var(--color-success-text); background: rgba(16, 185, 129, 0.12); }
.fx-badge.sell { color: var(--color-danger-text); background: rgba(239, 68, 68, 0.12); }
.fx-badge.neutral { color: var(--color-text-muted); background: rgba(120, 123, 134, 0.12); }
/* 資金管理（入出金台帳） */
.fx-cf-badge { display: inline-block; font-size: var(--text-2xs); font-weight: var(--fw-semibold); padding: 1px 8px; border-radius: var(--radius-lg); line-height: 1.6; }
.fx-cf-badge.in { color: #2563eb; background: rgba(37, 99, 235, 0.12); }
.fx-cf-badge.out { color: var(--color-warning-text); background: rgba(230, 126, 34, 0.14); }
.fx-pair-chip {
  font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-border);
  padding: 1px 7px; border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
  .fx-analytics-grid { grid-template-columns: 1fr; }
}

/* ── FX 到達通知アラート ─────────────────────────────────────
   レベル色は server/fx_watch.py の LEVELS と対。片方だけ変えないこと
   （画面のチップ＝LINE カードのヘッダ色を予告する役割なので、ずれると意味を失う）。 */
:root {
  --fx-al-info: #2563eb;
  --fx-al-warn: #f59e0b;
  --fx-al-critical: #ef4444;
}

/* 分割数の指定（既定の .fxc-seg は2分割） */
.fxc-seg--3 { grid-template-columns: repeat(3, 1fr); }
.fxc-seg--4 { grid-template-columns: repeat(4, 1fr); }

/* 通知履歴のフィルタ列。セグメントは一覧用に小さめ */
.fx-al-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fx-al-filter .fxc-seg { padding: 3px; gap: 3px; }
.fx-al-filter .fxc-seg-btn { padding: 5px 12px; font-size: var(--text-xs); }
.fx-al-filter .fxc-input { padding: 6px 10px; font-size: var(--text-xs); }

/* 価格ラダーに差し込む現在レートの目印 */
.balance-table tr.fx-al-now td {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  font-size: var(--text-xs);
  border-top: 1px dashed var(--color-primary);
  border-bottom: 1px dashed var(--color-primary);
  padding-top: 6px;
  padding-bottom: 6px;
}

/* 選択中のレベルはその色で示す＝カードの色をボタン上で予告する */
.fxc-seg-btn.active[data-level="info"] { color: var(--fx-al-info); }
.fxc-seg-btn.active[data-level="warn"] { color: var(--fx-al-warn); }
.fxc-seg-btn.active[data-level="critical"] { color: var(--fx-al-critical); }

/* 一覧のレベルチップ */
.fx-al-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  color: var(--color-text-on-accent);
  white-space: nowrap;
}
.fx-al-chip[data-level="info"] { background: var(--fx-al-info); }
.fx-al-chip[data-level="warn"] { background: var(--fx-al-warn); }
.fx-al-chip[data-level="critical"] { background: var(--fx-al-critical); }

/* 通知プレビュー（LINE の Flex カードの見え方を再現） */
.fx-al-preview {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  max-width: 300px;
}
.fx-al-preview-hd {
  padding: 11px 14px;
  color: var(--color-text-on-accent);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
}
.fx-al-preview-bd { padding: 14px; }
.fx-al-preview-rate {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.fx-al-preview-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 5px;
  line-height: 1.5;
}
.fx-al-preview-note {
  font-size: var(--text-3xs);
  color: var(--color-text-subtle);
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--color-border);
  line-height: 1.5;
}
.fx-al-note {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin: 0;
  line-height: 1.7;
}

/* ライブ更新ピル（SSE） */
.live-pill-el { position:fixed; right:18px; bottom:18px; z-index:3000; background:var(--color-primary); color:var(--color-text-on-accent); padding:10px 16px; border-radius:var(--radius-pill); font-size:var(--text-sm); font-weight:var(--fw-bold); box-shadow:var(--shadow-md); cursor:pointer; display:flex; align-items:center; gap:6px; animation:secIn .2s ease; }
.live-pill-el:hover { background:var(--color-primary-hover); }

/* ── 約定一覧のフィルタ（アラートタブと同じ意匠：セグメント＋チップ） ────── */
.fx-tr-filter {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.fx-tr-fgroup { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fx-tr-flabel {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.fx-tr-filter .fxc-seg { padding: 3px; gap: 3px; }
.fx-tr-filter .fxc-seg-btn { padding: 5px 14px; font-size: var(--text-xs); }
.fx-tr-filter .fxc-mchip { height: 28px; font-size: var(--text-xs); }
/* 文字幅のあるチップ（通貨ペア・区分名）。数字用の .fxc-mchip は幅が足りない */
.fxc-mchip--wide { min-width: 0; padding: 0 12px; }

/* ── ポジション照会 ─────────────────────────────────────────────
   ヒーロー（.ahero、css/parts/hero.css）＋帯（.astrip）の下に、ダークのレートチャートと
   建玉の一覧。**チャートだけダーク**＝取引画面の慣習（ローソク足は暗い地で読む）。 */

/* ヒーローの内訳バー＝建玉の構成（買と売の Lot）。色はチャートの三角（買=緑・売=赤）と対 */
.ahero-bar .seg.fx-buy { background: #4fd1c5; }
.ahero-bar .seg.fx-sell { background: #f87171; }
.ahero-legend .dot.fx-buy { background: #4fd1c5; }
.ahero-legend .dot.fx-sell { background: #f87171; }
.ahero--empty { grid-template-areas: "left left"; }
/* ポジション照会のヒーローは**帯を中に取り込む**（左：主役の金額／中：判断用の4つ／右：推移、
   下：買と売の構成）。白い帯を別に置くと、一番大事な一覧が1段ぶん下がる。 */
.ahero--fxpos {
  grid-template-columns: minmax(220px, auto) minmax(0, 1fr) minmax(140px, 220px);
  grid-template-areas: "left stats right" "split split split";
  align-items: center; padding: 18px 22px 14px; gap: 12px 24px; margin-bottom: 14px;
}
.ahero--fxpos .ahero-val { font-size: clamp(26px, 3vw, 36px); }
.ahero--fxpos .ahero-spark { height: 40px; }
.fxh-stats {
  grid-area: stats; position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-left: 1px solid rgba(255,255,255,0.12);
}
.fxh-stat { padding: 2px 14px; border-right: 1px solid rgba(255,255,255,0.12); min-width: 0; }
.fxh-stat:last-child { border-right: none; }
.fxh-l { font-size: var(--text-3xs); color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxh-v { margin-top: 3px; font-size: var(--text-md); font-weight: var(--fw-bold); color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fxh-v em { font-style: normal; font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: rgba(255,255,255,0.5); margin-left: 3px; }
.fxh-v em.pre { margin-left: 0; margin-right: 5px; }
.fxh-s { margin-top: 2px; font-size: var(--text-3xs); color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ahero--fxpos .ahero-split { margin-top: 2px; }
@media (max-width: 1100px) {
  .ahero--fxpos { grid-template-columns: minmax(0, 1fr) minmax(120px, 200px); grid-template-areas: "left right" "stats stats" "split split"; }
  .fxh-stats { border-left: none; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 10px; }
  .fxh-stat:first-child { padding-left: 0; }
}
@media (max-width: 640px) {
  .ahero--fxpos { grid-template-columns: 1fr; grid-template-areas: "left" "stats" "split"; }
  .ahero--fxpos .ahero-right { display: none; }
  .fxh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
  .fxh-stat:nth-child(2n) { border-right: none; }
  .fxh-stat:nth-child(2n+1) { padding-left: 0; }
}

.fx-chart-panel {
  margin-bottom: 18px; padding: 14px 16px 10px;
  background: var(--color-chart-dark); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.fx-chart-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fx-chart-panel .fx-chart-title { margin: 0; font-size: var(--text-base); font-weight: var(--fw-semibold); color: #d1d4dc; }
.fx-chart-opts { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.fx-chart-opt, #fx-pos-tf-chips button { white-space: nowrap; }
.fx-chart-tf { display: flex; align-items: center; gap: 6px; }
.fx-chart-sep { width: 1px; height: 14px; background: var(--color-chart-dark-line); margin: 0 4px; }
.fx-chart-opt {
  font-size: var(--text-2xs); padding: 3px 9px; cursor: pointer;
  background: #1e2235; color: #a0a8b8;
  border: 1px solid var(--color-chart-dark-line); border-radius: var(--radius-sm);
}
.fx-chart-opt:hover { color: #e0e3eb; }
#fx-pos-tf-chips button {
  font-size: var(--text-2xs); padding: 3px 11px;
  border: 1px solid var(--color-chart-dark-line); background: #1e2235; color: #a0a8b8;
}
.fx-chart-msg { color: #5d6d7e; font-size: var(--text-sm); text-align: center; padding: 40px 0; }
/* 取得状況は注記＝チャートより先に読ませない */
.fx-chart-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; font-size: var(--text-2xs); color: #5d6d7e;
}
#fx-pos-fetch-msg { font-size: var(--text-2xs); color: #a0a8b8; }

.fx-pos-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.fx-pos-h { margin: 0; font-size: var(--text-base); font-weight: var(--fw-bold); color: var(--color-text); }
.fx-pos-head .btn { font-size: var(--text-sm); }

/* ── 未決済ポジションの一覧 ──
   主役は**レートの物差し**（.fx-lad）。全行共通のレート軸に約定レートの印を置き、現レートを
   全行を貫く縦線にして、印から線までを損益の色で塗る。数字の列は物差しの左右に静かに並べる。 */
.fx-pos-table { border-collapse: separate; border-spacing: 0; }
.fx-pos-table td { font-variant-numeric: tabular-nums; }
.fx-pos-table thead th { white-space: nowrap; font-size: var(--text-2xs); }
.fx-pos-table tbody tr.fx-pos-row { cursor: pointer; }
.fx-pos-table tbody tr.fx-pos-row td { padding-top: 9px; padding-bottom: 9px; }
.fx-pos-table tbody tr.fx-pos-row:hover td,
.fx-pos-table tbody tr.fx-pos-row:focus-visible td { background: var(--color-primary-light); }
.fx-pos-table tbody tr.fx-pos-row:focus-visible { outline: none; }
/* 通貨ペアは複数ある時だけ（全行 USD/JPY のチップは情報が無い） */
.fx-pos-table:not(.fx-pos--multi) .fx-pos-pair { display: none; }
.fx-pos-pair .fx-pair-chip { font-weight: var(--fw-medium); color: var(--color-text-muted); }

.fx-pos-date { white-space: nowrap; color: var(--color-text); font-size: var(--text-sm); text-align: left !important; }
.fx-pos-date small { margin-left: 6px; color: var(--color-text-subtle); font-size: var(--text-2xs); }
.fx-pos-pair, .fx-pos-side { white-space: nowrap; text-align: left !important; }
.fx-pos-lot, .fx-pos-price, .fx-pos-pips, .fx-pos-pl { text-align: right; white-space: nowrap; font-size: var(--text-sm); }
.fx-pos-lot { color: var(--color-text-muted); }
.fx-pos-lot small { color: var(--color-text-subtle); font-size: var(--text-2xs); }
.fx-pos-price { color: var(--color-text); font-weight: var(--fw-medium); }
.fx-pos-pips { font-weight: var(--fw-medium); }
.fx-pos-pl { font-weight: var(--fw-bold); font-size: var(--text-base); }
.fx-pos-pips.up, .fx-pos-pl.up { color: var(--color-success-text); }
.fx-pos-pips.down, .fx-pos-pl.down { color: var(--color-danger-text); }
.fx-pos-order { font-size: var(--text-2xs); color: var(--color-text-subtle); white-space: nowrap; letter-spacing: 0.01em; text-align: left !important; }
.fx-pos-act { text-align: left !important; white-space: nowrap; cursor: default; }
.fx-pos-btn { padding: 3px 14px; font-size: var(--text-2xs); }
.fx-pos-empty { text-align: center; color: var(--color-text-subtle); padding: 24px !important; }

/* 物差しの列：幅をいちばん取る。上下の padding を0にして縦線を行から行へ繋げる */
.fx-lad-th { width: 34%; min-width: 220px; overflow: visible; padding-left: 14px !important; padding-right: 14px !important; }
.fx-lad-head { position: relative; height: 16px; font-weight: var(--fw-normal); }
.fx-lad-tick {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: var(--text-3xs); color: var(--color-text-subtle); font-variant-numeric: tabular-nums;
}
.fx-lad-now {
  position: absolute; top: -1px; transform: translateX(-50%); white-space: nowrap;
  font-size: var(--text-3xs); color: var(--color-primary); background: var(--color-surface);
  padding: 0 5px; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--color-primary);
}
.fx-lad-now b { font-variant-numeric: tabular-nums; }
.fx-lad-now.end { transform: translateX(calc(-100% + 6px)); }
.fx-lad-now.start { transform: translateX(-6px); }
.fx-pos-table td.fx-lad { position: relative; padding: 0 !important; }
/* 位置の % は内側の枠（左右14pxの余白を除いた幅）に対して取る＝見出しの目盛りと揃う */
.fx-lad-in { position: absolute; left: 14px; right: 14px; top: 0; bottom: 0; }
.fx-lad-in::before {   /* 軸の細い線（行の真ん中） */
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--color-border);
}
.fx-lad-line, .fx-lad-seg, .fx-lad-mark { position: absolute; display: block; }
.fx-lad-line { top: 0; bottom: 0; width: 0; border-left: 1.5px solid var(--color-primary); opacity: 0.55; }
.fx-lad-seg { top: calc(50% - 3px); height: 6px; border-radius: 3px; opacity: 0.55; }
.fx-lad-seg.pos { background: var(--color-success); }
.fx-lad-seg.neg { background: var(--color-danger); }
.fx-lad-mark { top: calc(50% - 5px); width: 10px; height: 10px; transform: translateX(-50%); }
.fx-lad-mark.buy { background: #26a69a; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.fx-lad-mark.sell { background: #ef5350; clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* 買・売の区切り（小計） */
.fx-pos-table tbody tr.fx-pos-grp td {
  padding: 14px 14px 6px !important; background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border-strong); cursor: default;
}
.fx-pos-grp-in { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.fx-pos-grp-in b { color: var(--color-text); font-weight: var(--fw-semibold); }
.fx-pos-grp-t { font-size: var(--text-sm); font-weight: var(--fw-bold); }
.fx-pos-grp.buy .fx-pos-grp-t { color: var(--color-success-text); }
.fx-pos-grp.sell .fx-pos-grp-t { color: var(--color-danger-text); }
.fx-pos-grp-pl { margin-left: auto; font-size: var(--text-sm); font-weight: var(--fw-bold); }
.fx-pos-grp-pl.up { color: var(--color-success-text); }
.fx-pos-grp-pl.down { color: var(--color-danger-text); }

/* 狭い画面は表をやめて1件1枚。物差しはカードの下段に全幅で残す（形で読めるのがこの一覧の要） */
@media (max-width: 640px) {
  /* チャートの操作は「見出し＋足種」の1段目、重ねるものを2段目に（縦に潰れていた） */
  .fx-chart-title { order: 1; }
  .fx-chart-tf { order: 2; margin-left: auto; }
  .fx-chart-opts { order: 3; flex-basis: 100%; }
  .fx-pos-wrap { border: none; box-shadow: none; background: none; overflow: visible; }
  .fx-pos-table thead { display: none; }
  .fx-pos-table, .fx-pos-table tbody { display: block; }
  .fx-pos-table tbody tr.fx-pos-grp { display: block; }
  .fx-pos-table tbody tr.fx-pos-grp td { display: block; padding: 12px 2px 8px !important; border: none; background: none !important; }
  .fx-pos-table tbody tr.fx-pos-row {
    display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px; align-items: center;
    grid-template-areas: "side lot pl" "date date pips" "lad lad lad";
    padding: 11px 14px 6px; margin-bottom: 8px;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  }
  .fx-pos-table tbody tr.fx-pos-row td { padding: 0 !important; border: none; background: none !important; text-align: left; }
  .fx-pos-side { grid-area: side; }
  .fx-pos-lot { grid-area: lot; }
  .fx-pos-lot::after { content: " Lot"; }
  .fx-pos-table tbody tr.fx-pos-row td.fx-pos-pl { grid-area: pl; text-align: right; }
  .fx-pos-date { grid-area: date; font-size: var(--text-2xs) !important; color: var(--color-text-muted) !important; }
  .fx-pos-table tbody tr.fx-pos-row td.fx-pos-pips { grid-area: pips; font-size: var(--text-2xs); text-align: right; }
  .fx-pos-pips::after { content: " pips"; color: var(--color-text-subtle); font-weight: var(--fw-normal); }
  .fx-pos-table tbody tr.fx-pos-row td.fx-lad { grid-area: lad; height: 18px; padding: 0 !important; }
  .fx-lad-in { left: 0; right: 0; }
  .fx-pos-pair, .fx-pos-price, .fx-pos-order, .fx-pos-act { display: none !important; }
}

/* モーダルの共通の作りは css/parts/modal.css。ここは FX 固有の部分だけ（通貨ペアのピル・売買などの色） */
/* 通貨ペアのピル＋メニュー（ブラウザ既定の select は使わない） */
.fx-pairpick { position: relative; }
.fx-pair {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--color-text);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  padding: 5px 10px 5px 12px; border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--color-border); background: var(--color-bg);
}
.fx-pair svg { color: var(--color-text-subtle); transition: transform .15s ease; }
.fx-pair[aria-expanded="true"] { border-color: var(--color-primary); background: var(--color-primary-light); }
.fx-pair[aria-expanded="true"] svg { transform: rotate(180deg); color: var(--color-primary); }
.fx-pair:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-primary-light); border-color: var(--color-primary); }
.fx-pair-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; min-width: 168px;
  padding: 4px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}
.fx-pair-menu[hidden] { display: none; }
.fx-pair-opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%;
  padding: 7px 10px; border: none; background: none; cursor: pointer; text-align: left;
  border-radius: var(--radius-md); font-variant-numeric: tabular-nums;
}
.fx-pair-opt b { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text); letter-spacing: 0.02em; }
.fx-pair-opt em { font-style: normal; font-size: var(--text-2xs); color: var(--color-text-subtle); }
.fx-pair-opt:hover, .fx-pair-opt:focus-visible { background: var(--color-bg); outline: none; }
.fx-pair-opt.on { background: var(--color-primary-light); }
.fx-pair-opt.on b { color: var(--color-primary); }
/* 売買・受取/支払の切り替えの色（買=緑・売=赤、チャートの三角と同じ） */
.fx-dir .fxc-seg-btn.active[data-seg-val="001"] { color: var(--color-success-text); }
.fx-dir .fxc-seg-btn.active[data-seg-val="002"] { color: var(--color-danger-text); }
.fx-sign .fxc-seg-btn.active[data-seg-val="+"] { color: var(--color-success-text); }
.fx-sign .fxc-seg-btn.active[data-seg-val="-"] { color: var(--color-danger-text); }
/* ── 取引詳細（showFxDetail）──
   要約（未決済なら今の損益、決済済みなら決済損益）→ エントリー → 決済。項目は「ラベルの下に値」
   の2列（横幅いっぱいに離すと目が左右に大きく動く）。操作は足元：左に削除、右に編集・決済。 */
.fxd-sec { min-width: 0; overflow-x: auto; }
.md-sub .fx-badge { margin: 0 2px; }
.fxd-sum { padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-bg); }
.fxd-sum-l { font-size: var(--text-2xs); color: var(--color-text-muted); }
.fxd-sum-v { margin-top: 2px; font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--color-text); font-variant-numeric: tabular-nums; }
.fxd-sum-v.up { color: var(--color-success-text); }
.fxd-sum-v.down { color: var(--color-danger-text); }
.fxd-sum-s { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 4px; font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.fxd-sum-s .up { color: var(--color-success-text); font-weight: var(--fw-semibold); }
.fxd-sum-s .down { color: var(--color-danger-text); font-weight: var(--fw-semibold); }
.fxd-sec h4 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-text);
}
.fxd-state { font-size: var(--text-3xs); font-weight: var(--fw-semibold); padding: 1px 7px; border-radius: var(--radius-pill, 999px); color: var(--color-text-muted); background: var(--color-bg); }
.fxd-state.open { color: var(--color-warning-text); background: rgba(245, 158, 11, 0.12); }
.fxd-cnt { font-size: var(--text-2xs); font-weight: var(--fw-normal); color: var(--color-text-muted); }
.fxd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin: 0; }
.fxd-kv { min-width: 0; }
.fxd-kv dt { font-size: var(--text-2xs); color: var(--color-text-muted); }
.fxd-kv dd { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fxd-kv dd.up { color: var(--color-success-text); font-weight: var(--fw-semibold); }
.fxd-kv dd.down { color: var(--color-danger-text); font-weight: var(--fw-semibold); }
.fxd-mono { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.01em; }
.fxd-none { margin: 0; font-size: var(--text-sm); color: var(--color-text-subtle); }
.fxd-tbl { width: 100%; border-collapse: collapse; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.fxd-tbl th { font-size: var(--text-3xs); font-weight: var(--fw-semibold); color: var(--color-text-muted); text-align: left; padding: 0 6px 6px; border-bottom: 1px solid var(--color-border); }
.fxd-tbl td { padding: 7px 6px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.fxd-tbl td small { display: block; margin-top: 1px; }
.fxd-tbl .r { text-align: right; white-space: nowrap; }
.fxd-tbl td:last-child { padding-right: 0; }
.fxd-tbl .b { font-weight: var(--fw-bold); }
.fxd-tbl .up { color: var(--color-success-text); }
.fxd-tbl .down { color: var(--color-danger-text); }
.fxd-acts { margin-left: auto; display: inline-flex; gap: 4px; }
.fxd-acts .fxd-mini { margin-left: 0; font-size: var(--text-2xs); padding: 2px 10px; }
.fxd-mini { font-size: var(--text-3xs); padding: 1px 7px; margin-left: 3px; cursor: pointer; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-muted); }
.fxd-mini.del { border-color: var(--color-danger); color: var(--color-danger-text); }
.fxd-foot { flex-wrap: wrap; }
.fxd-sp { flex: 1; }
.fxd-del { font-size: var(--text-xs); }
@media (max-width: 480px) { .fxd-foot .btn { flex: 1 1 auto; } .fxd-sp { display: none; } }

/* 取引票：エントリーと決済（と「いま」）を左右の列に。同じ項目が同じ行に来る */
.fxd-ticket { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.fxd-ticket th, .fxd-ticket td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.fxd-ticket tbody th { font-size: var(--text-2xs); font-weight: var(--fw-normal); color: var(--color-text-muted); white-space: nowrap; }
.fxd-ticket thead th { padding-top: 0; font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--color-text); border-bottom: 1px solid var(--color-border-strong); }
.fxd-ticket thead th > span { display: inline-block; margin-right: 6px; }
.fxd-ticket thead th .fxd-acts { margin-left: 0; display: inline-flex; vertical-align: middle; }
.fxd-ticket thead th .fxd-cnt { display: block; font-weight: var(--fw-normal); }
.fxd-ticket td { font-size: var(--text-sm); color: var(--color-text); overflow-wrap: anywhere; }
.fxd-ticket td small { display: block; font-size: var(--text-3xs); color: var(--color-text-subtle); margin-top: 1px; }
.fxd-ticket tbody tr:last-child th, .fxd-ticket tbody tr:last-child td { border-bottom: none; }
/* 約定レートの行は主役（建てた値と決済した値を見比べる行） */
.fxd-ticket tr.fxd-rate td { font-size: var(--text-base); font-weight: var(--fw-semibold); }
/* 「いま」の列は確定した値ではない＝地の色を変えて区別する */
.fxd-ticket thead th.now { color: var(--color-primary); }
.fxd-tbl td small.up { color: var(--color-success-text); }
.fxd-tbl td small.down { color: var(--color-danger-text); }
.fxd-tbl td.r small { display: block; }
@media (max-width: 480px) {
  .fxd-ticket th, .fxd-ticket td { padding: 6px; }
}

/* 共通の表の見出しの装飾（グラデーション・スティッキー）を取引票では打ち消す */
#fx-detail-modal .fxd-ticket th, #fx-detail-modal .fxd-tbl th { background: none !important; position: static; box-shadow: none; }
.fxd-ticket .fxd-acts-row td { padding-top: 8px; border-bottom: none; }
.fxd-ticket .fxd-acts-row .fxd-acts { margin-left: 0; flex-wrap: wrap; }
/* 長い注文番号・注記は列の中で折り返す（3列の狭い画面で隣の列にはみ出していた） */
.fxd-ticket td, .fxd-ticket td small, .fxd-ticket .fxd-mono { white-space: normal; word-break: break-all; overflow-wrap: anywhere; }
.fxd-ticket col.fxd-lc { width: 96px; }
@media (max-width: 480px) { .fxd-ticket col.fxd-lc { width: 58px; } }


/* ── 結び付け待ちの決済（約定メールから入った決済）── 投信の「確認待ち」と同じ琥珀の札 */
.fxp-card {
  margin: 0 0 14px; padding: 12px 16px; border-radius: var(--radius-lg);
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: linear-gradient(180deg, rgba(245,158,11,0.06), var(--color-surface) 70%);
}
.fxp-t { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-text); }
.fxp-d { margin-top: 2px; font-size: var(--text-2xs); color: var(--color-text-muted); }
.fxp-row {
  display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--color-border);
  font-size: var(--text-sm); font-variant-numeric: tabular-nums;
}
.fxp-dt { color: var(--color-text-muted); font-size: var(--text-xs); }
.fxp-n { color: var(--color-text); }
.fxp-n.b { font-weight: var(--fw-bold); }
.fxp-o { font-size: var(--text-2xs); color: var(--color-text-subtle); }
.fxp-sp { flex: 1; }
.fxp-btn { padding: 4px 14px; font-size: var(--text-xs); }

/* 結び付けの候補（1つ選ぶ） */
.fxl-q { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-text); }
.fxl-cands { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.fxl-cand {
  display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 1.2fr; align-items: center; gap: 8px;
  width: 100%; padding: 9px 12px; cursor: pointer; text-align: left;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
  font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.fxl-cand:hover { border-color: var(--color-primary); }
.fxl-cand:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-primary-light); border-color: var(--color-primary); }
.fxl-cand.on { border-color: var(--color-primary); background: var(--color-primary-light); box-shadow: inset 0 0 0 1px var(--color-primary); }
.fxl-cand b { color: var(--color-text); font-weight: var(--fw-semibold); }
.fxl-c1 em { display: block; font-style: normal; font-size: var(--text-3xs); color: var(--color-warning-text); }
.fxl-c3 { text-align: right; }
.fxl-c3 b { display: block; font-size: var(--text-sm); }
.fxl-c3.up, .fxl-c3.up b { color: var(--color-success-text); }
.fxl-c3.down, .fxl-c3.down b { color: var(--color-danger-text); }
@media (max-width: 480px) { .fxl-cand { grid-template-columns: 1fr 1fr; } .fxl-c3 { text-align: left; } }
.fxl-new { grid-template-columns: auto 1fr; }
.fxl-new .fxl-wide { color: var(--color-text-muted); }
.fxl-sep { margin: 6px 0 0; font-size: var(--text-2xs); color: var(--color-text-muted); }

/* ── 取引詳細の取引票：見出し・「⋯」メニュー ── */
.fxd-colh { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.fxd-colt { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.fxd-colt small { flex-basis: 100%; font-size: var(--text-3xs); font-weight: var(--fw-normal); color: var(--color-text-subtle); }
.fxd-more {
  flex-shrink: 0; width: 26px; height: 22px; margin-top: -2px; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: none;
  color: var(--color-text-muted); font-size: var(--text-base); line-height: 1; letter-spacing: 0.05em;
}
.fxd-more:hover, .fxd-more[aria-expanded="true"] { border-color: var(--color-border); background: var(--color-bg); color: var(--color-text); }
.fxd-more:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-primary-light); }
.fxd-menu {
  position: fixed; z-index: 2400; min-width: 190px; padding: 4px;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}
.fxd-menu button {
  display: block; width: 100%; padding: 7px 10px; text-align: left; cursor: pointer;
  border: none; background: none; border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--color-text);
}
.fxd-menu button small { display: block; margin-top: 1px; font-size: var(--text-3xs); color: var(--color-text-subtle); }
.fxd-menu button:hover, .fxd-menu button:focus-visible { background: var(--color-bg); outline: none; }
.fxd-menu button.danger { color: var(--color-danger-text); }
.fxd-menu button.danger:hover, .fxd-menu button.danger:focus-visible { background: var(--color-danger-light); }
.fxd-menu-sep { height: 1px; margin: 4px 2px; background: var(--color-border); }

/* 値幅の矢印（エントリー → 決済）。線と矢じりを結果の色で、真ん中に pips の札 */
.fxd-ticket col.fxd-vc { width: 160px; }   /* 矢印がある時は値の列を絞り、残りを矢印に＝建値と決済値がつながって見える */
.fxd-ticket col.fxd-midc { width: auto; }
.fxd-ticket .fxd-mid { padding-left: 0 !important; padding-right: 8px !important; }
.fxd-flow { position: relative; display: flex; align-items: center; justify-content: center; height: 24px; --flow: var(--color-text-muted); }
.fxd-flow.up { --flow: var(--color-success); }
.fxd-flow.down { --flow: var(--color-danger); }
.fxd-flow::before {   /* 線 */
  content: ""; position: absolute; left: 0; right: 6px; top: 50%; height: 2px;
  background: var(--flow); opacity: 0.55; border-radius: 1px;
}
.fxd-flow::after {    /* 矢じり */
  content: ""; position: absolute; right: 0; top: calc(50% - 5px);
  border-left: 7px solid var(--flow); border-top: 5px solid transparent; border-bottom: 5px solid transparent; opacity: 0.8;
}
.fxd-flow span {
  position: relative; z-index: 1; padding: 1px 8px; border-radius: var(--radius-pill, 999px);
  font-size: var(--text-2xs) !important; font-weight: var(--fw-bold); white-space: nowrap;
  background: var(--color-surface); border: 1px solid var(--flow); color: var(--flow);
}
.fxd-flow.up span { color: var(--color-success-text); }
.fxd-flow.down span { color: var(--color-danger-text); }
.fxd-flow span small { display: inline; margin-left: 3px; font-weight: var(--fw-normal); font-size: var(--text-3xs); }
@media (max-width: 480px) { .fxd-ticket col.fxd-vc { width: auto; } .fxd-ticket col.fxd-midc { width: 84px; } .fxd-flow span { padding: 1px 5px; font-size: var(--text-3xs) !important; } }

/* 約定一覧の状態の印（まだ終わっていないものだけ）。取引詳細の「未決済」「一部決済」と同じ琥珀 */
.fx-tr-state {
  display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: var(--radius-pill, 999px);
  font-size: var(--text-3xs); font-weight: var(--fw-semibold); line-height: 1.7;
  color: var(--color-warning-text); background: rgba(245, 158, 11, 0.12);
}

/* 約定一覧も行そのものが詳細への入口（ポジション照会と同じ）。注文番号は控えめな文字 */
#fx-tr-tbody tr.fx-tr-row { cursor: pointer; }
#fx-tr-tbody tr.fx-tr-row:hover td, #fx-tr-tbody tr.fx-tr-row:focus-visible td { background: var(--color-primary-light); }
#fx-tr-tbody tr.fx-tr-row:focus-visible { outline: none; }
.fx-tr-order { font-size: var(--text-2xs); color: var(--color-text-subtle); white-space: nowrap; letter-spacing: 0.01em; }

/* アラートと資金管理の一覧も、行そのものが編集の入口（ポジション照会・約定一覧と同じ） */
#fx-al-tbody tr.fx-al-row, #fx-cf-tbody tr.fx-cf-row { cursor: pointer; }
#fx-al-tbody tr.fx-al-row:hover td, #fx-al-tbody tr.fx-al-row:focus-visible td,
#fx-cf-tbody tr.fx-cf-row:hover td, #fx-cf-tbody tr.fx-cf-row:focus-visible td { background: var(--color-primary-light); }
#fx-al-tbody tr.fx-al-row:focus-visible, #fx-cf-tbody tr.fx-cf-row:focus-visible { outline: none; }
.fx-cfdir .fxc-seg-btn.active[data-seg-val="IN"] { color: #2563eb; }
.fx-cfdir .fxc-seg-btn.active[data-seg-val="OUT"] { color: var(--color-warning-text); }