/* ==========================================================================
   Quercia viva — Dashboard (KPI strip, upcoming list, overview, quick actions)
   + the redesigned event-detail modal. All colour flows through --qc-* tokens
   (so light AND dark are handled). Status colour = meaning, per work status.
   ========================================================================== */

/* ---- KPI stat strip ---- */
.qc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .8rem;
  margin-bottom: 1rem;
}
@media (max-width: 992px) { .qc-stats { grid-template-columns: 1fr 1fr; } }
/* Stay 2-up on phones (was 1-up): four full-width cards pushed the calendar
   far below the fold. Tighten the gap and number size to fit. */
@media (max-width: 560px) {
  .qc-stats { grid-template-columns: 1fr 1fr; gap: .55rem; }
  .qc-stat { padding: .75rem .8rem .75rem .9rem; }
  .qc-stat__n { font-size: 1.55rem; }
}
.qc-stat {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--qc-card-bg);
  border: 1px solid var(--qc-border);
  border-radius: var(--qc-radius-card);
  box-shadow: var(--qc-shadow-sm);
  padding: .9rem 1rem .9rem 1.1rem;
  color: inherit;
  text-decoration: none;
  transition: transform var(--qc-dur-fast) var(--qc-ease-fast),
              box-shadow var(--qc-dur-fast) var(--qc-ease-fast),
              border-color var(--qc-dur-fast) var(--qc-ease-fast);
}
.qc-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--qc-shadow-md);
  border-color: color-mix(in srgb, var(--qc-primary) 26%, var(--qc-border));
  color: inherit;
  text-decoration: none;
}
.qc-stat::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--st, var(--qc-primary));
}
.qc-stat__l { font: 600 .68rem/1 var(--qc-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--qc-text-tertiary); }
.qc-stat__row { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-top: .5rem; }
.qc-stat__n { font-family: var(--qc-font-display); font-weight: 800; font-size: 1.9rem; line-height: 1; letter-spacing: -.02em; color: var(--qc-text-primary); font-variant-numeric: tabular-nums; }
.qc-stat__n small { font-family: var(--qc-font-body); font-weight: 600; font-size: .9rem; color: var(--qc-text-tertiary); }
.qc-stat__sub { margin-top: .35rem; font-size: .75rem; color: var(--qc-text-tertiary); }
.qc-ring {
  position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--qc-primary) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--qc-primary) 24%, var(--qc-surface-light)) 0);
}
.qc-ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--qc-card-bg); }
.qc-ring span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 .68rem var(--qc-font-body); color: var(--qc-primary); z-index: 1; font-variant-numeric: tabular-nums; }
.qc-chipn { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 .35rem; border-radius: 8px; font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--st, var(--qc-primary)) 22%, transparent); color: var(--qc-text-primary); }

/* ---- Dashboard cards (rail) reuse Tabler .card; tighten the header ---- */
.qc-dash-card .card-title { font-family: var(--qc-font-body); font-weight: 600; font-size: .95rem; }

/* ---- Upcoming works list ---- */
.qc-up { display: flex; flex-direction: column; }
.qc-up__row { display: flex; align-items: center; gap: .65rem; padding: .6rem .1rem; border-bottom: 1px solid var(--qc-divider); cursor: pointer; text-decoration: none; color: inherit; }
.qc-up__row:last-child { border-bottom: 0; }
.qc-up__row:hover { background: color-mix(in srgb, var(--qc-primary) 5%, transparent); text-decoration: none; }
/* Card-header "see all" links stay quiet — no Bootstrap underline on hover. */
.qc-dash-card .card-actions a { text-decoration: none; }
.qc-dash-card .card-actions a:hover { text-decoration: none; color: var(--qc-primary); }
.qc-up__bar { width: 3px; align-self: stretch; min-height: 34px; border-radius: 2px; background: var(--st, var(--qc-primary)); flex: none; }
.qc-up__m { flex: 1; min-width: 0; }
.qc-up__c { font-weight: 600; font-size: .86rem; color: var(--qc-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-up__p { font-size: .75rem; color: var(--qc-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Enriched meta line: short service/vehicle badge chips (reuse the .tpill tokens). */
.qc-up__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-top: .3rem; }
.qc-up__meta .tpill { height: 19px; padding: 0 .4rem; font-size: .66rem; letter-spacing: .02em; }
.qc-up__meta .tpill svg { width: 11px; height: 11px; }
/* Crew avatar stack sits between the customer block and the date column. */
.qc-up__crew { flex: none; align-self: center; }
.qc-up__w { text-align: right; flex: none; }
.qc-up__w b { display: block; font-family: var(--qc-font-display); font-weight: 700; font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--qc-text-primary); }
.qc-up__w span { font-size: .68rem; color: var(--qc-text-tertiary); font-variant-numeric: tabular-nums; }
.qc-av-mini { width: 22px; height: 22px; border-radius: 50%; font: 800 .56rem var(--qc-font-body); display: inline-flex; align-items: center; justify-content: center; color: var(--qc-on-primary); background: linear-gradient(135deg, var(--qc-primary-light), var(--qc-primary-dark)); }
.qc-av-mini--more { color: var(--qc-text-secondary); background: var(--qc-surface-light); }
.qc-av-stack { display: inline-flex; }
.qc-av-stack .qc-av-mini { margin-left: -6px; border: 1.5px solid var(--qc-card-bg); }
.qc-av-stack .qc-av-mini:first-child { margin-left: 0; }

/* ---- Overview (panoramica) ---- */
.qc-dist { display: flex; height: 8px; border-radius: 999px; overflow: hidden; margin-bottom: .85rem; border: 1px solid var(--qc-border); }
.qc-dist > i { display: block; height: 100%; }
.qc-pano__row { display: flex; align-items: center; gap: .6rem; padding: .38rem .3rem; font-size: .85rem; cursor: pointer; border-radius: 8px; text-decoration: none; color: inherit; }
.qc-pano__row:hover { background: color-mix(in srgb, var(--qc-primary) 5%, transparent); }
.qc-pdot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.qc-pano__row .qc-pl { color: var(--qc-text-secondary); }
.qc-pano__row .qc-pc { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--qc-text-primary); }
.qc-pano__row .qc-pa { color: var(--qc-text-tertiary); display: inline-flex; }
.qc-pano__row .qc-pa svg { width: 14px; height: 14px; }

/* ---- Quick actions (glass grid) ---- */
.qc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.qc-act {
  display: flex; align-items: center; gap: .5rem; padding: .55rem .65rem;
  border-radius: var(--qc-radius-btn); font: 600 .8rem/1.15 var(--qc-font-body);
  color: var(--qc-primary); cursor: pointer; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--qc-primary) 24%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--qc-primary) 12%, transparent), color-mix(in srgb, var(--qc-primary) 6%, transparent));
  transition: background var(--qc-dur-fast) var(--qc-ease-fast);
}
.qc-act:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--qc-primary) 18%, transparent), color-mix(in srgb, var(--qc-primary) 10%, transparent)); color: var(--qc-primary); text-decoration: none; }
.qc-act svg { width: 16px; height: 16px; flex: none; }
.qc-act--primary { grid-column: 1 / -1; justify-content: center; color: var(--qc-on-primary); border-color: color-mix(in srgb, var(--qc-primary) 55%, transparent); background: linear-gradient(135deg, var(--qc-primary), var(--qc-primary-dark)); }
/* Keep the solid green on hover: the generic .qc-act:hover would otherwise swap
   in the translucent secondary gradient, washing the on-primary text out. */
.qc-act--primary:hover { color: var(--qc-on-primary); text-decoration: none; background: linear-gradient(135deg, var(--qc-primary), var(--qc-primary-dark)); filter: brightness(1.06); }

/* ---- Empty state (rail) ---- */
.qc-up-empty { text-align: center; padding: 1.5rem .5rem; color: var(--qc-text-tertiary); }
.qc-up-empty .qc-rings { width: 96px; height: 96px; margin: 0 auto .5rem; }

/* ==========================================================================
   Welcome hero — a brand moment (growth rings backdrop) with a time-aware
   greeting, the localized date, and a one-line workload summary. Rings are
   allowed here per the guideline (login / welcome moments only).
   ========================================================================== */
.qc-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 1.4rem 1.5rem;
  background: var(--qc-card-bg);
  border: 1px solid var(--qc-border);
  border-radius: var(--qc-radius-panel);
  box-shadow: var(--qc-shadow-sm);
}
.qc-hero__rings {
  position: absolute;
  top: 50%; right: -40px;
  width: 260px; height: 260px;
  transform: translateY(-50%);
  pointer-events: none;
}
.qc-hero__body { position: relative; z-index: 1; flex: 1 1 320px; min-width: 0; }
.qc-hero__eyebrow {
  margin: 0 0 .2rem;
  font: 600 .74rem/1 var(--qc-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--qc-text-tertiary);
}
.qc-hero__title {
  margin: 0;
  font-family: var(--qc-font-display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--qc-text-primary);
}
.qc-hero__summary {
  margin: .45rem 0 0;
  font-size: .95rem;
  color: var(--qc-text-secondary);
}
.qc-hero__dot { margin: 0 .35rem; color: var(--qc-text-tertiary); }
.qc-hero__cta { position: relative; z-index: 1; flex: none; }
@media (max-width: 560px) {
  .qc-hero { padding: 1.15rem 1.2rem; }
  .qc-hero__title { font-size: 1.6rem; }
  .qc-hero__cta { width: 100%; }
  .qc-hero__cta .qc-btn-primary { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Dashboard mini-charts (AG Charts) — fixed hosts sized per chart type.
   Colours come from --qc-* tokens read live by dashboard_charts_controller.js.
   ========================================================================== */
.qc-chart { width: 100%; overflow: hidden; }
.qc-chart--donut { height: 208px; margin-bottom: .5rem; }
.qc-chart--bar { height: 168px; }
.qc-chart-empty {
  padding: 1.4rem .5rem;
  text-align: center;
  font-size: .85rem;
  color: var(--qc-text-tertiary);
}
/* AG Charts tooltip — brand it (renders in a document-level portal, so target
   the global classes). Theme-aware via --qc-* tokens. */
.ag-charts-tooltip {
  font-family: var(--qc-font-body);
  min-width: 128px;
  border-radius: var(--qc-radius-input);
  border: 1px solid var(--qc-border);
  box-shadow: var(--qc-shadow-md);
  overflow: hidden;
}
.ag-charts-tooltip-title {
  padding: .4rem .7rem;
  font-family: var(--qc-font-display);
  font-weight: 700;
  font-size: .82rem;
  line-height: 1.25;
  color: var(--qc-on-primary);
}
.ag-charts-tooltip-content {
  padding: .4rem .7rem;
  background: var(--qc-surface);
  color: var(--qc-text-primary);
  font-size: .82rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Event-detail modal "Scheda lavoro" — redesign B (interactive map rail)
   ========================================================================== */
.qc-emodal { --st: var(--qc-primary); display: grid; grid-template-columns: 320px 1fr; overflow: hidden; }
.qc-emodal svg { fill: none; stroke: currentColor; }

/* ---- Left rail: map + info panel ---- */
.qc-emodal__rail { position: relative; display: flex; flex-direction: column; min-height: 360px; background: var(--qc-surface-light); border-right: 1px solid var(--qc-divider); }
.qc-emodal__mapwrap { position: relative; flex: 1 1 auto; min-height: 190px; }
.qc-emodal__map { position: absolute; inset: 0; z-index: 1; } /* z-index:1 traps Leaflet's pane stacking so the loader can sit above it */
.qc-emodal__map .leaflet-container { width: 100%; height: 100%; background: var(--qc-surface); font-family: var(--qc-font-body); }
.qc-emodal--nomap .qc-emodal__mapwrap { display: none; }
.qc-emodal--nomap .qc-emodal__rail { min-height: 0; }
/* Branded ring loader that covers the map while a new address is geocoded */
.qc-emodal__maploader { position: absolute; inset: 0; z-index: 2; display: none; align-items: center; justify-content: center; background: var(--qc-surface-light); }
.qc-emodal__maploader.is-on { display: flex; }
.qc-emodal__mapinfo { display: flex; flex-direction: column; gap: .5rem; padding: .8rem .9rem; border-top: 1px solid var(--qc-divider); background: var(--qc-surface-light); }
.qc-emodal__mfact { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--qc-text-primary); }
.qc-emodal__mfact svg { width: 16px; height: 16px; color: var(--st); flex: none; }
.qc-emodal__mfact b { font-family: var(--qc-font-display); font-weight: 700; }
.qc-emodal__addr { display: flex; align-items: flex-start; gap: .5rem; font-size: .82rem; line-height: 1.35; color: var(--qc-text-secondary); }
.qc-emodal__addr svg { width: 16px; height: 16px; color: var(--st); flex: none; margin-top: 1px; }
.qc-emodal__maps { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .1rem; padding: .5rem; border-radius: var(--qc-radius-btn); font: 600 .82rem var(--qc-font-body); color: var(--qc-on-primary); text-decoration: none; background: linear-gradient(135deg, var(--qc-primary), var(--qc-primary-dark)); border: 1px solid color-mix(in srgb, var(--qc-primary) 60%, transparent); }
.qc-emodal__maps svg { width: 15px; height: 15px; }
.qc-emodal__maps:hover { color: var(--qc-on-primary); filter: brightness(1.06); }
/* Close: floats at the top-right of the whole modal; neutral so it reads over
   both the map rail (mobile, stacked) and the light details panel (desktop). */
.qc-emodal__close { position: absolute; top: 12px; right: 12px; z-index: 1050; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; color: var(--qc-text-secondary); background: color-mix(in srgb, var(--qc-card-bg) 86%, transparent); border: 1px solid var(--qc-border); box-shadow: var(--qc-shadow-sm); backdrop-filter: blur(6px); transition: color var(--qc-dur-fast) var(--qc-ease-fast), background var(--qc-dur-fast) var(--qc-ease-fast), border-color var(--qc-dur-fast) var(--qc-ease-fast); }
.qc-emodal__close svg { width: 17px; height: 17px; }
.qc-emodal__close:hover { color: var(--qc-primary); background: var(--qc-card-bg); border-color: color-mix(in srgb, var(--qc-primary) 40%, var(--qc-border)); }

/* Leaflet controls re-skinned onto brand tokens */
.qc-emodal__map .leaflet-control-zoom a { background: var(--qc-card-bg); color: var(--qc-text-primary); border-color: var(--qc-border); }
.qc-emodal__map .leaflet-control-zoom a:hover { background: var(--qc-surface-light); color: var(--qc-primary); }
.qc-emodal__map .leaflet-control-attribution { background: color-mix(in srgb, var(--qc-card-bg) 82%, transparent); color: var(--qc-text-tertiary); font-size: .62rem; }
.qc-emodal__map .leaflet-control-attribution a { color: var(--qc-primary); }
.qc-map-pin span { display: block; width: 20px; height: 20px; background: var(--st, var(--qc-primary)); border: 2px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }

/* ---- Right column: details ---- */
.qc-emodal__main { display: flex; flex-direction: column; min-width: 0; padding: 1.1rem 1.15rem .2rem; }
.qc-emodal__head { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; margin-bottom: .7rem; padding-right: 2.4rem; }
.qc-emodal__head h4 { margin: 0; font-family: var(--qc-font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: var(--qc-text-primary); }
.qc-emodal__sub { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.qc-emodal__id { font-size: .82rem; color: var(--qc-text-tertiary); }
.qc-emodal__lines { display: flex; flex-direction: column; }
.qc-emodal__line { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .5rem 0; border-bottom: 1px solid var(--qc-divider); }
.qc-emodal__line:last-child { border-bottom: 0; }
.qc-emodal__lhead { display: inline-flex; align-items: center; gap: .4rem; min-width: 104px; font: 700 .7rem var(--qc-font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--qc-text-tertiary); }
.qc-emodal__lhead svg { width: 16px; height: 16px; color: var(--qc-text-secondary); flex: none; }
/* colour the label glyphs to match their chips (team green, services bronze, vehicles blue) */
.qc-emodal__lhead--team svg { color: var(--qc-primary); }
.qc-emodal__lhead--serv svg { color: var(--qc-accent); }
.qc-emodal__lhead--veh svg { color: color-mix(in srgb, var(--qc-info) 60%, var(--qc-text-primary)); }
.qc-emodal__empty { color: var(--qc-text-tertiary); }
.qc-crew { display: flex; flex-wrap: wrap; gap: .4rem; }
/* .qc-cm / .qc-ini category chips are single-sourced in components.css (shared
   by the dashboard, the calendar modal and the work tables). */
.qc-emodal__contacts { display: flex; flex-wrap: wrap; gap: .4rem; padding: .7rem 0 .2rem; }
.qc-cc { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .65rem; border-radius: 10px; background: var(--qc-surface-light); border: 1px solid var(--qc-border); font-size: .84rem; color: var(--qc-text-primary); text-decoration: none; }
.qc-cc svg { width: 15px; height: 15px; color: var(--qc-text-tertiary); flex: none; }
.qc-cc:not(.qc-cc--static):hover { border-color: var(--qc-primary); color: var(--qc-primary); }
.qc-cc:not(.qc-cc--static):hover svg { color: var(--qc-primary); }
.qc-emodal__note { display: flex; align-items: flex-start; gap: .6rem; margin: .7rem 0; padding: .7rem .85rem; border-radius: 12px; font-size: .88rem; color: var(--qc-text-primary); background: color-mix(in srgb, var(--st) 13%, var(--qc-surface)); border: 1px solid color-mix(in srgb, var(--st) 26%, transparent); border-left: 3px solid var(--st); }
.qc-emodal__note .qc-note-icon { width: 17px; height: 17px; color: var(--st); flex: none; margin-top: 1px; }
.qc-emodal__notebody { min-width: 0; }
.qc-emodal__atts { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 .5rem; }
.qc-emodal__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .4rem -1.15rem 0; padding: .8rem 1.15rem; border-top: 1px solid var(--qc-divider); background: color-mix(in srgb, var(--qc-surface-light) 55%, transparent); }
.qc-emodal__foot-r { display: flex; gap: .5rem; }
.qc-ebtn { display: inline-flex; align-items: center; gap: .4rem; font: 600 .88rem var(--qc-font-body); padding: .5rem .9rem; border-radius: var(--qc-radius-btn); cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: filter var(--qc-dur-fast) var(--qc-ease-fast), background var(--qc-dur-fast) var(--qc-ease-fast); }
.qc-ebtn svg { width: 16px; height: 16px; flex: none; }
.qc-ebtn--pri { color: var(--qc-on-primary); background: linear-gradient(135deg, var(--qc-primary), var(--qc-primary-dark)); border-color: color-mix(in srgb, var(--qc-primary) 60%, transparent); box-shadow: 0 3px 10px color-mix(in srgb, var(--qc-primary) 26%, transparent); }
.qc-ebtn--pri:hover { color: var(--qc-on-primary); filter: brightness(1.06); }
.qc-ebtn--ghost { color: var(--qc-text-secondary); background: transparent; }
.qc-ebtn--ghost:hover { color: var(--qc-primary); }

@media (max-width: 620px) {
  .qc-emodal { grid-template-columns: 1fr; }
  .qc-emodal__rail { min-height: 0; border-right: 0; border-bottom: 1px solid var(--qc-divider); }
  .qc-emodal__mapwrap { min-height: 200px; }
  .qc-emodal__lhead { min-width: 100%; }
}

/* status pill + tags reused across dashboard/modal */
.qc-pill { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .6rem; border-radius: 999px; font: 600 .76rem var(--qc-font-body); background: color-mix(in srgb, var(--st, var(--qc-primary)) 20%, transparent); color: var(--qc-text-primary); }
.qc-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--st, var(--qc-primary)); }

/* ---- App / QR framed box (stays light for scanner) ---- */
.qc-qr { display: inline-block; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--qc-border); box-shadow: var(--qc-shadow-sm); line-height: 0; }
.qc-code { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .7rem; border-radius: 10px; background: var(--qc-field-bg); border: 1px solid var(--qc-border); }
.qc-code code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; color: var(--qc-text-primary); }