/*
  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;
  gap: var(--sa-sp-6);
  min-width: 0;
}

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

/* --- Pulsante notifiche push (campanella nella topbar) --- */
.sa-btn-notifiche {
  font-size: 16px;
  line-height: 1;
  opacity: 0.65;
  transition: opacity var(--sa-t-fast), transform var(--sa-t-fast);
}
.sa-btn-notifiche:hover { opacity: 1; }
/* Stato attivo: campanella accesa col colore accento. */
.sa-btn-notifiche.is-on {
  opacity: 1;
  color: var(--sa-accent);
  filter: drop-shadow(0 0 0.5px var(--sa-accent));
}

/* --- Menu contestuale (gestione stadi e pipeline) --- */
.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: 180px;
}

.sa-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--sa-r-sm);
  padding: var(--sa-sp-2) var(--sa-sp-3);
  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) 0; }

/* --- 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;
}

/* 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: rgba(59, 130, 246, 0.18);
  min-height: 40px;
}

/* ==========================================================
   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 piano */
@keyframes sa-col-pulse {
  0%   { box-shadow: inset 0 0 0 2px transparent; }
  40%  { box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.30); }
  100% { box-shadow: inset 0 0 0 2px transparent; }
}

.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;
  }
}

/* --- Drag and drop con pointer events --- */
/* Fantasma: copia della card che segue il cursore, inerte ai pointer. */
.sa-card--ghost {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  opacity: 0.95;
  transform: rotate(2deg);
  box-shadow: var(--sa-shadow-modal);
  margin: 0;
}

/* Linea che indica dove cadra la card durante il trascinamento. */
.sa-drop-indicator {
  height: 3px;
  border-radius: var(--sa-r-pill);
  background: var(--sa-accent);
  margin: 2px 0;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

/* --- 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 {
  background: #25D366;
  border-color: #25D366;
  color: #FFFFFF;
}
.sa-btn--wa:hover {
  background: #1FB855;
  border-color: #1FB855;
}
.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: #B8B5B0;
  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;
  }

  /* Riga 1 sinistra: brand */
  .sa-topbar__left {
    flex: 1 1 auto;
    min-width: 0;
    gap: var(--sa-sp-2);
    /* Il selettore pipeline va sotto, nella seconda riga */
    flex-wrap: wrap;
  }

  /* Il brand rimane sulla prima riga */
  .sa-brand {
    flex: 0 0 auto;
  }

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

  .sa-pipeline-selector select {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    padding: var(--sa-sp-1) var(--sa-sp-2);
    padding-right: var(--sa-sp-6);
  }

  /* 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: badge Meta compatto, niente nome, solo avatar */
  .sa-userbar {
    flex: 0 0 auto;
    gap: var(--sa-sp-2);
  }

  /* Il nome utente si nasconde su mobile: c'e l'avatar */
  .sa-userbar__name {
    display: none;
  }

  /* Badge Meta: versione compatta su mobile (solo "Meta: ok" / "Meta: !" ) */
  .sa-meta-badge {
    font-size: 11px;
    padding: 3px 8px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* "Dashboard master" diventa "Master" per stare nello spazio */
  /* Non possiamo cambiare il testo da CSS: lo rendiamo piu compatto */
  #btn-admin.sa-btn {
    font-size: 11px;
    padding: 4px 8px;
    min-height: 36px;
  }

  #btn-board-back.sa-btn {
    font-size: 11px;
    padding: 4px 8px;
    min-height: 36px;
  }

  /* Tap target: portiamo btn-icon e avatar a 44px su mobile */
  .sa-btn-icon {
    width: 44px;
    height: 44px;
  }

  /* 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 piu strette su mobile ---- */
  /*
    Su 390px vogliamo che le colonne siano ~290px cosi si intravedono
    i bordi della colonna successiva e l'utente capisce che puo scorrere.
  */
  :root {
    --sa-col-min-w: 260px;
    --sa-col-max-w: 290px;
  }

  .sa-board {
    padding: 0 var(--sa-sp-3) var(--sa-sp-10);
    gap: var(--sa-sp-3);
    /* scroll snap: si ferma su ogni colonna */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .sa-stage {
    scroll-snap-align: start;
  }

  /* ---- 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) */