/* カレンダーのスタイルカスタマイズ */
.dads-date-picker__inputs {
  /* ボーダーの色を変更可能 */
  border-color: var(--color-border);
}

.dads-date-picker__inputs:focus-within {
  border-color:  none;
}

/* カレンダーのすべてのボーダーを削除 */
.dads-calendar {
  border: none !important;
}

.dads-calendar__table {
  border: none !important;
}

.dads-calendar__header-cell {
  border: none !important;
}

.dads-calendar__data-cell {
  border: none !important;
}

/* カレンダーの入力フィールドのボーダーを削除 */
.dads-date-picker__input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.dads-date-picker__input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.dads-date-picker__input:hover {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* フォーカス時のボーダーを削除 */
.dads-calendar__date:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.dads-calendar__nav-button:focus {
  border: 1px solid var(--color-orange) !important;
  outline: none !important;
  box-shadow: none !important;
}

.dads-calendar__nav-button:active {
  border: 1px solid var(--color-orange) !important;
}

.dads-calendar__footer .dads-button:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.dads-select__select:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.dads-date-picker__calendar-button:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* カレンダーボタンのカスタマイズ */
.dads-date-picker__controls {
  gap: 2px !important;
}

.dads-date-picker__calendar-button {
  /* アイコンの色を変更可能 */
  color: var(--color-orange);
  border-radius: 0 4px 4px 0 !important;
  width: 64px !important;
  height: 50px !important;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.dads-date-picker__calendar-button:hover {
  color: var(--color-orange);
}

.dads-date-picker__calendar-icon {
  width: 24px;
  height: 24px;
  display: block;
}

.dads-date-picker__calendar-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}

/* カレンダーのカスタマイズ */
.dads-calendar {
  /* 背景色を変更可能 */
  background-color: var(--color-white);
  border-radius: 8px !important;
  overflow: hidden;
}

/* 選択された日付のカスタマイズ */
.dads-calendar__date[data-selected="true"] {
  background-color: var(--color-orange) !important;
  color: var(--color-white) !important;
}

/* 今日の日付のカスタマイズ */
.dads-calendar__date[data-today="true"] {
  border: none !important;
}

/* h2見出しを非表示 */
.dads-u-visually-hidden {
  display: none !important;
}

/* ナビゲーションボタンのカスタマイズ */
.dads-calendar__nav-button {
  color: var(--color-orange) !important;
  border: 1px solid var(--color-orange) !important;
  border-color: var(--color-orange) !important;
  cursor: pointer;
}

.dads-calendar__nav-button:hover {
  cursor: pointer;
  border: 1px solid var(--color-orange) !important;
  /* その他のホバースタイルを削除 */
  background-color: transparent !important;
  opacity: 1 !important;
}

.dads-calendar__nav-button:focus {
  border-color: var(--color-orange) !important;
  outline-color: var(--color-orange) !important;
}

.dads-calendar__nav-button svg {
  color: var(--color-orange) !important;
  fill: var(--color-orange) !important;
}

.dads-calendar__nav-button:hover svg {
  color: var(--color-orange) !important;
  fill: var(--color-orange) !important;
  opacity: 1 !important;
}

/* 曜日ヘッダーのカスタマイズ */
.dads-calendar__header-cell {
  color: var(--color-black);
  font-weight: var(--font-weight-bold);
}

/* カレンダーのセルのカスタマイズ */
.dads-calendar__date {
  color: var(--color-black);
}

.dads-calendar__date:hover {
  background-color: var(--color-beige);
  text-decoration: none !important;
  border-bottom: none !important;
}

/* 「削除」と「今日」ボタンのカスタマイズ */
.dads-calendar__footer .dads-button {
  color: var(--color-orange) !important;
  cursor: pointer;
}

.dads-calendar__footer .dads-button:hover {
  cursor: pointer;
  /* その他のホバースタイルを削除 */
  background-color: transparent !important;
  color: var(--color-orange) !important;
  opacity: 1 !important;
}

.dads-calendar__footer .dads-button[data-type="outline"] {
  border-color: var(--color-orange) !important;
  color: var(--color-orange) !important;
}

.dads-calendar__footer .dads-button[data-type="outline"]:hover {
  cursor: pointer;
  /* その他のホバースタイルを削除 */
  background-color: transparent !important;
  color: var(--color-orange) !important;
  opacity: 1 !important;
}

/* 年のselectのカスタマイズ */
.dads-calendar .dads-select__select {
  border: 1px solid var(--color-black) !important;
  border-radius: 4px;
}

.dads-calendar .dads-select__select:focus {
  border: 1px solid var(--color-black) !important;
  outline: none !important;
  box-shadow: none !important;
}

.dads-calendar .dads-select__select:hover {
  border: 1px solid var(--color-black) !important;
}
/* 入力フィールドのサイズと間隔の統一 */
.dads-date-picker__inputs {
  border: none !important;
  background-color: transparent !important;
  display: flex !important;
  gap: 2px !important;
  align-items: center;
  padding: 0 !important;
  height: auto !important;
  max-height: none !important;
}

.dads-date-picker__year,
.dads-date-picker__month,
.dads-date-picker__day {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-shrink: 0;
}

/* すべての入力フィールドを同じサイズに */
.dads-date-picker__input {
  width: 48px !important;
  height: 50px !important;
  background-color: white !important;
  border: none !important;
  margin: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* 年の入力フィールド - 左側のみ角丸 */
.dads-date-picker__year .dads-date-picker__input {
  border-radius: 4px 0 0 4px !important;
}

/* 月と日の入力フィールド - 角丸なし */
.dads-date-picker__month .dads-date-picker__input,
.dads-date-picker__day .dads-date-picker__input {
  width: 48px !important;
  height: 50px !important;
  border-radius: 0 !important;
}

/* ラベルのネガティブマージンを削除 */
.dads-date-picker__month:not(:first-child),
.dads-date-picker__day:not(:first-child) {
  margin-left: 0 !important;
}

.dads-date-picker__month:last-child,
.dads-date-picker__day:last-child {
  padding-right: 0 !important;
}

/* プレースホルダーのスタイル */
.dads-date-picker__input::placeholder {
  font-weight: var(--font-weight-medium);
  opacity: 1;
  text-align: center;
}

/* z-indexの修正 - カレンダーを検索ボタンの上に表示 */
.dads-date-picker__calendar-popover {
  z-index: 1000 !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: 0px 0px 20px 0px #0000001A !important;
  left: auto !important;
  right: 0 !important;
}

/* モバイル（SP）でカレンダーを左端に表示 */
@media (max-width: 1024px) {
  .dads-date-picker__calendar-popover {
    left: 0 !important;
    right: auto !important;
  }
}