/* FullCalendar theme bridge — maps to TurnGenius tokens (light + dark via :root). */

@layer components {
  .property-schedule-calendar {
    --fc-border-color: var(--color-border);
    --fc-page-bg-color: var(--color-surface);
    --fc-neutral-bg-color: var(--color-surface-muted);
    --fc-list-event-hover-bg-color: var(--color-surface-subtle);
    --fc-today-bg-color: color-mix(in srgb, var(--color-info) 9%, transparent);
    --fc-now-indicator-color: color-mix(in srgb, var(--color-info) 75%, var(--color-primary) 25%);
    --fc-event-border-color: transparent;
    --fc-button-bg-color: var(--color-surface);
    --fc-button-border-color: var(--color-border);
    --fc-button-text-color: var(--color-text);
    --fc-button-hover-bg-color: color-mix(in srgb, var(--color-info-bg-tint) 55%, var(--color-surface) 45%);
    --fc-button-hover-border-color: color-mix(in srgb, var(--color-info) 35%, var(--color-border) 65%);
    --fc-button-active-bg-color: var(--color-info-bg-tint);
    --fc-button-active-border-color: color-mix(in srgb, var(--color-info) 40%, var(--color-border) 60%);
    --fc-highlight-color: color-mix(in srgb, var(--color-info) 14%, transparent);
  }

  .property-schedule-calendar__mount {
    margin-top: var(--space-1);
  }

  .property-schedule-calendar .fc {
    font-family: var(--font-heading-readable), var(--font-sans);
    color: var(--color-text);
  }

  .property-schedule-calendar .fc-toolbar.fc-header-toolbar {
    margin-bottom: var(--space-3);
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .property-schedule-calendar .fc-toolbar-title {
    color: var(--color-text);
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .property-schedule-calendar .fc-button {
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: var(--text-xs);
    padding-inline: var(--space-3);
    text-transform: none;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition:
      background var(--duration-fast) var(--ease-default),
      border-color var(--duration-fast) var(--ease-default),
      color var(--duration-fast) var(--ease-default),
      box-shadow var(--duration-fast) var(--ease-default);
  }

  .property-schedule-calendar .fc-button-primary:not(:disabled):active,
  .property-schedule-calendar .fc-button-primary:not(:disabled).fc-button-active {
    color: color-mix(in srgb, var(--color-info) 45%, var(--color-text) 55%);
  }

  .property-schedule-calendar .fc-daygrid-day-number {
    font-weight: 600;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition:
      background var(--duration-fast) var(--ease-default),
      color var(--duration-fast) var(--ease-default);
  }

  .property-schedule-calendar .fc-daygrid-day:hover .fc-daygrid-day-number {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-text) 5%, transparent);
  }

  .property-schedule-calendar .fc-col-header-cell {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding-block: var(--space-2);
  }

  .property-schedule-calendar .fc-scrollgrid {
    border-radius: var(--radius-sm);
    overflow: hidden;
  }

  .property-cal-event--booking {
    background: var(--color-primary) !important;
    border-color: var(--color-primary-hover) !important;
    color: var(--color-primary-text) !important;
  }

  .property-cal-event--block {
    background: var(--color-slate-12) !important;
    border: 1px dashed var(--color-border) !important;
    color: var(--color-text-muted) !important;
  }

  .property-cal-event--unknown {
    background: var(--color-info-bg-tint) !important;
    border: 1px solid var(--color-info) !important;
    color: var(--color-text) !important;
  }

  .property-cal-event--src-vrbo.property-cal-event--booking {
    background: color-mix(in srgb, var(--color-info) 88%, #ffffff) !important;
    border-color: var(--color-info) !important;
    color: var(--color-primary-text) !important;
  }

  @media (prefers-color-scheme: dark) {
    .property-cal-event--src-vrbo.property-cal-event--booking {
      color: var(--color-text) !important;
    }
  }

  /* Crew month view: cooler booking treatment (host rules above stay default). */
  .crew-page--property-schedule .property-cal-event--booking {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-info) 48%, var(--color-surface) 52%) 0%,
      color-mix(in srgb, var(--color-info) 32%, var(--color-primary) 20%) 100%
    ) !important;
    border-color: color-mix(in srgb, var(--color-info) 38%, var(--color-border) 62%) !important;
    color: var(--color-text) !important;
  }

  .crew-page--property-schedule .property-cal-event--src-vrbo.property-cal-event--booking {
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-info) 55%, var(--color-surface) 45%) 0%,
      color-mix(in srgb, var(--color-info) 40%, var(--color-primary) 15%) 100%
    ) !important;
    border-color: color-mix(in srgb, var(--color-info) 45%, var(--color-border) 55%) !important;
    color: var(--color-text) !important;
  }

  @media (prefers-color-scheme: dark) {
    .crew-page--property-schedule .property-cal-event--booking,
    .crew-page--property-schedule .property-cal-event--src-vrbo.property-cal-event--booking {
      color: var(--color-text) !important;
    }
  }
}