/* --- 釣行記録の詳細 --- */

/* 緯度経度の行。座標の右に地図を開くボタンを置く (狭い画面ではボタンが下に回る) */
.ac-geo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* 地図・タイドグラフの表示ブロック。ボタンを押すと、その下に描画される */
.ac-media { margin-top: 24px; }

.ac-media > * + * { margin-top: 8px; }

/* 主カードの下に積むカード (使用したタックル・釣果) */
.ac-card { margin-top: 24px; }

/* 釣行ルートの地図。クラスは js/activity/activity_route.js が読み込み後に付ける */
.map-loaded { height: 400px; }

.map-loaded iframe {
  width: 100% !important;
  height: 400px !important;
}

/* タイドグラフ。Chart.js は maintainAspectRatio: false なので、
   この枠の高さがそのままグラフの高さになる (指定しないと canvas 既定の 150px になる) */
.ac-tide {
  position: relative;
  height: 450px;
}

/* --- FITファイルからの登録: 登録方法の STEP カード。幅は .th-card-grid-3 に任せる --- */
.ac-fit-step {
  align-items: center;
  text-align: center;
}

.ac-fit-step-icon {
  margin: 10px 0;
  font-size: 28px;
  color: var(--th-color-link);
}

/* --- FITファイルからの登録: DEBUG時だけ出る確認用の表示 --- */
.ac-debug { margin-top: 24px; }

.ac-debug-list {
  margin: 0;
  padding-left: 1.4em;
  font-size: 13px;
}

.ac-debug-pre {
  max-height: 400px;
  margin: 0 0 8px;
  padding: 10px;
  overflow: auto;
  font-size: 12px;
  background: var(--th-color-surface);
  border: var(--th-border-inner);
}

/* --- 釣果の表 (.ac-catch-table): 1 行 1 釣果で、選んだ行へまとめて入力する --- */
/* フォームのコンテナ (700px) には収まりきらないので最小幅を与える。
   指定しないと表が列を潰してしまい、魚種の選択欄が読めなくなる。
   はみ出した分は .th-table-scroll が横スクロールで見せる (他の一覧表と同じ扱い) */
.ac-catch-table { min-width: 700px; }

/* セルの中の入力欄は枠いっぱいに広げ、行の高さを揃える */
.ac-catch-table td input,
.ac-catch-table td select {
  width: 100%;
  min-width: 0;
}

/* チェックボックスは枠いっぱいに広げない(選択の列と、詳細の中の「削除」) */
.ac-catch-table td input[type="checkbox"] { width: auto; }

/* 選択とチェックの列は内容の幅だけでよい */
.ac-catch-table .ac-catch-check,
.ac-catch-table .ac-catch-more { width: 1%; white-space: nowrap; }

/* 列幅は入力欄に必要な分だけ与え、余りは「釣った場所」に回す。
   日時の入力欄は幅を詰めるとブラウザがカレンダーの絵文字を隠すので 175px は残す */
.ac-catch-table .ac-catch-at { width: 170px; }

.ac-catch-table .ac-catch-species { width: 120px; }

/* 数値の列は 3〜4 桁入れば足りるので、名前や場所に幅を譲る */
.ac-catch-table .ac-catch-num { width: 76px; }

/* 畳んである詳細の行。本体の行と地続きに見えないよう地色を変える */
.ac-catch-detail > td { padding: 12px; background: var(--th-gray-100); }

.ac-catch-errors > td { padding-top: 0; }

/* 一括入力の枠は表の上に置く。節の中の節なので上下の余白を詰める */
.ac-catch-bulk { margin: 0 0 16px; }

/* --- 種類のアイコン (components/activity_icon.html) ---
   色は置いた場所の文字色を継ぐ。線画なので、塗りつぶしの枠に入れず地の上にそのまま置く */
.ac-icon {
  flex: none;
  width: 22px;
  height: 22px;
}