/* ============================================================
   ページの並び v0.1.0（2026-09-13・ルク指示 07:08／07:13）
   1) スクロールはページ全体で動く（図の外側のスクロールバーで確実に動く）
      原因＝advanced.css の .dashboard-layout{height:calc(100vh - 200px)} と
      .main-chart-area{overflow-y:auto;height:100%} が「内側スクロール」を作っていた。
      ここで高さの縛りを外し、ブラウザのスクロールバー1本にする。
      サイドバー（個別分析）は追従（sticky）で高さだけ画面に収める。
   2) 箱の並び＝「縦1列（既定）／横2列」を html[data-layout] で切替（js/layout.js・記憶）。
      全体市況・分析の両タブの .charts-grid に効く。
   合体時：advanced.css 本体へ寄せる（ここは上書きだけ）。
   ============================================================ */

.dashboard-layout {
  height: auto;
  min-height: 0;
  align-items: start;
}

.main-chart-area {
  overflow: visible;
  height: auto;
}

.sidebar {
  position: sticky;
  top: 1rem;
  height: auto;
  max-height: calc(100vh - 2rem);
}

/* 箱の並び：縦1列（既定） */
html[data-layout="v"] #overview-view .charts-grid,
html[data-layout="v"] #analysis-view .charts-grid {
  grid-template-columns: 1fr;
}

html[data-layout="v"] #overview-view .chart-card.full-width,
html[data-layout="v"] #analysis-view .chart-card.full-width {
  grid-column: auto;
}

/* 横2列は advanced.css の既定（repeat(2, 1fr)）のまま。768px 以下は常に1列 */
@media (max-width: 768px) {
  html[data-layout="h"] #overview-view .charts-grid,
  html[data-layout="h"] #analysis-view .charts-grid {
    grid-template-columns: 1fr;
  }
}

/* ヘッダーの切替釦（テーマ釦と同じ見た目） */
.layout-toggle {
  min-height: 44px;
}

/* ============================================================
   合体 v3.2.0：全体市況の箱の中の「見せ方」（分析の図）と、結論の KPI
   ============================================================ */
#overview-view #ov-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  #overview-view #ov-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  #overview-view #ov-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
#overview-view [data-view-pane] .an-chart-wrapper {
  position: relative;
  height: 320px;
}
@media (max-width: 768px) {
  #overview-view [data-view-pane] .an-chart-wrapper { height: 240px; }
}
#overview-view .ov-header-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
#overview-view .ov-gap-group .ov-control-label {
  color: var(--text-primary);
}

/* 見せ方の釦＝枠つきのチップを少し離して並べる（詰まって1つの文に見えた＝v3.2.0 目視） */
#overview-view .ft-view-group,
#overview-view #ov-share-view {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-right: 8px;
}
#overview-view .ft-view-group .ov-size-btn,
#overview-view #ov-share-view .ov-size-btn {
  border: 1px solid var(--legend-chip-border);
  border-radius: 6px;
  padding: 2px 10px;
  background: transparent;
  color: var(--text-primary);
}
#overview-view .ft-view-group .ov-size-btn.active,
#overview-view #ov-share-view .ov-size-btn.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
}
@media (max-width: 768px) {
  #overview-view .ft-view-group .ov-size-btn,
  #overview-view #ov-share-view .ov-size-btn { min-height: 44px; }
}

/* ============================================================
   合体 v3.2.0 の検収（エマ 11:01）の直し
   ============================================================ */

/* 中3：KPI の見出しを2行分の高さでそろえる（2行に折れたカードだけ数値が下がっていた）・KPI の下に 24px */
#overview-view #ov-kpi-grid {
  margin-bottom: 24px;
}
#overview-view #ov-kpi-grid .metric-label {
  line-height: 1.4;
  min-height: calc(1.4em * 2);
}

/* 中B（エマ v3.2.1）：6列（PC 1280）の全期間で「4,435,076,304」がカードの右端を越えた＝数値の文字をカードの幅に合わせて縮める */
#overview-view #ov-kpi-grid .metric-card {
  container-type: inline-size;
  min-width: 0;
}
#overview-view #ov-kpi-grid .metric-value {
  font-size: min(1.6rem, 13cqi);
  white-space: nowrap;
}

/* 軽11：期間の注記は複数の文になるので折り返す（1行に収めると操作帯の横にはみ出す） */
#overview-view #ov-range-note {
  white-space: normal;
  flex: 1 1 100%;
  line-height: 1.5;
}

/* 日付別ランキング：並べ替え中の列の見出しに ↓（エマ 日付別 軽3）。
   v3.2.4 で増減の記号を「+」「▲」にしたため、三角（▼）は使わず矢印にする（増減の ▲ と混同しない） */
#daily-travel-view th[aria-sort="descending"]::after {
  content: " ↓";
  font-size: 0.85em;
}

/* 増減のセルと見出しは折り返さない（「▲1未満」「前日差」が細い列で2行に割れていた・v3.2.4 目視）。表は横スクロールの箱の中 */
#daily-travel-view .historic-ranking-table th,
#daily-travel-view .historic-ranking-table td.diff-up,
#daily-travel-view .historic-ranking-table td.diff-down,
#daily-travel-view .historic-ranking-table td.diff-flat {
  white-space: nowrap;
}

/* 個別タブの指標カードの補足：まとまり（前日差／前日比・アクティブ）の中では折り返さない（エマ v3.2.4 中2） */
.metric-sub .nw {
  white-space: nowrap;
}

/* スマホのカード：並べ替え中の項目名の横に ↓（見出しが無いので・エマ v3.2.4 軽4）。
   「↓ 並べ替え中」は「24H 出来高［千円］」で2行に割れた（エマ再確認 新中1）＝PC の見出しと同じ ↓ だけ */
@media (max-width: 768px) {
  #daily-travel-view .historic-ranking-table td[data-sorted]::before {
    content: attr(data-label) " ↓";
    white-space: nowrap;
    color: var(--accent-text);
  }
}

/* 価格の上昇率順・上昇額順のときだけ出る足切りの注記（v3.2.4） */
#daily-travel-view .daily-sort-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* 中9：スマホの操作帯＝「期間」だけ見せ、残りは「絞り込み ▾」でたたむ（設計書どおり）。PC では釦を出さない */
.ov-controls-toggle {
  display: none;
}
@media (max-width: 768px) {
  .ov-controls-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 6px 12px;
    background: var(--overlay-03);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .ov-controls-toggle .ov-controls-summary {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-secondary);
  }
  #overview-controls.is-collapsed > .ov-control-group:not(#ov-period-group) {
    display: none;
  }

  /* 重1：見せ方の釦の組は左寄せ・幅いっぱいで折り返す（右寄せのまま溢れて、左の「上位＋その他」が画面外に出ていた） */
  #overview-view .ov-chart-card .chart-card-header {
    flex-direction: column;
    align-items: stretch;
  }
  #overview-view .ov-header-tools {
    width: 100%;
    justify-content: flex-start;
  }
  #overview-view .ft-view-group,
  #overview-view #ov-share-view {
    display: flex;
    flex: 1 1 100%;
    width: 100%;
    margin-right: 0;
  }
  #overview-view .ft-view-group .ov-size-btn,
  #overview-view #ov-share-view .ov-size-btn {
    flex: 1 1 auto;
  }

  /* 390 でランキングの箱だけ見せ方の釦の左端が 8px 内側にずれていた（見出しの余白 16px・ほかの箱は 24px＝エマ v3.2.1 軽） */
  #overview-view .ov-ranking-head {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* 軽12：小中大も 44px（他の箱の釦と同じ） */
  #overview-view .ov-size-btn[data-size] {
    min-height: 44px;
    min-width: 44px;
  }

  /* 軽13：日付別ランキングの並べ替え釦も 44px */
  #daily-travel-view .sort-criteria-group .sort-tab-btn {
    min-height: 44px;
    flex: 1 1 auto;
  }
}