/*
 * 図鑑「寝顔図鑑(記録)」タブ(js/dreamFaceRecord.js)専用のスタイル。
 * 一覧は表ではなく縦並びの行(.dream-row)で組む(1行あたりの寝顔ボタン数が
 * ポケモンによって3~4個、メタモンだけ12個とばらつくため、表の列固定より
 * 行内flex-wrapの方が崩れにくい)。
 */

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

.dream-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.dream-search{
  flex:1 1 120px;
  min-width:0;
  font:inherit;
  font-size:var(--fs-base);
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
}
.dream-filter-btn{ flex:none; }

/* ---- 並び替え(図鑑「ボックス」タブの.box-sort-rowと同じ考え方)。
   右端の「すべて登録済みにする」は取り消しにくい一括操作のため、
   .box-bulk-startと同様margin-left:autoで並び替えボタン群と分離する。 ---- */
.dream-sort-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.dream-sort-label{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
}
.dream-bulk-btn{
  margin-left:auto;
  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;
}
/* 「すべて未登録に戻す」(=全件クリア)状態のときだけ危険色にして、
   実行すると記録が消える操作だと分かるようにする。 */
.dream-bulk-btn.is-reset{
  background:var(--danger);
  border-color:var(--danger);
  color:#fff;
}

/* ---- 絞り込み(折りたたみ)。図鑑「ボックス」タブの.box-filter-toggleと同じ考え方
   (中身はサイト共通の.filter-chips/.filter-chipをそのまま使う)。 ---- */
.dream-filter-toggle{
  margin-bottom:10px;
  font-size:var(--fs-xs);
}
.dream-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);
}
.dream-filter-toggle > summary::-webkit-details-marker{ display:none; }
.dream-filter-toggle-icon{ display:inline-flex; }
.dream-filter-toggle-icon svg{ width:15px; height:15px; }
.dream-filter-toggle > summary::after{
  content:"›";
  margin-left:2px;
  font-size:1.15em;
  line-height:1;
  color:var(--ink-soft);
  transition:transform .15s ease;
}
.dream-filter-toggle[open] > summary::after{ transform:rotate(90deg); }
.dream-filter-cat{
  margin-top:8px;
  padding-top:8px;
  border-top:1px dashed var(--line);
}
.dream-filter-cat:first-of-type{ margin-top:10px; }
.dream-filter-cat-label{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
  margin-bottom:6px;
}

/* 「未登録のみ」は絞り込みチップと違い、集計値(登録済みN/M)と対になる操作なので
   要約行の右端に置く(図鑑「ボックス」タブの並び替え行+右端ボタンと同じ考え方)。 */
.dream-summary-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.dream-summary{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.dream-summary-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.dream-list{
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--paper);
  overflow:hidden;
}
/* ---- 左端の縦書き睡眠タイプ列。同じ睡眠タイプが続く行は1つの見出しセルにまとめる
   (実DOMは<table>のrowspanではなく、グループごとdivで包んで表現している。
   図鑑「進捗管理」タブのとくい列と同じ考え方)。 ---- */
.dream-sleeptype-group{
  display:flex;
  border-bottom:1px solid var(--line);
}
.dream-sleeptype-group:last-child{ border-bottom:none; }
.dream-sleeptype-col{
  flex:none;
  width:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink);
  background:var(--ink-soft);
}
.dream-sleeptype-rows{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
}
.dream-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
}
.dream-row:last-child{ border-bottom:none; }
.dream-row.is-complete{ background:var(--paper-dim); }

.dream-icon{
  width:32px;
  height:32px;
  object-fit:contain;
  flex:none;
}
.dream-type-icon{
  width:18px;
  height:18px;
  object-fit:contain;
  flex:none;
}

.dream-name{
  display:flex;
  flex-direction:column;
  min-width:0;
  flex:1 1 auto;
  margin-right:auto;
}
.dream-name-text{
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dream-name-progress{
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

/* 「まとめて登録済み」ボタン。星ボタンと名前の間に置き、常に一定幅にすることで
   星ボタン側(.dream-faces)の列位置に影響しないようにする。
   誤タップ防止よりも連打のしやすさを優先し、丸ボタン(26px)の約3倍の横幅を持つ
   横長ピルにしてある(小さい丸だと数百匹分連続で押すには狙いづらいため)。 */
.dream-checkall-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:76px;
  height:26px;
  flex:none;
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
}
.dream-checkall-btn:hover{ background:var(--paper-dim); }
.dream-checkall-btn svg{ width:15px; height:15px; flex:none; }
.dream-checkall-btn.is-complete{
  background:var(--success);
  border-color:var(--success);
  color:#fff;
}

.dream-faces{
  display:flex;
  flex:none;
  flex-wrap:wrap;
  gap:5px;
  justify-content:flex-end;
  max-width:44%;
}
.dream-face-btn,
.dream-face-slot-empty{
  width:26px;
  height:26px;
  flex:none;
}
.dream-face-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  font:inherit;
  font-size:var(--fs-xs);
  font-weight:700;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
  transition:background-color .12s ease, border-color .12s ease, color .12s ease;
}
.dream-face-btn:hover{ background:var(--paper-dim); }
.dream-face-btn.is-observed{
  background:var(--selected-bg);
  border-color:var(--selected-border);
  color:var(--selected-ink);
}
.dream-face-star{
  position:relative;
  z-index:1;
}
/* 観測済みの目印。星番号を隠さないよう、ボタンの背面に重ねる。 */
.dream-face-observed-icon{
  position:absolute;
  inset:1px;
  width:22px;
  height:22px;
  color:var(--success);
  opacity:1;
  pointer-events:none;
}
:root[data-theme="dark"] .dream-face-observed-icon,
:root[data-theme="dark-blue"] .dream-face-observed-icon{
  color:var(--moon);
}
/* メタモンの変身先ポケモン名が付いた寝顔用。同じ☆番号のボタンが並んでも見分けが
   つくよう、js側でbackground-imageに変身先のアイコンを敷く(このルールは
   background-size/positionだけ担当。is-observedの背景色より常にinline styleの
   background-imageが優先されるため、観測済み/未観測どちらでもアイコンは見える)。 */
.dream-face-btn.has-icon{
  background-size:cover;
  background-position:center;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
}
/* ☆1~☆4の固定4列のうち、そのポケモンに無い星の位置を埋める空欄
   (見た目は出さず、幅だけ.dream-face-btnと揃えて列位置を保つ) */
.dream-face-slot-empty{ visibility:hidden; }