/* 固定費の自動登録（マスタ管理内・js/fixedcost-tab.js） */

/* ══ 固定費 自動登録（マスタ管理タブ内セクション）══
   クラスは fxc-* プレフィックス。fc-* はオートコンプリート(fieldCombo)が使用済みのため衝突回避。 */

/* ── 一覧 ── */
.fxc-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fxc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
/* 行の左端の色帯。支払方法の種別色をカードの上端から**行の左端へ**移したもの＝
   グループを畳んでいても、行を見れば種別が分かる。固定費・カテゴリの行と同じ流儀。
   **`.mst-row` / `.fxc-row` の border 指定より後ろに置くこと**（border の一括指定に
   負けて左端だけ元の色に戻る）。 */
.mst-row--stripe, .fxc-row.mst-row--stripe { border-left: 3px solid var(--row-color, var(--color-border)); }

/* 名前のあとにメタを流す行（支払方法）。残り幅を取るのは名前ではなくメタのほう */
.mst-row--meta .mst-row-name { flex: 0 1 auto; }
/* 行の中に敷く構成比バー（カテゴリ＝支出件数）。行の8割が空いていたぶんを
   「どれだけ使われているか」に変える。**背景に薄く敷くのではなく実体のあるバー**
   （数字の裏に薄い塗りを置くとどちらも読めない＝全銘柄テーブルと同じ判断）。 */
/* バーの起点を揃える＝名前の長さで開始位置がずれると長さを見比べられない。
   カテゴリ名で一番長いのが6文字なので、名前側に固定の幅を与える。 */
.mst-row:has(> .mst-usebar) .mst-row-name { flex: 0 0 7.5em; }
.mst-usebar {
  flex: 1 1 auto;
  min-width: 40px;
  height: 5px;
  border-radius: var(--radius-xs);
  background: var(--color-bg);
  overflow: hidden;
}
.mst-usebar i {
  display: block;
  height: 100%;
  border-radius: var(--radius-xs);
  opacity: 0.75;
}
.mst-row--paused .mst-usebar i { opacity: 0.35; }

/* 複数列で幅が足りないとき、**先に縮めるのはメタ**（締め日/引落日）。
   ピルは「支出 1件・紐づ…」のように切れると意味が変わるので縮めない。 */
.mst-row--meta .mst-pill { flex-shrink: 0; }
.mst-row-meta {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fxc-row:hover {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.fxc-row--off {
  opacity: 0.5;
}
/* 種別バッジ */
.fxc-badge {
  flex-shrink: 0;
  width: 40px;
  text-align: center;
  padding: 3px 0;
  border-radius: var(--radius-md);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
}
.fxc-badge--expense { background: rgba(239, 68, 68, 0.1); color: var(--color-danger-text); }
.fxc-badge--income { background: rgba(16, 185, 129, 0.12); color: var(--color-success-text); }
.fxc-row--income .fxc-row-amount { color: var(--color-success-text); }
.fxc-row-main {
  flex: 1;
  min-width: 0;
}
.fxc-row-title {
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fxc-row-sched {
  margin-top: 2px;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fxc-row-sched .fxc-dot {
  color: var(--color-border);
  margin: 0 6px;
}
.fxc-range { color: var(--color-text-subtle); }
.fxc-note { color: var(--color-text-subtle); font-style: italic; }
.fxc-row-amount {
  flex-shrink: 0;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.fxc-row-amount .fxc-amt-unit {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-subtle);
  margin-left: 1px;
}

.fxc-group { margin-bottom: 18px; }
.fxc-group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 0 4px 8px; margin-bottom: 8px;
  border-bottom: 2px solid var(--color-border);
}
.fxc-group-name { font-size: var(--text-xs); font-weight: var(--fw-bold); }
.fxc-group-head--expense .fxc-group-name { color: var(--color-danger-text); }
.fxc-group-head--income .fxc-group-name { color: var(--color-success-text); }
.fxc-group-count {
  font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--color-text-muted);
  background: var(--color-bg); border-radius: var(--radius-pill); padding: 1px 9px;
}
.fxc-group-spacer { flex: 1; }
.fxc-group-sum { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--color-text);
  font-variant-numeric: tabular-nums; }

/* 行のドラッグ並び替え */
.fxc-drag {
  flex-shrink: 0; color: var(--color-text-subtle); font-size: var(--text-xs); letter-spacing: -2px;
  cursor: grab; user-select: none; opacity: 0; transition: opacity 0.15s;
}
.fxc-row:hover .fxc-drag { opacity: 1; }
.fxc-row--dragging { opacity: 0.4; }
.fxc-row--over { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }

/* スキップ ボタン（未登録/予定の行に添える） */
.fxc-skip {
  flex-shrink: 0; padding: 3px 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); font-size: var(--text-2xs); font-weight: var(--fw-semibold); cursor: pointer;
  transition: all 0.15s;
}
.fxc-skip:hover { border-color: var(--color-primary-border); color: var(--color-primary); }

/* 今月サマリの月ナビ（◀ YYYY-MM ▶ 今月へ） */
.fxc-mnav { display: inline-flex; align-items: center; gap: 6px; }
.fxc-mnav-btn {
  width: 24px; height: 24px; padding: 0;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text-muted);
  font-size: var(--text-3xs); line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.fxc-mnav-btn:hover { border-color: var(--color-primary-border); color: var(--color-primary); }
.fxc-mnav-ym { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); min-width: 62px; text-align: center; }
.fxc-mnav-now {
  border: none; background: none; color: var(--color-primary);
  font-size: var(--text-2xs); font-weight: var(--fw-semibold); cursor: pointer; padding: 2px 4px;
}
.fxc-mnav-now:hover { text-decoration: underline; }

/* 署名要素: ライブ・スケジュールプレビュー */
.fxc-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-xs); color: var(--color-text); line-height: 1.4;
}
.fxc-preview-ico { flex-shrink: 0; font-size: var(--text-md); }
.fxc-preview b { color: var(--color-primary); font-weight: var(--fw-bold); }
.fxc-preview .fxc-preview-muted { color: var(--color-text-muted); }

/* 詳細（折りたたみ） */
.fxc-details-toggle {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 0; background: none; border: none;
  color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--fw-semibold); cursor: pointer;
}
.fxc-details-toggle:hover { color: var(--color-primary); }
.fxc-details-chev { font-size: var(--text-3xs); transition: transform 0.18s; }
.fxc-details-toggle.open .fxc-details-chev { transform: rotate(90deg); }
.fxc-details-body { display: flex; flex-direction: column; gap: 14px; }

/* フッター: 有効トグル＋最終登録 */
.fxc-foot-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text); cursor: pointer;
}
.fxc-lastposted {
  font-size: var(--text-2xs); color: var(--color-text-subtle);
}

@media (max-width: 520px) {
  .fxc-grid--2, .fxc-grid--3 { grid-template-columns: 1fr; }
}