:root {
  --fc-small-font-size: .85em;
  --fc-page-bg-color: #fff;
  --fc-neutral-bg-color: rgba(208, 208, 208, 0.3);
  --fc-neutral-text-color: #808080;
  --fc-border-color: #e0e0e0;

  /* Buttons - dark gray instead of red for better appearance */
  --fc-button-text-color: #fff;
  --fc-button-bg-color: #343a40;
  --fc-button-border-color: #343a40;
  --fc-button-hover-bg-color: #dc3545;
  --fc-button-hover-border-color: #dc3545;
  --fc-button-active-bg-color: #c82333;
  --fc-button-active-border-color: #bd2130;

  /* Events - darker red with better contrast */
  --fc-event-bg-color: #c82333;
  --fc-event-border-color: #bd2130;
  --fc-event-text-color: #fff;
  --fc-event-selected-overlay-color: rgba(0, 0, 0, 0.25);

  --fc-more-link-bg-color: #e9ecef;
  --fc-more-link-text-color: #495057;

  --fc-event-resizer-thickness: 8px;
  --fc-event-resizer-dot-total-width: 8px;
  --fc-event-resizer-dot-border-width: 1px;

  --fc-non-business-color: rgba(215, 215, 215, 0.3);
  --fc-bg-event-color: rgb(143, 223, 130);
  --fc-bg-event-opacity: 0.3;
  --fc-highlight-color: rgba(188, 232, 241, 0.3);
  --fc-today-bg-color: rgba(255, 220, 40, 0.15);
  --fc-now-indicator-color: #dc3545;
}

/* Calendar container */
#calendar {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  padding: 20px;
  border: 1px solid #e9ecef;
}

/* Header toolbar */
.fc .fc-toolbar {
  margin-bottom: 1.5em;
}

.fc .fc-toolbar-title {
  font-size: 1.4em;
  font-weight: 600;
  color: #212529;
}

/* Buttons */
.fc .fc-button {
  padding: 8px 16px;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s ease;
  text-transform: capitalize;
}

.fc .fc-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

.fc .fc-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.fc .fc-button-primary:not(:disabled).fc-button-active {
  background-color: #dc3545;
  border-color: #dc3545;
}

/* Day grid header */
.fc .fc-col-header-cell {
  background: #f8f9fa;
  padding: 12px 8px;
  font-weight: 600;
  color: #495057;
  border-bottom: 2px solid #dee2e6;
}

.fc .fc-col-header-cell-cushion {
  color: #495057;
  text-decoration: none;
}

/* Day cells */
.fc .fc-daygrid-day {
  transition: background-color 0.2s ease;
}

.fc .fc-daygrid-day:hover {
  background-color: rgba(0,0,0,0.02);
}

.fc .fc-daygrid-day-number {
  padding: 8px 10px;
  font-weight: 500;
  color: #495057;
  text-decoration: none;
}

.fc .fc-daygrid-day-number:hover {
  color: #dc3545;
}

/* Today highlight */
.fc .fc-day-today {
  background-color: rgba(255, 193, 7, 0.12) !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
  background: #ffc107;
  color: #212529;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Events - White card style with colored left border */
.fc .fc-daygrid-event,
.fc .fc-daygrid-block-event {
  background-color: #fff !important;
  border: 1px solid #dee2e6 !important;
  border-left: 4px solid #dc3545 !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  margin: 1px 3px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.fc .fc-daygrid-event:hover,
.fc .fc-daygrid-block-event:hover {
  background-color: #f8f9fa !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.12);
}

.fc .fc-daygrid-event-harness {
  cursor: pointer;
  margin-bottom: 2px;
}

/* Event text - Dark text on white background */
.fc .fc-daygrid-event .fc-event-title,
.fc .fc-daygrid-event .fc-event-content,
.fc .fc-daygrid-event div,
.fc .fc-event-main,
.fc-event-content {
  color: #212529 !important;
  font-weight: 600 !important;
  font-size: 0.85em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dot event style (list-like display in cells) */
.fc .fc-daygrid-dot-event {
  background-color: #fff !important;
  border: 1px solid #dee2e6 !important;
  border-left: 4px solid #dc3545 !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  margin: 1px 3px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.fc .fc-daygrid-dot-event:hover {
  background-color: #fff5f5 !important;
  border-left-color: #a71d2a !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.fc .fc-daygrid-dot-event .fc-event-title,
.fc .fc-daygrid-dot-event .fc-event-content,
.fc .fc-daygrid-dot-event div {
  color: #212529 !important;
  font-weight: 600 !important;
  font-size: 0.9em !important;
}

/* Hide the dot indicator since we use border-left */
.fc .fc-daygrid-event-dot {
  display: none !important;
}

/* Event main container */
.fc .fc-event-main {
  padding: 0 !important;
}

/* Links */
.fc a {
  color: #495057;
  text-decoration: none;
}

.fc a:hover {
  color: #dc3545;
}

/* More link (+X more) */
.fc .fc-more-link {
  background: #e9ecef;
  color: #495057;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: 600;
  transition: all 0.2s ease;
}

.fc .fc-more-link:hover {
  background: #dc3545;
  color: #fff;
}

/* Popover (when clicking +more) */
.fc .fc-popover {
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  border: 1px solid #dee2e6;
}

.fc .fc-popover-header {
  background: #f8f9fa;
  padding: 10px 12px;
  font-weight: 600;
  border-radius: 8px 8px 0 0;
}

.fc .fc-popover-body {
  padding: 8px;
}

/* Let FullCalendar own scroller height — only suppress horizontal bar */
.fc-scroller {
  overflow-x: hidden !important;
}

/* Prevent event text from overflowing into adjacent cells */
.fc .fc-daygrid-day-frame {
  overflow: hidden !important;
  position: relative;
}

.fc .fc-daygrid-event {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.fc .fc-daygrid-event-harness {
  overflow: hidden !important;
  max-width: 100% !important;
}

/* Event content styling */
.fc-event-title,
.fc-event-title-container {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.fc .fc-daygrid-day-events {
  overflow: hidden !important;
  max-width: 100% !important;
  padding: 2px 4px;
}

/* Ensure day cells clip content */
.fc-daygrid-day {
  overflow: hidden !important;
}

.fc-daygrid-day-top {
  overflow: hidden !important;
}

/* Event inner content */
.fc .fc-daygrid-event > div {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Force table cells to clip - critical for preventing overflow */
.fc table {
  table-layout: fixed !important;
}

.fc td {
  overflow: hidden !important;
}

/* Limit event width to cell width — do NOT override position on harness-abs (FC uses absolute) */
.fc-daygrid-event-harness {
  max-width: 100% !important;
}

.fc-daygrid-event-harness-abs {
  left: 0 !important;
  right: 0 !important;
}

/* Weekend styling */
.fc .fc-day-sat,
.fc .fc-day-sun {
  background-color: rgba(0,0,0,0.015);
}

/* Past days */
.fc .fc-day-past {
  opacity: 0.7;
}

.fc .fc-day-past .fc-daygrid-day-number {
  color: #adb5bd;
}

/* Mobile responsive */
@media (max-width: 768px) {
  #calendar {
    padding: 12px;
    border-radius: 8px;
  }

  .fc .fc-toolbar {
    flex-direction: column;
    gap: 10px;
  }

  .fc .fc-toolbar-title {
    font-size: 1.2em;
  }

  .fc .fc-button {
    padding: 6px 12px;
    font-size: 0.9em;
  }

  .fc .fc-daygrid-day-number {
    padding: 4px 6px;
    font-size: 0.9em;
  }

  .fc-event {
    font-size: 0.75em;
    padding: 1px 4px;
  }
}

/* Multi-line event (showing track + org) */
.fc-event-content {
  overflow: hidden;
  max-width: 100%;
  color: inherit;
}

.fc-event-multi {
  white-space: normal !important;
  line-height: 1.2;
}

.fc-event-multi .fc-event-track {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-event-multi .fc-event-org {
  font-size: 0.8em;
  font-weight: 400;
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

/* Dot event multi-line styling */
.fc .fc-daygrid-dot-event .fc-event-multi .fc-event-org {
  color: #868e96 !important;
  font-weight: 400 !important;
}

/* Track-based color coding for events - left border highlight */
/* Color palette - 12 distinct colors */
.fc-event[data-track-color="0"] { border-left-color: #e74c3c !important; }
.fc-event[data-track-color="1"] { border-left-color: #3498db !important; }
.fc-event[data-track-color="2"] { border-left-color: #2ecc71 !important; }
.fc-event[data-track-color="3"] { border-left-color: #9b59b6 !important; }
.fc-event[data-track-color="4"] { border-left-color: #e67e22 !important; }
.fc-event[data-track-color="5"] { border-left-color: #1abc9c !important; }
.fc-event[data-track-color="6"] { border-left-color: #34495e !important; }
.fc-event[data-track-color="7"] { border-left-color: #f39c12 !important; }
.fc-event[data-track-color="8"] { border-left-color: #16a085 !important; }
.fc-event[data-track-color="9"] { border-left-color: #8e44ad !important; }
.fc-event[data-track-color="10"] { border-left-color: #2980b9 !important; }
.fc-event[data-track-color="11"] { border-left-color: #c0392b !important; }

/* Map container height */
.map-container {
  height: 500px !important;
  min-height: 500px;
}

@media (max-width: 768px) {
  .map-container {
    height: 350px !important;
    min-height: 350px;
  }
}

/* Past events: still visible but de-emphasised so the calendar shows the full
   month context (was previously hidden by clamping dateFrom to today). */
.fc .fc-event.fc-event-past,
.fc .fc-daygrid-event.fc-event-past {
  opacity: 0.5;
  filter: grayscale(100%);
}
.fc .fc-event.fc-event-past:hover,
.fc .fc-daygrid-event.fc-event-past:hover {
  opacity: 1;
  filter: grayscale(40%);
}

/* Past-day events: render at ~50% of normal height to compress old context. */
.fc .fc-day-past .fc-daygrid-event {
  font-size: 0.7em;
  line-height: 1.15;
  padding: 1px 4px;
}
.fc .fc-day-past .fc-event-multi .fc-event-track,
.fc .fc-day-past .fc-event-multi .fc-event-org {
  font-size: 0.95em;
  line-height: 1.1;
}
.fc .fc-day-past .fc-daygrid-more-link {
  font-size: 0.75em;
  padding-top: 1px;
}

/* Day-detail modal: list of events for a clicked day */
#dayDetailModal .modal-dialog { max-width: 560px; }
#dayDetailModal .modal-title { font-size: 1.05rem; font-weight: 600; }
#dayDetailModal .dp-day-event-list { list-style: none; padding: 0; margin: 0; }
#dayDetailModal .dp-day-event-list.is-past .dp-day-event { filter: grayscale(40%); }
#dayDetailModal .dp-day-event {
  border-left: 3px solid #e74c3c;
  background: #f8f9fa;
  margin-bottom: 8px;
  border-radius: 4px;
  transition: background 0.15s;
}
#dayDetailModal .dp-day-event:hover { background: #eef1f4; }
#dayDetailModal .dp-day-event-link {
  display: block;
  padding: 8px 12px;
  color: inherit;
  text-decoration: none;
}
#dayDetailModal .dp-day-event-link:hover { text-decoration: none; color: inherit; }
/* Match the calendar event styling: track on top (bold), org/event below (muted). */
#dayDetailModal .dp-day-event-track {
  font-weight: 600;
  font-size: 0.95rem;
  color: #222;
  line-height: 1.25;
}
#dayDetailModal .dp-day-event-org {
  font-size: 0.82rem;
  color: #6c757d;
  line-height: 1.2;
  margin-top: 1px;
}
#dayDetailModal .dp-day-event[data-track-color="0"] { border-left-color: #e74c3c; }
#dayDetailModal .dp-day-event[data-track-color="1"] { border-left-color: #3498db; }
#dayDetailModal .dp-day-event[data-track-color="2"] { border-left-color: #2ecc71; }
#dayDetailModal .dp-day-event[data-track-color="3"] { border-left-color: #9b59b6; }
#dayDetailModal .dp-day-event[data-track-color="4"] { border-left-color: #e67e22; }
#dayDetailModal .dp-day-event[data-track-color="5"] { border-left-color: #1abc9c; }
#dayDetailModal .dp-day-event[data-track-color="6"] { border-left-color: #34495e; }
#dayDetailModal .dp-day-event[data-track-color="7"] { border-left-color: #f39c12; }
#dayDetailModal .dp-day-event[data-track-color="8"] { border-left-color: #16a085; }
#dayDetailModal .dp-day-event[data-track-color="9"] { border-left-color: #8e44ad; }
#dayDetailModal .dp-day-event[data-track-color="10"] { border-left-color: #2980b9; }
#dayDetailModal .dp-day-event[data-track-color="11"] { border-left-color: #c0392b; }

/* Make whole calendar cell feel clickable */
.fc .fc-daygrid-day { cursor: pointer; }
.fc .fc-daygrid-day:hover { background: rgba(0,0,0,0.02); }