/* ============================================================
   MATERIAL SYMBOLS SHARP ICONS
   Used as event chip icons via eventContent in js/main.js.
   ============================================================ */
.material-symbols-sharp {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
  font-size: 16px;
  line-height: 1;
  vertical-align: middle;
}

/* font-size needs this specificity -- Google's Material Symbols stylesheet
   loads after this file and sets .material-symbols-sharp to 24px. */
.fc-event .material-symbols-sharp {
  color: currentColor;
  font-size: 18px;
}

.fc-event-custom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.fc-event-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.fc-event-custom span:last-child {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}


/* ============================================================
   MOBILE (max-width: 1000px)
   Truncate event chip text on small screens.
   ============================================================ */
@media (max-width: 1000px) {
  .fc-event-custom {
    min-width: 0;
  }

  .fc-event-custom span:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .fc-event-custom {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
  }

  .fc-event-icon {
    flex: 0 0 auto;
  }

  .fc-event-icon .material-symbols-sharp {
    font-size: 5px;
  }
}