/* 支出・収入タブ */

/* カテゴリ色ドット */
.sp-cat-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-circle); margin-right: 6px; vertical-align: middle; flex-shrink: 0; }
/* 金額インライン横棒 */
#app .balance-table td.tr, #app .balance-table th { font-variant-numeric: tabular-nums; }
/* 取引一覧の余った幅は**金額の列に吸わせる**。文字の列に配っても日付が626pxになる
   だけで何も増えないが、金額のセルは中に横棒を持っているので、幅がそのまま
   「その行がどれくらい大きいか」になる（収入は3列しか無く、20%しか使っていなかった）。 */
#tx-table { table-layout: fixed; width: 100%; }
#tx-table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* **操作セルだけは切らない**＝✏️編集/📋複製/🗑削除は `right:100%` でセルの外（左）へ
   滑り出すオーバーレイなので、はみ出しを隠すと押せなくなる（実際に一度そうなった）。 */
#tx-table td.row-act-cell { overflow: visible; }
/* 余りを金額へ回すぶん、長い項目名は列を押し広げず省略する（ツールチップは持たない＝
   項目名は行の主役なので、切れたら幅を足すのではなく列設定で他を消す） */
#tx-table td.sp-name-cell { max-width: none; }   /* 幅は colgroup が決める */

.sp-amt-cell { position: relative; }
.sp-amt-cell .sp-amt-bar {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  height: 60%; max-width: calc(100% - 16px); border-radius: var(--radius-xs);
  background: rgba(52, 152, 219, 0.16); z-index: 0;
}
.sp-amt-cell span:last-child { position: relative; z-index: 1; }
.sp-date { white-space: nowrap; }

/* 異常支出アラート カード */
.anom-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.anom-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-warning); border-radius: var(--radius-lg);
  padding: 12px 14px; box-shadow: var(--shadow-xs);
}
.anom-card.anom-high { border-left-color: var(--color-danger-text); }
.anom-card.anom-mid { border-left-color: #f97316; }
.anom-card.anom-low { border-left-color: var(--color-warning-text); }
.anom-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.anom-cat { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text); display: flex; align-items: center; }
.anom-ym { font-size: var(--text-2xs); color: var(--color-text-subtle); margin-left: auto; font-variant-numeric: tabular-nums; }
.anom-sigma { font-size: var(--text-2xs); font-weight: var(--fw-bold); color: var(--color-danger-text); background: rgba(239,68,68,0.1); border-radius: var(--radius-sm); padding: 1px 6px; }
.anom-amt { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--color-danger-text); font-variant-numeric: tabular-nums; }
.anom-ratio { font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--color-warning-text); margin-left: 8px; }
.anom-bar { position: relative; height: 7px; background: var(--color-bg); border-radius: var(--radius-sm); overflow: hidden; margin: 8px 0 5px; }
.anom-bar i { display: block; height: 100%; background: linear-gradient(90deg, rgba(239,68,68,0.5), var(--color-danger)); border-radius: var(--radius-sm); }
.anom-mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--color-text); z-index: 1; }
.anom-meta { font-size: var(--text-2xs); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }