/* =========================================
   Fever Chart Tool - clinic CSS
   ========================================= */

/* 全体の箱（ページ内でこのツール部分だけ整える） */
#fcCaptureArea,
.fever-chart-tool,
#feverChartTool {
  box-sizing: border-box;
}

#fcCaptureArea * {
  box-sizing: border-box;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* 画面の最大幅（スマホ/PCで見やすく） */
#fcCaptureArea {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 12px;
}

/* =========================================
   レイアウト：行（row）
   ========================================= */
#fcCaptureArea .row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;      /* 横が長い時に自然に折り返す */
  gap: 8px;
  margin: 8px 0;
}

#fcCaptureArea .row label {
  min-width: 3.5em;
  white-space: nowrap;
  font-size: 14px;
}

/* 入力欄の共通 */
#fcCaptureArea input[type="date"],
#fcCaptureArea input[type="time"],
#fcCaptureArea input[type="number"],
#fcCaptureArea select {
  height: 36px;
  padding: 6px 8px;
  border: 1px solid #cfcfcf;
  border-radius: 8px;
  background: #fff;
  font-size: 16px; /* iOSの自動ズーム防止 */
}

/* =========================================
   体温入力欄：見切れ対策（38.2 など）
   ========================================= */
#fcCaptureArea .temp-input,
#fcCaptureArea #fcTemp {
  width: 8em;           /* 38.2/39.5 が見切れない */
  min-width: 120px;     /* スマホ対策 */
  padding-right: 12px;  /* numberスピンボタン分 */
}

/* =========================================
   ボタン共通
   ========================================= */
#fcCaptureArea button {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 34px;
}

#fcCaptureArea button:hover {
  filter: brightness(0.98);
}

#fcCaptureArea button:active {
  transform: translateY(1px);
}

/* トグルボタン（症状/子ども/解熱剤） */
#fcCaptureArea .toggle {
  height: 34px;
  line-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
}

/* 選択中（active） */
#fcCaptureArea .toggle.active {
  background: #f1f1f1;
  border-color: #9b9b9b;
}

/* ボタングループ（横並び） */
#fcCaptureArea .btn-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* =========================================
   子ども切替ボタン（fcChildGroup）
   ========================================= */
#fcChildGroup .child.toggle.active {
  background: #e9f2ff;
  border-color: #7aa7e6;
}

/* =========================================
   症状ボタン（fcSymptomGroup）
   - 「体温入力の次の行」に置くのはPHPで配置換え
   - ここでは見た目を整える
   ========================================= */
#fcSymptomGroup .symptom.toggle {
  min-width: 3.2em;
}

#fcSymptomGroup .symptom.toggle.active {
  background: #fff3e0;
  border-color: #f0b36a;
}

/* =========================================
   解熱剤（fcAntipyreticGroup / fcAntiChild）
   ========================================= */

/* 解熱剤トグルが選択されたとき（わかりやすく） */
#fcAntipyreticGroup .antipyretic.toggle.active {
  background: #ffeaea;
  border-color: #cc0000;
}

/* 解熱剤の子どもセレクトが横に長い問題を抑える */
#fcAntiChild {
  width: auto;
  min-width: 7.5em;   /* 1人目/2人目/3人目が収まる */
  max-width: 10em;
  padding: 6px 8px;
}

/* 解熱剤の日時入力も詰める（任意だが見やすい） */
#fcAntiDate,
#fcAntiTime {
  width: auto;
  min-width: 9.5em;
}

/* =========================================
   グラフ領域：白抜け/スクロール問題の対策（重要）
   ========================================= */

/* キャプチャ領域に高さを確保（Chart.js は親の高さが重要） */
#fcCaptureArea {
  /* ここはフォーム＋グラフ全体なので、必要なら増やしてください */
}

/* グラフのラッパーがある場合は、そちらに高さを付けてもOK
   （HTML側でグラフ周りに div を作っている場合に対応）
*/
#fcChartWrap,
.fc-chart-wrap {
  width: 100%;
  height: 420px;
}

/* Canvas そのものに高さを付ける（最低限これで白抜け回避） */
#fcChart {
  width: 100% !important;
  height: 380px !important;
  display: block;

  /* スマホでcanvasがスクロールを奪う問題の対策 */
  touch-action: pan-y !important;
}

/* =========================================
   履歴テーブル
   ========================================= */
#fcHistory {
  width: 100%;
  margin-top: 12px;
}

#fcHistory table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#fcHistory th,
#fcHistory td {
  border: 1px solid #e2e2e2;
  padding: 6px 8px;
  vertical-align: middle;
}

#fcHistory th {
  background: #f7f7f7;
  font-weight: 600;
}

#fcHistory td button {
  height: 30px;
  line-height: 28px;
  padding: 0 10px;
  border-radius: 8px;
}

/* =========================================
   小さい画面向け微調整
   ========================================= */
@media (max-width: 480px) {
  #fcCaptureArea {
    padding: 10px;
  }

  #fcCaptureArea .row label {
    min-width: 3em;
  }

  #fcChart {
    height: 360px !important;
  }

  #fcHistory table {
    font-size: 12px;
  }
}

/* 行の区切り（1行空白っぽく見せる） */
#fcCaptureArea .row.row-gap {
  margin-top: 18px;
}

/* 解熱剤行のあとに1行空白 */
#fcCaptureArea .row.action-row {
  margin-top: 20px;  /* 1行空白っぽい間隔 */
}

/* 主要アクションボタンだけ色を変える */
#fcCaptureArea .row.action-row button {
  border-color: #6b8cff;
  background: #eaf0ff;
}

/* ホバー */
#fcCaptureArea .row.action-row button:hover {
  filter: brightness(0.97);
}

/* リセットだけは注意色にする（任意：分かりやすく） */
#fcCaptureArea #fcReset {
  border-color: #ff6b6b;
  background: #ffecec;
}

/* 空白専用行 */
#fcCaptureArea .row.spacer {
  height: 16px;   /* 1行分の余白 */
}

/* 解熱剤の「グラフに追加」ボタンだけ色を変える */
#fcAddAntipyretic {
  background: #e8f4ff;        /* やさしい青 */
  border-color: #7bb6e8;
  color: #003a66;
  font-weight: 600;
}

/* hover */
#fcAddAntipyretic:hover {
  background: #dcedff;
}

/* 押したとき */
#fcAddAntipyretic:active {
  transform: translateY(1px);
}