#calendar-dashboard {
  min-height: 90vh;
  padding: 32px !important;
  background: #101715;
  color: #d7dfd9;
  transition: transform 8s ease;
}

#calendar-dashboard .calendar-card {
  background: #17211c;
  border-color: #34483b;
  color: #d7dfd9;
}

#calendar-dashboard .text-secondary {
  color: #9aad9e !important;
}

#calendar-dashboard .calendar-clock {
  font-size: clamp(64px, 9vw, 120px);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -3px;
  font-variant-numeric: tabular-nums;
}

#calendar-dashboard .calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

#calendar-dashboard .calendar-day {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

#calendar-dashboard .calendar-day.is-outside {
  opacity: 0.25;
}

#calendar-dashboard .calendar-day.is-today {
  background: #a9c5a0;
  color: #17261b;
  font-weight: 600;
}

/* 横幅が十分ある場合は、今日の予定70%・月間30% */
@media (min-width: 992px) {
  #calendar-dashboard section.col-lg-8 {
    width: 70%;
  }

  #calendar-dashboard section.col-lg-4 {
    width: 30%;
  }

  #calendar-dashboard.is-reversed section.col-lg-8 {
    order: 2;
  }

  #calendar-dashboard.is-reversed section.col-lg-4 {
    order: 1;
  }

  #calendar-dashboard.is-reversed header {
    flex-direction: row-reverse;
  }
}

/* 狭い画面では上下の並び順を交換 */
@media (max-width: 991.98px) {
  #calendar-dashboard.is-reversed section.col-lg-8 {
    order: 2;
  }

  #calendar-dashboard.is-reversed section.col-lg-4 {
    order: 1;
  }
}

@media (max-width: 575.98px) {
  #calendar-dashboard {
    padding: 20px !important;
  }
}