/* ==========================================================================
   Quercia viva — FullCalendar skin (brand §5.3 / calendar)
   FullCalendar v6 exposes its whole look through `--fc-*` CSS variables and a
   handful of `.fc-*` classes. Here we map `--fc-*` onto the `--qc-*` brand
   tokens (which already flip under [data-bs-theme="dark"], so light AND dark
   are handled with no JS) and re-skin the toolbar, headers, events and list.

   Events are colored by WORK STATUS (not per-customer): the dashboard init adds
   `qc-ev qc-ev--<color>` via eventClassNames; `<color>` is the work's status
   color (yellow/orange/purple/red/lime/cyan). We drive the chip from a single
   `--ev` custom property so one recipe styles every status.

   Specificity note: FullCalendar injects its own stylesheet at runtime (after
   our <link>), so property overrides are `.fc`-scoped and use !important where
   they must beat FC's injected rules or the feed's inline per-event colors.
   ========================================================================== */

/* ---- Map FullCalendar variables onto Quercia tokens (light + dark) ---- */
:root {
  --fc-page-bg-color: var(--qc-card-bg);          /* calendar surface = the card */
  --fc-neutral-bg-color: var(--qc-surface-light); /* all-day / disabled = sunken */
  --fc-neutral-text-color: var(--qc-text-tertiary);
  --fc-border-color: var(--qc-divider);           /* hairline grid */
  --fc-today-bg-color: color-mix(in srgb, var(--qc-primary) 6%, transparent); /* subtle green, not muddy yellow */
  --fc-now-indicator-color: var(--qc-primary);    /* brand "now" line, not red */
  --fc-highlight-color: color-mix(in srgb, var(--qc-primary) 12%, transparent);
  --fc-list-event-hover-bg-color: color-mix(in srgb, var(--qc-primary) 6%, transparent);
  --fc-more-link-bg-color: transparent;
  --fc-more-link-text-color: var(--qc-primary);
  --fc-small-font-size: .8125rem;

  /* toolbar buttons (also overridden below for the glass recipe) */
  --fc-button-text-color: var(--qc-primary);
  --fc-button-bg-color: color-mix(in srgb, var(--qc-primary) 14%, transparent);
  --fc-button-border-color: color-mix(in srgb, var(--qc-primary) 28%, transparent);
  --fc-button-hover-bg-color: color-mix(in srgb, var(--qc-primary) 22%, transparent);
  --fc-button-hover-border-color: color-mix(in srgb, var(--qc-primary) 34%, transparent);
  --fc-button-active-bg-color: var(--qc-primary-dark);
  --fc-button-active-border-color: var(--qc-primary-dark);
}

.fc { font-family: var(--qc-font-body); }

/* ---- Toolbar ---- */
.fc .fc-toolbar.fc-header-toolbar { margin-bottom: 1rem; flex-wrap: wrap; gap: .5rem; }
.fc .fc-toolbar-title {
  font-family: var(--qc-font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 1.25rem;
  color: var(--qc-text-primary);
}

/* Buttons: brand glass; active view = solid green (§5.1) */
.fc .fc-button {
  border-radius: var(--qc-radius-btn) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  box-shadow: none !important;
  padding: .4rem .85rem !important;
  transition: background-color var(--qc-dur-fast) var(--qc-ease-fast),
              color var(--qc-dur-fast) var(--qc-ease-fast) !important;
}
.fc .fc-button-primary {
  background: color-mix(in srgb, var(--qc-primary) 14%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--qc-primary) 28%, transparent) !important;
  color: var(--qc-primary) !important;
}
.fc .fc-button-primary:hover {
  background: color-mix(in srgb, var(--qc-primary) 22%, transparent) !important;
  color: var(--qc-primary) !important;
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: linear-gradient(135deg, var(--qc-primary), var(--qc-primary-dark)) !important;
  border-color: color-mix(in srgb, var(--qc-primary) 55%, transparent) !important;
  color: var(--qc-on-primary) !important;
}
.fc .fc-button-primary:focus,
.fc .fc-button-primary:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--qc-primary) 22%, transparent) !important;
}
.fc .fc-button-primary:disabled { opacity: .5 !important; }
/* segmented control: connected group, rounded ends only */
.fc .fc-button-group > .fc-button { border-radius: 0 !important; }
.fc .fc-button-group > .fc-button:first-child {
  border-top-left-radius: var(--qc-radius-btn) !important;
  border-bottom-left-radius: var(--qc-radius-btn) !important;
}
.fc .fc-button-group > .fc-button:last-child {
  border-top-right-radius: var(--qc-radius-btn) !important;
  border-bottom-right-radius: var(--qc-radius-btn) !important;
}

/* ---- Grid & column headers ---- */
.fc .fc-scrollgrid { border-color: var(--qc-divider); }
.fc .fc-col-header-cell { background: transparent; }
.fc .fc-col-header-cell-cushion {
  color: var(--qc-text-secondary);
  font-weight: 600;
  font-size: .8rem;
  padding: .6rem .4rem;
  text-decoration: none !important;
}
.fc .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion { color: var(--qc-primary); }

/* subtle weekend distinction; today always wins */
.fc .fc-day-sat, .fc .fc-day-sun { background: color-mix(in srgb, var(--qc-surface-light) 35%, transparent); }
.fc .fc-day-today { background: var(--fc-today-bg-color) !important; }

/* month day numbers; today gets a green pill */
.fc .fc-daygrid-day-number {
  color: var(--qc-text-secondary);
  font-variant-numeric: tabular-nums;
  padding: .35rem .5rem;
}
.fc .fc-day-today .fc-daygrid-day-number {
  color: var(--qc-on-primary);
  background: var(--qc-primary);
  border-radius: var(--qc-radius-pill);
  font-weight: 700;
  margin: .2rem;
  padding: .1rem .45rem;
}

/* time axis */
.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion {
  color: var(--qc-text-tertiary);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}
.fc .fc-timegrid-now-indicator-arrow { border-color: var(--qc-primary); }

/* ---- Events colored by WORK STATUS (single recipe via --ev) ---- */
.fc .fc-event.qc-ev            { --ev: var(--qc-primary); }
.fc .fc-event.qc-ev--yellow    { --ev: var(--qc-status-yellow); }
.fc .fc-event.qc-ev--orange    { --ev: var(--qc-status-orange); }
.fc .fc-event.qc-ev--purple    { --ev: var(--qc-status-purple); }
.fc .fc-event.qc-ev--red       { --ev: var(--qc-status-red); }
.fc .fc-event.qc-ev--lime      { --ev: var(--qc-status-lime); }
.fc .fc-event.qc-ev--cyan      { --ev: var(--qc-status-cyan); }
.fc .fc-event.qc-ev--green     { --ev: var(--qc-success); }
.fc .fc-event.qc-ev--azure,
.fc .fc-event.qc-ev--blue      { --ev: var(--qc-primary); }
.fc .fc-event.qc-ev--holiday   { --ev: var(--qc-text-tertiary); }

/* block events (timegrid + all-day): soft tint + status accent bar */
.fc .fc-timegrid-event.qc-ev,
.fc .fc-daygrid-block-event.qc-ev {
  background: color-mix(in srgb, var(--ev) 22%, var(--qc-card-bg)) !important;
  border: 1px solid color-mix(in srgb, var(--ev) 35%, transparent) !important;
  border-left: 3px solid var(--ev) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}
.fc .fc-timegrid-event.qc-ev:hover,
.fc .fc-daygrid-block-event.qc-ev:hover {
  background: color-mix(in srgb, var(--ev) 30%, var(--qc-card-bg)) !important;
}
/* Dark theme: a saturated status hue at 22% over the near-black card turns
   muddy olive-brown. Drop to a light tint and let the crisp status rail carry
   the color; titles/subtitles already use --qc-text-* so they stay legible. */
[data-bs-theme="dark"] .fc .fc-timegrid-event.qc-ev,
[data-bs-theme="dark"] .fc .fc-daygrid-block-event.qc-ev {
  background: color-mix(in srgb, var(--ev) 13%, var(--qc-card-bg)) !important;
  border-color: color-mix(in srgb, var(--ev) 32%, transparent) !important;
  border-left-color: var(--ev) !important;
}
[data-bs-theme="dark"] .fc .fc-timegrid-event.qc-ev:hover,
[data-bs-theme="dark"] .fc .fc-daygrid-block-event.qc-ev:hover {
  background: color-mix(in srgb, var(--ev) 20%, var(--qc-card-bg)) !important;
}
.fc .fc-event.qc-ev .fc-event-main,
.fc .fc-event.qc-ev .fc-event-title { color: var(--qc-text-primary) !important; }
.fc .fc-event.qc-ev .fc-event-time { color: var(--qc-text-secondary) !important; font-variant-numeric: tabular-nums; }
.fc .fc-event.qc-ev .fc-event-main-frame { padding: 1px 2px; }
/* Timegrid events have a fixed, duration-driven height: clip their custom content
   to the box so abbreviation chips can never spill out below it (eventDidMount
   then hides whole rows that don't fit, so no half-chip is ever left visible). */
.fc .fc-timegrid-event .fc-event-main { overflow: hidden; }

/* month "dot" events (timed): colored dot + plain text, tint on hover */
.fc .fc-daygrid-dot-event.qc-ev { background: transparent !important; }
.fc .fc-daygrid-dot-event.qc-ev:hover { background: color-mix(in srgb, var(--ev) 12%, transparent) !important; }
.fc .fc-daygrid-event-dot { border-color: var(--ev, var(--qc-primary)) !important; }
.fc .fc-daygrid-dot-event .fc-event-title { color: var(--qc-text-primary) !important; }
.fc .fc-daygrid-dot-event .fc-event-time { color: var(--qc-text-tertiary) !important; }

/* "+N more" */
.fc .fc-daygrid-more-link { color: var(--qc-primary); font-weight: 600; }

/* custom eventContent — customer + place + time */
.fc .qc-ev__c { display: flex; flex-direction: column; line-height: 1.2; overflow: hidden; padding: 1px 2px; }
.fc .qc-ev__cust { font-weight: 700; font-size: .78rem; color: var(--qc-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc .qc-ev__meta { font-size: .7rem; color: var(--qc-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Day view: an aligned icon-column fact list (weather / team / services /
   vehicles). Every row shares one leading-icon column so all glyphs line up. */
.fc .qc-ev__facts { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.fc .qc-ev__fact { display: flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; }
.fc .qc-ev__fi { flex: none; width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; }
.fc .qc-ev__fi svg { width: 13px; height: 13px; }
.fc .qc-ev__fi--wx .qc-ev__wxi { font-size: .9rem; line-height: 1; }
.fc .qc-ev__fi--team { color: var(--qc-primary); }
.fc .qc-ev__fi--serv { color: var(--qc-accent); }
.fc .qc-ev__fi--veh  { color: color-mix(in srgb, var(--qc-info) 62%, var(--qc-text-primary)); }
.fc .qc-ev__fbody { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; font-size: .68rem; color: var(--qc-text-secondary); }
.fc .qc-ev__facts .tpill { height: 18px; padding: 0 7px; font-size: .64rem; font-weight: 700; }
.fc .qc-ev__facts .qc-av-mini { width: 18px; height: 18px; font-size: .56rem; }
.fc .qc-ev__facts .qc-av-stack .qc-av-mini { margin-left: -5px; }
.fc .qc-ev__facts .qc-av-stack .qc-av-mini:first-child { margin-left: 0; }

/* Chips on events reuse the SAME components as the "Prossimi Lavori" rail —
   the crew avatar stack (.qc-av-mini) and the .tpill service/vehicle chips — so
   the two views read as one style. Here they are sized down a touch to fit the
   compact event tiles; the colours/borders come from the shared component CSS. */
.fc .qc-ev__tags { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-top: 3px; padding-left: 3px; }
.fc .qc-ev__row { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; max-width: 100%; }
.fc .qc-ev__tags .tpill { height: 18px; padding: 0 6px; gap: .25rem; font-size: .64rem; font-weight: 700; }
.fc .qc-ev__tags .tpill svg { width: 11px; height: 11px; }
.fc .qc-ev__tags .qc-av-mini { width: 18px; height: 18px; font-size: .56rem; }
/* Nudge the crew stack in so the round avatars clear the event's left rail
   (a bare circle at the row edge reads as glued to the border). */
.fc .qc-ev__tags .qc-av-stack { margin-left: 3px; }
.fc .qc-ev__tags .qc-av-stack .qc-av-mini { margin-left: -5px; }
.fc .qc-ev__tags .qc-av-stack .qc-av-mini:first-child { margin-left: 0; }

/* ---- Colour legend (calendar card footer) ---- */
.qc-cal-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.qc-cal-legend__item { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--qc-text-secondary); }
.qc-cal-legend__item i { width: 10px; height: 10px; border-radius: 3px; background: var(--lg, var(--qc-primary)); flex: none; }

/* ---- List view (styled like our data tables) ---- */
.fc .fc-list { border-color: var(--qc-divider); border-radius: var(--qc-radius-card); overflow: hidden; }
.fc .fc-list-table td { border-color: var(--qc-divider); }
.fc .fc-list-day-cushion {
  background: var(--qc-surface-light) !important;
}
.fc .fc-list-day-text,
.fc .fc-list-day-side-text {
  color: var(--qc-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .8rem;
  text-decoration: none;
}
.fc .fc-list-event:hover td { background: color-mix(in srgb, var(--qc-primary) 6%, transparent) !important; }
.fc .fc-list-event-time { color: var(--qc-text-tertiary); font-variant-numeric: tabular-nums; }
.fc .fc-list-event-title { color: var(--qc-text-primary); }
.fc .fc-list-event-graphic .fc-list-event-dot { border-color: var(--ev, var(--qc-primary)) !important; }
.fc .fc-list-empty { background: transparent; color: var(--qc-text-tertiary); }

/* When the card height is pinned (desktop, beside the admin rail) the list view
   scrolls inside its own scroller. Give it a slim branded scrollbar and keep the
   day headers pinned so the date stays visible while scanning the week. */
.fc .fc-scroller { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--qc-primary) 34%, transparent) transparent; }
.fc .fc-scroller::-webkit-scrollbar { width: 8px; height: 8px; }
.fc .fc-scroller::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--qc-primary) 30%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.fc .fc-scroller::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--qc-primary) 48%, transparent); background-clip: padding-box; }
.fc .fc-scroller::-webkit-scrollbar-track { background: transparent; }

/* ---- "+N" popover: elevated overlay like our dropdowns ---- */
.fc .fc-popover {
  background: var(--qc-surface) !important;
  border: 1px solid var(--qc-border) !important;
  border-radius: var(--qc-radius-panel) !important;
  box-shadow: var(--qc-shadow-lg) !important;
}
.fc .fc-popover-header {
  background: var(--qc-surface-light) !important;
  color: var(--qc-text-secondary);
}

/* reduced motion: FullCalendar has little animation, but honour it */
@media (prefers-reduced-motion: reduce) {
  .fc * { transition: none !important; }
}