/* ============================================================
   総覧タブ（Dune型ダッシュボード）専用スタイル v3.0.0
   既存の advanced.css の変数（--bg-*, --accent-*, --text-*）を流用する。
   文字の段は 12（注記）／13（表・ラベル）／14（釦）の3段だけ（金継ぎ診断 09-03 の方針）。
   ============================================================ */

/* 見出しまわり：データの日付・件数・非公式（中2・中7） */
.ov-meta {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* 読み込み失敗（軽11） */
.ov-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border: 1px solid var(--accent-danger);
  border-radius: var(--border-radius);
  background: rgba(248, 113, 113, 0.08);
  color: var(--text-primary);
  font-size: 13px;
}

.ov-error .action-btn {
  min-height: 44px;
  font-size: 14px;
}

/* 操作帯 */
.overview-controls-bar {
  align-items: center;
  row-gap: 12px;
}

.ov-control-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--overlay-03);
  padding: 4px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.ov-control-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
  padding: 0 6px 0 8px;
  white-space: nowrap;
}

.ov-control-group .sort-tab-btn {
  min-height: 32px;
  font-size: 14px;
  padding: 4px 12px;
}

.ov-date-input {
  min-height: 32px;
  padding: 4px 8px;
  font-size: 13px;
}

.ov-control-sep {
  color: var(--text-secondary);
  font-size: 13px;
}

.ov-range-note {
  font-size: 12px;
  color: var(--accent-warning, #f59e0b);
  white-space: nowrap;
  padding-left: 4px;
}

.ov-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 8px;
  min-height: 32px;
}

.ov-toggle-label input {
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: var(--accent-color);
}

/* KPI の補足文：見出しより目立たせない（軽3） */
#ov-kpi-grid .metric-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
}

/* グラフのカード：凡例はキャンバスの外（下）へ出し、描画域を確保する（重1） */
/* 列の数は css/layout.css の縦1列（既定）／横2列の切替に任せる（ルク 07:08 の縦横切替が 06:45 の「横長1列」より新しい指示＝合体 v3.2.0） */
.ov-charts-grid {
  margin-bottom: 24px;
}

.ov-chart-card {
  height: auto;
  gap: 12px;
}

.ov-chart-card .chart-wrapper {
  flex: none;
  height: 320px;
}

.ov-legend {
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
}

.ov-legend summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  list-style: none;
}

/* 開閉の印（押せると分かる手がかり＝エマ v3.1 重1） */
.ov-legend summary::-webkit-details-marker {
  display: none;
}

.ov-legend summary::before {
  content: "▸";
  font-size: 12px;
  width: 12px;
  flex: none;
}

.ov-legend[open] summary::before {
  content: "▾";
}

.ov-legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding-top: 6px;
}

/* 項目はチップ（薄い枠＋角丸）＝押せる見た目（エマ v3.1 重1） */
.ov-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(127, 127, 127, 0.08);
  border: 1px solid var(--legend-chip-border); /* 地に対して 3:1 以上（エマ v3.1 中5） */
  border-radius: 999px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  padding: 4px 6px;
  min-height: 28px;
  cursor: pointer;
}

.ov-legend-item:hover {
  border-color: var(--text-secondary);
}

/* 消した項目＝打ち消し線＋薄く。0.45 では名前が読めなかった（ダーク 4.17・ライト 2.73）ので 0.7（エマ 中6） */
.ov-legend-item.off {
  opacity: var(--legend-off-opacity);
  text-decoration: line-through;
  background: transparent;
}

.ov-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex: none;
}

/* 「その他」の見本は斜線（灰の系列と見分ける＝エマ v3.1 中4） */
.ov-legend-swatch.other {
  background: repeating-linear-gradient(45deg, var(--swatch) 0 2px, transparent 2px 4px);
  box-shadow: inset 0 0 0 1px var(--swatch);
}

/* ランキング表：指標の切り替えは表の見出しの横（重5） */
.ov-ranking-card {
  margin-bottom: 24px;
}

.ov-ranking-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 16px 16px 8px;
}

.ov-ranking-head .ov-control-group {
  margin-left: auto;
}

.ov-note {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 0 16px 12px;
  line-height: 1.6;
}

/* 見出しの寄せを列の内容に合わせる（軽4） */
.historic-ranking-table th.ov-th-left { text-align: left; }
.historic-ranking-table th.ov-th-right { text-align: right; }
.historic-ranking-table th.ov-th-center { text-align: center; }

.ov-ranking-row {
  cursor: pointer;
}

.ov-ranking-row:hover {
  background: var(--overlay-04);
}

.ov-ranking-row .table-pj-link {
  color: var(--accent-text);
}

.ov-ranking-row.ov-others-row {
  cursor: default;
  color: var(--text-secondary);
}

.ov-ranking-row.ov-others-row:hover {
  background: transparent;
}

.ov-asof {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 4px;
}

/* 注記の帯（非公式・許可・参考値）＝13px・両テーマで AA */
.ov-footer {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 12px 16px;
  line-height: 1.7;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--bg-secondary);
}

.ov-footer p + p {
  margin-top: 4px;
}

/* 名前のリンク（個別分析へ）＋右の ↗（本家へ・v3.1 項目5） */
.ov-pj-cell {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.ov-pj-link {
  display: inline-flex;
}

.ov-ext-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  border-radius: 4px;
  color: var(--text-secondary);
  text-decoration: none;
}

/* 個別ページ：プロジェクト名の横の「FiNANCiEで見る ↗」（v3.1 項目4） */
.detail-financie-link {
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--border-color);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ov-ext-link:hover,
.ov-ext-link:focus-visible {
  background: rgba(127, 127, 127, 0.15);
}

.ov-ext-link .ov-ext {
  margin-left: 0;
}

.ov-ext {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 4px;
}

/* メンバー数の増減：見出し右の釦2組（欠測の扱い＋高さ）と注記 */
.ov-header-tools {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.ov-gap-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

/* 凡例の「全部出す」（v3.1 項目3・全グラフ共通） */
.ov-legend-all {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  min-height: 28px;
  cursor: pointer;
}

.ov-legend-all[aria-disabled="true"] {
  opacity: var(--disabled-opacity); /* 非活性は .8（エマ v3.1 軽6） */
  cursor: default;
}

/* 個別・比較ページのグラフにHTMLの凡例を付けたカード：高さは固定をやめ、描画域を保つ */
.chart-card:has(> details.ov-legend) {
  height: auto;
  gap: 12px;
}

.chart-card:has(> details.ov-legend) > .chart-wrapper {
  flex: none;
  height: 320px;
}

/* 個別ページ 24H 取引量：縦軸の上限の注記（v3.1 項目1） */
.chart-cap-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.chart-cap-note[hidden] {
  display: none;
}

/* 注記が出ているときだけカードの高さを自動にし、描画域は保つ（固定380pxのままだと注記がはみ出して下のカードに重なり、描画域も127pxまで潰れた） */
.chart-card:has(> .chart-cap-note:not([hidden])) {
  height: auto;
}

.chart-card:has(> .chart-cap-note:not([hidden])) > .chart-wrapper {
  flex: none;
  height: 300px;
}

.chart-cap-note .chart-cap-toggle {
  border: 1px solid var(--border-color);
  padding: 0 10px;
}

/* グラフの高さ 小／中／大 */
.ov-size-group {
  display: inline-flex;
  gap: 2px;
  background: rgba(127, 127, 127, 0.08);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 2px;
  flex: none;
}

.ov-size-btn {
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  min-width: 32px;
  min-height: 28px;
  cursor: pointer;
}

.ov-size-btn.active {
  background: var(--accent-color);
  color: #fff;
}

.ov-chart-card .chart-card-header {
  gap: 8px;
  flex-wrap: wrap;
}

/* ヘッダー右端のテーマ切替（.header-nav を行いっぱいに広げて margin-left:auto を効かせる） */
.app-header .header-nav {
  flex: 1 1 auto;
}

.theme-toggle {
  cursor: pointer;
  font-family: inherit;
  margin-left: auto;
}

/* 個別分析：データ取得開始日 */
.detail-first {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 8px;
}

/* スマホ：操作帯は折り返して全部見せる・押す部分は44px（重3） */
@media (max-width: 768px) {
  .overview-controls-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .ov-control-group {
    width: 100%;
  }

  .ov-control-label {
    flex: 0 0 100%;
    padding: 6px 8px 2px;
    font-size: 13px;
  }

  .ov-control-group .sort-tab-btn {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 0 8px;
  }

  .ov-date-input {
    flex: 1 1 40%;
    min-height: 44px;
    font-size: 14px;
  }

  .ov-range-note {
    flex: 0 0 100%;
    white-space: normal;
    padding: 4px 8px;
  }

  .ov-toggle-label {
    width: 100%;
    min-height: 44px;
  }

  .ov-toggle-label input {
    width: 22px;
    height: 22px;
  }

  .ov-charts-grid {
    grid-template-columns: 1fr;
  }

  .ov-chart-card .chart-wrapper {
    height: 240px;
  }

  /* スマホの凡例＝押せる大きさ（28px→40px・エマ v3.1 軽8） */
  .ov-legend-item,
  .ov-legend-all {
    min-height: 40px;
    padding: 6px 10px;
  }

  .ov-legend-items {
    gap: 6px 8px;
  }

  .ov-ranking-head .ov-control-group {
    margin-left: 0;
  }
}

/* 欠測の注記：1行目＝結論・2行目＝日付（改行を活かす・エマ v3.1 中3） */
#ov-gap-note {
  white-space: pre-line;
}