/* Standard UX/UI — sezione comms (passaggio globale 28-set).
 * Solo regole specifiche della sezione: i pattern condivisi (pill .jo-qf,
 * KPI .jo-kpi, tabelle, testate) stanno in joorna-standard.css. */

/* Righe etichetta/valore della scheda contatto (quotes/client-card). */
.jo-cc-meta > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.jo-cc-meta dt { color: var(--jo-ui-muted); }
.jo-cc-meta dd { margin: 0; text-align: right; font-weight: 600; color: var(--jo-ui-ink); }

/* Lista a card fuori da una tabella: stesso riquadro delle
   tabelle, con l'header operativo in testa e le card sotto. */
.jo-listcard {
    overflow: hidden;
    border-radius: 0.75rem;
    background: var(--jo-ui-surface);
    box-shadow: var(--ds-shadow-rest), 0 0 0 1px var(--ds-border);
}

/* Pannello "Trigger e invio" del modal Nuova automazione: icone
   comprimi/espandi sulla riga del titolo, sfondo che segue il tema. */
.steps-panel .fi-fo-repeater > .flex.gap-x-3 {
    justify-content: flex-end;
    margin-top: -1.75rem;
    margin-bottom: .25rem;
}

.steps-panel {
    background: var(--jo-ui-soft);
    border: 1px solid var(--jo-ui-line);
}

/* ── KPI delle pagine Comunicazioni (dettaglio campagna email) ─────────
   .jo-kpi standard; griglia che riempie la riga qualunque sia il numero
   di tessere (5–7, "In attesa"/"Non recapitate" compaiono solo se servono). */
.jo-comms-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.jo-comms-kpis > .jo-kpi { text-align: left; }

/* Report di una campagna (email e WhatsApp, owner 7-ott-2026): sei tessere
   fisse, tre per riga, due sul telefono: mai una riga a metà. */
.jo-comms-kpis.jo-comms-kpis--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
    .jo-comms-kpis.jo-comms-kpis--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Report WhatsApp e automazioni: quattro tessere su una riga (due sul telefono). */
.jo-comms-kpis.jo-comms-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
    .jo-comms-kpis.jo-comms-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.jo-kpi.is-clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.jo-kpi.is-clickable:hover { border-color: var(--jo-ui-accent); }
.jo-kpi.is-active { border-color: var(--jo-ui-accent); box-shadow: 0 0 0 2px var(--jo-ui-accent-soft); }

/* Avviso in pagina (es. consegne non riuscite) con i token di stato. */
.jo-comms-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}
.jo-comms-alert.is-danger { background: var(--jo-ui-danger-bg); color: var(--jo-ui-danger); border: 1px solid color-mix(in srgb, var(--jo-ui-danger) 25%, transparent); }
.jo-comms-alert .jo-comms-alert-ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.jo-comms-alert.is-warn { background: var(--jo-ui-warn-bg); color: var(--jo-ui-warn); border: 1px solid color-mix(in srgb, var(--jo-ui-warn) 25%, transparent); }
.jo-comms-alert.is-info { background: var(--jo-ui-info-bg); color: var(--jo-ui-info); border: 1px solid color-mix(in srgb, var(--jo-ui-info) 25%, transparent); }

/* ── Avviso "mittente non tuo" (partials/sending-domain-setup) ──
   Una riga con il punto, i dettagli sotto; riducibile a una riga sola. */
.jo-sender-note {
    padding: 10px 14px;
    border: 1px solid var(--ds-warn-bd);
    border-left: 3px solid var(--ds-warn-dot);
    border-radius: 10px;
    background: var(--ds-warn-bg);
    color: var(--ds-warn-fg);
    font-size: 13px;
}

.jo-sender-note-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
}

.jo-sender-note-ic {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--ds-warn-dot);
}

.jo-sender-note-short {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
}

.jo-sender-note-tools {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.jo-sender-note-link {
    padding: 4px 10px;
    border-radius: 8px;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.jo-sender-note-link:hover {
    background: color-mix(in srgb, var(--ds-warn-dot) 14%, transparent);
}

.jo-sender-note-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: inherit;
}

.jo-sender-note-toggle:hover {
    background: color-mix(in srgb, var(--ds-warn-dot) 14%, transparent);
}

.jo-sender-note-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform .15s;
}

.jo-sender-note-body {
    margin: 4px 0 2px 24px;
    line-height: 1.5;
}

.jo-sender-note.is-small {
    padding-block: 6px;
}

/* Telefono: il link va a capo intero sotto la frase, mai tagliato. */
@media (max-width: 640px) {
    .jo-sender-note-line { flex-wrap: wrap; }
    .jo-sender-note-short { flex-basis: calc(100% - 24px); }
    .jo-sender-note-tools { margin-left: 24px; flex: 1 1 auto; justify-content: space-between; }
    .jo-sender-note-link { padding-inline: 0; white-space: normal; text-align: left; }
}

.jo-sender-note.is-small .jo-sender-note-body {
    display: none;
}

.jo-sender-note.is-small .jo-sender-note-toggle svg {
    transform: rotate(180deg);
}

.jo-sender-note.is-small .jo-sender-note-short {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .jo-sender-note-line {
        flex-wrap: wrap;
    }
}

/* Imbuto dello stato (Automazioni): stesso controllo dei filtri tabella. */

/* Telefono: ricerca e imbuto sulla stessa riga, la ricerca prende lo spazio. */

/* ── Automazioni ▸ Eventi disponibili in Card (AutomationEventsTable) ──
   Card compatte: icona, nome, tipo · data, descrizione su due righe, CTA. */
.jo-ev-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 10px;
    padding: 14px;
}

.jo-ev-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--ds-border);
    border-radius: 10px;
    background: var(--ds-surface);
}

.jo-ev-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.jo-ev-card-ic {
    display: inline-flex;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--ds-surface-sunken);
    color: var(--ds-text-tertiary);
}

.jo-ev-card-ic svg {
    width: 17px;
    height: 17px;
}

.jo-ev-card-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.jo-ev-card-name {
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 18px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ds-text-primary);
}

.jo-ev-card-meta {
    font-size: 12px;
    line-height: 16px;
    color: var(--ds-text-tertiary);
}

.jo-ev-card-desc {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 17px;
    color: var(--ds-text-secondary);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.jo-ev-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}

.jo-ev-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ds-accent-fg);
}

.jo-ev-card-cta svg {
    width: 14px;
    height: 14px;
}

.jo-ev-card-cta:hover {
    text-decoration: underline;
}

.jo-ev-empty {
    margin: 0;
    padding: 24px 4px;
    font-size: 13px;
    color: var(--ds-text-tertiary);
}

/* Campagne email al telefono: i KPI in testa su due colonne, non cinque
   tessere una sotto l'altra (owner 7-ott-2026); l'ultima dispari prende la riga. */
@media (max-width: 640px) {
    .fi-resource-email-campaigns .fi-page-header-widgets {
        --cols-default: repeat(2, minmax(0, 1fr));
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .fi-resource-email-campaigns .fi-page-header-widgets > * { grid-column: span 1 / span 1; }
    .fi-resource-email-campaigns .fi-page-header-widgets > *:last-child:nth-child(odd) { grid-column: span 2 / span 2; }
}

/* ── Mittente / numero WhatsApp nella barra delle liste (owner 8-ott-2026):
      niente pallino, l'icona stessa diventa arancio solo quando c'è da
      sistemare; lo stato sta nel tooltip. */
.jo-icon-warn, .jo-icon-warn .fi-icon-btn-icon, .jo-icon-warn svg { color: var(--ds-warn-fg, #B45309) !important; }

/* ── Record DNS da copiare (SmtpSchema::recordsHtml): Configurazione canali ▸
      Invio delle campagne e Scheda hotel. Colonne fisse: la chiave DKIM
      aperta va a capo nella sua colonna invece di allargarla. */
.jo-dns-table { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.jo-dns-table th { text-align: left; font-weight: 600; color: var(--ds-text-tertiary, #5B5B6B); padding: 6px 8px; border-bottom: 1px solid var(--ds-border, #DFE2EA); }
.jo-dns-table th:nth-child(1) { width: 64px; }
.jo-dns-table th:nth-child(2) { width: 34%; }
.jo-dns-table th:nth-child(4) { width: 112px; }
.jo-dns-table td { padding: 8px; vertical-align: top; border-bottom: 1px solid var(--ds-border, #DFE2EA); }
.jo-dns-table td.jo-dns-state { white-space: nowrap; }
.jo-dns-cell { display: flex; align-items: flex-start; gap: 8px; }
.jo-dns-cell code { flex: 1; min-width: 0; word-break: break-all; font-size: 12px; }
.jo-dns-key { flex: 1; min-width: 0; }
.jo-dns-key code { display: block; margin-top: 4px; }
.jo-dns-reveal { font-size: 12px; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-dns-reveal-label { text-decoration: underline; }
.jo-dns-reveal:hover .jo-dns-reveal-label { color: var(--ds-text-secondary, #3F3F46); }
.jo-dns-copy {
  flex: none; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 8px;
  color: var(--ds-accent-fg, #5F45A8); background: var(--ds-accent-soft, #F3EEFC);
}
.jo-dns-copy:hover { background: var(--ds-accent-soft-hover, #EEE7FB); }
.jo-dns-note { margin-top: 4px; font-size: 12px; color: var(--ds-text-tertiary, #5B5B6B); }

/* Telefono: con le colonne fisse il Valore resterebbe largo pochi pixel,
   quindi ogni record diventa un blocco con i suoi dati uno sotto l'altro,
   ognuno col suo nome sopra (data-label), visto che l'intestazione sparisce. */
@media (max-width: 640px) {
  .jo-dns-table, .jo-dns-table tbody, .jo-dns-table tr, .jo-dns-table td { display: block; width: auto; }
  .jo-dns-table thead { display: none; }
  .jo-dns-table tr { padding: 8px 0; border-bottom: 1px solid var(--ds-border, #DFE2EA); }
  .jo-dns-table td { padding: 3px 0; border-bottom: 0; }
  .jo-dns-table td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: 11.5px; font-weight: 600; color: var(--ds-text-tertiary, #5B5B6B);
  }
}

/* Report di campagne e automazioni (owner 8-ott-2026): i numeri su una riga
   sola, tessere strette senza spazio vuoto; sotto i 1100px vanno a capo. */
.jo-comms-kpis.jo-comms-kpis--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.jo-comms-kpis.jo-comms-kpis--4 { gap: 8px; }
.jo-comms-kpis:is(.jo-comms-kpis--6, .jo-comms-kpis--4) > .jo-kpi { padding: 8px 10px; gap: 2px; min-height: 0; }
.jo-comms-kpis:is(.jo-comms-kpis--6, .jo-comms-kpis--4) .jo-kpi-top { gap: 6px; }
.jo-comms-kpis:is(.jo-comms-kpis--6, .jo-comms-kpis--4) .jo-kpi-ic { width: 22px; height: 22px; }
.jo-comms-kpis:is(.jo-comms-kpis--6, .jo-comms-kpis--4) .jo-kpi-ic svg { width: 13px; height: 13px; }
.jo-comms-kpis:is(.jo-comms-kpis--6, .jo-comms-kpis--4) .jo-kpi-val { font-size: 1.1rem; }
@media (max-width: 1100px) { .jo-comms-kpis.jo-comms-kpis--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .jo-comms-kpis.jo-comms-kpis--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Sei numeri su una riga accanto all'anteprima: senza tessera dell'icona, così
   etichetta e valore si leggono per intero. */
.jo-comms-kpis.jo-comms-kpis--6 .jo-kpi-ic { display: none; }
html body .jo-comms-kpis.jo-comms-kpis--6 > .jo-kpi { padding-left: 12px !important; padding-right: 8px !important; }

/* Riepilogo e Destinatari: accordion fratelli uno sotto l'altro (owner 8-ott-2026). */
.jo-comms-accs { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; min-width: 0; }
.jo-comms-accs > details.jo-acc { margin: 0; }
/* La tabella dentro l'accordion non è una card nella card. */
.jo-comms-accs details.jo-acc .fi-ta-ctn { box-shadow: none !important; --tw-ring-shadow: 0 0 #0000 !important; border: 0 !important; border-radius: 0 !important; }

/* ── Dettaglio automazione (owner 9-ott-2026) ───────────────────────────
   Percorso quando parte → quando invia → email, tre passi uguali (l'email
   scelta va nell'anteprima a destra); destinatari. Le card sono gli
   accordion della piattaforma (jo-fstep-plain). */
.jo-auto-h { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.jo-auto-h .jo-cell-status { font-size: 13px; font-weight: 500; }

.jo-auto-flow { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.jo-auto-flow + .jo-auto-flow { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ds-row-divider, var(--ds-border)); }
.jo-auto-flow::before { content: ''; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: var(--ds-border, #DFE2EA); }
.jo-auto-flow.is-off { opacity: .6; }
.jo-auto-node { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; }
.jo-auto-node small { display: block; font-size: 11.5px; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-auto-node b { display: block; font-size: 13.5px; font-weight: 600; color: var(--ds-text-primary, #18181B); }
.jo-auto-node em { display: block; font-size: 12px; font-style: normal; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-auto-ic { position: relative; z-index: 1; display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ds-accent-soft, #F3EEFC); color: var(--ds-accent, #7C5CCB); }
.jo-auto-ic svg { width: 17px; height: 17px; }
.jo-auto-email { flex: 1; min-width: 0; text-align: left; cursor: pointer; }
.jo-auto-email:hover b { color: var(--ds-accent, #7C5CCB); }
.jo-auto-empty { margin: 0; font-size: 13px; color: var(--ds-text-tertiary, #5B5B6B); }

.jo-auto-rcp { display: grid; margin: 0; padding: 0; list-style: none; }
.jo-auto-rcp > li { display: grid; grid-template-columns: minmax(0, 1fr) auto 9rem; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ds-row-divider, var(--ds-border)); font-size: 13px; }
.jo-auto-rcp > li:first-child { border-top: 0; }
.jo-auto-rcp b, .jo-auto-rcp small { display: block; }
.jo-auto-rcp small { color: var(--ds-text-tertiary, #5B5B6B); }
.jo-auto-rcp-d { font-variant-numeric: tabular-nums; color: var(--ds-text-secondary, #3F3F46); }