/* ============================================================
   CARD DEGLI INCARICHI (17/10, Angelo: «molto basic»)
   In alto: tipo, reparto e scadenza a parole. Al centro: titolo,
   cliente, pipeline e fase. In fondo: chi lo segue e le azioni.
   ============================================================ */
.kanban-incarichi .inc-card {
  gap: 7px;
  padding: 12px 13px 11px;
  overflow: hidden;
  flex-shrink: 0;   /* con overflow nascosto, in una colonna piena le card si schiaccerebbero */
}
/* filo colorato del reparto in cima alla card */
.kanban-incarichi .inc-card::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--rep), color-mix(in srgb, var(--rep) 25%, transparent));
  opacity: .85;
}

/* riga alta: tipo, reparto, scadenza */
.inc-testa { display: flex; align-items: center; gap: 7px; min-height: 24px; }
.inc-tipo {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 8px;
  background: color-mix(in srgb, var(--rep) 13%, var(--n-0));
  color: color-mix(in srgb, var(--rep) 78%, #101828);
}
.inc-tipo .ic { width: 13px; height: 13px; }
.inc-rep {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--rep) 70%, #101828);
}
.inc-quando {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--n-100); color: var(--n-600);
}
.inc-quando .ic { width: 12px; height: 12px; }
.inc-quando.inc-scaduto { background: var(--err-bg); color: var(--err-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--err) 22%, transparent); }
.inc-quando.inc-oggi { background: var(--warn-bg); color: var(--warn-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 25%, transparent); }
.inc-quando.inc-domani { background: color-mix(in srgb, #3b82f6 10%, var(--n-0)); color: #1d4ed8; }
.inc-quando.inc-fatto { background: var(--ok-bg); color: var(--ok-ink); }
.inc-quando.inc-senza { background: transparent; color: var(--n-400); padding: 0 2px; }

/* titolo e cliente */
.kanban-incarichi .inc-titolo {
  font-size: 13.5px; line-height: 1.38;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.inc-cliente {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 12.5px; font-weight: 500; color: var(--n-700);
}
.inc-cliente .ic { width: 13px; height: 13px; flex-shrink: 0; color: var(--n-400); }
.inc-cliente span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inc-dove-card .pip-dove { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 11.5px; color: var(--n-500); }
.inc-dove-card .pip-dove-nome { font-weight: 600; color: var(--n-600); }
.inc-dove-card .badge { font-size: 10.5px; padding: 1px 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* chip: priorità, in corso, fascia, ritardo, puntualità */
.inc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.inc-chip {
  --c: var(--n-500);
  display: inline-flex; align-items: center; gap: 5px;
  height: 21px; padding: 0 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--c) 11%, var(--n-0));
  color: color-mix(in srgb, var(--c) 80%, #101828);
}
.inc-chip-alta { --c: var(--err); }
.inc-chip-alta::before {
  content: ''; width: 9px; height: 9px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 21V4h11l-1.5 4L16 12H7v9z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 21V4h11l-1.5 4L16 12H7v9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.inc-chip-corso { --c: #d97706; }
.inc-chip-corso i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: inc-pulsa 1.6s ease-in-out infinite; }
@keyframes inc-pulsa { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .inc-chip-corso i { animation: none; } }
.inc-chip-ritardo { --c: var(--err); }
.inc-chip-tardi { --c: #b45309; }
.inc-chip-ok { --c: var(--ok); }

/* piede: chi lo segue + azioni */
.kanban-incarichi .inc-piede { margin-top: 2px; padding-top: 9px; border-top-color: var(--n-100); }
.inc-chi { margin-left: auto; display: inline-flex; flex-shrink: 0; }
.kanban-incarichi .inc-chi .avatar { width: 24px; height: 24px; font-size: 9.5px; flex-shrink: 0; box-shadow: 0 0 0 2px var(--n-0), 0 0 0 3px var(--n-150, var(--n-200)); }
.inc-azioni { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.inc-esito {
  height: 30px; padding: 0 12px; border: 0; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 4px 10px -4px color-mix(in srgb, var(--brand-600) 60%, transparent);
  transition: transform var(--t-veloce), filter var(--t-veloce);
}
.inc-esito:hover { filter: brightness(1.07); transform: translateY(-1px); }
.kanban-incarichi .btn-chiama { width: 30px; height: 30px; border-radius: 9px; }

/* completati: card più tenui, il resto resta leggibile */
.kanban-incarichi .inc-fatto { background: color-mix(in srgb, var(--n-0) 70%, var(--n-50)); }
.kanban-incarichi .inc-fatto .inc-titolo { color: var(--n-600); }
.kanban-incarichi .inc-fatto .inc-tipo { background: var(--ok-bg); color: var(--ok-ink); }
.kanban-incarichi .inc-fatto::after { opacity: .35; }

/* tema scuro */
[data-theme="dark"] .inc-tipo { background: color-mix(in srgb, var(--rep) 22%, transparent); color: color-mix(in srgb, var(--rep) 60%, #fff); }
[data-theme="dark"] .inc-rep { color: color-mix(in srgb, var(--rep) 60%, #fff); }
[data-theme="dark"] .inc-chip { background: color-mix(in srgb, var(--c) 20%, transparent); color: color-mix(in srgb, var(--c) 55%, #fff); }
[data-theme="dark"] .inc-quando.inc-domani { background: rgba(59, 130, 246, .18); color: #93c5fd; }
[data-theme="dark"] .kanban-incarichi .inc-fatto { background: var(--n-25, var(--n-0)); }

/* ============================================================
   FINESTRA «NUOVO INCARICO» (17/10): scelte a pulsanti
   ============================================================ */
.inc-form { display: flex; flex-direction: column; gap: 18px; }
.inc-form .campo { margin: 0; }
.inc-f-titolo {
  width: 100%;
  padding: 12px 14px; border-radius: 12px;
  font-family: var(--titoli, inherit); font-size: 18px; font-weight: 700; letter-spacing: -.015em;
  color: var(--n-900);
}
.inc-f-titolo::placeholder { color: var(--n-400); font-weight: 600; }
.inc-f-sez { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.inc-f-lab, .inc-form .campo .inc-f-lab {
  display: block; margin: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--n-500);
}
.inc-f-lab-dopo { margin-top: 10px; }
.inc-f-due { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }

/* pillole (reparto, persona) e scorciatoie della scadenza */
.inc-f-pillole { display: flex; flex-wrap: wrap; gap: 6px; }
.inc-f-pill, .inc-form .campo .inc-f-pill {
  --c: var(--brand-600);
  position: relative; margin: 0;
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px;
  border: 1px solid var(--n-200); border-radius: 999px;
  background: var(--n-0);
  font-size: 13px; font-weight: 600; color: var(--n-700);
  cursor: pointer; user-select: none;
  transition: background var(--t-veloce), border-color var(--t-veloce), color var(--t-veloce), box-shadow var(--t-veloce);
}
.inc-f-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.inc-f-pill:hover { border-color: color-mix(in srgb, var(--c) 45%, var(--n-200)); color: var(--n-900); }
.inc-f-pill:has(input:checked) {
  background: color-mix(in srgb, var(--c) 12%, var(--n-0));
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  color: color-mix(in srgb, var(--c) 70%, #101828);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 13%, transparent);
}
.inc-f-pill:has(input:focus-visible) { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.inc-f-pill.disabilitata { opacity: .45; cursor: not-allowed; }
.inc-f-pallino { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.inc-f-pill .avatar { width: 22px; height: 22px; font-size: 9px; margin-left: -7px; }

.inc-f-rapida {
  height: 30px; padding: 0 11px;
  border: 1px dashed var(--n-300); border-radius: 999px;
  background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--n-600);
  cursor: pointer;
  transition: background var(--t-veloce), border-color var(--t-veloce), color var(--t-veloce);
}
.inc-f-rapida:hover { border-color: var(--brand-600); color: var(--brand-700); }
.inc-f-rapida.attiva {
  border-style: solid; border-color: var(--brand-600);
  background: var(--brand-600); color: #fff;
}
.inc-f-data {
  display: flex; align-items: center; gap: 9px;
  padding: 0 12px; height: 42px;
  border: 1px solid var(--n-200); border-radius: 11px;
  background: var(--n-0);
  color: var(--n-500); cursor: text;
}
.inc-f-data:focus-within { border-color: var(--brand-600); box-shadow: 0 0 0 4px rgba(10, 111, 149, .12); }
.inc-f-data .ic { width: 16px; height: 16px; flex-shrink: 0; }
.inc-f-data input {
  flex: 0 0 auto; width: auto; min-width: 0;
  border: 0; padding: 0; height: 100%; background: transparent; box-shadow: none !important;
  font-size: 14px; font-weight: 600; color: var(--n-900);
}
.inc-f-giorno { margin-left: auto; font-size: 12.5px; color: var(--n-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inc-f-giorno::first-letter { text-transform: uppercase; }

/* segmentato (priorità, stato) */
.inc-f-seg {
  display: flex; padding: 4px; gap: 3px;
  border-radius: 12px; background: var(--n-100);
}
.inc-f-seg .inc-f-pill {
  flex: 1 1 auto; justify-content: center; white-space: nowrap;
  height: 32px; padding: 0 7px; font-size: 12.5px;
  border: 0; border-radius: 9px; background: transparent;
  color: var(--n-600);
}
.inc-f-seg .inc-f-pill:has(input:checked) {
  background: var(--n-0);
  color: color-mix(in srgb, var(--c) 75%, #101828);
  box-shadow: 0 1px 3px rgba(16, 24, 40, .12), inset 0 -2px 0 var(--c);
}
.inc-f-seg .inc-f-pill span::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%;
  background: var(--c); vertical-align: 1px;
}

/* tendina della pratica a tutta larghezza, come un campo */
.inc-form .tendina-btn { width: 100%; max-width: none; height: 42px; }
.inc-form textarea { min-height: 84px; resize: vertical; }
.inc-form .form-azioni { margin-top: 2px; padding-top: 16px; border-top: 1px solid var(--n-100); }

/* ============================================================
   SCHEDA DELL'INCARICO (clic sulla card) — rifatta il 17/10:
   prima «Cosa devi fare», colori solo per ritardo, oggi e l'azione
   principale (la si guarda tutto il giorno: superfici neutre)
   ============================================================ */
.inc-det { display: flex; flex-direction: column; gap: 14px; }
.inc-det-testa { display: flex; align-items: center; gap: 12px; }
.inc-det-tipo { width: 40px; height: 40px; border-radius: 12px; }
.inc-det-tipo .ic { width: 19px; height: 19px; }
.inc-det-titoli { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.inc-det-riga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inc-det-titoli .inc-chips { gap: 6px; }

/* COSA DEVI FARE */
.inc-cosa {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px 16px 20px; border-radius: 16px;
  background: var(--n-0);
  border: 1px solid var(--n-200);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -16px rgba(16, 24, 40, .25);
}
.inc-cosa::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--brand-600);
}
.inc-cosa.fatto::before { background: var(--ok); }
.inc-cosa .inc-f-lab { color: var(--brand-700); }
.inc-cosa-tit {
  margin: 0;
  font-family: var(--titoli, inherit); font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25;
  color: var(--n-900);
}
.inc-cosa-testo { margin: 0; font-size: 14px; line-height: 1.5; color: var(--n-700); }
.inc-cosa-passi { margin: 2px 0 0; padding: 0; list-style: none; counter-reset: passo; display: flex; flex-direction: column; gap: 6px; }
.inc-cosa-passi li {
  counter-increment: passo;
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.45; color: var(--n-700);
}
.inc-cosa-passi li::before {
  content: counter(passo);
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: var(--brand-700);
  background: color-mix(in srgb, var(--brand-600) 12%, var(--n-0));
}
.inc-cosa-chiude {
  margin: 2px 0 0; display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--n-500);
}
.inc-cosa-chiude .ic { width: 14px; height: 14px; color: var(--ok); flex-shrink: 0; }
.inc-cosa-azioni { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.inc-cosa-btn { height: 42px; padding: 0 18px; font-size: 14px; flex: 1 1 220px; }
.inc-cosa-tel {
  height: 42px; padding: 0 14px; gap: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; letter-spacing: .02em; text-decoration: none;
}
.inc-cosa-tel .ic { width: 16px; height: 16px; color: var(--ok-ink); }

/* riquadri neutri: cliente, scadenza, responsabile */
.inc-det-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.inc-det-box {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--n-200); background: var(--n-0);
}
.inc-det-box strong { font-size: 15px; color: var(--n-900); }
.inc-det-box .tenue { font-size: 12.5px; }
.inc-det-box .tenue::first-letter { text-transform: uppercase; }
.inc-det-quando strong { font-family: var(--titoli, inherit); font-size: 17px; letter-spacing: -.01em; }
.inc-det-quando.inc-scaduto strong { color: var(--err-ink); }
.inc-det-quando.inc-oggi strong { color: var(--warn-ink); }
.inc-det-quando.inc-fatto strong { color: var(--ok-ink); }
.inc-det-chi { display: flex; align-items: center; gap: 9px; min-width: 0; }
.inc-det-chi .avatar { width: 30px; height: 30px; font-size: 11px; flex-shrink: 0; }
.inc-det-cli { display: flex; align-items: center; gap: 11px; }
.inc-det-cli .avatar { width: 34px; height: 34px; font-size: 12px; flex-shrink: 0; }
.inc-det-cli > .ic { width: 18px; height: 18px; color: var(--n-400); }
.inc-det-cli-nome { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.inc-det-cli .btn { flex-shrink: 0; }
.inc-det-pratica { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--n-600); }
.inc-det-pratica .ic { width: 13px; height: 13px; }
.inc-det-tel {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  margin-top: 2px; padding: 6px 12px; border-radius: 10px;
  border: 1px solid var(--n-200);
  font-size: 13.5px; font-weight: 700; color: var(--n-800); text-decoration: none;
}
.inc-det-tel .ic { width: 15px; height: 15px; color: var(--ok-ink); }
.inc-det-tel:hover { border-color: var(--ok); }

/* stato: in fondo, più piccolo */
.inc-det-sez { display: flex; flex-direction: column; gap: 7px; }
.inc-det-stato { display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: var(--n-100); }
.inc-det-st {
  --c: var(--n-500);
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; border: 0; border-radius: 9px; background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--n-600);
  cursor: pointer;
  transition: background var(--t-veloce), color var(--t-veloce), box-shadow var(--t-veloce);
}
.inc-det-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); opacity: .5; }
.inc-det-st:hover:not(.attivo) { background: color-mix(in srgb, var(--n-0) 65%, transparent); color: var(--n-900); }
.inc-det-st.attivo { background: var(--n-0); color: var(--n-900); cursor: default; box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.inc-det-st.attivo i { opacity: 1; }
.inc-det-st:disabled { opacity: .6; }

/* nota originale del gestionale, chiusa; ultimo esito */
details.inc-det-nota { border-radius: 12px; background: var(--n-50); padding: 10px 14px; }
details.inc-det-nota summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--n-500); }
details.inc-det-nota[open] summary { margin-bottom: 6px; }
details.inc-det-nota .nota-testo, .inc-det-nota-esito .nota-testo { font-size: 13px; line-height: 1.5; }
.inc-det-nota-esito { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--n-50); }
.inc-det-azioni { margin-top: 0; padding-top: 14px; border-top: 1px solid var(--n-100); }
.inc-det-elimina { margin-right: auto; color: var(--err-ink); font-weight: 600; }
.inc-det-elimina:hover { background: var(--err-bg); }

/* tema scuro */
[data-theme="dark"] .inc-f-pill:has(input:checked) { background: color-mix(in srgb, var(--c) 22%, transparent); color: color-mix(in srgb, var(--c) 55%, #fff); }
[data-theme="dark"] .inc-f-seg .inc-f-pill:has(input:checked),
[data-theme="dark"] .inc-det-st.attivo { background: var(--n-200); color: color-mix(in srgb, var(--c) 50%, #fff); }
[data-theme="dark"] .inc-cosa { background: var(--n-0); border-color: var(--n-200); }
[data-theme="dark"] .inc-cosa .inc-f-lab, [data-theme="dark"] .inc-cosa-passi li::before { color: color-mix(in srgb, var(--brand-500) 60%, #fff); }