:root {
    color-scheme: light;
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-muted: #f2f4f7;
    --border: #d0d5dd;
    --text: #111827;
    --muted: #667085;
    --primary: #3730a3;
    --primary-strong: #312e81;
    --accent: #475467;
    --danger: #b42318;
    --info: #1f4e79;
    --ok-bg: #f0fdf4;
    --info-bg: #eef6ff;
    --danger-bg: #fef3f2;
    --radius: 0;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.45;
    /* Layout a colonna: il footer resta in fondo anche su pagine corte. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 120;
    border-bottom: 1px solid var(--border);
    /* Sfondo navbar personalizzabile (Manage → Tema); fallback al valore traslucido storico. */
    background: var(--topbar-bg, rgba(255, 255, 255, 0.94));
    backdrop-filter: blur(10px);
}

.topbar-inner,
.container {
    width: 90vw;
    margin: 0 auto;
}

.topbar-inner {
    min-height: 64px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.brand {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 44px;
}

.brand img {
    display: block;
    width: 150px;
    height: 44px;
    object-fit: cover;
    object-position: center;
}

.brand:hover {
    text-decoration: none;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: visible;
}

.nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.nav a,
.nav-menu-trigger,
.button,
button:not(.col-toggle-pill *),
input[type="submit"] {
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.nav a.active,
.nav-menu-trigger.active,
.button.primary,
button.primary,
input[type="submit"].primary {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.nav-menu {
    position: relative;
}

.nav-menu-trigger::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}

.nav-menu.open .nav-menu-trigger::after {
    transform: translateY(2px) rotate(225deg);
}

.nav-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 140;
    min-width: 210px;
    padding: 6px 0;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
}

.nav-menu-dropdown[hidden] {
    display: none;
}

.nav .nav-menu-dropdown a {
    width: 100%;
    min-height: 38px;
    justify-content: flex-start;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.nav .nav-menu-dropdown a.active,
.nav .nav-menu-dropdown a:hover {
    background: var(--surface-muted);
    color: var(--text);
    text-decoration: none;
}

.button.danger,
button.danger {
    border-color: #f3b4ad;
    color: var(--danger);
}

.icon-button {
    width: 42px;
    padding: 0;
    font-size: 24px;
}

/* ── Avatar + dropdown ──────────────────────────────────────── */
.avatar-wrap {
    position: relative;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    border: none;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: opacity .15s;
}

.avatar:hover { opacity: .8; }

.avatar-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    padding: 6px 0;
    z-index: 100;
}

.avatar-dropdown-name {
    padding: 8px 14px 6px;
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.avatar-dropdown-item,
.avatar-dropdown form button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    background: none;
    border: none;
    border-radius: 0;
    min-height: unset;
    cursor: pointer;
    text-decoration: none;
    transition: background .1s;
}

.avatar-dropdown-item:hover,
.avatar-dropdown form button:hover {
    background: var(--border);
}

.avatar-dropdown-item.active {
    font-weight: 700;
}

.avatar-dropdown-item.danger,
.avatar-dropdown form button.danger {
    color: var(--danger);
}

.avatar-dropdown form {
    margin: 0;
}

main {
    padding: 28px 0 56px;
    /* Occupa lo spazio disponibile cosi' il footer e' spinto in basso. */
    flex: 1 0 auto;
}

/* Footer globale con i link legali. */
.site-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.site-footer-inner {
    width: 90vw;
    margin: 0 auto;
    min-height: 56px;
    padding: 12px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
    font-size: 13px;
    color: var(--muted);
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.site-footer-links a {
    color: var(--muted);
}

.site-footer-links a:hover {
    color: var(--primary);
}

/* Link "UpData SRL" nell'attribuzione: coerente col resto del footer, senza sottolineatura. */
.site-footer-brand a {
    color: inherit;
    text-decoration: none;
}

.site-footer-brand a:hover {
    color: var(--primary);
}

/* Pagina placeholder "In arrivo": titolo + messaggio centrati. */
.coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    min-height: 50vh;
}

.coming-soon-text {
    font-size: 20px;
    color: var(--muted);
    margin: 0;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
}

/* Azioni di pagina affiancate (es. dashboard: "Avanzate" e "Aggiungi Tag"): pulsanti uguali in riga,
   uno di fianco all'altro; vanno a capo solo se lo spazio non basta. */
.page-head-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

h1,
h2,
h3 {
    margin: 0;
    letter-spacing: 0;
}

h1 {
    font-size: 28px;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 16px;
}

.muted {
    color: var(--muted);
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
}

/* ── Form impostazioni ──────────────────────────────────────── */
.form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
    max-width: 420px;
}

.form-row label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.form-row input[type="password"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="text"] {
    min-height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 12px;
    font: inherit;
    background: var(--bg);
    color: var(--text);
    width: 100%;
}

.form-row input.input-error {
    border-color: var(--danger);
}

.field-error {
    font-size: 12px;
    color: var(--danger);
}

.field-hint {
    font-size: 12px;
    color: var(--muted);
}

/* Pagina /settings: lista a righe con editor inline (stile "personal info"). */
.settings-page {
    max-width: 1200px;
    margin-inline: auto;
}

.settings-breadcrumb {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 4px;
}

.settings-list {
    background: var(--surface);
    border: 1px solid var(--border);
}

.settings-row {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.settings-row:last-child {
    border-bottom: 0;
}

.settings-row-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.settings-row-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.settings-row-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.settings-row-value {
    font-size: 14px;
    color: var(--muted);
    word-break: break-word;
}

/* Override del reset globale dei bottoni: il toggle e' un link testuale allineato a destra. */
.settings-list button.settings-edit-toggle {
    min-height: unset;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
}

.settings-list button.settings-edit-toggle:hover {
    color: var(--primary);
}

.settings-edit {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--border);
}

.settings-edit[hidden] {
    display: none;
}

.settings-edit-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.grid {
    display: grid;
    gap: 16px;
}

.grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid {
    display: grid;
    gap: 14px;
}

label {
    display: grid;
    gap: 6px;
    font-weight: 650;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--text);
    min-height: 42px;
    padding: 9px 11px;
    font: inherit;
}

input:disabled,
select:disabled,
textarea:disabled {
    background: var(--surface-muted);
    color: var(--muted);
    cursor: not-allowed;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

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

th,
td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

th {
    background: var(--surface-muted);
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
}

tr:last-child td {
    border-bottom: 0;
}

tr.row-link {
    cursor: pointer;
}

tr.row-link:hover td {
    background: var(--surface-muted);
}

.status-insert {
    background: var(--ok-bg);
}

.status-update {
    background: var(--info-bg);
}

.status-error {
    background: var(--danger-bg);
}

.import-review-table {
    table-layout: auto;
}

.import-review-table th,
.import-review-table td {
    border-right: 1px solid var(--border);
}

.import-review-table th:last-child,
.import-review-table td:last-child {
    border-right: 0;
}

.import-review-table .cell-insert {
    background: var(--ok-bg);
}

.import-review-table .cell-update {
    background: var(--info-bg);
}

.import-review-table .cell-error {
    background: var(--danger-bg);
    box-shadow: inset 0 0 0 1px #f3b4ad;
}

.cell-value {
    font-weight: 600;
    word-break: break-word;
}

.cell-note {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.cell-error .cell-note {
    color: var(--danger);
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius);
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid var(--border);
    background: var(--surface-muted);
}

.badge.ok {
    color: #027a48;
    background: var(--ok-bg);
}

.badge.info {
    color: var(--info);
    background: var(--info-bg);
}

.badge.danger {
    color: var(--danger);
    background: var(--danger-bg);
}

/* Tag — visualizzazione in tabella: chip RETTANGOLARE (coerente col tema squadrato, --radius 0)
   con uno swatch QUADRATO del colore di FIANCO al nome (non sotto). Il colore arriva dalla custom
   property inline `--tag` impostata sul nodo (fallback grigio). */
.tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius);
    /* Niente più swatch quadrato: il colore del tag colora direttamente BORDO e TESTO del box. */
    border: 1px solid var(--tag, #888);
    color: var(--tag, #888);
    /* Sfondo = tinta del tag alla stessa "leggerezza" dell'ex grigio --surface-muted (#f2f4f7,
       ~12% di colore su bianco). Prima riga = fallback grigio per i browser senza color-mix. */
    background: var(--surface-muted);
    background: color-mix(in srgb, var(--tag, #888) 12%, #fff);
    font-weight: 650;
}

/* Colonna "Tags" della dashboard: chip compatte che vanno a capo nella cella. Riusa .tag-pill
   ma in versione ridotta, adatta alla densità della tabella. */
.dashboard-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.dashboard-tags .tag-pill {
    padding: 2px 8px;
    font-size: 0.82rem;
    font-weight: 600;
}

/* Tag — riga del form di creazione (popup): nome a sinistra (occupa lo spazio) e selettore colore
   QUADRATO di fianco, non impilato sotto. align-items:flex-end allinea gli input pur con le label sopra. */
.tag-form-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.tag-form-row .tag-form-name {
    flex: 1 1 auto;
}

.tag-form-row .tag-form-color {
    flex: 0 0 auto;
}

.tag-form-row .tag-form-color input[type="color"] {
    width: 48px;
    min-width: 48px;
    padding: 2px;
    cursor: pointer;
}

.alert {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 12px 14px;
    margin-bottom: 16px;
}

.alert.error {
    border-color: #f3b4ad;
    color: var(--danger);
    background: var(--danger-bg);
}

.alert.success {
    border-color: #a6f4c5;
    color: #027a48;
    background: var(--ok-bg);
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.auth-panel {
    width: min(460px, 100%);
}

.totp-qr {
    display: block;
    width: 220px;
    height: 220px;
    margin: 16px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
}

.login-body {
    /* Flex column su tutta l'altezza: lo shell cresce e il footer resta ancorato in fondo. */
    background: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.login-shell {
    /* Occupa lo spazio disponibile e centra il pannello; il footer sta sotto. */
    flex: 1 0 auto;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-panel {
    width: min(384px, 100%);
    display: grid;
    gap: 24px;
}

.login-brand {
    /* Mostra solo il logo del tenant, centrato (nessun testo del titolo). */
    display: flex;
    justify-content: center;
    color: var(--primary);
    font-weight: 800;
    letter-spacing: 0;
}

.login-panel h1 {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
}

.login-form {
    display: grid;
    gap: 16px;
}

.login-fields {
    border: 1px solid var(--border);
}

.login-fields label + label {
    border-top: 1px solid var(--border);
}

.login-fields input {
    border: 0;
}

.login-panel input {
    min-height: 36px;
    padding: 10px 12px;
    color: var(--text);
}

.login-panel input::placeholder {
    color: #98a2b3;
}

.remember-row {
    display: inline-flex;
    grid-template-columns: none;
    align-items: center;
    gap: 12px;
    color: var(--text);
    font-weight: 500;
}

.remember-row input {
    width: 16px;
    min-height: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
}

.login-submit {
    width: 100%;
    min-height: 40px;
}

.totp-block {
    display: grid;
    justify-items: center;
    gap: 12px;
}

.login-panel .totp-qr {
    width: 188px;
    height: 188px;
    margin: 0;
}

.totp-secret {
    width: 100%;
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.totp-secret code {
    color: var(--text);
    overflow-wrap: anywhere;
}

.auth-divider {
    height: 1px;
    background: var(--border);
}

.fallback-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.fallback-actions form,
.skip-form {
    display: grid;
}

.fallback-actions button,
.skip-form button {
    width: 100%;
    color: var(--primary);
    background: #ffffff;
}

.otp-form {
    margin-top: -8px;
}

/* Messaggio informativo sulla schermata OTP dedicata (login challenge). */
.auth-hint {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

/* Link "Torna al codice TOTP": a piena larghezza, coerente con i bottoni di login. */
.auth-back {
    display: grid;
}

.auth-back .button {
    width: 100%;
    text-align: center;
    justify-content: center;
}

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

.mobile-otp-form {
    margin-top: 18px;
}

.actions-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.table-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.record-editor {
    background: var(--surface-muted);
    white-space: normal;
}

.record-editor details {
    max-width: none;
}

.record-editor summary {
    cursor: pointer;
    font-weight: 650;
    margin-bottom: 12px;
}

.compact-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 12px;
    align-items: end;
}

.compact-form .wide {
    grid-column: 1 / -1;
}

.history-filter-form {
    grid-template-columns: repeat(6, minmax(120px, 1fr));
}

.history-filter-form .history-filter-combobox {
    grid-column: span 1;
    min-width: 0;
}

.history-filter-form .date-filter-group,
.history-filter-form .table-actions {
    grid-column: span 2;
}

.history-filter-form .table-actions {
    align-self: end;
    justify-content: flex-end;
}

.history-filter-form .combobox-input,
.history-filter-form .date-filter-input,
.history-filter-form .table-actions .button,
.history-filter-form .table-actions button {
    min-height: 42px;
    padding: 9px 11px;
}

.compact-form .date-filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
    justify-content: flex-start;
    justify-self: stretch;
    max-width: 100%;
    width: 100%;
}

.compact-form .date-filter-label {
    flex: 1 1 170px;
    justify-self: start;
    max-width: 100%;
    width: auto;
}

/* I due campi date crescono uguali nello spazio disponibile e mantengono il picker nativo. */
.compact-form .date-filter-input {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    width: 100%;
}

/* Combobox custom (storico campagne / anagrafica filtrabile come dashboard). */
.combobox {
    position: relative;
    display: block;
}

.combobox-input {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 0 12px;
    font: inherit;
    color: var(--text);
}

.combobox-input:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}

.combobox-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    max-height: 240px;
    overflow-y: auto;
    z-index: 30;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08);
}

.combobox-list[hidden] {
    display: none;
}

.combobox-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
}

.combobox-option:hover,
.combobox-option:focus {
    background: var(--surface-muted);
}

.combobox-option[hidden] {
    display: none;
}

.table-wrap td.wrap {
    max-width: 360px;
    white-space: normal;
}

.placeholder-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.placeholder-list code {
    padding: 4px 8px;
    border: 1px solid var(--border);
    background: var(--surface-muted);
}

.template-body-preview {
    margin: 0;
    max-width: 420px;
    white-space: pre-wrap;
    font: inherit;
}

.template-editor-form {
    display: grid;
    gap: 16px;
}

.template-editor-meta {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(240px, 2fr);
    gap: 12px;
    align-items: end;
}

.template-editor-workspace {
    display: grid;
    grid-template-columns: minmax(320px, 1.1fr) minmax(320px, 0.9fr);
    gap: 16px;
    align-items: stretch;
}

.template-body-field {
    min-width: 0;
}

.template-body-field textarea {
    min-height: 360px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    line-height: 1.45;
    resize: vertical;
}

.template-live-preview {
    min-width: 0;
    border: 1px solid var(--border);
    background: #fff;
}

.template-live-preview-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
}

.template-live-preview-head h4 {
    margin: 0;
    font-size: 14px;
}

.template-live-preview-head span {
    color: var(--muted);
    font-size: 12px;
}

.template-live-preview iframe {
    display: block;
    width: 100%;
    min-height: 360px;
    border: 0;
    background: #fff;
}

.template-editor-actions {
    display: flex;
    justify-content: flex-end;
}

.campaign-page-head,
.campaign-panel {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.campaign-panel {
    padding: 22px;
}

.campaign-form {
    display: grid;
    gap: 16px;
}

/* Campagna avanzata: i pannelli "Pubblico (segmento)" e "Invio" sono separati da spazio bianco
   (sono figli diretti del form; nel form normale il form vive dentro un singolo pannello, quindi
   questa regola non lo tocca). */
.campaign-form > .panel + .panel {
    margin-top: 20px;
}

/* Larghezza FISSA 1200px per entrambi i pannelli della campagna avanzata: senza questo, essendo
   grid-item con `margin:auto`, ogni pannello si dimensionava sul proprio contenuto (es. 608px vs
   946px) dando l'effetto "si adatta a caso". `max-width: 100%` è solo una rete anti-overflow su
   viewport stretti (sotto i 1200px utili), non rende la larghezza adattiva sopra. */
.campaign-advanced.campaign-form > .panel {
    width: 1200px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.campaign-section-title {
    margin: 0 0 14px;
    font-size: 18px;
}

.campaign-segment-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.campaign-form [hidden] {
    display: none !important;
}

.campaign-form-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
}

.campaign-field-half {
    grid-column: span 6;
}

.campaign-field-quarter {
    grid-column: span 3;
}

.campaign-send-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 190px 250px max-content;
    gap: 14px;
    align-items: end;
    justify-content: start;
}

.campaign-date-field input {
    min-width: 0;
}

.campaign-repeat-panel {
    grid-column: 1 / -1;
    /* Flex-wrap con allineamento in ALTO: i campi corti (Intervallo/Fine ripetizione/Data fine) non
       vengono "spinti in basso" sotto il box alto "Giorni settimana", evitando l'aspetto sovrapposto
       della vecchia griglia con `align-items: end`. I campi vanno a capo ordinatamente, mai uno sull'altro. */
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
    padding-top: 6px;
}

.campaign-repeat-panel > label {
    flex: 0 0 170px;
    margin: 0;
}

.campaign-repeat-panel .repeat-weekdays {
    flex: 0 0 auto;
    margin: 0;
}

.repeat-weekdays {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px 12px;
    align-self: stretch;
}

.repeat-weekdays legend {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    padding: 0 4px;
    text-transform: uppercase;
}

.repeat-weekday-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(82px, 1fr));
    gap: 8px;
}

.repeat-weekday {
    min-height: 28px;
}

.check-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    font-weight: 650;
}

.check-option input {
    width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--primary);
}

.campaign-actions {
    display: flex;
    gap: 14px;
    justify-content: flex-end;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.campaign-target-summary {
    margin-right: auto;
    color: var(--muted);
    font-size: 14px;
    font-weight: 750;
}

.campaign-target-summary strong {
    color: var(--text);
}

.campaign-progress {
    display: grid;
    min-width: 260px;
    gap: 6px;
    margin-right: auto;
}

.campaign-progress progress {
    width: 100%;
    height: 10px;
    accent-color: var(--primary);
}

.campaign-progress-text {
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
}

.campaign-detail-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.table-wrap {
    overflow-x: auto;
}

.table-wrap.allow-menu-overflow {
    overflow: visible;
}

.table-wrap.allow-menu-overflow table {
    overflow: visible;
}

.table-wrap table {
    width: max-content;
    min-width: 100%;
}

.table-wrap td {
    white-space: nowrap;
    vertical-align: middle;
}

.table-wrap td.record-editor {
    white-space: normal;
}

.actions-cell {
    position: relative;
    z-index: 1;
    width: 1%;
    text-align: right;
}

.actions-cell.is-open {
    z-index: 260;
}

.row-action-menu {
    position: relative;
    display: inline-flex;
    justify-content: flex-end;
}

.row-action-menu.is-open {
    z-index: 260;
}

.row-action-trigger {
    font-size: 20px;
    line-height: 1;
}

.row-action-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 260;
    min-width: 124px;
    padding: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
}

.row-action-dropdown[hidden] {
    display: none;
}

.row-action-dropdown form {
    margin: 0;
}

.row-action-dropdown button,
.row-action-dropdown a {
    display: flex;
    width: 100%;
    min-height: 36px;
    justify-content: flex-start;
    align-items: center;
    padding: 0 10px;
    color: var(--text);
    text-decoration: none;
}

.confirm-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(17, 24, 39, .45);
}

.confirm-modal-backdrop[hidden] {
    display: none;
}

.confirm-modal {
    width: min(420px, 100%);
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 18px;
    box-shadow: 0 18px 48px rgba(0,0,0,.18);
}

.delete-warning-banner {
    display: grid;
    gap: 6px;
    border: 1px solid #f3b4ad;
    background: var(--danger-bg);
    color: var(--danger);
    padding: 12px 14px;
}

.delete-warning-banner strong,
.delete-warning-banner span {
    display: block;
}

.confirm-modal-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
}

.confirm-modal-actions button {
    min-width: 112px;
}

.confirm-cancel {
    color: var(--accent);
}

.diff {
    display: grid;
    gap: 4px;
}

.compact-list {
    margin: 0;
    padding-left: 18px;
}

.compact-list li + li {
    margin-top: 4px;
}

.diff del {
    color: var(--danger);
}

.diff ins {
    color: var(--info);
    text-decoration: none;
}

/* ── Pagination ─────────────────────────────────────────────── */

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pagination-info {
    color: var(--muted);
    font-size: 13px;
}

.pagination-pages {
    display: flex;
    gap: 3px;
    align-items: center;
}

.page-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    min-height: unset;
}

a.page-item:hover {
    background: var(--surface-muted);
    text-decoration: none;
}

.page-item.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.page-item.disabled {
    color: var(--border);
    cursor: default;
    pointer-events: none;
}

.page-item.dots {
    border-color: transparent;
    background: transparent;
    cursor: default;
}

/* ── Sortable headers ───────────────────────────────────────── */

th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

th.sortable:hover {
    background: var(--border);
}

.sort-ind {
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}

/* ── Column toggles ──────────────────────────────────────────── */

.col-toggles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-bottom: 12px;
}

.col-toggles-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    margin-right: 2px;
}

.col-toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 99px;
    background: var(--surface);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    min-height: unset;
}

.col-toggle-pill input[type="checkbox"] {
    width: 12px;
    min-height: 12px;
    height: 12px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary);
}

.col-toggle-pill.extra-pill {
    border-style: dashed;
}

/* ── Per-column search row ───────────────────────────────────── */

.search-row td {
    padding: 5px 8px;
    background: var(--surface-muted);
    border-bottom: 2px solid var(--border);
}

.col-search {
    min-height: 28px;
    height: 28px;
    padding: 3px 8px;
    font-size: 12px;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
}

.col-search:focus {
    outline: 2px solid var(--primary);
    outline-offset: -1px;
}

/* ── Extra fields ────────────────────────────────────────────── */

.extra-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.extra-field {
    display: grid;
    gap: 2px;
    min-width: 140px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
}

.extra-key {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: 0.04em;
}

.extra-val {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
}

@media (max-width: 980px) {
    .campaign-form-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .campaign-field-half {
        grid-column: span 6;
    }

    .campaign-field-quarter {
        grid-column: span 3;
    }

    .campaign-repeat-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }

    .campaign-detail-summary {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    .repeat-weekday-grid {
        grid-template-columns: repeat(2, minmax(90px, 1fr));
    }
}

@media (max-width: 760px) {
    .topbar-inner {
        grid-template-columns: 1fr;
        padding: 12px 0;
    }

    .nav,
    .nav-actions {
        justify-content: flex-start;
    }

    .nav {
        flex-wrap: wrap;
        overflow: visible;
    }

    .nav-actions {
        overflow-x: auto;
    }

    .grid.two,
    .grid.three {
        grid-template-columns: 1fr;
    }

    .compact-form {
        grid-template-columns: 1fr;
    }

    .history-filter-form .history-filter-combobox,
    .history-filter-form .date-filter-group,
    .history-filter-form .table-actions {
        grid-column: 1 / -1;
    }

    .template-editor-meta,
    .campaign-form-grid,
    .template-editor-workspace {
        grid-template-columns: 1fr;
    }

    .campaign-page-head,
    .campaign-panel {
        max-width: none;
    }

    .campaign-panel {
        padding: 18px;
    }

    .campaign-field-half,
    .campaign-field-quarter,
    .campaign-send-row,
    .campaign-repeat-panel {
        grid-column: 1 / -1;
    }

    .campaign-send-row {
        grid-template-columns: 1fr;
    }

    .campaign-repeat-panel {
        grid-template-columns: 1fr;
    }

    .campaign-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .campaign-target-summary,
    .campaign-progress {
        margin-right: 0;
        min-width: 0;
        width: 100%;
    }

    .campaign-detail-summary {
        grid-template-columns: 1fr;
    }

    .repeat-weekday-grid {
        grid-template-columns: repeat(2, minmax(90px, 1fr));
    }

    .template-body-field textarea,
    .template-live-preview iframe {
        min-height: 280px;
    }

    .page-head {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ── Segment builder (pagine advanced) ─────────────────────────────────────────────────── */
.segment-builder { font-size: 13px; }

.seg-summary {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text);
}

.seg-group {
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    background: #fbfbfe;
    padding: 10px 12px;
}
.seg-group--nested { border-left-color: #0891b2; background: #f7feff; }

.seg-group-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; font-weight: 600; }
.seg-group-head .seg-logic { font-weight: 700; color: var(--primary); min-height: 34px; padding: 4px 8px; }
.seg-group--nested .seg-group-head .seg-logic { color: #0891b2; }

.seg-children { display: flex; flex-direction: column; }
/* Connettore E/O tra i figli (escluso il primo), derivato dal logic del gruppo. */
.seg-children > .seg-row + .seg-row { position: relative; margin-top: 22px; }
.seg-children[data-logic="and"] > .seg-row + .seg-row::before,
.seg-children[data-logic="or"]  > .seg-row + .seg-row::before {
    position: absolute; top: -17px; left: 0;
    font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--muted);
}
.seg-children[data-logic="and"] > .seg-row + .seg-row::before { content: "— E —"; }
.seg-children[data-logic="or"]  > .seg-row + .seg-row::before { content: "— O —"; }

.seg-cond {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--border); padding: 6px 8px;
}
.seg-cond.is-invalid, .seg-group.is-invalid { border-color: #fda29b; background: #fef3f2; }
/* I controlli della condizione stanno sulla STESSA riga, ognuno largo il necessario: serve
   sovrascrivere la regola globale `select/input { width: 100% }` (che faceva occupare al selettore
   Colonna/Tag/Survey/Contatto l'intera riga, spingendo gli altri elementi a capo). */
.seg-cond select, .seg-cond input { width: auto; min-height: 34px; padding: 4px 8px; }
.seg-cond .seg-field, .seg-cond .seg-op, .seg-cond .seg-val { display: inline-flex; align-items: center; }
/* I select di colonna/survey/scope possono avere etichette lunghe: cap per non allungare la riga. */
.seg-cond .seg-col, .seg-cond .seg-survey, .seg-cond .seg-scope { max-width: 240px; }
.seg-cond .seg-value[type="text"] { min-width: 12em; }
.seg-cond .seg-amount { width: 5em; }

.seg-hint { flex-basis: 100%; color: var(--danger); font-size: 12px; margin-top: 2px; }

.seg-addbtns { margin-top: 10px; display: flex; gap: 6px; }

.seg-del, .seg-del-cond {
    margin-left: auto; border: 1px solid var(--border); background: var(--surface-muted);
    color: var(--danger); cursor: pointer; padding: 2px 8px; font-weight: 700; line-height: 1;
}

/* ── Associa Tag: tab, tag picker, barra di applicazione ───────────────────── */
.ta-tabs { display: flex; gap: 8px; margin: 8px 0 18px; border-bottom: 1px solid var(--border, #ddd); }
.ta-tab { background: none; border: 0; padding: 10px 16px; cursor: pointer; color: var(--muted, #666); border-bottom: 2px solid transparent; }
.ta-tab.active { color: var(--primary, #3730a3); border-bottom-color: var(--primary, #3730a3); font-weight: 600; }
.ta-apply { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border, #ddd); }

/* Caption sopra al selettore tag (muted, uppercase, coerente con i col-toggles). */
.ta-apply-label {
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muted, #667085);
    margin-bottom: 8px;
}

/* Selettore tag: chip selezionabili. Il checkbox nativo e' nascosto; l'intera chip e' il controllo.
   Ogni chip porta il proprio colore via --tag (impostato in JS sull'elemento label). */
.ta-tagpicker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ta-tagpicker:empty { display: none; }

.ta-tag-pill {
    --tag: #888;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--border, #d0d5dd);
    border-radius: var(--radius, 0);
    background: #fff;
    color: var(--text, #111827);
    font-size: .82rem;
    line-height: 1.25;
    cursor: pointer;
    user-select: none;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}

/* Checkbox nativo nascosto ma accessibile (tastiera + screen reader). */
.ta-tag-pill input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

/* Swatch quadrato col colore del tag (stesso linguaggio di .tag-pill::before). */
.ta-tag-pill .ta-tag-sw {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    background: var(--tag);
    border: 1px solid rgba(16, 24, 40, 0.18);
    border-radius: var(--radius, 0);
}

.ta-tag-pill:hover { border-color: var(--tag); }
.ta-tag-pill:focus-within { outline: 2px solid var(--tag); outline-offset: 2px; }

/* Stato selezionato: tinta tenue del tag + anello interno del colore + grassetto + spunta a destra. */
.ta-tag-pill:has(input:checked) {
    border-color: var(--tag);
    background: color-mix(in srgb, var(--tag) 12%, #fff);
    box-shadow: inset 0 0 0 1px var(--tag);
    font-weight: 650;
    padding-right: 26px;
}
.ta-tag-pill:has(input:checked)::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 5px;
    height: 9px;
    margin-top: -6px;
    border: solid var(--text, #111827);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Fallback per browser senza :has() — la chip resta leggibile anche senza stato pieno. */
@supports not (selector(:has(*))) {
    .ta-tag-pill input[type="checkbox"]:checked ~ .ta-tag-sw { box-shadow: 0 0 0 2px var(--tag); }
}

/* ── Statistiche survey (/surveys/{id}) ─────────────────────────────────────────────────────── */
.survey-stats { margin-bottom: 20px; }

/* Tile delle 5 metriche live: auto-fit, tema squadrato. */
.survey-stats-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.survey-stat-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 12px 14px;
}

.survey-stat-value { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.1; }
.survey-stat-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* Accenti coerenti coi badge di stato partecipante (ok/info/muted). */
.survey-stat-tile[data-metric="completed"] .survey-stat-value { color: #067647; }
.survey-stat-tile[data-metric="started"] .survey-stat-value { color: #175cd3; }
.survey-stat-tile[data-metric="not_started"] .survey-stat-value { color: var(--muted); }

/* Selettore range (7/14/30/Max): pill squadrate, attivo = primary. */
/* Header grafici: toggle "Mostra meno" a sinistra, selettore range a destra, stessa riga. */
.survey-stats-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

/* Selettore range = segmented control: pulsanti uniti in un unico blocco squadrato con divisori. */
.survey-stats-range {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
/* `.survey-stats-range .seg-range` (0,2,0) batte la regola globale dei button (0,1,1). */
.survey-stats-range .seg-range {
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
    color: var(--muted);
    padding: 6px 16px;
    min-height: 34px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.survey-stats-range .seg-range:last-child { border-right: 0; }
.survey-stats-range .seg-range:hover { background: var(--surface-muted); color: var(--text); }
.survey-stats-range .seg-range.active { background: var(--primary); color: #fff; }

/* Griglia 4 mini-grafici (2x2 su desktop, 1 colonna su mobile). */
.survey-stat-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.survey-stat-chart {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 12px 14px;
}
.survey-stat-chart figcaption { font-size: 12px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.survey-stat-chart-canvas { width: 100%; }

/* Header del grafico Completate: titolo a sinistra, toggle Totali/Giornaliere a destra. */
.survey-stat-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.survey-stat-chart-head figcaption { margin-bottom: 0; }

/* Toggle compatto Totali/Giornaliere = segmented control ridotto (riusa il linguaggio di .survey-stats-range). */
.survey-stat-mode { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.survey-stat-mode .seg-range {
    border: 0; border-right: 1px solid var(--border); border-radius: 0;
    background: var(--surface); color: var(--muted);
    padding: 3px 10px; min-height: 26px; font-weight: 700; font-size: 11px; cursor: pointer;
}
.survey-stat-mode .seg-range:last-child { border-right: 0; }
.survey-stat-mode .seg-range:hover { background: var(--surface-muted); color: var(--text); }
.survey-stat-mode .seg-range.active { background: var(--primary); color: #fff; }

.survey-stat-svg { width: 100%; height: auto; display: block; }
/* Griglia leggera; assi più marcati; etichette degli assi piccole e mute. */
.survey-stat-grid { stroke: var(--border); stroke-width: 1; opacity: .55; }
.survey-stat-axis { stroke: var(--muted); stroke-width: 1; }
.survey-stat-ylabel { fill: var(--muted); font-size: 9px; font-weight: 600; text-anchor: end; }
.survey-stat-xlabel { fill: var(--muted); font-size: 9px; font-weight: 600; }
.survey-stat-area { fill: color-mix(in srgb, var(--primary) 12%, transparent); stroke: none; }
.survey-stat-line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.survey-stat-dot { fill: var(--primary); }
.survey-stat-chart-empty { font-size: 13px; padding: 18px 0; text-align: center; }

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

/* Efficacia campagna — tiles compatte (pagina campagna) e fascia per tipologia (lista). */
.campaign-effectiveness-tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.eff-tile { display: flex; flex-direction: column; gap: 2px; min-width: 120px; padding: 10px 14px; border: 1px solid var(--border); background: var(--surface-muted); }
.eff-tile .eff-value { font-size: 22px; font-weight: 800; color: var(--text); }
.eff-tile .eff-label { font-size: 12px; color: var(--muted); }

.campaign-channel-cards { display: flex; flex-wrap: wrap; gap: 12px; }
.channel-card { flex: 1 1 220px; border: 1px solid var(--border); padding: 12px 14px; background: var(--surface); }
.channel-card-title { font-weight: 800; color: var(--text); margin-bottom: 6px; }
.channel-card-metrics { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 13px; }
.channel-card-metrics strong { color: var(--text); }