/**
 * Vanilla Datepicker CSS - jQuery UI代替スタイル
 * 約2KB（jQuery UI CSS 35KB の代替）
 */
.vdp-picker {
  position: absolute;
  z-index: 9999;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 16px;
  width: 280px;
  font-family: inherit;
  display: none;
}

.vdp-picker.is-open {
  display: block;
  animation: vdpFadeIn 0.2s ease;
}

@keyframes vdpFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.vdp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}

.vdp-title {
  font-weight: bold;
  font-size: 1rem;
  color: #333;
}

.vdp-prev,
.vdp-next {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 4px;
  color: #666;
  transition: background-color 0.2s, color 0.2s;
}

.vdp-prev:hover,
.vdp-next:hover {
  background: #f0f0f0;
  color: #333;
}

.vdp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 8px;
}

.vdp-weekdays span {
  text-align: center;
  font-size: 0.75rem;
  color: #999;
  padding: 4px;
}

.vdp-weekdays span:first-child {
  color: #e74c3c;
}

.vdp-weekdays span:last-child {
  color: #3498db;
}

.vdp-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.vdp-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  font-size: 0.875rem;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.2s, color 0.2s;
  color: #333;
}

.vdp-day:hover:not(.vdp-disabled):not(.vdp-empty) {
  background: #f0f0f0;
}

.vdp-day.vdp-empty {
  cursor: default;
}

.vdp-day.vdp-disabled {
  color: #ccc;
  cursor: not-allowed;
  text-decoration: line-through;
}

.vdp-day.vdp-today {
  background: #e3f2fd;
  color: #1976d2;
  font-weight: bold;
}

.vdp-day.vdp-selected {
  background: #1976d2;
  color: #fff;
}

.vdp-day.vdp-selected:hover {
  background: #1565c0;
}

/* 日曜日（1列目） */
.vdp-days .vdp-day:nth-child(7n+1):not(.vdp-disabled) {
  color: #e74c3c;
}

/* 土曜日（7列目） */
.vdp-days .vdp-day:nth-child(7n):not(.vdp-disabled) {
  color: #3498db;
}

/* 選択状態は白文字を優先 */
.vdp-day.vdp-selected {
  color: #fff !important;
}

/* レスポンシブ対応 */
@media (max-width: 480px) {
  .vdp-picker {
    width: calc(100vw - 32px);
    max-width: 320px;
    left: 16px !important;
    right: 16px;
  }
}