/* === Base Styles === */
body {
  font-family: Arial, sans-serif;
  font-size: 12px;
}

/* === Appointment Blocks (highlighted in clinic orange) === */
.appointment {
  background-color: #FFA500;
  color: #FFFFFF;
  border: 1px solid #CC8400;
}

/* Appointment hover or active state for visibility */
.appointment:hover,
.appointment.active {
  background-color: #CC8400; /* slightly darker */
}

/* === Appointment types by status or provider === */
/* Example: cancelled appointments remain visible but subdued */
.appointment.cancelled {
  background-color: #E69500;
  color: #FFFFFF;
  opacity: 0.7;
  text-decoration: line-through;
}

/* Upcoming or pending may use a lighter tint */
.appointment.pending {
  background-color: #FFB733; /* tinted orange */
  color: #000000;
}

/* === Time‑slot background (e.g. lunch break) === */
.timeslot.lunch {
  background-color: #FFF4DF; /* gentle tint */
}

/* === Column widths and borders for grid structure === */
.column {
  width: 120px;
  border-left: 1px solid #CC8400;
}

/* === Appointment text styling === */
.appointment .title {
  font-weight: bold;
}

.appointment .subtitle {
  font-size: 10px;
}

/* === Highlight emergency bookings === */
.appointment.emergency {
  background-color: #FF4500; /* vivid orange-red to stand out */
  color: #FFFFFF;
}