/*
 * スマートフォン向けのレイアウト調整
 *
 * このスタイルシートでは、画面幅が狭い端末（主にスマートフォン）で
 * レイアウトが崩れる問題を解消するためのルールを定義しています。
 * PCサイズでは既存の `styles.css` が優先されるよう、
 * `@media` クエリの中でのみ上書きを行っています。
 */

@media screen and (max-width: 600px) {
  /* KPI カードを縦並びにする */
  .kpis {
    grid-template-columns: 1fr;
  }

  /* 汎用グリッドレイアウトを 1 カラムにまとめる */
  .grid2,
  .grid2even,
  .grid3,
  .grid-lk {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  /* `aside` 要素の sticky 指定を解除してフローに従わせる */
  .grid2 > aside {
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }

  /* グラフのスクローラーを画面幅いっぱいに広げる */
  .scroller {
    width: 100%;
    max-width: 100%;
    height: 280px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
  }

  /* テーブルが画面幅に収まるよう制約を解除 */
  table {
    min-width: unset;
    width: 100%;
  }
  th,
  td {
    font-size: 12px;
    padding: 6px 8px;
  }

  /* コントロール群を縦方向に並べて横幅を使い切る */
  .controls {
    flex-direction: column;
    align-items: stretch;
  }

  /* ボタンや入力部品の余白を調整し、窮屈さを軽減する */
  .pill {
    width: 100%;
    justify-content: space-between;
  }

  /* スマホ表示を80%に縮小しつつ空白を生じさせないように調整。
     画面をピンチアウトした状態に近づけるために全体を 0.8 倍に縮小し、
     幅を 125% (1/0.8) に設定して表示領域を補正しています。 */
  html {
    transform: scale(0.8);
    transform-origin: top left;
    width: calc(100% / 0.8);
  }

  /* カレンダーが画面幅より広い場合に横スクロールで閲覧できるようにする。
     各曜日のセル幅を固定し、7列合計で約500px程度の横幅を確保することで
     スマホ幅では横スクロールが発生し、内容が押し潰されるのを防ぎます。 */
  .calendar {
    overflow-x: auto;
    grid-template-columns: repeat(7, 70px);
  }

  /* モバイルではナビゲーション用 pill ボタンをさらに大きくしてタップしやすくする */
  nav .pill {
    font-size: 16px;
    padding: 12px 18px;
  }
}