@charset "UTF-8";
/* jQuery UI Datepicker SCSS版 */
/* datepicker本体 */
.ui-datepicker {
  width: 17em;
  padding: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0.2em;
  box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.15);
  z-index: 9999;
  position: absolute;
  display: none;
}

/* ヘッダー部分 */
.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 0.5em 0.6em;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  border-radius: 0.2em 0.2em 0 0;
  text-align: center;
}

/* 前月・次月ボタン */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2em;
  height: 2em;
  cursor: pointer;
  font-size: 0.875em;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
  color: #1976d2;
}

.ui-datepicker .ui-datepicker-prev {
  left: 0.5em;
}

.ui-datepicker .ui-datepicker-next {
  right: 0.5em;
}

/* 前月・次月ボタンのアイコン */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-weight: normal;
}

.ui-datepicker .ui-datepicker-prev span::before {
  display: inline-block;
  content: "";
  border-style: solid;
  border-width: 0.3em 0.5em 0.3em 0;
  border-color: transparent currentColor transparent transparent;
}

.ui-datepicker .ui-datepicker-next span::before {
  display: none;
}

.ui-datepicker .ui-datepicker-next span::after {
  display: inline-block;
  content: "";
  border-style: solid;
  border-width: 0.3em 0 0.3em 0.5em;
  border-color: transparent transparent transparent currentColor;
}

/* 月・年タイトル */
.ui-datepicker .ui-datepicker-title {
  margin: 0;
  line-height: 1.8;
  text-align: center;
  font-weight: bold;
  color: #333;
}
.ui-datepicker .ui-datepicker-title select {
  width: auto;
}

/* 月・年の選択ドロップダウン */
.ui-datepicker .ui-datepicker-month,
.ui-datepicker .ui-datepicker-year {
  padding: 0.2em 0.3em;
  margin: 0 0.125em;
}

/* カレンダーテーブル */
.ui-datepicker table {
  width: 100%;
  font-size: 90%;
  border-collapse: collapse;
  margin: 0;
}

/* 曜日ヘッダー */
.ui-datepicker thead {
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.ui-datepicker th {
  padding: 0.5em 0;
  text-align: center;
  font-weight: bold;
  color: #666;
  font-size: 70%;
  border: none;
}

/* 日付セル */
.ui-datepicker td {
  border: none;
  padding: 0;
  text-align: center;
}

/* 日付リンク */
.ui-datepicker td a,
.ui-datepicker td span {
  display: block;
  padding: 0.375em;
  text-align: center;
  text-decoration: none;
  color: #333;
  border-radius: 0.2em;
  margin: 0.0625em;
}

/* 選択可能な日付 */
.ui-datepicker td a {
  cursor: pointer;
}
.ui-datepicker td a:hover {
  background: #e3f2fd;
  color: #1976d2;
}

/* 今日の日付 */
.ui-datepicker td.ui-datepicker-today a {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeaa7;
}
.ui-datepicker td.ui-datepicker-today a:hover {
  background: #ffeaa7;
}

/* 選択された日付 */
.ui-datepicker td.ui-datepicker-current-day a,
.ui-datepicker td.ui-state-active a {
  background: #1976d2;
  color: #fff;
}
.ui-datepicker td.ui-datepicker-current-day a:hover,
.ui-datepicker td.ui-state-active a:hover {
  background: #1565c0;
}

/* 選択不可能な日付（他月・無効日） */
.ui-datepicker td.ui-datepicker-other-month span,
.ui-datepicker td.ui-datepicker-unselectable span,
.ui-datepicker td.ui-state-disabled span {
  color: #ccc;
  cursor: default;
}

/* 週番号（使用時） */
.ui-datepicker .ui-datepicker-week-col {
  padding: 0.375em;
  color: #999;
  font-size: 0.6875em;
}

/* ボタンパネル（今日・クリアボタン等） */
.ui-datepicker .ui-datepicker-buttonpane {
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  padding: 0.5em;
  text-align: right;
  border-radius: 0 0 0.2em 0.2em;
}
.ui-datepicker .ui-datepicker-buttonpane button {
  background: #6c757d;
  color: white;
  border: none;
  padding: 0.25em 0.5em;
  margin: 0 0.125em;
  border-radius: 0.2em;
  font-size: 0.6875em;
  cursor: pointer;
}
.ui-datepicker .ui-datepicker-buttonpane button:hover {
  background: #5a6268;
}

/* 複数月表示時 */
.ui-datepicker.ui-datepicker-multi {
  width: auto;
}
.ui-datepicker.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}
.ui-datepicker.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto 0.25em;
}

/* RTL（右から左）サポート */
.ui-datepicker.ui-datepicker-rtl {
  direction: rtl;
}
.ui-datepicker.ui-datepicker-rtl .ui-datepicker-prev {
  right: 0.5em;
  left: auto;
}
.ui-datepicker.ui-datepicker-rtl .ui-datepicker-next {
  left: 0.5em;
  right: auto;
}

/* レスポンシブ対応 */
@media (max-width: 30em) {
  .ui-datepicker {
    width: 90vw;
    max-width: 18.75em;
    font-size: 0.875em;
  }
  .ui-datepicker td a,
.ui-datepicker td span {
    padding: 0.5em 0.25em;
  }
}