/* ========== 患者UIスマホ最適化（既存を壊さない“後勝ち”層） ========== */

/* ベース */
:root {
  --fg: #111;
  --muted: #666;
  --accent: #0b875b;     /* 既存の緑系に寄せる */
  --bg: #fff;
  --bg-soft: #f6f8fa;
  --radius: 12px;
  --tap: 44px;           /* 最低タップ領域 */
}

html, body {
  color: var(--fg);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

/* 共通ボタン（既存クラスがあれば上書きしない） */
.btn, .button, button {
  min-height: var(--tap);
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  color: var(--accent);
  font-weight: 600;
  line-height: 1.2;
  touch-action: manipulation;
}

/* 主要アクション */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* 日付ナビ（前日 / 今日 / 翌日）を横スクロール可能に */
.p-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 12px;
  -webkit-overflow-scrolling: touch;
}
.p-nav::-webkit-scrollbar { display: none; }

/* 予約タイプチップ */
.p-chips {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 12px;
}
.p-chip {
  min-height: var(--tap);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.1);
  background: #fff;
  color: var(--fg);
}
.p-chip.is-active { border-color: var(--accent); color: var(--accent); }

/* テーブル→カード化（スマホ時） */
@media (max-width: 720px) {
  /* テーブル枠は残すが、行をカード風に */
  table.p-slots {
    border-collapse: separate;
    border-spacing: 0 10px;
    width: 100%;
  }
  table.p-slots thead { display: none; } /* 見出し非表示 */
  table.p-slots tr {
    display: block;
    background: var(--bg-soft);
    border-radius: var(--radius);
    padding: 10px 12px;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
  }
  table.p-slots td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border: 0 !important;
  }

  /* 左に時刻、右に状態やボタン */
  .slot-time { font-size: 16px; font-weight: 700; }
  .slot-meta { font-size: 12px; color: var(--muted); }

  /* 予約ボタンは横幅いっぱいに（誤タップ防止） */
  .slot-action {
    width: 100%;
    margin-top: 8px;
  }
  .slot-action .btn, .slot-action button {
    width: 100%;
  }

  /* 画面上下の安全域（iPhone等のセーフエリア対応） */
  .p-safe {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* ステータス色（既存の色味を踏襲） */
.badge { padding: 4px 8px; border-radius: 999px; font-size: 12px; }
.badge-open    { background: #e9f7ef; color: #1b5e20; }  /* 空き */
.badge-internal{ background: #fdeef3; color: #ad1457; }  /* 内部のみ（ピンク系） */
.badge-closed  { background: #fff8e1; color: #b26a00; }  /* 完全クローズ（黄系） */
.badge-reserved{ background: #e8f5e9; color: #2e7d32; }  /* 予約済（緑系） */

/* 固定フッターのアクションバー（必要なら） */
@media (max-width: 720px) {
  .p-footerbar {
    position: sticky;
    bottom: 0;
    left: 0; right: 0;
    background: #fff;
    border-top: 1px solid rgba(0,0,0,.08);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
}