/* =============== ShunrAI 共通テーブルCSS =============== */
/* 置き場所: /www/baken/php_file/common/table.css */

:root{
  --tbl-font-size: 14px;
  --tbl-head-bg: #f5f7fa;
  --tbl-border: #e5e7eb;
  --tbl-zebra: #fafafa;
  --tbl-hover: #f0f7ff;
  --tbl-text: #111827;
  --tbl-danger: #b91c1c;
}

/* テーブルを横スクロール可能にするラッパ */
.table-wrap{ overflow-x:auto; }

/* テーブル本体 */
.shunrai-table {
  width: auto;              /* 必要に応じて自動幅 */
  table-layout: auto;       /* 内容に応じて幅 */
  margin: 0;                /* 中央寄せを解除 */
  margin-left: 10px;        /* 左側に10pxの余白 */
  border-collapse: collapse;
  font-size: var(--tbl-font-size);
  color: var(--tbl-text);
}


/* セル基本 */
.shunrai-table thead th,
.shunrai-table tbody th,
.shunrai-table td{
  border:1px solid var(--tbl-border);
  padding:6px 8px;
  white-space:nowrap;
}

/* 上部ヘッダー（列見出し） */
.shunrai-table thead th{
  background:var(--tbl-head-bg);
  text-align:center;
  font-weight:auto;
}

/* 左端ヘッダー（行見出し・PCは省略表示が基本） */
.shunrai-table tbody th.rowhead{
  background:var(--tbl-head-bg);
  font-weight:600;
  text-align:left;
  white-space:nowrap;
  max-width:18em;              /* 長すぎ防止 */
  overflow:hidden;
  text-overflow:ellipsis;      /* …で省略 */
  position:sticky;             /* 列が多いとき見出しを固定 */
  left:0;
  z-index:1;                   /* 下に潜らないように */
}

/* 左端ヘッダーで“折り返し許容”したいテーブルだけ .wrap を追加 */
.shunrai-table tbody th.rowhead.wrap{
  white-space:normal;
  word-break:keep-all;         /* できるだけ語境界で改行 */
}

/* ボディ行のゼブラ＆ホバー */
.shunrai-table tbody tr:nth-child(even){ background:var(--tbl-zebra); }
.shunrai-table tbody tr:hover{ background:var(--tbl-hover); }

/* 配置ユーティリティ */
.shunrai-table td.num,
.shunrai-table td.pct{ text-align:right; }
.shunrai-table td.nowrap,
.shunrai-table th.nowrap{ white-space:nowrap; }

/* 100超の強調（PHP側で red クラスを付与） */
.shunrai-table .red{ color:var(--tbl-danger); font-weight:600; }

/* --- 数字列の“見た目安定セット” --- */
/* 等幅数字 + 固定幅 + 折り返し禁止でガタつきを防止 */
.shunrai-table td.num,
.shunrai-table td.pct{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space:nowrap;
}

/* 幅は桁数ベース（ch単位）で統一感を出す */
.shunrai-table td.num{ width:7ch; }  /* 例: 1,234 など */
.shunrai-table td.pct{ width:6ch; }  /* 例: 12.3% */
.shunrai-table td.yen{ width:8ch; }  /* 例: 123.4円 */

/* 集計期間の表記を統一 */
.period{
  margin:8px 0 12px;
  font-size:13px;
  color:#374151;
}

/* スマホ調整 */
@media (max-width: 640px){
  .shunrai-table thead th,
  .shunrai-table tbody th,
  .shunrai-table td{ padding:6px; }

  /* モバイルで左端省略が厳しい場合は wrap を使う想定 */
  /* ここで強制はしない（ページごとに .wrap を付けて切替） */
}

@media (prefers-color-scheme: dark) {
  /* 全体 */
  body .shunrai-table {
    background-color: #2b2b2b !important;
    color: #f5f5f5 !important;
  }

  /* ヘッダー */
  body .shunrai-table thead th {
    background-color: #3a3f4b !important;
    color: #f5f5f5 !important;
  }

  /* 通常セル */
  body .shunrai-table td,
  body .shunrai-table tbody th {
    background-color: #2b2b2b !important;
    color: #f5f5f5 !important;
  }

  /* 偶数行（ゼブラ） */
  body .shunrai-table tbody tr:nth-child(even) td {
    background-color: #353b48 !important;
  }

  /* ホバー */
  body .shunrai-table tbody tr:hover td {
    background-color: #444c5a !important;
  }

  /* 注意・強調 */
  body .shunrai-table .red {
    color: #ff6b6b !important;
  }

  /* 補足テキスト */
  body .period {
    color: #ccc !important;
  }
}