/* ===== Mobile: 600px以下は常に1列・順序固定 ===== */
@media (max-width: 600px) {
  /* 1列化（grid/flex問わず縦積みに） */
  body.mobile-view .dashboard-1280 > div.row,
  body.mobile-view .dashboard-1280 > div.row-700,
  body.mobile-view .dashboard-1280 > div.row-half,
  body.mobile-view .dashboard-1280 > div.row-full {
    display: block !important;                 /* gridやflexを打ち消す */
    flex-direction: column !important;
    gap: 16px !important;
    grid-template-columns: unset !important;   /* 2列指定を完全リセット */
  }

  /* 各カードは幅いっぱい・余白調整 */
  body.mobile-view .dashboard-1280 > div.row > .card,
  body.mobile-view .dashboard-1280 > div.row-700 > .card,
  body.mobile-view .dashboard-1280 > div.row-half > .card,
  body.mobile-view .dashboard-1280 > div.row-full > .card,
  body.mobile-view #best5TableArea,
  body.mobile-view #worst5TableArea,
  body.mobile-view #eventComparisonArea,
  body.mobile-view #modelBestTableArea,
  body.mobile-view #modelWorstTableArea {
    display: block !important;  /* 横並び禁止 */
    width: 100% !important;
    margin: 0 !important;
  }

  /* 表は詰みすぎ回避＆可読性アップ */
  body.mobile-view table { 
    table-layout: fixed !important; 
    width: 100% !important; 
  }
  body.mobile-view td, 
  body.mobile-view th {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 左ロゴの余白を消す（必要なら） */
  body.mobile-view { padding-left: 0 !important; }

  /* ===== 並び順（指定の順で固定） ===== */
  body.mobile-view #avgGChartArea            { order: 1 !important; }
  body.mobile-view #gPlayPieChart            { order: 2 !important; }
  body.mobile-view #avgInoutChart            { order: 3 !important; }
  body.mobile-view #inoutPieChart            { order: 4 !important; }
  body.mobile-view #winRateChart             { order: 5 !important; }
  body.mobile-view #inoutMonthlyChart        { order: 6 !important; }
  body.mobile-view #best5TableArea           { order: 7 !important; }
  body.mobile-view #worst5TableArea          { order: 8 !important; }
  body.mobile-view #eventComparisonArea      { order: 9 !important; }
  body.mobile-view #modelBestTableArea       { order: 10 !important; }
  body.mobile-view #modelWorstTableArea      { order: 11 !important; }
}
/* ===== 600px以下：カード側の“横並び系”を完全リセットして 1列固定 ===== */
/* ===== 600px以下：表の可読性最優先チューニング ===== */
@media (max-width: 600px){
  /* カードの内側余白を少しだけ詰める */
  .card{ padding: 10px 12px !important; }

  /* テーブル：全体を小さめフォント＆タイトなパディングに */
  .dashboard-1280 table{ table-layout:fixed !important; width:100% !important; }
  .dashboard-1280 th, .dashboard-1280 td{
    font-size: 12px !important;
    padding: 6px 6px !important;
    line-height: 1.25 !important;
  }

  /* （重要）“名前系の列だけ” 2行まで表示して省略 */
  /* 機種ランキング：2列目（機種名）を2行で折返し */
  #modelBestTableArea td:nth-child(2),
  #modelWorstTableArea td:nth-child(2){
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  /* Best/Worst日別：イベント列（4列目）を2行で折返し */
  #best5TableArea td:nth-child(4),
  #worst5TableArea td:nth-child(4){
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  /* イベント別 指標：イベント名（2列目）を2行で折返し */
  #eventComparisonArea td:nth-child(2){
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  /* 数字列は横幅を取りすぎないよう letter-spacing を詰める（任意） */
  #modelBestTableArea td:nth-child(n+3),
  #modelWorstTableArea td:nth-child(n+3),
  #best5TableArea td:nth-child(3),
  #worst5TableArea td:nth-child(3),
  #eventComparisonArea td:nth-child(n+3){
    letter-spacing: 0 !important;
  }
}