/* ── AUTOMAZIONI ────────────────────────────────────────────
   [DESIGN D0, 13/08/2026] Montata dal blocco `data-sec="autom"` del disegno.

   Come nelle altre sezioni, qui dentro c'e' poco: schede, pastiglie, righe,
   linguette e bottoni sono tutti del kit. Quello che segue e' la spaziatura di
   questa schermata e i due pezzi che il kit non ha:
     · **il flusso a passi** (`.au-flow`), cioe' la riga «Arriva un contatto →
       Email di benvenuto → Dopo 3 giorni: invito». Nel disegno si chiama
       `.flow/.fstep/.farr` e non e' mai entrata nel kit perche' la usa solo
       questa sezione;
     · **l'interruttore acceso/spento**, che nel kit non c'e' e qui e' la cosa
       che si tocca piu' spesso.

   ⛔ NON C'E' NIENTE DELL'EDITOR DEL FLUSSO. Quello vive ancora in
   `mytap-automations.css` e `mytap-automation-flow.css`, che restano caricati:
   vedi il perche' in cima a `includes/dashboard/views/automazioni.php`. */

.au-wrap { padding-bottom: 4px; }

/* ⚠ La regola mobile `#view-automations > div { padding: 12px 10px 16px }` di
   `dashboard-crm.css` e' `!important` e nata per il vestito vecchio, dove il
   contenuto era tutto dentro un `div` solo. Adesso i figli diretti sono tre
   (testata, riquadro di lavoro, editor), e imbottirli tutti e tre vorrebbe dire
   tre imbottiture sovrapposte. Si toglie qui invece che la' perche' quella
   regola serve ancora a chi non e' passato di qui. */
@media (max-width: 900px) {
    #view-automations > .nk.au-wrap,
    #view-automations > #automation-center-box { padding-left: 0 !important; padding-right: 0 !important; }
}

.au-piede { margin-top: 11px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── CREARE UN FLUSSO ───────────────────────────────────────
   Dal 13/08/2026 sta dentro la finestra «Aggiungi», non piu' nella schermata.
   Mentre e' aperta la pagina sotto non scorre: su telefono, scorrendo dentro
   la finestra si finisce per muovere quella dietro. */
body.au-fermo { overflow: hidden; }

/* Le guide dei Collegamenti hanno gia' insegnato che 468px stanno stretti a
   un elenco: qui dentro ci sono le schede dei flussi gia' pronti, a due
   colonne. */
#au-crea-velo .nk-modal { max-width: 560px; }
#au-crea-velo .au-manuale { margin-right: auto; }

/* ── CREARE UN FLUSSO, il dentro ────────────────────────────
   Le linguette sono `.nk-tabs`. ⚠ `setAutomationCreationMode()` accende la
   classe `active`, non `aria-selected`, e il kit colora `aria-selected`:
   questa riga fa da ponte invece di far riscrivere quella funzione, che e'
   letta anche da altre parti. */
.au-modi { margin: 10px 0 12px; }
.au-modi button.active {
    background: var(--nk-ink);
    color: var(--nk-accent);
    box-shadow: 0 1px 3px rgb(0 0 0 / .09);
    font-weight: 600;
}

.au-ai-testo { min-height: 78px; resize: vertical; line-height: 1.5; padding: 10px 12px; height: auto; }

.au-barra {
    margin-top: 11px;
    height: 4px;
    border-radius: 999px;
    background: var(--nk-ink-3);
    overflow: hidden;
}
.au-barra > div { height: 100%; background: var(--nk-accent); width: 0; transition: width .35s var(--nk-ease); }

.au-badge-riga { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.au-preset-gr { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.au-preset {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    padding: 11px 12px;
    border: 1px solid var(--nk-line);
    border-radius: var(--nk-r-sm);
    background: var(--nk-ink);
    font: inherit;
    cursor: pointer;
    transition: border-color .2s var(--nk-ease), background .2s var(--nk-ease);
}
.au-preset:hover { border-color: var(--nk-line-2); background: var(--nk-ink-2); }
.au-preset:focus-visible { outline: 2px solid var(--nk-accent); outline-offset: 2px; }
.au-preset-t { font-size: 13px; font-weight: 600; letter-spacing: -.014em; }
.au-preset-s { font-size: 11.5px; color: var(--nk-muted); line-height: 1.4; }
.au-preset-n { font-size: 11px; color: var(--nk-muted-2); margin-top: 3px; }
.au-manuale { margin-top: 10px; }

/* ── LE SCHEDE DEI FLUSSI ───────────────────────────────────
   Le scrive `actions.gestione-elenco.js`. */

.au-elenco { margin-bottom: 14px; }
.au-elenco > * + * { margin-top: 11px; }

/* ⇒ I COMANDI STANNO NELLA RIGA DEL TITOLO, come nel disegno, e non in un
   piede sotto la scheda. ⚠ `flex-wrap` perche' li' dentro ci sono cinque cose
   (nome, pastiglia, interruttore, Modifica, Elimina) e su uno schermo stretto
   devono andare a capo invece di schiacciare il nome fino a farlo sparire. */
.au-testa {
    display: flex;
    gap: 9px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 5px;
}
.au-nome { margin: 0; flex: 1; min-width: 130px; }
.au-mod { color: var(--nk-paper); }

/* ⇒ IL FLUSSO SI LEGGE SENZA APRIRE NIENTE.
   Prima i passi stavano dentro un `<details>` chiuso («Cosa fa, passo per
   passo»), e il disegno li mette in chiaro: e' la sola cosa che dice a un
   titolare **cosa succede davvero** quando quell'interruttore e' acceso.
   Chiuso, un'automazione e' un nome e un interruttore, cioe' una cosa di cui
   fidarsi al buio. */
.au-flow {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 9px;
}
.au-step {
    background: var(--nk-ink);
    border: 1px solid var(--nk-line);
    border-radius: var(--nk-r-sm);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 550;
}
.au-arr { color: var(--nk-muted-2); font-size: 13px; }

/* Il passo che aspetta e quello che si dirama non sono passi come gli altri:
   uno ferma il flusso, l'altro lo spacca in due. Un colore basta, e senza
   scriverci sopra una parola in piu'. */
.au-step.att { border-style: dashed; color: var(--nk-muted); }
.au-step.se  { border-color: color-mix(in oklch, var(--nk-accent) 40%, var(--nk-line)); }

/* Un flusso spento resta leggibile ma non chiede attenzione: e' fermo, non
   rotto. Niente `opacity` sulla scheda intera, che sbiadirebbe anche
   l'interruttore, cioe' proprio la cosa da premere per riaccenderlo. */
.au-card.off .au-flow,
.au-card.off .nk-cd { opacity: .55; }

/* ── L'INTERRUTTORE ─────────────────────────────────────────
   Il kit non ce l'ha. ⚠ E' un `<label>` con dentro una casella vera e non un
   `div` con un `onclick`: si deve poter raggiungere col tabulatore e premere
   con la barra spaziatrice. Quello di prima era un `input` nascosto con
   `display:none`, che dalla tastiera non esiste. */
.au-int { display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.au-int input {
    position: absolute;
    opacity: 0;
    width: 38px;
    height: 22px;
    margin: 0;
    cursor: pointer;
}
.au-int-bin {
    width: 38px; height: 22px;
    border-radius: 999px;
    background: var(--nk-line-2);
    transition: background .22s var(--nk-ease);
    position: relative;
    flex-shrink: 0;
}
.au-int-pal {
    position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgb(0 0 0 / .22);
    transition: left .22s var(--nk-ease);
}
.au-int input:checked + .au-int-bin { background: var(--nk-success); }
.au-int input:checked + .au-int-bin .au-int-pal { left: 18px; }
.au-int input:focus-visible + .au-int-bin { outline: 2px solid var(--nk-accent); outline-offset: 2px; }

/* ── GLI AVVISI ─────────────────────────────────────────────
   Quelli dell'account stanno in cima e una volta sola, quelli di una scheda
   dentro la scheda. Non si aprono: chi deve sapere che la casella email non e'
   collegata lo deve sapere **prima** di toccare l'interruttore. */
.au-avvisi { margin-bottom: 11px; }
.au-avviso-t { flex: 1; min-width: 170px; }
/* Il bottone che collega il canale: da quando il riquadro «Canali collegati»
   non c'e' piu', questa e' l'unica strada. Non si nasconde e non si stringe. */
.au-avviso-b { flex-shrink: 0; }
.au-avviso {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 11px;
    border-radius: var(--nk-r-sm);
    font-size: 12px;
    line-height: 1.45;
    border: 1px solid var(--nk-line);
    background: var(--nk-ink-2);
    color: var(--nk-muted);
}
.au-avviso + .au-avviso { margin-top: 6px; }
.au-avviso.alta {
    border-color: color-mix(in oklch, #FF9500 32%, var(--nk-line));
    background: color-mix(in oklch, #FF9500 7%, transparent);
    color: var(--nk-warn-ink);
}
.au-card .au-avvisi { margin: 9px 0 0; }

/* ── GLI INVII ──────────────────────────────────────────────
   Chiusi finche' non servono. Il `summary` sembra un titolo di scheda perche'
   quello e': il triangolino lo mette il browser. */
.au-log-box { margin-bottom: 14px; }
.au-log-testa {
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: -.018em;
    cursor: pointer;
    list-style-position: inside;
}
.au-log { margin-top: 10px; }
.au-log .nk-row:first-child { padding-top: 0; }
.au-log-err { color: var(--nk-danger); }

.au-nota { margin-bottom: 14px; }

/* ── LA SCELTA DEL CENTRO ───────────────────────────────────
   La tendina vera (`nsm-partner-picker-*`) la disegna `dashboard-crm.css` e
   non e' stata rifatta: e' la stessa che sta in Fedelta' e nel CRM, e
   rivestirne una copia sola vorrebbe dire tre tendine diverse per la stessa
   cosa. Va con il pannello partner, quando toccherà a lui. */
.au-partner { margin-bottom: 12px; }
.au-partner-cerca { margin: 9px 0 6px; }
.au-partner-lbl { margin-top: 12px; }
.au-invito { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.au-invito-url {
    flex: 1;
    min-width: 190px;
    font-family: var(--nk-mono);
    font-size: 11.5px;
    color: var(--nk-muted);
    background: var(--nk-ink-2);
    border: 1px solid var(--nk-line);
    border-radius: var(--nk-r-sm);
    padding: 8px 11px;
    overflow-wrap: anywhere;
}

/* ── IL RIEPILOGO PER ESTESO ─────────────────────────────────────────
   [17/08/2026, chiesto dal titolare] La scheda mostra cinque pastiglie corte;
   questa finestra mostra tutti i passi, interi, uno per riga. Le pastiglie
   servono a riconoscere un flusso a colpo d'occhio, questo elenco a leggerlo
   prima di accenderlo: sono due mestieri diversi, e per questo non hanno lo
   stesso vestito. */
.au-riep-quando { margin-bottom: 13px; }
.au-riep-quando .nk-chip { margin-right: 6px; }

.au-riep-passi {
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-height: 52vh;
    overflow-y: auto;
}

/* Ogni passo è numerato e il numero sta in una colonna sua: con i rientri dei
   rami un elenco senza numeri perde il conto di dove si è. `align-items:
   flex-start` perché le righe vanno a capo e il numero deve restare in cima,
   non centrarsi su tre righe di testo. */
.au-riep-riga {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    line-height: 1.55;
}
.au-riep-n {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: 999px;
    background: var(--nk-ink-3);
    color: var(--nk-muted);
    font-size: 10.5px;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
}
.au-riep-nota { margin-top: 12px; }