/* ============================== */
/* FullCalendar container style   */
/* ============================== */
#calendar {
  width: 100%;
  border: 2px solid var(--secondary-color);	/*   Border color from website-styling.css     */	
  border-radius: 6px;
  padding: 10px;
  box-sizing: border-box;
  position: relative;
  display: block;
}

/* Removed fixed height to allow collapse when in table mode */
#calendar-summary-wrapper {
  padding-bottom: 20px; /* Optional breathing room */
  transition: min-height 0.3s ease;
}


/* ====================== */
/* TEMP DEBUG OVERLAY     */
/* ====================== */
#calendar-width-debug,
#summary-width-debug {
  position: fixed;
  background: orange;
  color: black;
  padding: 4px 8px;
  font-size: 12px;
  font-family: monospace;
  z-index: 9999;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

#calendar-width-debug {
  top: 10px;
  left: 10px;
}

#summary-width-debug {
  top: 40px;
  left: 10px;
}


/* ================================== */
/* FullCalendar internal styling      */
/* ================================== */
.fc-toolbar-title {
  font-family: inherit;
  font-size: 1.2em;
  font-weight: normal;
  color: inherit;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

.fc-toolbar.fc-header-toolbar {
  position: relative;
}

.fc .fc-today-button.fc-button-primary:disabled {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
  color: white !important;
  opacity: 1 !important;
  cursor: default;
}

.fc .fc-today-button,
.fc .fc-prev-button,
.fc .fc-next-button {
  background-color: #0B5FE9;
  color: white !important;
}

.fc .fc-today-button:hover,
.fc .fc-prev-button:hover,
.fc .fc-next-button:hover {
  background-color: #3B82F6;
  color: white !important;
}

.fc-day-today {
  background-color: rgba(255, 234, 0, 0.07);
}

.fc-day-past {
  background-color: rgba(255, 98, 0, 0.1);
}
.fc-day-future {
  background-color: rgba(0, 255, 234, 0.04);
}

.fc .fc-event {
  background-image: none !important;
}


/* ======================= */
/* Event Color Coding      */
/* ======================= */
.current-future-event,
.current-future-event .fc-event-title {
  background-color: limegreen !important;
  color: black !important;
  border: none !important;
  border-radius: 3px;
  padding: 2px 4px;
  font-weight: bold;
  font-size: 12px;
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.past-event,
.past-event .fc-event-title {
  background-color: #f8d7da !important;
  color: lightgray;
  border: none !important;
  border-radius: 3px;
  padding: 2px 4px;
  font-weight: normal;
  font-size: 10px;
  white-space: normal !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
}


/* ========================= */
/* Responsive View Toggle    */
/* ========================= */

/* Always apply table base style, even if hidden */
#event-summary {
  width: 95%;
  margin: auto;
  border: 2px solid var(--secondary-color);	/*   Border color from website-styling.css     */
  border-radius: 6px;
  padding: 10px;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 14px;

  /* Fix for rounded corners by using separate border model */
  border-collapse: separate;
  border-spacing: 0;

  display: none;          /* Use 'none' initially to hide */
  
  /* Smooth transition for dynamic height */
  overflow: hidden;
  transition: height 0.3s ease;
}

#event-summary th,
#event-summary td {
  border-bottom: 1px solid var(--table-row-underline);		/*   table row underline     */
  padding: 8px;
  text-align: left;
}

/* Round top corners of header cells */
#event-summary thead tr th:first-child {
  border-top-left-radius: 6px;
}
#event-summary thead tr th:last-child {
  border-top-right-radius: 6px;
}

/* Round bottom corners of last row cells */
#event-summary tbody tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}
#event-summary tbody tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

#event-summary th {
  background-color: var(--table-head-bg-color);	 /* Event Summary background colour from website-styling.css */
  font-weight: bold;
}

#event-summary tr:nth-child(even) {
  background-color: #fdfdfd;
}

#event-summary tr:hover {
  background-color: #ffeec2;
}

/* Removed media query — JS now fully controls the toggle */