/* ============================================================
   カレンダーモード（?type=cal）追加スタイル
   - おうちのぜんぶ テーマ（緑 #01AD2D）に合わせる
   - 既存 component-form の見た目を踏襲し、cal- 接頭辞で最小限
   ============================================================ */
:root { --cal-green: #2F8F39; --cal-green-d: #1B6E2F; }

/* 希望日時 行（component-form__row を踏襲・高さ可変） */
.cal-row { height: auto !important; align-items: stretch !important; }
.cal-row .component-form__control { display: block; padding-top: 14px; padding-bottom: 14px; }

/* 相談形式 */
.cal-format { display: flex; align-items: center; gap: 16px; background: #f7faf7; border: 1px solid #e0e8e0;
  border-radius: 6px; padding: 8px 14px; margin-bottom: 12px; font-size: 14px; }
.cal-format b { color: #333; }
.cal-format label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: #555; }
.cal-format input { accent-color: var(--cal-green); }

/* 週ナビ */
.cal-weeknav { display: flex; align-items: center; border: 1px solid #d8d8d8; border-radius: 6px 6px 0 0; background: #fff; }
.cal-weeknav button { background: none; border: none; color: var(--cal-green); font-weight: 700; font-size: 14px;
  padding: 8px 14px; cursor: pointer; font-family: inherit; }
.cal-weeknav button:disabled { color: #c8c8c8; cursor: default; }
.cal-weeklabel { flex: 1; text-align: center; font-weight: 700; font-size: 14px; color: #333; }

/* マトリクス */
.cal-matrix-wrap { overflow-x: auto; border: 1px solid #d8d8d8; }
.cal-matrix { border-collapse: collapse; width: 100%; min-width: 540px; font-size: 14px; }
.cal-matrix th, .cal-matrix td { border: 1px solid #e3e3e3; text-align: center; padding: 8px 4px; }
.cal-matrix thead th { background: #f2f7f2; color: var(--cal-green-d); font-weight: 700; white-space: nowrap; line-height: 1.3; }
.cal-matrix thead th.sat { color: #3273dc; } .cal-matrix thead th.sun { color: #e2553b; }
.cal-matrix td.tm { background: #fafcfa; color: #555; font-weight: 700; white-space: nowrap; }
.cal-matrix td .mk { display: flex; align-items: center; justify-content: center; height: 24px; font-size: 17px; font-weight: 700; }
.cal-matrix td.av  { cursor: pointer; } .cal-matrix td.av .mk  { color: var(--cal-green); }
.cal-matrix td.few { cursor: pointer; } .cal-matrix td.few .mk { color: #e69a17; }
.cal-matrix td.full{ cursor: pointer; } .cal-matrix td.full .mk{ color: #cc4444; }
.cal-matrix td.past{ background: #f6f6f6; }
.cal-matrix td.av:hover, .cal-matrix td.few:hover { background: #eaf7ec; }
.cal-matrix td.sel { background: var(--cal-green) !important; }
.cal-matrix td.sel .mk { color: #fff !important; }

.cal-legend { display: flex; gap: 16px; font-size: 12px; color: #888; margin-top: 8px; flex-wrap: wrap; }
.cal-msg { font-size: 13px; color: #888; padding: 8px 0; }
.cal-msg.err { color: #cc4444; }

/* 生成中グレーアウト */
.cal-loading { opacity: .5; pointer-events: none; }

/* 選択サマリー（カレンダーモードでは担当者名は出さない） */
.cal-chosen { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--cal-green-d); display: none; }
.cal-chosen.show { display: block; }

/* ×クリック / プレビューのポップアップ */
.cal-pop { margin-top: 10px; border: 1px solid var(--cal-green); border-radius: 6px; background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.12); display: none; }
.cal-pop.show { display: block; }
.cal-pop-h { background: var(--cal-green); color: #fff; font-weight: 700; font-size: 14px; padding: 7px 12px;
  border-radius: 5px 5px 0 0; display: flex; justify-content: space-between; align-items: center; }
.cal-pop-h .x { cursor: pointer; }
.cal-pop-b { padding: 10px 12px; font-size: 13px; color: #444; overflow-x: auto; }
.cal-pop-b ul { margin: 6px 0 0 18px; } .cal-pop-b li { margin-bottom: 4px; }

/* プレビュー クロス表 */
.cal-xtab { border-collapse: collapse; font-size: 12.5px; white-space: nowrap; }
.cal-xtab th, .cal-xtab td { border: 1px solid #e3e3e3; padding: 6px 10px; text-align: center; }
.cal-xtab thead th { background: #eef6ef; color: var(--cal-green-d); font-weight: 700; }
.cal-xtab th.colsel, .cal-xtab td.colsel { background: #fff7e0; }
.cal-xtab td.nm { text-align: left; font-weight: 700; color: #333; white-space: nowrap; }
.cal-xtab td.st { text-align: left; }
.cal-xtab td.st .ok { color: var(--cal-green-d); font-weight: 700; }
.cal-xtab td.st .x  { color: #cc4444; font-weight: 700; }
.cal-xtab tr.is-busy td.nm { color: #999; }
.cal-xtab .dash { color: #999; }
.cal-note { font-size: 11.5px; color: #999; margin-top: 8px; }

/* 担当者のご案内 */
.cal-guide { width: 100%; }
.cal-assign { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cal-tg { border: 1px solid var(--cal-green); background: #fff; color: var(--cal-green-d); border-radius: 18px;
  padding: 5px 16px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.cal-tg.on { background: var(--cal-green); color: #fff; }
.cal-auto { font-size: 14px; color: #333; }
.cal-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.cal-card { border: 1.5px solid #cecece; border-radius: 8px; padding: 10px 18px; min-width: 120px; text-align: center; cursor: pointer; background: #fff; }
.cal-card:hover { border-color: var(--cal-green); }
.cal-card.on { border-color: var(--cal-green); background: #eef7ec; }
.cal-card .nm { font-size: 14px; font-weight: 700; color: #333; }
.cal-card .rl { font-size: 11px; color: #999; margin-top: 2px; }

/* 新デザイン（p-reserve）内のカレンダーブロック調整 */
.p-rsv-cal-block .cal-weeknav { border-radius: 11px 11px 0 0; }
.p-rsv-cal-block .cal-matrix-wrap { border-radius: 0 0 11px 11px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.p-rsv-cal-block .cal-legend { font-size: 12.5px; color: #9A9C8E; }
.p-rsv-cal-block .cal-chosen { font-size: 14.5px; }
.p-rsv-cal-staff { margin-top: 4px; }

/* 後ほど調整するボタン */
.cal-adjust-later { margin-top: 14px; }
.cal-adjust-later-label {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; font-size: 14px; color: #555;
  padding: 10px 16px; border: 1.5px solid #d0d0d0; border-radius: 8px;
  background: #fafafa; transition: border-color .2s, background .2s, color .2s;
  user-select: none; line-height: 1.5;
}
.cal-adjust-later-label:hover { border-color: var(--cal-green); background: #f2faf3; }
.cal-adjust-later-label input[type="radio"] { display: none; }
.cal-adjust-later-circle {
  width: 20px; height: 20px; min-width: 20px; border-radius: 50%;
  border: 2px solid #ccc; background: #fff; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s;
}
.cal-adjust-later-label.is-checked { border-color: var(--cal-green); background: #f2faf3; color: var(--cal-green-d); font-weight: 700; }
.cal-adjust-later-label.is-checked .cal-adjust-later-circle { border-color: var(--cal-green); background: var(--cal-green); }
.cal-adjust-later-label.is-checked .cal-adjust-later-circle::after {
  content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; background: #fff;
}

/* カレンダー未生成時のグレー案内バー（相談内容 未選択） */
.cal-msg.cal-placeholder { background:#ececec; color:#555; text-align:center; padding:14px 12px; border-radius:4px; font-size:13px; margin:6px 0 2px; }