conference-room-booking-system/frontend/src/styles/CalendarView.css

/*
 * CalendarView.css
 * Styles for the calendar view component, including event colors, business hours, and layout.
 *
 * Author: Cliff Hill
 * Last updated: 2025-09-05
 */
/* =============================== */
/* Non-business hours styling      */
/* =============================== */
.fc-timegrid-col-bg .fc-non-business,
.fc-non-business {
  background: #888 !important;
  opacity: 0.5 !important;
}

/* =============================== */
/* Event content truncation        */
/* =============================== */
.fc-event-title-ellipsis,
.fc-event .fc-event-main > div,
.fc-event-title,
.fc-event-main,
.fc-event .fc-event-main-frame,
.fc-event .fc-event-title,
.fc-event .fc-event-title-container,
.fc-event .fc-event-time,
.fc-event .fc-event-title,
.fc-event .fc-event-title-container,
.fc-event .fc-event-main {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  display: block !important;
  width: 100%;
  min-width: 0;
}

/* =============================== */
/* Weekend and weekday styling     */
/* =============================== */
.fc .fc-daygrid-day.fc-day-sat .fc-daygrid-day-frame,
.fc .fc-daygrid-day.fc-day-sun .fc-daygrid-day-frame,
.fc .fc-timegrid-col.fc-day-sat,
.fc .fc-timegrid-col.fc-day-sun {
  background: #888 !important; /* unified non-business color */
  border-color: #bbb !important;
}

.fc .fc-daygrid-day.fc-day-sat .fc-daygrid-day-number,
.fc .fc-daygrid-day.fc-day-sun .fc-daygrid-day-number {
  color: #e0e0e0 !important;
  font-weight: 500 !important;
  opacity: 0.7 !important;
}

/* Weekday non-business hours      */
.fc .fc-non-business {
  background: #888 !important;
  opacity: 0.5 !important;
}

/* Workday all-day and time slots  */
.fc .fc-daygrid-day .fc-daygrid-day-frame,
.fc .fc-timegrid-col {
  background: #c0c0c0 !important;
}

/* Lighter border for all-day row on weekends */
.fc .fc-daygrid-day.fc-day-sat,
.fc .fc-daygrid-day.fc-day-sun {
  border-color: #bbb !important;
}

/* Out-of-month days styling       */
.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-frame {
  background: #aaa !important;
  opacity: 1 !important;
}
/* =============================== */
/* Calendar cell backgrounds       */
/* =============================== */
:root {
  --fc-page-bg-color: #a0a0a0;
  --fc-neutral-bg-color: #e3f2fd;
  --fc-today-bg-color: #e3f2fd;
  --fc-event-bg-color: #1976d2;
  --fc-border-color: #707070;
}

.calendarContainer {
  padding: 2rem;
  background: #f8fafc !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(30, 64, 175, 0.08) !important;
  /* Responsive container, no fixed height */
}

.calendar-scroll-area {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.fc {
  font-family: "Inter", "Roboto", Arial, sans-serif !important;
  box-shadow: none !important;
}

.fc .fc-toolbar {
  background: #1976d2 !important;
  color: #fff !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 0.5rem 1rem !important;
}

.fc .fc-toolbar-title {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
}

.fc .fc-button {
  background: #1976d2 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 0.3rem 0.8rem !important;
  margin: 0 0.2rem !important;
  font-weight: 500 !important;
  transition: background 0.2s !important;
}

.fc .fc-button:hover,
.fc .fc-button:focus {
  background: #1565c0 !important;
}

.fc .fc-daygrid-day {
  box-shadow: 0 1px 4px rgba(30, 64, 175, 0.08) !important;
  transition: box-shadow 0.2s !important;
}

.fc .fc-daygrid-day:hover {
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.16) !important;
  background: #e3f2fd !important;
}

.fc .fc-daygrid-day-number {
  font-weight: 600 !important;
  color: #1976d2 !important;
}

.fc .fc-event {
  color: #fff !important;
  padding: 2px 6px !important;
  font-size: 0.95rem !important;
  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.12) !important;
}

.fc .fc-event:hover {
  background: #1565c0 !important;
}

.fc .fc-day-today {
  background: #e3f2fd !important;
  border-radius: 8px !important;
}

.fc .fc-daygrid-day .fc-daygrid-day-frame {
  background: #c0c0c0 !important;
  box-shadow: 0 1px 4px rgba(30, 64, 175, 0.08) !important;
  transition: box-shadow 0.2s !important;
}

.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame {
  background: #d0d0d0 !important;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.16) !important;
}

.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-frame {
  background: #aaa !important;
  opacity: 1 !important;
}

.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
  color: #fff !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

.fc .fc-daygrid-day:hover .fc-daygrid-day-frame {
  background: #e3f2fd !important;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.16) !important;
}

.fc,
.fc-toolbar.fc-header-toolbar {
  margin-bottom: 0px !important;
}

/* =============================== */
/* Room color classes for events   */
/* =============================== */
/*
 * .room-color-0 to .room-color-19
 * Used to assign unique background colors to events based on room ID.
 * These classes are mapped in the frontend logic (getRoomClass).
 */
.room-color-0 {
  background: #1976d2 !important;
}
.room-color-1 {
  background: #388e3c !important;
}
.room-color-2 {
  background: #fbc02d !important;
}
.room-color-3 {
  background: #d32f2f !important;
}
.room-color-4 {
  background: #7b1fa2 !important;
}
.room-color-5 {
  background: #0288d1 !important;
}
.room-color-6 {
  background: #c2185b !important;
}
.room-color-7 {
  background: #ffa000 !important;
}
.room-color-8 {
  background: #009688 !important;
}
.room-color-9 {
  background: #8bc34a !important;
}
.room-color-10 {
  background: #e91e63 !important;
}
.room-color-11 {
  background: #00bcd4 !important;
}
.room-color-12 {
  background: #ff5722 !important;
}
.room-color-13 {
  background: #9c27b0 !important;
}
.room-color-14 {
  background: #3f51b5 !important;
}
.room-color-15 {
  background: #4caf50 !important;
}
.room-color-16 {
  background: #ff9800 !important;
}
.room-color-17 {
  background: #607d8b !important;
}
.room-color-18 {
  background: #795548 !important;
}
.room-color-19 {
  background: #b71c1c !important;
}

/* Ensure event text is readable on colored backgrounds */
.room-color-0,
.room-color-1,
.room-color-2,
.room-color-3,
.room-color-4,
.room-color-5,
.room-color-6,
.room-color-7,
.room-color-8,
.room-color-9,
.room-color-10,
.room-color-11,
.room-color-12,
.room-color-13,
.room-color-14,
.room-color-15,
.room-color-16,
.room-color-17,
.room-color-18,
.room-color-19 {
  color: #fff !important;
}