/* ==========================================================================
   Parco macchine — the shapes that are the fleet's own.

   A machine's sheet opens on a band that says which machine it is and where
   it is today, over the rail of its panels. Everything else on these pages is
   the shared recipes (cards, stat cards, state pills, type chips).

   Tokens only (--qc-*). A name, never a hex.
   ========================================================================== */

/* ---- the identity band --------------------------------------------------- */

.qc-machine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--qc-border);
  border-radius: 16px;
  background: var(--qc-card-bg);
  box-shadow: var(--qc-shadow-sm);
}

/* The type's drawing in the type's colour: a wash, never a fill — the mark
   says "what kind", and the state beside it is what carries a colour's meaning. */
.qc-machine__glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--st, var(--qc-primary)) var(--qc-status-wash), transparent);
  color: var(--st-ink);
}
.qc-machine__glyph .icon { width: 1.75rem; height: 1.75rem; }
.qc-machine__glyph--sm { width: 2rem; height: 2rem; border-radius: 10px; }
.qc-machine__glyph--sm .icon { width: 1.1rem; height: 1.1rem; }

.qc-machine__id { min-width: 0; flex: 1 1 14rem; }
.qc-machine__name {
  margin: 0;
  font-family: var(--qc-font-display);
  font-size: var(--qc-fs-2xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.qc-machine__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .6rem;
  margin-top: .4rem;
  font-size: var(--qc-fs-sm);
  color: var(--qc-text-secondary);
}

/* ---- the overview's tiles ------------------------------------------------ */

.qc-machine__board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .75rem;
}
.qc-machine__tile {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-width: 0;
  padding: .85rem 1rem 1rem;
  border: 1px solid var(--qc-border);
  border-radius: 16px;
  background: var(--qc-card-bg);
  box-shadow: var(--qc-shadow-sm);
}
.qc-machine__tile--wide { grid-column: 1 / -1; }
.qc-machine__tilehead {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font: 600 var(--qc-fs-sm)/1.2 var(--qc-font-body);
  color: var(--qc-text-secondary);
}
.qc-machine__tilehead .ti { font-size: 1rem; color: var(--qc-primary); }
.qc-machine__tilehead a { margin-left: auto; font-weight: 500; font-size: var(--qc-fs-xs); }
.qc-machine__tileaside { margin-left: auto; font-weight: 500; font-size: var(--qc-fs-xs); color: var(--qc-text-tertiary); }
.qc-machine__figure {
  font-family: var(--qc-font-display);
  font-size: var(--qc-fs-3xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.qc-machine__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .3rem 1rem;
  margin: 0;
  font-size: var(--qc-fs-md);
  color: var(--qc-text-secondary);
}
.qc-machine__facts dd { margin: 0; text-align: right; font-weight: 600; color: var(--qc-text-primary); }
.qc-machine__tile .btn { align-self: flex-start; }

/* Seven days, one cell each: the machine's own week, read off the jobs. */
.qc-machine__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .3rem;
}
.qc-machine__day {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
  padding: .4rem .25rem;
  border-radius: 8px;
  background: var(--qc-field-bg);
  text-align: center;
  font-size: var(--qc-fs-xs);
  color: var(--qc-text-tertiary);
}
.qc-machine__day b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--qc-text-primary);
}
.qc-machine__day.is-today { box-shadow: inset 0 0 0 1.5px var(--qc-primary); }
.qc-machine__day.is-busy { background: color-mix(in srgb, var(--qc-primary) 16%, var(--qc-field-bg)); }
/* A fermo is hatched as well as tinted: never the colour alone. */
.qc-machine__day.is-blocked {
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--qc-status-orange) 26%, var(--qc-field-bg)) 0 6px,
    var(--qc-field-bg) 6px 12px
  );
}
.qc-machine__day.is-clash { box-shadow: inset 0 0 0 1.5px var(--qc-status-orange); }

/* A line of a short list inside a tile or a card: what, when, how much. */
.qc-machine__rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.qc-machine__rows > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .75rem;
  padding: .55rem 0;
  border-top: 1px solid var(--qc-divider);
  font-size: var(--qc-fs-md);
}
.qc-machine__rows > li:first-child { border-top: 0; padding-top: 0; }
.qc-machine__rows .is-end { margin-left: auto; }

/* An expense's kind: an icon and a word, and no colour — it is not a state. */
.qc-machine__kind { display: inline-flex; align-items: center; gap: .35rem; color: var(--qc-text-secondary); }
.qc-machine__kind .ti { color: var(--qc-text-tertiary); }

@media (max-width: 575.98px) {
  .qc-machine { padding: .85rem 1rem; }
  .qc-machine__name { font-size: var(--qc-fs-2xl); }
  .qc-machine__week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   Disponibilità — the timeline.

   A row per machine, a column per day, and bars for what takes the machine:
   a job (tinted with its crew's colour — a token name off the crew) and a
   fermo (hatched, because a state is never colour alone). An empty cell is a
   free day; it says nothing, and that is how it is found.

   The grid scrolls inside its own box. The page body never scrolls sideways.
   ========================================================================== */

.qc-avail__switch {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--qc-border);
  border-radius: 10px;
  background: var(--qc-field-bg);
}
.qc-avail__switchitem {
  padding: .3rem .7rem;
  border-radius: 8px;
  font-size: var(--qc-fs-sm);
  font-weight: 600;
  color: var(--qc-text-secondary);
  text-decoration: none;
}
.qc-avail__switchitem:hover { color: var(--qc-text-primary); }
.qc-avail__switchitem.is-on {
  background: var(--qc-card-bg);
  color: var(--qc-text-primary);
  box-shadow: var(--qc-shadow-sm);
}

.qc-avail__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin-bottom: .75rem;
}
.qc-avail__filterlabel {
  font-size: var(--qc-fs-xs);
  font-weight: 600;
  color: var(--qc-text-tertiary);
}
.qc-avail__filterlabel:not(:first-child) { margin-left: .75rem; }
.qc-avail__chip {
  padding: .2rem .6rem;
  border: 1px solid var(--qc-border);
  border-radius: 999px;
  background: var(--qc-card-bg);
  font-size: var(--qc-fs-sm);
  font-weight: 500;
  color: var(--qc-text-secondary);
  text-decoration: none;
}
.qc-avail__chip:hover { color: var(--qc-text-primary); border-color: color-mix(in srgb, var(--qc-primary) 30%, var(--qc-border)); }
.qc-avail__chip.is-on {
  border-color: var(--qc-primary);
  background: color-mix(in srgb, var(--qc-primary) 10%, var(--qc-card-bg));
  color: var(--qc-text-primary);
  font-weight: 600;
}

.qc-avail { overflow-x: auto; }
.qc-avail__grid { min-width: 46rem; }
.qc-avail--month .qc-avail__grid { min-width: 64rem; }

.qc-avail__head,
.qc-avail__row {
  display: grid;
  grid-template-columns: 12.5rem repeat(var(--qc-avail-days), minmax(0, 1fr));
}
.qc-avail__corner,
.qc-avail__day {
  padding: .5rem .4rem;
  border-bottom: 1px solid var(--qc-divider);
  font-size: var(--qc-fs-xs);
  font-weight: 600;
  color: var(--qc-text-tertiary);
}
.qc-avail__corner { padding-left: 1rem; align-self: end; }
.qc-avail__day { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.qc-avail__day b { font-size: var(--qc-fs-sm); color: var(--qc-text-primary); }
.qc-avail__day.is-today b { color: var(--qc-primary); }
.qc-avail__day.is-today { box-shadow: inset 0 -2px 0 var(--qc-primary); }

.qc-avail__group {
  padding: .35rem 1rem;
  background: var(--qc-surface-light);
  border-bottom: 1px solid var(--qc-divider);
  font-size: var(--qc-fs-xs);
  font-weight: 600;
  color: var(--qc-text-secondary);
}

.qc-avail__row {
  grid-template-rows: repeat(var(--qc-avail-lanes, 1), 1.9rem);
  align-items: center;
  padding-block: .3rem;
  border-bottom: 1px solid var(--qc-divider);
  position: relative;
}
.qc-avail__row:last-child { border-bottom: 0; }
.qc-avail__name {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  padding: .15rem .5rem .15rem 1rem;
  min-width: 0;
}
/* The day's column behind the bars: a rule, and a wash on the weekend and on
   today. Stretched over the row's own padding so the rules meet. */
.qc-avail__cell {
  grid-row: 1 / -1;
  align-self: stretch;
  margin-block: -.3rem;
  border-left: 1px solid var(--qc-divider);
}
.qc-avail__cell.is-weekend { background: color-mix(in srgb, var(--qc-surface-light) 60%, transparent); }
.qc-avail__cell.is-today { background: var(--qc-layer-hover); }

.qc-avail__bar {
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .3rem;
  min-width: 0;
  height: 1.55rem;
  margin-inline: 3px;
  padding-inline: .4rem;
  border-radius: 8px;
  border-left: 3px solid var(--qc-avail-crew, var(--qc-primary));
  background: color-mix(in srgb, var(--qc-avail-crew, var(--qc-primary)) 22%, var(--qc-card-bg));
  font-size: var(--qc-fs-xs);
  font-weight: 500;
  color: var(--qc-text-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
a.qc-avail__bar:hover { background: color-mix(in srgb, var(--qc-avail-crew, var(--qc-primary)) 32%, var(--qc-card-bg)); color: var(--qc-text-primary); }
.qc-avail__barlabel { overflow: hidden; text-overflow: ellipsis; }
.qc-avail__barlabel b { font-weight: 700; }
.qc-avail__bar .ti { flex: none; font-size: .9rem; }

/* A fermo: hatched as well as tinted. */
.qc-avail__bar--block {
  border-left-color: var(--qc-status-orange);
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--qc-status-orange) 26%, var(--qc-card-bg)) 0 7px,
    var(--qc-card-bg) 7px 14px
  );
  font-weight: 600;
}
a.qc-avail__bar--block:hover {
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--qc-status-orange) 36%, var(--qc-card-bg)) 0 7px,
    var(--qc-card-bg) 7px 14px
  );
}
/* A clash: ringed, with its triangle — and its word, in the label. */
.qc-avail__bar.is-clash { box-shadow: inset 0 0 0 1.5px var(--qc-status-orange); }
.qc-avail__bar.is-clash .ti { color: color-mix(in srgb, var(--qc-status-orange) 70%, var(--qc-text-primary)); }
/* Cut by the edge of the stretch: it goes on, and its end is squared to say so. */
.qc-avail__bar.is-open-start { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.qc-avail__bar.is-open-end { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }

/* A month: thirty columns leave no room for words. The bar keeps its shape,
   its mark and its title; the words are read on hover and by a screen reader. */
.qc-avail--month .qc-avail__barlabel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.qc-avail--month .qc-avail__bar { padding-inline: .15rem; justify-content: center; margin-inline: 1px; }
.qc-avail--month .qc-avail__day { padding-inline: 0; }

.qc-avail__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--qc-divider);
  font-size: var(--qc-fs-sm);
  color: var(--qc-text-secondary);
}
.qc-avail__key {
  display: inline-block;
  width: 1.4rem;
  height: .8rem;
  margin-right: .35rem;
  border-radius: 4px;
  border-left: 3px solid var(--qc-primary);
  background: color-mix(in srgb, var(--qc-primary) 22%, var(--qc-card-bg));
  vertical-align: -1px;
}
.qc-avail__key--block {
  border-left-color: var(--qc-status-orange);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--qc-status-orange) 26%, var(--qc-card-bg)) 0 5px, var(--qc-card-bg) 5px 10px);
}
.qc-avail__key--clash { box-shadow: inset 0 0 0 1.5px var(--qc-status-orange); }

/* ---- the list's bar for what is ticked ----------------------------------
   Its own class rather than `.d-flex`: Bootstrap's utility is `!important`
   and would keep the bar on screen over its own `hidden`. */
.qc-fleetbulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.qc-fleetbulk[hidden] { display: none; }

/* ---- the field sheet -----------------------------------------------------
   What the label on a machine opens: read on a phone, held in one hand. The
   two gestures share the row on a desk and take one each on a phone, full
   width — a thumb has to find them. */
.qc-field__acts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .5rem;
  margin-bottom: 1rem;
}
.qc-field__acts .btn { justify-content: center; min-height: 2.75rem; }

/* A hired machine on a day it is not there — not yet come, already gone back.
   Cross-hatched in the quiet grey of a thing that is absent, so it reads apart
   from a fermo's orange and from a free day's nothing. */
.qc-avail__cell.is-out,
.qc-avail__key--out {
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--qc-text-tertiary) 22%, transparent) 0 2px,
    transparent 2px 7px
  );
}
.qc-avail__key--out { border-left-color: var(--qc-text-tertiary); }