/* マイ護石の欄（シミュレーターの画面の「マイ護石（鑑定護石）」のタブ。一覧・「護石を登録する」・スクショから一括登録） */
/* ---- マイ護石 ---- */

/* タブと同じ幅の枠に置き、欄は読みやすい幅にして、タブと同じ左端にそろえる（選択欄が横に伸びすぎないように） */
.charms-area {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px;
}

@media (min-width: 1280px) {
  .charms-area {
    max-width: 1680px;
  }
}

.charms-area > .card {
  max-width: 880px;
}

/*
 * 登録したマイ護石の表。「実現に必要な鑑定護石」の表と同じ形（表の見た目は results.css の .needed-charms-table・.needed-charms-scroll）。
 * 護石が多いときは、枠の中でスクロールする（見出しの行は上に留まる）。行の右端は、削除の「×」の細い列（見出しは読み上げだけ）。
 * results.css の指定より後に読む指定に負けないよう、.needed-charms-scroll と重ねて書く
 */
.needed-charms-scroll.custom-charms-scroll {
  max-height: min(480px, 60vh);
  margin-bottom: 8px;
}

.custom-charms-table .custom-charms-delete-cell {
  width: 1%;
  text-align: right;
}

/* スマホの幅（行をカードのように積む）では、「×」を行の右上に置き、名前と重ならないよう右を空ける */
@media (max-width: 560px) {
  .custom-charms-table tr {
    position: relative;
  }

  .custom-charms-table tbody th {
    padding-right: 36px;
  }

  .custom-charms-table .custom-charms-delete-cell {
    position: absolute;
    top: 2px;
    right: 4px;
    width: auto;
  }
}

.charm-form summary {
  cursor: pointer;
  color: var(--accent);
  margin-bottom: 8px;
}

.charm-form .field-row select:first-child {
  flex: 1 1 160px;
}

/* 登録欄のスキル欄: スキルのプルダウン（skill-dropdown.js）を幅いっぱいに、Lv の選択欄はその右に */
.charm-form .charm-skill-row {
  flex-wrap: nowrap;
}

.charm-form .charm-skill-row .skill-dropdown {
  flex: 1 1 160px;
  min-width: 0;
}

.charm-form .charm-skill-row select {
  min-width: 4.5em;
}

/* スキルのプルダウンの一覧は、マイ護石の欄の横幅いっぱいに開く（一覧の位置の基準） */
.custom-charms-card {
  position: relative;
}

/* 「護石を登録する」の「登録」と「入力をクリア」を横に並べる（入りきらなければ折り返す） */
.charm-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.form-message {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---- マイ護石: スクショから一括登録 ---- */

/*
 * 欄の下に仕切りの線を引いて、下の登録したマイ護石の表と分ける（マイセットの欄の仕切り（my-sets.css）と同じ線）。
 * 閉じているときに、線の上下が 16px ずつ空くようにする（上は「スクショから一括登録」の文字の下の余白 8px と合わせて 16px）
 */
.charm-import {
  margin-top: 4px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* スクショの受け取り口（貼り付け・ドラッグ＆ドロップ・「画像を選ぶ」） */
.charm-drop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  padding: 14px 10px;
  border: 2px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

.charm-drop.dragging {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

/* 「画像を選ぶ」: ファイルの選択欄をボタンの上に透明に重ねる（キーボードでも選べる） */
.charm-files-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.charm-files-button input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.charm-files-button:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.charm-import-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.charm-import-list:empty {
  display: none;
}

.charm-import-item {
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.charm-import-item.needs-check {
  border-color: var(--needs-check);
}

.charm-import-item.failed {
  background: var(--surface-2);
}

.charm-import-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.charm-import-head .check {
  flex: none;
  padding: 0;
  font-size: 0.9rem;
}

.charm-import-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* 読み取った装備詳細の欄の画像と、選択欄。列が狭いときは、画像の下に選択欄を並べる */
.charm-import-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

.charm-import-thumb canvas {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.charm-import-fields {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.charm-import-fields .field select {
  width: 100%;
}

.charm-import-fields .charm-skill-row {
  flex-wrap: nowrap;
  margin-bottom: 0;
}

.charm-import-fields .charm-skill-row .skill-dropdown {
  flex: 1 1 auto;
  min-width: 0;
}

/*
 * 護石の名前（レア度）の選択欄: 選んでいる名前の護石のアイコン（レア度の色）を、選択欄の左端の内側に重ねる
 * （charm-editor.js の renderCharmRarityIcon。ふつうの select の中にはアイコンを描けないため。アイコンを押しても、下の選択欄が開く）。
 * マイ護石の登録欄・スクショから一括登録・護石チェッカーで使う
 */
.charm-rarity-select {
  position: relative;
  display: block;
}

.charm-rarity-select select {
  width: 100%;
}

.charm-rarity-select.has-icon select {
  padding-left: 36px;
}

.charm-rarity-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  pointer-events: none;
}

/* 選択欄の高さに収まるよう、部位のアイコン（results.css の .part-icon）より小さい、文字の 1 行分の大きさにする */
.charm-rarity-icon .part-icon {
  width: 1.6em;
  height: 1.6em;
}

/* 読み取りに自信がなく、確かめてほしい欄（スキル欄は、プルダウンのボタンに印を付ける） */
select.needs-check,
.skill-dropdown-button.needs-check {
  outline: 2px solid var(--needs-check);
  outline-offset: 1px;
}

.charm-import-notes {
  margin: 6px 0 0;
  padding-left: 1.2em;
  font-size: 0.8rem;
  color: var(--needs-check);
}

.charm-import-notes:empty {
  display: none;
}

.charm-import-notes .error,
.charm-import-error {
  color: var(--danger);
}

.charm-import-error {
  margin: 0;
  font-size: 0.85rem;
}

.charm-import-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}