/* 「撮影日時で写真のファイル名を一括変更」の画面。共通の部品と色・大きさの変数は、src/style.css。ここは、この道具だけの物。 */
/* フォルダを選ぶ入口(機能の旗 ENABLE_FOLDER が true で、使えるブラウザのときだけ出る) */
.folder-pick { border-top: 1px solid var(--line); margin-top: var(--sp-4); padding-top: 0.6rem; }

.options { --opt-min: 17rem; }
/* ラベルと欄を、横に並べる */
.field { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; }
.field input[type="text"] { width: 14rem; }
/* 撮影日時を読めなかった写真の注意・大きすぎる注意は、保存のボタンの直前 */
#unread-note-save, #size-note { margin: 1.2rem 0 0; }

/* 変更前 → 変更後の一覧 */
.table-wrap { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--bg); }
table.names { border-collapse: collapse; width: 100%; font-size: var(--fs-s); }
table.names th, table.names td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.names tbody tr:last-child th, table.names tbody tr:last-child td { border-bottom: 0; }
table.names thead th { font-weight: 700; white-space: nowrap; }
table.names th.name { font-weight: 400; min-width: 8rem; }
table.names td.after { font-weight: 700; min-width: 9rem; }
table.names td.source { font-size: var(--fs-xs); color: var(--muted); }
/* 撮影日時を読めなかった写真の行(色だけに頼らず、頭に印と、文字でも示す) */
table.names tr.flag th, table.names tr.flag td { background: var(--warn-bg); color: var(--warn-text); }
table.names tr.flag td.source { font-weight: 700; }
table.names tr.flag td.source::before { content: "\26A0\FE0E  "; }
table.names tr.flag td.after { font-weight: 400; }

/* フォルダの中で直接変える前の、確かめ */
.confirm { border: 2px solid var(--error-text); border-radius: var(--r-m); padding: 0.6rem 1rem 1rem; margin: 1.2rem 0 0; background: var(--bg); }
.confirm-title { font-weight: 700; font-size: var(--fs-l); }
.confirm .row { gap: 0.6rem; }

/* スマホの幅: 一覧を、写真ごとに縦に積む(横に送らなくても、変更後の名前と、日時の出どころが見える) */
@media (max-width: 40rem) {
  table.names thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.names tr { display: block; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
  table.names tbody tr:last-child { border-bottom: 0; }
  table.names th, table.names td { display: block; border-bottom: 0; padding: 0.1rem 0.6rem; min-width: 0; }
  table.names td.after::before { content: "\2192\00A0"; font-weight: 400; }
}