/* 🕒未確認「入力」ビュー（js/unconfirmed-mobile.js） */

/* ============================================================
   🕒未確認タブ「入力」ビュー（スマホ専用）
   ------------------------------------------------------------
   自動で入ってきた支出に、項目名・支払先・カテゴリを付けるだけの画面。
   **広い画面には出ない**（`uncSetView()` が幅で決める）ので、指で触る前提だけで作る:
     ・押せるものは最低 48px（iOS HIG 44pt / Material 48dp）
     ・入力欄は 16px 未満にしない（iOS が拡大してレイアウトが飛ぶ）
     ・主操作（保存／スキップ）は画面下に固定＝親指の届く場所に常にある
   確定ボタンは無い（確定はPCの表で）。
   ============================================================ */
#unc-input-body { max-width: 560px; }

/* スマホでは説明文もタブ見出しも出さない＝読むのが1回きりの文と、ページ上部の
   タブ（記録 › 未確認）がすでに出している名前で画面を食わない。 */
@media (max-width: 900px) {
  .unc-desc { display: none; }
}

.uim-top {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0 10px; position: sticky; top: 0; z-index: 3;
  background: var(--color-surface);   /* 貼り付く先は白いパネルの上＝地色を合わせる */
}
/* 件数は**2行の塊**にして重みを持たせる＝数字1つとボタンが離れて浮くと、間の空白（実測
   223px）だけが目に入る。左に読めるものがあると、右のボタンは操作として据わる。 */
.uim-count { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 4px; }
.uim-count b { font-size: var(--text-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.uim-count i { font-style: normal; font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-text-muted); }
.uim-count em {
  flex-basis: 100%; font-style: normal; font-size: var(--text-xs);
  color: var(--color-text-subtle); font-variant-numeric: tabular-nums;
}
.uim-topbtn {
  margin-inline-start: auto; min-height: 44px; padding: 0 18px;
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); border-radius: var(--radius-lg);
  font-size: var(--text-md); font-weight: var(--fw-bold); cursor: pointer; font-family: inherit;
}
.uim-prog { height: 4px; background: var(--color-border); border-radius: var(--radius-xs); }
.uim-prog i { display: block; height: 100%; background: var(--color-primary); border-radius: var(--radius-xs); }

/* 画面下に固定した操作ぶんの余白は**このビューが自分で持つ**。外の枠（.balance-panel の
   padding/margin と #main-content の padding で計 60px）が乗ると、最後の節と固定バーの
   間が実測 96px 空いて、カテゴリの下だけがぽっかりする。狭い画面ではこのビューしか
   出ないので、外の下余白は畳んでよい。 */
@media (max-width: 900px) {
  #unconfirmedPanel .balance-panel { padding-bottom: 0; margin-bottom: 0; }
}
.uim-body {
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px 0 calc(72px + env(safe-area-inset-bottom));
}

.uim-ev {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: 14px 16px;
}
.uim-ev-top { display: flex; align-items: baseline; gap: 8px; }
.uim-ev-d { font-size: var(--text-md); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.uim-ev-a {
  margin-inline-start: auto; font-size: var(--text-xl); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.uim-ev-m { margin-top: 5px; font-size: var(--text-sm); color: var(--color-text-muted); }
.uim-ev-raw {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--color-border);
  font-size: var(--text-md); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}
.uim-ev-raw span {
  display: block; font-size: var(--text-2xs); letter-spacing: .06em; color: var(--color-text-subtle);
  font-family: var(--font); margin-bottom: 3px;
}

.uim-f {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: 13px 15px 15px;
}
.uim-f h4 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 9px;
  font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--color-text-muted); letter-spacing: .04em;
}
.uim-need {
  font-size: var(--text-2xs); font-weight: var(--fw-bold); color: var(--color-warning-text);
  background: rgba(245, 158, 11, .14); border-radius: var(--radius-sm); padding: 2px 7px;
}
.uim-more {
  margin-inline-start: auto; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  color: var(--color-primary); border-radius: var(--radius-md);
  font-size: var(--text-xs); font-weight: var(--fw-bold); cursor: pointer; font-family: inherit;
}
.uim-in {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font-size: var(--text-md);                                   /* 16px 未満は iOS が拡大する */
  border: 1.5px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-text); font-family: inherit;
}
.uim-in:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* 支払先＝選択式（マスタに無い名前は保存時に黙って消えるので打たせない） */
.uim-pick {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 56px; padding: 12px 14px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--color-text);
  font-size: var(--text-md); font-weight: var(--fw-bold); text-align: start; cursor: pointer; font-family: inherit;
}
.uim-pick.empty { color: var(--color-text-subtle); font-weight: var(--fw-medium); }
/* 預かり（返金待ち）が付いている状態。付いていない時は普通の選択ボタンのまま＝
   「これから付ける操作」と「付いている事実」を見た目で分ける。 */
.uim-pick.on { border-color: var(--color-primary-border); background: var(--color-primary-light); color: var(--color-primary); }
.uim-pick span { flex: 1; }
.uim-pick i { font-style: normal; font-size: var(--text-lg); color: var(--color-text-subtle); }

.uim-sug-h { margin: 11px 0 7px; font-size: var(--text-2xs); color: var(--color-text-subtle); }
.uim-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.uim-chip {
  min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); border-radius: var(--radius-pill);
  font-size: var(--text-md); cursor: pointer; font-family: inherit;
}

/* カテゴリ＝均一の3列グリッド。幅がばらつく丸い札より視線がまっすぐ落ちる */
.uim-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.uim-tile {
  min-height: 52px; padding: 6px 4px;
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); border-radius: var(--radius-lg);
  font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.uim-tile.on { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-accent); font-weight: var(--fw-bold); }
.uim-tile.sug { border-color: var(--color-primary); color: var(--color-primary); font-weight: var(--fw-bold); }
.uim-share { margin: 9px 0 0; font-size: var(--text-xs); color: var(--color-text-subtle); }

/* 主操作は画面下に固定＝スクロールしても親指の届く場所にある */
.uim-fix {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--color-surface); border-top: 1px solid var(--color-border);
}
.uim-fix button {
  min-height: 56px; border-radius: var(--radius-lg); font-size: var(--text-md); font-weight: var(--fw-bold);
  border: 1.5px solid transparent; cursor: pointer; font-family: inherit;
}
.uim-save { flex: 1; background: var(--color-primary); color: var(--color-text-on-accent); }
.uim-skip {
  flex: 0 0 32%; background: var(--color-surface);
  border-color: var(--color-border) !important; color: var(--color-text-muted);
}
.uim-done {
  background: var(--color-success-light); border: 1px solid var(--color-success);
  color: var(--color-text); border-radius: var(--radius-lg); padding: 13px 15px;
  font-size: var(--text-base); font-weight: var(--fw-bold); margin: 0;
}
.uim-foot { margin: 0; font-size: var(--text-xs); color: var(--color-text-subtle); }
.uim-empty { padding: 34px 4px; text-align: center; color: var(--color-text-subtle); font-size: var(--text-base); }

/* 選ぶシート（支払先／項目名で共用）。開いた瞬間に検索欄へフォーカスするので、
   タップ→そのまま打つ→選ぶ、で自由入力と同じ打鍵数になる */
.uim-sheet { position: fixed; inset: 0; z-index: 60; }
.uim-sheet[hidden] { display: none; }
.uim-sheet-bg {
  position: absolute; inset: 0; background: rgba(15, 22, 34, .45);
  opacity: 0; transition: opacity .19s ease;
}
.uim-sheet.open .uim-sheet-bg { opacity: 1; }
.uim-sheet-body {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh;
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: var(--color-bg); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-lg);
  transform: translateY(100%); transition: transform .19s cubic-bezier(.2, .8, .3, 1);
}
.uim-sheet.open .uim-sheet-body { transform: translateY(0); }
/* 動きを止める設定なら即座に出す（入力の邪魔をしないことが最優先） */
@media (prefers-reduced-motion: reduce) {
  .uim-sheet-bg, .uim-sheet-body { transition: none; }
  .uim-sheet-bg { opacity: 1; }
  .uim-sheet-body { transform: translateY(0); }
}
.uim-sheet-h { display: flex; align-items: center; gap: 12px; }
.uim-sheet-h b { font-size: var(--text-md); }
.uim-sheet-list { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.uim-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; padding: 10px 14px; text-align: start;
  border: 0; border-bottom: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text);
  font-size: var(--text-md); cursor: pointer; font-family: inherit;
}
.uim-row:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.uim-row:last-child { border-bottom: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.uim-row.on { background: var(--color-primary-light); font-weight: var(--fw-bold); }
.uim-row.clear { color: var(--color-text-muted); }
.uim-row-n { flex: 1; }
.uim-row-s { font-size: var(--text-xs); color: var(--color-text-subtle); text-align: end; white-space: nowrap; }

.uim-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.uim-filters button {
  min-height: 44px; padding: 0 15px;
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-muted); border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: var(--fw-bold); cursor: pointer; font-family: inherit;
}
.uim-filters button.on { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-on-accent); }
.uim-list { display: flex; flex-direction: column; gap: 10px; }
.uim-li {
  width: 100%; text-align: start; font-family: inherit; cursor: pointer;
  background: var(--color-surface); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 13px 15px; display: flex; flex-direction: column; gap: 4px;
  color: var(--color-text); min-height: 76px;
}
.uim-li.here { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.uim-li1 { display: flex; align-items: baseline; gap: 8px; font-weight: var(--fw-bold); }
.uim-li-d { font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.uim-li-a { margin-inline-start: auto; font-size: var(--text-md); font-variant-numeric: tabular-nums; }
.uim-li2 { font-size: var(--text-sm); color: var(--color-text-muted); word-break: break-all; }
.uim-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.uim-tag {
  font-size: var(--text-2xs); font-weight: var(--fw-bold); border-radius: var(--radius-md); padding: 3px 8px;
  background: rgba(245, 158, 11, .14); color: var(--color-warning-text);
}
.uim-tag.ok { background: var(--color-success-light); color: #067a55; }
/* 通知の除外に当たる行。**消さずに寄せる**＝確認待ちであることは変わらない */
.uim-tag.off { background: rgba(107, 114, 128, .14); color: var(--color-text-muted); }
.uim-excl {
  margin: 0; padding: 11px 14px; border-radius: var(--radius-lg);
  background: rgba(107, 114, 128, .10); border: 1px solid var(--color-border);
  font-size: var(--text-xs); color: var(--color-text-muted);
}