/* 定期の支払い › 一覧（js/recurring-tab.js） */

/* ============================================================
   定期の支払い
   ============================================================ */
#recurringPanel .rec-table td, #recurringPanel .rec-table th { font-variant-numeric: tabular-nums; vertical-align: middle; }
.rec-name { font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--color-text); display: flex; align-items: center; gap: 8px; }
.rec-meta { font-size: var(--text-2xs); color: var(--color-text-subtle); margin-top: 1px; }
.rec-badge { font-size: var(--text-3xs); font-weight: var(--fw-bold); padding: 1px 8px; border-radius: var(--radius-pill); white-space: nowrap; }
.rec-active { background: rgba(16,185,129,0.12); color: var(--color-success-text); }
.rec-new { background: rgba(75,124,243,0.12); color: #3b5bdb; }
.rec-up { background: rgba(239,68,68,0.12); color: var(--color-danger-text); }
.rec-down { background: rgba(16,185,129,0.12); color: var(--color-success-text); }
.rec-cancel { background: var(--color-bg); color: var(--color-text-subtle); }
.rec-row-cancel { opacity: 0.6; }
.rec-price-up { color: var(--color-danger-text); font-size: var(--text-2xs); font-weight: var(--fw-semibold); margin-left: 4px; }
.rec-price-down { color: var(--color-success-text); font-size: var(--text-2xs); font-weight: var(--fw-semibold); margin-left: 4px; }
.rec-diffs { display: flex; justify-content: flex-end; gap: 12px; margin-top: 3px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.rec-diffs .rec-price-up, .rec-diffs .rec-price-down { margin-left: 0; }
.rec-flat { font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--color-text-subtle); }
/* 次回・最終支払の主役（近さ）。7日以内だけ色を持たせる＝毎月のものは常に30日以内に入るので、
   広げると全部が色付きになって意味を失う。以前の「まもなく」の札は主役の言葉と重なるのでやめた */
.rec-when { font-weight: var(--fw-semibold); color: var(--color-text); }
.rec-near { color: var(--color-warning-text); }
.rec-late { color: var(--color-danger-text); font-weight: var(--fw-semibold); }
/* 予定（定義どおり）と見込み（過去の傾向）の別。見込みは破線で「確かではない」を形で言う */
.rec-src { font-size: var(--text-3xs); padding: 0 5px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-muted); margin-left: 2px; }
.rec-src--est { border-style: dashed; color: var(--color-text-subtle); }
/* 周期は額の単位として書く（¥1,081/月・¥5,900/年・¥33,000×年4回）＝札にすると状態の札と
   見分けが付かず、半分以上が月次なので全行に同じ札が並ぶ。**毎月のものは淡く、毎月でないものは
   色で目に留める**＝ぱっと見で分けたいのは「いつも来るもの」と「たまに来て備えるもの」 */
.rec-unit { font-size: var(--text-2xs); color: var(--color-text-subtle); margin-left: 2px; }
.rec-unit--off { color: var(--color-primary); font-weight: var(--fw-semibold); }
/* 毎月ではない行の印＝左端の棒（単位 .rec-unit--off と同じ色）。行の地は塗らない＝状態の色
   （未計上・値上がり）と混ざるため。棒は1列目の内側に引く＝tr には境界線が効かない */
#recurringPanel tr.rec-row-off > td:first-child { box-shadow: inset 3px 0 0 var(--color-primary); }
.rec-sort { margin-left: auto; }
/* ============================================================
   汎用オートコンプリート（fieldCombo）: 定期の支払いの追加・お店/キーワードフィルタで共用
   ============================================================ */
/* アイコン付き入力ボックス（任意。定期の支払いの追加で使用） */
/* 検索と並び順の行は**表の上にくっつける**（下寄せ・下の余白を詰める）＝表を操作する道具なので、
   上の帯（月額の合計）より表の側に属して見えるようにする */
.rec-add { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 20px 0 8px; }
.fc-field { display: flex; align-items: center; gap: 9px; flex: 1 1 320px; max-width: 440px;
  padding: 10px 14px; background: var(--color-surface); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl); transition: border-color .15s, box-shadow .15s; }
.fc-field:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent); }
.fc-field-ico { color: var(--color-text-subtle); flex-shrink: 0; }
.fc-field:focus-within .fc-field-ico { color: var(--color-primary); }
.fc-field input { flex: 1; border: none; outline: none; background: transparent; font-size: var(--text-base); color: var(--color-text); padding: 0; }
.fc-field input::placeholder { color: var(--color-text-subtle); }
.rec-del-btn { background: none; border: none; cursor: pointer; font-size: var(--text-base); opacity: 0.55; padding: 2px 6px; }
.rec-del-btn:hover { opacity: 1; }
.rec-toast-undo { background: none; border: none; cursor: pointer; font-weight: var(--fw-bold); color: var(--color-primary);
  text-decoration: underline; font-size: var(--text-xs); padding: 0 2px; margin-left: 4px; }