/* Componenti del design system Ordine Operativo, portati da React a CSS.
   Ogni regola replica gli stili inline di `components/{core,forms,brand}/*.jsx`:
   stessi token, stesse misure, stessi stati (hover, press, focus). */

/* --- Icone (Lucide) ------------------------------------------------------ */
/* `lucide.createIcons()` sostituisce gli <i data-lucide> conservandone le classi.
   Qui non c'è React: la sostituzione del nodo è legittima (vedi readme del DS). */
.icon { display: inline-flex; width: 16px; height: 16px; flex: 0 0 auto; stroke-width: 1.9; }
.icon--13 { width: 13px; height: 13px; }
.icon--15 { width: 15px; height: 15px; }
.icon--22 { width: 22px; height: 22px; stroke-width: 1.75; }

/* --- Button -------------------------------------------------------------- */
.btn {
  font: var(--w-semibold) var(--size-small) / 1.15 var(--font-body);
  letter-spacing: .005em;
  padding: 11px 20px;
  border-radius: var(--r-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover),
              box-shadow var(--t-hover), transform var(--dur-fast) var(--ease-out);
}
.btn--sm { font-size: var(--size-micro); padding: 7px 13px; }
.btn--lg { font-size: var(--size-body); padding: 15px 28px; }
.btn--full { display: flex; width: 100%; }

.btn--primary { background: var(--brand-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--brand-primary-hover); color: #fff; }
.btn--primary:active { background: var(--brand-primary-press); transform: translateY(1px); }

.btn--secondary { background: var(--surface-card); color: var(--blu-700); border-color: var(--border-soft); }
.btn--secondary:hover { background: var(--celeste-100); border-color: var(--border-strong); color: var(--blu-700); }
.btn--secondary:active { transform: translateY(1px); }

.btn--ghost { background: transparent; color: var(--blu-700); }
.btn--ghost:hover { background: var(--celeste-100); color: var(--blu-700); }
.btn--ghost:active { transform: translateY(1px); }

.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover, .btn[aria-disabled="true"]:hover { background: var(--brand-primary); }

/* --- Badge --------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid;
  font: var(--w-semibold) var(--size-micro) / 1.1 var(--font-body);
}
.badge--celeste { background: var(--celeste-200); color: var(--blu-800); border-color: rgba(43, 74, 105, .14); }
.badge--blu { background: var(--blu-700); color: var(--celeste-100); border-color: transparent; }
.badge--salvia { background: var(--salvia-300); color: #33422F; border-color: rgba(43, 74, 105, .12); }
.badge--grigio { background: var(--carta-2); color: var(--grigio-blu-700); border-color: var(--border-hair); }
.badge--contorno { background: transparent; color: var(--blu-700); border-color: var(--border-soft); }

/* --- Card ---------------------------------------------------------------- */
.card {
  border-radius: var(--r-4);
  padding: var(--s-5);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              border-color var(--t-hover);
}
.card--plain { background: var(--surface-card); border: var(--border-1); box-shadow: var(--shadow-card); }
.card--hair { background: var(--surface-card); border: var(--border-2); }
.card--wash { background: var(--surface-wash); border: 1px solid rgba(43, 74, 105, .10); }
.card--ink {
  background: var(--surface-ink);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--text-invert);
  box-shadow: var(--shadow-lift);
}
.card--pad-6 { padding: var(--s-6); }
.card--hoverable:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: var(--border-soft); }

/* --- SectionHeading ------------------------------------------------------ */
.heading { display: flex; flex-direction: column; gap: var(--s-3); align-items: flex-start; }
.heading__eyebrow {
  font: var(--text-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--acciaio-600);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.heading__eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .6; }
.heading__title { font: var(--text-h2-style); letter-spacing: var(--ls-head); color: var(--text-strong); }
.heading__lead {
  margin: 0;
  font: var(--w-regular) var(--size-lead) / var(--lh-body) var(--font-body);
  color: var(--text-muted);
  max-width: var(--measure-prose);
}
.heading--dark .heading__eyebrow { color: var(--celeste-300); }
.heading--dark .heading__title { color: #fff; }
.heading--dark .heading__lead { color: var(--celeste-200); }

/* --- WashPanel ----------------------------------------------------------- */
.wash { position: relative; isolation: isolate; background: var(--surface-page); }
.wash--wash { background: var(--surface-wash); }
.wash--dark { background: var(--blu-800); color: var(--text-invert); }
.wash__layers { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wash--dark .wash__layers { opacity: .45; }
.wash__layers--1 { background-image: var(--wash-1); }
.wash__layers--2 { background-image: var(--wash-1), var(--wash-2); }
.wash__layers--3 { background-image: var(--wash-1), var(--wash-2), var(--wash-3); }

/* --- PostIt -------------------------------------------------------------- */
.postit {
  width: 168px;
  min-height: 96px;
  box-sizing: border-box;
  padding: 18px 14px 14px;
  background-color: var(--postit-celeste);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%);
  box-shadow: var(--shadow-postit);
  border-radius: 2px;
  position: relative;
  font: 600 21px / 1.22 var(--font-hand);
  color: var(--nero-blu);
  user-select: none;
  transform: rotate(var(--postit-rot, -1.5deg));
}
.postit--celeste { background-color: var(--postit-celeste); --magnete: var(--acciaio-600); }
.postit--blu { background-color: var(--postit-blu); --magnete: var(--blu-800); }
.postit--salvia { background-color: var(--postit-salvia); --magnete: var(--salvia-700); }
.postit--grigio { background-color: var(--postit-grigio); --magnete: var(--grigio-blu-700); }
.postit--carta { background-color: var(--postit-carta); --magnete: var(--blu-500); }
.postit--narrow { min-height: 82px; padding: 15px 11px 11px; font-size: 17px; }
.postit::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  margin-left: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--magnete, var(--acciaio-600));
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .25), 0 2px 4px rgba(20, 43, 68, .35);
}
.postit__term {
  display: block;
  font: var(--w-semibold) var(--size-micro) / 1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(20, 36, 48, .55);
  margin-bottom: 6px;
}

/* --- KanbanBoard --------------------------------------------------------- */
.kanban {
  position: relative;
  height: 430px;
  border-radius: var(--r-4);
  background-color: var(--surface-card);
  background-image: linear-gradient(var(--wash-2)), linear-gradient(var(--wash-1));
  border: var(--border-2);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.kanban__col {
  position: absolute;
  top: 10px;
  bottom: 10px;
  border-radius: var(--r-3);
  background: rgba(255, 255, 255, .55);
  border: 1px dashed rgba(43, 74, 105, .20);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.kanban.is-flusso .kanban__col { opacity: 1; }
.kanban__col-title {
  font: var(--w-semibold) var(--size-micro) / 1 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acciaio-600);
  padding: 12px 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Senza JS le colonne restano nascoste e i post-it si impilano leggibili. */
.kanban:not(.is-live) { height: auto; display: flex; flex-wrap: wrap; gap: var(--s-4); padding: var(--s-5); }
.kanban:not(.is-live) .kanban__col { display: none; }
/* `touch-action` sta sui post-it, non sul riquadro: da telefono la pagina
   resta scorrevole trascinando il fondo della board. */
.kanban__note { cursor: grab; touch-action: none; }
.kanban.is-live .kanban__note {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform var(--dur-scene) var(--ease-settle);
}
.kanban__note.is-dragging { transition: none; z-index: 40; cursor: grabbing; }
.kanban__note.is-dragging .postit {
  box-shadow: 0 10px 14px rgba(20, 43, 68, .16), 0 30px 50px -20px rgba(20, 43, 68, .42);
}
.kanban__note:focus-visible { border-radius: var(--r-1); }

@media (prefers-reduced-motion: reduce) {
  .kanban.is-live .kanban__note { transition: none; }
  .kanban__col { transition: none; }
}

/* --- AreaBadge ----------------------------------------------------------- */
.area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-3);
  border-radius: var(--r-3);
  background: transparent;
  transition: background var(--t-hover);
  text-align: center;
}
.area:hover { background: var(--surface-wash); }
.area__disc {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  color: var(--blu-600);
  transition: border-color var(--t-hover), box-shadow var(--t-hover);
}
.area:hover .area__disc { border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.area__label { font: var(--w-semibold) var(--size-small) / 1.3 var(--font-body); color: var(--text-strong); }

/* --- PhaseStep ----------------------------------------------------------- */
.phase { display: flex; gap: var(--s-4); position: relative; }
.phase__rail { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.phase__num {
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--blu-700);
  color: #fff;
  font: var(--w-semibold) var(--size-small) / 1 var(--font-display);
}
.phase__line { flex: 1; width: 1px; background: var(--border-soft); margin-top: 6px; }
.phase__body { padding-bottom: var(--s-6); }
.phase--last .phase__body { padding-bottom: 0; }
.phase__head { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.phase__name { font: var(--w-semibold) var(--size-h3) / 1.2 var(--font-display); }
.phase__term { font: 600 19px / 1 var(--font-hand); color: var(--acciaio-600); }
.phase__text {
  margin: 8px 0 0;
  font: var(--text-body-style);
  color: var(--text-body);
  max-width: 56ch;
}

/* --- PriceCard ----------------------------------------------------------- */
.price { display: flex; flex-direction: column; gap: var(--s-4); }
.price__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.price__name { font: var(--w-semibold) var(--size-h3) / 1.2 var(--font-display); color: var(--text-strong); }
.price__amount { display: flex; align-items: baseline; gap: 6px; }
.price__value {
  font: var(--w-semibold) var(--size-h2) / 1 var(--font-display);
  letter-spacing: var(--ls-head);
  color: var(--blu-700);
}
.price__unit { font: var(--w-regular) var(--size-micro) / 1 var(--font-body); color: var(--text-muted); }
.price__summary { margin: 0; font: var(--w-regular) var(--size-small) / var(--lh-body) var(--font-body); color: var(--text-body); }
.price__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.price__list li {
  display: flex;
  gap: var(--s-2);
  font: var(--w-regular) var(--size-small) / 1.45 var(--font-body);
  color: var(--text-body);
}
.price__list .icon { margin-top: 3px; color: var(--salvia-700); }
.price__cta { margin-top: auto; font: var(--w-semibold) var(--size-small) / 1 var(--font-body); color: var(--text-link); }

.price--featured .price__name { color: #fff; }
.price--featured .price__value { color: #fff; }
.price--featured .price__unit { color: var(--celeste-300); }
.price--featured .price__summary,
.price--featured .price__list li { color: var(--celeste-200); }
.price--featured .price__list .icon { color: var(--celeste-300); }
.price--featured .price__cta { color: var(--celeste-200); }

/* --- Campi (Input, Textarea, Select, Checkbox) --------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font: var(--w-semibold) var(--size-micro) / 1.2 var(--font-body); color: var(--grafite); }
.field__hint { font: var(--w-regular) var(--size-micro) / 1.35 var(--font-body); color: var(--text-muted); }
.field__error { font: var(--w-medium) var(--size-micro) / 1.3 var(--font-body); color: var(--errore); }
.field__control {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-2);
  padding: 11px 13px;
  font: var(--w-regular) var(--size-small) / 1.45 var(--font-body);
  color: var(--text-strong);
  transition: border-color var(--t-hover), box-shadow var(--t-hover);
  outline: none;
}
.field__control:focus { border-color: var(--blu-400); box-shadow: var(--ring-focus); }
.field__control--invalid { border-color: var(--errore); }
textarea.field__control { resize: vertical; }

.select { position: relative; }
.select .field__control { appearance: none; padding-right: 36px; }
.select .icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--grigio-blu-500);
  pointer-events: none;
}

.check { display: flex; gap: var(--s-3); align-items: flex-start; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: var(--r-1);
  border: 1px solid var(--border-soft);
  background: var(--surface-card);
  display: grid;
  place-items: center;
  transition: background var(--t-hover), border-color var(--t-hover);
}
.check:hover .check__box { border-color: var(--border-strong); }
.check__box svg { opacity: 0; }
.check input:checked + .check__box { background: var(--blu-600); border-color: var(--blu-600); }
.check input:checked + .check__box svg { opacity: 1; }
.check input:focus-visible + .check__box { box-shadow: var(--ring-focus); }
.check__text { display: flex; flex-direction: column; gap: 2px; }
.check__label { font: var(--w-regular) var(--size-small) / 1.45 var(--font-body); color: var(--text-body); }