/* ============================================================
   VENUEHUB - EVENT CALENDAR
   ============================================================ */

.venue-calendar {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;

  background: var(--color-surface);
  color: var(--color-text);

  box-shadow: var(--shadow-sm);

  /*
   * IMPORTANT:
   * Do NOT use overflow: auto here.
   *
   * FullCalendar manages its own scrolling for
   * Week / Day / List views.
   */
  overflow: hidden;
}

/* ============================================================
   FULLCALENDAR ROOT
   ============================================================ */

.venue-calendar .fc {
  width: 100%;
  min-width: 0;
  min-height: 0;

  height: calc(100% - 66px);

  background: var(--color-surface);
  color: var(--color-text);

  font-size: var(--font-size-sm);
}

/*
 * We are using our own toolbar.
 * FullCalendar's default toolbar is disabled with:
 *
 * headerToolbar={false}
 *
 * Therefore .fc-header-toolbar is intentionally not styled.
 */

/* ============================================================
   CALENDAR SCROLL CONTAINER
   ============================================================ */

/*
 * Do not force overflow on every .fc-scroller.
 *
 * FullCalendar creates different scrollers for different views.
 * Forcing overflow:auto globally can create two scrollbars.
 */

.venue-calendar .fc-scroller {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
  border-bottom: 1px solid var(--color-border);
}

/* Chrome / Edge / Safari */

.venue-calendar .fc-scroller::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.venue-calendar .fc-scroller::-webkit-scrollbar-track {
  background: transparent;
}

.venue-calendar .fc-scroller::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 10px;
}

.venue-calendar .fc-scroller::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ============================================================
   CALENDAR GRID
   ============================================================ */

.venue-calendar .fc-scrollgrid {
  width: 100%;

  border: 1px solid var(--color-border);
  border-left: 0;
  border-right: 0;

  background: var(--color-surface);
}

/* ============================================================
   TABLE
   ============================================================ */

.venue-calendar .fc-scrollgrid table {
  border-collapse: collapse;
}

/* ============================================================
   COLUMN HEADER
   ============================================================ */

.venue-calendar .fc-col-header-cell {
  padding: 0;

  background: var(--color-bg);

  border-color: var(--color-border);
}

.venue-calendar .fc-col-header-cell-cushion {
  display: block;

  padding: 9px 7px;

  color: var(--color-text-secondary);

  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);

  line-height: var(--line-height-tight);

  text-decoration: none;
  text-transform: uppercase;

  letter-spacing: var(--letter-spacing-wide);
}

/* ============================================================
   MONTH DAY
   ============================================================ */

.venue-calendar .fc-daygrid-day {
  min-height: 120px;

  background: var(--color-surface);

  border-color: var(--color-border-light);

  transition: background-color var(--transition-fast);
}

.venue-calendar .fc-daygrid-day:hover {
  background: var(--color-surface-hover);
}

/* ============================================================
   DATE NUMBER
   ============================================================ */

.venue-calendar .fc-daygrid-day-number {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 26px;
  height: 26px;

  margin: 4px;
  padding: 0 5px;

  color: var(--color-text-secondary);

  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);

  text-decoration: none;
}

/* ============================================================
   OTHER MONTH DAYS
   ============================================================ */

.venue-calendar .fc-day-other {
  background: var(--color-bg);
}

.venue-calendar .fc-day-other .fc-daygrid-day-number {
  color: var(--color-text-muted);
}

/* ============================================================
   TODAY
   ============================================================ */

.venue-calendar .fc-day-today {
  background: var(--color-primary-light) !important;
}

.venue-calendar .fc-day-today .fc-daygrid-day-number {
  min-width: 26px;
  height: 26px;

  background: var(--color-primary);

  color: var(--color-text-inverse);

  border-radius: 50%;

  font-weight: var(--font-weight-semibold);
}

/* ============================================================
   EVENT
   ============================================================ */

.venue-calendar .fc-event {
  border-radius: 4px;

  cursor: pointer;

  padding: 0 !important;

  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.venue-calendar .fc-event:hover {
  opacity: 0.94;

  transform: translateY(-1px);

  box-shadow: var(--shadow-sm);
}

/* ============================================================
   MONTH EVENT
   ============================================================ */

.venue-calendar .fc-daygrid-event {
  margin: 2px 4px;

  min-height: 22px;

  padding: 2px 5px;

  border-width: 1px;

  border-radius: 4px;

  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

/* ============================================================
   CUSTOM EVENT CONTENT
   ============================================================ */

.venue-calendar .fc-custom-event {
  display: flex;

  align-items: center;

  width: 100%;
  min-width: 0;

  gap: 6px;

  padding: 1px 2px;

  overflow: hidden;

  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.venue-calendar .fc-custom-event-time {
  flex-shrink: 0;

  white-space: nowrap;

  font-weight: var(--font-weight-semibold);
}

.venue-calendar .fc-custom-event-title {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

/* ============================================================
   EVENT TITLE
   ============================================================ */

.venue-calendar .fc-event-title {
  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-weight: var(--font-weight-medium);
}

/* ============================================================
   EVENT TIME
   ============================================================ */

.venue-calendar .fc-event-time {
  font-weight: var(--font-weight-semibold);
}

/* ============================================================
   MORE EVENTS
   ============================================================ */

.venue-calendar .fc-daygrid-more-link {
  margin: 2px 5px;

  color: var(--color-primary);

  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);

  text-decoration: none;
}

.venue-calendar .fc-daygrid-more-link:hover {
  color: var(--color-primary-hover);

  text-decoration: underline;
}

/* ============================================================
   TIME GRID
   ============================================================ */

.venue-calendar .fc-timegrid {
  background: var(--color-surface);
}

/*
 * IMPORTANT:
 *
 * We don't set overflow:auto here.
 * FullCalendar controls the time-grid scrolling.
 */

.venue-calendar .fc-timegrid .fc-scroller {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

/* ============================================================
   TIME GRID SCROLLBAR
   ============================================================ */

.venue-calendar .fc-timegrid .fc-scroller::-webkit-scrollbar {
  width: 7px;
}

.venue-calendar .fc-timegrid .fc-scroller::-webkit-scrollbar-track {
  background: transparent;
}

.venue-calendar .fc-timegrid .fc-scroller::-webkit-scrollbar-thumb {
  background: var(--color-border);

  border-radius: 10px;
}

.venue-calendar .fc-timegrid .fc-scroller::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ============================================================
   TIME GRID SLOTS
   ============================================================ */

.venue-calendar .fc-timegrid-slot {
  height: 40px;

  border-color: var(--color-border-light);
}

/* ============================================================
   TIME LABEL
   ============================================================ */

.venue-calendar .fc-timegrid-slot-label-cushion {
  padding: 0 8px;

  color: var(--color-text-muted);

  font-size: var(--font-size-xs);
}

/* ============================================================
   TIME AXIS
   ============================================================ */

.venue-calendar .fc-timegrid-axis {
  background: var(--color-bg);

  border-color: var(--color-border);
}

/* ============================================================
   TIME GRID EVENT
   ============================================================ */

.venue-calendar .fc-timegrid-event {
  border-radius: 4px;

  padding: 4px 6px;

  box-shadow: var(--shadow-sm);

  font-size: var(--font-size-xs);
}

/* ============================================================
   NOW INDICATOR
   ============================================================ */

.venue-calendar .fc-timegrid-now-indicator-line {
  border-color: var(--color-danger);

  border-width: 2px 0 0;
}

.venue-calendar .fc-timegrid-now-indicator-arrow {
  border-top-color: var(--color-danger);
}

/* ============================================================
   LIST VIEW
   ============================================================ */

.venue-calendar .fc-list {
  border-color: var(--color-border);

  background: var(--color-surface);
  border-bottom: 1px solid;
}

/* ============================================================
   LIST DAY HEADER
   ============================================================ */

.venue-calendar .fc-list-day-cushion {
  padding: 9px 12px;

  background: var(--color-bg);

  color: var(--color-text);

  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* ============================================================
   LIST EVENT
   ============================================================ */

.venue-calendar .fc-list-event {
  cursor: pointer;
}

.venue-calendar .fc-list-event:hover td {
  background: var(--color-surface-hover);
}

.venue-calendar .fc-list-event-time {
  display: none !important;
  color: var(--color-text-secondary);

  font-size: var(--font-size-xs);
}

.venue-calendar .fc-list-event-dot {
  display: none !important;
}

.venue-calendar .fc-list-event-graphic {
  display: none !important;
}

.venue-calendar .fc-list-event-title {
  color: var(--color-text);

  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* ============================================================
   LIST EMPTY
   ============================================================ */

.venue-calendar .fc-list-empty {
  min-height: 250px;

  display: flex;

  align-items: center;
  justify-content: center;

  background: var(--color-surface);

  color: var(--color-text-muted);

  font-size: var(--font-size-sm);
}

/* ============================================================
   POPOVER
   ============================================================ */

.venue-calendar .fc-popover {
  overflow: hidden;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  background: var(--color-surface);

  box-shadow: var(--shadow-lg);
}

.venue-calendar .fc-popover-header {
  padding: 9px 12px;

  background: var(--color-bg);

  color: var(--color-text);

  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* ============================================================
   DAY GRID / WEEK / DAY BORDERS
   ============================================================ */

.venue-calendar .fc-theme-standard td,
.venue-calendar .fc-theme-standard th {
  border-color: var(--color-border);
  border-left-width: 1px;
}

/* ============================================================
   WEEK / DAY HEADER
   ============================================================ */

.venue-calendar .fc-timegrid-col.fc-day-today {
  background: var(--color-primary-light);
}

/* ============================================================
   ALL-DAY AREA
   ============================================================ */

.venue-calendar .fc-timegrid-divider {
  padding: 0;

  border-color: var(--color-border);
}

.venue-calendar .fc-timegrid-axis-frame {
  background: var(--color-bg);
}

/* ============================================================
   HIDDEN DEFAULT BUTTONS
   ============================================================ */

/*
 * Since the React component now uses:
 *
 * headerToolbar={false}
 *
 * FullCalendar should not render its default toolbar.
 *
 * This is only a safety rule.
 */

.venue-calendar .fc-header-toolbar {
  display: none !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .venue-calendar .fc-daygrid-day {
    min-height: 100px;
  }

  .venue-calendar .fc-col-header-cell-cushion {
    padding: 8px 4px;

    font-size: 10px;
  }

  .venue-calendar .fc-daygrid-event {
    margin: 2px;

    padding: 2px 4px;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {
  .venue-calendar {
    border-radius: var(--radius-sm);
  }

  .venue-calendar .fc-daygrid-day {
    min-height: 85px;
  }

  .venue-calendar .fc-daygrid-day-number {
    min-width: 22px;
    height: 22px;

    margin: 2px;

    font-size: 11px;
  }

  .venue-calendar .fc-daygrid-event {
    margin: 1px 2px;

    min-height: 20px;

    padding: 1px 3px;

    font-size: 10px;
  }

  .venue-calendar .fc-custom-event {
    gap: 3px;

    padding: 0;

    font-size: 10px;
  }

  .venue-calendar .fc-col-header-cell-cushion {
    padding: 6px 2px;

    font-size: 9px;
  }

  .venue-calendar .fc-timegrid-slot {
    height: 35px;
  }

  .venue-calendar .fc-timegrid-slot-label-cushion {
    padding: 0 5px;

    font-size: 10px;
  }
}

/* ============================================================
   REDUCE MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .venue-calendar .fc-event {
    transition: none;
  }
}

.venue-calendar .fc-event-main {
  position: relative;
}