/*
 * 図鑑「ボックス」タブ(js/box.js)専用のスタイル。
 * 個体入力ボード自体はjs/individualCompare.jsのcreateBoard()を単体モードで流用するため、
 * ボード内部の見た目はcss/individualCompare.css(.cmp-board以下)・
 * css/individualEvaluate.css(.cmp-board-singleでの複数枠専用ボタン非表示)がそのまま効く。
 * ここでは一覧表・フィルターチップ・追加/編集モーダルの外枠だけを持つ。
 */

.box-tool{ padding:12px 0 0; }

.box-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:10px;
}
/* 追加・同期・CSVボタン: 図鑑タブの「きのみエナジーを見る」等と同じ
   .tab-open-btn(pokedex.html側で定義済み)をそのまま流用する。ここでは並び順の都合
   (左端固定)だけ持たせる。 */
.box-add-btn, .box-import-btn, .box-sync-btn{ flex:none; }
.box-search{
  flex:1 1 120px;
  min-width:0;
  font:inherit;
  font-size:var(--fs-base);
  padding:9px 12px;
  border:1px solid var(--line);
  /* 角の丸みは食材確率タブの名前検索欄(.search-bar input、pokedex.html)に揃える */
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
}

/* 条件カードは個体比較タブのものをそのまま複製する。ホスト側では余白や文字サイズを
   上書きしない。 */
.box-sim-condition-host{ margin:0; }

/* 並び替え・絞り込みは表を縦に見ている間も操作できるよう、タブバーの下に固定する。 */
.box-controls-frame{
  position:sticky;
  top:var(--box-controls-sticky-top, 0px);
  z-index:10;
  padding-top:8px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

/* ---- 並び替え ---- */
.box-sort-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.box-sort-label{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
}

/* ---- 絞り込み(折りたたみ)。.tab-about(pokedex.html)と似た開閉見出しだが、
   「補足説明」ではなく「操作パネル」なのでⓘではなくフィルターアイコンを使う。 ---- */
.box-filter-toggle{
  flex:1 1 auto;
  min-width:0;
  margin-bottom:0;
  font-size:var(--fs-xs);
}
.box-filter-head{
  position:relative;
  margin-bottom:12px;
}
.box-filter-head > .box-bulk-start,
.box-filter-head > .box-bulk-actions{
  position:absolute;
  top:0;
  right:0;
  margin-left:0;
}
.box-filter-toggle > summary{
  cursor:pointer;
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:var(--fs-sm);
  font-weight:800;
  color:var(--navy);
  padding:5px 2px;
  border-bottom:1px dashed var(--line);
}
.box-filter-toggle > summary::-webkit-details-marker{ display:none; }
.box-filter-toggle-icon{ display:inline-flex; }
.box-filter-toggle-icon svg{ width:15px; height:15px; }
.box-filter-toggle > summary::after{
  content:"›";
  margin-left:2px;
  font-size:1.15em;
  line-height:1;
  color:var(--ink-soft);
  transition:transform .15s ease;
}
.box-filter-toggle[open] > summary::after{ transform:rotate(90deg); }
/* カテゴリごとの折りたたみ(サブスキル/性格▲▼/タイプ/とくい/食材/スキルの7つ)。
   外側の「絞り込み」を開いた状態でも、各カテゴリは既定で閉じておく
   (タイプ18種・食材・スキル17種ぶんを一度に出すと縦に長くなりすぎるため)。 */
.box-filter-cat{
  margin-top:4px;
  padding-top:4px;
  border-top:1px dashed var(--line);
}
.box-filter-cat:first-of-type{ margin-top:8px; }
.box-filter-cat > summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:2px;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
  padding:4px 2px;
}
.box-filter-cat > summary::-webkit-details-marker{ display:none; }
.box-filter-cat > summary::after{
  content:"›";
  margin-left:auto;
  font-size:1.1em;
  line-height:1;
  color:var(--ink-soft);
  transition:transform .15s ease;
}
.box-filter-cat[open] > summary::after{ transform:rotate(90deg); }
.box-filter-cat-count{ color:var(--navy); font-variant-numeric:tabular-nums; }
.box-filter-group{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:6px 2px 2px;
}
/* 「性格・サブスキル」カテゴリ内の3グループ(サブスキル/性格▲▲/性格▼▼)を区切る */
.box-filter-divider{
  border-top:1px dashed var(--line);
  margin:6px 2px 0;
}
.box-chip.box-chip-orange.active{ background:var(--warning); border-color:var(--warning); color:#fff; }
.box-chip.box-chip-blue.active{ background:var(--info); border-color:var(--info); color:#fff; }
.box-chip.box-chip-gray.active{ background:var(--ink-soft); border-color:var(--ink-soft); color:#fff; }
.box-chip.box-chip-red.active{ background:var(--danger); border-color:var(--danger); color:#fff; }
/* タイプ(.be-types)・とくい(.be-filters)・食材/スキル(.filter-chips)は
   それぞれ既存タブ(きのみ効率・食材確率・個体比較のイベント対象絞り込み)と
   同じ見た目を流用するため、ここでは折りたたみ内の余白だけ揃える。 */
.box-filter-cat .be-types,
.box-filter-cat .be-filters,
.box-filter-cat .filter-chips{ margin-top:6px; }

/* ---- まとめて削除(絞り込み見出しの右端)。押すと自身は隠れ、キャンセル/削除の2ボタンに
   切り替わる(box-bulk-actions)。行側のチェックボックスはbox-td-select参照。 ---- */
.box-bulk-start,
.box-bulk-cancel,
.box-bulk-delete{
  font:inherit;
  font-size:var(--fs-xs);
  font-weight:700;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
}
/* 絞り込み見出し行(.box-filter-head)の右端に固定する */
.box-bulk-start{ margin-left:auto; }
.box-bulk-actions{ display:flex; gap:8px; margin-left:auto; }
/* display:flexがhidden属性の既定display:noneを上書きしてしまうため、明示的に上書きし直す */
.box-bulk-actions[hidden]{ display:none; }
.box-bulk-delete{
  background:var(--danger);
  border-color:var(--danger);
  color:#fff;
}
.box-bulk-delete:disabled{
  background:var(--paper-dim);
  border-color:var(--line);
  color:var(--ink-soft);
  cursor:default;
}

/* ==================================================================
   表本体(見出しは通常スクロール、左右の主要列だけ横方向に固定)
   ================================================================== */
.box-scrollbox{
  /* 表の高さを固定せず、縦方向はページ全体で描画する。横方向だけは
     個体列が多い場合にこの枠内でスクロールできるようにする。 */
  max-height:none;
  overflow-x:auto;
  /* 縦方向のsticky基準をページに戻すため、縦スクロールコンテナにはしない。
     overflow-y:visibleはoverflow-x:autoとの組み合わせでautoに正規化される。 */
  overflow-y:clip;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--paper);
}
.box-table{
  border-collapse:separate;
  border-spacing:0;
  width:max-content;
  min-width:100%;
  /* このサイトの共通table装飾(overflow:hidden等)を打ち消す。装飾自体は
     .box-scrollbox側で持たせているため、table自身はクリップさせない
     (overflow:hiddenのままだとstickyがページと一緒に動いてしまう)。 */
  overflow:visible;
  border:0;
  border-radius:0;
}
.box-table th,
.box-table td{
  padding:6px 8px;
  border-bottom:1px solid var(--line);
  background:var(--paper);
  text-align:center;
  white-space:nowrap;
}
.box-table thead{
  position:relative;
  z-index:3;
}
.box-table .box-group-title{
  padding:8px 12px;
  background:var(--paper-dim);
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--heading-ink);
  text-align:left;
}
.box-group-daily{ border-left:2px solid var(--navy); }
.box-table [data-box-thead] th{ border-bottom:2px solid var(--line); }
.box-th{
  position:relative;
  top:auto;
  z-index:1;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink-soft);
  vertical-align:middle;
}
.box-th-corner{
  position:sticky;
  left:0;
  z-index:3;
  width:48px;
  min-width:48px;
  max-width:48px;
}
.box-th-ribbon{
  width:38px;
  min-width:38px;
  max-width:38px;
}
.box-th-ribbon-icon{
  width:22px;
  height:22px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}
.box-th-icon-wrap{ display:flex; justify-content:center; }
.box-th-count-icon svg{ width:16px; height:16px; }
.box-th-label{ display:block; margin-top:2px; }
.box-th-label-vert{
  font-size:var(--fs-2xs);
  writing-mode:vertical-rl;
  /* 既定(mixed)だと末尾のS/Mだけ横倒しで回転してしまうため、
     アルファベットも含めて全文字を縦に1文字ずつ積む */
  text-orientation:upright;
  letter-spacing:.02em;
  margin:2px auto 0;
}
.box-th-nature-up{ color:var(--danger); }
.box-th-nature-down{ color:var(--info); }
.box-th-energy{
  position:sticky;
  right:0;
  z-index:3;
  min-width:92px;
  border-left:2px solid var(--navy);
  box-shadow:2px 0 0 var(--line);
}
.box-th-daily-count{ min-width:76px; }
.box-th-sortable{ cursor:pointer; }
.box-th-sortable:hover{ color:var(--ink); }
.box-th-sortable.is-sort-asc::after{ content:' \25B2'; font-size:.7em; }
.box-th-sortable.is-sort-desc::after{ content:' \25BC'; font-size:.7em; }

.box-td-species{
  position:sticky;
  left:0;
  z-index:2;
  width:48px;
  min-width:48px;
  max-width:48px;
  cursor:pointer;
}
.box-td-species img{ width:28px; height:28px; object-fit:contain; display:block; margin:0 auto; }
.box-td-ribbon{
  width:38px;
  min-width:38px;
  max-width:38px;
}
.box-td-ribbon img{
  width:22px;
  height:22px;
  object-fit:contain;
  display:block;
  margin:0 auto;
}
.box-row:hover .box-td{ background:var(--paper-dim); }

/* .box-table th/tdの既定text-align:centerより詳細度を上げて上書きする
   (単独クラスだと要素セレクタぶん詳細度が足りず負けるため、.box-th/.box-tdと複合させる) */
.box-th.box-th-nickname{ text-align:left; }
.box-td.box-td-nickname{
  cursor:pointer;
  text-align:left;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--ink-soft);
}

.box-td-level{
  font-variant-numeric:tabular-nums;
  color:var(--ink-soft);
}

.box-td-ing{ cursor:pointer; }
.box-td-ing img{ width:20px; height:20px; object-fit:contain; margin:0 1px; }
.box-td-sub{ position:relative; cursor:pointer; }
.box-td-sub.is-reservation-pending{ opacity:.58; }
.box-td-nature{ cursor:pointer; }
.box-td-select{ cursor:default; }
.box-td-select input[type="checkbox"]{ width:16px; height:16px; accent-color:var(--navy); cursor:pointer; }
.box-td-energy{
  position:sticky;
  right:0;
  z-index:2;
  min-width:92px;
  border-left:2px solid var(--navy);
  box-shadow:2px 0 0 var(--line);
  color:var(--navy);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.box-td-daily-count{
  min-width:76px;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.box-td-skill-count{ white-space:nowrap; }
.box-skill-count-icon{ width:16px; height:16px; margin-right:3px; vertical-align:-3px; }
.box-ingredient-counts{ display:flex; align-items:center; gap:12px; white-space:nowrap; }
.box-ingredient-count-item{ display:inline-flex; align-items:center; gap:3px; }
.box-ingredient-count-item img{ width:24px; height:24px; object-fit:contain; }

/* ---- アイコン共通(サブスキル列本体・性格列) ---- */
.box-icon{ display:inline-flex; }
.box-icon svg{ width:18px; height:18px; }
.box-icon-th svg{ width:16px; height:16px; }
.box-icon-orange{ color:var(--warning); }
.box-icon-blue{ color:var(--info); }
.box-icon-gray{ color:var(--ink-soft); }
.box-icon-red{ color:var(--danger); }
.box-icon-flip{ transform:scaleY(-1); }

/* おてボ: chevrons-upの丸(塗りつぶし)+反転色のchevrons-up本体を前面に重ねる */
.box-icon-otebo{ position:relative; width:18px; height:18px; }
.box-icon-otebo-bg{ position:absolute; inset:0; width:100%; height:100%; }
.box-icon-otebo-fg{
  position:absolute; inset:0; width:100%; height:100%;
  stroke:var(--paper) !important;
  stroke-width:2.4;
}
.box-icon-th .box-icon-otebo{ width:16px; height:16px; }
.box-sub-reservation-marker{
  position:absolute;
  right:1px;
  bottom:1px;
  z-index:2;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  min-width:16px;
  padding:2px 2px 1px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--paper);
  box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 18%, transparent);
  color:var(--ink-soft);
  line-height:1;
}
.box-sub-reservation-marker svg{ width:11px; height:11px; }
.box-sub-reservation-level{
  font-size:8px;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.box-sub-reservation-marker.is-pending{ opacity:.75; }
.box-sub-reservation-marker.is-unlocked{ opacity:.45; }

/* ==================================================================
   追加/編集モーダル(.overlay-modal/.modal-cardは共通シェルを流用)
   ================================================================== */
.box-modal .modal-card{ max-width:clamp(320px, 60vw, 460px); }

/* ==================================================================
   CSVインポート結果モーダル
   ================================================================== */
.box-import-modal .modal-card{ max-width:clamp(320px, 60vw, 460px); }
.box-import-modal-title{
  font-size:var(--fs-md);
  font-weight:700;
  color:var(--ink);
  margin:0 0 10px;
  padding-right:24px;
}
.box-import-modal-summary{
  font-size:var(--fs-base);
  color:var(--ink-soft);
  line-height:1.6;
  margin:0;
}
.box-import-modal-errors{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  max-height:240px;
  overflow-y:auto;
  font-size:var(--fs-xs);
  color:var(--danger);
}
.box-import-modal-errors li{
  padding:4px 0;
  border-top:1px solid var(--line);
}
.box-import-modal-errors li:first-child{ border-top:none; }

/* ==================================================================
   CSV読み込み/出力の選択モーダル
   ================================================================== */
.box-csv-choice-modal .modal-card{ max-width:clamp(320px, 60vw, 420px); }
.box-csv-choice-title{
  font-size:var(--fs-md);
  font-weight:700;
  color:var(--ink);
  margin:0 0 8px;
  padding-right:24px;
}
.box-csv-choice-note{
  font-size:var(--fs-sm);
  color:var(--ink-soft);
  line-height:1.6;
  margin:0;
}
.box-csv-choice-actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  margin-top:14px;
}
.box-csv-choice-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:40px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper-dim);
  color:var(--ink);
  font:inherit;
  font-size:var(--fs-sm);
  font-weight:700;
  cursor:pointer;
}
.box-csv-choice-btn:hover{ border-color:var(--selected-border); }
.box-csv-choice-btn .ui-icon{ width:15px; height:15px; }

/* ==================================================================
   ボックス内の保存/同期モーダル
   ================================================================== */
.box-sync-modal{ z-index:200; }
.box-sync-modal .modal-card{ max-width:min(94vw, 620px); }
.box-sync-modal-title{
  font-size:var(--fs-md);
  font-weight:700;
  color:var(--ink);
  margin:0 0 4px;
  padding-right:30px;
}
.box-sync-modal-mount > .settings-storage-sync-panel{
  display:block;
}
.box-sync-modal-mount .settings-storage-sync-grid{
  padding-top:8px;
}