/* ==========================================================================
   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: var(--qc-fs-2xl);
  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: var(--qc-layer-wash) !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: var(--qc-layer-highlight) !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: var(--qc-fs-sm);
  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: var(--qc-fs-xs);
  font-variant-numeric: tabular-nums;
}
.fc .fc-timegrid-now-indicator-arrow { border-color: var(--qc-primary); }

/* ---- Events coloured by WORK STATUS, and by nothing else ------------------
   One recipe, one custom property. `--ev` is the status's own token; the tile's
   fill, its rail, its hover and its list dot all derive from it, so a status
   that is renamed or recoloured on the settings page moves everything at once.

   All nine of WorkStatus::COLORS are here. `green`, `teal` and `pink` used to
   fall through to --qc-success and to nothing at all, which meant a company that
   used them got a tile the colour of "done" or the colour of the default.
   ------------------------------------------------------------------------- */
/* The mark's ink, drawn from the tile's hue (components.css, `--st-ink`). On
   the hover card too, which carries the same --ev outside the calendar. */
.fc .fc-event.qc-ev,
.qc-evcard {
  --ev-ink: color-mix(in srgb, var(--ev, var(--qc-primary)) 74%, var(--qc-text-primary));
}
@supports (color: oklch(from red l c h)) {
  .fc .fc-event.qc-ev,
  .qc-evcard {
    --ev-ink: oklch(from var(--ev, var(--qc-primary)) var(--qc-ink-l) min(c, .11) h);
  }
}
.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-status-green); }
.fc .fc-event.qc-ev--teal      { --ev: var(--qc-status-teal); }
.fc .fc-event.qc-ev--pink      { --ev: var(--qc-status-pink); }
.fc .fc-event.qc-ev--holiday   { --ev: var(--qc-text-tertiary); }

/* Block events (the week, the day, and an all-day band).

   A 9% wash and one 3px rail, where there used to be a 22% fill inside a border
   on all four sides. Twenty of those in a week view is twenty saturated
   rectangles competing with each other and with the grid they sit on; at 9% the
   colour still names the status and the text on top of it keeps its contrast in
   both themes. The rail is the part that reads at a glance, so it is the part
   that stays solid. */
.fc .fc-timegrid-event.qc-ev,
.fc .fc-daygrid-block-event.qc-ev {
  background: color-mix(in srgb, var(--ev) var(--qc-tile-wash), var(--qc-card-bg)) !important;
  border: 0 !important;
  border-left: 3px solid var(--ev) !important;
  border-radius: 6px !important;
  /* A hairline of the card's own surface: two jobs abreast, or one straight
     after another, used to fuse into a single block of colour. */
  box-shadow: 0 0 0 1px var(--qc-card-bg) !important;
}
.fc .fc-timegrid-event.qc-ev:hover,
.fc .fc-daygrid-block-event.qc-ev:hover {
  background: color-mix(in srgb, var(--ev) var(--qc-tile-wash-hover), var(--qc-card-bg)) !important;
}

/* A day the company does not work is a quiet fact about the grid, not a job:
   a tint behind the whole day (a background event, see
   `_holidayAsBackground()`), no rail — a rail is where a status goes and a
   holiday has none — and never in the band over the hours, which holds the jobs
   whose time is still to be set. FullCalendar dims a background event with
   `opacity`, which would dim its name too (brand rule 8): the wash is mixed
   into the colour instead, and the name keeps its own. */
.fc .fc-bg-event.qc-ev--holiday {
  opacity: 1;
  background: color-mix(in srgb, var(--qc-text-tertiary) 10%, transparent) !important;
}
[data-bs-theme="dark"] .fc .fc-bg-event.qc-ev--holiday {
  background: color-mix(in srgb, var(--qc-text-tertiary) 14%, transparent) !important;
}
/* The all-day copy is the month's; in the week and the day the band over the
   hours is for jobs whose time is still to be set, and the timed copy already
   tints the column below it. */
.fc .fc-timegrid .fc-daygrid-body .fc-bg-event.qc-ev--holiday { display: none; }
.fc .fc-bg-event.qc-ev--holiday .qc-ev__c--holiday {
  display: block;
  margin: .25rem .4rem;
  font-style: normal;
}

/* A job nobody can move any more says so with the cursor, not with a colour:
   there is no spare channel left, and greying it out would read as "cancelled". */
.fc .fc-event.qc-ev--locked { cursor: default; }

.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: 0; }
.fc .fc-timegrid-event .fc-event-main { overflow: hidden; }

/* Month chips: the same wash and the same rail as everywhere else.
   `eventDisplay: 'auto'` puts a timed job on the day's own line — which is what
   lets three of them share a cell without it growing — and FullCalendar draws
   that line as a `fc-daygrid-dot-event` rather than as a block.

   That chip used to be `background: transparent` with the dot switched off, on
   the reasoning that our own 12px mark carried the status. It does not carry it
   far enough: a job is `allDay` only when it has no end hour, so all but a
   handful of them are timed, and a month of timed jobs was a month of colourless
   lines with a small glyph on the left — while the few all-day ones beside them
   wore the full tint. Same three numbers as the block event (9%, 12% on dark, a
   3px rail), at the chip's own size: no height is added, so three still fit. */
.fc .fc-daygrid-dot-event.qc-ev {
  background: color-mix(in srgb, var(--ev) var(--qc-tile-wash), var(--qc-card-bg)) !important;
  border: 0 !important;
  border-left: 3px solid var(--ev) !important;
  border-radius: 5px !important;
  /* Nothing on the left: `.qc-ev__c` already has its own 4px, so the gap between
     the rail and the mark is the block event's gap exactly. */
  padding: 1px 2px 1px 0;
}
.fc .fc-daygrid-dot-event.qc-ev:hover { background: color-mix(in srgb, var(--ev) var(--qc-tile-wash-hover), var(--qc-card-bg)) !important; }
.fc .fc-daygrid-event-dot { display: none; }   /* the rail and our own mark carry the status */
.fc .fc-daygrid-dot-event .fc-event-title { color: var(--qc-text-primary) !important; }
.fc .fc-daygrid-more-link { color: var(--qc-primary); font-weight: 600; font-size: var(--qc-fs-xs); }

/* ---- The chip itself: a mark, a time, a name ------------------------------
   One line, and in the month only that line. What a tile used to hold — the
   customer, the address, an avatar stack, a row of chips per service and per
   vehicle — is what made a busy Tuesday unreadable; those facts are one hover
   or one click away, in the card and in the sheet.

   Nothing here is sized below 12px. The old rules went to .58rem (9px) on a
   phone, which is not small type, it is type nobody reads.
   ------------------------------------------------------------------------- */
.fc .qc-ev__c {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
  padding: 1px 4px;
  line-height: 1.25;
}
.fc .qc-ev__line { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.fc .qc-ev__mark {
  flex: none;
  width: 12px;
  height: 12px;
  /* The hue at the theme's ink lightness — see `--st-ink` in components.css. */
  color: var(--ev-ink);
}
.fc .qc-ev__time {
  flex: none;
  font-size: var(--qc-fs-xs);
  font-weight: 600;
  color: var(--qc-text-secondary);
  font-variant-numeric: tabular-nums;
}
.fc .qc-ev__cust {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--qc-fs-sm);
  font-weight: 600;
  color: var(--qc-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc .qc-ev__site,
.fc .qc-ev__crew {
  font-size: var(--qc-fs-xs);
  color: var(--qc-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc .qc-ev__crew { color: var(--qc-text-tertiary); }
.fc .qc-ev__c--holiday {
  font-size: var(--qc-fs-xs);
  font-weight: 600;
  color: var(--qc-text-tertiary);
  letter-spacing: .01em;
}

/* How much a tile says, decided by how much room it has.

   Two questions, two mechanisms, and neither of them is JavaScript measuring a
   box after the fact — which is what `eventDidMount` used to do, a frame late,
   for every event on every render.

   Height is duration, and the class says which band the job is in: under an
   hour the name alone, under two the hours and the name, under four the crew
   as well, and the site from four up. */
.fc .fc-timegrid-event.qc-ev--h0 .qc-ev__crew,
.fc .fc-timegrid-event.qc-ev--h0 .qc-ev__site,
.fc .fc-timegrid-event.qc-ev--h1 .qc-ev__crew,
.fc .fc-timegrid-event.qc-ev--h1 .qc-ev__site,
.fc .fc-timegrid-event.qc-ev--h2 .qc-ev__site { display: none; }

/* The week's and the day's tile, from an hour up (`_agenda()`): the hours
   lead, with the status mark at the far end of their line; the name wraps
   under them rather than ending in an ellipsis after five letters; the crew
   and the site sit at the foot. The crew outlives the site because it is the
   shorter of the two and the one that tells two jobs of one customer apart. */
.fc .qc-ev__c--agenda { height: 100%; padding-top: 2px; padding-bottom: 2px; }
.fc .qc-ev__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .3rem;
  min-width: 0;
}
.fc .qc-ev__when {
  min-width: 0;
  font-size: var(--qc-fs-xs);
  font-weight: 600;
  color: var(--qc-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc .qc-ev__c--agenda .qc-ev__cust {
  flex: none;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: normal;
  overflow-wrap: anywhere;
}
.fc .fc-timegrid-event.qc-ev--h2 .qc-ev__c--agenda .qc-ev__cust,
.fc .fc-timegrid-event.qc-ev--h3 .qc-ev__c--agenda .qc-ev__cust { -webkit-line-clamp: 3; }
.fc .qc-ev__foot {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  margin-top: auto;
}

/* Width is the tile's own, whatever the view or the day's crowding made it:
   five jobs sharing a Tuesday morning get a fifth of the column each, and a
   media query on the viewport cannot see that.

   The container is declared on FullCalendar's harness and not on our own
   wrapper: `container-type: inline-size` also takes the element's contents out
   of the inline-size calculation, so a wrapper that was sizing itself to its
   text collapsed to nothing the moment it became a container. The harness has a
   width of its own either way — a block in a day column, or a box FullCalendar
   positions with inline left/right in a time grid. */
.fc .fc-daygrid-event-harness,
.fc .fc-timegrid-event-harness {
  container-type: inline-size;
  container-name: qcev;
}
@container qcev (max-width: 8rem) {
  /* The site goes; the time does not shrink. Dropping it to eleven pixels was
     the one place this file broke its own floor — a narrow tile answers by
     saying less, never by saying it smaller. */
  .fc .qc-ev__site { display: none; }
}
@container qcev (max-width: 6.5rem) {
  /* The hours are what the tile opens with: the mark gives them its room
     before they lose a digit. The rail still carries the status. */
  .fc .qc-ev__head .qc-ev__mark { display: none; }
}
@container qcev (max-width: 5rem) {
  .fc .qc-ev__until { display: none; }
  .fc .qc-ev__crew { display: none; }
  .fc .qc-ev__mark { display: none; }
}

/* ---- The hover card ------------------------------------------------------
   One card, opened after a pause on a tile, placed against the viewport. There
   used to be a Bootstrap tooltip on every avatar and every service pill,
   created in `datesSet` over whatever chips were in the DOM at the time —
   because FullCalendar recycles event elements and a per-event hook left
   disposed instances behind on the reused ones.
   ------------------------------------------------------------------------- */
.qc-evcard {
  position: absolute;
  z-index: 1080;
  display: none;
  max-width: min(22rem, calc(100vw - 1rem));
  padding: .65rem .8rem;
  border: 1px solid var(--qc-edge);
  border-radius: var(--qc-radius-panel);
  background: var(--qc-surface-overlay);
  box-shadow: var(--qc-shadow-lg), var(--qc-shadow-top);
  font-size: var(--qc-fs-sm);
  line-height: 1.35;
  color: var(--qc-text-secondary);
  pointer-events: none;   /* it is a label, not a target */
}
.qc-evcard.is-on { display: block; }
.qc-evcard__title { font-family: var(--qc-font-display); font-weight: 700; font-size: var(--qc-fs-lg); letter-spacing: -.01em; color: var(--qc-text-primary); }
.qc-evcard__status {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .25rem;
  padding: .1rem .5rem .1rem .35rem;
  border-radius: var(--qc-radius-pill);
  background: color-mix(in srgb, var(--ev, var(--qc-primary)) var(--qc-status-wash), transparent);
  font-size: var(--qc-fs-xs);
  font-weight: 600;
  color: var(--qc-text-primary);
}
.qc-evcard__status svg {
  width: 13px;
  height: 13px;
  color: var(--ev-ink);
}
/* One row per fact, each behind its own glyph, so the address, the crew and
   the services are not three grey lines to be told apart by reading them. */
.qc-evcard__rows {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: .25rem .5rem;
  align-items: start;
  margin-top: .45rem;
  color: var(--qc-text-secondary);
}
.qc-evcard__rows > i,
.qc-evcard__rows > span[aria-hidden] {
  font-size: var(--qc-fs-lg);
  line-height: 1.35;
  text-align: center;
  color: var(--qc-text-tertiary);
}
.qc-evcard__when { color: var(--qc-text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- The legend, which is also the filter --------------------------------
   Pressing a status hides it and says how many of it there are in the range on
   screen. It was a row of coloured squares that did nothing — and a filter that
   looks like a label is a worse offence than a label that looks like a filter,
   so the chips are buttons, they carry their count, and "reset" appears only
   while something is actually hidden.
   ------------------------------------------------------------------------- */
.qc-cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; }
.qc-cal-legend__item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .55rem;
  border: 1px solid transparent;
  border-radius: var(--qc-radius-pill);
  background: transparent;
  font: inherit;
  font-size: var(--qc-fs-sm);
  color: var(--qc-text-secondary);
  cursor: pointer;
  transition: background var(--qc-dur-fast) var(--qc-ease-fast), opacity var(--qc-dur-fast) var(--qc-ease-fast);
}
.qc-cal-legend__item:hover { background: var(--qc-layer-hover); }
.qc-cal-legend__item:focus-visible { outline: 2px solid var(--qc-primary); outline-offset: 2px; }
.qc-cal-legend__item i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--lg, var(--qc-primary));
  flex: none;
}
.qc-cal-legend__item b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--qc-text-tertiary);
}
/* Switched off: the swatch empties out and the word goes quiet. Never opacity —
   the token layer has a colour for "less important" and dimming text with
   opacity takes the contrast down with it. */
.qc-cal-legend__item.is-off { color: var(--qc-text-tertiary); }
.qc-cal-legend__item.is-off i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--lg, var(--qc-primary)); }
/* The count stays: "you are hiding five of these" is the more useful half of
   the number, and a chip that empties out entirely reads as "none of these". */
/* The crews sit after the statuses, behind a divider, because they answer a
   different question about the same jobs. */
.qc-cal-legend__crews {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .5rem;
  padding-left: .5rem;
  border-left: 1px solid var(--qc-divider);
}
.qc-cal-legend__reset { margin-left: auto; }

/* ---- 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: var(--qc-fs-sm);
  text-decoration: none;
}
.fc .fc-list-event:hover td { background: var(--qc-layer-hover) !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-overlay) !important;
  border: 1px solid var(--qc-edge) !important;
  border-radius: var(--qc-radius-panel) !important;
  box-shadow: var(--qc-shadow-lg), var(--qc-shadow-top) !important;
}
.fc .fc-popover-header {
  background: var(--qc-surface-light) !important;
  color: var(--qc-text-secondary);
}

/* A tile that will lift says so before it is pressed: the grab hand on hover.
   `.fc-event-draggable` is FullCalendar's own mark for a tile whose `editable`
   let it through — the per-event verdict from the server, not a guess here. */
.fc .fc-event.qc-ev.fc-event-draggable { cursor: grab; }
.fc .fc-event.qc-ev.fc-event-dragging { cursor: grabbing; box-shadow: var(--qc-shadow-md); }
.fc .fc-event.qc-ev--locked.fc-event-draggable { cursor: default; }

/* ---- The page: three steps for whoever plans, then the grid --------------
   The calendar hands out no dates to undated jobs. Above the grid one card,
   split in three, reads as the way a job goes from nothing to a van: a day
   (Pianificazione), somebody (the week), an order (the day round). Numbered
   because the order is real; the step to start from is washed and says so,
   a step with nothing waiting carries a tick. Each is a link, always. Side by
   side where three sentences fit, stacked below that.
   ------------------------------------------------------------------------- */
.qc-cal-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.qc-cal-layout > .qc-cal-card { margin-bottom: 0; }

.qc-calflow { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: 1rem; overflow: hidden; }
.qc-calflow__step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1.1rem;
  border-top: 1px solid var(--qc-border);
  color: var(--qc-text-primary);
  text-decoration: none;
  transition: background-color var(--qc-dur-fast) var(--qc-ease-fast);
}
.qc-calflow__step:first-child { border-top: 0; }
.qc-calflow__step:hover { color: var(--qc-text-primary); background: var(--qc-layer-hover); }
.qc-calflow__step:focus-visible { outline: 2px solid var(--qc-primary); outline-offset: -2px; }
.qc-calflow__mark {
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  border: 1.5px solid var(--qc-border);
  font-size: .875rem;
  font-weight: 600;
  color: var(--qc-text-secondary);
}
.qc-calflow__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.qc-calflow__name { font-family: var(--qc-font-display); font-size: var(--qc-fs-lg); font-weight: 600; line-height: 1.25; }
.qc-calflow__lede { font-size: var(--qc-fs-sm); line-height: 1.4; color: var(--qc-text-secondary); }
.qc-calflow__fig { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.qc-calflow__fig b { font-family: var(--qc-font-display); font-size: var(--qc-fs-2xl); font-weight: 700; }
.qc-calflow__fig small { font-size: var(--qc-fs-xs); color: var(--qc-text-tertiary); white-space: nowrap; }
.qc-calflow__join { display: none; }

.qc-calflow__step.is-now { background: var(--qc-layer-hover); }
.qc-calflow__step.is-now:hover { background: var(--qc-layer-wash); }
.qc-calflow__step.is-now .qc-calflow__mark { background: var(--qc-primary); border-color: var(--qc-primary); color: var(--qc-on-primary); }
.qc-calflow__step.is-now .qc-calflow__lede { color: var(--qc-primary); font-weight: 600; }
.qc-calflow__step.is-done .qc-calflow__mark { border-color: var(--qc-primary); color: var(--qc-primary); }
.qc-calflow__step.is-done .qc-calflow__name { color: var(--qc-text-secondary); }

@media (min-width: 992px) {
  .qc-calflow { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .qc-calflow__step { border-top: 0; border-left: 1px solid var(--qc-border); }
  .qc-calflow__step:first-child { border-left: 0; border-radius: var(--qc-radius-card) 0 0 var(--qc-radius-card); }
  .qc-calflow__step:last-child { border-radius: 0 var(--qc-radius-card) var(--qc-radius-card) 0; }
  /* The chevron sits on the rule between two steps: the order, drawn. */
  .qc-calflow__join {
    position: absolute;
    left: -.6875rem;
    top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    margin-top: -.6875rem;
    border-radius: 50%;
    border: 1px solid var(--qc-border);
    background: var(--qc-card-bg);
    font-size: var(--qc-fs-xs);
    color: var(--qc-text-tertiary);
  }
}

/* ---- The share dialog --------------------------------------------------- */
.qc-calshare__loading { display: grid; place-items: center; min-height: 12rem; }
.qc-calshare__off { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1rem .5rem 1.25rem; }
.qc-calshare__off[hidden], .qc-calshare__on[hidden], .qc-calshare__loading[hidden] { display: none; }
.qc-calshare__glyph {
  display: inline-grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: .75rem;
  border-radius: 50%;
  background: var(--qc-layer-selected);
  color: var(--qc-primary);
  font-size: 1.6rem;
}
.qc-calshare__lede { max-width: 32rem; margin-bottom: .75rem; color: var(--qc-text-primary); }
.qc-calshare__points {
  display: grid;
  gap: .35rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: var(--qc-fs-md);
  color: var(--qc-text-secondary);
}
.qc-calshare__points li { display: flex; align-items: center; gap: .5rem; }
.qc-calshare__points .ti { color: var(--qc-primary); }
.qc-calshare__section + .qc-calshare__section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--qc-divider); }
.qc-calshare__heading {
  margin-bottom: .6rem;
  font-size: var(--qc-fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--qc-text-secondary);
}
.qc-calshare__apps { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.qc-calshare__app { text-decoration: none; color: inherit; }
.qc-calshare__app:hover { color: inherit; }
.qc-calshare__url { font-size: var(--qc-fs-sm); }
.qc-calshare__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lg, var(--qc-primary));
}
.qc-calshare__section--danger { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.qc-calshare__dangeracts { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---- Phone (last, so it overrides the base rules above) ----
   Toolbar in three centred rows — title, date nav, view picker — instead of one
   row that cannot hold four view buttons beside the month name (the title is the
   second chunk in the markup, so it is pulled up here rather than reordered in
   the options). The month grid follows: seven columns only work on a small
   screen if the day number and the chips give up some of their air. */
@media (max-width: 767.98px) {
  .fc .fc-toolbar.fc-header-toolbar {
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    margin-bottom: .75rem;
  }
  .fc .fc-header-toolbar .fc-toolbar-chunk:nth-child(2) { order: -1; }
  .fc .fc-toolbar-title { font-size: var(--qc-fs-xl); }
  .fc .fc-button { padding: .32rem .6rem !important; font-size: var(--qc-fs-sm) !important; }

  .fc .fc-daygrid-day-number { font-size: var(--qc-fs-xs); padding: 2px 4px; }
  .fc .fc-col-header-cell-cushion { font-size: var(--qc-fs-xs); padding: 4px 2px; }
  /* The floor is 12px, here as everywhere. These rules used to reach .58rem —
     nine pixels, which is not small type, it is type nobody reads. A phone cell
     that cannot hold two chips at a readable size collapses them into the "+N"
     popover, which has the room. */
  .fc .qc-ev__cust { font-size: var(--qc-fs-xs); }
  .fc .qc-ev__time { font-size: var(--qc-fs-xs); }
  .fc .qc-ev__site, .fc .qc-ev__crew, .fc .qc-ev__when { font-size: var(--qc-fs-xs); }
  .fc .fc-daygrid-more-link { font-size: var(--qc-fs-xs); }
  .qc-cal-legend { gap: .3rem; }
  /* On one column the divider would be a rule down the left of half the bar. */
  .qc-cal-legend__crews { padding-left: 0; border-left: 0; }
  .qc-cal-legend__reset { margin-left: 0; }

  /* The "+N" popover carries the rest of the day here — a phone cell only ever
     lists the first couple of jobs — so it is given room to be read in. Left to
     itself it takes the width of the cell it hangs off, which at seven columns
     on a phone is a strip a few characters wide; and a very full day would run
     it past the bottom of the screen, so its list scrolls inside it instead.
     FullCalendar keeps the box within the viewport on its own, and the cap
     leaves it that room to work with. */
  .fc .fc-popover {
    min-width: min(17rem, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
  }
  .fc .fc-popover-body {
    max-height: 60vh;
    overflow-y: auto;
  }
}

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