/* ============================================================
   BACHECA PER I GRANDI NUMERI (17/10)
   Barra dei totali sopra la bacheca, ritardi in testata di colonna,
   «Mostra altre» in fondo alle colonne lunghe.
   ============================================================ */
.pl-pano {
  display: flex; align-items: stretch; gap: 10px;
  margin: 0 0 12px;
  min-width: 0;
}
.pl-pano[hidden] { display: none; }

/* totali */
.pl-pano-kpi { display: flex; gap: 6px; flex-shrink: 0; }
.pl-kpi {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 78px; padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid var(--n-200); background: var(--n-0);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.pl-kpi strong {
  font-family: var(--titoli, inherit); font-size: 19px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
  color: var(--n-900); font-variant-numeric: tabular-nums;
}
.pl-kpi span { font-size: 11px; font-weight: 600; color: var(--n-500); white-space: nowrap; }
.pl-kpi-rit:not(.zero) { background: var(--err-bg); border-color: color-mix(in srgb, var(--err) 28%, transparent); cursor: pointer; }
.pl-kpi-rit:not(.zero) strong, .pl-kpi-rit:not(.zero) span { color: var(--err-ink); }
.pl-kpi-rit:not(.zero):hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 15%, transparent); }
.pl-kpi-rit:focus-visible { outline: 2px solid var(--err); outline-offset: 2px; }
.pl-kpi-oggi:not(.zero) { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.pl-kpi-oggi:not(.zero) strong, .pl-kpi-oggi:not(.zero) span { color: var(--warn-ink); }
.pl-kpi-nuovi { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.pl-kpi-nuovi strong, .pl-kpi-nuovi span { color: var(--ok-ink); }
.pl-kpi.zero strong { color: var(--n-400); }

/* tutte le fasi, anche quelle fuori schermo */
.pl-pano-fasi {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 5px;
  padding: 5px; border-radius: 13px;
  background: var(--n-100);
  overflow-x: auto; scrollbar-width: thin;
}
.pl-pano-fase {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 10px 0 9px;
  border: 0; border-radius: 9px;
  background: var(--n-0);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), inset 0 2px 0 var(--fase);
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--n-700);
  cursor: pointer;
  transition: transform var(--t-veloce), box-shadow var(--t-veloce);
}
.pl-pano-fase:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -4px rgba(16, 24, 40, .25), inset 0 2px 0 var(--fase); }
.pl-pano-fase i { width: 7px; height: 7px; border-radius: 50%; background: var(--fase); flex-shrink: 0; }
.pl-pano-fase span { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-pano-fase b {
  min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--fase) 15%, var(--n-0)); color: color-mix(in srgb, var(--fase) 70%, #101828);
}
.pl-pano-fase em {
  font-style: normal; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 1px 6px; border-radius: 999px; background: var(--err); color: #fff;
}
.pl-pano-fase.vuota { background: transparent; box-shadow: none; color: var(--n-400); font-weight: 500; }
.pl-pano-fase.vuota b { background: transparent; color: var(--n-400); font-weight: 600; }
.pl-pano-fase.uscita:not(.vuota) { background: color-mix(in srgb, var(--n-0) 60%, transparent); color: var(--n-500); }

/* colonna raggiunta dalla barra: un lampo del suo colore */
@keyframes colonna-lampo {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fase) 55%, transparent), 0 10px 30px -10px color-mix(in srgb, var(--fase) 60%, transparent); }
}
.kanban[data-board] .colonna.colonna-lampo { animation: colonna-lampo 1.3s var(--ease) 1; }

/* testata della colonna: numero più leggibile e ritardi */
.kanban[data-board] .colonna[data-fase] .colonna-conteggio {
  padding: 2px 8px; font-size: 12.5px; font-weight: 800;
}
.colonna-urg { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
.colonna-urg:empty { display: none; }
.cu {
  display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.cu-rit { background: var(--err); color: #fff; }
.cu-oggi { background: var(--warn-bg); color: var(--warn-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 30%, transparent); }
.cu-nuovi { background: var(--ok-bg); color: var(--ok-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 25%, transparent); }

/* «Mostra altre» in fondo alla colonna */
.colonna-altre-btn {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  width: 100%; margin: 2px 0 8px; padding: 9px 8px;
  border: 1px dashed color-mix(in srgb, var(--fase, var(--n-400)) 45%, var(--n-300)); border-radius: 11px;
  background: color-mix(in srgb, var(--fase, var(--n-400)) 6%, var(--n-0));
  font: inherit; font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--fase, var(--n-500)) 70%, #101828);
  cursor: pointer;
  transition: background var(--t-veloce), border-color var(--t-veloce);
}
.colonna-altre-btn small { font-size: 11px; font-weight: 500; color: var(--n-500); }
.colonna-altre-btn:hover { border-style: solid; background: color-mix(in srgb, var(--fase, var(--n-400)) 12%, var(--n-0)); }
.colonna-altre-btn.in-corso { opacity: .6; cursor: progress; }

/* telefono: i totali sopra, le fasi sotto che scorrono */
@media (max-width: 820px) {
  .pl-pano { flex-direction: column; gap: 8px; }
  .pl-pano-kpi { overflow-x: auto; }
  .pl-kpi { min-width: 72px; padding: 5px 10px; }
  .pl-kpi strong { font-size: 17px; }
}

/* tema scuro */
[data-theme="dark"] .pl-kpi-rit:not(.zero), [data-theme="dark"] .pl-kpi-oggi:not(.zero), [data-theme="dark"] .pl-kpi-nuovi { background: var(--n-0); }
[data-theme="dark"] .pl-pano-fasi { background: var(--n-25, var(--n-50)); }
[data-theme="dark"] .pl-pano-fase b { background: color-mix(in srgb, var(--fase) 25%, transparent); color: color-mix(in srgb, var(--fase) 55%, #fff); }
[data-theme="dark"] .colonna-altre-btn { background: transparent; color: var(--n-700); }