/*
  layout.css — Superagentsss
  Solo cio che i token di Leo (design-tokens.css) non coprono: griglia di pagina,
  vista lista alternativa, menu contestuale degli stadi, riga azioni della topbar.
  Niente ridefinizione dei token: si appoggia alle variabili --sa-*.
*/

html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sa-topbar__left {
  display: flex;
  align-items: center;
  /* Griglia 8px: 16px tra brand, divisore e contesto pipeline. */
  gap: var(--sa-sp-4);
  min-width: 0;
}

/* La board prende l'altezza residua e scorre in orizzontale. */
.sa-board {
  flex: 1;
  align-content: flex-start;
}

/* --- Campanella e CENTRO NOTIFICHE (topbar) --- */
/* La campanella ora apre il centro notifiche (non attiva piu il push, passato nel
   menu utente). Tutti i colori vengono dai token, cosi il pannello sta bene in
   entrambi i temi (chiaro/scuro) senza regole dedicate per tema. */
.sa-notif-wrap { position: relative; display: inline-flex; }
.sa-btn-notifiche {
  position: relative;
  font-size: 16px;
  line-height: 1;
  opacity: 0.72;
  transition: opacity var(--sa-t-fast), transform var(--sa-t-fast), color var(--sa-t-fast);
}
.sa-btn-notifiche:hover { opacity: 1; }
.sa-btn-notifiche[aria-expanded="true"] { opacity: 1; color: var(--sa-accent); }
/* Stato attivo: campanella accesa col blu marchio */
.sa-btn-notifiche.is-on {
  opacity: 1;
  color: var(--sa-accent);
  filter: drop-shadow(0 0 3px rgba(29, 94, 199, 0.45));
}

/* Badge col conteggio non lette, in alto a destra sulla campanella. */
.sa-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--sa-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--sa-surface);
}

/* Pannello a tendina del centro notifiche. */
.sa-notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-radius, 10px);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 90;
  overflow: hidden;
}
.sa-notif-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sa-sp-3) var(--sa-sp-4);
  border-bottom: 1px solid var(--sa-border);
}
.sa-notif-panel__title { font-weight: 700; color: var(--sa-text); font-size: 14px; }
.sa-notif-panel__action {
  background: none;
  border: none;
  color: var(--sa-accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
}
.sa-notif-panel__action:hover { background: var(--sa-surface-2); }

.sa-notif-list { overflow-y: auto; padding: var(--sa-sp-1) 0; }
.sa-notif-empty {
  padding: var(--sa-sp-6) var(--sa-sp-4);
  text-align: center;
  color: var(--sa-text-3);
  font-size: 13px;
}

.sa-notif-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sa-sp-3);
  padding: var(--sa-sp-3) var(--sa-sp-4);
  border-bottom: 1px solid var(--sa-border);
  cursor: pointer;
  transition: background var(--sa-t-fast);
}
.sa-notif-item:last-child { border-bottom: none; }
.sa-notif-item:hover { background: var(--sa-surface-2); }
/* Non letta: punto blu a sinistra (pseudo-elemento) e sfondo lievemente acceso. */
.sa-notif-item.is-unread { background: var(--sa-accent-light); }
.sa-notif-item.is-unread .sa-notif-item__title { font-weight: 700; }
.sa-notif-item__icon { font-size: 16px; line-height: 1.3; flex: 0 0 auto; }
.sa-notif-item__body { flex: 1 1 auto; min-width: 0; }
.sa-notif-item__title { color: var(--sa-text); font-size: 13px; font-weight: 600; }
.sa-notif-item__text {
  color: var(--sa-text-2);
  font-size: 12px;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-notif-item__time { color: var(--sa-text-3); font-size: 11px; margin-top: 2px; }
.sa-notif-item__x {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--sa-text-3);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 6px;
  transition: color var(--sa-t-fast), background var(--sa-t-fast);
}
.sa-notif-item__x:hover { color: var(--sa-danger); background: var(--sa-danger-bg); }

/* --- Striscia "in lavorazione" della campanella (analisi trascrizioni attive):
   ogni riga porta stato vivo e il tasto Ferma per bloccarla subito. --- */
.sa-notif-jobs { border-bottom: 1px solid var(--sa-border); background: var(--sa-accent-light); }
.sa-notif-job {
  display: flex;
  align-items: center;
  gap: var(--sa-sp-3);
  padding: var(--sa-sp-3) var(--sa-sp-4);
}
.sa-notif-job + .sa-notif-job { border-top: 1px solid var(--sa-border); }
.sa-notif-job__icon { font-size: 16px; line-height: 1.3; flex: 0 0 auto; }
.sa-notif-job__body { flex: 1 1 auto; min-width: 0; }
.sa-notif-job__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-notif-job__state { font-size: 12px; color: var(--sa-text-3); }
.sa-notif-job__stop {
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--sa-danger);
  color: var(--sa-danger);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 10px; /* comodo anche al dito, sul telefono */
  border-radius: 8px;
  transition: color var(--sa-t-fast), background var(--sa-t-fast);
}
.sa-notif-job__stop:hover { color: #fff; background: var(--sa-danger); }
.sa-notif-job__stop:disabled { opacity: 0.6; cursor: default; }

/* --- Avviso "nuova versione": barra fissa in basso, sopra ogni cosa. Compare
   quando il server serve una versione del frontend piu recente di questa. --- */
.sa-update-banner {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: var(--sa-sp-3);
  max-width: calc(100vw - 24px);
  padding: 10px 12px 10px 16px;
  background: var(--sa-text);
  color: var(--sa-surface);
  border-radius: 999px;
  box-shadow: var(--sa-shadow-modal);
  font-size: 14px;
}
.sa-update-banner__txt { line-height: 1.3; }
.sa-update-banner__btn {
  flex: 0 0 auto;
  background: var(--sa-accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.sa-update-banner__btn:hover { filter: brightness(1.08); }
.sa-update-banner__x {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--sa-surface);
  opacity: 0.7;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.sa-update-banner__x:hover { opacity: 1; }

/* --- Menu contestuale (pipeline, avatar, stadi, azioni) ---
   Restyle 2026-07-23: voci 32px con icona 16px, etichette di sezione, spunta
   sulla voce corrente, badge conteggio. Scrolla oltre il 60% dello schermo. */
.sa-menu {
  position: fixed;
  z-index: 80;
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-md);
  box-shadow: var(--sa-shadow-modal);
  padding: var(--sa-sp-1);
  min-width: 200px;
  max-height: min(60vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sa-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 32px;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--sa-r-sm);
  padding: var(--sa-sp-1) var(--sa-sp-2);
  font-family: var(--sa-font);
  font-size: 13px;
  color: var(--sa-text);
  cursor: pointer;
}

.sa-menu__item:hover { background: var(--sa-surface-2); }
.sa-menu__item--danger { color: var(--sa-danger); }
.sa-menu__item--danger:hover { background: var(--sa-danger-bg); }
.sa-menu__sep { height: 1px; background: var(--sa-border); margin: var(--sa-sp-1) calc(-1 * var(--sa-sp-1)); }

/* Icona di voce: 16px, muta; sulla voce danger prende il rosso. */
.sa-menu__ico {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--sa-text-3);
}
.sa-menu__ico svg { width: 16px; height: 16px; display: block; }
.sa-menu__item--danger .sa-menu__ico { color: inherit; }

/* Testo della voce: si allunga e tronca; cio che segue (badge, spunta) resta. */
.sa-menu__txt {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Riga di un LAVORO nella finestra trascrizioni: azione principale a sinistra
   (stato del lavoro) e cestino a destra. Il testo puo andare su piu righe:
   i titoli parlano, non si troncano a una riga come le voci semplici. */
.sa-menu__jobrow {
  display: flex;
  align-items: center;
  gap: var(--sa-sp-1);
  min-width: 300px;
}

.sa-menu__jobmain { flex: 1 1 auto; min-width: 0; }
.sa-menu__jobmain .sa-menu__txt { white-space: normal; }

.sa-menu__jobdel {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--sa-r-sm);
  color: var(--sa-text-3);
  cursor: pointer;
}
.sa-menu__jobdel svg { width: 15px; height: 15px; display: block; }
.sa-menu__jobdel:hover { background: var(--sa-danger-bg); color: var(--sa-danger); }

/* Etichetta di sezione (micro, alla Linear): orienta senza pesare. */
.sa-menu__label {
  padding: var(--sa-sp-2) var(--sa-sp-2) var(--sa-sp-1);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sa-text-3);
  user-select: none;
}

/* Spunta della voce corrente (cambio pipeline). */
.sa-menu__check {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--sa-accent);
}
.sa-menu__check svg { width: 14px; height: 14px; display: block; }

/* Badge numerico di voce (es. lead nuove in una pipeline). */
.sa-menu__badge {
  flex: 0 0 auto;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: var(--sa-r-pill);
  background: var(--sa-accent-light);
  color: var(--sa-accent);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Pallino colore pipeline dentro la voce di menu. */
.sa-menu__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Testata utente del menu avatar: identita a colpo d'occhio, click = profilo. */
.sa-menu__user {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: var(--sa-sp-2);
  border: none;
  border-radius: var(--sa-r-sm);
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--sa-font);
}
.sa-menu__user:hover { background: var(--sa-surface-2); }
.sa-menu__user-avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--sa-r-pill);
  background: radial-gradient(120% 120% at 30% 20%, var(--sa-accent), var(--sa-accent-mid));
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sa-menu__user-main { min-width: 0; }
.sa-menu__user-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-menu__user-sub {
  display: block;
  font-size: 11px;
  color: var(--sa-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* CESTINO (lead eliminate, recuperabili): lista dentro la finestra modale. */
.sa-trash__list { list-style: none; margin: 0; padding: 0; max-height: 55vh; overflow: auto; }
.sa-trash__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sa-sp-3);
  padding: var(--sa-sp-3) 0;
  border-bottom: 1px solid var(--sa-border);
}
.sa-trash__row:last-child { border-bottom: none; }
.sa-trash__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sa-trash__acts { display: flex; gap: var(--sa-sp-2); flex-shrink: 0; }

/* Intestazione informativa del menu (es. anteprima del numero normalizzato):
   si legge, non si clicca. */
.sa-menu__header {
  padding: var(--sa-sp-1) var(--sa-sp-3) var(--sa-sp-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--sa-text-3);
  border-bottom: 1px solid var(--sa-border);
  margin-bottom: var(--sa-sp-1);
  white-space: nowrap;
}

/* --- Vista lista --- */
.sa-list-wrap {
  flex: 1;
  overflow: auto;
  padding: 0 var(--sa-sp-6) var(--sa-sp-10);
}

.sa-list-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-md);
  overflow: hidden;
}

.sa-list-table th,
.sa-list-table td {
  text-align: left;
  padding: var(--sa-sp-3) var(--sa-sp-4);
  border-bottom: 1px solid var(--sa-border);
  font-size: 13px;
}

.sa-list-table th {
  font-weight: 600;
  color: var(--sa-text-2);
  background: var(--sa-surface-2);
  position: sticky;
  top: 0;
}

.sa-list-table__num { text-align: right; }
.sa-list-table td.sa-list-table__num { text-align: right; font-weight: 600; }

.sa-list-table tbody tr {
  cursor: pointer;
  transition: background var(--sa-t-fast);
}

.sa-list-table tbody tr:hover { background: var(--sa-surface-2); }
.sa-list-table tbody tr:last-child td { border-bottom: none; }

/* Stato vuoto centrato nella board */
.sa-board-empty {
  margin: auto;
  align-self: center;
}

/* Durante il drag la board disabilita lo scroll snap: l'autoscroll programmtico
   (board.scrollLeft +=) verrebbe contrastato da scroll-snap-type x mandatory,
   bloccando l'effetto su mobile. La classe e aggiunta da JS in startDrag e
   rimossa a fine gesto (onPointerUp/onPointerCancel).
   touch-action:none sulla board mentre si trascina: la board ha overflow-x:auto,
   quindi su touch il browser interpreterebbe lo swipe orizzontale come SUO scroll
   nativo (rubando il gesto al drag e mandando un pointercancel), e l'auto-scroll
   programmatico non partirebbe. Spegnendo touch-action solo durante il drag, il
   gesto resta al nostro codice e board.scrollLeft += vx funziona anche col dito. */
.sa-board.is-dragging-board {
  scroll-snap-type: none !important;
  touch-action: none;
}

/* Scroll verticale nelle colonne: se una colonna e piu alta della board visibile
   (molte card), la lista di card scorre al suo interno invece di essere tagliata
   da overflow:hidden. max-height calcolato con la variabile altezza topbar + toolbar
   (circa 120px di header fisso): le card non escono mai dalla colonna visibile.
   100dvh segue l'altezza visibile reale su mobile (100vh include la barra del
   browser iOS, da cui il fondo della lista che finiva sotto la barra e "non
   arrivava in fondo"); fallback a 100vh dove dvh non c'e. Momentum touch su iOS. */
.sa-stage__list {
  overflow-y: auto;
  max-height: calc(100vh - 130px);
  max-height: calc(100dvh - 130px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--sa-border) transparent;
}

/* Punto di rilascio attivo durante il drag in coda alla colonna */
.sa-drop-tail {
  min-height: 8px;
  border-radius: var(--sa-r-sm);
  transition: background var(--sa-t-fast), min-height 160ms var(--sa-ease);
}

.sa-stage.is-drag-over .sa-drop-tail {
  background: color-mix(in srgb, var(--sa-accent) 16%, transparent);
  min-height: 40px;
}

/* ==========================================================
   DASHBOARD MASTER — controlli aggiunti
   Interruttore "riceve i lead", liste di scelta agenti per le
   regole di routing, editor del testo notifica col prefisso fisso.
   ========================================================== */

/* Interruttore "riceve i lead" (toggle pillola). La checkbox vera resta nel DOM
   per accessibilita ma e nascosta; lo stato si mostra col track. */
.sa-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.sa-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.sa-switch__track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: var(--sa-r-pill);
  background: var(--sa-border);
  transition: background var(--sa-t-fast);
  flex-shrink: 0;
}
.sa-switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform var(--sa-t-fast);
}
.sa-switch input:checked + .sa-switch__track {
  background: var(--sa-accent);
}
.sa-switch input:checked + .sa-switch__track::after {
  transform: translateX(18px);
}
.sa-switch input:focus-visible + .sa-switch__track {
  outline: 2px solid var(--sa-border-focus);
  outline-offset: 2px;
}

/* Riga di scelta con checkbox + etichetta (form regole, modifica utente). */
.sa-check-row {
  display: flex;
  align-items: center;
  gap: var(--sa-sp-2);
  cursor: pointer;
  font-size: 13px;
}
.sa-check-list {
  display: flex;
  flex-direction: column;
  gap: var(--sa-sp-2);
  max-height: 220px;
  overflow-y: auto;
  padding: var(--sa-sp-2);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-sm);
  background: var(--sa-surface);
}

/* Editor del testo notifica: prefisso fisso (non editabile) + campo custom. */
.sa-notif-edit {
  display: flex;
  align-items: center;
  gap: var(--sa-sp-2);
  flex-wrap: wrap;
}
.sa-notif-prefix {
  font-weight: 600;
  color: var(--sa-text);
  background: var(--sa-surface-2);
  border: 1px dashed var(--sa-border);
  border-radius: var(--sa-r-sm);
  padding: var(--sa-sp-2) var(--sa-sp-3);
  white-space: nowrap;
  user-select: none;
}
.sa-notif-edit .sa-input {
  flex: 1;
  min-width: 180px;
}
.sa-notif-preview {
  font-weight: 600;
  color: var(--sa-accent-dark, var(--sa-accent));
}

/* ==========================================================
   MICRO-ANIMAZIONI — apertura pannello scheda
   Il pannello usa gia transition su transform in design-tokens.
   Qui affiniamo: easing elastico e durata piu lunga per
   un ingresso che sembra "scivolare in", non "comparire".
   ========================================================== */

/* Sovrascrive la transizione del pannello con un easing piu morbido */
.sa-panel {
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 260ms var(--sa-ease);
}

/* Overlay di apertura: gia gestito da sa-fade-in in design-tokens.
   Aggiungiamo uscita (classe .is-closing aggiunta da JS prima di rimuovere) */
@keyframes sa-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.sa-overlay.is-closing {
  animation: sa-fade-out 160ms var(--sa-ease) forwards;
}

/* Colonne board: quando arriva un nuovo lead la colonna pulsa col blu marchio */
@keyframes sa-col-pulse {
  0%   { box-shadow: var(--sa-shadow-col); }
  40%  { box-shadow: var(--sa-shadow-col), inset 0 0 0 2px color-mix(in srgb, var(--sa-accent) 30%, transparent); }
  100% { box-shadow: var(--sa-shadow-col); }
}

.sa-stage--pulse {
  animation: sa-col-pulse 700ms var(--sa-ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .sa-panel {
    transition: none;
  }
  .sa-overlay.is-closing,
  .sa-stage--pulse {
    animation: none;
  }
  /* La coda di rilascio non "cresce" animata: solo il colore cambia. */
  .sa-drop-tail {
    transition: background var(--sa-t-fast);
  }
}

/* --- Drag and drop con pointer events --- */
/* Fantasma: copia della card che segue il cursore, inerte ai pointer.
   Selettore .sa-card.sa-card--ghost (specificita 0,2,0) per BATTERE immersive.css
   `.sa-card { box-shadow: var(--imm-card-shadow) }` (0,1,0), che altrimenti, essendo
   caricato per ultimo, spegneva l'ombra di "volo": la card trascinata sembrava
   ferma. Ora usa --sa-shadow-drag (con il suo override scuro dedicato). */
.sa-card.sa-card--ghost {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  opacity: 0.95;
  transform: rotate(2deg);
  box-shadow: var(--sa-shadow-drag);
  margin: 0;
}

/* Linea che indica dove cadra la card durante il trascinamento: blu marchio */
.sa-drop-indicator {
  height: 3px;
  border-radius: var(--sa-r-pill);
  background: var(--sa-accent);
  margin: 2px 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sa-accent) 22%, transparent);
}

/* --- Drag delle COLONNE (riordino stadi dall'intestazione) --- */
/* Fantasma leggero: la sola intestazione clonata che segue il cursore. */
.sa-colghost {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  opacity: 0.95;
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-sm);
  box-shadow: var(--sa-shadow-drag);
  padding: var(--sa-sp-2) var(--sa-sp-3);
  margin: 0;
}
/* La colonna in movimento resta al suo posto ma si spegne un po'. */
.sa-stage.is-col-dragging { opacity: 0.45; }
/* Dove cadra: bordo blu marchio sul fianco della colonna di riferimento
   (prima = cadra alla sua sinistra; after = in coda, alla sua destra). */
.sa-stage.is-col-drop-before { box-shadow: -3px 0 0 0 var(--sa-accent); }
.sa-stage.is-col-drop-after  { box-shadow: 3px 0 0 0 var(--sa-accent); }

/* --- Azione WhatsApp (verde del marchio) --- */
.sa-card__action-btn--wa {
  background: #E7F8EE;
  border-color: #A7E3C3;
  color: #128C4B;
}
.sa-card__action-btn--wa:hover {
  background: #D2F3E0;
  border-color: #25D366;
  color: #0E7A40;
}

.sa-btn--wa {
  /* Verde WhatsApp scurito quel tanto che il bianco sopra passa AA (il #25D366
     pieno dava bianco-su-verde ~2:1, illeggibile). Resta chiaramente WhatsApp. */
  background: #0E8043;
  border-color: #0E8043;
  color: #FFFFFF;
}
.sa-btn--wa:hover {
  background: #0B6D39;
  border-color: #0B6D39;
}
.sa-btn-wa__icon { font-size: 15px; line-height: 1; }

/* --- Vista rubrica --- */
.sa-rubrica__head {
  display: flex;
  align-items: center;
  gap: var(--sa-sp-4);
  margin-bottom: var(--sa-sp-4);
}
.sa-rubrica__search {
  max-width: 420px;
  flex: 1;
}
.sa-rubrica__count {
  font-size: 13px;
  color: var(--sa-text-2);
  white-space: nowrap;
}
.sa-rubrica__name { font-weight: 600; }
.sa-rubrica-table__act { text-align: right; white-space: nowrap; }

/* Bottoni icona compatti nelle righe della rubrica */
.sa-icon-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: var(--sa-sp-1);
  padding: 0;
  border-radius: var(--sa-r-sm);
  border: 1px solid var(--sa-border);
  background: var(--sa-surface);
  color: var(--sa-text-2);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background var(--sa-t-fast), border-color var(--sa-t-fast), color var(--sa-t-fast);
}
.sa-icon-act:hover {
  background: var(--sa-surface-2);
  border-color: color-mix(in srgb, var(--sa-text-3) 32%, var(--sa-border));
  color: var(--sa-text);
}
.sa-icon-act--wa {
  background: #E7F8EE;
  border-color: #A7E3C3;
  color: #128C4B;
}
.sa-icon-act--wa:hover {
  background: #D2F3E0;
  border-color: #25D366;
  color: #0E7A40;
}

/* Riga di azioni di contatto nel pannello scheda */
.sa-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sa-sp-2);
}


/* ==========================================================
   RESPONSIVE MOBILE-FIRST
   Breakpoint: < 600px (telefoni tipici 360–430px)
   Logica: comprimiamo la topbar su 2 righe, ridimensioniamo
   la toolbar, allarghiamo i tap target, adattiamo le viste.
   Niente rottura del desktop: tutto il codice qui sotto
   e dentro @media, non tocca le regole base.
   ========================================================== */

@media (max-width: 599px) {

  /* ---- Topbar: 2 righe su mobile ---- */
  /*
    Riga 1: brand a sinistra, badge Meta + avatar a destra.
    Riga 2: selettore pipeline a tutta larghezza.
    Il nome utente si nasconde su mobile (c'e gia l'avatar).
    Il bottone "Dashboard master" si riduce a testo corto.
  */
  .sa-topbar {
    height: auto;
    flex-wrap: wrap;
    padding: var(--sa-sp-2) var(--sa-sp-3);
    gap: var(--sa-sp-2);
    align-items: center;
  }

  /* Il contenitore sinistro si dissolve (display: contents): brand, comandi e
     selettore diventano figli diretti della topbar e si ordinano su DUE righe
     vere: riga 1 = glifo brand + comandi utente, riga 2 = pipeline a tutta
     larghezza. Prima il blocco sinistro si prendeva la riga intera e spingeva
     i comandi su una terza riga. */
  .sa-topbar__left { display: contents; }

  .sa-brand {
    order: 0;
    flex: 0 0 auto;
  }
  .sa-userbar { order: 1; }

  /* Il selettore pipeline occupa la riga intera sotto */
  .sa-pipeline-selector {
    order: 2;
    flex: 1 1 100%;
    min-width: 0;
    gap: var(--sa-sp-2);
  }

  /* Il bottone pipeline si allarga sulla riga; tap comodo (40px). */
  .sa-pipe-btn {
    flex: 1 1 auto;
    max-width: none;
    height: 40px;
    justify-content: flex-start;
  }
  .sa-pipe-btn__label { flex: 0 1 auto; }

  /* Il contatore opportunita: su mobile puo andare a capo, tronca se troppo lungo */
  .sa-pipeline-count {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }

  /* Barra utente: solo pulsanti icona e avatar (il divisore non serve). */
  .sa-userbar {
    flex: 0 0 auto;
    gap: var(--sa-sp-1);
  }
  .sa-topbar__divider { display: none; }

  /* Tap target mobile: 36px + gap = bersaglio reale ~40px, e la riga
     brand+comandi resta UNA (glifo 26 + 4 icone + avatar < 351px). */
  .sa-btn-icon {
    width: 36px;
    height: 36px;
  }
  .sa-status-dot { top: 6px; right: 6px; }

  /* Specificita alzata a .sa-userbar .sa-userbar__avatar (0,2,0)
     per battere la regola base in auth-admin.css (0,1,0), senza !important. */
  .sa-userbar .sa-userbar__avatar {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }

  /* ---- Toolbar: impila verticalmente su mobile ---- */
  .sa-toolbar {
    padding: var(--sa-sp-3) var(--sa-sp-3);
    gap: var(--sa-sp-2);
  }

  .sa-toolbar__title {
    font-size: 15px;
  }

  .sa-toolbar__actions {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--sa-sp-2);
  }

  /* Il toggle vista prende la larghezza disponibile */
  .sa-view-toggle {
    flex: 1 1 auto;
  }

  .sa-view-toggle__btn {
    flex: 1;
    text-align: center;
    padding: var(--sa-sp-2) var(--sa-sp-2);
    font-size: 12px;
    /* Tap target minimo */
    min-height: 36px;
  }

  /* Il bottone "Aggiungi opportunita" a tutta larghezza sotto il toggle */
  #btn-add-opportunity {
    width: 100%;
    justify-content: center;
  }

  /* ---- Board: colonne a piena larghezza su mobile ---- */
  /*
    Su mobile (<=599px) ogni colonna occupa quasi tutta la larghezza dello
    schermo: (100vw - padding board *2 - mezzo gap che sbuca dalla colonna
    successiva). Questo garantisce che l'header "New Lead" / "Processed"
    sia sempre leggibile per intero e che non ci sia scroll orizzontale
    spezzato o contenuto tagliato.
    Il 12px di peek a destra segnala che c'e un'altra colonna da scorrere.
    scroll-snap porta il dito esattamente sulla colonna successiva.
  */
  :root {
    --sa-col-min-w: calc(100vw - 28px);
    --sa-col-max-w: calc(100vw - 28px);
  }

  .sa-board {
    padding: 0 var(--sa-sp-3) var(--sa-sp-10);
    gap: var(--sa-sp-2);
    /* scroll snap: si ferma su ogni colonna */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* niente overflow-y indesiderato: la board scorre solo in X */
    overflow-y: visible;
  }

  .sa-stage {
    scroll-snap-align: start;
    /* flex-shrink: 0 previene che la colonna si comprima sotto la larghezza
       voluta nonostante flex: 0 0 var(--sa-col-min-w) gia lo faccia;
       e un guard ridondante ma esplicito. */
    flex-shrink: 0;
  }

  /* ---- Vista rubrica: tabella non leggibile su mobile ---
     Sostituiamo la tabella con una vista a card impilate.
     La tabella resta nel DOM ma la nascondiamo; mostriamo
     una versione piu leggibile via display:block sulle righe.
  */
  .sa-rubrica-table thead {
    display: none; /* nascondiamo le intestazioni */
  }

  .sa-rubrica-table tbody tr {
    display: block;
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-r-md);
    padding: var(--sa-sp-3);
    margin-bottom: var(--sa-sp-2);
    background: var(--sa-surface);
  }

  .sa-rubrica-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sa-sp-1) 0;
    border-bottom: none;
    font-size: 13px;
    gap: var(--sa-sp-2);
  }

  /* Attributo data-label aggiunto da JS o gia in HTML: label a sinistra */
  .sa-rubrica-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--sa-text-3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
    min-width: 80px;
  }

  /* Cella azioni: allinea i bottoni a destra */
  .sa-rubrica-table td.sa-rubrica-table__act {
    justify-content: flex-end;
    padding-top: var(--sa-sp-2);
  }
  .sa-rubrica-table td.sa-rubrica-table__act::before {
    display: none;
  }

  /* Tap target per i bottoni icona nelle righe rubrica */
  .sa-icon-act {
    width: 40px;
    height: 40px;
  }

  /* ---- Vista lista: stessa logica della rubrica ---- */
  .sa-list-table thead {
    display: none;
  }

  .sa-list-table tbody tr {
    display: block;
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-r-md);
    padding: var(--sa-sp-3);
    margin-bottom: var(--sa-sp-2);
    background: var(--sa-surface);
  }

  .sa-list-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sa-sp-1) 0;
    border-bottom: none;
    font-size: 13px;
    gap: var(--sa-sp-2);
    text-align: left;
  }

  .sa-list-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--sa-text-3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
    min-width: 80px;
  }

  .sa-list-table td.sa-list-table__num {
    text-align: left;
  }

  /* ---- Pannello scheda: a tutta larghezza su mobile ---- */
  .sa-panel {
    width: 100vw;
    max-width: 100vw;
  }

  /* ---- Modali: padding interno ridotto ---- */
  .sa-modal__head,
  .sa-modal__foot {
    padding-left: var(--sa-sp-4);
    padding-right: var(--sa-sp-4);
  }

  .sa-modal__body {
    padding: var(--sa-sp-4);
  }

  /* ---- Form: campi a tutta larghezza ---- */
  .sa-list-wrap {
    padding: 0 var(--sa-sp-3) var(--sa-sp-10);
  }

  .sa-rubrica__head {
    flex-wrap: wrap;
  }

  .sa-rubrica__search {
    max-width: 100%;
  }

  /* ---- Dashboard admin: padding ridotto ---- */
  .sa-admin {
    padding: var(--sa-sp-4) var(--sa-sp-3) var(--sa-sp-10);
  }

  .sa-card-block {
    padding: var(--sa-sp-4);
  }

  /* Le opzioni di distribuzione impilate su mobile */
  .sa-dist-choices {
    flex-direction: column;
    gap: var(--sa-sp-2);
  }

  .sa-dist-choice {
    min-width: 0;
  }

  /* Tabella utenti: stessa logica card-table */
  .sa-users-table thead {
    display: none;
  }

  .sa-users-table tbody tr {
    display: block;
    border: 1px solid var(--sa-border);
    border-radius: var(--sa-r-md);
    padding: var(--sa-sp-3);
    margin-bottom: var(--sa-sp-2);
    background: var(--sa-surface);
  }

  .sa-users-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sa-sp-1) 0;
    border-bottom: none;
    font-size: 13px;
    gap: var(--sa-sp-2);
  }

  .sa-users-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--sa-text-3);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
    min-width: 80px;
  }

  .sa-row-actions {
    justify-content: flex-end;
  }

} /* fine @media (max-width: 599px) */


/* Il nome utente non sta piu in topbar (redesign 2026-07-23): identita e
   apertura del profilo vivono nella testata del menu avatar (.sa-menu__user). */


/* ==========================================================
   PAGINA PROFILO UTENTE
   ========================================================== */
.sa-profile-wrap {
  flex: 1;
  overflow-y: auto;
  padding: var(--sa-sp-6);
}
.sa-profile {
  max-width: 560px;
  margin: 0 auto;
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-lg);
  box-shadow: var(--sa-shadow-card);
  padding: var(--sa-sp-6);
}
.sa-profile__header {
  display: flex;
  align-items: center;
  gap: var(--sa-sp-4);
  margin-bottom: var(--sa-sp-6);
  padding-bottom: var(--sa-sp-5);
  border-bottom: 1px solid var(--sa-border);
}
.sa-profile__avatar {
  width: 60px;
  height: 60px;
  border-radius: var(--sa-r-pill);
  /* Gradiente blu marchio, stesso dell'icona super-eroe */
  background: radial-gradient(120% 120% at 30% 20%, var(--sa-accent), var(--sa-accent-mid));
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(29, 94, 199, 0.28);
}
.sa-profile__name {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 2px;
  color: var(--sa-text);
}
.sa-profile__role {
  font-size: 13px;
  color: var(--sa-text-2);
  margin: 0;
}
.sa-profile__form .sa-input:disabled {
  background: var(--sa-surface-2);
  color: var(--sa-text-3);
  cursor: not-allowed;
}
.sa-profile__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sa-sp-2);
}
.sa-profile__loading {
  text-align: center;
  color: var(--sa-text-2);
  padding: var(--sa-sp-10);
}


/* ==========================================================
   CALENDARIO (appuntamenti dei lead)
   ========================================================== */
.sa-cal-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 var(--sa-sp-6) var(--sa-sp-6);
}
.sa-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sa-sp-4);
  flex-wrap: wrap;
  padding: 0 0 var(--sa-sp-4);
}
.sa-cal__nav {
  display: flex;
  align-items: center;
  gap: var(--sa-sp-2);
}
.sa-cal__period {
  font-size: 15px;
  font-weight: 600;
  color: var(--sa-text);
  margin-left: var(--sa-sp-2);
  text-transform: capitalize;
}
.sa-cal__modes {
  display: flex;
  align-items: center;
  gap: var(--sa-sp-2);
}
/* Toggle giorno/settimana/mese: stesso linguaggio del view-toggle */
.sa-cal-mode__btn {
  font-family: var(--sa-font);
  font-size: 13px;
  font-weight: 500;
  padding: var(--sa-sp-1) var(--sa-sp-3);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-sm);
  background: var(--sa-surface);
  color: var(--sa-text-2);
  cursor: pointer;
  transition: background var(--sa-t-fast), color var(--sa-t-fast), border-color var(--sa-t-fast);
}
.sa-cal-mode__btn.is-active {
  background: linear-gradient(135deg, var(--sa-accent) 0%, var(--sa-accent-mid) 100%);
  border-color: var(--sa-accent-mid);
  color: #fff;
  box-shadow: 0 2px 8px rgba(29, 94, 199, 0.22);
}
.sa-cal-mode__btn:hover:not(.is-active) {
  background: var(--sa-surface-2);
  color: var(--sa-text);
}
.sa-cal__agent {
  width: auto;
  min-width: 160px;
}
.sa-cal__body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sa-border) transparent;
}

/* --- MENSILE --- */
.sa-cal-month {
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-lg);
  overflow: hidden;
  box-shadow: var(--sa-shadow-card);
}
.sa-cal-month__head,
.sa-cal-month__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.sa-cal-month__dow {
  padding: var(--sa-sp-2);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--sa-text-3);
  background: var(--sa-surface-2);
  border-bottom: 1px solid var(--sa-border);
}
.sa-cal-cell {
  position: relative;
  min-height: 84px;
  border-right: 1px solid var(--sa-border);
  border-bottom: 1px solid var(--sa-border);
  background: var(--sa-surface);
  padding: var(--sa-sp-2);
  text-align: left;
  font-family: var(--sa-font);
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sa-sp-1);
  transition: background var(--sa-t-fast);
}
.sa-cal-cell:nth-child(7n) { border-right: none; }
.sa-cal-cell__num {
  font-size: 13px;
  font-weight: 500;
  color: var(--sa-text);
}
.sa-cal-cell--out { background: var(--sa-surface-2); }
.sa-cal-cell--out .sa-cal-cell__num { color: var(--sa-text-3); }
.sa-cal-cell--today .sa-cal-cell__num {
  background: radial-gradient(circle at 30% 30%, var(--sa-accent), var(--sa-accent-mid));
  color: #fff;
  border-radius: var(--sa-r-pill);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(29, 94, 199, 0.30);
}
/* Giorno con appuntamenti: cliccabile, evidenziato, col conteggio. */
.sa-cal-cell--has {
  cursor: pointer;
  background: var(--sa-accent-light);
}
.sa-cal-cell--has:hover { background: #DBEAFE; }
.sa-cal-cell__count {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--sa-accent) 0%, var(--sa-accent-mid) 100%);
  border-radius: var(--sa-r-pill);
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
/* Giorno con SOLO impegni gia fatti: attenuato e barrato, ma resta visibile e
   cliccabile (il lavoro completato non sparisce dal calendario). Coerente con
   is-done delle viste settimana e giorno. */
.sa-cal-cell--alldone { opacity: 0.6; }
.sa-cal-cell--alldone .sa-cal-cell__count { text-decoration: line-through; }

/* --- SETTIMANALE --- */
.sa-cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sa-sp-2);
}
.sa-cal-week__col {
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-md);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sa-cal-week__col.is-today {
  border-color: var(--sa-accent);
  box-shadow: 0 0 0 1px var(--sa-accent), 0 2px 8px rgba(29, 94, 199, 0.12);
}
.sa-cal-week__head {
  padding: var(--sa-sp-2);
  background: var(--sa-surface-2);
  border-bottom: 1px solid var(--sa-border);
  display: flex;
  align-items: baseline;
  gap: var(--sa-sp-1);
}
.sa-cal-week__dow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--sa-text-3);
}
.sa-cal-week__date {
  font-size: 14px;
  font-weight: 600;
  color: var(--sa-text);
}
.sa-cal-week__list {
  padding: var(--sa-sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sa-sp-1);
}
.sa-cal-week__item {
  display: flex;
  align-items: baseline;
  gap: var(--sa-sp-1);
  text-align: left;
  background: var(--sa-accent-light);
  border: 1px solid #BFDBFE;
  border-radius: var(--sa-r-sm);
  padding: 4px 8px;
  font-family: var(--sa-font);
  cursor: pointer;
  transition: background var(--sa-t-fast);
}
.sa-cal-week__item:hover { background: #DBEAFE; }
.sa-cal-week__item.is-done { opacity: 0.6; }
.sa-cal-week__item.is-done .sa-cal-week__name { text-decoration: line-through; }
.sa-cal-week__time {
  font-size: 11px;
  font-weight: 700;
  color: var(--sa-accent-dark);
  flex-shrink: 0;
}
.sa-cal-week__name {
  font-size: 12px;
  color: var(--sa-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-cal-week__more {
  font-size: 11px;
  font-weight: 600;
  color: var(--sa-text-2);
  margin: 2px 0 0;
  padding-left: 2px;
}
.sa-cal-week__empty {
  font-size: 16px;
  color: var(--sa-text-3);
  text-align: center;
  margin: var(--sa-sp-3) 0;
}

/* --- GIORNALIERA --- */
.sa-cal-day {
  background: var(--sa-surface);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-lg);
  overflow: hidden;
  box-shadow: var(--sa-shadow-card);
}
.sa-cal-day__slot {
  display: flex;
  gap: var(--sa-sp-3);
  padding: var(--sa-sp-3) var(--sa-sp-4);
  border-bottom: 1px solid var(--sa-border);
}
.sa-cal-day__slot:last-child { border-bottom: none; }
.sa-cal-day__hour {
  flex: 0 0 56px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-text-2);
  padding-top: 4px;
}
.sa-cal-day__rows {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sa-sp-2);
}
.sa-cal-day__item {
  display: flex;
  align-items: baseline;
  gap: var(--sa-sp-3);
  text-align: left;
  background: var(--sa-accent-light);
  border: 1px solid #BFDBFE;
  border-radius: var(--sa-r-sm);
  padding: var(--sa-sp-2) var(--sa-sp-3);
  font-family: var(--sa-font);
  cursor: pointer;
  transition: background var(--sa-t-fast);
}
.sa-cal-day__item:hover { background: #DBEAFE; }
.sa-cal-day__item.is-done { opacity: 0.6; }
.sa-cal-day__item.is-done .sa-cal-day__title { text-decoration: line-through; }
.sa-cal-day__time {
  font-size: 12px;
  font-weight: 700;
  color: var(--sa-accent-dark);
  flex-shrink: 0;
}
.sa-cal-day__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-text);
}
.sa-cal-day__name {
  font-size: 12px;
  color: var(--sa-text-2);
  margin-left: auto;
  flex-shrink: 0;
}
.sa-cal-day__empty,
.sa-cal-day__slot ~ .sa-cal-day__empty {
  text-align: center;
  color: var(--sa-text-2);
  padding: var(--sa-sp-10);
  margin: 0;
}

/* --- CALENDARIO su mobile --- */
@media (max-width: 599px) {
  .sa-cal-wrap { padding: 0 var(--sa-sp-3) var(--sa-sp-4); }
  .sa-cal__head { gap: var(--sa-sp-2); }
  .sa-cal__period { font-size: 14px; }
  /* Settimana: scorre in orizzontale invece di stringere 7 colonne minuscole. */
  .sa-cal-week {
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    overflow-x: auto;
  }
  .sa-cal-cell { min-height: 60px; padding: 4px; }
  .sa-cal-cell__num { font-size: 12px; }
}

/* ==========================================================
   SCHEDA CONTATTO SU DESKTOP: larga, a due colonne ESPLICITE
   A sinistra l'identita (opportunita, contatti, CRM, Meta); a
   destra il lavoro, con le NOTE in testa e sempre in vista
   (prima fluivano a colonne tipografiche e finivano sotto la
   piega: per vederle si scorreva). Mobile e tablet: le due
   colonne si impilano, identita prima e lavoro dopo.
   ========================================================== */
.sa-panel__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 40px;
}
@media (min-width: 1100px) {
  .sa-panel {
    width: min(900px, 74vw);
  }
  .sa-panel__body {
    padding: var(--sa-sp-6) 32px;
  }
  .sa-panel__cols {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  /* Piu respiro e piu corpo al testo quando lo spazio c'e. */
  .sa-panel__section { margin-bottom: 28px; }
  .sa-panel__section-title { font-size: 12px; }
  .sa-field-row { padding: 7px 0; }
  .sa-field-row__label { font-size: 13px; }
  .sa-field-row__value { font-size: 14.5px; }
  .sa-panel__title { font-size: 18px; }
}

/* Piede delle note: meta a sinistra, azioni (modifica/elimina) a destra. */
.sa-note__actions { display: inline-flex; gap: 6px; }

/* ==========================================================
   VISTA ASSISTENTE ("Oggi"): la giornata dell'agente
   ========================================================== */
.sa-assist-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--sa-sp-5, 20px);
  width: 100%;
}
.sa-assist__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
}
.sa-assist__title { margin: 0; font-size: 20px; }
.sa-assist__date { color: var(--sa-text-muted, #7a7f8a); text-transform: capitalize; }
.sa-assist__section { margin-bottom: 26px; }
/* Intestazione di sezione a due lati: titolo a sinistra, azione (Elimina tutti)
   a destra. Lo stacco sotto e lo STESSO che aveva prima il titolo (--sa-sp-3),
   cosi le sezioni senza azione restano identiche a prima della modifica. */
.sa-assist__section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--sa-sp-3); }
.sa-assist__section-head .sa-panel__section-title { margin: 0; }
.sa-assist__section-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
/* Casella "seleziona tutti" della sezione: sobria, accanto al titolo. */
.sa-assist__select-all { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--sa-text-muted, #7a7f8a); cursor: pointer; user-select: none; white-space: nowrap; }
.sa-assist__select-all input { cursor: pointer; margin: 0; }
.sa-assist__list { list-style: none; margin: 0; padding: 0; }
.sa-assist__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-md, 10px);
  margin-bottom: 8px;
  background: var(--sa-surface, transparent);
  cursor: pointer;
}
.sa-assist__row:hover { border-color: var(--sa-accent, #1E40AF); }
/* Riga-esito del pannello Analisi SENZA lead (errore senza contatto): e un
   referto inerte, non apre nulla. Niente cursore-mano ingannevole: default. */
.sa-assist__row[data-ana-row]:not(.sa-assist__row--clickable) { cursor: default; }
.sa-assist__row[data-ana-row]:not(.sa-assist__row--clickable):hover { border-color: var(--sa-border); }
.sa-assist__time,
.sa-assist__late {
  flex: 0 0 auto;
  min-width: 64px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: center;
  font-size: 13px;
  padding: 4px 8px;
  border-radius: var(--sa-r-pill, 999px);
  background: var(--sa-surface-2, rgba(127,127,127,.12));
}
.sa-assist__late { color: var(--sa-danger, #b4232a); }
.sa-assist__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sa-assist__main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-assist__meta {
  font-size: 12.5px;
  color: var(--sa-text-muted, #7a7f8a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* I tasti d'azione vanno a capo se lo spazio non basta (col cestino sono fino a
   cinque): sui telefoni piu stretti l'ultimo non viene piu tagliato. */
.sa-assist__acts { flex: 0 1 auto; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
@media (max-width: 640px) {
  .sa-assist__row { flex-wrap: wrap; }
  .sa-assist__main { order: 1; flex-basis: calc(100% - 80px); }
  .sa-assist__acts { order: 2; margin-left: 76px; }
  .sa-assist__meta { white-space: normal; }
}

/* ==========================================================
   SCHELETRO DI CARICAMENTO della scheda (apertura immediata)
   ========================================================== */
.sa-skel__block { margin-bottom: 26px; }
.sa-skel__bar {
  height: 13px;
  border-radius: var(--sa-r-pill);
  margin-bottom: 10px;
  background: linear-gradient(90deg, var(--sa-surface-2) 25%, var(--sa-border) 50%, var(--sa-surface-2) 75%);
  background-size: 200% 100%;
  animation: sa-skel-shimmer 1.1s ease-in-out infinite;
}
.sa-skel__block .sa-skel__bar:first-child {
  height: 10px;
  opacity: 0.7;
  margin-bottom: 14px;
}
@keyframes sa-skel-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-skel__bar { animation: none; }
}

/* ==========================================================
   RIFINITURA MOBILE (16/7/2026), dopo gli screenshot del BOSS
   dall'iPhone. Tre mali, tre cure:
   1) La pagina "tagliata a sinistra" era l'AUTO-ZOOM di iOS:
      quando un campo con font < 16px riceve il focus, Safari
      zooma la pagina e la lascia croppata. Cura: ogni campo
      di input su mobile ha font-size 16px, cosi iOS non zooma.
   2) Header ingombrante: prima delle card c'erano ~320px di
      barre. Cura: via il titolo ridondante, brand asciutto,
      i due bottoni d'azione affiancati su una riga.
   3) Card enormi (~150px l'una: 2 per schermata). Cura:
      padding e gap ridotti, via la riga "Nessun valore",
      bottoni azione piu compatti. ~100px a card.
   ========================================================== */
@media (max-width: 599px) {

  /* --- 1) Anti auto-zoom iOS: campi sempre a 16px --- */
  .sa-input,
  .sa-select,
  .sa-rubrica__search,
  input[type="search"],
  textarea {
    font-size: 16px;
  }

  /* --- 2) Header asciutto --- */
  /* Sul telefono parla il glifo: il wordmark occuperebbe mezza riga e
     spingerebbe i comandi su una terza (redesign 2026-07-23). */
  .sa-brand__logo { display: none; }

  /* Il titolo "Opportunita" ripete quel che la board gia dice. */
  .sa-toolbar { padding-top: var(--sa-sp-2); padding-bottom: var(--sa-sp-2); }
  .sa-toolbar__title { display: none; }

  /* "Importa trascrizione" e "Aggiungi opportunita" affiancati 50/50
     su UNA riga sotto il toggle delle viste, invece di due file intere. */
  #btn-import-transcript {
    flex: 1 1 45%;
    min-width: 0;
    justify-content: center;
    font-size: 12px;
    padding: var(--sa-sp-2) var(--sa-sp-2);
    white-space: nowrap;
  }
  #btn-add-opportunity {
    flex: 1 1 45%;
    width: auto;
    min-width: 0;
    font-size: 12px;
    padding: var(--sa-sp-2) var(--sa-sp-2);
    white-space: nowrap;
  }

  /* --- 3) Card compatte: piu lead per schermata --- */
  .sa-card {
    padding: var(--sa-sp-2) var(--sa-sp-3);
  }
  .sa-card__name { font-size: 14px; }
  /* La riga "Nessun valore" e nascosta OVUNQUE da design-tokens.css: qui non
     serve piu una regola dedicata. (Il valore VERO, quando c'e, resta visibile.) */
  .sa-card__value { margin-top: 2px; }
  .sa-card__meta { margin-top: 2px; }
  .sa-card__actions {
    margin-top: var(--sa-sp-2);
    padding-top: var(--sa-sp-1);
    gap: 4px;
  }
  .sa-card__action-btn {
    padding: 6px 0;
    font-size: 14px;
  }

  /* Anche l'intestazione della colonna respira meno. */
  .sa-stage__header { padding-top: var(--sa-sp-2); padding-bottom: var(--sa-sp-2); }

} /* fine rifinitura mobile */

/* Selettore di ordinamento delle lead (toolbar). Compatto: e una preferenza,
   non deve rubare la scena ai bottoni d'azione. */
.sa-board-sort {
  max-width: 160px;
  font-size: 13px;
  text-overflow: ellipsis;
}

/* Selettore di supervisione admin (toolbar): stesso trattamento, i nomi
   lunghi troncano con l'ellissi (il menu a tendina li mostra per intero). */
.sa-admin-scope {
  max-width: 160px;
  text-overflow: ellipsis;
}
/* Ricerca globale (toolbar): il "chi e questo?" a portata di mano su board e
   lista. Compatta come il selettore accanto; su mobile prende la riga intera. */
.sa-global-search {
  width: 200px;
  min-width: 140px;
  font-size: 13px;
}
@media (max-width: 599px) {
  .sa-board-sort {
    flex: 1 1 100%;
    max-width: none;
    font-size: 16px; /* anti auto-zoom iOS, come gli altri campi */
  }
  .sa-global-search {
    flex: 1 1 100%;
    width: auto;
    font-size: 16px; /* anti auto-zoom iOS */
  }
}

/* Barra delle azioni in blocco (vista lista) e testata con la spunta */
.sa-bulk-bar {
  /* Barra flottante GLOBALE: fissa in basso, sopra ogni vista (Lista, Rubrica,
     assistente Oggi). Compare quando c'e almeno una riga selezionata. */
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  z-index: 85;
  width: min(680px, calc(100vw - 24px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sa-sp-2);
  padding: var(--sa-sp-2) var(--sa-sp-3);
  border: 1px solid var(--sa-accent, #1d5ec7);
  border-radius: var(--sa-r-pill);
  background: var(--sa-surface);
  box-shadow: var(--sa-shadow-modal);
}
.sa-bulk-bar__count { font-size: 13px; font-weight: 700; }
.sa-bulk-bar__actions { display: flex; flex-wrap: wrap; gap: var(--sa-sp-2); }
/* Spunta di selezione multipla nelle righe dell'assistente Oggi. */
.sa-assist__check { width: 18px; height: 18px; cursor: pointer; flex: 0 0 auto; align-self: center; }
.sa-list-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--sa-sp-2);
}
.sa-list-table__check { width: 34px; }
.sa-list-table__check input { width: 18px; height: 18px; cursor: pointer; }
@media (max-width: 599px) {
  /* Nella lista-card mobile la cella spunta non mostra la label finta */
  .sa-list-table td.sa-list-table__check::before { display: none; }
}

/* Promemoria per attivare le notifiche (max 1/settimana, opt-out permanente).
   Barra non invadente in fondo, a tema; le azioni a destra (a capo su mobile). */
.sa-notif-reminder {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--sa-surface);
  color: var(--sa-text);
  border: 1px solid var(--sa-border);
  border-radius: var(--sa-r-md);
  box-shadow: var(--sa-shadow-modal);
  padding: 12px 14px;
}
.sa-notif-reminder__txt { font-size: 13px; flex: 1; min-width: 180px; }
.sa-notif-reminder__acts { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 599px) {
  .sa-notif-reminder { left: 8px; right: 8px; bottom: 8px; }
  .sa-notif-reminder__acts { width: 100%; }
}