/* ========================================
   外来魚バスターズ - Statistics Styles
   統計ページ専用スタイル（テーブル類）
   ======================================== */

/* ===== セクション ===== */
.Section {
  margin-bottom: 16px;
}

/* ===== サマリーテーブル ===== */
.SummaryTable {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 14px;
}

.SummaryTable td {
  border: 1px solid #d0e8f0;
  padding: 6px 8px;
}

.SummaryTable .label-cell {
  background: #e0f2fe;
  font-weight: bold;
  color: #0066a0;
}

.SummaryTable .value-cell {
  background: #fff;
  text-align: right;
}

/* ===== 詳細テーブル (大型バス・魚種別) ===== */
.DetailTable {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 13px;
}

.DetailTable td {
  border: 1px solid #d0e8f0;
  padding: 4px 6px;
}

.DetailTable .label-cell {
  background: #e0f2fe;
  font-weight: normal;
  color: #333;
  text-align: left;
}

.DetailTable .label-cell-bold {
  background: #e0f2fe;
  font-weight: bold;
  color: #333;
  text-align: left;
}

.DetailTable .value-cell {
  background: #fff8e1;
  text-align: right;
}

.DetailTable .value-cell-total {
  background: #e8f5e9;
  text-align: right;
  font-weight: bold;
}

/* ===== 駆除データメインテーブル ===== */
.MainDataTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 8px;
}

.MainDataTable td {
  border: 1px solid #d0e8f0;
  padding: 3px 4px;
}

/* 見出し行 (ブルーギル, ブラックバス等) */
.MainDataTable .group-header {
  background: #e0f2fe;
  font-weight: bold;
  text-align: center;
  height: 18px;
}

/* カラム見出し行 */
.MainDataTable .col-header {
  background: #e0f2fe;
  text-align: center;
  font-size: 11px;
  height: 16px;
}

/* ===== サブタイトル ===== */
.SubTitle {
  font-size: 15px;
  font-weight: bold;
  color: #0077b6;
  padding: 8px 0 4px 0;
  border-bottom: 2px solid #90e0ef;
  margin-bottom: 4px;
  letter-spacing: 2px;
}

/* ===== メモ ===== */
.NoteText {
  font-size: 12px;
  color: #6a9ab0;
  padding: 8px 0;
}

/* ========================================
   スクロールヒント（右スクロール促進）
   ======================================== */
.ScrollHint {
  display: block;
  text-align: center;
  padding: 8px 0 4px 0;
  font-size: 13px;
  color: #0077b6;
  letter-spacing: 1px;
  user-select: none;
  -webkit-user-select: none;
}

.ScrollHintArrow {
  display: inline-block;
  font-size: 22px;
  line-height: 1;
  animation: scrollHintBounce 1.4s ease-in-out infinite;
  margin-left: 6px;
}

.ScrollHintText {
  display: inline-block;
  vertical-align: middle;
}

@keyframes scrollHintBounce {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.4;
  }
  50% {
    transform: translateX(8px);
    opacity: 1;
  }
}

/* デスクトップでは非表示（JSで必要に応じて表示） */
@media screen and (min-width: 481px) {
  .ScrollHint {
    display: none;
  }
}

/* ========================================
   統計ページ用 レスポンシブ対応
   ======================================== */

/* タブレット以下 (768px 以下) */
@media screen and (max-width: 768px) {
  .MainContainer {
    width: 95%;
  }

  .MainDataTable {
    font-size: 11px;
  }

  .MainDataTable td {
    padding: 2px 3px;
  }
}

/* スマートフォン (480px 以下) */
@media screen and (max-width: 480px) {
  .MainContainer {
    width: 100%;
  }

  .SectionBody {
    overflow-x: auto;
  }

  .MainDataTable {
    font-size: 10px;
    min-width: 700px;
  }

  .MainDataTable td {
    padding: 2px 2px;
  }

  .SummaryTable, .DetailTable {
    font-size: 12px;
  }
}