.month {
  background: white;
  padding: 15px;
  /* padding-top:0;
  padding-left:0;
  padding-right:0; */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.month h2 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  margin-left:-15px;
  margin-top:-15px;
  margin-right:-15px;
  color: #ffffff;
  /*background:rgb(230, 81, 81);*/
  padding: 0.5rem;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.month:nth-of-type(1) h2 {
  background-color: #8B0000; /* Dark Red */
  color: white;
}
.month:nth-of-type(2) h2 {
  background-color: #A52A2A; /* Brownish Red */
  color: white;
}
.month:nth-of-type(3) h2 {
  background-color: #B22222; /* Firebrick */
  color: white;
}
.month:nth-of-type(4) h2 {
  background-color: #DC143C; /* Crimson */
  color: white;
}
.month:nth-of-type(5) h2 {
  background-color: #C0392B; /* Red shade (Flat UI) */
  color: white;
}
.month:nth-of-type(6) h2 {
  background-color: #E74C3C; /* Light Red (Flat UI) */
  color: white;
}
.month:nth-of-type(7) h2 {
  background-color: #FF6F61; /* Coral Red */
  color: white;
}
.month:nth-of-type(8) h2 {
  background-color: #FF6347; /* Tomato */
  color: white;
}
.month:nth-of-type(9) h2 {
  background-color: #FF4500; /* Orange Red */
  color: white;
}
.month:nth-of-type(10) h2 {
  background-color: #CD5C5C; /* Indian Red */
  color: white;
}
.month:nth-of-type(11) h2 {
  background-color: #F08080; /* Light Coral */
  color: black;
}
.month:nth-of-type(12) h2 {
  background-color: #FA8072; /* Salmon */
  color: black;
}






.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: bold;
  margin-bottom: 5px;
  color: #555;
}

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.day, .empty {
  background: #eaeaea;
  padding: 8px;
  text-align: center;
  border-radius: 4px;
}

.day {
  background-color: #ffffff;
  border: 1px solid #ccc;
  transition: background 0.2s;
  position: relative;
}

.day:hover {
  background-color: #dff1ff;
  cursor: pointer;
}

.day.selected-ok {
  background-color: #a3e635; /* green */
  border-color: #7cb518;
  color: #1a1a1a;
  font-weight: bold;
}

.day.selected-maybe {
  background-color: #facc15; /* yellow */
  border-color: #eab308;
  color: #1a1a1a;
  font-weight: bold;
}

.day.holiday {
  color: #dc2626; /* Tailwind red-600 */
  font-weight: bold;
}


.day::after {
  content: attr(data-others);
  font-size: 0.65em;
  position: absolute;
  top: 0px;
  right: 0px;
  background: #1976d2;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  display: none;
}
.day[data-others]:not([data-others="0"])::after {
  display: block;
}

.non-clickable {
  color: #aaa;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
  user-select: none;
}