/* カード請求 */

/* ============================================================
   カード請求タブ — 次回引落（確定/見込みの2カラム）
   ============================================================ */
/* **`minmax(0, 1fr)` であること**＝素の `1fr` はトラックの下限が中身の min-content に
   なるので、日付＋カード名＋金額の1行が縮まずトラックごと画面外へ広がる */
.cb-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.cb-col { display: flex; flex-direction: column; gap: 6px; }
.cb-col-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 2px 5px; margin-bottom: 3px; border-bottom: 2px solid var(--color-border);
}
.cb-col-title { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-text); }
.cb-col-sub { font-size: var(--text-2xs); font-weight: var(--fw-normal); color: var(--color-text-subtle); margin-left: 6px; }
.cb-col-total { font-size: var(--text-md); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.cb-col-confirmed .cb-col-head { border-bottom-color: var(--color-primary-border); }
.cb-col-confirmed .cb-col-total { color: var(--color-text); }
.cb-col-open .cb-col-head { border-bottom-color: #f6d6a8; }
.cb-col-open .cb-col-total { color: var(--color-warning-text); }
.cb-empty { font-size: var(--text-xs); color: var(--color-text-subtle); padding: 10px 2px; }

.cb-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 7px 12px;
  transition: box-shadow 0.12s;
}
.cb-item:hover { box-shadow: var(--shadow-xs); }
.cb-item.cb-confirmed { border-left-color: var(--color-primary); }
.cb-item.cb-open { border-left-color: var(--color-warning-text); background: #fffdfa; }
.cb-date { text-align: center; min-width: 42px; flex-shrink: 0; }
.cb-date .cb-md { display: block; font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--color-text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cb-date .cb-wd { font-size: var(--text-3xs); color: var(--color-text-subtle); }
.cb-countdown {
  flex-shrink: 0; min-width: 56px; text-align: center;
  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: 2px 8px;
}
.cb-countdown.soon { color: var(--color-text-on-accent); background: var(--color-danger); }
.cb-main { flex: 1; min-width: 0; }
.cb-card { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-amount { flex-shrink: 0; font-size: var(--text-base); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; text-align: right; }
.cb-amount.cb-confirmed { color: var(--color-text); }
.cb-amount.cb-open { color: var(--color-warning-text); }

/* 確定と見込みを横に並べると狭い画面では両方潰れる＝縦に積む。
   ここも `minmax(0, 1fr)`（素の 1fr だとトラックが min-content まで広がる） */
@media (max-width: 768px) {
  .cb-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* 請求マトリクス: 数値の桁揃え＋ヒートマップセル */
/* 請求一覧は**横スクロールを出さない**＝窓に収まるぶんだけ描いて ◀▶ で送る
   （やることのタイムラインと同じ扱い。軸をどこまでも伸ばすと、いま何を見ているのかが
   掴みにくい）。ボタンはスクロールが要る時だけ出る。 */
#card-monthly-wrapper { overflow-x: hidden; }
.card-mx-nav {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 10px;
}
.card-mx-nav:empty { display: none; }
/* 送りのボタンは**表の左右の端**に置く＝進む向きと押す場所が一致する。
   ラベル付きで的を広げる（30px の丸を2つ左に固めていたときは押し分けにくかった）。 */
.card-mx-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 14px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text-muted);
  font-family: var(--font); font-size: var(--text-2xs); font-weight: var(--fw-semibold);
  cursor: pointer; transition: all 0.15s; flex: 0 0 auto;
}
.card-mx-btn:hover:not(:disabled) {
  border-color: var(--color-primary-border); background: var(--color-primary-light);
  color: var(--color-primary);
}
.card-mx-btn:disabled { opacity: 0.35; cursor: not-allowed; }
/* ラベルは左右のボタンの真ん中。1fr で挟むと中央に来る */
.card-mx-range {
  flex: 1 1 auto; text-align: center;
  font-size: var(--text-2xs); color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}
.card-mx-range b { color: var(--color-text); font-weight: var(--fw-bold); margin: 0 2px; }
.card-mx-range em { font-style: normal; margin-left: 10px; }
/* ← → でも送れることを示す。押せると分かっていないと誰も試さない */
.card-mx-keys {
  font-style: normal; margin-left: 10px; padding: 1px 7px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-size: var(--text-3xs); color: var(--color-text-subtle); background: var(--color-surface);
}
/* カード名の列は上限を決める＝一番長い名前に引きずられて420pxまで伸び、
   12ヶ月ぶんの列（86px×12）が入らなくなっていた。省略した名前は title で引ける。 */
#card-monthly-wrapper .balance-table td.cb-name {
  max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* カードの凡例は**棒とドーナツで1つ**。同じ9枚ぶんの凡例が両方に出ていて、
   合計171pxを食っていた（棒は canvas 260px のうち98pxが凡例で、本体は134px）。
   2枚は並んでいて色も並びも同じなので、上に1つ置けば両方の鍵になる。 */
.card-legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 0 2px var(--sp-3);
  font-size: var(--text-2xs); color: var(--color-text-muted);
}
.card-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.card-legend-item i { width: 10px; height: 10px; border-radius: var(--radius-xs); flex: 0 0 auto; }

#card-monthly-wrapper .balance-table td,
#card-monthly-wrapper .balance-table th { font-variant-numeric: tabular-nums; }
#card-monthly-wrapper .balance-table thead th { position: sticky; top: 0; z-index: 2; }
/* **横スクロールを無くしたので固定は要らない**（窓に収まるぶんだけ描く）。
   代わりに合計をカード名の隣へ置く＝月の列が12本あると右端まで視線が12個ぶん飛ぶ。 */
/* 解約済みのカードは過去の月にだけ出る＝見慣れない名前が並ぶ理由を行で言う */
.cb-retired {
  margin-left: 6px; font-size: var(--text-3xs); font-weight: var(--fw-bold);
  color: var(--color-text-subtle); background: var(--color-bg);
  border-radius: var(--radius-pill); padding: 1px 6px;
}
.card-mx .cb-total { font-weight: var(--fw-semibold); background: var(--color-bg); }
.card-mx thead th:nth-child(2), .card-mx tfoot td:nth-child(2) { background: var(--color-th-tint-2); }
.card-mx tfoot td:nth-child(2) { background: #eef1f7; }
.cb-heat { border-radius: var(--radius-xs); }

/* カード種別バッジ（請求テーブル等） */
.cb-type-badge { font-size: var(--text-3xs); font-weight: var(--fw-semibold); padding: 1px 5px; border-radius: var(--radius-xs); margin-left: 5px; vertical-align: middle; }
.cb-type-badge.CARD { color: #4338ca; background: rgba(79, 70, 229, 0.12); }
.cb-type-badge.DEBIT { color: #0e7490; background: rgba(14, 116, 144, 0.12); }
.cb-type-badge.PAY { color: var(--color-warning-text); background: rgba(245, 158, 11, 0.14); }

/* カード請求ヒーローの内訳（確定 / 締め途中の見込み） */
#card-hero:not(:empty) { margin-bottom: 14px; }
.ahero-bar .seg.cb-h-conf { background: #7fa9ff; }
.ahero-bar .seg.cb-h-open { background: #f0b27a; }
.ahero-legend .dot.cb-h-conf { background: #7fa9ff; }
.ahero-legend .dot.cb-h-open { background: #f0b27a; }

/* 請求が ¥0 のカードを畳んだ1行。名前は残すので情報は減らない */
.cb-zero {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 12px; border: 1px dashed var(--color-border); border-radius: var(--radius-md);
  font-size: var(--text-2xs); color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}
.cb-zero-n { font-weight: var(--fw-bold); color: var(--color-text-muted); flex-shrink: 0; }
.cb-zero-names { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-zero-amt { flex-shrink: 0; }