/* ==========================================================================
   LA BACHECA DEL FUNNEL (2026-09-17). Pagina DESKTOP: la board sta intera nello
   schermo — sette colonne affiancate a tutta larghezza, testata su una riga, le card
   scorrono DENTRO la propria colonna, mai la pagina (Mattias, con lo screenshot:
   «si deve vedere tutta da pc»). Da telefono si legge e si scorre in orizzontale,
   ma le azioni si fanno dalle pagine di lavoro.
   L'accento di ogni colonna viene dalla palette fase di .crm-fase (crm.css).
   Regole di casa: una property per riga, ombre solo --shadow-*, radius 16/12,
   breakpoint 40/64rem, animazioni dentro prefers-reduced-motion.
   ========================================================================== */

/* Il guscio centra a 760px: la bacheca vuole tutto lo schermo. */
.app-main:has(.bacheca-page) {
  max-width: none;
  padding: 0.75rem 1rem 1rem;
}

.bacheca-page {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* ---------- La testata: una striscia sola ---------- */

.bacheca-testa {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
}

.bacheca-testa h2 {
  margin: 0;
  font-size: 1.15rem;
}

.bacheca-cerca {
  display: block;
  flex: 0 1 20rem;
}

.bacheca-cerca input {
  width: 100%;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--navy);
  font-family: inherit;
  font-size: 0.86rem;
}

.bacheca-cerca input::placeholder {
  color: var(--gray-logo);
}

.bacheca-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.bacheca-chips-divisore {
  width: 1px;
  height: 1.2rem;
  margin: 0 0.35rem;
  background: var(--border);
}

/* ---------- Le colonne: la board riempie lo schermo ---------- */

.bacheca-colonne {
  display: flex;
  gap: 0.6rem;
  /* flex-start: ogni colonna e' alta quanto il SUO contenuto e la PAGINA scorre in giu'
     normalmente (Mattias 2026-09-17: «perche' non mi fai scrollare in giu'?» — la versione
     ad altezza fissa con lo scroll dentro la colonna non gli piaceva). */
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.bacheca-colonna {
  --colonna-accento: var(--navy);
  flex: 0 0 min(84vw, 290px);
  display: flex;
  flex-direction: column;
  min-height: 10rem;
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--colonna-accento);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.55);
  scroll-snap-align: start;
}

/* Da PC le sette colonne stanno SEMPRE tutte: si stringono, non si scrolla. */
@media (min-width: 64rem) {
  .bacheca-colonne {
    overflow-x: visible;
  }

  .bacheca-colonna {
    flex: 1 1 0;
    min-width: 0;
  }
}

.bacheca-colonna.is-tentato {
  --colonna-accento: var(--gray-logo);
}

.bacheca-colonna.is-in_contatto {
  --colonna-accento: var(--navy-bright);
}

.bacheca-colonna.is-appuntamento {
  --colonna-accento: var(--corallo);
}

.bacheca-colonna.is-visitato {
  --colonna-accento: var(--semaforo-arancio);
}

.bacheca-colonna.is-primo_ordine {
  --colonna-accento: var(--semaforo-verde);
}

.bacheca-colonna.is-cliente {
  --colonna-accento: var(--navy);
}

.bacheca-colonna.is-perso {
  --colonna-accento: var(--gray-text);
}

.bacheca-colonna-testa {
  /* Sticky: la testa resta in vista sotto l'header dell'app mentre la pagina scorre,
     cosi' si sa sempre in che fase si sta guardando. */
  position: sticky;
  top: var(--header-height);
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.5rem;
  align-items: center;
  padding: 0.55rem 0.7rem 0.45rem;
  border-bottom: 1px solid var(--border-soft);
  border-radius: var(--radius) var(--radius) 0 0;
  /* La testa prende una velatura del suo accento: la colonna si riconosce da lontano. */
  background: color-mix(in srgb, var(--colonna-accento) 10%, var(--surface));
}

.bacheca-colonna-testa h3 {
  margin: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--colonna-accento) 80%, var(--ink));
  font-size: 0.88rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bacheca-colonna-n {
  justify-self: end;
  min-width: 1.6rem;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: var(--colonna-accento);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.bacheca-colonna-fare {
  grid-column: 1 / -1;
  overflow: hidden;
  margin: 0;
  color: var(--gray-text);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bacheca-colonna-corpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.5rem;
}

/* Le card non si comprimono ne' sbordano: altezza loro, larghezza della colonna. */
.bacheca-colonna-corpo > * {
  flex: 0 0 auto;
  min-width: 0;
}


/* «Nessuno qui» si nasconde da solo appena una card c'e' — anche una arrivata col refresh. */
.bacheca-colonna-corpo:has(.bacheca-card) .bacheca-colonna-vuota {
  display: none;
}

.bacheca-colonna-vuota {
  margin: 0.5rem 0;
  color: var(--gray-logo);
  font-size: 0.82rem;
  text-align: center;
}

/* ---------- Le card ---------- */

.bacheca-card {
  --cluster-colore: var(--gray-logo);
  display: grid;
  min-width: 0;
  gap: 0.28rem;
  padding: 0.55rem 0.65rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-left: 4px solid var(--cluster-colore);
  border-radius: var(--radius-small);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  cursor: grab;
}

/* I colori dei cluster: gli stessi delle mappe (Prospects::Cluster::COLORI, come in chiamate.css). */
.bacheca-card.is-cluster-pescheria {
  --cluster-colore: #1f78b4;
}

.bacheca-card.is-cluster-sushi_etnico {
  --cluster-colore: #e05a48;
}

.bacheca-card.is-cluster-premium {
  --cluster-colore: #26327e;
}

.bacheca-card.is-cluster-trattoria {
  --cluster-colore: #1b873f;
}

.bacheca-card.is-cluster-misto {
  --cluster-colore: #b7791f;
}

.bacheca-card-testa {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  justify-content: space-between;
}

.bacheca-card-nome {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.25;
}

/* Il nome apre la scheda: e' un bottone, ma deve dire «cliccami» come un link — sottolineato
   tratteggiato a riposo, pieno quando ci passi sopra (Mattias 2026-09-18: «deve essere chiaro
   che si puo' selezionare il cliente»). */
.bacheca-card-nome button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
  font: inherit;
  text-align: left;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}

.bacheca-card-nome button:hover {
  color: var(--navy-bright);
  text-decoration: underline solid;
}

.bacheca-card:hover {
  border-color: var(--navy-bright);
}

.bacheca-card-dove {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: 0;
  color: var(--gray-text);
  font-size: 0.75rem;
}

.bacheca-card-cluster {
  padding: 0.06rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cluster-colore) 14%, var(--surface));
  color: var(--cluster-colore);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.bacheca-card-contatto {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  margin: 0;
  font-size: 0.78rem;
}

.bacheca-card-contatto svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--gray-logo);
}

.bacheca-card-contatto a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}

.bacheca-card-stato {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  color: var(--ink);
  font-size: 0.76rem;
}

.bacheca-card-valore {
  color: var(--semaforo-verde);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bacheca-card-scaduta {
  color: var(--corallo-dark);
  font-weight: 600;
}

.bacheca-card.is-scaduta {
  border-color: var(--corallo);
}

.bacheca-card-stato svg {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  color: var(--gray-logo);
}

.bacheca-card-chi {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  min-width: 0;
  margin: 0.1rem 0 0;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border-soft);
  color: var(--gray-text);
  font-size: 0.72rem;
}

.bacheca-card-chi-testo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bacheca-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: var(--navy);
  color: #ffffff;
  font-size: 0.6rem;
  font-weight: 700;
}

/* ---------- Drag&drop ---------- */

/* IL SOLCO che resta quando sfili la scheda dalla fila: il contenuto sparisce, il posto si
   stringe e resta un rettangolo tratteggiato — si vede da dove l'hai presa e dove tornera'
   se la lasci cadere nel vuoto. */
.bacheca-card.is-presa {
  height: 2.4rem;
  padding: 0;
  overflow: hidden;
  border: 1px dashed var(--gray-logo);
  background: transparent;
  box-shadow: none;
  cursor: grabbing;
}

.bacheca-card.is-presa > * {
  opacity: 0;
}

/* LA SCHEDA IN MANO: il clone che viaggia sotto il cursore, alzato e storto come una carta
   presa dal mazzo. Fuori schermo ma disegnato, se no Chrome non la fotografa. */
.bacheca-card.is-in-mano {
  position: fixed;
  top: -1000px;
  left: 0;
  z-index: -1;
  transform: rotate(-3deg);
  box-shadow: var(--shadow-3);
  pointer-events: none;
}

/* IL POSTO CHE SI APRE nella colonna d'arrivo: la fila fa spazio in testa, dove la scheda
   andra' davvero, e dentro c'e' scritta l'azione che stai per fare. Cresce dall'altezza zero
   fino a quella della scheda che hai in mano, cosi' la colonna si apre della misura giusta. */
.bacheca-arrivo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 2px dashed var(--colonna-accento);
  border-radius: var(--radius-small);
  background: color-mix(in srgb, var(--colonna-accento) 8%, var(--surface));
  color: color-mix(in srgb, var(--colonna-accento) 75%, var(--ink));
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
}

.bacheca-arrivo.is-aperto {
  height: var(--arrivo-altezza, 5.5rem);
  padding: 0.4rem;
  opacity: 1;
}

/* Col posto aperto la colonna vuota non dice piu' «Nessuno qui»: uno ce ne sta arrivando. */
.bacheca-colonna-corpo:has(.bacheca-arrivo) .bacheca-colonna-vuota {
  display: none;
}

/* Dove si puo' posare: la colonna si apre appena, e quella sotto il cursore si accende. */
.bacheca-colonna.is-accetta {
  border-color: color-mix(in srgb, var(--colonna-accento) 55%, var(--border-soft));
  background: var(--surface);
}

.bacheca-colonna.is-sopra {
  border-color: var(--colonna-accento);
  box-shadow: var(--shadow-2);
  background: var(--surface);
}

.bacheca-colonna.is-vietata {
  opacity: 0.45;
}

/* `hidden` deve vincere anche su display espliciti (trappola gia' pagata sulle visite). */
.bacheca-card[hidden],
.bacheca-colonna[hidden],
.bacheca-conferma[hidden] {
  display: none;
}

/* ---------- Il pannellino di conferma ---------- */

.bacheca-conferma {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 30;
  width: min(92vw, 24rem);
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-3);
}

.bacheca-conferma h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.bacheca-conferma-form {
  display: grid;
  gap: 0.6rem;
}

.bacheca-conferma-motivi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.bacheca-conferma-rimbalzo {
  margin: 0;
  color: var(--gray-text);
  font-size: 0.9rem;
}

@media (prefers-reduced-motion: no-preference) {
  .bacheca-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease,
      height 0.18s ease, padding 0.18s ease, opacity 0.15s ease;
  }

  .bacheca-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
  }

  /* La scheda che rientra nella fila: si riappoggia, non ricompare e basta. */
  .bacheca-card.is-rientrata {
    animation: bacheca-rientro 0.22s ease;
  }

  @keyframes bacheca-rientro {
    from {
      transform: scale(0.94);
      box-shadow: var(--shadow-3);
    }

    to {
      transform: scale(1);
      box-shadow: var(--shadow-1);
    }
  }

  .bacheca-colonna {
    transition: box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  }

  .bacheca-arrivo {
    transition: height 0.16s ease, opacity 0.16s ease, padding 0.16s ease;
  }
}

/* IL PASSO INDIETRO e' una CORREZIONE, non un esito: si veste da correzione — grigio, non il
   colore della colonna — cosi' a colpo d'occhio si distingue da un locale che avanza. */
.bacheca-colonna.is-indietro {
  border-color: var(--gray-logo);
}

.bacheca-arrivo.is-indietro {
  border-color: var(--gray-logo);
  background: color-mix(in srgb, var(--gray-logo) 10%, var(--surface));
  color: var(--gray-text);
}

.bacheca-conferma-scelta {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.88rem;
  line-height: 1.3;
}

.bacheca-conferma-scelta input {
  margin-top: 0.15rem;
}

/* Task ownership is distinct from the author of the last activity. */
.board-order-hint {
  margin: 0;
  color: var(--gray-text);
  font-size: 12px;
}

.board-task {
  display: grid;
  gap: 3px;
  margin: 4px 0;
  padding: 7px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.board-task-priority {
  justify-self: start;
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--azure-soft);
  color: var(--navy);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}

.board-task.is-overdue .board-task-priority {
  background: var(--corallo-soft);
  color: var(--corallo-dark);
}

.board-task.is-unplanned .board-task-priority {
  background: var(--bg);
  color: var(--gray-text);
}

.board-task.is-closed .board-task-priority {
  background: var(--bg);
  color: var(--gray-text);
}

.board-task-label,
.board-task-fields dt,
.board-history-label,
.board-potential-label {
  display: block;
  font-size: 10px;
  color: var(--gray-text);
  font-weight: 400;
}

.board-task-action {
  color: var(--navy);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.board-task-fields {
  display: grid;
  gap: 4px;
  margin: 3px 0;
}

.board-task-fields dd {
  margin: 1px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.board-task-open {
  justify-self: start;
  min-height: 28px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.board-task-open:hover {
  text-decoration: underline;
}

.bacheca-card-chi-testo {
  white-space: normal;
  overflow: visible;
  line-height: 1.4;
}

.bacheca-colonna-testa h3 {
  white-space: normal;
}