/* 🕒未確認（表のビュー） */

/* ── 未確認タブ（グリッド／手入力ハブ）─────────────────────────────── */
.ug-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 10px; flex-wrap: wrap; }
.ug-head-inc { margin-top: 22px; }
.ug-head h3 { margin: 0; font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--color-text); }
.ug-count { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-subtle); margin-left: 4px; }
.ug-req { color: #fca5a5; }
.ug-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ug-new-btn { border: 1px solid var(--color-primary-border); background: var(--color-primary-light); color: var(--color-primary);
  border-radius: var(--radius-pill); padding: 6px 14px; font-size: var(--text-xs); font-weight: var(--fw-bold); cursor: pointer; font-family: var(--font); white-space: nowrap; }
.ug-new-btn:hover { background: color-mix(in srgb, var(--color-primary) 20%, transparent); }
.ug-confirm-all { border: 1px solid color-mix(in srgb, var(--color-success) 40%, transparent); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success-text);
  padding: 6px 14px; font-size: var(--text-xs); font-weight: var(--fw-bold); cursor: pointer; font-family: var(--font); white-space: nowrap; }
.ug-confirm-all:hover:not(:disabled) { background: var(--color-success); color: var(--color-text-on-accent); }
.ug-confirm-all:disabled { opacity: .5; cursor: default; }
/* 未カテゴリのみトグル（スイッチ） */
.ug-toggle { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); border-radius: var(--radius-pill); padding: 5px 12px 5px 8px; font-size: var(--text-xs); font-weight: var(--fw-semibold); cursor: pointer; font-family: var(--font); }
.ug-toggle-track { width: 26px; height: 15px; border-radius: var(--radius-pill); background: var(--color-border); position: relative; transition: background .15s; flex: none; }
.ug-toggle-knob { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: var(--radius-circle); background: var(--color-surface); box-shadow: var(--shadow-xs); transition: left .15s; }
.ug-toggle.on { color: var(--color-primary); border-color: var(--color-primary-border); }
.ug-toggle.on .ug-toggle-track { background: var(--color-primary); }
.ug-toggle.on .ug-toggle-knob { left: 13px; }

.ug-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  overflow-x: auto; box-shadow: var(--shadow-xs); }
.ug { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
/* **読む表は塗らない・打つグリッドは塗る**（T-03）。セルが白い `<input>`（`.ug-in`）なので、
   見出しまで白にすると「どこからが入力欄か」の境目が消える。淡い面＋同じ濃紺の罫で、
   読む表と同じ語彙のまま役割の差だけを残す。スティッキーなので面の色は必須。 */
.ug thead th { position: sticky; top: 0; z-index: 2; color: var(--color-th-fg);
  background: linear-gradient(180deg, var(--color-th-tint-2) 0%, var(--color-th-field) 100%);
  font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: 0.035em;
  text-align: left; padding: 9px 8px; white-space: nowrap; border-bottom: 1px solid var(--color-th-edge); }
.ug thead th.r { text-align: right; }
.ug tbody td { border-top: 1px solid var(--color-row-line); padding: 3px 4px; vertical-align: top; }   /* 上寄せ＝備考が複数行でも各欄が上に揃う */
.ug tbody tr:hover { background: var(--color-row-hover); }
/* 確定チェックは左、保存＋削除は右にまとめる（主操作=左／補助=右）。保存は編集時のみ表示 */
.ug-lead { white-space: nowrap; text-align: center; padding: 7px 4px 0 !important; }
/* カスタムチェック＝「チェック済みを一括確定」ボタンと同じ緑のあっさりトーン（角丸□→緑塗り＋白✓） */
.ug-check, .ug-th-check input {
  appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin: 0; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--color-success) 45%, var(--color-border));
  border-radius: var(--radius-sm); background: var(--color-surface); display: inline-block; vertical-align: middle;
  position: relative; transition: background .12s, border-color .12s, box-shadow .12s; }
.ug-check:hover, .ug-th-check input:hover { border-color: var(--color-success-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 14%, transparent); }
.ug-check:checked, .ug-th-check input:checked { background: var(--color-success); border-color: var(--color-success-text); }
.ug-check:checked::after, .ug-th-check input:checked::after {
  content: ""; position: absolute; left: 4.5px; top: 1px; width: 4.5px; height: 9px;
  border: solid var(--color-surface); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ug-th-check { text-align: center !important; }
.ug-th-check input { border-color: rgba(255,255,255,.6); background: transparent; }
/* 一部の行だけチェック（ヘッダの全選択のみ）＝横棒で「混在」を示す */
.ug-th-check input:indeterminate { background: var(--color-success); border-color: var(--color-success-text); }
.ug-th-check input:indeterminate::after {
  content: ""; position: absolute; left: 3px; top: 6.5px; width: 8px; height: 2px;
  background: var(--color-surface); border-radius: var(--radius-xs); }
tr.ug-checked { background: color-mix(in srgb, var(--color-success) 8%, transparent); }
tr.ug-checked:hover { background: color-mix(in srgb, var(--color-success) 13%, transparent); }
/* 月グループ見出し（クリックで折りたたみ。小計付き） */
.ug tbody tr.ug-group td { background: color-mix(in srgb, var(--color-ink) 6%, var(--color-bg));
  border-top: 1px solid var(--color-border); font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--color-text-muted);
  padding: 6px 10px; cursor: pointer; user-select: none; }
.ug tbody tr.ug-group:hover td { background: color-mix(in srgb, var(--color-ink) 11%, var(--color-bg)); }
/* 開閉は**見出しの右端の丸**（マスタ管理の `.mst-group-head` と同じ形）。
   左に置くと行頭記号に見えてしまうのが、そもそも「この点は要るのか」と感じる原因。
   丸は受け皿、シェブロンは ::after の線で描く。 */
.ug tbody tr.ug-group td { position: relative; padding-right: 36px; }
.ug-group-caret {
  position: absolute; right: 8px; top: 50%; margin-top: -11px;
  width: 22px; height: 22px; border-radius: var(--radius-circle); font-size: 0;   /* ▾ の字は消して丸で言う */
  background: var(--color-surface); border: 1px solid var(--color-border);
  transition: background .15s, border-color .15s;
}
tr.ug-group:hover .ug-group-caret { border-color: var(--color-primary-border); background: var(--color-primary-light); }
.ug-group-caret::after {
  content: ""; position: absolute; right: 7px; top: 50%;
  width: 6px; height: 6px;
  border-right: 1.7px solid var(--color-text-muted); border-bottom: 1.7px solid var(--color-text-muted);
  transform: translateY(-5px) rotate(45deg);
  transition: transform .18s ease, border-color .15s;
}
tr.ug-group:hover .ug-group-caret::after { border-color: var(--color-primary); }
tr.ug-group.ug-collapsed .ug-group-caret::after { transform: translateY(-3px) translateX(-1.5px) rotate(-45deg); }
.ug-group-sub { font-weight: var(--fw-semibold); color: var(--color-text-subtle); margin-left: 6px; font-variant-numeric: tabular-nums; }
.ug-save-btn { display: none; margin-right: 4px; }
.ug-dirty .ug-save-btn { display: inline-block; }
.ug-row-need { box-shadow: inset 3px 0 0 var(--color-warning); }
/* 預かり（返金待ち）＝**片付ける対象ではない行**。警告色は使わず、行そのものを一段
   静かにして「ここは催促していない」と見せる（未カテゴリの警告は付かない）。 */
.ug-hold { background: color-mix(in srgb, var(--color-text-subtle) 7%, transparent); }
.ug-hold .ug-in, .ug-hold .ug-note { color: var(--color-text-muted); }
.ug-holdcell { text-align: center; }
.ug-hold-btn { border: 1px dashed var(--color-border); background: transparent; color: var(--color-text-subtle);
  border-radius: var(--radius-pill); padding: 3px 8px; font-size: var(--text-2xs); font-weight: var(--fw-bold);
  cursor: pointer; font-family: var(--font); line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ug-hold-btn:hover { border-style: solid; color: var(--color-text); }
.ug-hold-btn.on { border-style: solid; border-color: var(--color-primary-border);
  background: var(--color-primary-light); color: var(--color-primary); }
.ug-count-hold { font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.ug col.c-st { width: 30px; }
.ug col.c-date { width: 122px; } .ug col.c-amt { width: 92px; } .ug col.c-cat { width: 132px; }
.ug col.c-mp { width: 120px; } .ug col.c-shop { width: 132px; } .ug col.c-note { width: 210px; }
.ug col.c-name { width: 160px; } .ug col.c-lead { width: 34px; } .ug col.c-hold { width: 84px; } .ug col.c-ratio { width: 64px; } .ug col.c-url { width: 120px; } .ug col.c-act { width: 118px; }
/* 収入は 日付・項目名・金額 しか持たないが、**列組みは支出と同じ**にして
   無い項目を1つの空セルに畳む＝上下の表で同じ項目が同じ位置に来る。
   3列だけにすると幅が引き伸ばされ、日付のピッカーが日付から273px離れていた。 */
.ug-void { background: repeating-linear-gradient(135deg, transparent, transparent 7px, var(--color-bg) 7px, var(--color-bg) 8px); }
.ug-void-th { font-weight: var(--fw-normal) !important; opacity: 0.6; text-align: center !important; }

.ug-in { border: 1px solid transparent; background: transparent; width: 100%; box-sizing: border-box; font-family: var(--font);
  font-size: var(--text-sm); color: var(--color-text); padding: 5px 7px; border-radius: var(--radius-md); }
.ug-in:hover { background: var(--color-bg); }
.ug-in:focus { background: var(--color-surface); border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-light); outline: none; }
.ug-in.r { text-align: right; font-variant-numeric: tabular-nums; }
.ug-in.ug-cat-empty::placeholder { color: var(--color-warning-text); font-weight: var(--fw-semibold); opacity: 1; }
/* 預かりの行はカテゴリを求めていない＝「（選択）」を警告色で出さない */
.ug-hold .ug-in.ug-cat-empty::placeholder { color: var(--color-text-subtle); font-weight: var(--fw-medium); }
/* URLセル＝入力欄＋別タブ↗リンク（値がある時だけ表示） */
.ug-url-cell { display: flex; align-items: center; gap: 1px; }
.ug-url-cell .ug-in { flex: 1 1 auto; min-width: 0; }
.ug-url-link { flex: 0 0 auto; color: var(--color-primary); text-decoration: none; font-size: var(--text-sm); line-height: 1;
  padding: 3px 4px; border-radius: var(--radius-sm); }
.ug-url-link:hover { background: var(--color-primary-light); }
.ug-url-link[hidden] { display: none; }
.ug-note { border: 1px solid transparent; background: transparent; width: 100%; box-sizing: border-box; font-family: var(--font);
  font-size: var(--text-xs); color: var(--color-text); padding: 5px 7px; border-radius: var(--radius-md); white-space: pre-wrap; resize: none;
  line-height: 1.35; min-height: 30px; overflow: hidden; }
.ug-note:hover { background: var(--color-bg); }
.ug-note:focus { background: var(--color-surface); border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-light); outline: none; }
/* 2モードの見た目：ナビ＝選択セル（塗り＋太い枠・キャレット非表示、全選択はしない）／編集＝白地＋キャレット */
.ug-in.ug-nav, .ug-note.ug-nav { background: color-mix(in srgb, var(--color-primary) 15%, transparent); border-color: transparent;
  box-shadow: inset 0 0 0 2px var(--color-primary); caret-color: transparent; outline: none; }
.ug-in.ug-edit, .ug-note.ug-edit { background: var(--color-surface); border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light); caret-color: auto; outline: none; }
.ug-in::selection, .ug-note::selection { background: color-mix(in srgb, var(--color-primary) 30%, transparent); }
.ug .fp-trigger { width: 100%; box-sizing: border-box; border-color: transparent; background: transparent; box-shadow: none;
  padding: 5px 7px; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.ug .fp-trigger:hover { background: var(--color-bg); border-color: transparent; color: var(--color-text); }
.ug .fp-trigger:focus, .ug .fp-trigger.ug-nav { background: var(--color-primary-light); box-shadow: inset 0 0 0 2px var(--color-primary); color: var(--color-text); outline: none; }
/* 保存・削除を統一チップに（同形＝色で区別）。確定はチェック＋ヘッダの一括確定ボタンへ移行 */
.ug-act { text-align: right; white-space: nowrap; padding-right: 10px !important; }
.ug-chip { border: 1px solid transparent; border-radius: var(--radius-md); padding: 4px 11px; margin-top: 3px;
  font-size: var(--text-xs); font-weight: var(--fw-bold); cursor: pointer; font-family: var(--font); white-space: nowrap; background: transparent; line-height: 1.25; }
.ug-chip-save { border-color: var(--color-primary-border); background: var(--color-primary-light); color: var(--color-primary); }
.ug-chip-save:hover { background: var(--color-primary); color: var(--color-text-on-accent); }
.ug-chip-del { border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); color: var(--color-danger-text); }
.ug-chip-del:hover { background: var(--color-danger); color: var(--color-text-on-accent); }
.ug-chip-discard { border-color: var(--color-border); color: var(--color-text-muted); }
.ug-chip-discard:hover { background: var(--color-text-muted); color: var(--color-text-on-accent); }
/* 変更を保存（編集がある時だけ活性） */
.ug-saveall { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted);
  border-radius: var(--radius-pill); padding: 6px 14px; font-size: var(--text-xs); font-weight: var(--fw-bold); cursor: pointer; font-family: var(--font); white-space: nowrap; }
.ug-saveall.has { border-color: var(--color-primary-border); background: var(--color-primary-light); color: var(--color-primary); }
.ug-saveall:disabled { opacity: .5; cursor: default; }
.ug-hint { font-size: var(--text-2xs); color: var(--color-text-subtle); margin: 10px 2px 0; }
@keyframes ug-flash { from { background: color-mix(in srgb, var(--color-success) 24%, transparent); } to { background: transparent; } }
.ug-saved td { animation: ug-flash .9s ease; }
.ug-removing td { opacity: .35; transition: opacity .15s; }