/* ============================================================
   style.css

   色はすべて :root の変数で定義し、ダークモードではその変数だけ差し替える。
   (本文の CSS は変数名しか参照しないので、色の変更は一箇所で済む)
   グラフの色も app.js がこの変数を getComputedStyle で読んで使う。
   ============================================================ */

:root {
  color-scheme: light;
  --page-bg: #f9f9f7;          /* ページ全体の背景 */
  --surface: #fcfcfb;          /* カードやグラフの背景 */
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;       /* 軸ラベルなど控えめな文字 */
  --grid: #e1e0d9;             /* グラフの目盛り線 */
  --border: rgba(11, 11, 11, 0.10);
  --series-1: #2a78d6;         /* 折れ線の色(青)。バージョン別グラフでは最新バージョン */
  --series-1-wash: rgba(42, 120, 214, 0.10);  /* 折れ線の下の薄い塗り */
  --series-2: #eb6834;         /* バージョン別グラフ: 2 番目に新しいバージョン(橙) */
  --series-3: #1baf7a;         /* 3 番目(青緑) */
  --series-4: #eda100;         /* 4 番目(黄) */
  --series-other: #b5b3ac;     /* それより古いバージョンをまとめた「その他」(灰) */
  --marker: #898781;           /* バージョン公開日の縦線 */
  --delta-up: #006300;         /* 増加を表す文字色 */
  --status-good: #0ca30c;
  --status-critical: #d03b3b;
  --selected-bg: #0b0b0b;
  --selected-text: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page-bg: #0d0d0d;
    --surface: #1a1a19;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --grid: #2c2c2a;
    --border: rgba(255, 255, 255, 0.10);
    --series-1: #3987e5;
    --series-1-wash: rgba(57, 135, 229, 0.12);
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-other: #5c5b57;
    --marker: #898781;
    --delta-up: #0ca30c;
    --selected-bg: #ffffff;
    --selected-text: #0b0b0b;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 24px 16px 40px;
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.page-header,
.filters,
.error-box,
.content,
.page-footer {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- ヘッダー ---------- */
.page-header h1 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 600;
}

.subtitle {
  margin: 0 0 20px;
  color: var(--text-secondary);
}

/* ---------- フィルター行(1 行に横並び、狭ければ折り返す) ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-bottom: 20px;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-label {
  color: var(--text-secondary);
  font-size: 13px;
}

#modSelect {
  min-width: 220px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
}

.range-buttons button {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
}

.range-buttons button:hover {
  background: var(--grid);
}

.range-buttons button.is-selected {
  background: var(--selected-bg);
  color: var(--selected-text);
  border-color: var(--selected-bg);
}

/* ---------- エラー表示 ---------- */
.error-box {
  padding: 12px 16px;
  border: 1px solid var(--status-critical);
  border-radius: 8px;
  background: var(--surface);
  color: var(--status-critical);
}

/* ---------- 読み込み中は前の表示を薄くして残す(レイアウトが跳ねない) ---------- */
.content.is-loading {
  opacity: 0.5;
  transition: opacity 0.2s;
}

/* ---------- サマリータイル ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.stat-label {
  color: var(--text-secondary);
  font-size: 13px;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}

.stat-tile-hero .stat-value {
  font-size: 40px;
}

.stat-sub {
  color: var(--text-muted);
  font-size: 12px;
  min-height: 18px;
}

.stat-value.is-up {
  color: var(--delta-up);
}

/* ---------- カード ---------- */
.card {
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.card-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}

.card-note {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 12px;
}

.chart-wrap {
  position: relative;
  height: 320px;
  max-width: 100%;
}

.chart-wrap-small {
  height: 200px;
}

/* ---------- 全 mod の一覧 ---------- */
.overview-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

/* 一覧表の行はクリックで詳細に切り替えられる */
#overviewTable tbody tr {
  cursor: pointer;
}

#overviewTable tbody tr:hover {
  background: var(--grid);
}

#overviewTable tbody tr.is-selected {
  background: var(--series-1-wash);
}

#overviewTable tbody tr.is-selected td:first-child {
  font-weight: 600;
}

/* 詳細セクションの見出し(どの mod を見ているか) */
.section-title {
  margin: 24px 0 12px;
  font-size: 18px;
  font-weight: 600;
}

.section-title .section-title-sub {
  margin-left: 8px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
}

.two-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.two-columns .card {
  margin-bottom: 0;
}

/* ---------- 表 ---------- */
.table-details {
  margin-top: 12px;
}

.table-details summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 13px;
}

.table-scroll {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--grid);
  white-space: nowrap;
}

th {
  color: var(--text-secondary);
  font-weight: 500;
}

th.num,
td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

td.empty {
  color: var(--text-muted);
  text-align: center;
}

/* 実行記録の結果(アイコン + 文字で示す。色だけに頼らない) */
.status-good {
  color: var(--status-good);
}

.status-failed {
  color: var(--status-critical);
}

/* ---------- フッター ---------- */
.page-footer {
  margin-top: 24px;
  color: var(--text-muted);
  font-size: 12px;
}