/* src/App.css */
:root {
  --border-cal: 2px solid #eeeeee;
  --color-base: #3f3f3f;
  --color-thead: #eeeeee;
  --color-expired: #cccccc;
  --color-unavailable: #cccccc;
  --color-available: #69cdb9;
  --fill-thead: #3f3f3f;
  --fill-expired: #eeeeee;
  --fill-unavailable: #eeeeee;
  --fill-empty: #eeeeee;
}

.calendar {
  width: 100%;
  border-radius: 5px;
  display: grid;
  grid-template-rows: auto auto 1fr; /* Header, day names, body */
  color: var(--color-base);
}

.cal__title {
  padding: 1em 0;
  text-align: center;
  font-weight: 700;
}

.cal__thead {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 7 columns for days */
  color: var(--color-thead);
  background-color: var(--fill-thead);
  border: 2px solid var(--fill-thead);
}
.cal__th {
  padding: 0.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cal__cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 7 columns for days */
  border: var(--border-cal);
  border-top: none;
}
.cal__row {
  display: contents; /* Use grid layout */
}
.cal__day {
  padding: 0.5em;
  height: 5.5rem;
  gap: 0.5em;
  display: flex;
  flex-direction: column; /* Stack date and availability vertically */
  justify-content: center;
  align-items: center;
  border-right: var(--border-cal); /* Right border for each day */
  border-bottom: var(--border-cal); /* Bottom border for each day */
  color: inherit;
}
.cal__day:nth-child(7n) {
  border-right: none; /* Remove right border for the last day in each row */
}
.cal__row:last-child .cal__day {
  border-bottom: none; /* Remove bottom border for the last row */
}
.cal__day.empty,
.cal__day.closed,
.cal__day.expired,
.cal__day.tbc {
  pointer-events: none;
  cursor: default;
}
.cal__day.empty {
  background: var(--fill-empty);
}
.cal__day.closed {
  color: var(--color-unavailable);
  background: var(--fill-unavailable);
}
.cal__day.unavailable {
  color: var(--color-unavailable);
}
.cal__day.expired,
.cal__day.tbc {
  background: var(--fill-expired);
  color: var(--color-expired);
}


.cal__day .date {
  font-size: 1.2em; /* Increase font size for better visibility */
  line-height: 1;
}
.cal__day .availabilities {
  display: none;
}
.cal__day .availabilities:has([data-value="1"]) {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  display: block;
  background-color: var(--color-available);
}

#cal_date_status_table tr.unavailable td {
  color: var(--color-unavailable);
}
#cal_date_status_table td:last-child {
  text-align: right;
}
#cal_date_status_table tr:last-child td {
  border-bottom: 1px solid #ddd;
}