/* =========================================
   CT・MRI検査 予約フォーム
   flatpickr デザイン調整 Ver1.0.1
========================================= */

/* 対象をCT-MRIフォームに限定 */
#service {

  /* ========= 色定義（ここだけ触れば調整可能） ========= */
 --fp-border-color: #ccc;
 --fp-text-enabled: #333;
 --fp-text-disabled: #ccc;
 --fp-bg-default: #fff;
 --fp-bg-hover: #DDD;
 --fp-bg-selected: #3b82f6;/* flatpickr標準ブルー寄せ */
 --fp-text-selected: #fff;
}
/* 前月・翌月（日付は表示しないが枠線は表示） */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  background: var(--fp-bg-default);
  color: transparent !important;
  pointer-events: none;
  cursor: default;
}

/* ===== カレンダー全体 ===== */
.flatpickr-calendar {
	box-shadow: none;
	border: 1px solid var(--fp-border-color);
	border-bottom:none;
	border-right:none;
	border-radius:0;
}
.flatpickr-calendar.open {
	max-width: min(80vw, 640px);
}

/* ===== 月・年 ===== */
.flatpickr-months {
	align-items:center;
	border-bottom:solid 1px var(--fp-border-color);
	border-right:solid 1px var(--fp-border-color);
}
.flatpickr-months .flatpickr-month {
	display:flex;
	align-items:center;
	min-height:48px;
}
.flatpickr-months .flatpickr-month .flatpickr-current-month {
	display:flex;
	justify-content:center;
	align-items:center;
	padding:0;
}

/* ===== 曜日行 ===== */
.flatpickr-weekdays {
	height:auto;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
	align-items:stretch;
}
/* ===== 曜日セル ===== */
span.flatpickr-weekday {
	display:flex;
	justify-content:center;
	align-items:center;
	width: calc(100% / 7);
	height:auto;
	aspect-ratio:4 / 3;
	border-bottom:solid 1px var(--fp-border-color);
	border-right:solid 1px var(--fp-border-color);
}
.flatpickr-weekday {
	color: #666;
	font-weight: normal;
}

/* ===== 日付 ===== */
.flatpickr-days {
	width: 100%;
	border-bottom:none;
	border-right:none;
}
.dayContainer {
	width: 100%;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
}
/* ===== 日付セル共通 ===== */
.flatpickr-day {
	border-radius: 0; /* 円 → 四角 */
	background: var(--fp-bg-default);
	color: var(--fp-text-enabled);
	border-top:solid 0 var(--fp-border-color);
	border-left:solid 0 var(--fp-border-color);
	border-right: solid 1px var(--fp-border-color);
	border-bottom: solid 1px var(--fp-border-color);
	border-color: var(--fp-border-color) !important;
	box-sizing: border-box;
	width: calc(100% / 7);
	max-width:none;
	height:auto;
	line-height:1;
	aspect-ratio: 1 / 1;
	display:flex;
	justify-content:center;
	align-items:center;
}
.flatpickr-day:hover {
	border-color: var(--fp-border-color) !important;
}

/* ===== hover（選択可能日のみ） ===== */
.flatpickr-day:not(.flatpickr-disabled):hover {
	background: var(--fp-bg-hover);
	color: var(--fp-text-enabled);
}
/* ===== 選択中 ===== */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange {
	background: var(--fp-bg-selected);
	color: var(--fp-text-selected);
}
/* ===== 選択不可 ===== */
.flatpickr-day.flatpickr-disabled {
	background: var(--fp-bg-default);
	color: var(--fp-text-disabled);
	cursor: not-allowed;
}
/* hoverしても変えない */
.flatpickr-day.flatpickr-disabled:hover {
	background: var(--fp-bg-default);
	color: var(--fp-text-disabled);
}
/* ===== 今日 ===== */
/*.flatpickr-day.today {
  border: 1px solid var(--fp-bg-selected);
}*/

/* 今日＋選択中 */
.flatpickr-day.today.selected {
	background: var(--fp-bg-selected);
	color: var(--fp-text-selected);
}