/* Feel The Yarn — UI base */
:root {
    --bg: #FFFFFF;
    --fg: #1A1A1A;
    --muted: #8A8A8A;
    --border: #E0E0E0;
    --row-alt: #F8F8F8;
    --green: #4a7c59;
    /* Caratteri: sovrascrivibili dalla configurazione (BRAND_FONT / BRAND_FONT_TITOLI). */
    --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --font-titoli: "Playfair Display", Georgia, serif;
    --grey: #CCCCCC;
    --danger: #a93226;

    /* --- Forma e ritmo dell'interfaccia ---------------------------------
       Sono i valori che rendono un CRM riconoscibile: angoli, profondità,
       maiuscolo, spaziatura delle lettere, colore del bottone principale.
       Un tema (BRAND_CSS) li ridefinisce e il prodotto cambia faccia senza
       toccare una riga di template. I valori qui sotto sono quelli storici
       di Feel The Yarn: chi non mette un tema non vede differenze. */
    --raggio: 0;                 /* angoli di riquadri, campi e bottoni */
    --raggio-grande: 0;          /* card e riquadri ampi */
    --ombra: none;               /* profondità delle superfici */
    --maiuscolo: uppercase;      /* bottoni, etichette, intestazioni */
    --tracking: 0.08em;          /* spaziatura delle lettere maiuscole */
    --azione-bg: var(--fg);      /* bottone principale: fondo */
    --azione-fg: var(--bg);      /* bottone principale: testo */
    --superficie: transparent;   /* sfondo di filtri e schede */
    /* Stati newsletter (anche letti dal JS via getComputedStyle) */
    --stato-consegnata: #4CAF50;
    --stato-aperta: #2196F3;
    --stato-cliccata: #9C27B0;
    --stato-bounced: #F44336;
    --stato-spam: #FF9800;
    --stato-disiscritto: #795548;
    --stato-inviata: #bdbdbd;
    color-scheme: light;
}

:root[data-theme="dark"] {
    --bg: #111111;
    --fg: #E8E8E8;
    --muted: #8A8A8A;
    --border: #2A2A2A;
    --row-alt: #1A1A1A;
    --green: #6fa87c;
    --grey: #555555;
    --danger: #e57373;
    --stato-consegnata: #66bb6a;
    --stato-aperta: #42a5f5;
    --stato-cliccata: #ba68c8;
    --stato-bounced: #ef5350;
    --stato-spam: #ffa726;
    --stato-disiscritto: #a1887f;
    --stato-inviata: #888;
    color-scheme: dark;
}
:root[data-theme="dark"] .alert-error { color: #e57373; border-color: #e57373; }
:root[data-theme="dark"] select option { background: #1A1A1A; color: #E8E8E8; }
/* Logo nero -> negativo in dark mode */
:root[data-theme="dark"] .brand-logo,
:root[data-theme="dark"] .login-logo { filter: invert(1) brightness(1.1); }

* { box-sizing: border-box; }
html, body {
    margin: 0; padding: 0; background: var(--bg); color: var(--fg);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.5;
}
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

h1, h2, h3 { font-family: var(--font-titoli); font-weight: 700; letter-spacing: 0.01em; }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.7rem; }

/* Header */
.brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; }
.brand-logo { height: 30px; width: auto; display: block; }
.brand-sub {
    font-family: inherit; font-size: 0.7rem; line-height: 1; text-transform: var(--maiuscolo);
    letter-spacing: 0.14em; color: var(--muted); padding-left: 0.75rem; border-left: 1px solid var(--border);
}
/* Etichetta "Vers. X.Y.Z" accanto al titolo CRM (header + login).
   Stessa baseline di .brand-sub (font-size + line-height) per allineamento ottico. */
.app-version {
    font-family: inherit; font-size: 0.7rem; line-height: 1;
    color: var(--muted); opacity: 0.7;
    margin-left: 0.25rem; letter-spacing: 0.05em;
    text-transform: none; font-weight: 400;
    vertical-align: baseline;
}

.site-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 2rem; border-bottom: 1px solid var(--border);
}
.main-nav a {
    color: var(--fg); text-decoration: none; margin: 0 0.85rem;
    text-transform: var(--maiuscolo); letter-spacing: var(--tracking); font-size: 0.8rem;
}
.main-nav a:hover { text-decoration: underline; }
.nav-toggle { display: none; background: transparent; border: 1px solid var(--border); color: var(--fg);
    border-radius: 6px; font-size: 1.25rem; line-height: 1; padding: 0.25rem 0.6rem; cursor: pointer; }

/* Mobile: nav principale a tendina via hamburger (evita i link sparpagliati). */
@media (max-width: 860px) {
    .site-header { flex-wrap: wrap; padding: 0.6rem 1rem; }
    .nav-toggle { display: inline-block; order: 2; margin-left: auto; }
    .header-actions { order: 3; }
    .main-nav { display: none; order: 4; width: 100%; flex-direction: column; margin-top: 0.5rem; }
    .main-nav.open { display: flex; }
    .main-nav a { margin: 0; padding: 0.75rem 0.25rem; border-top: 1px solid var(--border); }
}
.logout-form { display: flex; align-items: center; gap: 0.75rem; margin: 0; }
.logout-form button { padding: 0.35rem 0.9rem; font-size: 0.7rem; }
.current-user {
    font-size: 0.8rem; color: var(--muted); text-decoration: none;
    padding: 0.2rem 0; border-bottom: 1px solid transparent;
}
.current-user:hover { color: var(--fg); border-bottom-color: var(--fg); }

.header-actions { display: inline-flex; align-items: center; gap: 0.9rem; }
.theme-toggle {
    background: transparent; border: 1px solid var(--border); color: var(--fg);
    width: 32px; height: 32px; padding: 0; cursor: pointer; border-radius: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; letter-spacing: 0;
}
.theme-toggle:hover { border-color: var(--fg); background: transparent; color: var(--fg); }
.theme-icon { line-height: 1; }
.theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: inline; }

/* Bottoni */
button, input[type=submit] {
    background: transparent; color: var(--fg); border: 1px solid var(--fg);
    padding: 0.75rem 1.6rem; font-size: 0.9rem; text-transform: var(--maiuscolo);
    letter-spacing: var(--tracking); cursor: pointer; transition: all 0.15s;
    font-family: inherit;
}
button:hover, input[type=submit]:hover { background: var(--fg); color: var(--bg); }

/* ====== Login split layout ====== */
.login-page { margin: 0; padding: 0; }
.login-split {
    display: grid; grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}
.login-hero {
    background-size: cover; background-position: center 10%; background-repeat: no-repeat;
    background-color: #111;
}
.login-panel {
    display: flex; flex-direction: column; align-items: stretch;
    padding: 2rem; position: relative;
}
.login-panel .login-card { margin: auto; }

/* Impianto senza immagine: il modulo sta al centro dello schermo. Serve a chi
   non ha una fotografia da mettere — la maggior parte delle installazioni. */
.login-solo {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 1rem;
}
.login-solo .login-panel { width: 100%; max-width: 460px; padding: 2rem 1rem; }
.login-solo .login-footer { text-align: center; }
.login-footer {
    border-top: 1px solid var(--border);
    padding: 1rem 0 0 0;
    margin-top: auto;
    background: transparent;
}
.login-card { width: 100%; max-width: 420px; }
.login-logo { display: block; margin: 0 auto 1rem; max-width: 260px; width: 80%; height: auto; }
.login-claim {
    text-align: center; margin: 0 0 2rem 0;
    font-size: 0.9rem; text-transform: var(--maiuscolo); letter-spacing: var(--tracking); color: var(--muted);
}
.login-card form { display: flex; flex-direction: column; gap: 0.5rem; }
.login-card label {
    font-size: 0.8rem; text-transform: var(--maiuscolo); letter-spacing: var(--tracking);
    color: var(--muted); margin-top: 1rem;
}
.login-card input {
    padding: 0.85rem 1rem; border: 1px solid var(--border); font-size: 1rem;
    font-family: inherit; background: var(--bg); color: var(--fg);
}
.login-card input:focus { outline: none; border-color: var(--fg); }
.login-card button { margin-top: 1.75rem; padding: 0.9rem 1.6rem; font-size: 0.95rem; }

.alert {
    padding: 0.8rem 2.2rem 0.8rem 1rem; font-size: 0.9rem; margin-bottom: 1rem;
    border: 1px solid var(--border);
    position: relative;
    transition: opacity .35s ease; border-radius: var(--raggio);
}
/* Messaggio in chiusura (automatica dopo qualche secondo o con la ×). */
.alert.is-chiuso { opacity: 0; }
.alert-close {
    position: absolute; top: .35rem; right: .45rem;
    background: none; border: 0; cursor: pointer;
    font-size: 1.05rem; line-height: 1; padding: .2rem .35rem;
    color: inherit; opacity: .55;
}
.alert-close:hover { opacity: 1; }
.alert-error { border-color: #a93226; color: #a93226; }
.alert-info { border-color: var(--muted); color: var(--muted); }
/* Avviso (né errore né conferma): es. "contatto già presente, non duplicato". */
.alert-warn { border-color: #b8860b; color: #8a6400; background: #fff8e1; }
:root[data-theme="dark"] .alert-warn { color: #e0b84d; background: #241f0e; border-color: #b8860b; }

.oauth-section { margin-top: 1.5rem; }
.oauth-divider {
    display: flex; align-items: center; gap: 0.75rem;
    margin: 1.5rem 0 1rem; color: var(--muted);
    font-size: 0.72rem; text-transform: var(--maiuscolo); letter-spacing: 0.14em;
}
.oauth-divider::before, .oauth-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--border);
}
.oauth-google {
    display: flex; align-items: center; justify-content: center; gap: 0.7rem;
    padding: 0.75rem 1.2rem; border: 1px solid var(--border);
    background: #fff; color: #1a1a1a; text-decoration: none;
    font-size: 0.9rem; font-weight: 500; letter-spacing: 0.02em;
    transition: all 0.15s;
}
.oauth-google:hover { border-color: #1a1a1a; background: #fafafa; }

@media (max-width: 820px) {
    .login-split { grid-template-columns: 1fr; }
    .login-hero { min-height: 240px; }
}

/* Layout */
/* Container largo: sfrutta gli schermi grandi (fino a 1680px) così le tabelle
   hanno respiro e i dati non si comprimono. I form restano leggibili grazie ai
   propri max-width (.form-card). */
.container { max-width: 1680px; margin: 2.5rem auto; padding: 0 2rem; }
.page-title { margin-top: 0; }
.placeholder {
    margin-top: 2rem; padding: 1.8rem; border: 1px dashed var(--border);
    color: var(--muted); font-size: 1rem; border-radius: var(--raggio);
}

/* Pallino presenza */
.presenza-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #d94545; }
.presenza-dot.on { background: var(--green); }
/* Lampeggio per check-in recenti (< 2 ore) */
.presenza-dot.on.recent {
    animation: presenza-pulse 2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(74, 124, 89, 0.7);
}
@keyframes presenza-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(74, 124, 89, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(74, 124, 89, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 124, 89, 0); }
}

/* Tabella visitatori */
table.visitatori {
    width: 100%; border-collapse: collapse; font-size: 0.95rem;
    /* fixed: la tabella resta SEMPRE nella larghezza del contenitore, non sfora;
       le colonne si dividono lo spazio e i valori lunghi vengono troncati (vedi sotto) */
    table-layout: fixed; border-radius: var(--raggio);
}
/* Colonna stretta (es. dot di presenza, icone): non si espande oltre il contenuto. */
table.visitatori th.col-narrow,
table.visitatori td.col-narrow {
    width: 90px; white-space: nowrap; text-align: center;
    padding-left: 0.5rem; padding-right: 0.5rem;
}
table.visitatori th, table.visitatori td {
    border: 1px solid var(--border); padding: 0.65rem 0.8rem; text-align: left;
    vertical-align: middle;
}
/* Celle: a capo automatico dentro la colonna (la tabella non sfora grazie a
   table-layout:fixed). Le parole lunghe senza spazi (es. email) vanno a capo. */
table.visitatori td {
    overflow-wrap: anywhere;
    word-break: break-word;
}
table.visitatori td.actions,
table.visitatori td.col-narrow {
    white-space: nowrap; overflow-wrap: normal; word-break: normal;
}
/* table-layout:fixed → basta fissare la larghezza su una cella per vincolare la colonna.
   La colonna azioni ospita fino a 4 bottoni 32px: larga abbastanza, non si comprime. */
table.visitatori td.actions { width: 150px; }
table.visitatori th {
    background: var(--row-alt); text-transform: var(--maiuscolo);
    letter-spacing: var(--tracking); font-size: 0.8rem;
}
table.visitatori th a.sort {
    color: var(--fg); text-decoration: none; display: inline-flex;
    align-items: center; gap: 0.3rem;
}
table.visitatori th a.sort:hover { text-decoration: underline; }
table.visitatori th a.sort .arrow { color: var(--fg); font-size: 0.9rem; font-weight: 700; }
table.visitatori th a.sort .arrow.dim { color: var(--muted); font-weight: 400; opacity: 0.8; }
:root[data-theme="dark"] table.visitatori th a.sort .arrow.dim { color: #aaa; opacity: 0.9; }

/* Filtri per-colonna */
table.visitatori tr.col-filters th { padding: 0.35rem 0.5rem; background: var(--bg); }
table.visitatori tr.col-filters input {
    width: 100%; box-sizing: border-box;
    padding: 0.3rem 0.45rem; border: 1px solid var(--border);
    background: var(--bg); color: var(--fg);
    font-family: inherit; font-size: 0.85rem; font-weight: 400;
    text-transform: none; letter-spacing: 0;
}
table.visitatori tr.col-filters input:focus { outline: none; border-color: var(--fg); }
table.visitatori tr.col-filters th.nofilter { background: transparent; }
table.visitatori tr:nth-child(even) td { background: var(--row-alt); }
table.visitatori tr.row-hidden td { opacity: 0.55; font-style: italic; }
/* Trade show in corso oggi (data inizio <= oggi <= data fine): bordo sinistro verde + shimmer */
table.visitatori tr.fiera-in-corso td {
    position: relative;
    background-image: linear-gradient(
        90deg,
        rgba(74, 124, 89, 0) 0%,
        rgba(74, 124, 89, 0.18) 50%,
        rgba(74, 124, 89, 0) 100%
    );
    background-size: 35% 100%;
    background-repeat: no-repeat;
    animation: fiera-shimmer 3.5s linear infinite;
}
table.visitatori tr.fiera-in-corso td:first-child {
    border-left: 3px solid var(--green);
}
:root[data-theme="dark"] table.visitatori tr.fiera-in-corso td {
    background-image: linear-gradient(
        90deg,
        rgba(111, 168, 124, 0) 0%,
        rgba(111, 168, 124, 0.22) 50%,
        rgba(111, 168, 124, 0) 100%
    );
}
@keyframes fiera-shimmer {
    0%   { background-position: -35% 0; }
    100% { background-position: 135% 0; }
}
/* Rispetta la preferenza di sistema (utenti che hanno disabilitato le animazioni) */
@media (prefers-reduced-motion: reduce) {
    table.visitatori tr.fiera-in-corso td {
        animation: none;
        background-image: linear-gradient(90deg,
            rgba(74, 124, 89, 0.12), rgba(74, 124, 89, 0.12));
        background-size: 100% 100%;
    }
}
table.visitatori a { color: var(--fg); }

/* Modale generica (overlay full-screen + contenuto centrato). */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 2rem; }
.modal[hidden] { display: none; }
.modal-content { background: var(--bg); color: var(--fg); border: 1px solid var(--border);
    width: 100%; max-width: 1100px; max-height: 90vh; display: flex; flex-direction: column; }
.modal-narrow { max-width: 500px; }
.modal-body--preline { white-space: pre-line; }
.modal-header { display: flex; justify-content: space-between; align-items: center;
    padding: 0.9rem 1.2rem; border-bottom: 1px solid var(--border); }
.modal-header h2 { margin: 0; font-size: 1.1rem; }
.modal-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--fg); padding: 0.2rem 0.5rem; }
.modal-body { padding: 1rem 1.2rem; overflow: auto; }
.modal-footer { padding: 0.7rem 1.2rem; border-top: 1px solid var(--border); text-align: right; }

.badge-hidden {
    display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.4rem;
    border: 1px solid var(--muted); color: var(--muted);
    font-size: 0.65rem; text-transform: var(--maiuscolo); letter-spacing: var(--tracking);
    vertical-align: middle;
}

.actions { white-space: nowrap; }
.inline-form { display: inline-block; margin: 0; vertical-align: middle; }
/* Riquadro azione uniforme: quadrato fisso, contenuto centrato, indipendente dal
   carattere/emoji usato (✎ ✕ ⎘ 📊 hanno larghezze di rendering diverse). */
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; margin: 0 0.1rem;
    border: 1px solid var(--border); background: var(--bg); color: var(--fg);
    text-decoration: none; font-size: 0.95rem; line-height: 1; cursor: pointer;
    font-family: inherit; vertical-align: middle; box-sizing: border-box;
}
.icon-btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.icon-btn.is-fav { color: #e8b500; border-color: #e8b500; }
.icon-btn.is-fav:hover { background: #e8b500; color: #fff; border-color: #e8b500; }
/* Azione non disponibile: resta visibile ma spenta, col tooltip che spiega perché. */
.icon-btn-disabled { color: var(--muted); border-color: var(--border); cursor: not-allowed; opacity: 0.5; }
.icon-btn-disabled:hover { background: var(--bg); color: var(--muted); border-color: var(--border); }

.page-header {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 0.8rem; margin-bottom: 1.5rem;
}
.page-header .page-title { margin: 0; }
/* Riga titolo + bottone help (?) accanto */
.page-title-row {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
.page-title-row .page-title { margin: 0; }
.page-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
/* Caselle inline (cerca, mostra...) nelle barre azioni: stessa altezza dei .btn-link. */
.page-actions input[type="text"],
.page-actions input[type="search"],
.page-actions select {
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--fg);
    background: var(--bg);
    color: var(--fg);
    font-size: 0.8rem;
    line-height: 1.2;
    font-family: inherit;
    height: auto; border-radius: var(--raggio);
}
.page-actions .badge-total {
    padding: 0.6rem 1.2rem;
    font-size: 0.8rem;
    line-height: 1.2;
    text-transform: var(--maiuscolo);
    letter-spacing: var(--tracking);
}
/* Alias compat: .btn-link è equivalente a .btn-secondary più compatto */
.btn-link {
    padding: 0.6rem 1.2rem; border: 1px solid var(--fg);
    text-decoration: none; color: var(--fg); background: transparent;
    text-transform: var(--maiuscolo); letter-spacing: var(--tracking); font-size: 0.8rem;
    display: inline-block; line-height: 1.2; font-family: inherit; cursor: pointer;
    transition: all 0.15s; border-radius: var(--raggio);
}
.btn-link:hover { background: var(--fg); color: var(--bg); }
.btn-link.disabled {
    opacity: 0.4; pointer-events: none; cursor: not-allowed;
}

.filters {
    display: flex; gap: 1.5rem; flex-wrap: wrap;
    padding: 1.2rem 1.4rem; border: 1px solid var(--border);
    margin-bottom: 1.5rem; background: var(--row-alt); border-radius: var(--raggio-grande);
    box-shadow: var(--ombra);
}
.filter-group { display: flex; flex-direction: column; gap: 0.3rem; min-width: 240px; }
.filter-group label {
    font-size: 0.75rem; text-transform: var(--maiuscolo); letter-spacing: var(--tracking); color: var(--muted);
}
.filter-group select,
.filter-group input[type=text] {
    padding: 0.6rem 0.75rem; border: 1px solid var(--border);
    background: var(--bg); color: var(--fg);
    font-family: inherit; font-size: 0.95rem; min-width: 240px;
}
.filter-checkbox { min-width: auto; align-self: flex-end; padding-bottom: 0.5rem; }
.filter-checkbox .checkbox-item { font-size: 0.9rem; }

/* NL search */
.nl-search {
    margin: 2rem 0 2.5rem; padding: 1.6rem 1.8rem;
    border: 1px solid var(--border); background: var(--row-alt);
}
.nl-search.nl-disabled { color: var(--muted); font-size: 0.9rem; }
.nl-search code {
    font-family: "SF Mono", Consolas, monospace; font-size: 0.85rem;
    background: var(--bg); padding: 0.1rem 0.4rem; border: 1px solid var(--border);
}
.nl-label {
    display: block; font-size: 0.75rem; text-transform: var(--maiuscolo);
    letter-spacing: 0.12em; color: var(--muted); margin-bottom: 0.6rem;
}
.nl-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.nl-form input {
    flex: 1 1 220px; min-width: 0; padding: 0.8rem 1rem; border: 1px solid var(--border);
    background: var(--bg); color: var(--fg); font-family: inherit; font-size: 1rem;
}
.nl-form input:focus { outline: none; border-color: var(--fg); }
.nl-form button { padding: 0.8rem 1.5rem; }
/* Su schermi stretti il bottone "Cerca" va a capo a piena larghezza. */
@media (max-width: 600px) { .nl-form button { flex: 1 1 100%; } }
.nl-interpretation {
    margin-top: 0.8rem; padding: 0.5rem 0.75rem;
    font-size: 0.8rem; color: var(--muted); font-style: italic;
    border-left: 2px solid var(--border);
}
.nl-interpretation.hidden { display: none; }
.nl-count { margin: 1rem 0 0.75rem; font-size: 0.9rem; color: var(--muted); }
.nl-result-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}
.nl-result {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.9rem 1rem; background: var(--bg); border: 1px solid var(--border);
    text-decoration: none; color: var(--fg); font-size: 0.9rem;
    transition: border-color 0.15s;
}
.nl-result:hover { border-color: var(--fg); }
.nl-result-tag {
    font-size: 0.65rem; text-transform: var(--maiuscolo); letter-spacing: var(--tracking);
    color: var(--muted);
}
.nl-result-sec { color: var(--muted); font-size: 0.85rem; }
.nl-result small { color: var(--muted); font-size: 0.75rem; }
.nl-table { width: 100%; }
.nl-table tbody tr.nl-row { cursor: pointer; }
.nl-table tbody tr.nl-row:hover { background: var(--bg); }
.nl-table tbody tr.nl-row:focus { outline: 2px solid var(--fg); outline-offset: -2px; }
.nl-pager {
    display: flex; align-items: center; justify-content: center;
    gap: 1.25rem; margin: 1rem 0 0.25rem;
}
.nl-pager button[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Dashboard cards */
.card-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem; margin-top: 2rem;
}
.card {
    display: block; padding: 1.5rem; border: 1px solid var(--border);
    text-decoration: none; color: var(--fg); transition: all 0.15s;
}
.card:hover { border-color: var(--fg); }
.card h2 { margin: 0 0 0.5rem 0; font-size: 1.3rem; }
.card p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.card-disabled { pointer-events: none; opacity: 0.5; }

/* Scheda contatto */
.back-link {
    display: inline-block; margin-bottom: 1rem; color: var(--muted);
    text-decoration: none; font-size: 0.9rem;
}
.back-link:hover { color: var(--fg); }
.detail-grid {
    display: grid; grid-template-columns: 180px 1fr; gap: 0.6rem 1.5rem;
    margin-top: 1.5rem; max-width: 700px;
}
.detail-grid dt {
    color: var(--muted); text-transform: var(--maiuscolo);
    letter-spacing: var(--tracking); font-size: 0.8rem;
}
.detail-grid dd { margin: 0; font-size: 1rem; }

.export-group { display: inline-flex; gap: 0.5rem; }
.badge-total {
    padding: 0.35rem 0.75rem; border: 1px solid var(--border);
    font-size: 0.85rem; color: var(--muted);
}
.subtitle { color: var(--muted); font-size: 0.95rem; margin-top: -0.5rem; }
.pagination {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 2rem; font-size: 0.9rem;
}
.pagination a {
    color: var(--fg); text-decoration: none; padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
}
.pagination a:hover { border-color: var(--fg); }
.pagination-info { color: var(--muted); font-size: 0.85rem; }
.pagination-disabled {
    padding: 0.4rem 0.8rem; border: 1px solid var(--border);
    color: var(--muted); opacity: 0.5;
}
.page-size {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; color: var(--muted);
}
.page-size select {
    padding: 0.3rem 0.5rem; border: 1px solid var(--border);
    background: var(--bg); color: var(--fg); font-family: inherit; font-size: 0.85rem;
}
.audit-details { font-family: "SF Mono", Consolas, monospace; font-size: 0.8rem; max-width: 400px; word-break: break-all; }

.count-link {
    display: inline-block; padding: 0.15rem 0.55rem;
    color: var(--fg); text-decoration: none;
    border: 1px solid var(--border); font-weight: 600;
}
.count-link:hover { border-color: var(--fg); background: var(--fg); color: var(--bg); }
.count-zero { color: var(--muted); }
.count-present {
    display: inline-block; padding: 0.15rem 0.55rem;
    border: 1px solid var(--green); color: var(--green); font-weight: 600;
}

/* Progress bar invio newsletter */
.progress-outer {
    height: 14px; background: var(--row-alt); border: 1px solid var(--border);
    margin: 0.8rem 0 0.4rem; overflow: hidden;
}
.progress-inner { height: 100%; background: var(--green); transition: width 0.4s ease; }

/* Dashboard newsletter stat cards */
.stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem; margin-top: 1.5rem;
}
.stat-card { padding: 1.2rem 1.4rem; border: 1px solid var(--border); background: var(--bg); }
.stat-label {
    font-size: 0.75rem; text-transform: var(--maiuscolo); letter-spacing: var(--tracking);
    color: var(--muted); margin-bottom: 0.5rem;
}
.stat-value {
    font-family: var(--font-titoli);
    font-size: 2.2rem; font-weight: 700; color: var(--fg);
}
.stat-sub { font-size: 0.85rem; color: var(--muted); margin-top: 0.3rem; }

.badge-present {
    display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.45rem;
    border: 1px solid var(--green); color: var(--green);
    font-size: 0.7rem; text-transform: var(--maiuscolo); letter-spacing: var(--tracking);
    vertical-align: middle;
}
.badge-accoglienza {
    display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.45rem;
    border: 1px solid #b8860b; color: #b8860b;
    font-size: 0.7rem; text-transform: var(--maiuscolo); letter-spacing: var(--tracking);
    vertical-align: middle; border-radius: 3px;
}
.badge-absent {
    display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.45rem;
    border: 1px solid var(--muted); color: var(--muted);
    font-size: 0.7rem; text-transform: var(--maiuscolo); letter-spacing: var(--tracking);
    vertical-align: middle;
}
.monospace { font-family: "SF Mono", Consolas, monospace; font-size: 0.85rem; }
.presenza-cell { white-space: nowrap; }
.label-link {
    margin-left: 0.75rem; font-size: 0.7rem; text-transform: none;
    letter-spacing: 0; color: var(--muted); text-decoration: none;
}
.label-link:hover { color: var(--fg); text-decoration: underline; }

.hint { color: var(--muted); font-size: 1rem; margin-top: 0.4rem; display: block; }
small.hint { font-size: 0.95rem; }

/* Iframe anteprima newsletter inviata */
.preview-iframe {
    width: 100%; height: 700px;
    border: 1px solid var(--border); background: #fff;
}

/* Gallery upload newsletter (griglia thumbnail) */
.upload-gallery {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem; margin-top: 1rem;
}
.upload-card {
    border: 1px solid var(--border); padding: 0.5rem; background: var(--bg);
    display: flex; flex-direction: column; gap: 0.4rem;
}
.upload-thumb {
    width: 100%; height: 140px; object-fit: contain; background: var(--row-alt);
}
.upload-name {
    font-size: 0.75rem; word-break: break-all; margin: 0;
}
.upload-actions {
    display: flex; gap: 0.4rem; align-items: center;
}

/* Filter group con allineamento in fondo (per il pulsante di submit nei filtri) */
.filter-group--bottom { align-self: flex-end; }
.filter-actions { display: flex; align-items: center; gap: 0.8rem; }

/* Tipografia helper */
.text-sm { font-size: 0.8rem; }

/* Bottone help contestuale "?" + modal */
.help-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border-radius: 50%;
    border: 1px solid var(--border); background: var(--bg); color: var(--muted);
    font-family: inherit; font-size: 0.85rem; font-weight: 700;
    line-height: 1; cursor: pointer; letter-spacing: 0;
    transition: all 0.15s;
    vertical-align: middle;
}
.help-icon-btn:hover {
    border-color: var(--fg); color: var(--fg); background: var(--bg);
}
.help-modal-body { font-size: 0.95rem; line-height: 1.55; }
.help-modal-body h3 {
    font-family: var(--font-titoli);
    font-size: 1.05rem; margin: 1rem 0 0.4rem;
}
.help-modal-body h3:first-child { margin-top: 0; }
.help-modal-body p { margin: 0.4rem 0; }
.help-modal-body ul, .help-modal-body ol { margin: 0.4rem 0 0.6rem 1.2rem; padding: 0; }
.help-modal-body li { margin: 0.2rem 0; }
.help-modal-body code {
    font-family: "SF Mono", Consolas, monospace; font-size: 0.85rem;
    background: var(--row-alt); padding: 0.1rem 0.35rem; border: 1px solid var(--border);
}
.help-modal-body kbd {
    font-family: "SF Mono", Consolas, monospace; font-size: 0.8rem;
    background: var(--row-alt); padding: 0.1rem 0.4rem;
    border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 3px;
}

/* Tabs (modal aggiungi visitatore) */
.add-visitor-tabs {
    display: flex; gap: 0; margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.add-visitor-tabs .tab-btn {
    background: transparent; border: none; padding: 0.6rem 1rem;
    font-size: 0.8rem; text-transform: var(--maiuscolo); letter-spacing: var(--tracking);
    color: var(--muted); cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.add-visitor-tabs .tab-btn:hover { color: var(--fg); background: transparent; }
.add-visitor-tabs .tab-btn.active { color: var(--fg); border-bottom-color: var(--fg); }
.tab-pane { padding-top: 0.5rem; }

/* Search results in modal autocomplete */
.search-results {
    max-height: 240px; overflow-y: auto;
    border: 1px solid var(--border); margin-top: 0.4rem;
    background: var(--bg);
}
.search-results:empty { display: none; }
.search-result-item {
    display: block; width: 100%; text-align: left;
    padding: 0.6rem 0.8rem; background: var(--bg); color: var(--fg);
    border: none; border-bottom: 1px solid var(--border);
    font-size: 0.9rem; cursor: pointer; font-family: inherit;
    text-transform: none; letter-spacing: 0;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover:not([disabled]) { background: var(--row-alt); }
.search-result-item[disabled] { opacity: 0.5; cursor: not-allowed; }
.search-result-empty {
    padding: 0.8rem; color: var(--muted); font-size: 0.85rem; text-align: center;
}

/* Card cluster (dedup aziende AI) */
.cluster-card {
    border: 1px solid var(--border); padding: 1rem; margin-bottom: 1rem;
    border-radius: 6px;
}
.cluster-card .filter-group + .filter-group { margin-top: 0.75rem; }
.cluster-card .variant-row { margin: 0.25rem 0; }
.cluster-card .btn-primary { margin-top: 0.75rem; }

/* Disclosure (details/summary) */
details.section { margin-top: 2rem; }
details.section > summary { cursor: pointer; font-weight: 500; padding: 0.5rem 0; }
details.section > .visitatori { margin-top: 1rem; }
th.col-fixed-100 { width: 100px; }

/* GrapesJS email builder */
.editor-section {
    margin-top: 1.5rem; border: 1px solid var(--border); background: #fff;
}
.editor-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 1rem; border-bottom: 1px solid var(--border);
}
.editor-label {
    text-transform: var(--maiuscolo); letter-spacing: var(--tracking);
    font-size: 0.8rem; color: var(--muted);
}
#gjs-editor { min-height: 680px; }
/* Disabilito il dark mode inversion sull'editor - GrapesJS ha la sua UI */
.editor-section, .editor-section * { color-scheme: light; }

/* Form CRUD */
.form-card {
    border: 1px solid var(--border); padding: 2rem; margin-top: 1.5rem;
    max-width: 900px;
    border-radius: var(--raggio-grande); box-shadow: var(--ombra); background: var(--superficie);
}
.form-card--wide { max-width: none; }
.form-card h2.section-title { margin-top: 0; font-size: 1.1rem; }
.form-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1rem 1.5rem;
}
.form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.form-field-wide { grid-column: 1 / -1; }
.form-field label {
    font-size: 0.95rem; text-transform: var(--maiuscolo); letter-spacing: var(--tracking); color: var(--muted);
}
.form-field input, .form-field select, .form-field textarea {
    padding: 0.7rem 0.9rem; border: 1px solid var(--border);
    background: var(--bg); font-family: inherit; font-size: 1rem; color: var(--fg);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
    outline: none; border-color: var(--fg);
}
.form-field input[readonly], .form-field textarea[readonly] { background: var(--row-alt); color: var(--muted); }

/* Standalone form control (filtri, barre bulk) — stesso look dei .form-field. */
input.form-control, select.form-control, textarea.form-control {
    padding: 0.55rem 0.8rem; border: 1px solid var(--border);
    background: var(--bg); font-family: inherit; font-size: 0.95rem; color: var(--fg);
}
input.form-control:focus, select.form-control:focus, textarea.form-control:focus {
    outline: none; border-color: var(--fg);
}

/* Sezioni del form come card: sfondo leggero, titolo Playfair, stacco ampio */
.form-fieldset {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--row-alt);
    margin-top: 2rem;
    padding: 1.5rem 1.5rem 1.2rem;
}
.form-fieldset legend {
    display: block; width: 100%;
    padding: 0; margin-bottom: 1.1rem;
    font-family: var(--font-titoli);
    font-size: 1.15rem; font-weight: 700;
    text-transform: none; letter-spacing: 0.01em;
    color: var(--fg);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.6rem;
}
.checkbox-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.5rem 1rem;
}
.checkbox-item { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; font-size: 0.95rem; line-height: 1.4; }
.checkbox-item input { margin: 0; width: 1rem; height: 1rem; flex-shrink: 0; accent-color: var(--green); margin-top: 0.14rem; }

.form-actions {
    display: flex; gap: 1rem; margin-top: 2rem; align-items: center;
}
/* "Annulla" accanto a un Salva: outline grigio chiaro, accoppiato al .btn-primary.
   Diverso da .btn-ghost (senza bordo, per azioni terziarie tipo paginazione). */
.btn-cancel {
    display: inline-block; padding: 0.7rem 1.4rem; border: 1px solid var(--border);
    text-decoration: none; color: var(--muted);
    text-transform: var(--maiuscolo); letter-spacing: var(--tracking); font-size: 0.85rem;
}
/* background esplicito: senza, su un <button class="btn-cancel"> vince la regola
   generica button:hover (sfondo nero) mentre qui il testo è nero → nero su nero. */
.btn-cancel:hover { color: var(--fg); border-color: var(--fg); background: transparent; }

.btn-primary {
    background: var(--azione-bg); color: var(--azione-fg); border: 1px solid var(--azione-bg);
    padding: 0.9rem 1.8rem; font-size: 0.95rem;
    text-transform: var(--maiuscolo); letter-spacing: var(--tracking); cursor: pointer;
    font-family: inherit;
    text-decoration: none; display: inline-block; line-height: 1.2; border-radius: var(--raggio);
}
.btn-primary:hover { background: var(--green); border-color: var(--green); color: #fff; }

/* Bottone secondario (default outline, equivalente a <button> nativo ma esplicito) */
.btn-secondary {
    background: transparent; color: var(--fg); border: 1px solid var(--fg);
    padding: 0.7rem 1.4rem; font-size: 0.9rem;
    text-transform: var(--maiuscolo); letter-spacing: var(--tracking); cursor: pointer;
    font-family: inherit; text-decoration: none; display: inline-block; line-height: 1.2;
    transition: all 0.15s; border-radius: var(--raggio);
}
.btn-secondary:hover { background: var(--fg); color: var(--bg); }

/* Bottone distruttivo (Elimina, Disiscrivi, Annulla pianificazione) */
.btn-danger {
    background: transparent; color: var(--danger); border: 1px solid var(--danger);
    padding: 0.7rem 1.4rem; font-size: 0.9rem;
    text-transform: var(--maiuscolo); letter-spacing: var(--tracking); cursor: pointer;
    font-family: inherit; text-decoration: none; display: inline-block; line-height: 1.2;
    transition: all 0.15s;
}
.btn-danger:hover { background: var(--danger); color: #fff; }

/* Bottone "ghost" — link senza bordo, per azioni terziarie */
.btn-ghost {
    background: transparent; color: var(--muted); border: 1px solid transparent;
    padding: 0.7rem 1rem; font-size: 0.85rem;
    text-transform: var(--maiuscolo); letter-spacing: var(--tracking); cursor: pointer;
    font-family: inherit; text-decoration: none; display: inline-block;
}
.btn-ghost:hover { color: var(--fg); }

/* Bottoni piccoli (es. inline nelle card / placeholder) */
.btn-sm { padding: 0.45rem 0.9rem; font-size: 0.75rem; }

/* Utility: riga con spazio fra elementi (es. titolo + azione a destra) */
.row-between {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; flex-wrap: wrap;
}
.row-actions {
    display: inline-flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
}
.flex-grow { flex: 1; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }

/* Badge stato newsletter (server-side o lato JS via classe + var CSS) */
.badge-stato {
    display: inline-block; padding: 0.2rem 0.6rem; border-radius: 3px;
    color: #fff; font-size: 0.72rem; text-transform: var(--maiuscolo);
    letter-spacing: 0.06em; font-weight: 600; line-height: 1.4;
    background: var(--muted);
}
.badge-stato.s-consegnata { background: var(--stato-consegnata); }
.badge-stato.s-aperta { background: var(--stato-aperta); }
.badge-stato.s-cliccata { background: var(--stato-cliccata); }
.badge-stato.s-bounced { background: var(--stato-bounced); }
.badge-stato.s-spam { background: var(--stato-spam); }
.badge-stato.s-disiscritto { background: var(--stato-disiscritto); }
.badge-stato.s-inviata { background: var(--stato-inviata); color: var(--fg); }
/* Variante compatta del badge stato — per liste fitte / cell tabella strette. */
.badge-stato.badge-stato--sm { padding: 0.1rem 0.4rem; font-size: 0.65rem; letter-spacing: 0.04em; }

/* Riepilogo Storico Email (scheda contatto): numeri a colpo d'occhio */
.email-summary { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 1.2rem; }
.email-summary .es-item {
    flex: 1 1 90px; min-width: 90px; text-align: center;
    border: 1px solid var(--border); border-radius: 8px; padding: 0.7rem 0.5rem; background: var(--bg);
}
.email-summary .es-num { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.email-summary .es-lbl { display: block; font-size: 0.72rem; text-transform: var(--maiuscolo); letter-spacing: 0.05em; color: var(--muted); margin-top: 0.2rem; }

/* Box stats riepilogo (sostituisce molti style inline in compose.html) */
.stat-summary { margin-bottom: 1.5rem; }
.stat-summary p { margin: 0.4rem 0; }
.stat-summary .ab-block { margin-top: 0.8rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }

@media (max-width: 720px) {
    .form-grid { grid-template-columns: 1fr; }

    /* Tabelle su cellulare: niente più colonne schiacciate con il testo che va a
       capo ogni carattere. Ogni colonna ha una larghezza minima (~12 caratteri)
       e la tabella scorre in orizzontale invece di comprimersi. */
    .container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.visitatori {
        table-layout: auto;
        width: auto;
        min-width: 100%;
    }
    table.visitatori th,
    table.visitatori td {
        min-width: 8rem;          /* ≈ 12+ caratteri prima di andare a capo */
    }
    table.visitatori th.col-narrow,
    table.visitatori td.col-narrow,
    table.visitatori td.actions {
        min-width: 0;             /* icone / azioni restano compatte */
    }
}

/* Footer */
.site-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    padding: 1.2rem 2rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--muted);
    letter-spacing: 0.04em;
    background: var(--bg);
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.site-footer a:hover { color: var(--fg); border-bottom-color: var(--fg); }

/* Barra cookie tecnici: sottile, discreta, fissa in basso. */
.cookie-bar[hidden] { display: none; }
.cookie-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    flex-wrap: wrap;
    padding: 0.45rem 1rem;
    background: var(--fg); color: var(--bg);
    font-size: 0.72rem; letter-spacing: 0.02em;
}
.cookie-bar a { color: var(--bg); text-decoration: underline; }
.cookie-bar strong { font-weight: 600; }
.cookie-bar button {
    background: transparent; color: var(--bg);
    border: 1px solid var(--bg); border-radius: 3px;
    padding: 0.15rem 0.7rem; font-size: 0.7rem; cursor: pointer; line-height: 1.4;
}
.cookie-bar button:hover { background: var(--bg); color: var(--fg); }

/* Anti doppio-invio: spinner sui pulsanti durante un submit in corso */
@keyframes fty-spin { to { transform: rotate(360deg); } }
.spinner {
    display: inline-block; width: 0.9em; height: 0.9em; vertical-align: -0.1em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: fty-spin 0.6s linear infinite;
}
button.is-busy, input.is-busy { opacity: 0.75; cursor: progress; }

/* ============================================================
   Modulo Accoglienza (app mobile per check-in QR alle fiere)
   Estratto da templates/accoglienza/evento.html — vivere su CSS
   condiviso così altre pagine accoglienza riusano lo stile.
   ============================================================ */
/* Header in stile CRM (.site-header): bianco, bordo sotto, testo scuro. */
.acc-header { display:flex; align-items:center; gap:.75rem; padding:.6rem 1rem;
    background:var(--bg); color:var(--fg); border-bottom:1px solid var(--border); }
.acc-header a.back { color:var(--fg); text-decoration:none; font-size:1.4rem; line-height:1; }
.acc-header h1 { margin:0; font-size:1.3rem; color:var(--fg); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.acc-logout { margin:0; }
.acc-logout button { padding:.4rem .9rem; font-size:.72rem; }
.acc-main { padding:1rem; max-width:560px; margin:0 auto; }
.acc-scan-btn { width:100%; padding:1rem; font-size:1.1rem; margin-bottom:1rem; }
#reader { width:100%; border-radius:12px; overflow:hidden; margin-bottom:1rem; }
.res { width:100%; text-align:left; background:var(--bg); border:1px solid var(--border); border-radius:10px;
    padding:.7rem .9rem; margin-top:.55rem; display:flex; justify-content:space-between; align-items:center; gap:.6rem; cursor:pointer; }
.res .who strong { display:block; } .res .who small { color:var(--muted); }
.res .in { color:var(--green); font-weight:700; font-size:.85rem; white-space:nowrap; }
/* Esito scansione a tutto schermo */
#flash { position:fixed; inset:0; z-index:100; display:none; flex-direction:column;
    align-items:center; justify-content:center; color:#fff; text-align:center; padding:2rem; }
#flash.ok { background:#1e8e4a; } #flash.err { background:var(--danger); }
#flash .icon { font-size:5rem; line-height:1; }
#flash .title { font-size:2rem; font-weight:800; margin:.5rem 0; }
#flash .sub { font-size:1.3rem; word-break:break-word; }
/* Dettaglio partecipante a tutto schermo */
#detail { position:fixed; inset:0; background:var(--bg); z-index:50; display:none; flex-direction:column; }
#detail .d-head { display:flex; align-items:center; gap:.6rem; padding:.8rem 1rem;
    background:var(--bg); color:var(--fg); border-bottom:1px solid var(--border); }
#detail .d-head button { background:transparent; border:0; color:var(--fg); font-size:1.5rem; line-height:1; padding:0; }
#detail .d-body { padding:1.2rem; overflow:auto; flex:1; }
#detail h2 { margin:.2rem 0 .2rem; }
#detail .row { padding:.55rem 0; border-bottom:1px solid var(--border); }
#detail .row .lbl { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; }
#detail .badge-in { display:inline-block; background:var(--green); color:#fff; padding:.3rem .7rem; border-radius:999px; font-size:.85rem; }
#detail .d-foot { padding:1rem 1.2rem calc(1rem + env(safe-area-inset-bottom)); border-top:1px solid var(--border); }
#detail .d-foot button { width:100%; padding:1rem; font-size:1.1rem; font-weight:700; border-radius:12px; border:0; }
.btn-checkin { background:var(--green); color:#fff; }
.btn-done { background:#e8f3ec; color:var(--green); border:1px solid var(--green) !important; }
.btn-noqr { background:#f3f3f3; color:#999; }
/* Undo check-in (annulla ingresso per errore di persona): azione secondaria/danger */
#detail .d-foot button + button { margin-top:.6rem; }
#detail #dCheckout { background:var(--bg); color:var(--danger);
    border:1px solid var(--danger) !important; font-size:1rem; padding:.8rem; }

/* Area di trascinamento immagini (scheda prodotto): accetta più file insieme */
.img-dropzone {
    margin-top: .8rem; padding: 1rem; text-align: center;
    border: 2px dashed var(--border); border-radius: 10px; background: var(--bg);
    transition: border-color .15s, background-color .15s;
}
.img-dropzone.is-over { border-color: var(--green); background: #eef7f1; }
:root[data-theme="dark"] .img-dropzone.is-over { background: rgba(74,124,89,.18); }

/* Pallino stato connessione nell'header accoglienza */
.acc-dot { flex:0 0 auto; width:12px; height:12px; border-radius:50%;
    background:var(--muted); box-shadow:0 0 0 2px rgba(0,0,0,.06); }
.acc-dot.ok  { background:#2e9e4f; }                 /* online e sincronizzato */
.acc-dot.warn{ background:#e0a400; animation:acc-dot-pulse 1.1s ease-in-out infinite; } /* sta sincronizzando */
.acc-dot.off { background:#cc3333; }                 /* offline / non sincronizzato */
@keyframes acc-dot-pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }

/* Barra stato rete/sync accoglienza: sticky sotto l'header, gialla offline/coda */
.acc-netbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:.6rem;
    padding:.5rem .9rem; background:#fff8e1; color:#8a6400; border-bottom:1px solid #b8860b;
    font-size:.85rem; font-weight:600; }
.acc-netbar.off { background:#fdecea; color:#8a1c12; border-bottom-color:#cc3333; }
.acc-netbar-text { flex:1 1 auto; }
.acc-netbar .btn-sm { flex:0 0 auto; padding:.3rem .7rem; border-radius:6px; border:1px solid currentColor;
    background:transparent; color:inherit; font-weight:700; cursor:pointer; }
:root[data-theme="dark"] .acc-netbar { background:#241f0e; color:#e0b84d; }
:root[data-theme="dark"] .acc-netbar.off { background:#2a1512; color:#f0a99f; }

/* Accoglienza — helper riusate dai template (evita gli style inline) */
.acc-header img { height:26px; width:auto; display:block; }
.acc-evento { display:block; margin-bottom:.8rem; }
.acc-empty { color:var(--muted); text-align:center; margin-top:2rem; }
.acc-search { width:100%; padding:.8rem; font-size:1rem; border:1px solid var(--border);
    border-radius:10px; background:var(--bg); color:var(--fg); font-family:inherit; }
.acc-search:focus { outline:none; border-color:var(--fg); }
.acc-add-btn { width:100%; margin-top:.5rem; }
.acc-sentinel { height:1px; }
/* Contatori "Entered"/"Total" cliccabili: pill sopra la ricerca (controllo
   segmentato); .active = filtro corrente */
.acc-counters { display:flex; gap:.5rem; margin-bottom:.8rem; flex-wrap:wrap; }
.acc-entered-pill { display:inline-flex; align-items:center; gap:.45rem;
    padding:.5rem .85rem; border:1px solid var(--border); border-radius:999px;
    background:var(--bg); color:var(--fg); font-family:inherit; font-weight:600; cursor:pointer; }
.acc-entered-pill .ico { color:var(--green); font-weight:700; }
.acc-entered-pill .num { background:var(--green); color:#fff; font-weight:700;
    min-width:1.5rem; text-align:center; padding:.1rem .45rem; border-radius:999px; font-size:.9rem; }
.acc-entered-pill.active { background:var(--green); color:#fff; border-color:var(--green); }
.acc-entered-pill.active .ico { color:#fff; }
.acc-entered-pill.active .num { background:#fff; color:var(--green); }
/* Variante "Total": neutra (grigio scuro), per distinguerla dal verde "Entered" */
.acc-total-pill .num { background:var(--fg); color:var(--bg); }
.acc-total-pill.active { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.acc-total-pill.active .num { background:var(--bg); color:var(--fg); }
.res .already { color:var(--muted); font-size:.85rem; white-space:nowrap; }

/* Import da Mailchimp — lista campagne selezionabili nel modale */
.mc-camp-list { max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:.4rem; }
.mc-camp { width:100%; text-align:left; background:var(--bg); border:1px solid var(--border);
    border-radius:8px; padding:.6rem .8rem; cursor:pointer; color:var(--fg); font-family:inherit; }
.mc-camp:hover { border-color:var(--fg); }
.mc-camp strong { display:block; font-size:.95rem; }
.mc-camp small { color:var(--muted); }
.mc-camp.sel { border-color:var(--green); background:#e8f3ec; }
:root[data-theme="dark"] .mc-camp.sel { background:rgba(74,124,89,.25); }

/* Banner installazione PWA ("Install app") — palette CRM, in fondo allo schermo */
.install-banner {
    position:fixed; left:0; right:0; bottom:0; z-index:1200;
    display:flex; align-items:center; justify-content:center; gap:.8rem; flex-wrap:wrap;
    padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    background:var(--bg); color:var(--fg); border-top:1px solid var(--border);
    box-shadow:0 -2px 12px rgba(0,0,0,.06);
}
.install-banner[hidden] { display:none; }
/* L'attributo hidden ha priorità bassa: .btn-primary/inline-block lo sovrascriverebbe.
   Forziamo il nascondimento quando il JS imposta hidden sui figli del banner. */
.install-banner [hidden] { display:none !important; }
.install-banner-text { font-size:.9rem; font-weight:600; }
.install-banner-hint { font-size:.85rem; color:var(--muted); }
.install-banner .btn-primary { padding:.5rem 1rem; font-size:.8rem; }
.install-banner-close {
    background:transparent; border:1px solid var(--border); color:var(--fg);
    width:30px; height:30px; padding:0; line-height:1; font-size:1.1rem;
    border-radius:8px; cursor:pointer; text-transform:none; letter-spacing:0;
}
.install-banner-close:hover { background:var(--fg); color:var(--bg); }

/* ============================================================
   Assistente AI di help — bolla fluttuante + pannello chat
   z-index 900: sotto i .modal (1000), così non li copre mai.
   ============================================================ */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.help-ai-bubble {
    position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 900;
    width: 54px; height: 54px; padding: 0; border-radius: 50%;
    background: var(--fg); color: var(--bg); border: 1px solid var(--fg);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    display: flex; align-items: center; justify-content: center;
}
.help-ai-bubble:hover { background: var(--green); border-color: var(--green); color: #fff; }

.help-ai-panel {
    position: fixed; right: 1.5rem; bottom: 5.5rem; z-index: 900;
    width: 370px; max-width: calc(100vw - 2rem);
    height: 520px; max-height: calc(100vh - 8rem);
    display: flex; flex-direction: column;
    background: var(--bg); color: var(--fg);
    border: 1px solid var(--border); border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.28);
}
.help-ai-panel[hidden] { display: none; }

.help-ai-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: .7rem 1rem; border-bottom: 1px solid var(--border);
}
.help-ai-header strong { font-size: .95rem; }

.help-ai-messages { flex: 1; overflow-y: auto; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .6rem; }
.help-ai-msg { padding: .55rem .8rem; border-radius: 10px; font-size: .9rem; line-height: 1.5; max-width: 92%; }
.help-ai-msg ul { margin: .4rem 0; padding-left: 1.1rem; }
.help-ai-msg-bot { background: var(--row-alt); border: 1px solid var(--border); align-self: flex-start; }
.help-ai-msg-user { background: var(--fg); color: var(--bg); align-self: flex-end; }
.help-ai-pending { color: var(--muted); font-style: italic; }
.help-ai-error { border-color: var(--danger); color: var(--danger); }

.help-ai-suggest { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .6rem; }
.help-ai-suggest[hidden] { display: none; }
.help-ai-chip {
    background: transparent; border: 1px solid var(--border); color: var(--muted);
    border-radius: 999px; padding: .3rem .7rem; font-size: .78rem;
    text-transform: none; letter-spacing: 0; cursor: pointer;
}
.help-ai-chip:hover { border-color: var(--fg); color: var(--fg); background: transparent; }

.help-ai-form { display: flex; gap: .5rem; align-items: flex-end; padding: .6rem 1rem; border-top: 1px solid var(--border); }
.help-ai-form textarea {
    flex: 1; resize: none; font-family: inherit; font-size: .9rem;
    padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--fg);
}
.help-ai-form textarea:focus { outline: none; border-color: var(--fg); }

.help-ai-note { margin: 0; padding: 0 1rem .7rem; font-size: .72rem; color: var(--muted); }

/* La cookie bar (fissa in basso) coprirebbe la bolla: finché è visibile, la alziamo. */
#cookieBar:not([hidden]) ~ .help-ai-bubble { bottom: 5.5rem; }
#cookieBar:not([hidden]) ~ .help-ai-panel { bottom: 9.5rem; }

@media (max-width: 640px) {
    .help-ai-panel {
        right: .5rem; left: .5rem; bottom: 5.5rem;
        width: auto; max-width: none; height: 70vh;
    }
}

/* Campo bloccato (es. codice/ragione sociale espositore dopo la creazione):
   resta leggibile ma è evidente che non si tocca. */
.field-locked {
    background: var(--row-alt) !important;
    color: var(--muted) !important;
    cursor: not-allowed;
}

/* Assistente: cursore lampeggiante mentre la risposta viene "digitata" (streaming). */
.help-ai-typing::after {
    content: '▍';
    margin-left: 1px;
    animation: help-ai-caret 1s steps(2, start) infinite;
}
.help-ai-typing:empty::after { margin-left: 0; }
@keyframes help-ai-caret { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
    .help-ai-typing::after { animation: none; }
}

/* Ogni tanto la bolla vibra per farsi notare (serve a chi non l'ha mai vista).
   Smette quando è aperta o dopo che l'utente l'ha usata: un elemento che continua
   a muoversi dopo essere servito è solo fastidioso. */
@keyframes help-ai-shake {
    0%, 88%, 100% { transform: rotate(0) translateY(0); }
    89% { transform: rotate(-10deg) translateY(-2px); }
    91% { transform: rotate(9deg)   translateY(0); }
    93% { transform: rotate(-7deg)  translateY(-2px); }
    95% { transform: rotate(6deg)   translateY(0); }
    97% { transform: rotate(-3deg)  translateY(0); }
}
.help-ai-bubble { animation: help-ai-shake 9s ease-in-out 4s infinite; }
.help-ai-bubble:hover,
.help-ai-bubble[aria-expanded="true"],
.help-ai-bubble.help-ai-quiet { animation: none; }

@media (prefers-reduced-motion: reduce) {
    .help-ai-bubble { animation: none; }
}

/* ---- Dashboard: trade show del momento e numeri della giornata ---------- */
.dash-fiera {
    border: 1px solid var(--border);
    padding: 1rem 1.2rem;
    margin-bottom: 1.4rem;
}
.dash-fiera__eyebrow {
    margin: 0; font-size: .78rem; text-transform: var(--maiuscolo);
    letter-spacing: .08em; color: var(--muted);
}
.dash-fiera__nome { margin: .2rem 0 .1rem; font-size: 1.3rem; }
.dash-fiera__quando { margin: 0 0 .8rem; color: var(--muted); font-size: .92rem; }
.dash-numeri { display: flex; gap: 2rem; flex-wrap: wrap; }
.dash-numero { display: flex; flex-direction: column; }
.dash-numero__valore { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.dash-numero__etichetta { font-size: .82rem; color: var(--muted); }

/* Sottotitolo sotto il titolo di pagina: dice cosa contiene la lista. */
.page-subtitle {
    margin: -.2rem 0 1rem;
    color: var(--muted);
    font-size: .92rem;
    max-width: 70ch;
}

/* ---- Navigazione da tastiera -------------------------------------------
   Con otto sole regole :focus in tutto il foglio, chi naviga con Tab perdeva
   di vista dov'era. :focus-visible mostra il contorno solo a chi usa la
   tastiera, senza aggiungere aloni al clic del mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 2px;
    border-radius: 2px;
}
/* Le icone-azione nelle tabelle erano bersagli piccoli per un dito. */
@media (pointer: coarse) {
    .icon-btn, .actions a, .actions button {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ======================================================================
   Editor newsletter — impianto Mailchimp
   Foglio dell'email al centro che scorre con la barra sul lato destro,
   tavolozza dei blocchi a destra, entrambi a tutta altezza.
   ====================================================================== */
.nle {
    border: 1px solid var(--border);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    /* Tutta la finestra meno l'intestazione della pagina. */
    height: calc(100vh - 230px);
    min-height: 520px;
}

/* ---- barra dei comandi ---- */
.nle__barra {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: .5rem .7rem; border-bottom: 1px solid var(--border);
    background: var(--row-alt);
}
.nle__gruppo { display: flex; gap: .3rem; }
.nle__btn {
    border: 1px solid var(--border); background: var(--bg); color: inherit;
    padding: .35rem .7rem; font-size: .85rem; cursor: pointer; border-radius: 3px;
}
.nle__btn:hover { background: var(--row-alt); }
.nle__stato { margin-left: auto; font-size: .82rem; color: var(--muted); }

/* ---- corpo: foglio + tavolozza ---- */
.nle__corpo { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; }
.nle__canvas { flex: 1 1 auto; min-width: 0; position: relative; }
.nle .gjs-editor { height: 100%; width: 100%; }

/* Il foglio si distingue per il filo di bordo, non per il colore intorno:
   il grigio faceva sembrare sporca la pagina. */
/* L'area di lavoro occupa tutto lo spazio; a scorrere è la pagina dentro,
   quindi la barra cade all'estrema destra come su Mailchimp. */
.nle .gjs-cv-canvas { background: var(--bg); height: 100%; top: 0; }

/* ---- colonna di destra ---- */
.nle__lato {
    flex: 0 0 clamp(320px, 34%, 560px);
    border-left: 1px solid var(--border);
    display: flex; flex-direction: column; min-height: 0;
}
.nle__tabs { flex: 0 0 auto; display: flex; border-bottom: 1px solid var(--border); }
.nle__tab {
    flex: 1 1 0; border: 0; background: transparent; color: var(--muted);
    padding: .6rem .3rem; font-size: .85rem; cursor: pointer;
    border-bottom: 2px solid transparent;
}
.nle__tab.is-attiva { color: var(--fg); font-weight: 600; border-bottom-color: var(--fg); }
.nle__pannello { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .6rem; }
.nle__aiuto { margin: 0 0 .6rem; font-size: .8rem; color: var(--muted); }

/* ---- tavolozza: caselle grandi e ordinate, come quelle di Mailchimp ---- */
.nle .gjs-blocks-c {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
    gap: .55rem;
}
.nle .gjs-block {
    width: auto; min-height: 96px; margin: 0; padding: .7rem .4rem .55rem;
    border: 1px solid #dfe2e6; border-radius: 6px; background: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    box-shadow: none; cursor: grab; transition: border-color .12s, box-shadow .12s;
}
.nle .gjs-block:hover { border-color: #9aa3ad; box-shadow: 0 1px 4px rgba(0,0,0,.10); }
.nle .gjs-block__media { margin: 0; }
.nle .gjs-block.nle-campo { min-height: 0; padding: .5rem .4rem; }
.nle__blocco { display: flex; flex-direction: column; align-items: center; gap: .45rem; width: 100%; }
.nle__blocco svg { display: block; }
.nle__blocco > span { font-size: .76rem; line-height: 1.2; color: #3c4043; text-align: center; }
.nle__blocco--campo > span { font-size: .78rem; }

:root[data-theme="dark"] .nle .gjs-block { background: var(--bg); border-color: var(--border); }
:root[data-theme="dark"] .nle__blocco > span { color: var(--fg); }

/* GrapesJS di serie è scuro: qui deve stare dentro l'interfaccia del CRM. */
.nle .gjs-one-bg { background-color: var(--bg); }
.nle .gjs-two-color, .nle .gjs-four-color, .nle .gjs-four-color-h:hover { color: var(--fg); }
.nle .gjs-sm-sector-title, .nle .gjs-trt-header {
    font-size: .82rem; text-transform: none; letter-spacing: 0;
}

/* ---- schermo intero ---- */
.nle--pieno {
    position: fixed; inset: 0; z-index: 900;
    height: auto; margin: 0; border: 0;
}
body.nle-body-bloccato { overflow: hidden; }

@media (max-width: 900px) {
    .nle { height: auto; }
    .nle__corpo { flex-direction: column; }
    .nle__canvas { height: 60vh; }
    .nle__lato { flex-basis: auto; border-left: 0; border-top: 1px solid var(--border); }
}