/* ── /request/ calendar restyle ────────────────────────────────────────────
   Scoped under #calendar so these overrides never leak into the admin
   staff-schedule calendar (administration/staff_index.html), which also
   loads FullCalendar and appt-common.css.
   Teal palette comes from common-base.css:
     --bs-primary:        #96c2b7
     --bs-primary-lighter:#aad3cd
     --bs-darker:         #54928f
     --bs-primary-bg:     #dcebebda
   ─────────────────────────────────────────────────────────────────────── */

/* Flat, borderless grid */
#calendar .fc,
#calendar .fc-scrollgrid,
#calendar .fc-scrollgrid table,
#calendar .fc-scrollgrid tr,
#calendar .fc-scrollgrid td,
#calendar .fc-scrollgrid th,
#calendar .fc-theme-standard td,
#calendar .fc-theme-standard th {
  border: none !important;
  background: #fff !important;
}

#calendar .fc-scrollgrid {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

/* Weekday column headers */
#calendar .fc-col-header-cell-cushion {
  color: #6c757d !important;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none !important;
  padding: 10px 0 8px;
}

#calendar .fc-col-header-cell {
  border: none !important;
  background: transparent !important;
}

/* Day cells */
#calendar .fc-daygrid-day {
  border: none !important;
  background: transparent !important;
  padding: 0;
}

/* The body's first row sits inside the sticky weekday header section and
   overlaps it vertically, which would clip the day-number circles against
   the header. padding-top on the day-frame pushes the circles down by the
   overlap amount. We apply it to *every* row (not just :first-child) so all
   rows have the same outer height — otherwise row 1 ends up ~25px taller
   than rows 2-5, producing a disproportionate gap between row 1 and row 2.
   With box-sizing defaulting to content-box, min-height constrains the
   content area and the padding stacks on top of it, so every frame becomes
   55 (content) + 25 (padding) = 80px tall uniformly. */
#calendar .fc-daygrid-day-frame {
  position: relative;
  min-height: 55px !important;
  padding-top: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#calendar .fc-daygrid-day-top {
  justify-content: center !important;
}

/* Circular day number */
#calendar .fc-daygrid-day-number {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 0.92rem;
  font-weight: 600;
  color: #212529;
  text-decoration: none !important;
  transition: transform 0.15s ease, background-color 0.15s ease,
    color 0.15s ease;
}

/* Available days: light-teal circle, bold teal text */
#calendar .fc-daygrid-day:not(.disabled-day):not(.fc-day-other) .fc-daygrid-day-number {
  background-color: var(--bs-primary-bg);
  color: var(--bs-darker);
  font-weight: 700;
}

/* Hover only on clickable (available) days */
#calendar .fc-daygrid-day:not(.disabled-day):not(.fc-day-other) .fc-daygrid-day-number:hover {
  transform: scale(1.06);
}

/* Neutralise the whole-cell rectangle that appt-common.css paints on
   .selected-cell (background-color + border-color on the cell div itself).
   Also clear FullCalendar's own .fc-highlight selection overlay. */
#calendar .selected-cell,
#calendar .fc-highlight {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Selected day: solid dark-teal circle, white text (number only) */
#calendar .selected-cell .fc-daygrid-day-number {
  background-color: var(--bs-darker) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(84, 146, 143, 0.35);
}

/* Today: remove FullCalendar's default yellow background + add a small dot */
#calendar .fc-daygrid-day.fc-day-today {
  background: transparent !important;
}

#calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  position: relative;
}

#calendar .fc-daygrid-day.fc-day-today .fc-daygrid-day-number::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bs-darker);
}

/* Disabled / past / no-availability days: plain muted number, no circle */
#calendar .disabled-day {
  background: transparent !important;
  opacity: 1 !important;
}

#calendar .disabled-day .fc-daygrid-day-number {
  background: transparent !important;
  color: #c4c9cf !important;
  font-weight: 500;
}

/* Other-month cells (kept blank via showNonCurrentDates:false) */
#calendar .fc-daygrid-day.fc-day-other {
  background: transparent !important;
}

#calendar .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
  background: transparent !important;
  color: transparent !important;
}

/* Toolbar: title left, arrows right */
#calendar .fc-toolbar-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #212529 !important;
  letter-spacing: 0.01em;
}

#calendar .fc-toolbar-chunk {
  display: flex !important;
  align-items: center !important;
  gap: 4px;
}

/* Extra breathing room between the < prev and > next month buttons */
#calendar .fc-button-group {
  gap: 12px;
}

#calendar .fc-button-group .fc-button + .fc-button {
  margin-left: 0;
}

/* Prev / next arrows: minimal circular gray controls, teal hover */
#calendar .fc-button {
  background-color: #f1f3f5 !important;
  border: none !important;
  color: #6c757d !important;
  font-size: 1rem !important;
  width: 34px;
  height: 34px;
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transition: background-color 0.15s ease, color 0.15s ease,
    transform 0.15s ease !important;
}

#calendar .fc-button:hover {
  background-color: var(--bs-primary-bg) !important;
  color: var(--bs-darker) !important;
  transform: none;
  box-shadow: none !important;
}

#calendar .fc-button:active,
#calendar .fc-button:focus {
  background-color: var(--bs-primary-bg) !important;
  color: var(--bs-darker) !important;
  box-shadow: none !important;
  outline: none !important;
}

#calendar .fc-button:disabled {
  background-color: #f8f9fa !important;
  color: #dee2e6 !important;
  cursor: default;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #calendar .fc-daygrid-day-frame {
    min-height: 38px;
    padding-top: 15px;
  }

  #calendar .fc-daygrid-day-number {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }

  #calendar .fc-col-header-cell-cushion {
    font-size: 0.65rem;
    padding: 8px 0 12px;
  }
}

@media (max-width: 450px) {
  #calendar .fc-daygrid-day-frame {
    min-height: 34px;
    padding-top: 10px;
  }

  #calendar .fc-daygrid-day-number {
    width: 30px;
    height: 30px;
    font-size: 0.78rem;
  }

  #calendar .fc-col-header-cell-cushion {
    font-size: 0.6rem;
    padding: 6px 0 10px;
  }

  #calendar .fc-toolbar-title {
    font-size: 0.95rem !important;
  }

  #calendar .fc-button {
    width: 30px;
    height: 30px;
    font-size: 0.85rem !important;
  }
}